/* ── HOME: YOUR STUDY STATS ───────────────────────────────────────
   Styles for the personal stats panel between the Campus Ambassador
   card and the Feedback box. Markup is built by
   scripts/features/study-stats.js; only the shell lives in index.html.

   The layout borrows the two shapes every mainstream health app has
   converged on, because they are the two shapes this data wants:

     .ss-m    a METRIC CARD in a grid — quiet label, one big number with
              a small unit, a mini chart, one meta line. Fixed height, so
              the grid reads as a grid and the eye can scan a column of
              numbers without re-finding the baseline each time.
     .ss-row  a SECTION ROW in a list — the surface's own colour on its
              name, a status on the right, a chevron, the number below.
              The whole row is a button into that section.

   Three rules this file follows on purpose:

   1. EVERY SURFACE IS OPAQUE. Home paints an animated scene canvas
      behind the page, so a translucent card here shows moving stars
      through its own numbers. Same lesson as the Premium promo pill
      (see CLAUDE.md): a surface that carries content is its own
      surface, not a tint on somebody else's.

   2. ACCENT COMES IN THROUGH --ss-acc, set inline per card and per row.
      A metric's colour is data, not decoration, and the section rows
      reuse the exact hue that section's Home tile already carries, so a
      surface looks the same everywhere it appears.

   3. MOBILE FIRST, and everything must survive 320px. The heatmap is 10
      columns at every width — three rows of ten, capped and centred on
      desktop rather than stretched; the charts are flex rows whose columns
      shrink rather than scroll, because a chart you have to scroll sideways
      to read is a chart nobody reads.

   4. NOTHING BELOW 0.8rem. That is a hard floor for this panel — it is
      dense by nature and the temptation to shrink a meta line is constant.
   ─────────────────────────────────────────────────────────────── */

.home-stats-section {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 2.5rem auto;
  padding: 1.5rem 1rem 1.3rem;
  /* Opaque, not a wash — see the note above. */
  background: linear-gradient(168deg, #0a1024 0%, #0b0d22 55%, #080a1a 100%);
  border: 1px solid rgba(var(--ims-brand-rgb), 0.26);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  /* The nav is fixed at 64px; without this the smooth-scroll from the
     welcome line parks the heading underneath it. */
  scroll-margin-top: 84px;
  outline: none;
}
/* Landing here from "Check your personal study stats" — a one-shot ring so
   the eye finds the panel it was just sent to. */
.home-stats-section.is-flash { animation: ssFlash 1.4s ease-out 1; }
@keyframes ssFlash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ims-brand-rgb), 0.55), 0 20px 60px rgba(0,0,0,0.5); }
  60%  { box-shadow: 0 0 0 10px rgba(var(--ims-brand-rgb), 0), 0 20px 60px rgba(0,0,0,0.5); }
  100% { box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.045); }
}

/* Left-aligned, like a health app's Summary header — a centred title reads
   as a marketing section, and this is a dashboard. The Targets control sits
   on the right of the same line, where those apps put "Edit". */
.ss-head {
  text-align: left; margin-bottom: 1rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.ss-head-text { min-width: 0; flex: 1 1 14rem; }
.ss-actions { flex-shrink: 0; }
.ss-actions[hidden] { display: none; }
@media (max-width: 559px) {
  /* The header wraps at this width, so the button lands on its own line —
     stretch it rather than leaving a big opaque block floating left. */
  .ss-actions { width: 100%; }
  .ss-act { width: 100%; justify-content: center; }
}
/* A hard opaque rectangle, not a translucent pill. This is the only control in
   the panel and it was disappearing into the header: a solid block with a
   square-ish corner reads as a button at a glance, and an opaque fill is the
   panel's own rule anyway (Home's scene canvas shows through anything else). */
.ss-act {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; font-weight: 800; letter-spacing: 0.01em;
  color: #071021; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.75rem 1.3rem; min-height: 48px;
  background: var(--ims-brand-mid);
  border: 2px solid var(--ims-brand-lite);
  border-radius: 6px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.ss-act:hover { background: var(--ims-brand-lite); transform: translateY(-1px); }
.ss-act:active { transform: translateY(0); }
.ss-act:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ss-act.is-locked {
  color: #fff;
  background: #6d3ff0;
  border-color: #b394ff;
}
.ss-act.is-locked:hover { background: #8354ff; }
.ss-title {
  font-family: 'Lora', serif;
  font-size: 1.35rem; font-weight: 700;
  color: #eaf3ff; margin: 0 0 0.25rem;
  display: flex; align-items: center; gap: 0.45rem;
  flex-wrap: wrap;
}
.ss-title-ico { font-size: 0.95em; line-height: 1; }
.ss-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.5;
  color: rgba(165, 200, 240, 0.62);
  margin: 0;
}

.ss-body { display: flex; flex-direction: column; gap: 0.6rem; }

/* Screen-reader-only text — the ▲/▼ glyphs are decorative duplicates. */
.ss-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── EXAM COUNTDOWN BANNER ───────────────────────────────────────
   The first thing in the panel and deliberately the largest type on the page.
   Somebody typed this date in because it matters to them; a 160px tile in the
   sixth slot of a grid is the wrong shape for it.

   It is a <button> in every state, empty one included — it is the only entry
   point to the exam editor, and the state with nothing set is precisely the
   one that has to be tappable. Every line inside is a <span>: a <button> may
   carry phrasing content only, so the block-level shape is made here.
   ─────────────────────────────────────────────────────────────── */

.ss-exam {
  --ss-acc: var(--energy-amber);
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  padding: 1.15rem 1rem 0.95rem;
  border-radius: 16px;
  /* Opaque, like every other surface here. */
  background: linear-gradient(150deg, #2a1c05 0%, #1a1526 55%, #0f1024 100%);
  border: 1px solid rgba(255, 170, 0, 0.35);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.ss-exam:hover { transform: translateY(-1px); border-color: rgba(255, 170, 0, 0.6); }
.ss-exam:active { transform: translateY(0); }
.ss-exam:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Final week. The colour shifts; the wording does not — this is a reason to
   open the app, not a countdown to a punishment. */
.ss-exam.is-urgent {
  --ss-acc: var(--cta-warm);
  background: linear-gradient(150deg, #33130a 0%, #1e1327 55%, #0f1024 100%);
  border-color: rgba(255, 107, 53, 0.42);
}
.ss-exam.is-past {
  --ss-acc: var(--ims-brand-mid);
  background: #0d1330;
  border-color: rgba(var(--ims-brand-rgb), 0.24);
}

/* Serif display type — Lora, the app's serif, bold for the sentence and
   ITALIC for the emphasis, which is the whole shape of the reference. The
   number is the emphasised word here, so it takes the italic and the accent. */
.ss-exam-line {
  display: block; margin: 0 0 0.3rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.4rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.005em; color: #f7f3ea;
}
.ss-exam-line b { font-weight: 700; font-style: italic; color: var(--ss-acc); }
/* The number itself, as big as the panel can carry. */
.ss-exam-big { white-space: nowrap; }
.ss-exam-num {
  font-family: 'Lora', Georgia, serif;
  font-style: italic; font-weight: 700;
  font-size: 1.85em; line-height: 0.85;
  letter-spacing: -0.01em; color: var(--ss-acc);
  margin: 0 0.04em; vertical-align: -0.04em;
}
.ss-exam-cta {
  display: block; margin: 0 0 0.9rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 1rem; font-weight: 600; line-height: 1.45;
  color: rgba(240, 236, 226, 0.78);
}
.ss-exam-bar {
  display: block; height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.ss-exam-fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--ss-acc);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-body.is-drawn .ss-exam-fill { width: var(--w, 0%); }

/* The edit affordance and the date share the closing line. Without a visible
   affordance nothing tells you the banner opens anything — and in the empty
   state that is the only instruction on it. */
.ss-exam-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-top: 0.5rem;
}
.ss-exam-edit {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
  color: rgba(245, 238, 225, 0.9);
  padding: 0.3rem 0.65rem; border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.ss-exam:hover .ss-exam-edit { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ss-exam-when {
  margin: 0; text-align: right;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  color: rgba(200, 220, 245, 0.6);
}

@media (min-width: 560px) {
  .ss-exam { padding: 1.5rem 1.4rem 1.2rem; }
  .ss-exam-line { font-size: 1.85rem; }
  .ss-exam-num  { font-size: 2.2em; }
  .ss-exam-cta  { font-size: 1.08rem; }
}
@media (min-width: 900px) {
  .ss-exam-line { font-size: 2.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-exam-fill { transition: none; }
  .ss-exam { transition: none; }
  .ss-exam:hover { transform: none; }
}

/* ── metric card ─────────────────────────────────────────────── */

.ss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.ss-m {
  --ss-acc: var(--ims-brand-mid);
  background: #0d1330;
  border: 1px solid rgba(var(--ims-brand-rgb), 0.2);
  border-radius: 16px;
  padding: 0.8rem 0.75rem 0.7rem;
  display: flex; flex-direction: column;
  min-width: 0; min-height: 156px;
}
.ss-m.is-wide { min-height: 0; }
.ss-m-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(185, 212, 244, 0.72);
  margin: 0 0 0.28rem;
}
.ss-m-val {
  margin: 0;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.12rem 0.22rem;
  line-height: 1.05;
}
.ss-m-num {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em;
  color: #f4f9ff;
}
.ss-m-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  color: rgba(170, 200, 235, 0.62);
}
/* The chart takes whatever height is left, so every card in a row ends its
   meta line on the same baseline. */
.ss-m-viz {
  flex: 1; min-height: 42px;
  display: flex; flex-direction: column; justify-content: flex-end;
  margin: 0.55rem 0 0.45rem;
}
.ss-m-foot {
  margin: 0; margin-top: auto;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.4;
  color: rgba(155, 190, 230, 0.55);
}
/* Free-standing, not a pill: the change IS the headline of the meta line, and
   a chip around it turned the loudest number on the card into a badge. Body
   font rather than mono for the same reason — mono reads as a tag. */
.ss-m-delta {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em;
  margin-right: 0.3rem; white-space: nowrap;
}
/* Green up / red down, and never colour alone: the ▲/▼ is in the visible text
   and the direction is spelled out for screen readers. */
.ss-m-delta.is-up   { color: var(--neon-green); }
.ss-m-delta.is-down { color: #ff7a8f; }
.ss-m-delta.is-flat { color: rgba(165, 200, 240, 0.7); }

/* ── mini charts ─────────────────────────────────────────────── */

.ss-spark { width: 100%; height: 44px; display: block; overflow: visible; }

.ss-bars { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.ss-bar {
  flex: 1 1 0; min-width: 0;
  height: 0; border-radius: 3px 3px 2px 2px;
  background: var(--ss-acc); opacity: 0.62;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 18ms);
}
.ss-body.is-drawn .ss-bar { height: var(--h, 6%); }
.ss-bar.is-zero { opacity: 0.16; }
.ss-bar.is-mark { opacity: 1; filter: drop-shadow(0 0 5px var(--ss-acc)); }

.ss-gauge { width: 100%; max-width: 132px; height: auto; display: block; margin: 0 auto; }
/* The sweep is driven by --p, NOT by a stroke-dasharray attribute: a
   presentation attribute loses to any CSS rule, so a rule animating from
   "0 100" would pin the arc at zero for ever. The target lives in a custom
   property the same rule reads. */
.ss-gauge-fg {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  /* Butt until it has something to draw: a round cap on a zero-length dash
     paints a dot at each end of the arc, which read as two stray pips on an
     untouched gauge — and on every gauge for the frame before it animates. */
  stroke-linecap: butt;
}
.ss-body.is-drawn .ss-gauge-fg { stroke-dasharray: var(--p, 0) 100; stroke-linecap: round; }
.ss-body.is-drawn .ss-gauge-fg.is-zero { stroke-linecap: butt; }

.ss-dots { display: flex; gap: 3px; align-items: flex-end; }
.ss-dot {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  height: 26px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
/* A solid accent pill with a dark letter, rather than a tinted one: mixing an
   arbitrary accent into the card colour needs color-mix(), and a browser that
   drops the declaration would paint an active day exactly like an inactive
   one — the single distinction this strip exists to make. */
.ss-dot.is-on { background: var(--ss-acc); border-color: var(--ss-acc); }
.ss-dot i {
  font-family: 'JetBrains Mono', monospace; font-style: normal;
  font-size: 0.8rem; color: rgba(180, 210, 245, 0.5);
}
.ss-dot.is-on i { color: #071021; font-weight: 700; }

/* Exam run-up bar. */
.ss-prog {
  height: 9px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.ss-prog-fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, rgba(var(--ims-brand-rgb), 0.6), var(--ss-acc));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-body.is-drawn .ss-prog-fill { width: var(--w, 0%); }

/* The locked pitch card a non-member sees where the target cards would be. */
.ss-m-lock {
  background: linear-gradient(150deg, #241147 0%, #1b1038 60%, #130d2a 100%);
  border-color: rgba(155, 109, 255, 0.4);
  justify-content: flex-start; gap: 0.5rem;
}
.ss-m-lock-line {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.5;
  color: rgba(226, 212, 255, 0.82);
}
.ss-m-lock-btn {
  margin-top: auto; align-self: flex-start;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.85rem; min-height: 38px;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, #6d3ff0, #9B6DFF);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ss-m-lock-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(155, 109, 255, 0.4); }
.ss-m-lock-btn:focus-visible { outline: 2px solid #d9c6ff; outline-offset: 2px; }

/* A text-weight action inside a meta line — the Anki card's "Turn off". Not a
   .ss-foot-btn: this is a footnote-level action, not the panel's main control. */
.ss-mini-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  color: var(--ims-brand-lite);
  background: none; border: none; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.ss-mini-btn:hover { color: #fff; }
.ss-mini-btn:focus-visible { outline: 2px solid var(--ims-brand-lite); outline-offset: 2px; }

.ss-axis {
  display: flex; justify-content: space-between; margin-top: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; color: rgba(150, 190, 235, 0.36);
}

/* You vs. the room — two stacked horizontal bars. */
.ss-cmp { display: flex; flex-direction: column; gap: 0.32rem; }
.ss-cmp-row {
  /* The value column has to hold "1h 38m" without wrapping now that nothing
     here goes below 0.8rem. */
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 3.7rem;
  align-items: center; gap: 0.3rem;
}
.ss-cmp-row i {
  font-family: 'DM Sans', sans-serif; font-style: normal;
  font-size: 0.8rem; font-weight: 700; color: rgba(180, 210, 245, 0.6);
}
.ss-cmp-row.is-me i { color: var(--ss-acc); }
.ss-cmp-track {
  height: 9px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.05); overflow: hidden;
}
.ss-cmp-bar {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: rgba(var(--ims-brand-rgb), 0.75);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-body.is-drawn .ss-cmp-bar { width: var(--w, 0%); }
.ss-cmp-row.is-me .ss-cmp-bar { background: var(--ss-acc); }
.ss-cmp-row b {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; text-align: right; white-space: nowrap;
  color: rgba(230, 241, 255, 0.85);
}

/* Rank position track — where you sit between last place and #1. */
.ss-rank { position: relative; padding: 0.35rem 0; }
.ss-rank-track {
  display: block; height: 8px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.ss-rank-fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, rgba(var(--ims-brand-rgb), 0.5), var(--ss-acc));
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.ss-body.is-drawn .ss-rank-fill { width: var(--w, 0%); }
.ss-rank-pin {
  position: absolute; top: 50%; left: var(--x, 0%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--ss-acc);
  box-shadow: 0 0 0 3px #0d1330;
}
.ss-rank-scale {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; color: rgba(150, 190, 235, 0.4);
}

/* ── 30-day heatmap ──────────────────────────────────────────── */

.ss-heat {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px;
}
/* Hard squares, no corner radius: the grid reads as a calendar, and a rounded
   cell at this size loses enough area to its own corners that the brightness
   step between two adjacent levels stops being the thing you notice first. */
.ss-heat-cell {
  aspect-ratio: 1 / 1; border-radius: 0;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.16s ease;
}
/* Brighter = more XP. The scale is relative to the viewer's own best day in
   the window (see heatLevel in study-stats.js), so a beginner's month is not
   painted uniformly dim. */
.ss-heat-cell[data-lv="1"] { background: rgba(47, 224, 120, 0.24); border-color: rgba(47, 224, 120, 0.16); }
.ss-heat-cell[data-lv="2"] { background: rgba(47, 224, 120, 0.44); border-color: rgba(47, 224, 120, 0.26); }
.ss-heat-cell[data-lv="3"] { background: rgba(47, 224, 120, 0.7);  border-color: rgba(47, 224, 120, 0.4); }
.ss-heat-cell[data-lv="4"] {
  background: var(--neon-green); border-color: #7bffb4;
  box-shadow: 0 0 10px var(--neon-green-glow);
}
.ss-heat-cell.is-today { outline: 2px solid var(--energy-amber); outline-offset: 1px; }
.ss-heat-cell:hover { transform: scale(1.18); z-index: 1; }

.ss-heat-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin-top: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; color: rgba(150, 190, 235, 0.42);
}
.ss-heat-legend span:first-child { margin-right: 0.25rem; }
.ss-heat-legend span:last-child  { margin-left: 0.25rem; }
.ss-heat-key {
  width: 10px; height: 10px; border-radius: 0;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ss-heat-key[data-lv="1"] { background: rgba(47, 224, 120, 0.24); }
.ss-heat-key[data-lv="2"] { background: rgba(47, 224, 120, 0.44); }
.ss-heat-key[data-lv="3"] { background: rgba(47, 224, 120, 0.7); }
.ss-heat-key[data-lv="4"] { background: var(--neon-green); }

/* ── per-section rows ────────────────────────────────────────── */

.ss-rows {
  background: #0d1330;
  border: 1px solid rgba(var(--ims-brand-rgb), 0.2);
  border-radius: 16px;
  padding: 0.85rem 0.2rem 0.35rem;
}
.ss-rows-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  color: rgba(185, 212, 244, 0.72);
  margin: 0 0 0.2rem; padding: 0 0.6rem;
}
.ss-row {
  --ss-acc: var(--ims-brand-mid);
  display: block; width: 100%;
  background: none; border: none;
  border-top: 1px solid rgba(var(--ims-brand-rgb), 0.14);
  padding: 0.7rem 0.6rem;
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease;
}
.ss-rows .ss-row:first-of-type { border-top: none; }
.ss-row:hover { background: rgba(var(--ims-brand-rgb), 0.1); }
.ss-row:focus-visible { outline: 2px solid var(--ims-brand-lite); outline-offset: -2px; border-radius: 10px; }
.ss-row:active { background: rgba(var(--ims-brand-rgb), 0.16); }

.ss-row-head {
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.18rem;
}
.ss-row-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ss-acc);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-row-state {
  margin-left: auto; flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 500;
  color: rgba(155, 190, 230, 0.5);
}
/* Done is stated in words, so the green is reinforcement and never the only
   carrier of the state. */
.ss-row-state.is-done { color: var(--neon-green); }
.ss-row-chev { width: 7px; height: 12px; flex-shrink: 0; color: rgba(150, 190, 235, 0.4); }

.ss-row-body { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.5rem; }
.ss-row-val { display: flex; align-items: baseline; gap: 0.18rem; }
.ss-row-val .ss-m-num { font-size: 1.08rem; }
.ss-row-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.4;
  color: rgba(160, 195, 235, 0.55);
}

/* ── footer + empty state ────────────────────────────────────── */

.ss-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem; text-align: center;
  padding: 0.9rem 0.6rem 0.3rem;
}
.ss-foot-line {
  font-family: 'Lora', serif;
  font-size: 0.86rem; line-height: 1.5; font-style: italic;
  color: rgba(225, 240, 255, 0.82); margin: 0;
}
.ss-foot-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700;
  color: #fff; cursor: pointer;
  padding: 0.62rem 1.15rem; min-height: 44px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, var(--cta-warm), var(--cta-warm-dark));
  box-shadow: 0 4px 20px var(--cta-warm-glow);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.ss-foot-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 28px var(--cta-warm-glow); }
.ss-foot-btn:active { transform: translateY(0) scale(0.99); }

.ss-empty {
  text-align: center; padding: 1.4rem 0.8rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.ss-empty-head {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; font-weight: 700; color: #e8f2ff; margin: 0;
}
.ss-empty-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.55; max-width: 42ch;
  color: rgba(170, 200, 235, 0.6); margin: 0;
}

/* ── tablet / desktop ────────────────────────────────────────── */

@media (min-width: 560px) {
  .home-stats-section { padding: 2rem 1.6rem 1.7rem; }
  /* Ten columns at EVERY width — three rows of ten, the same shape on a phone
     and on a desktop, so the month is read the same way everywhere. Capped and
     centred rather than stretched: the cells are squares, so letting ten of
     them fill an 880px card turns a glanceable grid into a wall of 80px tiles.

     `width: 100%` is load-bearing next to the auto margin: .ss-m-viz is a
     column flex container, and an auto inline margin cancels the default
     `align-items: stretch`, so without it the grid sizes to its own content —
     which, with `1fr` columns and empty cells, is very close to nothing. */
  .ss-heat {
    gap: 9px;
    width: 100%; max-width: 380px; margin-inline: auto;
  }
  .ss-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
  .ss-body { gap: 0.7rem; }
  .ss-m { padding: 0.95rem 0.9rem 0.8rem; }
  .ss-m-num { font-size: 1.6rem; }
  .ss-title { font-size: 1.55rem; }
  .ss-sub { font-size: 0.8rem; }
  .ss-rows { padding: 1rem 0.5rem 0.5rem; }
  .ss-row { padding: 0.8rem 0.75rem; }
  .ss-row-name { font-size: 0.82rem; }
}

@media (min-width: 900px) {
  .home-stats-section { padding: 2.2rem 2rem 1.9rem; }
  /* The section rows become two columns: at this width a single column of
     six rows is a very tall list of very short lines. */
  .ss-rows {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.4rem; padding: 1rem 0.6rem 0.6rem;
  }
  .ss-rows-title { grid-column: 1 / -1; }
  /* first-of-type only clears the first row's rule; in two columns the second
     row is also on the top line. */
  .ss-rows .ss-row:nth-of-type(2) { border-top: none; }
}

/* Very narrow phones: two metric cards stop fitting once a value string gets
   long ("8 h 27 min"), and the heat cells need every pixel. */
@media (max-width: 340px) {
  .ss-heat { gap: 5px; }
  .ss-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ss-bar, .ss-cmp-bar, .ss-rank-fill, .ss-gauge path:last-child { transition: none; }
  .ss-heat-cell:hover { transform: none; }
  .home-stats-section.is-flash { animation: none; }
}

/* ── TARGETS MODAL ───────────────────────────────────────────────
   Mounted on <body>, outside any .page — a page's fade animates `transform`,
   and a transformed ancestor becomes the containing block for position:fixed
   descendants, which would park this overlay somewhere below the fold.
   ─────────────────────────────────────────────────────────────── */

body.ss-modal-open { overflow: hidden; }

.sst-overlay {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  /* The backdrop may be translucent — it is meant to dim what is behind it.
     The CARD below is not: it carries the content. */
  background: rgba(3, 6, 16, 0.78);
  backdrop-filter: blur(6px);
  animation: sstFade 0.2s ease-out;
  overflow-y: auto;
}
@keyframes sstFade { from { opacity: 0; } to { opacity: 1; } }

.sst-card {
  width: 100%; max-width: 420px;
  margin: auto;
  padding: 1.4rem 1.2rem 1.2rem;
  border-radius: 20px;
  /* Opaque violet, matching the Premium surfaces elsewhere in the app. */
  background: linear-gradient(160deg, #251349 0%, #191038 55%, #120c28 100%);
  border: 1px solid rgba(155, 109, 255, 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
  position: relative;
  outline: none;
  animation: sstRise 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sstRise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.sst-x {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  color: rgba(226, 212, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.18s ease, color 0.18s ease;
}
.sst-x:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.sst-x:focus-visible { outline: 2px solid #d9c6ff; outline-offset: 2px; }

.sst-eyebrow {
  margin: 0 0 0.15rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #c9aaff;
}
.sst-title {
  margin: 0 0 0.3rem;
  font-family: 'Lora', serif;
  font-size: 1.25rem; font-weight: 700; color: #f4eeff;
}
.sst-sub {
  margin: 0 0 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.5; color: rgba(220, 205, 250, 0.7);
}

.sst-field { margin-bottom: 1.05rem; }
.sst-label {
  display: block; margin-bottom: 0.35rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; color: #e6dbff;
}
.sst-inputwrap { display: flex; align-items: center; gap: 0.5rem; }
.sst-exam { display: flex; flex-direction: column; gap: 0.5rem; }

.sst-input {
  flex: 1 1 0; min-width: 0; width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; color: #f4eeff;
  padding: 0.65rem 0.8rem; min-height: 44px;
  background: rgba(8, 5, 20, 0.75);
  border: 1.5px solid rgba(155, 109, 255, 0.3);
  border-radius: 11px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.sst-input::placeholder { color: rgba(200, 185, 235, 0.38); }
.sst-input:focus { border-color: #9B6DFF; background: rgba(12, 8, 28, 0.9); }
/* The native date picker indicator is near-black on this ground by default. */
.sst-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.65); cursor: pointer;
}
.sst-suffix {
  flex-shrink: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; color: rgba(210, 195, 245, 0.6);
}

.sst-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.sst-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; font-weight: 700; cursor: pointer;
  color: #cdb6ff;
  padding: 0.35rem 0.6rem; min-height: 32px;
  background: rgba(155, 109, 255, 0.14);
  border: 1px solid rgba(155, 109, 255, 0.3);
  border-radius: 99px;
  transition: background 0.18s ease;
}
.sst-chip:hover { background: rgba(155, 109, 255, 0.3); color: #fff; }
.sst-chip:focus-visible { outline: 2px solid #d9c6ff; outline-offset: 2px; }

.sst-hint {
  margin: 0.4rem 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.45; color: rgba(205, 190, 240, 0.55);
}
/* What a non-member gets where the two Premium fields would be. The locked
   control IS the pitch — same pattern as the shop's premiumOnly cards — so it
   sits in the flow of the modal rather than replacing it. */
.sst-lock {
  margin-bottom: 1.05rem;
  padding: 0.85rem 0.9rem 0.9rem;
  border-radius: 14px;
  background: rgba(155, 109, 255, 0.1);
  border: 1px solid rgba(155, 109, 255, 0.32);
}
.sst-lock-head {
  margin: 0 0 0.25rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700; color: #e6dbff;
}
.sst-lock-sub {
  margin: 0 0 0.7rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.45; color: rgba(220, 205, 250, 0.7);
}
.sst-lock-btn {
  width: 100%; min-height: 44px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, #6d3ff0, #9B6DFF);
  border: none; border-radius: 11px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sst-lock-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(155, 109, 255, 0.4); }
.sst-lock-btn:focus-visible { outline: 2px solid #d9c6ff; outline-offset: 2px; }

.sst-err {
  margin: 0 0 0.7rem; min-height: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.4;
}
/* State is in the wording as well as the colour — the message always says what
   happened, so the tint is reinforcement. */
.sst-err.is-bad  { color: #ff9aa9; }
.sst-err.is-info { color: #9fe8c0; }

.sst-actions { display: flex; gap: 0.55rem; }
.sst-btn {
  flex: 1 1 0; min-height: 46px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  border-radius: 12px; border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sst-btn:focus-visible { outline: 2px solid #d9c6ff; outline-offset: 2px; }
.sst-btn.is-save {
  color: #fff; background: linear-gradient(135deg, #6d3ff0, #9B6DFF);
  box-shadow: 0 6px 22px rgba(155, 109, 255, 0.35);
}
.sst-btn.is-save:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(155, 109, 255, 0.45); }
.sst-btn.is-ghost {
  flex: 0 0 auto; padding: 0 1rem;
  color: rgba(220, 205, 250, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.sst-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

@media (min-width: 480px) {
  .sst-card { padding: 1.7rem 1.6rem 1.4rem; }
  .sst-exam { flex-direction: row; }
  .sst-exam .sst-input[type="date"] { flex: 0 0 11rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sst-overlay, .sst-card { animation: none; }
  .ss-prog-fill { transition: none; }
}