/* ═══════════════════════════════════════════════════════════════════════
   Skoral · THEME — single source of truth for the whole app
   ───────────────────────────────────────────────────────────────────────
   "Refined" look (Option D, finalized): lavender canvas · white cards ·
   thin 1px borders · soft GRAY offset shadow · clean sans everywhere,
   EXCEPT the Skoral wordmark + the student's name (handwritten Caveat).

   HOW TO RE-SKIN THE ENTIRE APP: edit the SEMANTIC TOKENS in the :root
   block below. Every screen (classic .sk views, the gamified .game app,
   the .tr2 results page, Content Studio) reads from these — change a value
   here and it propagates everywhere. Do NOT hardcode colors/fonts in
   component CSS; add a token here and reference it with var(--…).

   Loaded AFTER styles.css in index.html, so this layer wins.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1 · PALETTE — "Modern Sketch" (warm off-white canvas, pastel tiles,
        green highlight). Sourced from the Stitch Explore mock. ──────────── */
  --c-canvas:     #faf9f6;   /* warm off-white page background */
  --c-white:      #ffffff;
  --c-ink:        #161d1f;   /* near-black, slightly cool */
  --c-ink-soft:   #44504f;
  --c-muted:      #6b7574;
  --c-border:     #161d1f;             /* near-black hairline (Modern Sketch look) */
  --c-shadow:     rgba(22,29,31,.14);  /* soft gray offset shadow */
  --c-green:      #18a558;   /* highlight green (text/accents) */
  --c-green-hi:   #6bfe9c;   /* bright mint highlight (active subject, underline) */
  --c-green-soft: #d8f7e3;
  --c-green-line: #b6e9c8;
  --c-blue:       #1e88e5;
  --c-blue-dark:  #1565c0;
  --c-blue-soft:  #e3f2fd;
  --c-peach:      #fff3e0;
  --c-peach-line: #ffddb9;
  --c-red:        #e53935;
  --c-red-soft:   #ffebee;
  --c-red-line:   #ffcdd2;
  --c-gold:       #c9a227;

  /* ── 2 · TYPOGRAPHY ──────────────────────────────────────────────────── */
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Bricolage Grotesque', 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif;
  --font-brand:   'Caveat', cursive;             /* ONLY the wordmark + the user's name */
  --fs-base: 16px;  --lh-base: 1.5;
  --fw-heading: 800;  --ls-heading: -.4px;

  /* ── 3 · RADIUS / SHADOW / BORDER ────────────────────────────────────── */
  --radius-card: 14px;
  --radius-btn:  11px;
  --radius-pill: 20px;
  --border-card: 1px solid var(--c-border);
  --shadow-card: 2px 2px 0 var(--c-shadow), 0 1px 6px rgba(22, 29, 31, .04);
  --shadow-btn:  1.5px 1.5px 0 var(--c-shadow);
  --shadow-solid:0 2px 7px rgba(30, 136, 229, .26);
  --shadow-ink:  0 2px 7px rgba(22, 29, 31, .20);

  /* ── 4 · SEMANTIC ROLES (the dials you turn to retheme) ──────────────── */
  --page-bg:     var(--c-canvas);
  --surface:     var(--c-white);   /* cards */
  --surface-2:   #f4f3ee;          /* quiet cards (warm) */
  --text:        var(--c-ink);
  --text-soft:   var(--c-ink-soft);
  --text-muted:  var(--c-muted);
  --accent:      var(--c-blue);
  --accent-soft: var(--c-blue-soft);
  --highlight:   var(--c-green-hi);   /* green active/underline highlight */
  --highlight-soft: var(--c-green-soft);
  --topbar-bg:   rgba(255, 255, 255, .72);
  --nav-bg:      #ffffff;
  --banner-bg:   var(--c-peach);
  --banner-line: var(--c-peach-line);
  --banner-text: #6a4a1c;

  /* ── 5 · LEGACY BRIDGE — map the OLD token names onto the new roles ──── */
  /* so the existing classic (.sk) + gamified (.game) CSS re-skins itself. */
  --paper:       var(--surface);
  --paper-2:     var(--surface-2);
  --paper-3:     #ece9e2;
  --ink:         var(--text);
  --ink-soft:    var(--text-soft);
  --muted:       var(--text-muted);
  --dim:         var(--c-border);
  --field-line:  rgba(22,29,31,.18);
  --accent-soft: var(--c-blue-soft);
  --sk-line:     var(--c-border);
  --hand:        var(--font-body);
  --head:        var(--font-heading);
  --good:        var(--c-green);   --good-soft: var(--c-green-soft);
  --bad:         var(--c-red);     --bad-soft:  var(--c-red-soft);
  --warn:        #c97a3a;          --warn-soft: var(--c-peach);   /* warm accent → theme peach */
}

/* ═══ APPLICATION — maps tokens onto the app's components ═════════════════ */

/* ── BASE ────────────────────────────────────────────────────────────── */
html, body { background: var(--page-bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); }

/* ── LAYOUT · app shell, topbar, side nav ────────────────────────────── */
.app, .app.game {
  max-width: none; margin: 0; height: 100vh; min-height: 0;
  background: var(--page-bg) !important; border: 0 !important; border-radius: 0;
}
/* The gamified app re-declares --head/--hand locally (Kalam/Caveat) — override
   them here so its body + headings use the central sans tokens too. Brand and
   the student name opt back into handwriting via --font-brand (see below). */
.app.game { --head: var(--font-heading); --hand: var(--font-body); }
.topbar, .game .topbar {
  background: var(--topbar-bg) !important; border-bottom: 1px solid var(--c-border) !important; border-style: solid !important;
  -webkit-backdrop-filter: saturate(1.15) blur(3px); backdrop-filter: saturate(1.15) blur(3px);
  /* lift the bar (and its profile dropdown) above the scrolling content */
  position: relative; z-index: 50;
}
.profile-menu { z-index: 200; }
.leftnav, .game .leftnav, .stage > .leftnav {
  background: var(--nav-bg) !important; border-right: 1px solid var(--c-border) !important; border-style: solid !important;
}
.content { gap: 16px; }
/* Full-bleed: drop the old 1120px readable-width cap so the app fills the
   whole screen (the cat-grid's auto-fill columns then expand to the edge). */
.content, .game .content { padding-inline: 26px !important; }
.game .cat-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

/* ── HEADINGS + TEXT (sans) ──────────────────────────────────────────── */
.h1, .h2, .h3, .h4, .h-hand,
.game .h1, .game .h2, .game .h3,
.display, .kpi-big, .metric .mv, .game .metric .mv {
  font-family: var(--font-heading); letter-spacing: var(--ls-heading);
}
.h1, .h2, .h3, .game .h1, .game .h2 { font-weight: var(--fw-heading); }
.softink { color: var(--text-soft); }
.muted, .div-lbl { color: var(--text-muted); }

/* ── BRAND + STUDENT NAME (the only handwriting) ─────────────────────── */
.brand, .game .brand, .handname, .av, .game .av, .tr2-brand {
  font-family: var(--font-brand) !important; font-weight: 700;
}
/* Caveat has a small x-height — nudge the inline name up so it matches the
   surrounding sans heading. */
.handname { font-size: 1.12em; }
.brand, .game .brand, .tr2-brand { letter-spacing: .3px; color: var(--accent); }

/* ── SURFACES · cards ────────────────────────────────────────────────── */
.card, .game .card, .auth-card {
  background: var(--surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-dim, .game .card-dim { background: var(--surface-2); }

/* Kill the hand-drawn sketch wobble everywhere → crisp 1px borders.
   (Both systems draw borders via a filtered ::after; we just drop the
   filter + recolor. Box-shadows above provide the depth.) */
.sk::after { filter: none !important; border-width: 1px !important; border-color: var(--c-border) !important; }
.game .sketchy::after,
.game .card::after, .game .cat-tile::after, .game .citem::after, .game .ctype::after,
.game .cat-ico::after, .game .feed-ico::after, .game .res-ico::after, .game .lb-row::after, .game .rule-card::after,
.game .store-card::after, .game .playbar::after, .game .playbtn::after,
.game .badge::after, .game .av::after, .game .tag::after, .game .sp::after, .game .btn::after,
.game .seg::after, .game .ph::after, .game .rollup .node::after {
  filter: none !important; border-width: 1px !important;
}
.brand-dot, .div-line { filter: none !important; }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn, .game .btn {
  font-family: var(--font-body); border-radius: var(--radius-btn);
  background: var(--surface); box-shadow: var(--shadow-btn);
}
.btn.sk::after, .game .btn::after { border-color: var(--c-border) !important; }
.btn-solid, .btn.primary, .game .btn-solid { background: var(--accent) !important; color: #fff !important; box-shadow: var(--shadow-solid); }
.btn-ink, .btn.solid, .game .btn-ink { background: var(--text) !important; color: #fff !important; box-shadow: var(--shadow-ink); }
.btn-good, .game .btn-done { background: var(--c-green) !important; color: #fff !important; }
.btn:active, .game .btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 transparent; }

/* ── PILLS · tags · avatar · streak ──────────────────────────────────── */
.tag, .game .tag { background: var(--surface); border-radius: var(--radius-pill); }
.streak, .game .streak { background: var(--c-green-soft); color: #1c6b3c; }
.av, .game .av { background: var(--accent); color: #fff; }
.pill { background: var(--surface-2); }

/* ── PROGRESS BARS (on lavender) ─────────────────────────────────────── */
.bar, .game .bar { background: rgba(22,29,31,.10); border: 1px solid var(--c-border); }

/* ── BANNERS · AI note, nudges, info strips ──────────────────────────── */
.ai-note, .content > .ai-note {
  background: var(--banner-bg); color: var(--banner-text);
  border: 1px solid var(--banner-line) !important; border-radius: var(--radius-card);
}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.site-foot, .foot, footer, .footer { color: var(--text-soft); }

/* ── FORM CONTROLS ───────────────────────────────────────────────────── */
input.inp, select.inp, textarea.inp { border-radius: var(--radius-btn); border-color: var(--field-line) !important; background: var(--surface); }
input.inp:focus, select.inp:focus, textarea.inp:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── SUBJECT TILES · pastel mosaic (Modern Sketch) ───────────────────────
   The tile's pastel background + accent are set inline by game.js
   (subjectTint(): first character of the name → a fixed pastel, so the
   same letter always gets the same colour). Here we just make the icon
   chip white, tint the progress fill, and keep a crisp hairline border. */
.game .cat-tile {
  background: var(--tile-bg, var(--surface));
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.game .cat-tile::after { border-color: var(--c-border) !important; }
.game .cat-tile .cat-ico {
  background: #fff; color: var(--tile-accent, var(--accent));
  border-radius: 10px; border: 1px solid var(--c-border);
}
.game .cat-tile .cat-ico::after { display: none; }   /* white chip, no sketch frame */
.game .cat-tile .bar { background: rgba(22,29,31,.10); }
.game .cat-tile .bar > i { background: var(--tile-accent, var(--accent)); }
.game .cat-tile .h3 { color: var(--c-ink); }

/* ── GREEN HIGHLIGHT (active states + heading underline) ─────────────────
   The bright mint from the mock, used sparingly for "you are here". */
.game .navitem.active { background: var(--highlight-soft); color: var(--c-ink); }
.game .navitem.active .ni-ico { color: #0e7a47; }
.game .tag.solid, .seg > span.on, .game .seg > span.on { background: var(--c-ink); color: #fff; }
.streak, .game .streak { background: var(--highlight-soft); color: #0e6b3c; }
/* a hand-marker style underline you can wrap around a word: <span class="hl-mark">library</span> */
.hl-mark { background: linear-gradient(180deg, transparent 62%, var(--highlight) 62%); padding: 0 2px; }

/* ── PASTEL SECTIONS (Home) ──────────────────────────────────────────────
   The Stitch pages feel alive because sections carry soft colour. Give the
   Home "Continue" card a gentle tint and split the stat strip into four
   pastel cells (Level / Sparks / Streak / Rank) instead of one flat card. */
.game .grad-accent { background: linear-gradient(135deg, #eef5ff, #f5f0ff) !important; }

/* stat strip → individual pastel cells. Scoped to .statstrip-pastel (the Home
   strip only) so other stat rows — My Learning Performance, Leaderboard — keep
   their clean neutral look. */
.game .card-dim:has(.statstrip-pastel) { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.game .card-dim:has(.statstrip-pastel)::after { display: none !important; }
.game .statstrip-pastel { display: flex; flex-wrap: wrap; gap: 14px; grid-template-columns: none; }
.game .statstrip-pastel > div { flex: 1 1 180px; border-right: 0 !important; border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-card); }
.game .statstrip-pastel > div:nth-child(1) { background: #fff3e0; }   /* amber — Sparks */
.game .statstrip-pastel > div:nth-child(2) { background: #e8f5e9; }   /* green — Streak */
.game .statstrip-pastel > div:nth-child(3) { background: #e3f2fd; }   /* blue  — To do  */
.game .statstrip-pastel .mv { color: var(--c-ink); }

/* ── CHAPTER PAGE · pastel hero + tinted accents ─────────────────────────
   .chap is a display:contents wrapper carrying --tile-bg/--tile-accent
   (subjectTint of the chapter name), inherited by everything below. */
.game .chap-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--tile-bg, var(--surface)); border: 1px solid var(--c-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 20px 22px; margin-bottom: 4px;
}
.game .chap .cat-ico { background: #fff; color: var(--tile-accent, var(--accent)); border: 1px solid var(--c-border); border-radius: 12px; }
.game .chap .cat-ico::after { display: none; }
/* vary the section tints so the page isn't one flat colour */
.game .chap .grad-accent { background: #eaf7ef !important; }                 /* "What you'll learn" → green */
.game .chap .card-dim { background: #fbf2e6 !important; }                    /* "Builds on" → warm amber  */
.game .chap .col > .card:not(.card-dim) { background: #eef3ff !important; }  /* "Completion rolls up" → blue */
/* content-row icons coloured by item TYPE (lesson / tutor / practice / test) */
.game .chap .ctype { color: #fff; }
.game .chap .ctype::after { display: none; }
.game .chap .citem[data-type="lesson"]   .ctype { background: #1e88e5; }
.game .chap .citem[data-type="tutor"]    .ctype { background: #7c4ddb; }
.game .chap .citem[data-type="practice"] .ctype { background: #fb8c00; }
.game .chap .citem[data-type="test"]     .ctype { background: #43a047; }
.game .chap .citem[data-type="feedback"] .ctype { background: #00acc1; }
/* kill the ugly beige "art" placeholder thumbnails */
.game .chap .cthumb { display: none !important; }
.game .chap .bar > i { background: var(--tile-accent, var(--accent)); }
.game .chap .citem.cur { --skc: var(--tile-accent, var(--accent)); }

/* ── SIDEBAR · Stitch touches (grade card + Ask AI + Support) ─────────────
   The leftnav is a full-height flex column; the grade card sits on top, a
   spacer pushes the Ask-AI button + Support link to the bottom. */
.game .leftnav { width: 212px; padding: 16px 14px; gap: 4px; }
.game .nav-grade-name { font-size: 1.3em; color: var(--text); }
.game .nav-grade {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 11px 12px; border-radius: 12px; background: var(--c-blue-soft);
  border: 1px solid var(--c-border);
}
.game .nav-grade-ic {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: var(--c-blue);
  border: 1px solid var(--c-border);
}
.game .nav-grade .handname { font-size: 1.1em; color: var(--text-soft); }
.game .nav-askai {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 6px 2px; padding: 10px 14px; border-radius: 11px;
  background: var(--c-blue); color: #fff; font-weight: 700; font-size: 14px;
  border: 1px solid var(--c-border); box-shadow: var(--shadow-btn); text-decoration: none;
}
.game .nav-minor { opacity: .8; }
.game .navitem.active { background: var(--highlight-soft); color: var(--c-ink); font-weight: 700; }
.game .navitem.active .ni-ico { color: #0e7a47; }