/* Iron Paws. Dark iron, warm copper, built for a sweaty thumb. */

:root {
  --bg: #100e0c;
  --bg-2: #161310;
  --surface: #1c1914;
  --surface-2: #26221b;
  --surface-3: #322c24;
  --line: #3d352c;
  --line-bright: #524737;
  --text: #f4efe6;
  --muted: #b4a898;
  --dim: #7a7164;
  --copper: #e08a3c;
  --copper-2: #f0a056;
  --copper-dim: #8a5623;
  --copper-glow: rgba(224, 138, 60, .38);
  --ink: #17130f;
  --easy: #6fbe84;
  --medium: #e0a63a;
  --failure: #e05a52;
  --pad: 16px;
  --r: 16px;
  --tap: 56px;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.22, 1.15, .36, 1);
}

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

html, body {
  margin: 0; padding: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 500px at 50% -80px, rgba(224,138,60,.09), transparent 58%),
    url("/grain.jpg");
  background-repeat: no-repeat, repeat;
  background-size: auto, 160px;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px; line-height: 1.45;
  overscroll-behavior-y: contain;
  color-scheme: dark;
}

body {
  padding-bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}
html { scroll-padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
body.no-nav { padding-bottom: env(safe-area-inset-bottom); }

svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.solid { fill: currentColor; stroke: none; }

button {
  font: inherit; color: inherit; background: none; border: none; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform .14s var(--ease), filter .14s var(--ease), background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
button:disabled { opacity: .5; }
input, select { font: inherit; }

/* ---------------------------------------------------------------- boot */

.boot { display: grid; place-items: center; min-height: 80dvh; }
.boot-paw {
  width: 92px; height: 92px; border-radius: 28px;
  animation: pulse 1.35s var(--ease) infinite;
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px var(--line);
}
@keyframes pulse {
  0%, 100% { opacity: .55; transform: scale(.94) }
  50% { opacity: 1; transform: scale(1) }
}

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

.wrap { padding: 0 var(--pad) 40px; max-width: 560px; margin: 0 auto; }
.wrap.enter, .auth.enter { animation: enter .38s var(--spring); }
@keyframes enter {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: none }
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(16,14,12,.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid rgba(61,53,44,.7);
  padding: calc(env(safe-area-inset-top) + 10px) var(--pad) 12px;
  display: flex; align-items: center; gap: 12px;
}
.topbar h1 { font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.01em; flex: 1; }
.topbar .sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 1px; }
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(0,0,0,.35);
}
.iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  background: var(--surface-2); flex: none; border: 1px solid var(--line);
}
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn.is-down, .iconbtn:active { transform: scale(.94); background: var(--surface-3); }

section { margin-top: 22px; }
h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 10px 2px;
}

.card {
  background: linear-gradient(180deg, #221e18, var(--surface) 40%);
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .06);
}

/* ------------------------------------------------------------ level strip */

.level {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 18px; padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, .06);
}
.level .badge {
  width: 54px; height: 54px; border-radius: 16px; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px rgba(0,0,0,.35);
}
.level .badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.level .meta { flex: 1; min-width: 0; }
.level .name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.level .bar {
  height: 7px; border-radius: 99px; background: var(--surface-3); margin-top: 8px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.level .bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--copper-dim), var(--copper) 60%, var(--copper-2));
  border-radius: 99px; transition: width .7s var(--spring);
  box-shadow: 0 0 10px var(--copper-glow);
}
.level .xp { font-size: 12px; color: var(--muted); margin-top: 6px; }
.streak {
  display: flex; flex-direction: column; align-items: center; gap: 1px; flex: none;
  padding: 8px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line);
}
.streak svg { width: 18px; height: 18px; color: var(--copper); fill: currentColor; stroke: none; }
.streak b { font-size: 17px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.streak span { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* -------------------------------------------------------------- pain card */

.pain-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.pain-head strong { font-size: 15px; font-weight: 700; }
.pain-head span { font-size: 12px; color: var(--muted); margin-left: auto; }
.pain-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pain-row > label { font-size: 14px; color: var(--muted); width: 46px; flex: none; font-weight: 600; }
.dots { display: flex; gap: 6px; flex: 1; }
.dots button {
  flex: 1; height: 44px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid transparent; font-size: 14px; color: var(--muted); font-weight: 700;
}
.dots button.on { color: var(--ink); }
.dots button.p1.on { background: #6fae7f; }
.dots button.p2.on { background: #a9b96a; }
.dots button.p3.on { background: #e0a63a; }
.dots button.p4.on { background: #d98a3e; }
.dots button.p5.on { background: #d9584f; color: #fff; }
.dots button.sel { transform: scale(1.06); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px currentColor; }
.dots button.is-down { transform: scale(.94); }
.pain-note { font-size: 12px; color: var(--dim); margin: 12px 0 0; }

/* ------------------------------------------------------------ station map */

.floor { margin-top: 8px; }
.bay {
  background: linear-gradient(180deg, rgba(34,30,24,.55), rgba(16,14,12,.2));
  border: 1px solid var(--line); border-radius: 20px; padding: 12px;
  margin-top: 14px;
}
.bay-label { display: flex; align-items: center; gap: 9px; margin: 0 0 12px 2px; }
.bay-label h2 { margin: 0; color: var(--muted); }
.bay-label i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }

.tile {
  background: linear-gradient(180deg, #2a241c, var(--surface));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; min-height: 102px; justify-content: center; position: relative;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.07), 0 8px 18px rgba(0,0,0,.18);
}
.tile .well {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(0,0,0,.28); border: 1px solid rgba(224,138,60,.18); color: var(--copper);
}
.tile svg { width: 26px; height: 26px; }
.tile span { font-size: 12.5px; line-height: 1.25; color: var(--text); font-weight: 600; }
/* No transform on touch, on purpose. Any scale here fires when a scroll begins
 * on the tile and reads as the tile flinching. Press feedback is a brightness
 * lift plus the copper border, which cannot move layout or paint outside. */
.tile.is-down { filter: brightness(1.12); border-color: rgba(224,138,60,.5); }
.tile.hot {
  border-color: rgba(224,138,60,.55);
  box-shadow: inset 0 1px 0 rgba(224,138,60,.28), 0 0 0 1px rgba(224,138,60,.16), 0 10px 24px rgba(224,138,60,.1);
  /* Static glow. The old infinite box-shadow pulse repainted the whole tile
     every frame, which on a phone reads as the tile breathing while you scroll. */
}
.tile.hot .well { border-color: rgba(224,138,60,.45); background: rgba(224,138,60,.12); }
@keyframes hotglow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(224,138,60,.28), 0 0 0 1px rgba(224,138,60,.14), 0 8px 20px rgba(224,138,60,.08); }
  50% { box-shadow: inset 0 1px 0 rgba(224,138,60,.4), 0 0 0 1px rgba(224,138,60,.32), 0 10px 28px rgba(224,138,60,.16); }
}
.tile .count {
  position: absolute; top: 7px; right: 7px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: var(--copper); color: var(--ink); font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.tile.hero {
  width: 100%;
  min-height: 88px; flex-direction: row; justify-content: flex-start; gap: 14px;
  padding: 14px 16px; text-align: left;
}
.tile.hero .well { width: 52px; height: 52px; border-radius: 16px; }
.tile.hero svg { width: 30px; height: 30px; }
.tile.hero .hero-copy { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.tile.hero span { font-size: 16px; font-weight: 750; }
.tile.hero small { font-size: 12px; color: var(--muted); font-weight: 500; }
.tile.add { border-style: dashed; color: var(--muted); background: transparent; box-shadow: none; min-height: 64px; }
.tile.add .well { background: transparent; border-style: dashed; color: var(--dim); }
.tile.add svg { color: var(--dim); width: 22px; height: 22px; }

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

.rows { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 10px 11px 12px;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.05);
}
.row.fresh { animation: rowin .42s var(--spring); }
@keyframes rowin {
  from { opacity: 0; transform: translateY(-8px) scale(.98) }
  to { opacity: 1; transform: none }
}
.row .ex { flex: 1; min-width: 0; text-align: left; }
.row .ex b { display: block; font-size: 14.5px; font-weight: 650; }
.row .ex small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.row .val { font-size: 15px; font-weight: 700; white-space: nowrap; }
.row .del {
  width: 44px; height: 44px; display: grid; place-items: center; color: var(--dim); flex: none;
  border-radius: 12px;
}
.row .del svg { width: 17px; height: 17px; }
.row .del.is-down, .row .del:active { color: var(--failure); background: rgba(224,90,82,.12); }
.row.pending { opacity: .62; }
.row.pr { border-color: rgba(224,138,60,.7); box-shadow: inset 0 1px 0 rgba(224,138,60,.2), 0 0 0 1px rgba(224,138,60,.12); }

.exrow { padding: 0; gap: 0; overflow: hidden; }
.exrow .exgo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 12px; text-align: left; min-height: 64px;
}
.exrow .exgo.is-down { filter: brightness(1.08); }
.repeat {
  width: 56px; height: 64px; display: grid; place-items: center; flex: none;
  color: var(--copper); border-left: 1px solid var(--line); background: rgba(224,138,60,.08);
}
.repeat svg { width: 20px; height: 20px; }
.repeat.is-down { background: var(--copper); color: var(--ink); }
.exrow .count { position: static; }

.eff { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 7px; letter-spacing: .04em; text-transform: uppercase; }
.eff.easy { background: rgba(111,190,132,.16); color: var(--easy); }
.eff.medium { background: rgba(224,166,58,.16); color: var(--medium); }
.eff.failure { background: rgba(224,90,82,.18); color: var(--failure); }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--ink); flex: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(224,138,60,.25);
}

.empty { text-align: center; color: var(--dim); font-size: 14px; padding: 28px 16px; }
.empty img { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 10px; opacity: .85; }
.empty svg { width: 30px; height: 30px; margin-bottom: 8px; color: var(--line); fill: currentColor; stroke: none; }

/* --------------------------------------------------------------- logger */

.log-head { padding: 6px 0 4px; }
.log-head h3 { font-size: 21px; font-weight: 750; margin: 0; letter-spacing: -.02em; }
.log-head p { font-size: 13px; color: var(--muted); margin: 6px 0 0; }

.stepper {
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 12px 12px; margin-top: 12px;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.06);
}
.stepper .label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); font-weight: 750; text-align: center;
}
.dial { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dial-btn {
  width: 64px; height: 64px; border-radius: 20px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 32px; font-weight: 500; line-height: 1; color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,220,180,.08);
}
.dial-btn.plus { background: rgba(224,138,60,.14); border-color: rgba(224,138,60,.35); color: var(--copper-2); }
.dial-btn.is-down, .dial-btn:active {
  transform: scale(.92);
  background: var(--copper); color: var(--ink); border-color: var(--copper);
}
.stepper .value { flex: 1; text-align: center; min-width: 0; }
.stepper .value input {
  width: 100%; text-align: center; font-size: 44px; font-weight: 800; background: none;
  border: none; color: var(--text); font-variant-numeric: tabular-nums; padding: 0;
  letter-spacing: -.03em; min-width: 0;
}
.stepper .value input:focus { outline: none; color: var(--copper-2); }
.stepper .value input.pop { animation: pop .22s var(--spring); }
@keyframes pop {
  0% { transform: scale(1) }
  40% { transform: scale(1.1) }
  100% { transform: scale(1) }
}
.stepper .unit { font-size: 13px; color: var(--muted); text-align: center; margin-top: -2px; font-weight: 500; }
.jumps { display: flex; gap: 8px; margin-top: 10px; }
.jumps button {
  flex: 1; height: 44px; border-radius: 12px; background: var(--surface-2);
  font-size: 15px; font-weight: 700; color: var(--text); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.jumps button.is-down, .jumps button:active { background: var(--copper); color: var(--ink); border-color: var(--copper); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  flex: 1; min-width: 84px; height: var(--tap); border-radius: 14px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: 14.5px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; gap: 7px;
}
.chip.is-down { transform: scale(.96); }
.chip[aria-pressed="true"] {
  border-color: var(--copper); background: rgba(224,138,60,.14);
  box-shadow: inset 0 0 0 1px rgba(224,138,60,.25);
}
.chip.easy[aria-pressed="true"] { border-color: var(--easy); color: var(--easy); background: rgba(111,190,132,.12); }
.chip.medium[aria-pressed="true"] { border-color: var(--medium); color: var(--medium); background: rgba(224,166,58,.12); }
.chip.failure[aria-pressed="true"] { border-color: var(--failure); color: var(--failure); background: rgba(224,90,82,.12); }
.chip .swatch { width: 18px; height: 18px; border-radius: 6px; border: 1px solid rgba(255,255,255,.22); flex: none; }
.stepper .chips .chip { min-width: 0; height: 48px; font-size: 13px; }

.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; margin-top: 12px; font-size: 15px; font-weight: 600;
}
.toggle button {
  width: 52px; height: 32px; border-radius: 16px; background: var(--surface-3);
  position: relative; border: 1px solid var(--line); flex: none;
}
.toggle button i {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--dim); transition: all .2s var(--spring);
}
.toggle button[aria-pressed="true"] { background: var(--copper-dim); border-color: var(--copper); }
.toggle button[aria-pressed="true"] i { left: 23px; background: var(--copper); }

.logbtn {
  position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); margin-top: 18px;
  width: 100%; height: 62px; border-radius: 18px;
  background: linear-gradient(180deg, var(--copper-2), var(--copper));
  color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: .01em; z-index: 15;
  box-shadow: 0 10px 28px rgba(224,138,60,.32), inset 0 1px 0 rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.logbtn svg { width: 22px; height: 22px; }
.logbtn.is-down, .logbtn:active { transform: scale(.975); filter: brightness(1.05); }
.logbtn.done {
  background: linear-gradient(180deg, #8fd49d, var(--easy));
  box-shadow: 0 10px 28px rgba(111,190,132,.28);
  animation: logok .45s var(--spring);
}
@keyframes logok {
  0% { transform: scale(.96) }
  55% { transform: scale(1.03) }
  100% { transform: scale(1) }
}

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(16,14,12,.92);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--line);
  /* Column count follows however many tabs exist; repeat(4) with five tabs was
     wrapping "You" onto its own row. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
}
.nav button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--dim); font-size: 9.5px; font-weight: 700; padding: 8px 0 6px;
  border-radius: 12px; letter-spacing: .01em; min-width: 0;
}
.nav button svg { width: 21px; height: 21px; }
.nav button.on {
  color: var(--copper);
  background: rgba(224,138,60,.12);
}
.nav button.is-down { transform: scale(.96); }

/* ---------------------------------------------------------------- misc */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 60; background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 14px;
  font-size: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.55); max-width: 90vw;
  animation: rise .28s var(--spring);
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px) scale(.96) } }
.toast button { color: var(--copper); font-weight: 800; font-size: 14px; white-space: nowrap; padding: 8px 4px; }
.toast.pr { border-color: var(--copper); box-shadow: 0 14px 40px rgba(224,138,60,.2); }

.burst { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.burst i { position: absolute; width: 22px; height: 22px; color: var(--copper); }
.burst svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.burst img { width: 100%; height: 100%; object-fit: contain; display: block; }

#fx { position: fixed; inset: 0; z-index: 58; pointer-events: none; overflow: hidden; }
.treat-pop {
  position: absolute; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--copper-2);
  animation: treatup .9s var(--ease) forwards;
  text-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.treat-pop img { width: 28px; height: 18px; object-fit: contain; }
@keyframes treatup {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(.8) }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.06) }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1) }
}
.stamp {
  position: absolute; left: 50%; top: 38%; width: 120px; height: 120px; margin: 0;
  transform: translate(-50%, -50%);
  animation: stamp .7s var(--spring) forwards;
  filter: drop-shadow(0 12px 24px rgba(224,138,60,.35));
}
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-12deg) }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(2deg) }
  70% { opacity: .9; transform: translate(-50%, -50%) scale(1.04) rotate(-1deg) }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(8deg) }
}

.banner {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 11px 13px; font-size: 13px; color: var(--muted); margin-top: 12px;
  display: flex; align-items: center; gap: 9px;
}
.banner svg { width: 17px; height: 17px; color: var(--copper); flex: none; }

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

.auth { max-width: 400px; margin: 0 auto; padding: 0 var(--pad) 40px; }
/* Scoped to .auth on purpose: the station tiles use a `hero` modifier too, and
 * an unscoped .hero was forcing the power cage tile to this banner's height. */
.auth .hero {
  position: relative; margin: 0 calc(var(--pad) * -1) 18px;
  height: min(46vh, 340px); overflow: hidden;
}
.auth .hero img.hero-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  display: block;
}
.auth .hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,14,12,.15) 20%, rgba(16,14,12,.55) 62%, var(--bg) 100%);
}
.auth .logo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: -28px; position: relative; z-index: 1; }
.auth .logo .mark {
  width: 64px; height: 64px; border-radius: 20px; object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 2px var(--line);
  margin-bottom: 4px;
}
.auth .logo b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.auth .logo span { font-size: 14px; color: var(--muted); text-align: center; max-width: 280px; line-height: 1.4; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; margin-left: 2px; font-weight: 600; }
.field input {
  width: 100%; height: var(--tap); border-radius: 14px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text); padding: 0 14px; font-size: 16px;
}
.field input:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(224,138,60,.18); }
.primary {
  width: 100%; height: var(--tap); border-radius: 15px;
  background: linear-gradient(180deg, var(--copper-2), var(--copper));
  color: var(--ink); font-size: 16px; font-weight: 800; margin-top: 8px;
  box-shadow: 0 8px 22px rgba(224,138,60,.28);
}
.primary.is-down, .primary:active { transform: scale(.98); }
.linkbtn { display: block; width: 100%; text-align: center; color: var(--muted);
  font-size: 14px; margin-top: 16px; padding: 10px; }
.linkbtn b { color: var(--copper); }
.err {
  background: rgba(224,90,82,.13); border: 1px solid rgba(224,90,82,.4); color: #f0a7a1;
  border-radius: 12px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 12px;
}

/* --------------------------------------------------------------- history */

.trend { display: flex; align-items: flex-end; gap: 4px; height: 66px; margin-top: 6px; }
.trend div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.trend i { display: block; border-radius: 3px; }
.legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend b { width: 9px; height: 9px; border-radius: 3px; display: block; }

.dayhead { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px 2px; }
.dayhead b { font-size: 14.5px; font-weight: 700; }
.dayhead span { font-size: 12px; color: var(--muted); }
.dayhead .painpill { margin-left: auto; font-size: 11px; color: var(--muted);
  background: var(--surface-2); border-radius: 8px; padding: 3px 8px; }

.prrow {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 14px;
}
.prrow svg { width: 17px; height: 17px; color: var(--copper); fill: currentColor; stroke: none; flex: none; }
.prrow img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; }
.prrow b { flex: 1; font-size: 14px; font-weight: 650; }
.prrow span { font-size: 13.5px; font-weight: 750; color: var(--copper); }
.prrow small { font-size: 11.5px; color: var(--dim); }

.ladder .rung {
  display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 14px;
}
.ladder .rung .dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 2px solid var(--dim); background: transparent;
}
.ladder .rung.done { color: var(--muted); }
.ladder .rung.done .dot { background: var(--copper-dim); border-color: var(--copper-dim); }
.ladder .rung.now { color: var(--copper-2); font-weight: 750; }
.ladder .rung.now .dot {
  background: var(--copper); border-color: var(--copper);
  box-shadow: 0 0 0 4px rgba(224,138,60,.2); transform: scale(1.15);
}
.ladder .rung.todo { color: var(--dim); }

.addform { margin-top: 12px; }
.addform .field { margin-bottom: 10px; }
.addform .chips .chip { min-width: 96px; height: 46px; font-size: 13px; }
.addform .actions { display: flex; gap: 8px; margin-top: 8px; }
.addform .actions .primary { margin-top: 0; }
.addform .ghost {
  height: var(--tap); padding: 0 16px; border-radius: 15px;
  background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; color: var(--muted);
}

.selectrow { display: flex; gap: 8px; margin-top: 10px; }
.selectrow select { flex: 1; height: var(--tap); border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); color: var(--text); padding: 0 12px; font-size: 15px; }

@media (hover: hover) and (pointer: fine) {
  .tile:hover, .chip:hover, .iconbtn:hover, .repeat:hover, .exrow .exgo:hover { filter: brightness(1.06); }
  .nav button:hover { color: var(--muted); }
}

/* ============================================ today, crew and profile ==== */

.hint { font-size: 12.5px; color: var(--dim); margin: 10px 2px 0; line-height: 1.5; }
.hint.center { text-align: center; margin-top: 20px; }
.hint b { color: var(--muted); }

.ghost {
  height: var(--tap); padding: 0 16px; border-radius: 15px;
  background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; color: var(--muted);
}
.ghost.wide { width: 100%; margin-top: 4px; }
.ghost.is-down { transform: scale(.98); background: var(--surface-3); }
.actions { display: flex; gap: 8px; margin-top: 14px; }
.actions .primary, .actions .ghost { flex: 1; margin-top: 0; }

/* ---- stat tiles ---- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.stats.four { grid-template-columns: repeat(3, 1fr); }
.stat {
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.05);
}
.stat b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.stat.accent b { color: var(--copper); }
.stat.accent { border-color: rgba(224,138,60,.35); }

.pr-banner { border-color: rgba(224,138,60,.4); }
.banner img.mini, img.mini { width: 20px; height: 20px; border-radius: 6px; flex: none; object-fit: cover; }

.painline {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: var(--dim);
}
.painline span { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.painline b {
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.painline b.j1, .painline b.j2 { color: var(--easy); border-color: rgba(111,190,132,.35); }
.painline b.j3 { color: var(--medium); border-color: rgba(224,166,58,.35); }
.painline b.j4, .painline b.j5 { color: var(--failure); border-color: rgba(224,90,82,.4); }

.grouphead { display: flex; align-items: center; gap: 10px; }
.grouphead h2 { flex: 1; margin-bottom: 0; }
.repeat.small { width: 38px; height: 38px; border-radius: 11px; }

/* ---- the big empty state ---- */

.bigempty {
  text-align: center; padding: 26px 12px 30px; margin-top: 16px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 20px;
}
.empty-mascot {
  width: 132px; height: 132px; border-radius: 26px; object-fit: cover;
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 1px var(--line);
}
.bigempty h3 { font-size: 19px; font-weight: 750; margin: 16px 0 6px; letter-spacing: -.01em; }
.bigempty p { font-size: 14px; color: var(--muted); margin: 0 auto 18px; max-width: 300px; line-height: 1.55; }
.bigempty .primary { max-width: 260px; margin-left: auto; margin-right: auto; }

/* ---- crew leaderboard ---- */

.board { display: flex; flex-direction: column; gap: 8px; }
.boardrow {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.boardrow.me { border-color: rgba(224,138,60,.45); }
.boardrow.lead { background: linear-gradient(180deg, #2a2318, var(--surface)); }
.boardrow .rank {
  width: 24px; text-align: center; font-weight: 800; font-size: 14px; color: var(--dim); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.boardrow .who { flex: 1; min-width: 0; }
.boardrow .who b { display: block; font-size: 14.5px; font-weight: 650; }
.boardrow .who small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.boardrow .score { text-align: right; flex: none; }
.boardrow .score b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.boardrow .score span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.boardrow .meter {
  position: absolute; left: 0; bottom: 0; height: 2px; background: var(--copper);
  opacity: .5; transition: width .6s var(--spring);
}

.avatar.sm { width: 34px; height: 34px; font-size: 13px; }
.avatar.lg { width: 58px; height: 58px; font-size: 20px; border-radius: 18px; }
img.avatar { object-fit: cover; }

/* ---- pack cards ---- */

.packgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.packcard {
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.packcard.me { border-color: rgba(224,138,60,.45); }
.packcard > b { font-size: 14.5px; font-weight: 700; margin-top: 8px; }
.packcard .breed { font-size: 11.5px; color: var(--copper); font-weight: 600; }
.packcard .tag { font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 3px; line-height: 1.4; }
.packstats { display: flex; gap: 10px; margin-top: 9px; }
.packstats span { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.packstats b { display: block; font-size: 14px; color: var(--text); font-weight: 750; letter-spacing: 0; text-transform: none; }
.packcard .best { font-size: 11px; color: var(--muted); margin-top: 9px; line-height: 1.35; }
.packcard .seen { font-size: 10.5px; color: var(--dim); margin-top: 4px; }

.invite { text-align: center; }
.invite b { display: block; font-size: 15.5px; font-weight: 700; margin: 10px 0 6px; }
.invite p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }
.invite code {
  display: block; margin-top: 12px; font-size: 11.5px; color: var(--dim);
  font-family: var(--font-mono, ui-monospace, monospace); word-break: break-all;
}

/* ---- profile ---- */

.profile {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 20px; padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,220,180,.06);
}
.facebtn { flex: none; padding: 0; border-radius: 20px; }
.facebtn .face {
  display: block; width: 76px; height: 76px; border-radius: 20px; object-fit: cover;
  box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.4);
}
.facebtn .face.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--surface-2); border: 1px dashed var(--line-bright); color: var(--dim);
}
.facebtn .face.empty svg { width: 20px; height: 20px; }
.facebtn .face.empty small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.facebtn.is-down { transform: scale(.96); }
.pmeta { flex: 1; min-width: 0; }
.pmeta h3 { font-size: 18px; font-weight: 750; margin: 0; letter-spacing: -.01em; }
.pmeta .breed { font-size: 12px; color: var(--copper); font-weight: 650; }
.pmeta .tag { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 5px 0 0; line-height: 1.4; }
.pmeta .bar {
  height: 7px; border-radius: 99px; background: var(--surface-3); margin-top: 9px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.pmeta .bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--copper-dim), var(--copper) 60%, var(--copper-2));
  border-radius: 99px; box-shadow: 0 0 10px var(--copper-glow); transition: width .7s var(--spring);
}
.pmeta .xp { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

.profilebits { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bit {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
}
.bit span {
  font-size: 10.5px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; flex: none;
}
.bit b { font-size: 13.5px; font-weight: 600; text-align: right; flex: 1; }

.editor h3 { font-size: 16px; font-weight: 700; margin: 0 0 14px; }
.editor .field { margin-bottom: 12px; }

/* ================================================== the premium layer ==== */

/* ---- ripple: every press leaves a mark where the thumb landed ---- */

button { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(240,160,86,.42), rgba(240,160,86,0) 70%);
  transform: scale(0); opacity: .9; animation: ripple .5s var(--ease) forwards;
}
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}
/* The nav and toggles keep their own feel, no ink needed. */
.nav button .ripple, .toggle button .ripple { display: none; }

/* ---- exercise rows: cards, not text ---- */

.rows.stagger .exrow {
  opacity: 0;
  animation: rowIn .34s var(--spring) forwards;
  animation-delay: calc(var(--i) * 28ms);
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(9px) scale(.985) }
  to { opacity: 1; transform: none }
}

.exrow {
  position: relative;
  background: linear-gradient(180deg, #221e18, var(--surface));
  transition: border-color .18s var(--ease), transform .16s var(--ease), box-shadow .2s var(--ease);
}
.exrow::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--copper), var(--copper-dim));
  opacity: 0; transition: opacity .2s var(--ease);
}
.exrow:has(.exgo.is-down) { transform: scale(.99); }
.exrow:has(.exgo.is-down)::before { opacity: 1; }

.exrow .exgo { min-height: 72px; gap: 12px; }
.exrow .well {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: rgba(224,138,60,.1); border: 1px solid rgba(224,138,60,.22);
  color: var(--copper); transition: all .2s var(--ease);
}
.exrow .well svg { width: 21px; height: 21px; }
.exrow .exgo.is-down .well {
  background: rgba(224,138,60,.2); border-color: rgba(224,138,60,.5); transform: scale(1.06);
}
.exrow .ex b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.exrow .ex .meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pill {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 8px;
  letter-spacing: .02em; white-space: nowrap;
}
.pill.last { background: var(--surface-3); color: var(--muted); }
.pill.best { background: rgba(224,138,60,.14); color: var(--copper-2); }
.pill.today { background: rgba(111,190,132,.14); color: var(--easy); }
.pill.new { background: var(--surface-2); color: var(--dim); }
.exrow .chev { color: var(--dim); flex: none; display: grid; place-items: center; transition: transform .2s var(--ease), color .2s var(--ease); }
.exrow .chev svg { width: 17px; height: 17px; }
.exrow .exgo.is-down .chev { transform: translateX(3px); color: var(--copper); }

.repeat {
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease), transform .14s var(--ease);
}
.repeat::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--copper-glow), transparent 65%);
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
.repeat.is-down { transform: scale(.92); }
.repeat.is-down::after { opacity: 1; }

/* ---- chasing your best ---- */

.chase {
  margin-top: 14px; padding: 11px 13px 12px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 15px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.chase.beat {
  border-color: rgba(224,138,60,.55);
  box-shadow: 0 0 0 1px rgba(224,138,60,.18), 0 6px 22px rgba(224,138,60,.14);
}
.chaselabel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chaselabel span {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  transition: color .3s var(--ease);
}
.chaselabel span svg { width: 15px; height: 15px; }
.chase.beat .chaselabel span { color: var(--copper-2); }
.chaselabel b { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.chaserail {
  height: 5px; border-radius: 99px; background: var(--surface-3); margin-top: 9px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.chaserail i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--copper-dim), var(--copper));
  transition: width .45s var(--spring), background .3s var(--ease);
}
.chase.beat .chaserail i {
  background: linear-gradient(90deg, var(--copper), var(--copper-2), var(--copper));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  box-shadow: 0 0 12px var(--copper-glow);
}
@keyframes shimmer {
  to { background-position: -200% 0 }
}

/* ---- the log button earns its place ---- */

.logbtn {
  /* position stays sticky from the base rule; sticky already contains the sweep */
  overflow: hidden;
  background: linear-gradient(180deg, var(--copper-2), var(--copper) 55%, #c9762f);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(255,190,120,.22) inset;
  letter-spacing: -.01em;
}
.logbtn::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-160%); animation: sweep 3.4s var(--ease) infinite;
}
@keyframes sweep {
  0%, 62% { transform: translateX(-160%) }
  100% { transform: translateX(320%) }
}
.logbtn.is-down { transform: scale(.975); filter: brightness(1.05); }
.logbtn.done {
  background: linear-gradient(180deg, #7cc490, var(--easy));
  animation: logged .5s var(--spring);
}
.logbtn.done::after { display: none; }
@keyframes logged {
  0% { transform: scale(1) }
  35% { transform: scale(1.035) }
  100% { transform: scale(1) }
}
.logbtn svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }

/* ---- dial and jumps get depth ---- */

.dial-btn { transition: transform .12s var(--spring), background .16s var(--ease), border-color .16s var(--ease), box-shadow .2s var(--ease); }
.dial-btn.plus { box-shadow: inset 0 1px 0 rgba(255,220,180,.12), 0 0 18px rgba(224,138,60,.09); }
.dial-btn.is-down, .dial-btn:active { box-shadow: 0 0 24px var(--copper-glow); }
.jumps button { transition: transform .12s var(--spring), background .16s var(--ease), border-color .16s var(--ease); }
.jumps button.is-down, .jumps button:active { transform: scale(.94); box-shadow: 0 0 18px var(--copper-glow); }
.stepper .value input.pop { animation: popBig .26s var(--spring); }
@keyframes popBig {
  0% { transform: scale(1) }
  38% { transform: scale(1.13); text-shadow: 0 0 22px var(--copper-glow) }
  100% { transform: scale(1); text-shadow: none }
}
.stepper { transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.stepper:focus-within {
  border-color: rgba(224,138,60,.45);
  box-shadow: inset 0 1px 0 rgba(255,220,180,.06), 0 0 0 1px rgba(224,138,60,.15);
}

.chip { transition: transform .13s var(--spring), background .18s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease), color .18s var(--ease); }
.chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(224,138,60,.25), 0 0 18px rgba(224,138,60,.14); }
.chip.easy[aria-pressed="true"] { box-shadow: 0 0 18px rgba(111,190,132,.18); }
.chip.failure[aria-pressed="true"] { box-shadow: 0 0 18px rgba(224,90,82,.2); }

/* ---- station tiles carry their own artwork ---- */

.tile.art {
  padding: 0; min-height: 122px;
  align-items: stretch; justify-content: flex-end;
  overflow: hidden;
}
.tile.art picture { position: absolute; inset: 0; z-index: 0; display: block; }
/* No transform and no transition on the artwork on touch devices, at all.
 * iOS re-rasterises transformed images inside rounded overflow-hidden tiles
 * during scroll, which paints them at the wrong scale for a frame and then
 * snaps them back: the "image gets big then shrinks" glitch. Desktop gets its
 * zoom back inside the hover media query, where scroll physics don't apply. */
.tileart {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.tile.art .scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16,14,12,.04) 26%, rgba(16,14,12,.55) 62%,
    rgba(16,14,12,.88) 84%, rgba(16,14,12,.96));
}
/* The drawn icon steps aside once real art is behind it. */
.tile.art .well { display: none; }
.tile.art > span:not(.scrim):not(.count) {
  position: relative; z-index: 2;
  padding: 0 11px 11px; text-align: left; width: 100%;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
.tile.art .count { z-index: 3; }
.tile.art.is-down { filter: none; }
/* Deliberately no zoom on the artwork here. Touching a tile to begin a scroll
 * fires the pressed state, and a half-second zoom in plus a half-second zoom
 * back out reads as the tile randomly growing and shrinking mid-scroll. The
 * tile's own instant scale is the press feedback; the zoom is hover-only. */
.tile.art.is-down .tileart { filter: brightness(1.1); }
.tile.art.hot { border-color: rgba(224,138,60,.5); }
.tile.art.hot .tileart { filter: saturate(1.12) brightness(1.06); }

.tile.hero.art { min-height: 196px; }
.tile.hero.art .hero-copy {
  position: relative; z-index: 2; padding: 0 14px 14px; width: 100%;
  align-items: flex-start; text-align: left;
}
.tile.hero.art .hero-copy span {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.tile.hero.art .hero-copy small { text-shadow: 0 1px 8px rgba(0,0,0,.9); }

/* ---- a logged set is tappable to edit ---- */

.setrow { padding: 0; gap: 0; overflow: hidden; }
.setrow .setgo {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; text-align: left; min-height: 58px;
}
.setrow .setgo .ex { flex: 1; min-width: 0; }
.setrow .editmark { color: var(--dim); display: grid; place-items: center; flex: none; transition: color .2s var(--ease), transform .2s var(--ease); }
.setrow .editmark svg { width: 15px; height: 15px; }
.setrow .setgo.is-down { background: rgba(224,138,60,.07); }
.setrow .setgo.is-down .editmark { color: var(--copper); transform: scale(1.1); }
.setrow .del { border-left: 1px solid var(--line); height: 58px; width: 46px; border-radius: 0; }

/* ---- finishing the day ---- */

.primary.finish {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 8px;
}
.primary.finish svg { width: 19px; height: 19px; }
.card.wrapped { text-align: center; border-color: rgba(224,138,60,.4); }
.card.wrapped b { display: block; font-size: 16px; font-weight: 750; margin: 10px 0 6px; }
.card.wrapped p { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }

/* ---- history: lifts, days, and the plate chart ---- */

.segmented {
  display: flex; gap: 4px; padding: 4px; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.segmented button {
  flex: 1; height: 42px; border-radius: 11px; font-size: 14px; font-weight: 700;
  color: var(--muted); transition: background .18s var(--ease), color .18s var(--ease);
}
.segmented button.on { background: var(--surface-3); color: var(--copper-2); box-shadow: inset 0 1px 0 rgba(255,220,180,.08); }

.liftrow { padding: 0; gap: 0; overflow: hidden; }
.liftrow .exgo { min-height: 68px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; width: 46px; flex: none; }
.spark i { flex: 1; background: linear-gradient(180deg, var(--copper), var(--copper-dim)); border-radius: 1px; opacity: .8; }
.spark i:last-child { background: var(--copper-2); opacity: 1; }
.trend-up { color: var(--easy); font-size: 12px; font-weight: 800; flex: none; }
.trend-down { color: var(--failure); font-size: 12px; font-weight: 800; flex: none; }
.trend-flat { color: var(--dim); font-size: 12px; font-weight: 800; flex: none; }

.daystats { display: flex; gap: 14px; margin: 0 2px 9px; }
.daystats span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.daystats b { color: var(--copper-2); font-size: 13px; letter-spacing: 0; }
.painpill.done { background: rgba(111,190,132,.15); color: var(--easy); }
.painpill.pr { background: rgba(224,138,60,.16); color: var(--copper-2); }

/* Each session is a loaded sleeve: taller stack, heavier day. */
.platechart {
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 12px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.plateplot {
  position: relative; display: flex; align-items: flex-end; gap: 8px;
  min-height: 176px; min-width: min-content; padding-top: 18px;
}
.sleeve {
  flex: 1 0 34px; min-width: 34px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 5px; padding: 0;
  height: 176px; background: none; border: none;
}
.sleeve .stack {
  width: 100%; height: var(--h); border-radius: 5px; position: relative;
  display: flex; align-items: flex-start; justify-content: center;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.34) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--copper-2), var(--copper) 40%, var(--copper-dim));
  box-shadow: inset 0 0 0 1px rgba(255,200,140,.25), 0 4px 14px rgba(0,0,0,.4);
  animation: grow .5s var(--spring) both;
  /* Capped: with two dozen sessions an uncapped stagger leaves the last bars
     sitting at zero height for over a second. */
  animation-delay: calc(min(var(--i), 8) * 40ms);
  transform-origin: bottom;
}
@keyframes grow { from { transform: scaleY(0); opacity: .4 } to { transform: scaleY(1); opacity: 1 } }
.sleeve .stack b {
  font-size: 10.5px; font-weight: 800; color: var(--ink); margin-top: -16px;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255,220,180,.25);
}
.sleeve.pr .stack {
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #ffd9a0, var(--copper-2) 45%, var(--copper));
  box-shadow: inset 0 0 0 1px rgba(255,225,180,.5), 0 0 18px var(--copper-glow), 0 4px 14px rgba(0,0,0,.4);
}
.sleeve.pr .stack::after {
  content: ''; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--copper-2);
  box-shadow: 0 0 10px var(--copper-2);
}
.sleeve .tick { font-size: 9.5px; color: var(--dim); font-weight: 600; white-space: nowrap; }
.sleeve.is-down .stack { filter: brightness(1.15); }
.bestline {
  position: absolute; left: 0; right: 0; height: 0; z-index: 2; pointer-events: none;
  border-top: 1px dashed rgba(224,138,60,.5);
}
.bestline span {
  position: absolute; right: 0; top: -15px; font-size: 9.5px; font-weight: 700;
  color: var(--copper-2); background: var(--bg); padding: 0 5px; border-radius: 5px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ---- coach ---- */

.coach {
  display: flex; align-items: flex-start; gap: 11px; margin-top: 12px;
  padding: 12px 13px; border-radius: 15px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line);
  animation: enter .4s var(--spring);
}
.coach.warn { border-color: rgba(224,166,58,.45); background: linear-gradient(180deg, #27211a, var(--surface)); }
.coach.go { border-color: rgba(111,190,132,.4); background: linear-gradient(180deg, #1c2419, var(--surface)); }
.coachmark {
  width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(224,166,58,.15); color: var(--medium);
}
.coach.go .coachmark { background: rgba(111,190,132,.15); color: var(--easy); }
.coachmark svg { width: 17px; height: 17px; }
.coach p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text); padding-top: 5px; }

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

.rest {
  margin-top: 12px; padding: 10px 12px; border-radius: 15px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .3s var(--ease);
}
.rest.due { border-color: rgba(224,138,60,.55); animation: due 1.6s ease-in-out infinite; }
@keyframes due { 0%,100% { box-shadow: 0 0 0 0 rgba(224,138,60,0) } 50% { box-shadow: 0 0 0 4px rgba(224,138,60,.15) } }
.restrow { display: flex; align-items: center; gap: 12px; }
.ring { width: 36px; height: 36px; border-radius: 50%; flex: none; position: relative;
  background: conic-gradient(var(--copper) var(--p, 0%), var(--surface-3) 0); }
.ring i { position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.ring i::after { content: ''; }
.rest.due .ring { background: conic-gradient(var(--copper-2) 100%, var(--copper-2) 0); }
.restlabel { flex: 1; min-width: 0; line-height: 1.15; }
.restlabel b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.restlabel small { font-size: 11px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.restset { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); flex: none; }
.restset svg { width: 18px; height: 18px; }
.restpick { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.toggle.small { padding: 11px 12px; margin-top: 8px; font-size: 13.5px; background: var(--surface-2); }
.toggle.small span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle.small small { font-size: 11px; color: var(--dim); font-weight: 500; }
.toggle.off { opacity: .55; }
.restpick .chip { min-width: 0; flex: 1; height: 42px; font-size: 13px; }

/* ---- bodyweight on the daily check ---- */

.bwrow { align-items: center; }
.bwinput {
  width: 96px; height: 42px; border-radius: 11px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); font-size: 16px; font-weight: 700;
  padding: 0 12px; text-align: center; font-variant-numeric: tabular-nums;
}
.bwinput:focus { outline: none; border-color: var(--copper); }
.bwinput::placeholder { color: var(--dim); font-weight: 600; }
.bwnote { font-size: 12px; color: var(--dim); }

/* ---- templates: a nudge, not a schedule ---- */

.tplstrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tplstrip::-webkit-scrollbar { display: none; }
.tplchip {
  flex: none; height: 40px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: all .2s var(--ease);
}
.tplchip small { font-size: 10.5px; color: var(--dim); font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }
.tplchip.on { border-color: var(--copper); color: var(--copper-2); background: rgba(224,138,60,.12); box-shadow: 0 0 16px rgba(224,138,60,.14); }
.tplchip.on small { background: rgba(224,138,60,.2); color: var(--copper-2); }
.tplchip svg { width: 15px; height: 15px; }
.tplchip.ghostchip { width: 40px; padding: 0; justify-content: center; border-style: dashed; }
.tplhint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 12px; }
.tplhint svg { width: 16px; height: 16px; color: var(--copper); }
button.inline { color: var(--copper); font-weight: 700; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.tile.suggested { border-color: rgba(224,138,60,.55); box-shadow: 0 0 0 1px rgba(224,138,60,.2), 0 0 24px rgba(224,138,60,.14); }
.tile.suggested::after {
  content: ''; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--copper-2); box-shadow: 0 0 10px var(--copper-2); z-index: 3;
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---- coach tab ---- */

.coachcard {
  display: flex; gap: 12px; padding: 13px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 16px;
}
.coachcard .thumb {
  width: 58px; height: 58px; border-radius: 14px; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px var(--line);
}
.coachcard .cbody { flex: 1; min-width: 0; }
.ctag { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.t-build .ctag { color: var(--copper-2); }
.t-gentle .ctag { color: var(--medium); }
.t-warn .ctag { color: var(--failure); }
.t-fav .ctag { color: var(--easy); }
.coachcard > .cbody > b { display: block; font-size: 15.5px; font-weight: 750; margin-top: 2px; }
.coachcard p { margin: 5px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.coachcard .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.cactions { display: flex; gap: 8px; margin-top: 11px; align-items: center; }
.cactions .copen { flex: 1; height: 44px; margin-top: 0; border-radius: 12px; font-size: 14px; }
.cvote {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--muted);
}
.cvote svg { width: 19px; height: 19px; }
.cvote.on { color: var(--easy); border-color: rgba(111,190,132,.5); background: rgba(111,190,132,.12); }
.cvote.is-down { transform: scale(.92); }
.t-build.coachcard { border-color: rgba(224,138,60,.4); }
.t-warn.coachcard { border-color: rgba(224,90,82,.4); }

/* ---- last session, in full, on the logger ---- */

.lastsesh {
  margin-top: 12px; padding: 11px 13px;
  background: linear-gradient(180deg, #221e18, var(--surface));
  border: 1px solid var(--line); border-radius: 15px;
}
.lastsesh-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lastsesh-head span { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lastsesh-head b { font-size: 12px; color: var(--copper-2); font-weight: 700; white-space: nowrap; }
.seshsets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pill.prpill { background: rgba(224,138,60,.16); color: var(--copper-2); }

/* ---- the wide warm-up tile ---- */

.tile.wide.art { min-height: 112px; }
.tile.wide.art .hero-copy {
  position: relative; z-index: 2; padding: 0 13px 12px; width: 100%;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
}
.tile.wide.art .hero-copy span {
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.tile.wide.art .hero-copy small { font-size: 11.5px; color: var(--muted); text-shadow: 0 1px 8px rgba(0,0,0,.9); }

/* ---- search ---- */

.searchbtn { color: var(--copper); }
.searchbar {
  position: relative; display: flex; align-items: center; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.searchbar:focus-within { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(224,138,60,.14); }
.searchicon { position: absolute; left: 14px; color: var(--dim); display: grid; place-items: center; pointer-events: none; }
.searchicon svg { width: 19px; height: 19px; }
#searchbox {
  flex: 1; height: 54px; background: none; border: none; color: var(--text);
  font-size: 17px; font-weight: 600; padding: 0 48px 0 44px; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
#searchbox::-webkit-search-cancel-button { display: none; }
#searchbox:focus { outline: none; }
#searchbox::placeholder { color: var(--dim); font-weight: 500; }
.clearq { position: absolute; right: 8px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--muted); }
.clearq svg { width: 16px; height: 16px; }
.search .rows { margin-top: 12px; }
.search .exrow { animation: none; opacity: 1; }
mark { background: rgba(224,138,60,.28); color: var(--copper-2); border-radius: 3px; padding: 0 1px; }

/* ---- hover, for the desk ---- */

@media (hover: hover) and (pointer: fine) {
  .exrow:hover {
    border-color: var(--line-bright); transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,.32);
  }
  .exrow:hover::before { opacity: .7; }
  .exrow:hover .well { background: rgba(224,138,60,.16); border-color: rgba(224,138,60,.4); }
  .exrow:hover .chev { transform: translateX(3px); color: var(--copper); }
  .tile:hover {
    transform: translateY(-2px); border-color: rgba(224,138,60,.4);
    box-shadow: 0 10px 26px rgba(0,0,0,.36), 0 0 0 1px rgba(224,138,60,.12);
  }
  .tile:hover .well { background: rgba(224,138,60,.16); border-color: rgba(224,138,60,.45); }
  .tileart { transition: transform .25s var(--ease), filter .18s var(--ease); }
  .tile.art:hover .tileart { transform: scale(1.08); filter: brightness(1.1) saturate(1.08); }
  .dial-btn:hover { border-color: rgba(224,138,60,.5); box-shadow: 0 0 20px rgba(224,138,60,.16); }
  .jumps button:hover, .chip:hover { border-color: rgba(224,138,60,.45); }
  .repeat:hover::after { opacity: .7; }
  .logbtn:hover { filter: brightness(1.07); box-shadow: 0 10px 30px rgba(224,138,60,.3); }
  .primary:hover { filter: brightness(1.07); }
  .ghost:hover { border-color: var(--line-bright); color: var(--text); }
  .boardrow:hover, .packcard:hover, .prrow:hover { border-color: var(--line-bright); }
  .iconbtn:hover { border-color: rgba(224,138,60,.4); color: var(--copper); }
  .dots button:hover { border-color: var(--line-bright); }
  .facebtn:hover .face { box-shadow: 0 0 0 1px rgba(224,138,60,.5), 0 8px 24px rgba(0,0,0,.45); }
  .stat:hover { border-color: var(--line-bright); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile.hot { animation: none; }
  .rows.stagger .exrow { opacity: 1; }
}

/* Warm-up sets: present and countable, but visually secondary so a day's work
   still reads at a glance. They never count toward bests, prefill or the coach. */
.setrow.warmup .setgo .ex b { color: var(--muted); font-weight: 600; }
.setrow.warmup .setgo .ex small { color: var(--dim); }
.setrow.warmup { opacity: .82; }
.warmup-toggle span { color: var(--muted); }