/* The dashboard's whole stylesheet.
 *
 * One file, linked by both the deployed page and web/preview/, because it used to be a
 * byte-identical <style> block in each and a rule added to one would simply not exist in
 * the other — which defeats the point of having a preview at all.
 */

      :root {
        --bg: #0D0D10;
        --surface: #17171B;
        --line: #2C2A24;
        --text: #EAE6DD;
        --muted: #CFC7B4;
        --gold: #E3BC62;
        /* The consistency ramp, matching HeatStep1..4 in the Android theme so a pale
           cell here and a pale cell on the phone mean the same thing. */
        --heat-0: #17171B;
        --heat-1: #6B5215;
        --heat-2: #A97A22;
        --heat-3: #E3BC62;
        --heat-4: #F0D485;
        --heat-empty-outline: #403D33;
      }
      * { box-sizing: border-box; }
      body {
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        margin: 0; padding: 24px 16px; background: var(--bg); color: var(--text);
      }
      .container { max-width: 1040px; margin: auto; }
      header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
      h1 { color: var(--gold); margin: 0 0 4px; font-size: 1.6rem; letter-spacing: 0.5px; }
      h2 { margin: 0; font-size: 1.05rem; }
      .sub { color: var(--muted); font-size: 0.85rem; margin: 2px 0 14px; }
      button {
        font: inherit; padding: 9px 16px; border-radius: 8px; cursor: pointer;
        border: 1px solid var(--gold); background: var(--gold); color: #2A1D02; font-weight: 600;
      }
      button.ghost { background: transparent; color: var(--gold); }
      #status { margin: 20px 0; color: var(--muted); font-size: 0.9rem; }
      .error { color: #FFB4AB; }
      .empty, .note { color: var(--muted); font-size: 0.85rem; margin: 10px 0 0; }

      .card {
        background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
        padding: 16px 18px; margin-bottom: 14px;
      }

      /* Headline numbers */
      .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
      .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
      .stat-label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.6px; }
      .stat-value { color: var(--gold); font-size: 1.7rem; font-weight: 600; line-height: 1.3; }
      .stat-note { color: var(--muted); font-size: 0.75rem; }

      /* Per-muscle bars */
      .bars { display: flex; flex-direction: column; gap: 5px; }
      .bar-row { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; }
      .bar-name { font-size: 0.82rem; color: var(--muted); }
      .bar-track { background: #201F24; border-radius: 4px; height: 14px; overflow: hidden; }
      .bar-fill { background: var(--gold); height: 100%; border-radius: 4px; min-width: 2px; }
      /* An untrained muscle is an empty track, not a short bar: absence is not a small
         magnitude, and a hairline would read as "a little". */
      .bar-fill.zero { background: transparent; min-width: 0; }
      .bar-value { font-size: 0.8rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

      /* Consistency grid */
      .heat { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 4px; }
      .heat-col { display: flex; flex-direction: column; gap: 3px; }
      .heat-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--heat-0); }
      .heat-cell.s0 { background: transparent; border: 1px solid var(--heat-empty-outline); }
      .heat-cell.s1 { background: var(--heat-1); }
      .heat-cell.s2 { background: var(--heat-2); }
      .heat-cell.s3 { background: var(--heat-3); }
      .heat-cell.s4 { background: var(--heat-4); }

      /* History */
      .sessions { display: flex; flex-direction: column; gap: 8px; }
      .session { border-top: 1px solid var(--line); padding-top: 8px; }
      .session:first-child { border-top: none; padding-top: 0; }
      .session-name { font-weight: 600; font-size: 0.92rem; }
      .session-meta { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
      .badge {
        display: inline-block; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px;
        background: rgba(227,188,98,0.18); color: var(--gold); margin-left: 8px; vertical-align: middle;
      }

      @media (max-width: 560px) {
        .bar-row { grid-template-columns: 88px 1fr 30px; }
        .bar-name { font-size: 0.76rem; }
      }

      /* --- Drill-downs ------------------------------------------------------------
         A row you can open is a row that has to look like one. Same treatment on the
         muscle bars and the exercise list, so the gesture reads the same in both. */
      .drill {
        background: none; border: none; padding: 0; margin: 0; font: inherit;
        color: inherit; cursor: pointer; text-align: left; width: 100%;
        display: block; border-radius: 6px;
      }
      .drill:hover .bar-name, .drill:hover .ex-name { color: var(--text); }
      .drill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
      .caret {
        display: inline-block; width: 0.85em; color: var(--muted);
        transition: transform 120ms ease; font-size: 0.7rem;
      }
      .drill[aria-expanded="true"] .caret { transform: rotate(90deg); }

      .panel {
        margin: 6px 0 10px 12px; padding: 10px 12px;
        border-left: 2px solid var(--line); background: rgba(255,255,255,0.02);
        border-radius: 0 6px 6px 0;
      }
      .panel-empty { color: var(--muted); font-size: 0.82rem; }

      /* Exercise list */
      .ex-row {
        display: grid; grid-template-columns: 1fr 52px 74px 64px;
        align-items: baseline; gap: 8px; padding: 6px 0;
        border-top: 1px solid var(--line);
      }
      .ex-row:first-child { border-top: none; }
      .ex-name { font-size: 0.88rem; color: var(--muted); }
      .ex-sub { font-size: 0.72rem; color: var(--muted); opacity: 0.75; }
      .ex-num {
        font-size: 0.8rem; text-align: right; color: var(--muted);
        font-variant-numeric: tabular-nums;
      }
      .ex-num.lead { color: var(--gold); }

      /* One session of one exercise */
      .drill-session { padding: 5px 0; border-top: 1px solid var(--line); }
      .drill-session:first-child { border-top: none; }
      .drill-date { font-size: 0.78rem; color: var(--muted); }
      .drill-sets { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
      .drill-best { font-size: 0.72rem; color: var(--muted); }

      /* Estimated 1RM over the window. Bars rather than a line: there is one value per
         session, not a continuous signal, and a line between two sessions six weeks
         apart draws a trend nobody measured. */
      .spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 6px 0 2px; }
      .spark-bar { flex: 1; min-width: 2px; background: var(--heat-2); border-radius: 1px; }
      .spark-bar.best { background: var(--gold); }
      .spark-caption { font-size: 0.72rem; color: var(--muted); }

      @media (max-width: 560px) {
        .ex-row { grid-template-columns: 1fr 40px 62px 56px; gap: 6px; }
        .ex-name { font-size: 0.8rem; }
      }