/* Uriversity theme — the ONE place the palette and type stack are defined.
 *
 * Every page links this sheet before its own <style>. A template must not define
 * these variables itself: eight copies had already drifted (the admin page carried
 * its own border, text and dim greys) in exactly the way the tutor persona once
 * drifted across 21 lesson files. tools/check_theme.py fails the moment a template
 * re-declares a palette variable or hardcodes one of these hex values.
 *
 * Page-specific tokens (layout widths, radii) stay in the page. Colour and type
 * live here. tools/make_hero.py takes the same values as flags, so the hero image
 * is regenerated from this palette rather than drifting from it.
 */
:root {
  /* ground: uri.ai's warm navy rather than GitHub's blue-black, so a visitor
     arriving from uri.ai lands somewhere that feels like the same family */
  --bg:#171a22; --bg2:#1f232c; --bg3:#252a34; --border:#2e333d;
  /* text: cream headings, warm grey body */
  --text:#d6d3cb; --dim:#8b909a; --hi:#faf5eb;
  /* accents. --accent is the primary accent (CTA, links, hover, active states);
     --on-accent is the text colour that sits on it. Coral on the public pages
     (Uri, 2026-09-07); the lesson page swaps to teal below. */
  --accent:#f66a61; --on-accent:#1c0b0a;
  /* the brand colour: the wordmark's r and i-dots. Fixed, unlike --accent, so the
     mark is the same coral on the teal lesson page. */
  --brand:#f66a61;
  /* hover: a hue shift rather than a lightening, so the change is seen (Uri,
     2026-09-07). Coral pulled toward the pink arc hue. */
  --accent-hover:#f47a7e;
  /* errors are crimson, not a second coral: a broken-lesson badge must not look
     like the call to action (Uri, 2026-09-07: "I like the crimson") */
  --indigo:#7bacdc; --green:#9fc983; --red:#d7263d; --amber:#f8c753;
  /* course arcs: one hue per stretch of the course, used on the chapter cards so the
     catalog reads as a journey with movements rather than fourteen identical boxes.
     Grouping (Uri, 2026-09-07: "arc groupings sounds good"): 1 foundations Ch1-3 ·
     2 models and evaluation Ch4-7 · 3 deep learning Ch8-12 · 4 applications and
     ethics Ch13-14. The chapter-to-arc map itself is arcOf() in landing.html. */
  --arc-1:#6fcbb9; --arc-2:#7bacdc; --arc-3:#ef98b4; --arc-4:#9fc983;
  /* type */
  --body:'EB Garamond',Georgia,serif;
  --ui:'Outfit',sans-serif;
  --mono:'Fira Code',monospace;
}

/* ── The wordmark ──────────────────────────────────────────────────────────
   Live text, not an image: Outfit 600 in the heading cream, the r inside a coral
   column (capital and base, the idea from the original logo), and the two i-dots
   in the same coral. Uri, 2026-09-07: "K, pillar-r in Outfit" + "make the dots on
   the i's match the color of the r". Markup, with a dotless ı so the dot can be
   drawn:  <a class="wm" aria-label="Uriversity"><span aria-hidden="true">
           U<span class="wm-r">r</span><span class="wm-i">ı</span>vers<span class="wm-i">ı</span>ty
           </span></a>   with font-size set inline per page. */
.wm{display:inline-flex;align-items:baseline;font-family:var(--ui);font-weight:600;
    color:var(--hi);letter-spacing:-.01em;line-height:1;text-decoration:none;white-space:nowrap}
.wm-r{position:relative;display:inline-block;color:var(--brand);padding:0 .11em;margin:0 .03em;line-height:1}
.wm-r::before,.wm-r::after{content:"";position:absolute;left:-.06em;right:-.06em;height:.19em}
.wm-r::before{top:-.30em;background:linear-gradient(var(--brand) 0 .075em,transparent .075em .13em,var(--brand) .13em)}
/* capital and base sit the same distance from the r, so the letter is centred in
   the column (Uri, 2026-09-07: "the r needs to be in the middle of the pillar") */
.wm-r::after{bottom:-.30em;background:linear-gradient(var(--brand) 0 .06em,transparent .06em .12em,var(--brand) .12em)}
.wm-i{position:relative;display:inline-block}
.wm-i::after{content:"";position:absolute;left:50%;top:.02em;width:.15em;height:.15em;margin-left:-.075em;
    border-radius:50%;background:var(--brand)}

/* ── The sign-in form ──────────────────────────────────────────────────────
   One form for every page that asks for an email (decision 31): the lesson's gate,
   "Sign in" top right, a locked chapter's preview, and the join box after the
   catalog. Markup and behaviour are /static/auth.js; the lesson's agreement modal
   reuses the overlay, box and buttons. Moved here from lesson.html on 2026-09-25 so
   a second page could have it without a second copy. */
.gate-overlay{display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  align-items:center;justify-content:center}
.gate-overlay.open{display:flex}
.gate-box{position:relative;background:var(--bg2);border:1px solid var(--border);
  border-radius:14px;padding:36px 40px;max-width:440px;width:90%;
  text-align:center;max-height:92vh;overflow-y:auto}
.gate-box h2{font-family:var(--ui);font-size:20px;font-weight:600;
  color:var(--hi);margin:0 0 8px}
.gate-box p{font-family:var(--body);font-size:14px;color:var(--dim);
  margin:0 0 20px;line-height:1.6}
.gate-input{width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:8px;padding:12px 16px;color:var(--text);
  font-family:var(--ui);font-size:15px;box-sizing:border-box}
.gate-input:focus{outline:none;border-color:var(--accent)}
.gate-btn{display:inline-block;margin-top:16px;padding:10px 32px;
  background:var(--accent);color:var(--bg);border:none;border-radius:8px;
  font-family:var(--ui);font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;transition:background .15s}
.gate-btn:hover{background:var(--accent-hover)}
.gate-btn:disabled{opacity:.4;cursor:not-allowed}
/* Sent state: a big definite mark, because the question a waiting person has is
   "did that actually work?" and a grey line of text does not answer it. */
.gate-btn.ghost{background:transparent;color:var(--dim);
  border:1px solid var(--border);font-weight:500}
.gate-btn.ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent)}
.sent-mark{font-size:38px;line-height:1;color:var(--accent);margin-bottom:10px}
.gate-box .sent-fine,.join-sent .sent-fine{font-size:13px;color:var(--dim);margin-top:12px}
.auth-sent strong{color:var(--text);font-weight:600}
/* A way out. The lesson's gate used to have none: press the ask button, change your
   mind, and the only escape was reloading the page. */
.gate-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--dim);
  font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:6px}
.gate-x:hover{color:var(--hi);background:var(--bg3)}
.gate-check{display:flex;gap:10px;align-items:flex-start;text-align:left;margin:14px 0 4px;
  font-family:var(--ui);font-size:14px;color:var(--text);line-height:1.45;cursor:pointer}
.gate-check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.gate-check small{display:block;color:var(--dim);font-size:12px}
.gate-msg{margin-top:14px;color:var(--dim);min-height:1.4em;font-family:var(--ui);font-size:13px}
.gate-box .gate-msg{margin-bottom:0}
.gate-input + .gate-input{margin-top:8px}
/* The intake question (decision 52): a visible label, not a placeholder, because a
   placeholder was cut off at "(option" on a phone and vanishes once you type. */
.gate-note{display:block;text-align:left;margin-top:12px;font-family:var(--ui);font-size:12px;
  color:var(--dim);line-height:1.45}
.gate-note textarea{display:block;margin-top:6px;min-height:54px;resize:vertical;font:inherit;
  font-size:14px;color:var(--text)}
/* The application (decision 59): labelled fields, and a choice with no default. */
.gate-field{display:block;text-align:left;margin-top:12px;font-family:var(--ui);font-size:12px;
  color:var(--dim)}
.gate-field .gate-input{margin-top:5px}
.gate-choice{border:none;padding:0;margin:14px 0 0;text-align:left}
.gate-choice legend{font-family:var(--ui);font-size:12px;color:var(--dim);margin-bottom:2px;padding:0}
.gate-choice .gate-check{margin:8px 0 0}
.gate-choice input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;margin-top:3px}
.auth-alt{font-family:var(--ui);font-size:13px;color:var(--dim);margin-top:14px}
/* Links inside the sign-in, application and account panels ("Sign out", "Apply instead",
   the schedule): default blue on this ground was barely legible (cold-eyes round 3). */
.gate-box a{color:var(--accent);text-decoration:none}
.gate-box a:hover{text-decoration:underline}
.acc-status{font-family:var(--body);font-size:15px;color:var(--text);line-height:1.55;margin:4px 0 0}
.acc-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.acc-actions .gate-btn{margin-top:16px}
/* The independence line (course.toml [site], decision 51), in every public page's footer. */
.indep{display:block;max-width:640px;margin:10px auto 0;font-size:11px;line-height:1.5;
  color:var(--dim)}

/* The lesson page is where a student spends hours, so its primary accent is the
   calmer teal rather than the coral that sells the course on the public pages.
   Same token, so nothing in lesson.html knows or cares (Uri, 2026-09-07: "the
   teal lesson"). Only the accent pair lives here: every other token, the type
   stack included, must stay in :root or the other seven pages lose it. */
body.lesson {
  --accent:#6fcbb9; --on-accent:#0b1a17;
  /* the blue arc hue pulled toward pink and the teal itself: blue 60, pink 20, teal 20 */
  --accent-hover:#90aecd;
}