/* CFI reading theme. Loaded last on every CFI page, so it overrides the shared look in ../dpe/styles.css
 * for /cfi/ pages only (the DPE section is untouched).
 *
 * Dark (default): dark gray instead of pure black, off-white instead of pure white, softened accents.
 * Light: for bright rooms. "Auto" follows the device; the toggle (theme.js) lets the reader override it.
 */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-700.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #14171a;
  --fg: #e3e6ea;
  --btn-bg: #14171a;
  --btn-hover: #1f3a5f;
  --btn-active: #2f6fbd;
  --panel-bg: #1b1f23;
  --panel-border: rgba(227, 230, 234, 0.16);
  --input-bg: #111417;
  --input-border: rgba(227, 230, 234, 0.32);
  --muted: #a3a9b0;
  --danger: #f19a9a;
  --danger-bg: rgba(241, 154, 154, 0.12);
  --success: #7bd3a0;
  --success-bg: rgba(123, 211, 160, 0.12);
  --amber: #e3b865;
  --amber-bg: rgba(227, 184, 101, 0.12);
  --link: #8fb8e8;
  --on-accent: #fff;
  --tint: rgba(255, 255, 255, 0.06);
  --tint-hover: rgba(255, 255, 255, 0.11);
  --track: rgba(255, 255, 255, 0.12);
  --raw-bg: rgba(0, 0, 0, 0.3);
  --card-edge: #6d737a;
  --card-shadow: rgba(0, 0, 0, 0.5);
  --admin-bg: #2c3136; --admin-edge: #1a1d20; --admin-hover: #3a4046;
  --c-vfr: #6fd69b; --c-mvfr: #86b9f5; --c-ifr: #f39a9a; --c-lifr: #e3a3f7;
  --img-dim: brightness(0.9);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f6f8; --fg: #1d2125; --btn-bg: #ffffff; --btn-hover: #dce8f7; --btn-active: #2f6fbd;
    --panel-bg: #ffffff; --panel-border: rgba(0, 0, 0, 0.15); --input-bg: #ffffff; --input-border: rgba(0, 0, 0, 0.38);
    --muted: #59616a; --danger: #b3261e; --danger-bg: rgba(179, 38, 30, 0.09); --success: #1b7f4b; --success-bg: rgba(27, 127, 75, 0.1);
    --amber: #8a5a00; --amber-bg: rgba(138, 90, 0, 0.1); --link: #1f5fa8;
    --tint: rgba(0, 0, 0, 0.05); --tint-hover: rgba(0, 0, 0, 0.09); --track: rgba(0, 0, 0, 0.12); --raw-bg: rgba(0, 0, 0, 0.06);
    --card-edge: #b4bac2; --card-shadow: rgba(0, 0, 0, 0.18);
    --admin-bg: #dfe3e8; --admin-edge: #b9bfc7; --admin-hover: #cfd5dc;
    --c-vfr: #19794a; --c-mvfr: #1d5fb0; --c-ifr: #b3261e; --c-lifr: #8a2fa8;
    --img-dim: none;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6f8; --fg: #1d2125; --btn-bg: #ffffff; --btn-hover: #dce8f7; --btn-active: #2f6fbd;
  --panel-bg: #ffffff; --panel-border: rgba(0, 0, 0, 0.15); --input-bg: #ffffff; --input-border: rgba(0, 0, 0, 0.38);
  --muted: #59616a; --danger: #b3261e; --danger-bg: rgba(179, 38, 30, 0.09); --success: #1b7f4b; --success-bg: rgba(27, 127, 75, 0.1);
  --amber: #8a5a00; --amber-bg: rgba(138, 90, 0, 0.1); --link: #1f5fa8;
  --tint: rgba(0, 0, 0, 0.05); --tint-hover: rgba(0, 0, 0, 0.09); --track: rgba(0, 0, 0, 0.12); --raw-bg: rgba(0, 0, 0, 0.06);
  --card-edge: #b4bac2; --card-shadow: rgba(0, 0, 0, 0.18);
  --admin-bg: #dfe3e8; --admin-edge: #b9bfc7; --admin-hover: #cfd5dc;
  --c-vfr: #19794a; --c-mvfr: #1d5fb0; --c-ifr: #b3261e; --c-lifr: #8a2fa8;
  --img-dim: none;
}

/* ---- reading comfort ---- */
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
a { color: var(--link); }
.btn-link { color: var(--link); }
::selection { background: var(--btn-active); color: #fff; }

/* ---- pieces the shared sheets colour directly ---- */
.option-card { box-shadow: 0 var(--depth) 0 0 var(--card-edge), 0 calc(var(--depth) + 6px) 14px var(--card-shadow); }
a.option-card:active { box-shadow: 0 0 0 0 var(--card-edge), 0 2px 6px var(--card-shadow); }
a.option-card:active, .tl-tabs button[aria-selected="true"], .btn-secondary.wb-go { color: #fff; }
.option-card .card-desc { color: var(--muted); }
.option-card.option-card-admin { background: var(--admin-bg); box-shadow: 0 calc(var(--depth) / 2) 0 0 var(--admin-edge), 0 calc(var(--depth) / 2 + 4px) 10px var(--card-shadow); }
.option-card.option-card-admin:hover, .option-card.option-card-admin:focus-visible { background: var(--admin-hover); }
a.option-card.option-card-admin:active { background: var(--admin-hover); color: var(--fg); box-shadow: 0 0 0 0 var(--admin-edge), 0 2px 6px var(--card-shadow); }

.wb-opt { background: var(--tint); }
.wb-opt:hover { background: var(--tint-hover); }
.wb-pg.cur, .qz-jump button.cur { outline-color: var(--fg); }
.syl-bar { background: var(--track); }
.wb-in:disabled, .wb-sel:disabled, .wb-area:disabled { background: var(--tint); }
.el-note, .qa-item .ans { color: var(--fg); }
.wb-inst, .cfi-badge.info { color: var(--link); }
.wb-img img, .qz-fig img { filter: var(--img-dim); }
.wx-raw { background: var(--raw-bg); }
.tl-out .rowline { border-top-color: var(--panel-border); }
.wx-cat.VFR { color: var(--c-vfr); border-color: var(--c-vfr); }
.wx-cat.MVFR { color: var(--c-mvfr); border-color: var(--c-mvfr); }
.wx-cat.IFR { color: var(--c-ifr); border-color: var(--c-ifr); }
.wx-cat.LIFR { color: var(--c-lifr); border-color: var(--c-lifr); }
.tl-f input, .tl-f select, .tl-f textarea, .fr-f input, .fr-f select, .fr-f textarea, .fr-date input { color-scheme: inherit; }

/* ---- theme toggle ---- */
.cfi-theme-toggle {
  position: fixed; top: 0.6rem; right: 0.6rem; z-index: 50;
  appearance: none; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--input-border);
  background: var(--panel-bg); color: var(--fg); font: inherit; font-size: 0.8rem; cursor: pointer; opacity: 0.92;
}
.cfi-theme-toggle:hover { background: var(--btn-hover); opacity: 1; }
.cfi-theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.cfi-theme-toggle .dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
@media (max-width: 520px) { .cfi-theme-toggle { top: 0.4rem; right: 0.4rem; padding: 0.3rem 0.6rem; } }
@media print { .cfi-theme-toggle { display: none; } }