/* Nav Log Practice: a sectional chart and a kneeboard nav log. Pale chart paper, magenta for the course line and the
   actions (the colour of VFR chart symbols), lake blue and town yellow on the chart, condensed headings like chart
   titles, and log entries in a monospace so headings and times line up. Black on white on paper. */
:root {
  --bg: #efede2;
  --paper: #fbfaf5;
  --ink: #182230;
  --muted: #4c5765;
  --line: #d4d0c0;
  --edge: #857f6d;
  --accent: #8e1a68;
  --accent-ink: #ffffff;
  --accent-soft: #f4e3ee;
  --info: #1f5d8c;
  --ok: #17663a;
  --ok-soft: #dcefe2;
  --close: #7a5300;
  --close-soft: #f6ebd2;
  --bad: #a2261f;
  --bad-soft: #f8e1de;
  --focus: #1b5fd0;
  --thead: #e6e2d2;
  --void: #e9e6da;
  --chart: #f7f5e6;
  --grid: #cdd6d6;
  --route: #a0207a;
  --water: #4f8fc0;
  --lake: #b7d6ec;
  --town: #f1d77a;
  --town-edge: #a8892b;
  --road: #a48f6e;
  --apt: #1d4f8a;
  --head: "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --r: 3px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161d;
    --paper: #18212b;
    --ink: #e6ebf0;
    --muted: #a7b2bf;
    --line: #2d3946;
    --edge: #6c7a89;
    --accent: #ea8cc9;
    --accent-ink: #2a0a1f;
    --accent-soft: #3a1d31;
    --info: #8cc3f0;
    --ok: #8adca6;
    --ok-soft: #14301f;
    --close: #f0c56b;
    --close-soft: #352a12;
    --bad: #ff9c8f;
    --bad-soft: #3a1c18;
    --focus: #8ab8ff;
    --thead: #212c38;
    --void: #1d2630;
    --chart: #1c2630;
    --grid: #33424f;
    --route: #f08fd0;
    --water: #78b4e3;
    --lake: #23486a;
    --town: #7d6a2a;
    --town-edge: #c9ad55;
    --road: #9a8a70;
    --apt: #8cc3f0;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
a { color: var(--info); text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.hero { padding: 18px 0 4px; max-width: 860px; }
h1 { font: 700 clamp(1.9rem, 6vw, 2.8rem)/1.05 var(--head); margin: 0 0 8px; letter-spacing: 0.005em; }
.lede { margin: 0 0 12px; color: var(--muted); max-width: 70ch; }
h2 { font: 700 1.35rem/1.2 var(--head); margin: 0 0 10px; }

.tool { display: flex; flex-direction: column; }
.setup { order: 1; margin: 6px 0 4px; padding: 12px 0 0; border-top: 3px solid var(--accent); }
.work-area { order: 2; min-width: 0; }
.refcard { order: 3; }
@media (min-width: 1020px) {
  .tool { display: grid; grid-template-columns: minmax(0, 1fr) 560px; column-gap: 30px; align-items: start; }
  .refcard dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .refcard { max-width: none; }
  .setup { grid-column: 1; grid-row: 1; }
  .refcard { grid-column: 2; grid-row: 1; margin-top: 6px; }
  .work-area { grid-column: 1 / -1; grid-row: 2; }
}
fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.levels { max-width: 560px; }
.seg { display: grid; border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; }
.seg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sg { position: relative; display: block; cursor: pointer; }
.sg + .sg { border-left: 1px solid var(--edge); }
.sg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sg > span { display: flex; align-items: center; justify-content: center; min-height: 44px; height: 100%; padding: 4px; text-align: center; font-size: 0.95rem; font-weight: 600; background: var(--paper); line-height: 1.15; }
.sg input:checked + span { background: var(--accent); color: var(--accent-ink); }
.sg input:focus-visible + span, .tg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.lvhint { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }
.toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tg { position: relative; display: block; cursor: pointer; }
.tg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tg span { display: flex; flex-direction: column; justify-content: center; min-height: 44px; height: 100%; padding: 5px 10px 5px 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--muted); line-height: 1.2; }
.tg span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 14px; height: 14px; margin-top: -8px; border: 2px solid var(--edge); border-radius: 2px; }
.tg b { font-size: 0.95rem; font-weight: 600; }
.tg small { color: var(--muted); font-size: 0.82rem; }
.tg input:checked + span { color: var(--ink); border-color: var(--edge); }
.tg input:checked + span::before { border-color: var(--accent); background: var(--accent); }
.tg input:checked + span::after { content: ""; position: absolute; left: 15px; top: 50%; width: 4px; height: 8px; margin-top: -7px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
#drill-set { margin-bottom: 10px; }
#drill-set[hidden] { display: none; }
.setrow { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
label.inline { display: flex; align-items: center; gap: 8px; font-weight: 600; }
select, input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r); min-height: 44px; padding: 6px 10px; }
select { max-width: 100%; }
.btn { font: inherit; font-weight: 650; min-height: 44px; padding: 8px 16px; border-radius: var(--r); border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.small { padding: 6px 14px; }
.btn:hover { filter: brightness(0.95); }
.link { font: inherit; background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--info); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* the reference card: the log's rules, like a kneeboard card */
.refcard { margin: 16px 0 6px; padding: 10px 14px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ink); max-width: 560px; font-size: 0.92rem; }
.refcard h2 { font-size: 1.1rem; margin: 0 0 4px; }
.refcard dl { margin: 0; }
.refcard dl > div { border-top: 1px solid var(--line); padding-top: 4px; }
.refcard dt { font-weight: 650; }
.refcard dd { margin: 0 0 5px; color: var(--muted); line-height: 1.35; }
.refcard .tol { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.35; }

.note { overflow-wrap: anywhere; margin: 12px 0; padding: 10px 12px; border-left: 5px solid var(--close); background: var(--close-soft); }
.note.info { border-left-color: var(--info); background: var(--paper); }
.note .link { min-height: 0; padding: 0; font-weight: 600; }

/* the sheet */
.sheet { margin: 12px 0 0; }
.sheet:focus { outline: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.sheet-head h2 { margin: 0; font-size: 1.35rem; }
.code { font-family: var(--mono); letter-spacing: 0.08em; color: var(--accent); }
.score { margin: 0; font-size: 0.95rem; color: var(--muted); }
.sub { margin: 6px 0 0; font-weight: 600; }
.practice { margin: 2px 0 0; font-size: 0.9rem; color: var(--muted); }

/* the flight papers: brief, chart, plotter and tables */
.papers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 26px; margin: 12px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.papers h3 { font: 700 1.12rem/1.2 var(--head); margin: 0 0 6px; }
@media (min-width: 1020px) {
  .papers { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .brief-wrap { grid-column: 1 / -1; }
  .chart-wrap { grid-column: 1; }
  .tables { grid-column: 2; }
}
.brief { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 0 18px; }
.brief div { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.brief dt { flex: none; width: 6.4em; color: var(--muted); font-size: 0.92rem; }
.brief dd { margin: 0; min-width: 0; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zoom { background: transparent; }
@media (min-width: 900px) { .zoom { display: none; } }
.figview { overflow: hidden; border: 1px solid var(--edge); background: var(--chart); }
.figview.zoomed { overflow-x: auto; }
.figview.zoomed svg.chart { width: 760px; max-width: none; }
@media (min-width: 900px) { .figview.zoomed { overflow: hidden; } .figview.zoomed svg.chart { width: 100%; } }
svg.chart { display: block; width: 100%; height: auto; }
.chart .bg { fill: var(--chart); }
.chart .frame { fill: none; stroke: var(--ink); stroke-width: 0.3; }
.chart .mer, .chart .par { stroke: var(--grid); stroke-width: 0.25; }
.chart .road { fill: none; stroke: var(--road); stroke-width: 0.55; }
.chart .river { fill: none; stroke: var(--water); stroke-width: 0.55; }
.chart .iso { stroke: var(--route); stroke-width: 0.4; stroke-dasharray: 2.2 1.2; }
.chart .isolab { font: 700 3px var(--sans); fill: var(--route); paint-order: stroke; stroke: var(--chart); stroke-width: 0.9px; stroke-linejoin: round; }
.chart .rose circle { fill: none; stroke: var(--muted); stroke-width: 0.3; }
.chart .rose line { stroke: var(--muted); stroke-width: 0.22; }
.chart .rose text { font: 2.1px var(--sans); fill: var(--muted); text-anchor: middle; }
.chart .rose .rc { font-weight: 700; font-size: 2.5px; }
.chart .rose .rt { font-size: 1.7px; letter-spacing: 0.1px; }
.chart .route { fill: none; stroke: var(--route); stroke-width: 0.75; stroke-linejoin: round; }
.chart .dist rect { fill: var(--chart); stroke: var(--route); stroke-width: 0.3; }
.chart .dist text { font: 700 2.7px var(--sans); fill: var(--route); text-anchor: middle; }
.chart .apt circle { fill: var(--chart); stroke: var(--apt); stroke-width: 0.55; }
.chart .apt line { stroke: var(--apt); stroke-width: 0.7; }
.chart .town { fill: var(--town); stroke: var(--town-edge); stroke-width: 0.25; }
.chart .lake { fill: var(--lake); stroke: var(--water); stroke-width: 0.3; }
.chart .tower path { fill: none; stroke: var(--ink); stroke-width: 0.35; }
.chart .tower circle { fill: var(--ink); }
.chart .cp { fill: none; stroke: var(--route); stroke-width: 0.35; }
.chart .names text { paint-order: stroke; stroke: var(--chart); stroke-width: 0.9px; stroke-linejoin: round; fill: var(--ink); }
.chart .nm { font: 700 3px var(--sans); }
.chart .apt-n { fill: var(--apt) !important; }
.chart .sm { font: 2.4px var(--sans); }
.chart .north path { fill: var(--ink); }
.chart .north line { stroke: var(--ink); stroke-width: 0.35; }
.chart .north text { font: 700 2.4px var(--sans); fill: var(--ink); }
.chart .scale line { stroke: var(--ink); stroke-width: 0.3; }
.chart .scale .bar { stroke-width: 0.6; }
.chart .scale text { font: 2.4px var(--sans); fill: var(--ink); text-anchor: middle; }
.chart .scale .unit { text-anchor: start; }
.chart .foot { font: 2.4px var(--sans); fill: var(--muted); }
.plotbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.plotbar span { font-weight: 600; margin-right: 2px; }
.sgb { font: inherit; font-size: 0.92rem; min-height: 44px; min-width: 44px; padding: 4px 10px; border: 1px solid var(--edge); border-radius: var(--r); background: var(--paper); color: var(--ink); cursor: pointer; }
.sgb[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plotview { margin: 8px 0 0; max-width: 380px; }
.plotview[hidden] { display: none; }
svg.plotter { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--edge); border-radius: 50%; }
.plotter line { stroke: var(--ink); stroke-width: 0.18; }
.plotter line.t10 { stroke-width: 0.3; }
.plotter text { font: 3px var(--sans); fill: var(--ink); text-anchor: middle; }
.plotter .pm { stroke: var(--muted); stroke-width: 0.3; stroke-dasharray: 1.5 1; }
.plotter .pr { stroke: var(--route); stroke-width: 0.5; }
.plotter .pc { fill: var(--route); }
.plotter .pn { font-weight: 700; font-size: 2.8px; }
.tapnote { margin: 4px 0 0; font-size: 0.88rem; color: var(--muted); }
.tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.papers > * { min-width: 0; }
.twrap { overflow-x: auto; max-width: 100%; }
.fbfig { margin: 0; min-width: 0; }
.fbfig figcaption, .perf caption, .devcard caption { font-weight: 650; text-align: left; margin-bottom: 4px; font-size: 0.95rem; }
.fbwrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); }
pre.fb { margin: 0; padding: 8px 10px; font: 14px/1.45 var(--mono); color: var(--ink); }
.tnote { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); }
table.perf, table.devcard { border-collapse: collapse; background: var(--paper); font-variant-numeric: tabular-nums; font-size: 0.92rem; }
table.perf th, table.perf td, table.devcard th, table.devcard td { border: 1px solid var(--line); padding: 3px 7px; text-align: center; }
table.perf thead th { background: var(--thead); font-weight: 650; font-size: 0.84rem; line-height: 1.2; }
table.perf tbody th, table.devcard th { text-align: left; font-weight: 650; background: var(--thead); white-space: nowrap; }
table.perf td.na { color: var(--muted); font-size: 0.8rem; }
table.devcard td { font-family: var(--mono); min-width: 2.7em; }

/* questions */
.qs { list-style: none; margin: 0; padding: 0; }
.q { border-bottom: 1px solid var(--line); padding: 18px 0 10px; }
.q h3 { font: 700 1.2rem/1.25 var(--head); margin: 0 0 4px; }
.q h3 .qn { color: var(--accent); margin-right: 6px; }
.q .scen { margin: 0 0 10px; max-width: 75ch; }
.q .fbfig, .q table.devcard { margin: 0 0 12px; max-width: 640px; }

/* the nav log */
.logwrap { overflow-x: auto; margin: 0 0 8px; max-width: 100%; }
table.navlog { border-collapse: collapse; background: var(--paper); font-variant-numeric: tabular-nums; border: 1px solid var(--edge); min-width: 100%; }
table.navlog th, table.navlog td { padding: 0 4px; height: 44px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); white-space: nowrap; }
table.navlog thead th { background: var(--thead); font: 650 0.9rem/1.1 var(--sans); text-align: center; height: 40px; border-bottom: 2px solid var(--edge); }
table.navlog thead small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--muted); }
table.navlog abbr { text-decoration: none; }
table.navlog .c-leg { text-align: left; font-weight: 600; font-size: 0.88rem; position: sticky; left: 0; background: var(--paper); z-index: 1; border-right: 2px solid var(--accent); white-space: normal; min-width: 8.2em; max-width: 11em; line-height: 1.15; padding: 2px 6px; }
table.navlog thead .c-leg { background: var(--thead); }
table.navlog .num { font-family: var(--mono); text-align: right; }
table.navlog .given { font-weight: 700; padding-right: 8px; }
table.navlog td.void { background: var(--void); }
table.navlog td.blank input { width: 3.9em; min-height: 36px; border: 0; border-bottom: 1px dashed var(--edge); border-radius: 0; background: transparent; padding: 4px 3px; font-family: var(--mono); text-align: right; }
table.navlog td.c-wca input, table.navlog td.c-var input { width: 4.3em; }
table.navlog td.blank input:focus { background: var(--accent-soft); }
table.navlog td.is-right { background: var(--ok-soft); }
table.navlog td.is-right input { border-bottom: 2px solid var(--ok); }
table.navlog td.is-wrong, table.navlog td.is-unread { background: var(--bad-soft); }
table.navlog td.is-wrong input, table.navlog td.is-unread input { border-bottom: 2px solid var(--bad); }
table.navlog td.is-close { background: var(--close-soft); }
table.navlog td.is-close input { border-bottom: 2px solid var(--close); }
table.navlog tr.tot th, table.navlog tr.tot td { border-top: 3px double var(--edge); }
table.navlog .kv { font-weight: 700; color: var(--accent); }
.swipe { margin: -2px 0 8px; font-size: 0.86rem; color: var(--muted); }
@media (min-width: 1100px) { .swipe { display: none; } }
.cellnotes:empty { display: none; }
.cellfb { margin: 4px 0 10px; padding-left: 1.2em; max-width: 75ch; font-size: 0.94rem; }
.cellfb li { margin: 2px 0; }
.cellfb li.wrong, .cellfb li.unread { color: var(--bad); }
.cellfb li.close { color: var(--close); }

.qparts { max-width: 820px; }
.q-winds .qparts, .q-perf .qparts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 18px; max-width: none; }
.q-winds .qfoot, .q-winds .work, .q-perf .qfoot, .q-perf .work { grid-column: 1 / -1; }
.part { margin: 0 0 14px; min-width: 0; }
.part > .prompt, .part legend { display: block; font-weight: 600; margin: 0 0 6px; }
.opts { display: grid; gap: 4px; }
.opts.row { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); max-width: 680px; }
.opt { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.opt input { margin: 3px 0 0; min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.opt .ot { min-width: 0; }
.opt:has(input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.ain { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.ain input { width: 8em; max-width: 100%; font-family: var(--mono); }
.ain .unit { color: var(--muted); white-space: nowrap; }
.qfoot { display: flex; align-items: center; gap: 4px 16px; flex-wrap: wrap; }
.fbwrap:empty { display: none; }
.fb { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--r); max-width: 70ch; font-size: 0.95rem; }
.fb.right { background: var(--ok-soft); color: var(--ok); }
.fb.close { background: var(--close-soft); color: var(--close); }
.fb.wrong, .fb.unread { background: var(--bad-soft); color: var(--bad); }
.part.is-right .ain input { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.part.is-wrong .ain input, .part.is-unread .ain input { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.part.is-close .ain input { border-color: var(--close); box-shadow: inset 0 0 0 1px var(--close); }
.work { margin-top: 4px; min-width: 0; }
.work > summary { cursor: pointer; color: var(--muted); font-size: 0.93rem; padding: 10px 0; min-height: 44px; display: flex; align-items: center; list-style: none; }
.work > summary::-webkit-details-marker { display: none; }
.work > summary::before { content: "+"; margin-right: 6px; font-weight: 700; font-family: var(--mono); }
.work[open] > summary::before { content: "−"; }
.work .ans { margin: 8px 0 2px; }
.steps { margin: 2px 0 8px; padding-left: 1.3em; font-size: 0.94rem; overflow-wrap: anywhere; }
.ask { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 6px 10px; background: var(--close-soft); border-radius: var(--r); }
.ask .link { padding: 0 4px; }
.ask[hidden] { display: none; }
.sheet-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; }

.share { margin: 10px 0 8px; }
.print-row { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; }
.print-row label, .share-out label { display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; font-weight: 600; }
.share-out input { width: 100%; }
.recent { margin-top: 12px; border-top: 1px solid var(--line); }
.recent summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 4px 0; }
.recent small { display: block; color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 8px 0 10px; }

.toast { position: fixed; left: 50%; top: 12px; transform: translate(-50%, -160%); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); max-width: calc(100% - 32px); transition: transform 0.2s; z-index: 20; }
.toast.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* content */
.content { padding: 22px 0 8px; max-width: 840px; }
.content h2 { margin-top: 30px; }
.content p, .steps-list { max-width: 70ch; }
.steps-list { padding-left: 1.4em; }
.steps-list li { margin: 4px 0; }
.ltab { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.ltab th, .ltab td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ltab th { font-size: 0.88rem; color: var(--muted); font-weight: 600; }
.ltab td:first-child { font-weight: 600; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; min-height: 44px; }
.faq details p { margin: 0 0 12px; }
.sources { font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; margin-top: 22px; }

footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 16px 0 28px; color: var(--muted); font-size: 0.92rem; }
.indep { margin: 0 0 10px; }
.sb-footer p { margin: 6px 0; }
.sb-more { line-height: 1.8; }
.sb-footer a { color: var(--ink); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 600px) {
  .tg small { display: none; }
  .toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg > span { font-size: 0.88rem; }
  .ltab thead { display: none; }
  .ltab tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .ltab td { display: block; border: 0; padding: 1px 0; }
  .brief dt { width: 5.6em; }
}

/* print: worksheet and key only; the chart true to scale, the log as a ruled table */
.print-root { display: none; }
@page { margin: 12mm 12mm; }
@media print {
  :root { --ink: #000; --muted: #333; --line: #999; --paper: #fff; --edge: #555; --thead: #fff; --void: #fff; --accent: #000;
    --chart: #fff; --grid: #bdbdbd; --route: #8e1a68; --water: #3d7fb3; --lake: #d4e6f4; --town: #f3e3a2; --town-edge: #9a7d22; --road: #8a7a60; --apt: #123d70; }
  body { background: #fff; color: #000; font: 10pt/1.36 var(--sans); }
  main, footer, .toast, .skip { display: none !important; }
  .print-root { display: block; }
  svg, .devcard, .perf { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  table.pt { width: 100%; border-collapse: collapse; }
  table.pt > tbody > tr > td, table.pt > thead > tr > td { padding: 0; }
  .prun { font: 8pt var(--sans); color: #444; text-align: right; padding-bottom: 4pt !important; }
  .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2pt solid #000; margin-bottom: 4pt; }
  .ph h2 { font: 700 15pt var(--head); margin: 0; }
  .ph p { margin: 0; }
  .pmeta { display: flex; justify-content: space-between; gap: 12pt; margin: 4pt 0 4pt; }
  .plabel { margin: 0 0 4pt; font-size: 8.5pt; font-style: italic; }
  .pbrief .brief { grid-template-columns: 1fr 1fr; gap: 0 12pt; font-size: 9pt; }
  .pbrief .brief div { padding: 1pt 0; border-bottom: 0.5pt solid #bbb; }
  .pbrief .brief dt { width: 5.6em; font-size: 9pt; color: #333; }
  .pchart { margin: 5pt 0 0; break-inside: avoid; page-break-inside: avoid; }
  /* actual size: the map is 180 mm wide, 1 cm = 6 NM */
  .pchart svg.chart { width: 180mm; height: 156mm; border: 0; }
  .pnote { margin: 2pt 0 0; font-size: 8.5pt; }
  .ptables { break-before: page; page-break-before: always; display: grid; gap: 7pt; }
  .ptables .fbfig figcaption, .ptables caption { font-size: 10pt; }
  .twrap { overflow: visible; }
  .ptables .fbwrap { overflow: visible; border: 0.6pt solid #777; }
  .ptables pre.fb { font-size: 9pt; padding: 4pt 6pt; white-space: pre; }
  .pperf { display: grid; grid-template-columns: auto auto; gap: 10pt; align-items: start; justify-content: start; }
  table.perf, table.devcard { font-size: 9pt; }
  table.perf th, table.perf td, table.devcard th, table.devcard td { border: 0.6pt solid #777; padding: 1.5pt 5pt; }
  table.perf thead th, table.perf tbody th, table.devcard th { background: #eee; }
  .tnote { font-size: 8pt; color: #222; max-width: 95mm; }
  .pq { list-style: none; margin: 6pt 0 0; padding: 0; }
  .pq > li { padding: 5pt 0 7pt; border-bottom: 0.75pt solid #999; break-inside: avoid; page-break-inside: avoid; }
  .pq > li.pq-log { break-before: page; page-break-before: always; border-bottom: 0; }
  .pq h3 { font: 700 11.5pt var(--head); margin: 0 0 2pt; break-after: avoid; page-break-after: avoid; }
  .pq .pscen { margin: 0 0 4pt; }
  .pq .fbfig, .pq table.devcard { margin: 3pt 0 5pt; }
  .pq .fbwrap { overflow: visible; border: 0.6pt solid #777; }
  .pq pre.fb { font-size: 8.5pt; padding: 3pt 5pt; }
  .pparts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14pt; }
  .pp { break-inside: avoid; page-break-inside: avoid; }
  .pp p { margin: 2pt 0 0; }
  .pline { margin-top: 1pt !important; font-family: var(--mono); }
  .popts span { margin-right: 10pt; white-space: nowrap; }
  /* the log on paper: every cell ruled, rows tall enough to write in */
  .logwrap { overflow: visible; margin: 2pt 0 6pt; }
  table.navlog { width: 100%; min-width: 0; table-layout: fixed; border: 1pt solid #000; font-size: 9pt; break-inside: avoid; page-break-inside: avoid; }
  table.navlog thead .c-leg { width: 33mm; }
  table.navlog th, table.navlog td { height: 11mm; border: 0.6pt solid #777; padding: 0 3pt; position: static; white-space: normal; }
  table.navlog thead th { height: 9mm; border-bottom: 1.2pt solid #000; font-size: 8.5pt; background: #fff; }
  table.navlog thead small { font-size: 7pt; color: #333; }
  table.navlog .c-leg { border-right: 1.2pt solid #000; min-width: 0; max-width: none; background: #fff; font-size: 8pt; }
  table.navlog td.void { background: #e2e2e2; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  table.navlog .kv { color: #000; }
  .pkey { break-before: page; page-break-before: always; }
  .pk { list-style: none; margin: 0; padding: 0; }
  .pk > li { padding: 4pt 0 6pt; border-bottom: 0.75pt solid #999; }
  .pk h3 { font: 700 11pt var(--head); margin: 0 0 3pt; break-after: avoid; page-break-after: avoid; }
  .pk table.navlog th, .pk table.navlog td { height: 7mm; }
  table.pkt { width: 100%; border-collapse: collapse; font-size: 8pt; line-height: 1.25; }
  table.pkt td { border-bottom: 0.5pt solid #bbb; padding: 1pt 4pt 1pt 0; vertical-align: top; }
  table.pkt tr { break-inside: avoid; page-break-inside: avoid; }
  .pkq { width: 30%; }
  .pka { width: 15%; font-weight: 700; white-space: nowrap; }
  .pkw { color: #222; }
}