/*
  Docs site styling. Implements docs/design/design-system.md ("Two voices on ink") - the same token set the
  admin portal's MudTheme and the student portal's Material palette mirror. Change a value there first.

  The two accents are the two speakers in a challenge: --signal is the human, --axis is the machine. They
  are not interchangeable decoration, so do not reach for --signal simply because something needs emphasis.
*/

:root {
  color-scheme: dark;

  --ink: #111826;
  --surface: #19212F;
  --raised: #212B3B;
  --edge: #2E3A4D;
  --edge-strong: #6B7C96;
  --text: #EEF2F8;
  --muted: #A2B0C4;

  --signal: #F2A93B;
  --axis: #45C2D1;
  --judge: #B49BFF;
  --good: #5FD3A0;
  --danger: #FF8B96;

  --signal-container: #4A3616;
  --on-signal-container: #F7D9A6;
  --axis-container: #123A42;
  --on-axis-container: #A8E6EE;
  --judge-container: #2E2456;
  --on-judge-container: #DCD0FF;

  /* Text drawn on an accent used as a fill. Dark theme takes ink; the light block flips it to white. */
  --on-accent: #111826;

  --shadow: 0 12px 32px rgb(0 0 0 / 0.20);
  --shadow-raised: 0 20px 48px rgb(0 0 0 / 0.30);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --motion-state: 160ms;
  --motion-move: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --font-display: Archivo, "Archivo Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-family: var(--font-body);
}

:root[data-theme="light"] {
  color-scheme: light;

  --ink: #F4F6FA;
  --surface: #FFFFFF;
  --raised: #EAEFF6;
  --edge: #CBD5E3;
  --edge-strong: #6B7686;
  --text: #121A26;
  --muted: #4E5D72;

  --signal: #8A5A00;
  --axis: #0A6A78;
  --judge: #5B3FBF;
  --good: #0B7A52;
  --danger: #B3243A;

  --signal-container: #FDECCB;
  --on-signal-container: #3B2600;
  --axis-container: #CFF0F5;
  --on-axis-container: #04333A;
  --judge-container: #E6DEFF;
  --on-judge-container: #27194F;

  --on-accent: #FFFFFF;

  --shadow: 0 12px 32px rgb(18 26 38 / 0.10);
  --shadow-raised: 0 20px 48px rgb(18 26 38 / 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

::selection { background: color-mix(in srgb, var(--axis) 32%, transparent); color: var(--text); }

a { color: var(--axis); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { color: color-mix(in srgb, var(--axis) 78%, var(--text)); }

button { border: 0; font: inherit; }

.skip-link {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 10;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  background: var(--axis);
  color: var(--on-accent);
}

.skip-link:focus { top: 1rem; }

/* Header ------------------------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--edge);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(16px);
}

.header-inner,
.page-shell,
.site-footer-inner {
  width: min(1120px, calc(100% - 2.5rem));
  margin: auto;
}

.header-inner {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  gap: 1.25rem;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-text span { color: var(--signal); }

/* Environment badge (docs/design/design-system.md "Environment badge"): appended by theme.js only when
   the host injected a non-empty window.__aichallengeEnvironmentLabel, so it is absent by default. Same
   visual spec as the admin portal's .admin-env-badge and the student app's EnvironmentBadge control. */
.env-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
  padding: 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid var(--signal);
  border-radius: var(--radius-sm);
  color: var(--on-signal-container);
  background: var(--signal-container);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.23rem;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.site-nav a,
.theme-toggle {
  padding: 0.44rem 0.72rem;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: background var(--motion-state) var(--ease), color var(--motion-state) var(--ease);
}

.site-nav a[aria-current="page"],
.site-nav a:hover,
.theme-toggle:hover {
  background: var(--raised);
  color: var(--text);
}

.site-nav a[aria-current="page"] {
  box-shadow: inset 0 0 0 1px var(--edge-strong);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.44rem 0.8rem;
  border: 1px solid var(--edge-strong);
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  font-size: 0.85rem;
}

/*
  A filled disc in dark, a hollow ring in light. Shape carries the state as well as fill, and the button's
  own text says which theme it switches to, so this is never the only signal.
*/
.theme-icon {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid var(--axis);
  border-radius: var(--radius-pill);
  background: var(--axis);
}

:root[data-theme="light"] .theme-icon { background: transparent; }

/* Type --------------------------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-stretch: 115%;
  letter-spacing: -0.03em;
}

h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-stretch: 110%;
  letter-spacing: -0.025em;
}

h3 {
  margin: 0;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

p { max-width: 72ch; }

.lede {
  max-width: 66ch;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: var(--axis);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--axis);
  content: "";
}

.page-shell { padding: clamp(2.25rem, 5vw, 4rem) 0 4rem; }

.section { margin-top: clamp(2.75rem, 5vw, 4.25rem); }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.section-heading p { margin: 0; color: var(--muted); }

/* Buttons ------------------------------------------------------------------------------------------ */

.hero-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--motion-state) var(--ease), background var(--motion-state) var(--ease);
}

.button:hover { border-color: var(--text); color: var(--text); }

.button.primary {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--on-accent);
}

.button.primary:hover {
  background: color-mix(in srgb, var(--signal) 86%, var(--text));
  border-color: color-mix(in srgb, var(--signal) 86%, var(--text));
  color: var(--on-accent);
}

/* Cards -------------------------------------------------------------------------------------------- */

.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card,
.callout,
.role-nav {
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.card {
  padding: 1.5rem;
  transition: border-color var(--motion-state) var(--ease), box-shadow var(--motion-state) var(--ease);
}

.card:hover { border-color: var(--edge-strong); box-shadow: var(--shadow); }
.card p { margin-bottom: 0; color: var(--muted); }

.card .card-label {
  margin: 0 0 0.5rem;
  color: var(--axis);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.card h3 { margin-bottom: 0.5rem; }
.card a { display: inline-block; margin-top: 1rem; font-weight: 600; }

.role-nav { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.65rem; }

.role-nav a {
  padding: 0.42rem 0.68rem;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.role-nav a:hover,
.role-nav a[aria-current="page"] { background: var(--raised); color: var(--text); }

/* Status ------------------------------------------------------------------------------------------- */

/*
  Every status carries its own words, so none of these depend on color to be understood. There is
  deliberately no gold "planned" badge: --signal is the human voice in a challenge, and a caution color
  beside it would make the product's most important distinction ambiguous. Planned work reads neutral.
*/
.status {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--good) 15%, transparent);
  color: var(--good);
  font-size: 0.76rem;
  font-weight: 600;
}

.status.planned { background: var(--raised); color: var(--muted); }
.status.admin { background: var(--judge-container); color: var(--on-judge-container); }

/* Callout ------------------------------------------------------------------------------------------ */

.callout { padding: clamp(1.5rem, 4vw, 2.4rem); }
.callout h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.callout p { margin-bottom: 0; color: var(--muted); }
.callout.warning { border-color: var(--edge-strong); }

/* Reasoning spine -------------------------------------------------------------------------------- */

/*
  The signature element (design system section 5). A rule with a node per step, where the node's shape and
  color say which voice is speaking and the label says it in words.

  .flow is the horizontal variant used for the product loop; .step-list is the vertical variant used for
  ordered instructions. Numbering is kept only where order is genuinely load-bearing - a rebuttal means
  nothing before the claim it answers.
*/

/* An ordered list, because the steps genuinely are a sequence; the numbering is information. */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--surface);
  list-style: none;
  overflow: hidden;
}

.flow-step { position: relative; min-height: 11rem; padding: 2.4rem 1.35rem 1.35rem; }
.flow-step + .flow-step { border-left: 1px solid var(--edge); }

/* The rule, drawn across the node row. */
.flow-step::before {
  position: absolute;
  top: 1.45rem;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge);
  content: "";
}

.flow-step:first-child::before { left: 1.35rem; }
.flow-step:last-child::before { right: 1.35rem; }

/* Default node: neutral, for flows whose steps are a plain sequence with no single actor. */
.flow-node {
  position: absolute;
  top: 1rem;
  left: 1.35rem;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--edge-strong);
  box-shadow: 0 0 0 4px var(--surface);
}

/* Who acts at this step. Shape differs as well as color, so the distinction survives greyscale. */
.flow-node.human { background: var(--signal); }
.flow-node.machine { background: var(--ink); border: 2px solid var(--axis); }
.flow-node.judge { border-radius: var(--radius-sm); background: var(--judge); }

.flow-number {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.flow-actor {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.flow-actor.human { color: var(--signal); }
.flow-actor.machine { color: var(--axis); }
.flow-actor.judge { color: var(--judge); }

.flow-step p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.93rem; }

.step-list {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.step-list li {
  position: relative;
  padding: 0 0 1.75rem 3.4rem;
  counter-increment: step;
}

.step-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  content: counter(step);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* The rule joining consecutive steps. */
.step-list li:not(:last-child)::after {
  position: absolute;
  top: 2.25rem;
  bottom: 0.2rem;
  left: 1rem;
  width: 1px;
  background: var(--edge);
  content: "";
}

.step-list h3 { padding-top: 0.2rem; }
.step-list p { margin: 0.35rem 0 0; color: var(--muted); }

/* Tables ------------------------------------------------------------------------------------------- */

.comparison {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.comparison th,
.comparison td {
  padding: 0.9rem;
  border-bottom: 1px solid var(--edge);
  text-align: left;
  vertical-align: top;
}

.comparison th {
  background: var(--raised);
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparison td { color: var(--muted); }
.comparison tr:last-child td { border-bottom: 0; }

/* Walkthrough -------------------------------------------------------------------------------------- */

/* A captured screen from the live product. The image carries its own border because a screenshot of a light
   UI would otherwise bleed into the light theme's page with no edge at all; the background shows through
   while the PNG loads, and behind any image that is narrower than its column. */
figure.screenshot { margin: 1.25rem 0 0; padding: 0; }

figure.screenshot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--raised);
}

figure.screenshot figcaption {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* In-page contents for the longer walkthroughs: inline and compact, so it reads as navigation rather than
   as one more content list. */
nav.toc {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
}

nav.toc ol,
nav.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  list-style: none;
}

/* A shot inside a numbered step sits closer to the words it illustrates than to the next step. */
.step-list li figure.screenshot { margin: 0.85rem 0 0.25rem; }

/* Third-party notices -------------------------------------------------------------------------------

   One flat list per surface on notices.html. Deliberately not .card or .grid: an attribution list is read
   by scanning down a single column for one name, so anything that reflows it into columns makes it slower
   to search. Each row is name + version on one line, license and holder muted underneath. */

.notice-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--edge);
}

.notice-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--edge);
}

.notice-list .notice-name { font-weight: 600; }

/* The version sits with the name rather than in the meta line: it is what a reader matches against a CVE
   or a bill of materials, so it must not be buried. */
.notice-list .notice-version {
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
}

.notice-list .notice-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Footer ------------------------------------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--edge); background: var(--surface); }
.site-footer-inner { padding: 2rem 0; color: var(--muted); font-size: 0.9rem; }
.site-footer p { margin: 0.25rem 0; }

/* ------------------------------------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--axis); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 760px) {
  .header-inner { min-height: auto; flex-wrap: wrap; gap: 0.45rem; padding: 0.85rem 0; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; }
  .page-shell { padding-top: 3.25rem; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }

  /* The spine turns vertical: the rule runs down the left edge and the nodes stack on it. */
  .flow { grid-template-columns: 1fr; }
  .flow-step { min-height: auto; padding: 1.35rem 1.35rem 1.35rem 3.4rem; }
  .flow-step + .flow-step { border-top: 1px solid var(--edge); border-left: 0; }

  .flow-step::before {
    top: 0;
    right: auto;
    bottom: 0;
    left: 1.9rem;
    width: 1px;
    height: auto;
  }

  .flow-node { top: 1.5rem; left: 1.4rem; }
  .comparison { display: block; overflow-x: auto; }
}