/* Beacon — base.css (Lane B)
   Design tokens + shared components, lifted from ORIGINAL-beacon-fitness.html
   (Ollie's chalkboard/gold language — :root tokens verbatim).
   Lane C's css/views.css should mostly need layout-only rules on top. */

:root{
  --board:#1c2521;
  --panel:#222f28;
  --panel-raised:#28362e;
  --line: rgba(238,234,224,0.09);
  --chalk:#eeeae0;
  --chalk-dim:#95a498;
  --gold:#f2c14e;
  --danger:#e2543c;
  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(238,234,224,0.05), transparent 45%),
    radial-gradient(ellipse at 90% 0%, rgba(242,193,78,0.04), transparent 40%),
    var(--board);
  color:var(--chalk);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
}
input, textarea{ -webkit-user-select:auto; user-select:auto; }
.mono{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.hidden{ display:none !important; }

/* ---------- app shell ---------- */
#app{ position:fixed; inset:0; display:flex; flex-direction:column; }

header.top{
  padding: calc(14px + var(--safe-top)) 18px 12px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand .mark{ font-weight:800; font-size:20px; letter-spacing:0.06em; text-transform:uppercase; }
.brand .mark span{ color:var(--gold); }
.brand .sub{ font-size:11px; color:var(--chalk-dim); letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;}
.whoami{ display:flex; align-items:center; gap:8px; }
.avatar{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#161d19;
  border: 2px solid rgba(0,0,0,0.15);
  background:var(--gold);
  flex-shrink:0;
}
.avatar.lg{ width:48px; height:48px; font-size:17px; }
.sync-badge{
  font-size:10px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase;
  color:#241a06; background:var(--gold); border-radius:999px; padding:4px 9px;
}

main#view{ flex:1; overflow-y:auto; padding: 14px 16px calc(90px + var(--safe-bottom)); }

/* Login screen: no header/tabbar chrome */
body.no-chrome header.top,
body.no-chrome nav.tabbar{ display:none; }
body.no-chrome main#view{ padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); }

/* ---------- tabbar ---------- */
nav.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; border-top:1px solid var(--line);
  background: rgba(28,37,33,0.94); backdrop-filter: blur(10px);
  padding-bottom: var(--safe-bottom);
  z-index:40;
}
nav.tabbar button{
  flex:1; background:none; border:none; color:var(--chalk-dim);
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; padding:12px 0 10px; display:flex; flex-direction:column;
  align-items:center; gap:4px;
}
nav.tabbar button.active{ color:var(--gold); }
nav.tabbar svg{ width:20px; height:20px; }

/* ---------- typography / layout bits ---------- */
h2.section-title{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--chalk-dim); margin: 4px 0 10px; font-weight:700;}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px;
}

.empty{ text-align:center; padding:36px 16px; color:var(--chalk-dim); font-size:14px; line-height:1.5; }
.empty b{ color:var(--chalk); }
.center-load{ display:flex; align-items:center; justify-content:center; height:60vh; color:var(--chalk-dim); font-size:14px;}

/* ---------- chips (roster row, quick filters) ---------- */
.roster-row{
  display:flex; gap:8px; padding:10px 14px; overflow-x:auto;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.roster-row::-webkit-scrollbar{ display:none; }
.chip-row{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 8px; }
.chip-row::-webkit-scrollbar{ display:none; }
.chip{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; background:var(--panel);
  border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--chalk-dim);
  font-family:inherit;
}
.chip.active{ background:var(--panel-raised); color:var(--chalk); border-color: rgba(238,234,224,0.18); }
.chip.gold{ background:var(--gold); color:#241a06; border-color:var(--gold); }
.chip .dot{ width:20px; height:20px; border-radius:50%; flex-shrink:0; }
.chip.add{ color:var(--chalk-dim); border-style:dashed; }
button.chip{ cursor:pointer; }

/* ---------- forms ---------- */
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11px; color:var(--chalk-dim); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; font-weight:700;}
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=date],
input[type=time],
input[type=tel],
textarea{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-raised); color:var(--chalk); font-size:16px; font-family:inherit;
}
textarea{ min-height:72px; resize:vertical; }
input:focus, textarea:focus, select.native:focus{ outline:2px solid var(--gold); outline-offset:1px; }
input::placeholder, textarea::placeholder{ color:var(--chalk-dim); opacity:0.7; }
input[type=date], input[type=time]{ color-scheme:dark; }

select.native{
  width:100%; padding:12px 13px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-raised); color:var(--chalk); font-size:15px; font-family:inherit; font-weight:700;
}

/* ---------- steppers ---------- */
.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{
  width:44px; height:44px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel-raised); color:var(--chalk); font-size:20px; font-weight:700;
  font-family:inherit; flex-shrink:0;
}
.stepper button:active{ background: rgba(238,234,224,0.12); }
.stepper .val{ flex:1; text-align:center; font-size:22px; font-weight:800; }
.stepper .val .unit{ font-size:12px; color:var(--chalk-dim); font-weight:600; margin-left:3px;}

/* ---------- RPE buttons ---------- */
.rpe-row{ display:flex; gap:6px; flex-wrap:wrap; }
.rpe-btn{
  flex:1; min-width:30px; padding:10px 0; text-align:center; border-radius:8px;
  border:1px solid var(--line); background:var(--panel-raised); color:var(--chalk-dim);
  font-weight:700; font-size:13px; font-family:inherit;
}
.rpe-btn.active{ background:var(--gold); color:#241a06; border-color:var(--gold); }

/* ---------- toggle ---------- */
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:2px 0 4px; }
.toggle{ width:44px; height:26px; border-radius:999px; background:var(--panel-raised); border:1px solid var(--line); position:relative; flex-shrink:0;}
.toggle .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--chalk-dim); transition: left .15s;}
.toggle.on{ background: rgba(242,193,78,0.25); border-color:var(--gold);}
.toggle.on .knob{ left:20px; background:var(--gold); }

/* ---------- buttons ---------- */
.btn-primary{
  width:100%; padding:15px; border-radius:12px; border:none; font-family:inherit;
  font-weight:800; font-size:15px; letter-spacing:0.02em; text-transform:uppercase;
  color:#161d19; background:var(--gold);
}
.btn-primary:active{ transform: scale(0.98); }
.btn-primary:disabled{ opacity:0.5; }
.btn-ghost{ flex:1; padding:13px; border-radius:12px; background:none; border:1px solid var(--line); color:var(--chalk-dim); font-weight:700; font-family:inherit;}
.btn-danger{ flex:1; padding:13px; border-radius:12px; background:none; border:1px solid var(--danger); color:var(--danger); font-weight:700; font-family:inherit;}
.row-btns{ display:flex; gap:10px; }

/* ---------- exercise / set cards ---------- */
.ex-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; overflow:hidden;}
.ex-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; }
.ex-name{ font-weight:800; font-size:15px; }
.ex-name .bm{ font-size:9px; background:var(--gold); color:#241a06; padding:2px 6px; border-radius:5px; margin-left:7px; letter-spacing:0.05em; vertical-align:middle;}
.tally-wrap{ display:flex; gap:8px; padding: 0 14px 12px; flex-wrap:wrap; }
.tally-group{ position:relative; width:26px; height:20px; }
.stroke{ position:absolute; bottom:0; width:3px; height:18px; border-radius:2px; }
.stroke5{ position:absolute; width:26px; height:3px; top:8px; left:0; border-radius:2px; transform-origin:center; }
.set-list{ border-top:1px solid var(--line); }
.set-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 14px; font-size:13px; }
.set-row + .set-row{ border-top:1px solid var(--line); }
.set-row .info{ color:var(--chalk-dim); }
.set-row .info b{ color:var(--chalk); font-weight:700; }
.set-row .pb-badge{ color:var(--gold); font-weight:800; font-size:11px; margin-left:6px; }
.set-row .del{ background:none; border:none; color:var(--chalk-dim); font-size:18px; padding:2px 6px; }

/* ---------- history ---------- */
.day-block{ margin-bottom:18px; }
.day-title{ font-weight:800; font-size:14px; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.day-title .date-dim{ color:var(--chalk-dim); font-weight:600; font-size:12px; }

/* ---------- trends ---------- */
.trend-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px;}
.trend-best{ font-size:26px; font-weight:800; }
.trend-best .u{ font-size:13px; color:var(--chalk-dim); font-weight:600;}
svg.chart{ width:100%; height:150px; display:block; }
.legend{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.legend .item{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--chalk-dim); font-weight:600;}
.legend .sw{ width:10px; height:10px; border-radius:3px; }

/* ---------- modal (bottom sheet) ---------- */
.modal-back{ position:fixed; inset:0; background:rgba(10,13,11,0.72); display:flex; align-items:flex-end; z-index:50; }
.modal{
  background:var(--panel); width:100%; border-radius:20px 20px 0 0;
  padding:20px 18px calc(20px + var(--safe-bottom)); border-top:1px solid var(--line);
  max-height:85vh; overflow-y:auto;
}
.modal h3{ margin:0 0 14px; font-size:16px; }
.modal input[type=text]{ margin-bottom:10px; }
.swatches{ display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.swatches .sw{ width:32px; height:32px; border-radius:50%; border:2px solid transparent; }
.swatches .sw.sel{ border-color:var(--chalk); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom: calc(100px + var(--safe-bottom)); transform:translateX(-50%);
  background:var(--panel-raised); border:1px solid var(--line); padding:10px 16px; border-radius:999px;
  font-size:13px; font-weight:700; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,0.4);
  max-width:86vw; text-align:center;
}

/* ---------- "More" sheet (shell) ---------- */
.more-list{ display:flex; flex-direction:column; gap:8px; }
.more-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--panel-raised); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-family:inherit; color:var(--chalk); text-align:left; width:100%;
}
.more-item:active{ background: rgba(238,234,224,0.12); }
.more-label{ font-weight:800; font-size:14px; }
.more-sub{ font-size:12px; color:var(--chalk-dim); }