/* Free guides (/learn/): pilot-book column + the course rail, plus the answer box, free-tool box and plan box. */
.diagram svg text { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.page ul, .page ol { padding-left: 1.25rem; }
.page li { margin-top: .35rem; }

/* The direct answer: what a search result or answer engine quotes. */
.answer { margin: 1.6rem 0 0; padding: 1rem 1.2rem 1.1rem; border-left: 4px solid var(--ink); background: var(--paper-2); border-radius: 0 var(--r) var(--r) 0; font-size: 1.04rem; }
.answer > b:first-child { display: block; font: 600 .7rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--magenta); margin-bottom: .5rem; }
.answer p:first-of-type { margin-top: 0; }

/* Free tool + plans boxes: a waypoint marker and a dashed passage line on the left edge. */
.try-free, .go-further { position: relative; margin: 2.2rem 0 0; padding: 1.15rem 1.25rem 1.25rem 3.4rem; border-radius: var(--r); }
.try-free { background: var(--shallows); }
.go-further { border: 1px solid var(--rule-strong); background: var(--paper); }
.try-free::before, .go-further::before { content: ""; position: absolute; left: 1.15rem; top: 1.25rem; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); }
.try-free::after, .go-further::after { content: ""; position: absolute; left: calc(1.15rem + 7px); top: 2.6rem; bottom: 1.1rem; border-left: 2px dashed var(--magenta); }
.try-free > b:first-child, .go-further > b:first-child { display: block; font: 600 .72rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .45rem; }
.try-free > b:first-child { color: var(--sea-deep); }
.go-further > b:first-child { color: var(--magenta); }
.try-free h3, .go-further h3 { font: 600 1.3rem/1.25 var(--display); margin: 0; }
.try-free p, .go-further p { margin-top: .5rem; }
.try-free .btn, .go-further .btn { margin-top: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Worked practice questions */
ol.practice { list-style: none; padding: 0; margin: 1.6rem 0 0; counter-reset: q; }
ol.practice > li { counter-increment: q; border-top: 1px solid var(--rule); padding: 1.1rem 0 .4rem 2.6rem; position: relative; margin: 0; }
ol.practice > li::before { content: counter(q, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font: 600 .9rem/1.3 var(--mono); color: var(--magenta); }
ol.practice .stem { margin: 0; font-weight: 600; }
ol.practice .mod { display: block; margin-top: .25rem; font: 500 .74rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
ol.practice details { margin-top: .6rem; }
ol.practice summary { cursor: pointer; font: 600 .88rem/1.3 var(--body); color: var(--sea-deep); }
ol.practice details p { margin-top: .45rem; }
ol.practice .ans { font-weight: 600; }

/* Hub list */
.guide-list { list-style: none; padding: 0 !important; margin: 2rem 0 0; border-left: 2px dashed var(--magenta); }
.guide-list li { position: relative; margin: 0; padding: .2rem 0 1.5rem 1.6rem; }
.guide-list li::before { content: ""; position: absolute; left: -9px; top: .55rem; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--paper); }
.guide-list a { font: 600 1.28rem/1.3 var(--display); color: var(--ink); text-decoration: none; }
.guide-list a:hover { color: var(--sea-deep); text-decoration: underline; }
.guide-list p { margin-top: .3rem; color: var(--ink-2); font-size: .97rem; }
.guide-list .tag { display: inline-block; margin-left: .4rem; font: 500 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); vertical-align: middle; }

td.fig, .data .fig { white-space: nowrap; }

/* Mayday call sheet */
.callsheet { font: 500 .95rem/1.7 var(--mono); background: var(--paper-2); border-radius: var(--r); padding: 1rem 1.15rem; margin-top: 1.2rem; overflow-wrap: anywhere; }
.callsheet b { color: var(--port); font-weight: 600; }
.buoy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.buoy-card { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); padding: .8rem .8rem 1rem; }
.buoy-card svg { width: 100%; height: 150px; }
.buoy-card h4 { font: 600 1rem/1.25 var(--display); margin-top: .4rem; }
.buoy-card p { font-size: .84rem; line-height: 1.45; color: var(--ink-2); margin-top: .35rem; }
.buoy-card .fig { display: inline-block; margin-top: .45rem; font-size: .8rem; color: var(--magenta); }