/* F-149: the themes and what everyone can set for themselves. The colours are tokens on :root in styles.css; this file swaps them. Loaded after polish.css. */

/* ---------- light: the same steel, in daylight */
:root[data-theme="light"] {
  --steel-950: #e5e8eb;
  --steel-900: #f1f3f4;
  --steel-850: #fbfcfc;
  --steel-800: #ffffff;
  --steel-700: #dfe3e6;
  --steel-600: #aab2b9;
  --steel-500: #6a737d;
  --bone: #181c20;
  --bone-dim: #3b4249;
  --bone-faint: #565e67;
  --hazard-deep: #8a6a06;
  --accent-text: #6f5400;
  --danger: #b02c18;
  --ok: #1f6e27;
  --info: #1a5ca6;
  --lift: 0, 0, 0;
  --well: 255, 255, 255;
  --edge: 205, 210, 215;
  --sink: 255, 255, 255;
  --plate: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  --plate-edge: inset 0 1px 0 rgba(255, 255, 255, .9);
  --plate-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 8px 22px -16px rgba(0, 0, 0, .35);
  --chart-grid: #d5dade;
  --chart-ink: #4d555d;
  --chart-text: #181c20;
  --chart-dot: #ffffff;
  color-scheme: light;
}
:root[data-theme="light"] body { background: var(--steel-900); }
:root[data-theme="light"] .strip { background: var(--steel-850); border-bottom: 1px solid var(--steel-600); box-shadow: 0 8px 20px -18px rgba(0, 0, 0, .5); }
:root[data-theme="light"] .timer { text-shadow: none; }
:root[data-theme="light"] .side { background: var(--steel-950); border-right-color: var(--steel-600); }
:root[data-theme="light"] ::selection { background: rgba(242, 194, 48, .55); color: #000; }
:root[data-theme="light"] .nav a.active { background: linear-gradient(90deg, rgba(242, 194, 48, .42), rgba(242, 194, 48, .1)); }

/* ---------- high contrast: stronger words and edges, on either theme */
:root[data-contrast="high"] { --bone: #ffffff; --bone-dim: #f0f0f0; --bone-faint: #d6d6d6; --steel-600: #a4adb6; --steel-700: #4b545d; --steel-900: #0b0d0f; --steel-850: #121518; --steel-800: #15181c; --plate: #15181c; --chart-ink: #dcdcdc; --chart-grid: #6c757e; }
:root[data-theme="light"][data-contrast="high"] { --bone: #000000; --bone-dim: #141414; --bone-faint: #2c2c2c; --steel-600: #4d555d; --steel-700: #aeb5bb; --steel-900: #ffffff; --steel-850: #ffffff; --steel-800: #ffffff; --plate: #ffffff; --accent-text: #4a3800; --chart-ink: #222222; --chart-grid: #7d858c; }
:root[data-contrast="high"] :focus-visible { outline-width: 3px; outline-offset: 3px; }
:root[data-contrast="high"] .btn, :root[data-contrast="high"] input, :root[data-contrast="high"] select, :root[data-contrast="high"] textarea, :root[data-contrast="high"] .panel, :root[data-contrast="high"] .chip { border: 1px solid var(--steel-600); }

/* ---------- colour-blind: blue and orange in place of green and red, and a shape as well as a colour */
:root[data-cvd="on"] { --ok: #5aa9ff; --danger: #ff9d3c; }
:root[data-theme="light"][data-cvd="on"] { --ok: #0b5cad; --danger: #a64b00; }
:root[data-cvd="on"] .chip.ok i, :root[data-cvd="on"] .chip.good i { border-radius: 50%; }
:root[data-cvd="on"] .chip.err i, :root[data-cvd="on"] .chip.bad i { border-radius: 0; transform: rotate(45deg); }
:root[data-cvd="on"] .chip.warn i { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
:root[data-cvd="on"] .chip.ok::after { content: " ✓"; }
:root[data-cvd="on"] .chip.err::after { content: " !"; }

/* ---------- more room between the lines */
:root[data-spacing="wide"] body { line-height: 1.85; letter-spacing: .012em; }
:root[data-spacing="wide"] p, :root[data-spacing="wide"] li { margin-bottom: .75em; }

/* ---------- no motion, by choice; the system's wish is in styles.css */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *::before, *::after { animation: none !important; transition: none !important; } .spark { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- past the menu, without a mouse */
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 6px; background: var(--hazard); color: var(--hazard-ink); font-weight: 700; text-decoration: none; transition: top .12s; }
.skip-link:focus { top: 12px; }
#page:focus { outline: none; }

/* ---------- targets large enough for a finger or an unsteady hand */
summary { min-height: 24px; }
.btn, .seg-btns button { min-height: 28px; }
.info-btn { min-width: 24px; min-height: 24px; width: 24px; height: 24px; }
@media (pointer: coarse) { .btn, .nav a, select, input:not([type=checkbox]):not([type=radio]):not([type=color]) { min-height: 44px; } input[type=checkbox], input[type=radio] { width: 22px; height: 22px; } }

/* the arrows beside a phase: not inside the line that opens it, so each does one thing */
.item-wrap { position: relative; }
.item-wrap > .item-actions { position: absolute; top: 7px; right: 12px; gap: 4px; }
.item-wrap > .item > summary { padding-right: 96px; }

/* ---------- press and answer */
.btn { transition: transform .09s var(--ease-out, ease), box-shadow .15s, background .15s, filter .15s; }
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
details > summary { transition: color .12s; }
details[open] > :not(summary) { animation: unfold .2s var(--ease-out, ease) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(-3px); } }
input[type=checkbox] { transition: box-shadow .12s, background .12s; }
.shake { animation: shake .34s ease both; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.toast.ok::before { content: "✓ "; font-weight: 700; }
.toast.err::before { content: "! "; font-weight: 700; }
.pop { animation: pop .3s var(--ease-spring, ease) both; }
@keyframes pop { from { transform: scale(.94); } }

/* ---------- a moment: a phase starts, someone wins */
.moment { position: fixed; left: 50%; top: 22%; z-index: 900; transform: translateX(-50%); padding: 14px 28px; border-radius: 10px; background: var(--hazard); color: var(--hazard-ink); font: 700 30px/1.1 var(--font-display); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7); animation: moment 2.6s var(--ease-out, ease) both; pointer-events: none; text-align: center; max-width: 90vw; }
@keyframes moment { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.96); } 10%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
.spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 1px; background: var(--hazard); animation: spark .9s var(--ease-out, ease) both; }
.spark:nth-child(3n) { background: var(--bone); }
@keyframes spark { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(200deg); } }

/* ---------- the phases along the top: a name that does not fit ends in dots, and every phase stays readable */
.track { min-width: 0; }
.track .seg { min-width: 56px; flex: 1 1 auto !important; display: flex; align-items: center; justify-content: center; }
.track .seg span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the menu on a phone: closed until asked for */
.menu-btn { display: none; }
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
  .side .nav, .side .who { display: none; }
  .side.open .nav { display: flex; }
  .side.open .who { display: block; width: 100%; }
  .section > header { flex-wrap: wrap; }
  .section > header > * { min-width: 0; overflow-wrap: anywhere; }
  .page { min-width: 0; overflow-wrap: anywhere; }
  .shell > main { min-width: 0; }
  .row { flex-wrap: wrap; }
  .cols, .cols.even { grid-template-columns: minmax(0, 1fr); }
  .stack, .section, .section > * { min-width: 0; max-width: 100%; }
  .strip .track { overflow-x: auto; }
}

/* ---------- the tour: what it explains stands in the light, the rest stays usable behind it */
.tour { position: fixed; z-index: 800; width: min(360px, calc(100vw - 24px)); padding: 16px 18px; background: var(--plate); color: var(--bone); border: 1px solid var(--hazard); border-radius: 10px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .75); transition: left .22s var(--ease-out, ease), top .22s var(--ease-out, ease); }
.tour h2 { margin: 0 0 6px; }
.tour p { margin: 0 0 10px; color: var(--bone-dim); }
.tour .row { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.tour-light { position: fixed; z-index: 790; pointer-events: none; border: 2px solid var(--hazard); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(8, 10, 12, .55); transition: left .22s var(--ease-out, ease), top .22s var(--ease-out, ease), width .22s var(--ease-out, ease), height .22s var(--ease-out, ease); }
.course-offer { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; background: var(--plate); border: 1px solid var(--hazard); border-radius: 10px; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7); }
.course-offer b { display: block; margin-bottom: 4px; }
.course-offer .row { margin-top: 10px; gap: 8px; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps-list li { display: flex; gap: 10px; align-items: baseline; }
.steps-list .tick { flex: none; width: 22px; text-align: center; font-weight: 700; color: var(--bone-faint); }
.steps-list li.ok .tick { color: var(--ok); }
.glossary dt { font-weight: 700; margin-top: 10px; }
.glossary dd { margin: 0; color: var(--bone-dim); }

/* ---------- the choices on My account */
.look-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 22px; align-items: start; }
.look-grid + .look-grid { margin-top: 14px; }
.look-grid .check { display: flex; gap: 8px; align-items: center; }

/* ---------- scrollbars that do not take over: the menu and the tabs scroll a lot */
.side, .tabs, .table-wrap, main { scrollbar-width: thin; scrollbar-color: var(--steel-600) transparent; }

@media (max-width: 760px) { .strip .title .phase { font-size: 22px; white-space: normal; } }