/* Iron and the Big Three — phone app.
   Deliberately single-theme dark: it is used in a gym, at arm's length,
   often on an OLED screen. Every colour is painted explicitly. */

@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#10201F;
  --surface:#182927;
  --surface-2:#1F332F;
  --ink:#E4EAE7;
  --ink-soft:#96A5A0;
  --ink-faint:#6E7D79;
  --rule:#263834;
  --rule-strong:#38504A;
  --teal:#57C3B7;
  --teal-dim:#173330;
  --brass:#D6AB55;
  --brass-dim:#2A2313;
  --flag:#E38A6C;
  --flag-dim:#2E1C16;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Archivo",var(--ui);
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

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

/* `hidden` must beat any class that sets a display value. */
[hidden]{display:none!important}

html,body{margin:0;padding:0}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.45;
  padding-bottom:calc(66px + var(--safe-b));
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}

button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- top bar ---------- */

.bar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + var(--safe-t)) 16px 10px;
  background:rgba(16,32,31,.94);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.bar h1{
  font-family:var(--display);
  font-weight:800;font-size:1.2rem;letter-spacing:-.02em;
  margin:0;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.back{
  font-size:2rem;line-height:1;width:30px;margin:-6px 0 0 -6px;
  color:var(--teal);
}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  background:var(--teal-dim);color:var(--teal);
  padding:6px 10px;border-radius:20px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Unsynced work pending, or offline. */
.chip.pending{background:var(--brass-dim);color:var(--brass)}
.chip.busy{opacity:.55}

/* ---------- layout ---------- */

main{padding:18px 16px 30px;max-width:640px;margin:0 auto}

.stack{display:flex;flex-direction:column;gap:14px}

h2{
  font-family:var(--display);font-weight:700;
  font-size:1.35rem;letter-spacing:-.02em;margin:0;
}
h3{
  font-family:var(--display);font-weight:600;
  font-size:1.02rem;letter-spacing:-.01em;margin:0;
}
.eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);
}
p{margin:0;color:var(--ink-soft);font-size:.95rem}

/* ---------- phase banner ---------- */

.phase{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;
}
.phase-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.phase-week{
  font-family:var(--display);font-weight:800;
  font-size:1.5rem;letter-spacing:-.02em;
}
.phase-label{font-family:var(--display);font-weight:600;color:var(--teal);font-size:.95rem}
.phase-targets{display:flex;gap:0;border-top:1px solid var(--rule);padding-top:10px}
.phase-targets div{flex:1;display:flex;flex-direction:column;gap:2px}
.phase-targets span:first-child{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.phase-targets span:last-child{
  font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums;color:var(--ink);
}
.phase p{font-size:.9rem;line-height:1.5}

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

.daybtn{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:16px;
}
.daybtn.next{border-color:var(--teal);background:var(--teal-dim)}
.daybtn .num{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--ink-faint);width:38px;flex:none;
}
.daybtn.next .num{color:var(--teal)}
.daybtn .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.daybtn .nm{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.daybtn .sb{font-size:.85rem;color:var(--ink-soft)}
.daybtn .arrow{color:var(--ink-faint);font-size:1.4rem;flex:none}
.daybtn.done .nm::after{content:" ✓";color:var(--teal)}

/* ---------- exercise cards ---------- */

.ex{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;
}
.ex.complete{border-color:var(--rule-strong);opacity:.72}
.ex-head{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  padding:15px 16px;text-align:left;
}
.ex-head .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ex-name{
  font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:-.01em;line-height:1.25;
}
.ex-target{
  font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.ex-last{
  font-family:var(--mono);font-size:.75rem;color:var(--brass);
  font-variant-numeric:tabular-nums;
}
.ex-head .caret{color:var(--ink-faint);font-size:.9rem;padding-top:4px;flex:none;transition:transform .18s}
.ex.open .caret{transform:rotate(90deg)}

.tag{
  display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:3px;
  margin-left:6px;vertical-align:2px;
}
.t-new{background:var(--brass-dim);color:var(--brass)}
.t-reduced{background:var(--flag-dim);color:var(--flag)}
.t-kept{background:var(--surface-2);color:var(--ink-faint)}

.ex-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px}
.ex.open .ex-body{display:flex}
.ex:not(.open) .ex-body{display:none}
.ex-note{
  font-size:.88rem;line-height:1.5;color:var(--ink-soft);
  padding-left:11px;border-left:2px solid var(--rule-strong);
}
.ex-note.warn{border-color:var(--brass);color:var(--ink)}

/* ---------- set rows ---------- */

.sets{display:flex;flex-direction:column;gap:8px}
.sethead{
  display:grid;grid-template-columns:34px 1fr 1fr 1fr 44px;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);padding:0 2px;
}
.setrow{
  display:grid;grid-template-columns:34px 1fr 1fr 1fr 44px;gap:8px;align-items:center;
}
.setrow .idx{
  font-family:var(--mono);font-size:.85rem;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.setrow input{
  width:100%;min-width:0;
  background:var(--surface-2);border:1px solid var(--rule);
  color:var(--ink);border-radius:9px;
  padding:11px 8px;text-align:center;
  font-family:var(--mono);font-size:16px;   /* 16px stops iOS zooming on focus */
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.setrow input::-webkit-outer-spin-button,
.setrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.setrow input::placeholder{color:var(--ink-faint);opacity:.7}
.setrow input:not(:placeholder-shown){border-color:var(--rule-strong)}
.tick{
  height:42px;border-radius:9px;border:1px solid var(--rule);
  background:var(--surface-2);color:var(--ink-faint);
  font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.tick.on{background:var(--teal);border-color:var(--teal);color:var(--ground);font-weight:700}

.plain{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-2);border:1px solid var(--rule);
  border-radius:11px;padding:13px 14px;
}
.plain .lbl{font-size:.95rem}
.plain .lbl b{font-family:var(--display);font-weight:600}
.plain .lbl span{display:block;color:var(--ink-soft);font-size:.82rem}

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

.btn{
  display:block;width:100%;text-align:center;
  background:var(--teal);color:var(--ground);
  font-family:var(--display);font-weight:700;font-size:1rem;
  padding:15px;border-radius:12px;letter-spacing:-.01em;
}
.btn.sec{background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong)}
.btn.warn{background:var(--flag-dim);color:var(--flag);border:1px solid var(--flag)}
.btn:disabled{opacity:.45}

/* ---------- lists ---------- */

.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.rules li{
  background:var(--surface);padding:13px 15px;font-size:.92rem;line-height:1.45;
  display:grid;grid-template-columns:8px 1fr;gap:12px;align-items:baseline;
}
.rules li::before{content:"";width:7px;height:7px;background:var(--flag);display:block}

.cue{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:16px;display:flex;flex-direction:column;gap:8px;
}
.cue .role{
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-dim);padding:4px 8px;border-radius:3px;align-self:flex-start;
}
.cue p{color:var(--ink);font-size:.92rem;line-height:1.5}

.hist{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:14px 15px;
}
.hist .d{font-family:var(--mono);font-size:.82rem;color:var(--ink-faint);width:74px;flex:none;
  font-variant-numeric:tabular-nums}
.hist .n{flex:1;font-family:var(--display);font-weight:600;font-size:.98rem}
.hist .v{font-family:var(--mono);font-size:.78rem;color:var(--teal)}

.empty{
  text-align:center;padding:44px 20px;color:var(--ink-faint);
  border:1px dashed var(--rule-strong);border-radius:14px;font-size:.92rem;
}

.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint)}
.field input,.field textarea{
  background:var(--surface-2);border:1px solid var(--rule);color:var(--ink);
  border-radius:10px;padding:13px;font-size:16px;font-family:var(--mono);width:100%;
}
.field textarea{min-height:150px;line-height:1.5;font-size:12px;resize:vertical}
.hint{font-size:.85rem;color:var(--ink-faint);line-height:1.5}

/* ---------- rest timer ---------- */

.timer{
  position:fixed;left:12px;right:12px;bottom:calc(74px + var(--safe-b));z-index:50;
  display:flex;align-items:center;gap:10px;
  background:var(--teal);color:var(--ground);
  border-radius:13px;padding:11px 14px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
.timer-label{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.75}
.timer-count{
  font-family:var(--mono);font-size:1.25rem;font-weight:600;
  font-variant-numeric:tabular-nums;flex:1;
}
.timer button{
  font-family:var(--display);font-weight:700;font-size:.82rem;
  background:rgba(16,32,31,.18);padding:7px 11px;border-radius:8px;
}
.timer button.ghost{background:var(--ground);color:var(--teal)}

/* ---------- bottom tabs ---------- */

.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;
  background:rgba(16,32,31,.96);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-top:1px solid var(--rule);
  padding-bottom:var(--safe-b);
}
.tabs button{
  flex:1;padding:13px 4px 12px;
  font-family:var(--display);font-weight:600;font-size:.76rem;
  letter-spacing:.01em;color:var(--ink-faint);
}
.tabs button.on{color:var(--teal)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}