/* ==========================================================================
   Compete design system
   Direction: "scoreboard on graph paper". Competition life runs on dates and
   rounds, so the signature devices are a monospace countdown and a faint
   engineering-paper grid behind everything.
   ========================================================================== */

:root {
  --ink: #0d1626;
  --ink-2: #46536b;
  /* Was #71809b, which measured 3.78:1 on --surface-2 and failed WCAG AA for
     body text. #5f6d88 gives 4.94:1 there and 5.21:1 on white while keeping
     the same muted character. */
  --ink-3: #5f6d88;
  --paper: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --line: #dbe2ee;
  --line-strong: #c3cddf;

  --brand: #1d4ae0;
  --brand-deep: #16359f;
  --brand-wash: #eaeffd;

  --amber: #b45c09;
  --amber-wash: #fdf0dd;
  /* --amber is a strong accent for rules, borders and icons. As TEXT it only
     reaches 3.4:1 on white, so anything readable uses --amber-text instead,
     which clears WCAG AA on both white and the amber wash. */
  --amber-text: #8a4507;
  --green: #0b7a54;
  --green-wash: #e2f4ec;
  --red: #b02d22;
  --red-wash: #fdeae8;

  --hue: 222;
  --accent: hsl(var(--hue) 68% 42%);
  --accent-wash: hsl(var(--hue) 70% 96%);
  --accent-line: hsl(var(--hue) 50% 84%);

  --display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(13, 22, 38, .05), 0 8px 24px -12px rgba(13, 22, 38, .18);
  --shadow-lift: 0 2px 4px rgba(13, 22, 38, .06), 0 18px 40px -18px rgba(13, 22, 38, .3);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute must win over display rules set on the same element. */
[hidden] { display: none !important; }

.prose, .facts dd, .card, .side-card, .post { overflow-wrap: anywhere; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  /* Graph paper: the one ambient texture on the site. */
  background-image:
    linear-gradient(rgba(13, 22, 38, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 22, 38, .035) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand); }
img, svg { max-width: 100%; }
kbd {
  font-family: var(--mono); font-size: .72rem; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-3);
}
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.muted { color: var(--ink-3); font-size: .92rem; }

/* --------------------------------------------------------------- top bar */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark svg { width: 30px; height: 30px; display: block; }
.brand-word { font-family: var(--display); font-weight: 800; font-size: 1.16rem; letter-spacing: -.03em; }

.search-trigger {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong);
  background: var(--surface-2); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .9rem; color: var(--ink-3); transition: border-color .15s, background .15s;
}
.search-trigger:hover { border-color: var(--brand); background: #fff; }
.search-trigger svg { width: 16px; height: 16px; flex: none; }
.search-trigger span { flex: 1; text-align: left; }

.mainnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mainnav a { padding: 8px 12px; border-radius: var(--r-sm); font-size: .92rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.mainnav a:hover { background: var(--brand-wash); color: var(--brand-deep); }
.nav-cta { background: var(--ink); color: #fff !important; }
.nav-cta:hover { background: var(--brand-deep) !important; }

.menu-toggle { display: none; width: 40px; height: 38px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; padding: 10px 9px; flex-direction: column; justify-content: space-between; }
.menu-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.mobilenav { display: none; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); padding: 8px 20px 16px; }
.mobilenav a { padding: 11px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------ hero */
.hero { padding: 68px 0 44px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 55% 40% -10%;
  background: radial-gradient(ellipse at center, rgba(29, 74, 224, .13), transparent 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-eyebrow { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.hero h1 { max-width: 22ch; margin-bottom: .35em; }
.hero-lede { font-size: 1.1rem; color: var(--ink-2); max-width: 56ch; margin-bottom: 28px; }

.hero-search {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px;
  height: 62px; padding: 0 14px 0 20px; border: 2px solid var(--ink); background: var(--surface);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 1.05rem; color: var(--ink-3);
  box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s;
}
.hero-search:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.hero-search svg { width: 20px; height: 20px; color: var(--ink); flex: none; }
.hero-search span { flex: 1; text-align: left; }

.hero-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-shortcuts a {
  font-size: .86rem; font-weight: 500; padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-2); text-decoration: none;
}
.hero-shortcuts a:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-wash); }

/* -------------------------------------------------- signature: the ticker */
.ticker { display: flex; align-items: stretch; background: var(--ink); color: #fff; overflow: hidden; }
.ticker-label {
  display: flex; align-items: center; gap: 8px; flex: none; padding: 0 18px;
  font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; background: #060d1a; border-right: 1px solid rgba(255, 255, 255, .12);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #ffb020; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.ticker-track { overflow: hidden; flex: 1; }
.ticker-run { display: flex; gap: 0; width: max-content; animation: ticker 64s linear infinite; }
.ticker:hover .ticker-run, .ticker-run:focus-within { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  display: flex; align-items: center; gap: 9px; padding: 13px 22px; white-space: nowrap;
  color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .88rem;
  border-right: 1px solid rgba(255, 255, 255, .08);
}
.ticker-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ticker-item b { font-family: var(--mono); font-size: .8rem; color: #7fe3b4; }
.ticker-item.is-urgent b { color: #ffb020; }

/* -------------------------------------------------------------- sections */
.section { padding: 52px 0; }
.band { background: var(--surface); border-block: 1px solid var(--line); padding: 52px 0; margin: 10px 0; }
.band .section { padding: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--ink-3); font-size: .95rem; }

.pagehead { padding: 44px 0 30px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), transparent); }
.pagehead h1 { max-width: 20ch; }
.lede { font-size: 1.06rem; color: var(--ink-2); max-width: 66ch; }
.pagehead-meta { font-size: .92rem; color: var(--ink-3); font-family: var(--mono); }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 14px; font-size: .82rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }

.card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent-line); }
.card-link { display: flex; gap: 14px; padding: 18px 18px 12px; text-decoration: none; color: inherit; }
.card-crest { flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; }
.card-crest svg { width: 100%; height: 100%; display: block; }
.card-body { display: flex; flex-direction: column; min-width: 0; }
.card-eyebrow { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); font-weight: 700; }
.card-title { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; margin: 3px 0 4px; }
.card-tagline { font-size: .87rem; color: var(--ink-2); line-height: 1.45; }

.card-facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin: 0; padding: 4px 18px 12px; }
.card-facts li { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; border-bottom: 1px dotted var(--line); padding: 5px 0; }
.card-facts span { color: var(--ink-3); }
.card-facts b { font-weight: 600; text-align: right; }

.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }

.chip { font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.chip-num { font-size: .84rem; }
.chip-urgent { background: var(--red-wash); color: var(--red); }
.chip-soon { background: var(--amber-wash); color: var(--amber-text); }
.chip-open { background: var(--green-wash); color: var(--green); }
.chip-passed, .chip-unknown { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line-strong); }

.pips { display: inline-flex; gap: 3px; align-items: center; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); display: block; }
.pips i.on { background: var(--accent); }

/* ------------------------------------------------------- category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cat-tile {
  display: flex; flex-direction: column; gap: 3px; padding: 18px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); transition: transform .16s, box-shadow .16s;
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.cat-count { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--accent); }
.cat-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.cat-blurb { font-size: .82rem; color: var(--ink-3); line-height: 1.45; }

/* ------------------------------------------------------------ deadlines */
.deadline-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.deadline-list li + li { border-top: 1px solid var(--line); }
.deadline-list a { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; color: inherit; }
.deadline-list a:hover { background: var(--brand-wash); }
.dl-name { font-weight: 600; }
.dl-meta { grid-column: 2; font-size: .82rem; color: var(--ink-3); }
.dl-meta em { font-style: normal; color: var(--amber-text); }
.dl-cat { grid-row: 1 / 3; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.dl-days { grid-row: 1 / 3; text-align: center; }

/* ---------------------------------------------------------------- grades */
.grade-row { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-chip { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink); }
.grade-chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.grade-chip b { font-family: var(--display); font-size: .94rem; }
.grade-chip span { font-family: var(--mono); font-size: .74rem; opacity: .65; }
.grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.grade-card { display: flex; flex-direction: column; gap: 2px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; }
.grade-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.grade-card b { font-family: var(--display); font-size: 1.24rem; }
.grade-card span { font-size: .84rem; color: var(--ink-3); }
.grade-strip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.grade-strip a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); text-decoration: none; color: var(--ink-2); font-family: var(--mono); font-size: .86rem; }
.grade-strip a.on, .grade-strip a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------- detail */
.detail-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 6px 0 34px; }
.detail-head-inner { display: flex; gap: 24px; align-items: flex-start; }
.detail-crest { flex: none; width: 92px; height: 92px; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.detail-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.detail-cats a, .eyebrow-plain {
  font-family: var(--mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); background: var(--accent-wash); padding: 4px 10px; border-radius: 999px; text-decoration: none;
}
.detail-headtext h1 { margin-bottom: .15em; }
.detail-fullname { font-size: .92rem; color: var(--ink-3); margin: 0 0 .5em; }
.detail-tagline { font-size: 1.1rem; color: var(--ink-2); max-width: 62ch; }
.detail-org { font-size: .9rem; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font: inherit; font-size: .92rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .12s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--brand-wash); }
.btn-quiet { background: none; color: var(--ink-3); padding: 8px 12px; }
.btn-quiet:hover { color: var(--brand-deep); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding-top: 34px; padding-bottom: 20px; align-items: start; }

.facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 34px; }
.facts dl { margin: 0; }
.facts dl > div { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 14px 20px; }
.facts dl > div + div { border-top: 1px solid var(--line); }
.facts dt { font-size: .82rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; font-family: var(--mono); }
.facts dd { margin: 0; font-size: .95rem; }
.dd-note { display: block; font-size: .85rem; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
.flag { display: inline-block; font-family: var(--mono); font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; margin-left: 8px; vertical-align: middle; }
.flag-warn { background: var(--amber-wash); color: var(--amber); }
.flag-urgent { background: var(--red-wash); color: var(--red); }
.flag-soon { background: var(--amber-wash); color: var(--amber); }
.flag-open { background: var(--green-wash); color: var(--green); }

.prose { margin-bottom: 40px; }
.prose > h2 { margin-top: 0; padding-top: 4px; }
.prose p, .prose li { font-size: 1rem; line-height: 1.68; color: var(--ink); }
.prose-page { max-width: 74ch; }
.lede-para { font-size: 1.08rem; }
.cta-inline { margin-top: 20px; }

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 16px 44px; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
}

.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.taglist li { font-size: .86rem; padding: 6px 13px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; }

.topic-list { margin: 0; }
.topic-list > div { padding: 14px 0; border-top: 1px solid var(--line); }
.topic-list dt { font-family: var(--display); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.topic-list dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
.topic-list-big > div { padding: 20px 0; }
.topic-num { font-family: var(--mono); font-size: .74rem; color: var(--accent); margin-right: 10px; }

.plan { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--accent-line); }
.plan li { position: relative; padding: 0 0 22px 26px; }
.plan li::before { content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); }
.plan-when { display: block; font-family: var(--mono); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.plan-what { display: block; color: var(--ink); }

.tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tips li { position: relative; padding: 14px 16px 14px 46px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.tips li::before { content: "→"; position: absolute; left: 18px; top: 13px; color: var(--accent); font-weight: 700; }

.reslist { list-style: none; padding: 0; margin: 0; }
.reslist li { padding: 13px 0; border-top: 1px solid var(--line); }
.reslist li > a { font-weight: 600; }
.reslist p { margin: 4px 0 0; font-size: .9rem; color: var(--ink-2); }
.res-meta { display: inline-block; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-left: 8px; }

details { border-top: 1px solid var(--line); padding: 12px 0; }
details summary { cursor: pointer; font-weight: 600; font-family: var(--display); padding-right: 20px; }
details summary::marker { color: var(--accent); }
details p { margin: 10px 0 4px; color: var(--ink-2); }
.faq-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.faq-block details:first-of-type { border-top: none; }

/* ------------------------------------------------------------- side rail */
.detail-side { display: grid; gap: 16px; position: sticky; top: 84px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.side-card h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); color: var(--ink-3); margin-bottom: 12px; }
.side-note { font-size: .84rem; color: var(--ink-3); line-height: 1.55; margin: 10px 0 0; }
.side-sources { list-style: none; padding: 0; margin: 6px 0 0; }
.side-sources li { font-size: .78rem; word-break: break-all; padding: 3px 0; font-family: var(--mono); }
.side-facts { list-style: none; padding: 0; margin: 0; }
.side-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dotted var(--line); font-size: .88rem; }
.side-facts li:last-child { border-bottom: none; }
.side-facts span { color: var(--ink-3); }
.side-facts b { text-align: right; }
.side-similar { list-style: none; padding: 0; margin: 0; }
.side-similar li + li { border-top: 1px solid var(--line); }
.side-similar a { display: block; padding: 10px 0; text-decoration: none; color: inherit; }
.side-similar a:hover b { color: var(--brand); }
.side-similar b { display: block; font-size: .93rem; }
.side-similar span { font-size: .78rem; color: var(--ink-3); }
.side-cta { background: var(--ink); color: #fff; }
.side-cta h2 { color: rgba(255, 255, 255, .55); }
.side-cta p { font-size: .89rem; color: rgba(255, 255, 255, .8); }

.verify { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; padding: 6px 11px; border-radius: 999px; }
.verify svg { width: 14px; height: 14px; flex: none; }
.verify time { font-family: var(--mono); font-weight: 500; opacity: .75; }
.verify-verified { background: var(--green-wash); color: var(--green); }
.verify-partial { background: var(--amber-wash); color: var(--amber); }
.verify-unverified { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line-strong); }
.verify-legend { display: grid; gap: 20px; margin: 24px 0 34px; }
.verify-legend > div { padding-left: 0; }
.verify-legend p { margin: 10px 0 0; font-size: .95rem; }

/* ----------------------------------------------------------- browse page */
.browse-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 60px; align-items: start; }
.filters { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; max-height: calc(100vh - 110px); overflow-y: auto; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filters-head h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); color: var(--ink-3); margin: 0; }
.filter-group { border: none; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.filter-group legend, .filter-group > label { font-size: .8rem; font-weight: 600; color: var(--ink-2); padding: 0; margin-bottom: 8px; display: block; }
.filter-group input[type="search"], .filter-group select, .filters input[type="text"] {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: .88rem; background: var(--surface); color: var(--ink);
}
.checks { display: grid; gap: 5px; max-height: 210px; overflow-y: auto; }
.checks label { display: flex; align-items: center; gap: 8px; font-size: .86rem; cursor: pointer; padding: 2px 0; }
.checks em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.checks input { accent-color: var(--brand); width: 15px; height: 15px; }

.results-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.results-bar p { margin: 0; font-size: .92rem; color: var(--ink-3); }
.results-bar strong { color: var(--ink); font-family: var(--mono); }
.results-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .86rem; color: var(--ink-3); }
.results-sort select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: .86rem; background: var(--surface); }
.filters-toggle { display: none; }
.result.hide { display: none; }

.empty { text-align: center; padding: 60px 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.empty h2 { margin-bottom: .3em; }
.empty p { color: var(--ink-3); max-width: 46ch; margin-inline: auto; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

.crosslinks { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.crosslinks h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); color: var(--ink-3); }
.crosslinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.crosslinks a { font-size: .9rem; }

/* ------------------------------------------------------------- community */
.community { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; margin-bottom: 40px; }
.community > h2 { margin-bottom: .3em; }
.community-status { padding: 12px 14px; border-radius: var(--r-sm); font-size: .89rem; margin: 14px 0; }
.community-status.info { background: var(--brand-wash); color: var(--brand-deep); }
.community-status.warn { background: var(--amber-wash); color: var(--amber); }
.community-status.ok { background: var(--green-wash); color: var(--green); }
.community-status.err { background: var(--red-wash); color: var(--red); }

.community-compose { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin: 18px 0 22px; background: var(--surface-2); }
.compose-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.compose-tabs button { font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.compose-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.compose-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .85rem; color: var(--ink-3); }
.stars { display: flex; gap: 2px; }
.stars button { font-size: 1.4rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--line-strong); padding: 0 2px; }
.stars button.on { color: #e8a020; }
.community-compose input, .community-compose textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: .92rem; margin-bottom: 10px; background: var(--surface); color: var(--ink);
}
.community-compose textarea { resize: vertical; min-height: 90px; }
.compose-foot { display: flex; align-items: center; gap: 12px; }
.counter { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); margin-right: auto; }

.community-sort { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-3); margin-bottom: 12px; }
.community-sort button { font: inherit; font-size: .82rem; background: none; border: none; color: var(--ink-3); cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.community-sort button.on { background: var(--ink); color: #fff; }

.community-list { display: grid; gap: 12px; }
.post { border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; }
.post-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.post-author { font-weight: 600; font-size: .92rem; }
.post-kind { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: var(--brand-wash); color: var(--brand-deep); }
.post-date { font-size: .78rem; color: var(--ink-3); margin-left: auto; font-family: var(--mono); }
.post-stars { color: #e8a020; font-size: .9rem; letter-spacing: 1px; }
.post-body { font-size: .95rem; margin: 0 0 8px; }
.post-link { font-size: .86rem; word-break: break-all; }
.post-foot { display: flex; align-items: center; gap: 10px; }
.vote { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.vote:hover { border-color: var(--brand); color: var(--brand-deep); }
.vote.on { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-deep); }
.vote b { font-family: var(--mono); }

.skeleton { display: grid; gap: 12px; }
.skeleton div { height: 76px; border-radius: var(--r); background: linear-gradient(90deg, var(--surface-2) 25%, var(--paper) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.community-report { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.community-report h3 { margin-bottom: .3em; }
.community-report p { font-size: .9rem; color: var(--ink-3); }
.report-form { display: grid; gap: 8px; margin-top: 14px; max-width: 520px; }
.report-form label { font-size: .84rem; font-weight: 600; }
.report-form select, .report-form textarea { padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: .9rem; background: var(--surface); color: var(--ink); }

/* ----------------------------------------------------------- submit page */
.submit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; padding-top: 34px; padding-bottom: 60px; align-items: start; }
.submit-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; }
.submit-form fieldset { border: none; padding: 0; margin: 0 0 26px; }
.submit-form legend { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 0; margin-bottom: 14px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.field label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 6px; }
.req { font-weight: 500; font-size: .74rem; color: var(--red); font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; margin-left: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: .93rem; background: var(--surface); color: var(--ink);
}
.field input:invalid:not(:placeholder-shown) { border-color: var(--red); }
.field textarea { resize: vertical; }
.hint { font-size: .82rem; color: var(--ink-3); margin: 6px 0 0; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.form-foot .hint { margin: 0; }
.form-status { padding: 12px 14px; border-radius: var(--r-sm); font-size: .9rem; margin-bottom: 18px; }
.form-status.ok { background: var(--green-wash); color: var(--green); }
.form-status.err { background: var(--red-wash); color: var(--red); }
.form-status.info { background: var(--brand-wash); color: var(--brand-deep); }
.checklist { list-style: none; padding: 0; margin: 0 0 18px; }
.checklist li { position: relative; padding-left: 24px; font-size: .88rem; margin-bottom: 7px; color: var(--ink-2); }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.checklist-no li::before { content: "✕"; color: var(--red); }

/* -------------------------------------------------------- search overlay */
.search-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(13, 22, 38, .55); backdrop-filter: blur(3px); padding: 10vh 20px 20px; }
.search-overlay[hidden] { display: none; }
.search-panel { max-width: 620px; margin: 0 auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.search-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.search-input-row svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search-input-row input { flex: 1; border: none; outline: none; font: inherit; font-size: 1.05rem; background: none; color: var(--ink); }
.search-input-row button { font: inherit; font-size: .72rem; font-family: var(--mono); padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-3); cursor: pointer; }
.search-results { max-height: 56vh; overflow-y: auto; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 12px 18px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.sr-item:hover, .sr-item.active { background: var(--brand-wash); }
.sr-mono { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .78rem; color: #fff; }
.sr-text { min-width: 0; flex: 1; }
.sr-text b { display: block; font-size: .95rem; }
.sr-text span { display: block; font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-meta { font-family: var(--mono); font-size: .7rem; color: var(--ink-3); text-align: right; flex: none; }
.sr-empty { padding: 32px 18px; text-align: center; color: var(--ink-3); font-size: .92rem; }
.sr-empty a { display: inline-block; margin-top: 10px; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding: 52px 0 24px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.footer .brand-word { color: #fff; display: block; margin-bottom: 10px; }
.footer h2 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; font-family: var(--mono); color: rgba(255, 255, 255, .45); margin-bottom: 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 7px; }
.footer a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .89rem; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer p { font-size: .89rem; }
.footnote { font-size: .82rem !important; color: rgba(255, 255, 255, .5); max-width: 44ch; }
.footer-legal { margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.footer-legal p { font-size: .78rem; color: rgba(255, 255, 255, .45); margin: 0; max-width: 92ch; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1040px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; max-height: none; display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-flex; }
  .submit-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .mainnav, .search-trigger { display: none; }
  .menu-toggle { display: flex; margin-left: auto; }
  .mobilenav:not([hidden]) { display: flex; }
  .hero { padding: 44px 0 32px; }
  .facts dl > div { grid-template-columns: 1fr; gap: 4px; }
  .detail-head-inner { flex-direction: column; gap: 16px; }
  .detail-crest { width: 68px; height: 68px; }
  .deadline-list a { grid-template-columns: 58px 1fr; }
  .dl-cat { display: none; }
  .card-facts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .community, .faq-block, .submit-form { padding: 20px 18px; }
  .search-overlay { padding: 6vh 12px 12px; }
}

/* ==========================================================================
   Phase 2 components: evidence, fit, matcher, dashboard, guides
   ========================================================================== */

/* -------------------------------------------------------------- evidence */
.evidence { list-style: none; padding: 0; margin: 8px 0 0; }
.evidence li { display: grid; gap: 1px; padding: 9px 0; border-top: 1px solid var(--line); }
.evidence li:first-child { border-top: none; }
.ev-fact { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.evidence a { font-size: .86rem; font-weight: 600; }
.ev-pub { font-size: .75rem; color: var(--ink-3); }

.notice { padding: 14px 18px; border-radius: var(--r); font-size: .93rem; margin: 18px 0 0; }
.notice-stop { background: var(--red-wash); color: var(--red); border: 1px solid rgba(176, 45, 34, .25); }

/* ---------------------------------------------------- is this right for me */
.fitbox { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 24px 26px; }
.fitbox > h2 { margin-top: 0; }
.fit-grid { margin: 0 0 20px; display: grid; gap: 14px; }
.fit-grid > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.fit-grid dt { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.fit-grid dd { margin: 0; font-size: .96rem; }
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fit-cols h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); margin-bottom: 8px; }
.fit-cols ul { list-style: none; padding: 0; margin: 0; }
.fit-cols li { position: relative; padding-left: 22px; font-size: .92rem; margin-bottom: 7px; }
.fit-yes h3 { color: var(--green); }
.fit-yes li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.fit-no h3 { color: var(--ink-3); }
.fit-no li::before { content: "✕"; position: absolute; left: 0; color: var(--ink-3); font-weight: 700; }
.tips-warn li { border-left: 3px solid var(--amber); }
.tips-warn li::before { content: "!"; color: var(--amber); font-weight: 800; }

/* ---------------------------------------------------------------- matcher */
.match-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 40px; padding: 32px 20px 60px; align-items: start; }
.matcher { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 24px 24px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.match-steps { list-style: none; padding: 0; margin: 0; counter-reset: ms; }
.match-step { padding: 18px 0; border-bottom: 1px solid var(--line); }
.match-step:last-child { border-bottom: none; }
.match-step h2 { font-size: 1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.step-n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .74rem; }
.step-note { font-size: .84rem; color: var(--ink-3); margin: 0 0 10px; }
.grade-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.grade-picker label input, .chip-picker label input { position: absolute; opacity: 0; pointer-events: none; }
.grade-picker label span { display: grid; place-items: center; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-family: var(--mono); font-size: .88rem; cursor: pointer; background: var(--surface); }
.grade-picker label input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.grade-picker label input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.chip-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-picker label span { display: inline-block; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .86rem; cursor: pointer; background: var(--surface); }
.chip-picker label input:checked + span { background: hsl(var(--hue, 222) 68% 42%); color: #fff; border-color: transparent; }
.chip-picker-single label input:checked + span { background: var(--ink); border-color: var(--ink); }
.chip-picker label input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.match-row { display: grid; gap: 12px; }
.field-inline { display: grid; gap: 5px; font-size: .86rem; font-weight: 600; }
.field-inline select { padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: .88rem; background: var(--surface); color: var(--ink); }
.match-actions { display: flex; gap: 10px; align-items: center; padding-top: 18px; border-top: 1px solid var(--line); }

.match-placeholder { text-align: center; padding: 60px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.match-placeholder p { color: var(--ink-3); max-width: 42ch; margin-inline: auto; }
.match-summary { margin-bottom: 18px; }
.match-summary h2 { margin-bottom: .2em; }
.match-summary p { color: var(--ink-3); font-size: .93rem; }
.match-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: m; }
.match-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px; gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 18px 20px; }
.match-rank { font-family: var(--display); font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.match-name { font-family: var(--display); font-weight: 700; font-size: 1.12rem; text-decoration: none; color: var(--ink); }
.match-name:hover { color: var(--brand-deep); }
.match-tag { font-size: .9rem; color: var(--ink-2); margin: 4px 0 10px; }
.match-why { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; }
.match-why li { position: relative; padding-left: 20px; font-size: .87rem; color: var(--ink-2); }
.match-why li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
.match-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-bottom: 12px; }
.match-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.match-fit { display: grid; justify-items: center; gap: 2px; font-size: .7rem; color: var(--ink-3); font-family: var(--mono); }
.match-fit b { font-size: 1.05rem; color: var(--ink); }
.match-fit-bar { width: 100%; height: 5px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.match-fit-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--accent); }
.match-excluded { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 18px; }
.match-excluded ul { list-style: none; padding: 0; margin: 8px 0 12px; }
.match-excluded li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .86rem; }
.match-excluded li span { color: var(--ink-3); text-align: right; }

/* -------------------------------------------------------------- save button */
.save-btn { font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.save-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
.save-btn.on { background: var(--green-wash); border-color: var(--green); color: var(--green); }
.saved-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

/* -------------------------------------------------------------- dashboard */
.dash-grid { display: grid; gap: 18px; }
.dash-band { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; border-top: 3px solid var(--line-strong); }
.dash-urgent { border-top-color: var(--red); }
.dash-soon { border-top-color: var(--amber); }
.dash-open { border-top-color: var(--green); }
.dash-later { border-top-color: var(--brand); }
.dash-head { display: flex; align-items: baseline; gap: 12px; }
.dash-head h2 { margin: 0; font-size: 1.15rem; }
.dash-count { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); }
.dash-note { font-size: .88rem; color: var(--ink-3); margin: 4px 0 14px; }
.dash-band .deadline-list li { display: flex; align-items: center; gap: 10px; padding-right: 14px; }
.dash-band .deadline-list li > a { flex: 1; }
.est { font-style: normal; font-family: var(--mono); font-size: .68rem; color: var(--amber); text-transform: uppercase; letter-spacing: .05em; }

/* ----------------------------------------------------------------- guides */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.guide-tile { display: grid; gap: 5px; align-content: start; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: transform .16s, box-shadow .16s; }
.guide-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.guide-count { font-family: var(--mono); font-size: .72rem; color: var(--brand-deep); font-weight: 700; }
.guide-name { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.guide-blurb { font-size: .85rem; color: var(--ink-3); line-height: 1.5; }
.nav-match { color: var(--brand-deep) !important; font-weight: 600; }

@media (max-width: 1040px) {
  .match-layout { grid-template-columns: minmax(0, 1fr); }
  .matcher { position: static; max-height: none; }
  .fit-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .fit-grid > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .match-item { grid-template-columns: 34px minmax(0, 1fr); }
  .match-fit { grid-column: 1 / -1; grid-auto-flow: column; justify-items: start; align-items: center; gap: 8px; }
  .match-fit-bar { width: 90px; }
  .grade-picker { grid-template-columns: repeat(4, 1fr); }
}

.card-foot-right { display: inline-flex; align-items: center; gap: 10px; }
.save-btn-sm { font-size: .72rem; padding: 4px 10px; }

.detail-photo { width: 112px; height: 112px; object-fit: cover; border-radius: var(--r); display: block; }
.img-credit { font-size: .72rem; color: var(--ink-3); }

@media (max-width: 620px) {
  /* Deadline rows: let the name wrap instead of forcing the row wider. */
  .dash-band .deadline-list li { flex-wrap: wrap; padding-right: 0; }
  .dash-band .deadline-list li > a { min-width: 0; flex: 1 1 100%; }
  .deadline-list .dl-name { min-width: 0; overflow-wrap: anywhere; }
  .deadline-list .dl-meta, .deadline-list .dl-cat { min-width: 0; }
}

/* ------------------------------------------------- plain-language matcher */
.nl-box { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 22px; }
.nl-box h2 { margin: 0 0 4px; font-size: 1.15rem; }
.nl-sub { font-size: .9rem; color: var(--ink-3); margin: 0 0 12px; max-width: 70ch; }
.nl-box textarea { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper);
  color: var(--ink); resize: vertical; min-height: 84px; }
.nl-box textarea:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.nl-eg { font-size: .82rem; color: var(--ink-3); }
.nl-eg a { margin-right: 2px; }
.nl-readback { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.nl-lead { font-size: .9rem; color: var(--ink-2); margin: 0 0 8px; }
.nl-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.nl-chips li { background: var(--green-wash); color: var(--green); font-size: .84rem;
  padding: 5px 12px; border-radius: 999px; font-weight: 600; }
.nl-warn { background: var(--amber-wash); color: var(--amber); font-size: .87rem;
  padding: 10px 14px; border-radius: var(--r); margin: 8px 0 0; }

/* ------------------------------------------------------------ brand mark */
.brand-mark svg { border-radius: 50%; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.hero-badge { width: min(300px, 26vw); flex: none; }
.hero-badge svg { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 10px 26px rgba(13, 22, 38, .16)); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-badge { display: none; }
}

/* Unconfirmed facts must look unconfirmed, not like quiet omissions. */
.unconf { color: var(--amber); font-weight: 600; }
.facts .flag { white-space: normal; }

.notice-info { background: var(--brand-wash, #e8ecf6); color: var(--brand-deep); border: 1px solid rgba(29,74,224,.25); }

/* A suggestion is our judgement, not the organiser's rule, so it must not look
   like the audited eligibility facts sitting next to it. */
/* A recommendation is Compete's editorial view. It must never be mistaken for
   the audited, sourced eligibility facts sitting immediately above it, so it is
   set apart with its own rule, tint and label rather than sharing their style. */
/* Four levels, four looks. Eligible is plain, because it is the audited fact.
   Recommended and Preparation are amber-ruled, because they are our judgement.
   Divisions are blue-ruled, because they are the organiser's structure, not ours. */
.rec-row { border-left: 3px solid var(--amber); padding-left: 12px; background: rgba(201,146,47,.05); }
.rec-row dt { color: var(--amber-text) !important; }
.prep-row { border-left-style: dashed; }
.div-row { border-left: 3px solid var(--brand); padding-left: 12px; background: rgba(29,74,224,.05); }
.div-row dt { color: var(--brand-deep) !important; }
.rec-foot { background: transparent; border-left-color: rgba(201,146,47,.4); }
.rec-stated { font-weight: 600; opacity: .9; }
.prep-chip, .div-chip { font-weight: 600; font-size: .92em; }
.rec-val { font-weight: 700; color: var(--ink); }
.rec-basis { font-size: .82rem; opacity: .75; }
.rec-dis { font-style: italic; opacity: .8; }
.rec-chip { font-weight: 600; }

/* --- launch fixes: small-screen controls -------------------------------- */
/* The post-type tabs sat on one non-wrapping row and pushed 52px off the side
   of a 320px screen. Wrap them and give every control a real tap target. */
.compose-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.compose-tabs button { min-height: 44px; flex: 1 1 auto; }

/* Interactive controls should be comfortably tappable. This deliberately does
   not touch links inside prose, where an inline citation is expected to be
   text-sized and enlarging it would break the paragraph. */
button, select, input[type="submit"], .btn { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }

@media (max-width: 360px) {
  .compose-tabs button { flex: 1 1 100%; }
}

/* --- launch fix: placeholder contrast ---------------------------------- */
::placeholder { color: var(--ink-3); opacity: 1; }

/* Readable text never uses the raw accent; borders and icons still may. */
.dl-days, .dl-days b, .chip-soon, .rec-row dt, .sugg { color: var(--amber-text); }
.rec-val { color: var(--ink); }
.dl-days { color: var(--amber-text); }
.star, .rec-star { color: var(--amber-text); }

/* --- launch fixes: two remaining contrast failures ---------------------- */
/* The empty rating star was #d8dce5 (1.52:1). It is an interactive control, so
   it must be perceivable; the filled state stays amber. */
.stars button, [data-star] { color: #5f6d88; }
.stars button[aria-checked="true"], [data-star].on { color: var(--amber-text); }

/* "Partly verified" sat at 4.17:1, just under AA for body text. */
.verify-partial { color: var(--amber-text); }