/* Approach autopilot guide. Uses the tokens and buttons from style.css. */
.ag{max-width:1440px;margin:0 auto;padding:0 20px 24px}
.ag-back{text-decoration:none;color:var(--text)}
.ag h1,.ag h2,.ag h3{letter-spacing:-.02em}

/* Hero */
.ag-hero{padding:34px 0 22px;max-width:980px}
.ag-hero h1{font-size:clamp(28px,4.6vw,48px);line-height:1.05;margin:10px 0 14px;font-weight:750}
.ag-lead{color:#c3cfdc;font-size:16px;line-height:1.6;max-width:760px}
.ag-scenario{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.ag-scenario div{border:1px solid #33445a;background:#111a26;border-radius:6px;padding:7px 11px}
.ag-scenario dt{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8ea2ba}
.ag-scenario dd{margin:2px 0 0;font:600 13px var(--mono);color:#e6edf5}

/* Fleet picker */
.ag-fleet{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:18px 26px;padding:18px 0 22px;border-top:1px solid #243244;border-bottom:1px solid #243244}
.ag-fleet-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ag-ac{min-height:54px;min-width:120px;padding:8px 13px;border-radius:7px;border:1px solid #3d4c60;background:linear-gradient(#1b2533,#151d29);text-align:left;display:flex;flex-direction:column;gap:3px}
.ag-ac b{font-size:15px}
.ag-ac span{font-size:11px;color:#94a6bc}
.ag-ac:hover{border-color:#7890ad}
.ag-ac[aria-pressed=true]{border-color:var(--amber);background:linear-gradient(#2c2618,#1d1a14);box-shadow:0 0 0 1px var(--amber) inset}
.ag-ac[aria-pressed=true] span{color:#e5c98f}

/* Lesson */
.ag-lesson{padding-top:26px;scroll-margin-top:10px}
.ag-lesson-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.ag-lesson-head h2{font-size:clamp(24px,3vw,34px);margin:6px 0 6px;font-weight:720}
.ag-lesson-head p:last-child{color:#b7c4d3;max-width:760px;line-height:1.55}
.ag-practice{text-decoration:none;white-space:nowrap;flex:none}
.ag-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:20px;align-items:start}
.ag-visual{display:grid;gap:14px;min-width:0}
.ag-panel-figure{margin-bottom:16px}
.ag-figure{margin:0;background:#0d141e;border:1px solid #2a384b;border-radius:10px;padding:12px;min-width:0}
.ag-figure figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#93a8c1;margin:0 2px 10px}
.ag-figure figcaption .text-button{letter-spacing:.04em;text-transform:none;font-size:12px;color:var(--amber)}
.ag-panel{position:relative;border-radius:8px;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#2a3037,#101317 70%);padding:10px 6px;transition:transform .12s}
.ag-panel.ag-pressed{transform:scale(.995)}
.ag-panel-svg{display:block;width:100%;height:auto;aspect-ratio:1300/260;font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,"Liberation Sans",sans-serif;user-select:none;-webkit-user-select:none}
.ag-panel-svg.is-zoomed{aspect-ratio:520/260}
.ag-lbl{text-anchor:middle;font-weight:700;letter-spacing:.04em}
.ag-leg{font-weight:700;letter-spacing:.06em}
.ag-hit rect,.ag-hit circle{fill:transparent;pointer-events:all;cursor:pointer}
.ag-hit:focus{outline:none}
.ag-hit-target:focus-visible rect,.ag-hit-target:focus-visible circle{stroke:#fff;stroke-width:3}
.ag-ring{fill:none;stroke:var(--amber);stroke-width:3.5;filter:drop-shadow(0 0 6px #f4bd5f)}
.ag-ring-2{stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ag-pulse 1.6s ease-out infinite}
@keyframes ag-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.28)}}
.ag-message{margin-top:9px;font-size:13px;color:#e5c98f}

.ag-fma{border-radius:6px;overflow:hidden;border:4px solid #181d23;outline:1px solid #46525f;background:#000}
.ag-fma-svg{display:block;width:100%;height:auto;max-height:150px;font-family:"Arial Narrow","Roboto Condensed","Liberation Sans Narrow","Helvetica Neue",Arial,sans-serif;font-stretch:condensed}
.ag-fma-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:12px;color:#a9b8c9}
.ag-fma-key span{display:flex;align-items:center;gap:6px}
.ag-fma-key i{width:10px;height:10px;border-radius:2px;display:inline-block}
.ag-fma-key .ag-key-box{background:none;border:1.5px solid #fff}

.ag-profile-svg{display:block;width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.ag-pr-t{font-size:9px;font-weight:700;letter-spacing:.16em;fill:#6f849c}
.ag-pr-s{font-size:10.5px;fill:#a9b8c9}
.ag-pr-now{font-size:12px;font-weight:700;fill:var(--amber)}
.ag-pr-beam{fill:#79eda612}
.ag-pr-loc{stroke:#79eda6;stroke-width:1.4;stroke-dasharray:6 5}
.ag-pr-vec{stroke:#7cb6ff;stroke-width:1.4;stroke-dasharray:3 4;fill:none}
.ag-pr-rwy{fill:#4b5563;stroke:#9aa7b6;stroke-width:.8}
.ag-pr-rwyc{stroke:#fff;stroke-width:.8;stroke-dasharray:3 3}
.ag-pr-gnd{stroke:#546479;stroke-width:1.4}
.ag-pr-gs{stroke:#f07be6;stroke-width:2;fill:none}
.ag-pr-gsx{stroke:#f07be6;stroke-width:1;stroke-dasharray:3 5;opacity:.45}
.ag-pr-lvl{stroke:#7cb6ff;stroke-width:1.6}
.ag-pr-tick{stroke:#a9b8c9;stroke-width:1.2}
.ag-pr-ga{stroke:var(--amber);stroke-width:2;fill:none;stroke-dasharray:5 4}
.ag-pr-ga-head{fill:var(--amber)}
.ag-pr-plane path{fill:#f3f6fa;stroke:#0d141e;stroke-width:.8}

/* Coach card */
.ag-coach{display:grid;gap:14px;position:sticky;top:12px}
.ag-card{background:linear-gradient(170deg,#18222f,#121a25);border:1px solid #3f5068;border-radius:10px;padding:18px}
.ag-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 11px var(--mono);color:#93a8c1;letter-spacing:.08em}
.ag-where{font-family:inherit;letter-spacing:.02em;color:#cfdbe8;background:#223044;border:1px solid #3a4b62;border-radius:20px;padding:3px 9px;text-align:right}
.ag-dots{display:flex;gap:4px;margin:12px 0 14px}
.ag-dots i{flex:1;height:4px;border-radius:2px;background:#2b3a4e}
.ag-dots i.done{background:#4e7d62}
.ag-dots i.now{background:var(--amber)}
.ag-card h3{font-size:23px;line-height:1.2;margin-bottom:10px}
.ag-card>p{color:#d2dce7;line-height:1.6;font-size:15px}
.ag-card b{color:#fff}
.ag-action{margin-top:14px;border:1px solid #6d5a2f;background:#2a2416;border-radius:8px;padding:12px;display:grid;gap:10px}
.ag-action p{color:#f1ddb0;font-size:14px;line-height:1.5}
.ag-action.is-done{border-color:#2f6b49;background:#12281d}
.ag-action.is-done p{color:#bff3d1}
.ag-action.is-done p b{color:var(--green)}
.ag-action .secondary-action{justify-self:start;min-height:40px}
.ag-tip{margin-top:14px;padding-left:12px;border-left:3px solid #3b82c9;color:#b9c8d8;font-size:14px;line-height:1.55}
.ag-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.ag-nav .primary-action{flex:1}
.ag-list{background:#0d141e;border:1px solid #2a384b;border-radius:10px;padding:12px 14px}
.ag-list summary{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#93a8c1;min-height:28px;display:flex;align-items:center}
.ag-list ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.ag-list li button{width:100%;display:flex;gap:10px;align-items:center;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:7px 8px;min-height:38px;font-size:14px;color:#c6d3e1}
.ag-list li button:hover{background:#18222f}
.ag-list li button.now{border-color:var(--amber);color:#fff;background:#1d1a14}
.ag-step-n{font:600 11px var(--mono);color:#7d8fa5;min-width:20px}
.ag-list li button.done .ag-step-n{color:var(--green)}
.ag-trouble summary{color:var(--amber)}
.ag-trouble ul{margin:10px 0 2px;padding-left:18px;display:grid;gap:9px;color:#c6d3e1;font-size:14px;line-height:1.55}
.ag-notes{padding:4px 2px}
.ag-notes ul{margin:8px 0 0;padding-left:18px;display:grid;gap:8px;color:#b7c4d3;font-size:14px;line-height:1.55}

/* Cheat sheet */
.ag-compare-wrap{margin-top:40px;padding-top:26px;border-top:1px solid #243244}
.ag-compare-wrap h2{font-size:clamp(22px,2.6vw,30px);margin:8px 0 16px}
.ag-table-scroll{overflow-x:auto;border:1px solid #2a384b;border-radius:10px}
.ag-compare{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.ag-compare th,.ag-compare td{padding:11px 14px;text-align:left;border-bottom:1px solid #223044;vertical-align:top}
.ag-compare thead th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#93a8c1;background:#111a26}
.ag-compare tbody th{color:#fff;font-weight:650;white-space:nowrap}
.ag-compare td{color:#c9d5e2;font-family:var(--mono);font-size:13px}
.ag-compare tr:last-child>*{border-bottom:0}
.ag-chip{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.ag-disclaimer{margin-top:22px;color:#7c90a8;font-size:12px;line-height:1.6;max-width:900px}
.page-footer a{color:#a2b1c5}

@media(max-width:1100px){
  .ag-grid{grid-template-columns:1fr}
  .ag-coach{position:static}
  .ag-fleet{grid-template-columns:repeat(2,auto)}
}
@media(max-width:800px){
  .ag{padding:0 16px 20px}
  .ag-hero{padding-top:22px}
  .ag-lead{font-size:15px}
  .ag-fleet{grid-template-columns:minmax(0,1fr);gap:14px}
  .ag-fleet-group{min-width:0}
  .ag-grid{gap:14px}
  .ag-visual{display:contents}
  .ag-fma-figure{order:1}
  .ag-coach{order:2}
  .ag-profile-figure{order:3}
  .ag-fleet-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  .ag-fleet-row::-webkit-scrollbar{display:none}
  .ag-ac{flex:none}
  .ag-lesson-head{flex-direction:column;align-items:stretch}
  .ag-figure{padding:10px}
  .ag-card{padding:15px}
  .ag-card h3{font-size:20px}
  .ag-back span{display:none}
  .page-footer{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .ag-ring-2{animation:none}
  .ag-panel{transition:none}
}