/* Lift Log design system — the single source of truth for tokens and every
   component the shared view modules (public/js/**) render. Loaded by BOTH
   templates: index.html (mobile) uses it as-is, desktop.html loads it first and
   then css/desktop.css, which overrides layout only. Component styling changes
   belong HERE so both platforms get them; put nothing platform-specific in
   this file. */
:root {
  --ll-bg: #f8f4ef;
  --ll-surface: #fffdf9;
  --ll-surface-2: #ece6db;
  --ll-line: #e6ddcf;
  --ll-border: #d8d0bc;
  --ll-ink: #33302b;
  --ll-ink-soft: #76716a;
  --ll-ink-faint: #a8a299;
  --ll-accent: #b0714e;
  --ll-accent-soft: #f8f3e9;
  --ll-accent-ink: #9c5f3d;
  --ll-on-accent: #ffffff;
  --ll-pr: #9c5f3d;
  --ll-pr-soft: #f0e4d8;
  --ll-danger: #a8503f;
  --ll-badge-custom: #efe6d8;
  --ll-hint-ink: #a8503f;
  --ll-suggestion-ink: #a8503f;
  --ll-zone-hint-ink: #76716a;
  --ll-scrim: rgba(0,0,0,.4);
  --ll-tabbar-bg: rgba(245,241,234,.88);
  --ll-hero-bg: #211f1c;
  --ll-on-dark: #fdf9f2;
  --ll-on-dark-soft: #fff5e6;
  --ll-on-dark-faint: #fff4df;
  --zone-max-effort: #9a3324;
  --zone-dynamic-effort: #b0714e;
  --zone-hypertrophy: #b8813a;
  --zone-metabolic: #93893f;
  --zone-endurance: #5f8a76;
  --ll-radius: 22px;
  --ll-radius-sm: 16px;
  --ll-radius-field: 14px;
  --ll-radius-badge: 16px;
  --ll-radius-sheet: 28px;
  --ll-radius-seg: 12px;
  --ll-radius-seg-item: 9px;
  --ll-fs-brand: 45px;
  --ll-fs-h1: 30px;
  --ll-fs-hero-title: 23px;
  --ll-fs-stat: 32px;
  --ll-fs-eyebrow: 13px;
  --ll-fw-head: 650;
  --ll-font-sans: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ll-font-display: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ll-head-align: left;
  --ll-hero-align: left;
  --ll-hero-btn-mi: 0;
  --ll-stat-align: left;
  --ll-radius-btn: 999px;
  --ll-btn-pad: 11px 16px;
  --ll-btn-fs: 13.5px;
  --ll-btn-fw: 700;
  --ll-hero-btn-bg: #fdf9f2;
  --ll-hero-btn-ink: #33302b;
  --ll-hero-btn-pad: 10px 18px;
  --ll-icon-nav: 22px;
  --ll-icon-stroke: 1.5;
  --ll-badge-size: 38px;
  --ll-iconbtn-size: 44px;
  --ll-cal-cell: 38px;
  --ll-cal-dot: 4px;
  --ll-radius-cal: 50%;
  /* Three distinct button roles, per the 2b handoff: primary tint, neutral
     tint, destructive tint. They must differ by BACKGROUND, not just ink —
     sharing one background collapses them into the same block and leaves
     "Start" / "Edit" / "Delete" indistinguishable where they sit in a row.
     Inks are darkened from the handoff's #9c5f3d / #a8503f, which land at
     4.08:1 and 4.27:1 on their tints — under AA for 13.5px bold label text. */
  --ll-btn-bg: #f0e4d8;
  --ll-btn-ink: #8d5436;
  --ll-btn-sec-bg: #f0e4d8;
  --ll-btn-sec-ink: #8d5436;
  --ll-btn-ghost-bg: #ece6db;
  --ll-btn-ghost-ink: #33302b;
  --ll-btn-danger-bg: #f5e0dc;
  --ll-btn-danger-ink: #9d4a3a;
  --ll-iconbtn-bg: #ece6db;
  --ll-iconbtn-ink: #76716a;
  --ll-seg-ink: #76716a;
  --ll-seg-on-bg: #fffdf9;
  --ll-seg-on-ink: #33302b;
  --ll-segmini-bg: #fffdf9;
  --ll-segmini-ink: #76716a;
  --ll-segmini-on-bg: #33302b;
  --ll-segmini-on-ink: #ffffff;
  /* The neutral pill ("Jul 24", a program's status) has to read as muted
     against the copper status pills ("Today", a PR) it sits beside — copper
     ink on the neutral tint made every pill look like the same alert. */
  --ll-pill-bg: #ece6db;
  --ll-pill-ink: #6b6259;
  --ll-pill-green-bg: #f0e4d8;
  --ll-pill-green-ink: #8d5436;
  --ll-pill-amber-bg: #f0e4d8;
  --ll-pill-amber-ink: #8d5436;
  --ll-on-dark-line: #2a2a2a;
  --ll-on-dark-muted: #666666;
  --ll-chart-warn: #d99a1b;
  --ll-font-label: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ll-fw-label: 700;
  --ll-track-eyebrow: .12em;
  --ll-track-label: .04em;
  --ll-track-head: -.02em;
  --ll-fs-sub: 12.5px;
  --ll-fs-label: 14px;
  --ll-fs-setlabel: 11.5px;
  --ll-fs-caption: 12px;
  --ll-fs-tiny: 13px;
  --ll-fs-stat-label: 11.5px;
  --ll-fs-empty: 16px;
  --ll-fs-empty-art: 38px;
  --ll-fs-rowtitle: 17px;
  --ll-fs-rowtitle-sm: 15.5px;
  --ll-fs-cardtitle: 18px;
  --ll-fw-rowtitle: 650;
  --ll-fs-pill: 12px;
  --ll-fw-pill: 600;
  --ll-pill-pad: 4px 10px;
  --ll-fs-tab: 11.5px;
  --ll-fs-badge: 19px;
  --ll-fs-iconbtn: 20px;
  --ll-fs-sheet-title: 23px;
  --ll-fs-page-title: 18px;
  --ll-fs-toast: 15.5px;
  --ll-fs-seg: 15px;
  --ll-fs-seg-mini: 14px;
  --ll-fs-tagline: 16px;
  --ll-fs-cal-day: 14.5px;
  --ll-fs-cal-dow: 12px;
  --ll-fs-hero-sub: 13.5px;
  --ll-fs-hero-stat: 26px;
  --ll-fs-hero-stat-label: 11px;
  --ll-fs-nudge: 13px;
  --ll-fs-input: 16px;
  --ll-fs-setnum: 15.5px;
  --ll-item-pad: 13px 0;
  --ll-swipe-w: 85px;
  --ll-ss-badge: 29px;
  --ll-card-pad: 19px;
  --ll-card-gap: 8px;
  --ll-gutter: 16px;
  --ll-ss-edge: 6px;
  --ll-tab-h: 76px;
  --ll-app-max: 480px;
  --ll-radius-pill: 999px;
  --ll-radius-round: 999px;
  --ll-shadow-pop: 0 1px 3px rgba(80,60,30,.08);
  --ll-shadow-fab: 0 6px 18px rgba(80,60,30,.22);
  --ll-safe-b: env(safe-area-inset-bottom, 0px);
  --ll-safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--ll-bg);
  color: var(--ll-ink);
  font-family: var(--ll-font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { max-width: var(--ll-app-max); margin: 0 auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea {
  font-family: inherit; font-size: var(--ll-fs-input); color: var(--ll-ink);
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius-sm); padding: 13px 14px; width: 100%;
  outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--ll-accent); }
input[type="date"] {
  display: block; width: 100%; min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.app { min-height: 100vh; min-height: 100dvh; padding-top: var(--ll-safe-t); }

.screen { display: none; padding: 0 16px calc(var(--ll-tab-h) + var(--ll-safe-b) + 24px); animation: fade .25s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Page header — eyebrow + large name, Apple Fitness style */
.head { padding: 18px 2px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; text-align: var(--ll-head-align); }
.head h1 { font-family: var(--ll-font-display); font-size: var(--ll-fs-h1); font-weight: var(--ll-fw-head); letter-spacing: var(--ll-track-head); margin: 0; line-height: 1.05; }
.head .sub { color: var(--ll-ink-faint); font-family: var(--ll-font-label); font-size: var(--ll-fs-sub); font-weight: var(--ll-fw-label); margin-top: 5px; letter-spacing: var(--ll-track-eyebrow); text-transform: uppercase; }

/* Section label — Nike tight uppercase */
.eyebrow {
  font-family: var(--ll-font-label);
  font-size: var(--ll-fs-eyebrow); font-weight: var(--ll-fw-label); letter-spacing: var(--ll-track-eyebrow); text-transform: uppercase;
  color: var(--ll-ink-faint); margin: 22px 2px 10px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Cards — cream surface with soft outline border, no drop shadow */
.card {
  background: var(--ll-surface); border-radius: var(--ll-radius);
  padding: var(--ll-card-pad); margin-bottom: var(--ll-card-gap); border: 1px solid var(--ll-border);
}
.card.flat { padding: 4px var(--ll-card-pad); }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ll-ink-soft); }
.faint { color: var(--ll-ink-faint); }
.tiny { font-size: var(--ll-fs-tiny); }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hero card — dark ink panel with copper outline, used for today's session on Home */
.hero-card {
  background: var(--ll-hero-bg); border-radius: var(--ll-radius); padding: var(--ll-card-pad);
  margin-bottom: var(--ll-card-gap); position: relative; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  border: 1px solid var(--ll-accent); text-align: var(--ll-hero-align);
}
.hero-card::before {
  content: ''; position: absolute; top: -30px; right: -30px;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--ll-accent); opacity: 0.25; filter: blur(28px);
  pointer-events: none;
}
.hero-card .hero-eyebrow {
  font-family: var(--ll-font-label);
  font-size: var(--ll-fs-eyebrow); font-weight: var(--ll-fw-label); letter-spacing: var(--ll-track-eyebrow); text-transform: uppercase;
  color: var(--ll-accent); margin-bottom: 6px; position: relative;
}
.hero-card .hero-nudge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ll-fs-nudge); font-weight: 700; color: var(--ll-on-dark);
  background: rgba(255, 255, 255, 0.12); border-radius: var(--ll-radius-pill);
  padding: var(--ll-pill-pad); margin-bottom: 10px; position: relative;
}
.hero-card .hero-title { font-family: var(--ll-font-display); font-size: var(--ll-fs-hero-title); font-weight: var(--ll-fw-head); color: var(--ll-on-dark); letter-spacing: var(--ll-track-head); position: relative; margin-bottom: 4px; }
.hero-card .hero-sub { font-size: var(--ll-fs-hero-sub); color: var(--ll-on-dark-soft); margin-bottom: 16px; position: relative; }
.hero-card .btn { background: var(--ll-hero-btn-bg); color: var(--ll-hero-btn-ink); position: relative; width: fit-content; padding: var(--ll-hero-btn-pad); margin-inline: var(--ll-hero-btn-mi); }
.hero-card .btn:active { transform: scale(.975); }
.hero-card .hero-stats {
  display: grid; grid-template-columns: 1fr 1fr; position: relative;
  margin-top: 16px; padding-top: 14px; text-align: var(--ll-stat-align);
  border-top: 1px solid var(--ll-on-dark-line);
}
.hero-card .hero-stats .hero-stat + .hero-stat { border-left: 1px solid var(--ll-on-dark-line); padding-left: 16px; }
.hero-card .hero-stats .v { font-family: var(--ll-font-display); font-size: var(--ll-fs-hero-stat); font-weight: var(--ll-fw-head); letter-spacing: var(--ll-track-head); color: var(--ll-on-dark); }
.hero-card .hero-stats .l { font-family: var(--ll-font-label); font-size: var(--ll-fs-hero-stat-label); font-weight: var(--ll-fw-label); color: var(--ll-on-dark-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }

/* Buttons — unified system: primary tint (default), neutral/ghost, inverse (on dark hero only) */
.btn {
  background: var(--ll-btn-bg); color: var(--ll-btn-ink); border-radius: var(--ll-radius-btn);
  padding: var(--ll-btn-pad); font-size: var(--ll-btn-fs); font-weight: var(--ll-btn-fw); width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .08s, opacity .15s; letter-spacing: -.01em;
}
.btn:active { transform: scale(.975); }
.btn.sec { background: var(--ll-btn-sec-bg); color: var(--ll-btn-sec-ink); }
.btn.ghost { background: var(--ll-btn-ghost-bg); color: var(--ll-btn-ghost-ink); }
.btn.sm { width: auto; }
/* Squared-off variant — matches the rounded-rectangle radius of inputs and
   cards, for buttons that sit beside a field or span a section. */
.btn.rect { border-radius: var(--ll-radius-sm); }
.btn.danger { background: var(--ll-btn-danger-bg); color: var(--ll-btn-danger-ink); }

/* Pills — status tags, not tappable */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: var(--ll-pill-pad);
  border-radius: var(--ll-radius-pill); font-size: var(--ll-fs-pill); font-weight: var(--ll-fw-pill); background: var(--ll-pill-bg); color: var(--ll-pill-ink);
  letter-spacing: .01em;
}
.pill.green { background: var(--ll-pill-green-bg); color: var(--ll-pill-green-ink); }
.pill.amber { background: var(--ll-pill-amber-bg); color: var(--ll-pill-amber-ink); }

/* Icon buttons */
.iconbtn {
  width: var(--ll-iconbtn-size); height: var(--ll-iconbtn-size); border-radius: var(--ll-radius-round); background: var(--ll-iconbtn-bg);
  display: grid; place-items: center; font-size: var(--ll-fs-iconbtn); flex: none; color: var(--ll-iconbtn-ink);
}
.iconbtn:active { transform: scale(.92); }

/* Tab bar — Apple glass with dark start button */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: var(--ll-app-max); height: calc(var(--ll-tab-h) + var(--ll-safe-b));
  padding-bottom: var(--ll-safe-b);
  background: var(--ll-tabbar-bg); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--ll-border);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; z-index: 50;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ll-ink-faint); font-family: var(--ll-font-label); font-size: var(--ll-fs-tab); font-weight: var(--ll-fw-label); padding-top: 4px; letter-spacing: .01em; }
.tab .ic { font-size: var(--ll-icon-nav); line-height: 1; }
.tab.on { color: var(--ll-ink); }

/* History list — Apple inset grouped style */
.item { display: flex; align-items: center; gap: 12px; padding: var(--ll-item-pad); border-bottom: 0.5px solid var(--ll-line); }
.item:last-child { border-bottom: none; }
.badge {
  width: var(--ll-badge-size); height: var(--ll-badge-size); border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: var(--ll-fs-badge); font-weight: 800; background: var(--ll-accent-soft); color: var(--ll-accent-ink);
}
.badge.custom { background: var(--ll-badge-custom); }

/* Empty states */
.empty { text-align: center; padding: 50px 24px; color: var(--ll-ink-faint); }
.empty .em { font-size: var(--ll-fs-empty-art); margin-bottom: 12px; }
.empty .et { font-weight: 700; color: var(--ll-ink-soft); font-size: var(--ll-fs-empty); margin-bottom: 4px; }

/* Bottom sheet */
.sheet-wrap {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: var(--ll-scrim); align-items: flex-end; justify-content: center;
}
.sheet-wrap.open { display: flex; animation: fade .2s; }
.sheet {
  background: var(--ll-bg); width: 100%; max-width: var(--ll-app-max);
  border-radius: var(--ll-radius-sheet) var(--ll-radius-sheet) 0 0; padding: 8px 16px calc(24px + var(--ll-safe-b));
  max-height: 92vh; overflow-y: auto; animation: up .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
/* Repaints of an already-open sheet/page: no re-entrance animation. */
.sheet-wrap.no-anim, .sheet-wrap.no-anim .sheet, .page-wrap.no-anim { animation: none; }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--ll-line); margin: 8px auto 16px; }
.sheet h2 { font-family: var(--ll-font-display); font-size: var(--ll-fs-sheet-title); font-weight: var(--ll-fw-head); letter-spacing: var(--ll-track-head); margin: 0 0 16px; }

/* Full-screen editor page (Plans/Programs builders) */
.page-wrap {
  position: fixed; inset: 0; z-index: 90; display: none;
  flex-direction: column; background: var(--ll-bg);
  width: 100%; max-width: var(--ll-app-max); margin: 0 auto;
}
.page-wrap.open { display: flex; animation: slidein .22s cubic-bezier(.2,.8,.2,1); }
@keyframes slidein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.page-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + var(--ll-safe-t)) 8px 12px; border-bottom: 0.5px solid var(--ll-line);
}
.page-head h2 { flex: 1; text-align: center; font-family: var(--ll-font-display); font-size: var(--ll-fs-page-title); font-weight: var(--ll-fw-head); letter-spacing: -.01em; margin: 0; }
.page-body { flex: 1; overflow-y: auto; padding: 16px 16px calc(32px + var(--ll-safe-b)); }

/* Form fields */
.field { margin-bottom: 14px; }
.field label { display: block; font-family: var(--ll-font-label); font-size: var(--ll-fs-label); font-weight: var(--ll-fw-label); color: var(--ll-ink-faint); margin-bottom: 7px; letter-spacing: var(--ll-track-label); text-transform: uppercase; }
.field-row { display: flex; gap: 10px; }

/* Set logging rows */
.setrow { display: grid; grid-template-columns: 26px 1fr 1fr 1fr 30px; gap: 8px; align-items: center; margin-bottom: 8px; }
.setrow .n { font-weight: 800; color: var(--ll-ink-faint); font-size: var(--ll-fs-setnum); text-align: center; }
.setrow input { padding: 10px; text-align: center; background: var(--ll-surface-2); border-color: transparent; border-radius: var(--ll-radius-field); }
.setrow input:focus { border-color: var(--ll-accent); background: var(--ll-surface); }
.setlabels { display: grid; grid-template-columns: 26px 1fr 1fr 1fr 30px; gap: 8px; margin-bottom: 6px; }
.setlabels span { font-family: var(--ll-font-label); font-size: var(--ll-fs-setlabel); font-weight: var(--ll-fw-label); color: var(--ll-ink-faint); text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.setrow.zoned { border-left: 3px solid var(--zone-color, var(--ll-line)); padding-left: 8px; }

.lasthint { font-size: var(--ll-fs-caption); color: var(--ll-hint-ink); font-weight: 700; margin-top: 2px; margin-bottom: 6px; }

/* RPE rep-range suggestion — tappable caption near a set row */
.rep-suggestion { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 4px 0; font-size: var(--ll-fs-caption); font-weight: 700; color: var(--ll-suggestion-ink); cursor: pointer; }
/* Collapse the reserved rep-suggestion / zone bands until they actually have
   content, so freshly-added sets (no RPE, no 1RM history) aren't spaced apart
   by an empty ~52px band. Space is reclaimed the moment content appears. */
.rep-suggestion:empty { min-height: 0; margin: 0; padding: 0; }
.zone-display:empty, .zone-display.placeholder:empty { padding: 0; }
/* Card-level "log N more sets to estimate 1RM" caption, shown once at the
   bottom of a strength card. Collapses entirely when there's nothing to say. */
.zone-hint { font-size: var(--ll-fs-caption); font-weight: 700; color: var(--ll-zone-hint-ink); padding: 2px 4px; margin-top: 6px; }
.zone-hint:empty { display: none; }

/* Intensity zone display — dot + label shown under a logged set */
.zone-display { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; font-size: 11px; font-weight: 700; color: var(--ll-ink-soft); }
.zone-display .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zone-color, var(--ll-line)); flex: none; }
.zone-display.stale { color: var(--ll-ink-faint); }
.zone-display.stale .dot { background: transparent; border: 1.5px solid currentColor; }
.zone-display.compact { padding: 0; margin: 0; font-size: 10px; gap: 4px; }
.zone-display.placeholder { color: var(--ll-ink-faint); }
.zone-display.placeholder .dot { background: var(--ll-line); animation: zonePulse 1.4s ease-in-out infinite; }
@keyframes zonePulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Charts */
.chart { width: 100%; height: 150px; display: block; }
.chart-empty { height: 150px; display: grid; place-items: center; color: var(--ll-ink-faint); font-size: 13px; font-weight: 600; }

/* Stat cards — cream surface, soft outline border */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--ll-surface); border-radius: var(--ll-radius); padding: var(--ll-card-pad); border: 1px solid var(--ll-border); text-align: var(--ll-stat-align); }
.stat .v { font-family: var(--ll-font-display); font-size: var(--ll-fs-stat); font-weight: var(--ll-fw-head); letter-spacing: var(--ll-track-head); color: var(--ll-ink); }
.stat .l { font-family: var(--ll-font-label); font-size: var(--ll-fs-stat-label); font-weight: var(--ll-fw-label); color: var(--ll-ink-faint); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.cal-dow { text-align: center; font-family: var(--ll-font-label); font-size: var(--ll-fs-cal-dow); font-weight: var(--ll-fw-label); color: var(--ll-ink-faint); text-transform: uppercase; letter-spacing: .1em; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--ll-line); }
.cal-cell { width: var(--ll-cal-cell); height: var(--ll-cal-cell); margin: 1px auto; border-radius: var(--ll-radius-cal); display: flex; align-items: center; justify-content: center; font-size: var(--ll-fs-cal-day); font-weight: 500; color: var(--ll-ink); background: transparent; position: relative; transition: background .12s ease; }
.cal-cell.empty { background: transparent; }
.cal-cell.has { background: var(--ll-accent-soft); font-weight: 600; cursor: pointer; }
.cal-cell.has:active { transform: scale(.9); }
.cal-cell.today { background: var(--ll-hero-bg); color: var(--ll-on-dark); font-weight: 700; }
.cal-cell.has::after { content: ''; position: absolute; bottom: 5px; width: var(--ll-cal-dot); height: var(--ll-cal-dot); border-radius: 50%; background: var(--ll-accent); }
.cal-cell.has.admin::after { background: var(--ll-pr); }
.cal-cell.today.has::after { background: var(--ll-on-dark); }

/* Login screen */
.login { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 32px 24px calc(40px + var(--ll-safe-b)); background: var(--ll-surface); }
.brand { font-family: var(--ll-font-display); font-size: var(--ll-fs-brand); font-weight: var(--ll-fw-head); letter-spacing: var(--ll-track-head); line-height: .95; }
.brand .bar { color: var(--ll-accent); }
.login .tagline { color: var(--ll-ink-faint); font-size: var(--ll-fs-tagline); font-weight: 500; margin: 14px 0 40px; }
.seg { display: flex; background: var(--ll-surface-2); border-radius: var(--ll-radius-seg); padding: 4px; margin-bottom: 18px; }
.seg button { flex: 1; padding: 10px; border-radius: var(--ll-radius-seg-item); font-weight: 700; font-size: var(--ll-fs-seg); color: var(--ll-seg-ink); }
.seg button.on { background: var(--ll-seg-on-bg); color: var(--ll-seg-on-ink); box-shadow: var(--ll-shadow-pop); }

/* Toast */
.toast {
  position: fixed; bottom: calc(var(--ll-tab-h) + var(--ll-safe-b) + 16px); left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ll-ink); color: var(--ll-on-accent); padding: 12px 20px; border-radius: var(--ll-radius-round); font-size: var(--ll-fs-toast); font-weight: 700;
  opacity: 0; transition: .3s; z-index: 200; pointer-events: none; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.hidden { display: none !important; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--ll-accent-soft); border-top-color: var(--ll-accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-load { display: grid; place-items: center; padding: 60px; }

/* Exercise filter pills */
.seg-mini { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.seg-mini button { padding: 7px 14px; border-radius: var(--ll-radius-round); background: var(--ll-segmini-bg); font-weight: 700; font-size: var(--ll-fs-seg-mini); color: var(--ll-segmini-ink); border: 1px solid var(--ll-border); }
.seg-mini button.on { background: var(--ll-segmini-on-bg); color: var(--ll-segmini-on-ink); border-color: var(--ll-segmini-on-bg); }

/* Supersets — 2-4 exercises performed back to back, drawn as one bracketed
   block. The heavy left edge is the bracket; the letter badge names the group
   (A, B, C...) and is scoped to the plan / workout / program day it sits in. */
/* Squarer left corners so the 4px edge reads as a bracket rather than
   tapering away into the card's 22px rounding. */
.ss-block {
  border-left: var(--ll-ss-edge) solid var(--ll-accent); padding: 12px 14px;
  border-top-left-radius: var(--ll-radius-sm); border-bottom-left-radius: var(--ll-radius-sm);
}
.ss-head { display: flex; align-items: center; gap: 8px; }
.ss-badge {
  width: var(--ll-ss-badge); height: var(--ll-ss-badge); border-radius: var(--ll-radius-round); flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--ll-accent-soft); color: var(--ll-accent-ink);
}
.ss-label {
  flex: 1; min-width: 0; font-family: var(--ll-font-label); font-size: var(--ll-fs-eyebrow); font-weight: var(--ll-fw-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ll-ink-faint);
}
/* Members are visually joined by the block, so they carry a divider instead
   of their own card surface — the same block holds a plan's one-line rows and
   the logging screen's full set grids. */
.ss-member { padding: 8px 0; }
.ss-member + .ss-member { border-top: 0.5px solid var(--ll-line); }
.ss-member:last-child { padding-bottom: 0; }

/* Multi-select affordance on an exercise row. The 44px hit area is the
   button; the ring inside it is just the visual mark.
   The ring is drawn in --ll-ink-soft, NOT --ll-border: at 1.5px on
   --ll-surface the border tone lands around 1.5:1, under the 3:1 WCAG
   minimum for a control, and it read as a decorative bullet rather than
   something tappable. Ink-soft clears 4:1. */
.ss-pick { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: transparent; }
.ss-pick .ring {
  width: 22px; height: 22px; border-radius: var(--ll-radius-round);
  border: 1.5px solid var(--ll-ink-soft); background: var(--ll-surface);
  display: grid; place-items: center;
}

/* One-line prompt above an exercise list that has enough exercises to group
   but no superset in it yet — the rings are the only entry point to the
   feature and nothing else on screen says the word "superset". Drawn by
   supersetEditor's draw(), so it appears in every editor that groups. Its
   glyph is a copy of the ring so the sentence points at the actual control. */
.ss-hint {
  display: flex; align-items: center; gap: 8px; margin: -2px 2px 10px;
  font-size: 12px; color: var(--ll-ink-soft);
}
.ss-hint .ring {
  width: 14px; height: 14px; flex: none; border-radius: var(--ll-radius-round);
  border: 1.5px solid var(--ll-ink-soft); background: var(--ll-surface);
}
.ss-pick:active .ring { transform: scale(.9); }
.ss-pick.on { color: var(--ll-on-dark); }
.ss-pick.on .ring { background: var(--ll-accent); border-color: var(--ll-accent); }

/* Action bar shown while rows are selected. Sticks to the bottom of the
   editor page so it stays reachable in a long exercise list — it is always
   appended as the LAST child of .page-body, so once you scroll to the end it
   comes to rest below the Save/Delete buttons instead of covering them. */
/* Bleeds into the container's 16px gutters so cards don't show through
   either side while scrolling, and carries its own home-indicator padding
   so the buttons never sit under the iPhone home indicator. */
.ss-actions {
  position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px;
  margin: 8px -16px 0; padding: 10px 16px calc(10px + var(--ll-safe-b));
  background: var(--ll-bg); border-top: 1px solid var(--ll-line);
}
/* A sticky box cannot escape its containing block — the scroll container's
   CONTENT box — so the container's own bottom padding leaves the bar
   floating that far above the visible bottom edge, both while scrolling and
   once you reach the end. (A negative bottom margin does not buy the box any
   room here; Chrome clamps to the content box regardless.) So the container
   drops that padding for as long as the bar is mounted, which is the only
   time the class is set. Nothing is lost: the bar supplies the safe-area
   padding itself, and it is always the last child.

   Two shapes to cover: on an editor page the bar's parent IS the scroll
   container (.page-body), while in a bottom sheet the parent is the
   unstyled .sheet-body and the padding lives one level up on .sheet. */
.page-body.ss-host, .sheet:has(> .ss-host) { padding-bottom: 0; }
.ss-actions .count { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: var(--ll-ink-soft); }
/* Superset controls carry real weight (Ungroup is destructive), so they get
   the full 44px target rather than .btn.sm's text-sized height. */
.ss-actions .btn, .ss-head .btn { min-height: 44px; }

/* Swipe to delete */
.swipe-row { position: relative; overflow: hidden; }
.swipe-content {
  position: relative; z-index: 1; background: var(--ll-surface);
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.swipe-action {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--ll-swipe-w);
  background: var(--ll-danger); color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}