/* PhD Quest — styles. Vanilla CSS, no build step. Light/dark, responsive, accessible. */

:root {
  --blue: #0a5ad6;
  --blue-strong: #0847a8;
  --gold: #f6c445;
  --gold-strong: #e0a92a;
  --focus: var(--blue);        /* 6.09:1 on white — WCAG 1.4.11 (gold fails at 1.6:1) */
  --check-border: #7b8798;     /* 3.6:1 unchecked-box border on white */

  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eef2f9;
  --text: #16202e;
  --text-soft: #4c5a6e;
  --border: #dce3ee;
  --shadow: 0 1px 3px rgba(16, 32, 46, .08), 0 8px 24px rgba(16, 32, 46, .06);

  --warn-bg: #fff6e5; --warn-border: #f0c268; --warn-text: #7a5300;
  --tip-bg: #e8f6ee;  --tip-border: #8fce9f;  --tip-text: #1f6b3a;
  --note-bg: #eef2f9; --note-border: #c3d0e6; --note-text: #35465e;

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 940px;
  --step: cubic-bezier(.22, .61, .36, 1);
}

/* Focus ring: --focus token keeps a ≥3:1 indicator in both themes (WCAG 1.4.11). */

[data-theme="dark"] {
  --bg: #0d1420;
  --surface: #151e2c;
  --surface-2: #1c2838;
  --text: #e9eef6;
  --text-soft: #a3b1c6;
  --border: #263447;
  --focus: var(--gold);        /* gold reads 11.3:1 on the dark surface */
  --check-border: #5f6f84;     /* 3.6:1 unchecked-box border on dark surface */
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);

  --warn-bg: #33280f; --warn-border: #6b551f; --warn-text: #f3cf82;
  --tip-bg: #12301f;  --tip-border: #2f6642;  --tip-text: #9fe0b4;
  --note-bg: #1c2838; --note-border: #33445c; --note-text: #b9c6da;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
[data-theme="dark"] a { color: #6fa8ff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 20px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; color: var(--text); }
.brand .cap { font-size: 1.3rem; }
.header-spacer { flex: 1; }
.btn-icon {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: .9rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s var(--step), border-color .15s;
}
.btn-icon:hover { background: var(--surface-2); border-color: var(--blue); }
.btn-icon:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* header progress meter */
.hprogress { display: flex; align-items: center; gap: 8px; min-width: 128px; }
.hprogress .track { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.hprogress .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .5s var(--step); }
.hprogress .pct { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem; color: var(--text-soft); min-width: 34px; text-align: right; }

/* ---------- Hero ---------- */
.hero { padding: 56px 0 30px; text-align: center; }
.hero .tagline { color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin: 0 0 12px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; margin: 0 0 16px; letter-spacing: -.02em; }
.hero .lead { max-width: 620px; margin: 0 auto 26px; color: var(--text-soft); font-size: 1.08rem; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 1rem; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent;
  transition: transform .12s var(--step), box-shadow .15s, background .15s;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(10, 90, 214, .35); }
.btn-primary:hover { background: var(--blue-strong); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--blue); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.disclaimer {
  max-width: 640px; margin: 26px auto 0; font-size: .9rem; color: var(--warn-text);
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 10px 16px;
}

/* ---------- Section heading ---------- */
.section-title { font-size: 1.5rem; margin: 40px 0 6px; letter-spacing: -.01em; }
#map:focus { outline: none; } /* programmatic focus target (Start button) — no ring on the whole section */

/* ---------- Quest map / timeline ---------- */
.timeline { position: relative; margin: 24px 0 10px; padding-left: 0; }
.stage { position: relative; margin: 0 0 22px; }
.stage-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.stage-head { display: flex; gap: 16px; align-items: center; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 16px 18px; color: inherit; font: inherit; }
.stage-head:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.stage-badge {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-strong)); position: relative;
}
.stage.done .stage-badge { background: linear-gradient(135deg, var(--gold-strong), var(--gold)); color: #3a2c00; }
/* Zero-required "waiting" stage: neutral info badge, not the gold done-star. */
.stage.info .stage-badge { background: var(--surface-2); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border); }
.stage-meta { flex: 1; min-width: 0; }
.stage-meta > span { display: block; }
.stage-month { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; }
.stage-title { font-size: 1.16rem; font-weight: 800; margin: 1px 0 2px; letter-spacing: -.01em; }
.stage-sub { color: var(--text-soft); font-size: .95rem; }
.stage-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-soft); font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.chevron { transition: transform .25s var(--step); color: var(--text-soft); }
.stage[aria-expanded="true"] .chevron, .stage.open .chevron { transform: rotate(180deg); }

.stage-body { display: none; padding: 0 18px 8px; }
.stage.open .stage-body { display: block; }

.stage-figure { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.stage-figure img { display: block; width: 100%; height: auto; }
.stage-figure figcaption { font-size: .82rem; color: var(--text-soft); padding: 8px 12px; border-top: 1px solid var(--border); }

.stage-note { font-size: .92rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 6px 0 14px; padding: 0; }
.step { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 8px 0; background: var(--surface); transition: border-color .15s, background .15s; }
.step.checked { background: var(--surface-2); border-color: color-mix(in srgb, var(--gold) 50%, var(--border)); }
.step-main { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.step-check { position: relative; flex: 0 0 auto; margin-top: 2px; width: 24px; height: 24px; }
.step-check input { position: absolute; inset: 0; margin: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.step-check .box {
  width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--check-border); display: grid; place-items: center;
  color: transparent; font-weight: 900; font-size: .95rem; transition: background .15s, border-color .15s, color .15s; background: var(--surface);
}
.step-check input:hover + .box { border-color: var(--blue); }
.step-check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }
.step.checked .step-check .box { background: var(--gold); border-color: var(--gold-strong); color: #3a2c00; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 650; }
.step.checked .step-title { text-decoration: line-through; color: var(--text-soft); text-decoration-color: var(--gold-strong); }
.badge-opt { display: inline-block; margin-left: 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--note-text); background: var(--note-bg); border: 1px solid var(--note-border); border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.step-detail { color: var(--text-soft); font-size: .93rem; margin-top: 4px; }

.callout { border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 8px; font-size: .9rem; border: 1px solid; }
.callout .lbl { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; display: block; margin-bottom: 2px; }
.callout.warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.callout.tip  { background: var(--tip-bg);  border-color: var(--tip-border);  color: var(--tip-text); }

.doc-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.doc-link {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: .85rem; font-weight: 650;
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; color: var(--text); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.doc-link:hover { border-color: var(--blue); background: var(--surface-2); }
.doc-link.tpl { }
.doc-link.ex { }
.doc-link .ic { font-size: .95rem; }
.doc-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Resources + footer ---------- */
.resources { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; margin: 10px 0 40px; }
.resources ul { margin: 8px 0 0; padding-left: 20px; }
.resources li { margin: 6px 0; }
.note-soft { font-size: .85rem; color: var(--text-soft); margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); padding: 28px 0; color: var(--text-soft); font-size: .9rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; text-align: center; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--step); z-index: 80;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Confetti ---------- */
.confetti-piece { position: fixed; top: -12px; width: 9px; height: 14px; z-index: 70; pointer-events: none; will-change: transform, opacity; }

@media (max-width: 620px) {
  .hero { padding: 36px 0 20px; }
  .stage-count .label-txt { display: none; }
  .header-row { gap: 10px; padding: 10px 16px; }
  .hprogress { min-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .btn, .chevron, .hprogress .fill, .toast, .step-check .box { transition: none !important; }
  .confetti-piece { display: none !important; }
}