/* Part of Survival Language — see index.html for load order.
   All colors live in tokens.css; this and the other files below only use
   var(--...) references, never raw hex, so a purchased theme (js/store.js
   applyThemeSkin) or dark mode recolors everything without touching CSS. */

  .topbar{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
  .topbar-inner{ max-width:640px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-6); gap:var(--space-3); }
  .who-chip{ display:flex; align-items:center; gap:var(--space-2); flex:1 1 auto; min-width:0; }
  .who-avatar{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-size:12px; font-weight:700; flex:none; object-fit:cover; }
  .avatar-frame{ display:inline-flex; flex:none; border-radius:50%; padding:2.5px; background:linear-gradient(135deg, var(--f1), var(--f2)); }
  .avatar-frame .who-avatar{ box-shadow:0 0 0 2px var(--surface); }
  .who-name{ font-size:13px; font-weight:700; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stats{ display:flex; align-items:center; gap:var(--space-4); flex:none; }
  /* XP/streak/energy read as game meta-info, not the main content — deliberately
     less bold than the Georgian word the learner is actually here for. The icon
     keeps its own tint (.stat-icon, colored inline per stat) so each stat is
     still quick to tell apart at a glance; only the weight/number went quieter. */
  .stat{ display:flex; align-items:center; gap:5px; font-weight:600; font-size:14px; }
  .stat-icon{ display:flex; flex:none; }
  .stat-num{ color:var(--ink-soft); }
  /* Turning the XP stat into a <button> (from a plain <div>) for tap-to-open-Crystals needs
     a full native-chrome reset — appearance/margin/line-height too, not just border/padding —
     or it can render a hair taller/offset than its sibling .stat div and look misaligned.
     font-size is deliberately left out of this reset: every .stat-clickable in the app is
     also a .stat, so .stat's own font-size (14px, 12.5px on narrow screens) already applies —
     an earlier font-size:inherit here had the same specificity and came later in the file,
     so it silently won instead and fell through to the body's 16px default, which is how the
     xp/streak counters ended up a visibly different size from the energy count next to them. */
  .stat-clickable{
    background:none; border:none; margin:0; padding:0; font-family:inherit;
    line-height:inherit; appearance:none; -webkit-appearance:none; cursor:pointer;
  }
  .stat-icon svg{ width:17px; height:17px; flex:none; }
  /* Motion system, pattern 4/4 ("XP gained") — the topbar half: js/shell.js
     (refreshTopStats/pulseStat) adds this class for one beat whenever the streak
     or XP number just went up, so the gain registers even if you're not looking
     at the end-screen it came from. */
  .stat-pulse{ animation:statPop .3s var(--ease-pop); }
  @keyframes statPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
  .course-flag{ width:22px; height:15px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px var(--border); flex:none; }
  .course-flag svg{ width:100%; height:100%; display:block; }

  .wrap{ max-width:640px; margin:0 auto; padding:0 var(--space-6) var(--space-8); }


  /* ---- Top gradient wash (dashboard only) + week strip ---- */
  body.home-bg{
    background-image:linear-gradient(180deg,
      color-mix(in srgb, var(--hero-a) 42%, transparent) 0%,
      color-mix(in srgb, var(--hero-b) 26%, transparent) 55%,
      transparent 100%);
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% 360px;
  }
  body.home-bg .topbar{ background:color-mix(in srgb, var(--bg) var(--topbar-mix, 100%), transparent); transition:background-color .12s ease-out; }
  .week-strip{ display:flex; justify-content:space-between; padding:var(--space-4) 2px var(--space-2); }
  .week-day{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
  .week-dow{ font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); }
  .week-num{
    font-size:15px; font-weight:600; color:var(--ink); width:34px; height:34px;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
  }
  .week-num.studied{ font-weight:800; color:var(--accent); }
  /* Sofia (11): "today" used to be just a plain white circle with a soft
     shadow — easy to miss next to the studied days' bolder accent-colored
     text. A filled accent circle reads as "you are here" at a glance instead
     of needing to be read as text. */
  .week-day.today .week-num{ background:var(--accent); color:var(--accent-ink); box-shadow:0 4px 12px -6px color-mix(in srgb, var(--accent) 60%, transparent); font-weight:800; }
  .week-day.today .week-num.studied{ color:var(--accent-ink); }
  /* A studied day now gets its own small mark, not just bolder/colored text —
     a dot is easier to scan across a whole week strip at a glance than
     re-reading each number's font-weight. Always rendered (screens.home.js)
     so every day keeps the same height; transparent until .studied. */
  .week-dot{ width:5px; height:5px; border-radius:50%; background:transparent; }
  .week-dot.studied{ background:var(--accent); }