/* ============================================================================
   PLATFORM PAGES — "Reading Room + Lexy" design system
   Shared by the redesigned platform pages (Dashboard, Session History,
   Analytics). One source of truth: replaces the per-page <style> blocks and the
   three divergent vocabularies (.platform-card / .ios-card / .platform-form).

   Editorial, warm, hyperlegible — distinctive THROUGH accessibility (warm paper
   reduces visual stress; Lexend body is engineered to reduce reading
   distortion). Lexy's pixel personality appears ONLY on gamified surfaces.

   - All classes are `rr-`/pixel-prefixed → cannot collide with legacy CSS.
   - Scoped resets live on `.rr-page`; component classes are namespaced.
   - @font-face is declared in the template <head> via {% static %} (CSP-safe).
   - Mobile-first: base styles target small screens, media queries scale up.

   Signed: Kev + claude-opus-4-8, 2026-06-16, Confidence 0.78, Prior: Unknown
   Review: Kev + claude-opus-4-8, 2026-06-17 — dark theme retuned from warm
     espresso (#15110C) to "cobalt ink" (#0D1424), aligning the room with Lexy's
     blue. Light stays warm paper (dyslexia glare). Teal/coral re-tuned to pop
     on blue. Paired with a user-facing light/dark toggle (theme-toggle.html).
============================================================================ */

:root {
  --rr-paper:#FBF6EC; --rr-paper-2:#F2E9D8; --rr-card:#FFFDF8;
  --rr-ink:#201913; --rr-ink-2:#5B4F43; --rr-ink-3:#6F6356;
  --rr-line:#E4D8C2; --rr-line-soft:#EFE6D5;
  --rr-teal:#0E6E5C; --rr-teal-2:#0A5547; --rr-teal-wash:#DCEAE3;
  --rr-coral:#EE4D26; --rr-coral-wash:#FBE0D5;
  --rr-amber:#D99311; --rr-amber-wash:#F7E9C8;
  --rr-good:#0E6E5C; --rr-good-wash:#DCEAE3; --rr-warn:#B5740A; --rr-warn-wash:#F7E9C8;
  --rr-display:'Fraunces','Iowan Old Style',Georgia,serif;
  --rr-body:'Lexend',system-ui,-apple-system,sans-serif;
  --rr-pixel:'Pixelify Sans','Courier New',monospace;
  --rr-r:14px; --rr-r-sm:9px;
  --rr-shadow:0 1px 2px rgba(45,32,18,.05),0 8px 24px -16px rgba(45,32,18,.22);
  --rr-shadow-lift:0 2px 4px rgba(45,32,18,.06),0 18px 40px -22px rgba(45,32,18,.30);
  --rr-ease:cubic-bezier(.2,.7,.2,1);
}
/* Dark = "cobalt ink" — Lexy's blue becomes the room (was warm espresso
   #15110C). Light mode keeps warm paper deliberately: cream cuts visual stress
   for dyslexic readers, so it stays an accessibility feature, not a vibe.
   Teal + coral are tuned to pop against blue-ink rather than brown. */
@media (prefers-color-scheme: dark) {
  :root {
    --rr-paper:#0D1424; --rr-paper-2:#131D33; --rr-card:#16213A;
    --rr-ink:#EAF0FB; --rr-ink-2:#AEBDD6; --rr-ink-3:#8295B5;
    --rr-line:#243352; --rr-line-soft:#1A2740;
    --rr-teal:#4CC6AC; --rr-teal-2:#6FD8C1; --rr-teal-wash:#123233;
    --rr-coral:#FF7A55; --rr-coral-wash:#3A2A26;
    --rr-amber:#EBB54A; --rr-amber-wash:#2E2917;
    --rr-good:#4CC6AC; --rr-good-wash:#123233; --rr-warn:#E0A23C; --rr-warn-wash:#2E2917;
    --rr-shadow:0 1px 2px rgba(2,6,18,.5),0 10px 28px -18px rgba(2,6,18,.85);
    --rr-shadow-lift:0 2px 6px rgba(2,6,18,.6),0 22px 46px -24px rgba(2,6,18,.95);
  }
}
/* explicit theme override hooks (base.html sets data-theme=dyslexiaLight/Dark) */
[data-theme="dyslexiaDark"] {
  --rr-paper:#0D1424; --rr-paper-2:#131D33; --rr-card:#16213A;
  --rr-ink:#EAF0FB; --rr-ink-2:#AEBDD6; --rr-ink-3:#8295B5;
  --rr-line:#243352; --rr-line-soft:#1A2740;
  --rr-teal:#4CC6AC; --rr-teal-2:#6FD8C1; --rr-teal-wash:#123233;
  --rr-coral:#FF7A55; --rr-coral-wash:#3A2A26;
  --rr-amber:#EBB54A; --rr-amber-wash:#2E2917;
  --rr-good:#4CC6AC; --rr-good-wash:#123233; --rr-warn:#E0A23C; --rr-warn-wash:#2E2917;
  --rr-shadow:0 1px 2px rgba(2,6,18,.5),0 10px 28px -18px rgba(2,6,18,.85);
  --rr-shadow-lift:0 2px 6px rgba(2,6,18,.6),0 22px 46px -24px rgba(2,6,18,.95);
}
[data-theme="dyslexiaLight"] {
  --rr-paper:#FBF6EC; --rr-paper-2:#F2E9D8; --rr-card:#FFFDF8;
  --rr-ink:#201913; --rr-ink-2:#5B4F43; --rr-ink-3:#6F6356;
  --rr-line:#E4D8C2; --rr-line-soft:#EFE6D5;
  --rr-teal:#0E6E5C; --rr-teal-2:#0A5547; --rr-teal-wash:#DCEAE3;
  --rr-coral:#EE4D26; --rr-coral-wash:#FBE0D5;
  --rr-amber:#D99311; --rr-amber-wash:#F7E9C8;
  --rr-good:#0E6E5C; --rr-good-wash:#DCEAE3; --rr-warn:#B5740A; --rr-warn-wash:#F7E9C8;
}

/* ---------------------------------------------------------------- page shell */
.rr-page {
  background: var(--rr-paper);
  color: var(--rr-ink);
  font-family: var(--rr-body);
  font-size: 16px; line-height: 1.65; letter-spacing: .01em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(238,77,38,.025), transparent 38%),
    radial-gradient(circle at 86% 8%, rgba(14,110,92,.035), transparent 40%);
}
.rr-page *, .rr-page *::before, .rr-page *::after { box-sizing: border-box; }
.rr-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 120px; }
@media (min-width: 768px) { .rr-wrap { padding: 0 28px 96px; } }

/* ---------------------------------------------------------------- masthead */
.rr-masthead { padding: 32px 0 20px; }
@media (min-width: 768px) { .rr-masthead { padding: 48px 0 26px; } }
.rr-masthead-row { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .rr-masthead-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; } }
.rr-kicker { font-family: var(--rr-body); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--rr-teal); display: inline-flex; align-items: center; gap: 10px; }
.rr-h1 { font-family: var(--rr-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2.1rem, 7vw, 4.2rem); line-height: 1; letter-spacing: -.02em; margin: 12px 0 0; max-width: 18ch; }
.rr-lede { font-size: 16px; color: var(--rr-ink-2); margin: 14px 0 0; max-width: 56ch; }
@media (min-width: 768px) { .rr-lede { font-size: 17px; } }
.rr-masthead-aside { display: flex; align-items: center; gap: 14px; }

.rr-rule { height: 1px; background: var(--rr-line); border: 0; margin: 0; }

/* ---------------------------------------------------------------- stat strip */
.rr-statstrip { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--rr-ink); border-bottom: 1px solid var(--rr-line); margin-top: 24px; }
@media (min-width: 768px) { .rr-statstrip { grid-template-columns: repeat(4, 1fr); margin-top: 28px; } }
.rr-stat { padding: 18px 16px 20px; border-left: 1px solid var(--rr-line); }
.rr-stat:nth-child(odd) { border-left: 0; padding-left: 2px; }
.rr-stat:nth-child(3), .rr-stat:nth-child(4) { border-top: 1px solid var(--rr-line); }
@media (min-width: 768px) {
  .rr-stat { padding: 22px 22px 24px; border-left: 1px solid var(--rr-line); border-top: 0; }
  .rr-stat:first-child { border-left: 0; padding-left: 2px; }
  .rr-stat:nth-child(odd) { border-left: 1px solid var(--rr-line); padding-left: 22px; }
  .rr-stat:first-child { border-left: 0; padding-left: 2px; }
}
.rr-stat .v { font-family: var(--rr-display); font-weight: 600; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--rr-ink); display: flex; align-items: baseline; gap: 2px; }
.rr-stat .v .u { font-size: .42em; font-weight: 600; color: var(--rr-ink-3); letter-spacing: 0; }
.rr-stat .l { margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-ink-3); }
.rr-stat.accent .v { color: var(--rr-teal); }

/* ---------------------------------------------------------------- sections */
.rr-section { margin-top: 32px; }
@media (min-width: 768px) { .rr-section { margin-top: 40px; } }
.rr-section-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.rr-section-label h2 { font-family: var(--rr-body); font-weight: 600; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--rr-ink-2); margin: 0; }
.rr-section-label .rr-rule { flex: 1; }

/* ---------------------------------------------------------------- cards */
.rr-card { background: var(--rr-card); border: 1px solid var(--rr-line); border-radius: var(--rr-r); box-shadow: var(--rr-shadow); padding: 22px; }
@media (min-width: 768px) { .rr-card { padding: 26px 28px; } .rr-card.pad-lg { padding: 32px 34px; } }
.rr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.rr-card-title { font-family: var(--rr-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; margin: 0; }
.rr-card-meta { font-size: 13px; color: var(--rr-ink-3); font-weight: 500; }
.rr-card-link { color: var(--rr-teal); text-decoration: none; font-weight: 600; font-size: 13px; }

.rr-grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 880px) { .rr-grid-2 { grid-template-columns: 1fr 1fr; gap: 22px; } }
.rr-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.rr-center { max-width: 720px; margin: 0 auto; }

/* ---------------------------------------------------------------- insight rows */
.rr-insight { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--rr-line-soft); }
.rr-insight:first-child { border-top: 0; padding-top: 2px; }
.rr-insight .ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--rr-teal-wash); color: var(--rr-teal); }
.rr-insight .ico.coral { background: var(--rr-coral-wash); color: var(--rr-coral); }
.rr-insight .ico.amber { background: var(--rr-amber-wash); color: var(--rr-amber); }
.rr-insight h4 { margin: 2px 0 3px; font-size: 15px; font-weight: 600; color: var(--rr-ink); }
.rr-insight p { margin: 0; font-size: 14px; color: var(--rr-ink-2); line-height: 1.55; }

/* ---------------------------------------------------------------- session list */
.rr-sessions { border-top: 2px solid var(--rr-ink); }
.rr-srow { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 16px; padding: 16px 4px; border-bottom: 1px solid var(--rr-line); }
.rr-srow:hover { background: var(--rr-paper-2); }
.rr-srow .tag { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--rr-teal-wash); color: var(--rr-teal); }
.rr-srow .tag.phonics { background: var(--rr-coral-wash); color: var(--rr-coral); }
.rr-srow .tag.vocab { background: var(--rr-amber-wash); color: var(--rr-amber); }
.rr-srow .title { font-weight: 600; font-size: 15px; margin: 0 0 2px; }
.rr-srow .sub { font-size: 13px; color: var(--rr-ink-3); margin: 0; }
.rr-srow-figs { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding-left: 58px; }
.rr-figure .v { font-family: var(--rr-display); font-weight: 600; font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--rr-ink); }
.rr-figure .l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-ink-3); margin-top: 3px; }
.rr-srow-figs .rr-badge { margin-left: auto; }
@media (min-width: 760px) {
  .rr-srow { grid-template-columns: auto 1fr auto auto auto; gap: 22px; padding: 20px 6px; }
  .rr-srow .tag { width: 46px; height: 46px; }
  .rr-srow-figs { display: contents; }
  .rr-figure { text-align: right; }
  .rr-figure .v { font-size: 1.45rem; }
  .rr-srow-figs .rr-badge { margin-left: 0; }
}

/* ---------------------------------------------------------------- badges */
.rr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rr-badge.good { background: var(--rr-good-wash); color: var(--rr-good); }
.rr-badge.warn { background: var(--rr-warn-wash); color: var(--rr-warn); }
.rr-badge.live { background: var(--rr-coral); color: #fff; }

/* ---------------------------------------------------------------- buttons */
.rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--rr-body); font-weight: 600; font-size: 14.5px; padding: 11px 18px; border-radius: 11px; border: 1px solid var(--rr-line); background: var(--rr-card); color: var(--rr-ink); cursor: pointer; text-decoration: none; transition: transform .15s var(--rr-ease), box-shadow .2s var(--rr-ease), background .2s; }
.rr-btn:hover { box-shadow: var(--rr-shadow); transform: translateY(-1px); }
.rr-btn-primary { background: var(--rr-teal); border-color: var(--rr-teal); color: #fff; }
.rr-btn-primary:hover { background: var(--rr-teal-2); }
.rr-btn-coral { background: var(--rr-coral); border-color: var(--rr-coral); color: #fff; }

/* ---------------------------------------------------------------- segmented (time range) */
.rr-seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--rr-paper-2); border: 1px solid var(--rr-line); border-radius: 12px; }
.rr-seg a { padding: 7px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--rr-ink-3); text-decoration: none; transition: all .15s var(--rr-ease); }
.rr-seg a.active { background: var(--rr-card); color: var(--rr-ink); box-shadow: var(--rr-shadow); }

/* ---------------------------------------------------------------- progress / XP */
.rr-xp-now { font-family: var(--rr-display); font-weight: 600; font-size: 2.1rem; line-height: 1; }
.rr-xp-now .pct { color: var(--rr-teal); }
.rr-bar { height: 18px; border-radius: 999px; background: var(--rr-paper-2); border: 1px solid var(--rr-line); overflow: hidden; }
.rr-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rr-teal), var(--rr-teal-2)); }
.rr-bar-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--rr-ink-3); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- quick actions */
.rr-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.rr-action { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 16px; border-radius: var(--rr-r-sm); border: 1px solid var(--rr-line); background: var(--rr-paper); color: var(--rr-ink); cursor: pointer; text-decoration: none; font-weight: 600; font-size: 14px; transition: all .18s var(--rr-ease); }
.rr-action:hover { background: var(--rr-card); border-color: var(--rr-teal); transform: translateY(-2px); box-shadow: var(--rr-shadow); }
.rr-action .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--rr-teal-wash); color: var(--rr-teal); display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------- list (journey/schools/recent) */
.rr-li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--rr-line-soft); }
.rr-li:first-child { border-top: 0; }
.rr-li .ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--rr-teal-wash); color: var(--rr-teal); }
.rr-li .ico.coral { background: var(--rr-coral-wash); color: var(--rr-coral); }
.rr-li .ico.amber { background: var(--rr-amber-wash); color: var(--rr-amber); }
.rr-li .body { flex: 1; min-width: 0; }
.rr-li .body .t { font-weight: 600; font-size: 15px; margin: 0; }
.rr-li .body .s { font-size: 13px; color: var(--rr-ink-3); margin: 0; }
.rr-li .end { text-align: right; }
.rr-li .end .v { font-family: var(--rr-display); font-weight: 600; font-size: 1.2rem; color: var(--rr-teal); font-variant-numeric: tabular-nums; }
.rr-li .end .s { font-size: 11px; color: var(--rr-ink-3); }

/* ---------------------------------------------------------------- filters */
.rr-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.rr-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 150px; }
.rr-field label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rr-ink-3); }
.rr-input { font-family: var(--rr-body); font-size: 14.5px; padding: 11px 13px; border: 1px solid var(--rr-line); border-radius: 10px; background: var(--rr-paper); color: var(--rr-ink); transition: border-color .15s, box-shadow .15s; width: 100%; }
.rr-input:focus { outline: none; border-color: var(--rr-teal); box-shadow: 0 0 0 3px var(--rr-teal-wash); }

/* ---------------------------------------------------------------- empty state */
.rr-empty { text-align: center; padding: 48px 20px; }
.rr-empty .ico { width: 64px; height: 64px; border-radius: 18px; background: var(--rr-paper-2); color: var(--rr-ink-3); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.rr-empty h3 { font-family: var(--rr-display); font-weight: 600; font-size: 1.4rem; margin: 0 0 8px; }
.rr-empty p { color: var(--rr-ink-2); max-width: 34ch; margin: 0 auto 20px; }

/* ---------------------------------------------------------------- ranking ribbon */
.rr-ribbon { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--rr-ink); color: var(--rr-paper); font-weight: 600; font-size: 14px; }
.rr-ribbon .star { color: var(--rr-amber); }

/* ---------------------------------------------------------------- charts */
.rr-chart { position: relative; height: 240px; }
.rr-chart canvas { max-width: 100%; }

/* iOS app provides its own time-range chrome — hide ours inside the WebView */
html.webview .rr-seg-range { display: none; }

/* ============================================================ PIXEL ACCENTS */
.rr-px { font-family: var(--rr-pixel); letter-spacing: .02em; }
.rr-chip-px { display: inline-flex; align-items: center; gap: 7px; font-family: var(--rr-pixel); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border: 2px solid var(--rr-teal); color: var(--rr-teal); background: var(--rr-teal-wash); }
.rr-chip-px.solid { background: var(--rr-teal); color: #fff; }

/* segmented XP health-bar */
.rr-segbar { display: flex; gap: 4px; }
.rr-segbar .seg { flex: 1; height: 22px; background: var(--rr-paper-2); border: 2px solid var(--rr-line); }
.rr-segbar .seg.on { background: var(--rr-teal); border-color: var(--rr-teal); }

/* streak flame meter */
.rr-flames { display: inline-flex; gap: 3px; vertical-align: middle; }
.rr-flame { width: 14px; height: 19px; background: var(--rr-line); clip-path: polygon(50% 0, 80% 40%, 100% 100%, 0 100%, 20% 40%); }
.rr-flame.lit { background: var(--rr-coral); }
.rr-flame.lit.amber { background: var(--rr-amber); }

/* achievement medals */
.rr-medals { display: flex; gap: 18px; flex-wrap: wrap; }
.rr-medal { text-align: center; width: 78px; }
.rr-medal .coin { width: 56px; height: 56px; margin: 0 auto 8px; background: var(--rr-amber-wash); border: 3px solid var(--rr-amber); color: var(--rr-amber); box-shadow: 3px 3px 0 rgba(45,32,18,.16); display: flex; align-items: center; justify-content: center; }
.rr-medal.recent .coin { background: var(--rr-amber); color: #fff; }
.rr-medal.locked .coin { background: var(--rr-paper-2); border-color: var(--rr-line); color: var(--rr-ink-3); box-shadow: none; }
.rr-medal .name { font-family: var(--rr-pixel); font-weight: 600; font-size: 11.5px; letter-spacing: .03em; color: var(--rr-ink-2); }

/* ---------------------------------------------------------------- a11y + motion */
.rr-page a:focus-visible, .rr-page button:focus-visible, .rr-page .rr-input:focus-visible, .rr-page [tabindex]:focus-visible { outline: 3px solid var(--rr-teal); outline-offset: 2px; border-radius: 6px; }
.rr-reveal { opacity: 0; transform: translateY(12px); animation: rrUp .55s var(--rr-ease) forwards; }
.rr-reveal.d1 { animation-delay: .06s; } .rr-reveal.d2 { animation-delay: .12s; }
.rr-reveal.d3 { animation-delay: .18s; } .rr-reveal.d4 { animation-delay: .24s; }
@keyframes rrUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rr-page * { animation: none !important; transition: none !important; }
  .rr-reveal { opacity: 1; transform: none; }
}

/* ============================================================ NAV CHROME
   Harmonise the shared sidebar + mobile tab bar with the Reading Room theme,
   SCOPED to redesigned pages via body.rr-shell so the ~15 still-legacy pages
   keep their existing nav. Replaces the iOS-blue active state with the teal
   brand and warms the sidebar surface. */
/* !important beats base.html's inline body background (var(--system-grouped-background)) */
body.rr-shell { background: var(--rr-paper) !important; }
.rr-shell .platform-sidebar { background: var(--rr-card); border-right: 1px solid var(--rr-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.rr-shell .sidebar-link { color: var(--rr-ink-2); font-family: var(--rr-body); }
.rr-shell .sidebar-link:hover { background: var(--rr-paper-2); color: var(--rr-ink); }
.rr-shell .sidebar-link.active { background: var(--rr-teal-wash); color: var(--rr-teal); }
.rr-shell .sidebar-link.active .icon { color: var(--rr-teal); }
.rr-shell .sidebar-section-label { color: var(--rr-ink-3); }
.rr-shell .sidebar-footer { border-top-color: var(--rr-line); }
.rr-shell .sidebar-signout { color: var(--rr-coral); }
.rr-shell .sidebar-signout:hover { background: var(--rr-coral-wash); color: var(--rr-coral); }
.rr-shell .sidebar-signout .icon { color: var(--rr-coral); }

.rr-shell .user-avatar-mini { background: var(--rr-teal); color: #fff; }
.rr-shell .user-profile-mini:hover { background: var(--rr-paper-2); }
.rr-shell .user-name-mini { color: var(--rr-ink); }
.rr-shell .user-role-mini { color: var(--rr-ink-2); }

.rr-shell .mobile-tab-bar { background: var(--rr-card); border-top: 1px solid var(--rr-line); }
.rr-shell .mobile-tab-item { color: var(--rr-ink-3); }
.rr-shell .mobile-tab-item.active { color: var(--rr-teal); }

/* ============================================================ QR PROFILES */
.rr-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.rr-profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px; border: 1px solid var(--rr-line); border-radius: var(--rr-r);
  background: var(--rr-card); color: var(--rr-ink); cursor: pointer; text-align: center;
  font-family: var(--rr-body); transition: transform .15s var(--rr-ease), box-shadow .2s var(--rr-ease), border-color .2s;
}
.rr-profile-card:hover { transform: translateY(-2px); box-shadow: var(--rr-shadow); border-color: var(--rr-teal); }
.rr-profile-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--rr-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rr-display); font-weight: 600; font-size: 1.25rem; letter-spacing: .02em;
}
.rr-profile-name { font-weight: 600; font-size: 15px; line-height: 1.3; word-break: break-word; }
.rr-profile-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--rr-teal); letter-spacing: .02em; }

/* ============================================================ FORMS
   Shared form vocabulary for settings / create-student / management / etc.
   so converted pages don't reinvent inputs. */
.rr-form { display: flex; flex-direction: column; gap: 20px; }
.rr-form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px) { .rr-form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.rr-field { display: flex; flex-direction: column; gap: 7px; }
.rr-field > label, .rr-label { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-ink-3); }
.rr-field .hint { font-size: 12.5px; color: var(--rr-ink-3); }
.rr-field .err { font-size: 12.5px; color: var(--rr-coral); font-weight: 500; }
/* text inputs, selects, textareas all share the input look */
.rr-input, .rr-select, .rr-textarea,
.rr-page input[type="text"], .rr-page input[type="email"], .rr-page input[type="password"],
.rr-page input[type="number"], .rr-page input[type="tel"], .rr-page input[type="date"],
.rr-page input[type="search"], .rr-page select, .rr-page textarea {
  font-family: var(--rr-body); font-size: 15px; padding: 11px 13px; width: 100%;
  border: 1px solid var(--rr-line); border-radius: 10px; background: var(--rr-paper);
  color: var(--rr-ink); transition: border-color .15s, box-shadow .15s;
}
.rr-page select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238E8173' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.rr-page textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.rr-input:focus, .rr-select:focus, .rr-textarea:focus,
.rr-page input:focus, .rr-page select:focus, .rr-page textarea:focus {
  outline: none; border-color: var(--rr-teal); box-shadow: 0 0 0 3px var(--rr-teal-wash);
}
/* checkbox / radio rows */
.rr-check { display: flex; align-items: flex-start; gap: 11px; padding: 12px 0; cursor: pointer; }
.rr-check input { width: 20px; height: 20px; accent-color: var(--rr-teal); margin-top: 1px; flex: 0 0 auto; }
.rr-check .ct { font-weight: 600; font-size: 15px; }
.rr-check .cs { font-size: 13px; color: var(--rr-ink-3); }
.rr-form-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.rr-btn-ghost { background: transparent; border-color: transparent; color: var(--rr-ink-2); }
.rr-btn-ghost:hover { background: var(--rr-paper-2); }
.rr-btn-danger { background: var(--rr-coral); border-color: var(--rr-coral); color: #fff; }

/* ============================================================ TABLE / ROSTER */
.rr-table-wrap { overflow-x: auto; border: 1px solid var(--rr-line); border-radius: var(--rr-r); background: var(--rr-card); }
.rr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rr-table thead th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rr-ink-3); padding: 14px 18px; border-bottom: 2px solid var(--rr-ink); white-space: nowrap; }
.rr-table tbody td { padding: 15px 18px; border-bottom: 1px solid var(--rr-line); vertical-align: middle; }
.rr-table tbody tr:last-child td { border-bottom: 0; }
.rr-table tbody tr:hover { background: var(--rr-paper-2); }
.rr-table .num { font-family: var(--rr-display); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================ SUB-PAGE HEADER
   Lighter header for detail/sub pages that want a back-link + title rather than
   the full editorial masthead. */
.rr-subhead { display: flex; align-items: center; gap: 14px; padding: 26px 0 18px; }
.rr-back { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--rr-line); background: var(--rr-card); color: var(--rr-ink-2); text-decoration: none; flex: 0 0 auto; }
.rr-back:hover { border-color: var(--rr-teal); color: var(--rr-teal); }
.rr-subhead-titles { flex: 1; min-width: 0; }
.rr-subhead h1 { font-family: var(--rr-display); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.rr-subhead .sub { font-size: 14px; color: var(--rr-ink-3); margin: 4px 0 0; }

/* ============================================================ MISC */
.rr-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--rr-paper-2); border: 1px solid var(--rr-line); border-radius: 12px; flex-wrap: wrap; }
.rr-tabs a { padding: 8px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--rr-ink-3); text-decoration: none; }
.rr-tabs a.active { background: var(--rr-card); color: var(--rr-ink); box-shadow: var(--rr-shadow); }
.rr-note { padding: 14px 16px; border-radius: var(--rr-r-sm); border: 1px solid var(--rr-line); background: var(--rr-paper-2); font-size: 14px; color: var(--rr-ink-2); display: flex; gap: 10px; align-items: flex-start; }
.rr-note.teal { background: var(--rr-teal-wash); border-color: transparent; color: var(--rr-teal-2); }
.rr-note.coral { background: var(--rr-coral-wash); border-color: transparent; }

/* ---- QR reveal modal ---- */
.rr-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rr-modal[hidden] { display: none; }
.rr-modal-backdrop { position: absolute; inset: 0; background: rgba(20,14,8,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.rr-modal-card { position: relative; background: var(--rr-card); border: 1px solid var(--rr-line); border-radius: var(--rr-r); box-shadow: var(--rr-shadow-lift); padding: 28px; max-width: 360px; width: 100%; text-align: center; }
.rr-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--rr-paper-2); color: var(--rr-ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rr-modal-close:hover { background: var(--rr-line); }
.rr-modal-name { font-family: var(--rr-display); font-weight: 600; font-size: 1.4rem; margin: 0 0 18px; }
.rr-qr-frame { background: #fff; border-radius: 12px; padding: 16px; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.rr-qr-frame img { width: 100%; max-width: 220px; height: auto; image-rendering: pixelated; display: block; }
.rr-modal-meta { font-size: 13px; color: var(--rr-ink-3); margin: 16px 0 0; }
.rr-qr-spinner { width: 36px; height: 36px; border: 3px solid var(--rr-line); border-top-color: var(--rr-teal); border-radius: 50%; animation: rrSpin .8s linear infinite; }
@keyframes rrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rr-qr-spinner { animation: none; } }
