:root {
  color-scheme: light;
  --bg: #f4f1ec;
  --surface: #ffffff;
  --surface-strong: #171717;
  --ink: #181818;
  --muted: #6c665e;
  --line: #ded7cf;
  --accent: #bb2d2d;
  --accent-dark: #8e2020;
  --olive: #65715b;
  --gold: #b58b43;
  --blue: #2d5f73;
  --success: #2f7a50;
  --danger: #9b2f2f;
  --shadow: 0 18px 48px rgba(24, 24, 24, 0.08);
  --radius: 8px;
  --content: min(1180px, calc(100vw - 32px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0.035), transparent 220px),
    var(--bg);
  letter-spacing: 0;
}

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

a {
  color: inherit;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(190px, 1fr);
  gap: 18px;
  align-items: center;
  width: var(--content);
  margin: 0 auto;
  padding: 18px 0 14px;
  backdrop-filter: blur(18px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid rgba(214, 91, 33, 0.24);
  background: #fffdf9;
  box-shadow: 0 8px 22px rgba(24, 24, 24, 0.08);
  overflow: hidden;
}

.brand-mark img {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.brand-lockup strong,
.brand-lockup small {
  display: block;
}

.brand-lockup strong {
  font-size: 1rem;
}

.brand-lockup small {
  color: var(--muted);
  font-size: 0.78rem;
}

.topnav {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.75);
}

.topnav a {
  min-height: 36px;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.topnav a.active,
.topnav a:hover {
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(24, 24, 24, 0.06);
}

.user-switcher {
  justify-self: end;
  display: grid;
  gap: 4px;
}

.user-switcher label,
label small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.user-switcher select,
input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fffdf9;
  padding: 10px 12px;
  outline: none;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

select option {
  color: #f7f3ef;
  background: #111;
}

select option:checked {
  color: #080808;
  background: #ff5a12;
}

input[type="file"] {
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  border: 1px solid rgba(255, 90, 18, 0.4);
  border-radius: 8px;
  padding: 9px 12px;
  color: #190900;
  background: var(--accent);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.native-photo-upload {
  display: inline-grid;
  gap: 8px;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}

.native-photo-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.native-photo-upload-control {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 90, 18, 0.42);
  border-radius: 12px;
  padding: 0 18px;
  color: #150600;
  background: var(--accent);
  box-shadow: 0 14px 26px rgba(255, 90, 18, 0.14);
  font-weight: 1000;
}

.native-photo-upload-control svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.native-photo-upload.is-camera .native-photo-upload-control {
  width: 74px;
  height: 74px;
  min-height: 74px;
  border-radius: 24px;
  padding: 0;
  color: var(--accent);
  background: #fff0e7;
  box-shadow: none;
}

.native-photo-upload.is-ios .native-photo-upload-control {
  border-radius: 22px;
}

.native-photo-upload.is-android .native-photo-upload-control {
  border-radius: 50%;
}

.native-photo-upload small {
  max-width: 180px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(187, 45, 45, 0.7);
  box-shadow: 0 0 0 3px rgba(187, 45, 45, 0.12);
}

.main-content {
  width: var(--content);
  margin: 0 auto;
  padding: 22px 0 56px;
}

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

.span-4 {
  grid-column: span 4;
}

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

.span-8 {
  grid-column: span 8;
}

.span-12 {
  grid-column: span 12;
}

.panel,
.hero-panel {
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
}

.panel {
  padding: 20px;
}

.hero-panel {
  overflow: hidden;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(23, 23, 23, 0.97), rgba(45, 44, 42, 0.95)),
    var(--surface-strong);
  color: #fff7ef;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-panel .eyebrow,
.display-mode .eyebrow {
  color: #f0b26d;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 8px;
  font-size: 1.16rem;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.55;
}

.hero-panel p,
.display-mode p {
  color: rgba(255, 247, 239, 0.78);
}

.lead {
  max-width: 760px;
  font-size: 1.05rem;
}

.workout-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.82fr);
  gap: 20px;
  align-items: start;
}

.program-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.program-track-card {
  display: grid;
  min-height: 104px;
  align-content: space-between;
  gap: 6px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 14px;
  background: #fffdf9;
  text-decoration: none;
}

.program-track-card.active {
  border-color: rgba(187, 45, 45, 0.5);
  box-shadow: 0 0 0 3px rgba(187, 45, 45, 0.08);
}

.program-track-card strong,
.program-track-card small {
  display: block;
}

.program-track-card small {
  color: var(--muted);
  line-height: 1.35;
}

.week-to-date-workouts {
  display: grid;
  gap: 14px;
}

.week-workout-day {
  display: grid;
  gap: 10px;
}

.week-workout-day > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(24, 24, 24, 0.08);
  padding-bottom: 8px;
}

.week-workout-day > header span {
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.week-workout-day > header strong {
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-copy h1 {
  max-width: 760px;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.meta-row span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid rgba(255, 91, 0, 0.42);
  border-radius: 999px;
  padding: 5px 9px;
  color: #fff8ef;
  background: rgba(18, 13, 10, 0.88);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.32);
}

.hero-panel .meta-row span {
  color: rgba(255, 247, 239, 0.82);
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.08);
}

.badge-row,
.filter-row,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.badge-row {
  margin: 14px 0;
}

.badge,
.soft-tag,
.chip {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 850;
}

.badge {
  color: #fff6ee;
  background: rgba(187, 45, 45, 0.94);
}

.hero-panel .badge,
.display-mode .badge {
  color: #1a1715;
  background: #f0b26d;
}

.soft-tag,
.chip {
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fffdf9;
}

.chip {
  cursor: pointer;
}

.chip.active,
.chip:hover {
  color: #fffdf9;
  border-color: var(--surface-strong);
  background: var(--surface-strong);
}

.button,
.text-link,
.icon-button {
  cursor: pointer;
  text-decoration: none;
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 11px 15px;
  font-weight: 850;
}

.button-primary {
  color: #fffdf9;
  background: var(--accent);
}

.button-primary:hover {
  background: var(--accent-dark);
}

.button-secondary {
  color: var(--ink);
  border-color: rgba(24, 24, 24, 0.14);
  background: #fffdf9;
}

.button-ghost {
  color: var(--muted);
  border-color: rgba(24, 24, 24, 0.1);
  background: transparent;
}

.hero-panel .button-secondary,
.hero-panel .button-ghost {
  color: #fff7ef;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.text-link {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 850;
}

.panel-heading {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-heading h1,
.panel-heading h2 {
  margin-bottom: 0;
}

.block-list {
  display: grid;
  gap: 12px;
}

.block-list.compact {
  gap: 10px;
}

.workout-block {
  border: 1px solid rgba(24, 24, 24, 0.09);
  border-radius: var(--radius);
  padding: 14px;
  background: #fffdf9;
}

.hero-panel .workout-block,
.display-mode .workout-block {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.block-header {
  display: flex;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

.block-header > span {
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fffdf9;
  background: var(--surface-strong);
  font-size: 0.78rem;
  font-weight: 900;
}

.hero-panel .block-header > span,
.display-mode .block-header > span {
  color: #1c1714;
  background: #f0b26d;
}

.block-header strong,
.block-header small {
  display: block;
}

.block-header small {
  color: var(--muted);
  font-size: 0.82rem;
}

.hero-panel .block-header small,
.display-mode .block-header small {
  color: rgba(255, 247, 239, 0.68);
}

pre {
  overflow-x: auto;
  margin: 0;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.92rem;
  line-height: 1.48;
  white-space: pre-wrap;
}

.profile-form,
.score-form,
.admin-form {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

label input,
label select,
label textarea {
  color: var(--ink);
  font-weight: 500;
}

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

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

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-label {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  /* Token, not a fixed cream: this used to be #fffdf9, which stayed white in dark
     mode and ignored the gym's brand entirely. */
  background: var(--bf-surface, var(--surface, #fffdf9));
  color: var(--bf-ink, var(--ink, inherit));
}

.checkbox-label input {
  width: auto;
  min-height: auto;
}

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

.mini-row {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdf9;
  text-decoration: none;
}

.mini-row strong,
.mini-row small {
  display: block;
}

.mini-row small,
.mini-row span {
  color: var(--muted);
  font-size: 0.82rem;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.stats-row.one-column {
  grid-template-columns: 1fr;
}

.stat-card {
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdf9;
}

.stat-card span,
.stat-card strong {
  display: block;
}

.stat-card span {
  min-height: 34px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.stat-card strong {
  font-size: 1.55rem;
}

.wod-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
  gap: 16px;
  align-items: start;
}

.wod-program-strip {
  margin-bottom: 16px;
}

.wod-program-strip .panel-heading {
  margin-bottom: 10px;
}

.wod-program-strip .program-track-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wod-program-strip .program-track-card {
  min-height: 86px;
  padding: 12px;
}


.same-track-switcher .program-track-card.active,
.same-track-inline .program-track-card.active {
  border-color: rgba(255, 91, 0, 0.82);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* program-track-card is a <button> in the paged selector — reset button chrome. */
.same-track-switcher button.program-track-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.same-track-pager {
  display: flex;
  align-items: center;
  gap: 8px;
}
.same-track-pager-count {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.same-track-pager .icon-button[disabled] {
  opacity: 0.4;
  cursor: default;
}

.same-track-preview {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 91, 0, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 91, 0, 0.04);
}
.same-track-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.same-track-preview-head strong { display: block; font-size: 1.05rem; }
.same-track-preview-head small { display: block; color: var(--muted); }
.same-track-preview-current {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
}
.same-track-preview-desc {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.4;
}
.same-track-preview-blocks {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 3px;
}
.same-track-preview-blocks li { line-height: 1.35; }

.same-track-inline {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.same-track-inline > strong {
  color: #fff;
}

.display-track-switcher {
  max-width: 760px;
  margin: 14px 16px 0;
}

.display-track-switcher-heading {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.display-track-switcher h2 {
  margin: 0;
  font-size: 1.05rem;
}

.display-track-switcher .program-track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.display-track-switcher .program-track-card {
  min-height: 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.display-track-switcher .program-track-card strong {
  font-size: 0.92rem;
}

.display-track-switcher .program-track-card small {
  font-size: 0.72rem;
}

.workout-detail {
  display: grid;
  gap: 14px;
}

.detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

/* The WOD header stacks at EVERY width. The action bar is a wrapping flex row
   whose max-content width used to win the `auto` track and starve the title
   column to 0px (title wrapped 2 words/line, the week pill collapsed into an
   ellipse). One full-width track makes that structurally impossible. */
.workout-detail > .detail-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.workout-detail > .detail-header > div { min-width: 0; }

.workout-detail .detail-header h1 {
  max-width: 980px;
  margin-bottom: 10px;
  font-size: clamp(2.25rem, 5vw, 4.1rem);
  line-height: 0.98;
}

.workout-detail .detail-header p {
  max-width: 760px;
  color: rgba(255, 247, 239, 0.8);
}

.workout-detail .eyebrow {
  color: var(--accent);
}

.workout-detail .meta-row span {
  min-height: 32px;
  border: 1px solid rgba(255, 166, 94, 0.72);
  padding: 6px 11px;
  color: #170700;
  background: #ff7a2a;
  box-shadow: none;
  font-size: 0.84rem;
  font-weight: 950;
  text-shadow: none;
}

.workout-detail .badge {
  color: #180a03;
  background: linear-gradient(180deg, #ff7426, #fb5208);
}

.workout-detail .soft-tag,
.workout-detail .chip {
  color: #fff7ee;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.workout-detail ::selection {
  color: #180a03;
  background: rgba(255, 94, 20, 0.82);
}

.detail-actions {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-content: flex-end;
  min-width: 170px;
}

.detail-actions .button.is-favorite {
  background: rgba(255, 90, 18, 0.16);
  border-color: rgba(255, 90, 18, 0.55);
  color: #ffb886;
}
.detail-actions .button.is-favorite:hover {
  background: rgba(255, 90, 18, 0.26);
  color: #fff;
}

/* ============================================================
   Score logging — mode-aware form with strength sets
   ============================================================ */
.score-mode-hint {
  display: block;
  color: rgba(245, 241, 235, 0.5);
  font-size: 0.78rem;
  font-weight: 500;
  margin-top: 4px;
}
.score-mode-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 90, 18, 0.14);
  margin-bottom: 16px;
}
.score-mode-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 90, 18, 0.32);
  background: transparent;
  color: rgba(245, 241, 235, 0.78);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.score-mode-chip:hover {
  background: rgba(255, 90, 18, 0.12);
  color: #f7f3ef;
}
.score-mode-chip.active {
  background: #ff5a12;
  color: #fff;
  border-color: #ff5a12;
}

.score-sets-wrapper {
  border: 1px solid rgba(255, 90, 18, 0.16);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 90, 18, 0.04);
}
.score-sets-table {
  width: 100%;
  border-collapse: collapse;
}
.score-sets-table th,
.score-sets-table td {
  padding: 6px 8px;
  text-align: left;
  font-size: 0.84rem;
}
.score-sets-table th {
  color: rgba(245, 241, 235, 0.6);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 90, 18, 0.16);
}
.score-sets-table td:first-child {
  width: 40px;
  text-align: center;
  color: rgba(245, 241, 235, 0.6);
}
.score-sets-table input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 90, 18, 0.24);
  background: rgba(0, 0, 0, 0.2);
  color: #f7f3ef;
  font-size: 0.86rem;
  font-family: inherit;
}
.score-sets-table input:focus {
  outline: none;
  border-color: #ff5a12;
}
.score-sets-actions {
  display: flex;
  gap: 6px;
  padding: 8px 4px 0;
}

.score-submit-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}
.score-private-hint {
  flex-basis: 100%;
  color: rgba(245, 241, 235, 0.55);
  font-size: 0.74rem;
  font-style: italic;
}

.leaderboard-disabled {
  border: 1px dashed rgba(255, 90, 18, 0.32);
  background: rgba(255, 90, 18, 0.04);
}
.leaderboard-disabled-body {
  color: rgba(245, 241, 235, 0.7);
  font-size: 0.92rem;
  margin: 4px 0 0;
}

/* Per-block log form sits beneath the block body when expanded. */
.workout-block .block-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
}
.workout-block .block-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.workout-block.is-logging {
  border-color: rgba(255, 90, 18, 0.45);
  box-shadow: 0 0 0 1px rgba(255, 90, 18, 0.18);
}
.block-logged-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.18);
  color: #4ade80;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.block-score-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 90, 18, 0.22);
  border-radius: 12px;
  background: rgba(255, 90, 18, 0.04);
}
.block-score-form .block-mode-chips {
  padding: 0;
  border-bottom: none;
  margin-bottom: 2px;
}
.block-score-form label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(245, 241, 235, 0.78);
  display: grid;
  gap: 4px;
}
.block-score-form input,
.block-score-form select,
.block-score-form textarea {
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 90, 18, 0.24);
  background: rgba(0, 0, 0, 0.22);
  color: #f7f3ef;
  font-size: 0.86rem;
  font-family: inherit;
}
.block-score-form input:focus,
.block-score-form select:focus,
.block-score-form textarea:focus {
  outline: none;
  border-color: #ff5a12;
}
.block-score-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* Per-exercise rows inside a block's log form. */
.block-exercise-list {
  display: grid;
  gap: 6px;
  border: 1px dashed rgba(255, 90, 18, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 90, 18, 0.04);
}
.block-exercise-heading {
  display: block;
  color: rgba(245, 241, 235, 0.65);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.block-exercise-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 90, 18, 0.1);
}
.block-exercise-row:last-child { border-bottom: none; }
.block-exercise-name {
  font-weight: 700;
  color: #f7f3ef;
  font-size: 0.86rem;
  line-height: 1.2;
}
.block-exercise-fields {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.block-exercise-fields label {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(245, 241, 235, 0.55);
}
.block-exercise-fields label span {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.block-exercise-fields input {
  width: 64px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 90, 18, 0.24);
  background: rgba(0, 0, 0, 0.22);
  color: #f7f3ef;
  font-size: 0.84rem;
  font-family: inherit;
}
.block-exercise-fields input:focus {
  outline: none;
  border-color: #ff5a12;
}

/* ============================================================
   Meal row — Log vs View recipe split + inline peek
   ============================================================ */
/* Planned-meal row: stack the action buttons UNDER the meal info so the two
   pills ("Opskrift" + "Log dette måltid") never crowd/overlap a long title on a
   narrow card. */
.phone-meal-row.phone-planned-meal-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
}
.phone-meal-row.phone-planned-meal-row .phone-meal-row-actions {
  justify-content: flex-end;
}
.phone-meal-row.phone-planned-meal-row.is-recipe-open {
  background: rgba(255, 90, 18, 0.06);
}
.phone-meal-row-info { min-width: 0; }
.phone-meal-row-info span { display: flex; flex-direction: column; }
.phone-meal-row-info b {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.phone-meal-row-info strong {
  color: #131313;
  font-weight: 800;
  font-size: 0.92rem;
}
.phone-meal-row-info small {
  color: #555;
  font-size: 0.74rem;
}
.phone-meal-row-actions,
.today-meal-plan-row-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.meal-action-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 90, 18, 0.4);
  background: rgba(255, 90, 18, 0.06);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.meal-action-btn:hover {
  background: rgba(255, 90, 18, 0.16);
}
.meal-action-btn.meal-action-log {
  background: #ff5a12;
  border-color: #ff5a12;
  color: #fff;
}
.meal-action-btn.meal-action-log:hover {
  background: #ff7036;
}
.meal-action-btn.meal-action-log.is-logged {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.55);
  color: #2e8a4d;
}

.today-meal-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.today-meal-plan-row.is-recipe-open {
  grid-template-columns: 1fr;
}
.today-meal-plan-row-info { min-width: 0; }
.today-meal-plan-row-info span { display: flex; flex-direction: column; }
.today-meal-plan-row-info b {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.meal-recipe-peek {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 90, 18, 0.22);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(245, 241, 235, 0.88);
  font-size: 0.84rem;
}
.phone-meal-row.phone-planned-meal-row .meal-recipe-peek {
  color: #1f1f1f;
  background: rgba(255, 247, 239, 0.78);
  border-color: rgba(255, 90, 18, 0.28);
}
.meal-recipe-peek > div > strong {
  display: block;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--accent);
}
.meal-recipe-peek ul,
.meal-recipe-peek ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.meal-recipe-peek li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.84rem;
  line-height: 1.32;
}
.meal-recipe-peek ol li {
  display: list-item;
}
.meal-recipe-peek-empty {
  grid-column: 1 / -1;
  padding: 10px 12px;
  color: rgba(245, 241, 235, 0.6);
  font-size: 0.82rem;
  font-style: italic;
}

.tag-section {
  display: grid;
  gap: 8px;
}

.tag-section > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tag-section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.module-control {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.module-control span,
.module-control a {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #f3e8dd;
  font-size: 0.82rem;
  font-weight: 850;
  text-decoration: none;
}

.module-control a.active,
.module-control a:hover {
  color: #1b0c05;
  background: var(--accent);
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.note-card {
  min-height: 0;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 14px;
  background: #fffdf9;
}

.note-card p {
  margin-bottom: 0;
}

.side-stack {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 94px;
}

.side-stack .panel {
  padding: 16px;
}

.leaderboard-panel {
  display: grid;
  gap: 14px;
}

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

.podium-card {
  display: grid;
  min-height: 118px;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdf9;
}

.podium-card .rank {
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 900;
}

.podium-card span:last-child {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

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

.leaderboard-row {
  display: grid;
  grid-template-columns: 42px minmax(140px, 1.1fr) minmax(120px, 0.8fr) minmax(70px, 0.55fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 10px;
  background: #fffdf9;
}

.result-comments {
  display: grid;
  grid-column: 2 / -1;
  gap: 8px;
  border-top: 1px solid rgba(24, 24, 24, 0.08);
  padding-top: 10px;
}

.result-comment {
  border-left: 3px solid rgba(187, 45, 45, 0.5);
  padding: 8px 10px;
  background: rgba(24, 24, 24, 0.035);
}

.result-comment strong,
.result-comment small {
  display: block;
}

.result-comment p {
  margin: 3px 0;
  color: var(--ink);
  font-size: 0.9rem;
}

.result-comment small {
  color: var(--muted);
  font-size: 0.74rem;
}

.leaderboard-row.is-mine {
  border-color: rgba(187, 45, 45, 0.4);
  box-shadow: 0 0 0 3px rgba(187, 45, 45, 0.08);
}

.rank-cell {
  font-weight: 900;
}

.member-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.avatar {
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fffdf9;
  background: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
}

.member-cell strong,
.member-cell small,
.score-cell strong,
.score-cell small {
  display: block;
}

.member-cell strong,
.score-cell strong {
  overflow-wrap: anywhere;
}

.member-cell small,
.score-cell small,
.notes-cell {
  color: var(--muted);
  font-size: 0.78rem;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.icon-button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  color: var(--muted);
  background: #fffdf9;
  font-size: 0.75rem;
  font-weight: 850;
}

.icon-button:hover {
  color: var(--ink);
  border-color: rgba(24, 24, 24, 0.25);
}

.icon-button.danger {
  color: var(--danger);
}

.leaderboard-cta {
  display: flex;
  justify-content: flex-start;
}

.saved-toolbar {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 340px);
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.search-input,
.date-filter {
  min-height: 40px;
}

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

.saved-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 16px;
  background: #fffdf9;
}

.saved-card h2 {
  margin-bottom: 8px;
}

.single-column {
  max-width: 980px;
  margin: 0 auto;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  align-items: start;
}

.admin-side-stack {
  display: grid;
  gap: 16px;
}

.coach-dashboard,
.coach-client-layout {
  align-items: start;
}

.coach-client-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
}

.quick-stack,
.detail-grid,
.program-assignment-grid,
.program-builder-grid,
.metric-grid,
.resource-grid,
.exercise-grid,
.client-grid,
.module-nav-grid,
.demo-update-grid,
.community-feed,
.habit-list {
  display: grid;
  gap: 12px;
}

.quick-stack {
  grid-template-columns: repeat(3, 1fr);
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.program-assignment-grid,
.program-builder-grid,
.metric-grid,
.resource-grid,
.exercise-grid,
.client-grid,
.module-nav-grid,
.demo-update-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.metric-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.quick-card,
.summary-card,
.resource-card,
.client-card,
.module-card,
.community-post,
.habit-row {
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 14px;
  background: #fffdf9;
  text-decoration: none;
}

.quick-card {
  display: grid;
  gap: 4px;
}

.quick-card strong {
  font-size: 1.6rem;
}

.quick-card span,
.summary-card span,
.summary-card small,
.resource-card small,
.client-card small,
.module-card small,
.community-post small,
.habit-row small,
.small-note {
  color: var(--muted);
  font-size: 0.82rem;
}

.summary-card h2,
.resource-card strong,
.client-card strong,
.module-card strong,
.community-post strong,
.habit-row strong {
  display: block;
  margin-bottom: 6px;
}

.client-card {
  display: grid;
  gap: 10px;
}

.client-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.client-card-meta span {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  background: rgba(24, 24, 24, 0.05);
  font-size: 0.75rem;
  font-weight: 800;
}

.module-card.active,
.module-card:hover,
.resource-card:hover,
.client-card:hover {
  border-color: rgba(187, 45, 45, 0.34);
  box-shadow: 0 0 0 3px rgba(187, 45, 45, 0.07);
}

.inline-form,
.message-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.message-form {
  grid-template-columns: 1fr auto;
  margin-top: 14px;
}

.checkin-form {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 16px;
  background: #fffdf9;
}

.message-panel {
  min-height: 620px;
}

.message-thread {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 420px;
}

.message-bubble {
  max-width: 72%;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdf9;
}

.message-bubble.mine {
  justify-self: end;
  color: #fffdf9;
  background: var(--surface-strong);
}

.message-bubble p {
  margin-bottom: 4px;
  color: inherit;
}

.message-preview {
  margin-top: 12px;
  margin-bottom: 0;
}

.nutrition-layout {
  align-items: start;
}

.macro-ring-grid,
.meal-grid,
.nutrition-form,
.nutrition-target-form {
  display: grid;
  gap: 12px;
}

.macro-ring-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.macro-card,
.meal-card,
.nutrition-section {
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  background: #fffdf9;
}

.macro-card {
  display: grid;
  gap: 8px;
  min-height: 136px;
  align-content: start;
  padding: 14px;
}

.macro-card span,
.macro-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.macro-card strong {
  font-size: 1.6rem;
}

.progress-bar {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(24, 24, 24, 0.08);
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.nutrition-section {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
}

.nutrition-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.nutrition-form label:nth-child(2) {
  grid-column: span 2;
}

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

.meal-card {
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 14px;
}

.nutrition-disclaimer {
  margin-top: 14px;
  border: 1px solid rgba(181, 139, 67, 0.28);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--muted);
  background: rgba(181, 139, 67, 0.08);
  font-size: 0.86rem;
  line-height: 1.45;
}

.nutrition-target-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.nutrition-target-form label:last-of-type {
  grid-column: span 4;
}

.mini-row.is-complete {
  color: var(--muted);
  background: rgba(47, 122, 80, 0.08);
}

.mini-row.is-complete strong {
  text-decoration: line-through;
}

.habit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 900;
}

.status-pill.ready {
  color: #fffdf9;
  background: var(--success);
}

.status-pill.warning {
  color: #1f1710;
  background: #f0b26d;
}

.demo-action-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.program-list,
.library-list {
  display: grid;
  gap: 8px;
}

.workout-library-panel {
  display: grid;
  gap: 12px;
}

.library-result-count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* Prev/Next through workout-database search results inside the editor. */
.editor-result-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 91, 0, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 91, 0, 0.05);
}
.editor-result-nav-count {
  font-size: 0.85rem;
  color: var(--muted);
}
.button.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.program-list-row,
.library-row {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdf9;
}

.program-list-row strong,
.program-list-row small,
.library-row strong,
.library-row small {
  display: block;
}

.program-list-row small,
.library-row small {
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}

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

.calendar-list.compact {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.calendar-row {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffdf9;
}

.calendar-row strong,
.calendar-row small {
  display: block;
}

.calendar-row small {
  color: var(--muted);
  margin-top: 4px;
}

.compact-calendar {
  position: sticky;
  top: 86px;
}

.calendar-date-picker {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.calendar-date-picker span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-summary-strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 7px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.48);
}

.calendar-summary-strip strong {
  color: var(--ink);
}

.calendar-summary-strip span {
  color: var(--accent);
  font-weight: 900;
}

.weekly-overview {
  margin-top: 14px;
  border-top: 1px solid rgba(24, 24, 24, 0.08);
  padding-top: 12px;
}

.weekly-overview summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 950;
}

.weekly-overview .calendar-list {
  margin-top: 12px;
}

.empty-state {
  display: grid;
  min-height: 130px;
  place-items: center;
  border: 1px dashed rgba(24, 24, 24, 0.18);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.48);
}

.empty-state p {
  max-width: 420px;
  margin-bottom: 0;
}

.flash {
  position: fixed;
  top: 82px;
  left: 50%;
  z-index: 50;
  transform: translateX(-50%);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: #fffdf9;
  background: var(--success);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
  font-weight: 850;
}

.flash-error {
  background: var(--danger);
}

.display-mode {
  display: grid;
  min-height: 100vh;
  padding: 34px;
  color: #fff7ef;
  background:
    linear-gradient(135deg, rgba(16, 16, 16, 0.96), rgba(37, 35, 32, 0.98)),
    #111111;
}

.display-wod-only {
  position: relative;
}

.display-exit {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  padding: 10px 16px;
  color: #fff7ef;
  background: rgba(0, 0, 0, 0.42);
  font-size: 0.9rem;
  font-weight: 850;
  opacity: 0.25;
  text-decoration: none;
  transition: opacity 160ms ease, background 160ms ease;
}

.display-exit:hover,
.display-exit:focus {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

.display-day-stack {
  display: grid;
  gap: 42px;
}

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

.display-overview {
  display: grid;
  align-content: start;
  gap: 24px;
  min-height: calc(100vh - 68px);
}

.display-overview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
}

.display-controls {
  display: grid;
  gap: 12px;
  justify-items: end;
  min-width: 240px;
}

.display-controls > span {
  color: rgba(255, 247, 239, 0.72);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.display-module-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.display-module-options a,
.display-nav-button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 12px 15px;
  color: #fff7ef;
  background: rgba(255, 255, 255, 0.07);
  font-weight: 950;
  text-decoration: none;
}

.display-module-options a:hover,
.display-nav-button:hover {
  border-color: rgba(255, 90, 18, 0.72);
  background: rgba(255, 90, 18, 0.16);
}

.display-nav-button.primary {
  color: #160900;
  background: var(--accent);
  border-color: rgba(255, 90, 18, 0.9);
}

.display-nav-button.disabled {
  color: rgba(255, 247, 239, 0.55);
  background: rgba(255, 255, 255, 0.055);
}

.display-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.display-overview-card {
  display: grid;
  gap: 8px;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  padding: clamp(16px, 1.7vw, 24px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
}

.display-overview-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #160900;
  background: var(--accent);
  font-size: 0.95rem;
  font-weight: 1000;
}

.display-overview-card strong {
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
}

.display-overview-card small {
  color: #f0b26d;
  font-weight: 850;
}

.display-overview-card pre {
  margin: 0;
  white-space: pre-wrap;
  color: rgba(255, 247, 239, 0.86);
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  line-height: 1.28;
}

.display-block-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - 68px);
}

.display-block-topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.display-block-topline > div {
  display: grid;
  gap: 3px;
  text-align: center;
}

.display-block-topline span {
  color: rgba(255, 247, 239, 0.68);
  font-weight: 850;
  text-transform: uppercase;
}

.display-block-topline strong {
  font-size: clamp(1.2rem, 2vw, 2rem);
}

.display-kicker {
  margin-bottom: 18px;
  color: #f0b26d;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 900;
  text-transform: uppercase;
}

.display-mode h1 {
  max-width: 1050px;
  margin-bottom: 18px;
  font-size: clamp(4.4rem, 9vw, 9.5rem);
}

.display-mode h2 {
  font-size: 2rem;
}

.display-blocks .block-list {
  grid-template-columns: repeat(var(--display-columns, 2), minmax(0, 1fr));
  height: 100%;
}

.display-blocks .workout-block {
  min-height: 220px;
  padding: 20px;
}

.display-block-screen .display-blocks .workout-block {
  min-height: calc(100vh - 170px);
}

.display-blocks pre {
  font-size: clamp(1.2rem, 2vw, 1.85rem);
}

@media (max-width: 1040px) {
  .topbar,
  .workout-hero,
  .wod-layout,
  .admin-layout,
  .coach-client-layout,
  .display-mode {
    grid-template-columns: 1fr;
  }

  .topbar {
    position: static;
  }

  .topnav {
    justify-self: start;
    overflow-x: auto;
    width: 100%;
  }

  .user-switcher {
    justify-self: stretch;
  }

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

  .side-stack {
    position: static;
  }

  .workout-detail {
    overflow: hidden;
  }

  .workout-detail .detail-header {
    grid-template-columns: 1fr;
  }

  .workout-detail .detail-header > div:first-child {
    min-width: 0;
  }

  .workout-detail .detail-header h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .detail-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .detail-actions .button {
    width: 100%;
    min-width: 0;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  :root {
    --content: min(100vw - 20px, 1180px);
  }

  .main-content {
    padding-top: 8px;
  }

  .topbar {
    gap: 10px;
    padding-top: 12px;
  }

  .panel,
  .hero-panel {
    padding: 16px;
  }

  .form-grid.two,
  .form-grid.three,
  .note-grid,
  .saved-toolbar,
  .saved-grid,
  .macro-ring-grid,
  .meal-grid,
  .nutrition-form,
  .nutrition-target-form,
  .quick-stack,
  .detail-grid,
  .inline-form,
  .podium,
  .display-blocks .block-list {
    grid-template-columns: 1fr;
  }

  .message-bubble {
    max-width: 100%;
  }

  .detail-header,
  .panel-heading {
    display: grid;
  }

  .workout-detail {
    overflow: hidden;
  }

  .workout-detail .detail-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .workout-detail .detail-header > div:first-child {
    min-width: 0;
  }

  .workout-detail .detail-header h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .workout-detail .meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .workout-detail .meta-row span {
    min-width: 0;
    min-height: 32px;
    border-color: rgba(255, 166, 94, 0.72);
    color: #170700;
    background: #ff7a2a;
    font-size: 0.74rem;
    line-height: 1.1;
    box-shadow: none;
  }

  .detail-actions,
  .row-actions {
    justify-content: flex-start;
  }

  /* v542: was a horizontal scroll-snap carousel (display:flex + overflow-x:auto,
     cards at 78vw). On a 375px phone that showed ~1.2 of 3 cards, so a client
     reported she "can't change slides" — the other same-day workouts were simply
     off-screen, and the pager arrows were disabled (3 choices = ONE page of 3),
     which read as broken controls. Stack them: every option visible and tappable
     with no side-swipe to discover. The dead pager is dropped in JS. */
  .wod-program-strip .program-track-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    padding-bottom: 0;
  }

  .wod-program-strip .program-track-card {
    min-height: 82px;
    min-width: 0;
  }

  .workout-detail .detail-header h1 {
    font-size: clamp(2.1rem, 12vw, 3.35rem);
    line-height: 1.02;
  }

  .detail-actions {
    grid-template-columns: 1fr 1fr;
    order: -1;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }

  .detail-actions .button {
    min-height: 42px;
    width: 100%;
    padding-inline: 10px;
    text-align: center;
    white-space: normal;
  }

  .detail-actions .button-ghost {
    grid-column: 1 / -1;
  }

  .badge,
  .soft-tag,
  .chip {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 0.74rem;
  }

  .leaderboard-row {
    grid-template-columns: 36px 1fr;
  }

  .score-cell,
  .notes-cell,
  .row-actions,
  .result-comments {
    grid-column: 2;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .module-control {
    width: 100%;
    overflow-x: auto;
  }

  .display-mode {
    padding: 18px;
  }

  .display-overview-header,
  .display-block-topline {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  /* v548: the workout title sits in the SAME inline-flex row as "Forrige" and
     "Normal visning" (.display-topline-left), and that row cannot wrap. On a
     phone the two buttons took the width and the title was starved to roughly
     one character, so the name rendered as a vertical column of single letters.
     Let the row wrap and give the title its own full-width line. */
  .display-topline-left,
  .display-topline-right {
    flex-wrap: wrap;
    width: 100%;
  }

  .display-topline-title {
    flex: 1 1 100%;
    min-width: 0;
  }

  .display-block-topline strong {
    font-size: clamp(1rem, 4.6vw, 1.5rem);
    overflow-wrap: anywhere;
  }

  .display-controls {
    justify-items: start;
  }

  .display-module-options {
    justify-content: flex-start;
  }

  .display-mode h1 {
    font-size: clamp(3rem, 18vw, 5.5rem);
  }
}

/* BeastFactory coach-platform shell */
:root {
  color-scheme: dark;
  --bg: #050505;
  --surface: #121212;
  --surface-strong: #080808;
  --ink: #f5f1eb;
  --muted: #a8a09a;
  --line: rgba(255, 255, 255, 0.11);
  --accent: #ff5a12;
  --accent-dark: #c94108;
  --olive: #65715b;
  --gold: #f0a24a;
  --blue: #5c6870;
  --success: #36a66b;
  --danger: #d04a3c;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  --radius: 8px;
  --content: min(100%, calc(100vw - 312px));
}

html,
body {
  background: #050505;
}

/* Sand pages (coach/admin/client) and the Kost route light the shell, but the
   dark <body> shows wherever the shell doesn't fully cover the viewport — most
   visibly the narrow Kost phone column on desktop. Light the body to match. */
body:has(.app-shell.bf-sand),
body:has(.kost-app) {
  background: var(--bf-sand, #EAE6DC);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 90, 18, 0.12), transparent 26rem),
    linear-gradient(135deg, #030303 0%, #101010 52%, #050505 100%);
}

.app-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  /* Cap at viewport height and let the menu scroll on its own, so long nav lists
     (all the way down to Indstillinger / beastfactory.dk) stay reachable instead
     of falling below the fold while only the page body scrolls. */
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 26px 24px;
  background:
    linear-gradient(90deg, rgba(255, 90, 18, 0.055), transparent 52%),
    #050505;
}

.sidebar .brand-lockup {
  gap: 12px;
  margin-bottom: 34px;
}

.sidebar .brand-mark {
  width: 58px;
  height: 58px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sidebar .brand-lockup strong {
  color: #fff;
  font-size: 2rem;
  line-height: 0.9;
  letter-spacing: 0;
}

.sidebar .brand-lockup small {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.sidebar-nav {
  display: grid;
  gap: 8px;
}

.sidebar-nav-secondary {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding-top: 26px;
}

.sidebar-link {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 12px;
  color: rgba(245, 241, 235, 0.74);
  font-weight: 800;
  text-decoration: none;
}

.sidebar-external-mark {
  font-size: 0.8rem;
  opacity: 0.6;
}

.sidebar-link:hover,
.sidebar-link.active {
  color: #fff;
  border-color: rgba(255, 90, 18, 0.55);
  background:
    linear-gradient(90deg, rgba(255, 90, 18, 0.18), rgba(255, 90, 18, 0.04)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 3px 0 0 var(--accent), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.sidebar-icon {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 1.1rem;
}

.nav-badge {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #180d07;
  background: var(--accent);
  font-size: 0.75rem;
}

.sidebar-profile,
.beast-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.sidebar-profile strong,
.sidebar-profile small,
.beast-mode-card strong,
.beast-mode-card small {
  display: block;
}

.sidebar-profile small,
.beast-mode-card small {
  color: var(--muted);
}

.avatar-ring {
  border: 1px solid var(--accent);
  background: #151515;
}

.beast-mode-card {
  border: 1px solid rgba(255, 90, 18, 0.28);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255, 90, 18, 0.08);
}

.beast-mode-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.beast-mode-card strong {
  color: var(--accent);
  font-size: 0.9rem;
}

.topbar {
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr) auto minmax(220px, 280px);
  align-items: center;
  align-self: start;
  width: 100%;
  min-height: 70px;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 34px;
  background: rgba(5, 5, 5, 0.78);
}

.topnav {
  gap: 28px;
  align-self: stretch;
  align-items: stretch;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  scrollbar-width: none;
}

.topnav::-webkit-scrollbar {
  display: none;
}

.topnav a {
  min-height: 58px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 18px 0;
  color: rgba(245, 241, 235, 0.72);
  font-size: 0.94rem;
}

.topnav a.active,
.topnav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
  box-shadow: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
}

.mobile-menu-button,
.mobile-top-title,
.mobile-menu-backdrop {
  display: none;
}

@media (min-width: 721px) {
  .client-topbar,
  .coach-topbar {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
  }

  .client-topbar .topnav,
  .coach-topbar .topnav {
    display: none;
  }

  .coach-topbar .coach-search {
    margin-right: auto;
  }
}

.toolbar-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  font-weight: 900;
}

.toolbar-icon.has-alert::after {
  content: "7";
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #180d07;
  background: var(--accent);
  font-size: 0.68rem;
}

.user-switcher label {
  color: rgba(245, 241, 235, 0.68);
}

.user-switcher select,
input,
select,
textarea {
  border-color: rgba(255, 255, 255, 0.11);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.055);
}

input,
select,
textarea,
label input,
label select,
label textarea {
  color: var(--ink);
}

input::placeholder,
textarea::placeholder {
  color: rgba(245, 241, 235, 0.42);
}

.main-content {
  grid-column: 2;
  width: 100%;
  margin: 0;
  padding: 34px;
}

.panel,
.hero-panel,
.workout-block,
.stat-card,
.quick-card,
.summary-card,
.resource-card,
.client-card,
.module-card,
.community-post,
.habit-row,
.saved-card,
.program-track-card,
.calendar-row,
.library-row,
.program-list-row,
.note-card,
.podium-card,
.leaderboard-row,
.meal-card,
.macro-card,
.nutrition-section,
.mini-row {
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    #111111;
  box-shadow: var(--shadow);
}

.hero-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 90, 18, 0.18), transparent 28rem),
    linear-gradient(135deg, #171717, #080808);
}

.calendar-summary-strip {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.calendar-summary-strip strong,
.weekly-overview summary {
  color: #fff;
}

.weekly-overview {
  border-top-color: rgba(255, 255, 255, 0.08);
}

p,
.quick-card span,
.summary-card span,
.summary-card small,
.resource-card small,
.client-card small,
.module-card small,
.community-post small,
.habit-row small,
.small-note,
.mini-row small,
.mini-row span,
.member-cell small,
.score-cell small,
.notes-cell,
.block-header small,
.program-list-row small,
.library-row small,
.calendar-row small,
.macro-card span,
.macro-card small {
  color: var(--muted);
}

.eyebrow,
.text-link {
  color: var(--accent);
}

.button-primary,
.badge {
  color: #1b0c05;
  background: linear-gradient(180deg, #ff6a1d, #f04f0c);
}

.button-primary:hover {
  background: linear-gradient(180deg, #ff7a30, #d94307);
}

.button-secondary,
.button-ghost,
.chip,
.soft-tag,
.icon-button {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

.chip.active,
.chip:hover,
.module-control a.active,
.module-control a:hover {
  color: #1b0c05;
  background: var(--accent);
}

.progress-bar {
  background: rgba(255, 255, 255, 0.1);
}

.progress-bar span {
  background: var(--accent);
}

.planner-shell {
  display: grid;
  gap: 18px;
}

.planner-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.planner-date-controls,
.planner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.circle-button,
.planner-range {
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.045);
  font-weight: 900;
}

.planner-range {
  padding: 0 14px;
}

.planner-range.active {
  border-color: rgba(255, 90, 18, 0.78);
  color: var(--accent);
}

.planner-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.library-panel {
  position: sticky;
  top: 110px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(12, 12, 12, 0.84);
}

.library-panel a {
  border-radius: 6px;
  padding: 11px 8px;
  color: var(--ink);
  text-decoration: none;
}

.library-panel a:hover {
  color: var(--accent);
  background: rgba(255, 90, 18, 0.08);
}

.training-planner {
  display: grid;
  grid-template-columns: repeat(7, minmax(116px, 1fr));
  min-height: 680px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, 0.05), transparent 26rem),
    rgba(255, 255, 255, 0.025);
}

.planner-day {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 336px;
  border-right: 1px solid rgba(255, 255, 255, 0.085);
  border-bottom: 1px solid rgba(255, 255, 255, 0.085);
  padding: 16px;
}

.planner-day:nth-child(7n) {
  border-right: 0;
}

.planner-day header {
  display: grid;
  gap: 12px;
}

.planner-day header span {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.planner-day header strong {
  color: rgba(245, 241, 235, 0.68);
  font-size: 1rem;
}

.planner-day.is-today header strong {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #1b0c05;
  background: var(--accent);
}

.planner-card-stack {
  display: grid;
  align-content: start;
  gap: 8px;
  margin-top: 16px;
}

.planner-workout-card,
.more-workouts {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    #151515;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.planner-workout-card span {
  overflow: hidden;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.planner-workout-card strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-workout-card small,
.more-workouts {
  color: var(--muted);
  font-size: 0.78rem;
}

.planner-workout-main {
  display: grid;
  gap: 8px;
  text-decoration: none;
}

.planner-workout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.planner-workout-actions button {
  min-height: 28px;
  border: 1px solid rgba(255, 90, 18, 0.32);
  border-radius: 7px;
  padding: 5px 8px;
  color: #fff7ef;
  background: rgba(255, 90, 18, 0.08);
  font-size: 0.72rem;
  font-weight: 900;
  cursor: pointer;
}

.more-workouts {
  display: block;
  border-left-color: rgba(255, 90, 18, 0.45);
  padding: 9px 10px;
}

.client-topbar {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

.client-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
}

.client-user-card strong,
.client-user-card small {
  display: block;
}

.client-user-card small {
  color: var(--muted);
}

.client-help-card {
  display: grid;
  gap: 12px;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
}

.client-help-card strong {
  text-transform: uppercase;
}

.client-help-card p {
  margin-bottom: 0;
}

.client-dashboard {
  display: grid;
  gap: 22px;
}

.client-hero-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.client-hero-row h1 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1;
}

.client-hero-row p {
  margin-bottom: 0;
}

.fist {
  color: var(--accent);
  font-size: 1rem;
  vertical-align: middle;
}

.streak-card {
  display: grid;
  min-width: 120px;
  justify-items: center;
  border-radius: var(--radius);
  padding: 12px 16px;
  background: rgba(255, 90, 18, 0.06);
}

.streak-card::before {
  content: "🔥";
  font-size: 1.5rem;
}

.streak-card strong {
  font-size: 1.5rem;
}

.streak-card small {
  color: var(--muted);
}

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

.client-card-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.055), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    #101010;
  box-shadow: var(--shadow);
}

.client-card-panel .empty-state {
  min-height: 150px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.todays-plan {
  grid-column: span 6;
}

.progress-overview {
  grid-column: span 6;
}

.upcoming-workouts,
.habit-tracker-card,
.coach-message-card {
  grid-column: span 4;
}

.recent-metrics-card {
  grid-column: span 12;
}

.client-card-heading,
.client-card-footer,
.client-plan-row,
.client-mini-row,
.progress-goal-row,
.habit-week-row,
.coach-message-body {
  padding: 14px 18px;
}

.client-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-transform: uppercase;
}

.client-card-heading span,
.client-card-heading a,
.client-card-footer {
  color: var(--muted);
  font-size: 0.84rem;
  text-decoration: none;
  text-transform: none;
}

.client-card-heading strong {
  letter-spacing: 0.02em;
}

.client-plan-list,
.client-mini-list,
.habit-week-list {
  display: grid;
}

.client-plan-row,
.client-mini-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
}

.client-mini-row {
  grid-template-columns: 56px 1fr auto;
}

.client-plan-row span,
.client-mini-row span {
  display: block;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.client-plan-row strong,
.client-mini-row strong {
  display: block;
  color: #fff;
}

.client-plan-row small,
.client-mini-row small {
  color: var(--muted);
}

.workout-thumb {
  display: grid;
  place-items: center;
  min-height: 70px;
  border-radius: 6px;
  color: var(--accent);
  background:
    linear-gradient(135deg, rgba(255, 90, 18, 0.18), rgba(255, 255, 255, 0.04)),
    #181818;
  font-size: 1.4rem;
  font-weight: 900;
}

.workout-thumb.small {
  min-height: 46px;
  font-size: 1rem;
}

.client-card-footer {
  display: block;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-goal-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(130px, 0.8fr);
  gap: 14px;
  align-items: center;
}

.progress-goal-row span {
  color: #fff;
}

.progress-goal-row strong {
  font-size: 0.92rem;
}

.habit-week-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.habit-dots {
  display: flex;
  gap: 7px;
}

.habit-dots span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 90, 18, 0.55);
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.habit-dots span.done {
  color: #1b0c05;
  background: var(--accent);
}

.coach-message-body {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  align-items: start;
}

.coach-message-body .avatar {
  width: 64px;
  height: 64px;
}

.coach-message-body strong {
  color: var(--accent);
}

.coach-message-body p {
  margin: 8px 0;
  color: #d8d2ca;
}

.coach-message-card .button {
  margin: 0 18px 18px;
}

.recent-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0 18px 18px;
}

.recent-metric {
  display: grid;
  gap: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
}

.recent-metric:last-child {
  border-right: 0;
}

.recent-metric span {
  color: var(--muted);
  font-size: 0.86rem;
}

.recent-metric strong {
  color: #fff;
  font-size: 1.1rem;
}

.recent-metric small.positive {
  color: #67d94b;
}

.recent-metric small.negative {
  color: var(--accent);
}

.sparkline {
  width: 100%;
  height: 28px;
  clip-path: polygon(0 80%, 12% 58%, 24% 50%, 36% 68%, 48% 84%, 60% 76%, 72% 86%, 84% 67%, 100% 72%, 100% 100%, 0 100%);
  background: linear-gradient(90deg, var(--accent), transparent);
}

.sparkline.green {
  background: linear-gradient(90deg, #9be66e, transparent);
}

.client-page-shell {
  display: grid;
  gap: 20px;
}

/* FLEX-WRAP, not `minmax(0,1fr) auto`: the grid form let the action slot's
   max-content width starve the title column to 0px once the actions grew — the
   exact failure that mangled the WOD header. Wrapping degrades instead. */
.client-page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 20px;
  align-items: flex-end;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 12px;
}
.client-page-header > :first-child { flex: 1 1 240px; min-width: 0; }

.client-page-header h1 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
}

.client-page-header p {
  margin: 0;
}

.client-subtabs {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 26px;
}

.client-subtabs a,
.client-subtabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 14px 0 12px;
  color: rgba(245, 241, 235, 0.76);
  background: none;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.client-subtabs a.active,
.client-subtabs a:hover,
.client-subtabs button.active,
.client-subtabs button:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.portal-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.portal-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 0.46fr);
  gap: 14px;
  align-items: start;
}

.portal-main-stack,
.portal-side-stack {
  display: grid;
  gap: 14px;
}

.portal-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  color: var(--ink);
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.055), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    #101010;
  box-shadow: var(--shadow);
}

.client-page-shell input,
.client-page-shell select,
.client-page-shell textarea,
.coach-command-shell input,
.coach-command-shell select,
.coach-command-shell textarea,
.auth-card input,
.auth-card select,
.auth-card textarea,
.portal-card input,
.portal-card select,
.portal-card textarea {
  border-color: rgba(255, 255, 255, 0.13);
  color: #fff;
  background-color: rgba(255, 255, 255, 0.045);
  color-scheme: dark;
}

.client-page-shell input::placeholder,
.client-page-shell textarea::placeholder,
.coach-command-shell input::placeholder,
.coach-command-shell textarea::placeholder,
.portal-card input::placeholder,
.portal-card textarea::placeholder {
  color: rgba(245, 241, 235, 0.38);
}

.client-page-shell select option,
.coach-command-shell select option,
.auth-card select option,
.portal-card select option {
  color: #f7f3ef;
  background: #111;
}

.portal-card-heading,
.portal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.085);
  padding: 16px 18px;
}

.portal-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.085);
  border-bottom: 0;
  color: rgba(245, 241, 235, 0.74);
  font-weight: 800;
  text-decoration: none;
}

.portal-card-footer:hover,
.portal-link-list a:hover {
  color: var(--accent);
}

.portal-card-heading strong {
  color: #fff;
  text-transform: uppercase;
}

.portal-card-heading span,
.portal-meta-row,
.portal-stat-line span,
.portal-card-footer,
.nutrition-target-metric small,
.meal-number small,
.habit-score-card small,
.portal-insight-list span,
.body-metric-row small {
  color: var(--muted);
}

.portal-kicker,
.meal-number span {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.program-hero-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.44fr) 1fr;
}

.program-visual,
.portal-thumb,
.meal-thumb {
  background:
    radial-gradient(circle at 62% 25%, rgba(255, 90, 18, 0.3), transparent 7rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 90, 18, 0.08)),
    #151515;
}

.program-visual {
  display: grid;
  min-height: 260px;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.program-visual span {
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border: 1px solid rgba(255, 90, 18, 0.55);
  border-radius: 50%;
  color: var(--accent);
  font-size: 2.2rem;
  font-weight: 1000;
  box-shadow: 0 0 44px rgba(255, 90, 18, 0.18);
}

.program-hero-copy {
  display: grid;
  gap: 16px;
  align-content: center;
  padding: 28px;
}

.program-hero-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
}

.program-hero-copy p {
  max-width: 62ch;
  margin: 0;
}

.portal-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.9rem;
}

.training-session-list,
.training-database-list,
.portal-meal-list,
.portal-stat-list,
.portal-link-list,
.portal-insight-list,
.strength-list,
.body-metric-list {
  display: grid;
}

.training-empty {
  color: var(--muted);
  line-height: 1.45;
  padding: 8px 2px;
}
.portal-card-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Program tab — weekly overview strip (Mon–Sun) */
.program-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.program-week-day {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 6px;
  min-height: 92px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.program-week-day.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.program-week-day-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.program-week-day-label small { font-size: 0.85rem; font-weight: 800; color: inherit; }
.program-week-day-items { display: grid; gap: 4px; align-content: start; }
.program-week-pill {
  font-size: 0.68rem;
  line-height: 1.2;
  border-radius: 6px;
  padding: 4px 6px;
  background: rgba(111, 211, 255, 0.16);
  color: #9fe2ff;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-week-pill.completed { background: rgba(126, 231, 135, 0.18); color: #a7f0ae; }
.program-week-pill.skipped { background: rgba(255, 255, 255, 0.06); color: var(--muted); text-decoration: line-through; }
.program-week-empty { color: rgba(255, 255, 255, 0.18); text-align: center; font-size: 0.8rem; }

/* Program tab — assigned program rows */
.assigned-program-list { display: grid; gap: 10px; }
.assigned-program-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px;
}
.assigned-program-main strong { display: block; }
.assigned-program-main small { display: block; color: var(--muted); margin-bottom: 6px; }
.assigned-program-pct { color: var(--accent); }
.program-empty-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

.training-session-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto minmax(250px, auto);
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 14px 18px;
  text-decoration: none;
}

.training-session-row:hover,
.portal-meal-row:hover {
  background: rgba(255, 90, 18, 0.045);
}

.training-library-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 24px;
}

.training-library-intro h2 {
  margin: 7px 0 8px;
  color: #fff;
}

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

.training-library-intro > strong {
  color: var(--accent);
  font-size: 2rem;
  white-space: nowrap;
}

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

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

.workout-type-tile {
  display: grid;
  min-height: 132px;
  align-content: space-between;
  border: 1px solid var(--bf-line, #E5DFD2);
  border-radius: 16px;
  padding: 18px;
  color: var(--bf-ink, #1C1A17);
  background: #fff;
  box-shadow: 0 2px 10px rgba(28, 26, 23, 0.04);
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}

.workout-type-tile strong {
  font-family: "Archivo", sans-serif;
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.workout-type-tile .wt-ic {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--bf-surface3, #F6F2EA); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* Client weekplan (per-track 7-day grid with miniature programs) */
.client-weekplan { margin-bottom: 16px; }
.client-weekgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
@media (max-width: 1100px) { .client-weekgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .client-weekgrid { grid-template-columns: repeat(2, 1fr); } }
.client-weekday { display: flex; flex-direction: column; gap: 8px; min-height: 150px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 12px; padding: 11px; background: #fff; text-decoration: none; color: var(--bf-ink, #1C1A17); transition: border-color .12s, box-shadow .12s; }
.client-weekday:not(.is-rest):hover { border-color: var(--bf-line, #D9CFBE); box-shadow: 0 4px 14px rgba(28,26,23,0.06); }
.client-weekday.is-today { border-color: var(--bf-accent, #C75D34); box-shadow: 0 0 0 2px rgba(199,93,52,0.12); }
.client-weekday .cwd-head { display: flex; align-items: baseline; gap: 6px; }
.client-weekday .cwd-head strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.82rem; }
.client-weekday .cwd-head small { font-size: 0.66rem; color: #9A9385; }
.client-weekday .cwd-title { font-size: 0.82rem; line-height: 1.2; color: var(--bf-ink, #1C1A17); }
.client-weekday .cwd-mini { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.client-weekday .cwd-block { font-size: 0.68rem; line-height: 1.35; color: #6B6356; }
.client-weekday .cwd-block b { color: var(--bf-ink, #1C1A17); }
.client-weekday .cwd-na { font-size: 0.7rem; color: #9A9385; font-style: italic; }
.client-weekday .cwd-rest { font-size: 0.72rem; color: #9A9385; font-style: italic; margin: auto 0; }
.client-weekday .cwd-open { font-size: 0.66rem; font-weight: 700; color: var(--bf-accent, #C75D34); margin-top: auto; }
.client-weekday.is-rest { background: var(--bf-surface3, #F6F2EA); }

.workout-type-tile .wt-count {
  justify-self: end;
  color: var(--bf-accent, #C75D34);
  font-family: "Archivo", sans-serif;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
}

.workout-type-tile:hover {
  border-color: var(--bf-line, #D9CFBE);
  box-shadow: 0 6px 18px rgba(28, 26, 23, 0.07);
  transform: translateY(-1px);
}

.workout-type-tile.private-pt-track {
  border-color: rgba(199, 93, 52, 0.35);
  background: linear-gradient(145deg, rgba(199, 93, 52, 0.07), #fff);
}

.workout-type-tile.locked {
  cursor: default;
  opacity: 0.6;
  background: var(--bf-surface3, #F6F2EA);
}

.workout-type-tile.locked span {
  color: var(--bf-muted, #9A9385);
  font-size: 1rem;
}

.workout-type-tile small {
  color: var(--bf-muted, #7C7568);
  font-size: 0.74rem;
}
.workout-library-access-note p,
.locked-workout-track p {
  color: var(--bf-muted, #7C7568);
}

.workout-library-back {
  width: fit-content;
  margin-bottom: 12px;
}

.workout-library-access-note {
  margin-bottom: 14px;
}

.locked-workout-track {
  max-width: 720px;
}

.training-track-section {
  min-height: 100%;
}

.private-pt-track-section .training-track-footnote {
  margin-top: 12px;
}

.training-track-weekly-section .portal-card-heading {
  align-items: start;
}

.training-track-schedule-list {
  display: grid;
}

.training-track-schedule-card {
  display: grid;
  grid-template-columns: minmax(92px, 0.18fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  padding: 18px;
  color: rgba(245, 241, 235, 0.78);
  text-decoration: none;
}

.training-track-schedule-card:hover {
  color: #fff;
  background: rgba(255, 90, 18, 0.055);
}

.training-track-schedule-date {
  display: grid;
  gap: 5px;
  align-content: start;
}

.training-track-schedule-date span,
.training-track-schedule-main > span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.training-track-schedule-date strong {
  color: rgba(245, 241, 235, 0.72);
  font-size: 0.95rem;
}

.training-track-schedule-main {
  display: grid;
  gap: 7px;
}

.training-track-schedule-main strong {
  color: #fff;
  font-size: 1.08rem;
}

.training-track-schedule-main small,
.training-track-footnote {
  color: var(--muted);
}

.training-track-schedule-main div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.training-track-schedule-main i {
  border: 1px solid rgba(255, 90, 18, 0.25);
  border-radius: 999px;
  padding: 4px 8px;
  color: rgba(255, 210, 190, 0.88);
  background: rgba(255, 90, 18, 0.08);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
}

.training-track-footnote {
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  padding: 14px 18px 18px;
  font-size: 0.9rem;
}

.training-database-card,
.exercise-library-card {
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  padding: 16px 18px;
  color: rgba(245, 241, 235, 0.78);
  text-decoration: none;
}

.training-database-card:hover,
.exercise-library-card:hover {
  color: #fff;
  background: rgba(255, 90, 18, 0.055);
}

.training-database-card > span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.training-database-card strong,
.exercise-library-card strong {
  color: #fff;
  font-size: 1.05rem;
}

.training-database-card small,
.exercise-library-card small {
  color: var(--muted);
}

.training-database-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.training-database-card i {
  border: 1px solid rgba(255, 90, 18, 0.25);
  border-radius: 999px;
  padding: 4px 8px;
  color: rgba(255, 210, 190, 0.88);
  background: rgba(255, 90, 18, 0.08);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
}

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

.exercise-library-card {
  border-top: 0;
  min-height: 130px;
  padding: 18px;
}

.training-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.training-session-row.completed {
  background: rgba(80, 190, 88, 0.045);
}

.training-session-row.skipped {
  opacity: 0.72;
}

.portal-thumb {
  display: grid;
  min-height: 58px;
  place-items: center;
  border-radius: 6px;
}

.portal-thumb span {
  color: var(--accent);
  font-weight: 1000;
}

.training-session-row strong,
.portal-meal-row strong,
.habit-matrix-row strong,
.body-metric-row strong {
  color: #fff;
}

.training-session-row small,
.training-session-row > span {
  color: var(--muted);
}

.training-status-pill {
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.76rem;
  font-weight: 1000;
}

.training-status-pill.completed {
  border-color: rgba(91, 205, 79, 0.24);
  color: #79d35f;
  background: rgba(91, 205, 79, 0.08);
}

.training-status-pill.in_progress {
  border-color: rgba(255, 90, 18, 0.32);
  color: var(--accent);
  background: rgba(255, 90, 18, 0.1);
}

.training-status-pill.skipped {
  border-color: rgba(255, 181, 63, 0.22);
  color: #f0a24a;
  background: rgba(255, 181, 63, 0.08);
}

.training-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.training-row-actions .button {
  min-height: 38px;
  padding: 8px 11px;
  white-space: nowrap;
}

.training-row-actions .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.muscle-focus-body {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 18px;
  align-items: center;
  padding: 22px 18px;
}

.muscle-figure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: end;
  min-height: 160px;
}

.muscle-figure span {
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 90, 18, 0.75), rgba(255, 255, 255, 0.08));
}

.muscle-figure span:nth-child(1) { height: 78%; }
.muscle-figure span:nth-child(2) { height: 100%; }
.muscle-figure span:nth-child(3) { height: 68%; }

.muscle-legend {
  display: grid;
  gap: 10px;
}

.muscle-legend span,
.nutrition-legend span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(245, 241, 235, 0.82);
}

.muscle-legend i,
.nutrition-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  opacity: calc(1 - (var(--shade, 0) * 0.08));
}

.portal-stat-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(74px, 0.5fr);
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
}

.portal-link-list a,
.portal-link-list button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 14px 18px;
  color: var(--ink);
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  font-weight: 800;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.nutrition-target-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding: 18px;
}

.portal-meal-form {
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px;
}

.meal-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.meal-source-card {
  display: grid;
  align-content: start;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.meal-source-card.planned {
  background:
    linear-gradient(135deg, rgba(255, 90, 18, 0.14), rgba(255, 255, 255, 0.035) 44%),
    rgba(255, 255, 255, 0.035);
}

.meal-source-card strong {
  color: #fff;
}

.meal-source-card p {
  margin: 5px 0 0;
  color: var(--muted);
}

.planned-meal-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding-right: 4px;
}

.planned-meal-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 11px 12px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.2);
  text-align: left;
  cursor: pointer;
}

.planned-meal-list button:hover {
  border-color: rgba(255, 90, 18, 0.45);
  background: rgba(255, 90, 18, 0.08);
}

.planned-meal-list button.active,
.planned-meal-list button.logged {
  border-color: rgba(255, 90, 18, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 90, 18, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(0, 0, 0, 0.18);
}

.planned-meal-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.planned-meal-list b {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.planned-meal-list strong {
  display: grid;
  justify-items: end;
  gap: 3px;
  white-space: nowrap;
}

.planned-meal-list strong small {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.planned-meal-detail {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255, 90, 18, 0.18);
  border-radius: 10px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.22);
}

.planned-meal-detail.is-logged {
  border-color: rgba(121, 214, 82, 0.35);
}

.planned-meal-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.planned-meal-detail-head div {
  display: grid;
  gap: 5px;
}

.planned-meal-detail-head > span {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: rgba(245, 241, 235, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.planned-meal-macro-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.planned-meal-macro-strip span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.035);
}

.planned-meal-macro-strip small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.planned-meal-macro-strip strong {
  color: #fff;
}

.todays-meal-plan-card {
  max-width: 980px;
}

.planned-day-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px;
}

.today-meal-plan-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.today-meal-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: left;
}

.today-meal-plan-row:hover,
.today-meal-plan-row.is-logged {
  border-color: rgba(255, 90, 18, 0.48);
  background: rgba(255, 90, 18, 0.08);
}

.today-meal-plan-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.today-meal-plan-row b {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.today-meal-plan-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-meal-plan-row small {
  color: #fff;
  font-weight: 1000;
}

.planned-meal-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.planned-meal-detail-grid section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.028);
}

.planned-meal-detail-grid h4 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 0.84rem;
  text-transform: uppercase;
}

.planned-meal-detail-grid ul,
.planned-meal-detail-grid ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.planned-meal-detail-grid ul {
  padding-left: 0;
  list-style: none;
}

.planned-meal-detail-grid li {
  line-height: 1.35;
}

.planned-meal-detail-grid ul li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  padding-bottom: 7px;
}

.planned-meal-detail-grid li small,
.planned-meal-detail-grid p {
  color: var(--muted);
}

.meal-choice-form,
.portal-meal-manual-form {
  display: grid;
  gap: 10px;
}

.meal-choice-form {
  grid-template-columns: minmax(0, 1fr) minmax(104px, 0.45fr) auto;
  align-items: end;
}

.meal-choice-form.recipe-search-form {
  grid-template-columns: minmax(0, 1.35fr) minmax(112px, 0.45fr) auto;
}

.meal-source-card .meal-choice-form,
.meal-source-card .meal-choice-form.recipe-search-form {
  grid-template-columns: 1fr;
}

.meal-source-card .meal-choice-form .button {
  width: 100%;
}

.meal-choice-form label {
  display: grid;
  gap: 7px;
  color: rgba(245, 241, 235, 0.68);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-meal-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-meal-form-head strong {
  color: #fff;
  font-size: 1rem;
}

.portal-meal-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}

.portal-meal-type-grid label {
  position: relative;
}

.portal-meal-type-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.portal-meal-type-grid span {
  display: grid;
  min-height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 1000;
}

.portal-meal-type-grid input:checked + span {
  border-color: rgba(255, 90, 18, 0.45);
  color: var(--accent);
  background: rgba(255, 90, 18, 0.1);
}

.portal-meal-input-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(86px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
}

.portal-meal-input-grid label,
.portal-water-form {
  display: grid;
  gap: 7px;
  color: rgba(245, 241, 235, 0.68);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.portal-meal-input-grid input,
.portal-water-form input,
.meal-choice-form input,
.meal-choice-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  font-weight: 900;
}

.meal-choice-form input[type="search"] {
  padding-right: 14px;
}

.quick-recipe-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.quick-recipe-chips button {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 90, 18, 0.32);
  border-radius: 999px;
  padding: 9px 12px;
  color: #fff;
  background: rgba(255, 90, 18, 0.09);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.quick-recipe-chips button:hover {
  border-color: rgba(255, 90, 18, 0.68);
  background: rgba(255, 90, 18, 0.18);
}

.meal-choice-form select,
.portal-meal-input-grid select,
.settings-fields-grid select,
.progress-log-fields select {
  color-scheme: dark;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, rgba(245, 241, 235, 0.8) 50%) calc(100% - 18px) 18px / 6px 6px no-repeat,
    linear-gradient(135deg, rgba(245, 241, 235, 0.8) 50%, transparent 50%) calc(100% - 12px) 18px / 6px 6px no-repeat,
    rgba(255, 255, 255, 0.045);
}

.meal-choice-form select option,
.portal-meal-input-grid select option,
.settings-fields-grid select option,
.progress-log-fields select option {
  color: #111;
  background: #fff;
}

.nutrition-target-metric {
  display: grid;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 18px;
}

.nutrition-target-metric:last-child {
  border-right: 0;
}

.nutrition-target-metric span {
  color: rgba(245, 241, 235, 0.76);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nutrition-target-metric strong {
  color: #fff;
  font-size: 1.22rem;
}

.portal-meal-row {
  display: grid;
  grid-template-columns: 110px 138px minmax(0, 1fr) auto auto minmax(136px, auto);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 12px 18px;
}

.meal-number {
  display: grid;
  gap: 4px;
}

.meal-number strong {
  font-size: 0.98rem;
}

.meal-thumb {
  min-height: 74px;
  border-radius: 7px;
}

.meal-thumb.tone-2 { filter: hue-rotate(25deg); }
.meal-thumb.tone-3 { filter: hue-rotate(50deg); }
.meal-thumb.tone-4 { filter: hue-rotate(90deg); }
.meal-thumb.tone-5 { filter: hue-rotate(130deg); }

.portal-meal-row p {
  margin: 0;
  color: rgba(245, 241, 235, 0.82);
}

.meal-macros {
  display: flex;
  gap: 12px;
  color: rgba(245, 241, 235, 0.82);
  white-space: nowrap;
}

.portal-meal-row > strong {
  font-size: 1.15rem;
}

.portal-meal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.portal-meal-actions .button {
  min-height: 36px;
  padding: 8px 10px;
}

.nutrition-disclaimer {
  color: rgba(245, 241, 235, 0.62);
  font-size: 0.86rem;
}

.nutrition-donut-layout {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center;
  padding: 24px 18px;
}

.nutrition-overview-wide .nutrition-donut-layout {
  grid-template-columns: 180px minmax(0, 1fr);
}

.nutrition-overview-wide .nutrition-legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nutrition-donut {
  display: grid;
  width: 148px;
  height: 148px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #101010 0 50%, transparent 51%),
    conic-gradient(#ff5a12 0 var(--protein), #ffb020 var(--protein) var(--carbs), #55c58a var(--carbs) var(--fat), #8c4bd1 var(--fat) 100%);
}

.nutrition-donut strong {
  align-self: end;
  color: #fff;
  font-size: 1.5rem;
}

.nutrition-donut span {
  align-self: start;
  color: var(--muted);
}

.nutrition-legend {
  display: grid;
  gap: 12px;
}

.nutrition-legend strong {
  margin-left: auto;
  color: rgba(245, 241, 235, 0.82);
}

.nutrition-legend .carbs i { background: #ffb020; }
.nutrition-legend .fat i { background: #55c58a; }
.nutrition-legend .fiber i { background: #8c4bd1; }

.recipe-catalog-layout {
  display: grid;
  gap: 16px;
}

.recipe-catalog-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
}

.recipe-catalog-hero h2 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 3rem);
}

.recipe-catalog-hero p {
  max-width: 76ch;
  margin: 0;
  color: var(--muted);
}

.recipe-catalog-hero > strong {
  color: var(--accent);
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
}

.recipe-filter-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.recipe-filter-strip span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-weight: 900;
}

.recipe-filter-strip strong {
  color: #fff;
  font-size: 1.35rem;
}

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

.recipe-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

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

.recipe-card-top strong {
  color: #fff;
  font-size: 1.08rem;
}

.recipe-card-top p,
.recipe-instructions {
  margin: 0;
  color: rgba(245, 241, 235, 0.74);
}

.recipe-macro-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.recipe-macro-row span {
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  padding: 9px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.78rem;
  font-weight: 900;
}

.recipe-macro-row span.recipe-price {
  grid-column: 1 / -1;
  text-align: center;
  color: #ffb38c;
  background: rgba(255, 122, 60, 0.12);
  border-color: rgba(255, 122, 60, 0.3);
  font-weight: 700;
}

.recipe-macro-row b {
  color: #fff;
  font-size: 1rem;
}

.recipe-tag-row,
.recipe-ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.recipe-tag-row i,
.recipe-ingredient-list span {
  border: 1px solid rgba(255, 90, 18, 0.22);
  border-radius: 999px;
  padding: 5px 9px;
  color: rgba(255, 214, 194, 0.9);
  background: rgba(255, 90, 18, 0.08);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 900;
}

.recipe-ingredient-list span {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(245, 241, 235, 0.78);
  background: rgba(255, 255, 255, 0.035);
}

.recipe-ingredient-list small {
  color: var(--accent);
}

.hydration-main,
.portal-coach-note {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.hydration-main strong {
  color: #fff;
  font-size: 1.55rem;
}

.hydration-cups {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 18px 14px;
}

.portal-water-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 16px 18px 18px;
  text-transform: none;
}

.hydration-cups button,
.hydration-cups span {
  width: 24px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px 4px 8px 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.hydration-cups button.filled,
.hydration-cups span.filled {
  border-color: rgba(54, 147, 255, 0.7);
  background: linear-gradient(180deg, #57a5ff, #176bd2);
}

.hydration-card .progress-bar {
  margin: 0 18px 18px;
}

.portal-coach-note {
  grid-template-columns: 64px 1fr;
}

.portal-coach-note .avatar {
  width: 58px;
  height: 58px;
}

.portal-coach-note strong {
  color: var(--accent);
}

.portal-coach-note p {
  margin: 8px 0;
}

.habit-score-grid,
.progress-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.progress-stat-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.progress-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 14px;
  margin: 14px 0;
}

.progress-log-card,
.progress-photo-upload-card {
  display: grid;
  gap: 16px;
}

.portal-metric-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  padding: 0 18px;
  margin: 0;
}

.portal-metric-type-grid.compact {
  padding: 0;
}

.portal-metric-type-grid label {
  cursor: pointer;
  position: relative;
}

.portal-metric-type-grid input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.portal-metric-type-grid span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(245, 241, 235, 0.75);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.84rem;
  font-weight: 900;
}

.portal-metric-type-grid input:checked + span {
  border-color: rgba(255, 90, 18, 0.85);
  color: #fff;
  background: rgba(255, 90, 18, 0.18);
  box-shadow: inset 3px 0 0 var(--accent);
}

.progress-log-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(120px, 0.65fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 0 18px 18px;
}

.progress-log-fields label,
.progress-file-input {
  display: grid;
  gap: 7px;
  color: rgba(245, 241, 235, 0.74);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.progress-log-fields input,
.progress-file-input > input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 13px 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  font: inherit;
}

.progress-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px;
}

.progress-photo-strip img,
.progress-photo-empty {
  width: 100%;
  min-height: 94px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.045);
}

.progress-photo-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.progress-photo-upload-card .button,
.progress-file-input {
  margin: 0 18px;
}

.progress-photo-native-upload {
  justify-content: start;
  justify-items: start;
}

.progress-photo-upload-card .button {
  margin-bottom: 18px;
}

.habit-score-card,
.progress-stat-card {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.habit-score-card > span,
.progress-stat-card > span {
  color: rgba(245, 241, 235, 0.76);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.habit-score-card > strong,
.progress-stat-card > strong {
  color: #fff;
  font-size: 2rem;
}

.progress-stat-card small.positive,
.body-metric-row small {
  color: #48d35a;
}

.habit-score-card.split {
  grid-template-columns: 1fr 1fr;
}

.mini-ring,
.big-streak-ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #101010 0 56%, transparent 57%),
    conic-gradient(var(--accent) 0 var(--value), rgba(255, 255, 255, 0.11) var(--value) 100%);
}

.mini-ring {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 70px;
  height: 70px;
}

.habit-score-card {
  position: relative;
}

.habit-matrix-card {
  overflow-x: auto;
}

.habit-matrix-header,
.habit-matrix-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(7, minmax(52px, 0.36fr)) 78px;
  gap: 10px;
  align-items: center;
  min-width: 760px;
}

.habit-matrix-header {
  padding: 18px;
  color: rgba(245, 241, 235, 0.76);
  font-weight: 900;
  text-transform: uppercase;
}

.habit-matrix-header span {
  display: grid;
  gap: 3px;
  text-align: center;
}

.habit-matrix-header small {
  color: var(--muted);
  text-transform: none;
}

.habit-matrix-row {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  padding: 14px 18px;
}

.habit-matrix-row small {
  display: block;
  color: var(--muted);
}

.habit-day-control {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  min-width: 34px;
}

.habit-check {
  border: 0;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 0.62rem;
  font-weight: 900;
  cursor: pointer;
}

.habit-check.countable {
  width: 34px;
  border-radius: 999px;
  font-size: 0.58rem;
}

.habit-check.done {
  color: #1b0c05;
  background: var(--accent);
}

.habit-check.partial {
  color: var(--accent);
  border: 1px solid rgba(255, 90, 18, 0.68);
  background: rgba(255, 90, 18, 0.08);
}

.habit-check.planned:not(.done) {
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.07);
}

.habit-check-undo {
  position: absolute;
  right: -7px;
  top: -8px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.habit-check.missed {
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.habit-check.extra {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.02);
}

.habit-check.over-positive:not(.done) {
  color: #8ee56f;
  border-color: rgba(142, 229, 111, 0.46);
}

.habit-check.over-negative:not(.done) {
  color: #ff7b65;
  border-color: rgba(255, 123, 101, 0.5);
}

.habit-check.locked {
  opacity: 0.28;
  cursor: not-allowed;
}

.habit-week-total {
  display: grid;
  gap: 2px;
  justify-items: end;
}

.habit-rating {
  font-size: 0.72rem;
}

.habit-rating.positive {
  color: #8ee56f;
}

.habit-rating.negative {
  color: #ff7b65;
}

.habit-footer-actions {
  min-width: 760px;
}

.coach-habit-builder {
  display: grid;
  gap: 16px;
}

.coach-workout-access {
  display: grid;
  gap: 8px;
  align-self: start;
  align-content: start;
}

.coach-workout-access.compact {
  padding: 12px 14px;
}

.coach-workout-access-form {
  display: grid;
  gap: 8px;
  align-content: start;
}

.coach-workout-access-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.coach-workout-access-heading strong {
  display: block;
  color: #f7f3ef;
  font-size: 0.95rem;
}
.coach-workout-access-heading small {
  display: block;
  color: rgba(245, 241, 235, 0.6);
  font-size: 0.74rem;
  margin-top: 2px;
}
.button-compact {
  padding: 6px 14px;
  font-size: 0.78rem;
  border-radius: 8px;
  min-height: auto;
}

.access-master-toggle,
.track-access-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  color: rgba(245, 241, 235, 0.78);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
  white-space: nowrap;
}

.track-access-chip input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

.track-access-chip:hover {
  background: rgba(255, 90, 18, 0.08);
  border-color: rgba(255, 90, 18, 0.4);
  color: #f7f3ef;
}
.track-access-chip:has(input:checked) {
  background: rgba(255, 90, 18, 0.18);
  border-color: rgba(255, 90, 18, 0.55);
  color: #f7f3ef;
}

.track-access-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}
.bf-track-access-hint { font-size: 0.8rem; color: var(--bf-muted, #7C7568); margin: 4px 0 12px; }

.track-access-chip input,
.access-master-toggle input {
  accent-color: var(--accent);
}

.coach-habit-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.coach-habit-form label,
.coach-habit-form fieldset {
  display: grid;
  gap: 7px;
}

.coach-habit-form label span,
.coach-habit-form legend {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coach-habit-form .button {
  align-self: end;
}

.coach-habit-multi-toggle {
  align-items: center;
  grid-template-columns: 1fr auto;
}

.coach-habit-multi-toggle small {
  grid-column: 1 / -1;
  color: var(--muted);
}

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

.coach-day-picker {
  grid-column: span 2;
  margin: 0;
  padding: 0;
  border: 0;
}

.coach-day-picker {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.coach-day-picker legend {
  grid-column: 1 / -1;
}

.coach-day-picker label {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.coach-day-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.coach-day-picker input:checked + span {
  color: var(--accent);
}

.coach-habit-list {
  display: grid;
  gap: 8px;
}

.coach-habit-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.coach-habit-item small,
.coach-habit-item span {
  color: var(--muted);
}

.big-streak-ring {
  width: 170px;
  height: 170px;
  margin: 18px auto 12px;
}

.big-streak-ring strong {
  align-self: end;
  color: #fff;
  font-size: 2.4rem;
}

.big-streak-ring span {
  align-self: start;
  color: var(--muted);
}

.streak-focus-card p,
.weekly-progress-card p {
  padding: 0 18px;
  text-align: center;
}

.streak-week {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 18px 20px;
}

.streak-week span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.75rem;
  font-weight: 900;
}

.streak-week span.active {
  color: #1b0c05;
  background: var(--accent);
}

.weekly-progress-card .progress-bar {
  margin: 0 18px 12px;
}

.weekly-progress-card > strong,
.weekly-progress-card > small {
  padding: 0 18px 18px;
}

.portal-insight-list {
  gap: 12px;
  padding: 18px;
}

.portal-insight-list p {
  margin: 0;
}

.portal-insight-list strong,
.portal-insight-list span {
  display: block;
}

.portal-progress-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.8fr);
  gap: 14px;
}

.progress-chart-card {
  grid-column: span 1;
}

.portal-line-chart {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  min-height: 260px;
  padding: 18px;
}

.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.82rem;
}

.chart-plot {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 100% 20%,
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 12.5% 100%,
    rgba(255, 255, 255, 0.025);
}

.chart-line {
  position: absolute;
  inset: 17% 4% 18% 4%;
  clip-path: polygon(0 7%, 10% 20%, 20% 35%, 30% 42%, 40% 48%, 50% 56%, 60% 50%, 70% 62%, 80% 66%, 90% 72%, 100% 83%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 90, 18, 0.75), rgba(255, 90, 18, 0.06));
}

.chart-plot i {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 1px solid #050505;
  border-radius: 50%;
  background: var(--accent);
}

.chart-tooltip {
  position: absolute;
  left: 56%;
  top: 32%;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(10, 10, 10, 0.9);
}

.chart-tooltip strong {
  color: #fff;
}

.strength-row,
.body-metric-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 13px 18px;
}

.body-metric-row {
  grid-template-columns: 1fr auto auto;
}

.recent-progress-list {
  display: grid;
}

.recent-progress-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  padding: 13px 18px;
}

.recent-progress-row:first-child {
  border-top: 0;
}

.recent-progress-row small {
  display: block;
  color: var(--muted);
}

.recent-progress-row span {
  color: #fff;
  font-weight: 900;
}

.composition-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  min-height: 218px;
  padding: 22px 20px;
}

.composition-chart span {
  flex: 1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(255, 255, 255, 0.08));
}

.message-portal-grid,
.documents-layout,
.settings-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.72fr) minmax(290px, 0.38fr);
  gap: 14px;
  align-items: start;
}

.documents-layout,
.settings-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.portal-search-row,
.document-toolbar {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.portal-search-row input,
.document-toolbar input,
.settings-fields-grid input,
.settings-fields-grid select,
.settings-about-form textarea {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
}

.document-toolbar {
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  padding: 0;
}

.view-toggle {
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
}

.view-toggle button {
  border: 0;
  padding: 12px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
}

.view-toggle button.active {
  color: #1b0c05;
  background: var(--accent);
}

.conversation-list,
.document-list,
.compact-file-list,
.settings-summary-list {
  display: grid;
}

.conversation-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 16px 18px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.conversation-item.active,
.conversation-item:hover {
  background:
    linear-gradient(90deg, rgba(255, 90, 18, 0.18), rgba(255, 90, 18, 0.04)),
    rgba(255, 255, 255, 0.025);
}

.conversation-item strong,
.conversation-item small {
  display: block;
}

.conversation-item small,
.conversation-item time {
  color: var(--muted);
  font-size: 0.82rem;
}

.conversation-item b {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #1b0c05;
  background: var(--accent);
  font-size: 0.7rem;
}

.coach-messenger-page {
  display: grid;
  gap: 20px;
}

.coach-messenger-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.coach-messenger-heading h1 {
  margin: 0;
}

.coach-messenger-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}

.coach-message-stats {
  display: flex;
  gap: 10px;
}

.coach-message-stats span {
  min-width: 120px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-weight: 800;
}

.coach-message-stats strong {
  display: block;
  color: var(--ink);
  font-size: 1.35rem;
}

.coach-messenger-shell {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.45fr) minmax(300px, 0.95fr);
  gap: 14px;
  min-height: 680px;
}

.coach-chat-list-panel,
.coach-thread-panel,
.coach-schedule-panel,
.coach-schedule-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(14, 14, 14, 0.9);
  overflow: hidden;
}

.coach-schedule-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  border: 0;
  background: transparent;
  overflow: visible;
}

.coach-chat-search {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-chat-search input,
.coach-message-composer input,
.coach-schedule-card input,
.coach-schedule-card textarea,
.coach-schedule-card select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
}

.coach-chat-list {
  max-height: 620px;
  overflow: auto;
}

.coach-thread-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 16px 14px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.coach-thread-list-item.active,
.coach-thread-list-item:hover {
  background:
    linear-gradient(90deg, rgba(255, 90, 18, 0.22), rgba(255, 90, 18, 0.035)),
    rgba(255, 255, 255, 0.03);
}

.coach-thread-list-item strong,
.coach-thread-list-item small {
  display: block;
}

.coach-thread-list-item small,
.coach-thread-list-item time {
  color: var(--muted);
  font-size: 0.82rem;
}

.coach-thread-list-item b {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #1b0c05;
  background: var(--accent);
  font-size: 0.7rem;
}

.coach-thread-header,
.coach-thread-focus,
.coach-message-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
}

.coach-thread-focus {
  margin: 14px 18px 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.coach-thread-focus span,
.coach-thread-header small,
.coach-chat-bubble small,
.coach-scheduled-item span,
.coach-scheduled-item small {
  color: var(--muted);
}

.coach-thread-messages {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 430px;
  max-height: 520px;
  overflow: auto;
  padding: 18px;
}

/* Coach side of the same conversation — same dialogue rules as .thread-message. */
.coach-chat-bubble {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  justify-items: start;
}

.coach-chat-bubble.mine {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.coach-chat-bubble p {
  max-width: min(460px, 84%);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 14px;
  color: #f7f1eb;
  background: rgba(255, 255, 255, 0.055);
}

.coach-chat-bubble.mine p {
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, #df4b0b, #8f280a);
}

.coach-chat-bubble strong,
.coach-chat-bubble small {
  display: block;
}

.coach-chat-bubble strong {
  margin-bottom: 4px;
  font-size: 0.78rem;
  letter-spacing: 0;
}

.coach-chat-bubble small {
  margin-top: 8px;
  text-align: right;
  font-size: 0.75rem;
}

.coach-message-composer {
  grid-template-columns: minmax(0, 1fr) auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
}

.coach-schedule-card {
  padding: 0;
}

.coach-schedule-card .profile-form {
  padding: 0 16px 16px;
}

.coach-scheduled-list {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.coach-scheduled-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.coach-scheduled-item strong,
.coach-scheduled-item p,
.coach-scheduled-item small {
  display: block;
}

.coach-scheduled-item p {
  margin: 6px 0;
  color: var(--muted);
}

.coach-scheduled-list.compact .coach-scheduled-item p {
  margin-bottom: 0;
}

.thread-header,
.thread-focus,
.portal-message-composer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 16px 18px;
}

.client-thread-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-thread-person strong,
.client-thread-person small {
  display: block;
}

.client-thread-person small,
.thread-day-label,
.thread-focus span {
  color: var(--muted);
}

.thread-actions {
  display: flex;
  gap: 12px;
  color: #fff;
}

.thread-focus {
  margin: 14px 18px 0;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
}

.thread-focus a {
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.thread-day-label {
  padding: 16px 18px 4px;
  text-align: center;
}

.portal-thread {
  display: grid;
  gap: 10px;
  padding: 10px 18px 18px;
}

/* A chat has to read as a dialogue: the other person on the left with their
   avatar, your own messages on the right, two clearly different fills and a
   tail on the bottom corner nearest the sender. Alignment is expressed with
   justify-items (not justify-content + max-content columns) so the phone
   media query only has to drop the avatar column — the old rules collapsed
   both sides to one full-width column and the left/right split vanished on
   exactly the screen the client uses. (bug-5db7dbe765fd4ed44844) */
.thread-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  justify-items: start;
}

.thread-message.mine {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.thread-message p,
.attachment-bubble {
  max-width: min(420px, 100%);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  color: #f7f1eb;
  background: rgba(255, 255, 255, 0.055);
}

.thread-message p {
  max-width: min(420px, 84%);
  border-radius: 14px 14px 14px 4px;
}

.thread-message.mine p {
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(135deg, #df4b0b, #8f280a);
}

.thread-message small {
  display: block;
  margin-top: 8px;
  color: rgba(245, 241, 235, 0.72);
  text-align: right;
}

.attachment-bubble {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-left: 52px;
}

.attachment-bubble > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 6px;
  color: #1b0c05;
  background: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
}

.portal-message-composer {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  border-bottom: 0;
}

.portal-message-composer input {
  flex: 1;
  border: 0;
  color: #fff;
  background: transparent;
}

.portal-message-composer button {
  border: 0;
  color: var(--accent);
  background: transparent;
  font-size: 1.4rem;
}

.client-overview-card {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.overview-ring,
.storage-ring {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #101010 0 54%, transparent 55%),
    conic-gradient(var(--accent) 0 var(--value), rgba(255, 255, 255, 0.11) var(--value) 100%);
}

.overview-ring {
  width: 118px;
  height: 118px;
}

.overview-ring strong,
.storage-ring strong {
  align-self: end;
  color: #fff;
  font-size: 1.4rem;
}

.overview-ring span,
.storage-ring span {
  align-self: start;
  color: var(--muted);
  font-size: 0.72rem;
}

.compact-file-row,
.document-row,
.settings-summary-row {
  display: grid;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 14px 18px;
}

.compact-file-row {
  grid-template-columns: 42px 1fr auto;
}

.document-row {
  grid-template-columns: 48px minmax(0, 1fr) 110px 150px 46px;
}

.compact-file-row strong,
.document-row strong,
.settings-summary-row strong {
  color: #fff;
}

.compact-file-row small,
.document-row small {
  display: block;
  color: var(--muted);
}

.compact-file-row button {
  border: 0;
  color: var(--muted);
  background: transparent;
}

.file-type {
  display: grid;
  width: 36px;
  height: 42px;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  background: #d04242;
  font-size: 0.68rem;
  font-weight: 900;
}

.file-type.green { background: #3d8a37; }
.file-type.blue { background: #315aa5; }
.file-type.orange { background: #d97912; }

.document-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.document-category-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
}

.document-category-card strong {
  color: #fff;
}

.document-category-card span,
.document-category-card p {
  margin: 0;
  color: var(--muted);
}

.upload-dropzone {
  display: grid;
  place-items: center;
  gap: 10px;
  margin: 0 18px 18px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  padding: 26px;
  color: rgba(245, 241, 235, 0.8);
  text-align: center;
}

.upload-dropzone b {
  color: var(--accent);
}

.upload-dropzone input[type="file"] {
  width: min(420px, 100%);
  min-height: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.storage-ring {
  width: 150px;
  height: 150px;
  margin: 24px auto 16px;
}

.settings-profile-form {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 22px;
}

.profile-photo-block {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: center;
}

.settings-avatar {
  display: grid;
  width: 128px;
  height: 128px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 90, 18, 0.25), transparent 5rem),
    #151515;
  font-size: 2rem;
  font-weight: 1000;
}

img.settings-avatar,
.avatar-image {
  object-fit: cover;
}

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

.settings-fields-grid label,
.settings-about-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.settings-fields-grid .button,
.settings-about-form .button {
  justify-self: end;
  align-self: end;
}

.about-card p {
  margin: 0;
  color: var(--muted);
}

.settings-about-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.profile-picture-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px;
}

.profile-picture-row form {
  margin: 0;
}

.profile-picture-preview {
  width: 54px;
  height: 54px;
}

.settings-summary-row {
  grid-template-columns: 1fr auto;
}

.settings-summary-row span {
  color: var(--muted);
}

.danger-link-list a:last-child {
  color: #ff4a4a;
}

.client-portal-quote {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px 0;
}

.client-portal-quote span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.4rem;
}

.client-portal-quote p {
  flex: 1;
  margin: 0;
  color: rgba(245, 241, 235, 0.8);
}

.client-portal-quote strong {
  color: var(--accent);
  letter-spacing: 0.08em;
}

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

.coach-topbar {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr) auto auto auto auto;
}

.coach-sidebar .brand-lockup {
  margin-bottom: 18px;
}

@media (min-width: 1181px) {
  .coach-sidebar {
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 18px;
    scrollbar-color: rgba(255, 90, 18, 0.72) rgba(255, 255, 255, 0.06);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .coach-sidebar::-webkit-scrollbar {
    width: 9px;
  }

  .coach-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.045);
    border-radius: 999px;
  }

  .coach-sidebar::-webkit-scrollbar-thumb {
    border: 2px solid rgba(5, 5, 5, 0.92);
    border-radius: 999px;
    background: rgba(255, 90, 18, 0.72);
  }

  .coach-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 90, 18, 0.95);
  }

  .coach-sidebar .sidebar-nav-secondary {
    margin-top: 14px;
  }

  .coach-sidebar .beast-mode-card {
    flex: 0 0 auto;
  }
}

.sidebar-section-label {
  display: block;
  margin: 10px 8px 8px;
  color: rgba(245, 241, 235, 0.48);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coach-search {
  display: block;
}

.coach-search input,
.coach-toolbar input,
.coach-toolbar select,
.coach-toolbar button {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.035);
}

.coach-toolbar select {
  cursor: pointer;
}

.coach-user-card {
  min-width: 190px;
}

.coach-command-shell {
  display: grid;
  gap: 18px;
}

.coach-command-header,
.coach-client-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.coach-command-header h1,
.coach-client-profile-head h1 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
}

.coach-command-header p,
.coach-client-profile-head p {
  margin: 0;
  color: var(--muted);
}

.coach-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: end;
}

.coach-stat-grid,
.coach-command-grid,
.coach-client-detail-grid,
.coach-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.coach-stat-grid.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.coach-stat-grid.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.coach-stat-card,
.nutrition-feature-card,
.coach-section-box {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 0 0, rgba(255, 90, 18, 0.07), transparent 12rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    #101010;
}

.coach-stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 18px;
}

.coach-stat-card small,
.coach-tiny-metric span,
.nutrition-overview-strip span {
  color: rgba(245, 241, 235, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-stat-card strong {
  display: block;
  margin: 8px 0 4px;
  color: #fff;
  font-size: 1.85rem;
}

.coach-stat-card em,
.nutrition-overview-strip small {
  color: #5bde45;
  font-style: normal;
}

.coach-icon-large {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(255, 90, 18, 0.09);
  font-size: 1.5rem;
  font-weight: 900;
}

.coach-span-2 { grid-column: span 2; }
.coach-span-3 { grid-column: span 3; }
.coach-span-4 { grid-column: span 4; }
.coach-span-5 { grid-column: span 5; }
.coach-span-6 { grid-column: span 6; }
.coach-span-8 { grid-column: span 8; }

.coach-list {
  display: grid;
}

.coach-list-row,
.coach-task-row,
.coach-program-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: 14px 18px;
  color: var(--ink);
  text-decoration: none;
}

.coach-list-row.compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.coach-list-row:hover,
.coach-table-row:hover,
.coach-table-row.active {
  background: rgba(255, 90, 18, 0.055);
}

.coach-list-row strong,
.coach-task-row strong,
.coach-program-row strong {
  display: block;
  color: #fff;
}

.coach-list-row small,
.coach-task-row small,
.coach-program-row small {
  color: var(--muted);
}

.coach-list-row b,
.coach-task-row b {
  color: var(--accent);
}

.coach-icon-ring {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 90, 18, 0.48);
  border-radius: 50%;
  color: var(--accent);
}

.coach-task-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.coach-task-row > span:first-child {
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.coach-donut-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 24px;
}

.coach-donut-layout.compact {
  grid-template-columns: 150px 1fr;
}

.coach-donut {
  display: grid;
  width: 170px;
  height: 170px;
  place-items: center;
  border-radius: 50%;
}

.coach-donut-layout.compact .coach-donut {
  width: 136px;
  height: 136px;
}

.coach-donut > div {
  display: grid;
  width: 58%;
  height: 58%;
  place-items: center;
  border-radius: 50%;
  background: #101010;
}

.coach-donut strong {
  align-self: end;
  color: #fff;
  font-size: 1.8rem;
}

.coach-donut small {
  align-self: start;
  color: var(--muted);
}

.coach-legend {
  display: grid;
  gap: 12px;
}

.coach-legend div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.coach-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.coach-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.coach-quick-grid a,
.coach-quick-grid button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  padding: 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.025);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.coach-master-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.62fr);
  gap: 14px;
  align-items: start;
}

.public-weekly-program-card {
  overflow: hidden;
}

.public-weekly-heading {
  align-items: start;
}

.public-weekly-heading p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
}

.public-weekly-summary {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 180px;
}

.public-weekly-summary span {
  color: var(--muted);
  font-weight: 800;
}

.public-weekly-summary strong {
  color: var(--accent);
  text-transform: none;
}

.public-weekly-planner {
  display: grid;
  gap: 0;
  overflow-x: auto;
  padding: 16px;
  scrollbar-width: thick;
}

.public-weekly-head,
.public-weekly-row {
  display: grid;
  grid-template-columns: minmax(154px, 0.72fr) repeat(7, minmax(168px, 1fr));
  min-width: 1360px;
}

.public-weekly-head {
  color: rgba(245, 241, 235, 0.62);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.public-weekly-head span {
  padding: 0 10px 10px;
}

.public-weekly-row {
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.public-weekly-track,
.public-weekly-cell {
  min-height: 118px;
  padding: 12px 10px;
}

.public-weekly-track {
  display: grid;
  align-content: center;
  gap: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.075);
}

.public-weekly-track strong {
  color: #fff;
  text-transform: uppercase;
}

.public-weekly-track small {
  color: var(--muted);
  font-weight: 800;
}

.public-weekly-cell {
  display: grid;
  align-content: start;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.055);
}

.public-weekly-cell.has-workout {
  background: rgba(255, 90, 18, 0.05);
}

.public-weekly-cell label {
  display: grid;
  gap: 6px;
}

.public-weekly-cell label span {
  color: rgba(245, 241, 235, 0.62);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.public-weekly-cell select {
  min-height: 42px;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 0.83rem;
  font-weight: 850;
}

.public-weekly-cell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.public-weekly-cell-actions button,
.public-weekly-cell-actions a {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  text-decoration: none;
}

.public-weekly-cell-actions button[type="submit"] {
  border-color: rgba(255, 90, 18, 0.55);
  color: #111;
  background: var(--accent);
}

.coach-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
}

/* The search box spans the full width; the program/coach/status filters and the
   clear button wrap two-per-row below so nothing is clipped in the narrow list card. */
.coach-toolbar > label {
  grid-column: 1 / -1;
}

.coach-table-empty {
  padding: 32px 18px;
  text-align: center;
  color: rgba(245, 241, 235, 0.55);
  font-size: 0.9rem;
}

.coach-table {
  display: grid;
  overflow: hidden;
}

.coach-table-head,
.coach-table-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.8fr) minmax(150px, 1fr) 100px 92px 120px 96px 90px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
}
.coach-row-useas {
  background: rgba(255,90,18,0.14); color: #ff5a12; border: 1px solid rgba(255,90,18,0.3);
  border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.coach-row-useas:hover { background: rgba(255,90,18,0.24); }

.program-table .coach-table-head,
.program-table .coach-table-row {
  grid-template-columns: minmax(250px, 1.8fr) 96px 76px 96px 108px 92px 112px;
}

.coach-table-head {
  color: rgba(245, 241, 235, 0.66);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-table-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--ink);
  text-decoration: none;
}

.coach-table-row > span:first-child {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
}

.coach-table-row > span:first-child strong,
.coach-table-row > span:first-child small {
  grid-column: 2;
}

.coach-table-row > span:first-child b {
  grid-row: 1 / span 2;
}

.coach-table-row strong {
  color: #fff;
}

.coach-table-row small {
  color: var(--muted);
}

.coach-table .mini-ring {
  position: static;
  width: 54px;
  height: 54px;
  color: #fff;
  font-size: 0.75rem;
  background:
    radial-gradient(circle, #101010 0 56%, transparent 57%),
    conic-gradient(#75c92a 0 calc(var(--ring) * 1%), rgba(255, 255, 255, 0.12) calc(var(--ring) * 1%) 100%);
}

.status-active,
.status-muted {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-style: normal;
  font-weight: 900;
}

.status-active {
  color: #7dff4b;
  background: rgba(39, 126, 19, 0.24);
}

.status-muted {
  color: rgba(245, 241, 235, 0.68);
  background: rgba(255, 255, 255, 0.08);
}

.avatar-xl {
  width: 112px;
  height: 112px;
  font-size: 2rem;
}

.coach-client-hero,
.coach-client-id {
  display: grid;
  gap: 16px;
}

.coach-client-hero > div,
.coach-client-id {
  display: flex;
  gap: 18px;
  align-items: center;
}

.coach-client-hero {
  padding: 22px;
}

.coach-client-hero h2 {
  margin: 0 0 8px;
  color: #fff;
}

.coach-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.coach-tabs button,
.coach-tabs a {
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 0;
  color: rgba(245, 241, 235, 0.78);
  background: none;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
}

.coach-tabs button.active,
.coach-tabs button:hover,
.coach-tabs a.active,
.coach-tabs a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.coach-tabs.tight {
  gap: 18px;
  padding: 0 18px;
}

.coach-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 18px;
}

.coach-tiny-metric {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  padding: 14px;
}

.coach-tiny-metric strong {
  color: #fff;
  font-size: 1.35rem;
}

.coach-tiny-metric small {
  color: var(--muted);
}

.coach-section-box {
  overflow: hidden;
  margin: 14px 18px;
}

.coach-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 18px;
}

.coach-media-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
}

.coach-line-chart {
  padding: 18px;
}

.coach-line-chart svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

.coach-chart-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
}

.coach-client-profile-head {
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.8fr) auto;
}

.coach-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 10px;
}

.coach-info-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.coach-info-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.coach-info-list span,
.coach-padded {
  color: var(--muted);
}

.coach-padded {
  padding: 18px;
}

.coach-program-detail > a {
  display: inline-flex;
  margin: 18px 18px 0;
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.nutrition-feature-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.nutrition-feature-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 16px;
  padding: 22px;
}

.nutrition-feature-card.active,
.nutrition-feature-card:hover {
  border-color: rgba(255, 91, 0, 0.78);
  box-shadow: inset 3px 0 0 var(--accent), 0 20px 55px rgba(255, 91, 0, 0.12);
}

.nutrition-feature-card h2 {
  margin: 0;
  color: #fff;
}

.nutrition-feature-card p {
  min-height: 54px;
  margin: 0;
}

.nutrition-feature-card strong {
  color: var(--accent);
}

.nutrition-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  gap: 16px;
  margin-top: 16px;
}

.nutrition-admin-plan-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}

.nutrition-admin-plan-layout .nutrition-admin-form {
  position: static;
}

.nutrition-admin-plan-layout .nutrition-admin-list {
  align-self: start;
  position: sticky;
  top: 92px;
}

.nutrition-admin-plan-layout .nutrition-admin-rows {
  max-height: 460px;
}

.nutrition-admin-plan-layout .nutrition-admin-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.nutrition-admin-plan-layout .nutrition-admin-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  padding-left: 46px;
}

.nutrition-admin-list,
.nutrition-admin-form {
  min-width: 0;
}

.nutrition-admin-toolbar {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 0 0 16px;
}

.nutrition-admin-toolbar .search-input {
  max-width: 420px;
  width: 100%;
}

.nutrition-admin-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.nutrition-locale-switch {
  align-items: center;
  display: flex;
  gap: 7px;
}

.nutrition-locale-switch span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.nutrition-locale-switch button {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 1000;
  min-width: 38px;
  padding: 8px 10px;
}

.nutrition-locale-switch button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.nutrition-admin-rows {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

.nutrition-admin-row {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
}

.nutrition-admin-row strong,
.nutrition-admin-row small,
.nutrition-admin-row em {
  display: block;
}

.nutrition-admin-row small {
  color: var(--muted);
  margin-top: 3px;
}

.nutrition-admin-row em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-style: normal;
  margin-top: 5px;
}

.nutrition-admin-actions {
  display: flex;
  gap: 8px;
}

.nutrition-admin-actions button,
.portal-link-list.compact button {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 9px 11px;
}

.nutrition-admin-actions button:hover,
.portal-link-list.compact button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.nutrition-admin-form {
  align-self: start;
  display: grid;
  gap: 14px;
  position: sticky;
  top: 92px;
}

.nutrition-admin-form label,
.nutrition-check-list legend {
  color: var(--muted);
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.nutrition-admin-form input,
.nutrition-admin-form select,
.nutrition-admin-form textarea {
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 12px 13px;
}

.nutrition-admin-form select option {
  background: #0b0b0b;
  color: #fff;
}

.nutrition-admin-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nutrition-language-tabs {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.nutrition-language-tab-row {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
}

.nutrition-language-tab-row strong {
  color: #fff;
  margin-right: auto;
}

.nutrition-language-tab-row span {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 1000;
  padding: 6px 9px;
}

.nutrition-language-tab-row span.active {
  border-color: var(--accent);
  color: var(--accent);
}

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

.nutrition-language-panel {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 9px;
  padding: 10px;
}

.nutrition-language-panel.missing {
  border-color: rgba(255, 176, 0, 0.45);
}

.nutrition-language-panel h3 {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin: 0;
}

.nutrition-language-panel h3 small,
.translation-missing-badges span {
  background: rgba(255, 176, 0, 0.12);
  border: 1px solid rgba(255, 176, 0, 0.32);
  border-radius: 999px;
  color: #ffb000;
  font-size: 10px;
  font-weight: 1000;
  padding: 4px 7px;
  text-transform: uppercase;
}

.translation-missing-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.nutrition-check-list {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  margin: 0;
  max-height: 230px;
  overflow: auto;
  padding: 12px;
}

.nutrition-check-list label {
  align-items: center;
  color: var(--text);
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-size: 13px;
  justify-content: flex-start;
  letter-spacing: 0;
  min-height: 32px;
  width: 100%;
}

.nutrition-check-list input[type="checkbox"] {
  accent-color: var(--accent);
  align-self: center;
  appearance: auto;
  display: block;
  flex: 0 0 18px;
  height: 18px;
  line-height: 1;
  margin: 0;
  max-height: 18px;
  min-height: 18px;
  min-width: 18px;
  padding: 0;
  width: 18px;
}

.nutrition-check-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.coach-recipe-library,
.coach-meal-plan-studio {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.coach-recipe-library .portal-card-heading > div,
.coach-meal-plan-topbar > div {
  display: grid;
  gap: 5px;
}

.coach-recipe-library .portal-card-heading small {
  color: var(--muted);
  font-weight: 700;
}

.coach-meal-plan-studio.compact {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-top: 0;
  padding: 14px;
}

.coach-recipe-category-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.coach-recipe-category-row span {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 12px;
}

.coach-recipe-category-row span.active {
  border-color: var(--accent);
  color: var(--accent);
}

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

.coach-recipe-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  position: relative;
  text-align: left;
}

.coach-recipe-card:hover {
  border-color: rgba(255, 91, 0, 0.72);
  transform: translateY(-1px);
}

.coach-recipe-cover {
  align-items: center;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 91, 0, 0.24), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.coach-recipe-cover img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.coach-recipe-cover span {
  color: var(--accent);
  display: inline-flex;
  font-size: 34px;
}

.coach-recipe-cover.large {
  min-height: 210px;
}

.coach-recipe-cover.editor {
  min-height: 150px;
}

.coach-recipe-card-badges,
.coach-recipe-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coach-recipe-card-badges {
  left: 18px;
  position: absolute;
  top: 18px;
}

.coach-recipe-card-badges b,
.coach-recipe-chip-row span,
.coach-meal-plan-topbar span {
  background: rgba(255, 91, 0, 0.14);
  border: 1px solid rgba(255, 91, 0, 0.28);
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 1000;
  padding: 5px 8px;
}

.coach-recipe-card strong,
.coach-recipe-detail h3,
.coach-meal-plan-topbar h3 {
  color: #fff;
  margin: 0;
}

.coach-recipe-card small,
.coach-recipe-card em,
.coach-recipe-detail p,
.coach-recipe-detail small,
.coach-week-day-head em,
.coach-meal-slot-card small {
  color: var(--muted);
  font-style: normal;
}

.coach-recipe-detail {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 16px;
  padding: 14px;
}

.coach-recipe-detail-hero,
.coach-recipe-edit-head {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 0.58fr);
  align-items: start;
}

.coach-recipe-detail-hero > div:last-child,
.coach-recipe-edit-head > label {
  display: grid;
  gap: 10px;
}

.coach-recipe-image-fields { display: grid; gap: 8px; align-content: start; }
.coach-recipe-image-fields > label { display: grid; gap: 6px; }
.coach-recipe-image-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.coach-upload-btn { cursor: pointer; margin: 0; }
.coach-upload-btn input[type="file"] { display: none; }

.coach-recipe-macro-strip {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.coach-recipe-macro-strip div {
  display: grid;
  gap: 4px;
  padding: 13px;
  text-align: center;
}

.coach-recipe-macro-strip strong {
  color: #fff;
  font-size: 1.1rem;
}

.coach-recipe-macro-strip span {
  color: var(--muted);
  font-size: 12px;
}

.coach-recipe-tabs {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coach-recipe-tabs section {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 13px;
}

.coach-recipe-tabs h4 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent);
  margin: 0 0 4px;
  padding-bottom: 10px;
}

.coach-recipe-tabs p {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
}

.coach-meal-plan-create-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
}

.coach-cover-drop {
  align-content: start;
}

.coach-cover-drop span {
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  justify-items: center;
  min-height: 160px;
  padding: 18px;
  text-align: center;
}

.coach-cover-drop span svg,
.coach-cover-drop span i {
  color: var(--accent);
}

.coach-meal-plan-topbar {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.coach-assign-meal-plan {
  align-items: end;
  background: rgba(255, 91, 0, 0.055);
  border: 1px solid rgba(255, 91, 0, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(210px, 1fr) minmax(180px, 0.7fr) minmax(140px, 0.45fr) minmax(120px, 0.4fr) auto;
  padding: 14px;
}

.coach-assign-meal-plan > div,
.coach-assign-meal-plan label {
  display: grid;
  gap: 6px;
}

.coach-assign-meal-plan strong {
  color: #fff;
}

.coach-assign-meal-plan small,
.coach-assign-meal-plan label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.coach-assign-meal-plan input,
.coach-assign-meal-plan select {
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 12px 13px;
}

.coach-assign-meal-plan select option {
  background: #0b0b0b;
  color: #fff;
}

.coach-meal-plan-assignments {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.coach-meal-plan-assignment-row {
  align-items: center;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 11px;
}

.coach-meal-plan-assignment-row.editable {
  grid-template-columns: auto minmax(130px, 1fr) minmax(160px, 1.2fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) auto auto;
}

.coach-meal-plan-assignment-row label {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  font-weight: 900;
  gap: 5px;
  text-transform: uppercase;
}

.coach-meal-plan-assignment-row input,
.coach-meal-plan-assignment-row select {
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  min-width: 0;
  padding: 10px 11px;
  text-transform: none;
}

.coach-meal-plan-assignment-row select option {
  background: #0b0b0b;
  color: #fff;
}

.coach-meal-plan-assignment-row small {
  color: var(--muted);
}

.coach-meal-plan-assignment-row.editable small {
  grid-column: 2 / -1;
}

.status-pill.is-active {
  background: rgba(63, 184, 92, 0.15);
  border: 1px solid rgba(63, 184, 92, 0.35);
  color: #6ee184;
}

.coach-week-average {
  align-items: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.coach-week-average span {
  color: var(--muted);
}

.coach-week-builder {
  display: grid;
  gap: 16px;
}

.coach-week-day {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.coach-week-day-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.coach-week-day-head span {
  color: var(--accent);
  display: block;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-week-day-head strong {
  color: #fff;
  display: block;
  margin-top: 4px;
}

.coach-week-meal-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coach-meal-slot-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-height: 132px;
  padding: 13px;
}

.coach-meal-slot-card span {
  color: var(--accent);
  display: block;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-meal-slot-card strong {
  color: #fff;
  display: block;
  margin-top: 4px;
}

.coach-meal-slot-card b {
  align-self: end;
  color: #fff;
}

.nutrition-inline-check {
  align-items: center;
  align-self: end;
  display: flex !important;
  flex-direction: row;
  gap: 10px !important;
  min-height: 46px;
}

.nutrition-inline-check input {
  accent-color: var(--accent);
  min-width: auto;
  padding: 0;
}

.nutrition-week-editor {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nutrition-plan-preview {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.nutrition-day-meals {
  display: grid;
  gap: 8px;
}

.nutrition-meal-mini {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.nutrition-meal-mini span,
.nutrition-week-view span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.nutrition-meal-mini strong,
.nutrition-meal-mini small {
  display: block;
}

.nutrition-meal-mini small,
.nutrition-week-view small {
  color: var(--muted);
}

.nutrition-meal-mini b {
  color: #fff;
}

.nutrition-week-view {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.nutrition-week-view > div {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-height: 118px;
  min-width: 0;
  padding: 10px;
}

.nutrition-week-view strong,
.nutrition-week-view span,
.nutrition-week-view small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.portal-link-list.compact button {
  align-items: center;
  display: flex;
  justify-content: space-between;
  text-align: left;
  width: 100%;
}

.nutrition-overview-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  padding: 22px;
}

.nutrition-overview-strip div {
  display: grid;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 18px;
}

.nutrition-overview-strip div:last-child {
  border-right: 0;
}

.nutrition-overview-strip strong {
  color: #fff;
  font-size: 1.7rem;
}

.nutrition-table {
  display: grid;
  padding: 0 18px 18px;
}

.nutrition-table-head,
.nutrition-table-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.8fr) 80px 100px 90px 90px 80px 120px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 12px 0;
}

.nutrition-table-head {
  color: rgba(245, 241, 235, 0.66);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nutrition-table-row > span:first-child {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
}

.nutrition-table-row > span:first-child strong,
.nutrition-table-row > span:first-child small {
  grid-column: 2;
}

.nutrition-table-row > span:first-child b {
  grid-row: 1 / span 2;
}

.coach-tip-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
}

.coach-tip-card strong,
.coach-tip-card a {
  color: var(--accent);
}

.coach-tip-card a {
  margin-left: auto;
  font-weight: 900;
  text-decoration: none;
}

.full-width {
  width: calc(100% - 36px);
  margin: 0 18px 18px;
}

.startup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  border-color: rgba(255, 90, 18, 0.24);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 90, 18, 0.14), transparent 12rem),
    rgba(255, 255, 255, 0.035);
}

.startup-card h2,
.startup-card p {
  margin: 0;
}

.startup-card p,
.startup-card small {
  color: rgba(255, 255, 255, 0.62);
}

.startup-wizard-shell {
  max-width: 1180px;
}

.startup-wizard-form {
  display: grid;
  gap: 24px;
}

.wizard-section {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-section:last-of-type {
  border-bottom: 0;
}

.wizard-section > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 90, 18, 0.28);
  border-radius: 14px;
  background: rgba(255, 90, 18, 0.1);
}

.wizard-section h2 {
  margin: 0 0 16px;
  color: #fff;
}

.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.wizard-complete-pill {
  align-self: start;
  border: 1px solid rgba(117, 201, 42, 0.3);
  border-radius: 999px;
  padding: 10px 14px;
  color: #8ee15a;
  background: rgba(117, 201, 42, 0.08);
  font-weight: 1000;
}

.upload-field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.upload-field small {
  display: block;
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  color: rgba(245, 241, 235, 0.58);
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.wizard-photo-upload {
  justify-items: start;
}

.client-language-select {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  height: 52px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.client-language-control {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  width: 64px;
  min-width: 64px;
  height: 52px;
  padding: 0 10px;
  background: #050505;
  overflow: hidden;
}

.client-language-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  color: #fff;
  opacity: 0;
  background: transparent;
  font-size: 1.18rem;
  font-weight: 900;
  text-align: center;
  color-scheme: dark;
  cursor: pointer;
}

.client-language-select select option {
  color: #111;
  background: #fff;
}

.client-language-flag {
  position: relative;
  display: block;
  width: 31px;
  height: 22px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.client-language-flag-da {
  background:
    linear-gradient(90deg, transparent 0 30%, #fff 30% 42%, transparent 42%),
    linear-gradient(180deg, #c8102e 0 42%, #fff 42% 58%, #c8102e 58%);
}

.client-language-flag-hu {
  background:
    linear-gradient(180deg, #ce2939 0 33.33%, #fff 33.33% 66.66%, #477050 66.66%);
}

.client-language-flag-en {
  background:
    linear-gradient(90deg, transparent 0 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(180deg, transparent 0 36%, #fff 36% 64%, transparent 64%),
    #012169;
}

.client-language-flag-en::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, transparent 0 45%, #c8102e 45% 55%, transparent 55%),
    linear-gradient(180deg, transparent 0 42%, #c8102e 42% 58%, transparent 58%);
}

.client-language-select-phone {
  height: 38px;
}

.client-language-select-phone .client-language-control {
  width: 56px;
  min-width: 56px;
  height: 38px;
  border-color: rgba(255, 90, 18, 0.24);
  border-radius: 999px;
  padding: 0 8px;
  color: #111;
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.02rem;
  box-shadow: 0 12px 26px rgba(15, 15, 15, 0.08);
}

.client-language-select-settings {
  justify-content: space-between;
  width: 100%;
  height: auto;
}

.client-language-select-settings .client-language-control {
  width: 88px;
}

.settings-language-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.settings-language-card p {
  margin: 0;
  color: var(--muted);
}

.profile-switch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(255, 90, 18, 0.42);
  border-radius: 14px;
  padding: 0 16px;
  color: #fff;
  background: rgba(255, 90, 18, 0.12);
  font-weight: 1000;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.profile-switch-button:hover {
  border-color: var(--accent);
  background: rgba(255, 90, 18, 0.22);
  transform: translateY(-1px);
}

.admin-view-as {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.view-as-label {
  color: rgba(245, 241, 235, 0.68);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.view-as-pills {
  display: flex;
  gap: 4px;
}

.view-as-pill {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 90, 18, 0.4);
  background: transparent;
  color: rgba(245, 241, 235, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.view-as-pill:hover {
  background: rgba(255, 90, 18, 0.2);
  color: #f7f3ef;
}

.view-as-pill.active {
  background: #ff5a12;
  color: #fff;
  border-color: #ff5a12;
}

.admin-view-as label {
  color: rgba(245, 241, 235, 0.68);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-view-as select {
  min-width: 170px;
  min-height: 42px;
  border-color: rgba(255, 90, 18, 0.36);
  color: #f7f3ef;
  background-color: rgba(255, 90, 18, 0.1);
  font-weight: 900;
}

.admin-preview-exit {
  min-height: 42px;
  white-space: nowrap;
}

.admin-view-as-sidebar {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 90, 18, 0.22);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 90, 18, 0.06);
  overflow: hidden;
}

.admin-view-as-sidebar .view-as-pills {
  flex-wrap: wrap;
  gap: 6px;
}

.admin-view-as-sidebar .view-as-pill {
  padding: 4px 10px;
  font-size: 0.72rem;
}

.admin-view-as-sidebar label {
  color: rgba(245, 241, 235, 0.54);
}

/* ============================================================
   Users page (/coach/users) — admin-only people management
   ============================================================ */
.users-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: none;
}
.users-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.users-page-header > div:first-child { min-width: 320px; }
.users-page-header h1 { margin: 4px 0 6px 0; }
.users-page-header p {
  color: rgba(245, 241, 235, 0.65);
  max-width: 60ch;
  margin: 0;
}
.users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.users-tabs {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.users-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 90, 18, 0.32);
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 241, 235, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.users-tab:hover {
  background: rgba(255, 90, 18, 0.16);
  color: #f7f3ef;
}
.users-tab.active {
  background: #ff5a12;
  color: #fff;
  border-color: #ff5a12;
}
.users-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.7rem;
  font-weight: 700;
}
.users-tab.active .users-tab-count { background: rgba(0, 0, 0, 0.32); }
.users-search input {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 90, 18, 0.32);
  background: rgba(255, 90, 18, 0.04);
  color: #f7f3ef;
  font-size: 0.86rem;
  min-width: 260px;
}
.users-search input:focus { outline: none; border-color: #ff5a12; }

.users-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .users-layout { grid-template-columns: 1fr; }
}

.users-table-panel { padding: 0; overflow: hidden; }
.users-table {
  width: 100%;
  border-collapse: collapse;
}
.users-table th,
.users-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 90, 18, 0.12);
  font-size: 0.88rem;
}
.users-table th {
  background: rgba(255, 90, 18, 0.05);
  color: rgba(245, 241, 235, 0.65);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.users-row { cursor: pointer; transition: background 0.15s; }
.users-row:hover { background: rgba(255, 90, 18, 0.06); }
.users-row.is-selected { background: rgba(255, 90, 18, 0.12); }
.users-row.is-selected td:first-child { box-shadow: inset 3px 0 0 #ff5a12; }
.users-cell-user { display: flex; align-items: center; gap: 12px; }
.users-cell-user .avatar { width: 36px; height: 36px; font-size: 0.78rem; }
.users-cell-user strong { display: block; color: #f7f3ef; line-height: 1.2; }
.users-cell-user small { display: block; color: rgba(245, 241, 235, 0.55); font-size: 0.76rem; }
.users-cell-muted { color: rgba(245, 241, 235, 0.4); }
.users-cell-actions { text-align: right; white-space: nowrap; }

.users-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: rgba(255, 90, 18, 0.12);
  color: #ff5a12;
  border: 1px solid rgba(255, 90, 18, 0.36);
}
.users-role-admin { background: rgba(168, 85, 247, 0.16); color: #c084fc; border-color: rgba(168, 85, 247, 0.45); }
.users-role-owner { background: rgba(56, 189, 248, 0.16); color: #38bdf8; border-color: rgba(56, 189, 248, 0.45); }
.users-role-coach { background: rgba(255, 90, 18, 0.16); color: #ff8c4f; border-color: rgba(255, 90, 18, 0.45); }
.users-role-member,
.users-role-client { background: rgba(74, 222, 128, 0.14); color: #4ade80; border-color: rgba(74, 222, 128, 0.4); }
.users-role-badge.users-role-selfcoached { background: rgba(250, 204, 21, 0.14); color: #facc15; border-color: rgba(250, 204, 21, 0.45); }
.users-detail-hint { margin: 6px 2px 0; font-size: 0.8rem; line-height: 1.45; color: rgba(245, 241, 235, 0.62); }

.users-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  background: rgba(255, 90, 18, 0.16);
  color: #f7f3ef;
}
.users-status-active { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.users-status-inactive { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.users-status-archived { background: rgba(245, 241, 235, 0.12); color: rgba(245, 241, 235, 0.6); }
.users-empty {
  text-align: center;
  padding: 36px 12px;
  color: rgba(245, 241, 235, 0.55);
}

/* Detail / edit panel */
.users-detail-panel {
  position: sticky;
  top: 16px;
  padding: 22px;
}
.users-detail-empty {
  text-align: center;
  padding: 32px 16px;
  color: rgba(245, 241, 235, 0.7);
}
.users-detail-empty h2 { margin: 8px 0; color: #f7f3ef; }
.users-detail-empty p { color: rgba(245, 241, 235, 0.55); margin: 0; }

.users-detail-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.users-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 90, 18, 0.12);
}
.users-detail-header h2 { margin: 2px 0; color: #f7f3ef; font-size: 1.2rem; }
.users-detail-header .eyebrow { display: block; }
.users-detail-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

.users-detail-section {
  border: 1px solid rgba(255, 90, 18, 0.14);
  border-radius: 10px;
  padding: 14px 14px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.users-detail-section legend {
  padding: 0 6px;
  color: rgba(245, 241, 235, 0.7);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.users-detail-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: rgba(245, 241, 235, 0.75);
  font-weight: 700;
}
.users-detail-form input,
.users-detail-form select,
.users-detail-form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 90, 18, 0.24);
  background: rgba(255, 90, 18, 0.04);
  color: #f7f3ef;
  font-size: 0.88rem;
  font-weight: 500;
  font-family: inherit;
}
.users-detail-form input:focus,
.users-detail-form select:focus,
.users-detail-form textarea:focus {
  outline: none;
  border-color: #ff5a12;
  background: rgba(255, 90, 18, 0.08);
}
.users-detail-form textarea { resize: vertical; min-height: 60px; }

.users-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.button-danger {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.button-danger:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #fff;
  border-color: #ef4444;
}

/* ============================================================
   Coach client > Programs tab — per-program schedule view
   ============================================================ */
.coach-program-card {
  border: 1px solid rgba(255, 90, 18, 0.16);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(255, 90, 18, 0.03);
}
.coach-program-row-meta {
  display: block;
  color: rgba(245, 241, 235, 0.5);
  font-size: 0.74rem;
  margin-top: 4px;
}
.program-schedule {
  margin-top: 12px;
  border-top: 1px solid rgba(255, 90, 18, 0.14);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-schedule-empty {
  color: rgba(245, 241, 235, 0.5);
  font-size: 0.82rem;
  padding: 10px 0;
  text-align: center;
}
.program-schedule-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 0.78rem;
  color: rgba(245, 241, 235, 0.7);
  padding-bottom: 4px;
}
.program-schedule-totals strong { color: #f7f3ef; }
.program-schedule-totals-missed { color: #fca5a5; }
.program-schedule-totals-missed strong { color: #fca5a5; }
.program-schedule-totals-total { margin-left: auto; color: rgba(245, 241, 235, 0.5); }
.program-schedule-week {
  border: 1px solid rgba(255, 90, 18, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.program-schedule-week summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: #f7f3ef;
  user-select: none;
}
.program-schedule-week summary::-webkit-details-marker { display: none; }
.program-schedule-week summary::before {
  content: "▸";
  color: rgba(255, 90, 18, 0.7);
  font-size: 0.7rem;
  transition: transform 0.15s;
  display: inline-block;
}
.program-schedule-week[open] summary::before { transform: rotate(90deg); }
.program-schedule-week summary strong { font-weight: 800; }
.program-schedule-week-range {
  color: rgba(245, 241, 235, 0.55);
  font-size: 0.74rem;
}
.program-schedule-week-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(245, 241, 235, 0.55);
  text-transform: uppercase;
}
.program-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 0;
}
.program-schedule-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 90, 18, 0.08);
  font-size: 0.84rem;
}
.program-schedule-row:first-child { border-top: 1px solid rgba(255, 90, 18, 0.12); }
.program-schedule-date {
  font-weight: 700;
  color: rgba(245, 241, 235, 0.85);
}
.program-schedule-title strong {
  display: block;
  color: #f7f3ef;
  font-weight: 700;
}
.program-schedule-title small {
  display: block;
  color: rgba(245, 241, 235, 0.55);
  font-size: 0.72rem;
  margin-top: 2px;
}
.program-schedule-row-completed { background: rgba(74, 222, 128, 0.04); }
.program-schedule-row-today { background: rgba(255, 90, 18, 0.1); }
.program-schedule-row-missed { background: rgba(239, 68, 68, 0.05); }
.program-schedule-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.program-schedule-status-completed { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.program-schedule-status-today { background: #ff5a12; color: #fff; }
.program-schedule-status-upcoming { background: rgba(255, 90, 18, 0.16); color: #ff8c4f; }
.program-schedule-status-missed { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }

/* Per-row actions: move / done / remove */
.program-schedule-row {
  grid-template-columns: 110px 1fr auto auto;
}
.program-schedule-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.program-schedule-action-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 90, 18, 0.28);
  background: rgba(255, 90, 18, 0.05);
  cursor: pointer;
  font-size: 0.78rem;
  color: rgba(245, 241, 235, 0.85);
}
.program-schedule-action-move:hover {
  background: rgba(255, 90, 18, 0.12);
  border-color: #ff5a12;
}
.program-schedule-action-move input[type="date"] {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  width: 130px;
}
.program-schedule-action-move input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.7) hue-rotate(330deg) saturate(2);
  cursor: pointer;
}
.program-schedule-action-toggle,
.program-schedule-action-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255, 90, 18, 0.28);
  background: rgba(255, 90, 18, 0.05);
  color: rgba(245, 241, 235, 0.85);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.program-schedule-action-toggle:hover {
  background: rgba(74, 222, 128, 0.22);
  border-color: rgba(74, 222, 128, 0.55);
  color: #4ade80;
}
.program-schedule-action-toggle.is-on {
  background: rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.55);
  color: #4ade80;
}
.program-schedule-action-remove:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}
.program-schedule-hint {
  width: 100%;
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(245, 241, 235, 0.5);
  font-style: italic;
}

/* Client training row — match the move control style */
.training-row-move {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 90, 18, 0.28);
  background: rgba(255, 90, 18, 0.05);
  cursor: pointer;
}
.training-row-move:hover {
  background: rgba(255, 90, 18, 0.12);
  border-color: #ff5a12;
}
.training-row-move input[type="date"] {
  background: transparent;
  border: none;
  color: #f7f3ef;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  width: 130px;
}
.training-row-move input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0.7) hue-rotate(330deg) saturate(2);
  cursor: pointer;
}

.admin-view-as-sidebar select,
.admin-view-as-sidebar .admin-preview-exit {
  width: 100%;
}

.profile-switch-sidebar {
  width: 100%;
  border-color: rgba(255, 90, 18, 0.28);
  background: rgba(255, 90, 18, 0.08);
  text-align: left;
}

.profile-switch-sidebar span {
  grid-column: 1 / -1;
}

.profile-switch-sidebar span::before {
  content: "⇄";
  margin-right: 8px;
  color: var(--accent);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  color: #f7f3ef;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 90, 18, 0.22), transparent 18rem),
    radial-gradient(circle at 88% 72%, rgba(255, 90, 18, 0.12), transparent 20rem),
    linear-gradient(135deg, #050505, #111 56%, #050505);
}

.auth-card {
  width: min(480px, 100%);
  display: grid;
  gap: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 30px;
  background: rgba(12, 12, 12, 0.86);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(22px);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-brand-mark {
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.04);
}

.auth-brand strong,
.auth-brand small {
  display: block;
  letter-spacing: 0.08em;
}

.auth-brand strong {
  color: #fff;
  font-size: 1.9rem;
  line-height: 0.85;
}

.auth-brand small,
.auth-copy span {
  color: var(--accent);
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-copy {
  display: grid;
  gap: 8px;
}

.auth-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 9vw, 4.1rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.auth-copy p,
.auth-loading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form label {
  display: grid;
  gap: 7px;
}

.auth-form label span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.82rem;
  font-weight: 900;
}

.auth-form input {
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.auth-form input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.auth-submit,
.auth-google {
  min-height: 50px;
  justify-content: center;
}

.auth-google {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}

.auth-google span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #111;
  background: #fff;
  font-weight: 1000;
}

/* Server reports Google OAuth isn't configured — show it plainly instead of
   letting the button bounce the user back with an error. */
.auth-google.is-disabled {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  opacity: 0.45;
  cursor: not-allowed;
}
.auth-google.is-disabled span { opacity: 0.6; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
}

.auth-mode-switch {
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.auth-mode-switch:hover {
  color: var(--accent);
}

.auth-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
}

.auth-loading span {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: auth-spin 900ms linear infinite;
}

.auth-error-note {
  margin: 0;
  border: 1px solid rgba(255, 90, 18, 0.28);
  border-radius: 12px;
  padding: 12px 14px;
  color: #ffd8c8;
  background: rgba(255, 90, 18, 0.1);
  line-height: 1.45;
}

.auth-user-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-user-actions small {
  max-width: 180px;
  overflow: hidden;
  color: var(--muted);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-user-actions .button {
  min-height: 38px;
  padding: 8px 12px;
}

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

.phone-dashboard {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  color: #171717;
}

/* Desktop / wide-screen layout for the client dashboard.
   Keeps the mobile "phone-card" components but lays them out as a
   multi-column grid so the page actually uses the PC real estate. */
@media (min-width: 1100px) {
  .phone-dashboard {
    max-width: 1280px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    align-items: stretch;
  }
  .phone-dashboard > .phone-app-header,
  .phone-dashboard > .phone-priority-alert,
  .phone-dashboard > .phone-hero-card,
  .phone-dashboard > .phone-daily-tracks-card,
  .phone-dashboard > .phone-week-card,
  .phone-dashboard > form.phone-input-panel,
  .phone-dashboard > .startup-wizard-prompt,
  .phone-dashboard > .phone-quick-dock,
  .phone-dashboard > .phone-quick-panel {
    grid-column: 1 / -1;
  }
  .phone-daily-track-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  /* Tighten the hero so it doesn't dominate the wide page */
  .phone-hero-card {
    padding: 22px 28px;
  }
}

@media (min-width: 1480px) {
  .phone-dashboard {
    max-width: 1480px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }
}

/* PC-only sizing / spacing polish for the dashboard cards.
   On mobile the original mobile-first sizes still apply.            */
@media (min-width: 1100px) {
  /* Uniform card padding + border-radius. */
  .phone-dashboard .phone-card {
    padding: 18px 20px;
    border-radius: 18px;
  }

  /* Step + Water cards: shrink the giant number + illustration so they
     match the height of the nutrition card next to them. */
  .phone-step-card,
  .phone-water-card {
    grid-template-columns: minmax(0, 1fr) 60px;
    gap: 12px;
  }
  .phone-step-card strong,
  .phone-water-card strong {
    margin-top: 6px;
    font-size: 1.6rem;
  }
  .phone-step-card small,
  .phone-water-card small {
    font-size: 0.78rem;
  }
  .phone-illustration {
    width: 60px;
    height: 60px;
    border-radius: 16px;
  }
  .phone-illustration::before {
    font-size: 1.6rem;
  }
  .phone-illustration.shoe::before { font-size: 0.74rem; }

  /* Nutrition card: tighten the headline number and macro grid. */
  .phone-nutrition-main strong {
    font-size: 1.8rem;
  }
  .phone-macro-grid {
    margin: 6px 0 10px;
    gap: 10px;
  }

  /* "+ Log måltid" button is huge — bring it inline-size. */
  .phone-nutrition-card .phone-primary-action {
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  /* Habits + Check-ins mini tiles: let them flow as siblings of the
     other cards (one tile per grid column) instead of squeezing into a
     single half-column. */
  .phone-mini-grid {
    display: contents;
  }
  .phone-mini-tile {
    border-radius: 18px;
    padding: 18px 20px;
    min-height: 100%;
    display: grid;
    align-content: center;
    gap: 6px;
  }
  .phone-mini-tile span {
    font-size: 2.2rem;
  }
  .phone-mini-tile strong {
    font-size: 0.96rem;
  }
  .phone-mini-tile small {
    font-size: 0.78rem;
  }
}

.phone-app-header {
  display: grid;
  gap: 10px;
  padding-top: 6px;
}

.phone-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.phone-header-actions {
  align-items: center;
  display: flex;
  gap: 10px;
}

.phone-logo-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 90, 18, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
}

.phone-logo-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.phone-bell {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 90, 18, 0.2);
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.84rem;
  font-weight: 1000;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(255, 90, 18, 0.26);
}

.phone-date {
  color: #c98736;
  font-size: 0.86rem;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.phone-app-header h1 {
  margin: 0;
  color: #111;
  font-size: clamp(2.25rem, 10vw, 3.25rem);
  line-height: 0.96;
  letter-spacing: 0;
}

@media (min-width: 721px) {
  .phone-app-header h1 {
    color: #f7f3ec;
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  }
}

.phone-hero-card,
.phone-card,
.phone-alert,
.phone-mini-tile {
  border-radius: 20px;
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.08);
}

.phone-hero-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  min-height: 178px;
  padding: 24px 22px;
  color: #fff;
  background:
    radial-gradient(circle at 70% 10%, rgba(255, 255, 255, 0.12), transparent 8rem),
    radial-gradient(circle at 22% 110%, rgba(255, 90, 18, 0.28), transparent 10rem),
    linear-gradient(135deg, #111, #555);
}

.phone-hero-card.training {
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 90, 18, 0.26), transparent 9rem),
    linear-gradient(135deg, #070707, #242424 55%, #5c210a);
}

.phone-hero-card span,
.phone-wod-card span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.84rem;
  font-weight: 1000;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.phone-hero-card h2 {
  max-width: 18rem;
  margin: auto 0 0;
  color: #fff;
  font-size: 1.52rem;
  line-height: 1.12;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.phone-hero-card p,
.phone-hero-card small {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.phone-week-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.phone-daily-tracks-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.phone-daily-tracks-heading {
  grid-template-columns: 1fr;
}

.phone-daily-tracks-heading p {
  margin: 4px 0 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.35;
}

.phone-daily-track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.phone-daily-track-tile {
  display: grid;
  align-content: space-between;
  gap: 8px;
  min-height: 132px;
  border: 1px solid rgba(199, 93, 52, 0.28);
  border-radius: 17px;
  padding: 13px;
  color: #1C1A17;
  background: #fff;
  text-decoration: none;
}

/* Cards with a workout set: light card with a subtle warm tint + orange accent
   border so they still read as "active" without going dark. */
.phone-daily-track-tile.has-workout {
  background: linear-gradient(135deg, #ffffff, rgba(255, 244, 234, 0.9));
  border-color: rgba(199, 93, 52, 0.32);
  box-shadow: 0 8px 22px rgba(199, 93, 52, 0.06);
}

.phone-daily-track-tile.is-empty {
  border-color: rgba(17, 17, 17, 0.08);
  color: #171717;
  background: rgba(255, 247, 239, 0.6);
}

.phone-daily-track-tile span,
.phone-daily-track-tile em {
  color: var(--accent);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.phone-daily-track-tile strong {
  color: inherit;
  font-size: 0.95rem;
  line-height: 1.12;
}

.phone-daily-track-tile small {
  color: currentColor;
  font-size: 0.74rem;
  line-height: 1.2;
  opacity: 0.72;
}

.phone-daily-track-tile.is-locked {
  opacity: 0.7;
  cursor: not-allowed;
  color: #171717;
  background: rgba(17, 17, 17, 0.03);
  border: 1px dashed rgba(17, 17, 17, 0.18);
  box-shadow: none;
  filter: grayscale(0.4);
}
.phone-daily-track-tile.is-locked em {
  color: #f59e0b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.phone-daily-track-tile.is-locked:hover {
  opacity: 0.55;
  transform: none;
}

.phone-week-list {
  display: grid;
  gap: 10px;
}

.phone-week-day {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.phone-week-day > strong {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.phone-week-day > div {
  display: grid;
  gap: 7px;
}

/* v557 (reported: "Better colors for visibility" — the screenshot was THIS card,
   not the report page). Was a 65%-translucent cream over the dark dashboard card,
   which renders mid-grey, with near-black #171717 text on top: the workout names
   (Capoot, Tunge Ben 12, …) were grey-on-grey and barely legible. Token-driven
   now, so the chip is a real surface with real ink in both themes. */
.phone-week-day a {
  display: grid;
  gap: 2px;
  border: 1px solid var(--bf-line, rgba(24, 24, 24, 0.08));
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--bf-ink, #171717);
  background: var(--bf-surface2, rgba(255, 247, 239, 0.65));
  text-decoration: none;
}

.phone-week-day a.active {
  border-color: rgba(255, 90, 18, 0.4);
  box-shadow: inset 3px 0 0 var(--accent);
}

.phone-week-day a span {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.phone-week-day a small {
  overflow: hidden;
  color: var(--bf-ink, #171717);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The workout NAME is the point of this row — never let a muted-small rule or
   the sand ink catch-all wash it out. */
.bf-sand .phone-week-day a small,
.bf-sand .main-content .phone-week-day a small { color: var(--bf-ink); }
.bf-sand .phone-week-day a span,
.bf-sand .main-content .phone-week-day a span { color: var(--bf-accent); }

/* Rest day placeholder for empty days in the weekly grid. */
.phone-week-rest {
  padding: 10px 12px;
  border: 1px dashed rgba(24, 24, 24, 0.16);
  border-radius: 12px;
  color: #888;
  background: rgba(255, 247, 239, 0.32);
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
}

/* PC layout: each day of the week (Mon–Sun) becomes its own column. */
@media (min-width: 1100px) {
  .phone-week-list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
  }
  .phone-week-day {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 6px;
    align-items: stretch;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 247, 239, 0.4);
    border: 1px solid rgba(24, 24, 24, 0.06);
  }
  .phone-week-day > strong {
    font-size: 0.7rem;
    text-align: center;
  }
  .phone-week-day > div {
    display: grid;
    gap: 6px;
    align-content: start;
  }
  .phone-week-day.is-today {
    background: rgba(255, 90, 18, 0.1);
    border-color: rgba(255, 90, 18, 0.32);
    box-shadow: 0 0 0 1px rgba(255, 90, 18, 0.32);
  }
  .phone-week-day.is-past {
    opacity: 0.65;
  }
  .phone-week-day.is-rest {
    background: rgba(255, 247, 239, 0.2);
  }
  .phone-week-day a {
    padding: 8px 10px;
    border-radius: 8px;
  }
  .phone-week-day a span {
    font-size: 0.6rem;
  }
  .phone-week-day a small {
    font-size: 0.74rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }
  .phone-week-rest {
    padding: 8px 6px;
    font-size: 0.7rem;
  }
}

.phone-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  /* v542: was a hardcoded pale pink (#ffe7e7) + dark maroon text, so in dark mode
     the pill stayed pink while the sand ink catch-all repainted the <p> in
     near-white ink — reported from a phone as an alert with NO readable text.
     Both ends now come from the danger tokens, which the dark theme flips
     (--bf-danger-bg #3A1F1B / --bf-danger #E06456). */
  color: var(--bf-danger, #4f2b2b);
  background: var(--bf-danger-bg, #ffe7e7);
}

.phone-alert span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
}

.phone-alert p {
  margin: 0;
  /* v564: the v542 fix assumed --bf-danger/--bf-danger-bg are always defined.
     They are only defined inside .bf-sand, so on a shell without it the pill
     fell back to the pale-pink literal above while a theme catch-all repainted
     this <p> in near-white ink: reported from a real phone as an alert with no
     readable text at all (bug-80abb0b1). `inherit !important` pins the text to
     the pill's OWN colour, so no catch-all at any specificity can separate the
     two again, whichever shell classes happen to be present. */
  color: inherit !important;
}

.phone-alert button {
  border: 0;
  color: inherit !important;
  opacity: 0.7;
  background: none;
  font-size: 1.5rem;
}

.phone-startup-card {
  display: grid;
  gap: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 90, 18, 0.2), transparent 9rem),
    linear-gradient(135deg, #111, #1d1d1d);
}

.phone-startup-card span,
.startup-card span,
.wizard-section > span {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phone-startup-card h2,
.phone-startup-card p {
  margin: 0;
}

.phone-startup-card p,
.phone-startup-card small {
  color: rgba(255, 255, 255, 0.7);
}

.phone-startup-card a,
.startup-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #ff5a12, #bd2e10);
  font-weight: 1000;
  text-decoration: none;
}

.phone-card,
.phone-mini-tile {
  border: 1px solid rgba(17, 17, 17, 0.05);
  padding: 18px;
  background: #fff;
}

.phone-card h2,
.phone-mini-tile strong {
  margin: 0;
  color: #141414;
  font-size: 1.12rem;
}

.phone-step-card,
.phone-water-card,
.phone-food-card,
.phone-coach-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.phone-step-card strong,
.phone-water-card strong {
  display: block;
  margin-top: 20px;
  color: #111;
  font-size: 2rem;
}

.phone-step-card small,
.phone-water-card small {
  color: #555;
  font-size: 1rem;
  font-weight: 500;
}

.phone-water-glasses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.phone-water-glasses button {
  width: 20px;
  height: 28px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 5px 5px 9px 9px;
  background: #fff;
  cursor: pointer;
}

.phone-water-glasses button.filled {
  border-color: rgba(54, 147, 255, 0.72);
  background: linear-gradient(180deg, #71b6ff, #1b72d8);
}

.phone-water-glasses-panel {
  margin-top: 0;
}

/* v564: the "I dag" water card now works like the Kost one — same steppers,
   same glasses — because he asked for the two to match (bug-f047dac1). The
   .kost-step rules are scoped to the Kost screen's own tokens (--kost-ink,
   background:#fff), which do not exist here, so restate them token-free:
   translucent fills tint whatever card is behind them in either theme. */
.phone-water-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.phone-water-steppers .kost-step {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(127, 127, 127, 0.34);
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.12);
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.phone-water-steppers .kost-step-dark {
  border-color: transparent;
  /* Same washed-accent recipe as the other primary pills. A "+" glyph is a thin
     1.25rem mark, so it needs the deeper wash: at 0.09 it measured 4.19:1. */
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.3)), var(--bf-accent-d, #b34e28);
  /* !important because `.bf-sand .main-content button:not(.button-primary)...`
     repaints every non-primary button to page ink — measured 2.47:1 dark-on-dark
     in the light theme. This is the sand dark-pill trap, again. */
  color: #fff !important;
}

/* An empty glass was `background:#fff`, i.e. a white pip that never flipped;
   the generated dark-mode block then repainted it to the card colour, so it
   vanished into the card entirely (measured 1.00:1 against it). !important is
   the only thing that survives BOTH, and this is a leaf decoration — nothing
   else depends on it. Measured after: 1.6:1 fill + a 42% border, so an unfilled
   glass reads as an outline instead of disappearing. */
.phone-water-glasses button:not(.filled) {
  border-color: rgba(127, 127, 127, 0.42) !important;
  background: rgba(127, 127, 127, 0.2) !important;
}

.phone-water-size {
  margin-top: 12px;
}

.phone-water-size > small {
  display: block;
  margin-bottom: 6px;
  opacity: 0.75;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.phone-water-size > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.phone-water-size button {
  border: 1px solid rgba(127, 127, 127, 0.34);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(127, 127, 127, 0.12);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.phone-water-size button.is-on {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.3)), var(--bf-accent-d, #b34e28);
  /* !important because `.bf-sand .main-content button:not(.button-primary)...`
     repaints every non-primary button to page ink — measured 2.47:1 dark-on-dark
     in the light theme. This is the sand dark-pill trap, again. */
  color: #fff !important;
}

.phone-illustration {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 90, 18, 0.15), rgba(255, 179, 44, 0.12));
}

.phone-illustration::before {
  color: var(--accent);
  font-size: 2.4rem;
  font-weight: 1000;
}

.phone-illustration.shoe::before {
  content: "STEP";
  font-size: 0.92rem;
}

.phone-illustration.plate::before {
  content: "FOOD";
  font-size: 0.92rem;
}

.phone-illustration.water::before {
  content: "VAND";
  font-size: 0.92rem;
}

.phone-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.phone-goal-ring {
  display: grid;
  width: 110px;
  height: 110px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 55%, transparent 56%),
    conic-gradient(var(--accent) 0 calc(var(--goal) * 1%), rgba(255, 90, 18, 0.12) calc(var(--goal) * 1%) 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 90, 18, 0.05), 0 12px 30px rgba(255, 90, 18, 0.13);
}

.phone-goal-ring strong {
  align-self: end;
  color: #111;
  font-size: 1.7rem;
}

.phone-goal-ring small {
  align-self: start;
  max-width: 70px;
  color: #8b8b8b;
  font-size: 0.76rem;
  line-height: 1.1;
  text-align: center;
}

.phone-nutrition-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: -30px;
}

.phone-nutrition-card {
  display: grid;
  gap: 12px;
}

.phone-nutrition-main strong {
  color: #111;
  font-size: 2.45rem;
}

.phone-nutrition-main span {
  color: #aaa;
  font-weight: 900;
}

.phone-macro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 18px;
}

.phone-macro {
  display: grid;
  gap: 6px;
}

.phone-macro span {
  color: var(--accent);
  font-weight: 1000;
}

.phone-macro.protein span { color: #438ad8; }
.phone-macro.carbs span { color: #35ad68; }
.phone-macro.fat span { color: #d0a12a; }

.phone-macro div {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: #eee;
}

.phone-macro div::before {
  content: "";
  display: block;
  width: calc(var(--macro) * 1%);
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.phone-macro small {
  color: #777;
  font-weight: 900;
}

.phone-primary-action,
.phone-action-row a,
.phone-food-card a,
.phone-food-card button,
.phone-coach-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid rgba(255, 90, 18, 0.2);
  border-radius: 14px;
  color: var(--accent);
  font-weight: 1000;
  text-decoration: none;
}

.phone-primary-action,
.phone-food-card button,
.phone-inline-link,
.phone-panel-heading button,
.phone-quick-actions button {
  cursor: pointer;
  font: inherit;
}

button.phone-primary-action,
.phone-food-card button {
  background: #fff;
}

.phone-inline-link {
  margin-top: 12px;
  border: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 1000;
}

.phone-input-panel {
  display: grid;
  gap: 14px;
  border-color: rgba(255, 90, 18, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 90, 18, 0.06), rgba(255, 255, 255, 0) 34%),
    #fff;
}

.phone-inline-meal-panel {
  margin-top: 2px;
  border: 1px solid rgba(255, 90, 18, 0.16);
  border-radius: 18px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.phone-input-panel label,
.phone-input-panel fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #555;
  font-size: 0.82rem;
  font-weight: 900;
}

.phone-input-panel input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  padding: 0 14px;
  color: #111;
  background: #f7f7f7;
  font: inherit;
  font-weight: 900;
}

.phone-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phone-panel-heading button {
  border: 0;
  color: #777;
  background: transparent;
  font-weight: 900;
}

.phone-segmented-field {
  border: 0;
  padding: 0;
}

.phone-segmented-field legend {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

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

.phone-segmented-field label {
  position: relative;
}

.phone-segmented-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.phone-segmented-field span {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  color: #555;
  background: #f7f7f7;
  font-weight: 1000;
}

.phone-segmented-field input:checked + span {
  border-color: rgba(255, 90, 18, 0.55);
  color: var(--accent);
  background: rgba(255, 90, 18, 0.1);
}

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

.phone-panel-list {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  padding-top: 12px;
}

.phone-panel-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone-panel-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #666;
}

.phone-panel-list li strong {
  color: #111;
}

.phone-today-meals {
  display: grid;
  gap: 12px;
}

.phone-today-meals ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone-today-meals .phone-panel-heading button {
  border: 1px solid rgba(255, 90, 18, 0.18);
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--accent);
  background: #fff7f2;
}

.phone-today-meals .phone-panel-heading a {
  border: 1px solid rgba(255, 90, 18, 0.18);
  border-radius: 999px;
  padding: 8px 10px;
  /* v564: was `background: #fff7f2` — a hardcoded near-white that never flips,
     so in dark mode this pill stayed white while the label went pale: a solid
     white lozenge with no readable text on it (bug-9cb1928a). He asked for "the
     same style as everywhere else", and everywhere else a call to action is a
     SOLID accent pill with white text, which also removes every dependency on
     which theme tokens happen to be in scope. The black wash keeps white text
     above 4.5:1 even when the accent is a light white-label brand colour. */
  color: #fff !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.22)), var(--bf-accent-d, #b34e28);
  border-color: transparent;
  font-size: 0.74rem;
  font-weight: 1000;
  text-decoration: none;
  text-transform: uppercase;
}

.phone-meal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 16px;
  padding: 12px;
  background: #fafafa;
}

.phone-meal-row > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.phone-meal-row span:first-child {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.phone-meal-row strong {
  overflow: hidden;
  color: #111;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-meal-row small {
  color: #777;
  font-weight: 900;
}

.phone-meal-row-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
  color: #111;
  font-weight: 1000;
}

.phone-meal-row-actions {
  display: flex;
  gap: 6px;
}

.phone-meal-row-actions button {
  min-height: 30px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 999px;
  padding: 0 9px;
  color: #555;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 1000;
}

.phone-meal-row-actions button:last-child {
  color: #b23728;
  border-color: rgba(178, 55, 40, 0.16);
}

.phone-planned-meal-row {
  display: block;
  padding: 0;
  overflow: hidden;
}

.phone-planned-meal-row button:not(.meal-action-btn) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-height: 70px;
  gap: 12px;
  align-items: center;
  border: 0;
  padding: 12px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
/* Inline action buttons inside meal rows: small + side-by-side. */
.phone-meal-row-actions .meal-action-btn,
.today-meal-plan-row-actions .meal-action-btn {
  display: inline-flex;
  width: auto !important;
  min-height: 0;
  padding: 5px 12px;
  font-size: 0.74rem;
  line-height: 1.2;
  align-items: center;
  text-align: center;
}
.phone-meal-row-actions,
.today-meal-plan-row-actions {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.phone-planned-meal-row b {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.phone-planned-meal-row small {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #111;
  font-weight: 1000;
}

.phone-planned-meal-row em {
  color: #777;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.phone-planned-meal-row.is-logged {
  border-color: rgba(42, 160, 86, 0.22);
  background: rgba(42, 160, 86, 0.07);
}

.phone-empty-meal {
  color: #777;
  font-weight: 900;
}

.phone-photo-journal-card {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.phone-photo-journal-form {
  display: grid;
  gap: 10px;
}

/* v551: was a hardcoded cream (#fff7f2) that never flipped for dark mode, and
   the empty dropzone was as tall as a filled one. Tint from the accent so it
   works in both themes, and keep it compact until there is something in it. */
.phone-photo-journal-form .native-photo-upload {
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--bf-accent, #C75D34) 45%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bf-accent, #C75D34) 10%, var(--bf-surface2, #fff7f2));
  padding: 10px;
}

/* An empty picker is a small affordance, not a hero panel. */
.phone-photo-journal-form .native-photo-upload:not(:has(.upload-preview)) {
  padding: 8px;
  min-height: 0;
}
.phone-photo-journal-form .native-photo-upload:not(:has(.upload-preview)) .native-photo-upload-control {
  width: 44px;
  height: 44px;
  min-height: 44px;
}
.phone-photo-journal-form .native-photo-upload:not(:has(.upload-preview)) .native-photo-upload-control svg {
  width: 22px;
  height: 22px;
}

.phone-photo-journal-form .native-photo-upload.is-desktop {
  justify-items: stretch;
}

.phone-photo-journal-form .native-photo-upload.is-desktop .native-photo-upload-control {
  width: 100%;
}

.phone-photo-journal-form .native-photo-upload.is-camera {
  border-style: solid;
}

.phone-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.phone-photo-strip img,
.phone-photo-strip span {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 14px;
  /* v551: #777 on #f4f4f4 — near-invisible, and in dark mode the ink catch-all
     made "Ingen måltidsfotos endnu" white-on-white. Token-driven now.
     v564: not enough. --bf-surface2 is defined LIGHT at :root while --bf-muted
     resolves near-white from the legacy dark theme, so outside .bf-sand the two
     tokens combined into near-white on near-white — measured 1.06:1, which is
     the white bar with no readable text he photographed (bug-9cb1928a). Stop
     pairing two independent tokens: a translucent grey tints whatever card is
     behind it in EITHER theme, and the caption simply inherits that card's own
     ink, so the two can never drift apart again. */
  color: inherit;
  background: rgba(127, 127, 127, 0.16);
  object-fit: cover;
  font-size: 0.74rem;
  font-weight: 900;
  text-align: center;
}

.phone-photo-strip span {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  min-height: 34px;   /* empty state: a caption line, not a panel */
  padding: 8px 10px;
}
/* Beat the sand ink catch-all so the empty caption keeps its muted colour. */
.bf-sand .main-content .phone-photo-strip span { color: var(--bf-muted, #6F6857); }

.phone-quick-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  margin: -2px 0 0;
  border: 1px solid rgba(255, 90, 18, 0.18);
  border-radius: 18px;
  padding: 10px 12px 10px 16px;
  color: #242424;
  background: #fff7f2;
  box-shadow: 0 14px 28px rgba(255, 90, 18, 0.09);
}

.phone-quick-dock span {
  font-size: 0.82rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.phone-quick-panel p {
  margin: 0;
  color: #666;
}

.phone-quick-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.phone-quick-actions button {
  min-height: 48px;
  border: 1px solid rgba(255, 90, 18, 0.18);
  border-radius: 14px;
  color: #111;
  background: #fff;
  font-weight: 1000;
}

.phone-food-card p,
.phone-wod-card p,
.phone-coach-card p {
  margin: 8px 0 14px;
  color: #676767;
}

.phone-wod-card {
  display: grid;
  gap: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 90, 18, 0.18), transparent 8rem),
    #111;
}

.phone-wod-card h2 {
  color: #fff;
}

.phone-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.phone-action-row a {
  color: #fff;
  background: rgba(255, 90, 18, 0.16);
}

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

.phone-mini-tile {
  display: grid;
  gap: 6px;
  color: #555;
  text-decoration: none;
}

.phone-mini-tile span {
  color: var(--accent);
  font-size: 1.7rem;
  font-weight: 1000;
}

.phone-mini-tile small {
  color: #777;
}

.phone-coach-card {
  margin-bottom: 8px;
}

.phone-floating-action {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 2rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(255, 90, 18, 0.32);
}

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

  .sidebar,
  .topbar,
  .main-content {
    grid-column: 1;
  }

  .sidebar {
    position: static;
    min-height: auto;
  }

  .topbar {
    grid-template-columns: 1fr;
    padding: 14px 18px;
  }

  .topbar-actions {
    display: none;
  }

  .main-content {
    padding: 18px;
  }

  .planner-layout {
    grid-template-columns: 1fr;
  }

  .library-panel {
    position: static;
  }

  .client-dashboard-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .portal-two-column,
  .portal-progress-grid,
  .progress-input-grid,
  .message-portal-grid,
  .documents-layout,
  .settings-layout,
  .coach-master-detail,
  .coach-client-profile-head,
  .nutrition-admin-layout {
    grid-template-columns: 1fr;
  }

  .nutrition-overview-wide .nutrition-donut-layout,
  .nutrition-overview-wide .nutrition-legend {
    grid-template-columns: 1fr;
  }

  .progress-stat-grid,
  .training-track-grid,
  .workout-type-grid,
  .exercise-library-grid,
  .training-history-grid,
  .nutrition-target-grid,
  .recipe-card-grid,
  .recipe-filter-strip,
  .document-category-grid,
  .coach-stat-grid.five,
  .coach-stat-grid.six,
  .nutrition-feature-grid,
  .nutrition-overview-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-command-grid,
  .coach-client-detail-grid,
  .coach-nutrition-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .coach-span-2,
  .coach-span-3,
  .coach-span-4,
  .coach-span-5,
  .coach-span-6,
  .coach-span-8 {
    grid-column: span 6;
  }

  .coach-profile-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-target-metric {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 14px;
  }

  .coach-recipe-card-grid,
  .coach-week-meal-grid,
  .coach-recipe-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-assign-meal-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-admin-plan-layout .nutrition-admin-list {
    position: static;
  }

  .coach-messenger-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .coach-chat-list {
    max-height: 320px;
  }

  .coach-thread-messages {
    min-height: 320px;
    max-height: 440px;
  }

  .todays-plan,
  .progress-overview,
  .upcoming-workouts,
  .habit-tracker-card,
  .coach-message-card,
  .recent-metrics-card {
    grid-column: span 6;
  }
}

@media (max-width: 820px) {
  .sidebar-nav,
  .sidebar-nav-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-planner {
    grid-template-columns: 1fr;
  }

  .coach-recipe-detail-hero,
  .coach-recipe-edit-head,
  .coach-meal-plan-create-grid,
  .coach-week-day-head {
    grid-template-columns: 1fr;
  }

  .coach-meal-plan-topbar,
  .coach-week-average {
    align-items: stretch;
    flex-direction: column;
  }

  .planner-day {
    min-height: 220px;
    border-right: 0;
  }

  .planner-toolbar,
  .planner-date-controls,
  .planner-actions {
    align-items: stretch;
  }

  .client-hero-row,
  .client-plan-row,
  .client-mini-row,
  .progress-goal-row,
  .habit-week-row,
  .coach-message-body,
  .client-page-header,
  .program-hero-card,
  .training-session-row,
  .portal-meal-row,
  .portal-coach-note,
  .nutrition-donut-layout,
  .meal-source-grid,
  .meal-choice-form,
  .strength-row,
  .document-toolbar,
  .document-row,
  .settings-profile-form,
  .settings-fields-grid,
  .client-overview-card,
  .coach-command-header,
  .coach-toolbar,
  .coach-donut-layout,
  .coach-donut-layout.compact,
  .coach-two-col,
  .coach-media-row,
  .coach-table-head,
  .coach-table-row,
  .program-table .coach-table-head,
  .program-table .coach-table-row,
  .nutrition-table-head,
  .nutrition-table-row,
  .portal-meal-input-grid,
  .portal-water-form,
  .coach-assign-meal-plan,
  .coach-meal-plan-assignment-row,
  .progress-log-fields,
  .nutrition-admin-row,
  .nutrition-admin-grid,
  .nutrition-language-grid,
  .nutrition-week-editor,
  .nutrition-week-view,
  .planned-meal-detail-head,
  .planned-meal-detail-grid {
    grid-template-columns: 1fr;
  }

  .coach-thread-header,
  .coach-thread-focus,
  .coach-message-composer {
    align-items: stretch;
  }

  .planned-meal-macro-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nutrition-admin-toolbar,
  .nutrition-language-tab-row {
    align-items: stretch;
    flex-direction: column;
  }

  .nutrition-admin-form {
    position: static;
  }

  .nutrition-admin-actions {
    justify-content: stretch;
  }

  .nutrition-admin-actions button {
    flex: 1;
  }

  .portal-meal-type-grid,
  .portal-metric-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-metric-type-grid {
    display: grid;
  }

  .portal-meal-actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .portal-meal-actions .button {
    flex: 1 1 120px;
  }

  .training-row-actions {
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .training-row-actions .button {
    flex: 1 1 120px;
  }

  .training-track-schedule-card {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }

  .training-track-schedule-date {
    display: flex;
    justify-content: space-between;
  }

  .client-hero-row {
    display: grid;
  }

  .portal-header-actions {
    justify-content: start;
  }

  .program-visual {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .habit-score-grid,
  .progress-stat-grid,
  .nutrition-target-grid {
    grid-template-columns: 1fr;
  }

  .workout-type-grid,
  .planned-day-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workout-type-tile {
    min-height: 104px;
    padding: 14px;
  }

  .workout-type-tile strong {
    font-size: 0.98rem;
  }

  .today-meal-plan-row {
    min-height: 66px;
  }

  .portal-line-chart {
    grid-template-columns: 1fr;
  }

  .training-library-intro {
    display: grid;
    align-items: start;
  }

  .recipe-catalog-hero {
    display: grid;
    align-items: start;
  }

  .chart-axis {
    display: none;
  }

  .portal-meal-row {
    align-items: stretch;
  }

  .meal-macros {
    flex-wrap: wrap;
  }

  .document-category-grid {
    grid-template-columns: 1fr;
  }

  .recipe-card-grid,
  .recipe-filter-strip,
  .recipe-macro-row {
    grid-template-columns: 1fr;
  }

  .client-portal-quote {
    align-items: flex-start;
    flex-direction: column;
  }

  .recent-metric-grid {
    grid-template-columns: 1fr;
  }

  .recent-metric {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .client-topbar,
  .coach-topbar,
  .topbar {
    grid-template-columns: 1fr;
  }

  .coach-header-actions {
    justify-content: start;
  }

  .coach-table {
    overflow-x: auto;
  }
}

@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 90, 18, 0.13), transparent 18rem),
      #050505;
  }

  .app-shell {
    display: block;
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .main-content {
    width: 100%;
    padding: 74px 12px calc(118px + env(safe-area-inset-bottom));
  }

  body:has(.phone-dashboard) {
    background: #f7f7f5;
  }

  .app-shell:has(.client-sidebar) .main-content {
    padding: calc(86px + env(safe-area-inset-top)) 12px calc(34px + env(safe-area-inset-bottom));
  }

  .app-shell:has(.coach-sidebar) .main-content {
    padding: calc(82px + env(safe-area-inset-top)) 12px calc(34px + env(safe-area-inset-bottom));
  }

  .coach-recipe-card-grid,
  .coach-week-meal-grid,
  .coach-recipe-tabs,
  .coach-recipe-macro-strip {
    grid-template-columns: 1fr;
  }

  .coach-meal-plan-studio,
  .coach-recipe-library {
    margin-top: 12px;
  }

  .coach-meal-plan-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .client-topbar,
  .coach-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 58;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: rgba(5, 5, 5, 0.92);
    backdrop-filter: blur(18px);
  }

  .client-topbar {
    color: #fff;
  }

  .mobile-menu-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 90, 18, 0.42);
    border-radius: 14px;
    padding: 0;
    background: rgba(255, 90, 18, 0.12);
    cursor: pointer;
  }

  .mobile-menu-button span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  .mobile-top-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 56;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.54);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-menu-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .client-topbar .topnav,
  .coach-topbar .topnav {
    display: none;
  }

  .client-topbar .topnav a,
  .coach-topbar .topnav a {
    min-height: 34px;
    padding: 8px 0;
    white-space: nowrap;
  }

  .client-topbar .topbar-actions,
  .coach-topbar .topbar-actions {
    display: none;
  }

  .client-topbar .client-user-card,
  .coach-topbar .coach-user-card {
    display: none;
  }

  .client-topbar .client-user-card .avatar,
  .coach-topbar .coach-user-card .avatar {
    width: 36px;
    height: 36px;
  }

  .client-topbar .client-user-card div,
  .coach-topbar .coach-user-card div,
  .coach-topbar .coach-search,
  .coach-topbar .user-switcher,
  .coach-topbar .admin-view-as,
  .coach-topbar .auth-user-actions,
  .coach-topbar .profile-switch-button:not(.profile-switch-sidebar),
  .client-topbar .admin-view-as,
  .client-topbar .auth-user-actions,
  .client-topbar .profile-switch-button:not(.profile-switch-sidebar) {
    display: none;
  }

  .client-topbar .client-language-select {
    justify-self: end;
  }

  .client-topbar .client-language-select > span:not(.client-language-control) {
    display: none;
  }

  .client-topbar .client-language-select .client-language-control {
    min-width: 56px;
    width: 56px;
    height: 44px;
    border-radius: 14px;
    padding: 0 8px;
  }

  .client-sidebar,
  .coach-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    z-index: 60;
    display: flex;
    width: min(86vw, 340px);
    height: 100dvh;
    min-height: 100dvh;
    flex-direction: column;
    overflow-y: auto;
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
    background:
      linear-gradient(90deg, rgba(255, 90, 18, 0.08), transparent 56%),
      #050505;
    box-shadow: 22px 0 44px rgba(0, 0, 0, 0.36);
    transform: translateX(-105%);
    transition: transform 200ms ease;
  }

  .client-sidebar.mobile-menu-open,
  .coach-sidebar.mobile-menu-open {
    transform: translateX(0);
  }

  .client-sidebar .client-help-card {
    display: none;
  }

  .client-sidebar .brand-lockup,
  .coach-sidebar .brand-lockup {
    display: inline-flex;
    margin-bottom: 20px;
  }

  .coach-sidebar .sidebar-nav-secondary {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 14px;
  }

  .coach-sidebar .sidebar-section-label {
    display: block;
  }

  .client-sidebar .sidebar-nav,
  .coach-sidebar .sidebar-nav {
    display: grid;
    gap: 8px;
    height: auto;
    overflow: visible;
    padding: 0;
    scrollbar-width: auto;
  }

  .client-sidebar .sidebar-nav::-webkit-scrollbar,
  .coach-sidebar .sidebar-nav::-webkit-scrollbar,
  .client-topbar .topnav::-webkit-scrollbar,
  .coach-topbar .topnav::-webkit-scrollbar {
    display: none;
  }

  .client-sidebar .sidebar-link,
  .coach-sidebar .sidebar-link {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    flex: none;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    border-radius: 12px;
    padding: 0 12px;
    color: rgba(245, 241, 235, 0.76);
    font-size: 0.94rem;
    line-height: 1.1;
    text-align: left;
  }

  .client-sidebar .sidebar-link.active,
  .coach-sidebar .sidebar-link.active {
    border-color: rgba(255, 90, 18, 0.55);
    background:
      linear-gradient(90deg, rgba(255, 90, 18, 0.18), rgba(255, 90, 18, 0.04)),
      rgba(255, 255, 255, 0.035);
    box-shadow: inset 3px 0 0 var(--accent);
    color: #fff;
  }

  .client-sidebar .sidebar-icon,
  .coach-sidebar .sidebar-icon {
    font-size: 1rem;
  }

  .client-sidebar .nav-badge,
  .coach-sidebar .nav-badge {
    position: static;
    min-width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }

  .client-page-shell,
  .client-dashboard,
  .coach-command-shell {
    gap: 14px;
  }

  .coach-messenger-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .coach-message-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-message-stats span {
    min-width: 0;
  }

  .coach-thread-header,
  .coach-thread-focus,
  .coach-message-composer {
    flex-direction: column;
  }

  .coach-message-composer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .coach-thread-messages {
    padding: 14px;
  }

  .coach-chat-bubble {
    grid-template-columns: 1fr;
  }

  .coach-chat-bubble .avatar {
    display: none;
  }

  .coach-chat-bubble p {
    max-width: 86%;
  }

  .client-page-header {
    gap: 10px;
    padding-bottom: 4px;
  }

  .client-page-header h1 {
    font-size: 2rem;
  }

  .client-subtabs {
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
  }

  .client-subtabs a {
    white-space: nowrap;
  }

  .portal-card,
  .client-card-panel,
  .coach-stat-card,
  .nutrition-feature-card {
    border-radius: 12px;
  }

  .portal-card-heading,
  .portal-card-footer,
  .client-card-heading,
  .client-card-footer,
  .client-plan-row,
  .client-mini-row,
  .progress-goal-row,
  .habit-week-row,
  .coach-message-body,
  .training-session-row,
  .portal-meal-row,
  .document-row,
  .compact-file-row,
  .settings-summary-row {
    padding: 14px;
  }

  .coach-stat-grid.five,
  .coach-stat-grid.six,
  .nutrition-feature-grid,
  .nutrition-overview-strip,
  .coach-metric-grid,
  .coach-profile-stats,
  .coach-quick-grid {
    grid-template-columns: 1fr;
  }

  .coach-client-hero > div,
  .coach-client-id {
    align-items: flex-start;
    flex-direction: column;
  }

  .coach-command-header h1,
  .coach-client-profile-head h1 {
    font-size: 2rem;
  }

  .nutrition-table,
  .coach-table {
    margin-right: -12px;
    margin-left: -12px;
  }

  .phone-dashboard {
    max-width: none;
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  .auth-shell {
    padding: 16px;
  }

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

  .program-hero-copy,
  .settings-profile-form,
  .settings-about-form {
    padding: 16px;
  }

  .portal-header-actions,
  .thread-header,
  .thread-focus,
  .portal-message-composer,
  .profile-picture-row {
    align-items: stretch;
    flex-direction: column;
  }

  .thread-focus {
    margin: 12px;
  }

  .portal-thread {
    padding: 10px 12px 14px;
  }

  /* Drop the avatar column only. Do NOT reset justify-items — the left/right
     split IS the fix the client asked for, and the phone is where he reads it. */
  .thread-message,
  .attachment-bubble {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .thread-message .avatar {
    display: none;
  }

  .thread-message p {
    max-width: 86%;
  }

  .attachment-bubble {
    max-width: 100%;
  }

  .conversation-list-card {
    max-height: none;
  }

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

  .document-row > span:nth-of-type(2),
  .document-row > span:nth-of-type(3) {
    color: var(--muted);
  }

  .startup-card,
  .wizard-section {
    grid-template-columns: 1fr;
  }

  .startup-card a,
  .wizard-actions .button {
    width: 100%;
  }

  .startup-wizard-form {
    padding: 16px;
  }

  .settings-fields-grid .button,
  .settings-about-form .button {
    justify-self: stretch;
  }

  .habit-matrix-card {
    margin-right: -12px;
    margin-left: -12px;
    border-radius: 0;
  }

  .habit-score-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .habit-score-card {
    min-height: 0;
    padding: 10px;
  }

  .habit-score-card > span,
  .habit-score-card small {
    font-size: 0.58rem;
  }

  .habit-score-card > strong {
    font-size: 1.25rem;
  }

  .habit-score-card.split {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .habit-score-card.split div + div,
  .habit-score-card .mini-ring {
    display: none;
  }

  .habit-matrix-card {
    overflow-x: auto;
    scrollbar-width: thick;
  }

  .habit-matrix-card::-webkit-scrollbar {
    height: 12px;
  }

  .habit-matrix-card::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 90, 18, 0.85);
  }

  .habit-matrix-header,
  .habit-matrix-row {
    grid-template-columns: minmax(72px, 0.95fr) repeat(7, minmax(22px, 1fr)) 34px;
    min-width: 0;
    gap: 3px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .habit-matrix-header {
    padding-top: 10px;
    padding-bottom: 8px;
  }

  .habit-matrix-header > strong {
    font-size: 0.62rem;
  }

  .habit-matrix-header span {
    font-size: 0.58rem;
  }

  .habit-matrix-header small {
    font-size: 0.56rem;
  }

  .habit-matrix-row {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .habit-matrix-row > div {
    min-width: 0;
  }

  .habit-matrix-row strong {
    font-size: 0.72rem;
    line-height: 1.08;
  }

  .habit-matrix-row > strong:last-child {
    font-size: 0.68rem;
    text-align: right;
  }

  .habit-matrix-row small {
    display: none;
  }

  .habit-check {
    width: 20px;
    height: 20px;
    font-size: 0;
  }

  .habit-day-control {
    min-width: 24px;
  }

  .habit-check.countable {
    width: 24px;
    font-size: 0.47rem;
  }

  .habit-check-undo {
    right: -6px;
    top: -7px;
    width: 14px;
    height: 14px;
    font-size: 0.58rem;
  }

  .habit-check:not(.done) {
    font-size: 0.56rem;
  }

  .habit-check.done::before {
    content: "\2713";
    font-size: 0.72rem;
  }

  .habit-check.countable.done::before {
    content: none;
  }

  .habit-week-total {
    gap: 0;
  }

  .habit-rating {
    font-size: 0.58rem;
  }

  .coach-habit-form,
  .coach-habit-item {
    grid-template-columns: 1fr;
  }

  /* .track-access-grid is now flex-wrap based — no override needed on mobile. */

  .coach-day-picker {
    grid-column: auto;
    grid-template-columns: repeat(7, minmax(30px, 1fr));
  }

  .habit-footer-actions {
    min-width: 0;
    gap: 8px;
  }

  .portal-line-chart {
    min-height: 220px;
    padding: 12px;
  }
}

/* Admin area (separate /admin section) */
.admin-sidebar .brand-lockup small {
  color: #ff5a12;
  letter-spacing: 0.18em;
}

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.admin-quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
}

.admin-quick-card:hover {
  border-color: rgba(255, 90, 18, 0.5);
}

.admin-quick-icon {
  font-size: 1.4rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 90, 18, 0.12);
  color: #ff7a3c;
}

.admin-quick-card > div {
  display: grid;
  gap: 2px;
  flex: 1;
}

.admin-quick-card small {
  color: rgba(245, 241, 235, 0.6);
}

.admin-quick-arrow {
  font-size: 1.4rem;
  color: rgba(245, 241, 235, 0.4);
}

.admin-hint {
  margin-top: 12px;
  font-size: 0.82rem;
  color: rgba(245, 241, 235, 0.55);
}

.admin-package-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-package-row:first-of-type {
  border-top: none;
}

.admin-package-row small {
  display: block;
  color: rgba(245, 241, 235, 0.55);
  font-size: 0.8rem;
}

.admin-package-price {
  font-weight: 800;
  text-align: right;
}

.program-assign-form {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.program-assign-form label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}

.program-assign-form select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

.program-settings-form {
  display: grid;
  gap: 12px;
}

.program-settings-form label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
}

.program-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.program-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.program-client-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.program-client-progress {
  color: rgba(245, 241, 235, 0.7);
  font-weight: 700;
}

/* Program builder (structure editor) */
.program-builder {
  display: grid;
  gap: 12px;
}

/* v544: every border/fill below used to be a hardcoded rgba(255,255,255,…) from
   the pre-sand dark palette, so on the LIGHT coach shell (--bf-surface #FFFFFF)
   the whole week/day structure rendered white-on-white — only the text survived,
   via the ink catch-all. Driven by brand tokens now, so it works in both themes. */
.builder-week {
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.builder-day {
  border-left: 2px solid var(--bf-accent, rgba(255, 90, 18, 0.4));
  margin-left: 6px;
  padding: 6px 0 6px 10px;
  display: grid;
  gap: 6px;
}

.builder-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder-row-head small {
  color: var(--bf-muted2, rgba(245, 241, 235, 0.5));
}

.builder-row-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}

.builder-mini {
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.16));
  background: var(--bf-surface2, rgba(255, 255, 255, 0.04));
  color: var(--bf-ink, var(--ink));
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
}

.builder-mini:hover {
  border-color: rgba(255, 90, 18, 0.5);
}

.builder-mini:disabled {
  opacity: 0.35;
  cursor: default;
}

.builder-mini.danger,
.program-builder .danger {
  color: #ff8a6a;
  border-color: rgba(255, 90, 18, 0.3);
}

.builder-workout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.03));
  border-radius: 6px;
}

.builder-workout-title {
  flex: 1;
  font-size: 0.88rem;
}

.builder-empty {
  font-size: 0.8rem;
  color: var(--bf-muted2, rgba(245, 241, 235, 0.45));
  padding: 2px 0;
}

.builder-add-workout {
  display: flex;
  gap: 6px;
  align-items: center;
}

.builder-add-workout select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.14));
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--bf-surface, rgba(255, 255, 255, 0.04));
  color: var(--bf-ink, var(--ink));
}

/* v544: the builder had ZERO mobile rules, yet /coach/programs is bottom-tab #3
   and "Bygger" is two taps from it. The ↑ ↓ ✕ trio sat at ~24x20px with 4px gaps
   — under the 44px touch minimum, with a destructive ✕ immediately beside the
   reorder arrows. Give the actions their own full-width row at real tap size. */
@media (max-width: 720px) {
  .builder-row-head { flex-wrap: wrap; }
  .builder-row-head small { flex: 1 1 100%; }
  .builder-row-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
  }
  .builder-workout { flex-wrap: wrap; }
  .builder-workout .builder-row-actions { width: auto; }
  .builder-mini {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    font-size: 0.9rem;
  }
  .builder-day { margin-left: 0; padding-left: 8px; }
  .builder-add-workout { flex-wrap: wrap; }
  .builder-add-workout select { flex: 1 1 100%; min-height: 44px; }
  .builder-add-workout .builder-mini { flex: 1 1 auto; }
}

@media (max-width: 720px) {
  .program-settings-grid {
    grid-template-columns: 1fr;
  }
}

/* The start-up profile card must stay dark with readable text: the generic
   .phone-card/.portal-card white background was overriding it (white-on-white).
   Two-class selectors win over the single-class base regardless of source order. */
.phone-card.phone-startup-card,
.portal-card.startup-card {
  color: #fff;
  border-color: rgba(255, 90, 18, 0.28);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 90, 18, 0.22), transparent 9rem),
    linear-gradient(135deg, #141414, #1f1f1f);
}

.phone-card.phone-startup-card h2,
.portal-card.startup-card h2 {
  color: #ffffff;
}

.phone-card.phone-startup-card p,
.phone-card.phone-startup-card small,
.portal-card.startup-card p,
.portal-card.startup-card small {
  color: rgba(255, 255, 255, 0.74);
}

.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-data-table th,
.admin-data-table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-data-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.admin-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.client-modules-form {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.client-modules-form .module-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
}

.client-modules-form button[type="submit"] {
  margin-top: 0.4rem;
  justify-self: start;
}

.connected-apps-card .connected-app-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

.connected-apps-card .connected-app-info {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.connected-apps-card .connected-app-info small {
  color: rgba(255, 255, 255, 0.6);
}

.synced-activities-card {
  margin-top: 1rem;
}

.integration-import-label {
  cursor: pointer;
}

.coach-strength-list {
  display: grid;
  gap: 0.55rem;
  padding: 0.3rem 0;
}

.coach-strength-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.85rem;
}

.coach-chart-empty {
  min-height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-quick-file {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
}

.phone-bodyscan-panel .bodyscan-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.phone-bodyscan-panel .bodyscan-form label {
  display: grid;
  gap: 0.25rem;
  font-size: 0.8rem;
}

.phone-bodyscan-panel .bodyscan-form button[type="submit"] {
  grid-column: 1 / -1;
}

.phone-bodyscan-panel .bodyscan-csv {
  margin-top: 0.7rem;
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

#bf-update-banner {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 90, 18, 0.55);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
}

#bf-update-banner button {
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  background: #ff5a12;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* Mobile polish: device setup (Connected Apps + Language) above the profile
   cards on phones, and no chunky scrollbar tracks on horizontal strips. */
@media (max-width: 1100px) {
  .settings-layout {
    display: flex;
    flex-direction: column;
  }

  .settings-layout .portal-side-stack {
    order: -1;
  }
}

.client-subtabs,
.coach-tabs,
.wod-program-strip .program-track-cards,
.same-track-selector,
.phone-track-scroller {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

@media (max-width: 760px) {
  .client-subtabs,
  .coach-tabs {
    scrollbar-width: none;
  }

  .client-subtabs::-webkit-scrollbar,
  .coach-tabs::-webkit-scrollbar {
    display: none;
  }
}

.exercise-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.exercise-toolbar input[type="search"] {
  flex: 1 1 14rem;
  min-width: 10rem;
}

.exercise-count {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8rem;
  margin-left: auto;
}

.exercise-rows {
  display: grid;
  gap: 0.45rem;
}

.exercise-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.02);
}

.exercise-row-main {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 16rem;
  min-width: 0;
}

.exercise-row-main small {
  color: rgba(255, 255, 255, 0.55);
}

.exercise-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 90, 18, 0.18);
  color: #ff8a50;
  border: 1px solid rgba(255, 90, 18, 0.4);
}

.exercise-editor {
  border: 1px solid rgba(255, 90, 18, 0.35);
  border-radius: 0.8rem;
  padding: 1rem;
  margin-bottom: 1rem;
  display: grid;
  gap: 0.7rem;
}

.button-compact {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

/* Structured exercise blocks (client view): tappable per-set chips */
.structured-block {
  display: grid;
  gap: 0.7rem;
  padding: 0.4rem 0;
}

.structured-block-intro {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  margin: 0;
  white-space: pre-line;
}

.structured-exercise {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  padding: 0.6rem 0.75rem;
  display: grid;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
}

.structured-exercise-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.structured-exercise-head small {
  display: block;
  color: rgba(255, 255, 255, 0.55);
}

.structured-sets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.set-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
  font-size: 0.82rem;
}

.set-chip .set-chip-index {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.set-chip.done {
  border-color: rgba(255, 90, 18, 0.7);
  background: rgba(255, 90, 18, 0.16);
}

.set-chip.done .set-chip-check {
  color: #ff8a50;
  font-weight: 700;
}

.structured-rest,
.structured-notes {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

/* "Sidst: 8 · 8 · 6 × 40 kg" — the previous session's actuals under the name. */
.structured-last {
  color: var(--bf-accent, var(--accent, #ff8a50)) !important;
  font-size: 0.75rem;
  font-weight: 600;
}

/* (.wod-week-chip removed — the 999px pill collapsed into an ellipse whenever
   its text wrapped. Program position is now .wod-program-row, defined with the
   compound header rules at the end of this file.) */

/* Week-gated exercise (negatives fra uge 2): loggable but visibly optional.
   !important: the workout-player's `border:` shorthand would reset the style,
   and the light theme needs a visible (muted-token) border color. */
.structured-exercise.is-preview-week {
  opacity: 0.72;
  border-style: dashed !important;
  border-color: var(--bf-muted, rgba(255, 255, 255, 0.35)) !important;
}

.from-week-chip {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--bf-muted, rgba(255, 255, 255, 0.75)) !important;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

/* Light (sand) theme: the structured cards/chips were authored white-alpha for
   the dark canvas — give them visible borders + surfaces on light too. */
.bf-sand:not(.bf-dark) .structured-exercise {
  border-color: var(--bf-line, rgba(28, 26, 23, 0.14));
  background: var(--bf-surface2, rgba(28, 26, 23, 0.03));
}
.bf-sand:not(.bf-dark) .set-chip {
  border-color: var(--bf-line, rgba(28, 26, 23, 0.2));
  background: var(--bf-surface, rgba(28, 26, 23, 0.04));
}

/* Phone: chips must be real tap targets (≥44px) — thumbs, sweat, sunlight. */
@media (max-width: 760px) {
  .set-chip {
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
  }
  .set-chip-edit {
    min-height: 44px;
    min-width: 40px;
  }
  .set-chip-editor input {
    min-height: 40px;
    font-size: 1rem;
  }
}

/* Structured editor (coach side) */
.structured-editor {
  display: grid;
  gap: 0.8rem;
}

.structured-editor-block {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.55rem;
}

/* Block-card builder: per-block header (title/type/duration + reorder/delete) */
.block-card-head { display: flex; align-items: flex-start; gap: 8px; }
.block-card-fields { display: grid; grid-template-columns: 1fr 130px 110px; gap: 6px; flex: 1; min-width: 0; }
.block-card-fields input { width: 100%; box-sizing: border-box; }
.block-card-title { font-weight: 700; }
.block-card-actions { display: flex; gap: 4px; flex-shrink: 0; }
.block-card-btn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; line-height: 1;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: inherit;
  font-size: 0.82rem; display: inline-flex; align-items: center; justify-content: center;
}
.block-card-btn:hover:not(:disabled) { border-color: rgba(255,122,60,0.5); }
.block-card-btn:disabled { opacity: 0.35; cursor: default; }
.block-card-del:hover:not(:disabled) { border-color: #e0574a; background: rgba(224,87,74,0.14); }
.block-card-body-label { display: grid; gap: 0.25rem; font-size: 0.8rem; }
.block-card-body { width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; }
.block-builder-empty { padding: 14px; border: 1px dashed rgba(255,255,255,0.18); border-radius: 10px; }
.block-raw-advanced { margin-top: 6px; }
.block-raw-advanced > summary { cursor: pointer; font-size: 0.78rem; opacity: 0.7; font-weight: 600; }
.block-raw-advanced textarea { width: 100%; box-sizing: border-box; margin-top: 6px; }

.bf-sand .block-card-btn { border-color: var(--bf-line); background: #fff; color: var(--bf-ink); }
.bf-sand .block-card-btn:hover:not(:disabled) { border-color: var(--bf-accent); }
.bf-sand .block-card-del:hover:not(:disabled) { border-color: #c0392b; background: rgba(192,57,43,0.1); }
.bf-sand .block-builder-empty { border-color: var(--bf-line); }

@media (max-width: 640px) {
  .block-card-fields { grid-template-columns: 1fr; }
}

/* Everfit-style section-format picker */
.section-format-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.section-format-card { text-align: left; display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: inherit; }
.section-format-card:hover { border-color: rgba(255,122,60,0.45); }
.section-format-card.is-active { border-color: #ff7a3c; background: rgba(255,122,60,0.14); box-shadow: inset 0 0 0 1px rgba(255,122,60,0.5); }
.section-format-card strong { font-size: 0.86rem; }
.section-format-card small { font-size: 0.72rem; opacity: 0.75; line-height: 1.3; }
.section-format-video { display: grid; gap: 5px; font-size: 0.8rem; }
.section-format-badge { display: inline-block; font-size: 0.64rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; vertical-align: middle; background: rgba(255,122,60,0.18); color: #ff9a5b; }
.section-format-badge.fmt-interval { background: rgba(90,170,255,0.18); color: #7fb6ff; }
.section-format-badge.fmt-amrap { background: rgba(150,120,255,0.18); color: #b39aff; }
.section-format-badge.fmt-timed { background: rgba(90,200,140,0.18); color: #7fd1a0; }
.section-format-badge.fmt-freestyle { background: rgba(255,160,90,0.18); color: #ffb27f; }
.freestyle-video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; margin: 6px 0; }
.freestyle-video iframe, .freestyle-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.freestyle-video-link { margin: 6px 0; }

/* ── Settings: login-metoder card ──────────────────────────────────────────── */
.login-methods-card .login-method-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bf-line, rgba(0,0,0,0.08)); }
.login-methods-card .login-method-row:last-of-type { border-bottom: 0; }
.login-method-ic { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; font-weight: 800; background: rgba(199,93,52,0.12); color: var(--bf-accent, #C75D34); flex: 0 0 auto; }
.login-method-meta { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.login-method-meta small { opacity: 0.7; }
.login-method-flag { font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.login-method-row.is-on .login-method-flag { background: rgba(60,160,90,0.15); color: #2f9d5b; }
.login-method-row.is-off { opacity: 0.6; }
.login-method-row.is-off .login-method-flag { background: rgba(0,0,0,0.06); color: var(--bf-muted, #777); }
.login-method-row.is-off .login-method-ic { background: rgba(0,0,0,0.06); color: var(--bf-muted, #777); }
.login-methods-note { margin: 10px 0 0; font-size: 0.82rem; color: #2f9d5b; }

/* ── Admin OPEN WOD editor (drives beastfactory.dk/.../open-wod) ────────────── */
.bf-openwod-admin .ow-host { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: var(--bf-accent, #C75D34); background: rgba(199,93,52,0.12); padding: 3px 9px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.ow-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .ow-grid { grid-template-columns: 1fr; } }
/* Editor rows follow the app theme (was hardcoded #fff, so in dark mode the muted
   labels sat light-on-white and were barely readable). */
.ow-edit-row { border: 1px solid var(--bf-line); border-radius: 14px; background: var(--bf-surface, #fff); color: var(--bf-ink, inherit); padding: 12px 14px; margin-bottom: 12px; }
.ow-edit-label { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 0.95rem; }
.ow-edit-emoji { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(199,93,52,0.12); font-size: 1rem; }
.ow-preview { position: sticky; top: 12px; }
.ow-prev-wrap { display: grid; gap: 12px; }
.ow-prev-card { border: 1px solid var(--bf-line); border-radius: 16px; background: #fff; padding: 16px 16px; box-shadow: 0 1px 2px rgba(28,26,23,0.04); }
.ow-prev-card.is-empty { opacity: 0.55; }
.ow-prev-head { display: flex; align-items: center; gap: 11px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--bf-line); }
.ow-prev-emoji { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(199,93,52,0.12); font-size: 1.3rem; flex: 0 0 auto; }
.ow-prev-head h3 { margin: 0; font-size: 0.96rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.ow-prev-head p { margin: 1px 0 0; font-weight: 700; color: var(--bf-accent, #C75D34); font-size: 0.88rem; }
.ow-prev-body .cwd-block { font-size: 0.84rem; line-height: 1.4; margin-bottom: 6px; color: var(--bf-ink); }
.ow-prev-body .cwd-block:last-child { margin-bottom: 0; }
.ow-prev-body .cwd-na { font-size: 0.82rem; opacity: 0.6; }

/* ── OPEN WOD preview = 1:1 mirror of the public mu-plugin's .bf-owod cards ──── */
/* This pane deliberately mimics the PUBLIC (always-light) beastfactory.dk page, so
   it must NOT follow the app theme: it previously inherited var(--bf-ink), which in
   dark mode painted light text onto the light preview and made it unreadable.
   Both the surfaces and the ink are pinned light here on purpose. */
.ow-prev-owod { --owod-line: rgba(28,26,23,.12); --owod-accent: var(--bf-accent, #C75D34); --owod-soft: #FBF8F2; color: #1C1A17; }
/* !important is required to beat the app's blanket .bf-sand.bf-dark overrides —
   without it the preview came out MIXED (dark card, light blocks, light text). */
.ow-prev-owod :is(p, li, span, div, strong, small, h1, h2, h3, h4, pre) { color: #1C1A17 !important; }
.ow-prev-owod .bf-owod-card { background: #FFFFFF !important; }
.ow-prev-owod .bf-owod-block { background: var(--owod-soft) !important; }
.ow-prev-owod .bf-owod-wname,
.ow-prev-owod .bf-owod-kicker { color: var(--owod-accent) !important; }
.ow-prev-owod .bf-owod-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.ow-prev-owod .bf-owod-card { border: 1px solid var(--owod-line); border-radius: 18px; padding: 20px 18px; background: #fff; box-shadow: 0 1px 2px rgba(28,26,23,.04); }
.ow-prev-owod .bf-owod-card.is-empty { opacity: .55; }
.ow-prev-owod .bf-owod-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--owod-line); }
.ow-prev-owod .bf-owod-emoji { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(199,93,52,.12); font-size: 1.5rem; line-height: 1; }
.ow-prev-owod .bf-owod-head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ow-prev-owod .bf-owod-wname { margin: 0; font-weight: 700; color: var(--owod-accent); font-size: .94rem; }
.ow-prev-owod .bf-owod-meta { margin: -4px 0 14px; text-align: center; font-weight: 700; font-size: .85rem; }
.ow-prev-owod .bf-owod-block { border: 1px solid var(--owod-line); border-left: 3px solid var(--owod-accent); border-radius: 12px; background: var(--owod-soft); padding: 12px 14px; margin: 0 0 12px; }
.ow-prev-owod .bf-owod-block:last-child { margin-bottom: 0; }
.ow-prev-owod .bf-owod-block strong { display: block; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
.ow-prev-owod .bf-owod-lines { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; line-height: 1.4; }
.ow-prev-owod .bf-owod-li { position: relative; padding-left: 16px; }
.ow-prev-owod .bf-owod-li:before { content: ""; position: absolute; left: 3px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--owod-accent); }
.ow-prev-owod .bf-owod-sub { font-weight: 700; margin-top: 2px; }
.ow-prev-owod .bf-owod-note { opacity: .78; font-size: .88rem; }

/* ── Workout-editor: tilføj-sektion quick-add chips ────────────────────────── */
.section-add-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.section-add-bar-label { font-size: 0.74rem; font-weight: 600; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 2px; }
.section-add-chip { font-size: 0.78rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,122,60,0.4); background: rgba(255,122,60,0.1); color: inherit; line-height: 1.1; }
.section-add-chip:hover { border-color: #ff7a3c; background: rgba(255,122,60,0.2); }
.bf-sand .section-add-chip { border-color: rgba(199,93,52,0.4); background: rgba(199,93,52,0.08); color: var(--bf-ink); }
.bf-sand .section-add-chip:hover { border-color: var(--bf-accent); background: rgba(199,93,52,0.16); }

/* ── Madplan-editor (3-pane meal-plan workbench) ───────────────────────────── */
.madplan-editor { display: flex; flex-direction: column; gap: 12px; }
.mp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-toolbar-left { display: flex; flex-direction: column; }
.mp-back { color: #ff9a5b; font-weight: 600; text-decoration: none; }
.mp-sub { font-size: 0.8rem; opacity: 0.6; }
.mp-toolbar-right { display: flex; gap: 8px; }
.mp-weekstrip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.mp-eyebrow { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; }
.mp-plan-name { font-size: 1.05rem; font-weight: 700; line-height: 1.15; }
.mp-day { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: inherit; border-radius: 10px; padding: 7px 12px; cursor: pointer; line-height: 1.1; }
.mp-day-wd { font-size: 0.82rem; font-weight: 700; }
.mp-day-date { font-size: 0.68rem; opacity: 0.6; }
.mp-day.active { border-color: #ff7a3c; background: rgba(255,122,60,0.16); color: #fff; }
.mp-day.active .mp-day-date { opacity: 0.85; }
.mp-grid { display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 12px; align-items: start; }
@media (max-width: 1100px){ .mp-grid { grid-template-columns: 1fr; } }
.mp-left, .mp-db { background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; }
.mp-client strong { display: block; font-size: 1.05rem; }
.mp-client small { opacity: 0.65; }
.mp-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.mp-ring { position: relative; display: flex; flex-direction: column; align-items: center; }
.mp-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.mp-ring-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 6; }
.mp-ring-fg { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .3s; }
.mp-ring-pct { position: absolute; top: 22px; font-size: 0.8rem; font-weight: 700; }
.mp-ring small { text-align: center; font-size: 0.7rem; opacity: 0.75; margin-top: 3px; }
.mp-ring small span { display: block; color: #fff; opacity: 0.9; }
.mp-goals { display: flex; flex-direction: column; gap: 9px; }
.mp-goal-row { display: flex; justify-content: space-between; font-size: 0.76rem; }
.mp-goal-row small { opacity: 0.7; }
.mp-goal-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 3px; }
.mp-goal-bar i { display: block; height: 100%; background: #ff7a3c; }
.mp-canvas { display: flex; flex-direction: column; gap: 10px; }
.mp-canvas-head { display: flex; justify-content: space-between; align-items: baseline; }
.mp-canvas-head span { font-size: 0.8rem; opacity: 0.65; }
.mp-meal { border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 12px; background: rgba(255,255,255,0.025); }
.mp-meal-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.mp-meal-type { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #ff9a5b; }
.mp-meal-title strong { font-size: 0.95rem; }
.mp-portion { display: inline-flex; align-items: center; gap: 8px; }
.mp-portion button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: inherit; cursor: pointer; }
.mp-portion span { font-size: 0.78rem; min-width: 54px; text-align: center; }
.mp-meal-kcal { font-size: 0.82rem; opacity: 0.85; }
.mp-meal-kcal b { color: #fff; font-size: 1rem; }
.mp-ings { list-style: none; margin: 9px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-ings li { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; opacity: 0.85; }
.mp-ings li > span { flex: 1; min-width: 0; }
.mp-ings small { opacity: 0.7; white-space: nowrap; }
.mp-ing-x { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: 0.32; cursor: pointer; font-size: 0.7rem; line-height: 1; padding: 2px 3px; border-radius: 4px; }
.mp-ing-x:hover { opacity: 1; color: #d6443a; background: rgba(214,68,58,0.1); }
.mp-meal-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px; }
.mp-macro { font-size: 0.72rem; background: rgba(255,255,255,0.05); border-radius: 6px; padding: 2px 7px; }
.mp-meal-actions { margin-left: auto; display: flex; gap: 6px; }
.mp-mini { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: inherit; border-radius: 6px; padding: 3px 9px; font-size: 0.74rem; cursor: pointer; }
.mp-mini.danger { color: #ff8a8a; background: rgba(255,90,90,0.12); border-color: rgba(255,90,90,0.25); }
.mp-add-meal { border: 1px dashed rgba(255,122,60,0.4); background: rgba(255,122,60,0.06); color: #ff9a5b; border-radius: 10px; padding: 10px; cursor: pointer; font-size: 0.85rem; }
.mp-db-head { font-weight: 600; margin-bottom: 8px; }
.mp-db-search { width: 100%; margin-bottom: 10px; }
.mp-db-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.mp-db-row { display: flex; align-items: center; gap: 9px; text-align: left; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); border-radius: 9px; padding: 6px; cursor: pointer; color: inherit; }
.mp-db-row:hover { border-color: rgba(255,122,60,0.4); background: rgba(255,122,60,0.1); }
.mp-db-thumb { width: 40px; height: 40px; border-radius: 8px; flex: 0 0 auto; }
.mp-db-info { min-width: 0; flex: 1; }
.mp-db-info strong { display: block; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-db-info small { font-size: 0.7rem; opacity: 0.7; }
.mp-db-add { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,122,60,0.18); color: #ff9a5b; display: grid; place-items: center; font-weight: 700; }

/* Client "Mine opskrifter" — author + submit for coach approval */
.own-recipes-card { display: flex; flex-direction: column; gap: 10px; }
.own-recipes-hint { font-size: 0.82rem; opacity: 0.75; margin: 0; }
.own-recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.own-recipe-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,0.03); }
.own-recipe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.own-recipe-head strong { font-size: 0.92rem; }
.own-recipe-macros { opacity: 0.7; font-size: 0.74rem; }
.own-recipe-note { font-size: 0.78rem; background: rgba(255,90,90,0.12); border-radius: 8px; padding: 6px 8px; margin: 0; }
.own-recipe-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.own-recipe-badge { font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; }
.own-recipe-badge.is-private { background: rgba(255,255,255,0.1); color: #cbd2dd; }
.own-recipe-badge.is-pending { background: rgba(255,193,82,0.18); color: #ffce6b; }
.own-recipe-badge.is-approved { background: rgba(86,200,130,0.18); color: #74d99a; }
.own-recipe-badge.is-rejected { background: rgba(255,99,99,0.18); color: #ff8e8e; }
.own-recipe-editor .own-recipe-meta { display: flex; gap: 10px; }
.own-recipe-editor .own-recipe-meta label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.own-recipe-editor .own-recipe-meta select, .own-recipe-editor .own-recipe-meta input { padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: inherit; }
.own-recipe-editor .mv-subtitle, .own-recipe-editor .own-recipe-instr { display: block; font-size: 0.8rem; }
.own-recipe-editor .own-recipe-instr textarea { width: 100%; padding: 8px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: inherit; resize: vertical; }

/* Coach review inbox for submitted client recipes */
.recipe-review-box .recipe-review-count { background: rgba(255,193,82,0.2); color: #ffce6b; font-weight: 700; border-radius: 999px; padding: 1px 9px; font-size: 0.78rem; }
.recipe-review-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: 11px; padding: 10px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.recipe-review-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.recipe-review-info strong { font-size: 0.92rem; }
.recipe-review-info small { opacity: 0.72; font-size: 0.74rem; }
.recipe-review-ings { opacity: 0.6 !important; }
.recipe-review-actions { display: flex; gap: 7px; flex: 0 0 auto; flex-wrap: wrap; }

/* Madplan undo bar (reverse an accidental "Fjern måltid") */
.mp-undo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-radius: 11px; background: rgba(255,122,60,0.12); border: 1px solid rgba(255,122,60,0.35); font-size: 0.86rem; }
.mp-undo-bar strong { font-weight: 700; }
.mp-undo-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mp-undo-x { border: 0; background: transparent; color: inherit; cursor: pointer; opacity: 0.6; font-size: 0.85rem; padding: 2px 4px; }
.mp-undo-x:hover { opacity: 1; }

/* Madplan workbench overlays (shopping / assign / cook) */
.mp-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; }
.mp-overlay-scrim { position: absolute; inset: 0; border: 0; background: rgba(6,8,12,0.62); backdrop-filter: blur(2px); cursor: pointer; }
.mp-overlay-panel { position: relative; z-index: 1; width: min(560px, 100%); max-height: 86vh; overflow: auto; background: #161a22; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); }
.mp-overlay-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #161a22; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 1.02rem; }
.mp-ov-close { border: 0; background: rgba(255,255,255,0.06); color: inherit; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; }
.mp-ov-close:hover { background: rgba(255,255,255,0.14); }
.mp-overlay-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mp-ov-hint { font-size: 0.82rem; opacity: 0.75; margin: 0; }
.mp-ov-tabs { display: inline-flex; gap: 6px; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 10px; align-self: flex-start; }
.mp-ov-tab { border: 0; background: transparent; color: inherit; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 0.82rem; }
.mp-ov-tab.active { background: rgba(255,122,60,0.22); color: #ff9a5b; font-weight: 600; }
.mp-ov-group, .mp-ov-group-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; margin-top: 6px; }
.mp-ov-group-head { display: flex; justify-content: space-between; align-items: baseline; }
.mp-ov-group-head span { text-transform: none; letter-spacing: 0; font-size: 0.72rem; }
.mp-ov-shop-list { display: flex; flex-direction: column; gap: 5px; }
.mp-ov-shop-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); border-radius: 9px; padding: 8px 11px; cursor: pointer; color: inherit; }
.mp-ov-shop-row:hover { border-color: rgba(255,122,60,0.4); }
.mp-ov-shop-row.is-checked { opacity: 0.55; text-decoration: line-through; }
.mp-ov-shop-row small { opacity: 0.7; font-size: 0.74rem; white-space: nowrap; }
.mp-ov-foot { margin-top: 8px; }
.mp-ov-form { display: flex; flex-direction: column; gap: 10px; }
.mp-ov-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.mp-ov-form select, .mp-ov-form input { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: inherit; }
.mp-ov-assign-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 8px 11px; }
.mp-ov-assign-row small { display: block; opacity: 0.65; font-size: 0.72rem; }
.mp-ov-cook-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mp-ov-cook-row { display: flex; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; padding: 8px; }
.mp-ov-cook-thumb { width: 46px; height: 46px; border-radius: 9px; flex: 0 0 auto; }
.mp-ov-cook-row strong { display: block; font-size: 0.88rem; }
.mp-ov-cook-row small { opacity: 0.72; font-size: 0.76rem; }

.structured-editor-row {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 0.5rem;
  display: grid;
  gap: 0.4rem;
}

.structured-editor-row-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.structured-editor-row-head strong {
  flex: 1;
}

.structured-editor-sets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.structured-set-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  padding: 0.25rem 0.4rem;
}

.structured-set-edit em {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: normal;
  text-transform: uppercase;
}

.structured-set-edit input {
  width: 3.4rem;
  padding: 0.25rem 0.3rem;
}

.structured-set-edit .set-remove {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.structured-rest-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.structured-rest-edit input {
  width: 4rem;
}

.structured-picker {
  border: 1px solid rgba(255, 90, 18, 0.4);
  border-radius: 0.6rem;
  padding: 0.6rem;
  display: grid;
  gap: 0.5rem;
}

.structured-picker-results {
  display: grid;
  gap: 0.3rem;
}

.structured-picker-results button {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  cursor: pointer;
}

.structured-picker-results button small {
  display: block;
  color: rgba(255, 255, 255, 0.5);
}

.checkbox-label.compact {
  font-size: 0.75rem;
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
}

/* Client calendar (Check-Ins page) */
.client-calendar-panel .cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cal-month-label { text-transform: capitalize; }
.cal-layer-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0.9rem;
}
.cal-layer-chip {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.55;
}
.cal-layer-chip.active { opacity: 1; border-color: currentColor; }
.cal-layer-chip.cal-appointment { color: #ff7a3c; }
.cal-layer-chip.cal-training { color: #6fd3ff; }
.cal-layer-chip.cal-habit { color: #7ee787; }
.cal-layer-chip.cal-checkin { color: #d6a0ff; }
.cal-weekday-row,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}
.cal-weekday-row {
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}
.cal-weekday-row span { text-align: center; }
.cal-day {
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}
.cal-day.cal-empty { border: none; }
.cal-day.cal-today { border-color: #ff7a3c; box-shadow: inset 0 0 0 1px #ff7a3c; }
.cal-day-number { font-size: 0.75rem; opacity: 0.7; }
.cal-item {
  font-size: 0.66rem;
  line-height: 1.25;
  border-radius: 6px;
  padding: 0.12rem 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-item.cal-appointment { background: rgba(255, 122, 60, 0.22); color: #ffb38c; }
.cal-item.cal-training { background: rgba(111, 211, 255, 0.18); color: #9fe2ff; }
.cal-item.cal-habit { background: rgba(126, 231, 135, 0.16); color: #a7f0ae; }
.cal-item.cal-checkin { background: rgba(214, 160, 255, 0.18); color: #e3bdff; }
.cal-more { font-size: 0.65rem; opacity: 0.7; }
/* Drag-and-drop reschedule: training + check-in items are draggable; days are drop targets. */
.cal-item[draggable="true"] { cursor: grab; }
.cal-item[draggable="true"]:active { cursor: grabbing; }
.cal-item-dragging { opacity: 0.45; }
.cal-day.cal-drop-over {
  border-color: #ff7a3c;
  background: rgba(255, 122, 60, 0.12);
  box-shadow: inset 0 0 0 2px rgba(255, 122, 60, 0.6);
}
.coach-appointment-form { margin-top: 0.8rem; }
.coach-appointment-form .coach-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
}
@media (max-width: 1100px) {
  .cal-day { min-height: 64px; }
  .cal-item { font-size: 0.6rem; }
}

/* Workout stopwatch bar (imperative, outside the render cycle) */
#bf-workout-timer {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(20, 14, 10, 0.95);
  border: 1px solid rgba(255, 122, 60, 0.55);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
  max-width: min(94vw, 560px);
}
#bf-workout-timer .bf-timer-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  opacity: 0.85;
}
#bf-workout-timer .bf-timer-clock {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: #ff7a3c;
}
#bf-workout-timer .bf-timer-clock small { color: rgba(255, 255, 255, 0.55); font-size: 0.7rem; }
#bf-workout-timer .bf-timer-rest {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  font-variant-numeric: tabular-nums;
}
#bf-workout-timer .bf-timer-rest-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(111, 211, 255, 0.25);
  transition: width 1s linear;
}
#bf-workout-timer .bf-timer-rest-label { position: relative; }
#bf-workout-timer .bf-timer-rest.go { background: rgba(126, 231, 135, 0.2); color: #a7f0ae; }
#bf-workout-timer .bf-timer-stop {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font-size: 0.75rem;
}
@media (max-width: 700px) {
  #bf-workout-timer { gap: 0.5rem; font-size: 0.78rem; } /* no `bottom` here: the ≤700px rule below top-docks the bar, and setting both offsets stretches it fullscreen */
  #bf-workout-timer .bf-timer-title { display: none; }
}

/* Editable set actuals + deviation flags */
.set-chip-wrap { display: inline-flex; align-items: center; gap: 0.15rem; }
.set-chip-edit {
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.45;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.15rem;
}
.set-chip-edit:hover { opacity: 1; }
.set-chip.modified {
  border-color: #ffc24d;
  box-shadow: inset 0 0 0 1px rgba(255, 194, 77, 0.6);
}
.set-chip.modified .set-chip-value { color: #ffc24d; }
.set-chip-editor {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border: 1px dashed #ffc24d;
  border-radius: 10px;
  font-size: 0.8rem;
}
.set-chip-editor input {
  width: 56px;
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.set-chip-editor .set-chip-save,
.set-chip-editor .set-chip-cancel {
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.set-chip-editor .set-chip-save { background: #ff7a3c; color: #1a120c; font-weight: 700; }
.set-chip-editor .set-chip-cancel { background: rgba(255, 255, 255, 0.12); color: inherit; }
.coach-list-row.set-log-deviation { border-left: 3px solid #ffc24d; padding-left: 0.6rem; }
.set-log-planned { color: #ffc24d; font-style: normal; font-size: 0.78rem; margin-left: 0.3rem; }
.set-log-asplanned { color: #7ee787; font-style: normal; font-size: 0.78rem; margin-left: 0.3rem; opacity: 0.8; }

/* Mobile workout player (one exercise at a time) */
.workout-player {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.6rem 0.8rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.player-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.player-progress-label { flex: 1; min-width: 0; }
.player-progress-label strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-progress-label small { opacity: 0.65; }
.player-progress-dots { display: inline-flex; gap: 4px; }
.player-progress-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.player-progress-dots i.past { background: #7ee787; }
.player-progress-dots i.now { background: #ff7a3c; }
.workout-player .structured-exercise {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1rem;
}
.workout-player .structured-exercise-head strong { font-size: 1.35rem; }
.workout-player .set-chip {
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
}
.workout-player .set-chip .set-chip-value { font-size: 1.05rem; }
.player-block-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1rem;
}
.player-block-card h2 { margin: 0 0 0.4rem; }
.player-block-card pre { white-space: pre-wrap; }
.player-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(12, 8, 6, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 4000;
}
.player-footer .button { flex: 1; }
.player-footer .player-next-ready { box-shadow: 0 0 0 2px rgba(126, 231, 135, 0.6); }

/* Mobile polish: no horizontal swipe + stopwatch docks BIG at the top */
@media (max-width: 1100px) {
  html, body { overflow-x: hidden; }
  .page-grid, .client-page-shell, .portal-card, .panel { max-width: 100%; }
  .structured-sets { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  #bf-workout-timer {
    /* Below the fixed topbar (64px, z-58), NOT over it: on /app/wod the
       hamburger is the only navigation, and a top:0 timer made it
       unclickable for the whole workout. */
    top: calc(64px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    justify-content: center;
    padding: 0.6rem 0.9rem calc(0.6rem);
    padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
    font-size: 0.9rem;
    gap: 0.7rem;
  }
  #bf-workout-timer .bf-timer-clock { font-size: 1.6rem; }
  #bf-workout-timer .bf-timer-rest { min-width: 104px; font-size: 0.95rem; }
  .workout-player { padding-top: 0.4rem; }
  /* The bar is FIXED and top-docked here, so it covers whatever the page puts
     first — reported from a phone: it sat on top of the player's ✕ / "1/20" /
     progress dots. Reserve its height while it exists (it is created and removed
     with the stopwatch, so :has toggles the padding with it). The TV clock
     (/app/display) is positioned differently and must not get the offset. */
  body:has(#bf-workout-timer:not(.tv-clock)) .workout-player,
  body:has(#bf-workout-timer:not(.tv-clock)) .workout-detail { padding-top: 66px; }
}

/* View-mode pair (Mobil træning / TV display) */
.view-mode-buttons { display: inline-flex; gap: 0.5rem; }
@media (max-width: 700px) {
  .view-mode-buttons { display: flex; width: 100%; }
  .view-mode-buttons .button { flex: 1; text-align: center; justify-content: center; }
}

/* TV display: header groups + gym-clock timer */
.display-topline-left,
.display-topline-right { display: inline-flex; align-items: center; gap: 10px; }
#bf-workout-timer.tv-clock {
  top: 12px;
  right: 14px;
  left: auto;
  bottom: auto;
  transform: none;
  flex-direction: row;
  border-radius: 12px;
  background: #050505;
  border: 3px solid #1c1c1c;
  box-shadow: 0 0 0 1px #000, 0 10px 36px rgba(0, 0, 0, 0.7);
  padding: 0.5rem 1.1rem;
  max-width: none;
}
#bf-workout-timer.tv-clock .bf-timer-title { display: none; }
#bf-workout-timer.tv-clock .bf-timer-clock {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ff2a1f;
  text-shadow: 0 0 14px rgba(255, 42, 31, 0.55);
  line-height: 1;
}
#bf-workout-timer.tv-clock .bf-timer-clock small {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}
#bf-workout-timer.tv-clock .bf-timer-rest,
#bf-workout-timer.tv-clock .bf-timer-block {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.8rem;
}
#bf-workout-timer.tv-clock .bf-timer-stop { font-size: 0.85rem; }

/* Block timer segment (EMOM / interval / AMRAP) */
.bf-timer-block {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: rgba(255, 122, 60, 0.18);
  color: #ffb38c;
}
.bf-timer-block.work { background: rgba(126, 231, 135, 0.2); color: #7ee787; }
.bf-timer-block.restphase { background: rgba(111, 211, 255, 0.18); color: #9fe2ff; }
.bf-timer-block.even { background: rgba(111, 211, 255, 0.18); color: #9fe2ff; }
.bf-timer-block.amrap { background: rgba(255, 42, 31, 0.18); color: #ff7a70; }
.bf-timer-block.done { background: rgba(126, 231, 135, 0.25); color: #7ee787; }

/* Coach editor: per-block stopwatch preset */
.structured-timer-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  margin: 0.4rem 0 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 0.82rem;
}
.structured-timer-edit label { display: grid; gap: 0.25rem; }
.structured-timer-edit input,
.structured-timer-edit select {
  width: 110px;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}
.structured-timer-edit select { width: 180px; }
.structured-timer-preview { color: #ffb38c; }
.structured-timer-preview.muted { color: rgba(255, 255, 255, 0.45); }

/* Stronger horizontal clip (iOS still pans with overflow-x:hidden alone) */
@media (max-width: 1100px) {
  html, body { overflow-x: clip; }
}

/* WOD action row: icon star + compact done */
.fav-star-button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fav-star-button.is-favorite { color: #ffc24d; border-color: rgba(255, 194, 77, 0.6); }
.mark-done-compact { white-space: nowrap; }

/* Timer format panel (TABATA/EMOM/AMRAP/ned/op + custom) */
#bf-workout-timer .bf-timer-format-btn {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  font-size: 0.95rem;
}
#bf-timer-format {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 9001;
  width: min(94vw, 460px);
  background: rgba(18, 12, 9, 0.98);
  border: 1px solid rgba(255, 122, 60, 0.5);
  border-radius: 16px;
  padding: 0.8rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6);
  display: grid;
  gap: 0.7rem;
  font-size: 0.85rem;
}
#bf-timer-format .bf-format-head { display: flex; justify-content: space-between; align-items: center; }
#bf-timer-format .bf-format-quick-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#bf-timer-format .bf-format-quick {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-size: 0.78rem;
}
#bf-timer-format .bf-format-quick:hover { border-color: #ff7a3c; color: #ffb38c; }
#bf-timer-format .bf-format-custom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  align-items: end;
}
#bf-timer-format .bf-format-custom label { display: grid; gap: 0.25rem; }
#bf-timer-format .bf-format-custom input,
#bf-timer-format .bf-format-custom select {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}
@media (max-width: 700px) {
  #bf-timer-format { top: 76px; bottom: auto; }
}

/* Dagens måltider on phones: stack info above the two action buttons so long
   recipe titles and the Opskrift/Log buttons never crowd or overlap. */
@media (max-width: 700px) {
  .phone-meal-row.phone-planned-meal-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .phone-meal-row-actions,
  .today-meal-plan-row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .meal-action-btn {
    padding: 9px 10px;
    text-align: center;
  }
  .phone-meal-row-info strong {
    white-space: normal;
    line-height: 1.25;
  }
}

/* Session timing line on coach/client schedule rows */
.program-schedule-timing { display: block; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.program-schedule-timing.is-over { color: #ffc24d; }

/* Kost redesign: måltid options, portion stepper, recipe search, shopping views */
.maaltid-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.maaltid-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.7rem;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
}
.coach-recipe-cover.maaltid-thumb {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
}
.coach-recipe-cover.maaltid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.coach-recipe-cover.maaltid-thumb span { font-size: 1.1rem; }
.maaltid-option.is-logged { border-color: rgba(126, 231, 135, 0.45); }
.maaltid-option-info { min-width: 0; }
.maaltid-option-info strong { display: block; }
.maaltid-option-info small { opacity: 0.7; }
.maaltid-prep {
  display: block;
  margin-top: 3px;
  opacity: 1 !important;
  color: #ffb38c;
  font-size: 0.74rem;
  line-height: 1.3;
}
.maaltid-prep em { opacity: 0.8; font-style: normal; }
.today-meal-plan-row-info .maaltid-prep { color: #ffb38c; }

.meal-recipe-peek-batch {
  display: block;
  margin: 2px 0 6px;
  color: #ffb38c;
  font-size: 0.74rem;
}

.meal-recipe-peek-actions { margin-top: 8px; }

/* Client "tilpas & gem som ny" meal variant editor */
.meal-variant-editor { margin-top: 10px; padding: 10px; border: 1px solid rgba(255,122,60,0.35); border-radius: 10px; background: rgba(255,122,60,0.06); display: flex; flex-direction: column; gap: 8px; }
.meal-variant-editor .mv-title { font-size: 0.9rem; }
.meal-variant-editor .mv-name { display: grid; gap: 4px; font-size: 0.8rem; }
.meal-variant-editor .mv-ings { display: flex; flex-direction: column; gap: 6px; }
.mv-ing-row { display: flex; align-items: center; gap: 6px; }
.mv-ing-row .mv-ing-name { flex: 1 1 auto; min-width: 0; }
.mv-ing-row .mv-ing-amt { width: 70px; flex: 0 0 auto; }
.mv-ing-row .mv-ing-unit { font-size: 0.78rem; opacity: 0.7; }
.mv-ing-row .mv-ing-x { border: none; background: rgba(255,90,90,0.14); color: #ff8a8a; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; flex: 0 0 auto; }
.mv-ing-row .mv-ing-x:hover { background: rgba(255,90,90,0.28); }
.meal-variant-editor .mv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.meal-variant-editor .mv-hint { font-size: 0.72rem; opacity: 0.7; }

/* Weekly meal-prep plan card (Måltider) */
.meal-prep-plan-card { border-left: 3px solid #ff7a3c; }
.meal-prep-plan-hint { margin: 2px 0 10px; opacity: 0.75; font-size: 0.82rem; }
.meal-prep-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.meal-prep-plan-row { display: flex; align-items: center; gap: 10px; }
.meal-prep-plan-thumb { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.meal-prep-plan-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.meal-prep-plan-info strong { font-size: 0.92rem; }
.meal-prep-plan-info small { color: #ffb38c; font-size: 0.78rem; }
.meal-prep-plan-info small strong { color: #fff; }

/* Coach per-entry batch control (client Nutrition tab meal plan) */
.coach-meal-plan-day {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.coach-meal-plan-day > strong { display: block; margin-bottom: 4px; }
.coach-meal-entry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.coach-meal-entry-name { flex: 1 1 110px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.coach-entry-swap { flex: 0 1 150px; max-width: 160px; font-size: 0.76rem; }
.coach-batch-control { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; }
.coach-batch-control input { width: 56px; }
.coach-batch-storage { font-size: 0.8rem; }
.coach-entry-remove {
  border: none; background: rgba(255,90,90,0.14); color: #ff8a8a;
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.coach-entry-remove:hover { background: rgba(255,90,90,0.28); }
.coach-day-add { margin-top: 7px; }
.coach-day-add select { font-size: 0.8rem; width: 100%; max-width: 220px; opacity: 0.9; }
.coach-entry-swap-btn { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: inherit; border-radius: 6px; padding: 3px 8px; font-size: 0.76rem; cursor: pointer; white-space: nowrap; }
.coach-entry-swap-btn:hover { background: rgba(255,255,255,0.1); }

/* Recipe search match context (catalog cards, library rows, meal picker) */
.recipe-match-context { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.recipe-match-context span { font-size: 0.72rem; color: var(--bf-muted, #9aa3b2); line-height: 1.35; }
.recipe-match-context b { color: #ffb38c; font-weight: 600; }

/* Type-to-search recipe picker in a client's meal plan */
.coach-meal-picker { margin: 6px 0 4px; border: 1px solid rgba(255,122,60,0.35); border-radius: 10px; padding: 8px; background: rgba(255,122,60,0.06); }
.coach-meal-picker-head { display: flex; gap: 6px; align-items: center; }
.coach-meal-picker-head input { flex: 1; font-size: 0.85rem; }
.coach-meal-picker-close { border: none; background: rgba(255,255,255,0.08); color: inherit; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; flex: 0 0 auto; }
.coach-meal-picker-results { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; max-height: 280px; overflow-y: auto; }
.coach-meal-picker-result { text-align: left; display: flex; flex-direction: column; gap: 1px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); border-radius: 8px; padding: 6px 9px; cursor: pointer; color: inherit; }
.coach-meal-picker-result:hover { background: rgba(255,122,60,0.16); border-color: rgba(255,122,60,0.4); }
.coach-meal-picker-result strong { font-size: 0.86rem; }
.coach-meal-picker-result small { font-size: 0.74rem; color: var(--bf-muted, #9aa3b2); }
.maaltid-portion {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.maaltid-portion button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.maaltid-actions { display: inline-flex; gap: 0.4rem; align-items: center; }
.fav-star-button.mini { width: 32px; height: 32px; font-size: 1rem; border-radius: 50%; }
.fav-star-button.is-favorite { color: #ff6b81; border-color: rgba(255, 107, 129, 0.6); }
.next-meal-card .next-meal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.next-meal-card .next-meal-row b { display: block; color: var(--accent); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.next-meal-card .next-meal-row strong { display: block; }
.next-meal-card .next-meal-row small { opacity: 0.7; }
.recipe-search-card {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.recipe-search-card input[type="search"] { flex: 2 1 220px; }
.recipe-search-card select { flex: 1 1 150px; }
.recipe-search-card input[type="number"] { width: 110px; }
.recipe-search-card input, .recipe-search-card select {
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}
.recipe-fav-count { color: #ff6b81; font-size: 0.85rem; }
.recipe-card-top { position: relative; }
.recipe-card-fav { position: absolute; top: 0; right: 0; }
.shopping-view-tabs { display: inline-flex; gap: 0.3rem; }
.shopping-view-tab {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.65;
}
.shopping-view-tab.active { opacity: 1; border-color: var(--accent); color: var(--accent); }
.shopping-view-hint { margin: 0.2rem 0 0.6rem; opacity: 0.8; }
.shopping-group-label { display: block; margin: 0.8rem 0 0.3rem; font-size: 0.8rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.04em; }
.shopping-static-row {
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.shopping-static-row.is-home { opacity: 0.55; }
.shopping-own-heading { margin-top: 1rem; }
.shopping-own-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: center; }
.shopping-own-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.shopping-own-form input[name="itemName"] {
  flex: 1;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
}
.coach-kost-note-form textarea { width: 100%; }
.recipe-access-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.3rem; margin: 0.4rem 0; }
.coach-form-label { display: block; margin-top: 0.6rem; }
@media (max-width: 700px) {
  .maaltid-option { grid-template-columns: 1fr; gap: 0.5rem; }
  .maaltid-actions { display: grid; grid-template-columns: auto 1fr 1fr; gap: 0.45rem; width: 100%; }
}

/* TV display: clock centered at the top (as big as possible), title left */
#bf-workout-timer.tv-clock {
  top: 8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
#bf-workout-timer.tv-clock .bf-timer-clock { font-size: 5rem; }
#bf-workout-timer.tv-clock .bf-timer-rest,
#bf-workout-timer.tv-clock .bf-timer-block { font-size: 2.1rem; }
.display-topline-title {
  display: inline-flex;
  flex-direction: column;
  text-align: left;
  margin-left: 6px;
  min-width: 0;
}
.display-topline-title span { opacity: 0.65; font-size: 0.78rem; }
.display-topline-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.display-block-topline { justify-content: space-between; align-items: center; }

/* New two-group topline (left pills+title, right actions) — beat the legacy
   `> div` grid rules that stacked and stretched the groups. */
.display-block-topline { display: flex; justify-content: space-between; }
.display-block-topline > .display-topline-left,
.display-block-topline > .display-topline-right {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
  flex: 0 0 auto;
}
.display-block-topline > .display-topline-left { min-width: 0; flex-shrink: 1; }
.display-block-topline .display-nav-button { width: auto; }

/* TV clock: docked right, beside the action buttons (was covering the title
   when centered on narrower screens). Anchored by its vertical CENTER to the
   button-row centre (34px container pad + ~23px half-button), so it stays
   centred at any size. Zoom buttons scale the block text. */
#bf-workout-timer.tv-clock {
  left: auto;
  right: 235px;
  top: 57px;
  transform: translateY(-50%);
}
#bf-workout-timer.tv-clock .bf-timer-clock { font-size: 3.7rem; }
#bf-workout-timer.tv-clock .bf-timer-rest,
#bf-workout-timer.tv-clock .bf-timer-block { font-size: 1.7rem; }
.display-blocks pre {
  font-size: calc(clamp(1.2rem, 2vw, 1.85rem) * var(--display-zoom, 1));
  white-space: pre-wrap;
}
.display-blocks .block-header strong { font-size: calc(1em * var(--display-zoom, 1)); }

/* Coach-only notes (client-detail Notes tab) */
.coach-note-intro { opacity: 0.8; margin: 0 0 0.7rem; }
.coach-note-private-hint { color: rgba(255,255,255,0.5); font-weight: 400; }
.coach-note-form textarea { width: 100%; }
.coach-note-form-row { display: flex; align-items: end; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.5rem; }
.coach-note-visibility { display: grid; gap: 0.25rem; }
.coach-note-visibility select {
  padding: 0.4rem 0.6rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(0,0,0,0.3); color: inherit;
}
.coach-note-form-actions { display: inline-flex; gap: 0.5rem; }
.coach-note-list { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.coach-note-row { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.7rem 0.85rem; }
.coach-note-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.coach-note-meta small { opacity: 0.6; margin-left: auto; }
.coach-note-row p { margin: 0; }
.coach-note-badge { font-size: 0.68rem; padding: 0.12rem 0.5rem; border-radius: 999px; font-weight: 700; }
.coach-note-badge-private { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }
.coach-note-badge-coaches { background: rgba(111,211,255,0.18); color: #9fe2ff; }
.coach-note-actions { display: inline-flex; gap: 0.8rem; margin-top: 0.45rem; }
.coach-note-profile { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px dashed rgba(255,255,255,0.12); opacity: 0.7; }
.coach-note-profile small { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; }

/* Coach Progress tab: section subheads + chart spacing */
.coach-progress-subhead {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  margin: 0.9rem 0 0.4rem;
}
.coach-progress-subhead:first-child { margin-top: 0.2rem; }
.coach-progress-chart { margin-bottom: 0.8rem; }

/* Coach client-detail: inline goal editor (Client Info panel) */
.coach-info-goal { display: grid; gap: 0.2rem; margin: 0.2rem 0 0.7rem; }
.coach-info-goal > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.55; }
.coach-info-goal > strong { line-height: 1.3; }
.coach-goal-set-link { align-self: start; padding: 0; }
.coach-goal-form { display: grid; gap: 0.5rem; margin: 0.2rem 0 0.8rem; }
.coach-goal-form label { display: grid; gap: 0.25rem; font-size: 0.78rem; }
.coach-goal-form textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.3);
  color: inherit;
}
.coach-goal-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Client Info control panel: collapsible Library access / App modules / Actions */
.coach-info-collapsible {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 0.6rem;
  padding-top: 0.5rem;
}
.coach-info-collapsible > summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  gap: 0.5rem;
}
.coach-info-collapsible > summary::-webkit-details-marker { display: none; }
.coach-info-collapsible > summary::after { content: "▾"; opacity: 0.5; font-size: 0.7rem; }
.coach-info-collapsible[open] > summary::after { content: "▴"; }
.coach-info-collapsible > summary em { font-style: normal; opacity: 0.55; font-weight: 600; font-size: 0.78rem; margin-left: auto; margin-right: 0.4rem; }
.coach-info-collapsible > *:not(summary) { margin-top: 0.55rem; }
.coach-info-collapsible .client-modules-form .portal-card-heading,
.coach-info-collapsible .admin-hint:first-of-type { display: none; }

/* Active Programs as a foldable card */
.coach-programs-foldable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.coach-programs-foldable > summary::-webkit-details-marker { display: none; }
.coach-programs-foldable > summary strong { font-size: 1rem; }
.coach-programs-foldable > summary span { opacity: 0.6; font-size: 0.82rem; }
.coach-programs-foldable > summary::after { content: "▾"; opacity: 0.5; }
.coach-programs-foldable[open] > summary::after { content: "▴"; }
.coach-programs-foldable > *:not(summary) { margin-top: 0.7rem; }

/* Coach client-detail calendar legend */
.coach-client-calendar .cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 0.7rem;
  font-size: 0.74rem;
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; opacity: 0.85; }
.cal-legend-item::before { content: ""; width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cal-legend-item.cal-appointment::before { background: rgba(255,122,60,0.6); }
.cal-legend-item.cal-training::before { background: rgba(111,211,255,0.6); }
.cal-legend-item.cal-habit::before { background: rgba(126,231,135,0.6); }
.cal-legend-item.cal-checkin::before { background: rgba(214,160,255,0.6); }

/* Active Programs: header always visible, schedule folds per program */
.coach-program-foldable { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.4rem 0.6rem; margin-bottom: 0.6rem; }
.coach-program-foldable > summary { cursor: pointer; list-style: none; align-items: center; }
.coach-program-foldable > summary::-webkit-details-marker { display: none; }
.coach-program-foldable > summary::after { content: "▾"; opacity: 0.5; margin-left: 0.4rem; }
.coach-program-foldable[open] > summary::after { content: "▴"; }
.coach-program-foldable > *:not(summary) { margin-top: 0.6rem; }

/* Clickable calendar items */
.cal-item-button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
  font: inherit;
}
.cal-item-button:hover { filter: brightness(1.25); }

/* Appointment edit affordances */
.coach-appointment-row-actions { display: inline-flex; gap: 0.6rem; align-items: center; }
.coach-list-row.is-editing { box-shadow: inset 0 0 0 1px rgba(255,90,18,0.6); border-radius: 8px; }
.coach-appointment-form-head { font-weight: 800; font-size: 0.85rem; margin-bottom: 0.2rem; }
.coach-appointment-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Weight chart: value labels on each point */
.coach-line-chart .coach-chart-value {
  fill: #fff;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 3px;
}

/* Coach Progress / Measurements: stat tiles + chart spacing */
.coach-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px 18px 4px;
}
.coach-stat-tile {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.coach-stat-tile > span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
.coach-stat-tile > strong { font-size: 1.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.coach-stat-tile > small { opacity: 0.6; font-size: 0.74rem; }
.coach-stat-tile.is-empty > strong { opacity: 0.35; }
.coach-progress-chart { margin: 0.4rem 0 0.2rem; }
.coach-section-box .coach-progress-subhead { padding: 0 18px; margin-top: 0.9rem; }

/* ============================================================ */
/* Public showroom landing + free tools + access requests       */
/* ============================================================ */
.bf-land {
  --land-ink: #1b1b1b;
  --land-dark: #141414;
  --land-accent: var(--accent, #bb2d2d);
  --land-accent2: #ff5a12;
  min-height: 100vh;
  background: var(--bg, #f4f1ec);
  color: var(--land-ink);
  overflow-x: hidden;
}
.bf-land-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 5vw; flex-wrap: wrap;
}
.bf-land-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.bf-land-brand .brand-mark { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--land-dark); }
.bf-land-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.bf-land-brand-word { display: grid; line-height: 1; }
.bf-land-brand-word strong { font-size: 1.05rem; letter-spacing: 0.12em; }
.bf-land-brand-word small { font-size: 0.62rem; letter-spacing: 0.34em; opacity: 0.7; }
.bf-land-nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bf-land-nav-links a { color: inherit; text-decoration: none; font-weight: 600; font-size: 0.92rem; opacity: 0.85; }
.bf-land-nav-links a:hover { opacity: 1; }

.bf-land-hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  padding: 36px 5vw 48px;
}
.bf-land-hero-copy h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.07; margin: 14px 0 16px; letter-spacing: -0.01em; }
.bf-land-lead { font-size: 1.05rem; line-height: 1.55; opacity: 0.82; max-width: 38ch; }
.bf-land-beta-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--land-accent2); background: #fff0e7; border: 1px solid #ffd3bb;
  padding: 5px 11px; border-radius: 999px;
}
.bf-land-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.bf-land-hero-note { font-size: 0.82rem; opacity: 0.6; }
.bf-land-ownbuilt { font-size: 0.95rem; line-height: 1.5; opacity: 0.92; margin: 2px 0 6px; }
.bf-land-ownbuilt strong { color: var(--land-accent); }
.bf-page-head .bf-leads-hint { color: var(--bf-accent, #f37021); font-weight: 700; text-decoration: underline; }
.bf-page-head .bf-leads-hint:hover { opacity: 0.85; }
.bf-land-hero-card { display: flex; justify-content: center; }
.bf-land-card { width: 100%; max-width: 420px; }

.button.button-ghost {
  background: transparent; border: 1.5px solid rgba(0,0,0,0.2); color: inherit;
}
.bf-linklike { background: none; border: none; color: inherit; font: inherit; cursor: pointer; opacity: 0.85; padding: 0; }
.bf-linklike:hover { opacity: 1; text-decoration: underline; }

.bf-land-beta-bar {
  background: var(--land-dark); color: #f3efe8; text-align: center;
  padding: 12px 5vw; font-size: 0.9rem; line-height: 1.45;
}

.bf-land-section { padding: 54px 5vw; max-width: 1180px; margin: 0 auto; }
.bf-land-section-head { text-align: center; max-width: 60ch; margin: 0 auto 30px; }
.bf-land-section-head h1, .bf-land-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 8px 0 8px; }
.bf-land-section-head p { opacity: 0.78; line-height: 1.5; }
.bf-land-eyebrow { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--land-accent); }
.bf-land-note { text-align: center; font-size: 0.84rem; opacity: 0.6; margin-top: 22px; }

.bf-showroom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.bf-show-card {
  background: var(--surface, #fff); border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.bf-show-body { padding: 18px 18px 22px; }
.bf-show-tag { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--land-accent); }
.bf-show-body h3 { font-size: 1.12rem; margin: 6px 0 8px; line-height: 1.25; }
.bf-show-body p { font-size: 0.92rem; opacity: 0.78; line-height: 1.5; }
.bf-shot {
  background: linear-gradient(150deg, #1c1c1c, #2b2b2b); color: #f3efe8;
  padding: 18px; min-height: 132px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.bf-shot-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; background: rgba(255,255,255,0.07); padding: 8px 11px; border-radius: 8px; }
.bf-shot-row b { color: var(--land-accent2); }
.bf-shot-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.bf-shot-bar i { display: block; height: 100%; background: var(--land-accent2); }
.bf-shot-timer { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--land-accent2); font-size: 1.3rem; text-align: center; }
.bf-shot-macro { display: flex; gap: 8px; }
.bf-shot-macro > div { flex: 1; background: rgba(255,255,255,0.07); border-radius: 8px; padding: 8px; text-align: center; }
.bf-shot-macro small { display: block; opacity: 0.6; font-size: 0.68rem; }
.bf-shot-macro b { color: var(--land-accent2); }
.bf-shot-chart { width: 100%; height: 70px; color: var(--land-accent2); }
.bf-shot-cal { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-shot-cal span { font-size: 0.72rem; padding: 5px 9px; border-radius: 7px; font-weight: 700; }
.bf-shot-cal .cal-training { background: #2e6b4f; }
.bf-shot-cal .cal-checkin { background: #6b4f2e; }
.bf-shot-cal .cal-habit { background: #2e4f6b; }
.bf-shot-cal .cal-appt { background: var(--land-accent); }
.bf-shot-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 0.85rem; }
.bf-shot-msg.you { align-self: flex-end; background: var(--land-accent2); color: #1b1b1b; border-bottom-right-radius: 3px; }
.bf-shot-msg.coach { align-self: flex-start; background: rgba(255,255,255,0.12); border-bottom-left-radius: 3px; }

.bf-land-tools-wrap { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.02)); border-radius: 22px; }
.bf-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.bf-tool-card {
  background: var(--surface, #fff); border: 1px solid rgba(0,0,0,0.07); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.bf-tool-card h3 { font-size: 1.1rem; margin: 0; }
.bf-tool-sub { font-size: 0.86rem; opacity: 0.72; margin: -4px 0 2px; line-height: 1.45; }
.bf-tool-form { display: flex; flex-direction: column; gap: 10px; }
.bf-tool-form label { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 600; }
.bf-tool-form input, .bf-tool-form select {
  padding: 10px 12px; border: 1px solid rgba(0,0,0,0.16); border-radius: 9px; font: inherit; background: #fff;
}
.bf-tool-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-tool-out:empty { display: none; }
.bf-tool-out { border-top: 1px dashed rgba(0,0,0,0.12); padding-top: 12px; }
.bf-tool-headline { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bf-tool-headline span { font-size: 0.82rem; opacity: 0.7; }
.bf-tool-headline strong { font-size: 1.7rem; color: var(--land-accent); font-variant-numeric: tabular-nums; }
.bf-tool-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-top: 8px; }
.bf-tool-table th { text-align: left; opacity: 0.6; font-weight: 700; font-size: 0.74rem; }
.bf-tool-table td, .bf-tool-table th { padding: 4px 6px; border-bottom: 1px solid rgba(0,0,0,0.06); font-variant-numeric: tabular-nums; }
.bf-tool-fine { font-size: 0.76rem; opacity: 0.6; margin-top: 8px; line-height: 1.4; }
.bf-tool-err { color: var(--land-accent); font-size: 0.86rem; font-weight: 600; }
.bf-macro-row { display: flex; gap: 8px; margin-top: 10px; }
.bf-macro-pill { flex: 1; text-align: center; padding: 9px 6px; border-radius: 10px; background: #f4f1ec; }
.bf-macro-pill small { display: block; font-size: 0.68rem; opacity: 0.65; }
.bf-macro-pill strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bf-macro-pill.protein { background: #eaf3ee; } .bf-macro-pill.carb { background: #eef1f6; } .bf-macro-pill.fat { background: #fbeee6; }
.bf-generator-out {
  min-height: 76px; display: flex; flex-direction: column; gap: 4px; justify-content: center;
  font-size: 1.02rem; line-height: 1.4; background: #f4f1ec; border: none; border-radius: 12px; padding: 14px 16px; font-weight: 500;
}
.bf-chal-title { color: var(--land-accent); font-size: 1.1rem; }

.bf-module-chooser { border: none; padding: 0; margin: 6px 0 2px; }
.bf-module-chooser legend { font-weight: 600; font-size: 0.8rem; opacity: 0.72; margin-bottom: 10px; padding: 0; }
.bf-module-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-module-opt {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px;
  padding: 11px 34px 11px 11px;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
/* Native checkbox visually hidden but still focusable/clickable */
.bf-module-opt input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.bf-module-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
  background: rgba(0,0,0,0.05); transition: background .15s ease;
}
.bf-module-text { display: grid; gap: 2px; min-width: 0; }
.bf-module-text strong { font-size: 0.84rem; font-weight: 700; text-transform: none; letter-spacing: normal; }
.bf-module-text small { font-size: 0.71rem; opacity: 0.6; line-height: 1.32; text-transform: none; letter-spacing: normal; }
/* Delicate custom check in the top-right corner */
.bf-module-opt::after {
  content: ""; position: absolute; top: 50%; right: 11px; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 6px;
  border: 1.5px solid rgba(120,120,120,0.5); background: transparent;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; color: #fff; line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}
.bf-module-opt.is-on::after,
.bf-module-opt:has(input:checked)::after {
  content: "\2713"; background: var(--land-accent2, #ff5a12); border-color: var(--land-accent2, #ff5a12); color: #1b1b1b;
}
.bf-access-form textarea { padding: 10px 12px; border: 1px solid rgba(0,0,0,0.16); border-radius: 9px; font: inherit; resize: vertical; }
.bf-access-done { text-align: center; padding: 18px 10px; }
.bf-access-done-mark { width: 54px; height: 54px; border-radius: 50%; background: #eaf3ee; color: #2e8b57; font-size: 1.7rem; display: grid; place-items: center; margin: 0 auto 12px; }
.bf-access-done h2 { margin: 0 0 6px; }
.bf-access-done p { opacity: 0.8; line-height: 1.5; margin-bottom: 16px; }

.bf-land-cta-band { text-align: center; background: var(--land-dark); color: #f3efe8; border-radius: 22px; }
.bf-land-cta-band h2 { color: #fff; }
.bf-land-cta-band p { opacity: 0.8; margin-bottom: 18px; }
.bf-land-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 28px 5vw; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 20px;
}
.bf-land-footer strong { letter-spacing: 0.1em; }
.bf-land-footer p { opacity: 0.65; font-size: 0.85rem; margin: 0; }
.bf-land-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.bf-land-footer-links a { color: inherit; text-decoration: none; font-weight: 600; opacity: 0.85; }
.bf-land-footer-fine { width: 100%; text-align: center; opacity: 0.5 !important; }

.coach-leads-page .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.lead-card { border: 1px solid rgba(0,0,0,0.08); border-left: 4px solid rgba(0,0,0,0.2); border-radius: 12px; padding: 16px; background: var(--surface, #fff); display: flex; flex-direction: column; gap: 8px; }
.lead-card.lead-status-new { border-left-color: var(--accent, #bb2d2d); }
.lead-card.lead-status-contacted { border-left-color: #c98a2e; }
.lead-card.lead-status-accepted { border-left-color: #2e8b57; }
.lead-card.lead-status-declined, .lead-card.lead-status-archived { border-left-color: #999; opacity: 0.7; }
.lead-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lead-card-head strong { font-size: 1.05rem; }
.lead-card-head small { opacity: 0.6; font-size: 0.78rem; white-space: nowrap; }
.lead-badge { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; margin-left: 8px; background: #eee; }
.lead-badge-new { background: #fbe3e3; color: #a01f1f; }
.lead-badge-contacted { background: #f6ecd9; color: #8a5c14; }
.lead-badge-accepted { background: #e4f1ea; color: #1f6b41; }
.lead-contact { font-size: 0.88rem; }
.lead-contact a { color: var(--accent, #bb2d2d); text-decoration: none; }
.lead-modules { font-size: 0.84rem; opacity: 0.85; }
.lead-modules span { opacity: 0.6; }
.lead-message { font-size: 0.88rem; line-height: 1.45; background: #f4f1ec; padding: 10px 12px; border-radius: 9px; margin: 2px 0; }
.lead-actions { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.lead-status-select { display: grid; gap: 3px; font-size: 0.74rem; font-weight: 700; opacity: 0.8; }
.lead-status-select select { padding: 7px 10px; border: 1px solid rgba(0,0,0,0.16); border-radius: 8px; font: inherit; }

@media (max-width: 820px) {
  .bf-land-hero { grid-template-columns: 1fr; gap: 26px; padding-top: 22px; }
  .bf-land-hero-card { order: -1; }
  .bf-module-grid { grid-template-columns: 1fr; }
  .bf-land-section { padding: 38px 5vw; }
}

/* ---- Landing: align to the app's dark theme (--bg #050505, --ink light) ---- */
.bf-land { background: var(--bg, #0c0c0c); color: var(--ink, #f3efe8); }
.bf-land-hero-copy h1, .bf-land-section-head h1, .bf-land-section-head h2 { color: var(--ink, #fff); }

.bf-land .button.button-ghost { border-color: rgba(255,255,255,0.28); color: var(--ink, #f3efe8); }
.bf-land .button.button-ghost:hover { border-color: rgba(255,255,255,0.5); }

.bf-land-beta-bar { background: rgba(255,90,18,0.12); color: #ffd8c4; border-block: 1px solid rgba(255,90,18,0.28); }

/* Cards on dark */
.bf-show-card, .bf-tool-card {
  background: #181818; border-color: rgba(255,255,255,0.09); color: var(--ink, #f3efe8);
  box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}
.lead-card { background: #181818; color: var(--ink, #f3efe8); border-color: rgba(255,255,255,0.09); }

/* Inputs on dark */
.bf-tool-form input, .bf-tool-form select,
.bf-access-form input, .bf-access-form select, .bf-access-form textarea,
.lead-status-select select {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); color: var(--ink, #f3efe8);
}
.bf-tool-form input::placeholder, .bf-access-form input::placeholder, .bf-access-form textarea::placeholder { color: rgba(255,255,255,0.4); }
/* Native dropdown list: light text on a solid dark menu (matches app pattern) */
.bf-tool-form select option, .bf-access-form select option, .lead-status-select select option {
  color: #f7f3ef; background: #1a1a1a;
}

/* Light blocks → dark surfaces */
.bf-macro-pill { background: rgba(255,255,255,0.05); }
.bf-macro-pill.protein { background: rgba(46,139,87,0.18); }
.bf-macro-pill.carb { background: rgba(70,110,180,0.18); }
.bf-macro-pill.fat { background: rgba(255,90,18,0.16); }
.bf-generator-out { background: rgba(255,255,255,0.04); }
.lead-message { background: rgba(255,255,255,0.04); }
.bf-module-opt { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); }
.bf-module-opt:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.045); }
.bf-module-opt .bf-module-ico { background: rgba(255,255,255,0.07); }
.bf-module-opt.is-on, .bf-module-opt:has(input:checked) { background: rgba(255,90,18,0.1); border-color: var(--land-accent2); }
.bf-module-opt.is-on .bf-module-ico, .bf-module-opt:has(input:checked) .bf-module-ico { background: rgba(255,90,18,0.2); }

/* Divider/border colours that were black-on-light */
.bf-tool-out { border-top-color: rgba(255,255,255,0.12); }
.bf-tool-table td, .bf-tool-table th { border-bottom-color: rgba(255,255,255,0.08); }
.bf-land-footer { border-top-color: rgba(255,255,255,0.1); }
/* Status dropdown options: light on dark (overrides the earlier dark rule). */
.lead-status-select select option { color: #f7f3ef; background: #1a1a1a; }

/* CTA band + login card heading */
.bf-land-cta-band { background: linear-gradient(135deg, #1d1d1d, #2a160d); }
.bf-land-card .auth-copy h2 { margin: 0; color: #fff; font-size: 1.5rem; line-height: 1.12; }

/* Success card on dark */
.bf-access-done-mark { background: rgba(46,139,87,0.2); }

/* Brand wordmark: BEASTFACTORY.DK (FACTORY in orange) */
.bf-wm { display:inline-flex; align-items:baseline; gap:0; line-height:1; font-weight:900; letter-spacing:0.005em; white-space:nowrap; }
.bf-wm-1 { color: var(--ink, #fff); }
.bf-wm-2 { color: #ff5a12; }
.bf-wm-3 { color: var(--muted, #9a948e); align-self:flex-end; font-weight:800; margin-left:1px; }
.bf-wm-1, .bf-wm-2 { font-size: 1.12rem; }
.bf-wm-3 { font-size: 0.74rem; }
/* Per-gym white-label wordmark: the gym's own name in place of BEASTFACTORY.DK. */
.bf-wm-custom { font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bf-ink, var(--ink, #1C1A17)); }
.bf-sand .sidebar .bf-wm-custom { color: var(--bf-ink); }
/* Sidebar: size the BEASTFACTORY.DK wordmark + logo so the full mark fits without clipping */
.sidebar .brand-mark { width: 42px; height: 42px; }
.sidebar .brand-lockup { gap: 9px; overflow: visible; }
.sidebar .bf-wm-1, .sidebar .bf-wm-2 { font-size: 1.04rem; }
.sidebar .bf-wm-3 { font-size: 0.7rem; }
.bf-land-brand-word { display:inline-flex; }

/* WOD timer / stopwatch public tool */
.bf-timer-card { text-align: center; }
.bf-timer-tabs { display:flex; gap:6px; justify-content:center; margin:2px 0 6px; }
.bf-timer-tab { flex:1; padding:7px 6px; border:1px solid rgba(255,255,255,0.14); background:transparent; color:inherit; border-radius:9px; font:inherit; font-size:0.78rem; font-weight:700; cursor:pointer; transition:background .12s,border-color .12s; }
.bf-timer-tab.is-on { background: rgba(255,90,18,0.16); border-color:#ff5a12; color:#fff; }
.bf-timer-config { display:flex; gap:8px; justify-content:center; margin:6px 0; flex-wrap:wrap; }
.bf-timer-config label { display:grid; gap:3px; font-size:0.7rem; font-weight:700; opacity:0.78; }
.bf-timer-config input { width:72px; text-align:center; padding:8px; border:1px solid rgba(255,255,255,0.16); border-radius:8px; background:rgba(255,255,255,0.05); color:var(--ink,#f3efe8); font:inherit; }
.bf-timer-display { font-size:3.4rem; font-weight:900; font-variant-numeric:tabular-nums; line-height:1.05; letter-spacing:0.02em; margin:8px 0 2px; color:#fff; }
.bf-timer-phase { min-height:1.2em; font-size:0.82rem; font-weight:800; letter-spacing:0.07em; color:#ff5a12; margin-bottom:10px; }
.bf-timer-controls { display:flex; gap:8px; justify-content:center; }
.bf-timer-controls .button { min-width:100px; }

/* Forgot-password link under the login form */
.auth-forgot-link { background:none; border:none; color:var(--muted,#a8a09a); font:inherit; font-size:0.82rem; cursor:pointer; padding:2px 0; margin-top:-4px; text-align:center; width:100%; }
.auth-forgot-link:hover { color:var(--ink,#f3efe8); text-decoration:underline; }

/* Adgang: Opret konto provisioning panel */
.lead-provision { margin-top:12px; padding:14px; border:1px solid rgba(255,90,18,0.35); border-radius:12px; background:rgba(255,90,18,0.06); display:flex; flex-direction:column; gap:10px; }
.lead-provision-head { font-weight:800; font-size:0.9rem; }
.lead-provision label { display:grid; gap:4px; font-size:0.78rem; font-weight:700; opacity:0.85; }
.lead-provision select, .lead-provision input { padding:9px 11px; border:1px solid rgba(255,255,255,0.16); border-radius:8px; background:rgba(255,255,255,0.05); color:var(--ink,#f3efe8); font:inherit; }
.lead-provision select option { color:#f7f3ef; background:#1a1a1a; }
.lead-provision-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }

/* Requested-role chip in the Adgang inbox */
.lead-role-badge { background:rgba(255,90,18,0.16); color:#ff5a12; }

/* Owner role switcher (sidebar) */
.bf-role-switcher { margin:10px 0 6px; padding:10px; border:1px solid rgba(255,255,255,0.1); border-radius:12px; background:rgba(255,255,255,0.03); }
.bf-role-switcher-label { display:block; font-size:0.66rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; opacity:0.6; margin-bottom:7px; }
.bf-role-chips { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bf-role-chip { padding:7px 6px; border:1px solid rgba(255,255,255,0.14); background:transparent; color:inherit; border-radius:8px; font:inherit; font-size:0.74rem; font-weight:700; cursor:pointer; transition:background .12s,border-color .12s; }
.bf-role-chip.is-on { background:rgba(255,90,18,0.18); border-color:#ff5a12; color:#fff; }
.bf-role-chip:hover { border-color:rgba(255,255,255,0.3); }
/* Planner copy-last-week button sits under the planned-slots count */
.public-weekly-summary { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* =================================================================
   LIGHT THEME — scoped to the Nutrition module (client Kost pages +
   coach Madplan / Nutrition). The app shell stays dark; nutrition is
   light to match the design mockup. Wrapper class: .nutrition-light
   ================================================================= */
.nutrition-light {
  color-scheme: light;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  /* Subtle fills (chips, steppers, bars). These used to be hardcoded hex, which
     made them light-on-light — i.e. invisible — in dark mode. Tokens flip. */
  --surface2: #f3f5f8;
  --surface3: #eceff4;
  --placeholder: #9aa1ad;
  /* Tinted fills + their ink. Hardcoding these made them stay light in dark mode. */
  --tint-accent: #fff7f2;
  --tint-danger: #fdecec;
  --tint-danger-line: #f3c9c9;
  --tint-neutral: #eef1f5;
  --danger-ink: #c0392b;
  --neutral-ink: #5b6472;
  --ink: #1d2533;
  --muted: #6b7280;
  --line: #e6e9ef;
  --accent: #ff7a3c;
  --accent-dark: #e8632a;
  --success: #2f9e63;
  --danger: #d6443a;
  --shadow: 0 12px 34px rgba(20, 30, 50, 0.08);
  color: var(--ink);
  background: var(--bg);
  border-radius: 16px;
  padding: 18px;
}
@media (max-width: 700px) { .nutrition-light { padding: 12px; border-radius: 12px; } }

/* base text */
.nutrition-light :is(h1, h2, h3, h4, h5, strong, b) { color: var(--ink); }
.nutrition-light :is(p, li, td, th, dt, dd) { color: var(--ink); }
.nutrition-light :is(small, .text-muted, .mp-sub, .mp-canvas-head span, .mp-client small) { color: var(--muted); opacity: 1; }
.nutrition-light a { color: var(--ink); }

/* generic surfaces */
.nutrition-light :is(.portal-card, .coach-section-box, .resource-card, .recipe-search-card,
  .recipe-catalog-hero, .recipe-filter-strip, .own-recipes-card, .own-recipe-card,
  .recipe-review-row, .recipe-card, .maaltid-card, .phone-card, .meal-variant-editor,
  .mp-left, .mp-db, .mp-meal) {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
.nutrition-light .portal-card { box-shadow: var(--shadow); }

/* headers / subtabs */
.nutrition-light .client-page-header { border-bottom-color: var(--line); }
.nutrition-light .client-page-header h1 { color: var(--ink); }
.nutrition-light .client-subtabs a { color: var(--muted); }
.nutrition-light .client-subtabs a.is-active,
.nutrition-light .client-subtabs a.active,
.nutrition-light .client-subtabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.nutrition-light .portal-kicker, .nutrition-light .eyebrow { color: var(--accent-dark); }

/* inputs + buttons */
.nutrition-light :is(input, select, textarea) { background: var(--surface, #fff); border: 1px solid var(--line); color: var(--ink); }
.nutrition-light ::placeholder { color: var(--placeholder, #9aa1ad); }
.nutrition-light :is(.button-secondary, .button-ghost) { background: var(--surface, #fff); border: 1px solid var(--line); color: var(--ink); }
.nutrition-light .button-secondary:hover { background: var(--surface2, #f3f5f8); }
.nutrition-light .button-primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.nutrition-light .button-primary:hover { background: var(--accent-dark); }

/* list rows */
.nutrition-light .coach-list-row { background: var(--surface, #fff); border-color: var(--line); }
.nutrition-light .portal-link-list :is(a, button) { background: var(--surface, #fff); border: 1px solid var(--line); color: var(--ink); }

/* ---- Madplan workbench ---- */
.nutrition-light .mp-back, .nutrition-light .mp-meal-type { color: var(--accent-dark); }
.nutrition-light .mp-day { background: var(--surface, #fff); border-color: var(--line); color: var(--muted); }
.nutrition-light .mp-day.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.nutrition-light .mp-ring-bg { stroke: var(--surface3, #e9edf3); }
.nutrition-light .mp-ring small { color: var(--muted); opacity: 1; }
.nutrition-light .mp-ring small span { color: var(--ink); opacity: 1; }
.nutrition-light .mp-goal-bar { background: var(--surface3, #eceff4); }
.nutrition-light .mp-meal-kcal b { color: var(--ink); }
.nutrition-light .mp-portion button { background: var(--surface2, #f3f5f8); border-color: var(--line); color: var(--ink); }
.nutrition-light .mp-macro { background: var(--surface2, #f3f5f8); color: var(--ink); }
.nutrition-light .mp-meal-foot { border-top-color: var(--line); }
.nutrition-light .mp-mini { background: var(--surface, #fff); border-color: var(--line); color: var(--ink); }
.nutrition-light .mp-mini.danger { background: var(--tint-danger, #fdecec); border-color: var(--tint-danger-line, #f3c9c9); color: var(--danger-ink, #c0392b); }
.nutrition-light .mp-add-meal { background: var(--tint-accent, #fff7f2); border-color: rgba(255, 122, 60, 0.5); color: var(--accent-dark); }
.nutrition-light .mp-db-row { background: var(--surface, #fff); border-color: var(--line); color: var(--ink); }
.nutrition-light .mp-db-row:hover { background: var(--tint-accent, #fff5ef); border-color: rgba(255, 122, 60, 0.5); }
.nutrition-light .mp-db-add { background: rgba(255, 122, 60, 0.16); color: var(--accent-dark); }
.nutrition-light .mp-ings small, .nutrition-light .mp-db-info small { color: var(--muted); }

/* ---- overlays ---- */
.nutrition-light .mp-overlay-panel, .nutrition-light .mp-overlay-head { background: var(--surface, #fff); }
.nutrition-light .mp-overlay-head { border-bottom-color: var(--line); }
.nutrition-light .mp-ov-close, .nutrition-light .mp-ov-tabs { background: var(--surface2, #f3f5f8); color: var(--ink); }
.nutrition-light .mp-ov-tab.active { background: rgba(255, 122, 60, 0.16); color: var(--accent-dark); }
.nutrition-light :is(.mp-ov-shop-row, .mp-ov-assign-row, .mp-ov-cook-row) { background: var(--surface, #fff); border-color: var(--line); }
.nutrition-light .mp-ov-shop-row:hover { border-color: rgba(255, 122, 60, 0.5); }

/* ---- own recipes / coach review ---- */
.nutrition-light .own-recipe-badge.is-private { background: var(--tint-neutral, #eef1f5); color: var(--neutral-ink, #5b6472); }
.nutrition-light .own-recipe-note { background: var(--tint-danger, #fdecec); color: var(--ink); }
.nutrition-light .meal-variant-editor :is(input, textarea, select) { background: var(--surface, #fff); border-color: var(--line); }
.nutrition-light .mv-ing-unit { color: var(--muted); }

/* =================================================================
   CLIENT "KOST" BRAND APP — BeastFactory sand/ink/orange, mobile-first.
   Matches the "Kost - Klient" design. Scoped to .kost-app.
   ================================================================= */
.kost-app {
  --kost-sand:var(--bf-sand, #EAE6DC); --kost-ink:#1C1A17; --kost-orange:var(--bf-accent, #C75D34); --kost-orange-d:#A8451F;
  --kost-green:#5f8050; --kost-gold:#B58B43; --kost-card:#ffffff; --kost-muted:#736a5e; --kost-line:#ddd6ca;
  max-width: 468px; margin: 0 auto; min-height: calc(100vh - 32px);
  background: var(--kost-sand); color: var(--kost-ink);
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif;
  border-radius: 28px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); overflow: hidden;
  position: relative; padding-bottom: 86px;
}
.kost-app *, .kost-app *::before, .kost-app *::after { box-sizing: border-box; }
.kost-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:22px 20px 10px; }
.kost-logo { font-family:"Archivo",sans-serif; font-weight:900; font-size:1.4rem; letter-spacing:-0.02em; color:var(--kost-ink); display:block; }
.kost-logo i { color:var(--kost-orange); font-style:normal; }
.kost-head-left small { display:block; color:var(--kost-muted); font-size:0.84rem; margin-top:3px; }
.kost-head-avatar { width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--kost-line); display:grid; place-items:center; font-weight:700; font-size:0.78rem; color:var(--kost-muted); flex:0 0 auto; }
.kost-main { padding:4px 16px 16px; }
.kost-screen { display:flex; flex-direction:column; gap:14px; }

/* Hero: dark calorie ring + remaining + macro tiles */
.kost-hero { background:var(--kost-ink); color:#fff; border-radius:24px; padding:20px; display:flex; gap:14px; align-items:center; }
.kost-ring { position:relative; width:140px; height:140px; flex:0 0 auto; }
.kost-ring-svg { width:140px; height:140px; display:block; }
.kost-ring-track { fill:none; stroke:rgba(255,255,255,0.1); stroke-width:10; }
.kost-ring-arc { fill:none; stroke:var(--kost-orange); stroke-width:10; stroke-linecap:round; }
.kost-ring-dot { fill:var(--kost-orange); }
.kost-ring-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.kost-ring-center strong { font-family:"Archivo",sans-serif; font-size:2rem; font-weight:800; line-height:1; }
.kost-ring-center small { color:rgba(255,255,255,0.6); font-size:0.72rem; margin-top:4px; }
.kost-hero-right { flex:1; min-width:0; }
.kost-hero-label { color:var(--kost-orange); font-size:0.82rem; font-weight:600; }
.kost-hero-rem { display:block; font-family:"Archivo",sans-serif; font-size:2.7rem; font-weight:800; line-height:1; color:#86b072; margin:2px 0 14px; }
.kost-macros { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kost-macro { background:rgba(28,26,23,0.05); border-radius:13px; padding:9px 6px; text-align:center; }
.kost-macro strong { display:block; font-family:"Archivo",sans-serif; font-size:1.15rem; font-weight:700; line-height:1; }
.kost-macro small { font-size:0.64rem; color:rgba(255,255,255,0.5); display:block; margin-top:4px; }
.kost-macro-p strong { color:var(--kost-orange); }
.kost-macro-k strong { color:#86b072; }
.kost-macro-f strong { color:#d6a857; }

/* White cards */
.kost-card { background:var(--kost-card); border-radius:20px; padding:16px; box-shadow:0 10px 26px rgba(28,26,23,0.05); }
.kost-coach { display:flex; gap:12px; }
.kost-coach-avatar { width:40px; height:40px; border-radius:50%; background:var(--kost-orange); color:#fff; display:grid; place-items:center; font-weight:700; font-size:0.78rem; flex:0 0 auto; }
.kost-coach small { color:var(--kost-muted); font-weight:600; font-size:0.78rem; }
.kost-coach p { margin:4px 0 0; color:var(--kost-orange-d); font-size:0.95rem; line-height:1.45; }

.kost-water-head { display:flex; align-items:center; justify-content:space-between; }
.kost-water-head strong { font-family:"Archivo",sans-serif; font-size:1.1rem; }
.kost-water-head small { display:block; color:var(--kost-muted); font-size:0.82rem; margin-top:2px; }
.kost-water-steppers { display:flex; gap:8px; }
.kost-step { width:42px; height:42px; border-radius:13px; border:1px solid var(--kost-line); background:#fff; color:var(--kost-ink); font-size:1.25rem; cursor:pointer; line-height:1; }
.kost-step-dark { background:var(--kost-ink); color:#fff; border-color:var(--kost-ink); }
.kost-water-glasses { display:flex; gap:7px; margin-top:14px; }
.kost-water-glasses button { flex:1; height:36px; border-radius:9px; border:none; background:#ded7c9; cursor:pointer; padding:0; }
.kost-water-glasses button.filled { background:#5d7184; }

/* Today meals */
.kost-section-head { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding:0 4px; }
.kost-section-head span { font-family:"Archivo",sans-serif; font-weight:700; font-size:0.76rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--kost-muted); }
.kost-section-head a { color:var(--kost-orange); font-weight:600; font-size:0.85rem; text-decoration:none; }
.kost-meals { display:flex; flex-direction:column; gap:10px; }
.kost-meal { background:var(--kost-card); border-radius:17px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 10px 26px rgba(28,26,23,0.05); }
.kost-meal-info { min-width:0; }
.kost-meal-type { display:block; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--kost-orange); font-weight:700; }
.kost-meal-info strong { display:block; font-size:0.96rem; margin:2px 0; }
.kost-meal-info small { color:var(--kost-muted); font-size:0.78rem; }
.kost-meal-log { flex:0 0 auto; border:none; border-radius:12px; padding:10px 16px; background:var(--kost-orange); color:#fff; font-weight:700; font-size:0.82rem; cursor:pointer; }
.kost-meal-log.is-logged { background:#e7eadf; color:var(--kost-green); }
.kost-meal.is-logged { opacity:0.78; }
.kost-muted { color:var(--kost-muted); }

/* Bottom tab bar */
.kost-tabbar { position:sticky; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border-top:1px solid var(--kost-line); padding:9px 2px calc(9px + env(safe-area-inset-bottom,0px)); }
.kost-tab { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none; color:var(--kost-muted); font-size:0.7rem; font-weight:600; padding:3px 0; }
.kost-tab svg { width:22px; height:22px; }
.kost-tab.active { color:var(--kost-orange); }

/* Restyle reused portal components inside the brand */
.kost-app .portal-card { background:var(--kost-card); border:1px solid var(--kost-line); border-radius:18px; color:var(--kost-ink); box-shadow:0 10px 26px rgba(28,26,23,0.04); }
.kost-app :is(h1,h2,h3,h4,strong,b){ color:var(--kost-ink); }
.kost-app :is(p,li){ color:var(--kost-ink); }
.kost-app .portal-card-heading strong, .kost-app h2 { font-family:"Archivo",sans-serif; }
.kost-app small, .kost-app .text-muted { color:var(--kost-muted); opacity:1; }
.kost-app :is(input,select,textarea){ background:#fff; border:1px solid var(--kost-line); color:var(--kost-ink); border-radius:11px; }
.kost-app ::placeholder { color:#a89e90; }
.kost-app .button-primary { background:var(--kost-orange); border:1px solid var(--kost-orange); color:#fff; }
.kost-app :is(.button-secondary,.button-ghost){ background:#fff; border:1px solid var(--kost-line); color:var(--kost-ink); }
.kost-app .recipe-catalog-hero { background:var(--kost-ink); border-color:var(--kost-ink); }
.kost-app .recipe-catalog-hero :is(h2,p,strong,span){ color:#fff; }
.kost-app .recipe-catalog-hero .portal-kicker { color:var(--kost-orange); }
.kost-app :is(.own-recipe-card,.recipe-card,.resource-card,.recipe-search-card,.recipe-filter-strip){ background:#fff; border:1px solid var(--kost-line); }
.kost-app :is(.shopping-view-tab.active,.recipe-fav-count,.portal-kicker,.eyebrow){ color:var(--kost-orange); }
.kost-app .portal-link-list :is(a,button){ background:#fff; border:1px solid var(--kost-line); color:var(--kost-ink); }
.kost-app .own-recipe-badge.is-private { background:#efe9dd; color:#7a705f; }
.kost-app .kost-ring-center strong { color:#fff; }
.kost-app .kost-ring-center small { color:rgba(255,255,255,0.6); }
.kost-app .kost-hero-rem { color:#86b072; }
.kost-app .kost-macro strong { color:#fff; }
.kost-app .kost-macro-p strong { color:var(--kost-orange); }
.kost-app .kost-macro-k strong { color:#86b072; }
.kost-app .kost-macro-f strong { color:#d6a857; }
.kost-app .kost-macro small { color:rgba(28,26,23,0.55); }

/* Opskrifter — clean brand list (search + favorites + all), matches mockup */
.kost-recipes { display:flex; flex-direction:column; gap:12px; }
.kost-search { position:relative; }
.kost-search-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:0.85rem; opacity:0.5; }
.kost-search input { width:100%; padding:13px 14px 13px 38px; border-radius:14px; border:1px solid var(--kost-line); background:#fff; color:var(--kost-ink); font-size:0.92rem; }
.kost-filter-row { display:flex; gap:7px; overflow-x:auto; padding-bottom:2px; }
.kost-filter-chip { flex:0 0 auto; border:1px solid var(--kost-line); background:#fff; color:var(--kost-muted); border-radius:999px; padding:6px 14px; font-size:0.8rem; font-weight:600; cursor:pointer; }
.kost-filter-chip.active { background:var(--kost-ink); color:#fff; border-color:var(--kost-ink); }
.kost-reclist-head { display:flex; align-items:baseline; justify-content:space-between; margin-top:6px; padding:0 4px; }
.kost-reclist-head span { font-family:"Archivo",sans-serif; font-weight:700; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--kost-muted); }
.kost-reclist-head.fav span { color:var(--kost-orange); }
.kost-reclist-head small { color:var(--kost-muted); font-size:0.74rem; }
.kost-reclist { display:flex; flex-direction:column; gap:9px; }
.kost-recipe-row { position:relative; background:#fff; border:1px solid var(--kost-line); border-radius:16px; box-shadow:0 8px 22px rgba(28,26,23,0.04); display:flex; align-items:center; gap:12px; padding:12px 14px; }
.kost-recipe-row.is-open { flex-wrap:wrap; }
.kost-recipe-tap { flex:1; min-width:0; display:flex; align-items:center; gap:12px; background:transparent; border:0; padding:0; text-align:left; cursor:pointer; color:var(--kost-ink); }
.kost-recipe-av { width:46px; height:46px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; font-family:"Archivo",sans-serif; font-weight:800; font-size:1.1rem; }
.kost-recipe-main { min-width:0; }
.kost-recipe-main strong { display:block; font-size:0.95rem; }
.kost-recipe-main small { color:var(--kost-muted); font-size:0.76rem; }
.kost-heart { flex:0 0 auto; border:0; background:transparent; cursor:pointer; font-size:1.3rem; line-height:1; color:#c9c0b2; padding:4px; }
.kost-heart.on { color:var(--kost-orange); }
.kost-recipe-sheet { flex-basis:100%; border-top:1px solid var(--kost-line); margin-top:10px; padding-top:10px; }
.kost-sheet-h { display:block; font-family:"Archivo",sans-serif; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--kost-muted); margin:8px 0 4px; }
.kost-sheet-ings { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.kost-sheet-ings li { display:flex; justify-content:space-between; font-size:0.82rem; }
.kost-sheet-ings small { color:var(--kost-muted); }
.kost-sheet-instr { font-size:0.86rem; line-height:1.45; margin:0; color:var(--kost-ink); }
.kost-own-toggle { margin-top:8px; align-self:flex-start; background:#fff; border:1px solid var(--kost-line); border-radius:12px; padding:10px 14px; font-weight:600; color:var(--kost-ink); cursor:pointer; }

/* Madplan — day/week toggle + week view */
.kost-view-toggle { display:inline-flex; gap:4px; background:#fff; border:1px solid var(--kost-line, #E4DDCF); border-radius:999px; padding:4px; margin:0 0 12px; align-self:flex-start; }
.kost-view-toggle button { border:0; background:transparent; border-radius:999px; padding:7px 18px; font-weight:600; font-size:0.88rem; color:var(--kost-muted, #8a8478); cursor:pointer; }
.kost-view-toggle button.active { background:var(--kost-ink, #1C1A17); color:#fff; }
.kost-week-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.kost-week-day { display:flex; flex-direction:column; gap:8px; }
.kost-week-day.is-today { border:2px solid var(--kost-accent, #C75D34); }
.kost-week-day-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; border-bottom:1px solid var(--kost-line, #E4DDCF); padding-bottom:7px; }
.kost-week-day-head small { color:var(--kost-muted, #8a8478); white-space:nowrap; }
.kost-week-meal { display:flex; align-items:center; gap:8px; font-size:0.86rem; }
.kost-week-meal span { flex:1; display:flex; flex-direction:column; min-width:0; }
.kost-week-meal span b { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--kost-muted, #8a8478); }
.kost-week-meal small { color:var(--kost-muted, #8a8478); white-space:nowrap; }

/* Måltidsfoto på loggede måltider */
.meal-thumb-photo { object-fit:cover; width:100%; height:74px; max-height:74px; }
.meal-photo-attach { display:inline-flex; margin:0; }
.meal-photo-attach label { cursor:pointer; padding:6px 10px; }

/* Måltider — brand meal cards */
.kost-meal-card { background:#fff; border:1px solid var(--kost-line); border-radius:17px; box-shadow:0 8px 22px rgba(28,26,23,0.04); padding:13px 14px; display:flex; flex-direction:column; gap:11px; }
.kost-meal-card.is-logged { opacity:0.8; }
.kost-meal-card-top { display:flex; align-items:flex-start; gap:12px; }
.kost-meal-card-info { flex:1; min-width:0; }
.kost-meal-card-info strong { display:block; font-size:0.96rem; }
.kost-meal-card-info small { color:var(--kost-muted); font-size:0.77rem; }
.kost-meal-card .maaltid-prep { display:block; margin-top:4px; font-size:0.72rem; color:var(--kost-orange-d); }
.kost-meal-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kost-portion { display:inline-flex; align-items:center; gap:6px; }
.kost-portion button { width:34px; height:34px; border-radius:10px; border:1px solid var(--kost-line); background:#fff; color:var(--kost-ink); font-size:1.1rem; cursor:pointer; line-height:1; }
.kost-portion span { min-width:34px; text-align:center; font-weight:700; font-size:0.84rem; }
.kost-meal-card-actions { display:flex; align-items:center; gap:8px; }
.kost-link-btn { background:transparent; border:0; color:var(--kost-orange); font-weight:600; font-size:0.84rem; cursor:pointer; padding:6px 4px; }
.kost-meal-peek { border-top:1px solid var(--kost-line); padding-top:10px; }

/* Indkøb — brand shopping list (restyle the reused portal shopping markup) */
.kost-app .portal-two-column { display:flex; flex-direction:column; gap:14px; }
.kost-app .portal-side-stack, .kost-app aside.portal-card:has(.portal-stat-list) { display:none; }
.kost-app .shopping-view-tabs { display:flex; gap:7px; }
.kost-app .shopping-view-tab { flex:1; border:1px solid var(--kost-line); background:#fff; color:var(--kost-muted); border-radius:999px; padding:8px 10px; font-size:0.82rem; font-weight:600; cursor:pointer; }
.kost-app .shopping-view-tab.active { background:var(--kost-ink); color:#fff; border-color:var(--kost-ink); }
.kost-app .portal-link-list { display:flex; flex-direction:column; gap:8px; }
.kost-app .portal-link-list :is(a,button) { display:flex; align-items:center; justify-content:space-between; gap:10px; border-radius:13px; padding:12px 14px; font-size:0.88rem; }
.kost-app .portal-link-list :is(a,button) strong { color:var(--kost-orange); font-weight:700; }
.kost-app .shopping-static-row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--kost-line); border-radius:13px; padding:12px 14px; font-size:0.88rem; }
.kost-app .shopping-static-row.is-home { opacity:0.6; }
.kost-app .shopping-group-label { display:block; font-family:"Archivo",sans-serif; font-weight:700; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--kost-muted); margin:10px 0 6px; }
.kost-app .shopping-own-row { display:flex; gap:8px; align-items:center; }
.kost-app .shopping-own-form { display:flex; gap:8px; margin-top:10px; }
.kost-app .shopping-own-form input { flex:1; }
.kost-app .shopping-view-hint { color:var(--kost-muted); font-size:0.82rem; }

.coach-macro-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0 10px; }
.coach-macro-grid label { display:flex; flex-direction:column; gap:3px; font-size:0.78rem; }
.coach-macro-target-form .coach-form-label { display:block; margin-bottom:4px; }

/* Makroberegner (macro calculator) — in the Madplan workbench left pane */
.mp-calc-toggle { width:100%; margin-top:12px; background:rgba(255,122,60,0.1); border:1px dashed rgba(255,122,60,0.5); color:var(--accent,#C75D34); border-radius:11px; padding:10px; font-weight:600; cursor:pointer; }
.mp-calc { margin-top:12px; border:1px solid var(--line,#e6e9ef); border-radius:14px; padding:13px; display:flex; flex-direction:column; gap:10px; background:rgba(0,0,0,0.015); }
.mp-calc-head { display:flex; align-items:center; justify-content:space-between; }
.mp-calc-head strong { font-size:0.92rem; }
.mp-calc-x { border:0; background:transparent; cursor:pointer; opacity:0.5; font-size:0.85rem; }
.mp-calc-x:hover { opacity:1; }
.mp-calc-result { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mp-calc-res { display:flex; align-items:center; gap:8px; }
.mp-calc-res-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.mp-calc-res strong { display:block; font-size:1.05rem; font-weight:800; line-height:1; }
.mp-calc-res small { font-size:0.66rem; opacity:0.7; }
.mp-calc-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.6; font-weight:700; margin-top:2px; }
.mp-calc-seg { display:flex; gap:5px; }
.mp-calc-seg button { flex:1; border:1px solid var(--line,#e6e9ef); background:#fff; color:inherit; border-radius:9px; padding:7px 4px; font-size:0.74rem; font-weight:600; cursor:pointer; }
.mp-calc-seg button.active { background:var(--accent,#C75D34); border-color:var(--accent,#C75D34); color:#fff; }
.mp-calc-field { display:flex; flex-direction:column; gap:3px; font-size:0.74rem; }
.mp-calc-field select { padding:7px 8px; border-radius:8px; }
.mp-calc-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.mp-calc-row3 label { display:flex; flex-direction:column; gap:3px; font-size:0.7rem; }
.mp-calc-row3 input { padding:6px 7px; border-radius:8px; width:100%; }
.mp-calc-slider { display:flex; flex-direction:column; gap:4px; font-size:0.76rem; font-weight:600; }
.mp-calc-slider span { font-weight:500; opacity:0.7; font-size:0.72rem; }
.mp-calc-slider input[type=range] { width:100%; accent-color:var(--accent,#C75D34); }
.mp-calc-save { margin-top:4px; }

/* =================================================================
   COACH / ADMIN SAND BRAND — re-skin of the dark portal to the
   BeastFactory sand design (beastfactory-all-pages.html). Scoped to
   .bf-sand on the app-shell for /coach and /admin routes.
   ================================================================= */
.bf-sand {
  --bf-sand:var(--bf-sand, #EAE6DC); --bf-surface:#FFFFFF; --bf-surface2:#FBFAF6; --bf-surface3:#F2EEE5;
  --bf-dark:#1C1A17; --bf-ink:#1C1A17; --bf-muted:#6F6857; --bf-muted2:#55503F; --bf-line:var(--bf-line, #E5DFD2);
  /* v556: was `--bf-accent: var(--bf-accent, #C75D34)` — a custom property that
     references ITSELF is invalid at computed-value time, so --bf-accent computed
     to EMPTY and every `background: var(--bf-accent)` without a fallback (e.g.
     `.bf-sand .main-content .button-primary`) resolved to transparent. That is
     why primary buttons rendered with no fill ("Better colors for visibility").
     A plain value here still lets the brand injector override it — it writes the
     same `.bf-sand` selector later in the cascade (see applyBrandTokens). */
  --bf-accent:#C75D34; --bf-accent-d:#b34e28; --bf-green:#5E7B5A; --bf-green-bg:#EBF2EB;
  --bf-gold:#8A6A1E; --bf-gold-bg:#FBF3D9; --bf-danger:#B83A2E; --bf-danger-bg:#FDE8E6;
  /* Redefine the actual theme variables so every var()-based component flips to
     the sand palette at once (robust catch-all; hardcoded-dark exceptions are
     handled with targeted rules below). The sidebar is forced dark separately. */
  --bg:var(--bf-sand, #EAE6DC); --surface:#FFFFFF; --surface-strong:#FFFFFF; --surface2:#FBFAF6;
  --ink:#1C1A17; --muted:#6F6857; --line:var(--bf-line, #E5DFD2);
  --accent:var(--bf-accent, #C75D34); --accent-dark:#b34e28; --success:#5E7B5A; --danger:#B83A2E; --gold:#8A6A1E;
  --shadow:0 12px 34px rgba(28,26,23,0.08);
  background: var(--bf-sand);
}
/* cap oversized page headings + hardcoded-dark component exceptions */
.bf-sand .main-content h1 { font-size: clamp(1.45rem, 2.6vw, 1.75rem); line-height: 1.12; }
.bf-sand .main-content h2 { font-size: 1.2rem; }
.bf-sand .main-content .lead-card { background: #fff; color: var(--bf-ink); border-color: var(--bf-line); border-left-width: 4px; box-shadow: 0 8px 22px rgba(28,26,23,0.04); }
.bf-sand .main-content .lead-card :is(strong,p,span,div,small) { color: var(--bf-ink); }
.bf-sand .main-content .lead-card .lead-contact a, .bf-sand .main-content .lead-card .lead-badge { color: var(--bf-accent); }
.bf-sand .main-content :is(.workout-card) { background: var(--bf-surface2); }
.bf-sand .main-content .empty-state, .bf-sand .main-content .lead-card-head small { color: var(--bf-muted2); }
/* topbar to the light brand */
.bf-sand .coach-topbar { background: var(--bf-surface); border-bottom: 1px solid var(--bf-line); }
.bf-sand .coach-topbar :is(.topnav a, .coach-user-card strong, .coach-user-card small) { color: var(--bf-ink); }
.bf-sand .coach-topbar .topnav a.active { color: var(--bf-accent); }
.bf-sand .coach-topbar input { background: var(--bf-surface2); border: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content {
  background: var(--bf-sand);
  color: var(--bf-ink);
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif;
}
/* light sand sidebar per BeastFactory App.dc.html */
.bf-sand .coach-sidebar, .bf-sand .sidebar { background: var(--bf-sand); }

/* text + headings */
.bf-sand .main-content :is(h1,h2,h3,h4) { font-family: "Archivo", sans-serif; color: var(--bf-ink); letter-spacing: -0.01em; }
.bf-sand .main-content :is(strong,b) { color: var(--bf-ink); }
.bf-sand .main-content :is(p,li,td,th,span,div) { color: var(--bf-ink); }
.bf-sand .main-content :is(small,.text-muted,.coach-command-header p) { color: var(--bf-muted2); }
.bf-sand .main-content a { color: var(--bf-ink); }
.bf-sand .main-content .portal-card-heading a,
.bf-sand .main-content .portal-card-footer,
.bf-sand .main-content .text-link { color: var(--bf-accent); }

/* cards / surfaces */
.bf-sand .main-content :is(.portal-card,.coach-section-box,.panel,.summary-card,.stat-card,.coach-stat-card,.resource-card,.client-card,.coach-program-card,.coach-client-info-panel) {
  background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: 16px; color: var(--bf-ink); box-shadow: 0 8px 22px rgba(28,26,23,0.04);
}
.bf-sand .main-content .portal-card-heading { border-bottom: 1px solid var(--bf-line); }
.bf-sand .main-content .portal-card-heading strong { font-family: "Archivo", sans-serif; }

/* stat grid */
.bf-sand .main-content .coach-stat-grid > *, .bf-sand .main-content .coach-stat-card {
  background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: 14px;
}
.bf-sand .main-content .coach-stat-card strong, .bf-sand .main-content .stat-value { font-family: "Archivo", sans-serif; color: var(--bf-ink); }

/* command header */
.bf-sand .main-content .coach-command-header h1, .bf-sand .main-content .page-header h1 { color: var(--bf-ink); font-family: "Archivo", sans-serif; }

/* list rows / tasks */
.bf-sand .main-content :is(.coach-list-row,.coach-task-row,.list-row) { border-bottom: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .coach-list-row:hover { background: var(--bf-surface2); }
.bf-sand .main-content .coach-list-row small, .bf-sand .main-content .coach-task-row small { color: var(--bf-muted); }

/* buttons */
.bf-sand .main-content .button-primary, .bf-sand .main-content .btn-primary { background: var(--bf-accent); border: 1.5px solid var(--bf-accent); color: #fff; }
.bf-sand .main-content .button-primary:hover { background: var(--bf-accent-d); }
.bf-sand .main-content :is(.button-secondary,.button-ghost,.btn-secondary) { background: #fff; border: 1.5px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content :is(.button-secondary:hover,.btn-secondary:hover) { background: var(--bf-surface2); border-color: #C9C3B5; }

/* inputs */
.bf-sand .main-content :is(input,select,textarea) { background: var(--bf-surface2); border: 1.5px solid var(--bf-line); color: var(--bf-ink); border-radius: 11px; }
.bf-sand .main-content ::placeholder { color: #B3AC9C; }

/* tables */
.bf-sand .main-content table th, .bf-sand .main-content .data-table th { background: var(--bf-surface2); color: var(--bf-muted); border-bottom: 1px solid var(--bf-line); font-family: "Archivo", sans-serif; }
.bf-sand .main-content table td, .bf-sand .main-content .data-table td { border-bottom: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content tr:hover td { background: var(--bf-surface2); }

/* tabs */
.bf-sand .main-content :is(.coach-tabs,.tabs) { border-bottom: 1.5px solid var(--bf-line); }
.bf-sand .main-content :is(.coach-tabs button,.tab) { color: var(--bf-muted); }
.bf-sand .main-content :is(.coach-tabs button.active,.tab.active) { color: var(--bf-accent); border-bottom-color: var(--bf-accent); }

/* badges / pills */
.bf-sand .main-content .badge-green, .bf-sand .main-content .status-active { background: var(--bf-green-bg); color: var(--bf-green); }
.bf-sand .main-content .avatar, .bf-sand .main-content .avatar-ring { background: rgba(199,93,52,0.12); border: 1.5px solid rgba(199,93,52,0.3); color: var(--bf-accent); }

/* icon rings + donut legend */
.bf-sand .main-content .coach-icon-ring { background: var(--bf-surface3); color: var(--bf-accent); }
.bf-sand .main-content .coach-legend span { color: var(--bf-ink); }

/* the coach header avatar block + top stat tiles */
.bf-sand .main-content .coach-tiny-metric { background: var(--bf-surface); border: 1px solid var(--bf-line); }
.bf-sand .main-content .coach-tiny-metric strong { color: var(--bf-ink); font-family: "Archivo", sans-serif; }

/* stat tiles in client detail header */
.bf-sand .main-content .coach-profile-stats > * { background: var(--bf-surface); border: 1px solid var(--bf-line); }
.bf-sand .main-content .coach-stat-tile { background: var(--bf-surface); border: 1px solid var(--bf-line); }

.bf-sand .main-content .coach-donut > div { background: #fff; box-shadow: inset 0 0 0 1px var(--bf-line); }
.bf-sand .main-content .coach-donut strong { color: var(--bf-ink); }
.bf-sand .main-content .coach-donut small { color: var(--bf-muted); }

/* Sand-brand side menu (coach/admin) — light sand per BeastFactory App.dc.html */
.bf-sand .sidebar { background: var(--bf-sand); border-right: 1px solid #EFEAE0; padding: 18px 14px; }
.bf-sand .sidebar .brand-lockup { margin-bottom: 20px; padding: 4px 8px; }
/* No box behind the wolf in light theme — the orange mark sits directly on the sand. */
.bf-sand .sidebar .brand-mark { background: transparent; border: 0; box-shadow: none; }
/* White-labeled gym: give the logo a dark tile so a light/white logo stays visible
   on light backgrounds (uses the gym's own dark brand colour). Covers every logo
   placement: sidebar lockup + the client dashboard header mark. */
:root[data-bf-brand="custom"] .sidebar .brand-mark,
:root[data-bf-brand="custom"] .bf-sand .sidebar .brand-mark,
:root[data-bf-brand="custom"] .phone-logo-mark {
  background: var(--bf-dark, #1C1A17);
  border-radius: 10px;
  padding: 5px;
  box-sizing: border-box;
}
:root[data-bf-brand="custom"] .sidebar .brand-mark img,
:root[data-bf-brand="custom"] .phone-logo-mark img { object-fit: contain; }
.bf-sand .sidebar .bf-wm-1 { color: var(--bf-ink); }
.bf-sand .sidebar .bf-wm-2 { color: var(--bf-accent); }
.bf-sand .sidebar .bf-wm-3 { color: var(--bf-muted); }

.bf-sand .sidebar .sidebar-section-label {
  color: var(--bf-muted); font-family: "Archivo", sans-serif; font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 8px 8px;
}
.bf-sand .sidebar .sidebar-link {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px;
  color: var(--bf-muted, #7C7568); font-size: 0.84rem; font-weight: 600; transition: all 0.13s;
}
.bf-sand .sidebar .sidebar-link::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent;
}
.bf-sand .sidebar .sidebar-link:hover { background: var(--bf-surface3, #F6F2EA); color: var(--bf-ink); }
.bf-sand .sidebar .sidebar-link.active { background: rgba(199,93,52,0.14); color: var(--bf-ink); font-weight: 700; }
.bf-sand .sidebar .sidebar-link.active::before { background: var(--bf-accent); }
.bf-sand .sidebar .sidebar-link.active .sidebar-icon svg { stroke: var(--bf-accent); color: var(--bf-accent); }
.bf-sand .sidebar .sidebar-icon { width: 20px; display: grid; place-items: center; }
.bf-sand .sidebar .sidebar-icon svg { width: 17px; height: 17px; }
.bf-sand .sidebar .sidebar-link-external { color: var(--bf-muted); }
.bf-sand .sidebar .nav-badge { background: var(--bf-accent); color: #fff; }

/* user identity card at the bottom (replaces beast-mode card) */
.bf-sand .sidebar .sidebar-user-card {
  margin-top: auto; background: #fff; border: 1px solid var(--bf-line);
  border-radius: 12px; padding: 12px 10px; display: flex; gap: 10px; align-items: center;
}
.bf-sand .sidebar .sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bf-accent); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.72rem;
}
.bf-sand .sidebar .sidebar-user-meta { flex: 1; min-width: 0; }
.bf-sand .sidebar .sidebar-user-meta strong { display: block; font-size: 0.78rem; font-weight: 700; color: var(--bf-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-sand .sidebar .sidebar-user-meta small { font-size: 0.69rem; color: var(--bf-muted); }

/* beast-mode card (admin/legacy/client sidebars) — keep legible on light sand */
.bf-sand .sidebar .beast-mode-card {
  margin-top: auto; background: rgba(199,93,52,0.08); border: 1px solid rgba(199,93,52,0.24);
  border-radius: 12px; padding: 13px; display: flex; gap: 11px; align-items: center;
}
.bf-sand .sidebar .beast-mode-card strong { color: var(--bf-accent); font-family: "Archivo", sans-serif; font-size: 0.78rem; }
.bf-sand .sidebar .beast-mode-card small { color: var(--bf-muted2); }

/* role switcher / view-as pills in the sidebar */
.bf-sand .sidebar .owner-role-switcher, .bf-sand .sidebar .profile-switch-button { color: var(--bf-muted2); }
.bf-sand .sidebar .bf-role-switcher { border-color: var(--bf-line); background: #fff; }
.bf-sand .sidebar .bf-role-switcher-label { color: var(--bf-muted); opacity: 1; }
.bf-sand .sidebar .bf-role-chip { border-color: var(--bf-line); color: var(--bf-muted2); }
.bf-sand .sidebar .bf-role-chip.is-on { background: rgba(199,93,52,0.14); border-color: var(--bf-accent); color: var(--bf-ink); }
.bf-sand .sidebar .bf-role-chip:hover { border-color: var(--bf-accent); }

/* bf-sand: classes that the dark-theme block re-defines to hardcoded dark */
.bf-sand .main-content .mini-row { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .mini-row strong { color: var(--bf-ink); }
.bf-sand .main-content .mini-row :is(small,span) { color: var(--bf-muted); }
.bf-sand .main-content .mini-row.is-complete { background: var(--bf-green-bg); }
.bf-sand .main-content .workout-thumb { background: rgba(199,93,52,0.12); color: var(--bf-accent); }
.bf-sand .main-content .button-ghost { color: var(--bf-muted2); }
.bf-sand .main-content .button-ghost:hover { color: var(--bf-ink); }
.bf-sand .main-content :is(.summary-card,.resource-card,.client-card) { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .coach-leads-page .lead-card { background: #fff; }
.bf-sand .main-content :is(.community-post,.community-feed > *,.challenge-card) { background: var(--bf-surface); border: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .community-post :is(strong,p) { color: var(--bf-ink); }
.bf-sand .main-content .eyebrow, .bf-sand .main-content .community-post .eyebrow { color: var(--bf-accent); }
/* non-primary buttons sit on light surfaces in sand → ink text (not the dark-theme light text) */
.bf-sand .main-content button:not(.button-primary):not(.btn-primary):not(.lead-delete-btn):not(.kost-meal-log):not(.bf-btn-primary) { color: var(--bf-ink); }
.bf-sand .main-content .button-primary, .bf-sand .main-content .btn-primary { color: #fff; }
/* messages page bubbles + thread on sand */
.bf-sand .main-content :is(.coach-message-thread,.message-thread,.msg-thread,.conversation-list,.thread-list) { background: var(--bf-surface); }
.bf-sand .main-content .msg-bubble.theirs, .bf-sand .main-content .message-bubble.theirs { background: var(--bf-surface2); border: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .msg-bubble.mine, .bf-sand .main-content .message-bubble.mine { background: var(--bf-accent); color: #fff; }
/* Messages page (split layout) on sand */
.bf-sand .main-content :is(.coach-chat-list-panel,.coach-thread-panel,.coach-message-stats,.coach-message-card) { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .coach-thread-list-item { border-bottom: 1px solid var(--bf-line); }
.bf-sand .main-content .coach-thread-list-item:hover { background: var(--bf-surface2); }
.bf-sand .main-content .coach-thread-list-item.active { background: rgba(199,93,52,0.08); }
.bf-sand .main-content .coach-thread-list-item :is(strong,span,small) { color: var(--bf-ink); }
.bf-sand .main-content .coach-thread-header { background: var(--bf-surface); border-color: var(--bf-line); }
.bf-sand .main-content .coach-thread-messages { background: var(--bf-surface2); }
.bf-sand .main-content .coach-chat-bubble { background: var(--bf-surface); border: 1px solid var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .coach-chat-bubble.mine { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; }
.bf-sand .main-content .coach-chat-bubble.mine p, .bf-sand .main-content .coach-chat-bubble.mine strong { color: #fff; }
.bf-sand .main-content .coach-chat-search input, .bf-sand .main-content .coach-message-composer :is(input,textarea) { background: var(--bf-surface2); border: 1px solid var(--bf-line); color: var(--bf-ink); }

/* Chat as a dialogue — two distinct fills, in BOTH themes (bug-5db7dbe7...).
   The base rules above paint every bubble rgba(255,255,255,0.055), which is
   invisible against the card in either palette, so the only thing separating
   "you" from "coach" was the accent gradient — and on a phone both sides were
   full width anyway. --bf-surface3 sits one step off the card in light AND
   dark, so the coach bubble is always a visible object.
   The `mine` fill layers a black wash over the brand accent instead of
   hardcoding a colour: white-label tenants keep their accent, and the wash
   guarantees white text clears 4.5:1 (bare --bf-accent in dark, #D8703F, is
   only 3.3:1). #fff is !important because the sand ink catch-all otherwise
   paints dark text on the dark pill — the recurring trap in this file. */
.bf-sand .thread-message:not(.mine) p,
.bf-sand .coach-chat-bubble:not(.mine) p {
  background: var(--bf-surface3);
  border: 1px solid var(--bf-line);
  color: var(--bf-ink);
}

.bf-sand .thread-message.mine p,
.bf-sand .coach-chat-bubble.mine p {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24)), var(--bf-accent-d, #b34e28);
  border-color: transparent;
  color: #fff !important;
}

/* In dark, --bf-surface3 sits only 1.14:1 off the card — the incoming bubble
   barely reads as an object. A white wash lifts it without hardcoding a colour
   (measured 1.41:1 + a visible border). */
.bf-sand.bf-dark .thread-message:not(.mine) p,
.bf-sand.bf-dark .coach-chat-bubble:not(.mine) p {
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), var(--bf-surface3);
  border-color: var(--bf-muted, #A79D8F);
  border-color: color-mix(in srgb, var(--bf-line) 70%, var(--bf-muted));
}

.bf-sand .thread-message p small,
.bf-sand .coach-chat-bubble p small { color: var(--bf-muted); }

/* Full white, not a faded white: measured, rgba(255,255,255,0.82) over the
   accent lands at 3.65:1 and a 12px timestamp needs 4.5:1. */
.bf-sand .thread-message.mine p small,
.bf-sand .coach-chat-bubble.mine p :is(small, strong) { color: #fff !important; }

/* Day separator: a quiet centred label, not a heading. Needs .main-content in
   the selector to outrank the sand ink catch-all, which otherwise paints it
   full --bf-ink. */
.bf-sand .main-content .thread-day-label {
  color: var(--bf-muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 0 2px;
}

/* Payments page (coach) — matches beastfactory-all-pages.html */
.coach-stat-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .coach-stat-grid.four { grid-template-columns: repeat(2, 1fr); } }
.coach-command-grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .coach-command-grid.two { grid-template-columns: 1fr; } }
.pay-package-list { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.pay-package { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; flex-wrap: wrap; }
.pay-package-info strong { display: block; }
.pay-package-info small { color: var(--muted); }
.pay-package-price { text-align: right; }
.pay-package-price strong { font-family: "Archivo", sans-serif; color: var(--accent); font-size: 1.05rem; }
.pay-package-price small { color: var(--muted); display: block; font-size: 0.7rem; }
.pay-package-actions { display: flex; gap: 8px; }
.pay-add-package { width: 100%; justify-content: center; }
.pay-empty { text-align: center; padding: 36px 20px; }
.pay-empty-ico { font-size: 2rem; margin-bottom: 8px; }
.pay-empty strong { display: block; }
.pay-empty small { color: var(--muted); display: block; margin-top: 3px; }

/* Settings page (coach) — tabs, two-col, portal toggles */
.bf-sand .main-content .settings-grid-2, .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.bf-sand .main-content .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bf-toggle-list { display: flex; flex-direction: column; gap: 10px; }
.bf-toggle { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
.bf-toggle strong { display: block; font-size: 0.88rem; }
.bf-toggle small { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.bf-toggle-track { width: 38px; height: 22px; border-radius: 99px; background: var(--line); position: relative; flex-shrink: 0; transition: background 0.18s; }
.bf-toggle-track.on { background: var(--accent); }
.bf-toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left 0.18s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.bf-toggle-track.on .bf-toggle-thumb { left: 19px; }

/* Check-Ins page (coach) — forms table + templates */
.forms-table .coach-table-head, .forms-table .coach-table-row { grid-template-columns: 2fr 1.4fr 1fr 1fr 0.9fr; }
.forms-template-list { display: flex; flex-direction: column; padding: 4px 20px 14px; }
.badge-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; font-family: "Archivo", sans-serif; }
.bf-sand .main-content .badge-pill.badge-green { background: var(--bf-green-bg); color: var(--bf-green); }
.bf-sand .main-content .badge-pill.badge-orange { background: rgba(199,93,52,0.12); color: var(--bf-accent); }
.bf-sand .main-content .badge-pill.badge-red { background: var(--bf-danger-bg); color: var(--bf-danger); }
/* Messages — schedule/broadcast panel on sand */
.bf-sand .main-content :is(.coach-schedule-panel,.coach-schedule-card,.coach-scheduled-list,.coach-broadcast-card,.coach-sent-broadcasts,.coach-scheduled-item,.coach-broadcast-item) { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand .main-content .coach-schedule-card .panel-heading { border-bottom-color: var(--bf-line); }
.bf-sand .main-content .coach-schedule-card :is(h2,strong,p) { color: var(--bf-ink); }
.bf-sand .main-content .coach-messenger-heading :is(h1,p), .bf-sand .main-content .coach-message-stats strong { color: var(--bf-ink); }
.bf-sand .main-content .coach-messenger-heading .eyebrow { color: var(--bf-accent); }

/* Client phone app — sand brand (reuses bf-sand vars; phone-specific surfaces here) */
.client-sand .client-topbar { background: var(--bf-surface); border-bottom: 1px solid var(--bf-line); }
.client-sand .client-topbar :is(.topnav a, .client-user-card strong, .client-user-card small) { color: var(--bf-ink); }
.client-sand .client-topbar .topnav a.active { color: var(--bf-accent); }
.client-sand .client-topbar input { background: var(--bf-surface2); border: 1px solid var(--bf-line); color: var(--bf-ink); }

.client-sand .main-content .phone-app-header h1 { color: var(--bf-ink); }
.client-sand .main-content .phone-date { color: var(--bf-muted); }
.client-sand .main-content :is(.phone-card,.phone-mini-tile,.phone-step-card,.phone-list-card,.phone-section-card,.phone-panel,.phone-quick-dock,.phone-quick-panel,.phone-meal-row,.phone-habit-card,.phone-metric-card,.phone-input-panel) {
  background: var(--bf-surface); border: 1px solid var(--bf-line); color: var(--bf-ink); box-shadow: 0 10px 26px rgba(28,26,23,0.05);
}
.client-sand .main-content :is(.phone-card,.phone-step-card,.phone-mini-tile) :is(strong,h2,h3,p,b) { color: var(--bf-ink); }
.client-sand .main-content :is(.phone-card,.phone-step-card) small, .client-sand .main-content .phone-muted { color: var(--bf-muted); }
.client-sand .main-content .phone-inline-link, .client-sand .main-content .phone-card a { color: var(--bf-accent); }
/* keep the hero card as the one dark accent (matches the Kost Overblik hero) —
   force its text light at a specificity that beats the .client-sand .main-content
   ink cascade (the base .phone-hero-card rules lose to it → unreadable ink). */
.client-sand .main-content .phone-hero-card,
.client-sand .main-content .phone-hero-card :is(h2,h3,p,small,strong,b,a) { color: #fff; }
.client-sand .main-content .phone-hero-card span { color: rgba(255, 255, 255, 0.9); }
.client-sand .main-content .phone-section-label, .client-sand .main-content .section-label { color: var(--bf-muted); }
.client-sand .main-content :is(.phone-dock,.phone-dock-grid) button { background: var(--bf-surface); border: 1px solid var(--bf-line); color: var(--bf-ink); }
.client-sand .main-content .button-primary { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; }
.client-sand .main-content :is(.button-secondary,.phone-secondary-btn) { background: #fff; border: 1px solid var(--bf-line); color: var(--bf-ink); }
.client-sand .main-content .progress-bar { background: var(--bf-line); }
.client-sand .main-content .progress-bar span { background: var(--bf-accent); }

/* Client sand — Progress page form holdouts + chart tooltip + habit undo */
.client-sand .main-content :is(.progress-log-card,.progress-log-fields,.progress-file-input) label { color: var(--bf-ink); }
.client-sand .main-content .progress-file-input > span { color: var(--bf-ink); }
.client-sand .main-content .portal-metric-type-grid label span { color: var(--bf-ink); }
.client-sand .main-content .portal-metric-type-grid input:checked + span { color: var(--bf-accent); font-weight: 700; }
.client-sand .main-content .chart-tooltip { background: var(--bf-ink); color: #fff; border-color: var(--bf-ink); }
.client-sand .main-content .chart-tooltip * { color: #fff; }
.client-sand .main-content .habit-check-undo { color: #fff !important; }
.client-sand .main-content .settings-avatar { color: #fff !important; }

/* ===== Coach Dashboard — BeastFactory App.dc.html ===== */
.bf-sand .bf-dash { max-width: 1180px; }
.bf-sand .bf-dash-head h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.75rem; letter-spacing: -0.02em; color: var(--bf-ink); margin: 0; }
.bf-sand .bf-dash-head p { font-size: 0.84rem; color: var(--bf-muted, #7C7568); margin: 4px 0 0; }

.bf-sand .bf-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.bf-sand .bf-kpi-card { display: block; background: #fff; border: 1px solid var(--bf-line); border-radius: 15px; padding: 16px 18px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bf-sand .bf-kpi-card:hover { border-color: var(--bf-line, #D9CFBE); box-shadow: 0 4px 14px rgba(28,26,23,0.05); }
.bf-sand .bf-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.bf-sand .bf-kpi-label { font-size: 0.72rem; color: var(--bf-muted, #7C7568); font-weight: 600; }
.bf-sand .bf-kpi-ic { font-size: 0.92rem; }
.bf-sand .bf-kpi-value { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.68rem; color: var(--bf-ink); margin-top: 8px; }
.bf-sand .bf-kpi-delta { font-size: 0.72rem; font-weight: 700; margin-top: 2px; }

.bf-sand .bf-dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.bf-sand .bf-dash-card { background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; padding: 20px; }
.bf-sand .bf-dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bf-sand .bf-dash-card-head strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem; color: var(--bf-ink); }
.bf-sand .bf-dash-card-head a { font-size: 0.78rem; color: var(--bf-accent); font-weight: 700; }

.bf-sand .bf-sched-list { display: flex; flex-direction: column; gap: 10px; }
.bf-sand .bf-sched-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bf-surface3, #F6F2EA); border: 1px solid var(--bf-line); border-radius: 13px; cursor: pointer; }
.bf-sand .bf-sched-row:hover { border-color: var(--bf-line, #D9CFBE); }
.bf-sand .bf-sched-time { text-align: center; flex: none; width: 54px; }
.bf-sand .bf-sched-time strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.94rem; color: var(--bf-ink); display: block; }
.bf-sand .bf-sched-time span { font-size: 0.66rem; color: var(--bf-muted); }
.bf-sand .bf-sched-div { width: 1px; height: 34px; background: var(--bf-line); flex: none; }
.bf-sand .bf-avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.74rem; flex: none; }
.bf-sand .bf-sched-main { flex: 1; min-width: 0; }
.bf-sand .bf-sched-main strong { font-size: 0.875rem; font-weight: 700; color: var(--bf-ink); display: block; }
.bf-sand .bf-sched-main span { font-size: 0.75rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-tag { font-size: 0.69rem; font-weight: 700; padding: 4px 10px; border-radius: 7px; white-space: nowrap; }
.bf-sand .bf-tag.is-ok { background: rgba(94,158,114,.16); color: var(--bf-green); }
.bf-sand .bf-tag.is-online { background: rgba(62,120,168,.18); color: #3E78A8; }

.bf-sand .bf-review-list { display: flex; flex-direction: column; gap: 11px; }
.bf-sand .bf-review-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.bf-sand .bf-review-main { flex: 1; min-width: 0; }
.bf-sand .bf-review-main strong { font-size: 0.84rem; font-weight: 700; color: var(--bf-ink); display: block; }
.bf-sand .bf-review-main span { font-size: 0.72rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-review-go { font-size: 0.72rem; font-weight: 700; color: var(--bf-accent); }

.bf-sand .bf-tasks { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bf-line); }
.bf-sand .bf-tasks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.bf-sand .bf-tasks-head span { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.72rem; color: var(--bf-muted, #7C7568); letter-spacing: 0.04em; }
.bf-sand .bf-tasks-head a { font-size: 0.7rem; color: var(--bf-accent); font-weight: 700; }
.bf-sand .bf-task-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.bf-sand .bf-task-box { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid #D4CFC2; }
.bf-sand .bf-task-row span:last-child { font-size: 0.8rem; color: var(--bf-muted2); }

.bf-sand .bf-dash-empty { color: var(--bf-muted, #7C7568); font-size: 0.84rem; padding: 18px 4px; }
.bf-sand .bf-dash-empty.small { padding: 8px 0; font-size: 0.8rem; }

@media (max-width: 980px) {
  .bf-sand .bf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .bf-sand .bf-dash-grid { grid-template-columns: 1fr; }
}

/* ===== Shared page chrome (BeastFactory App.dc.html) ===== */
.bf-sand .bf-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bf-sand .bf-page-head h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.6rem; letter-spacing: -0.02em; color: var(--bf-ink); margin: 0; }
.bf-sand .bf-page-head p { font-size: 0.81rem; color: var(--bf-muted, #7C7568); margin: 3px 0 0; }
.bf-sand .bf-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bf-sand .bf-btn-primary { background: var(--bf-accent); color: #fff; border: none; border-radius: 11px; padding: 11px 18px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.84rem; cursor: pointer; }
.bf-sand .bf-btn-primary:hover { background: var(--bf-accent-d); }
.bf-sand .bf-btn-ghost { background: #fff; color: var(--bf-ink); border: 1px solid var(--bf-line); border-radius: 11px; padding: 11px 16px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.84rem; cursor: pointer; }
.bf-sand .bf-btn-ghost:hover { border-color: var(--bf-line, #D9CFBE); }

.bf-sand .bf-pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bf-sand .bf-pill-tabs button { background: #fff; border: 1px solid var(--bf-line); color: var(--bf-muted, #7C7568); border-radius: 99px; padding: 8px 15px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.bf-sand .bf-pill-tabs button.active { background: rgba(199,93,52,0.14); border-color: transparent; color: var(--bf-ink); }

.bf-sand .bf-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bf-sand .bf-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bf-line); border-radius: 11px; padding: 9px 14px; flex: 1; min-width: 220px; max-width: 360px; }
.bf-sand .bf-search span { color: var(--bf-muted); }
.bf-sand .bf-search input { flex: 1; border: none; background: transparent; font-size: 0.84rem; color: var(--bf-ink); }
.bf-sand .bf-search input:focus { outline: none; }
.bf-sand .bf-toolbar .coach-filter-select { background: #fff; border: 1px solid var(--bf-line); border-radius: 11px; padding: 9px 14px; font-size: 0.82rem; color: var(--bf-ink); }

/* ===== Clients table ===== */
.bf-sand .bf-ctable { background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; overflow: hidden; }
.bf-sand .bf-ctable-head { display: grid; grid-template-columns: 2fr 1.1fr 1fr 1fr 0.8fr 84px; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--bf-line); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; color: var(--bf-muted); text-transform: uppercase; }
.bf-sand .bf-ctable-row { display: grid; grid-template-columns: 1fr 84px; align-items: center; border-bottom: 1px solid #EFEAE0; }
.bf-sand .bf-ctable-row:last-child { border-bottom: none; }
.bf-sand .bf-ctable-link { display: grid; grid-template-columns: 2fr 1.1fr 1fr 1fr 0.8fr; gap: 12px; padding: 14px 0 14px 20px; align-items: center; cursor: pointer; }
.bf-sand .bf-ctable-row:hover { background: #FBFAF6; }
.bf-sand .bf-ctable-cli { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bf-sand .bf-ctable-cli strong { font-size: 0.875rem; font-weight: 700; color: var(--bf-ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-sand .bf-ctable-cli small { font-size: 0.72rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-ctable-prog { font-size: 0.81rem; color: var(--bf-muted2); }
.bf-sand .bf-ctable-adh { display: flex; align-items: center; gap: 8px; }
.bf-sand .bf-adh-track { flex: 1; max-width: 80px; height: 6px; background: var(--bf-line); border-radius: 99px; overflow: hidden; }
.bf-sand .bf-adh-fill { display: block; height: 100%; border-radius: 99px; }
.bf-sand .bf-ctable-adh b { font-size: 0.75rem; font-weight: 700; }
.bf-sand .bf-ctable-last { font-size: 0.81rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-status { font-size: 0.69rem; font-weight: 700; padding: 3px 10px; border-radius: 7px; white-space: nowrap; }
.bf-sand .bf-status.is-active { background: rgba(94,158,114,.16); color: var(--bf-green); }
.bf-sand .bf-status.is-muted { background: rgba(199,145,62,.16); color: var(--bf-gold); }
.bf-sand .bf-row-useas { margin-right: 14px; background: #fff; border: 1px solid var(--bf-line); color: var(--bf-muted2); border-radius: 8px; padding: 6px 10px; font-size: 0.7rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bf-sand .bf-row-useas:hover { border-color: var(--bf-accent); color: var(--bf-accent); }
.bf-sand .bf-ctable-empty { padding: 28px 20px; text-align: center; color: var(--bf-muted, #7C7568); font-size: 0.84rem; }

@media (max-width: 900px) {
  .bf-sand .bf-ctable-head { display: none; }
  .bf-sand .bf-ctable-link { grid-template-columns: 1fr 1fr; gap: 8px; row-gap: 6px; }
}

/* ===== Client detail (BeastFactory App.dc.html) ===== */
.bf-sand .bf-cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bf-sand .bf-cd-id { display: flex; gap: 18px; min-width: 0; }
.bf-sand .bf-cd-avatar { width: 84px; height: 84px; flex: none; border-radius: 50%; border: 2px solid var(--bf-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.6rem; }
.bf-sand .bf-cd-crumb { display: block; font-size: 0.78rem; color: var(--bf-muted, #7C7568); font-weight: 600; margin-bottom: 4px; }
.bf-sand .bf-cd-name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bf-sand .bf-cd-name-row h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 2.05rem; letter-spacing: -0.02em; line-height: 1; color: var(--bf-ink); margin: 0; }
.bf-sand .bf-cd-badge { background: #93E532; color: #1C1A17; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.9rem; padding: 5px 13px; border-radius: 7px; transform: skewX(-4deg); }
.bf-sand .bf-cd-badge.is-muted { background: rgba(199,145,62,.18); color: var(--bf-gold); }
.bf-sand .bf-cd-id-meta p { font-size: 0.84rem; color: var(--bf-muted, #7C7568); margin: 9px 0 0; }
.bf-sand .bf-cd-id-meta p + p { margin-top: 2px; }
.bf-sand .bf-cd-stats { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.bf-sand .bf-cd-stat { background: #fff; border: 1px solid var(--bf-line); border-radius: 13px; padding: 13px 18px; min-width: 96px; }
.bf-sand .bf-cd-stat-l { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em; color: var(--bf-muted); }
.bf-sand .bf-cd-stat-v { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--bf-ink); margin-top: 5px; }
.bf-sand .bf-cd-stat-s { font-size: 0.66rem; color: var(--bf-muted); margin-top: 2px; }
.bf-sand .bf-cd-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bf-sand .bf-cd-actions .bf-btn-ghost, .bf-sand .bf-cd-actions .bf-btn-primary { white-space: nowrap; text-align: center; }

.bf-sand .bf-cd-tabs { display: flex; gap: 4px; margin: 24px 0 22px; border-bottom: 1px solid var(--bf-line); overflow-x: auto; }
.bf-sand .bf-cd-tabs button { background: none; border: none; padding: 11px 15px; font-family: "Hanken Grotesk", sans-serif; font-size: 0.84rem; font-weight: 600; color: var(--bf-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.bf-sand .bf-cd-tabs button.active { color: var(--bf-ink); font-weight: 700; border-bottom-color: var(--bf-accent); }
.bf-sand .bf-cd-tabs button:hover { color: var(--bf-ink); }

/* Overblik */
.bf-sand .bf-cd-overblik { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.bf-sand .bf-cd-ovl-main, .bf-sand .bf-cd-ovl-side { display: flex; flex-direction: column; gap: 18px; }
.bf-sand .bf-card { background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; padding: 20px; }
.bf-sand .bf-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.bf-sand .bf-card-head strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem; color: var(--bf-ink); }
.bf-sand .bf-card-head span { font-size: 0.75rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: var(--bf-muted); text-transform: uppercase; margin-bottom: 9px; }
.bf-sand .bf-week-count { color: var(--bf-green) !important; font-weight: 700; }

.bf-sand .bf-goal-now { display: flex; align-items: flex-end; gap: 8px; }
.bf-sand .bf-goal-weight { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 2.4rem; line-height: 1; color: var(--bf-ink); }
.bf-sand .bf-goal-unit { font-size: 0.84rem; color: var(--bf-muted, #7C7568); margin-bottom: 5px; }
.bf-sand .bf-goal-delta { margin-left: auto; font-size: 0.81rem; font-weight: 700; color: var(--bf-green); }
.bf-sand .bf-goal-meta { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--bf-muted); margin-top: 12px; }

.bf-sand .bf-week-row { display: flex; gap: 8px; }
.bf-sand .bf-week-day { flex: 1; text-align: center; }
.bf-sand .bf-week-cell { height: 34px; border-radius: 9px; background: var(--bf-surface3, #F6F2EA); border: 1px solid var(--bf-line); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: var(--bf-muted); }
.bf-sand .bf-week-cell.is-done { background: var(--bf-green); border-color: var(--bf-green); color: #fff; }
.bf-sand .bf-week-cell.is-today { background: rgba(199,93,52,0.14); border-color: var(--bf-accent); color: var(--bf-accent); }
.bf-sand .bf-week-cell.is-planned { background: #fff; border-style: dashed; }
.bf-sand .bf-week-day span { display: block; font-size: 0.66rem; color: var(--bf-muted); margin-top: 6px; }

.bf-sand .bf-timeline { display: flex; flex-direction: column; }
.bf-sand .bf-tl-row { display: flex; gap: 13px; }
.bf-sand .bf-tl-marker { display: flex; flex-direction: column; align-items: center; flex: none; }
.bf-sand .bf-tl-marker > span { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; }
.bf-sand .bf-tl-line { flex: 1; width: 2px; background: var(--bf-line); margin: 2px 0; }
.bf-sand .bf-tl-body { padding-bottom: 18px; }
.bf-sand .bf-tl-text { font-size: 0.84rem; font-weight: 600; color: var(--bf-ink); }
.bf-sand .bf-tl-time { font-size: 0.72rem; color: var(--bf-muted); margin-top: 2px; }

.bf-sand .bf-next-card { background: linear-gradient(150deg, color-mix(in srgb, var(--bf-accent, #C75D34) 8%, #fff), #ffffff); border-color: color-mix(in srgb, var(--bf-accent, #C75D34) 28%, #fff); }
.bf-sand .bf-next-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--bf-ink); }
.bf-sand .bf-next-sub { font-size: 0.78rem; color: var(--bf-muted, #7C7568); margin-top: 3px; }
.bf-sand .bf-next-btn { width: 100%; margin-top: 14px; }

/* Indstillinger tab */
.bf-sand .bf-cd-settings { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.bf-sand .bf-cfg-banner { display: flex; align-items: center; gap: 13px; background: #FBF6EE; border: 1px solid #ECDFC9; border-radius: 14px; padding: 14px 18px; }
.bf-sand .bf-cfg-ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(199,93,52,.12); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.bf-sand .bf-cfg-banner-meta { flex: 1; }
.bf-sand .bf-cfg-banner-meta strong { display: block; font-size: 0.84rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-cfg-banner-meta span { font-size: 0.75rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-cfg-count { text-align: right; flex: none; }
.bf-sand .bf-cfg-count strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--bf-ink); }
.bf-sand .bf-cfg-count span { display: block; font-size: 0.66rem; color: var(--bf-muted); }
.bf-sand .bf-cfg-list { padding: 0; overflow: hidden; }
.bf-sand .bf-cfg-list-head { padding: 15px 20px; border-bottom: 1px solid #EFEAE0; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.875rem; color: var(--bf-ink); }
.bf-sand .bf-cfg-row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #F1ECE2; cursor: pointer; }
.bf-sand .bf-cfg-row:last-child { border-bottom: none; }
.bf-sand .bf-cfg-row-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--bf-surface3, #F6F2EA); border: 1px solid #EFEAE0; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.bf-sand .bf-cfg-row-meta { flex: 1; min-width: 0; }
.bf-sand .bf-cfg-row-meta strong { display: block; font-size: 0.84rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-cfg-row-meta small { font-size: 0.72rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-cfg-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.bf-sand .bf-switch { width: 42px; height: 24px; border-radius: 99px; background: #D4CFC2; position: relative; flex: none; transition: background .14s; }
.bf-sand .bf-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .14s; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.bf-sand .bf-cfg-row input:checked ~ .bf-switch { background: var(--bf-accent); }
.bf-sand .bf-cfg-row input:checked ~ .bf-switch::after { transform: translateX(18px); }
.bf-sand .bf-cfg-actions { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 980px) {
  .bf-sand .bf-cd-overblik { grid-template-columns: 1fr; }
}

/* Coach-værktøjer list in client-detail Settings tab */
.bf-sand .bf-tools-list { display: flex; flex-direction: column; }
.bf-sand .bf-tools-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; border-bottom: 1px solid #F1ECE2; padding: 14px 20px; font-family: "Hanken Grotesk", sans-serif; font-size: 0.84rem; font-weight: 600; color: var(--bf-ink); cursor: pointer; text-align: left; }
.bf-sand .bf-tools-list button:last-child { border-bottom: none; }
.bf-sand .bf-tools-list button:hover { background: #FBFAF6; color: var(--bf-accent); }
.bf-sand .bf-tools-list button span { color: var(--bf-muted); }
.bf-sand .coach-goal-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

/* ===== Programmer (library grid + detail) ===== */
.bf-sand .bf-prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.bf-sand .bf-prog-card { display: block; background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; padding: 18px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bf-sand .bf-prog-card:hover { border-color: var(--bf-line, #D9CFBE); box-shadow: 0 4px 14px rgba(28,26,23,0.05); }
.bf-sand .bf-prog-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bf-sand .bf-prog-ic { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.bf-sand .bf-prog-ic.lg { width: 54px; height: 54px; border-radius: 14px; font-size: 1.5rem; flex: none; }
.bf-sand .bf-prog-level { font-size: 0.66rem; font-weight: 700; color: var(--bf-muted, #7C7568); background: var(--bf-surface3, #F6F2EA); border: 1px solid var(--bf-line); border-radius: 7px; padding: 4px 9px; }
.bf-sand .bf-prog-name { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem; color: var(--bf-ink); }
.bf-sand .bf-prog-meta { font-size: 0.75rem; color: var(--bf-muted, #7C7568); margin-top: 4px; }
.bf-sand .bf-prog-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bf-line); }
.bf-sand .bf-prog-foot span { font-size: 0.72rem; color: var(--bf-muted); }
.bf-sand .bf-prog-open { color: var(--bf-accent) !important; font-weight: 700; }

/* Offentlige hold-tracks */
.bf-sand .bf-hold-head { margin-top: 30px; }
.bf-sand .bf-hold-badge { background: rgba(94,123,90,0.16); color: #4E6B49; border-color: rgba(94,123,90,0.28); }
.bf-sand .bf-btn-dark { background: var(--bf-ink, #1C1A17); color: #fff !important; border: 0; border-radius: 11px; padding: 11px 16px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.84rem; cursor: pointer; }
.bf-sand .bf-hold-card { cursor: default; }
.bf-sand .bf-hold-uge { background: none; border: 0; padding: 0; font: inherit; font-size: 0.74rem; font-weight: 700; color: var(--bf-muted, #7C7568); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.bf-sand .bf-hold-uge:hover { color: var(--bf-ink); }
.bf-sand .bf-hold-open { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.bf-sand .bf-hold-count { background: none; border: 0; padding: 0; font: inherit; color: var(--bf-accent, #C75D34); cursor: pointer; font-weight: 600; }
.bf-sand .bf-hold-count:hover { text-decoration: underline; }
.bf-sand .bf-hold-status { display: inline-flex; align-items: center; gap: 7px; }
.bf-sand .bf-hold-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.bf-sand .bf-hold-dot.is-on { background: #4E9E5F; box-shadow: 0 0 0 3px rgba(78,158,95,0.18); }
.bf-sand .bf-hold-dot.is-off { background: #C7503A; box-shadow: 0 0 0 3px rgba(199,80,58,0.16); }
.bf-sand .bf-hold-ugeplan { margin-top: 16px; }

/* Per-hold weekly Ugeplan (mockup) */
.bf-sand .bf-uge { background: #fff; border: 1px solid var(--bf-line); border-radius: 18px; padding: 22px; box-shadow: 0 6px 22px rgba(28,26,23,0.06); }
.bf-sand .bf-uge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.bf-sand .bf-uge-title { display: flex; gap: 13px; align-items: flex-start; }
.bf-sand .bf-uge-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--bf-surface3, #F6F2EA); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.bf-sand .bf-uge-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-accent, #C75D34); }
.bf-sand .bf-uge-title h3 { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem; margin: 2px 0 3px; color: var(--bf-ink); }
.bf-sand .bf-uge-title p { font-size: 0.8rem; color: var(--bf-muted, #7C7568); margin: 0; }
.bf-sand .bf-uge-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.bf-sand .bf-uge-weekrow { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 0.9rem; }
.bf-sand .bf-uge-weekrow button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--bf-line); background: #fff; cursor: pointer; font-size: 1rem; }
.bf-sand .bf-uge-slots { font-size: 0.76rem; color: var(--bf-muted, #7C7568); font-weight: 700; }
.bf-sand .bf-uge-navacts { display: flex; align-items: center; gap: 8px; }
.bf-sand .bf-uge-x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--bf-line); background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-uge-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.bf-sand .bf-uge-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bf-line); background: #fff; color: var(--bf-ink); font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.bf-sand .bf-uge-tab span { background: rgba(0,0,0,0.07); border-radius: 999px; padding: 0 7px; font-size: 0.72rem; }
/* color !important: beats the high-specificity `.bf-sand .main-content button:not(...)`
   ink rule, which otherwise paints the active (dark) pill's text black-on-black. */
.bf-sand .bf-uge-tab.is-active { background: var(--bf-ink, #1C1A17); color: #fff !important; border-color: transparent; }
.bf-sand .bf-uge-tab.is-active span { background: rgba(255,255,255,0.22); }
.bf-sand .bf-uge-tab-new { border-style: dashed; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-uge-tab-new:hover { border-color: var(--bf-accent, #C75D34); color: var(--bf-accent, #C75D34); }
.bf-sand .bf-uge-edit { background: none; border: 0; cursor: pointer; font-size: 0.78rem; padding: 0 2px; opacity: 0.55; }
.bf-sand .bf-uge-edit:hover { opacity: 1; }
.bf-sand .bf-uge-pubtoggle { vertical-align: middle; margin-left: 8px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; cursor: pointer; border: 1px solid var(--bf-line); background: #F1ECE2; color: #8A8273; }
.bf-sand .bf-uge-pubtoggle.is-public { background: rgba(94,123,90,0.16); color: #4E6B49; border-color: rgba(94,123,90,0.3); }
.bf-sand .bf-uge-meta { font-size: 0.78rem; color: var(--bf-muted, #7C7568); font-weight: 700; margin: 8px 0 10px; }
.bf-sand .bf-uge-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.78rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-uge-fill > span { font-weight: 700; }
.bf-sand .bf-uge-fill input[type="date"] { border: 1px solid var(--bf-line); border-radius: 8px; padding: 6px 9px; font-size: 0.78rem; background: #fff; }
.bf-sand .bf-uge-fill button { border: 1px solid var(--bf-line); background: #fff; border-radius: 9px; padding: 7px 12px; font-weight: 700; font-size: 0.78rem; cursor: pointer; color: var(--bf-ink); }
.bf-sand .bf-uge-fill button:hover { border-color: var(--bf-accent, #C75D34); color: var(--bf-accent, #C75D34); }
.bf-sand .bf-uge-fill-empty { font-style: italic; }
.bf-sand .bf-uge-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
@media (max-width: 1100px) { .bf-sand .bf-uge-days { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .bf-sand .bf-uge-days { grid-template-columns: repeat(2, 1fr); } }
.bf-sand .bf-uge-day { display: flex; flex-direction: column; gap: 10px; min-height: 150px; border: 1px solid var(--bf-line); border-radius: 13px; padding: 12px; background: #FBFAF6; text-align: left; }
.bf-sand .bf-uge-dayhead { display: flex; align-items: baseline; gap: 7px; }
.bf-sand .bf-uge-dayhead strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.84rem; color: var(--bf-ink); }
.bf-sand .bf-uge-dayhead small { font-size: 0.68rem; color: #9A9385; }
.bf-sand .bf-uge-day.is-empty { cursor: pointer; align-items: center; justify-content: center; border-style: dashed; color: #9A9385; }
.bf-sand .bf-uge-day.is-empty:hover { border-color: var(--bf-accent, #C75D34); color: var(--bf-accent, #C75D34); }
.bf-sand .bf-uge-add { text-align: center; font-weight: 700; font-size: 0.82rem; line-height: 1.4; }
.bf-sand .bf-uge-day.is-set { background: #fff; }
.bf-sand .bf-uge-pick { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: space-between; }
.bf-sand .bf-uge-pick > strong { font-size: 0.82rem; color: var(--bf-ink); line-height: 1.3; }
.bf-sand .bf-uge-pick-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bf-sand .bf-uge-pick-acts button { background: none; border: 0; padding: 0; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer; color: var(--bf-accent, #C75D34); }
.bf-sand .bf-uge-pick-acts button[data-action="hold-uge-remove"], .bf-sand .bf-uge-pick-acts button[data-action="hold-uge-pick-cancel"] { color: #9A9385; }
.bf-sand .bf-uge-day.is-picking select { width: 100%; border: 1px solid var(--bf-line); border-radius: 9px; padding: 8px; font-size: 0.78rem; background: #fff; }
.bf-sand .bf-uge-save { background: var(--bf-accent, #C75D34); color: #fff; border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 0.74rem; cursor: pointer; }


.bf-sand .bf-prog-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 10px 0 20px; }
.bf-sand .bf-prog-detail-id { display: flex; align-items: center; gap: 15px; }
.bf-sand .bf-prog-detail-name { display: flex; align-items: center; gap: 11px; }
.bf-sand .bf-prog-detail-name h1 { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.55rem; letter-spacing: -0.02em; color: var(--bf-ink); margin: 0; }
.bf-sand .bf-prog-detail-id p { font-size: 0.81rem; color: var(--bf-muted, #7C7568); margin: 4px 0 0; }
.bf-sand .bf-prog-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 4px; }
.bf-sand .bf-prog-stat { background: #fff; border: 1px solid var(--bf-line); border-radius: 15px; padding: 16px 19px; }
.bf-sand .bf-prog-stat-l { font-size: 0.72rem; color: var(--bf-muted, #7C7568); font-weight: 600; }
.bf-sand .bf-prog-stat-v { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.45rem; color: var(--bf-ink); margin-top: 5px; }
.bf-sand .bf-prog-detail-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.bf-sand .bf-prog-detail-side { display: flex; flex-direction: column; gap: 18px; }
.bf-sand .bf-assigned-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid #F1ECE2; }
.bf-sand .bf-assigned-row:last-child { border-bottom: none; }
.bf-sand .bf-assigned-row span:last-child { font-size: 0.84rem; font-weight: 600; color: var(--bf-ink); }

@media (max-width: 980px) {
  .bf-sand .bf-prog-stats { grid-template-columns: repeat(2, 1fr); }
  .bf-sand .bf-prog-detail-body { grid-template-columns: 1fr; }
}

/* ===== Adgang (access requests + members) ===== */
.bf-sand .bf-section-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.95rem; color: var(--bf-ink); margin: 20px 0 12px; }
.bf-sand .bf-avatar.lg { width: 44px; height: 44px; font-size: 0.875rem; }
.bf-sand .bf-req-list { display: flex; flex-direction: column; gap: 11px; }
.bf-sand .bf-req-card { background: #fff; border: 1px solid var(--bf-line); border-radius: 14px; overflow: hidden; }
.bf-sand .bf-req-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; }
.bf-sand .bf-req-meta { flex: 1; min-width: 0; }
.bf-sand .bf-req-meta strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-req-meta small { display: block; font-size: 0.74rem; color: var(--bf-muted, #7C7568); margin-top: 2px; }
.bf-sand .bf-req-meta .bf-req-mods { color: var(--bf-muted); }
.bf-sand .bf-req-actions { display: flex; align-items: center; gap: 9px; flex: none; flex-wrap: wrap; }
.bf-sand .bf-req-actions .coach-filter-select { padding: 8px 10px; font-size: 0.78rem; }
.bf-sand .bf-req-actions .bf-btn-ghost, .bf-sand .bf-req-actions .bf-btn-primary { padding: 9px 15px; font-size: 0.78rem; }
.bf-sand .bf-mem-row .bf-ctable-link { padding: 13px 0 13px 20px; }
.bf-sand .bf-req-card .lead-provision { margin: 0 18px 16px; }

@media (max-width: 820px) {
  .bf-sand .bf-req-row { flex-wrap: wrap; }
  .bf-sand .bf-adgang .bf-prog-stats { grid-template-columns: 1fr !important; }
}

/* ===== Rapporter ===== */
.bf-sand .bf-rep-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
.bf-sand .bf-bars { display: flex; align-items: flex-end; gap: 14px; height: 200px; }
.bf-sand .bf-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bf-sand .bf-bar-val { font-size: 0.72rem; font-weight: 700; color: var(--bf-muted2); }
.bf-sand .bf-bar { width: 100%; max-width: 46px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, var(--bf-accent), #E0883E); }
.bf-sand .bf-bar-lbl { font-size: 0.7rem; color: var(--bf-muted); }
.bf-sand .bf-dist { display: flex; flex-direction: column; gap: 13px; }
.bf-sand .bf-dist-top { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bf-sand .bf-dist-top span:first-child { font-size: 0.8rem; font-weight: 600; color: var(--bf-ink); }
.bf-sand .bf-dist-top span:last-child { font-size: 0.75rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-dist-track { display: block; height: 8px; background: var(--bf-line); border-radius: 99px; overflow: hidden; }
.bf-sand .bf-dist-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--bf-accent), #E0883E); border-radius: 99px; }
.bf-sand .bf-rep-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bf-line); display: flex; justify-content: space-between; }
.bf-sand .bf-rep-foot-l { font-size: 0.72rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-rep-foot-v { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--bf-ink); }

@media (max-width: 980px) { .bf-sand .bf-rep-grid { grid-template-columns: 1fr; } }

/* ===== Ernæring tile hub ===== */
.bf-sand .bf-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 22px; }
.bf-sand .bf-tile { text-align: left; background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; padding: 18px; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.bf-sand .bf-tile:hover { border-color: var(--bf-line, #D9CFBE); box-shadow: 0 4px 14px rgba(28,26,23,0.05); }
.bf-sand .bf-tile.active { border-color: var(--bf-accent); box-shadow: 0 0 0 1px var(--bf-accent); }
.bf-sand .bf-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bf-sand .bf-tile-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(199,93,52,.10); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.bf-sand .bf-tile-count { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--bf-ink); }
.bf-sand .bf-tile-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem; color: var(--bf-ink); }
.bf-sand .bf-tile-desc { font-size: 0.78rem; color: var(--bf-muted, #7C7568); margin-top: 4px; line-height: 1.45; }

/* Ernæring manager rows — flip hardcoded dark-theme nutrition-admin-row to sand */
.bf-sand .nutrition-admin-row { background: var(--bf-surface2); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand .nutrition-admin-row :is(strong,b,div,span) { color: var(--bf-ink); }
.bf-sand .nutrition-admin-row em { color: var(--bf-muted2); }
.bf-sand .nutrition-admin-row small { color: var(--bf-muted); }

/* ===== Topbar + "Vis som" persona dropdown (new design) ===== */
.bf-sand .bf-topbar { display: flex; align-items: center; gap: 18px; }
.bf-sand .bf-topbar-search { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bf-line); border-radius: 11px; padding: 9px 14px; width: 340px; max-width: 40vw; }
.bf-sand .bf-topbar-search .bf-search-ic { color: var(--bf-muted); }
.bf-sand .bf-topbar-search input { flex: 1; border: none; background: transparent; font-size: 0.84rem; color: var(--bf-ink); }
.bf-sand .bf-topbar-search input:focus { outline: none; }
.bf-sand .bf-topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.bf-sand .bf-persona { position: relative; }
.bf-sand .bf-persona-pill { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bf-line); border-radius: 11px; padding: 7px 12px; cursor: pointer; }
.bf-sand .bf-persona-pill:hover { border-color: var(--bf-line, #D9CFBE); }
.bf-sand .bf-persona-lock { font-size: 0.7rem; }
.bf-sand .bf-persona-pill-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.bf-sand .bf-persona-lbl { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; color: var(--bf-muted); text-transform: uppercase; }
.bf-sand .bf-persona-cur { font-size: 0.78rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-persona-caret { color: var(--bf-muted); font-size: 0.7rem; }
.bf-sand .bf-persona-menu { position: absolute; top: 48px; right: 0; width: 250px; background: #fff; border: 1px solid var(--bf-line); border-radius: 13px; box-shadow: 0 14px 40px rgba(28,26,23,.16); padding: 8px; z-index: 60; }
/* On phones the persona pill sits top-LEFT, so a right-aligned menu overflows
   off-screen — align it to the pill's left edge and cap to the viewport. */
@media (max-width: 700px) {
  .bf-sand .bf-persona-menu { left: 0; right: auto; width: min(250px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; }
}
.bf-sand .bf-persona-group { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; color: var(--bf-muted); text-transform: uppercase; padding: 8px 10px 6px; }
.bf-sand .bf-persona-divider { height: 1px; background: #EFEAE0; margin: 6px 8px; }
.bf-sand .bf-persona-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.bf-sand .bf-persona-row:hover { background: var(--bf-surface3, #F6F2EA); }
.bf-sand .bf-persona-row.is-active { background: rgba(199,93,52,0.10); }
.bf-sand .bf-persona-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.66rem; flex: none; }
.bf-sand .bf-persona-meta { flex: 1; min-width: 0; }
.bf-sand .bf-persona-meta strong { display: block; font-size: 0.8rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-persona-meta small { font-size: 0.68rem; color: var(--bf-muted); }
.bf-sand .bf-persona-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-accent); flex: none; }

/* WOD / workout blocks were hardcoded dark (#111) — flip to sand so the body text
   (warm-up, rounds, exercises) is readable in the in-app coach + client views.
   The big TV "Fuld visning" display mode stays dark on purpose. */
.bf-sand .main-content .workout-block {
  background: var(--bf-surface);
  border-color: var(--bf-line);
  color: var(--bf-ink);
  box-shadow: none;
}
.bf-sand .main-content .workout-block :is(pre, strong, b, span, div, li, p) { color: var(--bf-ink); }
.bf-sand .main-content .workout-block small { color: var(--bf-muted2); }
.bf-sand .main-content .workout-block pre { background: var(--bf-surface2); border-radius: 10px; }
.bf-sand .main-content :is(.hero-panel, .display-mode, .display-blocks) .workout-block {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: #F4F0E7;
}
.bf-sand .main-content :is(.hero-panel, .display-mode, .display-blocks) .workout-block :is(pre, strong, b, span, div, li, p, small) { color: #F4F0E7; }

/* Catch-all: the hardcoded-dark (#111) in-app card group → sand surface, so text
   stays readable everywhere in the coach + client in-app views (WOD tracks, notes,
   leaderboard, meal/macro cards, calendar/library rows). TV display mode stays dark. */
.bf-sand .main-content :is(.program-track-card,.note-card,.podium-card,.leaderboard-row,.meal-card,.macro-card,.nutrition-section,.saved-card,.calendar-row,.library-row,.program-list-row) {
  background: var(--bf-surface);
  border-color: var(--bf-line);
  color: var(--bf-ink);
  box-shadow: none;
}
.bf-sand .main-content :is(.program-track-card,.note-card,.podium-card,.leaderboard-row,.meal-card,.macro-card,.nutrition-section,.saved-card,.calendar-row,.library-row,.program-list-row) :is(strong,b,p,span,div,li,h2,h3,h4) { color: var(--bf-ink); }
.bf-sand .main-content :is(.program-track-card,.note-card,.podium-card,.leaderboard-row,.meal-card,.macro-card,.nutrition-section,.saved-card,.calendar-row,.library-row,.program-list-row) small { color: var(--bf-muted2); }
.bf-sand .main-content .program-track-card.active { border-color: var(--bf-accent); }

/* Workout thumbnail squares — accent-tint instead of hardcoded dark */
.bf-sand .main-content .portal-thumb { background: rgba(199,93,52,0.12); color: var(--bf-accent); }
.bf-sand .main-content .portal-thumb span { color: var(--bf-accent); }

/* ===== RUNNER overlay (mobile card + TV display) — BeastFactory App.dc.html ===== */
.bf-runner-backdrop { position: fixed; inset: 0; background: rgba(28,26,23,.55); display: flex; align-items: flex-start; justify-content: center; padding: 24px; z-index: 200; overflow: auto; }
.bf-runner-card { width: 430px; max-width: 100%; background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 70px rgba(28,26,23,.4); }
.bf-runner-head { background: #1C1A17; color: #F4F0E7; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.bf-runner-head-title { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.875rem; }
.bf-runner-head-actions { display: flex; gap: 8px; align-items: center; }
.bf-runner-head-actions button { font-size: 0.75rem; font-weight: 700; background: #2A2620; color: #F4F0E7; border: none; border-radius: 8px; padding: 6px 11px; cursor: pointer; }
.bf-runner-x { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0 !important; font-size: 1rem; }
.bf-runner-scroll { max-height: 80vh; overflow: auto; padding: 20px; }
.bf-runner-name { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.4rem; letter-spacing: -.01em; line-height: 1.1; color: #1C1A17; }
.bf-runner-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.bf-runner-tags span { font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--bf-accent, #C75D34); border-radius: 99px; padding: 4px 12px; }
.bf-runner-timer { margin: 18px 0; background: #1C1A17; border-radius: 18px; padding: 18px; text-align: center; }
.bf-runner-clock { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 4rem; line-height: 1; letter-spacing: -.02em; color: #F4F0E7; font-variant-numeric: tabular-nums; }
.bf-runner-clock.tv { font-size: calc(clamp(40px, 7vw, 96px) * var(--tv-scale, 1)); }
.bf-runner-sub { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A7A093; margin-top: 8px; }
.bf-runner-btns { display: flex; gap: 9px; margin-top: 14px; justify-content: center; }
.bf-runner-start, .bf-runner-pause, .bf-runner-reset { border: none; border-radius: 11px; padding: 13px; font-family: "Hanken Grotesk", sans-serif; font-weight: 800; font-size: 0.95rem; cursor: pointer; }
.bf-runner-timer .bf-runner-start, .bf-runner-timer .bf-runner-pause { flex: 1; }
.bf-runner-start { background: #5E9E72; color: #fff; }
.bf-runner-pause { background: var(--bf-accent, #C75D34); color: #fff; }
.bf-runner-reset { background: #2A2620; color: #C9C3B5; font-weight: 700; padding: 13px 18px; }
.bf-runner-equip-label { font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; color: #9A9484; text-transform: uppercase; margin-bottom: 8px; }
.bf-runner-equip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.bf-runner-equip span { font-size: 0.75rem; font-weight: 700; color: #55503F; }
.bf-runner-blocks { display: flex; flex-direction: column; gap: 12px; }
.bf-runner-block { border: 1px solid var(--bf-line, #E5DFD2); border-radius: 14px; overflow: hidden; }
.bf-runner-block-head, .bf-runner-tv-bhead { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.bf-runner-tag { width: 30px; height: 30px; border-radius: 50%; background: #F0CBA0; color: #7A5236; display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.75rem; flex: none; }
.bf-runner-block-title, .bf-runner-tv-bt { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.95rem; color: #1C1A17; }
.bf-runner-block-type, .bf-runner-tv-by { font-size: 0.72rem; color: #9A9484; }
.bf-runner-block pre { background: #FBFAF6; border-top: 1px solid #F1ECE2; padding: 13px 15px; margin: 0; font-family: "SF Mono", ui-monospace, monospace; font-size: 0.84rem; line-height: 1.7; color: #1C1A17; white-space: pre-wrap; }

/* TV display */
/* Flex column: bar + clock fixed at top, program (grid) scrolls in the middle,
   WOD-timer pinned at the bottom — an app-like layout for the wall/phone. */
.bf-runner-tv { position: fixed; inset: 0; background: #0F0D0B; z-index: 200; overflow: hidden; color: #F4F0E7; display: flex; flex-direction: column; }
.bf-runner-tv-bar, .bf-runner-tv-clockbar { flex: 0 0 auto; }
.bf-runner-tv .bf-runner-tv-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 20px; }
.bf-runner-tv .bf-wod-timer { flex: 0 0 auto; margin-top: 4px; }
.bf-runner-tv-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; }
.bf-runner-tv-left { display: flex; gap: 14px; align-items: center; }
.bf-runner-tv-left button, .bf-runner-tv-per button { font-size: 0.8rem; font-weight: 700; background: #1A1714; border: 1px solid #2E2A23; color: #F4F0E7; border-radius: 9px; padding: 8px 14px; cursor: pointer; }
.bf-runner-tv-per { font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A8472; display: inline-flex; align-items: center; gap: 6px; }
.bf-runner-tv-per button { padding: 6px 11px; }
.bf-runner-tv-per button.active { background: var(--bf-accent, #C75D34); border-color: var(--bf-accent, #C75D34); color: #fff; }
.bf-runner-tv-close { width: 38px; height: 38px; border-radius: 9px; background: #1A1714; border: 1px solid #2E2A23; color: #F4F0E7; font-size: 1.1rem; cursor: pointer; }
.bf-runner-tv-clockbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #1A1714; border: 1px solid #2E2A23; border-radius: 18px; padding: 16px 24px; margin: 0 28px 20px; }
.bf-runner-tv-title { font-family: "Archivo", sans-serif; font-weight: 900; font-size: calc(clamp(20px, 3vw, 34px) * var(--tv-scale, 1)); letter-spacing: -.01em; }
.bf-runner-tv-grid { display: grid; gap: 18px; padding: 0 28px 50px; }
.bf-runner-tv-block { background: #1A1714; border: 1px solid #2E2A23; border-radius: 18px; padding: 22px 26px; }
.bf-runner-tv-bt { font-size: calc(clamp(20px, 2.4vw, 30px) * var(--tv-scale, 1)) !important; color: #F4F0E7; }
.bf-runner-tv-block pre { font-family: "SF Mono", ui-monospace, monospace; line-height: 1.55; color: #F4F0E7; white-space: pre-wrap; font-size: calc(clamp(15px, 1.5vw, 22px) * var(--tv-scale, 1)); margin: 12px 0 0; }

/* RUNNER TV — extra controls: zoom, theme, fullscreen, extra timer + light theme */
.bf-runner-tv-zoom { font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A8472; display: inline-flex; align-items: center; gap: 6px; }
.bf-runner-tv-zoom button { padding: 6px 10px; }

/* ===== WOD timer (EMOM / intervals / AMRAP / count-up / count-down) ===== */
.bf-wod-timer { border-radius: 14px; padding: 14px 18px; margin: 0 28px 18px; display: flex; flex-direction: column; gap: 10px; }
.bf-runner-tv .bf-wod-timer { background: #1A1714; border: 1px solid #2E2A23; }
.bf-runner-scroll .bf-wod-timer { background: #FBFAF6; border: 1px solid var(--bf-line, #E5DFD2); margin: 14px 0 0; }
.bf-wod-label { font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A8472; }
.bf-wod-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.bf-wod-modes button, .bf-wod-step button { font-family: "Hanken Grotesk", sans-serif; cursor: pointer; border: 1px solid #2E2A23; background: #2A2620; color: #F4F0E7; }
.bf-wod-modes button { font-weight: 700; font-size: 0.8rem; border-radius: 8px; padding: 7px 12px; }
.bf-runner-scroll .bf-wod-modes button, .bf-runner-scroll .bf-wod-step button { border-color: var(--bf-line, #E5DFD2); background: #fff; color: #1C1A17; }
.bf-wod-modes button.active { background: var(--bf-accent, #C75D34); border-color: var(--bf-accent, #C75D34); color: #fff; }
.bf-wod-modes button[disabled], .bf-wod-step button[disabled] { opacity: .45; cursor: default; }
.bf-wod-cfg { display: flex; flex-wrap: wrap; gap: 14px; }
.bf-wod-step { display: inline-flex; align-items: center; gap: 6px; }
.bf-wod-step small { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8A8472; margin-right: 2px; }
.bf-wod-step button { width: 30px; height: 30px; border-radius: 8px; font-weight: 800; font-size: 1rem; line-height: 1; }
.bf-wod-cfg-val { font-weight: 800; min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.bf-wod-display { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bf-wod-clock { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(30px, 5vw, 56px); font-variant-numeric: tabular-nums; }
.bf-runner-tv .bf-wod-clock { color: #F4F0E7; }
.bf-runner-scroll .bf-wod-clock { color: #1C1A17; }
.bf-wod-sub { font-size: 0.82rem; font-weight: 800; color: #8A8472; text-transform: uppercase; letter-spacing: .04em; }
.bf-wod-timer.is-done .bf-wod-clock { color: var(--bf-accent, #C75D34); }
.bf-wod-btns { display: flex; gap: 8px; }
.bf-wod-btns button { font-family: "Hanken Grotesk", sans-serif; font-weight: 800; font-size: 0.9rem; border-radius: 9px; padding: 10px 18px; cursor: pointer; border: none; }
.bf-wod-btns .bf-runner-start { background: #5E9E72; color: #fff; }
.bf-wod-btns .bf-runner-pause { background: var(--bf-accent, #C75D34); color: #fff; }
.bf-wod-btns .bf-runner-reset { background: #2A2620; color: #F4F0E7; border: 1px solid #2E2A23; }
.bf-runner-scroll .bf-wod-btns .bf-runner-reset { background: #fff; color: #1C1A17; border-color: var(--bf-line, #E5DFD2); }
@media (max-width: 720px) {
  .bf-runner-tv .bf-wod-timer { margin: 0 16px 14px; }
}

/* Light theme for the TV display */
.bf-runner-tv.is-light { background: var(--bf-sand, #EAE6DC); color: #1C1A17; }
.bf-runner-tv.is-light .bf-runner-tv-left button, .bf-runner-tv.is-light .bf-runner-tv-close { background: #fff; border-color: var(--bf-line, #E5DFD2); color: #1C1A17; }
.bf-runner-tv.is-light .bf-runner-tv-per, .bf-runner-tv.is-light .bf-runner-tv-zoom { color: #9A9484; }
.bf-runner-tv.is-light .bf-runner-tv-per button.active { background: var(--bf-accent, #C75D34); border-color: var(--bf-accent, #C75D34); color: #fff; }
.bf-runner-tv.is-light .bf-runner-tv-clockbar { background: #fff; border-color: var(--bf-line, #E5DFD2); }
.bf-runner-tv.is-light .bf-runner-tv-title, .bf-runner-tv.is-light .bf-runner-clock.tv { color: #1C1A17; }
.bf-runner-tv.is-light .bf-runner-tv-by { color: #9A9484; }
.bf-runner-tv.is-light .bf-runner-tv-block { background: #fff; border-color: var(--bf-line, #E5DFD2); }
.bf-runner-tv.is-light .bf-runner-tv-bt, .bf-runner-tv.is-light .bf-runner-tv-block pre { color: #1C1A17; }

/* ===== Admin Team page (Roller card + crumb) ===== */
.bf-sand .bf-cd-crumb-row { margin-bottom: 6px; }
.bf-sand .bf-team-roles { padding: 0; overflow: hidden; margin-bottom: 18px; }
.bf-sand .bf-team-roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; }
.bf-sand .bf-team-role { display: flex; align-items: flex-start; gap: 12px; padding: 14px 20px; border-top: 1px solid #F1ECE2; border-right: 1px solid #F1ECE2; }
.bf-sand .bf-team-role-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--bf-surface3, #F6F2EA); border: 1px solid #EFEAE0; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.bf-sand .bf-team-role strong { display: block; font-size: 0.84rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-team-role small { font-size: 0.74rem; color: var(--bf-muted, #7C7568); line-height: 1.4; }

/* Weekly-overview <summary> was white-on-white in sand (coach/workouts) */
.bf-sand .main-content .weekly-overview summary { color: var(--bf-ink); }

/* Emoji sidebar nav icons (match beastfactory-all-pages.html) */
.bf-sand .sidebar .sidebar-icon .sidebar-emoji { font-size: 0.98rem; line-height: 1; display: inline-block; }
.kost-app .sidebar .sidebar-emoji { font-size: 0.98rem; line-height: 1; }

/* ===== Opgaver (coach task board / kanban) ===== */
.bf-sand .bf-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.bf-sand .bf-kanban-col { background: #fff; border: 1px solid var(--bf-line); border-radius: 16px; padding: 18px; }
.bf-sand .bf-kanban-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bf-sand .bf-kanban-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bf-sand .bf-kanban-head strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--bf-ink); }
.bf-sand .bf-kanban-count { font-size: 0.72rem; color: var(--bf-muted); }
.bf-sand .bf-kanban-cards { display: flex; flex-direction: column; gap: 10px; }
.bf-sand .bf-task-card { display: flex; align-items: flex-start; gap: 10px; background: var(--bf-surface3, #F6F2EA); border: 1px solid var(--bf-line); border-radius: 12px; padding: 13px; text-decoration: none; }
.bf-sand a.bf-task-card.is-link:hover { border-color: var(--bf-accent); }
.bf-sand .bf-task-box { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid #D4CFC2; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; cursor: pointer; margin-top: 1px; }
.bf-sand .bf-task-box.is-done { background: var(--bf-green); border-color: var(--bf-green); }
.bf-sand .bf-task-main { flex: 1; min-width: 0; }
.bf-sand .bf-task-label { font-size: 0.82rem; font-weight: 600; color: var(--bf-ink); line-height: 1.3; }
.bf-sand .bf-task-label.is-done { text-decoration: line-through; color: var(--bf-muted); }
.bf-sand .bf-task-meta { font-size: 0.7rem; color: var(--bf-muted); margin-top: 4px; }
.bf-sand .bf-task-del { background: none; border: none; color: #C9C3B5; font-size: 1rem; cursor: pointer; flex: none; line-height: 1; }
.bf-sand .bf-task-del:hover { color: var(--bf-danger); }
@media (max-width: 900px) { .bf-sand .bf-kanban { grid-template-columns: 1fr; } }

/* M (a11y): clear, consistent keyboard focus ring across interactive controls */
.bf-sand a:focus-visible, .bf-sand button:focus-visible, .bf-sand input:focus-visible,
.bf-sand select:focus-visible, .bf-sand textarea:focus-visible, .bf-sand [tabindex]:focus-visible,
.kost-app a:focus-visible, .kost-app button:focus-visible, .kost-app input:focus-visible,
.kost-app select:focus-visible, .kost-app textarea:focus-visible {
  outline: 2px solid var(--bf-accent, #C75D34);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Client Settings — tab switcher + new panels ===== */
.bf-sand .bf-settings-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.bf-sand .bf-settings-tabs button { background: #fff; border: 1px solid var(--bf-line); color: var(--bf-muted, #7C7568); border-radius: 99px; padding: 8px 15px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.bf-sand .bf-settings-tabs button.active { background: rgba(199,93,52,0.14); border-color: transparent; color: var(--bf-ink); }
.bf-sand .bf-set-card .portal-card-heading { margin-bottom: 6px; }
.bf-sand .bf-set-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid #F1ECE2; padding: 14px 0; cursor: pointer; }
.bf-sand .bf-set-row:first-of-type { border-top: none; }
.bf-sand .bf-set-meta { flex: 1; min-width: 0; }
.bf-sand .bf-set-meta strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-set-meta small { font-size: 0.74rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-set-switch { width: 42px; height: 24px; border-radius: 99px; background: #D4CFC2; position: relative; flex: none; transition: background .14s; }
.bf-sand .bf-set-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .14s; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.bf-sand .bf-set-switch.is-on { background: var(--bf-accent); }
.bf-sand .bf-set-switch.is-on::after { transform: translateX(18px); }
.bf-sand .bf-set-note { font-size: 0.75rem; color: var(--bf-muted); margin: 12px 0 0; }
.bf-sand .bf-set-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bf-sand .bf-units-toggle { display: flex; gap: 8px; }
.bf-sand .bf-units-toggle button { flex: 1; background: #fff; border: 1.5px solid var(--bf-line); color: var(--bf-ink); border-radius: 11px; padding: 12px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.84rem; cursor: pointer; }
.bf-sand .bf-units-toggle button.active { background: rgba(199,93,52,0.14); border-color: var(--bf-accent); }

/* ===== TV display: light theme + extra countdown timer ===== */
.display-mode.is-light { background: var(--bf-sand, #EAE6DC); color: #1C1A17; }
.display-mode.is-light .display-kicker { color: var(--bf-accent, #C75D34); }
.display-mode.is-light .display-block-topline span { color: rgba(28,26,23,0.6); }
.display-mode.is-light .display-block-topline strong,
.display-mode.is-light h1, .display-mode.is-light h2 { color: #1C1A17; }
.display-mode.is-light .display-nav-button { background: #fff; border-color: #D8D2C4; color: #1C1A17; }
.display-mode.is-light .display-nav-button.primary { background: var(--bf-accent, #C75D34); border-color: var(--bf-accent, #C75D34); color: #fff; }
.display-mode.is-light .display-exit { background: #fff; border-color: #D8D2C4; color: #1C1A17; }
.display-mode.is-light .display-blocks .workout-block { background: #fff; border-color: #E0DACB; color: #1C1A17; }
.display-mode.is-light .display-blocks .workout-block * { color: #1C1A17; }
.display-mode.is-light .display-blocks pre { color: #1C1A17; }
.display-mode.is-light .display-overview-card { background: #fff; border-color: #E0DACB; color: #1C1A17; }

#bf-extra-timer {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px;
  background: #1A1714; border: 1px solid #2E2A23; border-radius: 14px;
  padding: 10px 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  font-family: "Hanken Grotesk", sans-serif;
}
#bf-extra-timer.is-running { border-color: #5E9E72; }
#bf-extra-timer.is-done { border-color: var(--bf-accent, #C75D34); }
.bf-extra-label { font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8A8472; }
.bf-extra-clock { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 2rem; color: #F4F0E7; font-variant-numeric: tabular-nums; min-width: 96px; text-align: center; }
#bf-extra-timer.is-running .bf-extra-clock { color: #6FBF86; }
#bf-extra-timer.is-done .bf-extra-clock { color: #E0764B; }
#bf-extra-timer button { font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 0.82rem; border: 1px solid #2E2A23; background: #2A2620; color: #F4F0E7; border-radius: 9px; padding: 8px 12px; cursor: pointer; }
#bf-extra-timer .bf-extra-start { background: #5E9E72; border-color: #5E9E72; }
#bf-extra-timer .bf-extra-pause { background: var(--bf-accent, #C75D34); border-color: var(--bf-accent, #C75D34); }
#bf-extra-timer .bf-extra-close { background: none; border: none; color: #8A8472; font-size: 1rem; }

/* ===== TV display: Tablet mode (fit one block to fill the screen) ===== */
.display-block-screen.is-tablet { grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: calc(100vh - 24px); }
.display-tablet-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0;
}
.display-tablet-bar .display-nav-button { width: auto; padding: 8px 12px; font-size: 0.9rem; }
.display-tablet-count { font-weight: 850; text-transform: uppercase; opacity: 0.7; font-size: 0.8rem; margin: 0 auto 0 4px; }
.display-block-screen.is-tablet .display-blocks { height: 100%; display: grid; overflow: hidden; }
.display-block-screen.is-tablet .display-blocks .block-list { grid-template-columns: 1fr; height: 100%; align-content: center; }
.display-block-screen.is-tablet .display-blocks .workout-block {
  min-height: 0; height: auto; align-self: center; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.display-block-screen.is-tablet .display-blocks pre { font-size: calc(clamp(1rem, 4.4vw, 2.4rem) * var(--display-zoom, 1)); }
.display-block-screen.is-tablet .display-blocks .block-header strong { font-size: calc(clamp(1.3rem, 5vw, 2.8rem) * var(--display-zoom, 1)); }
@media (max-width: 760px) {
  .display-mode { padding: 12px; }
  .display-block-screen.is-tablet { min-height: calc(100dvh - 24px); }
}

/* ===== TV / storskærm display: fit phones & tablets (portrait) =====
   The display views are built for a wide landscape TV. On a narrow screen the
   block-screen grid (rows only, no column constraint) let its implicit column
   grow to max-content, and the topline toolbar was one long non-wrapping row —
   so everything blew past the viewport and got clipped (content cropped on the
   left, black gap on the right). Constrain every level to the viewport width,
   let the toolbars wrap, and stack the toplines. */
@media (max-width: 820px) {
  .display-mode { overflow-x: hidden; max-width: 100vw; }

  /* Kill the max-content implicit column on the block-screen + overview grids. */
  .display-block-screen,
  .display-overview,
  .display-day-stack { grid-template-columns: minmax(0, 1fr); min-width: 0; }

  /* Toplines: stack the left/right groups and let the button toolbar wrap. */
  .display-block-topline { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .display-topline-left,
  .display-topline-right {
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .display-topline-left { text-align: left; }
  .display-topline-title { min-width: 0; }
  .display-topline-title span { white-space: normal; }
  .display-topline-title strong {
    white-space: normal;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    font-size: clamp(1rem, 4.5vw, 1.4rem);
  }
  .display-nav-button { flex: 0 0 auto; }

  /* Overview header: stack title over the controls; controls go full-width. */
  .display-overview-header { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .display-controls { justify-items: stretch; min-width: 0; width: 100%; }

  /* Blocks: single full-width column, never wider than the screen. */
  .display-blocks,
  .display-blocks .block-list { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
  .display-blocks .workout-block { min-width: 0; max-width: 100%; }
  .display-block-screen .display-blocks .workout-block { min-height: calc(100dvh - 200px); }
  .display-blocks pre,
  .display-blocks .block-header strong,
  .display-blocks .block-header small { overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
  .display-block-topline > div { min-width: 0; }
}

/* ===== TV display: auto-scroll (paced crawl for long workouts) ===== */
/* Cap the screen to the viewport so the block AREA (not the whole page) scrolls,
   keeping the menu bar in view; release the height:100% grid lock so content can
   grow taller than that area — the overflow is what the crawl moves through. */
.display-mode:has(.is-autoscroll) { padding: 0; height: 100vh; min-height: 0; overflow: hidden; }
.display-block-screen.is-autoscroll { min-height: 0; height: 100vh; padding: 14px; box-sizing: border-box; }
.display-block-screen.is-autoscroll .display-blocks {
  min-height: 0; overflow-y: auto; scrollbar-width: none; scroll-behavior: auto;
}
.display-block-screen.is-autoscroll .display-blocks::-webkit-scrollbar { width: 0; height: 0; }
.display-block-screen.is-autoscroll .display-blocks .block-list { height: auto; align-content: start; }
.display-block-screen.is-autoscroll .display-blocks .workout-block {
  min-height: 0; height: auto; align-self: start; justify-content: flex-start;
}

/* Persona "Vis som" pill + dropdown — base (un-scoped) layout so it renders
   correctly even on routes WITHOUT bf-sand (e.g. Kost). Otherwise the menu loses
   position:absolute and spills inline across the topbar. Colors fall back to the
   sand palette via var() defaults; the .bf-sand rules above override identically. */
.bf-persona { position: relative; }
.bf-persona-pill { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 11px; padding: 7px 12px; cursor: pointer; }
.bf-persona-pill-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.bf-persona-lbl { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-muted, #7C7568); }
.bf-persona-cur { font-size: 0.78rem; font-weight: 700; color: var(--bf-ink, #1C1A17); }
.bf-persona-caret { color: var(--bf-muted, #7C7568); font-size: 0.7rem; }
.bf-persona-lock { font-size: 0.7rem; }
.bf-persona-menu { position: absolute; top: 48px; right: 0; width: 250px; background: #fff; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 13px; box-shadow: 0 14px 40px rgba(28,26,23,.16); padding: 8px; z-index: 60; }
@media (max-width: 700px) {
  .bf-persona-menu { left: 0; right: auto; width: min(250px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; }
}
.bf-persona-group { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; color: var(--bf-muted, #7C7568); text-transform: uppercase; padding: 8px 10px 6px; }
.bf-persona-divider { height: 1px; background: #EFEAE0; margin: 6px 8px; }
.bf-persona-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.bf-persona-row:hover { background: var(--bf-surface3, #F6F2EA); }
.bf-persona-row.is-active { background: rgba(199,93,52,0.10); }
.bf-persona-av { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.66rem; flex: none; }
.bf-persona-meta { flex: 1; min-width: 0; }
.bf-persona-meta strong { display: block; font-size: 0.8rem; font-weight: 700; color: var(--bf-ink, #1C1A17); }
.bf-persona-meta small { font-size: 0.68rem; color: var(--bf-muted, #7C7568); }
.bf-persona-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-accent, #C75D34); flex: none; }
.bf-persona-impersonating { font-size: 0.72rem; line-height: 1.4; color: var(--bf-ink, #1C1A17); background: rgba(199,93,52,0.10); border-radius: 9px; padding: 9px 11px; margin: 2px 4px 8px; }

/* ===== Hold-generator: list section + no-code builder modal ===== */
.bf-sand .bf-holdgen-wrap { margin-top: 26px; }
.bf-sand .bf-holdgen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bf-sand .bf-holdgen-head h2 { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--bf-ink); margin: 0; }
.bf-sand .bf-holdgen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bf-sand .bf-holdgen-card { background: #fff; border: 1px solid var(--bf-line); border-radius: 15px; padding: 16px; display: flex; gap: 13px; align-items: flex-start; }
.bf-sand .bf-holdgen-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex: none; }
.bf-sand .bf-holdgen-body { flex: 1; min-width: 0; }
.bf-sand .bf-holdgen-body strong { display: block; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 0.98rem; color: var(--bf-ink); }
.bf-sand .bf-holdgen-body small { display: block; font-size: 0.76rem; color: var(--bf-muted, #7C7568); margin-top: 3px; }
.bf-sand .bf-holdgen-link { display: inline-block; margin-top: 7px; font-size: 0.78rem; font-weight: 700; color: var(--bf-accent); }
.bf-sand .bf-holdgen-cardactions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.bf-sand .bf-holdgen-empty { background: #fff; border: 1px dashed var(--bf-line); border-radius: 14px; padding: 18px; color: var(--bf-muted, #7C7568); font-size: 0.85rem; }

.bf-holdgen-overlay { position: fixed; inset: 0; background: rgba(28,26,23,.55); display: flex; align-items: flex-start; justify-content: center; padding: 28px 20px; z-index: 89; overflow: auto; }
.bf-holdgen-modal { width: 720px; max-width: 100%; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(28,26,23,.25); font-family: "Hanken Grotesk", sans-serif; color: #1C1A17; }
.bf-holdgen-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #F1ECE2; }
.bf-holdgen-eyebrow { font-family: "Archivo", sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-accent, #C75D34); }
.bf-holdgen-modal-head h3 { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 20px; margin: 2px 0 0; }
.bf-holdgen-x { width: 32px; height: 32px; border: none; border-radius: 9px; background: var(--bf-surface3, #F6F2EA); color: var(--bf-muted, #7C7568); font-size: 18px; cursor: pointer; }
.bf-holdgen-modal-body { padding: 20px 24px; max-height: 72vh; overflow: auto; }
.bf-holdgen-modal-foot { display: flex; justify-content: flex-end; gap: 11px; padding: 16px 24px; border-top: 1px solid #F1ECE2; }
.bf-hg-row3 { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bf-hg-field { display: flex; flex-direction: column; gap: 6px; }
.bf-hg-field > span { font-size: 11px; color: #9A9484; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bf-hg-grow { flex: 2; min-width: 200px; }
.bf-hg-field input, .bf-holdgen-modal textarea { border: 1.5px solid #E8E2D6; border-radius: 9px; padding: 9px 11px; font-size: 13.5px; background: #FBFAF6; font-family: "Hanken Grotesk", sans-serif; color: #1C1A17; }
.bf-holdgen-modal textarea { font-family: "SF Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; width: 100%; }
.bf-hg-colors { display: flex; gap: 7px; padding-top: 3px; }
.bf-hg-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.bf-hg-color.active { border-color: #1C1A17; }
.bf-hg-deload { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 16px; padding: 12px 14px; background: #FBFAF6; border: 1px solid #EFEAE0; border-radius: 11px; cursor: pointer; }
.bf-hg-switch { width: 42px; height: 24px; border-radius: 99px; background: #D4CFC2; position: relative; flex: none; transition: background .14s; }
.bf-hg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .14s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.bf-hg-deload.on .bf-hg-switch { background: #5E9E72; }
.bf-hg-deload.on .bf-hg-switch::after { transform: translateX(18px); }
.bf-hg-deload-txt strong { display: block; font-size: 13.5px; }
.bf-hg-deload-txt small { font-size: 11.5px; color: var(--bf-muted, #7C7568); }
.bf-hg-sec { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; margin: 18px 0 10px; }
.bf-hg-sessions { display: flex; flex-direction: column; gap: 14px; }
.bf-hg-session { border: 1px solid var(--bf-line, #E5DFD2); border-radius: 13px; overflow: hidden; }
.bf-hg-session-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #FBFAF6; border-bottom: 1px solid #F1ECE2; }
.bf-hg-sname { flex: 1; border: none !important; background: transparent !important; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 14.5px; min-width: 0; padding: 4px 0 !important; }
.bf-hg-typetog { display: flex; gap: 4px; background: #F0ECE3; border-radius: 9px; padding: 3px; }
.bf-hg-typetog button { border: none; background: transparent; border-radius: 7px; padding: 6px 12px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 12.5px; color: var(--bf-muted, #7C7568); cursor: pointer; }
.bf-hg-typetog button.active { background: var(--bf-accent, #C75D34); color: #fff; }
.bf-hg-rm { border: none; background: transparent; color: #C9C3B5; font-size: 16px; cursor: pointer; }
.bf-hg-session-body { padding: 13px 14px; }
.bf-hg-tag { width: 100%; margin-bottom: 11px; }
.bf-hg-block { border: 1px solid #EFEAE0; border-radius: 10px; padding: 11px; margin-bottom: 9px; }
.bf-hg-block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.bf-hg-block-head input { flex: 1; border: none !important; background: transparent !important; font-weight: 700; font-size: 13px; min-width: 0; padding: 2px 0 !important; }
.bf-hg-addblock { background: transparent; border: 1.5px dashed #D4CFC2; color: var(--bf-muted, #7C7568); border-radius: 8px; padding: 7px 12px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 12px; cursor: pointer; }
.bf-hg-addsession { margin-top: 12px; width: 100%; background: #EEF1F8; border: 1px solid #DCE2F0; color: #3E5B8A; border-radius: 11px; padding: 12px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer; }

/* Kost recipe browse — "Budget / portion" price filter */
.kost-budget-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 6px; font-size:0.82rem; color:var(--kost-muted,#7C7568); }
.kost-budget-label { font-weight:700; }
.kost-budget-field { display:inline-flex; align-items:center; gap:6px; color:#1C1A17; font-weight:600; }
.kost-budget-field input { width:62px; border:1px solid var(--kost-line,#E5DFD2); border-radius:9px; padding:6px 8px; font-size:0.85rem; background:#fff; text-align:center; }
.kost-budget-clear { background:none; border:none; color:var(--kost-orange,#C75D34); font-weight:700; font-size:0.8rem; cursor:pointer; padding:4px 6px; }

/* ===== Kost recipe-browse + Tilpas & gem modals ===== */
.kost-modal-overlay { position: fixed; inset: 0; background: rgba(28,26,23,.5); display: flex; align-items: flex-start; justify-content: center; padding: 32px 20px; z-index: 88; overflow: auto; }
.kost-modal { width: 560px; max-width: 100%; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(28,26,23,.25); font-family: "Hanken Grotesk", sans-serif; color: #1C1A17; }
.kost-cust-modal { width: 520px; }
.kost-modal-head { padding: 18px 22px; border-bottom: 1px solid #F1ECE2; }
.kost-modal-titlerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kost-modal-titlerow strong { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 19px; }
.kost-modal-x { width: 30px; height: 30px; border: none; border-radius: 8px; background: var(--bf-surface3, #F6F2EA); color: var(--bf-muted, #7C7568); font-size: 17px; cursor: pointer; }
.kost-modal-body { padding: 12px 18px 18px; max-height: 60vh; overflow: auto; }
.kost-modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-top: 1px solid #F1ECE2; }
.kost-browse-search { display: flex; align-items: center; gap: 9px; background: var(--bf-surface3, #F6F2EA); border: 1.5px solid var(--bf-line, #E5DFD2); border-radius: 11px; padding: 10px 13px; }
.kost-browse-search input { flex: 1; border: none; background: transparent; font-size: 14px; color: #1C1A17; }
.kost-browse-search input:focus { outline: none; }
.kost-browse-budget { display: flex; align-items: center; gap: 12px; margin-top: 11px; }
.kost-browse-budget > span:first-child { font-size: 12px; font-weight: 700; color: #55503F; white-space: nowrap; }
.kost-browse-budget input[type="range"] { flex: 1; accent-color: var(--bf-accent, #C75D34); }
.kost-browse-budget-val { font-size: 12.5px; font-weight: 800; color: var(--bf-accent, #C75D34); white-space: nowrap; min-width: 64px; text-align: right; }
.kost-browse-count { font-size: 11px; color: #9A9484; font-weight: 700; padding: 6px 2px 8px; }
.kost-browse-row { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid #F1ECE2; align-items: flex-start; width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-bottom: none; cursor: pointer; }
.kost-browse-main { flex: 1; min-width: 0; }
.kost-browse-main strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; }
.kost-browse-main small { display: block; font-size: 11.5px; color: #9A9484; margin-top: 3px; }
.kost-browse-ings { color: #B3AC9C !important; }
.kost-browse-match { display: inline-block; font-size: 11px; color: #A8431F; background: rgba(199,93,52,.08); border-radius: 6px; padding: 3px 7px; margin-top: 5px; }
.kost-browse-price { text-align: right; flex: none; }
.kost-browse-price strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 15px; color: #3F5A3C; }
.kost-browse-price small { display: block; font-size: 10px; color: #B3AC9C; }
.kost-browse-empty { font-size: 13px; color: #9A9484; padding: 14px 2px; }
.kost-browse-open-btn { background: #fff; border: 1.5px solid var(--kost-line,#E5DFD2); color: var(--bf-accent, #C75D34); border-radius: 9px; padding: 6px 11px; font-weight: 700; font-size: 0.8rem; cursor: pointer; margin-left: auto; }
/* Tilpas & gem */
.kost-cust-head { display: flex; align-items: center; gap: 13px; }
.kost-cust-eyebrow { font-family: "Archivo", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-accent, #C75D34); flex: none; }
.kost-cust-nameinput { flex: 1; min-width: 0; border: none; background: transparent; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 17px; color: #1C1A17; }
.kost-cust-nameinput:focus { outline: none; }
.kost-cust-sec { font-size: 11px; color: #9A9484; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 4px 0 8px; }
.kost-cust-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.kost-cust-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.kost-cust-step { display: flex; align-items: center; gap: 7px; background: var(--bf-surface3, #F6F2EA); border-radius: 9px; padding: 3px; }
.kost-cust-step button { width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 1px solid var(--bf-line, #E5DFD2); color: #9A9484; font-weight: 800; cursor: pointer; }
.kost-cust-pct { font-size: 12px; font-weight: 700; min-width: 40px; text-align: center; }
.kost-cust-kcal { font-size: 12px; color: #55503F; font-weight: 600; min-width: 56px; text-align: right; }
.kost-cust-rm { background: none; border: none; color: #C9C3B5; font-size: 15px; cursor: pointer; }
.kost-cust-add { margin-top: 10px; background: #FBF6EE; border: 1px solid #ECDFC9; border-radius: 11px; padding: 11px; }
.kost-cust-addresults { max-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.kost-cust-addrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #fff; border: 1px solid #EFEAE0; cursor: pointer; text-align: left; }
.kost-cust-addrow span:first-child { flex: 1; min-width: 0; }
.kost-cust-addrow strong { display: block; font-size: 13px; font-weight: 600; }
.kost-cust-addrow small { font-size: 10.5px; color: #9A9484; }
.kost-cust-addplus { width: 24px; height: 24px; border-radius: 7px; background: rgba(199,93,52,.1); color: var(--bf-accent, #C75D34); display: grid; place-items: center; font-weight: 800; flex: none; }
.kost-cust-addbtn { margin-top: 12px; width: 100%; background: transparent; border: 1.5px dashed #CFC8B8; color: var(--bf-muted, #7C7568); border-radius: 10px; padding: 11px; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; }
.kost-cust-total span { font-size: 12px; color: #9A9484; }
.kost-cust-total strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 20px; margin: 0 4px; }
.kost-cust-actions { display: flex; gap: 10px; }
.kost-sheet-tilpas { margin-top: 10px; background: rgba(199,93,52,.1); border: none; color: var(--bf-accent, #C75D34); border-radius: 9px; padding: 9px 13px; font-weight: 700; font-size: 0.82rem; cursor: pointer; }

/* Workout-bibliotek pagination */
.bf-wl-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 0.85rem; font-weight: 600; color: var(--ink, #1C1A17); }
.bf-wl-pager button[disabled] { opacity: 0.4; cursor: default; }

/* Workout-library collections ("gym collections") */
.bf-wl-collections { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.bf-wl-coll-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border, #D8D2C4); background: var(--surface, #fff); color: var(--ink, #1C1A17); font-size: 0.85rem; font-weight: 600; cursor: pointer; line-height: 1.4; }
.bf-wl-coll-chip span { background: rgba(0, 0, 0, 0.08); border-radius: 999px; padding: 0 7px; font-size: 0.76rem; font-weight: 700; }
.bf-wl-coll-chip.is-active { background: var(--accent, #B4794A); color: #fff; border-color: transparent; }
.bf-wl-coll-chip.is-active span { background: rgba(255, 255, 255, 0.28); }
.bf-wl-coll-chip.is-hidden { opacity: 0.72; border-style: dashed; }
.bf-wl-coll-chip.is-private { opacity: 0.82; border-style: dashed; }
.bf-wl-hidden-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; opacity: 0.85; margin-left: 4px; cursor: pointer; }

/* Per-gym library ownership (Admin-Admin) */
.bf-wl-gyms { display: flex; flex-direction: column; gap: 6px; padding: 11px 14px; margin: 0 0 14px; background: rgba(0, 0, 0, 0.035); border: 1px solid var(--border, #D8D2C4); border-radius: 12px; }
.bf-wl-gyms > .eyebrow { font-size: 0.7rem; letter-spacing: 0.08em; opacity: 0.7; }
.bf-wl-gyms-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bf-wl-gym-add { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.bf-wl-gym-add input { padding: 5px 10px; border: 1px solid var(--border, #D8D2C4); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #1C1A17); font-size: 0.85rem; min-width: 150px; }
.bf-wl-own { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.bf-wl-own.is-global { background: rgba(76, 122, 92, 0.14); color: #2f5a3f; }
.bf-wl-own.is-gym { background: var(--accent-soft, #F3E7D8); color: var(--accent-strong, #8a4f2c); }
.bf-wl-gym-del { border: 0; background: transparent; color: inherit; font-size: 0.72rem; font-weight: 700; opacity: 0.55; cursor: pointer; padding: 0 0 0 2px; line-height: 1; }
.bf-wl-gym-del:hover { opacity: 1; }
.bf-wl-ownctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 0.8rem; }
.bf-wl-ownctl label { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; opacity: 0.85; }
.bf-wl-ownctl select { padding: 4px 9px; border: 1px solid var(--border, #D8D2C4); border-radius: 8px; background: var(--surface, #fff); color: var(--ink, #1C1A17); font-size: 0.8rem; }
.bf-wl-coll-manage { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 13px; margin: 0 0 14px; background: rgba(0, 0, 0, 0.035); border-radius: 10px; font-size: 0.85rem; }
.bf-wl-coll-manage > span { margin-right: auto; }
.bf-wl-bulkbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 13px; margin: 0 0 12px; background: var(--accent-soft, #F3E7D8); border: 1px solid var(--accent, #B4794A); border-radius: 10px; font-size: 0.88rem; }
.bf-wl-bulkbar select { min-width: 220px; }
.bf-wl-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; opacity: 0.85; margin: 0 0 9px; cursor: pointer; }
.bf-wl-check { display: inline-flex; align-items: center; }
.bf-wl-check input { width: 17px; height: 17px; cursor: pointer; }
.exercise-row.is-selected { background: var(--accent-soft, #F3E7D8); border-color: var(--accent, #B4794A); }

/* GDPR consent modal (client startup + health-data gate) */
.bf-consent-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 18, 15, 0.55); backdrop-filter: blur(3px); padding: 20px;
}
.bf-consent-modal {
  background: #FBF8F2; color: #1C1A17; border: 1px solid rgba(28,26,23,0.12);
  border-radius: 18px; padding: 26px 24px; max-width: 460px; width: 100%;
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}
.bf-consent-modal h2 { margin: 0 0 12px; font-size: 1.2rem; }
.bf-consent-modal p { margin: 0 0 18px; line-height: 1.5; font-size: 0.95rem; opacity: 0.9; }
.bf-consent-modal .action-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================= Kost app: responsive + light-theme meal form =================
   The kost frame is ~468px wide even on DESKTOP, so viewport media queries can't
   protect it — the wide dark-portal meal grids must be re-scoped under .kost-app
   (always stacked + light colors), then widened again only when the frame itself
   grows at the desktop breakpoint below. */

/* Always-stacked layouts inside the kost frame */
.kost-app .meal-source-grid { grid-template-columns: minmax(0, 1fr); }
.kost-app .meal-choice-form,
.kost-app .meal-choice-form.recipe-search-form { grid-template-columns: minmax(0, 1fr); }
.kost-app .portal-meal-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kost-app .portal-meal-input-grid label:first-child,
.kost-app .portal-meal-input-grid button { grid-column: 1 / -1; }
.kost-app .portal-meal-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.kost-app .portal-meal-row .meal-thumb { grid-column: 1 / -1; }
.kost-app .portal-meal-row p { grid-column: 1 / -1; margin: 0; }
.kost-app .portal-meal-row .meal-macros { flex-wrap: wrap; }
.kost-app .portal-meal-row .portal-meal-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.kost-app .quick-recipe-chips { flex-wrap: wrap; overflow-x: visible; }

/* Light restyle: the meal form was designed for the dark portal — remap to kost */
.kost-app .portal-meal-form { border-top: 0; padding: 0; }
.kost-app .meal-source-card { background: #fff; border: 1px solid var(--kost-line); border-radius: 14px; }
.kost-app .meal-source-card.planned { background: linear-gradient(135deg, rgba(199, 93, 52, 0.08), #fff 44%); }
.kost-app .meal-source-card strong,
.kost-app .portal-meal-form strong { color: var(--kost-ink); }
.kost-app .portal-meal-form .portal-kicker { color: var(--kost-orange); }
.kost-app .portal-meal-input-grid label,
.kost-app .meal-choice-form label { color: var(--kost-muted); }
.kost-app .portal-meal-input-grid input,
.kost-app .portal-meal-input-grid select,
.kost-app .meal-choice-form input,
.kost-app .meal-choice-form select {
  background: #fff; border: 1px solid var(--kost-line); color: var(--kost-ink); border-radius: 10px;
}
.kost-app .portal-meal-type-grid span { background: #fff; border-color: var(--kost-line); color: var(--kost-muted); }
.kost-app .portal-meal-type-grid input:checked + span { background: rgba(199, 93, 52, 0.1); border-color: var(--kost-orange); color: var(--kost-orange-d); }
.kost-app .quick-recipe-chips button { background: #fff; border-color: rgba(199, 93, 52, 0.4); color: var(--kost-orange-d); }
.kost-app .planned-meal-list button { background: #fff; border: 1px solid var(--kost-line); color: var(--kost-ink); }
.kost-app .planned-meal-list button span,
.kost-app .planned-meal-list button strong,
.kost-app .planned-meal-list button small { color: inherit; }
.kost-app .portal-meal-row { border-bottom-color: var(--kost-line); padding: 12px 0; }
.kost-app .meal-number span, .kost-app .meal-number small { color: var(--kost-muted); }
.kost-app .meal-macros span { color: var(--kost-muted); }

/* Desktop: let the kost app use the screen width */
@media (min-width: 980px) {
  .kost-app { max-width: 1040px; border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16); }
  .kost-main { padding: 4px 28px 24px; }
  .kost-head { padding: 24px 28px 10px; }
  .kost-meals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kost-app .meal-source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kost-app .portal-meal-input-grid { grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(80px, 0.8fr)); align-items: end; }
  .kost-app .portal-meal-input-grid label:first-child { grid-column: auto; }
  .kost-app .portal-meal-row { grid-template-columns: 96px 110px minmax(0, 1fr) auto auto minmax(0, auto); align-items: center; }
  .kost-app .portal-meal-row .meal-thumb { grid-column: auto; }
  .kost-app .portal-meal-row p { grid-column: auto; }
  .kost-app .portal-meal-row .portal-meal-actions { grid-column: auto; justify-content: flex-end; }
  .kost-hero { padding: 24px 28px; }
  .kost-week-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Madplan day rows: light kost colors (they carried dark-portal styling) */
.kost-app .today-meal-plan-row { border-color: var(--kost-line); background: #fff; color: var(--kost-ink); }
.kost-app .today-meal-plan-row:hover, .kost-app .today-meal-plan-row.is-logged { border-color: rgba(199, 93, 52, 0.5); background: rgba(199, 93, 52, 0.06); }
.kost-app .today-meal-plan-row b { color: var(--kost-orange); }
.kost-app .todays-meal-plan-card .planned-day-summary strong,
.kost-app .planned-day-summary span { color: var(--kost-ink); }

/* ============ App-wide Lys/Mørk theme switcher (all roles) ============ */
.theme-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
  color: inherit; font-weight: 600; font-size: 0.86rem; text-align: left;
}
.theme-toggle:hover { border-color: rgba(255, 90, 18, 0.5); }
.bf-sand .theme-toggle { border-color: var(--border, #D8D2C4); background: #fff; color: var(--bf-ink, #1C1A17); }
.bf-sand .theme-toggle:hover { border-color: var(--bf-accent, #C75D34); }

/* The sand shell now wraps the Kost pages too — its global ink/button rules must
   not repaint kost's dark/orange pills (the black-on-black gotcha: !important is
   required to beat the high-specificity `.bf-sand .main-content button:not(...)`). */
.bf-sand .main-content .kost-app .kost-step-dark,
.bf-sand .main-content .kost-app .kost-view-toggle button.active,
.bf-sand .main-content .kost-app .kost-meal-log,
.bf-sand .main-content .kost-app .meal-action-log { color: #fff !important; }
.bf-sand .main-content .kost-app .kost-hero { color: #fff; }
.bf-sand .main-content .kost-app .kost-hero-rem { color: #86b072 !important; }
.bf-sand .main-content .kost-app .kost-ring-center strong { color: #fff !important; }
.bf-sand .main-content .kost-app .kost-ring-center small { color: rgba(255, 255, 255, 0.6) !important; }
.bf-sand .main-content .kost-app .kost-macro-p strong { color: var(--kost-orange) !important; }
.bf-sand .main-content .kost-app .kost-macro-k strong { color: #86b072 !important; }
.bf-sand .main-content .kost-app .kost-macro-f strong { color: #d6a857 !important; }
.bf-sand .main-content .kost-app .kost-hero-label { color: var(--kost-orange) !important; }

/* ============ Dark theme: content follows the shell ============ */
/* 1) Kost pages get a real dark skin (they were always light): flip the scoped
   kost vars, keep the hero/step near-black (their BG is --kost-ink), and remap
   every hardcoded-white surface to the dark card color. */
.app-shell.bf-dark .kost-app {
  --kost-sand: #16130F; --kost-card: #211D18; --kost-ink: #F2EDE4;
  --kost-muted: #A79D8F; --kost-line: #37312A;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.app-shell.bf-dark .kost-app .kost-hero { background: #0D0B09; }
.app-shell.bf-dark .kost-app .kost-step-dark { background: #0D0B09; border-color: #0D0B09; color: #fff; }
.app-shell.bf-dark .kost-app :is(
  .kost-tabbar, .kost-own-toggle, .kost-view-toggle, .kost-head-avatar, .kost-step,
  .kost-meal-card, .kost-recipe-row, .kost-filter-chip, .kost-portion button,
  .meal-source-card, .today-meal-plan-row, .planned-meal-list button,
  .portal-meal-type-grid span, .quick-recipe-chips button,
  .own-recipe-card, .recipe-card, .resource-card, .recipe-search-card, .recipe-filter-strip,
  .shopping-view-tab, .shopping-static-row, .kost-browse-open-btn,
  .button-secondary, .button-ghost
) { background: var(--kost-card); }
.app-shell.bf-dark .kost-app .portal-link-list :is(a, button) { background: var(--kost-card); }
.app-shell.bf-dark .kost-app :is(input, select, textarea),
.app-shell.bf-dark .kost-app .kost-search input { background: #1A1712; color: var(--kost-ink); border-color: var(--kost-line); }
.app-shell.bf-dark .kost-app .kost-view-toggle button.active { background: var(--kost-orange); color: #fff; }
.app-shell.bf-dark .kost-app .meal-source-card.planned { background: linear-gradient(135deg, rgba(199, 93, 52, 0.16), var(--kost-card) 44%); }
.app-shell.bf-dark .kost-app .kost-macro small { color: rgba(242, 237, 228, 0.5); }
.app-shell.bf-dark .kost-app .kost-week-day.is-today { border-color: var(--kost-orange); }

/* 2) Same MENU METRICS in both themes — not just fonts but the exact same
   heights/paddings, so the theme toggle stays under the cursor when clicked
   (sand reference: sidebar 18/14, brand-lockup 4px 8px pad, link rows 50px). */
.app-shell:not(.bf-sand) .sidebar { padding: 18px 14px; }
.app-shell:not(.bf-sand) .sidebar .brand-lockup { padding: 4px 8px; margin-bottom: 20px; }
.app-shell:not(.bf-sand) .sidebar-link {
  min-height: 48px; padding: 10px 11px; gap: 11px;
  font-size: 0.84rem; font-weight: 600;
}
.app-shell:not(.bf-sand) .sidebar .sidebar-section-label { font-size: 0.66rem; }
.app-shell:not(.bf-sand) .sidebar-icon { width: 20px; font-size: 0.98rem; }
.app-shell:not(.bf-sand) .sidebar .sidebar-emoji { font-size: 0.98rem; line-height: 1; display: inline-block; }

/* Client exercise database filter bar */
.client-ex-filterbar { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.client-ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.client-ex-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.client-ex-tools input, .client-ex-tools select { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: inherit; min-width: 200px; }
.bf-sand .client-ex-tools input, .bf-sand .client-ex-tools select,
.client-sand .client-ex-tools input, .client-sand .client-ex-tools select { background: #fff; border-color: var(--bf-line, #D8D2C4); color: var(--bf-ink, #1C1A17); }
.client-ex-card { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px; }
.client-ex-card small { opacity: 0.75; }
/* the kost chip style works on the dark shell too */
.app-shell:not(.bf-sand) .kost-filter-chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(245,241,235,0.8); }
.app-shell:not(.bf-sand) .kost-filter-chip.active { background: var(--accent, #FF5A12); border-color: transparent; color: #fff; }
.client-sand .kost-filter-chip.active, .bf-sand .kost-filter-chip.active { background: var(--bf-accent, #C75D34); border-color: transparent; color: #fff; }
/* v568 (Márta: "Knapperne ikke synlige nok"): the chip BASE is hardcoded #fff and
   the dark override above is scoped to .kost-app alone — the Øvelser tab reuses
   the class outside .kost-app, so its inactive chips rendered white-on-white in
   dark. Token-driven inside the sand shell; the ink catch-all is re-beaten. */
.bf-sand .kost-filter-chip, .client-sand .kost-filter-chip {
  background: var(--bf-surface, #fff);
  border-color: var(--bf-line, #E5DFD2);
  color: var(--bf-muted, #6F6857);
}
.bf-sand .main-content .kost-filter-chip { color: var(--bf-muted, #6F6857); }
.bf-sand .main-content .kost-filter-chip.active,
.client-sand .main-content .kost-filter-chip.active { background: var(--bf-accent, #C75D34); color: #fff; }
/* Belt & braces for the wizard CTA Márta photographed as fill-less. */
.wizard-stepper .button-primary { background: var(--bf-accent, #C75D34); color: #fff; }

/* Muscle-group checkbox filter (co-occurrence gated) */
.client-ex-muscles { display: flex; flex-wrap: wrap; gap: 7px; }
.client-ex-muscle {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
  color: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer;
}
.client-ex-muscle .cxm-box {
  width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.3);
  display: grid; place-items: center; font-size: 0.68rem; line-height: 1; background: transparent;
}
.client-ex-muscle.active { border-color: var(--accent, #FF5A12); }
.client-ex-muscle.active .cxm-box { background: var(--accent, #FF5A12); border-color: var(--accent, #FF5A12); color: #fff; }
.client-ex-muscle:disabled { opacity: 0.32; cursor: not-allowed; }
.bf-sand .client-ex-muscle, .client-sand .client-ex-muscle { background: #fff; border-color: var(--bf-line, #D8D2C4); color: var(--bf-ink, #1C1A17); }
.bf-sand .client-ex-muscle .cxm-box, .client-sand .client-ex-muscle .cxm-box { border-color: var(--bf-line, #D8D2C4); }
.bf-sand .client-ex-muscle.active, .client-sand .client-ex-muscle.active { border-color: var(--bf-accent, #C75D34); }
.bf-sand .client-ex-muscle.active .cxm-box, .client-sand .client-ex-muscle.active .cxm-box { background: var(--bf-accent, #C75D34); border-color: var(--bf-accent, #C75D34); }
.client-ex-summary { margin: 2px 0 0; font-size: 0.84rem; line-height: 1.4; opacity: 0.85; }

/* Workout editor: real calendar placements under the Dato field */
.workout-cal-dates { display: block; margin-top: 5px; font-size: 0.76rem; opacity: 0.8; line-height: 1.5; }
.workout-cal-dates b { font-weight: 600; opacity: 0.75; }
.workout-cal-dates b.is-upcoming { color: var(--bf-accent, #C75D34); opacity: 1; font-weight: 700; }

/* Startup-wizard cards in the sand theme: the generic .phone-card sand override
   lightens the card bg, leaving the dark-theme white-alpha text + accent-on-accent
   CTA unreadable. Re-anchor text to ink and force white on the orange CTA. */
.client-sand .main-content :is(.phone-startup-card, .startup-card) h2 { color: var(--bf-ink); }
.client-sand .main-content :is(.phone-startup-card, .startup-card) p,
.client-sand .main-content :is(.phone-startup-card, .startup-card) small { color: var(--bf-muted); }
.client-sand .main-content .phone-startup-card a,
.client-sand .main-content .startup-card a { color: #fff !important; }

/* Wizard photo upload: saved/selected preview thumb */
.native-photo-upload .upload-preview { display: block; width: 100%; max-width: 130px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 90, 18, 0.35); margin-top: 6px; }

/* Coach schedule rows: open/edit the underlying workout */
.program-schedule-action-open, .program-schedule-action-edit {
  min-width: 30px; min-height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bf-line, rgba(255,255,255,0.18)); background: transparent; color: inherit;
  font-size: 0.85rem; line-height: 1;
}
.program-schedule-action-open:hover, .program-schedule-action-edit:hover { border-color: var(--bf-accent, #C75D34); color: var(--bf-accent, #C75D34); }
.program-schedule-title-link {
  border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; text-decoration: none;
}
.program-schedule-title-link:hover { color: var(--bf-accent, #C75D34); text-decoration: underline; }

/* ================= Dark design (.bf-dark): same design system, dark palette =====
   Dark mode no longer strips the bf-sand design — it keeps every component and
   flips the palette variables. Hardcoded light backgrounds get generated
   overrides in the block after this one. */
.bf-sand.bf-dark {
  --bf-sand:#141210; --bf-surface:#1E1B18; --bf-surface2:#26221D; --bf-surface3:#2B2620;
  --bf-dark:#0D0B09; --bf-ink:#F2EDE4; --bf-muted:#A79D8F; --bf-muted2:#C9C0B2; --bf-line:#37312A;
  /* Same self-reference bug as .bf-sand above — plain values. */
  --bf-accent:#D8703F; --bf-accent-d:#C75D34; --bf-green:#7FA579; --bf-green-bg:#222D20;
  --bf-gold:#D8B45E; --bf-gold-bg:#332B14; --bf-danger:#E06456; --bf-danger-bg:#3A1F1B;
  --bg:#141210; --surface:#1E1B18; --surface-strong:#1E1B18; --surface2:#26221D;
  --ink:#F2EDE4; --muted:#A79D8F; --line:#37312A;
  --accent:var(--bf-accent, #D8703F); --accent-dark:var(--bf-accent, #C75D34); --success:#7FA579; --danger:#E06456; --gold:#D8B45E;
  --shadow:0 12px 34px rgba(0,0,0,0.45);
  background: var(--bf-sand);
}

/* ===== AUTO-GENERATED dark-mode palette overrides (paren-safe) ===== */
.bf-sand.bf-dark .workout-type-tile { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .workout-type-tile .wt-ic { background:var(--bf-surface2); }
.bf-sand.bf-dark .client-weekday { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-weekday .cwd-title { color:var(--bf-ink); }
.bf-sand.bf-dark .client-weekday .cwd-block b { color:var(--bf-ink); }
.bf-sand.bf-dark .client-weekday.is-rest { background:var(--bf-surface2); }
.bf-sand.bf-dark .workout-type-tile.private-pt-track { background:var(--bf-surface); }
.bf-sand.bf-dark .workout-type-tile.locked { background:var(--bf-surface2); }
.bf-sand.bf-dark .meal-choice-form select option { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .portal-meal-input-grid select option { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .settings-fields-grid select option { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .progress-log-fields select option { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .nutrition-locale-switch button.active { color:var(--bf-ink); }
.bf-sand.bf-dark .client-language-select select option { background:var(--bf-surface); color:var(--bf-ink); }
/* NO dark-mode background override on the flags. They are drawn ENTIRELY with
   `background` gradients (Dannebrog, the Hungarian tricolour, the Union Jack),
   so a blanket `background: var(--bf-surface)` erased the flag itself and left
   a flat dark square — the "language picture can't be seen" bug. National
   colours are fixed in both themes; only the hairline follows the theme. */
.bf-sand.bf-dark .client-language-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.34); }
.bf-sand.bf-dark .client-language-select-phone .client-language-control { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-app-header h1 { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-daily-track-tile { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark /* Cards with a workout set: light card with a subtle warm tint + orange accent
   border so they still read as "active" without going dark. */
.phone-daily-track-tile.has-workout { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-card { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-mini-tile { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-step-card strong { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-water-card strong { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-water-glasses button { background:var(--bf-surface); }
/* Same trap as the flags: the whole ring IS a background (radial hole punched
   out of a conic progress arc), so `background: var(--bf-surface)` flattened it
   into a plain circle. Re-declare it with a dark centre instead of erasing it. */
.bf-sand.bf-dark .phone-goal-ring {
  background:
    radial-gradient(circle, var(--bf-surface) 0 55%, transparent 56%),
    conic-gradient(var(--bf-accent) 0 calc(var(--goal) * 1%), rgba(255, 255, 255, 0.14) calc(var(--goal) * 1%) 100%);
}
.bf-sand.bf-dark .phone-goal-ring strong { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-nutrition-main strong { color:var(--bf-ink); }
.bf-sand.bf-dark button.phone-primary-action { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-food-card button { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-input-panel { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-input-panel input { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-panel-list li strong { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-meal-row strong { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-meal-row-meta { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-meal-row-actions button { background:var(--bf-surface); }
.bf-sand.bf-dark .phone-planned-meal-row small { color:var(--bf-ink); }
.bf-sand.bf-dark .phone-quick-actions button { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .block-card-btn { background:var(--bf-surface); }
.bf-sand.bf-dark .ow-prev-owod .bf-owod-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-show-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-tool-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-tool-form input { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-tool-form select { background:var(--bf-surface); }
.bf-sand.bf-dark /* inputs + buttons */
.nutrition-light :is(input, select, textarea) { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light :is(.button-secondary, .button-ghost) { background:var(--bf-surface); }
.bf-sand.bf-dark /* list rows */
.nutrition-light .coach-list-row { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light .portal-link-list :is(a, button) { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light .mp-day { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light .mp-mini { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light .mp-db-row { background:var(--bf-surface); }
.bf-sand.bf-dark /* ---- overlays ---- */
.nutrition-light .mp-overlay-panel { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light .mp-overlay-head { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light :is(.mp-ov-shop-row, .mp-ov-assign-row, .mp-ov-cook-row) { background:var(--bf-surface); }
.bf-sand.bf-dark .nutrition-light .meal-variant-editor :is(input, textarea, select) { background:var(--bf-surface); }
.bf-sand.bf-dark .mp-calc-seg button { background:var(--bf-surface); }
.bf-sand.bf-dark .main-content .lead-card { background:var(--bf-surface); }
.bf-sand.bf-dark .main-content :is(.button-secondary,.button-ghost,.btn-secondary) { background:var(--bf-surface); }
.bf-sand.bf-dark .main-content .coach-donut > div { background:var(--bf-surface); }
.bf-sand.bf-dark .sidebar .sidebar-link:hover { background:var(--bf-surface2); }
/* User identity card at the bottom of the sidebar (replaces the beast-mode card).
   NB: the comment used to sit INSIDE the selector, which silently produced
   `.bf-sand.bf-dark .bf-sand .sidebar .sidebar-user-card` — a selector that can
   never match, so the card kept its hardcoded white background in dark mode. */
.bf-sand.bf-dark .sidebar .sidebar-user-card { background:var(--bf-surface); }
.bf-sand.bf-dark .sidebar .bf-role-switcher { background:var(--bf-surface); }
.bf-sand.bf-dark .main-content .coach-leads-page .lead-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-toggle-thumb { background:var(--bf-surface); }
.bf-sand.bf-dark .client-sand .main-content :is(.button-secondary,.phone-secondary-btn) { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-kpi-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-dash-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-sched-row { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-btn-ghost { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-pill-tabs button { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-search { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-toolbar .coach-filter-select { background:var(--bf-surface); }
.bf-sand.bf-dark /* ===== Clients table ===== */
.bf-sand .bf-ctable { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-ctable-row:hover { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-row-useas { background:var(--bf-surface); }
/* The status badge keeps a bright green background in BOTH themes, so its text
   must stay dark — the blanket dark-mode ink override made it light-on-green
   (1.3:1, unreadable). Only the muted variant follows the theme ink. */
.bf-sand.bf-dark .bf-cd-badge { color:#1C1A17; }
.bf-sand.bf-dark .bf-cd-badge.is-muted { color:var(--bf-gold); }
.bf-sand.bf-dark .bf-cd-stat { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-week-cell { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-week-cell.is-planned { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-next-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-cfg-banner { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-cfg-row-ic { background:var(--bf-surface2); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-switch::after { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-tools-list button:hover { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-prog-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-prog-level { background:var(--bf-surface2); }
.bf-sand.bf-dark /* Per-hold weekly Ugeplan (mockup) */
.bf-sand .bf-uge { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-ic { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-uge-weekrow button { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-x { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-tab { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-pubtoggle { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-uge-fill input[type="date"] { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-fill button { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-day { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-day.is-set { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-uge-day.is-picking select { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-prog-stat { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-req-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-tile { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-topbar-search { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-persona-pill { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-persona-menu { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-persona-divider { background:var(--bf-surface3); }
.bf-sand.bf-dark .bf-persona-row:hover { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-runner-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-runner-name { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-block { border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-runner-block-title { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-tv-bt { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-block pre { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark /* Light theme for the TV display */
.bf-runner-tv.is-light { background:var(--bf-sand); color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-left button { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-close { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-clockbar { background:var(--bf-surface); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-title { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-clock.tv { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-block { background:var(--bf-surface); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-bt { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-runner-tv.is-light .bf-runner-tv-block pre { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-team-role-ic { background:var(--bf-surface2); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-kanban-col { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-task-card { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-settings-tabs button { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-set-switch::after { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-units-toggle button { background:var(--bf-surface); }
.bf-sand.bf-dark .display-mode.is-light .display-blocks .workout-block { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .display-mode.is-light .display-blocks .workout-block * { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-persona-pill { background:var(--bf-surface); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-persona-cur { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-persona-menu { background:var(--bf-surface); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-persona-meta strong { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-persona-impersonating { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-holdgen-card { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-holdgen-empty { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-holdgen-modal { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .bf-holdgen-x { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-hg-field input { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .bf-holdgen-modal textarea { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .bf-hg-deload { background:var(--bf-surface); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-hg-switch::after { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-hg-session { border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-hg-session-head { background:var(--bf-surface); }
.bf-sand.bf-dark .bf-hg-typetog { background:var(--bf-surface2); }
.bf-sand.bf-dark .bf-hg-block { border-color:var(--bf-line); }
.bf-sand.bf-dark /* Workout-bibliotek pagination */
.bf-wl-pager { color:var(--bf-ink); }
.bf-sand.bf-dark .bf-wl-coll-chip { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark /* Per-gym library ownership (Admin-Admin) */
.bf-wl-gyms { border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-wl-gym-add input { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-wl-ownctl select { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .bf-consent-modal { background:var(--bf-surface); color:var(--bf-ink); }
.bf-sand.bf-dark .theme-toggle { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-ex-tools input { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-ex-tools select { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-sand .client-ex-tools input { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-sand .client-ex-tools select { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-ex-muscle { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-sand .client-ex-muscle { background:var(--bf-surface); color:var(--bf-ink); border-color:var(--bf-line); }
.bf-sand.bf-dark .client-ex-muscle .cxm-box { border-color:var(--bf-line); }
.bf-sand.bf-dark .client-sand .client-ex-muscle .cxm-box { border-color:var(--bf-line); }

/* Coach nutrition/madplan editor is its OWN var scope (.nutrition-light) —
   flip its palette under dark so it matches the rest of the app. */
.bf-dark .nutrition-light {
  --bg:#141210; --surface:#1E1B18; --surface-strong:#26221D;
  --surface2:#26221D; --surface3:#2B2620; --placeholder:#8A8172;
  --tint-accent:rgba(216,112,63,0.14); --tint-danger:rgba(224,100,86,0.16);
  --tint-danger-line:rgba(224,100,86,0.4); --tint-neutral:#2B2620;
  --danger-ink:#E06456; --neutral-ink:#A79D8F;
  --ink:#F2EDE4; --muted:#A79D8F; --line:#37312A;
  --accent:var(--bf-accent, #D8703F); --accent-dark:var(--bf-accent, #C75D34); --success:#7FA579; --danger:#E06456;
  --shadow:0 12px 34px rgba(0,0,0,0.45);
  color-scheme: dark;
}
/* Any remaining hardcoded-white button/surface inside the dark shell */
.bf-sand.bf-dark .main-content :is(.button-secondary, .button-ghost, .btn-secondary):not(.button-primary) { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand.bf-dark .main-content :is(.button-secondary, .btn-secondary):hover { background: var(--bf-surface2); }
.bf-dark .nutrition-light :is(.mp-mini, .mp-db-row, .mp-overlay-panel, .mp-overlay-head, .meal-variant-editor input, .meal-variant-editor textarea, .meal-variant-editor select) { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* Explicit dark fixes for elements whose light bg came from an ink/hardcoded value */
/* bf-btn-dark uses var(--bf-ink) as BACKGROUND — that flips light in dark mode.
   Keep it a dark filled button with white text so it still reads as "active". */
.bf-sand.bf-dark .bf-btn-dark,
.bf-sand.bf-dark .bf-uge-tab.is-active { background: var(--bf-dark, #0D0B09) !important; color: #fff !important; }
.bf-sand.bf-dark .bf-ctable,
.bf-sand.bf-dark .bf-ctable-head { background: var(--bf-surface) !important; }
.bf-sand.bf-dark .bf-ctable-row:hover { background: var(--bf-surface2) !important; }

/* Client dark leaks: tooltip (ink-bg flips light) + check-in form container */
.bf-dark .chart-tooltip, .bf-sand.bf-dark .main-content .chart-tooltip { background: var(--bf-dark, #0D0B09) !important; color: #fff !important; border-color: var(--bf-line) !important; }
.bf-sand.bf-dark .main-content :is(.checkin-form, .checkin-card, .checkin-question) { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }

/* Opskrifter "Vis flere" pagination button */
.kost-showmore { width: 100%; margin-top: 6px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--kost-line, #E4DDCF); background: var(--kost-card, #fff); color: var(--kost-ink, #1C1A17); font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.kost-showmore:hover { border-color: var(--kost-orange, #C75D34); color: var(--kost-orange, #C75D34); }

/* Progress photos: date field + angle-grouped comparison gallery */
.progress-photo-hint { margin: 0 0 12px; font-size: 0.82rem; opacity: 0.75; line-height: 1.4; }
.progress-photo-date { display: grid; gap: 6px; margin: 10px 0 4px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; }
.progress-photo-date input { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--bf-line, rgba(255,255,255,0.16)); background: var(--bf-surface, rgba(255,255,255,0.05)); color: inherit; }

.progress-compare-card { display: grid; gap: 16px; }
.progress-compare-row { display: grid; gap: 8px; }
.progress-compare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--bf-line, rgba(255,255,255,0.12)); padding-bottom: 6px; }
.progress-compare-head small { opacity: 0.7; }
.progress-compare-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.progress-compare-item { flex: 0 0 auto; width: 150px; margin: 0; scroll-snap-align: start; }
.progress-compare-item img { width: 150px; height: 200px; object-fit: cover; border-radius: 12px; border: 1px solid var(--bf-line, rgba(255,255,255,0.14)); background: #000; display: block; }
.progress-compare-item figcaption { margin-top: 5px; text-align: center; font-size: 0.78rem; font-weight: 700; opacity: 0.85; }
@media (min-width: 720px) { .progress-compare-item, .progress-compare-item img { width: 180px; } .progress-compare-item img { height: 240px; } }

/* Strength progression (estimated 1RM, absolute + relative) */
.strength-prog-card { display: grid; gap: 10px; }
.strength-prog-hint { margin: 0 0 4px; font-size: 0.82rem; opacity: 0.75; line-height: 1.4; }
.strength-prog-list { display: grid; gap: 8px; }
.strength-prog-ex { border: 1px solid var(--bf-line, rgba(255,255,255,0.12)); border-radius: 12px; overflow: hidden; }
.strength-prog-ex-head { width: 100%; display: grid; grid-template-columns: 1fr auto auto 18px; align-items: center; gap: 10px; padding: 12px 14px; background: transparent; border: 0; cursor: pointer; color: inherit; text-align: left; }
.strength-prog-ex.is-open .strength-prog-ex-head { border-bottom: 1px solid var(--bf-line, rgba(255,255,255,0.12)); }
.strength-prog-name { font-weight: 700; }
.strength-prog-1rm { display: grid; justify-items: end; line-height: 1.15; }
.strength-prog-1rm strong { font-size: 1.05rem; }
.strength-prog-1rm small { opacity: 0.72; font-size: 0.74rem; }
.strength-prog-trend { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.strength-prog-up { color: #5FA574; }
.strength-prog-down { color: #E06456; }
.strength-prog-flat { opacity: 0.5; }
.strength-prog-caret { opacity: 0.5; }
.strength-prog-sessions { display: grid; gap: 2px; padding: 8px 14px 12px; }
.strength-prog-srow { display: grid; grid-template-columns: 1.1fr 1.2fr 0.9fr 0.6fr; gap: 8px; font-size: 0.85rem; padding: 5px 0; align-items: baseline; }
.strength-prog-shead { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; border-bottom: 1px solid var(--bf-line, rgba(255,255,255,0.1)); padding-bottom: 6px; }
.strength-prog-srow > span:last-child, .strength-prog-srow > span:nth-child(3) { text-align: right; }

/* ================= Public no-login leaderboards ================= */
.pub-lb-page { min-height: 100vh; background: #14100c; color: #F2EDE4; font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; }
.pub-lb-page .pt-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #2a241d; flex-wrap: wrap; }
.pub-lb-page .pt-brand { text-decoration: none; font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.25rem; }
.pub-lb-page .pt-brand .bf-wm-1 { color: #F2EDE4; } .pub-lb-page .pt-brand .bf-wm-2 { color: var(--bf-accent, #C75D34); } .pub-lb-page .pt-brand .bf-wm-3 { color: #9A9484; }
.pub-lb-page .pt-nav { display: flex; gap: 18px; }
.pub-lb-page .pt-nav a { color: #C9C0B2; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.pub-lb-page .pt-nav a:hover { color: #F2EDE4; }
.pub-lb-page .pt-main { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }
.pub-lb-page h1 { font-family: "Archivo", sans-serif; font-size: clamp(1.6rem, 5vw, 2.4rem); margin: 0 0 6px; }
.pub-lb-sub { color: #A79D8F; margin: 0 0 22px; line-height: 1.5; }
.pub-lb-loading, .pub-lb-empty { color: #A79D8F; padding: 40px 0; text-align: center; }
.pub-lb-back { display: inline-block; color: var(--bf-accent, #C75D34); text-decoration: none; font-weight: 700; margin-bottom: 12px; }

.pub-lb-track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.pub-lb-track-card { display: grid; gap: 6px; padding: 18px 16px; border-radius: 16px; background: #1E1B18; border: 1px solid #2f2820; text-decoration: none; color: #F2EDE4; transition: border-color .12s, transform .12s; }
.pub-lb-track-card:hover { border-color: var(--bf-accent, #C75D34); transform: translateY(-2px); }
.pub-lb-track-ic { font-size: 1.8rem; }
.pub-lb-track-card strong { font-size: 1.05rem; }
.pub-lb-track-card small { color: #A79D8F; font-size: 0.8rem; }

.pub-lb-board { background: #1E1B18; border: 1px solid #2f2820; border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; }
.pub-lb-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pub-lb-board-head strong { font-size: 1.1rem; }
.pub-lb-board-head span { color: #A79D8F; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.pub-lb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pub-lb-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 10px; }
.pub-lb-row:nth-child(odd) { background: rgba(255,255,255,0.025); }
.pub-lb-row.is-podium .pub-lb-rank { color: #D8B45E; font-weight: 800; }
.pub-lb-rank { text-align: center; font-weight: 700; color: #A79D8F; }
.pub-lb-name { display: flex; flex-direction: column; min-width: 0; }
.pub-lb-name small { color: #877e70; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }
.pub-lb-score { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.05rem; color: #F2EDE4; white-space: nowrap; }

/* Self-coached (independent) toggle */
.self-coached-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.self-coached-toggle .admin-hint { margin: 4px 0 0; max-width: 46ch; }
.self-coached-active { margin: 12px 0 0; color: var(--bf-green, #5E7B5A); font-weight: 700; font-size: 0.9rem; }
.self-switch { flex: 0 0 auto; width: 50px; height: 28px; border-radius: 999px; border: 0; background: var(--bf-line, #D8D2C4); position: relative; cursor: pointer; transition: background .15s; padding: 0; }
.self-switch.is-on { background: var(--bf-accent, #C75D34); }
.self-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .15s; }
.self-switch.is-on .self-switch-knob { transform: translateX(22px); }

/* ============ WOD action bar — compact, Chalk-It-Pro style ============ */
.wod-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wod-title-star { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; font-size: 1.35rem; line-height: 1; border-radius: 50%; background: transparent; border: 0; cursor: pointer; color: var(--bf-muted, #9A9484); }
.wod-title-star.is-favorite { color: #E8B23A; }
.wod-action-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.wod-act { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; font-size: 0.9rem; border-radius: 11px; }
.wod-act .wod-act-ic { font-size: 1rem; line-height: 1; }
.wod-act-primary { flex: 1 1 auto; }

/* Phone: compact, icon-forward, fits ~4 per row; labels stay but shrink */
@media (max-width: 640px) {
  .wod-action-bar { gap: 6px; }
  /* labeled actions pack exactly 2 per row; width:auto beats .detail-actions .button{width:100%} */
  .wod-action-bar .wod-act { width: auto; min-height: 40px; padding: 0 8px; font-size: 0.82rem; border-radius: 10px; flex: 1 1 calc(50% - 6px); }
  .wod-action-bar .wod-act .wod-act-ic { font-size: 0.95rem; }
  .wod-action-bar .wod-act-primary { flex: 1 1 calc(50% - 6px); }
  /* Mobil / TV / Redigér = compact icon-only chips, all on one row */
  .wod-action-bar .wod-act-icon { flex: 0 0 auto; width: auto; min-width: 44px; padding: 0 12px; }
  .wod-act-icon .wod-act-lbl { display: none; }
  .wod-title-row h1, .wod-title-row > span { font-size: 1.5rem; }
}

/* ===== Mobile header: force ONE row + clear the content below it ===== */
@media (max-width: 720px) {
  .client-topbar, .coach-topbar {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    overflow: hidden;
  }
  /* redundant page title — the page content has its own H1; hide to save the row */
  .client-topbar .mobile-top-title, .coach-topbar .mobile-top-title { display: none; }
  /* push the persona + language to the right, keep them compact + on the line */
  .client-topbar .bf-persona, .coach-topbar .bf-persona { margin-left: auto; }
  .client-topbar .bf-persona-pill, .coach-topbar .bf-persona-pill { padding: 5px 10px; }
  .client-topbar .persona-menu .persona-eyebrow { display: none; }   /* drop "VIS SOM", keep the role */
  .coach-topbar .bf-topbar-search { display: none; }                 /* search lives in the drawer */
  .client-topbar .client-lang-select select, .coach-topbar .client-lang-select select { min-width: 0; }

  /* clear the fixed single-row header + a little breathing room */
  .main-content { padding-top: 78px !important; }
}

/* ===== RUNNER / Mobil træning: full-screen on phones (not a floating card) ===== */
@media (max-width: 720px) {
  .bf-runner-backdrop { padding: 0; align-items: stretch; justify-content: stretch; overflow: hidden; }
  .bf-runner-card {
    width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh;
    border-radius: 0; box-shadow: none; display: flex; flex-direction: column;
  }
  .bf-runner-head { padding-top: calc(14px + env(safe-area-inset-top)); }
  .bf-runner-scroll { max-height: none; flex: 1 1 auto; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }

  /* RUNNER "TV display" view: its top toolbar was one non-wrapping row (Normal
     visning / Blokke pr. skærm 1·2·3 / Tekst A−·A+ / Lys / Fuldskærm / ×) that ran
     off the right edge and scrolled sideways. Wrap the toolbar, kill horizontal
     scroll, and force the block grid to a single column (its columns are set
     inline as repeat(per,1fr), so !important is required to override). */
  .bf-runner-tv { overflow-x: hidden; }
  .bf-runner-tv-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  }
  .bf-runner-tv-left { flex-wrap: wrap; gap: 8px; min-width: 0; }
  /* "Blokke pr. skærm" only matters on a wide TV; on a phone the grid is always 1
     column, so hide the selector rather than show a control that does nothing. */
  .bf-runner-tv-per { display: none; }
  .bf-runner-tv-clockbar,
  .bf-runner-tv-grid { grid-template-columns: 1fr !important; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .bf-runner-tv-block { min-width: 0; max-width: 100%; }
  .bf-runner-tv pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* ===== Gym-TV board (kiosk: today's workout per track) ===== */
.tv-board { min-height: 100vh; background: linear-gradient(160deg, #14120F, #0C0B09); color: #F4F0E7; padding: 22px clamp(16px, 3vw, 40px) 40px; box-sizing: border-box; }
.tv-board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.tv-board-brand { display: flex; align-items: center; gap: 12px; }
.tv-board-logo { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: var(--bf-dark, #061726); padding: 5px; box-sizing: border-box; }
.tv-board-brand strong { display: block; font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: .02em; }
.tv-board-brand span { color: #9A9484; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.tv-board-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-board-loading, .tv-board-empty { color: #9A9484; font-weight: 700; }
.tv-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.tv-board-card { background: #1A1714; border: 1px solid #2E2A23; border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tv-board-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tv-board-track { font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-accent, #C75D34); }
.tv-board-edit { background: #2A2620; border: 1px solid #2E2A23; color: #F4F0E7; border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.tv-board-title { font-family: "Archivo", sans-serif; font-weight: 900; font-size: clamp(1.3rem, 2.6vw, 2rem); margin: 0; color: #F4F0E7; overflow-wrap: anywhere; }
.tv-board-body { font-family: "Roboto Mono", ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(.95rem, 1.5vw, 1.15rem); line-height: 1.5; color: #E7E2D7; margin: 0; }
.tv-board-add { background: transparent; border: 2px dashed #2E2A23; color: #9A9484; border-radius: 16px; padding: 24px; font-weight: 800; cursor: pointer; }
.tv-board-add:hover { border-color: var(--bf-accent, #C75D34); color: #F4F0E7; }
.tv-entry-editor { display: flex; flex-direction: column; gap: 10px; }
.tv-entry-editor label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9A9484; }
.tv-entry-editor input, .tv-entry-editor textarea { background: #0F0D0B; border: 1px solid #2E2A23; border-radius: 9px; color: #F4F0E7; padding: 10px 12px; font-family: inherit; font-size: .95rem; }
.tv-entry-editor textarea { font-family: "Roboto Mono", ui-monospace, monospace; resize: vertical; }
.tv-entry-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
/* Kiosk mode: bigger for a wall screen, no edit chrome. */
.tv-board.is-kiosk .tv-board-title { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.tv-board.is-kiosk .tv-board-body { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
@media (max-width: 720px) {
  .tv-board-grid { grid-template-columns: 1fr; }
}

/* Gym-TV: quick-pick track chips (add from available public tracks). */
.tv-board-add-row { display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.tv-board-quick { background: #1A1714; border: 1px solid #2E2A23; color: #F4F0E7; border-radius: 12px; padding: 12px 16px; font-weight: 800; font-size: .95rem; cursor: pointer; }
.tv-board-quick:hover { border-color: var(--bf-accent, #C75D34); }
.tv-board-quick-custom { border-style: dashed; color: #9A9484; }

/* Brand + intro editor */
.brand-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.brand-editor-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.brand-editor-form h2 { margin: 0; }
.brand-editor-form label { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; font-weight: 700; color: var(--bf-muted2, #55503F); }
.brand-editor-form input:not([type="color"]), .brand-editor-form textarea { padding: 10px 12px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 9px; font: inherit; background: var(--bf-surface, #fff); color: var(--bf-ink, #1C1A17); }
.brand-editor-form input[type="color"] { width: 100%; height: 42px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 9px; background: none; cursor: pointer; }
.brand-editor-sections { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; }
.brand-editor-sections > span { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--bf-muted2, #55503F); }
.brand-editor-sections .bf-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.brand-editor-sections small { color: var(--bf-muted, #9A9484); }

/* Coach calendar: extra event types get their own colours (madplan = gold,
   opfølgning = red) so a busy month stays readable at a glance. */
.cal-layer-chip.cal-meal { color: #ffd166; }
.cal-layer-chip.cal-followup { color: #ff6b8a; }
.cal-item.cal-meal { background: rgba(255, 209, 102, 0.18); color: #ffe0a3; }
.cal-item.cal-followup { background: rgba(255, 107, 138, 0.20); color: #ffa8bb; }
.cal-legend-item.cal-meal::before { background: rgba(255,209,102,0.6); }
.cal-legend-item.cal-followup::before { background: rgba(255,107,138,0.6); }
/* Clickable coach-calendar events */
.cal-item-button { transition: filter 120ms ease, transform 120ms ease; }
.cal-item-button:hover { transform: translateX(1px); }
.cal-item-button:focus-visible { outline: 2px solid var(--bf-accent, #C75D34); outline-offset: 1px; }

/* Sand (light) theme: the global ink rule repaints chips/items dark, which loses
   the category colour. Restore it with darker, light-background-safe variants. */
.bf-sand .main-content .cal-layer-chip.cal-training,
.bf-sand .main-content .cal-item.cal-training { color: #12658a !important; }
.bf-sand .main-content .cal-layer-chip.cal-appointment,
.bf-sand .main-content .cal-item.cal-appointment { color: #a8481b !important; }
.bf-sand .main-content .cal-layer-chip.cal-checkin,
.bf-sand .main-content .cal-item.cal-checkin { color: #6b34a0 !important; }
.bf-sand .main-content .cal-layer-chip.cal-habit,
.bf-sand .main-content .cal-item.cal-habit { color: #2c6b36 !important; }
.bf-sand .main-content .cal-layer-chip.cal-meal,
.bf-sand .main-content .cal-item.cal-meal { color: #8a6a1e !important; }
.bf-sand .main-content .cal-layer-chip.cal-followup,
.bf-sand .main-content .cal-item.cal-followup { color: #a82e48 !important; }
/* Inactive chips read as muted so the ON/OFF state stays obvious. */
.bf-sand .main-content .cal-layer-chip:not(.active) { opacity: 0.45; }

/* Coach calendar: day detail panel (expands collapsed summaries + "+N" overflow) */
.cal-more-button { background: none; border: none; cursor: pointer; padding: 0; font: inherit; text-align: left; }
.cal-more-button:hover { text-decoration: underline; }
.cal-day-panel { margin-top: 14px; border: 1px solid var(--bf-line, #2E2A23); border-radius: 12px; background: var(--bf-surface2, #1A1714); overflow: hidden; }
.cal-day-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bf-line, #2E2A23); }
.cal-day-panel-head strong { font-size: 0.95rem; }
.cal-day-panel-list { display: flex; flex-direction: column; }
.cal-day-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; border-top: 1px solid var(--bf-line, #2E2A23); font: inherit; cursor: pointer; }
.cal-day-row:first-child { border-top: none; }
.cal-day-row.is-static { cursor: default; }
.cal-day-row:not(.is-static):hover { background: var(--bf-surface3, rgba(255,255,255,0.05)); }
.cal-day-row-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.cal-day-row > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cal-day-row-go { opacity: 0.5; font-size: 1.1rem; }
.bf-sand .main-content .cal-day-row:not(.is-static):hover { background: var(--bf-surface3); }

/* Typed-habit value popup (client enters skridt / vægt / vand …) */
.habit-prompt-backdrop { align-items: center; justify-content: center; }
.habit-prompt-card { width: 380px; max-width: calc(100vw - 32px); }

/* v544: in-app replacement for window.prompt/confirm (reuses the habit-prompt
   sheet). The confirm variant shows a message instead of a field. */
.ui-prompt-message {
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 1;
  color: var(--bf-ink, var(--ink));
  margin: 0 0 4px;
}
.habit-prompt-body .habit-prompt-input input[type="text"] {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.16));
  background: var(--bf-surface, rgba(255, 255, 255, 0.05));
  color: inherit;
  padding: 10px 12px;
  font: inherit;
}
.habit-prompt-actions .button { min-height: 44px; }

/* Assign-one-session popup: wider than the habit prompt because it holds a client list. */
.wa-card { width: 440px; }
.mini-row-note { display: block; color: var(--bf-muted, var(--muted, #6F6857)); font-style: italic; }
.wa-clients {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--bf-border, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  padding: 6px;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.04));
}
.wa-client {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--bf-ink, var(--ink, inherit));
  font-size: 0.94rem;
}
.wa-client:hover { background: var(--bf-surface-3, rgba(255, 255, 255, 0.07)); }
/* The app styles form inputs at width:100% — without pinning the box the checkbox
   eats the whole row and pushes the client's name out of view. */
.wa-client input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--bf-accent, var(--accent, #d9a441));
}
.wa-client span { flex: 1 1 auto; min-width: 0; }
.habit-prompt-body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.habit-prompt-label { display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--bf-muted2, #55503F); }
.habit-prompt-input { display: flex; align-items: center; gap: 10px; }
.habit-prompt-input input { flex: 1; min-width: 0; font-family: "Archivo", sans-serif; font-size: 2rem; font-weight: 900; text-align: center; padding: 12px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 12px; background: var(--bf-surface2, #fff); color: var(--bf-ink, #1C1A17); }
.habit-prompt-unit { font-weight: 800; color: var(--bf-muted, #9A9484); min-width: 48px; }
.habit-prompt-hint { margin: 0; font-size: 0.8rem; color: var(--bf-muted, #9A9484); }
.habit-prompt-actions { display: flex; gap: 8px; }
.habit-prompt-actions .button { flex: 1; }
.coach-habit-row-actions { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.coach-habit-form-actions { display: flex; gap: 8px; }

/* Brand colour tokens editor */
.brand-token-form { grid-column: 1 / -1; }
.brand-token-hint { margin: 0; font-size: 0.82rem; color: var(--bf-muted2, #55503F); line-height: 1.45; }
.brand-token-group { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--bf-line, #E5DFD2); }
.brand-token-group-label { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-muted, #9A9484); }
.brand-token-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.brand-token-name { font-size: 0.86rem; font-weight: 700; }
.brand-token-swatch { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.brand-token-swatch input[type="color"] { width: 46px; height: 30px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 8px; background: none; cursor: pointer; padding: 0; }
.brand-token-swatch small { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-muted, #9A9484); }
.brand-token-audit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bf-surface2, #FBFAF6); border: 1px solid var(--bf-line, #E5DFD2); font-size: 0.76rem; }
.brand-token-audit.has-warning { border-color: var(--bf-danger, #B83A2E); }
.brand-token-audit strong { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.brand-token-audit .is-ok { color: var(--bf-green, #5E7B5A); font-weight: 700; }
.brand-token-audit .is-bad { color: var(--bf-danger, #B83A2E); font-weight: 800; }
.brand-token-audit small { flex: 1 1 100%; color: var(--bf-muted2, #55503F); }
.brand-token-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 720px) { .brand-token-row { grid-template-columns: 1fr auto auto; } }

/* ===== Client to-do list ===== */
.todo-group { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.todo-group .portal-card-heading span { font-weight: 800; color: var(--bf-muted, #6F6857); }
.todo-row { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-top: 1px solid var(--bf-line, #E5DFD2); }
.todo-row:first-of-type { border-top: none; }
.todo-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.todo-icon { font-size: 1.05rem; flex: 0 0 auto; }
.todo-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-text strong { font-size: 0.95rem; overflow-wrap: anywhere; color: var(--bf-ink, #1C1A17); }
.todo-text small { font-size: 0.78rem; color: var(--bf-muted2, #55503F); }
.todo-info { font-size: 0.8rem; font-weight: 700; color: var(--bf-muted, #6F6857); flex: 0 0 auto; }
.todo-empty { margin: 6px 4px 2px; font-size: 0.85rem; color: var(--bf-muted, #6F6857); }
.todo-count-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: var(--tint-accent, rgba(199,93,52,0.12)); color: var(--bf-accent, #C75D34); }
.todo-count-pill.is-clear { background: var(--bf-green-bg, #EBF2EB); color: var(--bf-green, #5E7B5A); }
.todo-done-note { font-size: 0.82rem; color: var(--bf-muted, #6F6857); margin: 4px 4px 0; }
@media (max-width: 640px) {
  .todo-row { flex-wrap: wrap; }
  .todo-text { flex: 1 1 60%; }
}

/* Habit template quick-picks */
.habit-template-picker { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 14px; }
.habit-template-label { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bf-muted, #6F6857); }
.habit-template-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.habit-template-chip { border: 1px dashed var(--bf-line, #E5DFD2); background: var(--bf-surface2, #FBFAF6); color: var(--bf-ink, #1C1A17); border-radius: 999px; padding: 6px 12px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.habit-template-chip:hover { border-style: solid; border-color: var(--bf-accent, #C75D34); color: var(--bf-accent, #C75D34); }
.habit-template-empty { font-size: 0.82rem; color: var(--bf-muted, #6F6857); }

/* File sharing controls */
.file-row { gap: 10px; }
.file-vis-badge { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; }
.file-vis-private { background: var(--tint-neutral, #eef1f5); color: var(--neutral-ink, #5b6472); }
.file-vis-users { background: var(--tint-accent, rgba(199,93,52,.12)); color: var(--bf-accent, #C75D34); }
.file-vis-organization { background: var(--bf-green-bg, #EBF2EB); color: var(--bf-green, #5E7B5A); }
.file-vis-select { flex: 0 0 auto; max-width: 190px; padding: 6px 8px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 8px; background: var(--bf-surface, #fff); color: var(--bf-ink, #1C1A17); font: inherit; font-size: .82rem; }
.file-share-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 4px 12px 14px; font-size: .82rem; }
.file-share-picker > span { font-weight: 800; color: var(--bf-muted, #6F6857); }
.file-share-picker .bf-check { display: inline-flex; align-items: center; gap: 6px; }
.file-upload-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bf-line, #E5DFD2); }
.file-upload-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 700; color: var(--bf-muted2, #55503F); }
.file-upload-form small { font-weight: 500; color: var(--bf-muted, #6F6857); }
@media (max-width: 640px) { .file-row { flex-wrap: wrap; } .file-vis-select { max-width: 100%; width: 100%; } }

/* ===== Print / Save-as-PDF =================================================
   Strips the app chrome and lays the workout out as a clean A4 handout. Works
   with the browser's own "Save as PDF", so no PDF library is needed and the
   printout always matches what's on screen. */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }

  /* Never print the app shell or anything interactive. */
  .sidebar, .topbar, .mobile-menu-backdrop, .bf-flash, .flash,
  .wod-action-bar, .detail-actions, .coach-tabs, .cal-layer-toggles,
  .bf-runner-backdrop, .bf-runner-tv, .habit-prompt-backdrop,
  .bf-persona, .bf-topbar-search, button, .button, select, input, textarea,
  .sidebar-nav, .beast-mode-card, .client-help-card,
  /* Context panels that make sense on screen but are noise on a handout:
     other workouts that day, the leaderboard rail, and the TV-module picker. */
  .wod-program-strip, .side-stack, .module-control, .wod-more-wrap, .wod-more-menu, .wod-more-backdrop,
  .wod-title-star, .leaderboard-panel { display: none !important; }

  /* With the rail hidden, the workout should use the full page width. */
  .wod-layout { display: block !important; grid-template-columns: none !important; }

  html, body, .app-shell, .main-content, .bf-sand, .bf-sand.bf-dark {
    background: #fff !important; color: #000 !important;
    margin: 0 !important; padding: 0 !important; display: block !important;
  }
  .main-content { padding-top: 0 !important; }

  /* Force readable ink regardless of the active theme/brand. */
  .main-content *, .workout-detail *, .block-list * {
    background: transparent !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }

  h1 { font-size: 20pt !important; margin: 0 0 4mm !important; }
  h2 { font-size: 13pt !important; margin: 0 0 2mm !important; }
  .lead, p, li, pre { font-size: 10.5pt !important; line-height: 1.45 !important; }

  /* Blocks read as a document, and never split across a page break. */
  .workout-block, .block-list > *, .portal-card, .panel, .bf-card {
    border: 1px solid #bbb !important; border-radius: 6px !important;
    padding: 4mm 5mm !important; margin: 0 0 4mm !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .block-list { display: block !important; }
  pre { white-space: pre-wrap !important; overflow-wrap: anywhere !important;
        font-family: inherit !important; margin: 0 !important; }
  a { text-decoration: none !important; }
  a[href]:after { content: "" !important; }

  /* A footer line on every page so a printed handout is identifiable. */
  .workout-detail:after {
    content: "BeastFactory · beastfactory.dk";
    display: block; margin-top: 6mm; padding-top: 2mm;
    border-top: 1px solid #ddd; font-size: 8pt; color: #666 !important;
  }
}

/* Standalone (no-program) sessions assigned straight from the library. */
.client-single-sessions { margin-top: 18px; }
.client-single-sessions .coach-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.client-single-sessions .coach-list-row small { display: block; color: var(--bf-muted, var(--muted, #6F6857)); }

/* ── Fitness-app mobile pass: CTA, set rows, media, rest pill ─────────────── */

/* GIF/still demos: natural aspect, no black 16/9 letterbox. */
.freestyle-video.is-gif { aspect-ratio: auto; background: transparent; }
.freestyle-video.is-gif img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 10px; }

/* Demo media inside a structured exercise card (block view + player). */
.exercise-media { margin: 2px 0 4px; }
.exercise-media .freestyle-video { max-width: 560px; }

/* Per-row video-URL input in the coach's block builder. */
.structured-video-edit { display: block; margin-top: 6px; font-size: 0.78rem; opacity: 0.85; }
.structured-video-edit input { width: 100%; margin-top: 3px; }

/* (.wod-start-training removed — the action bar's single accent primary IS
   "▶ Start træning" now, at every width, so the separate phone button was a
   duplicate start action.) */
@media (max-width: 760px) {
  /* The primary fills the row on phones; secondaries + ⋯ wrap beneath. */
  .workout-detail .wod-action-bar .wod-act-primary { flex: 1 1 100%; }

  /* Set chips become full-width tappable ROWS (Everfit-style set list). */
  .structured-sets { flex-direction: column; align-items: stretch; }
  .structured-sets .set-chip-wrap { display: flex; width: 100%; gap: 6px; }
  .structured-sets .set-chip {
    flex: 1 1 auto;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    font-size: 0.95rem;
  }
  .structured-sets .set-chip .set-chip-value { flex: 1 1 auto; text-align: center; }
  .structured-sets .set-chip-editor {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .structured-sets .set-chip-editor input { flex: 1 1 70px; }
  .structured-rest { text-align: center; padding: 2px 0; }

  /* The rest countdown is THE thing you look at between sets — enlarge the
     pill only. NO geometry/padding/clock overrides here: ≤700px the whole bar
     top-docks (13153) with safe-area padding and a 1.6rem clock, and setting
     `bottom` alongside that `top: 0` would stretch the bar into a fullscreen
     overlay. */
  #bf-workout-timer .bf-timer-rest { min-width: 150px; font-size: 1.15rem; padding: 0.4rem 0.8rem; }
}

/* Player: media sits on top, card breathes, nav is thumb-sized. */
.workout-player .exercise-media { margin: 0 0 10px; }
.workout-player .exercise-media .freestyle-video { max-width: none; }
@media (max-width: 760px) {
  .workout-player .player-footer .button { min-height: 52px; font-size: 1rem; }
}

/* While the player is open, lift the bottom timer pill clear of the fixed
   player footer (Forrige/Næste must stay tappable during the rest countdown).
   Scoped to >700px: below that the bar is top-docked and adding a bottom
   offset to `top: 0` would stretch it over the whole screen. */
@media (min-width: 701px) {
  body:has(.workout-player) #bf-workout-timer { bottom: 96px; }
}

/* YouTube/Vimeo facade: a tap-to-play thumbnail instead of an eager iframe —
   the app re-renders on every set tap, which would restart a playing embed. */
.video-facade {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  padding: 0;
}
.video-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.video-facade .video-facade-play {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 10px 22px;
}

/* ── Betalinger (real Stripe data) ────────────────────────────────────────── */
.betal-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.betal-right span { font-weight: 700; white-space: nowrap; }
.betal-status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bf-muted, var(--muted, #6F6857)); }
.betal-status.is-good { color: var(--bf-green, #2f9d5b); }
.betal-status.is-bad { color: var(--bf-red, #c0392b); }
.betal-error-detail { margin: 8px auto 14px; max-width: 620px; font-size: 0.85rem; line-height: 1.45; color: var(--bf-muted, var(--muted, #6F6857)); }

/* ═══ Compound WOD header (Everfit/Coachway-style) ═════════════════════════
   Replaces the hero-type + 7-equal-buttons header. Reading order: program
   position → title → facts → one primary action. Brand-token driven. */

/* Title: was clamp(2.25rem, 5vw, 4.1rem) — shouty and the main cause of the
   2-words-per-line wrap once the column starved. */
.bf-sand .main-content .workout-detail .detail-header h1,
.workout-detail .detail-header h1 {
  max-width: 100%;
  margin-bottom: 6px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

/* Program position as real structure, not a pill that can blob. */
.wod-program-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.03));
}
.wod-program-row .wod-prog-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 190px;
}
.bf-sand .main-content .wod-program-row .wod-prog-week {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--bf-ink);
}
.bf-sand .main-content .wod-program-row .wod-prog-name {
  font-size: 0.78rem;
  color: var(--bf-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Week ticks: capped count, so they can never overflow their budget. */
.wod-week-ticks { display: flex; gap: 3px; flex: 0 1 auto; }
.wod-week-ticks i {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: var(--bf-line, rgba(255, 255, 255, 0.18));
}
.wod-week-ticks i.is-done { background: var(--bf-muted, rgba(255, 255, 255, 0.45)); }
.wod-week-ticks i.is-now { background: var(--bf-accent, #ff7a3c); }

/* Facts as a definition list: dt/dd are NOT in the .bf-sand ink catch-all
   :is(p,li,td,th,span,div), so muted labels need no !important here. */
.wod-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 0 0 12px;
}
.wod-facts > div { display: flex; flex-direction: column; gap: 1px; }
.bf-sand .main-content .wod-facts dt {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bf-muted);
}
.bf-sand .main-content .wod-facts dd { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--bf-ink); }

/* Action bar: own row, one accent primary + outline secondaries + overflow. */
.workout-detail .wod-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--bf-line, rgba(255, 255, 255, 0.1));
}
/* `width:auto` is load-bearing: a legacy @media(max-width:1040px) rule
   `.detail-actions .button{width:100%}` (from when this bar was a 3-col grid)
   otherwise gives every button its own row — 7 buttons = a 361px-tall bar.
   These selectors are (0,3,0) so they win without !important. */
.workout-detail .wod-action-bar .wod-act-primary { flex: 0 0 auto; width: auto; min-height: 44px; padding-inline: 18px; }
.workout-detail .wod-action-bar .wod-act { flex: 0 0 auto; width: auto; min-height: 44px; }
/* Primary-button LABELS were matching the ink catch-all directly (span inside
   the button), so accent buttons rendered dark ink on orange. */
.bf-sand .main-content :is(.button-primary, .btn-primary, .bf-btn-primary) :is(span, small, b, strong) { color: #fff; }

/* Muted-label rescue: these were all (0,2,0) and lost to the (0,2,1) ink
   catch-all, flattening every secondary label to full ink. :is() of classes
   keeps this at (0,3,0) — wins on specificity, no !important needed. */
.bf-sand .main-content :is(.bf-eyebrow, .bf-kpi-label, .bf-next-sub, .bf-tl-time,
  .bf-cd-stat-l, .bf-cd-stat-s, .bf-tile-desc, .bf-dash-empty, .bf-goal-unit) { color: var(--bf-muted); }

@media (max-width: 760px) {
  /* (the primary's full-row rule lives with the other ≤760px action-bar rules) */
  .wod-facts { gap: 0 16px; }
}

/* ── Phone drawer nav ──────────────────────────────────────────────────────
   The @media(max-width:820px) rule at ~10957 makes .sidebar-nav a 2-column
   grid (fine for a tablet drawer), but .sidebar-section-label is itself a grid
   ITEM — so "OVERSIGT" claimed one cell and pushed "Dashboard" into column 2,
   mis-pairing every row below it. Labels span the row; phones get one column. */
@media (max-width: 820px) {
  .sidebar-section-label { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sidebar-nav,
  .sidebar-nav-secondary { grid-template-columns: minmax(0, 1fr); }
}

/* ── ⋯ overflow menu on the WOD action bar ────────────────────────────────
   Reuses the .bf-persona-menu geometry/shadow language. The trigger is a real
   <button>, so the print stylesheet's blanket button rule already hides it —
   the wrapper/menu/backdrop are listed explicitly in the print block above. */
.wod-more-wrap { position: relative; display: inline-flex; }
/* Fallback containing block for the menu when the wrap goes static on phones. */
.workout-detail .wod-action-bar { position: relative; }
.workout-detail .wod-action-bar .wod-more-btn {
  min-width: 48px;
  padding-inline: 12px;
  font-size: 1.25rem;
  line-height: 1;
}
/* Invisible full-screen catcher: any outside tap closes the menu. */
.wod-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: block;
}
.wod-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max(220px, 100%);
  padding: 6px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.16));
  border-radius: 13px;
  background: var(--bf-surface, #201812);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.wod-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.bf-sand .main-content .wod-more-item { color: var(--bf-ink); }
.wod-more-item:hover { background: var(--bf-surface2, rgba(255, 255, 255, 0.07)); }
.wod-more-item span { flex: 0 0 1.2em; text-align: center; }

@media (max-width: 760px) {
  /* On phones the primary takes a full row, so ⋯ wraps to the MIDDLE of row 2
     — anchoring to the button (either edge) then hangs the menu off-screen.
     Making the wrap `static` promotes .wod-action-bar (position:relative) to
     the containing block, so `right:0` aligns with the BAR's right edge and
     the menu always fits. No JS positioning needed. */
  .wod-more-wrap { position: static; }
  .wod-more-menu {
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 32px));
  }
}

/* Program spine on the client program page — same week-position language as the
   WOD header, so the two surfaces agree. */
.prog-spine { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.bf-sand .main-content .prog-spine .prog-spine-week {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-accent);
}

/* ── Program library: track sections + assign-as-copy ─────────────────────── */
.bf-prog-track-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 10px;
}
.bf-sand .main-content .bf-prog-track-head strong {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bf-accent);
}
.bf-sand .main-content .bf-prog-track-head span { font-size: 0.78rem; color: var(--bf-muted); }
.bf-prog-track-head.is-untracked strong { color: var(--bf-muted) !important; }

.program-assign-copy { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 0.85rem; }
.program-assign-copy input { margin-top: 3px; width: 16px; min-width: 16px; height: 16px; }
.bf-sand .main-content .program-assign-copy small { color: var(--bf-muted); }

/* ── Client Progress subtabs + phone topbar tiles → brand look (v499) ────── */
/* The Progress page tabs are <button>s but only <a> had the underline-tab
   styling, so they rendered as default grey pills. Sand text colours need
   !important to beat the `.bf-sand .main-content button:not(...)` catch-all. */
.bf-sand .main-content .client-subtabs { border-bottom: 1px solid var(--bf-line); }
.bf-sand .main-content .client-subtabs :is(a, button) { color: var(--bf-muted) !important; }
.bf-sand .main-content .client-subtabs a.active,
.bf-sand .main-content .client-subtabs a:hover,
.bf-sand .main-content .client-subtabs button.active,
.bf-sand .main-content .client-subtabs button:hover {
  color: var(--bf-accent) !important;
  border-bottom-color: var(--bf-accent);
}

/* Hamburger + language tiles still carried the old dark-portal look (orange
   glass / #050505 tile). Match the persona pill beside them: white + line
   border in light, surface in dark. Flag gradients untouched (see above). */
.bf-sand .mobile-menu-button { border-color: var(--bf-line); background: #fff; }
.bf-sand .mobile-menu-button span { background: var(--bf-ink); }
.bf-sand .client-language-control { border-color: var(--bf-line); background: #fff; }
.bf-sand.bf-dark .mobile-menu-button { background: var(--bf-surface); border-color: var(--bf-line); }
.bf-sand.bf-dark .client-language-control { background: var(--bf-surface); border-color: var(--bf-line); }

/* ── Global client bottom tab bar: phone app feel (v502) ─────────────────── */
/* Rendered only in the client chrome (sibling of .main-content, so the sand
   ink catch-alls don't reach it). Hidden on desktop; the drawer (backdrop
   z-56) opens OVER the bar (z-55), and the Mere tab replaces the hamburger.
   Breakpoint is 720px to MATCH the drawer/hamburger block — at 721-820px the
   drawer CSS doesn't exist, so a bar there would have a dead Mere button. */
.bf-tabbar { display: none; }

@media (max-width: 720px) {
  .bf-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--bf-line, #E5DFD2);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .bf-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 52px; border: 0; border-radius: 12px; padding: 4px 2px;
    background: none; color: var(--bf-muted, #6F6857); font: inherit; font-size: 0.68rem;
    font-weight: 800; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bf-tab svg { width: 23px; height: 23px; }
  .bf-tab.active { color: var(--bf-accent, #C75D34); }

  /* Content must never hide behind the fixed bar. */
  .app-shell:has(.bf-tabbar) .main-content {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  /* Mere replaces the hamburger wherever the bar is present (it returns on
     the immersive /app/wod screens, which render no tab bar). */
  .app-shell:has(.bf-tabbar) .mobile-menu-button { display: none; }

  /* Kost keeps its own 5-tab nav, but as a TOP strip so two bottom bars never
     stack. DOM order is head → main → tabbar; flex order lifts the strip. */
  .app-shell:has(.bf-tabbar) .kost-app { display: flex; flex-direction: column; }
  .app-shell:has(.bf-tabbar) .kost-app > .kost-head { order: -2; }
  .app-shell:has(.bf-tabbar) .kost-app > .kost-tabbar {
    /* static, NOT sticky: .kost-app's overflow:hidden makes sticky inert
       anyway, and a pinned top:0 strip would slide under the fixed topbar
       (z-58, cleared via padding-top). The global bar owns persistent nav;
       this strip is section nav that may scroll with the page. bottom:auto
       cancels the base rule's bottom:0. */
    order: -1; position: static; bottom: auto; z-index: 20;
    border-top: 0; border-bottom: 1px solid var(--kost-line, #E5DFD2);
    padding: 4px 2px 6px;
  }
}

.bf-sand.bf-dark .bf-tabbar { background: rgba(24, 22, 19, 0.93); border-top-color: var(--bf-line); }
.bf-sand.bf-dark .bf-tab { color: var(--bf-muted); }
.bf-sand.bf-dark .bf-tab.active { color: var(--bf-accent); }

/* ── Phone native-feel polish (v502) ─────────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.bf-tab, .kost-tab { user-select: none; -webkit-user-select: none; }

@media (max-width: 820px) {
  /* iOS Safari zooms the page when a focused control is under 16px — the
     single biggest "this is a website" tell. Client app only. */
  .bf-sand input,
  .bf-sand select,
  .bf-sand textarea { font-size: 16px; }
}

/* ── Theme-check fixes (v503) ────────────────────────────────────────────── */
/* `.bf-sand .main-content a { color: var(--bf-ink) }` (14525) flattened the
   kost tab bar's idle/active tint in BOTH themes (pre-dates the top strip —
   the bottom bar had it too). Restore muted idle + orange active; the span
   label needs its own selector past the :is(span,div) ink catch-all. */
.bf-sand .main-content .kost-tabbar .kost-tab,
.bf-sand .main-content .kost-tabbar .kost-tab span { color: var(--kost-muted); }
.bf-sand .main-content .kost-tabbar .kost-tab.active,
.bf-sand .main-content .kost-tabbar .kost-tab.active span { color: var(--kost-orange); }

/* The flag ring is white (old dark-portal base rule) — invisible on the white
   light-mode tile. Ink-tinted ring in light; the .bf-dark override (15937)
   keeps the white ring in dark. */
.bf-sand .client-language-flag { box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.18); }

/* ── Crucial-path audit fixes (v504) ─────────────────────────────────────── */
/* The global stopwatch bar is redundant while the full-screen runner is open
   (the runner shows its own clock) and at ≤700px its top-dock covered the
   runner's ✕ — the user couldn't close the runner without stopping the clock. */
body:has(.bf-runner-backdrop) #bf-workout-timer,
body:has(.bf-runner-tv) #bf-workout-timer { display: none; }

@media (max-width: 820px) {
  /* The 16px input floor must not CAP deliberately large inputs: the habit
     check-in value popup uses a 2rem centered number by design. */
  .client-sand .habit-prompt-input input { font-size: 2rem; }

  /* ...and must REACH the one sub-16px focusable input its (0,1,1) selector
     lost to: the training-list reschedule date field (0,2,1). Widen with the
     font — the intrinsic dd.mm.åååå field clips at the old 130px. */
  .client-sand .training-row-move input[type="date"] { font-size: 16px; width: 150px; }

  /* Fixed-width numeric fields sized for ~13px text clip "102.5" at 16px. */
  .client-sand .set-chip-editor input { width: 76px; }
  .client-sand .block-exercise-fields input { width: 76px; }
}

/* ═══ PHONE APP LANGUAGE (v505) ══════════════════════════════════════════
   Everything below is client-app phone chrome. Goal: the screens should read
   as a native app (large title owned by the page, bottom tabs, back chevron
   on drill-ins) instead of a desktop layout scaled down. */

/* Card headings that wrap title+meta in a <div> rendered them as inline
   siblings — "UGENS PROGRAMman. 27. jul." glued together. Stack them. */
.portal-card-heading > div { display: grid; gap: 2px; }

@media (max-width: 720px) {
  /* The fixed client topbar held nothing but a language flag once the
     hamburger moved into the tab bar — 69px of empty white on every screen.
     Language moved into the drawer; the page's own H1 is now the header. */
  .client-sand .client-topbar { display: none; }
  .client-sand .main-content { padding-top: 14px !important; }

  /* iOS-style large title. The explanatory <p> under it is a web pattern —
     an app names the screen and shows the content. */
  .client-sand .client-page-header { gap: 6px; padding-bottom: 2px; }
  .client-sand .client-page-header h1 { font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.1; }
  .client-sand .client-page-header > div > p { display: none; }

  /* Drill-in back bar (WOD / single session): replaces the hamburger. */
  .bf-appbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center;
    margin: 0 -18px 6px; padding: 6px 10px calc(6px + env(safe-area-inset-top, 0px));
    background: var(--bf-surface, #fff);
    border-bottom: 1px solid var(--bf-line, #E5DFD2);
  }
  .bf-appbar-back {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 44px; border: 0; border-radius: 12px; padding: 0 10px 0 4px;
    background: none; color: var(--bf-accent, #C75D34);
    font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bf-appbar-back svg { width: 22px; height: 22px; }
  .bf-appbar-back:active { opacity: 0.55; }
}

/* Drill-in screens have no fixed topbar to clear on phone. */
@media (max-width: 720px) {
  .client-sand:has(.bf-appbar) .main-content { padding-top: 0 !important; }
}

.bf-sand.bf-dark .bf-appbar { background: var(--bf-surface); border-bottom-color: var(--bf-line); }

/* ── Touch feedback (v505) ───────────────────────────────────────────────
   Before this, exactly ONE control in the whole stylesheet had an :active
   state; everything else signalled interactivity through :hover, which never
   fires on a touch screen. Tapping a card gave zero feedback until the route
   changed — the clearest "this is a web page" tell in the app. */
@media (hover: none) {
  .bf-sand :is(
    .phone-hero-card, .phone-card, .phone-mini-tile, .phone-daily-track-tile,
    .phone-primary-action, .phone-week-day a, .phone-quick-dock button,
    .workout-type-tile, .training-track-schedule-card, .exercise-library-card,
    .program-track-card, .program-week-pill, .training-session-row,
    .todo-row, .document-row, .resource-card, .recipe-card,
    .portal-link-list a, .portal-card-footer, .client-card-footer,
    .button, .bf-btn, .kost-card, .kost-meal, .kost-browse-row,
    .kost-maaltid-card, .today-meal-plan-row, .set-chip,
    .bf-kpi-card, .bf-sched-row, .bf-review-row, .bf-prog-card,
    .bf-ctable-link, .bf-task-card, .coach-list-row, .cal-day-row, .exercise-row
  ):active {
    transform: scale(0.978);
    opacity: 0.9;
  }

  /* Tab/toolbar items shouldn't move — dim only. */
  .bf-sand :is(.bf-tab, .kost-tab, .client-subtabs button, .client-subtabs a, .coach-tabs button, .bf-pill-tabs button, .bf-cd-tabs a, .bf-cd-tabs button):active { opacity: 0.55; }

  /* Transitions make the press read as physical rather than as a flicker. */
  .bf-sand :is(
    .phone-hero-card, .phone-card, .phone-mini-tile, .phone-daily-track-tile,
    .workout-type-tile, .training-track-schedule-card, .exercise-library-card,
    .todo-row, .kost-card, .kost-meal, .button, .phone-primary-action,
    .bf-kpi-card, .bf-prog-card, .bf-ctable-link, .bf-task-card
  ) { transition: transform 90ms ease, opacity 90ms ease; }
}

/* ── Disclosure chevrons on tappable rows (v505) ─────────────────────────
   Native lists say "this opens something". Only 3 places in the app did. */
@media (max-width: 720px) {
  .client-sand :is(.exercise-library-card, .resource-card)::after {
    content: "›";
    margin-left: auto;
    padding-left: 8px;
    color: var(--bf-muted, #6F6857);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    align-self: center;
  }
  .client-sand :is(.exercise-library-card, .resource-card) { display: flex; align-items: center; }
  /* .training-track-schedule-card stays the stacked grid it was re-laid-out to
     be at ≤820px; it gets its chevron as an extra grid column instead. */
  .client-sand .training-track-schedule-card { position: relative; padding-right: 30px; }
  .client-sand .training-track-schedule-card::after {
    content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--bf-muted, #6F6857); font-size: 1.35rem; font-weight: 700; line-height: 1;
  }
}

/* Hero card is a link now: CTA row + chevron. */
.phone-hero-cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px; padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff; font-size: 0.9rem; font-weight: 900;
  justify-self: start;
  align-self: start;
}
.phone-hero-cta i { font-style: normal; font-size: 1.15rem; line-height: 1; }
.phone-hero-card.rest .phone-hero-cta { background: rgba(255, 255, 255, 0.14); }

/* ── Touch target floors on phone (v505) ────────────────────────────────
   The habit tick — the app's primary DAILY interaction — was a 20x20px box
   with font-size:0 (glyph removed). Todo row actions were ~30px. */
@media (max-width: 720px) {
  .bf-sand .habit-check { min-width: 40px; min-height: 40px; font-size: 0.95rem; }
  .bf-sand .habit-day-control { min-width: 40px; }
  .bf-sand .button-compact { min-height: 40px; padding: 9px 16px; }
  .bf-sand .phone-inline-link { min-height: 40px; display: inline-flex; align-items: center; }
  .bf-sand .icon-button { min-height: 40px; min-width: 40px; }
}

/* ── .kost-app was a phone frame drawn inside a phone (v505) ─────────────
   max-width:468px + 28px radius + a 30px drop shadow is a device mockup;
   on a real 375px screen it read as a floating card with cut corners. */
@media (max-width: 720px) {
  .kost-app {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── v505 follow-ups ─────────────────────────────────────────────────────
   The hero card became an <a>, so the global link underline applied to the
   whole card, and .phone-hero-card span (the eyebrow rule) also caught the
   new CTA — uppercasing and letter-spacing it. */
.phone-hero-card { text-decoration: none; }
.phone-hero-card :is(span, h2, p, small) { text-decoration: none; }
.phone-hero-card .phone-hero-cta {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

/* The empty fixed topbar is display:flex !important at ≤720px (a rule from
   the era when it held the hamburger + nav), so hiding it needs the same
   weight. Client app only — the coach topbar still carries real controls. */
@media (max-width: 720px) {
  .client-sand .client-topbar { display: none !important; }
}

/* ── Progress stat tiles: grid, not stacked slabs (v506) ─────────────────
   At ≤720px these collapsed to one column, so four numbers cost four
   full-width cards and most of a screen of scrolling. Apps show them as a
   compact 2-up grid you can read at a glance. */
@media (max-width: 720px) {
  .client-sand .progress-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .client-sand .progress-stat-card { padding: 14px; gap: 2px; }
  .client-sand .progress-stat-card span { font-size: 0.68rem; letter-spacing: 0.04em; }
  .client-sand .progress-stat-card strong { font-size: 1.5rem; line-height: 1.15; }
  .client-sand .progress-stat-card small { font-size: 0.72rem; }

  /* Sub-tabs shouldn't wrap to two lines ("Body Composition" did). */
  .client-sand .client-subtabs { gap: 18px; }
  .client-sand .client-subtabs :is(a, button) { white-space: nowrap; }
}

/* ── Bottom sheets instead of centred dialogs (v508) ─────────────────────
   Every overlay in the client app was a desktop dialog. Worse, the habit
   value prompt and the assign prompt borrow .bf-runner-card, whose phone
   rule is width:100vw/height:100dvh/radius:0 (correct for the FULL-SCREEN
   runner, wrong for a small prompt) — so entering a habit value opened a
   square-cornered full-height slab with the content jammed at the top.
   On phones these become sheets that rise from the bottom edge. */
@media (max-width: 720px) {
  .habit-prompt-backdrop,
  .bf-consent-overlay,
  .kost-modal-overlay {
    align-items: flex-end !important;
    justify-content: center;
    padding: 0 !important;
  }

  .habit-prompt-backdrop .bf-runner-card,
  .bf-consent-modal,
  .kost-modal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 88dvh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.32) !important;
    animation: bfSheetUp 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Grab handle — the affordance that says "this is a sheet, drag/dismiss". */
  .habit-prompt-backdrop .bf-runner-card::before,
  .bf-consent-modal::before,
  .kost-modal::before {
    content: "";
    display: block;
    width: 38px; height: 4px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: var(--bf-line, #E5DFD2);
  }

  .kost-modal { display: flex; flex-direction: column; overflow: hidden !important; }
  .kost-modal-body { flex: 1 1 auto; max-height: none !important; overflow-y: auto; }
  .kost-modal-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@keyframes bfSheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Respect reduced-motion for the sheet + press transitions. */
@media (prefers-reduced-motion: reduce) {
  .habit-prompt-backdrop .bf-runner-card,
  .bf-consent-modal,
  .kost-modal { animation: none; }
}

/* Drawer account block (v511): sign-out had no phone-reachable control once
   the empty client topbar was hidden — it now lives under Mere. */
@media (min-width: 721px) {
  .sidebar-persona, .sidebar-language, .sidebar-account { display: none; }
}
.sidebar-account { margin-top: 10px; }
.sidebar-persona { margin-top: 10px; }
.sidebar-account .auth-user-actions { display: grid; gap: 8px; }
.sidebar-account .auth-user-actions small { font-size: 0.76rem; opacity: 0.75; overflow: hidden; text-overflow: ellipsis; }
.sidebar-account .auth-user-actions .button { width: 100%; }

/* ── v512: phone parity fixes from the screen-by-screen recon ────────────── */

/* The week strip's today/past/rest states were defined ONLY inside
   @media (min-width:1100px), so on a phone every day looked identical —
   you could not see which row was today or which were already done. */
@media (max-width: 720px) {
  .client-sand .phone-week-day.is-today {
    background: rgba(255, 90, 18, 0.1);
    border-color: rgba(255, 90, 18, 0.32);
    box-shadow: 0 0 0 1px rgba(255, 90, 18, 0.32);
  }
  .client-sand .phone-week-day.is-past { opacity: 0.62; }
  .client-sand .phone-week-day.is-rest { background: var(--bf-surface2, rgba(255, 247, 239, 0.4)); }

  /* Titles were clipped to one ellipsised line at 375px. */
  .client-sand .phone-week-day a small { white-space: normal; overflow: visible; text-overflow: clip; }

  /* Messages: a one-row "conversation list" above the thread is desktop
     furniture — on a phone the thread should be the screen. */
  .client-sand .conversation-list-card { display: none; }
  /* NOT sticky: this card is in normal page flow, so a sticky bottom pins the
     composer mid-card and covers the messages. Keep it in flow, but make it a
     proper input+send row with a 44px target. */
  /* A ≤820px rule flips this form to flex-direction:column, which stacks the
     send button under the input as a full-width slab. Chat composers are rows. */
  .client-sand .portal-message-composer { flex-direction: row; align-items: center; gap: 8px; padding: 12px 14px; }
  .client-sand .portal-message-composer input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
  .client-sand .portal-message-composer button {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; border-radius: 999px;
    background: var(--bf-accent); color: #fff; border: 0; font-size: 1rem;
  }

  /* Drawer sign-out to the 44px floor. */
  .client-sand .sidebar-account .auth-user-actions .button { width: 100%; min-height: 44px; }
}

/* Placeholder "art": ::before content rendered the literal words STEP / FOOD /
   VAND in 76px boxes. Real glyphs instead. */
.phone-illustration.shoe::before { content: "👟"; font-size: 1.9rem; }
.phone-illustration.plate::before { content: "🍽"; font-size: 1.9rem; }
.phone-illustration.water::before { content: "💧"; font-size: 1.9rem; }

/* Skeletons — the app previously had none anywhere. */
.bf-skeleton-card { display: grid; gap: 9px; }
.bf-skeleton {
  display: block; height: 11px; border-radius: 999px;
  background: linear-gradient(90deg, var(--bf-surface2, #EFEAE0) 25%, var(--bf-surface3, #F6F2EA) 50%, var(--bf-surface2, #EFEAE0) 75%);
  background-size: 200% 100%;
  animation: bfShimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .bf-skeleton { animation: none; } }
@keyframes bfShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* (1) The app bar must be hidden by default like .bf-tabbar — every rule that
   styles it lives in the ≤720px block, so above that it rendered as an
   87px unstyled slab with an oversized chevron on drill-in pages. */
.bf-appbar { display: none; }
@media (max-width: 720px) {
  .bf-appbar { display: flex; }
  /* (2) Mere: the drawer's only door on screens with no bottom tab bar. */
  .bf-appbar-more {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    border: 0; border-radius: 12px; padding: 0;
    background: none; color: var(--bf-ink, #1C1A17); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bf-appbar-more:active { opacity: 0.55; }
}

/* ── Client calendar: agenda on phone (v518) ─────────────────────────────
   The 7-column month grid gave each day ~45px at 375px, so every entry was an
   unreadable clipped sliver — and the ONLY way to reschedule was HTML5
   drag-and-drop, which does not fire on touch. Phone gets a readable agenda
   with a per-item date field; desktop keeps the month grid. */
.cal-agenda { display: none; }

@media (max-width: 720px) {
  .client-sand .cal-weekday-row,
  .client-sand .cal-grid { display: none; }

  .client-sand .cal-agenda { display: grid; gap: 10px; margin-top: 4px; }

  .cal-agenda-day {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--bf-line, #E5DFD2);
    border-radius: 14px;
    background: var(--bf-surface, #fff);
  }
  .cal-agenda-day.is-today {
    border-color: var(--bf-accent, #C75D34);
    box-shadow: 0 0 0 1px var(--bf-accent, #C75D34);
  }
  .cal-agenda-date { display: grid; justify-items: center; gap: 1px; padding-top: 2px; }
  .bf-sand .main-content .cal-agenda-date strong { font-size: 1.28rem; line-height: 1; }
  .bf-sand .main-content .cal-agenda-date span {
    font-size: 0.66rem; font-weight: 800; text-transform: uppercase; color: var(--bf-muted, #6F6857);
  }
  .cal-agenda-items { display: grid; gap: 6px; min-width: 0; }
  .cal-agenda-item {
    display: flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 7px 10px;
    border-radius: 10px;
    background: var(--bf-surface2, #F3EFE6);
  }
  .cal-agenda-label { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; font-weight: 700; }
  .cal-agenda-move {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  }
  .cal-agenda-move input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
  }
  .cal-agenda-move:active { opacity: 0.55; }

  /* The month arrows are the only thing left in this panel head on phone. */
  .client-sand .client-calendar-panel .panel-heading { padding-bottom: 6px; }
  .client-sand .page-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .client-sand .page-grid .panel { grid-column: 1 / -1; }
}

.bf-sand.bf-dark .cal-agenda-day { background: var(--bf-surface); border-color: var(--bf-line); }
.bf-sand.bf-dark .cal-agenda-item { background: var(--bf-surface2); }

/* ── Startup wizard: paged steps (v518) ──────────────────────────────────
   Was one very long form — a phone client scrolled through personal info,
   metrics, strength numbers and the SMART goal in a single column, then had
   to scroll back up to find a validation error. All sections stay in the same
   <form> (so the submit path is untouched); only the active one is shown. */
.wizard-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--bf-surface2, #EFEAE0);
  overflow: hidden;
  margin-bottom: 18px;
}
.wizard-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--bf-accent, #C75D34);
  transition: width 220ms ease;
}
.wizard-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bf-sand .main-content .wizard-step-indicator {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--bf-muted, #6F6857);
}
.wizard-exit {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { .wizard-progress span { transition: none; } }

@media (max-width: 720px) {
  /* Thumb-reachable order: Tilbage | trin | Næste on one row, full-width CTA. */
  .client-sand .wizard-stepper { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 20; }
  .client-sand .wizard-stepper .button { flex: 1 1 auto; min-height: 48px; }
  .client-sand .wizard-stepper .wizard-submit { flex: 1 1 100%; }
  .client-sand .wizard-section .form-grid.two { grid-template-columns: 1fr; }
}

/* `.wizard-section { display: grid }` outranks the UA's [hidden] rule, so the
   paged-away steps stayed on screen. Same for the stepper's own buttons. */
.wizard-section[hidden],
.wizard-stepper .button[hidden] { display: none !important; }

/* The last visible step shouldn't carry the section divider. */
.wizard-section { border-bottom: 0; padding-bottom: 8px; }

/* renderEmpty()'s box uses a translucent WHITE background (a dark-portal-era
   value), so in dark mode every one of its ~40 usages rendered as a pale slab. */
.bf-sand.bf-dark .empty-state {
  background: var(--bf-surface2);
  border-color: var(--bf-line);
}

/* ── Coach phone chrome (v524) ───────────────────────────────────────────
   The coach app reuses the client's .bf-tabbar wholesale (colors, breakpoint,
   safe-area, the :has() hamburger-hide and content padding all apply). Only
   the topbar hide + a notification dot are coach-specific. */
@media (max-width: 720px) {
  .bf-sand .coach-topbar { display: none !important; }
  /* Coach + admin share this shell; the client shell has its own 14px rule. */
  .app-shell.bf-sand:not(.client-sand) .main-content { padding-top: 14px !important; }
}

.bf-tab-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--bf-accent, #C75D34);
  vertical-align: 1px;
}

/* Persona menu inside a drawer: its absolute dropdown would clip against the
   drawer's overflow, so render it in flow there. */
.sidebar-persona .bf-persona-menu {
  position: static;
  width: 100%;
  max-height: none;
  box-shadow: none;
}

/* ── Coach phone screen fixes (v525) ─────────────────────────────────────── */

/* Program-detail tabs are <a> but only button was ever styled — so they had
   no tab look and NO active state at ANY width. */
.bf-sand .bf-cd-tabs a { display: inline-block; background: none; border: none; padding: 11px 15px; font-family: "Hanken Grotesk", sans-serif; font-size: 0.84rem; font-weight: 600; color: var(--bf-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.bf-sand .bf-cd-tabs a.active { color: var(--bf-ink); font-weight: 700; border-bottom-color: var(--bf-accent); }
.bf-sand .bf-cd-tabs a:hover { color: var(--bf-ink); }

/* Coach dashboard cards are links; the sand link rule underlines everything
   inside them, which reads as a web page, not stat tiles. */
.bf-sand .main-content :is(.bf-kpi-card, .bf-kpi-card *, .bf-sched-row, .bf-review-row, .bf-ctable-link, .bf-prog-card) { text-decoration: none; }

/* Drawer search (phone-only, same gate as persona/account). */
@media (min-width: 721px) { .sidebar-search { display: none; } }
.sidebar-search { margin-top: 10px; }
.sidebar-search input { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--bf-line, #E5DFD2); padding: 0 12px; background: var(--bf-surface, #fff); color: var(--bf-ink, #1C1A17); }

@media (max-width: 720px) {
  /* Dashboard schedule rows: fixed 54px-time + divider + avatar + nowrap tag
     left ~120px for the client name. Restack into two readable lines. */
  .bf-sand .bf-sched-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; }
  .bf-sand .bf-sched-row .bf-sched-divider { display: none; }
  .bf-sand .bf-tag { white-space: normal; }

  /* Clients table: the 84px "Vis som"/empty column ate a quarter of the row. */
  .bf-sand .bf-ctable-row { grid-template-columns: minmax(0, 1fr); }
  .bf-sand .bf-ctable-row > span:empty { display: none; }
  .bf-sand .bf-ctable-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

  /* Adgang: inline 5-col member grid crushed to ~47px columns; CSS !important
     is the one thing that outranks an inline style. */
  .bf-sand .bf-adgang .bf-ctable-link { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }

  /* Payments rows: nowrap right column squeezed titles to a sliver. */
  .bf-sand .coach-list-row.compact { flex-wrap: wrap; }
  .bf-sand .betal-right { white-space: normal; text-align: right; }
  .bf-sand .coach-stat-card { min-height: 0; padding: 12px; }
  .bf-sand .coach-stat-card strong { font-size: 1.35rem; }

  /* Nutrition: six full-width module tiles = a screen of nav. 3×2 compact. */
  .bf-sand .bf-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bf-sand .bf-tile-grid > * { padding: 10px 8px; min-height: 0; }

  /* Check-ins table: the collapsed rows are stacked cells; the header row
     stacked its five labels into a meaningless block above them. */
  .bf-sand .coach-table-head { display: none; }

  /* Tasks: the two real controls were 18px and ~16px. */
  .bf-sand .bf-task-box { min-width: 32px; min-height: 32px; }
  .bf-sand .bf-task-del { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* Coach month calendar: whole cells with content now open the day panel. */
  .bf-sand .cal-day.cal-has-items { cursor: pointer; }
  .bf-sand .cal-day.cal-has-items:active { background: var(--bf-surface2, #F3EFE6); }

  /* Adgang provision panel kept dark-portal styling inside a white card. */
  .bf-sand .lead-provision { background: var(--bf-surface, #fff); border-color: var(--bf-line, #E5DFD2); color: var(--bf-ink, #1C1A17); }
  .bf-sand .lead-provision :is(input, select, label) { color: var(--bf-ink, #1C1A17); border-color: var(--bf-line, #E5DFD2); }
  .bf-sand .lead-provision :is(input, select) { background: #fff; }
}

.bf-sand.bf-dark .sidebar-search input { background: var(--bf-surface); border-color: var(--bf-line); color: var(--bf-ink); }
.bf-sand.bf-dark .lead-provision :is(input, select) { background: var(--bf-surface); }

/* ── White-label: phone-layer legacy orange under custom brands (v528) ────
   The phone dashboard's bright-orange gradient (#ff5a12→#bd2e10) predates the
   sand tokens and is part of the approved BeastFactory look — so it stays
   EXACTLY as-is by default. Under a custom tenant brand (html[data-bf-brand]
   set by applyBrandTheme) it re-maps to the tenant accent. */
[data-bf-brand="custom"] :is(.phone-hero-card.training, .phone-startup-card a, .phone-primary-action, .phone-floating-action, .phone-quick-dock .phone-floating-action) {
  background: linear-gradient(135deg, var(--bf-accent, #C75D34), var(--bf-accent-d, #b34e28));
  border-color: transparent;
  color: #fff;
}
[data-bf-brand="custom"] .phone-week-day.is-today {
  background: color-mix(in srgb, var(--bf-accent, #C75D34) 10%, transparent);
  border-color: color-mix(in srgb, var(--bf-accent, #C75D34) 32%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bf-accent, #C75D34) 32%, transparent);
}
/* Mix into the SURFACE, not always #fff — on a dark theme this used to force a
   near-white pill under light ink (same invisible-text bug as .phone-alert). */
[data-bf-brand="custom"] .phone-alert.phone-priority-alert {
  background: color-mix(in srgb, var(--bf-accent, #C75D34) 12%, var(--bf-surface, #fff));
  border-color: color-mix(in srgb, var(--bf-accent, #C75D34) 30%, var(--bf-surface, #fff));
}

/* The ink catch-all `.bf-sand .main-content :is(p,li,td,th,span,div)` is (0,2,1)
   and outranks the alert's own colour, so the text must be re-stated at higher
   specificity or it goes back to page ink on the tinted pill. */
.bf-sand .phone-alert p,
.bf-sand .main-content .phone-alert :is(p, strong, b) { color: var(--bf-danger, #4f2b2b); }
.bf-sand .phone-alert button,
.bf-sand .main-content .phone-alert button { color: var(--bf-danger, #4f2b2b); opacity: 0.75; }

/* The update banner is pinned bottom:1.2rem, which lands ON TOP of the phone
   tab bar added in v502 (measured at 375×812: banner 692-793 vs tabbar
   747-812). Lift it above the bar and keep it inside the viewport. */
@media (max-width: 720px) {
  #bf-update-banner {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    transform: none;
    justify-content: space-between;
    max-width: none;
  }
}

/* ── Program version history (v530) ──────────────────────────────────────── */
.bf-version-list { display: grid; gap: 8px; margin-top: 12px; }
.bf-version-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--bf-line, #E5DFD2);
  border-radius: 12px;
  background: var(--bf-surface, #fff);
}
.bf-version-row.is-open { border-color: var(--bf-accent, #C75D34); }
.bf-sand .main-content .bf-version-no {
  font-weight: 800;
  font-size: 0.86rem;
  color: var(--bf-accent, #C75D34);
}
.bf-version-meta { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-version-meta small { color: var(--bf-muted, #6F6857); font-size: 0.76rem; }
.bf-version-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.bf-version-diff { margin-top: 14px; }
.bf-version-changes { display: grid; gap: 8px; padding: 4px 0; }
.bf-version-change {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--bf-surface2, #F3EFE6);
}
.bf-sand .main-content .bf-version-change-kind { font-weight: 900; text-align: center; }
.bf-version-change.is-added .bf-version-change-kind { color: var(--bf-green, #5E7B5A); }
.bf-version-change.is-removed .bf-version-change-kind { color: var(--bf-danger, #B83A2E); }
.bf-version-change.is-changed .bf-version-change-kind { color: var(--bf-accent, #C75D34); }
.bf-sand .main-content .bf-version-change strong { font-size: 0.84rem; }
.bf-version-before, .bf-version-after {
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 3px 0;
}
.bf-sand .main-content .bf-version-before { color: var(--bf-danger, #B83A2E); text-decoration: line-through; opacity: 0.85; }
.bf-sand .main-content .bf-version-after { color: var(--bf-green, #5E7B5A); }

@media (max-width: 720px) {
  .bf-sand .bf-version-row { grid-template-columns: 40px minmax(0, 1fr); }
  .bf-sand .bf-version-actions { grid-column: 1 / -1; justify-content: stretch; }
  .bf-sand .bf-version-actions .button { flex: 1 1 auto; }
}
.bf-sand.bf-dark .bf-version-row { background: var(--bf-surface); border-color: var(--bf-line); }
.bf-sand.bf-dark .bf-version-change { background: var(--bf-surface2); }

/* Hero skeleton while today's training is still loading — the card must not
   say "no training today" before the training hydrate has landed. */
.phone-hero-card.is-loading { display: grid; gap: 10px; align-content: center; }
.phone-hero-card.is-loading .bf-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.22) 25%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0.22) 75%);
  background-size: 200% 100%;
}

/* ── Install banner (v532) ───────────────────────────────────────────────
   Body-appended like #bf-update-banner so it survives every re-render, and
   docked ABOVE the phone tab bar (the update banner's bottom:1.2rem sat on
   top of it — same mistake must not be repeated here). */
#bf-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--bf-line, #E5DFD2);
  background: var(--bf-surface, #fff);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  animation: bfSheetUp 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
#bf-install-banner > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
#bf-install-banner strong { font-size: 0.92rem; color: var(--bf-ink, #1C1A17); }
#bf-install-banner small { font-size: 0.78rem; color: var(--bf-muted, #6F6857); }
#bf-install-banner button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--bf-accent, #C75D34);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
#bf-install-banner button[data-bf-install-close] {
  min-width: 40px;
  padding: 0;
  background: none;
  color: var(--bf-muted, #6F6857);
  font-size: 1rem;
}
@media (min-width: 721px) { #bf-install-banner { left: auto; right: 20px; max-width: 380px; bottom: 20px; } }
.bf-sand.bf-dark #bf-install-banner { background: var(--bf-surface); border-color: var(--bf-line); }
@media (prefers-reduced-motion: reduce) { #bf-install-banner { animation: none; } }

/* %1RM editor: % | = calculated | kg (editable, locks when typed) */
.set-calc-hint {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--bf-muted, #6F6857);
  white-space: nowrap;
}
.structured-set-edit input.is-manual {
  border-color: var(--bf-accent, #C75D34);
  font-weight: 700;
}
.set-resync {
  border: 0;
  border-radius: 8px;
  min-width: 28px;
  min-height: 28px;
  background: none;
  color: var(--bf-accent, #C75D34);
  cursor: pointer;
  font-size: 0.95rem;
}
.structured-ref-1rm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--bf-muted, #6F6857);
}
.structured-ref-1rm input { width: 76px; }
@media (max-width: 720px) {
  .bf-sand .structured-set-edit { flex-wrap: wrap; row-gap: 4px; }
  .bf-sand .set-calc-hint { order: 10; flex-basis: 100%; }
}

.set-resync.is-hidden { display: none; }

/* ── Brand watermark on training screens (v539) ──────────────────────────
   Quiet while training, visible in every shared screenshot. Non-interactive. */
.bf-watermark {
  position: absolute;
  right: 14px;
  bottom: 86px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 5;
}
.bf-watermark img { width: 16px; height: 16px; object-fit: contain; }
.bf-watermark span {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--bf-muted, #6F6857);
}
.workout-player { position: relative; }
.bf-runner-card .bf-watermark, .bf-runner-tv .bf-watermark { position: static; justify-content: center; margin-bottom: 6px; opacity: 0.5; }

/* Timer bar: the new lead-in phase gets its own colour. */
.bf-timer-block.lead { color: #7db4e0; }

/* ── Session totals (v540) ───────────────────────────────────────────────── */
.session-totals-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 14px 18px; text-align: center; }
.bf-sand .main-content .session-totals-grid strong { display: block; font-size: 1.5rem; line-height: 1.15; color: var(--bf-accent, #C75D34); }
.bf-sand .main-content .session-totals-grid span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bf-muted, #6F6857); }
/* v542: totals + watermark share ONE flow row above the footer. They were both
   position:absolute at bottom:92px, which meant a short exercise card let them
   land on top of the block notes (and on top of each other's line). */
.player-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 18px; margin-top: 2px;
}
.player-session-totals {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em;
  color: var(--bf-muted, #6F6857); opacity: 0.85; pointer-events: none;
}
.workout-player .player-meta-row .bf-watermark {
  position: static; right: auto; bottom: auto;
}

/* ── Wizard: SMART-mål er valgfrit + forklaret (v570) ───────────────────────── */
.wiz-optional {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bf-muted, #6F6857);
}
.wiz-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--bf-muted, #6F6857);
}
.bf-sand .main-content .wiz-optional,
.bf-sand .main-content .wiz-hint { color: var(--bf-muted); }

/* ── Test-tjekliste (debug mode, v568) ──────────────────────────────────────── */
.test-flow-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--bf-line, rgba(255, 255, 255, 0.1));
}
.test-flow-row.is-done { opacity: 0.55; }
.test-flow-row.is-done strong { text-decoration: line-through; }
.test-flow-check {
  width: 30px; height: 30px;
  border-radius: 9px;
  border: 2px solid var(--bf-accent, #C75D34);
  background: var(--bf-surface, transparent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  display: grid; place-items: center;
}
.test-flow-row.is-done .test-flow-check { background: var(--bf-accent, #C75D34); }
.test-flow-row p { margin: 3px 0 4px; line-height: 1.45; }
.test-flow-row a { text-decoration: none; }
.test-flow-report {
  font-size: 0.8rem; font-weight: 800;
  color: var(--bf-accent, #C75D34);
}
.bf-sand .main-content .test-flow-report { color: var(--bf-accent); }

/* ── "Nyt i appen" (release notes, v567) ─────────────────────────────────────
   Coachway-format: impact-ranked list + area badges + personal sender. Tokens
   only — this card exists BECAUSE of the hardcoded-colour bugs, so it must
   never become one. */
.whats-new-card { position: relative; }
.whats-new-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px;
  padding-left: 0;
  list-style: none;
  counter-reset: nyt;
}
.whats-new-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  counter-increment: nyt;
}
.whats-new-area {
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--bf-accent, #C75D34) 14%, var(--bf-surface2, #EFEAE0));
  color: var(--bf-accent, #C75D34);
}
.whats-new-text { line-height: 1.45; }
.whats-new-all {
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
  color: var(--bf-accent, #C75D34);
  text-decoration: none;
}
.whats-new-version {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--bf-muted, #6F6857);
}
/* The sand ink catch-all repaints span/div at (0,2,1) — restate both ends. */
.bf-sand .main-content .whats-new-area { color: var(--bf-accent); }
.bf-sand .main-content .whats-new-text { color: var(--bf-ink); }
.bf-sand .main-content .whats-new-all { color: var(--bf-accent); }

/* ── Debug mode: bug reporter + coach triage (v553) ──────────────────────────── */
.bug-report-form { display: grid; gap: 14px; }
.bug-report-form textarea {
  width: 100%;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.04));
  color: var(--bf-ink, var(--ink));
  padding: 10px 12px;
  font: inherit;
}
/* v556 (reported: "Better colors for visibility"). Labels and the context box
   were rendering in muted grey on a dark card; the submit button did not read as
   the primary action. Pin the ink and make the CTA unmistakable. */
.bug-report-form > label,
.bug-report-photo > span,
.bug-report-context strong {
  color: var(--bf-ink, var(--ink));
  font-weight: 800;
}
.bug-sand-note { display: none; }
.bug-report-form > label { display: grid; gap: 6px; font-size: 0.92rem; }
.bug-report-context small { color: var(--bf-muted2, #C9C0B2); }
.bug-report-form button[type="submit"] {
  width: 100%;
  min-height: 50px;
  font-size: 1rem;
  font-weight: 800;
  background: var(--bf-accent, #C75D34);
  color: #fff;
  border: none;
  border-radius: 14px;
}
/* The sand ink catch-all outranks a component's own colour (0,2,1 vs 0,1,1). */
.bf-sand .main-content .bug-report-form > label,
.bf-sand .main-content .bug-report-photo > span,
.bf-sand .main-content .bug-report-context strong { color: var(--bf-ink); }
.bf-sand .main-content .bug-report-context small { color: var(--bf-muted2); }
.bf-sand .main-content .bug-report-form button[type="submit"],
.bf-sand .main-content .bug-report-form button[type="submit"] span { color: #fff; }

.bug-report-photo { display: grid; gap: 8px; }
.bug-report-upload {
  display: grid; place-items: center; padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--bf-accent, #C75D34) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bf-accent, #C75D34) 8%, var(--bf-surface2, #fff));
}
.bug-report-context {
  display: grid; gap: 3px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.14));
  border-radius: 12px; padding: 10px 12px;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.03));
}
.bug-report-context small { color: var(--bf-muted, #6F6857); }

.reported-list { display: grid; gap: 2px; }
.reported-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--bf-line, rgba(255, 255, 255, 0.1));
}
.reported-row p { margin: 0; }
.reported-row small { color: var(--bf-muted, #6F6857); }
.reported-row.is-fixed { opacity: 0.5; }
.reported-row.is-fixed p { text-decoration: line-through; }
.reported-status {
  font-size: 0.64rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.08));
  color: var(--bf-muted, #6F6857);
}
.reported-row.is-open .reported-status { background: var(--bf-accent, #C75D34); color: #fff; }
/* Waiting on the coach — visibly NOT in the auto-fix queue. */
.reported-row.is-needs-approval .reported-status,
.bug-report-row.is-needs-approval .bug-report-status {
  background: var(--bf-gold-bg, #FBF3D9); color: var(--bf-gold, #8A6A1E);
}
.reported-row.is-approved .reported-status,
.bug-report-row.is-approved .bug-report-status { background: var(--bf-accent, #C75D34); color: #fff; }
.reported-row.is-fixed .reported-status { background: var(--bf-green-bg, #EBF2EB); color: var(--bf-green, #5E7B5A); }

.bug-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bf-line, rgba(255, 255, 255, 0.1));
}
.bug-report-row.is-fixed { opacity: 0.55; }
.bug-report-main p { margin: 4px 0; }
.bug-report-main small { color: var(--bf-muted, #6F6857); }
.bug-report-main pre {
  white-space: pre-wrap; font-size: 0.74rem; margin: 6px 0 0;
  color: var(--bf-muted2, #C9C0B2);
}
.bug-report-shots { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; max-width: 168px; }
.bug-report-shot img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.bug-report-shots-hint { display: block; color: var(--bf-muted, #6F6857); margin-top: -2px; }
.upload-count {
  display: block; margin-top: 4px; font-weight: 800;
  color: var(--bf-accent, var(--accent, #C75D34));
}
.bug-report-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.bug-report-status {
  font-size: 0.68rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 8px; border-radius: 999px;
  background: var(--bf-accent, #C75D34); color: #fff;
}
@media (max-width: 720px) {
  .bug-report-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── Multi-phase interval builder (v550) ─────────────────────────────────────
   One row per phase: name · mm:ss · × repeat · remove. */
.timer-steps-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  background: var(--bf-surface2, rgba(255, 255, 255, 0.03));
}
.timer-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.timer-steps-head small { color: var(--bf-muted, var(--muted, #6F6857)); }
.timer-step-row { display: flex; align-items: center; gap: 6px; }
.timer-step-row input {
  min-height: 40px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  background: var(--bf-surface, rgba(255, 255, 255, 0.04));
  color: var(--bf-ink, var(--ink));
  padding: 6px 8px;
  font: inherit;
}
.timer-step-label { flex: 1 1 auto; min-width: 0; }
.timer-step-sec { flex: 0 0 74px; text-align: center; }
.timer-step-repeat { flex: 0 0 58px; text-align: center; }
.timer-step-x { color: var(--bf-muted, var(--muted, #6F6857)); font-weight: 800; }
.timer-steps-actions { display: flex; align-items: center; gap: 10px; }
.timer-steps-actions small { color: var(--bf-muted, var(--muted, #6F6857)); }
@media (max-width: 720px) {
  .timer-step-row { flex-wrap: wrap; }
  .timer-step-label { flex: 1 1 100%; }
}

/* ── Block registration: auto-mode + 🐺 Nerd Wolf (v549) ─────────────────────
   Default = only the fields the block's own format calls for, with one line
   naming the auto-picked mode. The wolf opens the full surface (mode chips,
   per-exercise rows, all fields). */
.block-auto-mode {
  font-size: 0.78rem;
  color: var(--bf-muted, var(--muted, #6F6857));
  margin-bottom: 6px;
}
.block-auto-mode span {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-accent, var(--accent, #C75D34));
}
.nerd-wolf-btn { white-space: nowrap; }
.nerd-wolf-btn.active {
  border: 1px solid var(--bf-accent, var(--accent, #C75D34));
  color: var(--bf-accent, var(--accent, #C75D34));
  border-radius: 10px;
}

/* ── Compact workout switcher (v546) ─────────────────────────────────────────
   Replaces the paged card grid + inline preview AND the "Programmer samme dag"
   card list. Both stacked on a phone, so the WOD page opened with two tall
   selector blocks before the workout itself. One row each now. */
.wod-switch { padding: 12px 14px; margin-bottom: 12px; }
.wod-switch-label { display: grid; gap: 4px; }
.wod-switch-title {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--bf-ink, var(--ink));
}
.wod-switch-select {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.16));
  background: var(--bf-surface2, rgba(255, 255, 255, 0.05));
  color: var(--bf-ink, var(--ink));
  font: inherit;
  font-weight: 600;
}

/* Wizard photo is uploaded the moment it is taken — show it is in flight. */
.native-photo-upload.is-uploading { opacity: 0.55; pointer-events: none; }

/* ── Unread / notification badges (v542) ─────────────────────────────────────
   Reported from a phone: "when someone has a notification the text is not
   visible, it's the same colour as the background." Two causes, both fixed by
   pinning BOTH ends of the contrast pair:
   1. The badges hardcoded a near-black text literal (#1b0c05 / #180d07) and took
      their background from `var(--accent)` with NO fallback — where that variable
      does not resolve the declaration is invalid, the pill turns transparent, and
      near-black text lands on a dark card.
   2. The sand ink catch-all `.bf-sand .main-content :is(strong,b)` is (0,2,1) and
      outranks `.conversation-item b` (0,1,1) and `.nav-badge` (0,1,0), so it
      repainted the number in the page ink regardless of the pill colour.
   Same treatment the sidebar badge already had — now applied everywhere. */
.nav-badge,
.client-sidebar .nav-badge,
.coach-sidebar .nav-badge,
.conversation-item b,
.coach-thread-list-item b {
  background: var(--bf-accent, var(--accent, #C75D34)) !important;
  color: #fff !important;
  text-shadow: none;
}

/* ── Dashboard to-do card (v540) ─────────────────────────────────────────── */
.phone-todo-count {
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--bf-surface2, #EFEAE0);
  color: var(--bf-ink, #1C1A17);
  font-size: 0.8rem; font-weight: 900;
}
.phone-todo-count.is-overdue { background: var(--bf-accent, #C75D34); color: #fff; }
.phone-todo-list { display: grid; gap: 6px; margin-top: 8px; }
.phone-todo-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px;
  align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 10px;
  border-radius: 12px;
  background: var(--bf-surface2, #F3EFE6);
  text-decoration: none;
}
.phone-todo-ic { font-size: 1.05rem; text-align: center; }
.phone-todo-text { min-width: 0; display: grid; gap: 1px; }
.bf-sand .main-content .phone-todo-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-sand .main-content .phone-todo-text small { font-size: 0.74rem; color: var(--bf-muted, #6F6857); }
.bf-sand .main-content .phone-todo-row i { font-style: normal; color: var(--bf-muted, #6F6857); font-size: 1.1rem; }
.bf-sand.bf-dark .phone-todo-row { background: var(--bf-surface2); }