/* =========================================================================
   Math Architect — shared polish layer
   -------------------------------------------------------------------------
   ONE stylesheet for every /activities/architect/unit-N/ page. Each page keeps
   its own inline <style> for layout/widget geometry; this file loads AFTER it
   and is the single source of truth for:

     • reading order   — the student brief leads, teacher blocks follow
     • color           — one warm, high-contrast, grade-6-friendly palette
     • balance         — even two-column task rows, capped blueprint height
     • clarity         — larger prompts, 48px inputs, 44px tap targets
     • feedback        — never color-alone (icon + word + color)
     • a11y            — AA contrast, visible focus, reduced motion, print

   Per-unit accent comes from  <body data-arc-unit="N">.  Add no page-local
   overrides here — if a rule belongs to every unit, it belongs in this file.
   ========================================================================= */

/* ── Per-unit accent hues ──────────────────────────────────────────────── */
body.nt-theme-aware {
  --arc-h1: #2563c9; /* hero gradient start */
  --arc-h2: #1e3f8f; /* hero gradient end   */
  --arc-glow: rgba(255, 255, 255, 0.2);

  --arc-l1: #0d7a5f; /* Level 1 · Support    (teal)   */
  --arc-l1-bg: rgba(16, 160, 121, 0.13);
  --arc-l2: #6d3fc4; /* Level 2 · Enrichment (violet) */
  --arc-l2-bg: rgba(124, 79, 208, 0.13);
  --arc-l3: #9a5b04; /* stretch / budget     (amber)  */
  --arc-l3-bg: rgba(230, 150, 20, 0.15);

  --arc-good: #0b7a55;
  --arc-good-bg: rgba(16, 160, 121, 0.14);
  --arc-bad: #b32a3f;
  --arc-bad-bg: rgba(200, 60, 80, 0.12);

  --arc-blueprint: #16224a; /* softened from near-black navy */
  --arc-radius: 16px;
  --arc-gap: 18px;
}

body[data-arc-unit="1"] {
  --arc-h1: #0f7387; /* teal */
  --arc-h2: #0b4257;
}
body[data-arc-unit="2"] {
  --arc-h1: #1f7d51; /* green */
  --arc-h2: #12523a;
}
body[data-arc-unit="3"] {
  --arc-h1: #1f63b0; /* blue */
  --arc-h2: #173c7d;
}
body[data-arc-unit="4"] {
  --arc-h1: #3a7d2e; /* leaf */
  --arc-h2: #1f5222;
}
body[data-arc-unit="5"] {
  --arc-h1: #2f5fbf; /* indigo */
  --arc-h2: #1b3782;
}
body[data-arc-unit="6"] {
  --arc-h1: #a8620d; /* amber */
  --arc-h2: #6d3a0d;
}
body[data-arc-unit="7"] {
  --arc-h1: #a3432a; /* rust */
  --arc-h2: #5e231d;
}
body[data-arc-unit="8"] {
  --arc-h1: #356394; /* steel */
  --arc-h2: #1f3c5e;
}
body[data-arc-unit="9"] {
  --arc-h1: #6742b8; /* violet */
  --arc-h2: #372473;
}
body[data-arc-unit="ns"] {
  --arc-h1: #a8365f; /* berry — Unit 1, The Number System */
  --arc-h2: #631f3a;
}
body[data-arc-unit="10"] {
  --arc-h1: #12798a; /* aqua */
  --arc-h2: #0d4a5c;
}

:root[data-theme="dark"] body.nt-theme-aware {
  --arc-l1: #4fd8ac;
  --arc-l2: #bfa2ff;
  --arc-l3: #f5be5e;
  --arc-good: #4fd8ac;
  --arc-bad: #ff8fa0;
  --arc-blueprint: #10182f;
}

/* Screen-reader status line. The markup renders it as ordinary text at the
   top of the page, so every check announcement was also visible there. */
body.nt-theme-aware #a11y-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Reading order: student brief first, teacher blocks after ──────────── */
/* The markup puts Learning Targets + Teacher Notes above the hero. Students
   should meet the mission first; flex `order` fixes it with no DOM surgery. */
body.nt-theme-aware .wrap,
body.nt-theme-aware .nt-shell {
  display: flex;
  flex-direction: column;
}
body.nt-theme-aware .wrap > *,
body.nt-theme-aware .nt-shell > * {
  order: 3;
}
body.nt-theme-aware header.hero,
body.nt-theme-aware .u6-hero {
  order: 0;
}
body.nt-theme-aware .learning-target {
  order: 1;
}
body.nt-theme-aware details.teacher-only {
  order: 2;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
body.nt-theme-aware header.hero,
body.nt-theme-aware .u6-hero {
  background:
    radial-gradient(900px 320px at 88% -30%, var(--arc-glow), transparent 62%),
    linear-gradient(135deg, var(--arc-h1), var(--arc-h2));
  border: 0;
  border-radius: var(--arc-radius);
  padding: 30px 28px 26px;
  margin-bottom: var(--arc-gap);
  box-shadow: 0 10px 28px rgba(12, 24, 60, 0.22);
  color: #fff;
}
body.nt-theme-aware header.hero h1,
body.nt-theme-aware .u6-hero h1 {
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
body.nt-theme-aware header.hero .lede,
body.nt-theme-aware .u6-hero p {
  color: rgba(255, 255, 255, 0.94);
  font-size: 17.5px;
  max-width: 68ch;
}
body.nt-theme-aware header.hero .tag,
body.nt-theme-aware .u6-hero__eyebrow {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.9);
}

/* Hero chips — readable, not washed out. */
body.nt-theme-aware .badge,
body.nt-theme-aware .u6-hero__pill {
  /* Darken rather than lighten: a white wash over the amber/rust heroes drops
     small white text under 4.5:1. Black at 18% keeps every unit AA. */
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 6px 13px;
  border-radius: 999px;
  text-transform: none;
}

/* Design-cycle strip — even columns, readable numbers. */
body.nt-theme-aware .cycle {
  gap: 10px;
}
body.nt-theme-aware .cycle div,
body.nt-theme-aware .u6-step {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14.5px;
  padding: 12px 13px;
}
body.nt-theme-aware .cycle b,
body.nt-theme-aware .u6-step__num {
  color: #ffe6a8;
  font-size: 12.5px;
  letter-spacing: 0.1em;
}

/* Progress — taller, higher contrast against the hero. */
body.nt-theme-aware .progress,
body.nt-theme-aware .u6-progress {
  font-size: 16.5px;
  font-weight: 800;
  color: #fff;
  margin-top: 16px;
}
body.nt-theme-aware .bar,
body.nt-theme-aware .u6-bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
body.nt-theme-aware .bar > span,
body.nt-theme-aware .u6-bar > span {
  background: linear-gradient(90deg, #ffd166, #5ee6b0);
  border-radius: 999px;
}

/* ── Learning targets / teacher notes ──────────────────────────────────── */
body.nt-theme-aware .learning-target {
  border: 1px solid var(--nt-border);
  border-left: 6px solid var(--arc-h1);
  border-radius: 14px;
  background: var(--nt-surface);
  padding: 20px 22px;
}
body.nt-theme-aware .learning-target h2 {
  color: var(--nt-text);
  font-size: 15px;
  letter-spacing: 0.08em;
}
body.nt-theme-aware .lt-meta span {
  font-size: 14px;
  font-weight: 700;
  color: var(--nt-text);
  background: var(--nt-bg);
}
body.nt-theme-aware details.teacher-only {
  border-radius: 14px;
}

/* ── Cards / sections ──────────────────────────────────────────────────── */
body.nt-theme-aware .card,
body.nt-theme-aware .u6-section {
  border-radius: var(--arc-radius);
  border: 1px solid var(--nt-border);
  background: var(--nt-surface);
  box-shadow: 0 2px 10px rgba(16, 32, 64, 0.05);
  padding: 24px;
  margin-bottom: var(--arc-gap);
}
body.nt-theme-aware .card h2,
body.nt-theme-aware .u6-section h2 {
  font-size: clamp(21px, 2.6vw, 25px);
  line-height: 1.2;
  margin-bottom: 12px;
}
body.nt-theme-aware .card > p,
body.nt-theme-aware .u6-section > p {
  font-size: 17.5px;
  max-width: 74ch;
}
body.nt-theme-aware .tag-shape,
body.nt-theme-aware .eqtag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  color: var(--arc-h2);
  background: color-mix(in srgb, var(--arc-h1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--arc-h1) 42%, transparent);
  border-radius: 999px;
  text-transform: none;
}

/* ── Balance: task rows line up, blueprint never towers ────────────────── */
@media (min-width: 760px) {
  body.nt-theme-aware .grid2 {
    align-items: start;
    gap: 22px;
  }
}
body.nt-theme-aware .grid3 {
  gap: 14px;
}
body.nt-theme-aware .bp {
  background: var(--arc-blueprint);
  border: 1px solid rgba(140, 170, 255, 0.28);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
body.nt-theme-aware .bp svg {
  max-height: 460px;
}
@media (min-width: 1000px) {
  body.nt-theme-aware .grid2 > .bp {
    position: sticky;
    top: 16px;
  }
}
/* Blueprint captions were 10-11px monospace — too small to read on a phone. */
body.nt-theme-aware .bp-cap,
body.nt-theme-aware .fcode {
  font-size: 13px;
  letter-spacing: 0.05em;
}
/* The shared-scale note reads as a labelled chip, not a wall of blue mono. */
body.nt-theme-aware .scale {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--nt-text);
  background: color-mix(in srgb, var(--arc-h1) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--arc-h1) 34%, transparent);
  border-radius: 10px;
  padding: 7px 13px;
  word-spacing: normal;
}
body.nt-theme-aware .bp-cap {
  color: #b9c8f5;
}

/* ── Questions ─────────────────────────────────────────────────────────── */
body.nt-theme-aware .q,
body.nt-theme-aware .u6-check {
  background: var(--nt-surface);
  border: 1px solid var(--nt-border);
  border-left: 5px solid color-mix(in srgb, var(--arc-h1) 60%, transparent);
  border-radius: 14px;
  padding: 18px;
  margin: 14px 0;
}
body.nt-theme-aware .q .lbl,
body.nt-theme-aware .u6-check label {
  font-size: 17.5px;
  line-height: 1.4;
  margin-bottom: 12px;
}
body.nt-theme-aware .q input[type="text"],
body.nt-theme-aware .q input[type="number"],
body.nt-theme-aware .u6-input {
  min-height: 48px;
  font-size: 19px;
  padding: 10px 14px;
  border-width: 2px;
  border-radius: 10px;
}
body.nt-theme-aware .q .unit {
  font-size: 16.5px;
}

/* ── Buttons — 44px minimum target, obvious hierarchy ──────────────────── */
body.nt-theme-aware .btn,
body.nt-theme-aware .u6-btn,
body.nt-theme-aware .stepbtn {
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 11px;
  font-size: 16.5px;
  font-weight: 800;
}
body.nt-theme-aware .btn.ghost,
body.nt-theme-aware .u6-btn--ghost {
  background: var(--nt-surface);
  border-width: 2px;
}
body.nt-theme-aware .btn:hover,
body.nt-theme-aware .u6-btn:hover {
  filter: brightness(1.07);
}
body.nt-theme-aware .btn:focus-visible,
body.nt-theme-aware .u6-btn:focus-visible,
body.nt-theme-aware .q input:focus-visible,
body.nt-theme-aware .u6-input:focus-visible,
body.nt-theme-aware a:focus-visible,
body.nt-theme-aware summary:focus-visible {
  outline: 3px solid var(--nt-focus);
  outline-offset: 2px;
}

/* ── Feedback — icon + word + color, never color alone ─────────────────── */
body.nt-theme-aware .q .fb,
body.nt-theme-aware .u6-feedback {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 12px;
  padding: 0;
  border-radius: 10px;
}
body.nt-theme-aware .q .fb.ok,
body.nt-theme-aware .u6-feedback.ok {
  color: var(--arc-good);
  background: var(--arc-good-bg);
  padding: 9px 12px;
}
body.nt-theme-aware .q .fb.bad,
body.nt-theme-aware .u6-feedback.bad {
  color: var(--arc-bad);
  background: var(--arc-bad-bg);
  padding: 9px 12px;
}
body.nt-theme-aware .q .fb.ok::before,
body.nt-theme-aware .u6-feedback.ok::before {
  content: "✓ ";
  font-weight: 900;
}
body.nt-theme-aware .q .fb.bad::before,
body.nt-theme-aware .u6-feedback.bad::before {
  content: "↻ ";
  font-weight: 900;
}
body.nt-theme-aware .q input.ok {
  border-color: var(--arc-good);
  box-shadow: 0 0 0 3px var(--arc-good-bg);
}
body.nt-theme-aware .q input.bad {
  border-color: var(--arc-bad);
  box-shadow: 0 0 0 3px var(--arc-bad-bg);
}

/* ── Level callouts — one consistent language across all ten units ─────── */
body.nt-theme-aware .lvl,
body.nt-theme-aware .u6-callout {
  border-radius: 13px;
  padding: 15px 17px;
  font-size: 16.5px;
  line-height: 1.55;
}
body.nt-theme-aware .lvl .pill {
  font-size: 12.5px;
  font-family: inherit;
  letter-spacing: 0.05em;
  padding: 4px 11px;
  margin-bottom: 8px;
}
body.nt-theme-aware .lvl1,
body.nt-theme-aware .u6-callout--level1 {
  background: var(--arc-l1-bg);
  border: 1px solid color-mix(in srgb, var(--arc-l1) 55%, transparent);
}
body.nt-theme-aware .lvl1 .pill {
  background: var(--arc-l1);
}
body.nt-theme-aware .lvl2,
body.nt-theme-aware .u6-callout--level2 {
  background: var(--arc-l2-bg);
  border: 1px solid color-mix(in srgb, var(--arc-l2) 55%, transparent);
}
body.nt-theme-aware .lvl2 .pill {
  background: var(--arc-l2);
}
body.nt-theme-aware .lvl3 {
  background: var(--arc-l3-bg);
  border: 1px solid color-mix(in srgb, var(--arc-l3) 55%, transparent);
}
body.nt-theme-aware .lvl3 .pill {
  background: var(--arc-l3);
}
/* Some pages reuse .lvl1/.lvl2/.lvl3 for "Deliverable 1/2/3" tiles, which made
   green/violet/amber mean two different things on one page. A level callout
   always carries a .pill; deliverable tiles don't — those go neutral. */
body.nt-theme-aware .lvl:not(:has(.pill)) {
  background: var(--nt-bg);
  border: 1px solid var(--nt-border);
  border-top: 4px solid color-mix(in srgb, var(--arc-h1) 65%, transparent);
}

/* Spanish gloss — a distinct block, not a faint afterthought. */
body.nt-theme-aware .es,
body.nt-theme-aware .u6-callout--bilingual {
  color: var(--nt-text);
  opacity: 0.88;
  font-size: 15.5px;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--nt-border);
}

/* ── Readouts, material cards, tables ──────────────────────────────────── */
body.nt-theme-aware .readout {
  border-radius: 13px;
  padding: 15px 17px;
}
body.nt-theme-aware .readout .k {
  font-size: 13.5px;
  letter-spacing: 0.05em;
}
body.nt-theme-aware .readout .v {
  font-size: 20px;
}
body.nt-theme-aware .readout .v.big {
  font-size: 27px;
}
body.nt-theme-aware .matcard,
body.nt-theme-aware .optcard,
body.nt-theme-aware .padcard,
body.nt-theme-aware .pumpcard {
  border-radius: 13px;
  min-height: 44px;
}
body.nt-theme-aware table.bt,
body.nt-theme-aware table.rubric,
body.nt-theme-aware .u6-table {
  font-size: 16px;
}
body.nt-theme-aware table.bt th,
body.nt-theme-aware table.rubric th {
  font-size: 14.5px;
  letter-spacing: 0.03em;
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  body.nt-theme-aware header.hero,
  body.nt-theme-aware .u6-hero {
    padding: 22px 18px 20px;
  }
  body.nt-theme-aware .card,
  body.nt-theme-aware .u6-section {
    padding: 18px 16px;
  }
  body.nt-theme-aware .q .lbl {
    font-size: 17px;
  }
  body.nt-theme-aware .bp svg {
    max-height: none;
  }
}

/* ── Print / Save-as-PDF ───────────────────────────────────────────────── */
@media print {
  body.nt-theme-aware header.hero,
  body.nt-theme-aware .u6-hero {
    box-shadow: none;
    color: #000;
    background: none !important;
    border: 2px solid #000;
  }
  body.nt-theme-aware header.hero h1,
  body.nt-theme-aware header.hero .lede,
  body.nt-theme-aware .badge,
  body.nt-theme-aware .cycle div,
  body.nt-theme-aware .progress {
    color: #000;
  }
  body.nt-theme-aware .card,
  body.nt-theme-aware .u6-section,
  body.nt-theme-aware .q {
    box-shadow: none;
    break-inside: avoid;
  }
}
