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

:root {
  --bg: #0b0b0d;
  --bg-soft: #111214;
  --panel: rgba(18, 19, 23, 0.9);
  --card: rgba(20, 22, 27, 0.84);
  --line: rgba(243, 239, 231, 0.12);
  --line-strong: rgba(198, 167, 106, 0.28);
  --text: #f3efe7;
  --muted: #b3ab9d;
  --accent: #c6a76a;
  --accent-strong: #e1c48f;
  --accent-soft: rgba(198, 167, 106, 0.12);
  --good: #d7cfbe;
  --blue: #8e99a8;
  --red: #c97d72;
  --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  /* Transparent so the fixed atmosphere <img> (z-index:-1) shows through. The
     dark base comes from html { background: var(--bg) }. No full-page radial /
     linear gradient here — those painted ON TOP of the image (body bg is a
     normal block background once html has its own) and washed it out. The image
     leads; cards float over it with their own blur + translucency for contrast. */
  background: transparent;
  color: var(--text);
  font: 16px/1.55 "Inter", system-ui, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "ss03" 1, "cv11" 1, "cv05" 1;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 85%);
  opacity: 0.22;
}

body.drawer-open {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

.hidden {
  display: none !important;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card,
.card {
  position: relative;
  overflow: hidden;
  /* Slightly translucent + blurred so the atmosphere photo bleeds softly under
     the card (frosted glass floating over the image) while text stays legible. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(12, 13, 16, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.auth-card::before,
.card::before,
.page-intro::before,
.nav-drawer-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243, 239, 231, 0.4), transparent);
}

.auth-card {
  max-width: 560px;
  padding: 34px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

/* Gold discipline: gold is an earned/primary accent, not a default. Opt a
   specific eyebrow back into gold only where the moment is earned. */
.eyebrow.is-gold {
  color: var(--accent);
}

.auth-card h1,
.topbar h2,
.page-intro h3,
.card h2,
.card h3,
.card h4 {
  margin: 0.25rem 0 0.5rem;
  line-height: 0.96;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 32, "wght" 650;
}

.auth-card h1 {
  font-size: clamp(38px, 6vw, 72px);
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.brand-lockup-auth {
  margin: 6px 0 14px;
}

.brand-lockup-top {
  margin-top: 2px;
}

.brand-lockup-hero {
  margin: 6px 0 10px;
}

.wordmark {
  display: block;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 0.92;
  font-weight: 720;
  font-variation-settings: "opsz" 32, "wght" 720;
}

.brand-lockup-auth .wordmark {
  font-size: clamp(34px, 6vw, 60px);
}

.wordmark-meta {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  font-weight: 600;
  font-variation-settings: "opsz" 14, "wght" 600;
}

.mini,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.input,
select,
textarea {
  width: 100%;
  margin: 6px 0;
  padding: 13px 15px;
  color: var(--text);
  background: rgba(243, 239, 231, 0.03);
  border: 1px solid rgba(243, 239, 231, 0.1);
  border-radius: 14px;
}

.input::placeholder,
textarea::placeholder {
  color: rgba(179, 171, 157, 0.74);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.primary,
.ghost,
.danger {
  margin: 6px 4px 6px 0;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.16s ease, filter 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.primary:active { transform: translateY(0); filter: brightness(0.97); }
.ghost:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ghost:active { transform: translateY(0); }
.danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.danger:active { transform: translateY(0); }

.primary {
  border: 1px solid rgba(225, 196, 143, 0.5);
  background: linear-gradient(180deg, #d6b780 0%, #b48b52 100%);
  color: #181410;
}

.ghost {
  border: 1px solid var(--line);
  background: rgba(243, 239, 231, 0.03);
  color: var(--text);
}

.danger {
  border: 1px solid rgba(201, 125, 114, 0.4);
  background: rgba(201, 125, 114, 0.12);
  color: #efbeb6;
}

.app-shell {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.shell-grid {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 100vh;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 18px 24px;
  border-right: 1px solid var(--line);
  background: rgba(10, 11, 14, 0.84);
  backdrop-filter: blur(18px);
}

.sidebar-brand {
  display: grid;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.sidebar-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.sidebar-nav,
.drawer-grid {
  display: grid;
  gap: 10px;
}

.nav-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.nav-link strong,
.dock-link small {
  display: block;
}

.nav-link small {
  color: var(--muted);
}

.nav-link.active {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(198, 167, 106, 0.12), rgba(198, 167, 106, 0.04));
}

.nav-link:hover,
.all-tab-tile:hover,
.dock-link:hover {
  transform: translateY(-1px);
}

.nav-link-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(243, 239, 231, 0.04);
  color: var(--muted);
  font-size: 20px;
  font-weight: 900;
}

.nav-link-icon svg {
  width: 22px;
  height: 22px;
}

/* Gold is reserved for the active room — the earned state, not every tile. */
.nav-link.active .nav-link-icon {
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.shell-main {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  /* Pad the top by the device safe-area so the bar (and its content) clears the
     iPhone notch / Dynamic Island when SOVRAN runs as a borderless fullscreen
     PWA. env() is 0 in a normal browser, so this is a no-op there. */
  padding: calc(22px + env(safe-area-inset-top, 0px)) clamp(14px, 3vw, 32px) 14px;
  background: rgba(10, 11, 14, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

/* Compact brand cluster: the mark + the page name, on one line. */
.topbar .brand {
  align-items: center;
  gap: 11px;
}

.topbar-mark {
  display: inline-flex;
  flex: none;
  width: 30px;
  height: 30px;
}

.topbar-mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.topbar h2 {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1;
}

/* Topbar controls read as modern, borderless glyphs — no resting outline or
   fill; the accessible :focus-visible ring (defined globally) is preserved. */
.topbar-actions .ghost {
  border: none;
  background: transparent;
}

.topbar-actions .ghost:hover {
  background: rgba(243, 239, 231, 0.06);
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.topbar h2 {
  font-size: clamp(34px, 4vw, 54px);
  font-variation-settings: "opsz" 36, "wght" 650;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* The day picker is a single borderless text control. It shows "Today" (or the
   selected date) and opens the native date picker on click — the native
   calendar indicator is hidden and the input overlays the label invisibly. */
.date-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
}

.date-display {
  margin: 0;
  min-height: 46px;
  padding: 10px 8px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0.01em;
}

.date-display:hover,
.date-pick:hover .date-display {
  background: rgba(243, 239, 231, 0.06);
}

.date-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  /* The transparent native input sits on top and takes the tap itself, so iOS
     opens its own date picker reliably (programmatic showPicker() is flaky in the
     standalone PWA). The visible "Today" label shows through underneath. */
  pointer-events: auto;
  cursor: pointer;
  color-scheme: dark;
}

.date-native::-webkit-calendar-picker-indicator {
  display: none;
}

.page-shell {
  padding: 18px clamp(12px, 3vw, 28px) 0;
  max-width: 1320px;
  margin: auto;
}

.page-shell:focus {
  outline: none;
}

.page-intro {
  position: relative;
  margin-bottom: 14px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(120deg, rgba(198, 167, 106, 0.12), transparent 48%),
    rgba(16, 17, 21, 0.84);
}

.page-intro h3 {
  font-size: clamp(36px, 4vw, 56px);
  font-variation-settings: "opsz" 40, "wght" 680;
}

.page-intro p {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.card {
  padding: 20px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: rgba(243, 239, 231, 0.18);
}

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.list {
  display: grid;
  gap: 8px;
}

.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

/* Rows that are themselves links/buttons earn a touch of lift on hover. */
a.row:hover,
button.row:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

a.row:active,
button.row:active {
  transform: translateY(0);
}

.row > * {
  min-width: 0;
}

.row strong {
  display: block;
  overflow-wrap: anywhere;
}

.row p {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.form-grid > * {
  grid-column: span 2;
}

.form-grid .wide {
  grid-column: span 6;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  margin: 3px;
}

.metric {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 28, "wght" 700;
}

.metric small {
  font-size: 14px;
  color: var(--muted);
}

.hero-logo {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 10px 0;
  color: var(--text);
  font-weight: 700;
}

.toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: 12px;
  text-align: center;
  background: rgba(8, 8, 10, 0.74);
  backdrop-filter: blur(10px);
  color: var(--text);
}

.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(243, 239, 231, 0.12);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.is-loading button {
  filter: saturate(0.85);
}

.draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(198, 167, 106, 0.32);
  background: rgba(198, 167, 106, 0.1);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 12px;
  margin: 4px 6px 8px 0;
}

[data-draft-status] {
  color: var(--muted);
  font-size: 12px;
}

.hero-dashboard {
  overflow: hidden;
}

.hero-dashboard::after,
.metric-card::after {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 167, 106, 0.2), transparent 68%);
}

.fitness-panel {
  background:
    linear-gradient(120deg, rgba(198, 167, 106, 0.08), transparent 44%),
    rgba(18, 20, 24, 0.88);
}

.rings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.fitness-ring {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.02);
}

.fitness-ring canvas {
  width: 100%;
  max-width: 190px;
  height: auto;
}

.fitness-ring span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.proud-grid {
  align-items: start;
}

.proud-summary-card h3,
.proud-item-card h4,
.proud-section-title h3,
.proud-checklist-head h3 {
  margin: 0.2rem 0 0.4rem;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 28, "wght" 650;
}

.proud-mini-list {
  margin-top: 12px;
}

.proud-mini-row {
  align-items: flex-start;
  flex-direction: column;
}

.proud-section-block {
  margin-bottom: 10px;
}

.proud-section-title,
.proud-checklist-head,
.proud-card-head,
.proud-form-actions {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.proud-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.proud-item-card {
  margin-bottom: 0;
}

.proud-item-card > .muted {
  margin-bottom: 0;
}

.proud-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.proud-pill {
  margin: 0;
}

.proud-pill-soft {
  background: rgba(255, 255, 255, 0.04);
}

.proud-pill-good {
  border-color: rgba(225, 196, 143, 0.4);
  background: rgba(225, 196, 143, 0.12);
  color: var(--accent-strong);
}

.proud-pill-warn {
  border-color: rgba(201, 125, 114, 0.45);
  background: rgba(201, 125, 114, 0.12);
  color: #efbeb6;
}

.proud-pill-blue {
  border-color: rgba(142, 153, 168, 0.4);
  background: rgba(142, 153, 168, 0.14);
  color: #cfd5df;
}

.proud-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.proud-spec-grid > div {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.proud-spec-grid p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 13px;
}

.proud-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.proud-detail-card,
.proud-research-shell {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.proud-bullet-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.proud-bullet-list li + li {
  margin-top: 8px;
}

.proud-meta-strip,
.proud-research-top,
.proud-source-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.proud-meta-strip {
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.proud-meta-strip .mini {
  margin: 0;
}

.proud-research-shell {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.proud-research-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.proud-source-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.proud-source-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.proud-source-card .mini {
  display: block;
  margin: 8px 0 0;
}

.proud-item-form {
  display: grid;
  gap: 12px;
}

.proud-notes {
  min-height: 96px;
}

.proud-form-actions {
  align-items: center;
}

.proud-form-actions .mini {
  margin: 0;
}

.proud-checklist-row {
  align-items: flex-start;
}

.score {
  font-size: 82px;
  line-height: 0.9;
  color: var(--accent-strong);
  font-weight: 760;
  letter-spacing: -0.08em;
  font-variation-settings: "opsz" 32, "wght" 760;
}

.score small {
  font-size: 24px;
  color: var(--muted);
}

.metric-card {
  position: relative;
  overflow: hidden;
}

.big-chart,
.mini-chart {
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
  padding: 8px;
}

pre {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 520px;
  background: rgba(243, 239, 231, 0.03);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}

.workout-row {
  width: 100%;
  text-align: left;
  color: var(--text);
  padding: 10px 12px;
  align-items: stretch;
  flex-wrap: nowrap;
}

.workout-check-btn,
.workout-detail-btn {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
}

.workout-check-btn {
  flex: none;
  width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  align-self: center;
}

.workout-detail-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.workout-copy {
  min-width: 0;
}

.workout-meta {
  flex: none;
  text-align: right;
}

.gym-session-head,
.gym-session-status,
.gym-session-actions,
.gym-block-head,
.hero-actions {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.hero-actions {
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.hero-link {
  display: inline-flex;
  align-items: center;
}

.gym-session-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.gym-session-status {
  flex-direction: column;
  align-items: flex-end;
}

.gym-session-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 12px;
}

.gym-stat,
.gym-block {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.gym-stat strong {
  display: block;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.gym-session-actions {
  margin-bottom: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.gym-block-head {
  margin-bottom: 12px;
}

.gym-block-head h3,
.gym-session-head h2,
.gym-group-title {
  margin: 0;
}

.gym-group + .gym-group {
  margin-top: 12px;
}

.gym-group-title {
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gym-custom-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.gym-custom-form .input,
.gym-library-form .input {
  margin: 0;
}

.gym-library-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}

.gym-library-add-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.gym-custom-row {
  gap: 8px;
  align-items: stretch;
}

.gym-custom-main {
  flex: 1;
  min-width: 0;
}

.gym-custom-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.gym-delete-btn {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
}

.gym-library-summary {
  margin-top: 8px;
}

.wide-action {
  width: 100%;
  justify-content: center;
}

.pill-live {
  border-color: rgba(225, 196, 143, 0.45);
  background: rgba(225, 196, 143, 0.12);
  color: var(--accent-strong);
}

.check {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}

.done .check {
  background: var(--accent);
  border-color: var(--accent);
  color: #181410;
}

.done strong {
  text-decoration: line-through;
  color: var(--muted);
}

/* ── SOVRAN full-screen sheet — the app-wide pattern ─────────────────────────
   The full-screen surfaces (exercise library, session queue, meal picker, recipe)
   are in-page PAGES, not modal <dialog>s. The room's atmosphere photograph fills
   the whole surface; the content rides a glass card over it — exactly like every
   other room, no gradient slabs, no top-layer clipping or "blank overlay" risk.
   Dynamic viewport units + safe-area insets keep it clear of the iPhone notch. */
.detail-sheet {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  color: var(--text);
}

.detail-sheet[hidden] { display: none; }

/* The sheet's own copy of the room photograph — same treatment as .atmosphere-img
   (darkened cover, no veil) so the image reads behind the card with no gradient. */
.detail-sheet-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0b0b0d;
  pointer-events: none;
}

.detail-sheet-img {
  position: absolute;
  top: -3%;
  left: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  filter: saturate(0.8) contrast(1.02);
}

/* The content card: a glass panel over the photograph (flat translucent fill —
   not a gradient). It owns the full sheet height so its inner shell scrolls
   internally, with the photo framing it at the safe-area margins. */
.detail-sheet-card {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin:
    calc(env(safe-area-inset-top) + 12px) 12px
    calc(env(safe-area-inset-bottom) + 12px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(11, 12, 15, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.sheet-open {
  overflow: hidden;
}

.exercise-detail-form {
  display: grid;
  gap: 14px;
  padding: 22px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.exercise-picker-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 22px;
  /* Fill the dialog column so the head/toolbar/footer hold and the results row
     (1fr) is the only thing that scrolls. min-height:0 lets the 1fr track shrink
     below its content so its own overflow scroll engages. */
  flex: 1 1 auto;
  min-height: 0;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}

/* The session queue is head / list / footer — let the list grow and scroll,
   keeping the footer actions pinned to the bottom of the full-screen surface. */
.gym-queue-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.exercise-picker-head,
.exercise-picker-toolbar,
.exercise-picker-footer,
.exercise-picker-add-actions {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.exercise-picker-head h2 {
  margin: 4px 0 6px;
}

.exercise-picker-search {
  margin: 0;
  min-height: 56px;
  font-size: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.exercise-picker-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.exercise-picker-results {
  display: grid;
  gap: 10px;
  align-content: start;
  overflow: auto;
  padding-right: 4px;
}

.exercise-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  color: var(--text);
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.exercise-picker-item strong {
  display: block;
  margin-bottom: 4px;
}

.exercise-picker-item p,
.exercise-picker-empty p {
  margin: 0;
  color: var(--muted);
}

.exercise-picker-item:hover,
.exercise-picker-item:focus-visible {
  border-color: var(--line-strong);
  background: rgba(198, 167, 106, 0.08);
}

.exercise-picker-empty {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
}

.exercise-picker-add-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
}

.exercise-picker-add-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.exercise-detail-head,
.exercise-detail-actions,
.exercise-set-row,
.exercise-detail-summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.exercise-detail-head h3,
.exercise-set-row strong,
.exercise-stat strong {
  margin: 0;
}

.exercise-detail-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.exercise-stat,
.exercise-set-row {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.exercise-sets {
  display: grid;
  gap: 10px;
}

.card-shell {
  display: grid;
  gap: 8px;
}

.exercise-set-input {
  width: 120px;
}

.exercise-set-input .input {
  margin-bottom: 0;
}

.plan-editor {
  min-height: 60vh;
}

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  /* Keep the All Sections panel clear of the notch / home indicator in PWA. */
  padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 5, 8, 0.76);
  backdrop-filter: blur(18px);
}

.nav-drawer-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 80px);
  overflow: auto;
  padding: 18px;
  background: linear-gradient(180deg, rgba(19, 20, 24, 0.98), rgba(10, 11, 14, 0.98));
  border: 1px solid var(--line);
  border-radius: 30px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55);
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.nav-drawer-head h2 {
  margin: 0.1rem 0 0;
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 32, "wght" 650;
}

.icon-only {
  width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
}

.icon-only svg {
  width: 20px;
  height: 20px;
}

.topbar-lock {
  margin-left: 2px;
}

.mobile-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px calc(14px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  background: rgba(10, 11, 14, 0.95);
  border-top: 1px solid var(--line);
}

.dock-link {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  min-width: 0;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  text-align: center;
}

.dock-link span {
  font-size: 22px;
  font-weight: 900;
}

.dock-link small {
  line-height: 1.15;
}

.dock-link.active,
.dock-button {
  color: var(--accent-strong);
}

/* A vertical stack of transient pills. New ones append below; each is its own
   element that slides + fades out and is removed from the DOM after it's used,
   so they never pile up invisibly behind the notch. */
.toast-stack {
  position: fixed;
  /* Clear the notch / Dynamic Island so a pill isn't swallowed by it in PWA. */
  top: calc(18px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(92vw, 420px);
  /* Gaps between pills let taps fall through; each pill re-enables its own. */
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  cursor: pointer;
  padding: 11px 20px;
  border-radius: 999px;
  /* Frosted gold-rimmed glass: translucent dark pane, blurred backdrop, a
     gold hairline and an inner top sheen so it reads as lit glass, not a chip. */
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(34, 36, 43, 0.52) 0%, rgba(16, 17, 21, 0.48) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.46),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(225, 196, 143, 0.06);
  /* Enter from above + transparent; exit reverses (slide up + fade), so it
     lifts away cleanly instead of disappearing under the notch. */
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.hide {
  opacity: 0;
  transform: translateY(-14px);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition-duration: 0.01ms;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

details.card summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

details.card summary::-webkit-details-marker {
  display: none;
}

@media (max-width: 1080px) {
  .shell-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }
}

@media (max-width: 850px) {
  .span-3,
  .span-4,
  .span-6,
  .span-8 {
    grid-column: span 12;
  }

  .form-grid > * {
    grid-column: span 3;
  }

  .form-grid .wide {
    grid-column: span 6;
  }

  .rings {
    grid-template-columns: 1fr;
  }

  .fitness-ring {
    grid-template-columns: 100px 1fr;
    text-align: left;
  }

  .fitness-ring canvas {
    max-width: 100px;
  }

  .score {
    font-size: 64px;
  }

  .proud-card-grid,
  .proud-spec-grid,
  .proud-detail-grid,
  .gym-session-grid {
    grid-template-columns: 1fr;
  }

  .gym-session-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .topbar {
    align-items: center;
    gap: 10px;
    padding-top: 30px;
    padding-bottom: 12px;
  }

  .topbar-actions {
    width: auto;
    display: flex;
    margin-left: auto;
  }

  .brand .eyebrow,
  .brand-lockup-top {
    display: none;
  }

  .topbar h2 {
    font-size: 28px;
  }

  .ghost,
  .primary,
  .danger {
    min-height: 48px;
  }

  .proud-section-title,
  .proud-checklist-head,
  .proud-card-head,
  .proud-form-actions,
  .proud-meta-strip,
  .proud-research-top,
  .proud-source-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .proud-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .auth-shell,
  .nav-drawer {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .auth-card,
  .card {
    border-radius: 22px;
  }

  .page-intro h3 {
    font-size: 38px;
  }

  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid > * {
    grid-column: span 1;
  }

  .form-grid .wide {
    grid-column: span 2;
  }

  .row {
    align-items: flex-start;
  }

  .row strong {
    line-height: 1.1;
  }

  .hero-logo {
    align-items: flex-start;
    flex-direction: column;
  }

  .fitness-ring {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .fitness-ring canvas {
    max-width: 160px;
  }

  .big-chart {
    min-height: 190px;
  }

  .nav-drawer-panel {
    border-radius: 24px;
    padding: 14px;
  }

  .topbar-actions {
    gap: 6px;
  }

  .date-display {
    min-height: 42px;
    padding: 8px 8px;
  }

  .icon-only {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .gym-session-metrics {
    grid-template-columns: 1fr;
  }

  .gym-custom-form {
    grid-template-columns: 1fr;
  }

  .gym-library-form,
  .gym-library-add-form {
    grid-template-columns: 1fr;
  }

  .exercise-picker-shell,
  .exercise-detail-form {
    padding: 18px;
  }

  .gym-session-head,
  .gym-session-status,
  .gym-session-actions,
  .gym-block-head,
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .dock-link small {
    font-size: 11px;
  }

  .topbar h2,
  .card h2,
  .card h3 {
    letter-spacing: -0.02em;
  }

  .workout-row,
  .workout-detail-btn,
  .exercise-set-row,
  .exercise-detail-actions,
  .exercise-detail-head,
  .exercise-picker-head,
  .exercise-picker-toolbar,
  .exercise-picker-footer,
  .exercise-picker-add-actions,
  .exercise-picker-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .workout-row {
    gap: 10px;
  }

  .workout-check-btn {
    align-self: flex-start;
  }

  .workout-meta {
    text-align: left;
  }

  .exercise-detail-summary {
    grid-template-columns: 1fr;
  }

  .exercise-set-input {
    width: 100%;
  }

  .exercise-picker-shell {
    padding: 16px;
  }

  .exercise-picker-add-grid {
    grid-template-columns: 1fr;
  }
}

@media (display-mode: fullscreen), (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   TODAY — context-aware command surface (additive; applied only on the
   dashboard/Today route via the .today wrapper). No existing class is
   altered or repurposed below.
   ───────────────────────────────────────────────────────────────────────── */

.today {
  --today-ink: var(--text);
  --today-accent: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

.today-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
}

.today-icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--today-accent);
}

/* Surface tiers — hierarchy by scale + elevation, not more colour. */
.today-tier-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}

.today-card {
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

.today-tier-working {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), rgba(14, 15, 19, 0.7);
}

.today-tier-reference {
  background: rgba(12, 13, 16, 0.4);
  border-color: rgba(243, 239, 231, 0.07);
  box-shadow: none;
}

.today-tier-reference .today-eyebrow {
  color: #7d766a;
}

/* Day-phase moods — same surface, different presence. */
.today.is-dawn .today-tier-hero {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(215, 210, 200, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(24, 26, 31, 0.92), rgba(11, 11, 13, 0.92));
}

.today.is-train .today-tier-hero {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(35, 38, 41, 0.9), transparent 50%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.96), rgba(6, 6, 7, 0.98));
  border-color: rgba(243, 239, 231, 0.16);
}

.today.is-dusk .today-tier-hero {
  background:
    radial-gradient(130% 100% at 30% 0%, rgba(198, 167, 106, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(26, 22, 18, 0.92), rgba(12, 11, 10, 0.94));
}

.today-hero-head {
  margin-bottom: 18px;
}

.today-title {
  margin: 6px 0 0;
  font-size: clamp(46px, 8vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 40, "wght" 680;
}

.today-line {
  margin: 0 0 4px;
  max-width: 34ch;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.32;
  font-weight: 500;
  color: var(--today-ink);
}

.today-scripture {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--muted);
  font-style: italic;
}

.today-scripture span {
  margin-left: 8px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--today-accent);
}

/* Hero rings — animated on load; gold reserved for fuel earned-state only. */
.today-rings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 26px 0 8px;
}

.today-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.today-ring-canvas {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
}

.today-ring-label strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.today-ring-label span {
  font-size: 12px;
  color: var(--muted);
}

/* Spirit presence — a kept appointment, never a scored ring. */
.today-presence {
  justify-content: flex-start;
}

.today-presence-mark {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px dashed rgba(243, 239, 231, 0.16);
  color: var(--muted);
}

.today-presence-mark .today-icon {
  width: 34px;
  height: 34px;
  color: inherit;
}

.today-presence.is-kept .today-presence-mark {
  border-style: solid;
  border-color: var(--line-strong);
  color: var(--accent);
  background: var(--accent-soft);
}

.today-presence.is-kept .today-presence-mark .today-icon {
  animation: today-draw-in 900ms ease forwards;
}

.today-trajectory {
  margin-top: 18px;
}

.today-trajectory-label {
  margin-bottom: 8px;
}

.today-traj-canvas {
  width: 100%;
  height: 120px;
  display: block;
}

.today-card-title {
  margin: 6px 0 4px;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 32, "wght" 640;
}

.today-card-sub {
  margin: 0 0 18px;
  max-width: 46ch;
  color: var(--muted);
  font-size: 14.5px;
}

/* Hold-to-commit — the gold fills as you hold, then locks. Earned, not submitted. */
.today-commit {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(198, 167, 106, 0.06);
  color: var(--text);
  font-weight: 650;
  letter-spacing: 0.02em;
  touch-action: none;
  transition: border-color 200ms ease, transform 120ms ease;
}

.today-commit.is-holding {
  transform: scale(0.995);
}

.today-commit-fill {
  --commit: 0;
  position: absolute;
  inset: 0;
  transform: scaleX(var(--commit));
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(198, 167, 106, 0.32), rgba(225, 196, 143, 0.5));
  pointer-events: none;
}

.today-commit-text {
  position: relative;
}

.today-commit.is-committed {
  border-color: var(--accent-strong);
  background: rgba(198, 167, 106, 0.16);
  box-shadow: 0 0 0 1px rgba(225, 196, 143, 0.35), 0 18px 50px rgba(198, 167, 106, 0.16);
  cursor: default;
}

.today-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.today-session-state {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.today-session-state.is-live {
  color: var(--accent);
}

/* The one primary action — the only solid gold call on the surface. */
.today-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #1a1408;
  font-weight: 750;
  letter-spacing: 0.02em;
  transition: transform 140ms ease, box-shadow 200ms ease;
  box-shadow: 0 18px 44px rgba(198, 167, 106, 0.2);
}

.today-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(198, 167, 106, 0.28);
}

.today-close-line {
  margin: 6px 0 12px;
  font-size: 19px;
  line-height: 1.35;
}

.today-gratitude {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.today-thread {
  color: var(--accent);
  border-bottom: 1px solid var(--line-strong);
  font-style: normal;
}

.today-glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.today-glance div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.today-glance strong {
  font-size: 18px;
  font-variation-settings: "opsz" 24, "wght" 640;
}

.today-glance span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7d766a;
}

/* The Sabbath — stillness. Deep negative space, one blessing, nothing to do. */
.today-sabbath {
  min-height: 62vh;
  justify-content: center;
}

.today-rest {
  text-align: center;
  padding: 48px 24px;
}

.today-rest-mark {
  display: grid;
  place-items: center;
  margin: 0 auto 26px;
  width: 56px;
  height: 56px;
  color: var(--accent);
  opacity: 0.8;
}

.today-rest-mark .today-icon {
  width: 40px;
  height: 40px;
}

.today-rest-line {
  margin: 14px 0 0;
  font-size: clamp(38px, 7vw, 64px);
  letter-spacing: -0.05em;
  line-height: 0.96;
  font-variation-settings: "opsz" 40, "wght" 640;
}

.today-rest-sub {
  margin: 16px auto 0;
  max-width: 30ch;
  color: var(--muted);
  font-size: 17px;
}

.today-rest-quiet {
  margin: 40px auto 0;
  max-width: 34ch;
  color: #6f685d;
  font-size: 14px;
  font-style: italic;
}

/* Breathing — a slow, settled pulse on the hero. Quiet power, never bouncy. */
.today.is-train .today-tier-hero::after,
.today.is-dawn .today-tier-hero::after,
.today.is-dusk .today-tier-hero::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(198, 167, 106, 0.06);
  animation: today-breathe 7s ease-in-out infinite;
}

@keyframes today-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

@keyframes today-draw-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 620px) {
  .today {
    gap: 16px;
  }
  .today-tier-hero {
    padding: 26px 20px 24px;
  }
  .today-card {
    padding: 20px 18px;
  }
  .today-rings {
    gap: 10px;
  }
  .today-glance {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-tier-hero::after,
  .today-presence.is-kept .today-presence-mark .today-icon {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   GENERALIZED DESIGN PRIMITIVES (Phase 0 foundation)
   The validated Today hierarchy, motion, and gold discipline made reusable
   app-wide. Additive — existing .card is untouched; pages opt into tiers as
   they are re-skinned in later phases.
   ───────────────────────────────────────────────────────────────────────── */

/* Surface tiers — hierarchy by scale + elevation, not more colour. */
.surface-hero {
  position: relative;
  overflow: hidden;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), rgba(12, 13, 16, 0.85);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}

.surface-working {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)), rgba(14, 15, 19, 0.7);
}

.surface-reference {
  padding: 20px 22px;
  border: 1px solid rgba(243, 239, 231, 0.07);
  border-radius: var(--radius-lg);
  background: rgba(12, 13, 16, 0.4);
  box-shadow: none;
}

.surface-reference .eyebrow {
  color: #7d766a;
}

/* Motion primitives — quiet power, never bouncy; honor reduced motion. */
.breathe {
  animation: today-breathe 7s ease-in-out infinite;
}

.draw-in {
  animation: today-draw-in 900ms ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .breathe,
  .draw-in {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FIVE-ROOM IA (Phase 1)
   Sidebar shows the five rooms; in-room sub-navigation tabs reach sibling
   pages; the all-sections drawer groups every page by room (System included).
   ───────────────────────────────────────────────────────────────────────── */
.room-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1320px;
  margin: 2px auto 0;
  padding: 12px clamp(12px, 3vw, 28px) 0;
}

.room-tab {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(243, 239, 231, 0.02);
  color: var(--muted);
  font-weight: 650;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.room-tab:hover {
  color: var(--text);
}

.room-tab.active {
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--text);
}

.drawer-group {
  margin-bottom: 20px;
}

.drawer-group:last-child {
  margin-bottom: 0;
}

.drawer-group > .eyebrow {
  margin-bottom: 10px;
}

/* Today — session close-out receipt + readiness note (Phase 2). */
.today-session-receipt {
  margin: 12px 0 2px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.today-session-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* ─────────────────────────────────────────────────────────────────────────
   PERSISTENT SESSION BAR (Phase 3)
   Follows the user across every room while a gym session is live — one tap
   back to Training. Gold here is an earned/live state, within discipline.
   ───────────────────────────────────────────────────────────────────────── */
.session-bar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: min(620px, calc(100% - 24px));
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(14, 13, 11, 0.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(198, 167, 106, 0.12);
  color: var(--text);
}

.session-bar-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(198, 167, 106, 0.7);
  animation: session-pulse 2.4s ease-in-out infinite;
}

.session-bar-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}

.session-bar-text strong {
  letter-spacing: 0.01em;
}

.session-bar-text span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.session-bar-cta {
  margin-left: 4px;
  color: var(--accent-strong);
  font-weight: 750;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes session-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .session-bar-pulse { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SESSION MODE — strap-in (Phase 3)
   When a session is live, the Training session card reads as a focused
   near-black strap-in with a breathing timer. The engine/controls below are
   unchanged; this is presentation only.
   ───────────────────────────────────────────────────────────────────────── */
.gym-session-card.is-live {
  border-color: var(--line-strong);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198, 167, 106, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(8, 8, 9, 0.96), rgba(6, 6, 7, 0.98));
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.gym-strapin {
  text-align: center;
  padding: 6px 0 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.gym-strapin-timer {
  margin: 6px 0;
  font-size: clamp(44px, 9vw, 66px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 40, "wght" 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  animation: strapin-breathe 5s ease-in-out infinite;
}

.gym-strapin-held {
  margin: 6px 0 0;
  color: var(--accent);
  font-style: italic;
  letter-spacing: 0.02em;
}

@keyframes strapin-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gym-strapin-timer { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   WEEK-AHEAD ritual (Phase 6) — the Sabbath placed first, then the six working
   days. Uses the generalized surface tiers from Phase 0.
   ───────────────────────────────────────────────────────────────────────── */
.week-ahead {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.week-briefing-line {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.4;
  color: var(--text);
}

.week-briefing-directive {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 14.5px;
}

.week-prep-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.week-prep-links .ghost {
  margin: 0;
  border-radius: 999px;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.week-day-title {
  margin: 4px 0 6px;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 24, "wght" 640;
}

.week-day-sabbath {
  border-color: var(--line-strong);
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(198, 167, 106, 0.10), transparent 60%),
    rgba(12, 13, 16, 0.5);
}

@media (max-width: 620px) {
  .week-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   MEAL LIBRARY picker (Feature) — reuses the exercise-picker shell; adds the
   per-result quantity multiplier + select control.
   ───────────────────────────────────────────────────────────────────────── */
.meal-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.02);
}

.meal-picker-copy strong {
  display: block;
}

.meal-picker-copy p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.meal-picker-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.meal-picker-controls .meal-qty {
  width: 72px;
  margin: 0;
  text-align: center;
}

.meal-picker-controls .meal-select-btn {
  margin: 0;
  white-space: nowrap;
}

.meal-create-item {
  width: 100%;
  text-align: left;
}

@media (max-width: 520px) {
  .meal-picker-item {
    flex-direction: column;
    align-items: stretch;
  }
  .meal-picker-controls {
    justify-content: space-between;
  }
  .meal-picker-controls .meal-qty {
    width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   GEAR SHOP (Feature) — a full premium shop in the SOVRAN language: featured
   hero, a STAGGERED (offset/masonry) product list that reveals on scroll,
   favorites (heart) + cart that persist server-side, a shop bottom tab bar,
   and a slide-in cart sheet. Gold is the earned accent over the dark base.
   ───────────────────────────────────────────────────────────────────────── */
.gear-shop {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 36px;
}

/* Shop header: back chevron · centered gold label · cart with count badge. */
.gear-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  margin-bottom: 6px;
}

.gear-icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(18, 19, 23, 0.6);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.14s ease, background 0.18s ease;
}
.gear-icon-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.gear-icon-btn svg { width: 22px; height: 22px; }

.gear-topbar-label {
  text-align: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

.gear-cart-btn { position: relative; }
.gear-cart-btn.has-items { border-color: var(--line-strong); color: var(--accent-strong); }
.gear-cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #16130c;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Hero. */
.gear-hero {
  text-align: center;
  padding: 22px 18px 14px;
}
.gear-hero-title {
  margin: 0;
  font-size: clamp(34px, 8vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-variation-settings: "opsz" 48, "wght" 680;
}
.gear-hero-title .is-gold { color: var(--accent); }
.gear-hero-sub {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.gear-hero-rule {
  display: block;
  width: 60px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

/* Category filter chips — horizontally scrollable. */
.gear-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  margin: 6px 0 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gear-filters::-webkit-scrollbar { display: none; }
.gear-chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(18, 19, 23, 0.5);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.gear-chip:hover { border-color: var(--line-strong); color: var(--text); }
.gear-chip.is-active {
  border-color: var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.gear-section-head {
  margin: 8px 2px 14px;
  font-size: 18px;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 20, "wght" 660;
}

/* ── The mosaic ───────────────────────────────────────────────────────────────
   Two independent columns (cards distributed by JS into the shorter column), so
   each column packs TIGHT with no row-baseline gaps — a true masonry/mosaic. The
   right column is offset downward so the two columns stagger (a little blank
   space at its top), which is easier on the eyes than a flush grid. */
.gear-stagger {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 26px;
}
.gear-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gear-col:nth-child(2) { transform: translateY(28px); }

@media (min-width: 600px) {
  .gear-stagger { gap: 16px; padding-bottom: 38px; }
  .gear-col { gap: 18px; }
  .gear-col:nth-child(2) { transform: translateY(38px); }
}

.gear-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

/* Scroll reveal. */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

.gear-card-top {
  position: absolute;
  inset: 12px 12px auto 12px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.gear-card-top > * { pointer-events: auto; }

.gear-badge {
  padding: 5px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #16130c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.gear-heart {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(11, 11, 13, 0.55);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s ease, color 0.18s ease, border-color 0.18s ease;
}
.gear-heart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.gear-heart:hover { transform: scale(1.08); border-color: var(--line-strong); }
.gear-heart.is-fav { color: var(--accent); border-color: var(--line-strong); }
.gear-heart.is-fav svg { fill: var(--accent); stroke: var(--accent); }
.gear-heart.is-fav { animation: gear-heart-pop 0.34s ease; }
@keyframes gear-heart-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.gear-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198, 167, 106, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(38, 41, 46, 0.95), rgba(10, 10, 12, 0.98));
  overflow: hidden;
}
.gear-card-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gear-card-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  gap: 8px;
}
.gear-card-glyph { color: var(--accent); opacity: 0.85; }
.gear-card-glyph svg { width: 58px; height: 58px; }
.gear-card-initials {
  position: absolute;
  bottom: 12px;
  right: 14px;
  color: rgba(243, 239, 231, 0.42);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.gear-card-media.is-broken .gear-card-img { display: none; }

.gear-card-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px 16px;
}
.gear-card-name {
  margin: 1px 0;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.22;
  font-variation-settings: "opsz" 20, "wght" 640;
}
.gear-card-spec { margin: 0 0 2px; }

.gear-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 4px;
}
.gear-stars { display: inline-flex; gap: 1px; }
.gear-star { width: 13px; height: 13px; fill: rgba(243, 239, 231, 0.18); }
.gear-star.is-on { fill: var(--accent); }
.gear-rating-num { font-size: 13px; font-weight: 700; color: var(--text); }
.gear-rating-count { font-size: 12px; color: var(--muted); }

.gear-buy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 2px;
}
.gear-price {
  font-size: 21px;
  font-weight: 800;
  color: var(--accent-strong);
  letter-spacing: -0.01em;
}
.gear-buy-actions { display: flex; align-items: center; gap: 7px; flex: 1 1 auto; justify-content: flex-end; }
.gear-add {
  flex: 1 1 auto;
  text-align: center;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(198, 167, 106, 0.22), rgba(198, 167, 106, 0.10));
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.12s ease;
}
.gear-add:hover { background: rgba(198, 167, 106, 0.28); transform: translateY(-1px); }
.gear-add-mini {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--accent-soft);
  color: var(--accent-strong);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}
.gear-add-mini svg { width: 18px; height: 18px; }
.gear-add-mini:hover { background: rgba(198, 167, 106, 0.22); transform: translateY(-1px); }
.gear-add.just-added, .gear-add-mini.just-added {
  animation: gear-add-flash 0.42s ease;
}
@keyframes gear-add-flash {
  0% { transform: scale(1); }
  40% { transform: scale(0.92); background: rgba(198, 167, 106, 0.45); }
  100% { transform: scale(1); }
}

/* Three feature points. */
.gear-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.gear-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}
.gear-feature-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 1px;
}
.gear-feature-icon svg { width: 22px; height: 22px; }
.gear-feature strong {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.gear-feature small {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
}

.gear-empty { padding: 36px 8px; text-align: center; }

/* Footer accent line. */
.gear-footer-accent {
  text-align: center;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.gear-footer-icon { color: var(--accent); display: inline-grid; place-items: center; }
.gear-footer-icon svg { width: 32px; height: 32px; }
.gear-footer-accent strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}
.gear-footer-accent p { margin: 0; color: var(--muted); font-size: 13px; }

/* Favorites filter chip — a heart fronts the label; reuses .gear-chip. */
.gear-chip-fav { display: inline-flex; align-items: center; gap: 6px; }
.gear-chip-heart { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gear-chip-fav.is-active .gear-chip-heart { fill: var(--accent-strong); stroke: var(--accent-strong); }

/* Compact the two-up cards on small phones so the side-by-side layout breathes. */
@media (max-width: 480px) {
  .gear-card-body { padding: 11px 11px 13px; gap: 4px; }
  .gear-card-name { font-size: 14px; }
  .gear-card-media { aspect-ratio: 1 / 1; }
  .gear-price { font-size: 18px; }
  .gear-add { padding: 8px 10px; font-size: 11.5px; }
  .gear-add-mini { width: 32px; height: 32px; }
  .gear-features { gap: 5px; margin-top: 10px; padding-top: 10px; }
  .gear-feature strong { font-size: 10px; }
  .gear-feature small { font-size: 9px; }
  .gear-feature-icon { width: 26px; height: 26px; margin-bottom: 0; }
  .gear-feature-icon svg { width: 19px; height: 19px; }
  .gear-heart { width: 34px; height: 34px; }
  .gear-heart svg { width: 18px; height: 18px; }
  .gear-badge { font-size: 9px; padding: 4px 8px; letter-spacing: 0.08em; }
  .gear-card-top { inset: 9px 9px auto 9px; }
  .gear-card-glyph svg { width: 46px; height: 46px; }
}

/* ── Cart sheet ──────────────────────────────────────────────────────────────*/
.gear-cart-sheet { position: fixed; inset: 0; z-index: 80; }
.gear-cart-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.6);
  backdrop-filter: blur(2px);
  animation: gear-fade 0.2s ease;
}
.gear-cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(20, 22, 27, 0.98), rgba(11, 11, 13, 0.98));
  border-left: 1px solid var(--line-strong);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
  animation: gear-slide-in 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes gear-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gear-slide-in { from { transform: translateX(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }

.gear-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.gear-cart-head h3 { margin: 0; font-size: 19px; }
.gear-cart-body { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.gear-cart-empty { padding: 40px 10px; text-align: center; }

.gear-cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.gear-cart-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(38, 41, 46, 0.95), rgba(10, 10, 12, 0.98));
}
.gear-cart-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.gear-cart-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); opacity: 0.8; }
.gear-cart-thumb-fallback svg { width: 26px; height: 26px; }
.gear-cart-thumb.is-broken img { display: none; }
.gear-cart-line-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gear-cart-line-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.25; }
.gear-cart-line-name:hover { color: var(--accent-strong); }
.gear-cart-line-price { font-size: 12px; color: var(--accent-strong); font-weight: 700; }
.gear-cart-line-price small { font-weight: 400; }

.gear-cart-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.gear-cart-stepper button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.gear-cart-stepper button:hover { background: rgba(198, 167, 106, 0.22); }
.gear-cart-stepper span { min-width: 14px; text-align: center; font-weight: 700; font-size: 14px; }

.gear-cart-foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.gear-cart-total { display: flex; align-items: baseline; justify-content: space-between; }
.gear-cart-total span { color: var(--muted); font-size: 14px; }
.gear-cart-total strong { font-size: 24px; color: var(--accent-strong); font-weight: 800; }
.gear-cart-note { margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity 0.4s ease; transform: none !important; }
  .gear-card-fallback, .gear-heart, .gear-add, .gear-add-mini { animation: none !important; }
  .gear-cart-panel, .gear-cart-scrim { animation: none; }
}

/* ─── Atmospheric backgrounds (Phase B) ──────────────────────────────────────
   A curated, darkened architectural photograph sits behind every room, chosen
   by day-phase (with Sabbath and Spirit overrides). Subordinate to content:
   z-index:-1 behind every surface, low opacity under a dark veil, never
   interactive, never gating private content. Images are downloaded from
   Unsplash and served locally from /assets/atmosphere, so the CSP img-src
   directive stays 'self'. Reduced-motion drops the slow Ken Burns drift.
   Credits: public/assets/atmosphere/CREDITS.md */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.atmosphere.is-ready {
  opacity: 1;
}

/* A real <img> (not a CSS background) fills the viewport via object-fit:cover —
   it crops to aspect so it never stretches, and renders reliably on iOS where a
   fixed background-image jumps/scales wrong with the dynamic toolbar. Ported
   from universe-home's "image-fixed" pattern. The src is set per day-phase in
   JS; the ::after veil below is layered on top for text contrast. */
.atmosphere-img {
  position: absolute;
  /* A 110% box offset by -5% gives the drift its bleed so an edge never shows. */
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  opacity: 0.6;
  transform: scale(1.06);
  will-change: transform;
  animation: atmosphere-drift 56s ease-in-out infinite alternate;
  filter: saturate(0.8) contrast(1.02);
}

/* No veil over the image — content sits on its own cards/glass panels, which
   carry their own background for text contrast. Let the photograph read. */

/* A random image from the /assets/atmosphere folder is set on the <img> src in
   JS (see pickAtmosphere) — drop a file in that folder to add it to the rotation. */

@keyframes atmosphere-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere { transition: none; }
  .atmosphere-img { animation: none; transform: scale(1.04); }
}

/* ─── Entry experience (Phase C) ─────────────────────────────────────────────
   The login / lock surface (index.html). Presentation only — every control ID
   and class stays exactly where auth.js expects it. Atmospheric front door: the
   gold mark, the wordmark, one brand line, then the (unchanged) passkey flow on
   a glass panel over full-bleed darkened photography. */

/* On the entry there is no private content to protect, so the photograph is
   allowed to read more strongly than the in-app, subordinate treatment. */
body.entry .atmosphere-img { opacity: 0.9; }

/* ── Passkey gate — the automatic-launch loading animation ───────────────────
   Shown OVER the atmosphere image while the passkey prompt resolves, so the
   first thing a returning owner sees is their photograph and a calm, breathing
   key — no button to find, no tap to make. Sits above the atmosphere but below
   the entry card (which only appears as the manual fallback). */
.passkey-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  text-align: center;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  color: var(--text);
  /* Flat, faint scrim over the atmosphere (no gradient) — the photograph still
     reads; the key and text stay legible on top. */
  background: rgba(8, 8, 10, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.passkey-gate.hidden { display: none; }

.passkey-orb {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.passkey-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(198, 167, 106, 0.55);
  animation: passkey-pulse 2.1s ease-out infinite;
}

.passkey-ring-2 { animation-delay: 1.05s; }

.passkey-glyph {
  position: relative;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 10px rgba(198, 167, 106, 0.35));
  animation: passkey-breathe 2.1s ease-in-out infinite;
}

.passkey-gate-text {
  margin: 0;
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0.92;
}

@keyframes passkey-pulse {
  0% { transform: scale(0.62); opacity: 0.0; }
  35% { opacity: 0.9; }
  100% { transform: scale(1.18); opacity: 0.0; }
}

@keyframes passkey-breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.85; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .passkey-ring { animation: none; opacity: 0.5; }
  .passkey-glyph { animation: none; transform: scale(1); }
}

.entry-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.entry-card {
  width: 100%;
  max-width: 432px;
  padding: 40px 34px 30px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(12, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  border-color: rgba(243, 239, 231, 0.14);
}

.entry-mark {
  display: block;
  width: 60px;
  margin: 0 auto 18px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
  animation: entry-breathe 6.5s ease-in-out infinite;
}

.entry-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.entry-card .eyebrow {
  display: block;
}

/* Center the wordmark lockup on the entry. */
.entry-card .brand-lockup-auth {
  display: flex;
  align-items: center;
  margin: 10px 0 12px;
}

.entry-card .brand-lockup-auth .wordmark {
  font-size: clamp(32px, 7vw, 50px);
}

.entry-tagline {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.entry-rule {
  width: 56px;
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

.entry-copy {
  margin: 0 auto;
  max-width: 32ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.entry-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.entry-controls > * {
  width: 100%;
  margin: 0;
}

.entry-controls .input {
  text-align: center;
}

#authStatus {
  margin-top: 14px;
  min-height: 1em;
}

.entry-foot {
  margin-top: 18px;
  opacity: 0.78;
}

@keyframes entry-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.035); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-mark { animation: none; }
}

/* ─── Motion & display polish (Phase D) ──────────────────────────────────────
   Bring the validated Today "draw-in / reveal" feel to every room, plus quiet
   micro-interactions on modals. Presentation only; all motion is gated behind
   prefers-reduced-motion. Buttons/rows/cards get their interaction transitions
   inline above. */

@media (prefers-reduced-motion: no-preference) {
  /* A gentle, uniform reveal as each room's surfaces mount — and, since pages
     re-render by replacing innerHTML, it also softens those swaps into a quiet
     fade instead of a hard rebuild. Kept uniform (no stagger) so frequent
     re-renders never blank-then-cascade. */
  .page-shell .card,
  .page-shell .grid > section,
  .page-shell .week-ahead > section,
  .page-shell .week-grid > section,
  .page-shell .surface-hero,
  .page-shell .surface-working,
  .page-shell .surface-reference {
    animation: rise-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  /* Modals breathe in rather than snapping open. */
  dialog[open] {
    animation: dialog-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* No auto-reveal, no hover travel — calm and static. */
  .page-shell .card,
  .page-shell .grid > section,
  .page-shell .week-ahead > section,
  .page-shell .week-grid > section,
  .page-shell .surface-hero,
  .page-shell .surface-working,
  .page-shell .surface-reference,
  dialog[open] {
    animation: none !important;
  }
  .primary:hover,
  .ghost:hover,
  .danger:hover,
  a.row:hover,
  button.row:hover,
  .nav-link:hover,
  .all-tab-tile:hover,
  .dock-link:hover {
    transform: none;
  }
}

/* Reports — readable "Latest briefing" (replaces the old raw JSON dump). */
.report-briefing .brief-label {
  display: block;
  margin-top: 16px;
  margin-bottom: 2px;
}

/* Signals — readiness as status chips instead of a debug string. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.status-chip strong {
  color: var(--text);
  font-weight: 700;
}
.status-chip.is-good { border-color: rgba(143, 153, 168, 0.4); }
.status-chip.is-good strong { color: var(--good); }
.status-chip.is-warn { border-color: rgba(201, 125, 114, 0.45); }
.status-chip.is-warn strong { color: #e6b3aa; }

/* Spirit — the gate (Phase E). Still, reverent, deep negative space; the rhythm
   and the optional log recede beneath it. Presentation only. */
.spirit {
  display: grid;
  gap: 16px;
}
.spirit-gate {
  text-align: center;
  padding: clamp(40px, 8vw, 68px) 28px clamp(34px, 6vw, 52px);
}
.spirit-mark {
  display: block;
  width: 46px;
  margin: 0 auto 20px;
  color: var(--accent);
  opacity: 0.92;
}
.spirit-mark svg { width: 100%; height: auto; display: block; }
.spirit-line {
  margin: 10px 0 12px;
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.spirit-sub {
  max-width: 46ch;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.6;
}
.spirit-kept {
  margin: 26px 0 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7d766a;
}
.spirit-kept.is-kept { color: var(--accent-strong); }

/* Reports — preview the next briefing before it sends. */
.report-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
.report-preview-out:not(:empty) {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.report-preview-intro {
  margin: 0 0 4px;
  color: var(--text);
  line-height: 1.6;
}
.report-preview-footer {
  margin-top: 14px;
  color: #7d766a;
}

/* Spirit gate — the one-tap "mark kept" gesture (centered in the still hero). */
.spirit-mark-btn {
  margin-top: 24px;
  padding-left: 22px;
  padding-right: 22px;
}

/* Signals — each schedule time grouped with the message it sends (fixes the
   time inputs overlapping on mobile). */
.reminders-form {
  display: grid;
  gap: 14px;
}
.reminders-form .field {
  display: grid;
  gap: 4px;
}
.signal-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
}
.signal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.signal-time {
  max-width: 150px;
}
.reminders-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ─── Training: tappable exercise rows + reworked set-logging dialog ──────────
   The whole row is one control (no checkbox) that opens the dialog; done is
   derived from logged sets and marked with a quiet check. The dialog logs per
   set weight + reps; actions are an icon-only save and a big "save & mark done"
   checkbox. Mobile-first — used one-handed mid-workout. */
.gym-ex-row {
  align-items: center;
  gap: 10px;
}
.gym-ex-status {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--accent-strong);
}
.gym-ex-status svg { width: 20px; height: 20px; }
.gym-ex-row.done .workout-copy strong { color: var(--accent-strong); }

/* Custom row = the tappable row + a delete affordance, side by side. */
.gym-custom-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.gym-custom-row .gym-ex-row { flex: 1; min-width: 0; }

/* Dialog: per-set weight + reps fields. */
.exercise-set-target { min-width: 0; }
.exercise-set-fields {
  display: flex;
  gap: 10px;
  flex: none;
}
.exercise-set-fields .exercise-set-input {
  width: 100px;
  flex: none;
}

/* Dialog actions: icon-only save + a prominent big-checkbox done. */
.exercise-detail-actions { align-items: stretch; }
.exercise-save-btn.icon-only {
  width: 52px;
  height: 52px;
  flex: none;
}
.exercise-save-btn svg { width: 22px; height: 22px; }
.exercise-done-btn {
  margin-left: auto;
  min-width: 96px;
  display: grid;
  place-items: center;
  padding: 8px 22px;
}
.exercise-done-btn svg { width: 32px; height: 32px; }

@media (max-width: 620px) {
  /* Keep the row and the dialog actions horizontal for one-handed use. */
  .gym-ex-row { flex-direction: row; align-items: center; }
  .exercise-detail-actions { flex-direction: row; align-items: stretch; }
  .exercise-set-fields { width: 100%; }
  .exercise-set-fields .exercise-set-input { width: auto; flex: 1; min-width: 0; }
}

/* ─── Training: guided session player (music-player feel) ─────────────────────
   Now-playing step (demo image + inline per-set logger), transport (play/pause/
   prev/next), and a queue to jump between exercises. Mobile-first / one-handed.
   The set logger reuses the .exercise-* styles above. */
.gym-player {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)), rgba(12, 13, 16, 0.86);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}
.gym-player.gym-player-running { border-color: var(--line-strong); }
.gym-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gym-player-timer {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.gym-now-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(198, 167, 106, 0.14), rgba(20, 22, 27, 0.9));
}
.gym-now-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.gym-now-fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--accent-strong);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.gym-now-media.is-broken .gym-now-img { display: none; }
.gym-now-media.is-broken .gym-now-fallback { display: grid; }
.gym-now-pos {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
}
.gym-now-done {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #181410;
}
.gym-now-done svg { width: 20px; height: 20px; }
.gym-now-body { padding: 16px 2px 2px; display: grid; gap: 12px; }
.gym-now-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gym-now-head h2 { margin: 2px 0 0; font-size: clamp(22px, 5vw, 30px); }
.gym-now-target { margin: 0; color: var(--muted); font-size: 14px; }
.gym-now-empty { padding: 30px 10px; text-align: center; }

/* Spotify-style transport: affixed to the bottom of the screen, always visible
   while the session list scrolls above it. It only exists on the Training page,
   so the rule is safe globally; the page gets bottom padding via :has() so nothing
   hides behind the bar, and the redundant floating session pill is suppressed here. */
.gym-transport {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 11, 14, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-top: 1px solid var(--line);
}

#pageMain:has(.gym-transport) {
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

body:has(.gym-transport) #sessionBar {
  display: none !important;
}

/* Cardio track: duration + intensity chips, embedded in the playlist step. */
.gym-cardio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.gym-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
}
.gym-chip-high { color: #f1c27a; border-color: rgba(238, 160, 78, 0.45); background: rgba(238, 160, 78, 0.12); }
.gym-chip-low { color: #cde1c6; border-color: rgba(150, 200, 150, 0.32); background: rgba(150, 200, 150, 0.10); }
.gym-cardio-do { margin: 0; color: var(--muted); line-height: 1.45; }
.gym-play-btn {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
}
.gym-play-btn svg { width: 26px; height: 26px; }
.gym-tp-btn { width: 50px; height: 50px; }
.gym-tp-btn[disabled] { opacity: 0.4; }
.gym-queue-btn { margin-left: 4px; }
.gym-add-btn { color: var(--accent-strong); }
.gym-add-btn svg { width: 24px; height: 24px; }

/* The (+) add menu: two warm choices, then a one-tap custom-cardio form. */
.gym-add-choices {
  display: grid;
  gap: 12px;
  margin: 6px 0 4px;
}
.gym-add-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  cursor: pointer;
}
.gym-add-choice:hover { background: rgba(255, 255, 255, 0.08); }
.gym-add-choice-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  color: var(--accent-strong);
  background: rgba(238, 160, 78, 0.08);
}
.gym-add-choice-icon svg { width: 22px; height: 22px; }
.gym-add-choice-copy { display: flex; flex-direction: column; gap: 2px; }
.gym-add-choice-copy strong { font-size: 16px; }
.gym-add-cardio-form { display: grid; gap: 12px; margin-top: 6px; }
.gym-add-cardio-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.gym-add-intensity { display: flex; gap: 8px; }
.gym-intensity-opt { cursor: pointer; }
.gym-intensity-opt.is-on {
  color: var(--accent-strong);
  border-color: rgba(238, 160, 78, 0.45);
  background: rgba(238, 160, 78, 0.12);
}
.gym-add-cardio-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gym-add-cardio-submit svg { width: 18px; height: 18px; }

.gym-split summary { cursor: pointer; font-weight: 650; }
.gym-split-day { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.gym-split-day.is-today .gym-split-head strong { color: var(--accent-strong); }
.gym-split-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gym-ref-row { align-items: center; }
.gym-ref-row.done { opacity: 0.6; }
.gym-ref-row.done strong { text-decoration: line-through; }

.gym-queue-list { margin: 4px 0; min-height: 0; overflow: auto; }
.gym-queue-group {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 2px 4px;
}
.gym-queue-group:first-child { padding-top: 2px; }
.gym-queue-item { align-items: center; gap: 10px; width: 100%; text-align: left; color: var(--text); }
.gym-queue-item.is-current { border-color: var(--line-strong); background: var(--accent-soft); }
.gym-queue-item.done .workout-copy strong { color: var(--accent-strong); }
.gym-queue-status { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent-strong); }
.gym-queue-status svg { width: 18px; height: 18px; }
.gym-queue-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }