/* ─────────────────────────────────────────────────────────────────
   Athlete Performance — design system.

   Committed look: near-black ground, ONE acid accent used only on the
   thing you are meant to act on, Space Grotesk for every number so
   weights, times and scores align in columns, IBM Plex Sans for reading.

   Dark only, deliberately: this is used at 05:00 before training and in
   a gym, and a single committed ground keeps the accent meaningful.
   ───────────────────────────────────────────────────────────────── */
/* ── tokens ──
   Two accent roles, deliberately separate:
     --accent       a FILL. The lime sits behind near-black text.
     --accent-text  the accent as TEXT or a chart stroke.
   They differ because #D9FB50 on white is ~1.3:1 — fine as a fill under
   dark text, unreadable as a link or a line. Light mode swaps the second
   for a dark olive; dark mode leaves them identical. */
:root {
  color-scheme: dark;

  --bg:        #0B0C0B;
  --surface:   #141614;
  --surface-2: #1A1D1A;
  --line:      #232723;
  --line-soft: #1C201C;

  --ink:       #F3F4F0;
  --ink-2:     #B9BEB8;
  --muted:     #7D847E;
  --muted-2:   #5E655F;

  --accent:      #D9FB50;
  --accent-ink:  #0B0C0B;
  --accent-text: #D9FB50;
  --good:        #7CE0C3;
  --warn:        #FFB020;
  --warn-ink:    #100C00;
  --bad:         #FF8A73;

  --bar-idle:   #242924;
  --bar-on:     #D9FB50;
  --tabbar-bg:  rgba(11, 12, 11, 0.92);
  --danger-bg:  #1E1513;
  --danger-line:#3A2420;

  --r-card: 18px;
  --r-ctrl: 15px;

  --sans:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* Light. Follows the system unless the person has explicitly chosen dark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg:        #F6F6F2;
    --surface:   #FFFFFF;
    --surface-2: #F1F2ED;
    --line:      #E2E4DC;
    --line-soft: #EAEBE5;

    --ink:       #14170F;
    --ink-2:     #3C4239;
    --muted:     #5C635B;      /* 4.5:1+ on --bg for small text */
    --muted-2:   #6A7169;

    --accent-text: #44620B;    /* the lime, darkened until it is readable */
    --good:        #0F7A5A;
    --bad:         #B7321A;
    --warn:        #B26A00;
    --warn-ink:    #FFFFFF;

    --bar-idle:   #DCDED4;
    --bar-on:     #44620B;
    --tabbar-bg:  rgba(246, 246, 242, 0.92);
    --danger-bg:  #FDF2F0;
    --danger-line:#F0CFC8;
  }
}

/* Explicit choice wins over the system. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #F6F6F2;
  --surface:   #FFFFFF;
  --surface-2: #F1F2ED;
  --line:      #E2E4DC;
  --line-soft: #EAEBE5;

  --ink:       #14170F;
  --ink-2:     #3C4239;
  --muted:     #5C635B;
  --muted-2:   #6A7169;

  --accent-text: #44620B;
  --good:        #0F7A5A;
  --bad:         #B7321A;
  --warn:        #B26A00;
  --warn-ink:    #FFFFFF;

  --bar-idle:   #DCDED4;
  --bar-on:     #44620B;
  --tabbar-bg:  rgba(246, 246, 242, 0.92);
  --danger-bg:  #FDF2F0;
  --danger-line:#F0CFC8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }

a { color: var(--accent-text); text-decoration: none; }

/* ── header ── */
header { padding: calc(24px + env(safe-area-inset-top)) 20px 12px; }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
h1 {
  margin: 0; font-family: var(--display); font-size: 34px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.05;
}
.header-date {
  margin-top: 4px; font-size: 12px; color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
h2 { font-size: 15px; font-weight: 600; margin: 20px 2px 9px; letter-spacing: -0.01em; }
main { padding: 4px 20px calc(96px + env(safe-area-inset-bottom)); }

/* ── day strip ──
   A week of days rather than a date input: gaps in the log are visible at a
   glance, which is the point. Dot = an entry exists for that day. */
.daystrip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; margin-bottom: 14px;
}
.daystrip .day {
  min-height: 60px; padding: 8px 0 7px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: 13px;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.daystrip .day .wd { font-size: 10px; letter-spacing: 0.06em; }
.daystrip .day .dn { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink-2); }
.daystrip .day .dot { width: 5px; height: 5px; border-radius: 99px; background: transparent; }
.daystrip .day.has .dot { background: var(--accent-text); }
.daystrip .day.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.daystrip .day.on .dn { color: var(--accent-ink); }
.daystrip .day.on .dot { background: var(--accent-ink); opacity: 0.55; }

.backdate {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.backdate strong { color: var(--ink); }

/* ── cards ── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 16px; margin-bottom: 12px;
}
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card-latest { font-size: 12px; color: var(--muted); white-space: nowrap; }
.card-latest strong {
  font-family: var(--display); font-size: 22px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em; margin-right: 3px;
}
.card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* ── stat strip ── */
.stats { display: flex; gap: 9px; margin-bottom: 12px; }
.stat {
  flex: 1 1 0; min-width: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 13px 12px;
}
.stat-k {
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.stat-v {
  margin-top: 7px; font-family: var(--display); font-size: 25px; font-weight: 600;
  letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 3px;
}
.stat-v small { font-family: var(--sans); font-size: 11px; color: var(--muted); font-weight: 400; }
.stat-d { margin-top: 4px; font-size: 11px; color: var(--good); }

/* ── inputs ── */
input, select, textarea {
  font-family: inherit; font-size: 16px;      /* 16px stops iOS zoom-on-focus */
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctrl);
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-text) 22%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
textarea { padding: 12px 14px; min-height: 84px; line-height: 1.5; }
select { appearance: none; background-image: none; }

label.fld { display: block; margin-bottom: 12px; }
label.fld > span {
  display: block; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 7px;
}
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ── 1–10 scale: a ramp of 44px-tall bars ──
   Replaces ten ~31px buttons: thumb-sized targets, and the ramp shows
   direction at a glance without reading the number. */
.scale-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.scale-head .lbl { font-size: 13px; font-weight: 500; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.scale-head .val { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); }
.scale-head .val em { font-style: normal; font-size: 11px; color: var(--muted-2); font-weight: 500; }

.scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; align-items: end; }
.scale button {
  height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: flex-end; -webkit-tap-highlight-color: transparent;
}
.scale button i { display: block; width: 100%; background: var(--bar-idle); border-radius: 3px; }
.scale button:nth-child(1) i { height: 15px; }
.scale button:nth-child(2) i { height: 18px; }
.scale button:nth-child(3) i { height: 21px; }
.scale button:nth-child(4) i { height: 24px; }
.scale button:nth-child(5) i { height: 27px; }
.scale button:nth-child(6) i { height: 30px; }
.scale button:nth-child(7) i { height: 34px; }
.scale button:nth-child(8) i { height: 37px; }
.scale button:nth-child(9) i { height: 40px; }
.scale button:nth-child(10) i { height: 44px; }
.scale button.on i { background: var(--bar-on); }
/* higher = worse (fatigue, soreness): a different hue, so the ramp is not read as progress */
.scale.inverse button.on i { background: var(--warn); }

.scale-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10px; color: var(--muted-2); }
.card .fld + .fld:has(.scale) { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.scale-hint { font-size: 11px; color: var(--muted-2); margin-top: 6px; }

/* ── buttons ── */
.primary-btn, .secondary-btn, .small-btn {
  font-family: inherit; border-radius: var(--r-ctrl); cursor: pointer;
  border: 1px solid transparent; width: 100%; min-height: 52px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.primary-btn { background: var(--accent); color: var(--accent-ink); }
.primary-btn:disabled { opacity: 0.5; cursor: default; }
.secondary-btn { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.small-btn {
  width: auto; min-height: 40px; padding: 0 15px; font-size: 13px; font-weight: 500;
  background: var(--surface); color: var(--ink-2); border-color: var(--line); border-radius: 999px;
}
.danger { color: var(--bad); border-color: var(--danger-line); background: var(--danger-bg); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
}

/* ── tab bar ── */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: var(--tabbar-bg); border-top: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(20px);
  padding-bottom: env(safe-area-inset-bottom); z-index: 20;
}
#tabbar .tab {
  flex: 1; border: 0; background: none; color: var(--muted);
  font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: 0.04em;
  min-height: 56px; padding: 10px 0 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
#tabbar .tab svg { width: 21px; height: 21px; }
#tabbar .tab.active { color: var(--accent-text); }

/* ── sign in ── */
.signin-wrap { max-width: 420px; margin: 0 auto; padding: 14vh 28px 40px; position: relative; }
.signin-mark {
  width: 46px; height: 46px; border-radius: 14px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 26px;
}
.signin-title {
  font-family: var(--display); font-size: 38px; font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05; margin: 0;
}
.signin-sub { color: var(--muted); margin: 12px 0 30px; font-size: 14px; line-height: 1.55; }
.signin-wrap input { margin-bottom: 10px; }
.signin-wrap .primary-btn, .signin-wrap .secondary-btn { margin-bottom: 10px; }
.or { text-align: center; color: var(--muted-2); font-size: 12px; margin: 4px 0 12px; }
.signin-msg { margin-top: 12px; font-size: 13px; color: var(--muted); min-height: 19px; line-height: 1.5; }
.setup { margin-top: 34px; font-size: 13px; color: var(--muted); }
.setup summary { cursor: pointer; min-height: 30px; }
.setup input { margin-top: 8px; }
.hint { font-size: 11px; line-height: 1.6; color: var(--muted-2); }

.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.seg button {
  min-height: 44px; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
}
.seg button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* ── misc ── */
.offline-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--warn); color: var(--warn-ink); font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em; text-align: center;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
}
body.has-bar header { padding-top: calc(46px + env(safe-area-inset-top)); }

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.list-row:first-of-type { border-top: 0; }
.meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 12px; line-height: 1.6; }
.spark { display: block; width: 100%; height: 48px; overflow: visible; }
.saved { color: var(--good); }
.err { color: var(--bad); }
.disclaimer { color: var(--muted-2); font-size: 11px; line-height: 1.55; margin: 18px 2px 0; }

.set-row {
  display: grid; grid-template-columns: 26px repeat(3, minmax(0, 1fr));
  gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft);
}
.set-row .n { font-family: var(--display); font-size: 13px; color: var(--muted); font-weight: 600; }
.set-row .meta { font-family: var(--display); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; }