/* Study-guide-specific colors only — shared palette (--bg/--surface/--ink/
   --muted/--line/--accent) comes from base.css.
   --sectional-blue/--sectional-mag are deliberately real, saturated colors:
   they depict the actual blue/magenta used on FAA sectional charts, so this
   is accurate content, not decoration — muting them would misteach the
   chart convention. Sampled directly from the FAA's own public VFR
   Sectional tile service (tiles.arcgis.com/.../VFR_Sectional/MapServer,
   the live source backing the vfrmap.com panels used elsewhere on this
   page), not approximated from memory — the real printed chart ink is
   notably more muted than a typical "web blue/magenta." Dark-mode
   variants are the same hue lightened for legibility on a dark
   background; no real chart is printed on black, so those two values
   are a legibility adaptation, not a second "accurate" sample.
   --good/--warn/--bad are muted callout-box colors, unrelated to chart
   color accuracy. */
:root{
  --sectional-blue:#005A8C;--sectional-mag:#7A2E47;
  --good:#3F6B4F;--good-bg:#F1F6F2;
  --warn:#8A6A2F;--warn-bg:#FAF5EA;
  --bad:#9A3B3B;--bad-bg:#FBF2F2;
}
:root[data-theme="dark"]{
  --sectional-blue:#4FA3DB;--sectional-mag:#C97896;
  --good:#7FC79A;--good-bg:#1C2E22;
  --warn:#E0C070;--warn-bg:#2E2718;
  --bad:#E08585;--bad-bg:#2E1C1C;
}
html{scroll-behavior:smooth}
/* No .site-hero sits above these pages (plain header instead), so this
   just needs normal breathing room under the header, not the reduced
   value from when a hero's own bottom padding handled the separation. */
.wrap{position:relative;max-width:1400px;margin:auto;padding:56px 48px 160px}

.kicker{text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:.77rem;color:var(--muted)}

/* Section nav as a hidden, expandable drawer rather than a 14-link row
   taking up its own band of the page. The trigger stays visible the
   whole time you're scrolled through the study content: the anchor is
   `position:sticky` so it tracks scroll (not absolute, which only ever
   sits at one fixed point on the page), but `height:0` keeps it from
   reserving any space in the flow — it stops tracking once .wrap (its
   containing block) ends, so it never lingers past the actual content.
   The button inside is positioned against the anchor with the exact
   same left/right math as before (margin cancels .wrap's own padding so
   the reference edge is unchanged), only the vertical behavior changed. */
.guide-nav-toggle-anchor{position:sticky;top:30px;height:0;overflow:visible;z-index:5;margin:0 -48px}
.guide-nav-toggle{position:absolute;top:30px;right:0px;display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 16px;cursor:pointer;font:inherit;font-size:.82rem;font-weight:500;box-shadow:0 10px 24px -16px rgba(0,0,0,.3)}
.guide-nav-toggle:hover{background:var(--bg)}
.guide-nav-toggle svg{flex:0 0 auto}

.guide-nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;opacity:0;pointer-events:none;transition:opacity .25s ease}
.guide-nav-backdrop.is-visible{opacity:1;pointer-events:auto}

.guide-nav{position:fixed;top:0;right:0;bottom:0;width:270px;max-width:82vw;background:var(--surface);border-left:1px solid var(--line);box-shadow:-16px 0 48px -24px rgba(0,0,0,.35);z-index:40;padding:22px 26px 28px;display:flex;flex-direction:column;overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.guide-nav.is-open{transform:translateX(0)}
.guide-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.guide-nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;padding:11px 2px;border-bottom:1px solid var(--line)}
.guide-nav a:last-child{border-bottom:none}
.guide-nav a:hover{color:var(--accent)}
.guide-nav a.guide-nav-top{color:var(--accent);font-weight:600}
/* Groups the drawer into "this page" vs "other areas" now that the guide
   spans 5 pages — same small-caps treatment as .kicker, just scoped here
   so it only applies inside the drawer. */
.guide-nav-group-label{text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:.72rem;color:var(--muted);margin:16px 2px 4px}
.guide-nav-group-label:first-of-type{margin-top:4px}
/* The current area, shown as plain (non-link) text so "you are here" is
   never mistaken for something clickable — muted/reduced, not just a
   color swap, so it reads as inactive without relying on color alone. */
.guide-nav-current{display:block;color:var(--muted);font-size:.9rem;font-weight:500;padding:11px 2px;opacity:.7}
@media (prefers-reduced-motion: reduce){.guide-nav,.guide-nav-backdrop{transition:none}}

/* Per-area exam-weight line under the hero, and the shared placeholder
   block for images not yet available — dashed box, not a fake image, so
   it's never mistaken for real content. */
/* Plain page title for each area page — no .site-hero banner, just the
   existing .kicker treatment plus normal heading/paragraph flow, first
   thing inside .wrap. */
.guide-page-title{margin-bottom:36px}
.guide-page-title h1{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:600;margin:.4rem 0 .6rem;letter-spacing:-0.01em}
.guide-page-title p{color:var(--muted);line-height:1.6;max-width:720px}
.guide-area-weight{color:var(--muted);font-size:.9rem}
.img-placeholder{display:flex;align-items:center;justify-content:center;min-height:160px;margin:16px 0;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:.84rem;text-align:center;padding:20px}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px}
/* min-width:0 overrides the grid-item default of min-width:auto — without
   it, a single wide table/formula anywhere in the grid (tables don't wrap)
   forces that column's track wider than the container for every row,
   pushing every card on the page past the viewport on narrow screens. */
.card{grid-column:span 6;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:44px}
.wide{grid-column:1/-1}
.card h2{margin:.2rem 0 1.2rem;font-weight:600;display:flex;align-items:center;gap:14px}
.h2-icon{flex:0 0 auto;color:var(--accent)}
.card h3{margin:1.8rem 0 .7rem;font-weight:600}
.card p{margin:0 0 15px;line-height:1.6}
.mini{font-size:.9rem;color:var(--muted)}
.must{background:var(--warn-bg);border:1px solid var(--line);border-radius:10px;padding:20px 22px;line-height:1.6;margin:16px 0}
.good{background:var(--good-bg)}
.danger{background:var(--bad-bg)}
.formula{font-size:1.1rem;font-weight:600;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:18px 0}
.tbl{overflow:auto;margin:16px 0}
.tbl table{width:100%;border-collapse:collapse}
.tbl th,.tbl td{text-align:left;padding:13px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}
.tbl th{font-size:.78rem;text-transform:uppercase;color:var(--muted)}

.sw{display:inline-block;width:38px;height:12px;vertical-align:middle;margin-right:7px}
.solidblue{border-top:4px solid var(--sectional-blue)}
.solidmag{border-top:4px solid var(--sectional-mag)}
.dashblue{border-top:4px dashed var(--sectional-blue)}
.dashmag{border-top:4px dashed var(--sectional-mag)}
.text-sectional-blue{color:var(--sectional-blue)}
.text-sectional-mag{color:var(--sectional-mag)}
/* Mimics how a value actually prints on the chart (bracket-number ceilings,
   obstacle height pairs, etc.) so the reader sees the real symbol shape,
   not just a description of it. */
.chart-symbol{color:var(--sectional-blue);font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}
.chart-symbol-ink{color:var(--ink);font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em}

.steps{counter-reset:s}
.step{display:flex;gap:18px;padding:13px 0;line-height:1.6}
.step:before{counter-increment:s;content:counter(s);flex:0 0 30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:600}

.tag{display:inline-block;padding:3px 8px;border-radius:999px;font-size:.74rem;font-weight:600;background:var(--bg);color:var(--ink);border:1px solid var(--line)}
.memorize{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.calc{background:var(--good-bg);color:var(--good)}
.trap{background:var(--bad-bg);color:var(--bad)}

.ref{margin-top:18px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:9px;font-size:.86rem;color:var(--muted);line-height:1.6}
.brain{font-weight:500;padding:10px 0;border-bottom:1px solid var(--line);line-height:1.6}
.brain:last-child{border:0}

.check{list-style:none;padding:0}
.check li{padding:7px 0;line-height:1.6}
.check li:before{content:"✓";color:var(--good);font-weight:700;margin-right:11px}
.analogy{color:var(--muted);font-style:italic}

.maptools{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.locbtn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:.84rem;font-weight:500;cursor:pointer}
.locbtn:hover{background:color-mix(in srgb, var(--accent) 88%, black)}
.mapframe{width:100%;height:520px;border:1px solid var(--line);border-radius:10px;display:block}
@media(max-width:760px){.mapframe{height:400px}}

.minimap{margin:16px 0}
.minimap iframe{width:100%;height:420px;border:1px solid var(--line);border-radius:10px;display:block}
.minimap .cap{font-size:.78rem;color:var(--muted);margin-top:7px;line-height:1.6}

.faa-graphic{margin:16px 0}
.faa-graphic img{width:100%;display:block;border:1px solid var(--line);border-radius:10px;background:#fff}
.faa-graphic .cap{font-size:.78rem;color:var(--muted);margin-top:7px;line-height:1.6}
@media(max-width:760px){.minimap iframe{height:320px}}

.video-embed{margin:16px 0}
.video-embed .ratio{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.video-embed .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed .cap{font-size:.78rem;color:var(--muted);margin-top:7px;line-height:1.6}

.guide-footnote{text-align:center;color:var(--muted);font-size:.84rem;margin-top:36px;line-height:1.6}

/* Icon only once the layout itself goes to the same small-screen column
   it uses elsewhere (same 760px breakpoint as .wrap/.card above, not a
   separate narrower one) — the text label would otherwise crowd the edge
   and eat into the content column at any width narrow enough to already
   be in single-column mode. */
@media(max-width:760px){.wrap{padding:40px 24px 80px}.grid{grid-template-columns:1fr}.card{grid-column:1/-1;padding:28px}.guide-nav-toggle-anchor{margin:0 -24px}.guide-nav-toggle{right:24px;padding:10px}.guide-nav-toggle span{display:none}}
@media(max-width:480px){.wrap{padding:28px 16px 64px}.card{padding:20px}.guide-nav-toggle-anchor{margin:0 -16px}.guide-nav-toggle{right:16px}}
@media print{.wrap{max-width:none}nav{display:none}}