/* Concorde fuel-balance explainer (/concorde): light dossier surfaces from /aircraft/dossier.css plus one dark panel
   for the interactive diagram. Tokens from /style.css. */
.cc-panel{background:var(--navy);color:#eef2f5;padding:54px 7% 58px}
.cc-panel .eyebrow{color:#bdcbd8;margin-bottom:14px}
.cc-panel h2{color:#fff}
.cc-panel h2 em{color:#a4b8c8}
.cc-panel .lede{color:#d5dee6}
.cc-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.9fr);gap:28px;align-items:start;margin-top:30px}
.planform-figure{margin:0;background:#0b1520;border:1px solid #2b3d4f;min-width:0}
.planform-figure .svg-scroll{overflow-x:auto}
.planform-figure svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.planform-figure figcaption{padding:12px 16px 14px;font-size:12px;line-height:1.7;color:#c4d0da;border-top:1px solid #2b3d4f}
.cc-label{fill:#c4d0da;font-size:13px}
.cc-label.strong{fill:#eef2f5;font-weight:700}
.cc-label.dim{fill:#6f8496;font-size:11px}
.cc-tank{fill:#0b1520;font-size:14px;font-weight:800}
#marker-lift,#marker-cg{transition:transform .35s var(--ease)}
#transfer-arrow,#tank-forward-fill,#tank-aft-fill{transition:opacity .35s}
.cc-controls{display:grid;gap:16px;align-content:start;min-width:0}
.cc-control{display:grid;gap:8px;padding:14px 16px;background:#132230;border:1px solid #2b3d4f}
.cc-control label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bdcbd8;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.cc-control output{font-family:var(--serif);font-size:26px;letter-spacing:0;text-transform:none;color:#fff;font-weight:400}
.cc-control input[type=range]{width:100%;height:44px;margin:0;background:transparent;accent-color:#e0a072;cursor:pointer}
.cc-control input[type=range]:focus-visible,.cc-presets button:focus-visible{outline:3px solid #8fc4ea;outline-offset:3px}
.cc-help{font-size:12px;line-height:1.6;color:#c4d0da;margin:0}
.cc-presets{display:flex;flex-wrap:wrap;gap:8px}
.cc-presets button{min-height:44px;padding:9px 14px;border:1px solid #4a5d70;color:#eef2f5;font-size:13px;line-height:1.35;background:#0b1520}
.cc-presets button:hover{border-color:#e0a072;color:#fff}
.cc-presets button[aria-pressed=true]{background:#e0a072;color:#101c29;border-color:#e0a072;font-weight:700}
.cc-readout{display:grid;gap:10px;padding:16px 18px;background:#132230;border:1px solid #2b3d4f}
.cc-readout .eyebrow{margin-bottom:0;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.sourced-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;background:#e4f1ea;color:#1f5a47}
.sourced-tag[data-sourced=false]{background:#f7e8dc;color:#7a3d12}
.cc-big{font-family:var(--serif);font-size:30px;line-height:1.1;color:#fff;margin:0}
.cc-big small{display:block;font-family:var(--sans);font-size:12px;color:#c4d0da;margin-top:4px;line-height:1.5}
.cc-track{height:14px;background:#0b1520;border:1px solid #2b3d4f;overflow:hidden}
.cc-fill{display:block;height:100%;background:linear-gradient(90deg,#7fc8a9,#c9def0);transition:width .35s var(--ease)}
.cc-phase{font-size:13.5px;line-height:1.6;color:#d5dee6;margin:0}
.sequence{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:seq}
.sequence li{display:grid;grid-template-columns:44px 1fr;gap:6px 18px;padding:18px 0;border-bottom:1px solid var(--line);counter-increment:seq}
.sequence li::before{content:counter(seq,decimal-leading-zero);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--copper);padding-top:6px}
.sequence strong{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15;grid-column:2}
.sequence p{grid-column:2;font-size:15px;line-height:1.7;color:#2f3e4a}
.concorde-page .section .sources{margin-top:18px}
@media(max-width:1100px){.cc-panel{padding-inline:5%}.cc-grid{grid-template-columns:1fr}}
@media(max-width:800px){.cc-panel{padding:44px 6% 48px}.planform-figure svg{min-width:720px}.cc-big{font-size:26px}.sequence li{grid-template-columns:1fr}.sequence li::before{grid-column:1}.sequence strong,.sequence p{grid-column:1}}
@media(max-width:480px){.cc-presets button{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){#marker-lift,#marker-cg,#transfer-arrow,#tank-forward-fill,#tank-aft-fill,.cc-fill{transition:none}}