/* ------------------------------------------------------------------
   Trenér — app shell.
   Built to phone-app conventions: tab bar, pushed screens with a back
   affordance, grouped settings lists, bottom sheets. The target is
   iOS/Android, so nothing here should read as a web page.
   ------------------------------------------------------------------ */

:root {
  /* Dnes — C4 Vrstevnice */
  --pine:#17342C; --pine2:#0E2620;
  --ox:#4A1E24;   --ox2:#331319;
  --slate:#2C343B;--slate2:#1B2127;
  --snow:#F0F4EF; --sand:#DCC58C; --dimc:#93AFA4;

  /* Forma — B3 */
  --ink:#0A0D0C; --ink2:#141A18; --hair:#1E2624;
  --dim:#7C8C85; --dim2:#95A49D;
  --ready:#5FBF97; --ok:#8FB98C; --easy:#D9B871; --restc:#C97F62;

  /* Deník / listy — A3 */
  --manila:#E7E4DA; --card:#FCFBF7; --cardq:#F2F0E9;
  --inkb:#1F1D18;  --dimb:#6B6555; --dimb2:#5E5849;
  --run:#8A6A3F;   --bike:#3D6478; --tren:#4E6C74; --restb:#B3AFA2;
  --green:#2E4C42; --danger:#8E4230;
  --strava:#FC4C02;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --tab-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body {
  margin:0; padding:0; height:100%;
  font-family:var(--sans); background:var(--ink); color:var(--snow);
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
#app { min-height:100%; display:flex; flex-direction:column; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input { font:inherit; }
a { color:inherit; }

.boot { flex:1; display:flex; align-items:center; justify-content:center; }
.spin {
  width:28px; height:28px; border-radius:50%;
  border:2.5px solid rgba(240,244,239,.18); border-top-color:var(--sand);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------------------------------------------------- screens */

.screen {
  flex:1 1 auto; position:relative; display:flex; flex-direction:column;
  padding-bottom:calc(var(--tab-h) + var(--safe-b) + 10px);
}
.screen.pad { padding:calc(20px + var(--safe-t)) 20px calc(var(--tab-h) + var(--safe-b) + 24px); }
.screen-h { font-size:30px; line-height:1.1; letter-spacing:-.03em; font-weight:700; margin:0 0 4px; }
.label {
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin:0 0 10px;
}
.label.center { text-align:center; }
.hint { font-size:13px; line-height:1.5; color:var(--dim); margin:0; }
.empty { font-size:14px; color:var(--dimb); }

/* ---------------------------------------------------- Dnes (C4) */

.field-bg { color:var(--snow); position:relative; overflow:hidden; }
.field-bg.pine  { background:linear-gradient(168deg,var(--pine),var(--pine2)); }
.field-bg.ox    { background:linear-gradient(168deg,var(--ox),var(--ox2)); }
.field-bg.slate { background:linear-gradient(168deg,var(--slate),var(--slate2)); }
.topo {
  position:absolute; inset:0; width:100%; height:100%; opacity:.26;
  color:var(--sand); z-index:1; pointer-events:none;
  /* Texture behind the headline, nothing behind the reading text. The contours
     are the identity of this screen, but a hairline crossing a sentence costs
     more legibility than the decoration is worth — so they fade out where the
     card turns into prose. */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 22%, rgba(0,0,0,.22) 38%, transparent 52%);
  mask-image:linear-gradient(180deg, #000 0%, #000 22%, rgba(0,0,0,.22) 38%, transparent 52%);
}
.field-bg.slate .topo { color:#93AFA4; opacity:.18; }
.field-in { position:relative; z-index:2; padding:calc(28px + var(--safe-t)) 22px 22px; display:flex; flex-direction:column; flex:1; }

.dt { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); margin:0 0 26px; }
.field-bg.slate .dt { color:var(--dimc); }
.big { font-size:clamp(30px,9vw,40px); line-height:1.02; letter-spacing:-.035em; font-weight:680; margin:0 0 16px; text-wrap:balance; }
.specs { display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; margin-bottom:18px; }
.detail { font-size:15px; line-height:1.5; margin:0 0 20px; opacity:.92; }
.why { font-size:13.5px; line-height:1.55; color:var(--dimc); margin:0; border-top:1px solid rgba(240,244,239,.16); padding-top:15px; }
.why b { color:var(--snow); font-weight:600; }

.actions { padding-top:22px; display:flex; flex-direction:column; gap:9px; }
.row2 { display:flex; gap:9px; }
.row2 .btn { flex:1; }

.weekstrip { display:flex; gap:4px; margin-top:auto; border-top:1px solid rgba(240,244,239,.14); padding-top:16px; }
.ws-day { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; }
.ws-d { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--dimc); opacity:.8; }
.ws-day.now .ws-d { color:var(--sand); opacity:1; font-weight:700; }
.ws-dot { width:9px; height:9px; border-radius:50%; }
.ws-dot.done { background:var(--sand); }
.ws-dot.plan { box-shadow:inset 0 0 0 1.5px rgba(240,244,239,.5); }
.ws-dot.hard { box-shadow:inset 0 0 0 4px rgba(240,244,239,.62); }
.ws-dot.skip { box-shadow:inset 0 0 0 1.5px rgba(240,244,239,.22); }
.ws-dot.none { width:4px; height:4px; background:rgba(240,244,239,.22); margin:2.5px 0; }

.nextup { margin-top:22px; border-top:1px solid rgba(240,244,239,.14); padding-top:15px; }
.nextup .label { color:var(--sand); margin-bottom:6px; }
.nextup-t { font-size:16px; font-weight:620; margin:0 0 3px; letter-spacing:-.015em; }
.nextup-m { font-family:var(--mono); font-size:11.5px; color:var(--dimc); margin:0; }

/* ---------------------------------------------------- Forma (B3) */

.forma { background:var(--ink); align-items:center; text-align:center; }
.forma .label { align-self:stretch; text-align:center; }
.score { font-size:104px; line-height:.84; font-weight:680; letter-spacing:-.06em; font-variant-numeric:tabular-nums; margin:6px 0 0; }
.score span { font-size:26px; color:var(--dim); font-weight:400; letter-spacing:0; }
.tone-ready .score { color:var(--ready); }
.tone-ok .score { color:var(--ok); }
.tone-easy .score { color:var(--easy); }
.tone-rest .score { color:var(--restc); }
.verdict { font-size:19px; font-weight:660; letter-spacing:-.02em; margin:18px 0 10px; }
.reasons { list-style:none; padding:0; margin:0 0 22px; max-width:300px; display:grid; gap:6px; }
.reasons li { font-size:13.5px; line-height:1.5; color:var(--dim); }
.basis { align-self:stretch; border:1px solid var(--hair); border-radius:10px; padding:12px 14px; margin-bottom:22px; text-align:left; background:var(--ink2); }
.basis-t { font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }
.basis-d { font-size:12px; line-height:1.5; color:var(--dim2); margin:7px 0 0; }
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; align-self:stretch; margin-bottom:26px; }
.trio-c { background:var(--ink2); border:1px solid var(--hair); border-radius:10px; padding:11px 8px; }
.trio-v { font-family:var(--mono); font-size:21px; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.trio-k { font-size:11px; color:var(--dim); margin-top:3px; }
.trio-x { font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--dim2); margin-top:2px; }
.spark { display:flex; gap:3px; align-items:flex-end; height:64px; align-self:stretch; }
.spark-col { flex:1; height:100%; display:flex; align-items:flex-end; }
.spark-col i { display:block; width:100%; background:var(--hair); border-radius:2px; }
.tone-ready .spark-col i { background:#2C4A3E; }
.tone-easy .spark-col i, .tone-rest .spark-col i { background:#40352C; }

/* ---------------------------------------------------- Deník (A3) */

.denik { background:var(--manila); color:var(--inkb); }
.denik .label, .denik .screen-h { color:var(--inkb); }
.denik-sum { font-size:13.5px; color:var(--dimb); margin:0 0 18px; }
.cards { display:grid; gap:8px; }
.card {
  width:100%; text-align:left; background:var(--card); border-radius:10px; padding:12px 14px;
  border-left:3px solid var(--restb); box-shadow:0 1px 2px rgba(0,0,0,.07);
  /* --card on --manila is only 1.23:1, but the 3px sport stripe on the left
     measures 5:1 against the page — that is what makes the row identifiable as
     a control, so no extra border is needed. */
}
.card.bezh { border-left-color:var(--run); }
.card.kolo { border-left-color:var(--bike); }
.card.trenazer { border-left-color:var(--tren); }
.card.done { background:var(--cardq); }
.card.skipped { opacity:.5; }
.card.today { box-shadow:0 0 0 2px var(--green); }
.card:active { transform:scale(.995); }
.card-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; gap:8px; }
.card-d { font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dimb); }
.card-s { font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.card-s.ok { color:#3F5E39; } .card-s.sk { color:var(--dimb2); }
.card-s.now { color:var(--green); font-weight:700; } .card-s.late { color:#97562F; }
.card-t { font-size:14.5px; font-weight:620; margin:0 0 3px; letter-spacing:-.01em; }
.card-m { font-size:11.5px; color:var(--dimb); margin:0; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------- Já / settings */

.ja { background:var(--manila); color:var(--inkb); }
.ja .screen-h { color:var(--inkb); }

.idcard {
  display:flex; align-items:center; gap:14px; background:var(--card);
  border-radius:12px; padding:14px 16px; margin:14px 0 22px;
  box-shadow:0 1px 2px rgba(0,0,0,.07);
}
.idcard-a {
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:var(--green); color:#F2F5F2; display:flex; align-items:center;
  justify-content:center; font-size:18px; font-weight:700;
}
.idcard-e { font-size:15px; font-weight:620; margin:0 0 2px; word-break:break-all; }
.idcard-s { font-size:12px; color:var(--dimb); margin:0; }

.sect { margin-bottom:22px; }
.sect-t {
  font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dimb); margin:0 0 8px 4px;
}
.sect-body { background:var(--card); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.sect-pad { padding:14px 16px; }

.row {
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; border-bottom:1px solid rgba(31,29,24,.08); color:var(--inkb);
  min-height:52px;
}
.sect-body > .row:last-child, .sect-body > .trow:last-child { border-bottom:none; }
.row:active:not(.static) { background:rgba(31,29,24,.04); }
.row.static { cursor:default; }
.row.danger .row-l { color:var(--danger); }
.row-main { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.row-l { font-size:15px; }
.row-sub { font-size:12px; color:var(--dimb); }
.row-v { font-size:14px; color:var(--dimb); text-align:right; font-variant-numeric:tabular-nums; }
.row svg { color:#B4AFA2; flex:0 0 auto; }

.trow {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid rgba(31,29,24,.08); min-height:52px;
}
.switch {
  appearance:none; width:46px; height:28px; border-radius:14px; background:#908D84;
  /* Off-track was #CFCBBE — 1.57:1 against the card, i.e. a control you cannot
     see until you look for it. Darkened to clear the 3:1 non-text floor while
     still reading as "off" next to the green on-state. */
  position:relative; flex:0 0 auto; transition:background .16s;
}
.switch::after {
  content:''; position:absolute; top:2px; left:2px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.24); transition:transform .16s;
}
.switch:checked { background:var(--green); }
.switch:checked::after { transform:translateX(18px); }

.frow { display:block; padding:12px 16px; border-bottom:1px solid rgba(31,29,24,.08); }
.frow-l { display:block; font-size:13px; color:var(--dimb); margin-bottom:5px; }
.frow-in { display:flex; align-items:baseline; gap:8px; }
.frow-in input {
  flex:1; min-width:0; border:none; background:none; font-size:17px; color:var(--inkb);
  padding:0; font-variant-numeric:tabular-nums;
}
.frow-in input:focus { outline:none; }
.frow-u { font-size:13px; color:var(--dimb); }
.frow-h { display:block; font-size:11.5px; line-height:1.45; color:var(--dimb2); margin-top:6px; }

.seg { display:flex; background:rgba(31,29,24,.07); border-radius:9px; padding:3px; gap:3px; }
.seg-b { flex:1; padding:8px 6px; border-radius:7px; font-size:13.5px; color:var(--dimb); }
/* Selected state carried by fill alone measured 1.19:1 against the track — you
   could not tell which segment was chosen. The ring gives the pill a definite
   edge; box-shadow rather than border so selecting does not shift layout. */
.seg-b.on {
  background:#fff; color:var(--inkb); font-weight:620;
  box-shadow:0 0 0 1px rgba(31,29,24,.58), 0 1px 2px rgba(0,0,0,.14);
}

.foot-note { font-size:12.5px; line-height:1.55; color:var(--dimb2); margin:0 4px 20px; }

/* ---- one-time Strava setup wizard ---- */
.steps { display:grid; gap:14px; margin-bottom:20px; }
.step { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; }
.step-n {
  width:28px; height:28px; border-radius:50%; background:var(--green); color:#F2F5F2;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; flex:0 0 auto;
}
.step-b { min-width:0; }
.step-t { font-size:15.5px; font-weight:640; margin:0 0 3px; letter-spacing:-.01em; }
.step-d { font-size:13px; line-height:1.5; color:var(--dimb); margin:0 0 10px; }
.btn.sm { padding:11px 14px; font-size:14px; }

.kv { background:var(--card); border-radius:10px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.kv-row { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid rgba(31,29,24,.08); }
.kv-row:last-child { border-bottom:none; }
.kv-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.kv-k { font-size:11px; color:var(--dimb); }
.kv-v { font-family:var(--mono); font-size:13px; word-break:break-all; }
.kv-c {
  flex:0 0 auto; font-size:12px; font-weight:600; color:var(--green);
  border:1px solid rgba(46,76,66,.3); border-radius:7px; padding:7px 10px;
}
.kv-c:active { background:rgba(46,76,66,.08); }

.setup-form { display:grid; gap:11px; }
.field.dark span { color:var(--dimb); }
.field.dark input {
  background:#fff; border:1px solid rgba(31,29,24,.18); color:var(--inkb);
}
.field.dark input::placeholder { color:#A9A497; }
.setup-err {
  font-size:13px; line-height:1.5; color:#7A3524; background:rgba(142,66,48,.1);
  border:1px solid rgba(142,66,48,.3); border-radius:8px; padding:10px 12px; margin:0;
}

/* ---------------------------------------------------- pushed screen */

.pushed {
  flex:1; display:flex; flex-direction:column; background:var(--manila); color:var(--inkb);
  padding-bottom:calc(var(--tab-h) + var(--safe-b));
  animation:slidein .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes slidein { from { transform:translateX(14px); opacity:.4; } to { transform:none; opacity:1; } }
.nav-head {
  display:flex; align-items:center; gap:6px; padding:calc(8px + var(--safe-t)) 8px 8px;
  border-bottom:1px solid rgba(31,29,24,.1); position:sticky; top:0;
  background:var(--manila); z-index:5;
}
.nav-back { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--green); }
.nav-title { flex:1; text-align:center; font-size:16px; font-weight:640; letter-spacing:-.01em; }
.nav-spacer { width:40px; flex:0 0 auto; }
.pushed-body { flex:1; overflow-y:auto; padding:18px 16px 24px; }
.pushed-foot { padding:12px 16px calc(12px + var(--safe-b)); border-top:1px solid rgba(31,29,24,.1); }

/* ---------------------------------------------------- auth */

.auth {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  background:linear-gradient(168deg,var(--pine),var(--pine2));
  padding:calc(32px + var(--safe-t)) 24px calc(32px + var(--safe-b));
}
.auth-top { text-align:center; margin-bottom:28px; }
.logo { display:flex; justify-content:center; margin-bottom:10px; }
.auth h1 { font-size:32px; letter-spacing:-.03em; font-weight:700; margin:0 0 8px; }
.auth-sub { font-size:14.5px; line-height:1.5; color:var(--dimc); margin:0 auto; max-width:280px; }
.auth-form { display:grid; gap:14px; }
.auth-err { font-size:13.5px; color:#F0C4B5; background:rgba(201,127,98,.18); border:1px solid rgba(201,127,98,.45); border-radius:8px; padding:11px 13px; margin:0; }
.auth-swap { margin-top:18px; font-size:14px; color:var(--sand); text-decoration:underline; text-underline-offset:3px; padding:8px; }
.auth-note { font-size:12px; line-height:1.55; color:var(--dimc); text-align:center; margin:24px auto 0; max-width:300px; opacity:.85; }

/* ---------------------------------------------------- onboarding */

.onb {
  flex:1; display:flex; flex-direction:column;
  background:linear-gradient(168deg,var(--pine),var(--pine2));
  padding:calc(30px + var(--safe-t)) 20px calc(20px + var(--safe-b));
}
.onb-top { margin-bottom:22px; }
.progress { display:flex; gap:5px; margin-bottom:22px; }
.progress i { flex:1; height:3px; border-radius:2px; background:rgba(240,244,239,.2); }
.progress i.on { background:var(--sand); }
.onb h1 { font-size:27px; line-height:1.1; letter-spacing:-.03em; font-weight:680; margin:0; }
.onb-body { flex:1; overflow-y:auto; }
.onb .hint { color:var(--dimc); }
.onb .label { color:var(--sand); }

/* what Strava told us about the athlete */
.pulled {
  background:rgba(240,244,239,.07); border:1px solid var(--sand);
  border-radius:11px; padding:14px; display:grid; gap:9px;
}
.pulled-h {
  margin:0; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sand);
}
.pulled-l { margin:0; padding-left:18px; display:grid; gap:5px; font-size:14.5px; }
.pulled-l li { line-height:1.45; }
.pulled-l.tight { color:var(--dimc); font-size:13.5px; }
.pulled-s { margin:0; font-family:var(--mono); font-size:10.5px; color:var(--dimc); }
.pull { padding-top:8px; }
.onb-actions { display:flex; gap:9px; padding-top:20px; }
.onb-actions .btn { flex:1; }

.stack { display:grid; gap:16px; }
.choices { display:grid; gap:8px; }
.choice {
  text-align:left; padding:13px 14px; border-radius:10px;
  background:rgba(240,244,239,.07); border:1px solid rgba(240,244,239,.16);
  display:grid; gap:3px; color:var(--snow);
}
.choice.on { background:rgba(220,197,140,.15); border-color:var(--sand); }
.choice-t { font-size:15px; font-weight:620; }
.choice-d { font-size:12.5px; line-height:1.4; color:var(--dimc); }
.races { display:grid; gap:6px; }
.race { text-align:left; padding:11px 13px; border-radius:9px; background:rgba(240,244,239,.06); border:1px solid rgba(240,244,239,.14); display:grid; gap:2px; color:var(--snow); }
.race.on { border-color:var(--sand); background:rgba(220,197,140,.14); }
.race-n { font-size:13.5px; font-weight:600; }
.race-m { font-family:var(--mono); font-size:10.5px; color:var(--dimc); }
.pushed .race, .sheet .race { background:#fff; border-color:rgba(31,29,24,.16); color:var(--inkb); }
.pushed .race-m, .sheet .race-m { color:var(--dimb); }

/* found on the web — dashed, because it is a proposal until confirmed */
.race.web { border-style:dashed; }
.lowconf {
  margin-left:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--restc); vertical-align:1px;
}
.pushed .lowconf, .sheet .lowconf { color:var(--danger); }
/* a stage race is a different event — flag it where the name is */
.stagetag {
  margin-left:7px; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sand); vertical-align:1px;
}
.pushed .stagetag, .sheet .stagetag { color:var(--green); }
.stagenote { margin-top:-2px; }
.websearch { width:100%; font-size:13.5px; }
.searching { display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--dimc); padding:4px 2px; }
.pushed .searching, .sheet .searching { color:var(--dimb); }
.websearch-err { padding:2px; }

/* how-to panel on the session card */
.guide { margin-top:2px; }
.guide > summary {
  list-style:none; cursor:pointer; padding:9px 0; font-size:13px;
  color:rgba(240,244,239,.72); border-top:1px solid rgba(240,244,239,.14);
}
.guide > summary::-webkit-details-marker { display:none; }
.guide > summary::before { content:'＋ '; font-family:var(--mono); }
.guide[open] > summary::before { content:'－ '; }
.g-body { display:grid; gap:9px; padding:2px 0 10px; }
.g-focus {
  margin:0; font-size:14px; line-height:1.5; color:var(--snow);
  border-left:2px solid var(--sand); padding-left:10px;
}
.g-row { display:grid; grid-template-columns:82px 1fr; gap:10px; align-items:baseline; }
.g-k {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sand);
}
.g-v { font-size:13px; line-height:1.5; color:rgba(240,244,239,.86); }
@media (max-width:340px) { .g-row { grid-template-columns:1fr; gap:2px; } }

.dows { display:flex; gap:5px; }
.dow { flex:1; padding:12px 0; border-radius:8px; text-align:center; font-size:13px; background:rgba(240,244,239,.07); border:1px solid rgba(240,244,239,.16); color:var(--snow); }
.dow.on { background:var(--sand); color:#14251F; border-color:var(--sand); font-weight:660; }
.pushed .dow, .sheet .dow { background:#fff; border-color:rgba(31,29,24,.16); color:var(--inkb); }
.pushed .dow.on, .sheet .dow.on { background:var(--green); color:#F2F5F2; border-color:var(--green); }

/* ---------------------------------------------------- goal screen */

.gtabs { display:flex; gap:4px; background:rgba(240,244,239,.08); border-radius:10px; padding:3px; }
.gtab {
  flex:1; padding:10px 6px; border-radius:8px; font-size:13.5px; color:var(--dimc);
}
.gtab.on { background:var(--sand); color:#14251F; font-weight:660; }
.pushed .gtabs, .sheet .gtabs { background:rgba(31,29,24,.07); }
.pushed .gtab, .sheet .gtab { color:var(--dimb); }
.pushed .gtab.on, .sheet .gtab.on { background:var(--green); color:#F2F5F2; }

.searchbox { position:relative; }
.search {
  width:100%; padding:14px 40px 14px 14px; border-radius:10px; font-size:16px;
  background:rgba(240,244,239,.1); border:1px solid rgba(240,244,239,.2); color:var(--snow);
  -webkit-appearance:none;
}
.search::placeholder { color:rgba(147,175,164,.8); }
/* Safari draws its own clear button inside type="search"; ours is the one that
   also resets the search state, so hide the native duplicate. */
.search::-webkit-search-cancel-button,
.search::-webkit-search-decoration { -webkit-appearance:none; appearance:none; }
.pushed .search, .sheet .search { background:#fff; border-color:rgba(31,29,24,.18); color:var(--inkb); }
.search-x {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; font-size:22px; color:var(--dimc);
}

.racecard {
  background:rgba(240,244,239,.08); border:1px solid var(--sand);
  border-radius:11px; padding:14px; display:grid; gap:12px;
}
.pushed .racecard, .sheet .racecard { background:#fff; border-color:var(--green); }
.racecard-h { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.racecard-n { font-size:16.5px; font-weight:660; letter-spacing:-.015em; }
.racecard-x { font-size:12.5px; color:var(--sand); text-decoration:underline; text-underline-offset:3px; }
.pushed .racecard-x, .sheet .racecard-x { color:var(--green); }
.racefacts { display:flex; gap:6px; }
.fact { flex:1; background:rgba(240,244,239,.08); border-radius:8px; padding:8px 4px; text-align:center; }
.pushed .fact, .sheet .fact { background:rgba(31,29,24,.05); }
.fact-v { display:block; font-size:14px; font-weight:640; font-variant-numeric:tabular-nums; }
.fact-k { display:block; font-size:10px; opacity:.7; margin-top:2px; }
.racenote { font-size:12.5px; line-height:1.5; color:var(--dimc); margin:0; }
.pushed .racenote, .sheet .racenote { color:var(--dimb); }

.custom { border-top:1px solid rgba(240,244,239,.14); padding-top:12px; }
.custom summary { font-size:13.5px; color:var(--sand); cursor:pointer; padding:6px 0; }
.pushed .custom summary, .sheet .custom summary { color:var(--green); }
.custom .stack { margin-top:12px; }

.ta {
  width:100%; padding:13px; border-radius:10px; font-size:15.5px; line-height:1.5;
  background:rgba(240,244,239,.1); border:1px solid rgba(240,244,239,.2);
  color:var(--snow); resize:vertical; font-family:inherit;
}
.ta::placeholder { color:rgba(147,175,164,.8); }
.big-ta { min-height:88px; }
.pushed .ta, .sheet .ta { background:#fff; border-color:rgba(31,29,24,.18); color:var(--inkb); }

.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  padding:9px 12px; border-radius:18px; font-size:13px;
  background:rgba(240,244,239,.09); border:1px solid rgba(240,244,239,.18); color:var(--snow);
}
.chip.on { background:var(--sand); color:#14251F; border-color:var(--sand); font-weight:620; }
.pushed .chip, .sheet .chip { background:#fff; border-color:rgba(31,29,24,.16); color:var(--inkb); }
.pushed .chip.on, .sheet .chip.on { background:var(--green); color:#F2F5F2; border-color:var(--green); }

.understood {
  border-radius:10px; padding:13px 14px;
  background:rgba(220,197,140,.14); border:1px solid rgba(220,197,140,.4);
}
.understood.unsure { background:rgba(147,175,164,.12); border-color:rgba(147,175,164,.3); }
.understood-k {
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sand); display:block; margin-bottom:5px;
}
.understood.unsure .understood-k { color:var(--dimc); }
.understood p { font-size:14.5px; font-weight:600; margin:0; }
.understood-d { font-size:12.5px !important; font-weight:400 !important; color:var(--dimc); margin-top:6px !important; }
.pushed .understood, .sheet .understood { background:rgba(46,76,66,.09); border-color:rgba(46,76,66,.3); }
.pushed .understood-k, .sheet .understood-k { color:var(--green); }
.pushed .understood-d, .sheet .understood-d { color:var(--dimb); }

.reframe {
  border-radius:10px; padding:14px;
  background:rgba(240,244,239,.07); border-left:3px solid var(--sand);
}
.reframe-t { font-size:15px; font-weight:660; margin:0 0 6px; letter-spacing:-.01em; }
.reframe-d { font-size:13px; line-height:1.55; color:var(--dimc); margin:0; }
.pushed .reframe, .sheet .reframe { background:rgba(46,76,66,.07); border-left-color:var(--green); }
.pushed .reframe-d, .sheet .reframe-d { color:var(--dimb); }

.freq { display:flex; gap:6px; }
.freq-b {
  flex:1; aspect-ratio:1; border-radius:10px; font-size:17px; font-weight:640;
  background:rgba(240,244,239,.08); border:1px solid rgba(240,244,239,.18); color:var(--snow);
  display:flex; align-items:center; justify-content:center;
}
.freq-b.on { background:var(--sand); color:#14251F; border-color:var(--sand); }
.pushed .freq-b, .sheet .freq-b { background:#fff; border-color:rgba(31,29,24,.16); color:var(--inkb); }
.pushed .freq-b.on, .sheet .freq-b.on { background:var(--green); color:#F2F5F2; }

.range { width:100%; accent-color:var(--sand); }
.pushed .range { accent-color:var(--green); }

.fields { display:grid; gap:11px; }
.field { display:grid; gap:5px; }
.field span { font-size:12.5px; color:var(--dimc); }
.field input {
  padding:12px 13px; border-radius:9px; background:rgba(240,244,239,.08);
  border:1px solid rgba(240,244,239,.18); color:var(--snow); font-size:16px;
}
.field input::placeholder { color:rgba(147,175,164,.7); }
.field-h { font-size:11.5px; color:var(--dimc); }

.flags { display:grid; gap:9px; }
.flag {
  display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start;
  font-size:13.5px; line-height:1.45; padding:12px 13px; border-radius:9px;
  background:rgba(240,244,239,.06); border:1px solid rgba(240,244,239,.14);
}
.flag input { width:18px; height:18px; accent-color:var(--sand); margin-top:1px; }
.warn { background:rgba(201,127,98,.16); border:1px solid rgba(201,127,98,.5); border-radius:9px; padding:13px 14px; font-size:13px; line-height:1.55; color:#F2DED6; }

/* ---------------------------------------------------- buttons */

.btn {
  display:block; width:100%; text-align:center; padding:15px; border-radius:10px;
  font-size:15.5px; font-weight:620; background:var(--sand); color:#14251F;
  text-decoration:none;
}
/* .28 alpha measured 2.3:1 — a control you cannot see the edge of. 3:1 is the
   WCAG 1.4.11 floor for a boundary that carries the affordance. */
.btn.ghost { background:transparent; color:inherit; border:1px solid rgba(240,244,239,.42); font-weight:480; }
.pushed .btn, .sheet .btn { background:var(--green); color:#F2F5F2; }
.pushed .btn.ghost, .sheet .btn.ghost { background:transparent; color:var(--inkb); border:1px solid rgba(31,29,24,.55); }
.btn.strava { background:var(--strava); color:#fff; }
.btn:disabled { opacity:.5; }
.btn:active { transform:translateY(1px); }

/* ---------------------------------------------------- tab bar */

.tabs {
  position:fixed; bottom:0; left:0; right:0; z-index:10;
  height:calc(var(--tab-h) + var(--safe-b)); padding-bottom:var(--safe-b);
  display:flex; background:rgba(10,13,12,.94); backdrop-filter:blur(14px);
  border-top:1px solid var(--hair);
}
.tab {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--dim); font-size:10.5px; letter-spacing:.01em;
}
.tab.on { color:var(--snow); }
.tab.on span { font-weight:640; }

/* ---------------------------------------------------- sheet & toast */

.scrim { position:fixed; inset:0; z-index:25; background:rgba(6,10,9,.6); display:flex; align-items:flex-end; animation:fade .16s ease-out; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.sheet {
  width:100%; max-height:88%; overflow-y:auto; position:relative;
  background:var(--manila); color:var(--inkb); border-radius:16px 16px 0 0;
  padding:22px 20px calc(22px + var(--safe-b)); animation:slideup .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideup { from { transform:translateY(18px); } to { transform:none; } }
.sheet-x { position:absolute; top:10px; right:12px; font-size:26px; line-height:1; color:var(--dimb2); width:40px; height:40px; }
.sheet-k { font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--dimb); margin:0 0 6px; }
.sheet-t { font-size:21px; font-weight:660; letter-spacing:-.02em; margin:0 0 6px; }
.sheet-m { font-family:var(--mono); font-size:12px; color:var(--dimb); margin:0 0 10px; }
.sheet-d { font-size:13.5px; line-height:1.5; color:var(--dimb2); margin:0 0 16px; }
.sheet-actions { display:grid; gap:8px; margin-top:18px; }
/* ---- day sheet: history + coach review ---- */
.ws-day { padding:0; background:none; border:none; }
.ws-day:active .ws-dot { transform:scale(.85); }

/* Right padding keeps the forward arrow clear of the sheet's close button. */
.day-nav { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-right:42px; }
.day-arrow {
  width:38px; height:38px; border-radius:9px; font-size:24px; line-height:1;
  color:var(--green); background:rgba(46,76,66,.08); flex:0 0 auto;
  /* The tint alone is 1.13:1 against the sheet — add an edge so the control is
     findable rather than relying on the glyph. */
  border:1px solid rgba(46,76,66,.62);
}
.day-arrow:active { background:rgba(46,76,66,.16); }
.day-when { flex:1; text-align:center; }
.day-dow {
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dimb); margin:0 0 2px;
}
.day-date { font-size:19px; font-weight:660; letter-spacing:-.02em; margin:0; }

.wkbar { display:flex; gap:6px; margin-bottom:16px; }
.wkchip {
  flex:1; background:rgba(31,29,24,.05); border-radius:9px; padding:9px 6px; text-align:center;
}
.wkchip-v { display:block; font-size:15px; font-weight:660; font-variant-numeric:tabular-nums; }
/* --dimb measured 4.15:1 here; --dimb2 clears AA at this size */
.wkchip-k { display:block; font-size:10px; color:var(--dimb2); margin-top:2px; }

.daycard { background:var(--card); border-radius:12px; padding:15px 16px; margin-bottom:10px; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.daycard-h { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.daycard-sport {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; background:rgba(61,100,120,.14); color:#33566A;
}
.daycard-sport.bezh { background:rgba(138,106,63,.16); color:#6E5330; }
.daycard-state { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; }
.daycard-state.ok { color:#3F5E39; } .daycard-state.sk { color:var(--dimb2); }
.daycard-state.plan { color:var(--dimb); }
.daycard-t { font-size:17px; font-weight:660; letter-spacing:-.015em; margin:0 0 4px; }
.daycard-m { font-size:13px; line-height:1.45; color:var(--dimb); margin:0 0 12px; }

/* Flex-wrap rather than a grid: an odd number of stats used to leave an empty
   cell that read as a rendering bug. */
.statgrid { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.stat {
  flex:1 1 70px; background:rgba(31,29,24,.05); border-radius:8px;
  padding:9px 6px; text-align:center;
}
.stat-v { display:block; font-size:14.5px; font-weight:640; font-variant-numeric:tabular-nums; }
.stat-k { display:block; font-size:10px; color:var(--dimb); margin-top:2px; }

.review { border-top:1px solid rgba(31,29,24,.09); padding-top:12px; }
.review-h { font-size:13px; font-weight:680; margin:0 0 8px; letter-spacing:-.005em; }
.review-l { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.review-next {
  margin-top:11px; padding:10px 12px; border-radius:9px;
  background:rgba(46,76,66,.07); border-left:2px solid var(--green);
}
.review-next-k {
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); margin-bottom:4px;
}
.review-next p { margin:0; font-size:13px; line-height:1.5; color:var(--inkb); }
.rp { display:grid; grid-template-columns:16px 1fr; gap:9px; font-size:13px; line-height:1.5; color:var(--dimb2); }
.rp-m { font-weight:800; text-align:center; line-height:1.4; }
.rp.good .rp-m { color:#3F7A55; }
.rp.warn .rp-m { color:#B4552F; }
/* was #9A9384 = 2.95:1 on the card — below AA for a glyph that is text */
.rp.note .rp-m { color:#6E6858; }
.rp.warn { color:#6E3A25; }

.daycard-a { display:grid; gap:7px; margin-top:14px; }
.dayempty { background:var(--card); border-radius:12px; padding:22px 18px; text-align:center; }
.dayempty-t { font-size:17px; font-weight:660; margin:0 0 6px; }
.dayempty-d { font-size:13px; line-height:1.5; color:var(--dimb); margin:0; }

/* ---- post-session feedback: RPE 1-10 + how you felt ---- */
.q { font-size:15px; font-weight:660; margin:20px 0 10px; letter-spacing:-.01em; }
.rpe { display:flex; gap:4px; }
.rpe-b {
  flex:1; min-width:0; aspect-ratio:1; border-radius:8px;
  background:rgba(31,29,24,.06); color:var(--dimb2);
  font-size:14px; font-weight:640; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}
.rpe-b.mid { background:rgba(201,166,43,.14); }
.rpe-b.hi  { background:rgba(178,58,72,.13); }
.rpe-b.on  { background:var(--green); color:#F2F5F2; transform:scale(1.06); }
.rpe-b.mid.on { background:#B08A1E; } .rpe-b.hi.on { background:#9E3140; }
.rpe-ends { display:flex; justify-content:space-between; margin-top:6px; }
.rpe-ends span { font-size:10.5px; color:var(--dimb); }
.rpe-say { font-size:13px; color:var(--inkb); margin:10px 0 0; font-weight:560; }

.pocit { display:grid; gap:6px; }
.pocit-b {
  text-align:left; padding:11px 13px; border-radius:9px; background:#fff;
  border:1px solid rgba(31,29,24,.14); color:var(--inkb); display:grid; gap:1px;
}
.pocit-b.on { border-color:var(--green); background:rgba(46,76,66,.07); box-shadow:inset 0 0 0 1px var(--green); }
.pocit-t { font-size:14.5px; font-weight:620; }
.pocit-h { font-size:11.5px; color:var(--dimb); }

.q-read {
  font-size:13px; line-height:1.5; color:var(--dimb2); margin:16px 0 0;
  background:rgba(46,76,66,.07); border-radius:9px; padding:11px 13px;
}

.movelist { display:grid; gap:6px; }
.moveopt {
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; text-align:left;
  padding:13px 14px; border-radius:9px; background:#fff; border:1px solid rgba(31,29,24,.14); color:var(--inkb);
}
.moveopt-d { font-size:14px; font-weight:580; }
.moveopt-m { font-family:var(--mono); font-size:10.5px; color:var(--dimb); }

.live { position:fixed; inset:0; pointer-events:none; z-index:30; }
.toast {
  position:absolute; left:14px; right:14px; bottom:calc(var(--tab-h) + var(--safe-b) + 14px);
  pointer-events:auto; background:#F0F4EF; color:#14251F; border-radius:10px;
  padding:13px 15px; font-size:13.5px; line-height:1.45;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.5); display:flex; align-items:center; gap:12px;
  animation:rise .22s ease-out;
}
.toast span { flex:1; }
.toast-u { flex:0 0 auto; font-size:13px; font-weight:680; text-decoration:underline; text-underline-offset:3px; padding:4px 2px; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.timewarp {
  flex:0 0 auto; display:flex; align-items:center; gap:10px; background:var(--easy);
  color:#241C08; padding:7px 14px calc(7px); font-size:12px; font-weight:600;
  padding-top:calc(7px + var(--safe-t));
}
.timewarp span { flex:1; }
.timewarp-x { font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }

:focus-visible { outline:2px solid var(--sand); outline-offset:2px; }
.pushed :focus-visible, .sheet :focus-visible { outline-color:var(--green); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Desktop: keep the phone shape rather than stretching a mobile layout wide. */
@media (min-width:720px) {
  body { background:#07100D; display:flex; align-items:center; justify-content:center; }
  #app {
    width:400px; height:860px; max-height:96vh; min-height:0; border-radius:26px;
    overflow:hidden; position:relative; box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
  }
  .screen, .pushed { overflow-y:auto; }
  .tabs, .toast, .scrim, .live { position:absolute; }
}

/* a hint that is a caveat, not a nicety */
.hint.warnish {
  border-left:2px solid var(--sand); padding-left:10px; color:rgba(240,244,239,.82);
}
.pushed .hint.warnish, .sheet .hint.warnish { border-left-color:var(--danger); color:var(--dimb2); }

/* Which philosophy the plan is built on, and why.
   Lives on the "Já" screen, which is a LIGHT surface — the dark-surface tokens
   used elsewhere put near-black text on a near-black card here (measured 1.05:1,
   i.e. invisible). Match the other cards on this screen instead. */
.stylecard {
  background:var(--card); border-left:3px solid var(--green); border-radius:10px;
  padding:14px 16px; margin:0 0 22px; box-shadow:0 1px 2px rgba(0,0,0,.07);
  color:var(--inkb);
}
.stylecard-k {
  display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); margin-bottom:6px;
}
.stylecard-t { margin:0 0 7px; font-size:16px; font-weight:640; letter-spacing:-.015em; color:var(--inkb); }
.stylecard-s { font-weight:400; color:var(--dimb); font-size:13.5px; }
.stylecard-w { margin:0; font-size:13px; line-height:1.55; color:var(--dimb2); }

/* Strava's connected-athlete cap, explained before the tap */
.limitnote {
  background:rgba(252,76,2,.07); border-left:3px solid var(--strava);
  border-radius:9px; padding:13px 15px; display:grid; gap:8px;
}
.limitnote p { margin:0; font-size:13px; line-height:1.55; color:var(--dimc); }
.limitnote-t { font-size:14.5px; font-weight:640; color:var(--snow) !important; }
.pushed .limitnote p, .sheet .limitnote p { color:var(--dimb2); }
.pushed .limitnote-t, .sheet .limitnote-t { color:var(--inkb) !important; }

/* Strava attribution — required by their brand guidelines wherever their data
   is shown, and checked during the Developer Program review. */
.strava-badge {
  margin:10px 0 0; font-size:11px; letter-spacing:.04em;
  color:var(--dimc); display:flex; align-items:center; gap:5px;
}
.strava-word { color:var(--strava); font-weight:800; letter-spacing:.06em; }
.pushed .strava-badge, .sheet .strava-badge { color:var(--dimb2); }

/* ---------------------------------------------------------------------------
   Light-surface overrides for controls shared between the dark onboarding flow
   and the light pushed screens / sheets.

   These components were written for the dark surface and set near-white text.
   Reused unchanged on "Cíl a plán" (a light screen) they rendered white-on-white:
   the race-goal choices measured 1.13:1 and the form inputs would have made
   anything you typed invisible. Every value below is chosen to clear WCAG AA
   (4.5:1 text, 3:1 controls) against --manila / --card.
   --------------------------------------------------------------------------- */

.pushed .choice, .sheet .choice {
  background:#fff; border-color:rgba(31,29,24,.16); color:var(--inkb);
}
.pushed .choice.on, .sheet .choice.on {
  background:rgba(46,76,66,.10); border-color:var(--green);
}
.pushed .choice-d, .sheet .choice-d { color:var(--dimb); }

.pushed .label, .sheet .label { color:var(--dimb2); }

.pushed .field span, .sheet .field span,
.pushed .field-h,   .sheet .field-h { color:var(--dimb); }
.pushed .field input, .sheet .field input {
  background:#fff; border-color:rgba(31,29,24,.22); color:var(--inkb);
}
.pushed .field input::placeholder, .sheet .field input::placeholder {
  color:rgba(31,29,24,.5);
}

.pushed .flag, .sheet .flag { color:var(--inkb); }
.pushed .flag input, .sheet .flag input { accent-color:var(--green); }
.pushed .range, .sheet .range { accent-color:var(--green); }

/* Unselected tab measured 3.99:1 on the light track — just under AA. */
.pushed .gtab, .sheet .gtab { color:var(--dimb2); }
/* The selected choice's tint darkens its background, which drops --dimb to
   3.92:1 — the one place the description needs to go a shade darker. */
.pushed .choice.on .choice-d, .sheet .choice.on .choice-d { color:var(--dimb2); }
/* --dim is a dark-surface grey; on the light pushed screens it measured 2.78:1. */
.pushed .hint, .sheet .hint { color:var(--dimb2); }
.pushed .reframe-d, .sheet .reframe-d { color:var(--dimb2); }