/* 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: #091819;
        --surface: #10262A;
        --line: #1C3438;
        --text: #E6E3E5;
        --muted: #B5B0B3;
        --accent: #CE5100;
        /* 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: #10262A;
        --heat-1: #5C2400;
        --heat-2: #963B00;
        --heat-3: #CE5100;
        --heat-4: #FF8A45;
        --heat-empty-outline: #2A4145;
      }
      * { 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(--accent); 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(--accent); background: var(--accent); color: #FFFFFF; font-weight: 600;
      }
      button.ghost { background: transparent; color: var(--accent); }
      /* Deleting an account is the one irreversible thing this page can do, so it looks like
         it: outlined in the error colour rather than the accent every other control uses. */
      button.danger { background: transparent; color: #FFB4AB; border-color: #FFB4AB; }
      #auth-actions { display: flex; gap: 8px; flex-wrap: wrap; }
      #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; }

      /* Links to the disclosures site. Muted and small: it has to be findable, not loud. */
      .site-footer {
        margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line);
        color: var(--muted); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 8px;
      }
      .site-footer a { color: var(--muted); }
      .site-footer a:hover { color: var(--text); }

      .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(--accent); 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: #1C3438; border-radius: 4px; height: 14px; overflow: hidden; }
      .bar-fill { background: var(--accent); 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(206,81,0,0.22); color: #FF8A45; 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(--accent); 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(--accent); }

      /* 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(--accent); }
      .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; }
      }