: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;
}

/* ============================================================
   Admin Data Hub (/coach/programs/admin)
   ============================================================ */
.admin-data-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-data-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.admin-data-header h1 { margin: 4px 0 6px; }
.admin-data-header p { color: rgba(245, 241, 235, 0.65); margin: 0; max-width: 60ch; }
.admin-data-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.admin-data-tab {
  padding: 8px 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.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-data-tab:hover { background: rgba(255, 90, 18, 0.12); color: #f7f3ef; }
.admin-data-tab.active { background: #ff5a12; color: #fff; border-color: #ff5a12; }
.admin-data-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;
}
.admin-data-toolbar { display: flex; gap: 12px; }
.admin-data-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: 320px;
}
.admin-data-search input:focus { outline: none; border-color: #ff5a12; }
.admin-data-table-panel { padding: 0; overflow: hidden; }
.admin-data-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-data-table th,
.admin-data-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 90, 18, 0.12);
  font-size: 0.86rem;
}
.admin-data-table th {
  background: rgba(255, 90, 18, 0.05);
  color: rgba(245, 241, 235, 0.65);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-data-table tbody tr:hover { background: rgba(255, 90, 18, 0.04); }
.admin-data-table tbody tr.is-selected { background: rgba(255, 90, 18, 0.1); }
.admin-data-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 90, 18, 0.14);
  color: #ff8c4f;
  font-size: 0.72rem;
  font-weight: 800;
}
.admin-data-chip {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 241, 235, 0.78);
  font-size: 0.7rem;
  font-weight: 700;
  margin-right: 2px;
}
.admin-data-actions {
  text-align: right;
  white-space: nowrap;
}
.admin-data-actions .text-link.danger { color: #fca5a5; margin-left: 12px; background: none; border: none; cursor: pointer; padding: 0; font: inherit; }
.admin-data-actions .text-link.danger:hover { color: #ef4444; }
.admin-data-empty { text-align: center; padding: 36px 12px; color: rgba(245, 241, 235, 0.55); }
.admin-data-note { padding: 10px 16px; margin: 0; color: rgba(245, 241, 235, 0.5); font-size: 0.78rem; font-style: italic; }

/* Events tab: table + editor side by side */
.admin-events-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) { .admin-events-grid { grid-template-columns: 1fr; } }
.admin-event-panel { padding: 20px; position: sticky; top: 16px; }
.admin-event-empty h3 { margin: 8px 0; color: #f7f3ef; }
.admin-event-empty p { color: rgba(245, 241, 235, 0.6); margin: 0 0 12px; }
.admin-event-form { display: flex; flex-direction: column; gap: 10px; }
.admin-event-form h3 { margin: 0 0 6px; color: #f7f3ef; }

/* Client personal-record panel (Progress page). */
.exercise-pr-card {
  display: grid;
  gap: 10px;
}
.exercise-pr-list {
  display: grid;
  gap: 8px;
}
.exercise-pr-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 90, 18, 0.05);
  border: 1px solid rgba(255, 90, 18, 0.16);
}
.exercise-pr-row strong { display: block; color: inherit; font-size: 0.9rem; }
.exercise-pr-row small { color: rgba(0, 0, 0, 0.6); font-size: 0.72rem; }
.exercise-pr-values {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.82rem;
}
.exercise-pr-values span {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 90, 18, 0.16);
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.exercise-pr-values b { color: inherit; }

/* ============================================================
   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-flow: row wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.phone-meal-row.phone-planned-meal-row .kost-recipe-av {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 0.95rem;
}
.phone-meal-row.phone-planned-meal-row .phone-meal-row-info { flex: 1; }
.phone-meal-row.phone-planned-meal-row .phone-meal-row-actions,
.phone-meal-row.phone-planned-meal-row .meal-recipe-peek { flex-basis: 100%; }
.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: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.today-meal-plan-row.is-recipe-open {
  grid-template-columns: auto minmax(0, 1fr);
}
.today-meal-plan-row .kost-recipe-av { width: 42px; height: 42px; }
.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);
}

/* Info-toasts (fx "på vej"-beskeder) må ikke ligne succes-grøn. */
.flash-info {
  background: #4b5563;
}

/* Workout-editor: forklaring på hvorfor synligheds-flueben ikke gælder PT-pas. */
.pt-visibility-hint {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(200, 149, 41, 0.12);
  border: 1px solid rgba(200, 149, 41, 0.35);
  font-size: 0.86rem;
  line-height: 1.45;
}

/* Skader og hensyn (F4): amber chips og et ikke-lukbart banner. Farverne er
   rgba over den arvede tekstfarve, så de holder kontrasten i BÅDE lyst og mørkt
   tema (bf-front-dark / bf-dark-theme). Sæt aldrig en fast color her: det er
   præcis sådan white-on-white-fejlen opstår. */
.bf-lim-banner {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 122, 60, 0.45);
  border-left-width: 5px;
  background: rgba(255, 122, 60, 0.12);
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
}
.bf-lim-banner strong { font-weight: 800; }
.bf-lim-banner-line + .bf-lim-banner-line { margin-top: 4px; }
.bf-lim-banner-tail { margin-top: 6px; opacity: 0.85; }
/* Tildel-dialogen fylder banneret med textContent (ingen HTML), så linjeskiftene
   skal komme fra CSS. */
.bf-lim-banner[data-lim-banner] { white-space: pre-line; }
.bf-lim-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  border: 1px solid rgba(200, 149, 41, 0.5);
  background: rgba(200, 149, 41, 0.14);
  color: inherit;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-lim-chip.is-more { font-weight: 700; opacity: 0.8; }
.bf-lim-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; }
.bf-ctable-cli .bf-lim-chip { margin-left: 6px; vertical-align: middle; }
.bf-lim-sub { padding: 10px 0 2px; font-weight: 800; font-size: 0.82rem; opacity: 0.75; }
/* Flush som standard (klientens kort har sin egen polstring). Kun coachens
   fuldbredde-kort på Indstillinger rykker listen ind på linje med overskriften. */
.bf-lim-list { list-style: none; margin: 0; padding: 0 0 4px; }
.bf-cfg-list .bf-lim-list { padding: 0 20px 12px; }
.bf-lim-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25));
}
.bf-lim-item small { display: block; opacity: 0.75; }
.bf-lim-item.is-resolved { opacity: 0.65; }
.bf-lim-item.is-resolved strong { text-decoration: line-through; }
.bf-lim-resolved { padding: 0 20px 8px; }
.bf-lim-resolved summary { cursor: pointer; font-weight: 700; }
.bf-lim-resolved .bf-lim-list { padding-left: 0; padding-right: 0; }
.bf-lim-form { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 12px 20px 16px; }
.bf-lim-form label:nth-of-type(3) { grid-column: 1 / -1; }
.bf-lim-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.wa-client .bf-lim-chip { margin-left: auto; font-size: 0.7rem; }
/* Enkel visning: 20 px er gulvet (v651), også for hensyn. */
.bf-senior .bf-lim-chip, .bf-senior .bf-lim-item { font-size: 18px; }
.bf-senior .senior-card .bf-lim-line { display: block; font-size: 20px; padding: 6px 0; }
@media (max-width: 640px) {
  .bf-lim-form { grid-template-columns: 1fr; }
}

/* Program-builder: dag-række der peger på en workout som ikke findes. */
.builder-workout-missing {
  border: 1px dashed var(--danger);
  border-radius: 8px;
  background: rgba(190, 60, 45, 0.08);
}
.builder-workout-missing .builder-workout-title {
  color: var(--danger);
  font-size: 0.85rem;
}
.builder-workout-missing code {
  font-size: 0.8rem;
}

/* Check-in skabelon-editorens modal. */
.form-template-card {
  max-width: 620px;
  width: min(620px, calc(100vw - 32px));
}
.form-template-questions {
  display: grid;
  gap: 8px;
  margin: 10px 0 4px;
}
.form-template-question-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
}
.form-template-question-row input[type="text"] {
  min-width: 0;
}
.form-template-question-row .checkbox-label.compact {
  white-space: nowrap;
  font-size: 0.82rem;
}
@media (max-width: 560px) {
  .form-template-question-row {
    grid-template-columns: 1fr auto;
  }
}

.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 {
  position: relative; /* forankrer versionsnummeret i hjørnet */
  border: 1px solid rgba(255, 90, 18, 0.28);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255, 90, 18, 0.08);
}

/* Diskret build-version i nederste højre hjørne — så en skærmdeling/et foto af
   menuen altid afslører, hvilken version enheden kører. */
.beast-mode-version {
  position: absolute;
  right: 8px;
  bottom: 5px;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  opacity: 0.55;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.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);
}

/* minmax(0,1fr), NOT the default `1fr`: a grid track's automatic minimum is its
   item's MIN-CONTENT, so one over-wide child stretches the track and every
   sibling with it. On /app/resources the five subtabs measured 531px of
   min-content at a 375px viewport, and header, body and footer all inherited
   that width — 168px of the page hanging off the right edge. Capping the floor
   at 0 makes the shell obey the phone; the scroller inside (.client-subtabs)
   keeps the tabs reachable. */
.client-page-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  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) */
/* `1fr` keeps min-width:auto, so the day chips forced the strip to 601px inside a
   390px phone with overflow visible — Sunday was off-screen and unreachable. */
.program-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.program-week-strip > * {
  min-width: 0;
}
.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);
  min-width: 0;
  overflow: hidden;
}
.program-week-day.is-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* bug-e2d62ede (2026-08-17): "the calendar text is outside of its box".
   Measured at 384px: the 7 columns are 46px, leaving 34px of content width,
   while "MAN." + "17" needs 52px — so the label spilled out of its tile and
   the last day was clipped at the screen edge (strip scrollWidth 363 in a
   358px container). One line simply does not fit on a phone, so let it wrap
   to two; the tile is 92px tall and has the room. overflow:hidden on the tile
   is the belt-and-braces part: nothing can paint outside its box again. */
.program-week-day-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.program-week-day-label small { font-size: 0.82rem; 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;
  /* Titlen måtte før skrumpe til NUL (minmax(0, 1fr)), mens knap-kolonnen havde
     et gulv på 250px og voksede til sit indhold. Målt 11/9 i en 601px bred
     spalte: knapperne tog 284, titlen fik 0, og så flød "Session 9 - Hybrid
     Capacity" ud over sine naboer, ét ord pr. linje, oven i knappen og
     statuspillen. Gergø sendte billedet.
     Nu har titlen et gulv, og knapperne har intet: de ombrydes hellere til to
     linjer end at presse titlen væk. Rækken bliver højere, aldrig rodet. */
  grid-template-columns: 92px minmax(140px, 1fr) auto auto minmax(0, 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-text, 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-text, 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;
  /* v571: was a hard repeat(3, …) at every width, so on a 390px phone each card
     was ~118px and the equipment line was cut mid-word. auto-fit keeps 3 columns
     on desktop and drops to 1 on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 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;
}

/* Never holds an image — it is the workout type. Rendered as a full-width 58px
   band showing a single letter it read as a broken thumbnail; it is a chip. */
.portal-thumb {
  display: inline-grid;
  justify-self: start;
  place-items: center;
  padding: 4px 10px;
  border-radius: 999px;
}

.portal-thumb span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

/* Both were inline, so the meta ran straight on from the title:
   "…Strength + Engine Squat / Deadlift / Row". */
.training-session-row > div > strong,
.training-session-row > div > small {
  display: block;
}

.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;
  /* Må ombrydes: uden dette tvinger knapperne deres fulde bredde igennem og
     stjæler titlens plads (se kommentaren på .training-session-row). */
  flex-wrap: wrap;
}

.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: auto 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 {
  margin: 0 18px;
}

/* Ingen margin i siderne. Luften kommer nu fra kort-standarden, som giver
   .progress-file-input sine 18px fordi den er direkte barn af
   .progress-photo-upload-card. Beholdt den de gamle margin: 0 18px, ville den
   lægge 18 oven i 18 og stå 37px inde, mens naboen .progress-photo-date stod
   på 19px. Søg på KORT-LUFT i den her fil. */
.progress-file-input {
  margin: 0;
}

.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;
}

/* The split card's halves get the same typography, but inherit their colour
   from the card instead of hardcoding the dark theme's white — the theme
   override only reaches the direct children above, so a copied #fff here
   renders white-on-white in the sand theme. */
.habit-score-card.split > div > span {
  color: inherit;
  opacity: 0.72;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.habit-score-card.split > div > strong {
  color: inherit;
  font-size: 2rem;
}

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

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

/* Without this the halves' span/strong/small flow inline and read as
   "Nuværende streak0 dageBliv ved." */
.habit-score-card.split > div {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.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);
}

/* v705 (en klient 15/9: "lille bitte minus"): 16 px blev til 28 px, og knappen
   får sin egen tryk-flade i stedet for at ligge og gemme sig i hjørnet. */
.habit-check-undo {
  position: absolute;
  right: -10px;
  top: -12px;
  display: grid;
  width: 28px;
  height: 28px;
  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: 1rem;
  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;
  /* Gergø 27/9: bugrunden (B7d). Vane-sidens stime-ring alene (.mini-ring er
     urørt): midten er kortets flade og sporet kortets linje, i lyst og mørkt
     tema og i temaerne. Før var midten fast #101010 og sporet næsten hvidt, så
     tallet stod mørkt på mørkt i lyst tema, og sporet kunne ikke ses. */
  background:
    radial-gradient(circle, var(--bf-surface, var(--surface)) 0 56%, transparent 57%),
    conic-gradient(var(--accent) 0 var(--value), var(--bf-line, var(--line)) var(--value) 100%);
}

.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;
}

/* ── Kladde-banner på check-ins (Coachway #8) ──────────────────────────────
   Gennemsigtigt fyld, så det toner det kort det ligger i, uanset tema, og
   tokens der findes begge steder. */
.checkin-draft-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 6px; padding: 11px 13px; border-radius: 12px;
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid var(--bf-line, #E5DFD2);
}
.checkin-draft-banner > div { flex: 1; min-width: 0; }
.checkin-draft-banner strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--bf-ink, #1C1A17); }
.checkin-draft-banner small { font-size: 0.76rem; color: var(--bf-muted2, #55503F); }
.checkin-draft-clear {
  flex: none; font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  padding: 6px 11px; border-radius: 9px;
  background: var(--bf-surface, #fff);
  border: 1px solid var(--bf-line, #E5DFD2);
  color: var(--bf-muted2, #55503F);
}
.checkin-draft-clear:hover { border-color: var(--bf-accent); color: var(--bf-accent-text, var(--bf-accent)); }

@media (max-width: 480px) {
  .checkin-draft-banner { flex-wrap: wrap; }
  .checkin-draft-clear { margin-left: auto; }
}

/* ── Én metric-dropdown + datopresets på Fremgang (Coachway #4) ────────────
   Farverne er tokens der findes i BEGGE temaer. Den gamle coach-graf havde
   `stroke:#ff5a12` og hvide gitterlinjer hårdkodet, altså usynlige i lyst tema;
   den er væk, og begge sider bruger nu den samme komponent. */
.progress-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.progress-series-pick { display: inline-flex; min-width: 0; }
.progress-series-pick select {
  font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 6px 10px; border-radius: 9px;
  background: var(--bf-surface, #fff);
  border: 1px solid var(--bf-line, #E5DFD2);
  color: var(--bf-ink, #1C1A17);
  max-width: 100%;
}
.progress-series-pick select:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 1px; }

/* Samme luft som resten af kortet, ikke 16px: periodeknapperne stod 2px
   skævt inde i .progress-chart-card. Tallet står FAST og læser med vilje ikke
   var(--card-inset): variablen er 0 i print og inde i hvert kort der er meldt
   fra kort-standarden, og så ville periodeknapperne stille falde til kanten.
   Se advarslen i KORT-LUFT-blokken. */
.progress-range-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.progress-range-tabs button {
  font: inherit; font-size: 0.74rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid var(--bf-line, #E5DFD2);
  color: var(--bf-muted2, #55503F);
}
.progress-range-tabs button:hover { border-color: var(--bf-accent); }
/* Hvid på accent taber til ink-catch-all'en uden !important (§1), og selve
   fyldet er knap-tokenet fra v584, som er AA-målt til hvid tekst. */
.progress-range-tabs button.active {
  background: var(--bf-accent-btn, var(--bf-accent));
  border-color: var(--bf-accent-btn, var(--bf-accent));
  color: #fff !important;
}
.progress-range-empty {
  padding: 26px 16px; text-align: center;
  font-size: 0.84rem; color: var(--bf-muted2, #55503F);
}

@media (max-width: 560px) {
  .progress-range-tabs { padding: 10px 18px 0; gap: 5px; }
  .progress-range-tabs button { padding: 5px 10px; font-size: 0.72rem; }
}

/* The old chart drew a HARDCODED clip-path polygon as the "curve" — it never
   reflected the data, and the real dots sat off it. This one is plotted. */
.portal-line-chart {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}

.weight-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wchart-grid {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.16;
  vector-effect: non-scaling-stroke;
}

.wchart-ylabel,
.wchart-xlabel {
  fill: currentColor;
  opacity: 0.66;
  font-size: 9px;
  font-weight: 700;
}

.wchart-line {
  fill: none;
  stroke: var(--bf-accent, var(--accent));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.wchart-dot {
  fill: var(--bf-accent, var(--accent));
}

.wchart-dot.is-last {
  stroke: var(--bf-surface, #fff);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.weight-chart-latest {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.weight-chart-latest strong {
  font-size: 1.5rem;
}

.weight-chart-latest span {
  opacity: 0.7;
  font-size: 0.82rem;
}

/* ── Cardio-rotationsbanner + multi-pas-dage (løbeprogrammerne) ─────────────
   Colours inherit from the card so the banner works in BOTH themes — no
   hardcoded whites (the invisible-text trap) and no dark-theme alphas. */
.cardio-rotation-banner .cardio-rotation-list {
  display: grid;
  gap: 10px;
}

.cardio-rotation-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(127, 127, 127, 0.28);
  border-radius: 12px;
}

.cardio-rotation-row.is-running {
  border-color: var(--bf-accent, var(--accent));
}

.cardio-rotation-tag {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff !important;
  background: var(--bf-accent, var(--accent));
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.cardio-rotation-row strong {
  display: block;
  color: inherit;
}

.cardio-rotation-row small {
  display: block;
  color: inherit;
  opacity: 0.72;
}

.cardio-rotation-cta {
  margin: 4px 0 0;
  color: inherit;
  opacity: 0.85;
  font-size: 0.88rem;
}

.cardio-rotation-cta a {
  color: var(--bf-accent-text, var(--bf-accent, var(--accent)));
  font-weight: 700;
}

/* Weekplan day cell holding several levels' sessions (shared Sundays). */
.client-weekday.is-multi {
  display: grid;
  gap: 6px;
  align-content: start;
}

.cwd-multi-link {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 127, 127, 0.28);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.cwd-multi-link .cwd-title {
  font-size: 0.8rem;
}

.cwd-multi-link .cwd-open {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Recipe-book pills under the meal-type chips + the active book's blurb. */
.kost-book-row {
  margin-top: -4px;
}

.kost-book-blurb {
  margin: 2px 4px 0;
  color: inherit;
  opacity: 0.72;
  font-size: 0.82rem;
}

.kost-sheet-share {
  border-color: var(--bf-accent, var(--accent));
  color: var(--bf-accent-text, var(--bf-accent, var(--accent)));
}

.kost-recipe-av-img {
  overflow: hidden;
  padding: 0;
}

.kost-recipe-av-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lokalt cachet video-thumbnail på øvelsesrækker (link-rot-sikringen). */
.exercise-thumb-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #101010;
}

.exercise-thumb-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.exercise-thumb-btn span {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-size: 0.85rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* Kategori-/vare-fotos i fødevarelister. */
.food-thumb {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
}

.food-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sidebladring i coach-opskriftsbiblioteket (pile + swipe). */
.coach-recipe-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.coach-recipe-pager span {
  color: inherit;
  opacity: 0.7;
  font-size: 0.82rem;
  text-align: center;
}

.coach-recipe-pager button[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* ── Branded opskrifts-ark: samme mørke stil som delekortet ─────────────────
   Deliberately dark in BOTH themes (same precedent as the tools-page
   instrument cards). The sand ink catch-all (0,2,1 on p/li/span/div) would
   paint this black-on-black, so every text element carries its colour with
   !important — the pattern that finally holds (see theme-token notes). */
.kost-recipe-sheet {
  background: #101010 !important;
  border-top: 3px solid var(--bf-accent, #ff5a12) !important;
  border-radius: 12px;
  margin-top: 12px;
  padding: 14px 16px 16px;
}

.kost-recipe-sheet .kost-sheet-h {
  color: var(--bf-accent-text, var(--bf-accent, #ff5a12)) !important;
  font-weight: 900;
}

.kost-recipe-sheet .kost-sheet-ings li span { color: rgba(255, 255, 255, 0.92) !important; }
.kost-recipe-sheet .kost-sheet-ings li small { color: rgba(255, 255, 255, 0.58) !important; }
.kost-recipe-sheet .kost-sheet-instr { color: rgba(255, 255, 255, 0.85) !important; }

.kost-recipe-sheet .kost-sheet-tilpas {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
}

.kost-recipe-sheet .kost-sheet-share {
  color: var(--bf-accent-text, var(--bf-accent, #ff5a12)) !important;
  border: 1px solid var(--bf-accent, #ff5a12);
  background: transparent;
  margin-left: 8px;
}

.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;
  /* Hårde minimums (260+420+300+2×14 = 1008px) stak 32px ud ved 1280 og 131px ved
     1181: pladsen er 942px før 1-kolonne-breakpointet ved 1180. Samme forhold,
     men uden minimum, så kolonnerne deler den plads der ER. Målt 3/9 2026. */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr) minmax(0, 0.95fr);
  gap: 14px;
  min-height: 680px;
  min-width: 0;
}

.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;
  min-width: 0;
}

.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, #c04009, #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;
}

/* Samme luft som resten af kortet. Stod som 16px, men kort-standarden gav
   den 18px i forvejen, og med :where()-standarden ville de 16px pludselig
   vinde og flytte formularen 2px. Tallet står FAST og læser med vilje ikke
   var(--card-inset), som er 0 i print og i hvert kort der er meldt fra. */
.coach-schedule-card .profile-form {
  padding: 0 18px 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, #c04009, #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;
}
/* Gergø 23/9: husets rester (2). Uden træning er der ingen ring, så rækkerne
   får hele bredden. */
.client-overview-card.is-no-ring { grid-template-columns: minmax(0, 1fr); }

.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;
}

/* v571: the ring's centre is ALWAYS a dark fill (#101010 radial-gradient above),
   but the sand ink catch-all `.bf-sand .main-content :is(strong,b)` is (0,2,1)
   and repainted "0%" / "Plan Adherence" in the page ink — dark on dark, invisible
   in the light theme. The fill is theme-independent, so the text must be too. */
.bf-sand .main-content :is(.overview-ring, .storage-ring) strong { color: #fff; }
.bf-sand .main-content :is(.overview-ring, .storage-ring) span { color: rgba(255, 255, 255, 0.72); }

/* The unfilled part of the track was rgba(255,255,255,0.11) — a dark-theme
   token. On the sand theme's white card it vanishes, so a 0% ring rendered as
   a solid black disc that contradicted its own number. */
/* "Plan-efterlevelse" is wider than the inner disc — its trailing letters
   crossed onto the white card. Keep the label inside the plug. */
.overview-ring span,
.storage-ring span {
  max-width: 74%;
  font-size: 0.58rem;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.bf-sand .main-content :is(.overview-ring, .storage-ring) {
  background:
    radial-gradient(circle, #101010 0 54%, transparent 55%),
    conic-gradient(var(--bf-accent, var(--accent)) 0 var(--value), rgba(20, 16, 12, 0.16) var(--value) 100%);
}

.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;
  /* Fem STIVE kolonner gav 105px hver i klientens spalte, mens ordet
     "Programmer" fylder 152. Titlen løb derfor ind over nabokortet (målt 11/9:
     "Programmer" 342-494 oven i "Guides" 459-527). auto-fit lader kortene
     ombryde til flere rækker i stedet, så de aldrig bliver smallere end ordet. */
  grid-template-columns: repeat(auto-fit, minmax(160px, 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;
}

/* Skeptikeren 27/9 (svar 3): et tomt køn står dæmpet som pladsholderne i Højde
   og Vægt, ikke som et valgt svar. Listens egne valg beholder deres farve. */
.settings-fields-grid select:has(option[value=""]:checked) {
  color: rgba(245, 241, 235, 0.38);
}

/* Gergø 27/9: v735, (d). Vægten fra den seneste vejning: linjen under feltet
   siger hvor tallet kommer fra, i almindelig vægt og dæmpet som etiketten, og
   som en sætning (husets "label small" er ellers versaler). */
.settings-fields-grid .settings-weight-source {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: normal;
}
/* Gergø 27/9: v735, (c). Vandkortet på I dag: linjen om det automatiske vand
   under coachens kcal står med luft under tallet, ikke trukket op i det. */
.phone-water-card .phone-water-basis { margin: 6px 0 0; }

.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;
}
/* En kompakt række med præcis to celler (tekst + højre celle: knapper, tal,
   beløb) har ingen ikon-kolonne. Uden denne regel landede teksten i
   auto-kolonnen, som tog hele bredden til en lang vane-regel, og Redigér og
   Slet røg ud gennem kortets overflow: hidden (Gergø 16/9 kl. 07.13, en klients
   Vaner-fane på telefonen; målt lokalt: kolonnerne blev 286px 0px 0px).
   Teksten får nu det, der er tilovers, og den højre celle får altid sin egen
   bredde, på alle skærmstørrelser. */
.coach-list-row.compact:has(> :nth-child(2):last-child) {
  grid-template-columns: 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;
}

/* padding-block, ikke padding: de vandrette 0 ville vinde over kort-standarden
   og trække værktøjslinjen tilbage til kortkanten. */
.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-block: 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;
}

/* Målt 11/9: 2,85:1. color:#111 blev overmalet af ink-reglen, så DK-chippen stod
   med cremefarvet tekst på lys orange. Mørkere fyld + hvid tekst, som resten af
   de fyldte kontroller. */
.nutrition-locale-switch button.active {
  background: var(--bf-accent-btn, var(--accent));
  border-color: var(--bf-accent-btn, var(--accent));
  color: #fff !important;
}

.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;
  /* Gulv på tekstkolonnen: med minmax(0, 1fr) måtte den skrumpe til NUL, og så
     flød overskriften ud over knappen. Samme fejl som .training-session-row. */
  grid-template-columns: minmax(160px, 1fr) auto;
  gap: 18px;
  align-items: center;
  /* .portal-card har INGEN egen padding, hver variant sætter sin egen (fx
     .habit-score-card 12px). Denne fik aldrig en, så teksten stod 1 px fra begge
     kanter på /app/habits mens nabokortene var pænt indrykket. Gergø så det
     11/9. 18px matcher .phone-card, som er samme kort på telefonens forside. */
  padding: 18px;
  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. */
/* Tablet (v714): grænsen er flyttet fra 1100 til 721 px. Målt 16/9 var Hjem en
   kolonne på 560 px midt på tabletten (58 procent af bredden ved 1024). Desktop
   fra 1100 og telefonen til og med 720 er uændrede. */
@media (min-width: 721px) {
  .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,
  /* .startup-wizard-prompt er en FORÆLDET selektor: kortet renderes som
     .phone-startup-card, så det faldt ud af listen og blev et halvt kort klemt
     mellem to fulde. Resultatet var en tom halvdel ved siden af det, og det
     samme for to-do. Målt 11/9 ved 1280: startkort og to-do havde hver sin
     række med et hul til højre, mens resten lå pænt to og to. */
  .phone-dashboard > .startup-wizard-prompt,
  .phone-dashboard > .phone-startup-card,
  .phone-dashboard > .resume-card,
  .phone-dashboard > .phone-todo-card,
  .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.            */
/* Tablet (v714): fra 721 px som layout-blokken ovenfor, så kortene på tabletten
   får samme mål som på pc. */
@media (min-width: 721px) {
  /* 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;
}

/* opacity was 0.7: the audit flattens background alpha but NOT an ancestor's
   opacity, so every ratio measured on this tile was optimistic by that factor.
   The dashed border and the badge already say "locked"; 0.88 keeps the muted
   look without taxing the text a second time. */
.phone-daily-track-tile.is-locked {
  opacity: 0.88;
  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);
}
/* Amber #f59e0b on the near-white locked tile measured 2.02:1 — the least
   readable text in the whole client app. A translucent grey fill tints whatever
   card is behind it in EITHER theme (§1), and `color: inherit` means the badge
   can never separate from the tile's own ink. */
.phone-daily-track-tile.is-locked em {
  align-self: start;
  justify-self: start;
  border-radius: 999px;
  padding: 2px 8px;
  color: inherit;
  background: rgba(127, 127, 127, 0.18);
  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-text, 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;
  /* Knappen fik farve og runde hjørner her, men ALDRIG polstring, så teksten
     rørte pillens kant i begge sider (målt 11/9: 0 px luft, Gergø så det).
     Linket har ingen klasse i markup, så det arver intet fra .button. */
  padding: 12px 20px;
  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;
}

/* Gergø 27/9, svar 3: uden coachens kostmål er der ingen ring, som tallet
   ellers trækkes op ved siden af, og linjen siger at målene ikke er sat. */
.phone-nutrition-card:not(:has(.phone-goal-ring)) .phone-nutrition-main {
  margin-top: 0;
}

.phone-nutrition-note {
  margin: 0;
  color: var(--bf-muted, #6b6453);
  font-weight: 800;
}

.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;
  }

  .training-library-intro {
    display: grid;
    align-items: start;
  }

  .recipe-catalog-hero {
    display: grid;
    align-items: start;
  }

  .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;
  }

  /* Gergø 23/9: husets rester (1). Baggrunden dækker også uret og foden, så et
     tryk ved siden af skuffen lukker den i stedet for at ramme Næste øvelse. */
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9490;
    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;
  }

  /* Gergø 23/9: husets rester (1). Skuffen lå på 60, under afspillerens ur
     (9000) og fod (4000), så I dag og Indstillinger kunne ikke trykkes i
     pausen. Nu samme lag som T1 (tablet på højkant): over foden, løbeurets lås,
     stop-spørgsmålet, uret og formatvælgeren, under persona-bjælken (9600). */
  .client-sidebar,
  .coach-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    z-index: 9500;
    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);
    /* Gergø 23/9: husets rester (skeptikernes S1). På 9500 faldt den lukkede
       skuffes skygge over afspillerens fod, uret og dialogerne (målt 390 px:
       Forriges kant 255 til 227). Som T1 er den lukkede skuffe nu skjult, så
       skyggen og dens links (også for tabulatoren) er væk, til den åbnes. */
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }

  .client-sidebar.mobile-menu-open,
  .coach-sidebar.mobile-menu-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 200ms ease;
  }

  .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%;
  }

  /* Opstartsguidens formular ER et .portal-card (main.js: class="startup-wizard-form
     portal-card"), og her på telefon sætter den selv 16px hele vejen rundt. Den
     skal derfor melde sig fra kort-standarden, ellers lægger børnene 18px oven i
     de 16 og teksten står 34px inde. Målt 11/9 på 411px: alle syv direkte børn
     stod på pl=18 oven i kortets 16, og "Tilbage til I dag" flyttede sig fra
     17px til 35px. Opt-outen står HER og ikke i undtagelseslisten, fordi
     padding'en kun findes på telefon: på desktop har formularen ingen egen
     padding og skal have standardens 18px. */
  .startup-wizard-form {
    padding: 16px;
  }
  .main-content .portal-card.startup-wizard-form { --card-inset: 0px; --card-inset-block: 0px; }

  .settings-fields-grid .button,
  .settings-about-form .button {
    justify-self: stretch;
  }

  /* Uge-tabellen går helt ud til kanten på telefon, så de syv dage plus Total
     har plads. De negative marginer ALENE gjorde den kun skæv: spalten er et
     grid med et fast spor, så marginen flyttede kortet 12 px til venstre uden at
     gøre det bredere. Målt 11/9 på 411 px: kortet lå 0 til 387, mens de andre
     kort lå 12 til 399, altså 12 px ude i venstre side og 24 px fra højre kant.
     Bredden skal siges eksplicit, ellers arver den sporet. */
  /* .portal-card.habit-matrix-card, ikke bare .habit-matrix-card: linje 14423
     sætter max-width:100% på .portal-card i et SENERE media query, og ved samme
     specificitet vinder den sidste. Uden de to klasser blev bredden klippet
     tilbage til sporets 387, og kortet lå stadig skævt. */
  .portal-card.habit-matrix-card {
    margin-right: -12px;
    margin-left: -12px;
    width: calc(100% + 24px);
    max-width: none;
    border-radius: 0;
  }

  .habit-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .habit-score-card {
    min-height: 0;
    padding: 12px;
  }

  .habit-score-card > span,
  .habit-score-card.split > div > span,
  .habit-score-card small {
    font-size: 0.62rem;
  }

  .habit-score-card > strong,
  .habit-score-card.split > div > strong {
    font-size: 1.5rem;
  }

  /* Full width so both streaks fit side by side instead of one being hidden. */
  .habit-score-card.split {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .habit-score-card.split > div {
    gap: 4px;
  }

  .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,
  .habit-matrix-row .habit-chip {
    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 {
    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: inherit;
  opacity: 0.8;
  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-text, 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-text, 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-text, 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-text, 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); }
/* Gemte blokke (F1): chippen der åbner skabelon-vælgeren, stiplet så den skiller sig ud fra sektionstyperne. */
.section-add-chip-library { border-style: dashed; }

/* ── 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; flex-wrap: wrap; }
.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: minmax(0, 1fr); } }
/* Gergø 16/9 kl. 08.10, en klients madplan på telefonen: hele editoren blev
   bredere end skærmen, så Byt og ✕ (fjern måltid) lå uden for skærmen, og han
   troede, at et måltid ikke kunne slettes. Målt lokalt med stor skrift (137 %):
   de tre knapper i .mp-toolbar-right ombrydes ikke, deres samlede bredde
   (441 px) blev editorens mindstebredde, og forælderens 1fr-spor fulgte med.
   min-width: 0 gør editoren til et spor der kan krympe, ombrydningen ovenfor
   gør knapperne smallere end skærmen, og minmax(0, 1fr) holder søjlen inde. */
.madplan-editor { min-width: 0; max-width: 100%; }
.mp-left, .mp-canvas, .mp-db, .mp-meal, .mp-sec, .coach-meal-picker { min-width: 0; }
.mp-db-search, .coach-meal-picker-head input, .mp-calc-row3 input, .mp-calc-field select { min-width: 0; }
.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: repeat(2, minmax(0, 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; flex-wrap: wrap; }
.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; flex-wrap: wrap; }
.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; }
/* Madplan i blokke, M2 (16/9-2026): coachens editor, telefonen først.
   Farverne er editorens egne tokens oven på .nutrition-light (--surface, --line,
   --ink, --muted) og den sandfarvede skal (--bf-accent-text, --bf-gold,
   --bf-danger), så lys og mørk følger med. Målt kontrast: bloknavnet
   #A34320 på hvid 6,21 og #E8905F på #1E1B18 7,01; eller-båndet #4F6678 på hvid
   5,99 og på #ECF1F4 5,27, mørk #9FB8C6 på #1E1B18 8,28; badgen Valgfrit
   #8A6A1E på #FBF3D9 4,55, mørk #D8B45E på #332B14 7,09. Grå tekst står kun på
   --surface: #6b7280 på #f3f5f8 er 4,43 og dumper. */
.madplan-editor {
  --mp-fork: #4F6678; --mp-fork-bg: #ECF1F4; --mp-fork-line: #C7D6DE;
  --mp-accent-text: var(--bf-accent-text, #A34320);
  --mp-badge: var(--bf-gold, #8A6A1E); --mp-badge-bg: var(--bf-gold-bg, #FBF3D9);
  --mp-danger: var(--bf-danger, #B83A2E);
}
.bf-dark .madplan-editor { --mp-fork: #9FB8C6; --mp-fork-bg: #202B32; --mp-fork-line: #3C4E58; }
.mp-fold-toggle, .mp-goalstrip, .mp-ings-toggle { display: none; }
.mp-sec-phone { display: none; }
.mp-plans-info { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 0.88rem; }
.mp-plans-info p { margin: 0; }
.mp-plan-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-plan-pick > span { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.mp-plan-pick-btn { min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.84rem; cursor: pointer; text-align: left; }
.mp-plan-pick-btn.active { border-color: var(--mp-accent-text); box-shadow: inset 0 0 0 1px var(--mp-accent-text); font-weight: 700; }
.mp-plan-pause { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mp-plan-pause .button { min-height: 40px; }
.mp-blokke-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 0.84rem; }
.mp-blokke-hint p { margin: 0; flex: 1; min-width: 0; color: var(--ink); }
.mp-blokke-hint .mp-undo-x { min-width: 40px; min-height: 40px; }
.mp-suggest-btn { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 10px 14px; text-align: left; border-radius: 12px; border: 1px dashed var(--mp-accent-text); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.madplan-editor .mp-suggest-btn strong { color: var(--mp-accent-text); }
.madplan-editor .mp-suggest-btn small { color: var(--muted); font-size: 0.78rem; }
.mp-suggest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-suggest-row { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.mp-suggest-row strong { font-size: 0.86rem; }
.mp-suggest-row span { font-size: 0.82rem; color: var(--ink); }
.mp-suggest-row small { font-size: 0.74rem; color: var(--muted); }
.madplan-editor .mp-choice-line { margin: 0; font-size: 0.8rem; color: var(--muted); }
.madplan-editor .mp-choice-line.is-hers { color: var(--ink); font-weight: 700; }
.mp-left-lines { display: grid; gap: 2px; margin: 10px 0 0; }
.mp-sec-overview { display: grid; gap: 4px; margin-top: 12px; }
.mp-sec-overview-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8rem; cursor: pointer; text-align: left; }
.mp-sec-overview-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mp-sec-overview-row small { flex: 0 0 auto; color: var(--muted); }
.mp-sec { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); }
.mp-sec.is-drop-over { box-shadow: 0 0 0 2px var(--mp-accent-text); }
.mp-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; min-height: 48px; padding: 6px 10px 6px 12px; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--surface); }
.mp-sec-phone { align-items: center; gap: 8px; min-width: 0; }
/* color !important på knapperne her: `.bf-sand .main-content button:not(...)` er
   0,7,0 og maler alle andre knapper om til sidens ink. Uden det blev den aktive
   fane ink på ink, altså usynlig (sand dark-pill-fælden). */
.mp-sec-name { min-height: 40px; padding: 0 2px; border: 0; background: none; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mp-accent-text) !important; cursor: text; text-align: left; overflow-wrap: anywhere; }
.mp-sec-rename, .mp-sec-title-field { min-width: 0; min-height: 40px; padding: 6px 10px; border-radius: 8px; font: inherit; font-weight: 700; }
.mp-sec-rename { width: 100%; max-width: 16rem; }
.mp-sec-title-field { flex: 1 1 9rem; width: 9rem; color: var(--mp-accent-text); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
.mp-sec-time-field { min-height: 40px; width: 7.5rem; padding: 4px 8px; border-radius: 8px; }
.mp-sec-type-field { min-height: 40px; padding: 4px 8px; border-radius: 8px; max-width: 9rem; }
.mp-sec-time { font-size: 0.74rem; font-weight: 700; color: var(--ink); background: var(--surface2); border-radius: 999px; padding: 2px 8px; }
.mp-sec-kcal { margin-left: auto; font-size: 0.88rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-sec-arrows { display: inline-flex; gap: 4px; }
.mp-sec-icon, .mp-sec-dots { min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.mp-sec-icon:disabled { opacity: 0.4; cursor: default; }
.mp-sec-icon.danger { color: var(--mp-danger) !important; }
.madplan-editor .mp-sec-hint { margin: 0; padding: 8px 12px 0; font-size: 0.8rem; color: var(--muted); }
.mp-sec-body { display: grid; gap: 8px; padding: 10px 12px 12px; min-width: 0; }
.madplan-editor .mp-sec-empty { margin: 0; font-size: 0.82rem; color: var(--muted); }
.mp-sec-add, .mp-new-sec { width: 100%; min-height: 44px; border-radius: 12px; border: 1px dashed var(--mp-accent-text); background: var(--surface); color: var(--mp-accent-text) !important; font: inherit; font-weight: 700; cursor: pointer; }
.mp-sec-add.is-open { border-style: solid; }
.mp-sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-new-sec { width: auto; flex: 1 1 10rem; }
.mp-sec-foot-label { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mp-chip-button { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.mp-chip-button.active { border-color: var(--mp-accent-text); color: var(--mp-accent-text) !important; }
.mp-chip { font-size: 0.72rem; font-weight: 700; border-radius: 7px; padding: 2px 8px; background: var(--surface2); color: var(--ink); white-space: nowrap; }
.mp-chip-diff { background: var(--mp-fork-bg); color: var(--mp-fork); }
.mp-chip-badge { background: var(--mp-badge-bg); color: var(--mp-badge); }
.madplan-editor .mp-meal.is-ekstra { border-style: dashed; }
.mp-drag { cursor: grab; color: var(--muted); font-size: 1rem; line-height: 1; padding: 4px 2px; user-select: none; }
/* Båndet mellem to måltider ER reglen: eller er en gaffel, og betyder begge. */
.mp-band { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) !important; }
.mp-band::before, .mp-band::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mp-band.is-eller { color: var(--mp-fork) !important; }
.mp-band.is-eller::before, .mp-band.is-eller::after { background: var(--mp-fork-line); }
button.mp-band { cursor: pointer; }
button.mp-band:hover, button.mp-band:focus-visible { background: var(--mp-fork-bg); border-radius: 8px; }
.mp-mini-dots { font-weight: 800; letter-spacing: 1px; }
.mp-goalstrip { gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mp-goalstrip-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.mp-goalstrip-kcal { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.mp-goalstrip-kcal small { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.mp-goalstrip-macros { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-goalstrip-macros span { flex: 0 0 auto; background: var(--surface2); color: var(--ink); border-radius: 7px; padding: 2px 8px; }
.mp-goalstrip-track { height: 7px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.mp-goalstrip-track i { display: block; height: 100%; background: var(--accent); }
/* Bundark: på desktop en popover inde i blokken eller kortet. */
.mp-sheet-scrim { display: none; }
.mp-sheet { position: static; margin: 8px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgba(28, 26, 23, 0.1); }
.mp-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mp-sheet-head strong { font-size: 1rem; min-width: 0; overflow-wrap: anywhere; }
.mp-sheet-close { min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.mp-sheet-body { display: grid; gap: 8px; padding: 8px 12px 12px; min-width: 0; }
.mp-sheet-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; }
.mp-sheet-row:last-child { border-bottom: 0; }
.mp-sheet-row:disabled { opacity: 0.45; cursor: default; }
.mp-sheet-row i { flex: 0 0 24px; font-style: normal; text-align: center; }
.mp-sheet-row span { min-width: 0; }
.mp-sheet-row small { display: block; color: var(--muted); font-size: 0.78rem; }
.madplan-editor .mp-sheet-help { margin: 0; font-size: 0.82rem; color: var(--muted); }
.mp-sheet-label { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.mp-sheet-group { display: grid; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mp-sheet-field { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 700; }
.mp-sheet-field input { min-height: 44px; padding: 8px 10px; border-radius: 10px; font: inherit; }
.mp-sheet-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-sheet-actions .button { min-height: 44px; }
.mp-danger-button { color: var(--mp-danger) !important; background: var(--surface); border: 1px solid var(--mp-danger); font-weight: 800; }
.mp-tabs { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mp-tab { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px; border: 0; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.mp-tab + .mp-tab { border-left: 1px solid var(--line); }
.mp-tab.active { background: var(--ink); color: var(--surface) !important; }
.mp-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.88rem; cursor: pointer; text-align: left; }
.mp-check i { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border-radius: 6px; border: 2px solid var(--accent); font-style: normal; font-weight: 900; font-size: 0.8rem; }
.mp-check.is-on i { background: var(--accent); color: #fff; }
.mp-big-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-big-choice { min-height: 52px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.mp-big-choice.active { font-weight: 800; border-color: var(--mp-accent-text); box-shadow: inset 0 0 0 1px var(--mp-accent-text); }
.mp-choices { display: grid; gap: 6px; }
.mp-choice { display: grid; gap: 1px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.mp-choice small { font-weight: 500; color: var(--muted); }
.mp-choice.active { border-color: var(--mp-accent-text); box-shadow: inset 0 0 0 1px var(--mp-accent-text); }
.mp-choice:disabled { cursor: default; }
.mp-choice:disabled:not(.active) { opacity: 0.6; }
.mp-radio.is-on { font-weight: 700; }
.mp-db-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 0.8rem; font-weight: 700; }
.mp-db-target select { min-width: 0; max-width: 100%; padding: 4px 6px; border-radius: 8px; font: inherit; }
@media (min-width: 721px) {
  /* Desktop: blokhovedet kan redigeres direkte i to rækker. Øverst træk,
     navnet, blokkens kcal og menuen, nederst tidspunkt, Tæller som, chips og
     pilene. ::after er linjeskiftet mellem dem. */
  .mp-sec.is-target { border-color: var(--mp-accent-text); }
  .mp-sec-desk { display: contents; }
  .mp-sec-head > .mp-drag { order: 0; }
  .mp-sec-title-field { order: 1; }
  .mp-sec-head > .mp-sec-kcal { order: 2; }
  .mp-sec-head > .mp-sec-dots { order: 3; }
  .mp-sec-head::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .mp-sec-time-field { order: 5; }
  .mp-sec-type-field { order: 6; }
  .mp-sec-head > .mp-chip { order: 7; }
  .mp-sec-head > .mp-sec-arrows { order: 8; margin-left: auto; }
}
@media (max-width: 720px) {
  /* Telefonen: måltiderne står først, ringene, målbjælkerne og beregneren er
     foldet ned under Mål og beregner, og opskriftssøjlen er væk (al tilføjelse
     sker gennem arket i blokken). */
  .mp-desk-only { display: none !important; }
  .mp-sec-phone { display: inline-flex; flex-wrap: wrap; }
  .mp-grid .mp-canvas { order: 1; }
  .mp-grid .mp-left { order: 2; }
  .mp-grid .mp-db { display: none; }
  .mp-fold-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
  .mp-left:not(.is-open) .mp-fold-body { display: none; }
  .mp-goalstrip { display: grid; }
  .mp-ings-toggle { display: inline-flex; align-items: center; min-height: 40px; margin-top: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
  .mp-meal:not(.is-ings-open) .mp-ings { display: none; }
  .mp-sec-head { padding: 4px 6px 4px 12px; }
  .mp-sheet-scrim { display: block; position: fixed; inset: 0; z-index: 1250; border: 0; background: rgba(6, 8, 12, 0.5); }
  .mp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1260; margin: 0; max-height: 78vh; overflow: auto; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25); }
  .mp-sheet .coach-meal-picker-results { max-height: none; }
  /* Skeptiker 21/9 (fund 2): fortryd-baren (Fjern, Slet blok, Kopiér blokkens
     måltider, plan på pause) står fast nederst som arket, over coachens bundmenu
     og med safe area, så Fortryd kan nås uden at rulle op. Grundreglen står ved
     .mp-undo-bar; her er kun telefonens kanter. */
  .madplan-editor .mp-undo-bar { position: fixed; left: 8px; right: 8px; bottom: calc(var(--bf-bottom-nav-h, 0px) + 8px + env(safe-area-inset-bottom, 0px)); }
  .madplan-editor .mp-undo-bar ~ .mp-undo-bar { bottom: calc(var(--bf-bottom-nav-h, 0px) + 72px + env(safe-area-inset-bottom, 0px)); }
  .madplan-editor .mp-undo-bar ~ .mp-undo-bar ~ .mp-undo-bar { bottom: calc(var(--bf-bottom-nav-h, 0px) + 136px + env(safe-area-inset-bottom, 0px)); }
}
.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; }
/* Madplan i blokke, M3 (16/9-2026): klientens blokke på I dag, Uge og Hjem.
   Farverne er Kost-appens tokens (--kost-card, --kost-ink, --kost-muted,
   --kost-line) og sandskallens (--bf-surface, --bf-ink, --bf-muted, --bf-line), som
   begge skifter med mørkt tema. Tekst med egen farve har !important, fordi
   `.bf-sand .main-content :is(p,li,td,th,span,div)` og button-catch-all'en ellers
   maler den i sidens ink. Regnet kontrast: bloknavnet #A34320 på hvid 6,21 og
   #E8905F på #211D18 6,9; Vælg den her er hvid på #B34E28 5,20; eller-båndet
   #736A5E på hvid 5,3 og #A79D8F på #211D18 6,4; Dit valg #3F6173 på #E7EEF2 5,6. */
.meal-block-list { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
/* Kortets luft er kort-standardens (--card-inset), så kortet sætter ingen padding selv. */
.meal-block-card { display: grid; gap: 10px; min-width: 0; }
.meal-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.meal-block-name { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-accent-text, #A34320) !important; overflow-wrap: anywhere; }
.meal-block-time { font-size: 0.74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--kost-sand, var(--bf-surface3, #F2EEE5)); color: var(--kost-ink, var(--bf-ink, #1C1A17)) !important; }
.meal-block-kcal { margin-left: auto; font-size: 0.88rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--kost-ink, var(--bf-ink, #1C1A17)) !important; }
.meal-block-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: var(--bf-gold-bg, #FBF3D9); color: var(--bf-gold, #8A6A1E) !important; }
.meal-block-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 10px; border-radius: 999px; border: 1px solid #C7D6DE; background: #E7EEF2; color: #3F6173 !important; font: inherit; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
button.meal-block-chip { min-height: 40px; cursor: pointer; }
.bf-dark .meal-block-chip { border-color: #3C4E58; background: #202B32; color: #9FB8C6 !important; }
.meal-block-help { margin: 0; padding-block: 0 16px; font-size: 0.84rem; }
.meal-block-note { display: grid; gap: 2px; margin: 0; font-size: 0.86rem; }
.meal-block-rows { display: grid; gap: 8px; min-width: 0; }
/* I blokken står knapperne under retten, så titlen får hele bredden på telefonen. */
.meal-block-card .today-meal-plan-row { grid-template-columns: auto minmax(0, 1fr); min-height: 0; padding: 10px 12px; }
.meal-block-card .today-meal-plan-row strong { white-space: normal; overflow-wrap: anywhere; }
.meal-block-card .today-meal-plan-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
.today-meal-plan-row-info b:empty, .phone-meal-row-info b:empty, .kost-week-meal span b:empty { display: none; }
.meal-block-wide { width: 100%; min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--kost-line, var(--bf-line, #E5DFD2)); background: var(--kost-card, var(--bf-surface, #fff)); color: var(--kost-ink, var(--bf-ink, #1C1A17)) !important; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; }
.meal-block-swap[aria-expanded="true"] { border-style: dashed; }
.meal-block-others { display: grid; gap: 8px; min-width: 0; }
.meal-block-others-title { margin: 0; text-align: center; font-size: 0.82rem; font-weight: 700; }
.meal-block-band { display: flex; align-items: center; gap: 10px; min-height: 24px; list-style: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.meal-block-band span { color: var(--kost-muted, var(--bf-muted, #6B6453)) !important; }
.meal-block-band::before, .meal-block-band::after { content: ""; flex: 1; height: 1px; background: var(--kost-line, var(--bf-line, #E5DFD2)); }
/* "✓ Logget" var hvid tekst på lysegrøn (Kost-skallens hvide log-regel vandt),
   målt i browseren 16/9. Grøn tekst på den grønne tone: #2E6B3F lyst, #8FB889 mørkt. */
.bf-sand .main-content .kost-app .meal-action-btn.meal-action-log.is-logged { color: #2E6B3F !important; }
.bf-sand.bf-dark .main-content .kost-app .meal-action-btn.meal-action-log.is-logged { color: #8FB889 !important; }
.meal-action-btn.meal-action-choose { background: var(--bf-accent-btn, #b34e28); border-color: var(--bf-accent-btn, #b34e28); color: #fff !important; }
.meal-action-btn.meal-action-choose:hover { background: var(--bf-accent-btn-h, #9E4520); }
.phone-meal-block { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 16px; background: var(--bf-surface, #fff); min-width: 0; }
.phone-meal-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.phone-meal-block-head > span { font-size: 0.74rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-accent-text, #A34320) !important; }
.phone-today-meals .phone-meal-block-rows { gap: 6px; }
.kost-week-block { display: grid; gap: 4px; min-width: 0; }
.kost-week-block + .kost-week-block { padding-top: 6px; border-top: 1px dashed var(--kost-line, #ddd6ca); }
.kost-week-block-name { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-accent-text, #A34320) !important; }
.kost-week-meal .kost-week-chip { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #E7EEF2; color: #3F6173 !important; font-style: normal; font-size: 0.7rem; font-weight: 800; }
.bf-dark .kost-week-meal .kost-week-chip { background: #202B32; color: #9FB8C6 !important; }
.kost-week-meal .kost-week-tail { font-style: normal; font-size: 0.74rem; color: var(--kost-muted, #736a5e) !important; }
/* Madplan i blokke, M4 (16/9-2026): Enkel visning i blokke. Et senior-card pr.
   blok med ét stort måltid, Vælg en anden foldet ud som lige så store kort, og
   Også-rækkerne under en tynd streg. Tekst med egen farve har !important, fordi
   `.bf-sand .main-content :is(small, ...)` (0,2,1) ellers maler den i --bf-muted2.
   Regnet kontrast på kortets --bf-surface2 (#FBFAF6 lyst, #26221D mørkt):
   bloknavnet #A34320 5,95 og #E8905F 6,46; Du har valgt den her #4A6A43 5,86 og
   #8FB889 7,05; Også #55503F 7,7 og #C9C0B2 8,8. Vælg den her er hvid på
   #B34E28 5,20 og på #B8501F 5,0. I morgen-kortet (--bf-surface): halen #55503F
   på hvid 8,1 og #C9C0B2 på #1E1B18 9,5; bloknavnet #A34320 på hvid 6,2 og
   #E8905F på #1E1B18 7,0. Målt i browseren 16/9 i begge temaer: de samme tal. */
.senior-meal-block { gap: 12px; min-width: 0; }
.bf-senior .senior-meal-block .senior-meal-type { color: var(--bf-accent-text, #A34320) !important; }
.senior-meal-item { display: grid; gap: 10px; min-width: 0; }
.senior-meal-item .senior-meal-head strong { overflow-wrap: anywhere; }
.bf-senior .senior-meal-chosen { font-size: 17px; font-weight: 700; color: var(--bf-attn-good, #4A6A43) !important; }
.senior-meal-another { width: 100%; }
.senior-meal-another[aria-expanded="true"] { border-style: dashed; }
.senior-meal-others { display: grid; gap: 14px; min-width: 0; padding: 14px 12px; border-radius: 16px; border: 2px dashed var(--bf-line, rgba(127,127,127,0.35)); background: var(--bf-surface, transparent); }
.senior-meal-others > h3 { text-align: center; }
.senior-meal-option + .senior-meal-option { padding-top: 14px; border-top: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.senior-meal-choose, .bf-sand .main-content .senior-meal-choose { width: 100%; background: var(--bf-accent-btn, #b34e28); border-color: var(--bf-accent-btn, #b34e28); color: #fff !important; }
.senior-meal-also { display: grid; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.bf-senior .senior-meal-also-label { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-muted2, #55503F) !important; }
/* I morgen: bloknavnet over retten, så et langt bloknavn ikke presser retten.
   .bf-senior foran, fordi v701-reglerne for .senior-meal-next står senere i filen. */
.bf-senior .senior-meal-next { grid-template-columns: 44px minmax(0, 1fr); }
.senior-meal-next-dish { display: grid; gap: 2px; min-width: 0; }
.bf-senior .senior-meal-next-dish strong { text-align: left; overflow-wrap: anywhere; }
.bf-senior .senior-meal-next-dish small { font-size: 15px; color: var(--bf-muted2, #55503F) !important; }
.bf-senior .senior-meal-next-dish .senior-meal-next-name { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-accent-text, #A34320) !important; }
/* Spist ✓ i mørkt tema: hvid tekst på --bf-attn-good #8FB889 målt til 2,24 i
   browseren 16/9 (reglen fra v698 er skrevet til den lyse grønne). Mørk tekst
   #141210 på #8FB889 er 8,3. Lyst tema er uændret: hvid på #4A6A43 6,1. */
.bf-sand.bf-dark .main-content .senior-move-btn.is-on, .bf-sand.bf-dark .main-content .senior-move-btn.is-on:disabled { color: #141210 !important; }
/* Madplan i blokke, M5 (16/9-2026): opskriften under en blok på I dag har to
   knapper, Tilpas og gem som ny og Del opskrift. De står i en række, der bryder
   på en smal telefon. Linjerne over indkøbslisten og madlavningen bruger de
   eksisterende hint-klasser og har ingen egen stil. */
.meal-recipe-peek-actions.has-share { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ugeplan og indkøb (M8 til M10, 22/9-2026): indkøbslisten med fanerne Handleliste
   og Planlæg ugen, byt-arket, popuppen "Har du det hjemme?", varens bundark, Hjems
   linje og linket i Madplan > Uge. Kun sandskallens tokens (--bf-ink, --bf-muted,
   --bf-line, --bf-surface, --bf-surface2, --bf-surface3, --bf-accent, --bf-accent-text,
   --bf-accent-btn, --bf-green, --bf-attn-good, --bf-attn-info), så lyst, mørkt,
   Labrador og chokolade følger med af sig selv. Tekst med egen farve har !important,
   fordi `.bf-sand .main-content :is(p,li,td,th,span,div)` og button-catch-all'en
   ellers maler den i sidens ink. Varens tre tilstande er rækkens form, ikke kun en
   farve: tom ring (Mangler), fyldt ring med ✓ (Har hjemme), stiplet ring med ∞
   (Har altid hjemme). */
.shop-week { display: grid; gap: 12px; min-width: 0; }
.shop-week.is-plan { padding-bottom: 96px; }
.shop-week-title { margin: 0; font-size: 1.25rem; }
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--bf-line); border-radius: 12px; overflow: hidden; background: var(--bf-surface); }
.shop-tab { min-height: 44px; border: 0; background: transparent; font: inherit; font-size: 0.92rem; font-weight: 800; color: var(--bf-muted) !important; cursor: pointer; }
.shop-tab.is-on { background: var(--bf-ink); color: var(--bf-surface) !important; }
.shop-weekpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.shop-weekchip { min-height: 36px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.82rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-weekchip.is-on { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff !important; }
.shop-week-range { font-size: 0.84rem; color: var(--bf-muted) !important; }
.shop-status-row { display: grid; gap: 6px; }
.shop-status { margin: 0; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); font-size: 0.86rem; color: var(--bf-muted2, var(--bf-ink)) !important; }
.shop-status.is-receipt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-status.is-receipt span { color: var(--bf-ink) !important; }
.shop-link { min-height: 40px; padding: 4px 2px; border: 0; background: none; font: inherit; font-size: 0.88rem; font-weight: 800; color: var(--bf-accent-text) !important; text-align: left; cursor: pointer; }
.shop-copy-week { justify-self: end; }
.shop-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.shop-day { position: relative; display: grid; place-items: center; gap: 1px; min-height: 48px; padding: 5px 0; border: 1px solid var(--bf-line); border-radius: 10px; background: var(--bf-surface); font: inherit; font-size: 0.7rem; line-height: 1.15; color: var(--bf-muted) !important; cursor: pointer; }
.shop-day span { color: var(--bf-muted) !important; }
.shop-day b { font-size: 0.9rem; color: var(--bf-ink) !important; }
.shop-day.is-today { border-color: var(--bf-muted); }
.shop-day.is-on { border: 2px solid var(--bf-accent); background: color-mix(in srgb, var(--bf-accent) 8%, var(--bf-surface)); }
.shop-day.is-past { opacity: 0.45; cursor: default; }
.shop-day.has-choice::after { content: ""; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--bf-attn-info); }
.shop-plan-day { display: grid; gap: 10px; min-width: 0; }
.shop-plan-card { display: grid; gap: 8px; min-width: 0; padding: 11px 12px; border: 1px solid var(--bf-line); border-radius: 14px; background: var(--bf-surface); }
.shop-plan-eyebrow { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bf-accent-text) !important; overflow-wrap: anywhere; }
.shop-plan-dish { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shop-plan-dish-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.shop-plan-dish-text b { font-size: 0.95rem; overflow-wrap: anywhere; }
.shop-plan-dish-text small, .shop-plan-also { font-size: 0.8rem; color: var(--bf-muted) !important; }
.shop-plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.shop-plan-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 11px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface3, var(--bf-surface2)); font: inherit; font-size: 0.78rem; font-weight: 800; color: var(--bf-muted2, var(--bf-ink)) !important; white-space: nowrap; }
.shop-plan-chip span { color: inherit !important; }
button.shop-plan-chip { min-height: 40px; cursor: pointer; }
.shop-plan-chip.is-mine { border-color: color-mix(in srgb, var(--bf-attn-info) 35%, var(--bf-surface)); background: var(--bf-attn-info-bg); color: var(--bf-attn-info) !important; }
.shop-plan-chip.is-eaten { border-color: transparent; background: var(--bf-green-bg, var(--bf-surface2)); color: var(--bf-attn-good) !important; }
.shop-plan-swap { min-height: 40px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); font: inherit; font-size: 0.86rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-plan-choose-one { margin: 0; font-size: 0.84rem; font-weight: 700; }
.shop-plan-fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px dashed var(--bf-line); border-radius: 12px; background: transparent; font: inherit; font-size: 0.86rem; color: var(--bf-muted) !important; cursor: pointer; text-align: left; }
.shop-plan-fold span { color: var(--bf-muted) !important; }
.shop-plan-fixed { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.shop-plan-fixed li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--bf-surface2); }
.shop-plan-fixed li span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bf-muted) !important; }
.shop-plan-extra { margin: 0; font-size: 0.82rem; color: var(--bf-muted) !important; }
.shop-plan-start { margin: 0; padding: 14px 12px; border-radius: 14px; border: 1px dashed var(--bf-line); font-size: 0.92rem; text-align: center; }
.shop-plan-rest { justify-self: center; text-align: center; color: var(--bf-muted2, var(--bf-muted)) !important; }
.shop-foot { margin: 0; text-align: center; font-size: 0.82rem; color: var(--bf-muted) !important; }
.shop-plan-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bf-bottom-nav-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 444px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bf-ink); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }
.shop-plan-bar-sum { display: grid; gap: 1px; min-width: 0; }
.shop-plan-bar-sum b { font-size: 0.95rem; color: var(--bf-surface) !important; }
.shop-plan-bar-sum small { font-size: 0.74rem; color: color-mix(in srgb, var(--bf-surface) 78%, var(--bf-ink)) !important; }
.shop-plan-next { flex: 0 0 auto; min-height: 40px; padding: 6px 14px; border-radius: 12px; border: 0; background: var(--bf-surface); font: inherit; font-size: 0.86rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-hint { display: grid; gap: 8px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--bf-line); background: var(--bf-surface2); }
.shop-hint p { margin: 0; font-size: 0.9rem; }
.shop-hint .shop-secondary { justify-self: start; }
.shop-husk { display: grid; gap: 7px; padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--bf-accent) 12%, var(--bf-surface)); border: 1px solid color-mix(in srgb, var(--bf-accent) 30%, var(--bf-surface)); }
.shop-husk > b { font-size: 0.9rem; color: var(--bf-accent-text) !important; }
.shop-husk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-husk-chip { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 0; background: var(--bf-surface); font: inherit; font-size: 0.82rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-follows { margin: 0; font-size: 0.86rem; color: var(--bf-muted) !important; }
.shop-follows .shop-link { min-height: 0; padding: 0; }
.shop-allhome { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bf-green-bg, var(--bf-surface2)); font-weight: 800; color: var(--bf-attn-good) !important; }
.shop-group { display: grid; gap: 4px; min-width: 0; }
.shop-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.shop-group-head > span, .shop-group-toggle > span { flex: 0 0 auto; white-space: nowrap; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bf-muted) !important; }
.shop-group-toggle { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 2px; border: 0; border-top: 1px solid var(--bf-line); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.shop-group-toggle small { min-width: 0; font-size: 0.82rem; color: var(--bf-muted) !important; text-align: right; overflow-wrap: anywhere; }
.shop-filter { min-height: 34px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.78rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-filter.is-on { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff !important; }
.shop-rows { display: grid; min-width: 0; }
.shop-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 4px 2px; border-bottom: 1px solid var(--bf-line); min-width: 0; }
.shop-row:last-child { border-bottom: 0; }
.shop-row-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; min-height: 48px; padding: 4px 2px; border: 0; background: transparent; font: inherit; text-align: left; color: var(--bf-ink) !important; cursor: pointer; }
span.shop-row-main { cursor: default; }
.shop-box { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bf-accent); font-size: 0.85rem; font-weight: 900; }
.shop-row-name { display: grid; gap: 1px; min-width: 0; }
.shop-row-name b { font-size: 0.95rem; overflow-wrap: anywhere; }
.shop-row-name small { font-size: 0.76rem; color: var(--bf-muted) !important; }
.shop-row.is-home .shop-box { border-color: var(--bf-green); background: var(--bf-green); color: #fff !important; }
.shop-row.is-home .shop-row-name b { color: var(--bf-muted) !important; font-weight: 700; }
.shop-row.is-always .shop-box { border-style: dashed; border-color: var(--bf-muted); background: var(--bf-surface3, var(--bf-surface2)); color: var(--bf-muted) !important; }
.shop-row.is-always .shop-row-name b { color: var(--bf-muted) !important; }
.shop-row-chip { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.shop-row-chip.is-remind { background: color-mix(in srgb, var(--bf-accent) 14%, var(--bf-surface)); color: var(--bf-accent-text) !important; }
.shop-row-chip.is-own { background: var(--bf-attn-info-bg); color: var(--bf-attn-info) !important; }
.shop-more { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-weight: 900; letter-spacing: 0.05em; color: var(--bf-muted) !important; cursor: pointer; }
.shop-ranout { flex: 0 0 auto; min-height: 40px; padding: 5px 12px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.82rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-own-form { display: flex; gap: 8px; margin-top: 6px; min-width: 0; }
.shop-own-form input[name="itemName"] { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px dashed var(--bf-line); border-radius: 12px; background: var(--bf-surface); color: var(--bf-ink); font: inherit; }
.shop-secondary { min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.88rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-primary, .bf-sand .main-content .shop-primary { min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--bf-accent-btn); background: var(--bf-accent-btn); font: inherit; font-size: 0.88rem; font-weight: 800; color: #fff !important; cursor: pointer; }
.shop-primary:hover { background: var(--bf-accent-btn-h, var(--bf-accent-btn)); }
.shop-chosen { min-height: 44px; padding: 6px 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); font: inherit; font-size: 0.88rem; font-weight: 800; color: var(--bf-attn-good) !important; }
.shop-freed { margin: 0; padding: 2px 10px; border-left: 3px solid var(--bf-muted); font-size: 0.84rem; color: var(--bf-muted) !important; }
.shop-empty { display: grid; gap: 6px; padding: 16px 12px; border-radius: 14px; border: 1px dashed var(--bf-line); text-align: center; }
.shop-empty p { margin: 0; }
.shop-empty .shop-link { justify-self: center; }
.shop-undo-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bf-bottom-nav-h, 0px) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 1250; max-width: 444px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: 12px; background: var(--bf-ink); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }
.shop-undo-bar span { font-size: 0.88rem; color: var(--bf-surface) !important; }
.shop-undo-bar button { flex: 0 0 auto; min-height: 40px; padding: 4px 12px; border-radius: 10px; border: 0; background: var(--bf-surface); font: inherit; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-week.is-plan .shop-undo-bar { bottom: calc(var(--bf-bottom-nav-h, 0px) + 84px + env(safe-area-inset-bottom, 0px)); }
.shop-sheet-overlay { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 18, 16, 0.5); }
.shop-sheet { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 88dvh; border-radius: 22px 22px 0 0; background: var(--bf-surface); color: var(--bf-ink); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.32); padding-bottom: env(safe-area-inset-bottom, 0px); }
.shop-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--bf-line); }
.shop-sheet-head strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.shop-sheet-x { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--bf-surface3, var(--bf-surface2)); font: inherit; font-size: 1rem; color: var(--bf-muted) !important; cursor: pointer; }
.shop-sheet-body { display: grid; gap: 10px; padding: 12px 16px; overflow-y: auto; min-height: 0; }
.shop-sheet-actions { display: grid; gap: 8px; padding: 10px 16px 16px; border-top: 1px solid var(--bf-line); }
.shop-sheet-label { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--bf-muted) !important; }
.shop-sources { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.shop-sources li { padding: 8px 10px; border-radius: 10px; background: var(--bf-surface2); font-size: 0.88rem; }
.shop-by-coach { font-size: 0.8rem; color: var(--bf-muted) !important; text-align: center; }
.shop-wide { width: 100%; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); font: inherit; font-size: 0.92rem; font-weight: 800; color: var(--bf-ink) !important; cursor: pointer; }
.shop-wide.is-primary { border-color: var(--bf-accent-btn); background: var(--bf-accent-btn); color: #fff !important; }
.shop-wide.is-quiet { background: transparent; }
.shop-opt { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--bf-line); border-radius: 12px; background: var(--bf-surface); }
.shop-opt.is-current { border: 2px solid var(--bf-attn-info); }
.shop-opt-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-preview { font-size: 0.82rem; font-weight: 800; }
.shop-preview.is-ok { color: var(--bf-attn-good) !important; }
.shop-preview.is-buy { color: var(--bf-accent-text) !important; }
.shop-popup-body { margin: 0; font-size: 0.92rem; color: var(--bf-muted2, var(--bf-ink)) !important; }
.shop-popup-item { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--bf-line); border-radius: 12px; }
.shop-popup-item > b { font-size: 0.95rem; }
.shop-popup-item.is-answered { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bf-surface2); }
.shop-popup-item .shop-link { justify-self: start; min-height: 36px; font-size: 0.82rem; }
.shop-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shop-always-list { display: grid; margin: 0; padding: 0; list-style: none; }
.shop-always-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--bf-line); }
.shop-always-list li:last-child { border-bottom: 0; }
.phone-shop-line { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 0; background: color-mix(in srgb, var(--bf-accent) 12%, var(--bf-surface)); font: inherit; font-size: 0.88rem; font-weight: 800; text-align: left; text-decoration: none; color: var(--bf-accent-text) !important; cursor: pointer; }
.shop-week-link { display: block; width: 100%; min-height: 44px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.9rem; font-weight: 800; text-align: left; color: var(--bf-accent-text) !important; cursor: pointer; }
/* Enkel visning (M9): stepperen Vælg ugens mad, popuppen "Har du laks hjemme?",
   husk-kortet og listen med to store knapper pr. vare. Samme tokens som resten af
   blokken, så lyst, mørkt, Labrador og chokolade følger med. Alle knapper er
   mindst 56 px høje. Har hjemme er fyldt grøn med sidens flade som tekst (mørk
   tekst på den lyse grønne i mørkt tema), Skal købes er fyldt med knapfarven. */
.senior-pick, .senior-have { gap: 12px; }
.senior-pick-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bf-senior :is(.senior-pick, .senior-have) .senior-meal-type { color: var(--bf-accent-text) !important; }
/* Ugeplan og indkøb, fund H3 og stepper-fundet (22/9): tælleren står ØVERST i
   popuppen, så "Spørgsmål 1 af 12" kan ses, før hun svarer, ikke med småt under
   knapperne. Den er en <strong> inde i kortet, og .senior-card > strong (0,2,0)
   står senere i filen, så selektoren her er 0,3,0 for at vinde: ellers stod
   tælleren større end selve spørgsmålet. */
.senior-pick-count { font-size: 16px; font-weight: 700; color: var(--bf-muted) !important; }
.bf-senior .senior-have > .senior-have-count { font-size: 17px; font-weight: 700; color: var(--bf-muted) !important; }
.senior-pick-date, .senior-have-q { margin: 0; font: 800 28px "Archivo", sans-serif; line-height: 1.15; color: var(--bf-ink) !important; }
.senior-pick-img .kost-recipe-av { width: 100%; height: 180px; border-radius: 18px; font-size: 3rem; }
.senior-pick-img .kost-recipe-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.senior-pick .senior-pick-title { font: 800 24px "Archivo", sans-serif; line-height: 1.2; color: var(--bf-ink) !important; }
.senior-pick-meta, .senior-have-when { font-size: 18px; color: var(--bf-muted) !important; }
.senior-pick-preview { font-size: 18px; font-weight: 800; }
.senior-pick-preview.is-ok { color: var(--bf-attn-good) !important; }
.senior-pick-preview.is-buy { color: var(--bf-accent-text) !important; }
:is(.senior-pick, .senior-have) .senior-big { min-height: 64px; }
/* Den stille knap står på kortets hvide flade, hvor det grå fyld næsten ikke kan
   ses (samme måling som Fortryd på vandkortet): en kant viser, at det er en knap. */
:is(.senior-pick, .senior-have) .senior-big.quiet { border: 2px solid var(--bf-line); }
.senior-pick-foot .senior-move-btn, .senior-have-foot .senior-move-btn, .senior-pick-link, .senior-shop-weekswitch { min-height: 56px; }
/* Ugeplan og indkøb, fund H3 (22/9): popuppens fod har to knapper side om side,
   ‹ Tilbage og den stille "Resten skriver jeg på listen", så ingen af dem kan
   forveksles med den anden. Teksten må gerne brydes i to linjer på en telefon. */
.senior-have-foot .senior-move-btn { padding-inline: 10px; font-size: 16px; line-height: 1.2; }
.senior-pick-done > strong { font: 800 26px "Archivo", sans-serif; line-height: 1.25; color: var(--bf-ink) !important; }
.senior-husk { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--bf-gold-bg); border: 2px solid color-mix(in srgb, var(--bf-gold) 45%, var(--bf-surface)); }
.senior-husk h3 { margin: 0; font: 800 17px "Archivo", sans-serif; color: var(--bf-gold) !important; }
.senior-husk > strong { font: 800 22px "Archivo", sans-serif; line-height: 1.25; color: var(--bf-ink) !important; }
.bf-senior .senior-shop-week { font-size: 22px; }
.senior-shop-card { gap: 12px; }
.senior-shop-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.senior-shop-name strong { font: 800 22px "Archivo", sans-serif; line-height: 1.2; color: var(--bf-ink) !important; }
.senior-shop-amount { flex-basis: 100%; font-size: 17px; color: var(--bf-muted) !important; }
.senior-shop-word { padding: 2px 10px; border-radius: 999px; background: var(--bf-surface2); font-size: 15px; font-weight: 800; color: var(--bf-muted) !important; }
.senior-shop-word.is-own { background: var(--bf-attn-info-bg); color: var(--bf-attn-info) !important; }
.senior-shop-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.senior-shop-btn { min-height: 56px; padding: 10px 8px; border-radius: 14px; border: 2px solid var(--bf-line); background: var(--bf-surface); font: 800 18px "Archivo", sans-serif; color: var(--bf-ink) !important; cursor: pointer; }
.senior-shop-btn.is-home.is-on, .bf-sand .main-content .senior-shop-btn.is-home.is-on { background: var(--bf-attn-good); border-color: var(--bf-attn-good); color: var(--bf-surface) !important; }
.senior-shop-btn.is-buy.is-on, .bf-sand .main-content .senior-shop-btn.is-buy.is-on { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff !important; }
.senior-shop-btn:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.senior-shop-always { width: 100%; min-height: 56px; }
.bf-senior .shop-undo-bar { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.bf-senior .shop-undo-bar span { font-size: 17px; }
.bf-senior .shop-undo-bar button { min-height: 48px; font-size: 17px; }
/* Coachen (M10): overlayet Indkøbsliste er hendes udregnede uge, og fanen Hendes
   uge viser det hun har byttet. Rækkerne kan ikke trykkes; kun knappen Altid
   hjemme skriver. Samme tokens som resten af blokken. */
.coach-shop-week { margin: 0 0 8px; font-size: 0.82rem; font-weight: 800; color: var(--bf-muted); }
.coach-shop-list { display: grid; gap: 6px; margin-bottom: 12px; }
.coach-shop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bf-surface2); }
.coach-shop-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.88rem; font-weight: 700; color: var(--bf-ink); }
.coach-shop-name small { flex-basis: 100%; font-size: 0.74rem; font-weight: 600; color: var(--bf-muted); }
.coach-shop-chip { padding: 1px 8px; border-radius: 999px; background: var(--bf-surface); font-size: 0.7rem; font-weight: 800; color: var(--bf-muted); }
.coach-shop-chip.is-remind { background: var(--bf-gold-bg); color: var(--bf-gold); }
.coach-shop-chip.is-own { background: var(--bf-attn-info-bg); color: var(--bf-attn-info); }
.coach-shop-chip.is-mine { background: color-mix(in srgb, var(--bf-accent) 16%, var(--bf-surface)); color: var(--bf-accent-text); }
.coach-shop-always { flex: none; min-height: 34px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.76rem; font-weight: 800; color: var(--bf-ink); cursor: pointer; }
.coach-shop-always:hover { border-color: var(--bf-accent); color: var(--bf-accent-text); }
.coach-always-list { display: grid; gap: 4px; margin-bottom: 10px; }
.coach-always-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bf-surface2); font-size: 0.85rem; font-weight: 700; color: var(--bf-ink); }
.coach-always-row small { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--bf-muted); }
.coach-always-row .coach-shop-always { margin-left: auto; }
.coach-always-row small + .coach-shop-always { margin-left: 0; }
.coach-always-form { display: flex; gap: 8px; }
.coach-always-form input { flex: 1; min-height: 38px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--bf-line); background: var(--bf-surface); font: inherit; font-size: 0.85rem; color: var(--bf-ink); }
.coach-week-list { display: grid; gap: 6px; }
.coach-week-row { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bf-surface2); }
.coach-week-row strong { font-size: 0.8rem; color: var(--bf-muted); }
.coach-week-row span { font-size: 0.9rem; font-weight: 700; color: var(--bf-ink); }
.coach-week-row small { font-size: 0.72rem; color: var(--bf-muted); }
.coach-week-row.is-gone span { color: var(--bf-muted); font-weight: 600; }

/* 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").
   Skeptiker 21/9 (fund 2): baren stod øverst i editoren, 1.800 px over skærmen
   efter Slet blok nederst i planen (målt 390x844 og 1440x900), så coachen så kun
   flashen. Den står nu fast nederst på skærmen: over bundmenuen
   (--bf-bottom-nav-h fra syncBottomNavHeight, 0 px på desktop), under arket
   (.mp-sheet 1260) og dets baggrund (1250). Baggrunden er sidens flade med den
   orange tone lagt over, så indholdet bag baren ikke skinner igennem. Står flere
   barer ad gangen (fjernet måltid, slettet blok, plan på pause), stables de opad. */
.mp-undo-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bf-bottom-nav-h, 0px) + 12px); z-index: 1240; max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-radius: 11px; background: var(--surface, #fff); background-image: linear-gradient(rgba(255,122,60,0.12), rgba(255,122,60,0.12)); border: 1px solid rgba(255,122,60,0.35); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); font-size: 0.86rem; }
.mp-undo-bar ~ .mp-undo-bar { bottom: calc(var(--bf-bottom-nav-h, 0px) + 76px); }
.mp-undo-bar ~ .mp-undo-bar ~ .mp-undo-bar { bottom: calc(var(--bf-bottom-nav-h, 0px) + 140px); }
.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; }

/* Sværhedsgrad 1-5: chips i afspilleren (pr. øvelse + hele passet). */
.difficulty-rate {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.difficulty-rate-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.85;
}
.difficulty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.difficulty-chip {
  flex: 1 1 auto;
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.difficulty-chip.active { color: #fff !important; border-color: transparent; }
.difficulty-chip.active.d1 { background: #5f8f57; }
.difficulty-chip.active.d2 { background: #7da34f; }
.difficulty-chip.active.d3 { background: #cf8f3a; }
.difficulty-chip.active.d4 { background: #cf6a34; }
.difficulty-chip.active.d5 { background: #bf4436; }
.difficulty-rate-picked { display: block; margin-top: 6px; opacity: 0.7; font-size: 0.74rem; }
.difficulty-session-list { margin-top: 10px; }

/* Coach-indtastning af målinger (Fremgang-fanen): type + værdi + dato + gem. */
.coach-metric-grid {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(90px, 1fr) minmax(130px, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.coach-metric-grid label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  min-width: 0;
}
.coach-progress-metric-form small {
  display: block;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .coach-metric-grid { grid-template-columns: 1fr 1fr; }
  .coach-metric-grid button { grid-column: 1 / -1; }
}
.metric-row-delete {
  margin-left: 8px;
  font-size: 0.75rem;
  opacity: 0.55;
}
.metric-row-delete:hover { opacity: 1; }

/* Kcal-vagt: dagen/planen overstiger klientens mål. */
.mp-goal-warn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-radius: 11px; background: rgba(214, 96, 57, 0.12); border: 1px solid rgba(214, 96, 57, 0.4); font-size: 0.86rem; }
.mp-goal-warn strong { font-weight: 800; }

/* Makro-beregnerens kilde-note + head-knapper. */
.mp-calc-head-actions { display: flex; align-items: center; gap: 4px; }
.mp-calc-seed-note { display: block; margin-top: 4px; opacity: 0.7; font-size: 0.72rem; line-height: 1.4; }

/* 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);
}

/* Sand-temaet (lys coach-flade) havde ingen override: hvid tekst på lys flade.
   Gælder både øvelsesvælgeren og skabelon-vælgeren (F1). Tokens, ikke #fff:
   .bf-sand bliver på skallen i mørkt tema (.bf-sand.bf-dark), hvor --bf-ink er
   lys, så et hårdt #fff gav hvid tekst på hvid knap. Målt i begge temaer. */
.bf-sand .structured-picker-results button { background: var(--bf-surface, #fff); color: var(--bf-ink); border-color: var(--bf-line); }
.bf-sand .structured-picker-results button:hover { border-color: var(--bf-accent); }
.bf-sand .structured-picker-results button small { color: var(--bf-muted2); }

/* Gemte blokke (F1): inline navnerække under blok-headeren + rækker i vælgeren. */
.structured-template-save { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.structured-template-save input { flex: 1; min-width: 0; }
.structured-template-row { display: flex; gap: 6px; align-items: stretch; }
.structured-template-row > button:first-child { flex: 1; }
.structured-template-row > .structured-template-del { flex: 0 0 auto; font-size: 0.75rem; }
/* Tre klasser, så den slår .bf-sand .structured-picker-results button (målt: ellers ingen tint). */
.structured-picker-results .structured-template-del.is-armed { border-color: #c0392b; background: rgba(192,57,43,0.14); font-weight: 700; }
.structured-picker-empty { font-size: 0.8rem; opacity: 0.7; padding: 0.3rem 0; margin: 0; }

.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;
}
/* bug-1f46c98e (2026-08-17): "i could not see next or previous month with the
   arrows". They WORK — clicking them moves both the label and the grid
   (verified august→september→oktober). The problem is that you cannot tell
   they are buttons: the fill measured rgba(255,255,255,0.055) over the card,
   about 1.15:1, and the chevron itself was a 12px glyph in a 40px box.
   So: a border that actually reads as an edge, and a chevron you can aim at.
   Translucent values on purpose (see §1 of NEXT-STEPS) so this holds in either
   theme without depending on a token being in scope. */
.cal-nav .icon-button {
  background: rgba(127, 127, 127, 0.16);
  /* alpha 0.9, not 0.55: a border is a non-text control edge, so WCAG wants
     3:1 against whatever is behind it. Solved for both themes — 0.55 gave
     1.97:1 light / 2.20:1 dark, 0.9 gives 3.37 / 3.72. */
  border: 1px solid rgba(127, 127, 127, 0.9);
  color: inherit !important;
  font-size: 1.05rem;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-nav .icon-button:hover {
  background: rgba(127, 127, 127, 0.28);
  border-color: rgba(127, 127, 127, 0.75);
}
.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) */
/* Gergø 27/9: bugrunden (B3). URETS PLADS PR. BREDDEBÅND. Uret er pillen herunder
   (#bf-workout-timer), foden er afspillerens .player-footer. Tabellen er den ene
   sandhed: en ny regel om urets eller fodens plads skal stå i tabellen og i den
   blok, tabellen peger på.
     Bånd                      I afspilleren                   På de andre sider     Foden
     til og med 700 px         under tilbage-bjælken (64 px),  helt øverst (under    fuld bredde
     (≤700-blokken ved         og afspilleren og passet giver  temaets topbjælke),
     "Mobile polish")          plads (66 px)                   og indholdet får
                                                               80 px
     liggende telefon: 701 px  i tilbage-bjælkens linje (top   i bunden, som før     fuld bredde, pausen
     og op, højst 500 px høj   4 px), højst hele bredden                             rulles frem, som før
     (blokken efter 701-blok-  minus 240 px, så Tilbage og ⋯
     ken; 2027-temaets skive) er fri; pausens skive er lavere
     700,02 til 720 px         bund 112 px over foden (701-    over bundmenuen med   fuld bredde
     (blokken lige efter       blokken), som før               dens målte højde, og
     ≤700-blokken; v739)                                       indholdet får plads
                               formatvælgeren over uret (174   formatvælgeren over
                               px, Enkel 188 px, som T1), og   uret, højst pladsen
                               liggende mellem uret og foden   over uret (v740)
                               (v740, blokkene efter formatvælgerens bånd)
     721 til 1023 px (T1)      bund 112 px over foden (701-    over bundmenuen       fuld bredde
                               blokken), som før               (T1), som før
     1024 til 1180 px (T2)     øverst midt i indholdets        i bunden med 80 px    i indholdets kolonne
                               kolonne (top 78 px), afspil-    bundluft (T2), som    (left 232 px)
                               leren giver plads (66 px), og   før
                               pausen er lavere (Labradors
                               hund i temaet)
     fra 1181 px (T6)          som T2 med sidebaren på 270 px  i bunden, som før     i indholdets kolonne
                                                                                     (left 270 px)
   Enkels afspiller (.is-senior) er undtaget i alle bånd: den har ingen sidebar
   og beholder uret over foden (T4) og foden i fuld bredde.
   Skeptikerne 28/9, resten af tabellen:
     Enkels sider (til og      uret helt øverst, også med tema (Enkel har ingen synlig
     med 700 px)               topbjælke), og indholdet får 80 px
     coachens sider (til og    som husets (coachens bundmenu er en .bf-tabbar): uret
     med 700 px)               helt øverst, og indholdet får 80 px
     offline- eller venter-    linjen står lige under uret (66 px), og indholdet har
     linjen (til og med 700    sin egen luft, fordi linjen giver pladsen
     px, uden tema)
     løbet (.is-run, T2 og     uret er skjult, og løbet får ikke urets 66 px
     T6)
   Målt 27/9 før rettelsen: 1180x820 dækkede uret
   "Spring pausen over", 1181x820 og 1280x820 dækkede foden beastfactory.dk og
   Mørkt tema i sidebaren, 844x390 dækkede uret og foden pausens ur, og ved 390
   dækkede uret "Hej, Gergo!" på I dag, mens et pas kørte. */
#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;
  /* Foden er fast og HOEJ: "Sidste trin"-linjen + en knap paa to linjer (maalt paa
     en klients telefon 10/9: ~150 px). 5rem gemte den nederste tekstlinje bag den. */
  padding: 0.6rem 0.8rem 11rem;
  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; }

/* Afslutnings-sliden: den ene skærm der gemmer passet. */
.player-finish-card { display: grid; gap: 10px; text-align: center; padding: 18px 14px; }
.player-finish-eyebrow { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-muted, #6B6453); }
.player-finish-card h2 { margin: 0; font-size: 1.45rem; }
.player-finish-totals { margin: 0; font-weight: 800; }
.player-finish-lead { margin: 0 auto; max-width: 34ch; color: var(--bf-muted, #6B6453); font-size: 0.92rem; line-height: 1.5; }
.player-finish-card .difficulty-rate { justify-items: center; margin-top: 4px; }
.player-finish-offline {
  display: grid; gap: 4px; margin-top: 6px; padding: 12px 14px;
  border-radius: 12px; text-align: left;
  background: rgba(199, 93, 52, 0.14);
  border: 1px solid rgba(199, 93, 52, 0.42);
}
.bf-sand .main-content .player-finish-offline strong { font-size: 0.92rem; }
.bf-sand .main-content .player-finish-offline span { font-size: 0.84rem; line-height: 1.5; color: inherit; }
.player-finish-btn { min-height: 52px; font-size: 1.02rem; }
/* F5: den ærlige optælling og listen over det der mangler. Farver KUN via
   tokens: afspilleren er mørk i normal visning og lys i sand-temaet. */
.player-finish-progress { margin: 0; font-weight: 800; font-size: 1.05rem; }
/* Grøn kun når ALT er gjort. Fallbacken er den lyse brand-grøn, fordi
   afspilleren er mørk uden for sand-temaet; sand sætter sin egen læsbare tone. */
.player-finish-progress.is-complete { color: #7ee787; }
.bf-sand .main-content .player-finish-progress.is-complete { color: var(--bf-attn-good, #4A6A43); }
.player-finish-missing {
  display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; text-align: left;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25));
  background: var(--bf-surface2, rgba(127, 127, 127, 0.10));
}
.player-finish-missing-title { margin: 0; font: 800 13px/1 "Archivo", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-muted2, var(--muted, #6b6259)); }
.player-finish-missing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.player-finish-missing-link {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25));
  background: var(--bf-surface, #fff); color: var(--bf-ink, inherit);
  font: inherit; text-align: left;
}
.player-finish-missing-link strong { overflow-wrap: anywhere; }
.player-finish-missing-link small { color: var(--bf-muted2, var(--muted, #6b6259)); white-space: nowrap; }
.player-finish-partial-lead, .player-finish-rest-note { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--bf-muted2, var(--muted, #6b6259)); }
.player-finish-skip-rest { text-align: center; }
/* Rettet efter review 1: tokenet --bf-ink-2 findes IKKE i projektet (de tre
   regler faldt til var(--muted)), og afspilleren ligger ALTID inde i .bf-sand,
   hvor ink-catch-all'en `.bf-sand .main-content :is(p,li,td,th,span,div)`
   (0,2,1) slår en <p> med én klasse. Gentagelsen her er 0,4,0 og vinder, så den
   dæmpede tone faktisk bliver brugt. --bf-muted2 FINDES i begge sand-paletter. */
.bf-sand .main-content .player-finish-card :is(.player-finish-missing-title, .player-finish-partial-lead, .player-finish-rest-note) { color: var(--bf-muted2); }
/* Begge vejledninger står i DOM'en; pointer-typen vælger. */
.player-finish-lead.for-touch { display: none; }
.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 { flex-direction: column; }
.player-footer-actions { display: flex; gap: 0.6rem; }
.player-footer .button { flex: 1; }
.player-footer .player-next-ready { box-shadow: 0 0 0 2px rgba(126, 231, 135, 0.6); }

/* F5: slæb for at gemme. Sporet og knappen står BEGGE i DOM'en; media-forespørgslen
   vælger. Foden er altid mørk (rgba(12, 8, 6, 0.96)), så sporets farver er faste
   og ikke token-styrede, præcis som .player-next-up og .player-stay-btn. */
.player-finish-slide {
  position: relative; display: none; flex: 1; height: 60px; padding: 4px;
  border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.player-finish-slide::before {
  content: ""; position: absolute; inset: 0; width: calc(var(--slide-pct, 0) * 100%);
  background: rgba(126, 231, 135, 0.28);
}
.player-finish-handle {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: grab;
  background: #7ee787; font: 800 26px/1 "Archivo", sans-serif;
  touch-action: none; transition: transform 0.25s ease;
  /* color !important: `.bf-sand .main-content button:not(...)` er 0,7,0 og ville
     male pilen om til sidens ink, altså lys tekst på den grønne knap i mørkt
     tema. Samme dark-pill-fælde som .player-round-btn. */
  color: #0c0806 !important;
}
.player-finish-slide.is-dragging .player-finish-handle { transition: none; cursor: grabbing; }
.player-finish-handle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Etiketten skal blive på ÉN linje: sporet er 60 px højt og deler rækken med
   "‹ Forrige", så en ombrudt tekst blev klippet af overflow: hidden (målt på
   390x844 den 11/9). Derfor nowrap, mindre skrift og en smallere Forrige-knap
   i media-forespørgslen nedenfor. */
.player-finish-slide-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-left: 58px; padding-right: 6px;
  font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  color: rgba(242, 237, 228, 0.85); pointer-events: none;
}
.player-finish-slide-label .is-armed-text { display: none; }
.player-finish-slide.is-armed .is-idle { display: none; }
.player-finish-slide.is-armed .is-armed-text { display: block; color: #fff; }
.player-finish-slide.is-done { background: rgba(126, 231, 135, 0.45); }
/* Sand-temaets ink catch-all (0,2,1) ville ellers male etiketten mørk på det
   mørke spor. */
.bf-sand .main-content .player-finish-slide-label span { color: rgba(242, 237, 228, 0.85); }
.bf-sand .main-content .player-finish-slide.is-armed .is-armed-text { color: #fff; }
@media (hover: none) and (pointer: coarse) {
  .player-footer .player-finish-btn { display: none; }
  .player-finish-slide { display: flex; align-items: center; }
  /* Sporet skal have plads til håndtag OG etiket; Forrige klarer sig med mindre.
     KUN på slutskærmen (.is-finish): uden den scope ramte reglen "‹ Forrige" på
     hvert eneste trin i afspilleren, hvor der slet ikke er noget spor at give
     plads til (rettet efter review 1). */
  .player-footer-actions.is-finish .button-secondary { flex: 0 1 104px; }
  .player-finish-lead.for-touch { display: block; }
  .player-finish-lead.for-pointer { display: none; }
  /* ENKEL VISNING FÅR KNAPPEN TILBAGE PÅ TOUCH (rettet efter review 1).
     Et slæb er en finmotorisk bevægelse: stive fingre, en handske eller et
     afbrudt træk, og så fandtes der ingen synlig vej til at gemme passet, netop
     på de telefoner Enkel visning er lavet til. Normal visning beholder slæbet
     (det er dét der beskytter mod et utilsigtet tryk midt i en fast fod).
     Vejledningen skal følge med: i Enkel visning peger den på knappen. */
  .workout-player.is-senior .player-footer .player-finish-btn { display: inline-flex; }
  .workout-player.is-senior .player-finish-slide { display: none; }
  .workout-player.is-senior .player-footer-actions.is-finish .button-secondary { flex: 1; }
  .workout-player.is-senior .player-finish-lead.for-touch { display: none; }
  .workout-player.is-senior .player-finish-lead.for-pointer { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .player-finish-handle { transition: none; }
}

/* "Next up" line inside the fixed footer: what you set up DURING the rest. */
.player-next-up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.25;
  color: rgba(242, 237, 228, 0.72);
}
.player-next-up strong { color: #fff; font-weight: 800; }
.player-next-up.is-last { color: rgba(242, 237, 228, 0.5); font-style: italic; }
.player-next-up.is-armed { color: #fff; }
/* Foden er mørk, men sand-temaets ink catch-all `.bf-sand .main-content
   :is(p,li,td,th,span,div)` (0,2,1) slog både <p class="player-next-up"> (0,1,0)
   og .is-last (0,2,0) og malede dem mørke på mørkt: "Næste: Bænkpres" og
   "Sidste trin: gem træningen" kunne kun anes på skærmbillederne fra 390x844.
   Samme mønster og samme tal som .player-finish-slide-label-reglen ovenfor:
   0,4,1 og 0,5,x mod catch-all'ens 0,2,1. (Rettet efter review 2.) */
.bf-sand .main-content .player-footer :is(.player-next-up, .player-next-up span) { color: rgba(242, 237, 228, 0.72); }
.bf-sand .main-content .player-footer :is(.player-next-up strong, .player-next-up.is-armed, .player-next-up.is-armed span) { color: #fff; }
.bf-sand .main-content .player-footer .player-next-up.is-last { color: rgba(242, 237, 228, 0.55); }
.player-stay-btn {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(242, 237, 228, 0.42);
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* 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; }
  /* Skeptikeren 27/9: kvitteringen (.flash, top 82px, z-index 50) lå bag urets
     bjælke (top 64px, z-index 9000), så "Besked sendt" og "Kommentaren er
     sendt" ikke kunne læses, mens uret kørte. Den står nu under bjælken.
     :where holder specificiteten lav, så Labradorens high five, der lægger
     kvitteringen i bunden, stadig vinder. */
  body:where(:has(#bf-workout-timer)) .flash { top: calc(64px + 66px + env(safe-area-inset-top, 0px)); }
  /* Med persona-bjælken (Vis som, Test som, Mig som klient) står uret 44 px lavere. */
  body:where(:has(.bf-persona-bar):has(#bf-workout-timer)) .flash { top: calc(108px + 66px + env(safe-area-inset-top, 0px)); }
  /* Gergø 27/9: bugrunden (B3), se urets tabel. Mens et pas kører, dækkede uret
     sidens overskrift på faneruterne (målt 390: uret 64..122 over "Hej, Gergo!"
     96..122 og over Træningens faner; Labrador "Hej, Gergo!" 70..107; 2027 "Min
     to-do" 91..119), for kun afspilleren og passet gav plads. Uden topbjælke
     står uret nu helt øverst (dets egen padding holder tallet fri af
     statuslinjen); et tema (.app-shell.bf-tema-...) har sin egen topbjælke og
     beholder uret under den, og det samme gør persona-bjælken. Indholdet får
     urets højde. !important, fordi telefonens store titel giver
     .client-sand .main-content 14 px med !important. */
  body:has(.bf-tabbar):not(:has(.workout-player, .bf-persona-bar, .app-shell[class*="bf-tema-"])) #bf-workout-timer { top: 0; }
  body:has(#bf-workout-timer:not(.tv-clock)):has(.bf-tabbar):not(:has(.workout-player, .bf-offline-line.is-chrome)) .app-shell .main-content { padding-top: calc(80px + env(safe-area-inset-top, 0px)) !important; }
  /* Skeptikerne 28/9 (S2): Enkel har ingen synlig topbjælke, heller ikke med et
     tema (temaets bjælke ligger skjult i Enkels DOM), så uret står helt øverst i
     Enkel med og uden tema. Før stod det på 64 px med tema og dækkede "‹ Hjem"
     (målt 390 og 360, chokolade, Labrador og 2027). */
  body:has(.bf-senior):not(:has(.workout-player, .bf-persona-bar)) #bf-workout-timer { top: 0; }
  /* Skeptikerne 28/9 (S6): offline- eller venter-linjen står lige under uret, når
     uret står øverst, og indholdet beholder sin egen luft, fordi linjen giver
     pladsen (reglen ovenfor gælder ikke, når linjen står). Før gav linjens 118 px
     plus indholdets 80 px et sort bånd under uret og 66 px ekstra. */
  body:has(.bf-tabbar):not(:has(.workout-player, .bf-persona-bar, .app-shell[class*="bf-tema-"])):has(#bf-workout-timer:not(.tv-clock)) .bf-offline-line.is-chrome { margin-top: calc(66px + env(safe-area-inset-top, 0px)); }
}

/* Skeptikerne 29/9: v739 (fund 3), se urets tabel. Båndet 700,02 til 720 px har
   telefonens bundmenu, men uret stod på grundreglens bottom 14 px, for T1-rækken
   begynder først ved 720,02 (målt 710x1000: uret 64 px inde i kapslen, i v738 51 px
   inde i bjælken). Som i T1 løftes uret over bundmenuens målte højde, som allerede
   rummer safe-area, indholdet får bundmenuen plus uret plus 16 px, og
   installér-banneret står over uret (formatvælgerens regel for båndet står
   efter formatvælgerens egne regler, se "#bf-timer-format"). */
@media (min-width: 700.02px) and (max-width: 720px) {
  body:has(.bf-tabbar):not(:has(.workout-player)) #bf-workout-timer { bottom: calc(var(--bf-bottom-nav-h, 78px) + 10px); }
  body:has(.senior-bar):not(:has(.workout-player)) #bf-workout-timer { bottom: calc(var(--bf-bottom-nav-h, 95px) + 10px); }
  body:has(#bf-workout-timer):has(.bf-tabbar):not(:has(.workout-player)) .app-shell .main-content { padding-bottom: max(calc(94px + env(safe-area-inset-bottom, 0px)), calc(var(--bf-bottom-nav-h, 78px) + 76px)); }
  body:has(#bf-workout-timer):not(:has(.workout-player)) #bf-install-banner { bottom: calc(var(--bf-bottom-nav-h, 0px) + 72px); }
}

/* 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; }
}
/* Skeptikerne 29/9: v739 (fund 3). I båndet 700,02 til 720 px står uret over
   bundmenuen (urets blok lige efter ≤700-blokken), og formatvælgeren står over
   uret som i T1; på bottom 72 px lå den over uret og 6 px inde i kapslen. */
@media (min-width: 700.02px) and (max-width: 720px) {
  body:not(:has(.workout-player)) #bf-timer-format { bottom: calc(var(--bf-bottom-nav-h, 0px) + 72px); }
}
/* Gergø 29/9: v740 (små rettelser 2/2), se urets tabel. Formatvælgeren i båndet
   700,02 til 720 px, målt ved 704, 712 og 719 px. I afspilleren stod den på
   grundreglens bund 72 px over uret (112 px, Enkel 126 px) og dækkede uret 49 px
   og foden 38 px (712 x 1000, alle skaller). Nu står den over uret som i T1 (174
   px, Enkel 188 px). Den er højst pladsen over uret og ruller selv: liggende (720
   x 360, 712 x 420, 704 x 400) stod panelet på 477 px 129 til 284 px over
   skærmens top, og overskriften, ✕ og op til 11 af 14 felter kunne ikke nås. */
@media (min-width: 700.02px) and (max-width: 720px) {
  body:not(:has(.workout-player)) #bf-timer-format { max-height: calc(100vh - var(--bf-bottom-nav-h, 0px) - 80px); max-height: calc(100dvh - var(--bf-bottom-nav-h, 0px) - 80px); overflow-y: auto; }
  body:has(.workout-player) #bf-timer-format { bottom: 174px; max-height: calc(100vh - 182px); max-height: calc(100dvh - 182px); overflow-y: auto; }
  body:has(.workout-player.is-senior) #bf-timer-format { bottom: 188px; max-height: calc(100vh - 196px); max-height: calc(100dvh - 196px); }
}
/* Liggende i afspilleren står uret øverst (tilbage-bjælkens linje, top 4 px), så
   formatvælgeren står mellem uret og foden (foden er 110 px høj liggende). */
@media (min-width: 700.02px) and (max-width: 720px) and (max-height: 500px) {
  body:has(.workout-player:not(.is-senior)) #bf-timer-format { top: 61px; bottom: 118px; max-height: none; }
}
/* Skeptikerne 29/9 (v740, fund 5): under persona-bjælken (Vis som, Test som, Mig
   som klient; 40 px høj og øverst) står formatvælgeren mindst 8 px under bjælken.
   Liggende (720 x 360) stod panelet på siderne 8 til 210 px, så overskriften og ✕
   lå under bjælken. Højst pladsen over uret minus bjælken; den ruller som før.
   Liggende i afspilleren står den allerede under uret (top 61 px). */
@media (min-width: 700.02px) and (max-width: 720px) {
  body:has(.bf-persona-bar):not(:has(.workout-player)) #bf-timer-format { max-height: calc(100vh - var(--bf-bottom-nav-h, 0px) - 120px); max-height: calc(100dvh - var(--bf-bottom-nav-h, 0px) - 120px); }
  body:has(.bf-persona-bar):has(.workout-player) #bf-timer-format { max-height: calc(100vh - 222px); max-height: calc(100dvh - 222px); }
  body:has(.bf-persona-bar):has(.workout-player.is-senior) #bf-timer-format { max-height: calc(100vh - 236px); max-height: calc(100dvh - 236px); }
}
@media (min-width: 700.02px) and (max-width: 720px) and (max-height: 500px) {
  body:has(.bf-persona-bar):has(.workout-player:not(.is-senior)) #bf-timer-format { max-height: none; }
}

/* 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; }
/* F5: "5 af 8 øvelser" på en session klienten gemte som delvis. */
.program-schedule-completion { display: block; font-variant-numeric: tabular-nums; }
.program-schedule-completion.is-partial { color: #ffc24d; }
.bf-sand .main-content .program-schedule-completion.is-partial { color: var(--bf-attn-warn, #7F550F); }

/* 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; }
/* Ingrediensvælger E2 (Gergø 5/10): enheden står i sin fulde bredde ("stk", "ml", "spsk"); navnet giver plads. */
.mv-ing-row .mv-ing-unit { flex: 0 0 auto; white-space: nowrap; }
.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; }

/* ===================== Ingrediensvælger E3: arket og editorens rækker (Gergø 5/10-2026) =====================
   Spec: _design_handoff/ingrediensvaelger-spec-2026-10-06.json (S1 til S5, S11).
   Arket står i sit eget lag på document.body (#ingrediens-lag, main.js
   ingSheetLayer). Laget bærer .app-shell's klasser, så temaets tokens gælder,
   men er ingen kasse selv. Alle regler begynder med #ingrediens-lag eller
   .meal-variant-editor.mvp, så intet andet rammes. Kun tokens, ingen tema-kald:
   lyst og mørkt, Labrador og huset. Farverne nedenfor er målt (WCAG):
   proteinpillen #9A3412 på #FFE4D2 6,0:1 og #F5B38C på #4A2B1A 7,1:1;
   kulhydrat #55503F på #F2EDE5 6,9:1 og #D9D0C2 på #2B2620 9,8:1; fedt #6B5313
   på #FBF3D9 6,6:1 og #E6C873 på #332B14 8,6:1; andet #5E5849 på #F4F1EC og
   #C9C0B2 på #26221D; grøn tekst #0B6B37 på hvid 6,6:1 (--lab-ok er kun 4,2:1)
   og #5CC98D på #1E1B18 8,3:1 og på #1B2C1F 6,7:1. --bf-accent er kun kant og
   grafik, aldrig tekst eller fyld bag tekst. */
#ingrediens-lag,
.meal-variant-editor.mvp {
  --ing-surface: var(--bf-surface, #FFFFFF);
  --ing-surface2: var(--bf-surface2, #FBF9F5);
  --ing-ink: var(--bf-ink, #1C1A17);
  --ing-muted: var(--bf-muted, #6B6453);
  --ing-line: var(--bf-line, #E6E3DD);
  --ing-dash: #D6CFC3;
  --ing-accent: var(--bf-accent, #E8570D);
  --ing-btn: var(--bf-accent-btn, #C2410C);
  --ing-accent-text: var(--bf-accent-text, #B03D0B);
  --ing-ok: var(--lab-ok, #0E8846);
  --ing-ok-text: #0B6B37;
  --ing-new-bg: #F3FAF5;
  --ing-photo-bg: #F2EDE5;
  --ing-pill-protein-bg: #FFE4D2; --ing-pill-protein-ink: #9A3412;
  --ing-pill-carbs-bg: #F2EDE5; --ing-pill-carbs-ink: #55503F;
  --ing-pill-fat-bg: #FBF3D9; --ing-pill-fat-ink: #6B5313;
  --ing-pill-other-bg: #F4F1EC; --ing-pill-other-ink: #5E5849;
  --ing-scrim: rgba(20, 18, 16, 0.45);
  --ing-shadow: 0 -18px 50px rgba(0, 0, 0, 0.32);
}
#ingrediens-lag.bf-dark,
.bf-dark .meal-variant-editor.mvp {
  --ing-dash: #4A433A;
  --ing-ok-text: #5CC98D;
  --ing-new-bg: #1B2C1F;
  --ing-photo-bg: #2B2620;
  --ing-pill-protein-bg: #4A2B1A; --ing-pill-protein-ink: #F5B38C;
  --ing-pill-carbs-bg: #2B2620; --ing-pill-carbs-ink: #D9D0C2;
  --ing-pill-fat-bg: #332B14; --ing-pill-fat-ink: #E6C873;
  --ing-pill-other-bg: #26221D; --ing-pill-other-ink: #C9C0B2;
  --ing-scrim: rgba(0, 0, 0, 0.6);
  --ing-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6);
}

/* Laget og arket. Højden: 88 % af skærmen, og med tastaturet oppe står bunden
   på tastaturets top (--ing-kbd) og toppen inden for det synlige udsnit
   (--ing-avail). Opdaterings- og installationsbanneret venter, mens arket er
   åbent, som ved emoji-arket. */
#ingrediens-lag { display: contents; }
body.has-ing-sheet :is(#bf-update-banner, #bf-install-banner) { display: none; }
#ingrediens-lag .ing-backdrop { position: fixed; inset: 0; z-index: 1400; background: var(--ing-scrim); touch-action: none; }
#ingrediens-lag .ing-sheet {
  position: fixed;
  z-index: 1401;
  left: 0;
  right: 0;
  bottom: var(--ing-kbd, 0px);
  height: min(calc(88dvh - var(--ing-kbd, 0px)), calc(var(--ing-avail, 100dvh) - 12px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ing-surface);
  color: var(--ing-ink);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--ing-shadow);
  font: 500 15px/1.35 "Hanken Grotesk", system-ui, sans-serif;
  text-align: left;
}
#ingrediens-lag.is-ing-kbd .ing-sheet { padding-bottom: 0; }
#ingrediens-lag .ing-sheet.is-amount {
  height: auto;
  max-height: min(calc(88dvh - var(--ing-kbd, 0px)), calc(var(--ing-avail, 100dvh) - 12px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
#ingrediens-lag .ing-grip { flex: none; width: 38px; height: 4px; margin: 6px auto; border-radius: 999px; background: var(--lab-dot-muted, #C9C2B6); }
#ingrediens-lag .ing-step { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#ingrediens-lag .ing-context { flex: none; margin: 0; padding: 0 16px; min-height: 18px; font: 500 13px/18px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ingrediens-lag .ing-context strong { font-weight: 800; color: var(--ing-ink); }
#ingrediens-lag .ing-context.is-prompt { white-space: normal; font-weight: 700; color: var(--ing-ink); }

/* S1: søgefeltet med Ryd og Luk. */
#ingrediens-lag .ing-search-row { flex: none; display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 0 16px; }
#ingrediens-lag .ing-search-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
#ingrediens-lag .ing-search-icon { position: absolute; left: 13px; top: 13px; color: var(--ing-muted); pointer-events: none; }
#ingrediens-lag .ing-search {
  display: block;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 44px 0 40px;
  border: 2px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-surface);
  color: var(--ing-ink);
  font: 600 17px/1 "Hanken Grotesk", system-ui, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
#ingrediens-lag .ing-search:focus { border-color: var(--ing-accent); box-shadow: 0 0 0 3px rgba(232, 87, 13, 0.22); }
#ingrediens-lag .ing-search::placeholder { color: var(--ing-muted); font-weight: 500; opacity: 1; }
#ingrediens-lag .ing-search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
#ingrediens-lag .ing-clear { position: absolute; right: 0; top: 0; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; color: #A79D8F; cursor: pointer; }
#ingrediens-lag .ing-clear[hidden] { display: none; }
#ingrediens-lag :is(.ing-close, .ing-back) { flex: none; min-width: 48px; height: 44px; margin: 0; padding: 0 6px; border: 0; border-radius: 12px; background: transparent; font: 700 15px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-accent-text); cursor: pointer; }

/* Regel 6: tre faner, altid synlige, ingen valgt fra start; valgt er fyldt. */
#ingrediens-lag .ing-tabs { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; padding: 0 16px; }
#ingrediens-lag .ing-tab {
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
  border: 1.5px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 14.5px/1 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ing-ink);
  white-space: nowrap;
  cursor: pointer;
}
#ingrediens-lag .ing-tab[aria-pressed="true"] { background: var(--ing-btn); border-color: var(--ing-btn); color: #FFFFFF; }
#ingrediens-lag .ing-tab-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--ing-accent); }
#ingrediens-lag .ing-tab-dot.is-kulhydrat { background: #A08F6E; }
#ingrediens-lag .ing-tab-dot.is-fedt { background: #C9A227; }
#ingrediens-lag .ing-tab[aria-pressed="true"] .ing-tab-dot { background: #FFFFFF; }

/* Listen: grupper, rækker på 46 px og "Lav din egen" klistret i bunden af
   rullefeltet (beslutning 9). */
#ingrediens-lag .ing-list { position: relative; flex: 1 1 auto; min-height: 0; margin-top: 6px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#ingrediens-lag .ing-hint { margin: 4px 16px 8px; font: 500 13px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
#ingrediens-lag .ing-hint.is-all { margin: 10px 16px 12px; }
#ingrediens-lag .ing-group { display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 16px; border-top: 1px solid var(--ing-line); background: var(--ing-surface2); font: 800 11px/1 "Archivo", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ing-muted); }
#ingrediens-lag .ing-group.is-first { border-top: 0; background: var(--ing-surface); }
#ingrediens-lag .ing-per100 { font: 600 12px/1 "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
#ingrediens-lag .ing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--ing-photo-bg);
  border-radius: 0;
  background: var(--ing-surface);
  color: var(--ing-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
#ingrediens-lag .ing-group + .ing-row { border-top: 0; }
#ingrediens-lag .ing-row:hover { background: var(--ing-surface2); }
#ingrediens-lag .ing-row:focus-visible,
#ingrediens-lag .ing-make-own:focus-visible { outline: 3px solid var(--ing-accent); outline-offset: -3px; }
#ingrediens-lag .ing-photo { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: var(--ing-photo-bg); display: flex; align-items: center; justify-content: center; color: var(--ing-muted); }
#ingrediens-lag .ing-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#ingrediens-lag .ing-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#ingrediens-lag .ing-row-name { font: 700 15px/18px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ingrediens-lag .ing-rest { font-weight: 500; color: var(--ing-muted); }
#ingrediens-lag .ing-row-macros { font: 500 12.5px/15px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ingrediens-lag .ing-pill { flex: none; padding: 5px 8px; border-radius: 999px; font: 700 12px/1 "Hanken Grotesk", system-ui, sans-serif; white-space: nowrap; background: var(--ing-pill-other-bg); color: var(--ing-pill-other-ink); }
#ingrediens-lag .ing-pill.is-protein { background: var(--ing-pill-protein-bg); color: var(--ing-pill-protein-ink); }
#ingrediens-lag .ing-pill.is-kulhydrat { background: var(--ing-pill-carbs-bg); color: var(--ing-pill-carbs-ink); }
#ingrediens-lag .ing-pill.is-fedt { background: var(--ing-pill-fat-bg); color: var(--ing-pill-fat-ink); }
#ingrediens-lag .ing-more { display: block; width: calc(100% - 32px); height: 44px; margin: 8px 16px; border: 1.5px solid var(--ing-line); border-radius: 12px; background: var(--ing-surface); font: 700 15px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-accent-text); cursor: pointer; }
#ingrediens-lag .ing-make-own {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-top: 1px solid var(--ing-line);
  border-radius: 0;
  background: var(--ing-surface);
  box-shadow: 0 -6px 14px rgba(40, 28, 16, 0.07);
  color: var(--ing-accent-text);
  text-align: left;
  font: 700 15px/1.2 "Hanken Grotesk", system-ui, sans-serif;
  cursor: pointer;
}
#ingrediens-lag .ing-make-own > span { flex: 1 1 auto; min-width: 0; }
#ingrediens-lag .ing-make-own > svg:last-child { flex: none; color: var(--ing-muted); }
/* S3: ingen hit. Én sætning og knappen "Lav din egen: {q}". */
#ingrediens-lag .ing-nohits { margin: 10px 16px 0; font: 500 14px/1.45 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-nohits strong { font-weight: 800; }
#ingrediens-lag .ing-make-own.is-named { position: static; width: calc(100% - 32px); margin: 12px 16px; border: 1.5px solid var(--ing-line); border-radius: 12px; box-shadow: none; }

/* S4: Hvor meget. */
#ingrediens-lag .ing-sheet.is-amount .ing-step { padding: 0 16px 12px; }
#ingrediens-lag .ing-sheet.is-amount .ing-context { padding: 0; }
#ingrediens-lag .ing-amount-head { flex: none; display: flex; align-items: center; gap: 4px; min-height: 44px; margin: 4px 0 0 -10px; }
#ingrediens-lag .ing-amount-head:not(:has(.ing-back-arrow)) { margin-left: 0; }
#ingrediens-lag .ing-back-arrow { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ing-ink); cursor: pointer; }
#ingrediens-lag .ing-amount-title { min-width: 0; margin: 0; font: 800 22px/1.15 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--ing-ink); overflow-wrap: anywhere; }
#ingrediens-lag .ing-amount-meta { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; margin-top: 4px; font: 500 13px/1.3 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
#ingrediens-lag .ing-amount-label { flex: none; display: block; margin-top: 12px; font: 700 13px/16px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-amount {
  flex: none;
  display: block;
  width: 100%;
  height: 64px;
  box-sizing: border-box;
  margin: 6px 0 0;
  padding: 0 16px;
  border: 2px solid var(--ing-line);
  border-radius: 14px;
  background: var(--ing-surface);
  color: var(--ing-ink);
  font: 800 30px/1 "Archivo", system-ui, sans-serif;
  outline: none;
}
#ingrediens-lag .ing-amount:focus { border-color: var(--ing-accent); box-shadow: 0 0 0 3px rgba(232, 87, 13, 0.22); }
#ingrediens-lag .ing-units { flex: none; display: grid; grid-template-columns: repeat(var(--ing-unit-count, 4), minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
#ingrediens-lag .ing-unit { min-width: 0; height: 44px; box-sizing: border-box; margin: 0; padding: 0 2px; border: 1.5px solid var(--ing-line); border-radius: 12px; background: var(--ing-surface2); font: 700 15px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); cursor: pointer; }
#ingrediens-lag .ing-unit[aria-checked="true"] { background: var(--ing-btn); border-color: var(--ing-btn); color: #FFFFFF; font-weight: 800; }
#ingrediens-lag .ing-live { flex: none; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--ing-line); border-radius: 12px; background: var(--ing-surface2); font: 600 14px/1.35 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-live strong { font-weight: 800; }
#ingrediens-lag .ing-live[hidden],
#ingrediens-lag .ing-amount-note[hidden] { display: none; }
#ingrediens-lag .ing-amount-note { flex: none; margin: 8px 0 0; font: 500 13px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
#ingrediens-lag .ing-amount-note > span { display: block; }
#ingrediens-lag .ing-add { flex: none; width: 100%; height: 52px; margin: 12px 0 0; border: 0; border-radius: 14px; background: var(--ing-btn); font: 800 16px/1 "Hanken Grotesk", system-ui, sans-serif; color: #FFFFFF; cursor: pointer; }
#ingrediens-lag .ing-add:disabled { opacity: 0.45; cursor: not-allowed; }
#ingrediens-lag .ing-back { width: 100%; margin-top: 6px; }
#ingrediens-lag :is(.ing-close, .ing-back, .ing-back-arrow, .ing-tab, .ing-unit, .ing-add, .ing-more, .ing-clear):focus-visible { outline: 3px solid var(--ing-accent); outline-offset: 2px; }

/* Tablet og PC (fra 720.02 px som tablettens blokke): en dialog i midten. */
@media (min-width: 720.02px) {
  #ingrediens-lag .ing-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(520px, calc(100vw - 40px));
    height: min(680px, 88vh);
    padding-bottom: 6px;
    border-radius: 18px;
    transform: translate(-50%, -50%);
  }
  #ingrediens-lag .ing-sheet.is-amount { height: auto; max-height: 88vh; }
  #ingrediens-lag .ing-grip { visibility: hidden; }
  /* Tablet med tastaturet oppe: dialogen står over tastaturet. */
  #ingrediens-lag.is-ing-kbd .ing-sheet,
  #ingrediens-lag.is-ing-kbd .ing-sheet.is-amount { top: auto; bottom: calc(var(--ing-kbd, 0px) + 12px); max-height: calc(var(--ing-avail, 100dvh) - 24px); transform: translateX(-50%); }
}

/* S5: editorens rækker. Editoren sidder inde i måltidskortet, og rækkerne er
   kun 188 til 252 px brede på en telefon (målt 6/10 på Hjem, Madplan og
   Måltider ved 360 og 390 px), så hver række har to linjer: navnet øverst med
   ✕, og under det "ikke koblet · 0,5 stk" med Vælg, eller kcal-linjen med
   mængdefeltet og enhedsknappen. Er der plads (340 px eller mere, fx på PC),
   står rækken på én linje som i mockuppen. */
.meal-variant-editor.mvp .mvp-heading { display: block; margin-top: 2px; font: 800 13px/16px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
.meal-variant-editor.mvp .mvp-note { margin: -4px 0 0; font: 500 12.5px/17px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
.meal-variant-editor.mvp .mvp-note[hidden] { display: none; }
.meal-variant-editor.mvp .mv-ings { container-type: inline-size; gap: 6px; }
.meal-variant-editor.mvp .mvp-row { position: relative; box-sizing: border-box; min-width: 0; font: 500 15px/1.3 "Hanken Grotesk", system-ui, sans-serif; scroll-margin: 72px 0 calc(var(--bf-bottom-nav-h, 88px) + 16px); }
/* Madplan-fanens rækker giver alle span display: grid (.today-meal-plan-row span); her står hver selv. */
.meal-variant-editor.mvp .mvp-row :is(.mvp-lead, .mvp-rest, .mvp-qty) { display: inline; font: inherit; color: inherit; }
.meal-variant-editor.mvp .mvp-row .mvp-name .mvp-rest { font-weight: 500; color: var(--ing-muted); }
.meal-variant-editor.mvp .mvp-row .mvp-sub { display: block; }
.meal-variant-editor.mvp .mvp-row .mvp-pick { display: inline-block; }
.meal-variant-editor.mvp .mvp-row .mvp-dot { display: block; }
/* Kortene giver også versaler og egne knapmål (.phone-meal-row span:first-child,
   .phone-planned-meal-row button:not(.meal-action-btn) med min-height 70 px). */
.meal-variant-editor.mvp :is(.mvp-row, .mvp-total) :is(span, strong, p, button, input) { text-transform: none; letter-spacing: normal; }
.meal-variant-editor.mvp .mvp-total { scroll-margin: 72px 0 calc(var(--bf-bottom-nav-h, 88px) + 16px); }
.meal-variant-editor.mvp .mvp-name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 15px/18px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
.meal-variant-editor.mvp .mvp-sub { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12.5px/15px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
.app-shell .meal-variant-editor.mvp .mvp-row .mvp-main {
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font: inherit;
  color: var(--ing-ink);
  cursor: pointer;
}
.app-shell .meal-variant-editor.mvp .mvp-row .mvp-x {
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ing-ink);
  cursor: pointer;
}
.app-shell .meal-variant-editor.mvp .mvp-row .mvp-x:hover { background: var(--ing-surface2); }
.app-shell .meal-variant-editor.mvp .mvp-row :is(.mvp-main, .mvp-x, .mvp-unit, .mvp-amt):focus-visible { outline: 3px solid var(--ing-accent); outline-offset: 1px; }

/* Ikke koblet: hele rækken er én knap, ✕ ligger i dens øverste højre hjørne. */
.meal-variant-editor.mvp .mvp-row.is-unlinked { display: block; }
.app-shell .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-main { display: block; width: 100%; padding: 0 10px 9px; border: 1px solid var(--ing-line); border-radius: 12px; background: var(--ing-surface); }
.meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-name { line-height: 46px; padding-right: 46px; }
.meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-sub { color: var(--ing-accent-text); }
.meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-qty { font-weight: 700; color: var(--ing-ink); }
.meal-variant-editor.mvp .mvp-pick { flex: none; padding: 6px 9px; border-radius: 999px; background: var(--ing-pill-protein-bg); font: 800 13px/1 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-pill-protein-ink); }
.app-shell .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-x { position: absolute; top: 2px; right: 2px; }

/* Koblet: navnet (byt varen) og ✕ øverst, kcal-linjen, mængden og enheden under. */
.meal-variant-editor.mvp .mvp-row.is-linked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 44px;
  grid-template-areas: "main main x" "sub amt unit";
  align-items: center;
  gap: 2px 6px;
  padding: 2px 2px 6px 10px;
  border: 1px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-surface);
}
.meal-variant-editor.mvp .mvp-row.is-new { border: 1.5px solid var(--ing-ok); background: var(--ing-new-bg); }
.meal-variant-editor.mvp .mvp-row.is-new .mvp-sub { color: var(--ing-ok-text); }
.app-shell .meal-variant-editor.mvp .mvp-row.is-linked .mvp-main { grid-area: main; display: flex; align-items: center; gap: 6px; padding: 0; }
.meal-variant-editor.mvp .mvp-row.is-linked .mvp-x { grid-area: x; }
.meal-variant-editor.mvp .mvp-row.is-linked .mvp-sub { grid-area: sub; }
.meal-variant-editor.mvp .mvp-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--ing-ok); }
.app-shell .main-content .meal-variant-editor.mvp .mvp-row .mvp-amt,
.app-shell .meal-variant-editor.mvp .mvp-row .mvp-amt {
  grid-area: amt;
  width: 52px;
  height: 44px;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
  border: 1.5px solid var(--ing-line);
  border-radius: 10px;
  background: var(--ing-surface);
  color: var(--ing-ink);
  text-align: center;
  font: 800 16px/1 "Archivo", system-ui, sans-serif;
}
.app-shell .meal-variant-editor.mvp .mvp-row .mvp-unit {
  grid-area: unit;
  width: 44px;
  height: 44px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0 2px;
  border: 1.5px solid var(--ing-line);
  border-radius: 10px;
  background: var(--ing-surface);
  color: var(--ing-ink);
  font: 700 14px/1 "Hanken Grotesk", system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* Plads nok: én linje som i mockuppen (S5). */
@container (min-width: 340px) {
  .meal-variant-editor.mvp .mvp-row.is-linked { grid-template-columns: minmax(0, 1fr) 52px 44px 44px; grid-template-areas: "main amt unit x" "sub amt unit x"; row-gap: 0; padding: 3px 3px 3px 10px; }
  .app-shell .meal-variant-editor.mvp .mvp-row.is-linked .mvp-main { grid-row: 1 / 3; grid-column: 1; align-items: flex-start; padding-top: 8px; }
  .meal-variant-editor.mvp .mvp-row.is-linked .mvp-sub { grid-row: 2; grid-column: 1; align-self: end; padding: 0 0 8px; pointer-events: none; }
  .meal-variant-editor.mvp .mvp-row.is-new .mvp-sub { padding-left: 14px; }
  .app-shell .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pick" "sub pick"; align-items: center; column-gap: 8px; min-height: 52px; padding: 7px 56px 7px 10px; }
  .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-name { grid-area: name; line-height: 18px; padding-right: 0; }
  .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-line { display: contents; }
  .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-sub { grid-area: sub; }
  .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-pick { grid-area: pick; }
  .app-shell .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-x { top: 4px; right: 4px; }
}

/* "+ Tilføj ingrediens" og Ny total. color !important: husets knapregel
   (.bf-sand .main-content button:not(...), 0,7,1) giver ellers blæk. */
.app-shell .meal-variant-editor.mvp .mvp-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  border: 1.5px dashed var(--ing-dash);
  border-radius: 12px;
  background: var(--ing-surface);
  font: 700 15px/1 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ing-accent-text) !important;
  cursor: pointer;
}
.app-shell .meal-variant-editor.mvp .mvp-add:focus-visible { outline: 3px solid var(--ing-accent); outline-offset: 2px; }
.meal-variant-editor.mvp .mvp-total { box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--ing-line); border-radius: 12px; background: var(--ing-surface); }
.meal-variant-editor.mvp .mvp-total-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.meal-variant-editor.mvp .mvp-total .mvp-total-label { font: 800 11px/14px "Archivo", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ing-muted); }
.meal-variant-editor.mvp .mvp-total-before { font: 600 13px/14px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
.meal-variant-editor.mvp .mvp-total-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 4px 0 0; }
.meal-variant-editor.mvp .mvp-total-line strong { font: 800 24px/30px "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--ing-ink); }
.meal-variant-editor.mvp .mvp-total-line span { font: 700 14px/18px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
.meal-variant-editor.mvp .mvp-total-delta { margin: 4px 0 0; font: 600 13.5px/18px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
.meal-variant-editor.mvp .mvp-total-delta strong { font-weight: 800; color: var(--ing-ink); }
.meal-variant-editor.mvp .mvp-total-note { margin: 4px 0 0; font: 500 12.5px/17px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
/* ===================== /Ingrediensvælger E3 ===================== */
/* ===================== Ingrediensvælger E4: Lav din egen, Dine egne og S8 (Gergø 5/10-2026) =====================
   Spec: _design_handoff/ingrediensvaelger-spec-2026-10-06.json (S6, S7, S8,
   regel 13 og 14). Samme lag og samme tokens som E3 (lyst og mørkt, Labrador og
   huset), ingen nye farver og ingen ny @media: grøn tekst på --ing-new-bg
   (#0B6B37 på #F3FAF5 og #5CC98D på #1B2C1F, målt i E3), advarslen i
   proteinpillens farver (6,0:1 og 7,1:1), fejl i --ing-accent-text, og et felt
   med fejl får kanten --ing-btn (kant, ikke tekst). Alle regler begynder med
   #ingrediens-lag eller .meal-variant-editor.mvp. */

/* S8: "Fjern uden at trække fra" under spørgsmålet. */
#ingrediens-lag .ing-remove-without {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  min-height: 44px;
  box-sizing: border-box;
  margin: 8px 16px 2px;
  padding: 0 12px;
  border: 1.5px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-surface);
  font: 700 15px/1.2 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ing-accent-text);
  text-align: center;
  cursor: pointer;
}

/* S7: Dine egne. Rækken og "Ret tallene" side om side; pillen "Din egen". */
#ingrediens-lag .ing-own-row { display: flex; align-items: center; border-top: 1px solid var(--ing-photo-bg); background: var(--ing-surface); }
#ingrediens-lag .ing-group + .ing-own-row { border-top: 0; }
#ingrediens-lag .ing-own-row .ing-row { flex: 1 1 auto; min-width: 0; border-top: 0; padding-right: 8px; }
#ingrediens-lag .ing-edit-own {
  flex: none;
  height: 44px;
  margin: 0 12px 0 0;
  padding: 0 10px;
  border: 1.5px solid var(--ing-line);
  border-radius: 10px;
  background: var(--ing-surface);
  font: 700 13px/1 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ing-accent-text);
  white-space: nowrap;
  cursor: pointer;
}
#ingrediens-lag .ing-pill.is-own { background: var(--ing-new-bg); color: var(--ing-ok-text); }
#ingrediens-lag .ing-row-macros .ing-pill.is-own { display: inline-block; margin-right: 6px; padding: 1px 6px; font-size: 11.5px; line-height: 13px; vertical-align: 1px; }

/* S6: Lav din egen ingrediens. Navn, fire talfelter i 2 × 2, fibre foldet
   sammen, kilden, tjeklinjen og fejlene, og knapperne. Trinnet ruller i arket
   (.is-amount), og arkets bund følger tastaturet som i S4. */
#ingrediens-lag .ing-own-help { flex: none; margin: 6px 0 0; font: 500 14px/20px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
#ingrediens-lag .ing-own-cell { flex: none; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#ingrediens-lag .ing-own-cell.is-name { margin-top: 12px; }
#ingrediens-lag .ing-own-cell.is-fiber { width: calc(50% - 6px); margin-top: 10px; }
#ingrediens-lag .ing-own-cell[hidden] { display: none; }
#ingrediens-lag .ing-own-cell label { font: 700 13px/16px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-own-grid { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 12px; }
#ingrediens-lag .ing-own-input {
  display: block;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--ing-line);
  border-radius: 11px;
  background: var(--ing-surface2);
  color: var(--ing-ink);
  font: 800 18px/1 "Archivo", system-ui, sans-serif;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#ingrediens-lag .ing-own-input.is-name { height: 44px; font: 600 16px/1 "Hanken Grotesk", system-ui, sans-serif; }
#ingrediens-lag .ing-own-input:focus { border-color: var(--ing-accent); box-shadow: 0 0 0 3px rgba(232, 87, 13, 0.22); }
#ingrediens-lag .ing-own-input[aria-invalid="true"] { border: 2px solid var(--ing-btn); }
#ingrediens-lag .ing-own-fiber-toggle {
  flex: none;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  margin: 8px 0 0 -4px;
  padding: 0 10px 0 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: 700 14.5px/1 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ing-ink);
  cursor: pointer;
}
#ingrediens-lag .ing-own-fiber-toggle svg { flex: none; color: var(--ing-pill-carbs-ink); }
#ingrediens-lag .ing-own-fiber-toggle[hidden] { display: none; }
#ingrediens-lag .ing-own-source-lead { flex: none; margin: 10px 0 0; font: 500 14px/20px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-own-source-lead strong { font-weight: 800; }
#ingrediens-lag .ing-own-source-lead[hidden] { display: none; }
#ingrediens-lag .ing-own-sources { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
#ingrediens-lag .ing-own-source {
  min-width: 0;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 4px;
  border: 1.5px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-surface2);
  font: 700 14.5px/1 "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ing-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#ingrediens-lag .ing-own-source[aria-checked="true"] { background: var(--ing-btn); border-color: var(--ing-btn); color: #FFFFFF; font-weight: 800; }
#ingrediens-lag .ing-own-feedback { flex: none; }
#ingrediens-lag .ing-own-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--ing-surface2); font: 700 14px/1.35 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-own-check.is-ok { background: var(--ing-new-bg); color: var(--ing-ok-text); }
#ingrediens-lag .ing-own-check.is-off { background: var(--ing-pill-protein-bg); color: var(--ing-pill-protein-ink); font-weight: 600; }
#ingrediens-lag .ing-own-check strong { font-weight: 800; }
#ingrediens-lag .ing-own-check svg { flex: none; }
#ingrediens-lag .ing-own-error { margin: 10px 0 0; font: 700 14px/1.35 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-accent-text); }
#ingrediens-lag .ing-own-error > span { display: block; }
#ingrediens-lag :is(.ing-own-check, .ing-own-error)[hidden] { display: none; }
#ingrediens-lag :is(.ing-own-source, .ing-own-fiber-toggle, .ing-edit-own, .ing-remove-without):focus-visible { outline: 3px solid var(--ing-accent); outline-offset: 2px; }

/* S8: en importeret række, hun koblede og fjernede, er et skjult mærke i
   editoren (Madplan-fanen giver ellers alle span display: grid). */
.meal-variant-editor.mvp .mvp-gone { display: none !important; }
/* ===================== /Ingrediensvælger E4 ===================== */
/* ===================== Ingrediensvælger E5: Enkel visning og de andre veje (Gergø 5/10-2026) =====================
   Spec: _design_handoff/ingrediensvaelger-spec-2026-10-06.json (S9 og S10,
   beslutning 12). Samme lag og samme tokens som E3 og E4 (lyst og mørkt,
   Labrador og huset), ingen nye farver og ingen ny @media. Enkel er arket med
   klassen .is-enkel (main.js openIngredientSheet): ét trin pr. skærm, tekst fra
   16 px, navne i 19 px, knapper fra 56 px, de tre kildeknapper 64 px, rækkerne
   72 px med foto på 48 px og mængden i et senior-felt på 88 px med tallet i
   Archivo. Editoren i Enkel (.bf-senior) får rækker i 18 px, Ny total i 20 px
   og knapper på 56 px. Mine opskrifter (vej 3) bruger E3's rækker uændret.
   --ing-accent er kun kant (senior-feltet), aldrig tekst. Alle regler begynder
   med #ingrediens-lag eller .bf-senior .meal-variant-editor.mvp. */

/* S9, trin 1: overskriften med Luk, retten, søgefeltet og de tre knapper. */
#ingrediens-lag .ing-sheet.is-enkel .ing-grip { width: 44px; height: 5px; margin: 6px auto 5px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-step { padding: 0 16px; }
#ingrediens-lag .ing-enkel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; }
#ingrediens-lag .ing-enkel-title { min-width: 0; margin: 0; font: 800 24px/1.15 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em; color: var(--ing-ink); overflow-wrap: anywhere; }
#ingrediens-lag .ing-enkel-head.is-prompt .ing-enkel-title { padding: 6px 0; font-size: 20px; line-height: 1.25; }
#ingrediens-lag .ing-sheet.is-enkel .ing-close { min-width: 64px; height: 56px; padding: 0 8px; font-size: 18px; font-weight: 800; }
#ingrediens-lag .ing-enkel-context { flex: none; margin: 0; font: 500 16px/22px "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ingrediens-lag .ing-sheet.is-enkel .ing-search-row { margin-top: 8px; padding: 0; }
#ingrediens-lag .ing-sheet.is-enkel .ing-search { height: 56px; padding: 0 56px 0 48px; border-radius: 14px; background: var(--ing-surface2); font-size: 20px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-search-icon { left: 16px; top: 17px; width: 22px; height: 22px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-clear { width: 56px; height: 56px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-remove-without { width: 100%; min-height: 56px; margin: 8px 0 2px; border-width: 2px; border-radius: 14px; font-size: 18px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-tabs { gap: 8px; margin-top: 10px; padding: 0; }
#ingrediens-lag .ing-sheet.is-enkel .ing-tab { height: 64px; border-width: 2px; border-radius: 14px; font: 800 18px/1 "Hanken Grotesk", system-ui, sans-serif; }
#ingrediens-lag .ing-sheet.is-enkel .ing-tab-dot { display: none; }

/* Listen: overskrift i 17 px, rækker på 72 px med foto på 48 px, navnet i
   19 px og "kcal pr. 100 g" i 16 px, og "Lav din egen" som stor knap (72 px),
   stadig klistret i bunden af rullefeltet (beslutning 9). */
#ingrediens-lag .ing-sheet.is-enkel .ing-group { display: block; height: auto; margin: 0; padding: 12px 2px 4px; border: 0; background: transparent; font: 800 17px/22px "Hanken Grotesk", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ing-ink); }
#ingrediens-lag .ing-sheet.is-enkel .ing-group.is-first { padding-top: 6px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-row { gap: 12px; height: 72px; padding: 0 2px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-photo { width: 48px; height: 48px; border-radius: 12px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-row-text { gap: 3px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-row-name { font: 700 19px/23px "Hanken Grotesk", system-ui, sans-serif; }
#ingrediens-lag .ing-sheet.is-enkel .ing-row-macros { font: 500 16px/20px "Hanken Grotesk", system-ui, sans-serif; }
#ingrediens-lag .ing-sheet.is-enkel .ing-row > svg { flex: none; width: 20px; height: 20px; color: var(--ing-pill-carbs-ink); }
#ingrediens-lag .ing-sheet.is-enkel .ing-row-macros .ing-pill.is-own { padding: 1px 7px; font-size: 16px; line-height: 18px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-row .ing-row { padding-right: 8px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-edit-own { height: 56px; margin: 0; padding: 0 12px; border-width: 2px; border-radius: 12px; font-size: 16px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-more { width: 100%; height: 56px; margin: 8px 0; border-width: 2px; border-radius: 14px; font-size: 18px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-nohits { margin: 12px 2px 0; font-size: 18px; line-height: 1.45; }
#ingrediens-lag .ing-sheet.is-enkel .ing-make-own {
  gap: 12px;
  min-height: 72px;
  margin: 8px 0 0;
  padding: 0 14px;
  border: 2px solid var(--ing-btn);
  border-radius: 14px;
  box-shadow: 0 0 0 8px var(--ing-surface);
  font: 800 18px/1.2 "Hanken Grotesk", system-ui, sans-serif;
}
#ingrediens-lag .ing-sheet.is-enkel .ing-make-own > svg:first-child { width: 26px; height: 26px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-make-own.is-named { width: 100%; margin: 14px 0; box-shadow: none; }

/* S9, trin 2: "Hvor meget {navn}?" med senior-feltet (88 px, tallet i 44 px
   Archivo, enheden bag tallet), enhederne som knapper på 56 px, "Tilføj den"
   på 64 px og Tilbage på 56 px. */
#ingrediens-lag .ing-sheet.is-enkel.is-amount .ing-step { padding: 0 16px 16px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-amount-head { min-height: 56px; margin: 4px 0 0 -12px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-back-arrow { width: 56px; height: 56px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-amount-title { font-size: 24px; line-height: 1.2; }
#ingrediens-lag .ing-sheet.is-enkel .ing-amount-meta { margin-top: 2px; font-size: 18px; line-height: 1.35; }
#ingrediens-lag .ing-senior-field {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 88px;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 14px 20px;
  border: 3px solid var(--ing-accent);
  border-radius: 18px;
  background: var(--ing-surface);
  cursor: text;
}
#ingrediens-lag .ing-senior-field:focus-within { outline: 3px solid var(--ing-accent); outline-offset: 2px; }
#ingrediens-lag .ing-senior-field:has([aria-invalid="true"]) { border-color: var(--ing-btn); }
#ingrediens-lag .ing-senior-field :is(.ing-amount, .ing-own-input),
#ingrediens-lag .ing-senior-field :is(.ing-amount, .ing-own-input):focus,
#ingrediens-lag .ing-senior-field .ing-own-input[aria-invalid="true"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--ing-ink);
  font: 800 44px/1.1 "Archivo", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
#ingrediens-lag .ing-senior-field .ing-own-input.is-name { font: 700 24px/1.2 "Hanken Grotesk", system-ui, sans-serif; }
#ingrediens-lag .ing-field-unit { flex: none; font: 800 26px/1 "Archivo", system-ui, sans-serif; color: var(--ing-muted); }
#ingrediens-lag .ing-sheet.is-enkel .ing-units { gap: 8px; margin-top: 14px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-unit { height: 56px; border-width: 2px; border-radius: 14px; font-size: 18px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-live { margin-top: 14px; padding: 12px 14px; font-size: 18px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-amount-note { margin-top: 10px; font-size: 17px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-add { height: 64px; margin-top: 16px; border-radius: 16px; font-size: 19px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-back { height: 56px; margin-top: 8px; border: 2px solid var(--ing-line); border-radius: 14px; background: var(--ing-surface); font-size: 18px; }

/* S9: Lav din egen i Enkel, ét felt pr. skærm ("Trin 2 af 7", hjælpeteksten,
   feltets navn i 20 px og senior-feltet), og sidst spørgsmålet om kilden med
   de tre kilder som knapper på 64 px, når hun trykker "Nej, ret". */
#ingrediens-lag .ing-own-step { flex: none; margin: 2px 0 0; font: 700 18px/1.3 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-muted); }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-help { margin-top: 6px; font-size: 17px; line-height: 1.4; }
#ingrediens-lag .ing-own-big-label { flex: none; display: block; margin-top: 14px; font: 800 20px/1.25 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-error { margin-top: 10px; font-size: 18px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-check { margin-top: 14px; padding: 12px 14px; font-size: 18px; }
#ingrediens-lag .ing-own-ask { flex: none; margin: 16px 0 0; font: 600 20px/1.35 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-ink); }
#ingrediens-lag .ing-own-ask strong { font-weight: 800; }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-sources { gap: 8px; margin-top: 12px; }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-sources[hidden] { display: none; }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-source { height: 64px; border-width: 2px; border-radius: 14px; font-size: 18px; }

/* S9, trin 3: editoren i Enkel visning. Rækker i 18 px, Ny total i 20 px og
   knapper på 56 px; to linjer pr. række som i Avanceret (editoren er ca. 250 px
   bred i Enkel på en telefon), én linje fra 340 px. */
.bf-senior .meal-variant-editor.mvp { gap: 12px; padding: 14px; }
.bf-senior .meal-variant-editor.mvp .mv-title { font: 800 20px/1.25 "Archivo", system-ui, sans-serif; }
.bf-senior .meal-variant-editor.mvp .mv-name { font-size: 18px; }
.bf-senior .meal-variant-editor.mvp .mv-name input { min-height: 56px; font-size: 18px; }
.bf-senior .meal-variant-editor.mvp .mvp-heading { font-size: 18px; line-height: 22px; }
.bf-senior .meal-variant-editor.mvp .mvp-note { margin: 0; font-size: 16px; line-height: 22px; }
.bf-senior .meal-variant-editor.mvp .mvp-row { font-size: 18px; }
.bf-senior .meal-variant-editor.mvp .mvp-name { font-size: 18px; line-height: 22px; }
.bf-senior .meal-variant-editor.mvp .mvp-sub { font-size: 16px; line-height: 20px; }
.bf-senior .meal-variant-editor.mvp .mvp-pick { padding: 8px 12px; font-size: 16px; }
/* Editoren er kun ca. 195 til 225 px inde i rækkerne på en telefon i Enkel
   (målt ved 360 og 390 px), så navnet og "ikke koblet · 30 g" må gå over to
   linjer (mængden holdes samlet), og en koblet række har tre linjer: navnet
   med ✕, kcal-linjen, og mængden med enheden. */
.bf-senior .meal-variant-editor.mvp .mvp-name { white-space: normal; overflow-wrap: anywhere; }
.bf-senior .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-name { line-height: 22px; padding: 17px 58px 8px 0; }
.bf-senior .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-sub { white-space: normal; }
.bf-senior .meal-variant-editor.mvp .mvp-row .mvp-qty { white-space: nowrap; }
.app-shell .bf-senior .meal-variant-editor.mvp .mvp-row .mvp-main { min-height: 56px; }
.app-shell .bf-senior .meal-variant-editor.mvp .mvp-row .mvp-x { width: 56px; height: 56px; }
.bf-senior .meal-variant-editor.mvp .mvp-row.is-linked { grid-template-columns: 64px 56px minmax(0, 1fr) 56px; grid-template-areas: "main main main x" "sub sub sub sub" "amt unit . ."; gap: 4px 8px; padding-bottom: 8px; }
.app-shell .main-content .bf-senior .meal-variant-editor.mvp .mvp-row .mvp-amt,
.app-shell .bf-senior .meal-variant-editor.mvp .mvp-row .mvp-amt { width: 64px; height: 56px; font-size: 20px; }
.app-shell .bf-senior .meal-variant-editor.mvp .mvp-row .mvp-unit { width: 56px; height: 56px; font-size: 18px; }
@container (min-width: 340px) {
  .bf-senior .meal-variant-editor.mvp .mvp-row.is-linked { grid-template-columns: minmax(0, 1fr) 64px 56px 56px; grid-template-areas: "main amt unit x" "sub amt unit x"; padding-bottom: 3px; }
  .app-shell .bf-senior .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-main { min-height: 64px; padding-right: 66px; }
  .bf-senior .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-name { padding: 0; }
}
.app-shell .bf-senior .meal-variant-editor.mvp .mvp-add { min-height: 56px; font-size: 18px; }
.bf-senior .meal-variant-editor.mvp .mvp-total { padding: 12px 14px; }
.bf-senior .meal-variant-editor.mvp .mvp-total .mvp-total-label { font-size: 16px; line-height: 20px; letter-spacing: 0.06em; }
.bf-senior .meal-variant-editor.mvp .mvp-total-before { font-size: 16px; line-height: 20px; }
.bf-senior .meal-variant-editor.mvp .mvp-total-line strong { font-size: 28px; line-height: 34px; }
.bf-senior .meal-variant-editor.mvp .mvp-total-line span { font-size: 20px; line-height: 26px; }
.bf-senior .meal-variant-editor.mvp .mvp-total-delta { font-size: 18px; line-height: 24px; }
.bf-senior .meal-variant-editor.mvp .mvp-total-note { font-size: 16px; line-height: 22px; }
.bf-senior .meal-variant-editor.mvp .mv-actions .button { min-height: 56px; font-size: 18px; }
.bf-senior .meal-variant-editor.mvp .mv-hint { font-size: 16px; line-height: 1.4; opacity: 1; color: var(--ing-muted); }
/* ===================== /Ingrediensvælger E5 ===================== */
/* ===================== Ingrediensvælger, skeptikernes fund (Gergø 5/10, målt 6/10-2026) =====================
   Skærmrunden 6/10 (tests/ingrediensvaelger-skeptiker-skaerm.test.js). Samme
   tokens som E3 til E5 og ingen ny @media; alle regler begynder med
   #ingrediens-lag eller .meal-variant-editor.mvp (også .app-shell og
   .bf-senior foran).
   Fund 5: på Madplan-fanen ved 360 px er editoren kun 188 px, og rækkerne
   klippede enheden ("ikke koblet · 250 …"), ordet ny ("116 kcal ·…") og navnet.
   Under 340 px container må navnet gå over to linjer, og kcal-linjen og
   "ikke koblet · 250 ml" bryder, mens mængden holdes samlet. Enkel har sine
   egne regler fra E5 og beholder dem. */
@container (max-width: 339.98px) {
  .meal-variant-editor.mvp .mvp-row .mvp-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
  .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-name { line-height: 18px; padding: 14px 46px 6px 0; }
  .meal-variant-editor.mvp .mvp-row .mvp-sub { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .meal-variant-editor.mvp .mvp-row .mvp-qty { white-space: nowrap; }
  .bf-senior .meal-variant-editor.mvp .mvp-row .mvp-name { display: block; -webkit-line-clamp: none; }
  .bf-senior .meal-variant-editor.mvp .mvp-row.is-unlinked .mvp-name { line-height: 22px; padding: 17px 58px 8px 0; }
}

/* Fund 13: navnefeltet var 43 px og Gem og Annuller 40 px (.bf-sand
   .button-compact). Enkel har 56 px fra E5. */
.meal-variant-editor.mvp .mv-name input { min-height: 44px; box-sizing: border-box; }
.meal-variant-editor.mvp .mv-actions .button { min-height: 44px; }

/* Fund 4: en koblet række uden mængde spærrer gem; feltet er markeret, som
   felterne i Lav din egen. */
.app-shell .meal-variant-editor.mvp .mvp-row .mvp-amt[aria-invalid="true"] { border: 2px solid var(--ing-btn); }
.meal-variant-editor.mvp .mvp-error { margin: 0; font: 700 14px/1.35 "Hanken Grotesk", system-ui, sans-serif; color: var(--ing-accent-text); scroll-margin: 72px 0 calc(var(--bf-bottom-nav-h, 88px) + 16px); }
.meal-variant-editor.mvp .mvp-error[hidden] { display: none; }
.bf-senior .meal-variant-editor.mvp .mvp-error { font-size: 18px; }

/* Fund 6: Enkel med tastaturet oppe viste kun to rækker. Mens hun skriver,
   skjules grebet og "Til {ret}", de tre knapper er 56 px (som Enkels andre
   knapper), og "Lav din egen" er 56 px og står som sidste række i listen i
   stedet for at ligge over rækkerne (beslutning 9: sidste række med
   tastaturet oppe, bundknap med det nede). */
#ingrediens-lag.is-ing-kbd .ing-sheet.is-enkel .ing-grip { display: none; }
#ingrediens-lag.is-ing-kbd .ing-sheet.is-enkel .ing-step { padding-top: 6px; }
#ingrediens-lag.is-ing-kbd .ing-sheet.is-enkel .ing-enkel-context { display: none; }
#ingrediens-lag.is-ing-kbd .ing-sheet.is-enkel .ing-tabs { margin-top: 8px; }
#ingrediens-lag.is-ing-kbd .ing-sheet.is-enkel .ing-tab { height: 56px; }
#ingrediens-lag.is-ing-kbd .ing-sheet.is-enkel .ing-make-own:not(.is-named) { position: static; min-height: 56px; margin-top: 4px; box-shadow: none; font-size: 17px; }

/* Fund 7: i Enkel klippede "Ret tallene" ved siden af rækken navnet og kcal på
   hendes egen ingrediens. Knappen står under rækken i fuld bredde (56 px),
   rykket ind under navnet. */
#ingrediens-lag .ing-sheet.is-enkel .ing-own-row { flex-wrap: wrap; }
#ingrediens-lag .ing-sheet.is-enkel .ing-own-row .ing-row { flex: 1 0 100%; }
#ingrediens-lag .ing-sheet.is-enkel .ing-edit-own { flex: 1 0 auto; margin: 0 2px 10px 62px; }
/* ===================== /Ingrediensvælger, skeptikernes fund ===================== */


/* 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-text, 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(--bf-accent-text, 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 */
/* A DARK island inside the LIGHT theme: the hero is always near-black, so the
   darker light-theme accent text would go the wrong way on it (measured 4.17:1
   there before). Re-point the token locally to the dark-theme value, which is
   what this surface has effectively always been. Measured on #1C1A17: 7.10:1. */
.kost-hero { --bf-accent-text:#E8905F; 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(--bf-accent-text, var(--kost-orange)); font-size:0.82rem; font-weight:600; }
/* Gergø 27/9, svar 3: uden coachens mål står teksten i stedet for "tilbage i dag". */
.kost-hero-label.kost-hero-notarget { display:block; font-size:0.95rem; line-height:1.3; margin:2px 0 14px; }
.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(--bf-accent-text, var(--kost-orange)); }
.kost-macro-k strong { color:#86b072; }
.kost-macro-f strong { color:#d6a857; }
/* Skeptikeren 27/9 (svar 3): grammene står med enhed, også uden coachens mål.
   Fliserne er for smalle til "114 g" på én linje ved 390 px, så enheden står
   som sin egen lille linje under tallet, i tallets farve i alle temaer. */
.kost-macro strong .kost-macro-unit { display:block; font-size:0.6em; font-weight:700; line-height:1.1; margin-top:2px; color:inherit !important; }

/* 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(--bf-accent-text, 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; flex:1; }
.kost-meal-type { display:block; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--bf-accent-text, 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(--bf-accent-text, 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-orange stays the brand orange for text/icons; the FILL under white
   text uses the AA-safe token, same as everywhere else. */
.kost-app .button-primary { background:var(--bf-accent-btn, var(--kost-orange)); border:1px solid var(--bf-accent-btn, 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(--bf-accent-text, 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(--bf-accent-text, 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(--bf-accent-text, var(--kost-orange)); }
.kost-app .kost-macro-k strong { color:#86b072; }
.kost-app .kost-macro-f strong { color:#d6a857; }
/* The macro labels (P / K / F) sit on the Kost hero, which is DARK in both
   themes — so they must be light in both. This said rgba(28,26,23,0.55), and
   `.bf-sand .main-content :is(small, .text-muted, …)` outranked it anyway and
   painted them --bf-muted2: measured rgb(85,80,63) on rgb(28,26,23) = 2.15:1.
   !important because that catch-all wins on specificity (0,3,0 vs 0,2,1).
   Measured after: 6.09:1 light. Found by the auto-fix sweep, not by a client. */
.kost-app .kost-macro small { color:rgba(242,237,228,0.6) !important; }

/* 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(--bf-accent-text, 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(--bf-accent-text, 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 .kost-recipe-av { width:34px; height:34px; border-radius:9px; font-size:0.85rem; flex:0 0 auto; }
.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(--bf-accent-text, 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; }
/* color !important: the fill is --kost-ink (dark in BOTH themes), but
   `.bf-sand .main-content button:not(…)` is 0,7,0 against this rule's 0,3,0 and
   repainted the label to --bf-ink — measured rgb(28,26,23) on rgb(28,26,23),
   a literal 1.00:1. The selected shopping view ("Uge / I dag / Køkken") was
   invisible. Measured after: 17.36:1 light, 16.75:1 dark. Same trap that
   .kost-meal-log is already excepted from in that catch-all. */
.kost-app .shopping-view-tab.active { background:var(--kost-ink); color:#fff !important; 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(--bf-accent-text, 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 {
  /* v605: --bf-sand and --bf-line still carried the SAME self-reference that
     v556 removed from --bf-accent below, and it failed the same way. Both
     computed to EMPTY in the light theme, so `background: var(--bf-sand)` and
     133 `border-color: var(--bf-line)` declarations with no fallback were
     dropped. A client saw it as a see-through slide-in menu (bug-1b51e26a):
     .bf-sand .sidebar's background resolved to transparent and the page read
     straight through the drawer. Light theme ONLY, because .bf-sand.bf-dark
     redefines both with plain values. Measured before: --bf-sand "" and the
     open drawer at rgba(0,0,0,0). The brand injector still wins — it writes
     `:root, .bf-sand { … }` into a <style> later in the cascade
     (see applyBrandTheme, src/main.js). */
  --bf-sand:#EAE6DC; --bf-surface:#FFFFFF; --bf-surface2:#FBFAF6; --bf-surface3:#F2EEE5;
  /* --bf-muted was #6F6857, which measured 4.44:1 on sand: the inactive subtab
     labels and the "I DAG, 28. aug." date, i.e. AA missed by six hundredths.
     #6B6453 is the same grey-brown a shade down: sand 4.72, white 5.88. */
  --bf-dark:#1C1A17; --bf-ink:#1C1A17; --bf-muted:#6B6453; --bf-muted2:#55503F; --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;
  /* Primary-button FILL only (2026-08-17, Gergő's call). White on --bf-accent
     measured 4.16:1 light / 3.33:1 dark — under AA's 4.5, and 16px/850 does not
     qualify as large text. Deliberately a separate token from --bf-accent so the
     brand orange is untouched everywhere it is used as text, border or icon;
     only the one place white sits ON the orange gets darker.
     Measured: #b34e28 = 5.20:1, hover #9E4520 = 6.31:1. */
  --bf-accent-btn:#b34e28; --bf-accent-btn-h:#9E4520;
  /* Brand orange as TEXT (2026-08-28, Gergős call). #C75D34 measured 4.16:1 on
     white, 3.99:1 on the week strip, 3.34:1 on sand and 3.06:1 on the BEAST
     MODE card, all under AA's 4.5 for normal text, and it is the bottom tab bar
     and every subtab. Own token, exactly like --bf-accent-btn: only `color:`
     declarations use it, so the orange is untouched as fill, border and icon.
     #A34320 measured against every surface it actually lands on:
     white 6.21 · #FBFAF6 5.95 · #F8ECE7 5.37 · #F2E9E0 5.18 · sand 4.98 ·
     #E7DBCF 4.56. */
  --bf-accent-text:#A34320;
  --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;
  /* --muted holdt stadig den GAMLE #6F6857, som --bf-muted lige over blev
     mørknet væk fra: målt 11/9 på sand 4,44:1, altså AA missed med seks
     hundrededele. Det ramte alt der læser var(--muted) i stedet for
     var(--bf-muted), fx "Sprog" i menuen og versionslinjen. Samme værdi som
     --bf-muted, så de to aldrig kan glide fra hinanden igen. */
  --ink:#1C1A17; --muted:#6B6453; --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-text, 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-text, 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-text, 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 */
/* Fill uses --bf-accent-btn (AA-safe under white); the fallback keeps a
   white-labelled gym that only overrides --bf-accent looking correct. */
.bf-sand .main-content .button-primary, .bf-sand .main-content .btn-primary { background: var(--bf-accent-btn, var(--bf-accent)); border: 1.5px solid var(--bf-accent-btn, var(--bf-accent)); color: #fff; }
.bf-sand .main-content .button-primary:hover { background: var(--bf-accent-btn-h, var(--bf-accent-d)); }

/* The SAME v584 decision, applied to the controls that also put light text on
   an accent fill but are not .button-primary, so the token never reached them.
   Measured before: 2.85:1 (send arrow, saved-filter chip, Liste/Gitter toggle,
   Upload control, "+" dock), 3.33:1 ("Log"), 4.17:1 (Kost filter chip — that one
   was dark INK on orange, because a bare `color:#fff` loses to the ink catch-all
   at 0,7,0; §1 says this needs !important, not a bigger colour).
   Brand orange is untouched wherever it is text, border or icon. */
.bf-sand .main-content :is(
  .portal-message-composer button,
  .saved-toolbar .filter-row button.chip.active,
  .view-toggle button.active,
  .native-photo-upload-control,
  .phone-floating-action,
  .kost-meal-log,
  .kost-filter-chip.active,
  .habit-check.done,
  .streak-week span.active
) {
  background: var(--bf-accent-btn, var(--bf-accent));
  border-color: var(--bf-accent-btn, var(--bf-accent));
  color: #fff !important;
}
/* …and the text NESTED inside them. Setting the colour on the control alone was
   not enough: `.native-photo-upload-control > span` carries the label, and the
   ink catch-all repaints that child directly, so "Upload" still measured
   3.34:1 light / 4.28:1 dark on the fill its parent had already been fixed to. */
.bf-sand .main-content :is(
  .portal-message-composer button,
  .saved-toolbar .filter-row button.chip.active,
  .view-toggle button.active,
  .native-photo-upload-control,
  .phone-floating-action,
  .kost-meal-log,
  .kost-filter-chip.active,
  .habit-check.done,
  .streak-week span.active
) :is(span, strong, small, em) {
  color: #fff !important;
}
.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; }
.bf-sand .main-content .settings-fields-grid select:has(option[value=""]:checked) { 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-text, 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-text, var(--bf-accent)); }

/* icon rings + donut legend */
.bf-sand .main-content .coach-icon-ring { background: var(--bf-surface3); color: var(--bf-accent-text, 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-text, 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-text, 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;
  position: relative; /* forankrer versionsnummeret i hjørnet */
}
/* Målt 11/9: initialerne stod 3,33:1 mørkt og 4,16:1 lyst på den LYSE
   brandorange. --bf-accent-btn er den mørkere orange der findes til præcis det:
   fyld bag lys tekst. Orangen som tekst og kant er urørt. */
.bf-sand .sidebar .sidebar-user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bf-accent-btn, 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-text, 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-text, 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-text, 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 1.2fr; }
.forms-row-actions { display: inline-flex; align-items: center; gap: 6px; }
.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-text, 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-text, 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-text, 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-text, 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-btn, var(--bf-accent)); border-color: var(--bf-accent-btn, 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-text, 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-text, 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; }
/* !important: et bart color:#fff taber til ink-reglen, så initialerne blev malet
   med temaets ink. Målt 11/9: 3,14:1 lyst (mørk ink på lilla) og 3,57:1 mørkt.
   Farverne selv er justeret i main.js, så hvid tekst klarer 4,5 på alle seks. */
.bf-sand .bf-avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff !important; 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-text, 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-text, 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; }

/* ── Check-in som kort i beskedtråden (Coachway #7) ────────────────────────
   Kortet er en NY beskedtype, og det er præcis dér ink-catch-all'en plejer at
   ramme. Ratings står derfor i en <dl>: en beskrivelsesliste rammes ikke af
   `.bf-sand .main-content :is(small, .text-muted, …)` (v486-lektien), og det er
   samtidig den rigtige semantik. Alle farver er tokens der findes i BEGGE
   temaer, og fyldene er gennemsigtige, så de toner den boble de ligger i. */
.bf-sand .checkin-thread-card,
.checkin-thread-card {
  display: block; width: 100%; max-width: 520px;
  margin: 4px 0; padding: 14px 15px;
  background: var(--bf-surface, #fff);
  border: 1px solid var(--bf-line, #E5DFD2);
  border-left: 3px solid var(--bf-accent, #C75D34);
  border-radius: 14px;
}
.checkin-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.checkin-card-ic { font-size: 0.95rem; }
.checkin-card-head strong { font-family: "Archivo", sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--bf-ink, #1C1A17); }
.checkin-card-head time { margin-left: auto; font-size: 0.68rem; color: var(--bf-muted, #6B6453); }

.checkin-ratings { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 11px; }
.checkin-ratings > div {
  display: flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; border-radius: 8px;
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid var(--bf-line, #E5DFD2);
}
.checkin-ratings dt { margin: 0; font-size: 0.68rem; color: var(--bf-muted2, #55503F); }
.checkin-ratings dd {
  margin: 0; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--bf-ink, #1C1A17);
}
.checkin-ratings dd.is-good { color: var(--bf-attn-good, #4A6A43); }
.checkin-ratings dd.is-low { color: var(--bf-attn-crit, #A3302A); }

.checkin-delta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px; margin-bottom: 11px;
  font-size: 0.74rem; font-weight: 700;
  background: var(--bf-green-bg, rgba(94, 123, 90, 0.14));
  color: var(--bf-attn-good, #4A6A43) !important;
}
.checkin-delta.is-up { background: var(--bf-attn-warn-bg, rgba(127, 85, 15, 0.14)); color: var(--bf-attn-warn, #7F550F) !important; }
.checkin-delta.is-same,
.checkin-delta.is-neutral { background: var(--bf-attn-info-bg, rgba(44, 90, 128, 0.12)); color: var(--bf-attn-info, #2C5A80) !important; }
.checkin-delta.is-none { background: rgba(127, 127, 127, 0.12); color: var(--bf-muted2, #55503F) !important; font-weight: 500; }

.checkin-reflection { margin: 0 0 11px; font-size: 0.85rem; color: var(--bf-muted2, #55503F) !important; }

.checkin-shots { display: flex; gap: 7px; margin-bottom: 11px; }
.checkin-shots img {
  width: 54px; height: 66px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--bf-line, #E5DFD2);
}

.checkin-card-foot {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--bf-line, #E5DFD2); padding-top: 10px;
}
.checkin-card-foot a { font-size: 0.76rem; font-weight: 700; color: var(--bf-accent-text, var(--bf-accent)) !important; text-decoration: none; }
.checkin-status { margin-left: auto; font-size: 0.68rem; color: var(--bf-muted, #6B6453) !important; }
.checkin-status.is-answered { color: var(--bf-attn-good, #4A6A43) !important; font-weight: 700; }

@media (max-width: 560px) {
  .checkin-thread-card { max-width: 100%; }
  .checkin-shots img { width: 48px; height: 58px; }
}

/* ── "Kræver opmærksomhed"-kø (Coachway #6) ────────────────────────────────
   Alvorsgraderne har deres EGNE tokens pr. tema. §1-reglen i NEXT-STEPS: to
   uafhængige tokens må aldrig parres, og en fast hex der virker på sand er
   næsten altid forkert på den mørke flade. Hvert par (tekst + fyld) er målt
   sammen, i begge temaer. Fyldet er gennemsigtigt, så det toner kortet bagved
   uanset hvilket tema der er i scope. */
.bf-sand {
  --bf-attn-crit: #A3302A; --bf-attn-crit-bg: rgba(163, 48, 42, 0.12);
  --bf-attn-warn: #7F550F; --bf-attn-warn-bg: rgba(127, 85, 15, 0.14);
  --bf-attn-info: #2C5A80; --bf-attn-info-bg: rgba(44, 90, 128, 0.12);
  /* Brand-grøn måler 4,12:1 på den grå pille, altså under AA. Egen, mørkere
     tone kun til TEKST; --bf-green er urørt alle de steder den er fyld. */
  --bf-attn-good: #4A6A43;
}
.bf-sand.bf-dark {
  --bf-attn-crit: #F0908A; --bf-attn-crit-bg: rgba(240, 144, 138, 0.16);
  --bf-attn-warn: #E8B85F; --bf-attn-warn-bg: rgba(232, 184, 95, 0.16);
  --bf-attn-info: #93BBDC; --bf-attn-info-bg: rgba(147, 187, 220, 0.16);
  --bf-attn-good: #8FB889;
}

.bf-sand .bf-attention-card { margin-bottom: 18px; }
.bf-sand .bf-attention-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; margin-left: 8px;
  border-radius: 999px;
  /* Målt: hvid på den rene brand-orange giver 4,16:1 lyst og 3,33:1 mørkt, altså
     under AA. --bf-accent-btn er det mørkere knap-fyld fra v584, som netop blev
     lavet til hvid tekst ovenpå. Brandfarven selv er urørt. */
  background: var(--bf-accent-btn, var(--bf-accent));
  /* Hvid taber til ink-catch-all'en uden !important (§1, målt 2,47:1). */
  color: #fff !important;
  font-size: 0.7rem; font-weight: 800; vertical-align: 1px;
}
.bf-sand .bf-attention-list { display: flex; flex-direction: column; gap: 8px; }
.bf-sand .bf-attention-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 13px;
  /* Grå-på-grå fylder toner kortet bagved i BEGGE temaer og kræver ikke at et
     flade-token er i scope. Samme mønster som v564. */
  background: rgba(127, 127, 127, 0.10);
  border: 1px solid var(--bf-line);
  cursor: pointer;
}
.bf-sand .bf-attention-row:hover { background: rgba(127, 127, 127, 0.16); }
.bf-sand .bf-attention-main { flex: 1; min-width: 0; }
.bf-sand .bf-attention-main strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--bf-ink); }
.bf-sand .bf-attention-main span { font-size: 0.74rem; color: var(--bf-muted2, #55503F); }
.bf-sand .bf-attention-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px; border-radius: 8px;
  font-size: 0.7rem; font-weight: 700; white-space: nowrap;
  background: var(--bf-attn-info-bg); color: var(--bf-attn-info) !important;
}
.bf-sand .bf-attention-tag i { font-style: normal; font-size: 0.8rem; }
.bf-sand .bf-attention-row.is-payment_failed .bf-attention-tag,
.bf-sand .bf-attention-row.is-checkin_overdue .bf-attention-tag {
  background: var(--bf-attn-crit-bg); color: var(--bf-attn-crit) !important;
}
.bf-sand .bf-attention-row.is-checkin_due .bf-attention-tag,
.bf-sand .bf-attention-row.is-no_contact .bf-attention-tag {
  background: var(--bf-attn-warn-bg); color: var(--bf-attn-warn) !important;
}
.bf-sand .bf-attention-row.is-unread_messages .bf-attention-tag {
  background: rgba(199, 93, 52, 0.14); color: var(--bf-accent-text, var(--bf-accent)) !important;
}
.bf-sand .bf-attention-go { flex: none; font-weight: 800; color: var(--bf-accent-text, var(--bf-accent)); }
/* Gergø 28/9: Kræver dig, etape 4. Avanceret følger Enkel: rækker i pause
   (is-paused) og dem hos klienterne (is-waiting, venter på første opstart)
   står nederst, dæmpet med farve, aldrig med opacity på tekst. Initialerne
   får den dæmpede flade (!important, fordi fyldet ellers står inline). */
.bf-sand .bf-attention-row.is-dim { background: transparent; border-style: dashed; }
.bf-sand .bf-attention-row.is-dim:hover { background: rgba(127, 127, 127, 0.08); }
.bf-sand .bf-attention-row.is-dim .bf-avatar { background: var(--bf-surface2, #F2EEE5) !important; color: var(--bf-muted2, #55503F) !important; border: 1px solid var(--bf-line); }
.bf-sand .bf-attention-row.is-dim .bf-attention-main strong { color: var(--bf-muted2, #55503F); font-weight: 600; }
.bf-sand .bf-attention-row.is-dim .bf-attention-main span { color: var(--bf-muted, #6B6453); }
.bf-sand .bf-attention-row.is-dim .bf-attention-tag, .bf-sand .bf-attention-row.is-waiting_startup .bf-attention-tag { background: var(--bf-surface2, #F2EEE5); color: var(--bf-muted2, #55503F) !important; border: 1px solid var(--bf-line); }
.bf-sand .bf-attention-row.is-dim .bf-attention-go { color: var(--bf-muted, #6B6453); }
/* Skeptikerne 28/9 (Kræver dig, fund 10): pausen kan fortrydes og få en dato på
   PC'en også. Rækken er en blok med linket øverst og de to knapper under. */
.bf-sand .bf-attention-row.is-paused { flex-wrap: wrap; cursor: default; }
.bf-sand .bf-attention-row.is-paused .bf-attention-link { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; min-width: 0; color: inherit; text-decoration: none; cursor: pointer; }
.bf-sand .bf-attention-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.bf-sand .bf-attention-btn { min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--bf-muted, #6B6453); background: var(--bf-surface, #fff); color: var(--bf-ink) !important; font: 700 0.8rem/1 "Hanken Grotesk", sans-serif; cursor: pointer; }
.bf-sand .bf-attention-btn:hover { background: rgba(127, 127, 127, 0.12); }

@media (max-width: 560px) {
  /* På en telefon får grunden sin egen linje frem for at klemme navnet. */
  .bf-sand .bf-attention-row { flex-wrap: wrap; row-gap: 8px; }
  .bf-sand .bf-attention-main { flex: 1 1 100%; order: 2; }
  .bf-sand .bf-attention-tag { order: 3; }
  .bf-sand .bf-attention-go { order: 4; margin-left: auto; }
}

@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; }
/* Målt 11/9: 2,85:1 mørkt og 4,16:1 lyst ("Tilbage til I dag", "+ Tilføj
   klient"). Den bar stadig den lyse --bf-accent under hvid tekst, altså præcis
   den fejl --bf-accent-btn blev lavet for. !important fordi et bart color:#fff
   taber til ink-reglen (se sand-fælden længere oppe). */
.bf-sand .bf-btn-primary { background: var(--bf-accent-btn, var(--bf-accent)); color: #fff !important; 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 1fr 0.8fr 116px; 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 116px; align-items: center; border-bottom: 1px solid #EFEAE0; }
.bf-sand .bf-ctable-row:last-child { border-bottom: none; }
/* Skeptikerens D4 (23/9): arkiverede profiler står skrivebeskyttet under Arkiv. */
.bf-sand .bf-ctable-row.is-archived .bf-ctable-link { cursor: default; }
.bf-sand .bf-ctable-link { display: grid; grid-template-columns: 2fr 1.1fr 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); }
/* K3b: "Venter på første opstart" / "Starter, når klienten er klar". Teksten er
   signalet, aldrig kun farven: dæmpet tekst på den eksisterende flade. */
.bf-wait-pill { display: inline-block; margin-left: 8px; font-size: 0.69rem; font-weight: 700; line-height: 1.3; padding: 2px 8px; border: 1px solid var(--bf-line); border-radius: 7px; white-space: nowrap; color: var(--bf-muted, #7C7568); vertical-align: middle; }
.bf-ctable-prog .bf-wait-pill { display: block; width: fit-content; margin: 4px 0 0; }
.bf-wait-line { font-size: 0.84rem; color: var(--bf-muted, #7C7568); margin: 0 0 12px; }
/* K3b fund 1: et ventende pas i programplanen er "Venter", ikke "Misset".
   Samme dæmpede form som pillen: tynd kant, ingen fyldfarve, teksten er signalet. */
.program-schedule-status-waiting { background: transparent; color: var(--bf-muted2, rgba(245, 241, 235, 0.78)); border: 1px solid var(--bf-line, rgba(245, 241, 235, 0.25)); }
.program-schedule-totals-waiting, .program-schedule-totals-waiting strong { color: var(--bf-muted2, rgba(245, 241, 235, 0.78)); }
.bf-sand .bf-row-useas { margin: 0; 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-text, var(--bf-accent)); }
.bf-sand .bf-ctable-empty { padding: 28px 20px; text-align: center; color: var(--bf-muted, #7C7568); font-size: 0.84rem; }

/* ── Hurtig-preview på Klienter-listen (Coachway #11) ──────────────────────
   Rækken er et 2-kolonne-grid (link + værktøjer). Mini-kortet skal ligge UNDER
   begge, altså spænde hele rækken, ellers klemmer det sig ned i værktøjs-
   kolonnen på 116px. */
.bf-sand .bf-ctable-activity { font-size: 0.81rem; color: var(--bf-muted, #7C7568); }
.bf-sand .bf-ctable-activity.is-quiet { color: var(--bf-attn-warn, #7F550F); font-weight: 700; }
/* Gergø 28/9: Kræver dig, etape 4. Klientlisten bærer rækkens sætning under
   navnet (is-due i inkfarve; is-paused og is-waiting dæmpet med farve). Den
   ombrydes altid, også på telefonen, hvor listens andre small-linjer klippes. */
.bf-sand .bf-ctable-cli .bf-ctable-attn { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.3; font-weight: 600; color: var(--bf-ink); white-space: normal; overflow: visible; text-overflow: clip; }
.bf-sand .bf-ctable-cli .bf-ctable-attn.is-paused, .bf-sand .bf-ctable-cli .bf-ctable-attn.is-waiting { color: var(--bf-muted, #6B6453); font-weight: 500; }

.bf-sand .bf-row-tools { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding-right: 14px; }
.bf-sand .bf-row-peek {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: var(--bf-surface, #fff); border: 1px solid var(--bf-line);
  color: var(--bf-muted2, #55503F); font-size: 0.9rem; line-height: 1; cursor: pointer;
}
.bf-sand .bf-row-peek:hover,
.bf-sand .bf-ctable-row.is-peeking .bf-row-peek {
  border-color: var(--bf-accent);
  color: var(--bf-accent-text, var(--bf-accent));
}

.bf-sand .bf-client-peek {
  display: none;
  grid-column: 1 / -1;
  margin: 0 14px 14px 20px; padding: 12px 14px;
  border: 1px solid var(--bf-line); border-radius: 12px;
  background: rgba(127, 127, 127, 0.09);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px;
}
/* Åbnet med knappen: virker på mus, touch OG tastatur. */
.bf-sand .bf-ctable-row.is-peeking .bf-client-peek { display: grid; }
/* Kun på rigtige pegeredskaber. På en telefon findes :hover ikke som en
   tilstand man forlader igen, og et langt tryk ville kollidere med at åbne
   klienten — derfor er knappen den eneste vej der. */
@media (hover: hover) and (pointer: fine) {
  .bf-sand .bf-ctable-row:hover .bf-client-peek { display: grid; }
}
.bf-sand .bf-client-peek > div { min-width: 0; }
.bf-sand .bf-client-peek dt {
  margin: 0 0 2px; font-family: "Archivo", sans-serif; font-size: 0.62rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bf-muted, #6B6453);
}
/* <dl> undslipper ink-catch-all'en, så tonerne her overlever i mørkt tema. */
.bf-sand .bf-client-peek dd { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--bf-ink); }
.bf-sand .bf-client-peek dd.is-ok { color: var(--bf-attn-good, #4A6A43); }
.bf-sand .bf-client-peek dd.is-warn { color: var(--bf-attn-warn, #7F550F); }
.bf-sand .bf-client-peek dd.is-muted { color: var(--bf-muted2, #55503F); font-weight: 500; }

@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; }
  .bf-sand .bf-client-peek { margin-left: 14px; grid-template-columns: 1fr 1fr; }
}

/* ===== 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; }
/* Skeptikerne 29/9: v739 (fund 6). En lang e-mail i klientfilens hoved kunne ikke
   brydes, så hovedet og fanerne under det blev 415 px brede på telefonen, og
   Betalingers beløb og status blev klippet i højre side (også i v738). */
.bf-sand .bf-cd-id-meta { min-width: 0; }
.bf-sand .bf-cd-id-meta p { overflow-wrap: anywhere; }
.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 :is(button, a) { background: none; text-decoration: none; border: none; padding: 11px 15px; font-family: "Hanken Grotesk", sans-serif; font-size: 0.84rem; font-weight: 600; color: var(--bf-muted) !important; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; }
.bf-sand .bf-cd-tabs :is(button, a).active { color: var(--bf-ink) !important; font-weight: 700; border-bottom-color: var(--bf-accent); }
.bf-sand .bf-cd-tabs :is(button, a):hover { color: var(--bf-ink); }
/* Underafsnit paa en fane (Programmer · Vaner), saa det nederste ikke er skjult. */
.bf-sand .bf-cd-parts { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 16px; }
.bf-sand .bf-cd-parts a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface, #fff); color: var(--bf-ink) !important; font-size: 0.82rem; font-weight: 700; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.bf-cd-part { scroll-margin-top: 72px; }

/* 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-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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-text, var(--bf-accent)); }
.bf-sand .main-content .portal-thumb span { color: var(--bf-accent-text, 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-text, 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); }

/* ===== Web Push card =====
   Deliberately UNSCOPED and token-free. It renders in the client portal AND in
   the coach shell, and pairing .bf-sand-only tokens with the ink catch-all is
   the exact pattern that produced four white-on-white reports. So: translucent
   fills, which tint whatever card is behind them in either theme, and
   color:inherit !important, so the text can never separate from its own pill. */
.bf-push-card .bf-push-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bf-push-card .bf-set-note { font-size: 0.78rem; line-height: 1.45; margin: 10px 0 0; color: inherit; opacity: 0.82; }
.bf-push-state {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(127,127,127,0.18); color: inherit !important;
}
.bf-push-state.is-on { background: rgba(46,160,67,0.26); color: inherit !important; }
.bf-push-msg {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  font-size: 0.8rem; font-weight: 600; line-height: 1.4;
  background: rgba(127,127,127,0.18); color: inherit !important;
}
.bf-push-msg.is-ok { background: rgba(46,160,67,0.2); }
.bf-push-msg.is-bad { background: rgba(203,68,52,0.2); }

/* ===== 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-text, 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-text, 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-text, 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(--bf-accent-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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(--bf-accent-text, 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(--bf-accent-text, 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(--bf-accent-text, 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(--bf-accent-text, 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%); }
/* .kost-macro small used to need a dark-theme override, because the base rule
   set a DARK colour that only worked once the hero went black. It is light in
   both themes now (see .kost-app .kost-macro small), so this would be dead —
   kept only to state the dark hero's own number: rgba(242,237,228,0.6) on
   #0D0B09 measures 6.39:1. */
.app-shell.bf-dark .kost-app .kost-macro small { color: rgba(242, 237, 228, 0.6) !important; }
.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 (a tester: "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 a tester photographed as fill-less. */
.wizard-stepper .button-primary { background: var(--bf-accent-btn, var(--bf-accent, #b34e28)); 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-text, 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-text, 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-text, 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;
  /* Dark theme runs a LIGHTER accent (#D8703F), so white on it was the worse of
     the two at 3.33:1. Same treatment, own value. Measured: #B8501F = 4.99:1,
     hover #A8451F = 5.94:1. */
  --bf-accent-btn:#B8501F; --bf-accent-btn-h:#A8451F;
  /* Dark theme goes the other way: LIGHTER, not darker. #D8703F sat at exactly
     4.50 on #2B2620, i.e. AA by a hair with no margin. #E8905F measures
     #141210 7.64 · #1C1A17 7.10 · #26221D 6.46 · #2B2620 6.13. */
  --bf-accent-text:#E8905F;
  --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(--bf-accent-text, 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-text, 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-text, 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-text, 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.
   `:not(.bf-dark)` is load-bearing — .bf-sand is ALSO on the shell in dark
   theme, so without it these light-background colours landed on the near-black
   panel and measured 2.14:1 (Check-ins), 2.66:1 (Træning / Vaner) and 2.94:1
   (Aftaler). Exactly the §1 failure: one scope, two backgrounds. */
.bf-sand:not(.bf-dark) .main-content .cal-layer-chip.cal-training,
.bf-sand:not(.bf-dark) .main-content .cal-item.cal-training { color: #12658a !important; }
.bf-sand:not(.bf-dark) .main-content .cal-layer-chip.cal-appointment,
.bf-sand:not(.bf-dark) .main-content .cal-item.cal-appointment { color: #a8481b !important; }
.bf-sand:not(.bf-dark) .main-content .cal-layer-chip.cal-checkin,
.bf-sand:not(.bf-dark) .main-content .cal-item.cal-checkin { color: #6b34a0 !important; }
.bf-sand:not(.bf-dark) .main-content .cal-layer-chip.cal-habit,
.bf-sand:not(.bf-dark) .main-content .cal-item.cal-habit { color: #2c6b36 !important; }
.bf-sand:not(.bf-dark) .main-content .cal-layer-chip.cal-meal,
.bf-sand:not(.bf-dark) .main-content .cal-item.cal-meal { color: #8a6a1e !important; }
.bf-sand:not(.bf-dark) .main-content .cal-layer-chip.cal-followup,
.bf-sand:not(.bf-dark) .main-content .cal-item.cal-followup { color: #a82e48 !important; }

/* Dark theme keeps the original bright hues, but the ink catch-all outranks the
   base .cal-layer-chip rules (0,1,0), so they need the same !important weight. */
.bf-sand.bf-dark .main-content .cal-layer-chip.cal-training,
.bf-sand.bf-dark .main-content .cal-item.cal-training { color: #6fd3ff !important; }
.bf-sand.bf-dark .main-content .cal-layer-chip.cal-appointment,
.bf-sand.bf-dark .main-content .cal-item.cal-appointment { color: #ff9a68 !important; }
.bf-sand.bf-dark .main-content .cal-layer-chip.cal-checkin,
.bf-sand.bf-dark .main-content .cal-item.cal-checkin { color: #d6a0ff !important; }
.bf-sand.bf-dark .main-content .cal-layer-chip.cal-habit,
.bf-sand.bf-dark .main-content .cal-item.cal-habit { color: #7ee787 !important; }
.bf-sand.bf-dark .main-content .cal-layer-chip.cal-meal,
.bf-sand.bf-dark .main-content .cal-item.cal-meal { color: #ffd166 !important; }
.bf-sand.bf-dark .main-content .cal-layer-chip.cal-followup,
.bf-sand.bf-dark .main-content .cal-item.cal-followup { color: #ff8fa6 !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); }
/* Skeptikerne 28/9 (S1): boksen siger selv, hvorfor tallet ikke blev gemt (tomt
   felt, ugyldigt tal eller en vægt uden for 20 til 300 kg). Flashen lå under
   boksens baggrund. Teksten er feltets blæk på feltets flade, kanten er rød. */
.habit-prompt-card .habit-prompt-error { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bf-danger, #B83A2E); border-left-width: 5px; background: var(--bf-surface2, #fff); color: var(--bf-ink, #1C1A17) !important; font-size: 0.95rem; font-weight: 700; line-height: 1.4; }
.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); }
/* padding-block, ikke padding: de gamle 4px i siderne vejede 0,1,0 og slog
   kort-standardens vægtløse 18px, så opgaverækkerne stod 5px fra kortkanten
   mens .todo-empty lige under stod på 18px. Med padding-block leverer
   standarden de 18px, og rækkens border-top går fra kortkant til kortkant,
   præcis som stregen i .portal-card-heading ovenover. Samme rettelse som
   .habit-template-picker og .nutrition-admin-toolbar. Søg på KORT-LUFT. */
.todo-row { display: flex; align-items: center; gap: 10px; padding-block: 12px; 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; }
/* 0 i siderne, ikke 4px: de 4px lagde sig oven i kortets 18px og stillede
   teksten 4px længere inde end sine søskende. */
.todo-empty { margin: 6px 0 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-text, 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 */
/* padding-block, ikke padding: de vandrette 0 ville vinde over kort-standarden
   og trække skabelonerne tilbage til kortkanten. */
.habit-template-picker { display: flex; flex-direction: column; gap: 6px; padding-block: 10px 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-text, 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-text, 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. */
/* Målt 16/9: footeren er 102 px høj (Enkel 114 px), og pillen på 96 px dækkede
   6 px (Enkel 18 px) af Næste-linjen ved alle bredder fra 721 px. */
@media (min-width: 701px) {
  body:has(.workout-player) #bf-workout-timer { bottom: 112px; }
  body:has(.workout-player.is-senior) #bf-workout-timer { bottom: 126px; }
}
/* Gergø 27/9: bugrunden (B3), se urets tabel. Liggende telefon: med bund 112 px
   stod uret midt på den lave skærm over pausens ur (målt 844x390: uret 229..278
   og foden 287..390 over pausens ur; 914x411: uret 250..299 over uret 268..324).
   Uret står nu i tilbage-bjælkens linje, og skiven er lavere, så pausens ur ses,
   når pausen starter. Resten af pausen rulles frem som før. Enkels afspiller
   (.is-senior) er undtaget, som i T2 og T6. */
@media (min-width: 701px) and (max-height: 500px) {
  body:has(.workout-player:not(.is-senior)) #bf-workout-timer { top: 4px; bottom: auto; max-width: calc(100% - 240px); }
  .workout-player:not(.is-senior) .player-rest-dial { width: min(62vw, 240px, calc(100vh - 250px)); }
  .workout-player:not(.is-senior) .player-rest-clock { font-size: clamp(28px, 9vh, 56px); }
  .workout-player:not(.is-senior) .player-rest { gap: 8px; padding-top: 6px; }
}

/* 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 ~11959 makes .sidebar-nav a 2-column
   grid (to kolonner gælder telefonskuffen mellem 641 og 720 px, tablettens
   skuffe er én kolonne, se T1 i Tablet (v714) nederst i filen), 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-text, 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-text, 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-text, 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.
   Tablet på højkant (721 til 1023 px) har sin egen kopi af bjælke og skuffe i
   T1 under Tablet (v714) nederst i filen: ret T1 og ≤720-blokken sammen. */
.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);
    /* v571: was rgba(…,0.94) + blur — text scrolling underneath showed through
       as a half-transparent "ghost" line (reported on Fremgang). The bar is
       chrome, not a glass overlay: make it opaque and theme-aware so nothing
       bleeds through it. */
    background: var(--bf-surface, #fff);
    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-text, 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-text, 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(--bf-accent-text, 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. */
  /* No negative side margins: the bar is a direct child of .app-shell, which has
     no horizontal padding to bleed back into, so `0 -18px` pushed it 18px off
     BOTH edges (measured 411px wide in a 375px viewport) on every drill-in
     screen — WOD, workouts, leaderboard and /app/saved. */
  .bf-appbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center;
    margin: 0 0 6px; padding: 6px 10px calc(6px + env(safe-area-inset-top, 0px));
    background: var(--bf-surface, #fff);
    /* The bar set a surface but no ink, so it inherited the dark theme's
       near-white text onto its own white background — measured 1.13:1. Nothing
       renders there today (both children set their own colour), which is
       exactly why it would have shipped the day someone added a title. */
    color: var(--bf-ink, #1C1A17);
    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-text, 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-attention-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;
  }
  /* v571: `display:flex` laid the card's <strong> and <small> side by side, so
     on a 390px phone the third column ("1 workout · Barbell, Rower, Box") ran
     past the card edge and was cut mid-word ("Barb", "Kettle", "1 worl").
     Keep the chevron, but let the text stack: a 2-column grid with the text in
     column 1 (min-width 0 so it can shrink) and the chevron in column 2. */
  .client-sand :is(.exercise-library-card, .resource-card) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
  }
  .client-sand :is(.exercise-library-card, .resource-card) > * {
    grid-column: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .client-sand :is(.exercise-library-card, .resource-card)::after {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  /* .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; }

  /* "Ugentlig" pushed the total column off the right edge on a 390px phone;
     the "Total" line underneath already says it. */
  .habit-week-head-long { display: none; }
}

.habit-week-head-long {
  font-style: normal;
}

/* ── Habit ticks were invisible in the light theme (v572) ────────────────
   .habit-check's neutral states were drawn with white-alpha borders and
   fills — built for the dark theme. On the sand theme's white card that is
   a measured 1.00:1 contrast: forty 40x40px invisible tap targets per week.
   Dark-alpha equivalents, same weights. */
.bf-sand .habit-check.planned:not(.done) {
  border-color: rgba(20, 16, 12, 0.5);
  background: rgba(20, 16, 12, 0.05);
}

.bf-sand .habit-check.missed {
  border-color: rgba(20, 16, 12, 0.5);
}

.bf-sand .habit-check.extra {
  border-color: rgba(20, 16, 12, 0.5);
  background: rgba(20, 16, 12, 0.03);
}

.bf-sand .habit-check-undo {
  border-color: rgba(20, 16, 12, 0.5);
}

/* The message field was #FBFAF6 on a #FFF card — 1.04:1, no perceivable edge,
   and its placeholder sat at ~2.2:1. Both measured on the Beskeder screen. */
.bf-sand .main-content .portal-message-composer {
  border-top-color: rgba(20, 16, 12, 0.12);
}

/* En klients fejlrapport 11/9 (bug-4dc37168): "i skrive feltet er teksten i lys grå,
   med hvid baggrund og meget svær at læse". Pillen var hardkodet #fff med
   color:inherit, skrevet til det LYSE sand-tema. Men .bf-sand bliver på skallen i
   mørkt tema (.bf-sand.bf-dark), hvor --bf-ink er cremefarvet: målt #F2EDE4 på
   #FFFFFF = 1,1:1. Pladsholderen overlevede kun, fordi DEN havde en hardkodet mørk
   farve. Nu følger både pille og tekst temaet, som den generelle sand-inputregel
   gør: lyst #FBFAF6 med mørk tekst, mørkt #26221D med lys tekst. */
.bf-sand .main-content .portal-message-composer input {
  padding: 10px 12px;
  border: 1px solid var(--bf-line, rgba(20, 16, 12, 0.34));
  border-radius: 999px;
  color: var(--bf-ink, #14100c);
  background: var(--bf-surface2, #fff);
}

.bf-sand .main-content .portal-message-composer input::placeholder {
  color: var(--bf-ink, #14100c);
  opacity: 0.62;
}

/* ── .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. */
  /* 18px i siderne og 16px i bunden, ikke 14px hele vejen: skrivefeltet sad
     præcis sådan før kort-standarden blev vendt, fordi den gamle blanket-regel
     gav alle formularer i et kort de tal. .chat-thread-card er nu meldt fra
     standarden, fordi beskedboblerne skal kunne rulle ud til kanten, og så er
     skrivefeltet selv om at sætte sin luft. Chatten er den mest brugte flade,
     så teksten skal blive hvor den har stået. */
  .client-sand .portal-message-composer { flex-direction: row; align-items: center; gap: 8px; padding: 12px 18px 16px; }
  .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-attention-row, .bf-attention-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; }
  /* Kortene på klientkortet (og de andre coach-sider med .coach-section-box)
     stod 18px inde i et indhold, der selv står 12px fra skærmkanten: 30px luft
     på hver side, hvor hovedet, fanerne og dashboardets kort står på 12px.
     Gergø 16/9 kl. 07.13: "that card should be as wide as the telefon
     screen". Målt lokalt på 412px: kortet gik fra 352px til 388px bredt. */
  .bf-sand .coach-section-box, .bf-sand .coach-two-col { margin-left: 0; margin-right: 0; }
  /* Gergø 23/9: husets rester (8). En aktiv vane på klientkortets Vaner-fane har
     nu tre knapper (Redigér, Afslut og Slet). Målt ved 390 px fik teksten ved
     siden af dem kun 102 px, og "Hver dag · Denne uge: 1 af 7" stod på fire
     linjer. På telefonen står de tre knapper derfor på deres egen linje under
     teksten, til højre. En afsluttet vane har to knapper og står som før. */
  .coach-list-row.compact:has(> :nth-child(2):last-child):has(> .coach-habit-row-actions > :nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .coach-list-row.compact > .coach-habit-row-actions:has(> :nth-child(3)) { justify-self: end; }
  /* Madplan-editoren på telefonen (v712): knapperne i værktøjslinjen deler
     bredden, Byt og Fjern er store nok til en tommelfinger, og ✕ hedder
     Fjern, så det ikke ligner et luk-kryds. */
  .bf-sand .mp-toolbar-right .button { flex: 1 1 auto; }
  .bf-sand .mp-mini { min-height: 40px; padding: 8px 14px; font-size: 0.84rem; }
  .bf-sand .mp-portion button { width: 36px; height: 36px; }
  .bf-sand .mp-meal-actions { margin-left: auto; }
  .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-text, 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-text, 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-text, 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-text, 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-text, var(--bf-accent, #C75D34));
}
.bf-sand .main-content .test-flow-report { color: var(--bf-accent-text, 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; }
/* Ingen padding-left: 0 her. Den stod for at dræbe browserens punkt-indryk,
   men list-style: none fjerner allerede punkterne, og kort-standarden
   (KORT-LUFT nederst i filen) leverer de 18px. Med padding-left: 0 vandt listen
   over standarden og blev liggende på kortkanten. */
.whats-new-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 4px;
  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-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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-text, 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); }
/* Rækker der kan klares på stedet bærer en knap i stedet for en pil. */
.phone-todo-row.has-action { grid-template-columns: 26px minmax(0, 1fr) auto; }

/* Vaner med ét tryk direkte på "I dag" (Coachway #3). */
.bf-sand .phone-habit-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bf-sand .phone-habit-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  min-height: 48px; padding: 8px 10px;
  border-radius: 12px;
  background: var(--bf-surface2, #F3EFE6);
}
.bf-sand .phone-habit-text { min-width: 0; display: grid; gap: 1px; }
.bf-sand .main-content .phone-habit-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-sand .main-content .phone-habit-text small { font-size: 0.74rem; color: var(--bf-muted, #6F6857); }
.bf-sand .main-content .phone-habit-tick {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--bf-line, #E5DFD2);
  background: var(--bf-surface, #fff);
  color: var(--bf-ink) !important;
  font-size: 1.25rem; font-weight: 800; line-height: 1;
  display: grid; place-items: center;
}
/* Hvid på accent-fyld taber til ink-catch-all'en uden !important (§1). */
.bf-sand .main-content .phone-habit-tick.is-done {
  border-color: transparent;
  background: var(--bf-accent-btn, var(--bf-accent));
  color: #fff !important;
}
.bf-sand .phone-habit-row.is-done .phone-habit-text strong { text-decoration: line-through; }
.phone-mini-grid.is-single { grid-template-columns: minmax(0, 1fr); }

/* Struktureret mål (SMART) på klientens Overblik-kort: linjer, ikke tekstmasse. */
.bf-sand .bf-goal-smart { margin-top: 12px; display: grid; gap: 7px; border-top: 1px solid var(--bf-line); padding-top: 12px; }
.bf-sand .bf-goal-smart-line { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--bf-muted); }
.bf-sand .bf-goal-smart-line strong { color: var(--bf-ink, inherit); font-weight: 800; margin-right: 2px; }

/* Send check-in-panelet på /coach/forms (v632): tre felter på én række, én kolonne på telefon. */
.checkin-send-card { margin-bottom: 14px; }
.checkin-send-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  margin: 10px 0 14px;
}
.checkin-send-fields label { display: grid; gap: 6px; font-weight: 600; font-size: 0.86rem; }
.checkin-send-fields :is(select, input) { min-width: 0; width: 100%; }
@media (max-width: 720px) {
  .checkin-send-fields { grid-template-columns: 1fr; }
}

/* Gennemgå-panelet på /coach/forms (v633): spørgsmål og svar som en <dl>, så
   ink catch-all'en ikke overmaler svarene. */
.checkin-review-card { margin-bottom: 14px; }
.checkin-review-card .portal-card-heading small { display: block; font-weight: 500; opacity: 0.8; }
.checkin-review-list { display: grid; gap: 0; margin: 10px 0 6px; }
.checkin-review-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25));
}
.checkin-review-list > div:last-child { border-bottom: 0; }
.checkin-review-list dt { font-weight: 600; font-size: 0.9rem; }
.checkin-review-list dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.checkin-review-hint { margin: 6px 0 0; font-size: 0.86rem; }
@media (max-width: 720px) {
  .checkin-review-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KORT-LUFT: standarden er luft, undtagelsen skal skrives ned (11/9 2026)
   ══════════════════════════════════════════════════════════════════════════
   Gergø bad om at den slags indstillinger blev sat globalt på siderne, med
   mindre han udtrykkeligt beder om noget andet. Før i dag var det omvendt:
   .portal-card havde ingen luft, og hver variant satte sin egen. Et nyt kort
   startede derfor på nul, og nogen skulle huske luften. Det har allerede
   kostet flere fejl, senest .startup-card.

   Bygger du et nyt kort, skal du ikke gøre noget. Kortet giver selv sine børn
   18px til siderne og 16px i top og bund. De 18px er samme tal som .phone-card,
   altså samme kort på telefonens forside.

   Vil du have kant til kant, siger du det eksplicit i listen nedenfor, med en
   begrundelse. Det er hele pointen: undtagelsen skal stå skrevet, ikke opstå
   fordi nogen glemte at sætte padding.

   Kommentarerne her peger på KLASSENAVNE, ikke på linjenumre. Numrene forældes
   første gang nogen skriver fem linjer længere oppe i filen, og så sender de
   den næste hen på den forkerte regel. Søg på klassen i stedet.

   HVORFOR LUFTEN LIGGER PÅ BØRNENE OG IKKE PÅ .portal-card SELV
   .portal-card-heading har en streg der skal gå helt ud til kortkanten, og den
   bruges 117 steder i main.js. .portal-card-footer har den samme streg 11
   steder. Padding på selve kortet ville trække alle 128 streger 18px ind på én
   gang, og det er en synlig ændring på næsten hvert kort.

   HVORFOR :where()
   Den vejer nul i specificitet. Et barn der SELV siger noget om vandret
   padding vinder derfor altid, og vi kan ikke lægge 18 oven i 18. De mange
   kort hvis indhold allerede laver sin egen luft (overskrifter, tabeller,
   lister, chat-bobler, grafer) står uberørt, uden at være nævnt her. Det er
   strukturel sikkerhed i stedet for en liste nogen skal huske at holde ved lige.

   TO TING VINDER IKKE AF SIG SELV, og de står derfor i listen nedenfor:
   1) et barn der laver luften med MARGIN i stedet for padding. Margin og
      padding overskriver ikke hinanden, de lægger sig oven i hinanden.
   2) et kort der selv har padding. Sætter du padding på et nyt kort, skal du
      derfor også give det --card-inset: 0 og skrive hvorfor. Gælder padding'en
      kun på telefon, hører opt-outen hjemme i samme media query, se
      .startup-wizard-form.

   VAR(--CARD-INSET) MÅ KUN BRUGES AF REGLER DER SKAL FØLGE KORTETS VALG
   Variablen arves, og den står på 0 både i print og inde i hvert kort der er
   meldt fra. Skriver du padding: 12px var(--card-inset, 18px) i en regel der
   ALTID skal have luft, falder den derfor stille til nul de to steder, og
   fallback-tallet redder dig ikke: variablen ER sat, den er bare sat til 0.
   Skriv 18px direkte, med mindre du mener "følg kortets valg".

   Og husk: standarden flytter TEKST. Et barn der selv maler en baggrund fylder
   stadig hele padding-boksen og ser uændret kant til kant ud. Det er både en
   sikkerhed, fordi listerækker med markering ikke bliver afkortet, og en fælde,
   fordi nogen vil tro at reglen ikke virkede.
   ══════════════════════════════════════════════════════════════════════════ */

.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) {
  --card-inset: 18px;
  --card-inset-block: 16px;
}

/* ---- Undtagelse 0: et kort inde i et kort --------------------------------
   Et kort inde i et kort er selv et kort. Det har sin egen overskriftsstreg,
   og den skal gå ud til SIN kant, ikke skubbes ind af forælderen. Derfor står
   kort-klasserne i :not()-listen nedenfor: det indre kort får nul af
   forælderen og giver selv sine børn de 18px.
   Målt 11/9 uden listen, på klientfilens Træning-fane, hvor
   .coach-habit-builder ligger inde i .client-detail-tab-body: stregen under
   VANEOPSÆTNING stod 19px inde i begge ender i stedet for 1px, og hele
   vane-builderens indhold stod 36px inde, altså 18px egen margin plus 18px fra
   forælderen.
   Listen står inde i :where(), så standarden vejer stadig nul. Og den er en
   fravælgelse, ikke en overskrivning: et indre kort med sin EGEN padding
   beholder den, fordi vi ikke sætter noget vi bagefter skal slå ihjel. */
:where(.main-content .portal-card,
       .main-content .coach-section-box,
       .main-content .coach-schedule-card,
       .main-content .client-calendar-panel)
  > :where(:not(.portal-card, .coach-section-box, .coach-schedule-card, .panel, .client-calendar-panel)) {
  padding-left: var(--card-inset);
  padding-right: var(--card-inset);
}
:where(.main-content .portal-card,
       .main-content .coach-section-box,
       .main-content .coach-schedule-card,
       .main-content .client-calendar-panel)
  > :where(:first-child):where(:not(.portal-card, .coach-section-box, .coach-schedule-card, .panel, .client-calendar-panel)) {
  padding-top: var(--card-inset-block);
}
:where(.main-content .portal-card,
       .main-content .coach-section-box,
       .main-content .coach-schedule-card,
       .main-content .client-calendar-panel)
  > :where(:last-child):where(:not(.portal-card, .coach-section-box, .coach-schedule-card, .panel, .client-calendar-panel)) {
  padding-bottom: var(--card-inset-block);
}

/* Knapper har deres egen padding som DEKORATION, ikke som kant-luft, og den
   padding vinder over standarden ovenfor. Uden det her ville selve knapkassen
   stå klods op ad kortkanten. Den skubbes ind med margin i stedet, og
   max-width holder en knap der er sat til fuld bredde inde i kortet: ellers
   ville de 36px margin skubbe den ud, og .portal-card har overflow: hidden.
   Listen er den samme som standardens. Stod her kun .portal-card, ville en
   knap der er direkte barn af .coach-section-box, .coach-schedule-card eller
   .client-calendar-panel stå klods op ad kanten, altså præcis den fejl
   kommentaren her beskriver, bare i de tre andre kort. */
.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) > :where(.button, button) {
  margin-left: var(--card-inset);
  margin-right: var(--card-inset);
  max-width: calc(100% - var(--card-inset) * 2);
}
.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) > :where(.button, button):last-child {
  margin-bottom: var(--card-inset-block);
}

/* ---- Undtagelse 1: kortet sætter selv sin luft ---------------------------
   De her kort har deres egen padding på selve kortet. Får børnene også de
   18px, står teksten 36px inde i stedet for 18. Tallet i kommentaren er
   kortets egen padding, så du kan se hvor luften kommer fra. */
.main-content .portal-card.admin-quick-card { --card-inset: 0px; --card-inset-block: 0px; }       /* 18px, se .admin-quick-card */
.main-content .portal-card.client-ex-card { --card-inset: 0px; --card-inset-block: 0px; }         /* 13px 15px, se .client-ex-card */
.main-content .portal-card.exercise-library-card { --card-inset: 0px; --card-inset-block: 0px; }  /* 16px 18px, se .exercise-library-card */
.main-content .portal-card.habit-score-card { --card-inset: 0px; --card-inset-block: 0px; }       /* 18px, 12px på telefon, se .habit-score-card */
.main-content .portal-card.progress-stat-card { --card-inset: 0px; --card-inset-block: 0px; }     /* 18px, se .progress-stat-card */
.main-content .portal-card.recipe-card { --card-inset: 0px; --card-inset-block: 0px; }            /* 18px, se .recipe-card */
.main-content .portal-card.startup-card { --card-inset: 0px; --card-inset-block: 0px; }           /* 18px plus 52px i højre side til luk-krydset, se .startup-card */
.main-content .portal-card.training-library-intro { --card-inset: 0px; --card-inset-block: 0px; } /* 24px, se .training-library-intro */
/* .startup-wizard-form har KUN egen padding på telefon, 16px. Den opt-out
   hører derfor hjemme i samme media query som padding'en, ikke her, ellers
   ville opstartsguiden på desktop falde tilbage til tekst på kanten. Søg på
   .startup-wizard-form i media queryen ved 720px. */
/* Kalenderen findes to steder. Det ene er <article class="panel span-8
   client-calendar-panel"> og altså ikke et .portal-card, og .panel giver
   allerede 20px. Det andet er et rigtigt .portal-card uden egen padding, og
   det skal have standarden. Derfor kun .panel her. */
.main-content .panel.client-calendar-panel { --card-inset: 0px; --card-inset-block: 0px; }

/* ---- Undtagelse 2: kant til kant med vilje ------------------------------- */

/* Uge-tabellen ruller vandret og er med vilje trukket ud over kortkanten på
   telefon: width: calc(100% + 24px) og border-radius 0. Luft i siderne ville
   æde den syvende dag. Rækkerne sætter selv 18px via .habit-matrix-header og
   .habit-matrix-row. */
.main-content .portal-card.habit-matrix-card { --card-inset: 0px; --card-inset-block: 0px; }

/* Indholdet har sin egen padding. Hver besked er en boble med eget fyld, og
   tråden skal kunne rulle helt ud til kortkanten. */
.main-content .portal-card.chat-thread-card { --card-inset: 0px; --card-inset-block: 0px; }

/* Indholdet har sin egen padding. Hver samtale er en klikbar række der skal
   kunne fremhæves i fuld bredde, så markeringen ikke ser afkortet ud. */
.main-content .portal-card.conversation-list-card { --card-inset: 0px; --card-inset-block: 0px; }

/* Kant til kant med vilje. Skelettets bjælker er rene baggrunde uden tekst.
   Padding flytter ingenting synligt, fordi baggrunden maler hele
   padding-boksen, så reglen ville kun gøre koden sværere at læse. Sig det
   i stedet. */
.main-content .portal-card.bf-skeleton-card { --card-inset: 0px; --card-inset-block: 0px; }

/* ---- Undtagelse 3: enkelte børn ------------------------------------------
   FORÆLDRE-LISTEN SKAL STÅ ENS ALLE STEDER i den her blok, altså de samme
   fire kort som standarden og knap-reglen bruger: .portal-card,
   .coach-section-box, .coach-schedule-card og .client-calendar-panel. Skriver
   du kun .portal-card i en opt-out, virker den i dag og falder stille fra den
   dag nogen flytter barnet ind i et af de tre andre kort. Så får barnet 36px
   uden at nogen har rørt en regel, og fejlen ligner en tilfældighed. */

/* Indholdet har sin egen padding. Tabellen er et grid, og hver række
   (.coach-table-head og .coach-table-row) har 13px 18px, så markeringen på en
   række kan gå i fuld bredde. Måler du den her på /coach/forms uden linjen,
   står kolonneoverskriften 37px inde, altså 18 plus 18 plus kantens 1px. */
.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) > .coach-table { padding: 0; }

/* Fast bredde, centreret i forvejen. Ringene er 170px og 70px, og med det
   globale box-sizing: border-box ville 18px padding æde 36px af selve ringen
   og flytte tallet inde i den. .mini-ring er desuden absolut placeret, så den
   sidder på koordinater og ikke i tekstflowet. */
.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) > :is(.big-streak-ring, .mini-ring) { padding: 0; }

/* Indholdet har sin egen padding. Det er række-listerne: hver række har selv
   18px i siderne (.portal-stat-line, .portal-link-list a, .portal-meal-row,
   .strength-row, .body-metric-row, .training-session-row, .coach-list-row,
   .document-row, .compact-file-row, .settings-summary-row,
   .recent-progress-row, .training-track-schedule-card), og de har en
   skillelinje der skal gå helt ud til kortkanten, præcis som
   .portal-card-heading. Målt 11/9 uden linjen her: Sessioner gennemført i
   Program-status stod 37px inde mens kortets egen overskrift stod på 18px,
   altså synligt skævt.
   KENDETEGNET, så du kan genkende familien næste gang du bygger en: en række
   med sin EGEN vandrette padding OG en skillelinje uden border-radius. Ser et
   nyt barn sådan ud, hører wrapperen hjemme her. Wrapperen selv er som regel
   bare display: grid uden padding, og det er derfor den er let at overse.
   De seks sidste kom først med efter review 2. De renderer ikke i demodata, så
   JS-målingen kunne ikke se dem: en tom liste flytter sig ikke. Ruterne er
   coach Betalinger, coach klientkort Enkeltsessioner, coach Business Settings,
   klientens Dokumenter, /app/progress seneste målinger og /app/program spor.
   .portal-insight-list står med vilje IKKE her: den har selv padding: 18px på
   listen og vinder derfor allerede over standarden. */
.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) > :is(.training-session-list,
                                  .training-database-list,
                                  .portal-meal-list,
                                  .portal-stat-list,
                                  .portal-link-list,
                                  .strength-list,
                                  .body-metric-list,
                                  .coach-list,
                                  .document-list,
                                  .compact-file-list,
                                  .settings-summary-list,
                                  .recent-progress-list,
                                  .training-track-schedule-list) { padding: 0; }

/* En fremdriftsbjælke er et spor, ikke tekst. Padding ville få den orange
   fyldning til at starte et forkert sted, og bjælken er kun 8px høj. Luften
   laver .weekly-progress-card .progress-bar selv med margin: 0 18px 12px, og
   margin taber ikke til padding, den lægger sig oven i. */
.main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) > .progress-bar { padding-left: 0; padding-right: 0; }

/* Print sætter selv 4mm 5mm på kortet, så børnene skal ikke have mere.
   Husk at det her også nulstiller variablen for enhver anden regel der læser
   var(--card-inset), se advarslen i toppen af blokken. */
@media print {
  .main-content :is(.portal-card, .coach-section-box, .coach-schedule-card, .client-calendar-panel) {
    --card-inset: 0px;
    --card-inset-block: 0px;
  }
}

/* Automatiseringer (v639) */
.automation-card .automation-form { padding: 6px 18px 16px; }
.automation-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 12px; }
.automation-fields label { display: grid; gap: 6px; font-weight: 600; font-size: 0.86rem; }
.automation-fields :is(select, input) { min-width: 0; width: 100%; }
.automation-form .checkbox-label { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-weight: 600; }
.automation-preview { border-top: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25)); }
.automation-summary { padding: 8px 18px 14px; display: grid; gap: 6px; font-size: 0.9rem; overflow-wrap: anywhere; }
.automation-clients { padding: 6px 18px 14px; display: grid; gap: 6px; }
.automation-client { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.2)); }
.automation-client:last-child { border-bottom: 0; }
.automation-client small { grid-column: 2; opacity: 0.8; }
.automation-client.is-muted span { opacity: 0.6; }
.automation-runs { padding: 6px 0 8px; }
.automation-run { border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.2)); }
.automation-run:last-child { border-bottom: 0; }
.automation-run-head { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px 0; }
@media (max-width: 720px) {
  .automation-fields { grid-template-columns: 1fr 1fr; }
}

/* Sidste træning · næste · progression på klientfilens Træning-fane (v641) */
.client-training-summary .cts-title { padding: 10px 18px 0; font-weight: 700; }
.client-training-summary .cts-empty { padding: 10px 18px 14px; }
.cts-rows { margin: 8px 0 0; padding: 0 18px 10px; display: grid; gap: 0; }
.cts-rows > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); }
.cts-rows > div:last-child { border-bottom: 0; }
.cts-rows dt { font-weight: 600; font-size: 0.9rem; }
.cts-rows dt small { font-weight: 500; opacity: 0.8; }
.cts-rows dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.88rem; }
.cts-rows dd span { padding: 2px 8px; border-radius: 999px; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); }
.cts-rows dd em { font-size: 0.78rem; opacity: 0.85; }
.cts-rows > div.is-modified dd span { outline: 1px solid var(--bf-attn-warn, #c75d34); }
.cts-next { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 12px 18px; border-top: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); }
.cts-prog { padding: 4px 18px 14px; border-top: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); }
.cts-prog-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0 6px; }
.cts-prog-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; font-size: 0.9rem; align-items: baseline; }
@media (max-width: 720px) {
  .cts-rows > div { grid-template-columns: 1fr; gap: 4px; }
  .cts-prog-row { grid-template-columns: 1fr auto; }
}

/* Vane-builderens dag-checkboxe var position:absolute uden ankret forælder og
   uden størrelse: hver blev 1280 px bred og fik Træning-fanen til at rulle
   sidelæns ved 1280 (målt 3/9 2026, scrollWidth 1594). Skjult, men på plads. */
.coach-day-picker label { position: relative; }
.coach-day-picker input { width: 1px; height: 1px; left: 0; top: 0; overflow: hidden; }

/* Resultater for ét pas (v643): plan · gjort · sidst · 1RM. Fuld bredde øverst på Overblik. */
.bf-cd-overblik > .client-results-panel { grid-column: 1 / -1; margin: 0 0 14px; }
.bf-last-card { margin-top: 14px; }
.results-grid { padding: 6px 18px 12px; overflow-x: auto; }
.results-head, .results-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(110px, 0.8fr); gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); min-width: 760px; }
.results-head { font-size: 0.76rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.results-row:last-child { border-bottom: 0; }
.results-name { font-weight: 600; font-size: 0.9rem; display: grid; }
.results-name small { font-weight: 500; opacity: 0.8; }
.results-pills { display: flex; flex-wrap: wrap; gap: 5px; font-size: 0.86rem; }
.results-pills span { padding: 2px 8px; border-radius: 999px; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); }
.results-pills span.is-plan { background: transparent; border: 1px dashed var(--bf-line, rgba(127, 127, 127, 0.4)); }
.results-pills span.is-prev { opacity: 0.8; }
.results-row.is-modified .results-pills span.is-modified { outline: 1px solid var(--bf-attn-warn, #c75d34); }
.results-rm { font-size: 0.9rem; }
.results-hint { padding: 0 18px 14px; margin: 0; font-size: 0.86rem; }

/* Resultater, coachens rettelser (v644) */
.results-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.results-hint-top { padding-top: 10px; }
.results-hint-top code { font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); }
.results-pills .results-pill-edit { padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); color: inherit; font: inherit; font-size: 0.86rem; cursor: pointer; }
.results-pills .results-pill-edit:hover { border-color: var(--bf-accent, #c75d34); }
.results-pills .results-pill-edit.is-modified { outline: 1px solid var(--bf-attn-warn, #c75d34); }
.results-pills .results-pill-add { padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--bf-line, rgba(127, 127, 127, 0.5)); background: transparent; color: inherit; font: inherit; font-size: 0.86rem; cursor: pointer; opacity: 0.8; }
.results-pills .results-pill-add:hover { opacity: 1; border-color: var(--bf-accent, #c75d34); }
.results-row.is-extra .results-name::after { content: " · ikke i planen"; font-weight: 500; opacity: 0.7; font-size: 0.8em; }

/* Volumen (v645) */
.results-total { padding: 10px 0 4px; font-size: 0.92rem; }
.results-vol { font-size: 0.9rem; }
.cts-volume { padding: 8px 18px 10px; font-size: 0.92rem; border-top: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); }

/* Kostdagbog (v647): galleri pr. dag, på Kost-siden og coachens Kost-fane */
.food-journal { padding: 4px 18px 14px; display: grid; gap: 12px; }
.nutrition-section .food-journal { padding: 0; }
.food-journal-upload { margin-bottom: 4px; }
.food-journal-date { font-weight: 700; font-size: 0.9rem; margin: 6px 0 6px; }
.food-journal-date small { font-weight: 500; opacity: 0.7; }
.food-journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.food-journal-photo { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); }
.food-journal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.food-journal-empty { margin: 0; }
.kost-card.kost-journal .food-journal { padding: 0; }
.kost-card.kost-journal .food-journal-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

/* Skraldespand på dagbogsfoto (v650) */
.food-journal-item { position: relative; display: block; }
.food-journal-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.85rem; line-height: 28px; text-align: center; cursor: pointer; padding: 0; }
.food-journal-del:hover, .food-journal-del:focus-visible { background: var(--bf-attn-crit, #b3261e); }

/* ===================== Senior-visning (v651) ===================== */
.bf-senior { --sen-fs: 20px; font-size: var(--sen-fs); line-height: 1.35; display: grid; gap: 14px; padding: 8px 16px 110px; max-width: 640px; margin: 0 auto; }
body:has(.bf-senior) :is(.sidebar, .app-sidebar, .bf-tabbar, .bf-phone-tabbar, .phone-tabbar, .client-tabbar, .bf-appbar-more) { display: none !important; }
body:has(.bf-senior) .main-content { padding-left: 0; padding-right: 0; }
.senior-head { display: grid; gap: 4px; padding-top: 6px; }
.senior-head h1 { font-family: "Archivo", sans-serif; font-size: 30px; font-weight: 800; margin: 0; }
.senior-date, .senior-back { font-size: 16px; color: var(--bf-ink-2, var(--muted, #6b6259)); text-decoration: none; }
.senior-screen { display: grid; gap: 14px; }
.senior-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.senior-tile { display: grid; gap: 6px; align-content: end; min-height: 150px; padding: 16px; border-radius: 20px; background: var(--bf-surface2, rgba(127,127,127,0.12)); color: var(--bf-ink, inherit); font-family: "Archivo", sans-serif; font-weight: 800; font-size: 24px; text-decoration: none; border: 2px solid transparent; }
.senior-tile svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.senior-tile small { font-family: inherit; font-weight: 400; font-size: 16px; opacity: 0.85; }
.senior-tile.hot { background: var(--bf-accent-btn, var(--bf-accent, #c75d34)); color: #fff !important; }
.senior-tile.hot small { color: #fff; }
.senior-tile:focus-visible { outline: 3px solid var(--bf-accent, #c75d34); outline-offset: 2px; }
.senior-big { display: block; width: 100%; padding: 18px; border-radius: 18px; border: 0; background: var(--bf-accent-btn, var(--bf-accent, #c75d34)); color: #fff !important; font: 800 22px "Archivo", sans-serif; text-align: center; text-decoration: none; cursor: pointer; }
.senior-big.quiet { background: var(--bf-surface2, rgba(127,127,127,0.12)); color: var(--bf-ink, inherit) !important; }
.senior-big.done { background: var(--bf-attn-good, #3f6b4e); }
.senior-big:disabled { opacity: 0.5; cursor: default; }
.senior-card { background: var(--bf-surface2, rgba(127,127,127,0.12)); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; }
.senior-card.paper { background: var(--bf-surface, #fff); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.senior-card h3 { margin: 0; font-family: "Archivo", sans-serif; font-size: 17px; font-weight: 700; color: var(--bf-ink-2, var(--muted, #6b6259)); letter-spacing: 0.02em; }
.senior-card > strong { font-family: "Archivo", sans-serif; font-size: 22px; }
.senior-muted { color: var(--bf-ink-2, var(--muted, #6b6259)); font-size: 16px; }
.senior-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bf-line, rgba(127,127,127,0.25)); font-variant-numeric: tabular-nums; text-decoration: none; color: inherit; }
.senior-row:last-child { border-bottom: 0; }
.senior-row strong { font-family: "Archivo", sans-serif; font-size: 22px; }
.senior-row strong small { font-size: 15px; font-weight: 500; opacity: 0.75; }
.senior-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 16px; font-weight: 700; }
.senior-pill.good { background: var(--bf-attn-good-bg, #e3ede5); color: var(--bf-attn-good, #3f6b4e); }
/* Gergø 27/9: v735. "Hvordan var det?" i mørkt: husets blæk-regel gav lys tekst
   på den lyse grønne pille (målt 1,05:1 på live v734 i Træningens kort Sidst,
   og på det nye pas). I mørkt er pillen mørkegrøn med temaets grønne tekst. */
.bf-sand.bf-dark .main-content .bf-senior .senior-pill.good { background: rgba(143, 184, 137, 0.16); color: var(--bf-attn-good, #8FB889); }
.senior-kcal { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.senior-ring { width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--bf-accent, #c75d34) 0 calc(var(--pct, 0) * 1%), var(--bf-line, rgba(127,127,127,0.3)) calc(var(--pct, 0) * 1%) 100%); display: grid; place-items: center; }
.senior-ring span { width: 82px; height: 82px; border-radius: 50%; background: var(--bf-surface, #fff); display: grid; place-items: center; font: 800 22px "Archivo", sans-serif; text-align: center; line-height: 1; }
.senior-ring span small { display: block; font: 400 12px inherit; opacity: 0.75; margin-top: 3px; }
.senior-remaining { display: block; font: 800 26px "Archivo", sans-serif; }
.senior-macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.senior-macro { background: var(--bf-surface, #fff); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); border-radius: 12px; padding: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.senior-macro strong { display: block; font: 800 20px "Archivo", sans-serif; }
.senior-macro small { font-size: 14px; opacity: 0.8; }
.senior-card .food-journal { padding: 0; }
.senior-check { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--bf-line, rgba(127,127,127,0.25)); background: transparent; color: inherit; font: inherit; font-size: 22px; text-align: left; cursor: pointer; }
.senior-check:last-child { border-bottom: 0; }
.senior-box { width: 44px; height: 44px; border-radius: 12px; border: 3px solid var(--bf-muted, #6b6259); display: grid; place-items: center; flex: none; font-size: 26px; font-weight: 800; }
.senior-box.on { background: var(--bf-attn-good, #3f6b4e); border-color: var(--bf-attn-good, #3f6b4e); color: #fff; }
.senior-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.senior-day { display: grid; gap: 4px; padding: 8px 2px; border-radius: 12px; background: var(--bf-surface, #fff); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); font-size: 15px; }
.senior-day b { font-family: "Archivo", sans-serif; font-size: 20px; }
.senior-day.today { border: 2px solid var(--bf-accent, #c75d34); }
.senior-day i.m, .senior-legend i.m { display: block; height: 8px; border-radius: 4px; margin: 0 6px; }
.senior-legend i.m { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 0; vertical-align: middle; }
.m.t { background: var(--bf-accent, #c75d34); } .m.c { background: var(--bf-attn-good, #3f6b4e); } .m.r { background: #8A6DB8; }
.senior-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; opacity: 0.85; }
.senior-agenda { display: grid; gap: 10px; }
.senior-item { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--bf-surface, #fff); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); text-decoration: none; color: inherit; }
.senior-item .t { font: 800 17px "Archivo", sans-serif; opacity: 0.8; padding-top: 2px; font-variant-numeric: tabular-nums; }
.senior-item.remind { border-left: 6px solid #8A6DB8; }
.senior-thread { display: grid; gap: 10px; }
.senior-bubble { max-width: 88%; padding: 12px 16px; border-radius: 18px; background: var(--bf-surface2, rgba(127,127,127,0.12)); font-size: 20px; white-space: pre-wrap; }
.senior-bubble.me { margin-left: auto; background: var(--bf-accent-btn, var(--bf-accent, #c75d34)); color: #fff; }
.senior-bubble small { display: block; font-size: 14px; opacity: 0.8; margin-top: 4px; }
.senior-compose { display: grid; gap: 10px; }
.senior-compose textarea { font: inherit; font-size: 20px; padding: 14px; border-radius: 16px; border: 2px solid var(--bf-line, rgba(127,127,127,0.3)); background: var(--bf-surface, #fff); color: inherit; min-width: 0; }
.senior-voice { display: block; width: 100%; padding: 14px; border-radius: 16px; border: 2px solid var(--bf-line, rgba(127,127,127,0.3)); background: var(--bf-surface, #fff); color: inherit; font: 700 20px inherit; font-family: inherit; cursor: pointer; }
.senior-progress { font-size: 16px; opacity: 0.8; }
.senior-question h2 { font-family: "Archivo", sans-serif; font-size: 26px; margin: 0 0 6px; }
.senior-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.senior-scale-btn { padding: 16px 0; border-radius: 14px; border: 2px solid var(--bf-line, rgba(127,127,127,0.3)); background: var(--bf-surface, #fff); color: inherit; font: 800 22px "Archivo", sans-serif; cursor: pointer; }
.senior-scale-btn.on { background: var(--bf-accent-btn, var(--bf-accent, #c75d34)); color: #fff; border-color: transparent; }
.senior-scale-ends { display: flex; justify-content: space-between; font-size: 15px; opacity: 0.75; margin-top: 4px; }
.senior-answer { width: 100%; font: inherit; font-size: 20px; padding: 14px; border-radius: 14px; border: 2px solid var(--bf-line, rgba(127,127,127,0.3)); background: var(--bf-surface, #fff); color: inherit; }
/* Talspørgsmål i Enkel (en klient 17/9): samme felt som teksten, bare et tal med decimaler. */
.senior-answer-number { font-weight: 700; font-size: 24px; text-align: center; }
.senior-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.senior-exercise { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--bf-surface, #fff); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); font-size: 20px; }
.senior-exercise h2 { font-family: "Archivo", sans-serif; font-size: 28px; margin: 0; }
.senior-exercise-sets { margin: 0; font: 800 22px "Archivo", sans-serif; }
.senior-exercise-note { margin: 0; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.senior-exercise-video :is(iframe, video) { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; border: 0; }
.senior-bar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bf-line, rgba(127,127,127,0.25)); background: var(--bf-surface, #fff); z-index: 30; }
.senior-bar a { display: grid; justify-items: center; gap: 4px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--bf-ink-2, var(--muted, #6b6259)); padding: 6px 0; border-radius: 10px; }
.senior-bar a.on { color: var(--bf-accent, #c75d34); background: var(--bf-surface2, rgba(127,127,127,0.12)); }
.senior-bar svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Gergø 23/9: v730. Mere i Enkels bjælke: samme mål, tekst og farver som
   fanerne ved siden af, bare en knap, fordi den åbner skuffen i stedet for at
   skifte side. Prikkerne er fyldte, som bundfanen Mere i Avanceret. */
.senior-bar .senior-more { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 44px; margin: 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 700; line-height: inherit; color: var(--bf-ink-2, var(--muted, #6b6259)); padding: 6px 0; border-radius: 10px; cursor: pointer; }
.senior-bar .senior-more svg { fill: currentColor; stroke: none; }
.senior-bar .senior-more[aria-expanded="true"] { color: var(--bf-accent, #c75d34); background: var(--bf-surface2, rgba(127,127,127,0.12)); }
.senior-bar .senior-more:focus-visible { outline: 3px solid var(--bf-accent, #c75d34); outline-offset: 2px; }
/* Seks punkter på en meget smal telefon: målt ved 320 px på ungarsk stod Mere
   halvt uden for skærmen, og på engelsk var fire punkter 42 px brede. Under
   360 px bliver kun bjælkens sidemargen og mellemrum mindre, så hvert punkt er
   mindst 44 px; tekst og ikoner har samme størrelse som før. */
@media (max-width: 359.98px) {
  .bf-senior .senior-bar { gap: 0; padding-left: 4px; padding-right: 4px; }
}
/* Skuffen i Enkel: reglen ovenfor skjuler den, så Enkel ser ud som før. Kun når
   Mere har åbnet den, står den frem, som i Avanceret. Til og med 1023 px er
   placeringen husets egen (skuffen fra venstre). Fra 1024 px er sidebaren ellers
   en fast kolonne, så i Enkel lægger den sig i stedet over siden som skuffe. */
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open { display: flex !important; }
/* Skeptikeren 23/9 (fund E): åbnes skuffen fra en Enkel-side, har den Enkels
   størrelse. Målt ved 390 px: Enkels egen tekst er 22 til 26 px, skuffens var
   13,4 px, og Mørkt tema var 40 px høj. Nu 19 px tekst og mindst 56 px pr.
   punkt, og knapperne (tema, Log ud, sproget) 18 px og mindst 48 px. Kun
   størrelser; farver og rækkefølge er husets egne. */
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open .sidebar-link { min-height: 56px; font-size: 19px; gap: 14px; }
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open .sidebar-icon { width: 26px; font-size: 22px; }
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open .sidebar-icon .sidebar-emoji { font-size: 22px; }
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open :is(.theme-toggle, .auth-user-actions .button) { min-height: 48px; font-size: 18px; }
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open .client-language-select :is(span, select) { font-size: 18px; }
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open .client-language-select select { min-height: 48px; }
body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open .auth-user-actions small { font-size: 16px; }
@media (min-width: 1024px) {
  body:has(.bf-senior) .sidebar.client-sidebar.mobile-menu-open { position: fixed; top: 0; bottom: 0; left: 0; z-index: 9500; width: min(86vw, 340px); height: auto; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; box-shadow: 22px 0 44px rgba(0, 0, 0, 0.24); }
  body:has(.bf-senior) .mobile-menu-backdrop.visible { position: fixed; inset: 0; z-index: 9490; display: block; border: 0; padding: 0; background: rgba(0, 0, 0, 0.54); }
}
@media (min-width: 900px) { .bf-senior { padding-top: 24px; } }
/* Ink catch-all'en overmaler span/small i sand-temaet: orange felter skal have hvid tekst. */
.bf-sand .main-content .senior-tile.hot :is(span, small, svg), .senior-tile.hot :is(span, small) { color: #fff !important; }
.bf-sand .main-content .senior-big:not(.quiet) :is(span, small), .senior-big:not(.quiet) { color: #fff !important; }
.bf-sand .main-content .senior-bubble.me :is(span, small), .senior-bubble.me small { color: #fff !important; }
/* Skeptikernes fund S12 (27/9, fandtes før): selve beskedteksten står direkte i
   boblens div, og husets ink-regel for div (0,2,1) vandt over color: #fff (blæk
   på orange, 3,34:1). Her (0,4,0) uden !important: klistermærket (color:
   inherit, senere i filen) og temaets lyse boble med blæk (0,5,0) vinder stadig. */
.bf-sand .main-content .senior-bubble.me { color: #fff; }
.bf-sand .main-content .senior-scale-btn.on { color: #fff !important; }
.bf-sand:not(.bf-dark) .main-content .senior-box.on, .bf-sand .main-content .senior-box.on.dim { color: #fff !important; }

/* v653: offline-linje i afspilleren og senior-skallen */
.bf-offline-line { margin: 8px 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 0.95rem; line-height: 1.35; font-weight: 600; }
.bf-offline-line.is-offline { background: #fff3cd; color: #5c4400 !important; border: 1px solid #f0d27a; }
.bf-offline-line.is-pending { background: #e8f1ff; color: #1f3d73 !important; border: 1px solid #b9d0f5; }
.bf-senior .bf-offline-line { font-size: 1.05rem; margin: 0 0 12px; }

/* v654: foto der venter på net */
.food-journal-item.is-pending img { opacity: 0.55; }
.food-journal-pending { position: absolute; left: 6px; bottom: 6px; background: #fff3cd; color: #5c4400 !important; font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 8px; border: 1px solid #f0d27a; }

/* v655: på telefon top-dockes timer-bjælken (64–118 px). Klientsidernes
   offline-linje står øverst i flowet og lå gemt bag den; skub den ned under. */
@media (max-width: 700px) {
  body:has(#bf-workout-timer) .bf-offline-line.is-chrome { margin-top: calc(118px + env(safe-area-inset-top, 0px)); }
}

/* v660: skift til Avanceret visning nederst på Hjem i enkel visning */
/* Gergø 23/9: husets rester (6). Kanten er knappens eneste grænse, og
   rgba(0, 0, 0, 0.18) gav 1,51:1 i husets lyse og 1,03:1 i husets mørke tema.
   Nu --bf-muted, samme token som Labrador bruger: 4,72:1 lyst og 7,0:1 mørkt. */
.senior-switch-view { display: block; width: 100%; margin: 18px 0 8px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--bf-muted, rgba(0, 0, 0, 0.18)); background: transparent; color: inherit; font: inherit; font-size: 1rem; font-weight: 600; text-align: center; cursor: pointer; }
/* Gergø 23/9 (svar m): Rapportér fejl og Indstillinger er links, der ligner
   knappen Avanceret visning. Uden understregning, så stregen heller ikke går
   under mariehønen. */
a.senior-switch-view { text-decoration: none; }

/* ===== Enkel under Mere (27/9) =====
   Gergøs svar 27/9 (alle ja) på mockuppen "Enkel under Mere" (artifact
   R6N9ANQbJMdEtSK3jqdwPK). Målene er mockuppens: tryk mindst 52 px, tekst
   mindst 18 px (bjælken er undtaget), kontrast 4,5 for tekst og 3 for grafik.
   Ingen nye tokens; temaerne får deres del i LABRADOR-blokkens L3-afsnit.
   Den ink-regel, der maler span, div og small i .main-content (0,2,1), gør,
   at farvede spans her står med .bf-sand .main-content foran. */

/* Svar 3: skallen på alle klientens Enkel-sider. Coachens Enkel
   (.bf-coach-simple) bruger de samme klasser og er urørt. Titlen slår husets
   loft (.bf-sand .main-content h1, 23,2 px ved 390 px). */
.bf-sand .main-content .bf-senior:not(.bf-coach-simple) .senior-head h1 { font-size: 30px; line-height: 1.1; }
.bf-senior:not(.bf-coach-simple) .senior-head:has(> .senior-back) { gap: 10px; justify-items: start; }
.bf-senior:not(.bf-coach-simple) .senior-back { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 12px; border-radius: 14px; background: var(--bf-surface); border: 2px solid var(--bf-line); color: var(--bf-ink); font: 700 18px/1 "Hanken Grotesk", sans-serif; text-decoration: none; }
.bf-senior:not(.bf-coach-simple) .senior-back svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bf-senior:not(.bf-coach-simple) .senior-back:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }

/* Mere lyser på skuffens sider, som fanerne gør på deres (.senior-bar a.on). */
.senior-bar .senior-more.on { color: var(--bf-accent, #c75d34); background: var(--bf-surface2, rgba(127,127,127,0.12)); }

/* Kontrastrettelserne (spec aendredeKlodser). Den stille knap skilte sig kun
   1,09 til 1,19 fra siden uden tema: nu hvid flade og 2 px dæmpet kant. Kun
   klientens Enkel; afspillerens og løbeurets stille knapper er urørte. */
.bf-senior:not(.bf-coach-simple) .senior-big.quiet { background: var(--bf-surface); border: 2px solid var(--bf-muted); }
/* Grøn med tekst i mørkt uden tema: hvid på #8FB889 var 2,24:1. Afkrydsningen
   får mørk tekst (#141210, 8,4:1), som mockuppen. Den hvide regel ovenfor
   (.senior-box.on med !important) gælder nu kun lyst tema og de dæmpede
   bokse; temaerne sætter selv hvid på deres egen fyldfarve (L3). */
.bf-sand.bf-dark .main-content .senior-box.on:not(.dim) { color: #141210; }
/* Den store Gjort-knap har husets hvide tekst med !important, som et tema kun
   kan slå med endnu en !important. Uden tema får den derfor den mørkere grønne
   fra lyst tema (#4A6A43) i mørkt, hvid giver 6,1:1. Temaerne beholder deres. */
.bf-sand.bf-dark .main-content .senior-big.done { background: #4A6A43; }

/* Nye sider: indholdet står i .senior-mere, så de delte klodser kun bliver
   større her (18 px dæmpet tekst, 20 px korttitler). */
.bf-senior .senior-mere { display: grid; gap: 14px; }
.bf-sand .main-content .bf-senior .senior-mere .senior-muted { font-size: 18px; line-height: 1.35; color: var(--bf-muted); }
.bf-senior .senior-mere .senior-muted.center { text-align: center; }
.bf-sand .main-content .bf-senior .senior-mere .senior-card h3 { font: 800 20px/1.2 "Archivo", sans-serif; color: var(--bf-ink); letter-spacing: 0; }
.bf-sand .main-content .bf-senior .senior-mere .senior-body { margin: 0; font-size: 20px; line-height: 1.4; }
.bf-sand .main-content .bf-senior .senior-label { font-size: 18px; font-weight: 700; color: var(--bf-muted); }
.bf-senior .senior-mere .senior-big { min-height: 60px; }
.bf-senior .senior-nav.even { grid-template-columns: 1fr 1fr; }
/* Rød knap til at slette: hvid på #B3261E (6,5:1) i alle tilstande. */
.bf-senior .senior-big.danger { background: #B3261E; }

/* Kvitteringen (seniorReceipt). Fortryd står på sin egen linje under teksten. */
.bf-senior .senior-receipt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--bf-surface); border: 3px solid var(--bf-attn-good, #4A6A43); }
.bf-sand .main-content .bf-senior .senior-receipt-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bf-attn-good, #4A6A43); color: #fff; font: 800 24px/1 "Archivo", sans-serif; }
.bf-sand.bf-dark .main-content .bf-senior .senior-receipt-icon { color: #141210; }
.bf-senior .senior-receipt-text { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-receipt-text b { font: 800 20px/1.25 "Archivo", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-sand .main-content .bf-senior .senior-receipt-text small { font-size: 18px; color: var(--bf-muted); overflow-wrap: anywhere; }
.bf-sand .main-content .bf-senior .senior-receipt-btn { grid-column: 2; justify-self: start; min-width: 140px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 2px solid var(--bf-muted); background: var(--bf-surface); color: var(--bf-ink); font: 800 18px "Hanken Grotesk", sans-serif; cursor: pointer; }

/* Svaret øverst (senior-hero). */
.bf-senior .senior-hero { display: grid; gap: 8px; padding: 16px; border-radius: 18px; background: var(--bf-surface); border: 1px solid var(--bf-line); }
.bf-sand .main-content .bf-senior .senior-hero-big { display: block; font: 800 28px/1.15 "Archivo", sans-serif; color: var(--bf-ink); text-wrap: balance; }
.bf-sand .main-content .bf-senior .senior-hero-sub { display: block; font-size: 18px; color: var(--bf-muted); }
.bf-senior .senior-hero-row { display: flex; align-items: center; gap: 12px; }
.bf-sand .main-content .bf-senior .senior-hero-num { display: flex; align-items: baseline; gap: 8px; font: 800 52px/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-hero-num small { font: 800 26px/1 "Archivo", sans-serif; color: var(--bf-muted); }

/* Række til resten (senior-go): ikon 44 px, navn 21 px, svaret 18 px. */
.bf-senior .senior-go { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 72px; padding: 12px 14px 12px 12px; border-radius: 18px; background: var(--bf-surface); border: 2px solid var(--bf-line); color: var(--bf-ink); text-decoration: none; }
.bf-senior .senior-go:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-sand .main-content .bf-senior .senior-go-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--bf-surface2); color: var(--bf-accent); }
.bf-sand.bf-dark .main-content .bf-senior .senior-go-icon { background: var(--bf-sand); }
.bf-senior .senior-go-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bf-senior .senior-go-text { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-go-text b { font: 800 21px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-go-text small { font-size: 18px; line-height: 1.3; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-go-chev { font-size: 34px; line-height: 1; margin-top: -4px; color: var(--bf-accent-text, var(--bf-accent)); }
.bf-sand .main-content .bf-senior .senior-count { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--bf-accent-btn); color: #fff; font: 800 18px/1 "Hanken Grotesk", sans-serif; }

/* Trin og spørgsmål. Husets h2 i .main-content er 1.2rem; her 26 px. */
.bf-senior .senior-step { display: grid; gap: 4px; }
.bf-sand .main-content .bf-senior .senior-step-count { font-size: 18px; font-weight: 700; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-step h2 { margin: 0; font: 800 26px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-h2 { margin: 0; font: 800 24px/1.2 "Archivo", sans-serif; }

/* Ét stort felt og et stort tekstfelt (bruges fra etape E2 og E5). */
.bf-senior .senior-field { display: flex; align-items: baseline; gap: 10px; min-height: 88px; padding: 14px 20px; border-radius: 18px; border: 3px solid var(--bf-accent); background: var(--bf-surface); }
.bf-sand .main-content .bf-senior .senior-field-unit { font: 800 26px/1 "Archivo", sans-serif; color: var(--bf-muted); }
.bf-senior .senior-textarea { display: block; }

/* Store valg (senior-choice): 72 px, 22 px navn; valgt har 3 px accent og ✓ Valgt. */
.bf-sand .main-content .bf-senior .senior-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 72px; margin: 0; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--bf-muted); background: var(--bf-surface); color: var(--bf-ink); font: inherit; text-align: left; cursor: pointer; }
.bf-sand .main-content .bf-senior .senior-choice:not(:has(.senior-choice-icon)) { grid-template-columns: minmax(0, 1fr) auto; }
.bf-sand .main-content .bf-senior .senior-choice.on { border: 3px solid var(--bf-accent); background: var(--bf-surface2); cursor: default; }
.bf-senior .senior-choice:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-sand .main-content .bf-senior .senior-choice-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--bf-accent); }
.bf-senior .senior-choice-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bf-senior .senior-choice-icon .client-language-flag { width: 40px; height: 28px; }
/* Ved 40 px ligner husets engelske flag (kun korset) et nordisk flag; her får
   det sine diagonaler som i mockuppen. Det røde kors er husets ::after. */
.bf-senior .senior-choice-icon .client-language-flag-en {
  background:
    linear-gradient(90deg, transparent 0 40%, #fff 40% 60%, transparent 60%),
    linear-gradient(180deg, transparent 0 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(to top right, transparent calc(50% - 1px), #c8102e calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #c8102e calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(to bottom right, transparent calc(50% - 3px), #fff calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    #012169;
}
.bf-senior .senior-choice-text { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-choice-text b { font: 800 22px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-choice-text small { font-size: 18px; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-choice-mark { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; color: var(--bf-accent-text, var(--bf-accent)); }
.bf-senior .senior-choice-mark i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bf-accent-btn); color: #fff; font-size: 18px; }

/* Læse-rækker (Om mig): etiket over værdi. */
.bf-senior .senior-info { display: grid; gap: 2px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--bf-line); align-content: center; }
.bf-senior .senior-info-card > .senior-info:last-child, .bf-senior .senior-info-card > .senior-info-grid:last-child .senior-info { border-bottom: 0; }
.bf-sand .main-content .bf-senior .senior-info span { font-size: 18px; font-weight: 700; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-info b { font-size: 20px; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-senior .senior-info-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }

/* Mit billede: stort billede eller forbogstavet. */
.bf-sand .main-content .bf-senior .senior-avatar { justify-self: center; width: 180px; height: 180px; margin: 8px 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--bf-surface2); border: 4px solid var(--bf-accent); color: var(--bf-ink); font: 800 72px/1 "Archivo", sans-serif; }
.bf-senior .senior-avatar.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Filfeltet ligger usynligt over hele den store knap, så trykket rammer det. */
.bf-senior .senior-photo-form { margin: 0; }
.bf-senior .senior-file-btn { position: relative; overflow: hidden; }
.bf-senior .senior-file-btn .senior-file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bf-senior .senior-file-btn:focus-within { outline: 3px solid var(--bf-accent); outline-offset: 2px; }

/* Skuffen i Enkel (svar 1). Samme aside som i Avanceret; kun indholdet er
   Enkels (klassen senior-drawer sættes kun på en Enkel-side). Punkterne 60 px
   og 20 px, bunden 56 px og 18 px, Luk 52 px. Skuffen står uden for
   .main-content, så husets ink-regel rammer den ikke. */
.sidebar.client-sidebar.senior-drawer { gap: 6px; padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(16px + env(safe-area-inset-bottom, 0px)); color: var(--bf-ink); }
.senior-drawer .sk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 6px 6px; }
/* Skeptikernes fund S1: ordmærket må krympe (201 px er for bredt ved 360 px),
   så Luk altid står helt inde i skuffen, på alle tre sprog og ned til 320 px. */
.senior-drawer .sk-wm { min-width: 0; flex: 1 1 auto; }
.senior-drawer .sk-wm .bf-wm-img { height: auto; max-height: 16px; max-width: 100%; }
.senior-drawer .sk-close { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--bf-muted); background: var(--bf-surface); color: var(--bf-ink); font: 800 18px "Hanken Grotesk", sans-serif; cursor: pointer; flex: none; white-space: nowrap; }
.senior-drawer .sk-list { display: grid; gap: 4px; }
.senior-drawer .sk-test { padding-top: 8px; border-top: 1px solid var(--bf-line); }
.senior-drawer .sk-label { padding: 4px 10px; font-size: 18px; font-weight: 700; color: var(--bf-muted); }
.senior-drawer .sk-link { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 12px; border-radius: 14px; border: 2px solid transparent; color: var(--bf-ink); font: 700 20px/1.2 "Hanken Grotesk", sans-serif; text-decoration: none; }
.senior-drawer .sk-link.active { background: var(--bf-surface); border-color: var(--bf-accent); box-shadow: inset 4px 0 0 var(--bf-accent); }
.senior-drawer .sk-link .senior-count { margin-left: auto; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--bf-accent-btn); color: #fff; font: 800 18px/1 "Hanken Grotesk", sans-serif; }
/* Gergø 27/9: v735. Skuffens emojis bruger telefonens og pc'ens egne emoji-skrifter;
   Noto som webfont er kun til beskederne og emoji-arket (EMOJI-VAELGER). */
.senior-drawer .sk-emoji { width: 28px; flex: none; text-align: center; font-size: 24px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; }
.senior-drawer .sk-glyph { font-family: "Hanken Grotesk", sans-serif; font-size: 26px; color: var(--bf-accent-text, var(--bf-accent)); }
.senior-drawer .sk-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--bf-line); }
.senior-drawer .sk-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 0 14px; border-radius: 14px; border: 2px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); font: 700 18px "Hanken Grotesk", sans-serif; text-align: left; cursor: pointer; }
.senior-drawer .sk-out { justify-content: center; border-color: var(--bf-muted); }
.senior-drawer .sk-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); font: 700 18px "Hanken Grotesk", sans-serif; text-decoration: none; }
.senior-drawer .sk-row .client-language-flag { width: 30px; height: 21px; flex: none; }
.senior-drawer .sk-row .sk-val { margin-left: auto; font-weight: 800; }
.senior-drawer .sk-row .sk-chev { font-size: 30px; line-height: 1; margin-top: -3px; color: var(--bf-accent-text, var(--bf-accent)); }
.senior-drawer .sk-ext { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 12px; border-radius: 14px; color: var(--bf-ink); font: 700 18px "Hanken Grotesk", sans-serif; text-decoration: none; }
.senior-drawer .sk-ext .sk-emoji { font-family: "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)); }
.senior-drawer .sk-arrow { margin-left: auto; color: var(--bf-muted); }
.senior-drawer :is(.sk-link, .sk-row, .sk-ext, .sk-btn, .sk-close):focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
/* Etape E2 og E3 (27/9): Min to-do, Kalender og Fremgang med undersider.
   Mockuppens klodser (ringen, Næste, dagkort, kurve, søjler, billeder,
   målinger, feltet til vægten). Farvede tekster står med .bf-sand
   .main-content foran, så husets ink-regel ikke maler dem. */
.bf-sand .main-content .bf-senior .senior-hero-lead { display: block; font: 800 22px/1.25 "Archivo", sans-serif; color: var(--bf-ink); text-wrap: balance; }
.bf-senior .senior-hero.center { justify-items: center; text-align: center; padding: 20px 16px; }
.bf-senior .senior-hero-dog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bf-senior .senior-hero-dog > span { display: grid; gap: 6px; }
.bf-senior .senior-hero.with-dog { grid-template-columns: minmax(0, 1fr) auto; align-items: end; overflow: hidden; }
.bf-senior .senior-streak { display: grid; gap: 6px; align-self: center; }
/* Knapperne til forrige og næste i en række (uge, vinkel, øvelse, test). */
.bf-senior .senior-mere .senior-nav .senior-big { font-size: 20px; padding: 14px 8px; min-height: 60px; }
/* Skeptikernes fund S2: en knap i parret knækker aldrig (pilen alene på linje
   2). Er der ikke plads til begge på én linje med hele teksten, står de under
   hinanden i fuld bredde; ellers deler de linjen ligeligt, som mockuppen. */
.bf-senior .senior-mere .senior-nav { display: flex; flex-wrap: wrap; }
.bf-senior .senior-mere .senior-nav > .senior-big { flex: 1 1 0; min-width: max-content; white-space: nowrap; }
.bf-sand .main-content .bf-senior .senior-mere .senior-big.quiet:disabled { opacity: 1; background: transparent; border: 2px dashed var(--bf-muted); color: var(--bf-muted) !important; cursor: default; }

/* Rækker, der åbner på stedet: en knap med senior-go's udseende. */
.bf-senior button.senior-go { width: 100%; margin: 0; font: inherit; text-align: left; cursor: pointer; }
.bf-senior button.senior-go[aria-expanded="true"] .senior-go-chev { transform: rotate(90deg); }
.bf-sand .main-content .bf-senior .senior-go.c .senior-go-icon { color: var(--bf-attn-good, #4A6A43); }
.bf-senior .senior-open { gap: 0; }

/* Min to-do: ringen med dagens tal, kortet Næste og det klarede. */
.bf-senior .senior-ringrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.bf-senior .senior-ringrow > span:last-child { display: grid; gap: 4px; }
.bf-senior .senior-mere .senior-ring { width: 104px; height: 104px; }
.bf-sand .main-content .bf-senior .senior-mere .senior-ring > span { width: 80px; height: 80px; font: 800 22px/1.1 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-senior .senior-next { gap: 6px; }
.bf-sand .main-content .bf-senior .senior-next-title { font: 800 26px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-senior .senior-next .senior-big { margin-top: 8px; }
.bf-sand .main-content .bf-senior .senior-mere .senior-check-text small.habit-status { font-size: 18px; }
.bf-senior .senior-done-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--bf-line); }
.bf-senior .senior-done-row:last-child { border-bottom: 0; }
.bf-sand .main-content .bf-senior .senior-done-row .senior-check-text b { font-size: 20px; }
.bf-sand .main-content .bf-senior .senior-done-row .senior-check-text small { font-size: 18px; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-done-row .ic { display: grid; place-items: center; color: var(--bf-accent); }
.bf-senior .senior-done-row .ic svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bf-sand .main-content .bf-senior .senior-mini { display: inline-grid; place-items: center; min-height: 52px; min-width: 52px; padding: 0 16px; border-radius: 14px; border: 0; background: var(--bf-accent-btn); color: #fff; font: 800 18px/1 "Hanken Grotesk", sans-serif; cursor: pointer; }
.bf-sand .main-content .bf-senior .senior-mini.quiet { background: var(--bf-surface); border: 2px solid var(--bf-muted); color: var(--bf-ink); }
/* Skeptikernes fund (Gergø 27/9: v735): husets knap-catch-all
   (.bf-sand .main-content button:not(...), 0,7,1) gav "Færdig ✓" blæk på
   accentfladen (2,69 til 4,44:1). En <button class="senior-mini"> er hvid som
   <a class="senior-mini">, over 5:1 i alle seks tilstande. */
.bf-sand .main-content .bf-senior button.senior-mini:not(.quiet) { color: #fff !important; }
.bf-senior .senior-mini:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }

/* Kalender: en uge ad gangen, et kort pr. dag med noget i. */
.bf-senior .senior-weeknav { gap: 12px; }
.bf-sand .main-content .bf-senior .senior-weeknav strong { font: 800 24px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-senior .senior-daycard { display: grid; gap: 2px; padding: 12px 16px 6px; border-radius: 18px; background: var(--bf-surface); border: 1px solid var(--bf-line); }
.bf-senior .senior-daycard.today { border: 3px solid var(--bf-accent); }
.bf-sand .main-content .bf-senior .senior-daycard h3 { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 800 22px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-pill.today { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--bf-accent-btn); color: #fff; font: 800 18px/1.2 "Hanken Grotesk", sans-serif; }
.bf-senior .senior-dayrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 0; border-top: 1px solid var(--bf-line); color: var(--bf-ink); text-decoration: none; }
.bf-senior .senior-open > .senior-dayrow:first-child, .bf-senior :is(.senior-daycard, .senior-today) h3 + .senior-dayrow { border-top: 0; }
.bf-senior .senior-dayrow.static { grid-template-columns: 32px minmax(0, 1fr); }
.bf-senior .senior-today > :is(.senior-dayrow, .senior-done-row) { border-top: 0; border-bottom: 1px solid var(--bf-line); }
.bf-senior .senior-dayrow:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; border-radius: 10px; }
.bf-sand .main-content .bf-senior .senior-dayrow .ic { display: grid; place-items: center; color: var(--bf-accent); }
.bf-sand .main-content .bf-senior :is(.senior-dayrow.c, .senior-dayrow.done) .ic { color: var(--bf-attn-good, #4A6A43); }
.bf-sand .main-content .bf-senior .senior-dayrow.r .ic { color: #8A6DB8; }
.bf-senior .senior-dayrow svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bf-senior .senior-dayrow > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-dayrow b { font-size: 20px; font-weight: 700; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-dayrow small { font-size: 18px; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-dayrow .chev { font-size: 32px; line-height: 1; margin-top: -3px; color: var(--bf-accent-text, var(--bf-accent)); }
.bf-senior .senior-free { display: grid; gap: 4px; overflow: hidden; }
.bf-senior .senior-free > span:first-child { display: grid; gap: 4px; }

/* Fremgang: kurven med start og slut under linjen, søjlerne for fire uger,
   billeder side om side og målingernes rækker. */
.bf-senior .senior-curve { position: relative; margin: 6px 0 0; }
.bf-senior .senior-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.bf-senior .senior-curve .curve-line { fill: none; stroke: var(--bf-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.bf-senior .senior-curve .curve-base { stroke: var(--bf-line); stroke-width: 2; }
.bf-senior .senior-curve .curve-dot { fill: var(--bf-surface); stroke: var(--bf-accent); stroke-width: 3; }
.bf-senior .senior-curve .curve-dot.end { fill: var(--bf-accent); }
.bf-senior .senior-curve figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 8px; }
.bf-senior .senior-curve .cv { display: grid; gap: 2px; }
.bf-senior .senior-curve .cv.end { text-align: right; }
.bf-sand .main-content .bf-senior .senior-curve .cv b { font: 800 20px/1.1 "Archivo", sans-serif; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.bf-sand .main-content .bf-senior .senior-curve .cv small { font-size: 18px; color: var(--bf-muted); }
.bf-senior .senior-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; min-height: 150px; padding-top: 6px; }
.bf-senior .senior-barcol { display: grid; justify-items: center; gap: 6px; align-content: end; }
.bf-sand .main-content .bf-senior .senior-barcol b { font: 800 22px/1 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-senior .senior-barcol i { display: block; width: 100%; height: var(--h); border-radius: 10px 10px 4px 4px; background: var(--bf-accent); }
.bf-sand .main-content .bf-senior .senior-barcol small { font-size: 18px; color: var(--bf-muted); white-space: nowrap; }
.bf-senior .senior-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-senior .senior-photos.one { grid-template-columns: minmax(0, 1fr); width: 60%; justify-self: center; }
.bf-senior .senior-photo { margin: 0; display: grid; gap: 6px; }
.bf-senior .senior-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; background: var(--bf-surface2); }
.bf-sand .main-content .bf-senior .senior-photo figcaption { font-size: 18px; font-weight: 700; text-align: center; color: var(--bf-ink); }
.bf-senior .senior-mrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--bf-line); color: var(--bf-ink); text-decoration: none; }
.bf-senior .senior-mrow:last-child { border-bottom: 0; }
.bf-senior .senior-mrow > span { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-mrow b { font-size: 20px; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-mrow small { font-size: 18px; color: var(--bf-muted); }
.bf-sand .main-content .bf-senior .senior-mrow strong { font: 800 24px/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bf-ink); }
.bf-sand .main-content .bf-senior .senior-mrow .chev { font-size: 32px; line-height: 1; color: var(--bf-accent-text, var(--bf-accent)); }
.bf-senior .senior-mrow.two { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; column-gap: 10px; row-gap: 2px; align-items: baseline; }
.bf-senior .senior-mrow.two > small { grid-column: 1 / 3; }
.bf-senior .senior-mrow.two .chev { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; margin: -4px 0 0; }
.bf-senior .senior-mrow.sum { padding-right: 32px; }
.bf-senior .senior-feel .senior-info { border-bottom: 0; }
.bf-senior a.senior-mrow:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; border-radius: 10px; }
.bf-sand .main-content .bf-senior .senior-group { margin: 6px 0 -4px; font: 800 20px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }

/* Skriv dagens vægt: ét felt med tallet i 44 px og komma-tastaturet. */
.bf-senior .senior-field:focus-within { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-sand .main-content .bf-senior .senior-field-val { flex: 1 1 auto; min-width: 0; width: 100%; height: 56px; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--bf-ink); font: 800 44px/1.1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; }

/* Tag et billede, trin 2: to formularer (kamera og telefonens billeder).
   Gem og forhåndsvisningen kommer frem, når en fil er valgt, og den anden
   knap går væk (feltet er required, så :valid betyder "en fil er valgt"). */
.bf-senior .senior-photo-pick { display: grid; gap: 14px; }
.bf-senior .senior-photo-form { display: grid; gap: 12px; }
.bf-senior .senior-photo-form:not(:has(.senior-file-input:valid)) .senior-photo-save { display: none; }
.bf-senior .senior-photo-pick:has(.senior-file-input:valid) .senior-photo-form:not(:has(.senior-file-input:valid)) { display: none; }
.bf-senior .senior-photo-preview:not([hidden]) { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; background: var(--bf-surface2); }
/* Etape E4 og E5 (27/9): Dokumenter, Nyt i appen, Rapportér fejl og
   Test-tjekliste. Mockuppens klodser: filtypen (56 px), filrækken med Åbn og
   Slet (52 px), nyhederne, måleren og det store tekstfelt. Et trin, der ikke
   vises, står stadig i formularen (hidden), så filen og teksten følger med. */
.bf-senior .senior-stepbox[hidden] { display: none; }
.bf-sand .main-content .bf-senior .senior-badge { width: 56px; height: 56px; flex: none; display: grid; place-items: center; margin: 0; border-radius: 12px; background: var(--bf-surface2); border: 2px solid var(--bf-line); color: var(--bf-accent-text, var(--bf-accent)); font: 800 18px/1 "Archivo", sans-serif; overflow: hidden; }
.bf-sand.bf-dark .main-content .bf-senior .senior-badge { background: var(--bf-sand); }
.bf-senior img.senior-badge { object-fit: cover; }
.bf-senior .senior-hero-doc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.bf-senior .senior-hero-doc > span:last-child { display: grid; gap: 4px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-hero-big.small { font-size: 24px; overflow-wrap: anywhere; }
.bf-sand .main-content .bf-senior .senior-file { font: 700 20px/1.3 "Hanken Grotesk", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-senior .senior-doc2 { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--bf-surface); border: 1px solid var(--bf-line); }
.bf-senior .senior-doc2-text { display: grid; gap: 2px; min-width: 0; }
.bf-sand .main-content .bf-senior .senior-doc2-text b { font: 700 20px/1.25 "Hanken Grotesk", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-sand .main-content .bf-senior .senior-doc2-text small { font-size: 18px; color: var(--bf-muted); }
.bf-senior .senior-doc2-btns { grid-column: 1 / -1; display: flex; gap: 10px; }
.bf-sand .main-content .bf-senior .senior-doc2-btns .senior-mini:not(.quiet) { flex: 1 1 auto; font-size: 20px; text-decoration: none; }
.bf-senior .senior-mini > span { display: grid; place-items: center; }
.bf-senior .senior-mini svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bf-senior a.senior-big { text-decoration: none; }
/* Et valg med et filfelt er en <label>: husets label small (versaler, 800) gælder ikke her. */
.bf-sand .main-content .bf-senior label.senior-choice .senior-choice-text small { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Passet (/app/program/pas, Gergø 27/9: v735): bedømmelsens pille er 18 px
   som resten af siden; Træningens egen pille er urørt. */
.bf-sand .main-content .bf-senior .senior-pass .senior-pill { font-size: 18px; }

/* Nyt i appen: "Nyt siden sidst", området i accent og teksten i 20 px. */
.bf-sand .main-content .bf-senior .senior-pill.new { justify-self: start; display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--bf-accent-btn); color: #fff; font: 800 18px/1.2 "Hanken Grotesk", sans-serif; }
.bf-senior .senior-news { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 14px; }
.bf-senior .senior-news li { display: grid; gap: 2px; padding-left: 14px; border-left: 4px solid var(--bf-accent); }
.bf-sand .main-content .bf-senior .senior-news b { font-size: 18px; font-weight: 800; color: var(--bf-accent-text, var(--bf-accent)); }
.bf-sand .main-content .bf-senior .senior-news span { font-size: 20px; line-height: 1.4; color: var(--bf-ink); }

/* Rapportér fejl: det store tekstfelt, teksten i trin 3 og det, der sendes
   med af sig selv (to og to, uden streg under den sidste række). */
.bf-sand .main-content .bf-senior .senior-textarea-box { display: block; width: 100%; min-height: 190px; margin: 0; padding: 16px; box-sizing: border-box; border-radius: 18px; border: 3px solid var(--bf-accent); background: var(--bf-surface); color: var(--bf-ink); font: 400 20px/1.4 "Hanken Grotesk", sans-serif; resize: vertical; }
.bf-senior .senior-textarea-box:focus { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-senior .senior-textarea-box::placeholder { color: var(--bf-muted); opacity: 1; }
.bf-sand .main-content .bf-senior .senior-quote { font-size: 20px; line-height: 1.4; color: var(--bf-ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.bf-senior .senior-auto .senior-info-grid .senior-info:nth-last-child(-n+2) { border-bottom: 0; }
.bf-senior .senior-report { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--bf-line); }
.bf-senior .senior-report:last-child { border-bottom: 0; }

/* Test-tjekliste: måleren under svaret. */
.bf-senior .senior-meter { display: block; height: 14px; margin-top: 4px; border-radius: 999px; background: var(--bf-line); overflow: hidden; }
.bf-senior .senior-meter i { display: block; height: 100%; border-radius: 999px; background: var(--bf-accent-btn); }
.bf-sand.bf-dark .main-content .bf-senior .senior-meter i { background: var(--bf-accent); }
/* ===== /Enkel under Mere ===== */

/* v661: Enkel visning-knappen under tema-knappen i klientens menu */
.view-mode-toggle { margin-top: 6px; }

/* v662: slet besked i coachens klientchat */
.coach-chat-bubble { position: relative; }
.coach-chat-del { position: absolute; top: 6px; right: 8px; border: 0; background: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1; padding: 5px 6px; border-radius: 8px; cursor: pointer; opacity: 0.85; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.coach-chat-bubble:hover .coach-chat-del, .coach-chat-del:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.coach-chat-bubble.mine .coach-chat-del { right: auto; left: 8px; }
@media (hover: none) { .coach-chat-del { opacity: 0.7; } }

/* v663: luk-kryds på Kom godt i gang + kortet i Indstillinger */
.startup-card, .phone-startup-card { position: relative; }
/* Gergø så det med det blotte øje 11/9: teksten stod for tæt på kanten netop
   her. Målt på 411 px: hvert andet kort på I dag har 19 px luft i BEGGE sider,
   dette havde 19 til venstre og 11 til højre, fordi ✕ sad på 10 px mens kortets
   padding er 18. Knappen flugter nu med padding'en, og teksten får plads
   reserveret, så en længere overskrift aldrig kan løbe ind under den. */
.startup-prompt-x { position: absolute; top: 14px; right: 18px; }
.startup-card > div, .phone-startup-card > div { padding-right: 34px; }
/* Bred visning: ✕ og handlingsknappen ville begge have det øverste højre hjørne.
   Målt 11/9 på 1280: ✕ lå 1184 til 1212, knappen 1133 til 1212, altså krydset
   oven på knappens hjørne (Gergøs skærmbillede). Her får ✕ sin egen bane, så
   knap-kolonnen stopper før den. På telefon er kortet én kolonne og knappen
   ligger under teksten, så dér ville ekstra luft bare gøre den skæv. */
@media (min-width: 721px) {
  .startup-card { padding-right: 52px; }
}
.startup-finish-card .button { display: inline-block; margin-top: 8px; }
.bodyscan-other { margin-top: 10px; }

/* v664: miniaturer og sletning i klientens dokumentliste */
.doc-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: rgba(0, 0, 0, 0.06); }
.doc-type { font-size: 0.72rem; letter-spacing: 0.04em; opacity: 0.7; min-width: 48px; text-align: center; }
.senior-doc { display: flex; align-items: center; gap: 8px; }
.senior-doc .senior-row { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; }
.senior-doc .senior-row span { display: grid; gap: 2px; }
/* Skeptikernes fund S4 (27/9, fandtes før): et langt filnavn fra coachen skubbede
   hele Kost ud over skærmen (604 px ved 360 px). Rækken må krympe, og navnet brydes. */
.senior-doc .senior-row { min-width: 0; }
.senior-doc .senior-row span { min-width: 0; overflow-wrap: anywhere; }
.senior-doc .senior-row small { font-size: 0.85rem; opacity: 0.7; }
.senior-doc-del { border: 0; background: transparent; font-size: 1.3rem; padding: 10px; border-radius: 12px; cursor: pointer; }
.document-row .doc-del { margin-left: 6px; }

/* v665: InBody/Tanita-ark til aflæsning */
.bodyscan-sheet { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.bodyscan-sheet p { margin: 4px 0 10px; font-size: 0.9rem; opacity: 0.85; }
.bodyscan-sheet-pick { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1.5px dashed rgba(0, 0, 0, 0.25); font-weight: 600; cursor: pointer; }
.bodyscan-sheet-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.bodyscan-sheet-list li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.04); font-size: 0.85rem; }
.bodyscan-sheet-list li.is-done { background: rgba(126, 231, 135, 0.18); }
.bodyscan-sheet-list li.is-unreadable { background: #fff3cd; }
.bodyscan-chip { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.06); font-size: 0.72rem; }
.bodyscan-chip.is-done { background: rgba(126, 231, 135, 0.25); }
.bodyscan-chip.is-unreadable { background: #fff3cd; }

/* v667: fast persona-bjælke øverst (kun ejeren) */
.bf-persona-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9600; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px calc(0px) 12px; font-size: 0.85rem; line-height: 1.2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.bf-persona-bar.is-self { background: #1C1A17; color: #fff; }
.bf-persona-bar.is-impersonating { background: #ff7a3c; color: #1C1A17; font-weight: 600; }
/* Gergø 23/9: én login. Mig som klient er grøn (hvid på #166534 er 7,13:1), så
   jeg altid kan se, at jeg træner på min egen række og ikke er Vis som. */
.bf-persona-bar.is-persona { background: #166534; color: #fff; }
/* Test som (16/9): blå sandkasse, intet gemmes. Hvid på #1D4ED8 er målt til 6,70:1. */
.bf-persona-bar.is-testing { background: #1D4ED8; color: #fff; font-weight: 600; }
.bf-persona-bar.is-testing .bf-persona-bar-btn { background: #fff; color: #1D4ED8 !important; }
/* Gergø 22/9: chokolade-varianten. "Tema i testen" i Test som-banneret: et lille
   valg mellem teksten og Afslut test, hvid flade med blå tekst som knappen
   (#1D4ED8 på hvid er 6,70:1). Pilen er husets baggrundsbillede i currentColor. */
.bf-persona-bar .bf-persona-bar-theme { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; margin: 0; color: inherit; }
.bf-persona-bar .bf-persona-bar-theme-label { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.bf-persona-bar .bf-persona-bar-select { width: auto; min-height: 30px; height: 30px; margin: 0; padding: 0 28px 0 10px; border: 0; border-radius: 999px; background-color: #fff; color: #1D4ED8; font: inherit; font-size: 0.8rem; font-weight: 700; line-height: 1; cursor: pointer; }
/* Ret-runden 22/9 (fund S6): pilen manglede, fordi husets fælles regel for
   input, select og textarea (sat efter select-reglen) nulstiller baggrundsbilledet.
   Uden pil og uden etiket på telefonen lignede valget en knap. */
.bf-persona-bar .bf-persona-bar-select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; }
.bf-persona-bar .bf-persona-bar-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bf-persona-bar .bf-persona-bar-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Gergø 23/9: skifteren er én pille (.bf-persona-knap). De gamle regler for
   .bf-persona-pill gav hvid baggrund med !important-tekst, som i mørkt tema
   blev #1C1A17 på rgb(30,27,24) (1,01), og menuens navne blev hvid på hvid i
   lyst tema (1,00), fordi arv-reglen nedenfor ramte hele bjælken. Nu arver kun
   bjælkens tekst, og pille og menu har deres egne farver. */
.bf-sand .bf-persona-bar .bf-persona-bar-text :is(span, strong, small) { color: inherit !important; }
.bf-persona-bar .bf-persona-knap { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 46vw; margin: 0; padding: 3px 10px 3px 3px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.1; white-space: nowrap; cursor: pointer; }
.bf-persona-bar .bf-persona-knap:hover { background: rgba(255, 255, 255, 0.12); }
.bf-persona-bar .bf-persona-knap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bf-persona-bar .bf-persona-knap :is(span, strong) { color: inherit; }
.bf-persona-bar .bf-persona-knap .bf-persona-knap-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #1C1A17; font-family: "Archivo", sans-serif; font-size: 0.66rem; font-weight: 800; }
.bf-persona-bar .bf-persona-knap-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bf-persona-bar .bf-persona-knap-txt strong { font-weight: 800; }
.bf-persona-bar .bf-persona-knap-caret { flex: none; font-size: 0.7rem; }
.bf-persona-bar.is-persona .bf-persona-knap-av { color: #166534; }
.bf-persona-bar.is-impersonating .bf-persona-knap { border-color: rgba(28, 26, 23, 0.45); color: #1C1A17; }
.bf-persona-bar.is-impersonating .bf-persona-knap:hover { background: rgba(28, 26, 23, 0.08); }
.bf-persona-bar.is-impersonating .bf-persona-knap:focus-visible { outline-color: #1C1A17; }
.bf-persona-bar.is-impersonating .bf-persona-knap-av { background: #1C1A17; color: #fff; }
/* Menuen: tre rækker. Navnet i --bf-ink, underteksten i --bf-muted, begge
   eksplicit, så en knaps standardfarve (color-scheme: dark gav hvid) aldrig arves. */
.bf-sand .bf-persona-bar .bf-persona-menu { top: 44px; right: 0; left: auto; width: 290px; max-width: calc(100vw - 16px); padding: 6px; color: var(--bf-ink, #1C1A17); }
.bf-persona-bar .bf-persona-menu .bf-persona-row { min-height: 48px; padding: 8px 10px; color: var(--bf-ink, #1C1A17); font: inherit; font-weight: 400; }
.bf-persona-bar .bf-persona-menu .bf-persona-meta strong { color: var(--bf-ink, #1C1A17); font-size: 0.86rem; }
.bf-persona-bar .bf-persona-menu .bf-persona-meta small { display: block; color: var(--bf-muted, #6B6453); font-size: 0.74rem; }
.bf-persona-bar .bf-persona-menu .bf-persona-av { width: 32px; height: 32px; font-size: 0.7rem; background: #1C1A17; color: #fff; }
.bf-persona-bar .bf-persona-menu .bf-persona-av.is-mig { background: #166534; }
.bf-sand.bf-dark .bf-persona-bar .bf-persona-menu .bf-persona-av { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.bf-persona-bar .bf-persona-menu .bf-persona-check { flex: none; margin-left: auto; color: var(--bf-ink, #1C1A17); font-weight: 800; }
.bf-persona-bar .bf-persona-menu .bf-persona-row:focus-visible { outline: 2px solid var(--bf-ink, #1C1A17); outline-offset: -2px; }
.bf-persona-bar .bf-persona-visning { display: flex; gap: 6px; padding: 0 10px 8px 52px; }
.bf-persona-bar .bf-persona-mode { flex: 1 1 0; min-height: 34px; margin: 0; padding: 0 10px; border: 1px solid var(--bf-line, #E5DFD2); border-radius: 999px; background: transparent; color: var(--bf-ink, #1C1A17); font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.bf-persona-bar .bf-persona-mode.is-on { border-color: var(--bf-ink, #1C1A17); background: var(--bf-ink, #1C1A17); color: var(--bf-surface, #fff); }
.bf-persona-bar .bf-persona-mode:focus-visible { outline: 2px solid var(--bf-ink, #1C1A17); outline-offset: 2px; }
.bf-persona-bar-btn { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 6px 12px; background: #1C1A17; color: #fff !important; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.bf-persona-bar .bf-persona { flex: 0 0 auto; margin: 0; }
body:has(.bf-persona-bar) .app-shell { padding-top: 40px; }
body:has(.bf-persona-bar) .topbar, body:has(.bf-persona-bar) .sidebar { top: 40px; }
body:has(.bf-persona-bar) .senior-head { padding-top: 8px; }
@media (max-width: 700px) {
  .bf-persona-bar { min-height: 44px; height: auto; padding: calc(4px + env(safe-area-inset-top, 0px)) 10px 4px; gap: 8px; font-size: 0.78rem; }
  .bf-persona-bar .bf-persona-bar-text { white-space: normal; line-height: 1.15; }
  /* Pillen er 44 px at trykke på (gennemsigtig kant, som valget i Test som),
     og bjælken holder husets 44 px. Menuen ligger fast under bjælken. */
  .bf-persona-bar .bf-persona-knap { min-height: 44px; margin: -4px 0; border: solid transparent; border-width: 5px 0; padding: 0 8px 0 3px; border-radius: 22px; background-clip: padding-box; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); font-size: 0.78rem; max-width: 52vw; }
  .bf-persona-bar.is-impersonating .bf-persona-knap { box-shadow: inset 0 0 0 1px rgba(28, 26, 23, 0.45); }
  .bf-sand .bf-persona-bar .bf-persona-menu { position: fixed; top: calc(46px + env(safe-area-inset-top, 0px)); right: 8px; left: auto; width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 60px); overflow-y: auto; }
  /* Skeptikerens D5 (23/9): Enkel og Avanceret er 44 px at trykke på, som pillen. */
  .bf-persona-bar .bf-persona-mode { min-height: 44px; }
  /* Bjælken holder sig på to linjer (44 px): under Vis som og Mig som klient
     står navnet allerede i teksten, så pillen viser kun avatar og funktion, og
     Mig som klient-sætningen står kun på de brede skærme. */
  .bf-persona-bar:is(.is-impersonating, .is-persona) .bf-persona-knap :is(.bf-persona-knap-navn, .bf-persona-knap-sep) { display: none; }
  .bf-persona-bar .bf-persona-bar-more { display: none; }
  .bf-persona-bar .bf-persona-bar-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .bf-persona-bar-btn { padding: 5px 9px; font-size: 0.74rem; }
  /* Tema i testen: på telefonen bærer valget selv navnet (aria-label) og er
     smalt, så teksten ved siden af højst bliver to linjer, og banneret holder
     husets 44 px (målt 360 til 411 px). Et langt valg afkortes med ... */
  .bf-persona-bar .bf-persona-bar-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  /* Skeptikerne 22/9 (fund S5): valget og Afslut test er 44 px at trykke på,
     men ser ud som før (28 og 24 px). En gennemsigtig kant øverst og nederst
     giver trykfladen, background-clip holder den hvide flade inden for kanten,
     og en negativ margen holder banneret på husets 44 px. border-radius med to
     tal giver den indre flade de samme runde ender som før. */
  .bf-persona-bar .bf-persona-bar-select { max-width: 29vw; min-height: 44px; height: 44px; margin: -4px 0; padding: 0 20px 0 8px; border: solid transparent; border-width: 8px 0; border-radius: 14px / 22px; background-clip: padding-box; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%; }
  .bf-persona-bar.is-testing .bf-persona-bar-btn { min-height: 44px; margin: -4px 0; border: solid transparent; border-width: 10px 0; border-radius: 12px / 22px; background-clip: padding-box; }
  body:has(.bf-persona-bar) .app-shell { padding-top: calc(44px + env(safe-area-inset-top, 0px)); }
  body:has(.bf-persona-bar) #bf-workout-timer { top: calc(108px + env(safe-area-inset-top, 0px)); }
  body:has(.bf-persona-bar) .bf-offline-line.is-chrome { margin-top: 0; }
  body:has(.bf-persona-bar):has(#bf-workout-timer) .bf-offline-line.is-chrome { margin-top: calc(118px + env(safe-area-inset-top, 0px)); }
}

/* v668: Messenger-stil på telefon: skrivefeltet fast over bundmenuen, tråden ruller ovenover.
   Bundmenuens højde måles i syncBottomNavHeight() → --bf-bottom-nav-h. */
@media (max-width: 700px) {
  .bf-senior .senior-compose, .portal-message-composer, .coach-message-composer {
    position: fixed; left: 0; right: 0; bottom: calc(var(--bf-bottom-nav-h, 64px) + env(safe-area-inset-bottom, 0px));
    z-index: 40; margin: 0; padding: 8px 12px; background: var(--bf-surface, #fff);
    border-top: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25)); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  }
  .bf-senior .senior-compose { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bf-senior .senior-compose textarea { grid-column: 1 / -1; min-height: 56px; }
  .bf-senior .senior-compose .senior-voice, .bf-senior .senior-compose .senior-big { margin: 0; min-height: 52px; }
  /* v688: målt højde frem for et gæt. Skrivefeltet vokser når man vedhæfter en
     fil (chippen) og i Enkel visning af clipsen, og med de gamle faste tal gik
     den nederste besked i skjul bag feltet netop da. Fallbacken er det gamle tal,
     så en side uden måling ser ud som før. */
  .bf-senior .senior-thread { padding-bottom: calc(var(--bf-composer-h, 200px) + 24px); }
  .portal-thread, .message-thread { padding-bottom: calc(var(--bf-composer-h, 120px) + 24px); }
  .coach-thread-messages { padding-bottom: calc(var(--bf-composer-h, 120px) + 24px); }
}

/* v669: Coach Enkel visning (genbruger .bf-senior-skallen) */
.bf-coach-simple .csb-ic { font-style: normal; font-size: 1.3rem; line-height: 1; }
.bf-coach-simple .csb-ic.big { font-size: 1.6rem; }
.bf-coach-simple .senior-tile { min-height: 104px; }
/* Skeptikerne 28/9 (Kræver dig, fund 14): flisens tekst ombrydes som i mockuppen
   (Ingen / kræver dig, to linjer). Appens flise er 12 px smallere end mockuppens
   (28 px sidemargen mod 16), så 24 px Archivo brød i tre linjer; 22 px med
   mockuppens linjehøjde 1,15 giver to. */
.bf-coach-simple .senior-tile-label { font-size: 22px; line-height: 1.15; }
.bf-coach-simple .senior-tile small { font-size: 0.82rem; opacity: 0.8; }
/* Skeptikerne 28/9 (Kræver dig, fund 5): hvid på orange uden opacity (0,8 gav 3,9:1). */
.bf-coach-simple .senior-tile.hot small { color: #fff !important; opacity: 1; }
.bf-coach-simple .senior-card.paper h3 { font-size: 1rem; margin: 0 0 6px; }
.bf-coach-simple .senior-row.link { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bf-line, rgba(127,127,127,0.25)); text-decoration: none; color: inherit; width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0; font: inherit; text-align: left; cursor: pointer; }
.bf-coach-simple .senior-row.link:last-child { border-bottom: 0; }
.bf-coach-simple .senior-row .av { width: 44px; height: 44px; border-radius: 50%; background: rgba(193, 82, 31, 0.14); color: var(--bf-accent, #C1521F); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; font-size: 0.9rem; }
.bf-coach-simple .senior-row .av.time { border-radius: 12px; font-size: 0.85rem; }
.bf-coach-simple .senior-row > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
/* Skeptikerne 28/9 (Kræver dig, fund 4): tekst på rækker mindst 18 px (spec'ens
   fælles regel), dæmpet med farve, ikke opacity (0,75 gav 4,2:1). */
.bf-coach-simple .senior-row small { font-size: 18px; line-height: 1.3; opacity: 1; color: var(--bf-muted, #6b6453); }
.bf-coach-simple .senior-row .chip { font-size: 18px; }
.bf-coach-simple .senior-row .chip.acc { min-width: 36px; text-align: center; }
.bf-coach-simple .chip { flex: 0 0 auto; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 700; font-style: normal; background: var(--bf-surface2, #F2EEE5); border: 1px solid var(--bf-line, #D8D2C4); }
/* Skeptikerne 28/9 (Kræver dig, fund 4): hvid på --bf-accent-btn som knapperne (5,2:1 lyst, 5,0:1 mørkt); --bf-accent gav 4,2:1 og 3,3:1. */
.bf-coach-simple .chip.acc { background: var(--bf-accent-btn, var(--bf-accent, #C1521F)); color: #fff !important; border-color: transparent; }
.bf-coach-simple .chip.good { background: #DDF3E0; color: #1F5A2A !important; border-color: transparent; }
.bf-coach-simple .chip.warn { background: #fff3cd; color: #5c4400 !important; border-color: transparent; }
.bf-coach-simple .chip.bad { background: #F9DEDA; color: #7A2418 !important; border-color: transparent; }
.bf-coach-simple .csimple-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.bf-coach-simple .senior-pill { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--bf-line, #D8D2C4); background: var(--bf-surface2, #F2EEE5); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 0.92rem; color: inherit; text-decoration: none; cursor: pointer; }
.bf-coach-simple .senior-pill.on { background: #DDF3E0; color: #1F5A2A !important; border-color: transparent; }
.bf-coach-simple .csimple-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 0.95rem; }
.bf-coach-simple .csimple-kv dt { opacity: 0.7; }
.bf-coach-simple .csimple-kv dd { margin: 0; }
.bf-coach-simple .senior-big.quiet { text-decoration: none; display: block; text-align: center; }
/* v671: ét-trykssvarene er skærmens hovedhandling, så de får Enkel visnings
   knapmål (≥ 56 px, målt 40 px som almindelige piller) og hver sin linje: en
   hel sætning skal kunne læses før den sendes. */
.bf-coach-simple .csimple-replies { display: grid; gap: 8px; margin: 4px 0 12px; }
.bf-coach-simple .senior-pill.csimple-reply { display: flex; width: 100%; min-height: 56px; justify-content: flex-start; text-align: left; font-size: 1rem; padding: 12px 14px; }
/* v671: ét spørgsmål + svar pr. blok i check-in-gennemgangen. Farven arves fra
   kortet, så teksten aldrig kan skille sig fra sin egen flade (se §1). */
.bf-coach-simple .csimple-q { margin: 0 0 10px; }
.bf-coach-simple .csimple-q strong { display: block; font-size: 0.95rem; }
.bf-coach-simple .csimple-q p { margin: 2px 0 0; opacity: 0.75; color: inherit; font-size: 0.95rem; }
.bf-coach-simple.wrap .senior-screen { padding-top: 6px; padding-bottom: 110px; }
/* Skeptikerne 28/9 (Kræver dig, fund 9): tilbage-linket over Betalinger og Programmer i skallen. */
.bf-coach-simple.wrap .kd-wrap-head { padding: 22px 16px 0; }
.bf-coach-simple .senior-bar a .csb-ic { font-size: 1.25rem; }
.bf-coach-simple .theme-toggle { margin-top: 12px; width: 100%; justify-content: center; }
body:has(.bf-coach-simple) .bf-tabbar { display: none !important; }
.bf-persona-bar-btn.ghost { background: transparent; color: inherit !important; border: 1.5px solid rgba(255, 255, 255, 0.45); }
.bf-persona-bar.is-self .bf-persona-bar-btn.ghost { color: #fff !important; }

/* Gergø 28/9: Kræver dig, klodserne fra mockuppen
   (_design_handoff/kraever-dig-mockup-2026-09-28.html). Én række = én klient,
   én sætning, én knap; navn og sætning er ét link med samme mål som knappen
   (mindst 52 px). Tilbage-linket i coach-Enkel får 52 px trykflade (før 16 px
   tekst uden højde), Hurtigt-pillerne 52 px (før 44 på tablet, mindre på
   telefon). Knapper på orange har color:#fff !important (sand dark-pill-fælden:
   arvet inkfarve målte 3,3:1 lyst). Pauserækken dæmpes med farve, aldrig med
   opacity (0,6 gav 2,0:1 på initialerne). */
/* Initialerne i --bf-accent-text (--bf-accent målte 3,45:1 på lys sand;
   --bf-accent-text 5,2:1 lyst og 6,1:1 mørkt), også for Træner i dag og
   klientlisten; reglen ovenfor (v669) står urørt, den her ligger efter den. */
.bf-coach-simple .senior-row .av, .bf-coach-simple .kd-row .av { width: 44px; height: 44px; border-radius: 50%; background: rgba(193, 82, 31, 0.14); color: var(--bf-accent-text, var(--bf-accent, #C1521F)); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; font-size: 0.9rem; }
.bf-coach-simple .senior-back { display: inline-flex; align-items: center; min-height: 52px; margin: -16px 0 -12px; padding-right: 20px; justify-self: start; }
.bf-coach-simple .csimple-pills .senior-pill { min-height: 52px; }
.bf-coach-simple .senior-lead { margin: 0; font-size: 18px; line-height: 1.35; color: var(--bf-muted, #6b6453); }
.bf-coach-simple .kd-list { display: grid; }
.bf-coach-simple .kd-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--bf-line, rgba(127,127,127,0.25)); align-items: start; color: inherit; text-decoration: none; }
.bf-coach-simple .kd-row:last-child { border-bottom: 0; }
.bf-coach-simple .kd-row .av { margin-top: 2px; }
.bf-coach-simple .kd-text { display: grid; gap: 4px; min-width: 0; min-height: 52px; align-content: start; color: inherit; text-decoration: none; }
.bf-coach-simple button.kd-text { width: 100%; background: transparent; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.bf-coach-simple .kd-text strong { font: 800 21px/1.2 "Archivo", sans-serif; overflow-wrap: anywhere; }
.bf-coach-simple .kd-sent { font-size: 18px; line-height: 1.3; color: inherit; overflow-wrap: anywhere; }
.bf-coach-simple .kd-btn { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 14px; border: 0; background: var(--bf-accent-btn, var(--bf-accent, #c75d34)); color: #fff !important; font: 800 18px/1.1 "Hanken Grotesk", sans-serif; text-decoration: none; cursor: pointer; }
.bf-coach-simple .kd-btn.quiet { background: var(--bf-surface, #fff); color: var(--bf-ink, inherit) !important; border: 2px solid var(--bf-muted, #6b6453); }
.bf-coach-simple .kd-btn.full { grid-column: 1 / -1; width: 100%; min-height: 56px; font-size: 19px; }
.bf-coach-simple .kd-btns { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.bf-coach-simple .kd-row.dim .av { background: var(--bf-surface2, #F2EEE5); color: var(--bf-muted, #6b6453); border: 1px solid var(--bf-line, #D8D2C4); }
.bf-coach-simple .kd-row.dim .kd-sent { color: var(--bf-muted, #6b6453); }
.bf-coach-simple .kd-row.quiet { grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; }
.bf-coach-simple .kd-row.quiet .kd-sent { color: var(--bf-muted, #6b6453); }
.bf-coach-simple .kd-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0 0; font-size: 18px; color: var(--bf-muted, #6b6453); text-decoration: none; }
.bf-coach-simple .kd-more b { color: var(--bf-ink, inherit); font-weight: 700; }
.bf-coach-simple .chip.chev { font-size: 22px; line-height: 1; padding: 4px 12px; color: var(--bf-accent-text, var(--bf-accent, #C1521F)) !important; }
.bf-coach-simple .kd-block { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 18px; background: var(--bf-surface, #fff); border: 3px solid var(--bf-accent, #c75d34); }
.bf-coach-simple .kd-eyebrow { font: 800 14px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-accent-text, var(--bf-accent, #C1521F)); }
.bf-coach-simple .kd-block p { margin: 0; font-size: 20px; line-height: 1.3; }
.bf-coach-simple .kd-away { margin: 0; font-size: 17px; line-height: 1.35; color: var(--bf-muted, #6b6453); }
/* Gergø 28/9: Kræver dig, etape 3: check-in-siden. Linjen 18 px; den dæmpede
   Mindet om det-knap dæmpes med farve, ikke opacity; Andre check-ins-rækkerne
   52 px med undertekst 18 px; beskedfeltet i Mind om det over flere linjer, så
   hele teksten står synligt, før han trykker Send. */
.bf-coach-simple .kd-line { margin: 0; font-size: 18px; line-height: 1.35; }
.bf-coach-simple .kd-muted { color: var(--bf-muted, #6b6453); }
.bf-coach-simple .senior-big.dim, .bf-coach-simple .senior-big.dim:disabled { background: var(--bf-surface2, #F2EEE5); color: var(--bf-muted, #6b6453) !important; border: 2px dashed var(--bf-muted, #6b6453); opacity: 1; cursor: default; }
.bf-coach-simple .senior-row.kd-other { min-height: 52px; }
.bf-coach-simple .senior-row.kd-other > span:first-child { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bf-coach-simple .senior-row.kd-other strong { font-size: 19px; }
.bf-coach-simple .senior-row.kd-other small { font-size: 18px; opacity: 1; color: var(--bf-muted, #6b6453); }

/* ===================== Ny aftale (v741), etape 2: coachens Enkel =====================
   Gergø 29/9. Arket, kvitteringen, listen Hvem, Kalender som dagsliste og
   bundarket (mockuppen _design_handoff/ny-aftale-mockup-2026-09-29.html).
   Alle knapper, valg, felter og rækker mindst 52 px, al tekst mindst 18 px,
   farverne fra temaets tokens, så lyst og mørkt følger med (målt i browseren). */
.bf-coach-simple.aft-side .senior-back { font-size: 18px; }
.bf-coach-simple.aft-side button.senior-back.aft-back { background: none; border: 0; padding-left: 0; font: inherit; font-size: 18px; color: inherit; cursor: pointer; }
.bf-coach-simple.aft-side .aft-kort { display: grid; gap: 10px; }
.bf-coach-simple.aft-side .senior-card.paper.aft-kort h3 { font: 800 21px/1.25 "Archivo", sans-serif; margin: 0 0 4px; color: var(--bf-ink); }
.bf-coach-simple.aft-side .aft-who { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.bf-coach-simple.aft-side .aft-who .av, .bf-coach-simple.aft-side .aft-person .av { width: 48px; height: 48px; border-radius: 50%; background: rgba(193, 82, 31, 0.14); color: var(--bf-accent-text, var(--bf-accent)); display: grid; place-items: center; flex: 0 0 auto; font: 800 18px/1 "Hanken Grotesk", sans-serif; }
.bf-coach-simple.aft-side .aft-who strong { flex: 1 1 auto; min-width: 0; font: 800 22px/1.2 "Archivo", sans-serif; overflow-wrap: anywhere; }
.bf-coach-simple.aft-side .aft-skift { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 64px; padding: 0 8px; font: 700 18px/1 "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)); text-decoration: none; }
.bf-coach-simple.aft-side .aft-nu { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--bf-surface2); border-left: 4px solid var(--bf-accent); font-size: 18px; line-height: 1.35; font-weight: 700; }
.bf-coach-simple.aft-side .aft-sidst { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 2px dashed var(--bf-muted); background: var(--bf-surface2); color: var(--bf-ink); font: 400 18px/1.3 "Hanken Grotesk", sans-serif; text-align: left; cursor: pointer; }
.bf-coach-simple.aft-side .aft-sidst > span:last-child { flex: 1 1 auto; min-width: 0; }
.bf-coach-simple.aft-side .aft-sidst b { font-weight: 800; }
.bf-coach-simple.aft-side .aft-sidst.on { border-style: solid; border-color: var(--bf-accent); }
.bf-coach-simple.aft-side .aft-lbl { display: block; margin: 8px 0 0; font: 800 18px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.02em; color: var(--bf-accent-text, var(--bf-accent)); }
.bf-coach-simple.aft-side .aft-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bf-coach-simple.aft-side .aft-chips.three { grid-template-columns: 1fr 1fr 1fr; }
.bf-coach-simple.aft-side .aft-chips.three .aft-chip { padding-left: 4px; padding-right: 4px; }
/* Gergø 30/9: v746, skeptikernes fund 6. Kostvejledning (120 px ved 18 px) brød midt i ordet på 360 px ("Kostvejlednin" / "g"): knappen har 3 px luft i siden (før 8), så ordet står helt, og orddeling (lang=da) før et vilkårligt brud på en endnu smallere skærm. */
.bf-coach-simple.aft-side .aft-chip { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 6px 3px; border-radius: 14px; border: 2px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: 700 18px/1.15 "Hanken Grotesk", sans-serif; text-align: center; cursor: pointer; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.bf-coach-simple.aft-side .aft-chip small { display: block; font-size: 18px; font-weight: 600; color: var(--bf-muted); }
.bf-coach-simple.aft-side .aft-chip.on { background: var(--bf-accent-btn, var(--bf-accent)); border-color: var(--bf-accent-btn, var(--bf-accent)); color: #fff !important; }
.bf-coach-simple.aft-side .aft-chip.on small { color: #fff !important; }
.bf-coach-simple.aft-side .aft-chip.wide { grid-column: 1 / -1; }
.bf-coach-simple.aft-side .aft-chip:focus-visible, .bf-coach-simple.aft-side .aft-sidst:focus-visible, .bf-coach-simple.aft-side .aft-field:focus-visible, .bf-coach-simple.aft-side .aft-link:focus-visible, .bf-coach-simple.aft-side .aft-ret:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-coach-simple.aft-side .aft-field, .bf-sand .main-content .bf-coach-simple.aft-side .aft-field { display: block; width: 100%; box-sizing: border-box; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 2px solid var(--bf-muted); background: var(--bf-surface2); color: var(--bf-ink); font: 400 18px/1.3 "Hanken Grotesk", sans-serif; }
.bf-coach-simple.aft-side .aft-field[aria-invalid="true"] { border-color: var(--bf-attn-crit); }
.bf-coach-simple.aft-side .aft-field::placeholder { color: var(--bf-muted); opacity: 1; }
.bf-coach-simple.aft-side .aft-minutter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bf-coach-simple.aft-side .aft-minutter span { font-size: 18px; }
.bf-coach-simple.aft-side .aft-err { margin: 0; font: 700 18px/1.3 "Hanken Grotesk", sans-serif; color: var(--bf-attn-crit); }
.bf-coach-simple.aft-side .aft-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bf-attn-warn-bg); color: var(--bf-attn-warn); font: 600 18px/1.35 "Hanken Grotesk", sans-serif; }
.bf-coach-simple.aft-side :is(.aft-kort, .aft-bund) [hidden] { display: none !important; }
.bf-coach-simple.aft-side .aft-msg { display: grid; gap: 6px; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--bf-surface3, var(--bf-surface2)); border: 1px solid var(--bf-line); }
.bf-coach-simple.aft-side .aft-msg-lbl { font: 800 18px/1.2 "Hanken Grotesk", sans-serif; color: var(--bf-muted); }
.bf-coach-simple.aft-side .aft-msg-tekst { margin: 0; font-size: 18px; line-height: 1.4; color: var(--bf-ink); }
.bf-coach-simple.aft-side .aft-msg-felt { min-height: 150px; resize: vertical; line-height: 1.4; }
.bf-coach-simple.aft-side .aft-ret { justify-self: start; min-height: 52px; padding: 0 4px; background: none; border: 0; font: 700 18px/1 "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)) !important; cursor: pointer; }
.bf-coach-simple.aft-side .aft-note { margin: 0; font-size: 18px; line-height: 1.35; color: var(--bf-attn-warn); font-weight: 600; }
.bf-coach-simple.aft-side .aft-gem { margin-top: 6px; }
.bf-coach-simple.aft-side .aft-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 10px; background: none; border: 0; font: 700 18px/1.2 "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)) !important; text-align: center; text-decoration: none; cursor: pointer; }
.bf-coach-simple.aft-side .aft-banner { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bf-attn-warn-bg); color: var(--bf-attn-warn); font: 700 18px/1.3 "Hanken Grotesk", sans-serif; }
.bf-coach-simple.aft-side .aft-status { display: grid; gap: 8px; }
.bf-coach-simple.aft-side .aft-status-linje { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; line-height: 1.35; }
.bf-coach-simple.aft-side .aft-status-linje i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 "Hanken Grotesk", sans-serif; font-style: normal; background: rgba(74, 106, 67, 0.16); color: var(--bf-attn-good); }
.bf-coach-simple.aft-side .aft-status-linje.vent i { background: var(--bf-surface2); color: var(--bf-muted); border: 2px solid var(--bf-muted); }
.bf-coach-simple.aft-side .aft-status-linje.fejl i { background: var(--bf-attn-crit-bg); color: var(--bf-attn-crit); }
.bf-coach-simple.aft-side .aft-status-linje.fejl span { color: var(--bf-attn-crit); font-weight: 700; }
.bf-coach-simple.aft-side .senior-big.aft-small { min-height: 52px; padding: 12px 14px; font-size: 19px; }
.bf-coach-simple.aft-side .aft-to { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-coach-simple.aft-side .aft-to > * { display: flex; align-items: center; justify-content: center; margin: 0; }
.bf-coach-simple.aft-side .senior-big.quiet { border: 2px solid var(--bf-muted); }
.bf-coach-simple.aft-side .kd-away { font-size: 18px; }
.bf-coach-simple.aft-side .aft-soeg { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: 16px; border: 2px solid var(--bf-muted); background: var(--bf-surface2); font-size: 20px; }
.bf-coach-simple.aft-side .aft-soeg input, .bf-sand .main-content .bf-coach-simple.aft-side .aft-soeg input { flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; background: transparent; color: var(--bf-ink); font: 400 19px/1.2 "Hanken Grotesk", sans-serif; outline: none; box-shadow: none; }
.bf-coach-simple.aft-side .aft-soeg:focus-within { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-coach-simple.aft-side .aft-personer { display: grid; }
.bf-coach-simple.aft-side .aft-person { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--bf-line); color: inherit; text-decoration: none; }
.bf-coach-simple.aft-side .aft-person:last-child { border-bottom: 0; }
.bf-coach-simple.aft-side .aft-person > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bf-coach-simple.aft-side .aft-person strong { font: 800 20px/1.2 "Archivo", sans-serif; overflow-wrap: anywhere; }
.bf-coach-simple.aft-side .aft-person small { font-size: 18px; line-height: 1.3; color: var(--bf-muted); }
.bf-coach-simple.aft-side .senior-row.aft-row { min-height: 64px; }
.bf-coach-simple.aft-side .senior-row.aft-row strong { font-size: 20px; }
.bf-coach-simple.aft-side .senior-row.aft-row .av.time, .bf-coach-simple .senior-card .senior-row .av.time { width: 64px; height: 48px; border-radius: 12px; font: 800 18px/1 "Hanken Grotesk", sans-serif; }
.bf-coach-simple.aft-side .senior-card.aft-idag { border: 3px solid var(--bf-accent); }
.bf-coach-simple.aft-side .aft-tag { display: inline-block; margin-right: 8px; padding: 2px 12px; border-radius: 999px; background: var(--bf-accent-btn, var(--bf-accent)); color: #fff !important; font: 800 18px/1.4 "Hanken Grotesk", sans-serif; vertical-align: middle; }
.bf-coach-simple.aft-side .aft-dag { margin: 8px 0 0; font: 800 18px/1.25 "Hanken Grotesk", sans-serif; color: var(--bf-ink); }
.bf-coach-simple.aft-side .aft-dim { position: fixed; inset: 0; z-index: 1200; display: grid; align-items: end; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0.54); }
.bf-coach-simple.aft-side .aft-bund { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; margin: 0 auto; box-sizing: border-box; display: grid; gap: 12px; padding: 18px 16px; border-radius: 22px; background: var(--bf-surface); color: var(--bf-ink); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35); }
.bf-coach-simple.aft-side .aft-bund h2 { margin: 0; font: 800 22px/1.25 "Archivo", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-coach-simple.aft-side .aft-bund p { margin: 0; font-size: 18px; line-height: 1.35; color: var(--bf-ink); }
.bf-coach-simple.aft-side .aft-bund p.kd-away { color: var(--bf-muted); }
.bf-coach-simple.aft-side .aft-bund-knapper { display: grid; gap: 10px; }
.bf-coach-simple.aft-side .aft-bund-knapper .senior-big { min-height: 52px; padding: 14px 10px; font-size: 20px; text-decoration: none; text-align: center; }
.bf-coach-simple .senior-pill.acc { border: 2px solid var(--bf-accent); }
/* Kalender-knappen i coachens skrivefelt: samme størrelse og kant som
   emoji-knappen ved siden af (44 x 44), i samme række som clipsen. */
.app-shell .main-content .coach-message-composer .aft-chat-knap { display: inline-grid; place-items: center; flex: 0 0 auto; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.3)); background: transparent; font-size: 1.4rem; line-height: 1; text-decoration: none; color: inherit; }
.app-shell .main-content .coach-message-composer .aft-chat-knap:focus-visible { outline: 3px solid var(--bf-accent, #c75d34); outline-offset: 2px; }
.app-shell .main-content .coach-message-composer:has(.chat-emoji-toggle):has(.aft-chat-knap) { grid-template-columns: auto auto auto minmax(0, 1fr); }
.app-shell .main-content .coach-message-composer:has(.chat-emoji-toggle) > a.aft-chat-knap { grid-column: auto; }
/* Gergø 30/9: v741, efterprøven (prøvefletningen med v740). v740's ENKEL SKRIVER
   gør coachens skrivefelt i Enkel kompakt, mens der skrives, til og med 700 px:
   kun tekstfeltet og Send. Kalender-knappen går væk på samme måde som clipsen og
   emoji-knappen; ellers står den på Sends plads, og Send ryger ned på en ny
   linje. Den kommer tilbage, når feltet mister fokus. */
@media (max-width: 700px) {
  .app-shell.bf-sand .main-content .bf-coach-simple .coach-message-composer:has(input[name="body"]:focus) .aft-chat-knap { display: none; }
}
/* ===================== /Ny aftale (v741), etape 2 ===================== */

/* ===================== Ny aftale (v741), etape 3: Avanceret og PC =====================
   Gergø 29/9. Dialogen Ny aftale (mockuppens skærm 7): 900 px bred med felterne
   til venstre og Din dag til højre; under 900 px ét ark i fuld skærm med felterne
   som i Enkel (52 px og 18 px) og uden Din dag. Bjælken efter gem, knappen Ny
   aftale (orange kant) i klientfilens hoved, på Check-ins-siden og i dagpanelet,
   kalender-knappen i coachens skrivefelt i Avanceret og en aflyst mødechip.
   Trykflader mindst 44 px på PC, farverne fra temaets tokens (lyst og mørkt). */
.aftd-dim { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.5); }
.aftd { width: min(900px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 20px; background: var(--bf-surface); color: var(--bf-ink); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4); font: 400 15px/1.35 "Hanken Grotesk", sans-serif; text-align: left; }
.aftd.hvem { width: min(560px, 100%); }
.aftd [hidden] { display: none !important; }
.aftd-hoved { display: flex; align-items: center; gap: 12px; padding: 16px 24px 12px; border-bottom: 1px solid var(--bf-line); }
.aftd-hoved h2 { margin: 0; font: 800 24px/1.15 "Archivo", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.app-shell .aftd-x { margin-left: auto; flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: 400 22px/1 "Hanken Grotesk", sans-serif; cursor: pointer; }
.aftd-krop { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; }
.aftd-krop.en { grid-template-columns: minmax(0, 1fr); }
.aftd-form { min-height: 0; overflow: auto; padding: 14px 24px 18px; display: grid; gap: 9px; align-content: start; }
.aftd-lead { margin: 0; font-size: 16px; line-height: 1.4; color: var(--bf-ink); }
.aftd-who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 44px; }
.aftd-who .av, .aftd-person .av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bf-surface3); color: var(--bf-accent-text); font: 800 14px/1 "Hanken Grotesk", sans-serif; }
.aftd-who strong { font: 800 17px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.app-shell .aftd-skift, .app-shell .aftd-ret { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--bf-accent-text) !important; font: 700 14px/1 "Hanken Grotesk", sans-serif; cursor: pointer; }
.app-shell .aftd-sidst { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px dashed var(--bf-muted); background: var(--bf-surface2); color: var(--bf-ink); font: 700 14px/1.2 "Hanken Grotesk", sans-serif; text-align: left; cursor: pointer; }
.app-shell .aftd-sidst.on { border-style: solid; border-color: var(--bf-accent); }
.aftd-nu { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--bf-surface2); border-left: 4px solid var(--bf-accent); font-weight: 700; }
.aftd-lbl { display: block; margin: 4px 0 0; font: 800 12.5px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-accent-text); }
.aftd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.app-shell .aftd-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: 700 14.5px/1.2 "Hanken Grotesk", sans-serif; cursor: pointer; }
.app-shell .aftd-chip small { font-size: 12.5px; font-weight: 600; color: var(--bf-muted); }
.app-shell .aftd-chip.on { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff !important; }
.app-shell .aftd-chip.on small { color: #fff !important; }
.aftd-felter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aftd-felter.to { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aftd-felt-l { display: grid; gap: 4px; min-width: 0; }
.aftd-felt-l > span { font-size: 13px; font-weight: 700; color: var(--bf-muted); }
.app-shell .aftd .aftd-felt { display: block; width: 100%; min-width: 0; box-sizing: border-box; min-height: 44px; margin: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--bf-muted); background: var(--bf-surface2); color: var(--bf-ink); font: 400 15px/1.3 "Hanken Grotesk", sans-serif; box-shadow: none; }
.app-shell .aftd .aftd-felt[aria-invalid="true"] { border-color: var(--bf-attn-crit); }
.app-shell .aftd .aftd-felt::placeholder { color: var(--bf-muted); opacity: 1; }
.app-shell .aftd .aftd-msg-felt { min-height: 110px; resize: vertical; line-height: 1.4; }
.aftd-fejl { margin: 0; font: 700 14px/1.3 "Hanken Grotesk", sans-serif; color: var(--bf-attn-crit); }
.aftd-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bf-attn-warn-bg); color: var(--bf-attn-warn); font-weight: 600; }
.aftd-hjaelp { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--bf-muted); }
.aftd-msg { display: grid; gap: 4px; margin-top: 4px; padding: 12px 14px; border-radius: 12px; background: var(--bf-surface3); border: 1px solid var(--bf-line); }
.aftd-msg-lbl { font: 800 12.5px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-muted); }
.aftd-msg-tekst { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--bf-ink); }
.app-shell .aftd-ret { justify-self: start; padding: 0; }
.aftd-note { margin: 0; font-size: 13px; font-weight: 600; color: var(--bf-attn-warn); }
.aftd-fod { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; padding: 14px 24px; border-top: 1px solid var(--bf-line); }
.app-shell .aftd-knap { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); font: 700 14.5px/1.2 "Hanken Grotesk", sans-serif; text-align: center; cursor: pointer; }
.app-shell .aftd-knap.tekst { margin-right: auto; border-color: transparent; background: transparent; color: var(--bf-accent-text) !important; }
.app-shell .aftd-knap.orange { min-height: 48px; padding: 0 22px; border-color: var(--bf-accent-btn); background: var(--bf-accent-btn); color: #fff !important; font-size: 15.5px; }
.app-shell .aftd-knap.orange.dim { border: 2px dashed var(--bf-muted); background: var(--bf-surface2); color: var(--bf-muted) !important; cursor: default; }
.app-shell :is(.aftd, .aftd-bjaelke) :is(button, input, select, textarea):focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.aftd-soeg { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bf-muted); background: var(--bf-surface2); }
.app-shell .aftd-soeg input { flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--bf-ink); font: 400 16px/1.2 "Hanken Grotesk", sans-serif; outline: none; box-shadow: none; }
.aftd-soeg:focus-within { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.app-shell .aftd .aftd-soeg input:focus-visible { outline: none; }
.app-shell .aftd-soeg input::placeholder { color: var(--bf-muted); opacity: 1; }
.aftd-personer { display: grid; }
.app-shell .aftd-person { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--bf-line); background: none; color: var(--bf-ink); font: inherit; text-align: left; cursor: pointer; }
.app-shell .aftd-person:last-child { border-bottom: 0; }
.aftd-person > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.aftd-person strong { font: 800 16px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.aftd-person small { font-size: 13.5px; color: var(--bf-muted); }
.aftd-person em { font-style: normal; color: var(--bf-muted); }
/* Din dag: 50 px pr. time; blokkene og hullerne ligger absolut i tidslinjen. */
.aftd-dag { min-height: 0; overflow: auto; display: grid; gap: 8px; align-content: start; padding: 12px 18px 18px; border-left: 1px solid var(--bf-line); background: var(--bf-surface2); }
.aftd-dag h3 { margin: 0; font: 800 16px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.aftd-dag p { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--bf-muted); }
.aftd-dag p.aftd-hel { color: var(--bf-ink); font-weight: 600; }
.aftd-tl { position: relative; margin-top: 8px; }
.aftd-time { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bf-line); font-size: 11px; color: var(--bf-muted); }
.aftd-time span { position: absolute; top: -8px; left: 0; padding-right: 4px; background: var(--bf-surface2); line-height: 1.3; }
.aftd-blok { position: absolute; box-sizing: border-box; overflow: hidden; padding: 4px 10px; border-radius: 8px; border-left: 3px solid var(--bf-attn-info); background: var(--bf-attn-info-bg); color: var(--bf-ink); font-size: 12.5px; line-height: 1.25; }
.aftd-blok b { display: block; font-size: 12.5px; font-weight: 800; }
.aftd-blok span { display: block; }
.aftd-blok.kort { padding: 1px 10px; line-height: 1.15; }
.aftd-blok.kort b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.aftd-blok.smal { padding: 3px 6px; }
.aftd-blok.smal :is(b, span) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.aftd-blok.ny { z-index: 2; border: 2px dashed var(--bf-accent); background: var(--bf-surface); color: var(--bf-accent-text); }
.app-shell .aftd-hul { position: absolute; left: 46px; right: 0; box-sizing: border-box; min-height: 0; overflow: hidden; margin: 0; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--bf-muted); background: transparent; color: var(--bf-muted); font: italic 400 12.5px/1.25 "Hanken Grotesk", sans-serif; text-align: left; }
.app-shell button.aftd-hul { cursor: pointer; }
.app-shell button.aftd-hul:hover { border-color: var(--bf-accent); color: var(--bf-accent-text); }
.aftd-hul.lille { font-size: 11.5px; }
/* Under 900 px: ét ark i fuld skærm, felterne som i Enkel, uden Din dag. */
@media (max-width: 899px) {
  .aftd-dim { padding: 0; place-items: stretch; }
  .aftd, .aftd.hvem { width: 100%; max-height: none; height: 100%; border-radius: 0; font-size: 18px; }
  .aftd-hoved { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
  .aftd-hoved h2 { font-size: 22px; }
  .app-shell .aftd-x { width: 52px; height: 52px; min-height: 52px; }
  .aftd-krop { grid-template-columns: minmax(0, 1fr); }
  .aftd-dag { display: none; }
  .aftd-form { padding: 14px 16px 20px; gap: 10px; }
  .aftd-lead { font-size: 18px; }
  .aftd-lbl, .aftd-msg-lbl { font-size: 18px; letter-spacing: 0.02em; text-transform: none; }
  .aftd-who strong { font-size: 20px; }
  .app-shell .aftd-sidst { justify-self: stretch; min-height: 52px; font-size: 18px; }
  .app-shell :is(.aftd-skift, .aftd-ret) { min-height: 52px; font-size: 18px; }
  .aftd-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .app-shell .aftd-chip { flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 8px; font-size: 18px; }
  .app-shell .aftd-chip small { font-size: 16px; }
  .aftd-felter, .aftd-felter.to { grid-template-columns: minmax(0, 1fr); }
  .aftd-felt-l > span { font-size: 18px; color: var(--bf-ink); }
  .app-shell .aftd .aftd-felt { min-height: 52px; font-size: 18px; }
  .aftd-fejl, .aftd-warn, .aftd-msg-tekst, .aftd-note { font-size: 18px; }
  .aftd-hjaelp { font-size: 16px; }
  .aftd-soeg { min-height: 56px; }
  .app-shell .aftd-soeg input { font-size: 18px; min-height: 52px; }
  .app-shell .aftd-person { min-height: 64px; }
  .aftd-person strong { font-size: 19px; }
  .aftd-person small { font-size: 16px; }
  .aftd-who .av, .aftd-person .av { width: 44px; height: 44px; font-size: 16px; }
  .aftd-fod { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .app-shell .aftd-knap, .app-shell .aftd-knap.orange { width: 100%; min-height: 52px; font-size: 18px; }
  .app-shell .aftd-knap.tekst { margin-right: 0; }
}
/* Bjælken efter gem: nederst til højre på PC, over bundmenuen på telefonen. */
.aftd-bjaelke { position: fixed; right: 20px; bottom: 20px; z-index: 1250; width: min(440px, calc(100vw - 24px)); box-sizing: border-box; display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--bf-line); border-left: 4px solid var(--bf-accent); background: var(--bf-surface); color: var(--bf-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); font: 400 14.5px/1.35 "Hanken Grotesk", sans-serif; }
.aftd-bj-hoved { display: flex; align-items: center; gap: 10px; }
.aftd-bj-hoved strong { font: 800 17px/1.25 "Archivo", sans-serif; color: var(--bf-ink); }
.aftd-bj-hvad { margin: 0; font-weight: 600; }
.aftd-bj-linjer { display: grid; gap: 6px; }
.aftd-bj-l { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.aftd-bj-l i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 13px/1 "Hanken Grotesk", sans-serif; font-style: normal; background: var(--bf-surface2); color: var(--bf-attn-good, var(--bf-ink)); border: 1px solid var(--bf-line); }
.aftd-bj-l.vent i { color: var(--bf-muted); }
.aftd-bj-l.fejl i { background: var(--bf-attn-crit-bg); color: var(--bf-attn-crit); }
.aftd-bj-l.fejl span { color: var(--bf-attn-crit); font-weight: 700; }
.aftd-bj-knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.aftd-bj-knapper:empty { display: none; }
@media (max-width: 899px) {
  .aftd-bjaelke { left: 12px; right: 12px; width: auto; bottom: calc(var(--bf-bottom-nav-h, 0px) + 12px + env(safe-area-inset-bottom, 0px)); gap: 6px; padding: 12px 14px; font-size: 15px; }
  .app-shell .aftd-bjaelke .aftd-knap { flex: 1 1 auto; width: auto; min-height: 44px; padding: 0 12px; font-size: 15px; }
}
/* Knappen Ny aftale: orange kant, som mockuppen (klientfilens hoved, Check-ins,
   dagpanelet). */
.app-shell.bf-sand .aftd-acc, .app-shell .aftd-acc { border: 2px solid var(--bf-accent) !important; color: var(--bf-accent-text) !important; font-weight: 800; }
.app-shell .cal-day-panel .aftd-dagknap { display: flex; align-items: center; justify-content: center; width: calc(100% - 28px); min-height: 44px; margin: 10px 14px 14px; }
.aftd-dagtom { margin: 0; padding: 10px 14px; font-size: 0.9rem; color: var(--bf-muted); }
.cal-day.cal-kan-aabnes { cursor: pointer; }
/* Dagpanelet, hvor Ny aftale denne dag står: rækkerne og krydset 44 px (PC-målet). */
.app-shell .cal-day-panel .cal-day-row { min-height: 44px; }
.app-shell .cal-day-panel-head .icon-button { min-width: 44px; min-height: 44px; }
.cal-item.cal-item-aflyst, .cal-day-row.cal-item-aflyst > span:nth-child(2) { text-decoration: line-through; }
/* Kalender-knappen i coachens skrivefelt i Avanceret er en knap (dialogen), ikke
   et link: samme 44 x 44 og kant som emoji-knappen, uden husets knapflade. */
.app-shell .main-content .coach-message-composer button.aft-chat-knap { padding: 0; margin: 0; background: transparent; box-shadow: none; color: inherit; cursor: pointer; }
.app-shell .main-content .coach-message-composer:has(.chat-emoji-toggle) > button.aft-chat-knap { grid-column: auto; }
/* ===================== /Ny aftale (v741), etape 3 ===================== */
/* ===================== Ny aftale (v741), etape 4: klienten =====================
   Gergø 29/9. Aftalekortet i klientens tråd (Enkel, Avanceret, Labrador og 2027),
   Hjem-kortet Næste aftale og linkene i Kommende (mockuppen, skærm 4). Kortet er
   tegnet som check-in-kortet: flade, kant og orange venstrekant; knapperne er
   52 px i fuld bredde. Farverne er temaets tokens, så lyst, mørkt og temaerne
   følger med; mærkerne er de målte par fra Kræver opmærksomhed. */
.aftk-wrap { display: block; min-width: 0; }
.app-shell .main-content .aftk { display: grid; gap: 8px; width: 100%; max-width: 520px; box-sizing: border-box; margin: 4px 0; padding: 14px 15px; background: var(--bf-surface, #fff); border: 1px solid var(--bf-line, #E5DFD2); border-left: 3px solid var(--bf-accent, #C75D34); border-radius: 14px; color: var(--bf-ink, #1C1A17); scroll-margin-top: 96px; }
.aftk-anker { display: block; height: 0; scroll-margin-top: 96px; }
.app-shell .main-content .aftk p { margin: 0; color: var(--bf-ink, #1C1A17); }
.aftk-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; }
.aftk-ic { font-size: 1.1em; line-height: 1; }
.app-shell .main-content .aftk-head strong { font: 800 1.05rem/1.2 "Archivo", sans-serif; color: var(--bf-ink, #1C1A17); overflow-wrap: anywhere; }
.app-shell .main-content .aftk-head time { margin-left: auto; font-size: 0.8rem; color: var(--bf-muted, #6B6453); }
.app-shell .main-content .aftk .aftk-lead { font-weight: 700; line-height: 1.35; }
.aftk-linje { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.aftk-linje.is-streg { text-decoration: line-through; }
.app-shell .main-content .aftk .aftk-dim { color: var(--bf-muted, #6B6453); }
.app-shell .main-content .aftk-chip { justify-self: start; max-width: 100%; box-sizing: border-box; padding: 3px 12px; border-radius: 14px; font: 700 0.85rem/1.5 "Hanken Grotesk", sans-serif; overflow-wrap: anywhere; }
.app-shell .main-content .aftk-chip.is-aftalt { background: var(--bf-green-bg, #EBF2EB); color: var(--bf-attn-good, #4A6A43) !important; }
.app-shell .main-content .aftk-chip:is(.is-flyttet, .is-delvis) { background: var(--bf-attn-warn-bg, rgba(127, 85, 15, 0.14)); color: var(--bf-attn-warn, #7F550F) !important; }
.app-shell .main-content .aftk-chip.is-aflyst { background: var(--bf-attn-crit-bg, rgba(163, 48, 42, 0.12)); color: var(--bf-attn-crit, #A3302A) !important; }
.app-shell .main-content .aftk .aftk-egen { padding: 10px 12px; border-radius: 10px; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.aftk-knapper { display: grid; gap: 8px; margin-top: 4px; }
.app-shell .main-content .aftk .aftk-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0; padding: 10px 14px; box-sizing: border-box; border-radius: 14px; border: 2px solid var(--bf-accent-btn, var(--bf-accent)); background: var(--bf-accent-btn, var(--bf-accent)); font: 700 1rem/1.2 "Hanken Grotesk", sans-serif; text-align: center; box-shadow: none; cursor: pointer; }
.app-shell .main-content .aftk .aftk-btn:not(.quiet) { color: #fff !important; }
.app-shell .main-content .aftk .aftk-btn.quiet { background: transparent; border-color: var(--bf-muted, #6B6453); color: var(--bf-ink, #1C1A17); }
.app-shell .main-content .aftk .aftk-ics { display: flex; align-items: center; width: 100%; min-height: 52px; margin: 2px 0 0; padding: 8px 2px 0; box-sizing: border-box; background: none; border: 0; border-top: 1px solid var(--bf-line, #E5DFD2); border-radius: 0; box-shadow: none; font: 700 1rem/1.2 "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)) !important; text-align: left; cursor: pointer; }
.aftk :is(.aftk-btn, .aftk-ics):focus-visible { outline: 3px solid var(--bf-accent-text, var(--bf-accent)); outline-offset: 2px; }

/* Enkel: kortet i fuld bredde og 18 til 20 px tekst, som resten af Enkel Chat. */
.app-shell .main-content .aftk.is-enkel { max-width: 100%; }
.app-shell .main-content .aftk.is-enkel .aftk-head strong { font-size: 20px; }
.app-shell .main-content .aftk.is-enkel .aftk-head time { font-size: 18px; }
.app-shell .main-content .aftk.is-enkel :is(.aftk-linje, .aftk-lead, .aftk-egen) { font-size: 19px; }
.app-shell .main-content .aftk.is-enkel .aftk-dim { font-size: 18px; }
.app-shell .main-content .aftk.is-enkel .aftk-chip { font-size: 18px; }
.app-shell .main-content .aftk.is-enkel :is(.aftk-btn, .aftk-ics) { font-size: 19px; }

/* Labrador: temaets to regler står i temaets blok (LABRADOR-TEMA). */

/* Hjem: Næste aftale. Rækken er Enkels dagrække; ingen streg under overskriften. */
.bf-senior .aftk-hjem h3 + .senior-dayrow { border-top: 0; }

/* Avanceret Kalender, Kommende: Skriv om tiden og Læg i min kalender, 44 px. */
.aftk-kommende-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; }
.app-shell .main-content .aftk-kommende-links :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font: 700 0.85rem/1.2 "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)) !important; text-decoration: none; cursor: pointer; }
/* ===================== /Ny aftale (v741), etape 4 ===================== */
/* ===================== Ny aftale (v741), etape 5: Send kortet i chatten =====================
   Gergø 29/9 kl. 21. Knappen er de eksisterende knapper (icon-button i
   klientfilens aftalerække, senior-big quiet i Enkel); her står kun den stille
   linje Kortet er sendt ✓ (grøn som mærket Aftalt) og Kortet er på vej (dæmpet),
   og i Enkel 18 px som resten af siden. Farverne er temaets tokens; vælgeren
   står over sandtemaets blæk-regel for span (.bf-sand .main-content span), ellers
   blev linjen sort (målt 29/9). I klientfilens række samme skrift som knapperne. */
.aft-kort-linje, .app-shell .main-content .aft-kort-linje { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--bf-attn-good, #4A6A43); white-space: nowrap; }
.aft-kort-linje.is-vent, .app-shell .main-content .aft-kort-linje.is-vent { color: var(--bf-muted, #6B6453); }
.app-shell .main-content .coach-appointment-row-actions .aft-kort-linje { font-size: 12px; line-height: 1.2; }
.bf-coach-simple.aft-side .aft-kort-linje, .app-shell .main-content .bf-coach-simple.aft-side .aft-kort-linje { display: flex; white-space: normal; font-size: 18px; line-height: 1.35; }
/* Coachens egen udgave af kortet i hans tråd (mockuppens skærm 6): klientens kort
   (etape 4's .aftk) til højre som hans egne bobler, 🗑 ved siden af, og foden
   Flyt · Aflys · Hent .ics som tekstknapper over en streg, 44 px (52 px i Enkel). */
.aftk-coach-wrap { display: flex; justify-content: flex-end; align-items: flex-start; gap: 6px; min-width: 0; }
.app-shell .main-content .aftk-coach-wrap > .coach-chat-del { position: static; flex: 0 0 auto; }
.app-shell .main-content .aftk.is-coach { flex: 0 1 auto; min-width: 0; max-width: min(460px, 100%); }
.app-shell .main-content .aftk.is-coach.is-enkel { max-width: 100%; }
.app-shell .main-content .aftk-fod { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--bf-line, #E5DFD2); }
.app-shell .main-content .aftk-fod :is(a, button) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font: 700 0.95rem/1.2 "Hanken Grotesk", sans-serif; color: var(--bf-accent-text, var(--bf-accent)) !important; text-decoration: none; cursor: pointer; }
.app-shell .main-content .aftk.is-enkel .aftk-fod :is(a, button) { min-height: 52px; min-width: 52px; font-size: 19px; }
.aftk-fod :is(a, button):focus-visible { outline: 3px solid var(--bf-accent-text, var(--bf-accent)); outline-offset: 2px; }
/* ===================== /Ny aftale (v741), etape 5 ===================== */
/* ===================== Ny aftale (v741): skeptikernes fund (Gergø 30/9) =====================
   Aftaler-boksen på klientfilens fane Check-ins (spec'en pc-aftaler-boks): Ny aftale
   i overskriften, mærkerne Aftalt, fra hjemmesiden og Aflyst, den aflyste række
   gennemstreget og Fjern helt som tekst. Linjen Svar på over klientens svar i
   coachens tråd, beskedens tekst i bundarkets spørgsmål, og Enkels bundark i
   tråden (aft-bund-vaert tegner intet selv). Farverne er temaets tokens; vælgerne
   står over sandtemaets blæk-regel for span. */
.aft-boks .aft-boks-hoved { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.app-shell .main-content .aft-boks .aft-boks-maerke { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 800; vertical-align: middle; white-space: nowrap; }
.app-shell .main-content .aft-boks .aft-boks-maerke.is-aftalt { background: var(--bf-attn-good-bg, rgba(74, 106, 67, 0.14)); color: var(--bf-attn-good, #4A6A43); }
.app-shell .main-content .aft-boks .aft-boks-maerke.is-web { background: var(--bf-surface2, #F1ECE2); color: var(--bf-muted, #6B6453); }
.app-shell .main-content .aft-boks .aft-boks-maerke.is-aflyst { background: var(--bf-attn-crit-bg, rgba(176, 58, 46, 0.12)); color: var(--bf-attn-crit, #B03A2E); }
.aft-boks .aft-boks-row.is-aflyst .aft-boks-titel { text-decoration: line-through; }
/* Teksten og knapperne på én linje på PC; på telefonen står knapperne under
   teksten og brydes (før pressede knapperne teksten til ét ord pr. linje). */
.aft-boks .coach-list-row.aft-boks-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.aft-boks .aft-boks-row > div:first-child { flex: 1 1 280px; min-width: 0; }
.aft-boks .aft-boks-row > .coach-appointment-row-actions { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; }
.app-shell .main-content .aft-boks .aft-boks-hjaelp { font-size: 12px; line-height: 1.3; color: var(--bf-muted, #6B6453); }
.app-shell .main-content .aft-boks button.aft-boks-fjern { min-height: 32px; padding: 0 6px; background: none; border: 0; font-size: 12px; font-weight: 700; color: var(--bf-accent-text, var(--bf-accent)) !important; text-decoration: underline; cursor: pointer; }
.aft-svar-wrap { display: grid; gap: 2px; min-width: 0; }
.app-shell .main-content .aft-svar-ref { margin: 0 0 0 44px; font-size: 13px; line-height: 1.3; font-weight: 700; color: var(--bf-muted, #6B6453); overflow-wrap: anywhere; }
.app-shell .main-content .bf-coach-simple .aft-svar-ref { margin-left: 0; font-size: 18px; }
.bf-coach-simple.aft-side .aft-bund p.aft-bund-besked { padding: 12px 14px; border-radius: 14px; background: var(--bf-surface2); border: 1px solid var(--bf-line); }
.bf-coach-simple.aft-side.aft-bund-vaert { display: contents; }
/* ===================== /Ny aftale (v741): skeptikernes fund ===================== */
.habit-prompt-body .habit-prompt-input textarea { width: 100%; min-height: 150px; 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; font-size: 18px; line-height: 1.35; resize: vertical; }

/* --- Wordmark som billede (2026-09-07): Gergős officielle logofiler.
   Mørk flade (landing, public tools, bf-dark) = wm-dark (hvid BEAST);
   lys .bf-sand-flade = wm-light (mørk BEAST). White-label-brands rammes
   ikke — de renderes stadig som tekst via .bf-wm-custom-grenen. --- */
.bf-wm-haslogo { display: inline-flex; align-items: center; }
.bf-wm-img { height: 15px; width: auto; display: block; }
.bf-wm-img-light { display: none; }
.bf-sand:not(.bf-dark) .bf-wm-img-dark { display: none; }
.bf-sand:not(.bf-dark) .bf-wm-img-light { display: block; }
.sidebar .bf-wm-img { height: 14px; }
.bf-land-brand-word .bf-wm-img { height: 16px; }

/* Afslutnings-sliden: dagens løft, forskellen fra sidst, og kommentarfeltet. */
.player-finish-volume { margin: 2px 0 0; display: grid; gap: 2px; }
.player-finish-volume strong { font-size: 2rem; line-height: 1.1; }
.bf-sand .main-content .player-finish-volume span { font-size: 0.8rem; color: var(--bf-muted, #6B6453); }
.player-finish-delta { margin: 0; font-size: 0.88rem; font-weight: 700; }
.bf-sand .main-content .player-finish-delta.is-up { color: #2E7D32 !important; }
.bf-sand.bf-dark .main-content .player-finish-delta.is-up { color: #7BC47F !important; }
.bf-sand .main-content .player-finish-delta.is-down { color: var(--bf-muted, #6B6453) !important; }
.player-comment { display: grid; gap: 6px; margin-top: 12px; text-align: left; }
.bf-sand .main-content .player-comment-label { font-size: 0.82rem; font-weight: 700; }
.player-comment-input {
  width: 100%; border-radius: 12px; padding: 10px 12px;
  border: 1px solid var(--bf-line, #E5DFD2); background: var(--bf-surface, #fff);
  font: inherit; font-size: 0.9rem; resize: vertical;
}
.player-comment-send { justify-self: start; }

/* Klient-kommentarer fra afspilleren: i chatten som kort, og ved resultaterne. */
.msg-comment-head { display: block; font-size: 0.76rem; opacity: 0.85; margin: 2px 0; }
.message-bubble.is-comment, .coach-chat-bubble.is-comment p { border-left: 3px solid var(--bf-accent, #C75D34); padding-left: 8px; }
.cts-comments { margin-top: 12px; display: grid; gap: 8px; }
.cts-comments-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bf-sand .main-content .cts-comments-head small { color: var(--bf-muted, #6B6453); font-size: 0.76rem; }
.cts-comment {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--bf-surface2, #F3EFE6);
}
.bf-sand .main-content .cts-comment-when { font-size: 0.74rem; color: var(--bf-muted, #6B6453); }
.bf-sand .main-content .cts-comment-what { font-size: 0.78rem; font-weight: 800; }
.cts-comment p { grid-column: 1 / -1; margin: 2px 0 0; font-size: 0.88rem; line-height: 1.45; }

/* Tosproget øvelsesnavn: dansk navn med bibliotekets engelske under. */
.bf-sand .main-content .exercise-alt-name { display: block; font-size: 0.74rem; color: var(--bf-muted, #6B6453); font-style: italic; }

/* Progressionsfotos: navngivne vinkler, egne kan tilføjes. */
.progress-angle-grid { flex-wrap: wrap; }
.bf-sand .main-content .progress-angle-grid span small { font-weight: 600; opacity: 0.7; }
.progress-angle-new-name { display: grid; gap: 4px; margin-top: 8px; font-size: 0.82rem; font-weight: 700; }
/* display:grid slaar [hidden]s UA-regel, saa feltet stod fremme selv naar det var skjult i koden. */
.progress-angle-new-name[hidden] { display: none; }
.progress-angle-new-name input {
  border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 0.9rem;
  border: 1px solid var(--bf-line, #E5DFD2); background: var(--bf-surface, #fff);
}
.bf-sand .main-content .progress-compare-head small { color: var(--bf-muted, #6B6453); font-size: 0.76rem; }

/* Gergø 29/9: v742 dokumentbibliotek, etape 2 (coachen). Klodserne fra mockuppen
   (_design_handoff/dokumentbibliotek-mockup-2026-09-28.html): PC-siden
   /coach/documents, klientfilens kort Fra biblioteket og Læg i biblioteket, og
   Enkel-skærmene. Trykflader mindst 44 px på PC og 52 px i Enkel. Farverne er
   husets tokens (lyst og mørkt); rødt er #B3261E lyst og #E8756A mørkt, som i
   mockuppens kritik. Knapper på orange har color:#fff !important (sand dark-pill-
   fælden). Alle regler står under .flib-*, så intet andet ændrer sig. */
.flib-page .flib-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.flib-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-sand .main-content .flib-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); font: 700 15px/1 "Hanken Grotesk", sans-serif; cursor: pointer; }
.bf-sand .main-content .flib-chip .n { color: var(--bf-muted); font-weight: 700; }
.bf-sand .main-content .flib-chip.on, .bf-sand .main-content .flib-chip.on .n { background: var(--bf-ink); border-color: var(--bf-ink); color: var(--bf-surface) !important; }
.bf-sand .main-content .flib-chip.on .n { background: transparent; }
.bf-sand .main-content .flib-search input { box-sizing: border-box; min-height: 44px; min-width: 240px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); font: 500 15px "Hanken Grotesk", sans-serif; }
.bf-sand .main-content .flib-search.small input { min-width: 180px; }
/* Listen og kortet side om side; er der ikke plads (under ca. 880 px), står kortet
   under listen i fuld bredde. Uden medieforespørgsel: listen vokser 999 gange hurtigere. */
.flib-cols { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.flib-cols > .flib-card:not(.flib-side) { flex: 999 1 520px; min-width: 0; }
.flib-cols > .flib-side { flex: 1 1 340px; min-width: 0; }
.bf-sand .main-content .flib-card { background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: 18px; padding-bottom: 6px; }
.flib-card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bf-line); }
.bf-sand .main-content .flib-card-h strong { font: 800 15px/1.2 "Archivo", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-ink); }
.bf-sand .main-content .flib-card-h small { display: block; margin-top: 3px; font: 500 14px/1.35 "Hanken Grotesk", sans-serif; color: var(--bf-muted); }
.bf-sand .main-content .flib-card-h .n { color: var(--bf-muted); font-weight: 700; }
.bf-sand .main-content .flib-group { display: flex; gap: 8px; align-items: baseline; padding: 10px 18px; background: var(--bf-surface2); border-bottom: 1px solid var(--bf-line); font: 800 13px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-muted); }
.bf-sand .main-content .flib-group .n { letter-spacing: 0; text-transform: none; font-weight: 700; }
/* Gergø 29/9: v742, skeptikernes fund S1-15. Rækken ombrydes (flex-wrap) i stedet
   for et gitter med knapperne i egen kolonne: er der ikke plads til titlen (mindst
   160 px) og knapperne på én linje, står knapperne på linjen under, så titlen har
   bredden (på en telefon i Avanceret fik den ca. 60 px). På PC står alt på én
   linje som før. Ingen ny @media. */
.flib-row, .flib-doc { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--bf-line); }
.flib-row > .flib-t, .flib-doc > .flib-t { flex: 1 1 160px; }
.flib-row > .flib-acts, .flib-doc > .flib-acts { flex: 0 1 auto; margin-left: auto; }
.flib-row > .flib-panel { flex: 1 1 100%; min-width: 0; }
.bf-sand .main-content .flib-badge { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-accent-text); font: 800 13px/1 "Archivo", sans-serif; }
.bf-sand .main-content .flib-badge.img { background: #6E5A44; border-color: transparent; color: #fff; }
.bf-sand .main-content .flib-badge.small { width: 32px; height: 32px; border-radius: 8px; font-size: 10px; }
.flib-t { display: grid; gap: 3px; min-width: 0; }
.bf-sand .main-content .flib-t strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 700 16px/1.3 "Hanken Grotesk", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-sand .main-content .flib-t small { font-size: 14px; color: var(--bf-muted); }
.bf-sand .main-content .flib-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: 14px; color: var(--bf-ink); }
.bf-sand .main-content .flib-who .lbl { font: 800 12px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-muted); }
.bf-sand .main-content .flib-who .more { color: var(--bf-muted); font-weight: 700; }
.bf-sand .main-content .flib-who .none { color: var(--bf-muted); }
.bf-sand .main-content .flib-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: 700 12px/1.2 "Hanken Grotesk", sans-serif; }
.bf-sand .main-content .flib-pill.food { background: #DDF3E0; border-color: transparent; color: #1F5A2A; }
.bf-sand.bf-dark .main-content .flib-pill.food { background: #1F3A22; color: #A8DDA8; }
.flib-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bf-sand .main-content :is(.flib-acts, .flib-foot, .flib-card-h, .flib-client-h) .button { min-height: 44px; }
.bf-sand .main-content .flib-panel { display: grid; gap: 12px; margin: 4px 0 2px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--bf-accent-btn); background: var(--bf-surface); }
.bf-sand .main-content .flib-panel.danger { border-color: #B3261E; background: #FDF3F1; }
.bf-sand.bf-dark .main-content .flib-panel.danger { border-color: #E8756A; background: #2A1A17; }
.bf-sand .main-content .flib-panel h4 { margin: 0; font: 800 16px/1.3 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .flib-panel p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--bf-ink); }
.flib-panel-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.flib-panel-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* To kolonner, hvor der er plads; på en telefon én (Gergø 29/9: v742, fund S1-15). */
.flib-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 16px; }
.flib-pick.one { grid-template-columns: minmax(0, 1fr); }
.bf-sand .main-content .flib-sub { grid-column: 1 / -1; padding-top: 6px; font: 800 12px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-muted); }
.bf-sand .main-content .flib-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--bf-ink); font-size: 15px; cursor: pointer; }
/* Gergø 29/9: v742, skeptikernes fund S1b. Søgningen skjuler rækker med hidden;
   reglen står under .bf-sand .main-content som display: flex og grid ovenfor, så
   den vinder over dem (før stod alle rækker stadig). */
.bf-sand .main-content .flib-check[hidden], .bf-sand .main-content .flib-has-row[hidden] { display: none; }
.bf-sand .main-content .flib-check input[type="checkbox"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none; width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; border-radius: 6px; border: 2px solid var(--bf-muted); background: var(--bf-surface) center / 14px 14px no-repeat; cursor: pointer; }
.bf-sand .main-content .flib-check input[type="checkbox"]:checked { background-color: var(--bf-accent-btn); border-color: var(--bf-accent-btn); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flib-check input:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
/* Husets "label small" er versaler (0,72rem, 800); hjælpeteksterne her er sætninger. */
.bf-sand .main-content :is(.flib-page, .flib-card, .flib-enkel, .flib-panel, .flib-private) label small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.bf-sand .main-content .flib-check.wide small { display: block; font-size: 13px; color: var(--bf-muted); }
.bf-sand .main-content .flib-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(193, 82, 31, 0.14); color: var(--bf-accent-text); font: 800 12px/1 "Hanken Grotesk", sans-serif; }
.flib-has { display: grid; gap: 4px; }
.bf-sand .main-content .flib-has-row { display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 2px 10px; border-radius: 10px; background: var(--bf-surface2); color: var(--bf-ink); }
.bf-sand .main-content .flib-has-row .st { font-size: 14px; color: var(--bf-muted); }
.flib-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bf-sand .main-content .flib-note { font-size: 13px; line-height: 1.35; color: var(--bf-muted); }
.bf-sand .main-content .flib-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--bf-accent-text); font: 700 14px "Hanken Grotesk", sans-serif; text-decoration: underline; cursor: pointer; }
.bf-sand .main-content .flib-link.red { color: #B3261E; }
.bf-sand.bf-dark .main-content .flib-link.red { color: #E8756A; }
.bf-sand .main-content .flib-link:disabled { color: var(--bf-muted); text-decoration: none; cursor: default; }
/* Den sidste bekræftelse er massiv rød (hvid 6,5:1), og en spærret knap ser spærret ud. */
.bf-sand .main-content .flib-panel .button-danger { background: #B3261E; border-color: #B3261E; color: #fff !important; }
.bf-sand.bf-dark .main-content .flib-panel .button-danger { background: #B83A2E; border-color: #B83A2E; }
.bf-sand .main-content :is(.flib-page, .flib-client) .button:disabled { background: var(--bf-surface2); border: 2px dashed var(--bf-muted); color: var(--bf-muted) !important; box-shadow: none; opacity: 1; cursor: default; }
.bf-sand .main-content :is(.flib-empty, .flib-muted) { margin: 0; padding: 12px 18px; font-size: 15px; color: var(--bf-muted); }
.bf-sand .main-content .flib-panel .flib-muted { padding: 0; }
.bf-sand .main-content .flib-notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font-size: 15px; line-height: 1.4; }
.flib-card > .flib-notice { margin: 12px 18px 0; }
.flib-side .flib-upload { display: grid; gap: 14px; padding: 16px 18px 12px; }
.bf-sand .main-content .flib-field { display: grid; gap: 6px; font: 700 14px/1.3 "Hanken Grotesk", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .flib-field :is(input:not([type="checkbox"]):not([type="radio"]), select) { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: 500 15px "Hanken Grotesk", sans-serif; }
.bf-sand .main-content .flib-field input[type="file"] { padding: 8px; }
.bf-sand .main-content .flib-field small { font: 500 13px/1.35 "Hanken Grotesk", sans-serif; color: var(--bf-muted); }
.flib-field.inline { min-width: 200px; }
.flib-field-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; }
.flib-titles { display: grid; gap: 8px; }
.flib-titles label { display: grid; gap: 2px; }
.flib-wide { width: 100%; }
.bf-sand .main-content .flib-ok { display: flex; gap: 10px; align-items: center; margin: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid #4A6A43; color: var(--bf-ink); font-size: 14px; line-height: 1.35; }
.bf-sand .main-content .flib-ok span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #4A6A43; color: #fff; }
.bf-sand .main-content .flib-toast { position: fixed; left: 50%; bottom: calc(var(--bf-bottom-nav-h, 0px) + 20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1300; display: flex; gap: 10px; align-items: center; max-width: calc(100vw - 32px); padding: 4px 8px 4px 18px; border-radius: 14px; background: var(--bf-ink); color: var(--bf-surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); font: 700 15px "Hanken Grotesk", sans-serif; }
.bf-sand .main-content .flib-toast .flib-link { color: var(--bf-surface) !important; }
.bf-sand .main-content .flib-client { margin-bottom: 16px; }
.flib-client > .flib-panel { margin: 12px 18px 12px; }
.flib-client-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bf-sand .main-content .flib-client-h small { display: block; margin-top: 3px; font: 500 14px/1.35 "Hanken Grotesk", sans-serif; color: var(--bf-muted); text-transform: none; letter-spacing: 0; }
.bf-sand .main-content .flib-private { display: grid; gap: 4px; color: var(--bf-ink); }
.bf-sand .main-content .flib-private > span { font-size: 13px; font-weight: 700; }
.bf-sand .main-content .flib-private strong { font-size: 15px; font-weight: 600; }
.bf-sand .main-content .flib-private small { font-size: 13px; color: var(--bf-muted); }
/* Læg i biblioteket: panelet står under rækken i fuld bredde.
   Gergø 29/9: v742, skeptikernes fund S1-24. Rækken med knappen er flex med
   ombrydning: titlen tager pladsen, mærket, vælgeren, Åbn og Læg i biblioteket
   står efter den, og er der ikke plads, står de på linjen under (gitteret havde
   fire kolonner til fem børn, så Åbn faldt ned under titlen). */
.coach-list-row.compact.file-row:has(> [data-action="flib-adopt-open"]) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 8px; }
.coach-list-row.compact.file-row:has(> [data-action="flib-adopt-open"]) > div:first-child { flex: 1 1 220px !important; min-width: 0; }
.file-row > .flib-adopt { grid-column: 1 / -1; margin-top: 4px; }
.bf-sand .main-content .file-row > [data-action="flib-adopt-open"] { min-height: 44px; }

/* Enkel: 52 px-rækker, 44 px-badge, store afkrydsninger (36 px, hele rækken er
   trykfladen), og knappen i bunden står fast over bundmenuen. */
.flib-enkel { display: grid; gap: 14px; }
.bf-coach-simple .flib-er { min-height: 52px; }
.bf-sand .main-content .bf-coach-simple .flib-er strong { font: 800 clamp(18px, 5vw, 20px)/1.2 "Archivo", sans-serif; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.bf-sand .main-content .flib-ebadge { width: min(44px, 11.2vw); height: min(44px, 11.2vw); border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--bf-surface2); border: 1px solid var(--bf-line); color: var(--bf-accent-text); font: 800 14px/1 "Archivo", sans-serif; }
.bf-sand .main-content .flib-echip { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: min(88px, 20vw); padding: 0 min(16px, 3.4vw); border-radius: 14px; border: 2px solid var(--bf-muted); background: var(--bf-surface); color: var(--bf-ink); font: 800 18px "Hanken Grotesk", sans-serif; text-decoration: none; }
.flib-epick { display: grid; }
.bf-sand .main-content .flib-pk { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--bf-line); background: transparent; color: var(--bf-ink); font: inherit; text-align: left; cursor: pointer; }
.bf-sand .main-content .flib-pk:last-child { border-bottom: 0; }
.bf-sand .main-content .flib-pk.dim { cursor: default; }
.flib-pk-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bf-sand .main-content .flib-pk-text b { font: 800 20px/1.2 "Archivo", sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.bf-sand .main-content .flib-pk.dim .flib-pk-text b { color: var(--bf-muted); }
.bf-sand .main-content .flib-pk-text small { font-size: 18px; line-height: 1.3; color: var(--bf-muted); }
.flib-pk input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.bf-sand .main-content .flib-box { width: 36px; height: 36px; border-radius: 10px; border: 3px solid var(--bf-muted); display: grid; place-items: center; flex: none; background: var(--bf-surface); }
.bf-sand .main-content .flib-box.round { border-radius: 50%; }
.bf-sand .main-content .flib-pk input:checked + .flib-box { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); }
.bf-sand .main-content .flib-pk input:checked + .flib-box::after { content: "✓"; color: #fff; font: 800 22px/1 "Hanken Grotesk", sans-serif; }
.bf-sand .main-content .flib-pk input:checked + .flib-box.round::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.flib-pk input:focus-visible + .flib-box { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.flib-eform { display: grid; gap: 14px; }
.flib-efield { display: grid; gap: 6px; }
.bf-sand .main-content .flib-efield span { font-size: 18px; font-weight: 700; color: var(--bf-muted); }
.bf-sand .main-content .flib-efield input { box-sizing: border-box; width: 100%; min-height: 60px; padding: 0 16px; border-radius: 16px; border: 3px solid var(--bf-accent); background: var(--bf-surface); color: var(--bf-ink); font: 700 20px "Hanken Grotesk", sans-serif; }
.flib-sticky { position: sticky; bottom: calc(var(--bf-bottom-nav-h, 0px) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding-top: 6px; }
.bf-coach-simple .flib-sticky .senior-big { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.bf-coach-simple .flib-enkel .senior-big { min-height: 60px; }
.bf-coach-simple .flib-enkel .senior-big:disabled { opacity: 1; background: var(--bf-surface2, #F2EEE5); color: var(--bf-muted, #6b6453) !important; border: 2px dashed var(--bf-muted, #6b6453); cursor: default; }
.bf-sand .main-content .bf-coach-simple .flib-enkel .senior-big.quiet.flib-red { color: #B3261E !important; }
.bf-sand.bf-dark .main-content .bf-coach-simple .flib-enkel .senior-big.quiet.flib-red { color: #E8756A !important; }
.bf-sand .main-content .bf-coach-simple .flib-enkel .senior-big.text { background: transparent; border: 0; text-decoration: underline; }
.bf-coach-simple .flib-enkel .senior-choice { min-height: 72px; }
/* Gergø 29/9: v742, skeptikernes fund S2-18. Ved 360 px fik titlen ved siden af
   badgen (44 px) og Fjern-chippen (88 px) ca. 115 px, og ordene knækkede midt i
   (Udstrækni ng). Nu skalerer badgen (højst 44 px), chippen (højst 88 px, stadig
   52 px høj) og titlen (18 til 20 px) med skærmen, så de lange ord står hele ved
   360 px, og fra ca. 400 px er alt som før. Orddelingen (hyphens, siden er lang=da)
   deler ved stavelsen, før et ord knækkes et vilkårligt sted. Ingen ny @media. */
.bf-sand .main-content .bf-coach-simple .flib-pk-text b { -webkit-hyphens: auto; hyphens: auto; }
/* Gergø 29/9: v742, skeptikernes fund S2-05. Vælg alle i Enkel viser, når alle er
   valgt (aria-pressed), med samme flueben som rækkerne. */
.bf-sand .main-content .flib-pk.head[aria-pressed="true"] .flib-box { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); }
.bf-sand .main-content .flib-pk.head[aria-pressed="true"] .flib-box::after { content: "✓"; color: #fff; font: 800 22px/1 "Hanken Grotesk", sans-serif; }

/* Gergø 29/9: v742 dokumentbibliotek, etape 3 (klienten). Dokumenter i Avanceret
   (også Labrador og 2027) og Ny i Enkel. Fanerne ombrydes i stedet for at rulle
   (den valgte fane lå uden for skærmen på 390 px), en række er typen, titlen med
   kategori og Ny, og Åbn med skraldespanden eller et lille i; er der ikke plads,
   står knapperne under titlen. Kategorikortene er links (44 px og mere). Farverne
   er husets tokens i lyst og mørkt; knapper på orange har color:#fff !important.
   Alle regler står under .cdoc-*, så intet andet ændrer sig. */
.main-content .cdoc-page .client-subtabs { flex-wrap: wrap; overflow-x: visible; column-gap: 18px; row-gap: 2px; }
.main-content .cdoc-page .client-subtabs a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.main-content .cdoc-page .cdoc-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0; }
.main-content .cdoc-page .cdoc-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; min-height: 44px; box-sizing: border-box; }
.main-content .cdoc-page .cdoc-toolbar .button { flex: none; min-height: 44px; }
.main-content .cdoc-page .document-row.cdoc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.main-content .cdoc-page .cdoc-row > :is(.file-type, .doc-thumb) { flex: none; }
.main-content .cdoc-page .cdoc-row .cdoc-t { flex: 1 1 220px; min-width: 0; display: grid; gap: 4px; }
.main-content .cdoc-page .cdoc-row .cdoc-t strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.main-content .cdoc-page .cdoc-acts { flex: none; display: flex; gap: 8px; align-items: center; margin-left: auto; }
.main-content .cdoc-page .cdoc-acts .button { min-height: 44px; }
.bf-sand .main-content .cdoc-page :is(.cdoc-acts, .chat-file-row) .doc-del { width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin-left: 0; }
/* Typen som i mockuppen: lys flade og husets accenttekst (hvid på den røde #d04242
   var 3,75:1), også på chatkortets rækker her på siden. */
.bf-sand .main-content .cdoc-page :is(.cdoc-row, .chat-file-row) .file-type { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-accent-text); font: 800 13px/1 "Archivo", sans-serif; }
.bf-sand .main-content .cdoc-page .cdoc-list .portal-card-heading a { display: inline-flex; align-items: center; min-height: 44px; }
.bf-sand .main-content .cdoc-page .cdoc-acts .button-primary { color: #fff !important; }
.bf-sand .main-content .cdoc-page .cdoc-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: 700 12px/1.2 "Hanken Grotesk", sans-serif; }
.bf-sand .main-content :is(.cdoc-page .cdoc-pill.cdoc-new, .bf-senior .cdoc-new) { border-color: transparent; background: #FBE3D4; color: #7A2E10; }
.bf-sand.bf-dark .main-content :is(.cdoc-page .cdoc-pill.cdoc-new, .bf-senior .cdoc-new) { background: #4A2616; color: #FFD9C2; }
.bf-sand .main-content .cdoc-page .cdoc-info { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; margin: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); font: 800 16px/1 "Archivo", sans-serif; cursor: pointer; }
.cdoc-page .cdoc-info:focus-visible, .cdoc-page .cdoc-cat:focus-visible, .cdoc-page .cdoc-pick:focus-within { outline: 3px solid var(--bf-accent); outline-offset: 2px; }
.bf-sand .main-content .cdoc-page :is(.cdoc-empty, .cdoc-help) { margin: 0; padding: 14px 18px; font-size: 15px; line-height: 1.4; color: var(--bf-muted); }
.bf-sand .main-content .cdoc-page .portal-card > .cdoc-help { padding-top: 0; }
.bf-sand .main-content .cdoc-page .cdoc-list > .cdoc-help { padding-top: 12px; }
/* Et kort nederst på siden lander på listen (#cdoc-liste) med overskriften fri af
   den faste topbjælke. */
.main-content .cdoc-page #cdoc-liste { scroll-margin-top: calc(100px + env(safe-area-inset-top, 0px)); }
.bf-sand .main-content .cdoc-page .cdoc-back { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 18px 10px; color: var(--bf-accent-text); font-weight: 700; text-decoration: underline; }
.bf-sand .main-content .cdoc-page .cdoc-list .portal-card-heading > span { color: var(--bf-muted); font-weight: 700; }
/* Kortene: to kolonner på telefonen (auto-fit, ingen medieforespørgsel), og det
   valgte kort er fremhævet.
   Gergø 29/9: v742, skeptikernes fund S3-10: 136 px, så der også er to kolonner
   ved 360 px (ca. 292 px til rådighed; med 150 px stod de seks kort under hinanden). */
.main-content .cdoc-page .document-category-grid.cdoc-cats { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
.bf-sand .main-content .cdoc-page .document-category-card.cdoc-cat { display: grid; gap: 6px; align-content: start; min-height: 44px; text-decoration: none; border: 1.5px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink); }
.bf-sand .main-content .cdoc-page .cdoc-cat strong { color: var(--bf-ink); }
.bf-sand .main-content .cdoc-page .cdoc-cat .cdoc-cat-n { font: 800 20px/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.bf-sand .main-content .cdoc-page .cdoc-cat.zero .cdoc-cat-n { color: var(--bf-muted); }
.bf-sand .main-content .cdoc-page .cdoc-cat p { margin: 0; font-size: 14px; line-height: 1.35; color: var(--bf-muted); min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.bf-sand .main-content .cdoc-page .cdoc-cat .cdoc-cat-go { color: var(--bf-accent-text); font-size: 14px; font-weight: 700; text-decoration: underline; }
.bf-sand .main-content .cdoc-page .cdoc-cat.on { border: 2px solid var(--bf-accent-btn, var(--bf-accent)); background: var(--bf-surface2); }
/* Send en fil: appens egen knap om filfeltet (feltet er skjult, men kan nås med
   tastaturet), i stedet for browserens afklippede "Der er ikke valgt nogen fil". */
.bf-sand .main-content .cdoc-page .cdoc-send { color: var(--bf-ink); border-color: var(--bf-line); }
.bf-sand .main-content .cdoc-page .cdoc-send strong { color: var(--bf-ink); font-size: 16px; }
.bf-sand .main-content .cdoc-page .cdoc-send > span { color: var(--bf-muted); font-size: 14px; line-height: 1.4; }
.main-content .cdoc-page .cdoc-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; font: 700 15px/1.2 "Hanken Grotesk", sans-serif; cursor: pointer; }
.bf-sand .main-content .cdoc-page .cdoc-pick, .bf-sand .main-content .cdoc-page .cdoc-pick span { color: #fff !important; }
.main-content .cdoc-page .cdoc-send .cdoc-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
/* Enkel: Ny er en lille chip foran dagen. */
.bf-sand .main-content .bf-senior .cdoc-new { display: inline-flex; align-items: center; margin-right: 8px; padding: 1px 10px; border-radius: 999px; font: 800 16px/1.3 "Hanken Grotesk", sans-serif; vertical-align: 1px; }

/* Coachens pr. klient-notifikationer i push-kortet. */
.bf-push-clients { margin-top: 14px; border-top: 1px solid var(--bf-line, #E5DFD2); padding-top: 12px; display: grid; gap: 4px; }
.bf-push-clients-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.bf-sand .main-content .bf-push-clients-head small { color: var(--bf-muted, #6B6453); font-size: 0.76rem; }

/* ===== Pauseskærmen i afspilleren (v678): nedtælling + NÆSTE-kort =====
   Everfits model: pausen ER skærmen. Ringen er en conic-gradient styret af
   --rest-pct, som 1s-tikket opdaterer uden gen-tegning. ===== */
/* Bundluft: "Spring pausen over" laa 2 px inde under den faste fod paa 375x812 (maalt). */
.player-rest { display: grid; justify-items: center; gap: 14px; padding: 18px 12px 28px; text-align: center; }
.player-rest-kicker { margin: 0; font: 800 15px/1 "Archivo", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-rest-dial {
  --rest-pct: 100;
  display: grid; place-items: center; width: min(62vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--bf-accent, #c75d34) calc(var(--rest-pct) * 1%), var(--bf-surface2, rgba(127,127,127,0.16)) 0);
}
.player-rest-dial::before { content: ""; grid-area: 1 / 1; width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--bf-surface, #fff); }
.player-rest-clock { grid-area: 1 / 1; font: 800 clamp(40px, 13vw, 56px)/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; color: var(--bf-ink, inherit); }
.player-rest-nudge { display: flex; gap: 10px; }
.player-rest-nudge .button { min-height: 44px; min-width: 88px; font-weight: 800; font-size: 17px; }
.player-next-card { width: 100%; max-width: 420px; padding: 12px 14px; border-radius: 16px; text-align: left; background: var(--bf-surface2, rgba(127,127,127,0.10)); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.player-next-label { margin: 0 0 8px; font: 800 12px/1 "Archivo", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-next-row { display: flex; align-items: center; gap: 12px; }
.player-next-row img, .player-next-dot { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--bf-surface, #fff); }
.player-next-dot { display: grid; place-items: center; font-size: 22px; color: var(--bf-accent, #c75d34); }
.player-next-text { display: grid; gap: 3px; min-width: 0; }
.player-next-text strong { font: 800 20px/1.15 "Archivo", sans-serif; color: var(--bf-ink, inherit); overflow-wrap: anywhere; }
.player-next-text small { font-size: 15px; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-rest-skip { border: 0; background: none; padding: 10px 14px; min-height: 44px; font: 700 16px/1 inherit; color: var(--bf-ink-2, var(--muted, #6b6259)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Mørk afspiller-baggrund (workout-player er mørk i normal visning) */
.workout-player:not(.bf-senior *) .player-rest-dial::before { background: var(--bf-surface, #14100d); }
.bf-senior .player-rest { padding-top: 6px; }

/* F5: Enkel visning i AFSPILLEREN. Afspilleren ligger aldrig inde i .bf-senior
   (den er sin egen rute), så klassen sidder på <section class="workout-player">
   og er den ENE kilde til Enkel visning her. F6 styler sin intro gennem samme
   klasse. Alt er større, og foden får mere luft under sig, så kommentarfeltet
   ikke gemmer sig bag det høje spor. */
.workout-player.is-senior { padding-bottom: 13rem; }
.workout-player.is-senior .player-finish-card h2 { font-size: 1.8rem; }
.workout-player.is-senior .player-finish-progress { font-size: 1.35rem; }
.workout-player.is-senior .player-finish-missing-title { font-size: 15px; }
.workout-player.is-senior .player-finish-missing-link { min-height: 60px; font-size: 1.15rem; }
.workout-player.is-senior .player-finish-missing-link small { font-size: 1rem; }
.workout-player.is-senior .player-finish-lead,
.workout-player.is-senior .player-finish-partial-lead,
.workout-player.is-senior .player-finish-rest-note { font-size: 1.1rem; max-width: 30ch; }
/* Enkel visning gemmer med KNAPPEN, ikke med slæbet (se media-forespørgslen
   ovenfor), så sporets senior-mål er væk igen: de kunne kun forvirre den næste,
   for sporet vises aldrig her. Knappen skal være stor, og den skal vinde over
   .player-footer .button lige nedenunder: .button.player-finish-btn er 0,5,0 mod
   0,4,0, så rækkefølgen i filen ikke afgør det (rettet efter review 1). */
.workout-player.is-senior .player-footer .button.player-finish-btn { min-height: 64px; font-size: 1.2rem; }
.workout-player.is-senior .player-footer .button { min-height: 56px; font-size: 1.1rem; }

/* ===== Sektions-intro (F6): "Blok 2 af 4", listen og Gør klar =====
   Ét kort foran hver blok: hvad kommer der, hvad er allerede gjort i dag, og
   én knap. Farver KUN via tokens med fallback (white-on-white-fælden): normal
   visning er mørk, Enkel visning er lys, og sand-temaets ink catch-all
   `.bf-sand .main-content :is(p,li,td,th,span,div)` (0,2,1) overmaler en <p>
   eller en <small> med én klasse. Derfor gentagelserne på 0,4,0 nedenfor.
   --bf-ink-2 findes IKKE i projektet (F5's måling), så den dæmpede tone er
   --bf-muted2, som står i begge sand-paletter. */
.player-intro { display: grid; gap: 12px; padding: 16px 14px; border-radius: 16px; border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.12)); }
.player-intro-eyebrow { margin: 0; font: 800 12px/1 "Archivo", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-muted2, var(--muted, #6b6259)); }
.player-intro h2 { margin: 0; font-size: 1.5rem; }
.player-intro-meta { margin: 0; font-weight: 800; color: var(--bf-ink, inherit); }
.player-intro-lead { margin: 0; max-width: 34ch; font-size: 0.92rem; line-height: 1.5; color: var(--bf-muted2, var(--muted, #6b6259)); }
.player-intro-note { margin: 0; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.45; color: var(--bf-muted2, var(--muted, #6b6259)); }
.player-intro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.player-intro-list li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25));
}
.player-intro-list img, .player-intro-dot { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bf-surface2, rgba(127, 127, 127, 0.16)); }
.player-intro-dot { display: grid; place-items: center; color: var(--bf-accent, #c75d34); }
.player-intro-row { display: grid; gap: 2px; min-width: 0; }
.player-intro-row strong { font-weight: 800; overflow-wrap: anywhere; color: var(--bf-ink, inherit); }
.player-intro-row small { font-size: 0.86rem; color: var(--bf-muted2, var(--muted, #6b6259)); }
.player-intro-list li.is-done { border-color: var(--bf-attn-good, #3f6b4e); }
.player-intro-done { font-weight: 800; font-size: 1.1rem; color: var(--bf-attn-good, #3f6b4e); }
/* Kortets egen knap findes KUN i normal visning (rettet efter review 1:
   renderPlayerIntroStep udelader den i Enkel visning, hvor den blev klippet af
   den faste fod). Derfor ingen .senior-big her: reglen kan ikke længere skygge
   for Enkel visnings knapstil, og der står ingen selektor, som aldrig kan
   matche noget. */
.player-intro-start { min-height: 56px; font-size: 1.05rem; }
/* Enkel visning: fodens Start blok ER den ene knap en Enkel-klient skal ramme, så den er
   større end F5's almindelige fod-knap (0,4,0). .button.player-intro-go er
   0,5,0, altså vinder den uanset rækkefølgen i filen, præcis som F5's
   .button.player-finish-btn. 64 px og 1,25 rem er Enkel visnings egne mål
   (.senior-big er 22 px), og knappen er fast forankret i bunden: den kan
   aldrig rulle væk fra skærmen. */
.workout-player.is-senior .player-footer .button.player-intro-go { min-height: 64px; font-size: 1.25rem; }
.bf-sand .main-content .player-intro :is(.player-intro-eyebrow, .player-intro-lead, .player-intro-note) { color: var(--bf-muted2); }
.bf-sand .main-content .player-intro-row small { color: var(--bf-muted2); }
.bf-sand .main-content .player-intro-done { color: var(--bf-attn-good, #4A6A43); }
/* Gør klar-skærmen: bloktitlen under kickeren, så det er tydeligt HVAD der
   starter om lidt. Ringen og NÆSTE-kortet er pauseskærmens egne. */
.player-rest-block { margin: 0; font: 800 20px/1.2 "Archivo", sans-serif; color: var(--bf-ink, inherit); }
.bf-sand .main-content .player-rest .player-rest-block { color: var(--bf-ink); }
/* "Bliv her" i foden står nu på HVER Gør klar-skærm, og den var mørk på den
   mørke fod: sand-temaets knap-catch-all
   `.bf-sand .main-content button:not(.button-primary):not(…)` (0,7,0, l. 16028)
   slog knappens egen `color: #fff` (0,1,0). Målt i browseren på 390 x 844:
   rgb(28, 26, 23) på rgba(12, 8, 6, 0.96), altså 1,05:1. Samme rettelse som
   F5 gav resten af foden, og den eneste vej forbi en 0,7,0-regel er
   !important (den dokumenterede sand-pill-fælde). */
.bf-sand .main-content .player-footer .player-stay-btn { color: #fff !important; }
/* Intro-trin i fremdriftslinjen: en hul ring. .past og .now har samme
   specificitet, men et trin bærer altid præcis én af klasserne (ternaren i
   renderWorkoutPlayer), så rækkefølgen i filen afgør ingenting.
   Ringen tegnes med --bf-muted (rettet efter review 1): afspilleren ligger
   ALTID inde i .bf-sand, altså på en lys flade i lyst tema, og både den hvide
   basisfarve (hvid på #EAE6DC = 1,05:1) og --bf-line (#E5DFD2 = 1,05:1 lyst,
   #37312A = 1,5:1 mørkt) gjorde ringen usynlig. --bf-muted måler 4,72:1 på
   sand og 6,3:1 som #A79D8F på det mørke tema, og den står ÉT sted nu. */
.player-progress-dots i.intro { background: none; box-shadow: inset 0 0 0 1.5px var(--bf-muted, #6B6453); }
/* Enkel visning går gennem F5's klasse på <section class="workout-player">,
   ikke gennem en ny klasse på kortet: ÉN kilde til Enkel visning i
   afspilleren. Afspilleren ligger aldrig inde i .bf-senior. */
.workout-player.is-senior .player-intro { background: var(--bf-surface, #fff); font-size: 20px; }
.workout-player.is-senior .player-intro h2 { font-size: 30px; }
.workout-player.is-senior .player-intro-eyebrow { font-size: 14px; }
.workout-player.is-senior .player-intro-meta { font-size: 20px; }
.workout-player.is-senior .player-intro-lead, .workout-player.is-senior .player-intro-note { font-size: 1.1rem; max-width: 30ch; }
.workout-player.is-senior .player-intro-row strong { font-size: 20px; }
.workout-player.is-senior .player-intro-row small { font-size: 17px; }
.workout-player.is-senior .player-intro-list img, .workout-player.is-senior .player-intro-dot { width: 56px; height: 56px; }
.workout-player.is-senior .player-intro-done { font-size: 24px; }
.workout-player.is-senior .player-rest-block { font-size: 24px; }


/* Ét sæt ad gangen i Enkel visning: listen viser hvor langt de er. */
.senior-set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.senior-set-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); font-size: 18px; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.senior-set-list li span { font-weight: 800; }
.senior-set-list li.now { color: var(--bf-ink, inherit); border-color: var(--bf-accent, #c75d34); background: var(--bf-surface2, rgba(199,93,52,0.08)); }
.senior-set-list li.done { color: var(--bf-attn-good, #3f6b4e); }
.senior-set-list li b { font-weight: 800; }
.senior-link { display: block; width: 100%; margin: 0; padding: 10px; min-height: 44px; border: 0; background: none; font: 600 16px/1 inherit; color: var(--bf-ink-2, var(--muted, #6b6259)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ===== Alternativ øvelse (F2): byt i afspilleren, chip på rækken, builder-chips =====
   Farver KUN via tokens (white-on-white-fælden): afspilleren er mørk i normal
   visning, Enkel visning er lys, og sand-temaets ink catch-all overmaler span/small. */
.exercise-swap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.exercise-swap-label { font: 800 12px/1 "Archivo", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.exercise-swap-btn {
  min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
  font: 700 15px/1.2 inherit; font-family: inherit;
  border: 1px solid var(--bf-line, rgba(127,127,127,0.35));
  background: var(--bf-surface2, rgba(127,127,127,0.12));
  color: var(--bf-ink, inherit);
}
.exercise-swap-btn:hover { border-color: var(--bf-accent, #c75d34); }
.workout-player .exercise-swap-btn { color: var(--bf-ink, #fff); }
.bf-sand .main-content .exercise-swap-btn { color: var(--bf-ink, #1C1A17); }
.exercise-swapped-chip {
  display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--bf-line, rgba(127,127,127,0.35));
  background: var(--bf-surface2, rgba(127,127,127,0.12));
  color: var(--bf-ink-2, var(--muted, #6b6259)) !important;
  font-size: 0.72rem; font-weight: 700; vertical-align: middle;
}
.exercise-swap-locked { display: block; color: var(--bf-ink-2, var(--muted, #6b6259)); font-size: 0.8rem; line-height: 1.4; }
/* Enkel visning: store, grå knapper (genbruger .senior-big.quiet), 20 px grundskrift. */
.senior-swap { display: grid; gap: 8px; margin-top: 10px; }
.senior-swap small { font-size: var(--sen-fs, 20px); font-weight: 700; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.senior-swapped { margin: 0; color: var(--bf-ink-2, var(--muted, #6b6259)); }
/* Builderen (coach): chips med × under rækkens hoved. */
.structured-alts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.structured-alts-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6); }
.structured-alt-chip { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.6rem; font-size: 0.82rem; }
.structured-alt-remove { border: 0; background: none; color: rgba(255, 255, 255, 0.5); cursor: pointer; min-width: 28px; min-height: 28px; border-radius: 999px; font-size: 1rem; line-height: 1; }
.structured-alt-remove:hover { color: var(--bf-accent, #ff8a50); }
.structured-alts-hint { flex-basis: 100%; font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); }
.bf-sand .main-content .structured-alts-label { color: var(--bf-muted2, #55503F); }
.bf-sand .main-content .structured-alt-chip { border-color: var(--bf-line, #E5DFD2); background: var(--bf-surface, #fff); color: var(--bf-ink, #1C1A17); }
.bf-sand .main-content .structured-alt-remove { color: var(--bf-muted2, #55503F); }
.bf-sand .main-content .structured-alts-hint { color: var(--bf-muted2, #55503F); }
/* Globale alternativer (F2b): en arvet chip kommer fra selve øvelsen og kan
   ikke fjernes her, så den står stiplet uden ×. Linjen i øvelses-formularen får
   lidt luft, så den ikke klistrer til feltet over.
   Review 1: den stiplede kant bærer signalet ALENE. En opacity på 0,75 gav
   #55503F på hvid i sand-temaet kontrast 4,17:1, og chippen er 0,82rem normal
   tekst, altså under AA-kravet på 4,5:1 præcis i det tema coachen har på sin
   telefon. Ved fuld opacitet er den samme farve ~9:1. */
/* Review 2: kanten SKAL have sin egen farve. Basisreglen står på
   rgba(255,255,255,0.12), og en stiplet kant ved 12 procent hvid er reelt
   usynlig i det mørke tema, altså er der intet der skiller den arvede chip fra
   rækkens egen ud over det manglende kryds. Sand-temaet fik --bf-line, som er
   lige så svag mod --bf-surface. */
.structured-alt-chip.is-inherited { border-style: dashed; border-color: rgba(255, 255, 255, 0.38); padding-right: 0.6rem; }
.bf-sand .main-content .structured-alt-chip.is-inherited { border-color: var(--bf-muted2, #55503F); color: var(--bf-muted2, #55503F); }
.exercise-alts { margin: 4px 0 8px; }
.structured-picker-title { display: block; font-size: 0.9rem; }

/* ===== Runder som data (F3): AMRAP/For time som ét trin i afspilleren =====
   Samme ramme som .player-block-card, urskive som pauseskærmens (--rest-pct fra
   1s-tikket), store afkrydsningsknapper pr. øvelse, én stor Fuldfør runde-knap.
   Farver KUN via tokens: afspilleren er mørk i normal visning, Enkel visning er
   lys, og sand-temaets ink catch-all overmaler span/small. */
.player-rounds-card { display: grid; gap: 12px; padding: 1rem; border: 1px solid var(--bf-line, rgba(255, 255, 255, 0.12)); border-radius: 16px; text-align: center; }
.player-rounds-card h2 { margin: 0; font-size: 1.45rem; }
.player-rounds-kicker { margin: 0; font: 800 15px/1 "Archivo", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-rounds-dial {
  --rest-pct: 100;
  display: grid; place-items: center; justify-self: center; width: min(62vw, 240px); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--bf-accent, #c75d34) calc(var(--rest-pct) * 1%), var(--bf-surface2, rgba(127,127,127,0.16)) 0);
}
.player-rounds-dial::before { content: ""; grid-area: 1 / 1; width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--bf-surface, #fff); }
.player-rounds-dial .player-rounds-clock, .player-rounds-dial small { grid-area: 1 / 1; }
.player-rounds-clock { font: 800 clamp(40px, 13vw, 56px)/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; color: var(--bf-ink, inherit); transform: translateY(-10px); }
.player-rounds-dial small { align-self: center; transform: translateY(28px); font: 800 15px/1 "Archivo", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.workout-player:not(.bf-senior *) .player-rounds-dial::before { background: var(--bf-surface, #14100d); }
.player-rounds-list { display: grid; gap: 6px; text-align: left; }
.player-rounds-list li small { color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-round-tick {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid var(--bf-line, rgba(127,127,127,0.35)); background: var(--bf-surface2, rgba(127,127,127,0.10));
  color: var(--bf-ink, inherit); font: 700 17px/1.2 inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.player-round-tick i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--bf-line, rgba(127,127,127,0.5)); font-style: normal; font-weight: 800; color: #fff; }
.player-round-tick small { color: var(--bf-ink-2, var(--muted, #6b6259)); font-size: 14px; white-space: nowrap; }
.player-round-tick.is-ticked { border-color: var(--bf-attn-good, #3f6b4e); }
.player-round-tick.is-ticked i { background: var(--bf-attn-good, #3f6b4e); border-color: var(--bf-attn-good, #3f6b4e); }
.player-rounds-hint { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-rounds-body { margin: 0; white-space: pre-wrap; text-align: left; font-size: 0.95rem; }
.player-round-btn {
  display: block; width: 100%; min-height: 56px; padding: 14px 18px; border-radius: 16px; border: 0; cursor: pointer;
  background: var(--bf-accent-btn, var(--bf-accent, #c75d34)); color: #fff !important; font: 800 20px/1.1 "Archivo", sans-serif;
}
.player-rounds-meta { margin: 0; font-weight: 700; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-rounds-link { display: block; width: 100%; margin: 0; padding: 10px; min-height: 44px; border: 0; background: none; font: 600 16px/1 inherit; color: var(--bf-ink-2, var(--muted, #6b6259)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.player-rounds-headline { margin: 0; font: 800 15px/1 "Archivo", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-accent, #c75d34); }
.player-rounds-score { margin: 0; font: 800 28px/1.15 "Archivo", sans-serif; font-variant-numeric: tabular-nums; color: var(--bf-ink, inherit); }
.player-rounds-saved { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-finish-rounds { margin: 0; font-weight: 700; }
/* Enkel visning: ren liste uden afkrydsning, 20 px grundskrift. Knappen er
   .senior-big (ikke .player-round-btn), så den arver Enkel visnings egen
   knapstil, og skiven og listen får bare større tal.
   RETTET 11/9-2026 efter F6's review (en F3-rest, ikke en F6-ændring): de fem
   regler stod på .bf-senior og matchede derfor ALDRIG noget. Afspilleren
   ligger aldrig inde i .bf-senior: renderSeniorShell pakker kun /app,
   /app/program, /app/mad, /app/habits, /app/messages og /app/checkins, mens
   afspilleren returnerer sin egen <section class="workout-player is-senior">.
   Rundekortet blev altså tegnet i normal størrelse i Enkel visning. Samme
   kilde som F5 og F6 bruger nu, og --sen-fs findes kun på .bf-senior, så
   fallbacken 20 px er den, der gælder her. */
.workout-player.is-senior .player-rounds-list li { font-size: var(--sen-fs, 20px); }
.workout-player.is-senior .player-rounds-list li small { font-size: 17px; }
.workout-player.is-senior .player-rounds-meta, .workout-player.is-senior .player-rounds-saved { font-size: var(--sen-fs, 20px); }
.workout-player.is-senior .player-rounds-score { font-size: 34px; }
/* Coach: Runder-linjen i Resultater-panelet. */
.results-rounds { padding: 0 0 6px; font-size: 0.92rem; }
.bf-sand .main-content .results-rounds { color: var(--bf-ink, #1C1A17); }
/* F3: en runde-blok på passets side (/app/wod). Sættene er MÅLET, ikke knapper:
   runden logges i afspilleren på rundeindeks, og et tryk her ville ramme den
   samme række på serveren. Samme ramme som .set-chip, men uden markør og uden
   Gjort-mærke, så den ikke ser tappebar ud. */
.structured-set-plan {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px dashed var(--bf-line, rgba(127, 127, 127, 0.35));
  color: var(--bf-ink, inherit);
  font-size: 0.82rem;
}
.structured-set-plan .set-chip-index { color: var(--bf-ink-2, var(--muted, #6b6259)); }
.structured-rounds-note { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--bf-ink-2, var(--muted, #6b6259)); }

/* ===========================================================================
   Vedhæftninger i chatten (v688)
   Clipsen står i skrivefeltet, den valgte fil vises som en chip på sin EGEN
   linje (derfor flex-wrap på de to composers), og det sendte ligger i boblen.
   Chippen fyldes direkte i DOM'en, aldrig med render(), så den tekst der
   allerede er skrevet, ikke forsvinder når man vælger en fil.
   =========================================================================== */
.chat-attach {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.3));
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.chat-attach:hover, .chat-attach:focus-within {
  border-color: var(--bf-accent, #c75d34);
}
/* Selve feltet er usynligt: hele clipsen er trykfladen. */
.chat-attach input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.portal-message-composer, .coach-message-composer { flex-wrap: wrap; }
.chat-attach-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 0 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.3));
  background: var(--bf-surface2, rgba(127, 127, 127, 0.1));
}
/* Grid og flex slår [hidden] ud, derfor !important: chippen SKAL være væk når
   der ikke er valgt en fil. Samme fælde som ved fotovinklerne. */
.chat-attach-chip[hidden] { display: none !important; }
.chat-attach-chip img { width: 38px; height: 38px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.chat-attach-chip > b {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bf-line, rgba(127, 127, 127, 0.25));
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.chat-attach-chip > span { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; overflow: hidden; }
.chat-attach-chip > span, .chat-attach-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-chip small { font-size: 0.75rem; opacity: 0.72; }
.chat-attach-chip button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
}

/* Enkel visning: composeren er et gitter, så clipsen bliver sin egen brede
   række. Til store fingre er en knap med tekst bedre end et lille ikon. */
.senior-compose .chat-attach {
  width: auto;
  height: auto;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border-width: 2px;
  font-size: var(--sen-fs, 20px);
}
.senior-compose .chat-attach .sr-only {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.senior-compose .chat-attach-chip { padding: 12px; border-width: 2px; font-size: 17px; }

/* Boblen. Billedet fylder boblens bredde, filer står som en række man kan åbne. */
.chat-attachment { display: block; margin: 0 0 8px; position: relative; }
.chat-attachment.is-image a { display: block; }
.chat-attachment.is-image img {
  display: block;
  width: 100%;
  max-width: 260px;
  /* Kassen må aldrig være nul høj, heller ikke før billedet er hentet: en tom
     boble ligner en fejl, og den ville ikke selv komme i syne igen. */
  min-height: 60px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.14);
}
.chat-attachment.is-file a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.32));
  color: inherit;
  text-decoration: none;
}
.chat-attachment.is-file b {
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.28);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.chat-attachment.is-file a > span { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.chat-attachment.is-file small { font-size: 0.75rem; opacity: 0.75; }
.chat-attachment.is-gone {
  /* Egen linje som de to andre varianter. inline-block lagde beskeden i
     forlængelse af "Vedhæftningen er fjernet", så de to løb sammen til én sætning. */
  display: block;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px dashed var(--bf-line, rgba(127, 127, 127, 0.4));
  font-size: 0.8rem;
  opacity: 0.8;
}
.chat-attachment-del {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  border-radius: 10px;
  padding: 6px;
  font-size: 0.9rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.chat-attachment.is-file .chat-attachment-del { top: 50%; transform: translateY(-50%); }

/* Mappen: alt der er sendt i chatten, adskilt fra coachens delte filer. */
.chat-files-intro { margin: 0 0 10px; font-size: 0.85rem; opacity: 0.78; }
.chat-files-list { display: grid; gap: 10px; }
.chat-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25));
}
/* Navnet får et gulv og må bryde: uden det kan kolonnen presses til nul, og
   teksten løber ind over knapperne. Den fælde koster hver gang. */
.chat-file-row > div { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.chat-file-row strong { overflow-wrap: anywhere; }
.chat-file-row small { font-size: 0.78rem; opacity: 0.75; }
.chat-file-row .button { flex: 0 0 auto; }

/* Coachens skrivefelt arver width:100% fra den fælles input-regel. Med
   flex-wrap ville 100% fylde hele første linje og skubbe clips og Send ned på
   hver sin række. Feltet skal kunne skrumpe, chippen skal ligge nederst. */
.coach-message-composer input[name="body"] { flex: 1 1 140px; width: auto; min-width: 0; }
.portal-message-composer .chat-attach-chip, .coach-message-composer .chat-attach-chip { order: 2; }

/* MÅLT 12/9 og RETTET 15/9 (Gergøs ok): den orange "mine"-boble gik fra
   #df4b0b til #8f280a, og den LYSE ende var for lys. Målt på den: hvid tekst
   4,08:1 og sand-temaets #f7f1eb 3,64:1, begge under AA's 4,5. Den lyse ende er
   nu #c04009: 5,28:1 med hvid og 4,71:1 med #f7f1eb, altså AA med begge
   tekstfarver, og stadig den samme orange. Dæmpet tekst inde i en boble må
   stadig ALDRIG nedtones, for så falder den under igen. */
.chat-attachment small, .chat-attachment.is-gone { opacity: 1; }
.senior-bubble .chat-attachment small, .coach-chat-bubble .chat-attachment small { opacity: 1; }

/* Enkel visning på telefon: composeren er et to-kolonne gitter, så chippen med
   filnavnet landede i en 172 px kolonne og klippede navnet. Den skal have hele
   bredden, ligesom skrivefeltet. */
@media (max-width: 700px) {
  .bf-senior .senior-compose .chat-attach-chip { grid-column: 1 / -1; }
}

/* Arbejdsuret: et sæt på tid der tæller sig selv ned. Genbruger pausens skive
   og dens markup, så der ikke findes en ny kilde til Enkel visning. Knapperne
   står i normal flow over foden, ikke fastgjort: det var præcis dér F6's
   intro-knap blev klippet over på 390 × 844. */
.player-work { display: grid; justify-items: center; gap: 14px; padding: 18px 12px 28px; text-align: center; }
.player-work-kicker { margin: 0; max-width: 32ch; font: 800 15px/1.3 "Archivo", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-ink-2, var(--muted, #6b6259)); }
.player-work.is-pending .player-work-kicker { text-transform: none; letter-spacing: 0; font-size: 18px; line-height: 1.4; color: var(--bf-ink, inherit); }
.player-work-row { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; padding: 10px 12px; border-radius: 16px; text-align: left; background: var(--bf-surface2, rgba(127,127,127,0.10)); border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.player-work-row img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.player-work-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 420px; }
.player-work-actions .button { min-height: 48px; flex: 1 1 0; min-width: 0; font-weight: 800; font-size: 17px; }
.player-rest-undo { border: 0; background: none; padding: 10px 14px; min-height: 44px; font: 700 16px/1 inherit; color: var(--bf-ink-2, var(--muted, #6b6259)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ▶ ved siden af ✎ på sæt-chippen: samme lille format, aldrig den primære. */
.set-chip-work { border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); background: var(--bf-surface, #fff); color: var(--bf-ink, inherit); border-radius: 10px; min-width: 34px; min-height: 34px; cursor: pointer; font-size: 14px; }
/* v704: den store Start-knap under sættene (samme handling som ▶). */
.player-work-cta { display: block; width: 100%; margin: 10px 0 2px; padding: 12px 16px; font-size: 1.05rem; font-weight: 800; border-radius: 12px; text-align: center; }

/* Enkel visning: samme panel, større tal og større knapper. */
.workout-player.is-senior .player-work { font-size: 20px; }
.workout-player.is-senior .player-work-kicker { font-size: 18px; }
.workout-player.is-senior .player-work.is-pending .player-work-kicker { font-size: 22px; }
.workout-player.is-senior .player-work-row strong { font-size: 20px; }
.workout-player.is-senior .player-work-row img { width: 56px; height: 56px; }
.workout-player.is-senior .player-work-actions .button { min-height: 60px; font-size: 20px; }

/* Beskeden om at tjeklisten starter forfra ved en ny version. Den skal læses
   som en forklaring, ikke som en advarsel: en klient troede appen havde tabt
   hendes arbejde, og det havde den ikke. Derfor en rolig accentkant og ingen
   advarselsfarve. */
.test-flow-reset {
  border-left: 3px solid var(--bf-accent, #c75d34);
}
.test-flow-reset strong { display: block; margin-bottom: 6px; }
.test-flow-reset p { margin: 0; font-size: 0.9rem; line-height: 1.5; }

/* ===========================================================================
   Coach-Messenger paa telefon (v695)
   To skaerme: listen, eller EN traad med tilbage-knap og fast skrivefelt.
   Gergoes ord 13/9: "not like a facebook messenger ... when i click on one, so
   i want to see only that message". Reglerne herunder gaelder kun .is-phone,
   saa de tre kolonner paa pc er uroerte.
   =========================================================================== */
.coach-messenger-page.is-phone { padding: 0 0 12px; }
.coach-messenger-page.is-phone .coach-messenger-heading { margin-bottom: 10px; }
.coach-messenger-page.is-phone .coach-messenger-heading h1 { margin: 0; }
.coach-messenger-page.is-phone .coach-chat-list-panel { border-radius: 14px; }
/* Listen maa fylde hele skaermen, ikke sidde i en kasse paa 320 px. */
.coach-messenger-page.is-phone .coach-chat-list { max-height: none; }
.coach-messenger-page.is-phone .coach-thread-list-item { padding: 14px 16px; min-height: 64px; }

.coach-messenger-back {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--bf-surface, rgba(255, 255, 255, 0.06));
  color: var(--bf-ink, inherit);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.coach-messenger-back span[aria-hidden] { font-size: 1.4rem; line-height: 1; color: var(--bf-accent, #c75d34); }
.coach-messenger-back strong { margin-left: auto; font-weight: 700; }

/* Traaden faar hele skaermen; luften i bunden maales af --bf-composer-h. */
.coach-messenger-page.is-thread .coach-thread-panel { border: 0; background: transparent; border-radius: 0; }
.coach-messenger-page.is-thread .coach-thread-messages { max-height: none; min-height: 0; }
.coach-messenger-page.is-thread .coach-thread-header { padding: 0 0 10px; }

/* ---- +-3 dage: flyt passet en dag ad gangen (Enkel visning + coach-skal) ---- */
.senior-move { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.senior-move-title { font-size: 16px; font-weight: 700; color: var(--bf-ink, inherit); }
.senior-move-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.senior-move-btn { min-height: 52px; padding: 12px 10px; border-radius: 14px; border: 2px solid var(--bf-line, rgba(127,127,127,0.35)); background: var(--bf-surface, transparent); color: var(--bf-ink, inherit); font: 700 17px "Archivo", sans-serif; cursor: pointer; }
/* !important: blaek-catch-all'en ".bf-sand .main-content button:not(...)" (0,7,1) slaar ellers farven, og en graa knap saa aktiv ud. Samme moenster som de moerke piller. */
.senior-move-btn:disabled, .bf-sand .main-content .senior-move-btn:disabled { opacity: 1; color: var(--bf-muted, #7a7a7a) !important; border-color: var(--bf-muted, #7a7a7a); border-style: dashed; background: transparent; cursor: default; }
.senior-move-hint { font-size: 15px; color: var(--bf-muted, #6b6b6b); line-height: 1.35; }
/* Log ud inde i Enkel visning (fund 2): samme knap som i skuffen, men med luft. */
.bf-senior .senior-account { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bf-line, rgba(127,127,127,0.25)); }
.bf-senior .senior-account .auth-user-actions { display: grid; gap: 8px; }
.bf-senior .senior-account .auth-user-actions .button { min-height: 48px; font-size: 17px; }

/* ---- De tre for taette kort (KOE 11/9, maalt igen 15/9) ----
   1) Dokumenter/Seneste filer: den tomme tekst "Ingen delte filer endnu." ligger
      i .compact-file-list, som ikke er et direkte barn af kortet og derfor ikke
      faar kortets inset (v634-reglen). 1 px fra kanten -> kortets 18 px.
   2) Ernaerings-admin: oversaettelses-sektionen er et <section> direkte i
      form.portal-card, og section er ikke i v634-listen, saa dens ramme laa
      1 px fra kortkanten. Samme inset som kortets labels.
   3) Maaltidskortet paa telefonen (maaltidsnavn 7 px) kunne IKKE genskabes 15/9:
      maalt 80 px i lyst og moerkt tema, 390 og 1024 px; rettet undervejs. */
.compact-file-list > p { margin: 0; padding: 0 18px 16px; }
.compact-file-list > p:first-child { padding-top: 16px; }
.nutrition-admin-form > .nutrition-language-tabs { margin-inline: 18px; }
.nutrition-admin-form > .nutrition-language-tabs:last-child { margin-bottom: 16px; }

/* ---- Madplan i Enkel visning (v698): store kort, en ting ad gangen ---- */
.bf-senior .senior-section { margin: 6px 0 0; font: 800 20px "Archivo", sans-serif; color: var(--bf-ink, inherit); }
.bf-senior .senior-center { display: block; text-align: center; font-size: 16px; }
.senior-meal-type { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-accent-text, var(--bf-accent, #c75d34)); }
.senior-meal > strong { font-size: 22px; line-height: 1.2; }
.senior-meal.is-eaten { border: 2px solid var(--bf-attn-good, #3f6b4e); }
.senior-move-btn.is-on, .bf-sand .main-content .senior-move-btn.is-on:disabled { color: #fff !important; background: var(--bf-attn-good, #3f6b4e); border-color: var(--bf-attn-good, #3f6b4e); border-style: solid; }
/* Opskriften i stor tekst: den avancerede .meal-recipe-peek er sat til telefon-smaat. */
.senior-recipe .meal-recipe-peek { font-size: 18px; line-height: 1.45; }
.senior-recipe .meal-recipe-peek strong { font-size: 18px; }
.senior-recipe .meal-recipe-peek li { font-size: 18px; padding: 6px 0; }
.senior-recipe .meal-recipe-peek small { font-size: 16px; }
.senior-shop { gap: 0; padding-top: 4px; padding-bottom: 4px; }
.senior-shop-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--bf-line, rgba(127,127,127,0.25)); background: transparent; color: var(--bf-ink, inherit); font: inherit; text-align: left; cursor: pointer; }
.senior-shop-row:last-child { border-bottom: 0; }
.senior-shop-row > span:last-child { display: grid; }
.senior-shop-row strong { font-size: 19px; }
.senior-shop-row small { font-size: 15px; color: var(--bf-muted, #6b6b6b); }
.senior-shop-check { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--bf-line, rgba(127,127,127,0.35)); display: grid; place-items: center; font: 800 22px "Archivo", sans-serif; color: #fff; }
.senior-shop-row.is-done .senior-shop-check { background: var(--bf-attn-good, #3f6b4e); border-color: var(--bf-attn-good, #3f6b4e); }
.senior-shop-row.is-done strong { text-decoration: line-through; color: var(--bf-muted, #6b6b6b); }

/* Madplanens billeder i Enkel visning (v701). kostChoiceAvatar er den samme
   komponent som i den avancerede visning, bare stor nok til at et 70-aarigt
   oeje kan se hvad maaltidet er, foer navnet laeses. */
.senior-meal-top { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; }
.senior-meal-head { display: grid; gap: 2px; min-width: 0; }
.senior-meal .kost-recipe-av { width: 84px; height: 84px; border-radius: 18px; font-size: 1.9rem; }
.senior-meal .kost-recipe-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; }
.senior-meal-next { display: grid; grid-template-columns: 44px auto 1fr; gap: 10px; align-items: center; }
.senior-meal-next .kost-recipe-av { width: 44px; height: 44px; border-radius: 12px; font-size: 1.05rem; }
.senior-meal-next .kost-recipe-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.senior-meal-next strong { text-align: right; }

/* ---- Vand i dag i Enkel visning (17/9): ét tal, én stor knap og Fortryd ----
   Kun for klienter med et vandmål fra coachen. 0,2,0 slår .senior-card > strong
   (0,1,1), så tallet er skærmens store tal og ikke kortets 22 px. */
.senior-water .senior-water-value { display: block; font: 800 30px "Archivo", sans-serif; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--bf-ink, inherit); }
.senior-water .senior-water-add { margin-top: 4px; }
/* Fortryd står på kortets hvide flade, hvor .senior-big.quiet's grå fyld næsten
   ikke kan ses (målt 17/9). En kant i den dæmpede farve viser, at det er en knap. */
.senior-water .senior-water-undo { background: transparent; border: 2px solid var(--bf-muted, #6b6453); }

/* ===================== Dagens vaner (v706) ===================== */
.habit-sub { display: block; font: 800 12px "Archivo", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-accent-text, #a34320); margin: 8px 0 2px; }
.habit-sub.opt { color: var(--bf-gold, #8a6a1e); }
.habit-sub.muted { color: var(--bf-muted, #6b6453); }
.habit-sub.done { color: var(--bf-green, #5e7b5a); }
.habit-sub-row { list-style: none; padding: 0; margin: 0; }
.habit-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--bf-line, rgba(127,127,127,0.25)); background: var(--bf-surface, #fff); font-size: 12px; font-weight: 500; color: var(--bf-muted, #6b6453); vertical-align: middle; white-space: nowrap; }
.habit-status { display: block; color: var(--bf-muted, #6b6453); }
.habit-status.urgent { color: var(--bf-accent-text, #a34320); font-weight: 700; }
.habit-status.done { color: var(--bf-green, #5e7b5a); }
.senior-check-text { display: grid; gap: 2px; text-align: left; }
.senior-check-text b { font-weight: 700; }
.senior-check-text small.habit-status { font-size: 17px; font-weight: 400; }
.senior-check-text small.habit-status.urgent { font-weight: 700; }
.senior-check.is-static { cursor: default; }
.senior-box.dim { background: var(--bf-green-bg, #ebf2eb); border-color: var(--bf-green-bg, #ebf2eb); color: var(--bf-green, #5e7b5a); }
.senior-box.count { width: auto; min-width: 44px; padding: 0 8px; font-size: 15px; font-family: "Archivo", sans-serif; white-space: nowrap; }
.senior-card h4.habit-sub { margin: 6px 0 0; font-size: 15px; letter-spacing: 0.03em; text-transform: none; }
.senior-card .habit-alldone { margin: 4px 0; font-weight: 700; color: var(--bf-green, #5e7b5a); }
.phone-habit-tick.dim { opacity: 0.75; }
.bf-sand .main-content .phone-habit-tick.count { font-size: 0.8rem; width: auto; min-width: 40px; padding: 0 10px; border-radius: 20px; white-space: nowrap; }
.phone-habit-row.is-dim { opacity: 0.8; }
.phone-habit-row.is-empty strong { font-weight: 600; }
.habit-inline-link { display: inline-block; border: 0; background: none; padding: 10px 0; min-height: 44px; color: var(--bf-accent-text, #a34320); font-family: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.habit-foot { display: grid; gap: 4px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--bf-line, rgba(127,127,127,0.25)); font-size: 13.5px; color: var(--bf-muted, #6b6453); }
.phone-habit-more { list-style: none; padding: 8px 0 0; }
.phone-habit-more a { font-weight: 700; color: var(--bf-accent-text, #a34320); text-decoration: none; }
.habit-prompt-status { margin: 0 0 8px; font-size: 14px; color: var(--bf-muted, #6b6453); }
.habit-today-card .phone-habit-list { list-style: none; margin: 0; padding: 0; }
.habit-matrix-row .habit-chip { margin-left: 6px; }
.bf-sand .main-content .phone-habit-text .habit-chip { margin-left: 0; justify-self: start; }
.bf-sand .main-content .phone-habit-text small.habit-status { white-space: normal; }
.habit-matrix-row small.habit-status { font-size: 12.5px; margin-top: 2px; }

/* HUNDEPAKKE START
   Hundepakken i chatten. Vises uden noget klienttema, hos klienten (avanceret og
   Enkel visning) og hos coachen, i lyst og mørkt. En sendt hund står stor og
   uden boble i tråden.
   Gergø 23/9: emoji-vælgeren. Hundene vælges nu i emoji-arkets første fane
   (arkets egen blok herunder); den gamle 🐶-knap og dens panel i skrivefeltet
   er væk, og deres regler med dem. */

/* En sendt hund i tråden: stor, uden boble, tidspunktet under. Kassen er fast
   160 x 160, så den aldrig er nul høj før billedet er hentet. Hunden lægges mod
   kassens bund og mod afsenderens side, så tidspunktet står tæt under hunden. */
.chat-sticker {
  display: block;
  width: 160px;
  height: 160px;
  max-width: 100%;
  object-fit: contain;
  object-position: 0% 100%;
}
:is(.thread-message.mine, .coach-chat-bubble.mine, .senior-bubble.me) .chat-sticker { object-position: 100% 100%; }
.chat-sticker-body { display: grid; gap: 4px; justify-items: start; }
.chat-sticker-body small { font-size: 0.75rem; }
.thread-message.mine .chat-sticker-body,
.coach-chat-bubble.mine .chat-sticker-body { justify-items: end; }
.app-shell .main-content .thread-message.is-sticker,
.app-shell .main-content .coach-chat-bubble.is-sticker {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.app-shell.bf-sand .main-content .coach-chat-bubble.is-sticker,
.app-shell.bf-sand .main-content .coach-chat-bubble.mine.is-sticker {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
/* Kun så bred som hunden, så coachens skraldespand står ved hunden og ikke ude
   i den modsatte side af tråden. */
.coach-chat-bubble.is-sticker { width: fit-content; max-width: 100%; }
.coach-chat-bubble.mine.is-sticker { margin-left: auto; }
.app-shell .main-content .senior-bubble.is-sticker,
.app-shell .main-content .senior-bubble.me.is-sticker {
  padding: 0;
  background: transparent;
  color: inherit;
}
/* styles.css ca. linje 20556 maler tidspunktet i Labradors orange boble hvidt med
   !important. Uden boble står det på den lyse flade, så det skal være dæmpet. */
.app-shell.bf-sand .main-content .senior-bubble.me.is-sticker small {
  color: var(--bf-muted2, #55503f) !important;
}
.senior-bubble.me.is-sticker small { text-align: right; }

/* Mørkt tema: de sorte hunde får en skarp lys kant på 1 px, som et udstanset
   klistermærke, så silhuetten kan ses på trådens mørke flade. Fire forskudte lag
   uden sløring giver kanten hele vejen rundt og ingen glorie. Målt 16/9 i Chrome:
   alle 14 hunde har 100 % af kantpixels over 3:1 mod rgb(30, 27, 24); den gamle
   drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) gav 0 %. Farven er det mørke
   temas tekstfarve. Gergø 23/9: emoji-vælgeren. Samme kant på hundene i
   arkets hundefane og på fanens billede. */
.bf-dark .chat-sticker,
.bf-dark .chat-emoji-dog img,
.bf-dark .chat-emoji-tab.is-pack img {
  filter: drop-shadow(1px 0 0 rgba(242, 237, 228, 0.9)) drop-shadow(-1px 0 0 rgba(242, 237, 228, 0.9)) drop-shadow(0 1px 0 rgba(242, 237, 228, 0.9)) drop-shadow(0 -1px 0 rgba(242, 237, 228, 0.9));
}
/* HUNDEPAKKE SLUT */

/* GIFPAKKE MADS START
   Gergø 23/9: 2027-temaet. Gif-pakken i chatten, hos klienten og hos coachen i
   Coach HQ, hvor der ingen temaklasse er. Derfor står reglerne her og ikke i
   temaets blok. Husets .chat-sticker-regler ovenfor gælder; her er kun det,
   gif'erne kræver: billedet i sine egne mål (højst 220 px), runde hjørner uden
   hundenes lyse kant i mørkt tema, stillbillederne i panelet beskåret til
   felterne og knappens tekst "GIF". Stillbilledet ved reduceret bevægelse
   vælges af <picture> i markup.
   Gergø 27/9: v733-fletning. Panelet og GIF-knappen er afløst af gif-fanen i
   emoji-arket (samme maskine som hundene). Reglerne følger med: fanens
   stillbilleder og fanens billede beskåret med runde hjørner og uden hundenes
   lyse kant, og "GIF" som emoji-knappens ansigt (.chat-gif-face). */
.mads-gif-picture { display: block; }
.chat-sticker.chat-gif {
  width: auto;
  height: auto;
  max-width: min(220px, 100%);
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
}
.bf-dark .chat-sticker.chat-gif,
.bf-dark .chat-emoji-dog[data-pack="mads"] img,
.bf-dark .chat-emoji-tab.is-pack[data-tab="mads"] img { filter: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-dog[data-pack="mads"] img { object-fit: cover; border-radius: 10px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tab.is-pack[data-tab="mads"] img { object-fit: cover; border-radius: 6px; }
/* Husets regel maler al tekst i klientens skriveknapper hvid med !important
   (til de orange knapper). Emoji-knappen er gennemsigtig, så ansigtet "GIF"
   skal have blæk, og det kræver også !important. */
.chat-gif-face,
.app-shell.bf-sand .main-content :is(.portal-message-composer, .coach-message-composer, .senior-compose) button.chat-emoji-toggle[data-action][aria-expanded] > span.chat-gif-face {
  font: 800 0.8rem/1 "Archivo", sans-serif;
  letter-spacing: 0.04em;
  color: var(--bf-ink, #1a1815) !important;
}
/* GIFPAKKE MADS SLUT */

/* EMOJI-VAELGER START
   Gergø 23/9: emoji-vælgeren. Facit er den godkendte mockup
   (_design_handoff/emoji-vaelger-mockup-2026-09-23.html, skabelonens linje 152
   til 273): samme mål og farver, oversat til appens tokens. Knappen står i
   skrivefeltet; arket står lige efter formularen. Til og med 700 px er arket et
   fast lag over bundmenuen, og skrivefeltet løftes over det (som det faste
   skrivefelt, styles.css ca. linje 21206); fra 701 px er det et panel i
   chatkortet under skrivefeltet, 360 px højt med egen rulning.
   Temaerne virker gennem tokens; blokken nævner intet tema.
   Selektorerne er lange med vilje: husets knapregler (orange fyld i klientens
   skrivefelt med 0,6,1 og blæk på alle knapper med 0,7,1) vindes med
   specificitet, ikke !important. [hidden] respekteres: displayet sættes kun
   på :not([hidden]). */

/* Vej C: Noto Color Emoji som webfont, kun på beskedbobler, forhåndsvisninger
   af beskeder og knapperne i arket, så alle ser alle 1914 (også flag på pc'en
   og de nyeste på Gergøs Android 10). Skriften hostes selv (ingen forespørgsel
   til Google fra appen): de 11 skiver er skåret af scripts/noto-lav-skiver.mjs
   fra npm-pakken @fontsource/noto-color-emoji (Noto v47, OFL-1.1, licensen i
   assets/fonts/noto-color-emoji/LICENSE) med pakkens egne unicode-range, i
   COLRv1, som Chrome tegner (pakkens egne skiver er SVG og tegner tomme felter).
   Navnet bærer indholdets hash (sha256, 10 tegn), fordi skiverne ligger
   immutable i et år (.htaccess): et nyt snit får altid en ny adresse.
   Browseren henter kun de skiver, en besked bruger (målt 23/9: "Tak for i dag"
   med 💪🔥👍 henter skive 9, 137 KB), og service workeren gemmer dem til offline.
   👪 er lagt i skive 8 (pakkens skiver springer den over). # * og 0 til 9 står
   ikke i skive 2: uden Hanken (offline) tegnede Noto ellers tallene i boblerne
   som emoji-tal. De 12 taster (#️⃣ 1️⃣) tegnes af enhedens egen skrift. */
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-0-94077cb6db.woff2") format("woff2");
  unicode-range: U+1f1e6-1f1ff;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-1-9606c13152.woff2") format("woff2");
  unicode-range: U+200d,U+2620,U+26a7,U+fe0f,U+1f308,U+1f38c,U+1f3c1,U+1f3f3-1f3f4,U+1f6a9,U+e0062-e0063,U+e0065,U+e0067,U+e006c,U+e006e,U+e0073-e0074,U+e0077,U+e007f;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-2-98cc9887fe.woff2") format("woff2");
  unicode-range: U+a9,U+ae,U+200d,U+203c,U+2049,U+20e3,U+2122,U+2139,U+2194-2199,U+21a9-21aa,U+23cf,U+23e9-23ef,U+23f8-23fa,U+24c2,U+25aa-25ab,U+25b6,U+25c0,U+25fb-25fe,U+2611,U+2622-2623,U+2626,U+262a,U+262e-262f,U+2638,U+2640,U+2642,U+2648-2653,U+2660,U+2663,U+2665-2666,U+2668,U+267b,U+267e-267f,U+2695,U+269b-269c,U+26a0,U+26a7,U+26aa-26ab,U+26ce,U+26d4,U+2705,U+2714,U+2716,U+271d,U+2721,U+2733-2734,U+2747,U+274c,U+274e,U+2753-2755,U+2757,U+2764,U+2795-2797,U+27a1,U+27b0,U+27bf,U+2934-2935,U+2b05-2b07,U+2b1b-2b1c,U+2b55,U+3030,U+303d,U+3297,U+3299,U+fe0f,U+1f170-1f171,U+1f17e-1f17f,U+1f18e,U+1f191-1f19a,U+1f201-1f202,U+1f21a,U+1f22f,U+1f232-1f23a,U+1f250-1f251,U+1f310,U+1f3a6,U+1f3b5-1f3b6,U+1f3bc,U+1f3e7,U+1f441,U+1f499-1f49c,U+1f49f-1f4a0,U+1f4ac-1f4ad,U+1f4b1-1f4b2,U+1f4b9,U+1f4db,U+1f4f2-1f4f6,U+1f500-1f507,U+1f515,U+1f518-1f524,U+1f52f-1f53d,U+1f549,U+1f54e,U+1f5a4,U+1f5e8,U+1f5ef,U+1f6ab,U+1f6ad-1f6b1,U+1f6b3,U+1f6b7-1f6bc,U+1f6be,U+1f6c2-1f6c5,U+1f6d0-1f6d1,U+1f6d7,U+1f6dc,U+1f7e0-1f7eb,U+1f7f0,U+1f90d-1f90e,U+1f9d1-1f9d2,U+1f9e1,U+1fa75-1fa77,U+1faaf;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-3-570f75a183.woff2") format("woff2");
  unicode-range: U+200d,U+231a-231b,U+2328,U+23f0-23f3,U+2602,U+260e,U+2692,U+2694,U+2696-2697,U+2699,U+26b0-26b1,U+26cf,U+26d1,U+26d3,U+2702,U+2709,U+270f,U+2712,U+fe0f,U+1f302,U+1f321,U+1f392-1f393,U+1f3a9,U+1f3bd,U+1f3ee,U+1f3f7,U+1f3fa,U+1f451-1f462,U+1f484,U+1f489-1f48a,U+1f48c-1f48e,U+1f4a1,U+1f4a3,U+1f4a5,U+1f4b0,U+1f4b3-1f4b8,U+1f4bb-1f4da,U+1f4dc-1f4f1,U+1f4ff,U+1f508-1f514,U+1f516-1f517,U+1f526-1f529,U+1f52c-1f52e,U+1f550-1f567,U+1f56f-1f570,U+1f576,U+1f587,U+1f58a-1f58d,U+1f5a5,U+1f5a8,U+1f5b1-1f5b2,U+1f5c2-1f5c4,U+1f5d1-1f5d3,U+1f5dc-1f5de,U+1f5e1,U+1f5f3,U+1f6aa,U+1f6ac,U+1f6bd,U+1f6bf,U+1f6c1,U+1f6cb,U+1f6cd-1f6cf,U+1f6d2,U+1f6e0-1f6e1,U+1f6f0,U+1f97b-1f97f,U+1f9af,U+1f9ba,U+1f9e2-1f9e6,U+1f9ea-1f9ec,U+1f9ee-1f9f4,U+1f9f7-1f9ff,U+1fa71-1fa74,U+1fa79-1fa7b,U+1fa86,U+1fa8e-1fa8f,U+1fa91-1fa93,U+1fa96,U+1fa99-1faa0,U+1faa2-1faa7,U+1faaa-1faae;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-4-c2d0ea2de0.woff2") format("woff2");
  unicode-range: U+265f,U+26bd-26be,U+26f3,U+26f8,U+fe0f,U+1f004,U+1f0cf,U+1f380-1f384,U+1f386-1f38b,U+1f38d-1f391,U+1f396-1f397,U+1f399-1f39b,U+1f39e-1f39f,U+1f3a3-1f3a5,U+1f3a7-1f3a9,U+1f3ab-1f3b4,U+1f3b7-1f3bb,U+1f3bd-1f3c0,U+1f3c5-1f3c6,U+1f3c8-1f3c9,U+1f3cf-1f3d3,U+1f3f8-1f3f9,U+1f47e,U+1f4e2,U+1f4f7-1f4fd,U+1f52b,U+1f579,U+1f58c-1f58d,U+1f5bc,U+1f6f7,U+1f6f9,U+1f6fc,U+1f93f,U+1f941,U+1f945,U+1f947-1f94f,U+1f9e7-1f9e9,U+1f9f5-1f9f6,U+1fa70-1fa71,U+1fa80-1fa81,U+1fa83-1fa85,U+1fa87-1fa8a,U+1fa94-1fa95,U+1fa97-1fa98,U+1faa1,U+1faa9,U+1fadf;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-5-0f08b6a626.woff2") format("woff2");
  unicode-range: U+2693,U+26e9-26ea,U+26f1-26f2,U+26f4-26f5,U+26fa,U+26fd,U+2708,U+fe0f,U+1f301,U+1f303,U+1f306-1f307,U+1f309,U+1f310,U+1f3a0-1f3a2,U+1f3aa,U+1f3cd-1f3ce,U+1f3d5,U+1f3d7-1f3db,U+1f3df-1f3e6,U+1f3e8-1f3ed,U+1f3ef-1f3f0,U+1f488,U+1f492,U+1f4ba,U+1f54b-1f54d,U+1f5fa-1f5ff,U+1f680-1f6a2,U+1f6a4-1f6a8,U+1f6b2,U+1f6d1,U+1f6d5-1f6d6,U+1f6dd-1f6df,U+1f6e2-1f6e5,U+1f6e9,U+1f6eb-1f6ec,U+1f6f3-1f6f6,U+1f6f8,U+1f6fa-1f6fb,U+1f9bc-1f9bd,U+1f9ed,U+1f9f3,U+1fa7c;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-6-7e988d7e93.woff2") format("woff2");
  unicode-range: U+200d,U+2615,U+fe0f,U+1f32d-1f330,U+1f336,U+1f33d,U+1f344-1f37f,U+1f382,U+1f52a,U+1f7e9,U+1f7eb,U+1f942-1f944,U+1f950-1f96f,U+1f99e,U+1f9aa,U+1f9c0-1f9cb,U+1fad0-1fadc;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-7-1f9b9c586c.woff2") format("woff2");
  unicode-range: U+200d,U+2600-2601,U+2603-2604,U+2614,U+2618,U+26a1,U+26c4-26c5,U+26c8,U+26f0,U+2728,U+2744,U+2b1b,U+2b50,U+fe0f,U+1f300,U+1f304-1f305,U+1f308,U+1f30a-1f30f,U+1f311-1f321,U+1f324-1f32c,U+1f331-1f335,U+1f337-1f33c,U+1f33e-1f344,U+1f3d4,U+1f3d6,U+1f3dc-1f3de,U+1f3f5,U+1f400-1f43f,U+1f490,U+1f4a7,U+1f4ae,U+1f525,U+1f54a,U+1f573,U+1f577-1f578,U+1f648-1f64a,U+1f6d8,U+1f940,U+1f980-1f9ae,U+1f9ba,U+1fa90,U+1faa8,U+1fab0-1fabf,U+1facd-1facf,U+1fae7;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-8-32abc06f2e.woff2") format("woff2");
  unicode-range: U+200d,U+2640,U+2642,U+2695-2696,U+26f7,U+26f9,U+2708,U+2764,U+27a1,U+fe0f,U+1f33e,U+1f373,U+1f37c,U+1f384-1f385,U+1f393,U+1f3a4,U+1f3a8,U+1f3c2-1f3c4,U+1f3c7,U+1f3ca-1f3cc,U+1f3eb,U+1f3ed,U+1f3fb-1f3ff,U+1f430,U+1f466-1f469,U+1f46b-1f478,U+1f47c,U+1f481-1f483,U+1f486-1f487,U+1f48b,U+1f48f,U+1f491,U+1f4bb-1f4bc,U+1f527,U+1f52c,U+1f574-1f575,U+1f57a,U+1f645-1f647,U+1f64b,U+1f64d-1f64e,U+1f680,U+1f692,U+1f6a3,U+1f6b4-1f6b6,U+1f6c0,U+1f6cc,U+1f91d,U+1f926,U+1f930-1f931,U+1f934-1f93a,U+1f93c-1f93e,U+1f977,U+1f9af-1f9b3,U+1f9b8-1f9b9,U+1f9bc-1f9bd,U+1f9cc-1f9cf,U+1f9d1-1f9df,U+1fa70,U+1fa82,U+1fac3-1fac5,U+1fac8,U+1faef,U+1f46a;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-9-8cbf29acbe.woff2") format("woff2");
  unicode-range: U+200d,U+2194-2195,U+2603,U+261d,U+2620,U+2639-263a,U+2665,U+26a1,U+26c4,U+270a-270d,U+2728,U+2763-2764,U+2b50,U+fe0f,U+1f31a-1f31f,U+1f32b,U+1f389-1f38a,U+1f3fb-1f3ff,U+1f440-1f450,U+1f463-1f465,U+1f479-1f47b,U+1f47d-1f480,U+1f485,U+1f48b-1f48c,U+1f493-1f49f,U+1f4a2,U+1f4a4-1f4a6,U+1f4a8-1f4ab,U+1f4af,U+1f525,U+1f573,U+1f590,U+1f595-1f596,U+1f5a4,U+1f5e3,U+1f600-1f644,U+1f648-1f64a,U+1f64c,U+1f64f,U+1f90c-1f925,U+1f927-1f92f,U+1f932-1f933,U+1f970-1f976,U+1f978-1f97a,U+1f9a0,U+1f9b4-1f9b7,U+1f9bb,U+1f9be-1f9bf,U+1f9d0,U+1f9e0-1f9e1,U+1fa75-1fa79,U+1fac0-1fac2,U+1fac6,U+1fae0-1fae6,U+1fae8-1faea,U+1faef-1fafa;
}
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/noto-color-emoji/noto-color-emoji-v47-10-9605115e29.woff2") format("woff2");
  unicode-range: U+1f6d9,U+1fa8b-1fa8d,U+1facc,U+1fadd,U+1faeb;
}
.app-shell .main-content :is(.thread-message p, .coach-chat-bubble p, .senior-bubble, .conversation-item small, .coach-thread-list-item small, .coach-scheduled-item p, .coach-message-body p) {
  font-family: "Hanken Grotesk", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
/* Skrivefelterne i klientens, Enkels og coachens chat har samme liste
   (orkestratoren 27/9): en emoji sat ind fra arket står ellers som en firkant
   i feltet på Android 10, før den er sendt. Kun skriften; størrelse og vægt
   er feltets egne. */
.app-shell .main-content :is(.portal-message-composer, .senior-compose, .coach-message-composer) [name="body"] {
  font-family: "Hanken Grotesk", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* Knappen: 44 x 44 med samme kant som clipsen. */
.chat-emoji-toggle,
.app-shell.bf-sand .main-content :is(.portal-message-composer, .coach-message-composer, .senior-compose) button.chat-emoji-toggle[data-action][aria-expanded] {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.3));
  background: transparent;
  box-shadow: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.app-shell.bf-sand .main-content :is(.portal-message-composer, .coach-message-composer, .senior-compose) button.chat-emoji-toggle[data-action][aria-expanded="true"] {
  border-color: var(--bf-accent, #c75d34);
  background: var(--bf-surface2, rgba(127, 127, 127, 0.1));
  box-shadow: inset 0 0 0 1px var(--bf-accent, #c75d34);
}
/* Fokusringen er mockuppens 3 px. Den lange selektor (0,7,1) vinder over husets
   .bf-sand button:focus-visible (0,2,1), som ellers gav 2 px (skeptikeren 23/9). */
.chat-emoji-toggle:focus-visible,
.app-shell.bf-sand .main-content :is(.portal-message-composer, .coach-message-composer, .senior-compose) button.chat-emoji-toggle[data-action]:focus-visible {
  outline: 3px solid var(--bf-accent, #c75d34);
  outline-offset: 2px;
}
/* Den sidste knap før Send skubber Send til højre: emoji-knappen. */
.app-shell.bf-sand .main-content .portal-message-composer button.chat-emoji-toggle[data-action][aria-expanded] { margin-right: auto; }

/* Coachens skrivefelt er på telefon et gitter med én kolonne (styles.css ca.
   linje 12512). Knappen deler række med clipsen, som hunden gjorde, så feltet
   ikke bliver en række højere. Er feltet flex (bred skærm), betyder reglerne intet. */
.app-shell .main-content .coach-message-composer:has(.chat-emoji-toggle) { grid-template-columns: auto auto minmax(0, 1fr); }
.app-shell .main-content .coach-message-composer:has(.chat-emoji-toggle) > :not(.chat-attach, .chat-emoji-toggle) { grid-column: 1 / -1; }

/* Enkel: en knap med tekst ("😊 Emojis"), 56 px og 20 px, som clipsen i Enkel. */
.app-shell.bf-sand .main-content .senior-compose button.chat-emoji-toggle[data-action][aria-expanded] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 16px;
  border-width: 2px;
  font-size: var(--sen-fs, 20px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bf-ink);
}

/* Arket. Søgefeltets kant er sin egen farve (3,37:1 lyst og 3,53:1 mørkt mod arket). */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] { --bf-emoji-field-line: #948B7B; }
.app-shell.bf-sand.bf-dark .main-content .chat-emoji-sheet[role] { --bf-emoji-field-line: #7A7063; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role]:not([hidden]) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  background: var(--bf-surface);
  color: var(--bf-ink);
  border-top: 1px solid var(--bf-line);
  outline: none;
  font: 16px/1.4 "Hanken Grotesk", Inter, system-ui, sans-serif;
  text-align: left;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-headrow { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-search-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] input.chat-emoji-search[data-action] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 44px 0 40px;
  border-radius: 999px;
  border: 1px solid var(--bf-emoji-field-line);
  background: var(--bf-surface2);
  color: var(--bf-ink);
  box-shadow: none;
  font: 16px/1.2 "Hanken Grotesk", Inter, system-ui, sans-serif;
  -webkit-appearance: none;
  appearance: none;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] input.chat-emoji-search[data-action]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] input.chat-emoji-search[data-action]::placeholder { color: var(--bf-muted); opacity: 1; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] input.chat-emoji-search[data-action]:focus,
body.is-emoji-kbd .app-shell.bf-sand .main-content .chat-emoji-sheet[role] input.chat-emoji-search[data-action] {
  outline: none;
  border-color: var(--bf-accent);
  box-shadow: inset 0 0 0 1px var(--bf-accent);
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] input.chat-emoji-search[data-action]:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 1px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-search-ic { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: var(--bf-muted); pointer-events: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] :is(button, input) { font-family: inherit; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button[data-action][type] {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  cursor: pointer;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-clear[data-action][type]:not([hidden]) {
  position: absolute;
  right: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  display: grid;
  place-items: center;
  color: var(--bf-muted);
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button:is(.chat-emoji-tone-toggle, .chat-emoji-close)[data-action][type] {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tone-toggle[data-action][type] { border: 1px solid var(--bf-line); background: transparent; font-size: 22px; line-height: 1; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tone-toggle[data-action][type][aria-expanded="true"] { border-color: var(--bf-accent); box-shadow: inset 0 0 0 1px var(--bf-accent); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-close[data-action][type] { border: 0; background: var(--bf-surface2); color: var(--bf-ink); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-close svg { width: 20px; height: 20px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button:is(.chat-emoji-tone-toggle, .chat-emoji-close, .chat-emoji-clear, .chat-emoji-tab, .chat-emoji-pick, .chat-emoji-tonepick)[data-action]:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: -3px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tones:not([hidden]) { flex: none; display: flex; gap: 6px; padding: 2px 12px 8px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tonepick[data-action][type] {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--bf-line);
  background: transparent;
  font-size: 24px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tonepick[data-action][type][aria-checked="true"] { border-color: var(--bf-accent); box-shadow: inset 0 0 0 2px var(--bf-accent); background: var(--bf-surface2); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tonebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 6px 10px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tonebar > span { width: 100%; font-size: 17px; font-weight: 700; color: var(--bf-ink); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tonebar button.chat-emoji-tonepick[data-action][type] { width: 52px; height: 52px; border-width: 2px; border-radius: 14px; font-size: 30px; }

/* Fanerne: 44 x 44, ikon 22 px, rækken ruller vandret og toner ud til højre. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tabs { position: relative; flex: none; display: flex; align-items: stretch; gap: 0; padding: 0 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bf-line); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tabs::-webkit-scrollbar { display: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-search .chat-emoji-tabs { display: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tabs.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tab[data-action][type] {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: none;
  color: var(--bf-muted);
  display: grid;
  place-items: center;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tab svg { width: 22px; height: 22px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tab[data-action][type][aria-current="true"] { color: var(--bf-accent-text, var(--bf-accent)); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tab[data-action][type][aria-current="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--bf-accent); }
/* En pakke: billede og navn forrest, en tynd streg efter. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tab.is-pack[data-action][type] { width: auto; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 4px; color: var(--bf-ink); font-size: 15px; font-weight: 800; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tab.is-pack[data-action][type][aria-current="true"] { color: var(--bf-accent-text, var(--bf-accent)); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tab span { color: inherit; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tab.is-pack img { display: block; width: 30px; height: 30px; object-fit: contain; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-tabsep { flex: none; width: 1px; margin: 10px 4px; background: var(--bf-line); }
/* Hundene: 4 i en række, 84 px høje, billede 72 px. Et tryk sender straks. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-dogs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 4px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-dog[data-action][type] { display: grid; place-items: center; padding: 4px; border: 0; border-radius: 12px; background: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-dog[data-action][type]:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: -3px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-dog img { display: block; width: 72px; height: 72px; max-width: 100%; object-fit: contain; }

/* Emojierne: ét rulbart forløb, Seneste først, overskriften står fast. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 18px; outline: none; scrollbar-width: thin; scrollbar-color: var(--bf-line) transparent; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] h3.chat-emoji-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 10px 6px 6px;
  background: var(--bf-surface);
  font: 800 14px/1.2 "Hanken Grotesk", Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-muted);
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-grid { display: grid; grid-template-columns: repeat(var(--chat-emoji-cols, 7), minmax(0, 1fr)); grid-auto-rows: 48px; }
/* Mørkt tema: hundenes lyse kant på 1 px, så 🖤 ⚫ 🎱 kan ses på den mørke flade.
   Også på træflinjernes emoji (højst seks træf), men ikke på navnet ved siden af:
   »sort hjerte« og »skak« stod uden kant (skeptikeren 23/9). */
.app-shell.bf-sand.bf-dark .main-content .chat-emoji-sheet[role] .chat-emoji-grid,
.app-shell.bf-sand.bf-dark .main-content .chat-emoji-sheet[role] .chat-emoji-pick.is-row .g,
.app-shell.bf-sand.bf-dark .main-content .chat-emoji-sheet[role] :is(.chat-emoji-tonepick, .chat-emoji-tone-toggle) .tg {
  filter: drop-shadow(1px 0 0 rgba(242, 237, 228, 0.9)) drop-shadow(-1px 0 0 rgba(242, 237, 228, 0.9)) drop-shadow(0 1px 0 rgba(242, 237, 228, 0.9)) drop-shadow(0 -1px 0 rgba(242, 237, 228, 0.9));
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick[data-action][type] {
  border: 0;
  border-radius: 12px;
  background: none;
  display: grid;
  place-items: center;
  font: 30px/1 var(--bf-emoji-font, "Apple Color Emoji", "Noto Color Emoji", sans-serif);
  scroll-margin: 40px 0 8px;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick[data-action][type]:active,
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick[data-action][type].is-hit { background: var(--bf-surface2); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick[data-action][type]:active,
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick[data-action][type].is-hit { transform: scale(0.9); transition: transform 0.08s; }
/* :hover kun med en mus. På en telefon bliver :hover hængende på det sidst
   trykkede felt, og i mørkt tema tegnede gitterets lyse kant så en lys firkant
   om det (skeptikeren 23/9). Trykket vises af :active og .is-hit. */
@media (hover: hover) {
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick[data-action][type]:hover { background: var(--bf-surface2); }
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-dog[data-action][type]:hover { background: var(--bf-surface2); }
}
/* Højst seks træf: linjer med det danske navn. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-list { display: grid; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick.is-row[data-action][type] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 10px;
  text-align: left;
  font: 600 16px/1.25 "Hanken Grotesk", Inter, system-ui, sans-serif;
  color: var(--bf-ink);
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-pick.is-row .g { flex: none; width: 40px; font: 32px/1 var(--bf-emoji-font, "Apple Color Emoji", "Noto Color Emoji", sans-serif); text-align: center; color: var(--bf-ink); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-pick.is-row span:not(.g) { color: var(--bf-ink); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] :is(p.chat-emoji-hint, p.chat-emoji-status) { margin: 10px 6px 6px; font-size: 14px; line-height: 1.4; color: var(--bf-muted); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] p.chat-emoji-hint.is-first { margin-top: 0; }

/* Emoji-skriften på knapperne i arket (vej C): Apple på Apple, ellers Noto.
   Segoe UI Emoji må ikke stå før Noto, ellers er flag bogstaver på pc'en. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] {
  --bf-emoji-font: "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .tg { font-family: var(--bf-emoji-font); }

/* Enkel (også i chokolade): større felter, tekst på knapper og faner. Søgefelt og Luk
   56 px, fem faner i én række (64 px), med en pakke seks i to rækker af tre
   (52 px, ikon ved siden af teksten), 5 emojis i en række (68 px, 42 px), og
   hudfarven øverst i Krop. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-headrow { padding: 12px 12px 8px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel input.chat-emoji-search[data-action] { height: 56px; min-height: 56px; padding-left: 46px; padding-right: 56px; border-width: 2px; border-radius: 16px; font-size: 20px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-search-ic { top: 16px; left: 14px; width: 24px; height: 24px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-clear[data-action][type]:not([hidden]) { width: 56px; height: 56px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-close[data-action][type] { width: auto; height: 56px; padding: 0 20px; border: 2px solid var(--bf-line); border-radius: 16px; background: transparent; color: var(--bf-ink); font: 800 20px/1 "Hanken Grotesk", Inter, system-ui, sans-serif; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel:not(.is-search) .chat-emoji-tabs { display: grid; grid-template-columns: repeat(var(--chat-emoji-tabs, 5), minmax(0, 1fr)); gap: 6px; padding: 0 12px 10px; overflow: visible; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel.has-pack .chat-emoji-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-tab[data-action][type] { width: auto; height: 64px; display: grid; justify-items: center; align-content: center; gap: 3px; border-radius: 14px; border: 2px solid transparent; color: var(--bf-ink); font: 700 16px/1.1 "Hanken Grotesk", Inter, system-ui, sans-serif; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel.has-pack button.chat-emoji-tab[data-action][type] { height: 52px; grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; padding: 0 6px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-tab.is-pack[data-action][type] { padding: 0 6px; font-size: 16px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-tab.is-pack img { width: 32px; height: 32px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-tab svg { width: 24px; height: 24px; color: var(--bf-muted); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-tab[data-action][type][aria-current="true"] { border-color: var(--bf-accent); background: var(--bf-surface2); color: var(--bf-accent-text, var(--bf-accent)); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-tab[data-action][type][aria-current="true"] svg { color: var(--bf-accent-text, var(--bf-accent)); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-tab[data-action][type][aria-current="true"]::after { display: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel h3.chat-emoji-head { padding: 12px 6px 8px; font: 800 18px/1.2 "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-grid { grid-auto-rows: 68px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-pick[data-action][type] { font-size: 42px; border-radius: 16px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-pick.is-row[data-action][type] { height: 68px; font-size: 20px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-pick.is-row .g { width: 52px; font-size: 40px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel :is(p.chat-emoji-hint, p.chat-emoji-status) { font-size: 17px; }

/* Enkel med arket åbent: kun tekstfeltet og Send over arket; clips, knappen og
   Indtal er skjult (arket har sin egen Luk). */
body.has-emoji-sheet .app-shell.bf-sand .main-content .senior-compose { grid-template-columns: minmax(0, 1fr) auto; }
body.has-emoji-sheet .app-shell.bf-sand .main-content .senior-compose textarea { grid-column: auto; min-height: 56px; }
body.has-emoji-sheet .app-shell.bf-sand .main-content .senior-compose :is(.chat-attach, button.chat-emoji-toggle[data-action][aria-expanded], .senior-voice) { display: none; }
body.has-emoji-sheet .app-shell.bf-sand .main-content .senior-compose .senior-big { padding: 0 20px; }

/* Arkets højde: halvdelen af skærmen (--bf-emoji-sheet-h sættes fra
   innerHeight ved åbning), 250 px mens telefonens tastatur er oppe. */
body.has-emoji-sheet { --bf-emoji-open-h: var(--bf-emoji-sheet-h, 50vh); }
body.has-emoji-sheet.is-emoji-kbd { --bf-emoji-open-h: 250px; }
/* Mens tastaturet er oppe, er fanerne skjult (spec: placering.tastatur.arket).
   I Enkel med en pakke tog de to fanerækker ellers 121 af de 250 px, og der var
   52 px tilbage: ingen hunde og ingen emojier (skeptikeren 23/9). */
body.is-emoji-kbd .app-shell.bf-sand .main-content .chat-emoji-sheet[role][id]:not([hidden]) .chat-emoji-tabs { display: none; }

/* Telefonens lag uden for #app (main.js, chatEmojiLayer): det bærer .app-shell's
   klasser og en .main-content, så tokens og regler gælder som i #app, men det
   er ingen kasse selv. Arket i det er et fast lag. */
#chat-emoji-lag,
#chat-emoji-lag > .main-content { display: contents; }

/* Opdaterings- og installationsbanneret (z-index 9999 og 9998) lå over arkets
   nederste rækker (14 emojier dækket ved 390 x 844). De venter, mens arket er
   åbent, og kommer igen, når det lukkes. */
body.has-emoji-sheet :is(#bf-update-banner, #bf-install-banner) { display: none; }

/* Telefon: et fast lag over bundmenuen (z-index over .bf-tabbar på 55), og
   skrivefeltet løftes arkets højde (plus tastaturet, --bf-emoji-kbd). */
@media (max-width: 700px) {
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role]:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bf-emoji-kbd, 0px);
    z-index: 60;
    height: var(--bf-emoji-open-h, 50vh);
    margin: 0;
  }
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-body { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  body.has-emoji-sheet .portal-message-composer { bottom: calc(var(--bf-emoji-kbd, 0px) + var(--bf-emoji-open-h, 50vh)); }
  body.has-emoji-sheet :is(.portal-thread, .message-thread) { padding-bottom: calc(var(--bf-composer-h, 120px) + var(--bf-emoji-open-h, 50vh) + var(--bf-emoji-kbd, 0px) + 24px); }
  /* Coachen (også Coach Enkel) og Enkel: samme løft. */
  body.has-emoji-sheet .coach-message-composer,
  body.has-emoji-sheet .bf-senior .senior-compose { bottom: calc(var(--bf-emoji-kbd, 0px) + var(--bf-emoji-open-h, 50vh)); }
  body.has-emoji-sheet .coach-thread-messages,
  body.has-emoji-sheet .bf-senior .senior-thread { padding-bottom: calc(var(--bf-composer-h, 120px) + var(--bf-emoji-open-h, 50vh) + var(--bf-emoji-kbd, 0px) + 24px); }
}

/* Bred skærm: et panel i chatkortet under skrivefeltet, som hundepanelet. Det
   rulles frem over bundmenuen, når det åbnes (scroll-margin). */
@media (min-width: 701px) {
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role]:not([hidden]) {
    position: relative;
    height: 360px;
    /* Aldrig højere end skærmen minus bundmenu, skrivefelt og luft: på en
       telefon på langs (844 x 390) fyldte panelet ellers hele skærmen, og
       teksten var rullet ud af syne (skeptikeren 23/9). Mindst 220 px. */
    max-height: max(220px, calc(100dvh - var(--bf-bottom-nav-h, 0px) - var(--bf-emoji-form-h, 72px) - 24px));
    margin: 0 12px 12px;
    border: 1px solid var(--bf-line);
    border-radius: 14px;
    overflow: hidden;
    scroll-margin-bottom: calc(var(--bf-bottom-nav-h, 0px) + 12px);
  }
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel:not([hidden]) { height: 470px; }
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel.has-pack:not([hidden]) { height: 506px; }
  /* Hundene fylder panelets bredde, mindst 84 px hver. */
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-dogs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* Smalle chatkort (skrivebordets tre kolonner fra 1181 px, hvor feltet i dag
   kun er 43 til 114 px bredt): tekstfeltet får hele første række, som på
   telefonen, og arkets søgefelt får sin egen række. Containere, ikke @media,
   fordi det er kortets bredde, der tæller. Telefonen (fra 320 px) rammes ikke. */
.app-shell.bf-sand .main-content .portal-message-composer:has(.chat-emoji-toggle),
.app-shell.bf-sand .main-content .chat-emoji-sheet[role]:not([hidden]) { container-type: inline-size; }
@container (max-width: 420px) {
  .app-shell.bf-sand .main-content .portal-message-composer input[name="body"] { flex: 1 1 100%; }
}
@container (max-width: 299px) {
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-headrow { flex-wrap: wrap; }
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-search-wrap { flex: 1 1 100%; }
  .app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-tone-toggle[data-action][type] { margin-left: auto; }
}
/* EMOJI-VAELGER SLUT */

/* ===================== Løbeuret (v713) =====================
   Én blok, så hele skærmen kan læses og fjernes som én enhed.
   Fasefarverne er bevidst mørke flader med hvid tekst: skærmen skal kunne
   læses i sol, fra et armbånd, i fart. Sand-temaets ink catch-all
   (.bf-sand .main-content :is(p,li,td,th,span,div), 0,2,1) maler ellers den
   hvide tekst mørk, så hver farve herunder står med !important eller med en
   selektor der er mindst lige så tung. Alt går gennem var(--bf-*, fallback),
   fordi brand-injektoren kan skrive tokens om pr. gym. */

.workout-player.is-run {
  max-width: none;
  padding: 0;
  gap: 0;
}
.workout-player.is-run .player-head { padding: 0.6rem 0.8rem 0; }
.workout-player.is-run .player-body { display: block; }
/* Foden er fixed med "Næste øvelse ›" og rykker stepIndex blindt: væk. */
.workout-player.is-run .player-footer { display: none; }
.workout-player.is-run.is-senior { padding-bottom: 0; }

/* Bjælken skjules, og hullet på 66 px den efterlader på telefon fjernes.
   En klasse PÅ bjælken virker ikke: dens className nulstilles hvert sekund. */
body:has(.run-screen) #bf-workout-timer { display: none; }
body:has(.run-screen) .workout-player { padding-top: 0; }
/* De to linjer ovenfor er ikke nok alene. .run-screen findes kun på ur-trinnet,
   så bjælken stod stadig på Klar- og slutskærmen. Og :has tager id'ets vægt:
   den pinnede body:has(#bf-workout-timer:not(.tv-clock)) .workout-player (1,2,1)
   vandt over (0,2,1), så de 66 px blev stående. Her står løbet med (1,3,1). */
body:has(.workout-player.is-run) #bf-workout-timer { display: none; }
body:has(#bf-workout-timer) .workout-player.is-run { padding-top: 0; }

/* ---- Klar til at løbe ---- */
.run-ready { display: grid; gap: 14px; padding: 12px 14px 32px; }
.run-ready h2 { margin: 0; font: 800 clamp(22px, 6vw, 28px)/1.15 "Archivo", sans-serif; }
.bf-sand .main-content .run-ready h2 { color: var(--bf-ink, #1C1A17); }
.run-ready-kicker {
  margin: 0;
  font: 800 13px/1.3 "Archivo", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bf-sand .main-content .run-ready-kicker { color: var(--bf-muted2, #55503F); }
.run-ready-total { margin: 0; font-size: 1.1rem; }
.bf-sand .main-content .run-ready-total strong { color: var(--bf-accent-text, var(--bf-accent, #A34320)); font-size: 1.35rem; }
.run-ready-timeline {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
}
.run-ready-timeline i,
.run-segbar i { display: block; min-width: 2px; border-radius: 2px; }
.run-ready-timeline i.run { background: var(--bf-accent, #C75D34); }
/* Gå lyst, løb mørkt: gå-segmentet er GÅ-fasens blå, bare lysere. */
.run-ready-timeline i.walk { background: #BCCFDC; }
.bf-sand.bf-dark .run-ready-timeline i.walk { background: rgba(188, 207, 220, 0.35); }
.run-ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.run-ready-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22));
}
.bf-sand .main-content .run-ready-list li span { color: var(--bf-muted2, #55503F); }
.run-ready-note {
  margin: 0;
  /* Luften forneden er en gennemsigtig kant, ikke padding: overflow klipper ved
     padding-kanten, så en fjerde linje ellers titter frem under de tre. */
  padding: 10px 12px 0;
  border-bottom: 10px solid transparent;
  border-left: 3px solid var(--bf-accent, #C75D34);
  border-radius: 0 12px 12px 0;
  background: var(--bf-surface2, rgba(127, 127, 127, 0.1));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.run-ready-note.is-open { display: block; overflow: visible; }
/* Vis mere står EFTER noten: inde i den blev knappen selv klippet af clamp'en. */
.run-ready .run-note-more { justify-self: start; width: auto; margin-top: -8px; }
.run-ready-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bf-surface2, rgba(127, 127, 127, 0.1));
}
.run-audio-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.run-audio-seg { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.3)); }
.run-audio-seg button {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  min-height: 40px;
  font: 700 14px "Archivo", sans-serif;
  cursor: pointer;
}
.bf-sand .main-content .run-audio-seg button { color: var(--bf-ink, #1C1A17); }
.bf-sand .main-content .run-audio-seg button.is-on { background: var(--bf-accent-btn, var(--bf-accent, #b34e28)); color: #fff !important; }
.run-audio-hint { display: block; font-size: 13.5px; line-height: 1.4; }
.bf-sand .main-content .run-audio-hint { color: var(--bf-muted2, #55503F); }
.run-audio-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-spotify-btn { justify-self: start; }
.run-screen-line { margin: 0; font-size: 13.5px; line-height: 1.45; }
.bf-sand .main-content .run-screen-line { color: var(--bf-muted2, #55503F); }
.run-start-btn { width: 100%; min-height: 64px; font-size: 1.2rem; font-weight: 800; border-radius: 16px; }
.run-manual-link { justify-self: center; }

/* ---- Under løbet ---- */
.run-screen {
  --run-bg: #4C4741;
  --run-fg: #FFFFFF;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 10px;
  /* Hele skærmen under afspillerens hoved, så Stop løbet aldrig ligger under folden. */
  min-height: calc(100dvh - 140px);
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--run-bg);
  position: relative;
}
.run-screen.is-phase-run { --run-bg: #B8441C; }
.run-screen.is-phase-walk { --run-bg: #2E5A78; }
.run-screen.is-phase-pause,
.run-screen.is-paused { --run-bg: #4C4741; }
.bf-sand.bf-dark .run-screen.is-phase-run { --run-bg: #963513; }
.bf-sand.bf-dark .run-screen.is-phase-walk { --run-bg: #24475E; }
.bf-sand.bf-dark .run-screen.is-phase-pause,
.bf-sand.bf-dark .run-screen.is-paused { --run-bg: #3B3833; }
/* Catch-all'en maler alt ink: hele løbeskærmen skriver hvidt med vilje. */
.bf-sand .main-content .run-screen,
.bf-sand .main-content .run-screen :is(p, span, b, strong, small, div, li, button) { color: var(--run-fg) !important; }
/* Blinket ved skift ligger i et pseudo-element. Et filter på .run-screen gjorde
   den til containing block for position: fixed, så låselaget og stop-arket
   hoppede ind i skærmen i 0,7 s, og Luk kunne trykkes imens. */
.run-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
}
.run-screen.run-flash::after { animation: run-flash-in 0.7s ease-out 1; }
@keyframes run-flash-in {
  0% { opacity: 0.45; }
  100% { opacity: 0; }
}

.run-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.run-top-btn {
  border: 0;
  background: transparent;
  min-width: 40px;
  min-height: 40px;
  font-size: 20px;
  cursor: pointer;
}
.run-top-title { flex: 1; text-align: center; font-size: 13.5px; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-segbar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; }
.run-segbar i { background: rgba(255, 255, 255, 0.24); }
.run-segbar i.done { background: rgba(255, 255, 255, 0.62); }
.run-segbar i.now { background: #FFFFFF; }

.run-mid { display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; }
.run-kicker {
  margin: 0;
  font: 800 15px/1.2 "Archivo", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.88;
}
.run-word {
  margin: 0;
  font: 900 clamp(46px, 14vw, 64px)/1 "Archivo", sans-serif;
  letter-spacing: 0.02em;
}
.run-target { margin: 0; font: 800 20px/1.2 "Archivo", sans-serif; opacity: 0.9; }
.run-clock {
  margin: 0;
  font: 900 clamp(96px, 28vw, 140px)/1 "Archivo", sans-serif;
  font-variant-numeric: tabular-nums;
}
.run-screen.is-final3 .run-clock { animation: run-pulse 1s ease-in-out infinite; }
@keyframes run-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.run-hint { margin: 0; font-size: 15px; opacity: 0.9; }
.run-next { margin: 0; font-size: 16px; font-weight: 700; opacity: 0.92; }

.run-stats { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.run-stat { display: grid; gap: 2px; min-width: 64px; text-align: center; }
/* 12 px med opacity 0.75 gav ca. 3,7:1 på LØB-orange. 13 px fed med 0.92 giver 4,8:1. */
.run-stat-label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.run-stat b { font: 800 17px/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; }

.run-actions { display: grid; gap: 8px; }
.run-actions-row { display: flex; gap: 8px; }
.run-actions-row .button { flex: 1; min-height: 56px; }
.run-tap-btn { width: 100%; min-height: 64px; font-size: 1.15rem; font-weight: 800; border-radius: 16px; }
/* Mørkt tema maler knapperne med (0,5,0); de her står lige så tungt og senere. */
.bf-sand .main-content .run-screen .run-actions .button-secondary {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff !important;
}
.bf-sand .main-content .run-screen .run-actions .button-primary {
  background: #FFFFFF;
  border: 0;
  color: var(--run-bg) !important;
}
.run-ghost {
  border: 0;
  background: transparent;
  min-height: 44px;
  font: 700 15px "Archivo", sans-serif;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.92;
}
/* Holdet må ikke blive til scroll, tekstvalg eller telefonens lange-tryk-menu:
   hver af dem giver pointercancel, og så nulstilles holdet på 1,5 s. */
.run-hold {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.run-hold-ring { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.3); }
.run-hold.is-holding .run-hold-ring { width: 100%; transition: width 1s linear; }
.run-lock-hold.is-holding .run-hold-ring { transition: width 1.5s linear; }
.run-pause-spotify { margin: 0; text-align: center; }

/* Låst skærm viser STADIG ord, tal og næste-linje: kortet ligger nede over
   knapperne, og sløret er let. Laget er fixed over hele afspilleren, så også
   Luk i hovedet er dødt for berøring; persona-baren (9600) ligger stadig over. */
.run-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 4100;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.18);
}
.run-lock-hold {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 320px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  background: rgba(12, 10, 8, 0.82);
  cursor: pointer;
}
.run-lock-icon { font-size: 34px; }
.run-lock-text { font-size: 16px; line-height: 1.35; text-align: center; }

/* Over foden (4000) og under persona-baren (9600), så "Vis som" stadig kan lukkes. */
.run-confirm {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(520px, 100%);
  z-index: 4100;
  display: grid;
  gap: 12px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: var(--bf-surface, #FFFFFF);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
}
/* Arket står inde i .run-screen, hvis hvide tekst ellers ville gøre Nej-knappen
   usynlig på det lyse ark. */
.bf-sand .main-content .run-screen .run-confirm,
.bf-sand .main-content .run-screen .run-confirm :is(p, span, strong) { color: var(--bf-ink, #1C1A17) !important; }
.bf-sand .main-content .run-screen .run-confirm .button-secondary {
  background: var(--bf-surface2, #FBFAF6);
  border: 1px solid var(--bf-line, #E5DFD2);
  color: var(--bf-ink, #1C1A17) !important;
}
.bf-sand .main-content .run-screen .run-confirm .button-primary {
  background: var(--bf-accent-btn, var(--bf-accent, #b34e28));
  border: 0;
  color: #fff !important;
}
.run-confirm p { margin: 0; font-size: 1.05rem; line-height: 1.4; }
.run-confirm-actions { display: grid; gap: 8px; }
.run-confirm-actions .button { min-height: 54px; }

.run-gap-banner {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bf-attn-warn-bg, #FBF3D9);
}
.bf-sand .main-content .run-gap-banner { color: var(--bf-gold, #8A6A1E); }

/* ---- Løbet er slut ---- */
.run-finish { display: grid; gap: 14px; padding: 14px 14px 40px; }
.run-finish h2 { margin: 0; font: 800 clamp(24px, 7vw, 32px)/1.1 "Archivo", sans-serif; }
.bf-sand .main-content .run-finish h2 { color: var(--bf-ink, #1C1A17); }
.run-finish-eyebrow { font: 800 12px "Archivo", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.bf-sand .main-content .run-finish-eyebrow { color: var(--bf-muted2, #55503F); }
.run-finish-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.run-finish-time { display: grid; gap: 2px; text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--bf-surface2, rgba(127, 127, 127, 0.1)); }
.run-finish-time b { font: 800 clamp(22px, 7vw, 30px)/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; }
.bf-sand .main-content .run-finish-time small { color: var(--bf-muted2, #55503F); }
.run-finish-distance { margin: 0; font-size: 1.15rem; }
.bf-sand .main-content .run-finish-distance strong { color: var(--bf-accent-text, var(--bf-accent, #A34320)); }
.run-finish-note,
.run-manual-note { margin: 0; font-size: 13.5px; line-height: 1.45; }
.bf-sand .main-content .run-finish-note { color: var(--bf-muted2, #55503F); }
.run-finish-intervals { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--bf-surface2, rgba(127, 127, 127, 0.1)); }
.run-finish-intervals-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.run-finish-intervals-head strong { flex: 1 1 auto; min-width: 0; }
.run-finish-intervals-head .senior-link { flex: 0 0 auto; width: auto; white-space: nowrap; }
.run-finish-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.run-finish-row { padding: 5px 0; border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); font-size: 14.5px; }
.bf-sand .main-content .run-finish-row.is-gap,
.bf-sand .main-content .run-finish-row.is-early { color: var(--bf-gold, #8A6A1E); }
.bf-sand .main-content .run-finish-row.is-skipped { color: var(--bf-muted2, #55503F); }
.run-finish-compare { margin: 0; font-weight: 700; }
.run-finish-actions { display: grid; gap: 6px; }
.run-finish-btn { width: 100%; min-height: 64px; font-size: 1.15rem; font-weight: 800; border-radius: 16px; }
/* Skeptiker 16/9: et stoppet forsøgs veje videre (Start forfra, Jeg løb uden
   appen) og Nej til et hul der stod ubesvaret ved planens slut. */
.run-again-link { justify-self: center; }
.run-gap-undo { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-radius: 12px; background: var(--bf-attn-warn-bg, #FBF3D9); }

@media (max-width: 700px) {
  .run-screen { min-height: calc(100dvh - 118px); padding-inline: 12px; }
  .run-stat { min-width: 56px; }
}

/* ---- Etape C2: GPS, Ret tallene og manuel tilstand ----
   Stadig inde i løbeurets blok. GPS findes kun mens skærmen er tændt (MÅLT 16/9),
   så linjerne her er rolige og aldrig en fejl: løbet kører videre uden GPS. */

/* Nægtet adgang: én rolig linje i stat-rækken, over hele bredden. */
.run-gps-line { flex-basis: 100%; margin: 2px 0 0; text-align: center; font-size: 14px; line-height: 1.35; opacity: 0.92; }
/* "5:26/km" er bredere end et ur: tallet må ikke skubbe rækken ud af skærmen. */
.run-stat b { white-space: nowrap; }

/* Slutskærmen: målt med GPS, ruten og kilometer for kilometer. */
.run-finish-gps {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bf-surface2, rgba(127, 127, 127, 0.1));
}
.run-finish-gps-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bf-sand .main-content .run-finish-gps-head strong { color: var(--bf-ink, #1C1A17); }
.bf-sand .main-content .run-finish-gps-head span { color: var(--bf-accent-text, var(--bf-accent, #A34320)); font-weight: 800; }
.run-route-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 320 / 200;
  border-radius: 12px;
  background: var(--bf-surface, #FFFFFF);
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22));
}
.run-route-line { fill: none; stroke: var(--bf-accent, #C75D34); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.run-route-start { fill: #2E5A78; stroke: #FFFFFF; stroke-width: 2; }
.run-route-end { fill: var(--bf-ink, #1C1A17); stroke: var(--bf-surface, #FFFFFF); stroke-width: 2; }
.bf-sand.bf-dark .run-route-start { fill: #8FB3CC; stroke: var(--bf-surface, #1E1B18); }
.run-splits-title { margin: 0; font: 800 12px/1.2 "Archivo", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.bf-sand .main-content .run-splits-title { color: var(--bf-muted2, #55503F); }
.run-splits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
}
.run-splits li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--bf-surface, #FFFFFF);
  font-size: 14px;
}
.run-splits b { font-variant-numeric: tabular-nums; }
.bf-sand .main-content .run-splits li span { color: var(--bf-muted2, #55503F); }
.bf-sand .main-content .run-splits li b { color: var(--bf-ink, #1C1A17); }

/* Ret tallene og "Jeg løb uden appen". Felterne er 16 px, så iOS ikke zoomer. */
.run-finish .run-edit-btn { justify-self: start; width: auto; margin-top: -6px; }
.run-edit,
.run-manual {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: var(--bf-surface2, rgba(127, 127, 127, 0.1));
}
.run-edit-q,
.run-manual-q { margin: 0; line-height: 1.4; }
.bf-sand .main-content .run-edit-q,
.bf-sand .main-content .run-manual-q strong,
.bf-sand .main-content .run-edit-q strong { color: var(--bf-ink, #1C1A17); }
.run-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.run-edit-name { grid-column: 1 / -1; font-weight: 800; }
.run-field { display: grid; gap: 4px; font-size: 14px; }
.run-field span { font-weight: 700; }
.bf-sand .main-content .run-field small { color: var(--bf-muted2, #55503F); font-weight: 600; }
.run-field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.run-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.run-edit-actions .button { flex: 1 1 140px; min-height: 48px; }
.run-manual .run-manual-save { min-height: 56px; font-size: 1.05rem; font-weight: 800; border-radius: 14px; }
.run-stepper { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; }
.run-stepper-label { font-weight: 800; }
.run-stepper-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.3));
  background: var(--bf-surface, #FFFFFF);
  font: 800 26px/1 "Archivo", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.run-stepper-btn:disabled { opacity: 0.4; cursor: default; }
.run-stepper-value { min-width: 76px; text-align: center; font: 800 20px/1 "Archivo", sans-serif; font-variant-numeric: tabular-nums; }
.bf-sand .main-content .run-stepper-value { color: var(--bf-ink, #1C1A17); }

@media (max-width: 380px) {
  .run-edit-row { grid-template-columns: 1fr; }
  .run-stepper { grid-template-columns: 1fr auto auto auto; gap: 6px; }
  .run-stepper-value { min-width: 60px; }
}

/* ---- Etape C3: Enkel visning (ét ord, ét tal, én knap) ----
   Stadig inde i løbeurets blok. Afspilleren ligger aldrig i .bf-senior, så alt
   her er scopet til .workout-player.is-senior eller til de nye run-senior-klasser.
   Knapperne er de kendte .senior-big og .senior-link. På fasefarven er den store
   knap hvid med fasens farve som tekst: en orange knap på LØB-orange kan ikke ses.
   Farverne står med !important og mindst samme vægt som ink catch-all'en og
   .bf-sand .main-content .senior-big:not(.quiet) :is(span, small) (0,4,1). */

/* Klar og slut: stor skrift, luft, lys flade som resten af Enkel visning. */
.workout-player.is-run.is-senior .run-senior-ready,
.workout-player.is-run.is-senior .run-senior-finish { gap: 16px; padding: 16px 16px 44px; font-size: 20px; line-height: 1.35; }
.workout-player.is-run.is-senior .run-senior-ready h2,
.workout-player.is-run.is-senior .run-senior-finish h2 { margin: 0; font: 800 30px/1.15 "Archivo", sans-serif; }
.bf-sand .main-content .workout-player.is-senior .run-senior-finish h2 { color: var(--bf-ink, #1C1A17); }
.run-senior-head { display: grid; gap: 4px; }
.run-senior-day { margin: 0; font-size: 18px; }
.bf-sand .main-content .run-senior-ready .run-senior-day { color: var(--bf-muted2, #55503F); }
.run-senior-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); }
.run-senior-card h3 { margin: 0; font: 800 20px/1.2 "Archivo", sans-serif; }
.run-senior-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 20px; line-height: 1.35; }
.run-senior-about { margin: 0; font: 800 26px/1.2 "Archivo", sans-serif; }
.run-senior-line { margin: 0; font-size: 18px; line-height: 1.4; }
.bf-sand .main-content .run-senior-ready .run-senior-card h3,
.bf-sand .main-content .run-senior-ready .run-senior-plan li,
.bf-sand .main-content .run-senior-ready .run-senior-line { color: var(--bf-ink, #1C1A17); }
.bf-sand .main-content .run-senior-ready .run-senior-about { color: var(--bf-accent-text, var(--bf-accent, #A34320)); }
.workout-player.is-senior .run-senior-ready .run-start-btn,
.workout-player.is-senior .run-senior-finish .run-finish-btn,
.workout-player.is-senior .run-senior-finish .senior-big { min-height: 72px; font-size: 24px; border-radius: 18px; }
.workout-player.is-run.is-senior .senior-link { min-height: 52px; font-size: 18px; }

/* Slutskærmen: sætningerne, de fem store chips og tælleren. */
.run-senior-said { display: grid; gap: 6px; }
.run-senior-said p { margin: 0; font-size: 22px; line-height: 1.35; }
.bf-sand .main-content .run-senior-finish .run-senior-said p { color: var(--bf-ink, #1C1A17); }
.workout-player.is-senior .run-senior-rate { margin: 0; background: var(--bf-surface2, rgba(127, 127, 127, 0.12)); border: 0; border-radius: 18px; }
.workout-player.is-senior .run-senior-rate .difficulty-rate-label { font-size: 20px; letter-spacing: 0; text-transform: none; opacity: 1; }
/* Fem chips i to rækker, tre og to, så Meget hård aldrig skubber Ekstrem alene ned
   på en hel linje (set på skærmen 16/9, 390 × 844). */
.workout-player.is-senior .run-senior-rate .difficulty-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.workout-player.is-senior .run-senior-rate .difficulty-chip:nth-child(n+4) { grid-column: span 3; }
.workout-player.is-senior .run-senior-rate .difficulty-chip {
  grid-column: span 2;
  min-height: 56px;
  min-width: 0;
  font-size: 17px;
  border-radius: 14px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.35));
}
.workout-player.is-senior .run-senior-manual { gap: 16px; }
.workout-player.is-senior .run-senior-manual .run-stepper-btn { width: 64px; height: 64px; font-size: 32px; }
.workout-player.is-senior .run-senior-manual .run-stepper-value { min-width: 88px; font-size: 26px; }
.workout-player.is-senior .run-senior-manual .run-stepper-label { font-size: 20px; }

/* Uret: kicker, bjælke, evt. banner, ord og tal i midten, knapperne nederst. */
.run-screen.run-senior-screen { display: flex; flex-direction: column; gap: 12px; }
.run-senior-screen .run-mid { flex: 1 1 auto; gap: 10px; }
.run-senior-kicker { margin: 0; text-align: center; font: 800 18px/1.2 "Archivo", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.workout-player.is-senior .run-senior-screen .run-word { font: 900 clamp(60px, 18vw, 80px)/1 "Archivo", sans-serif; }
.workout-player.is-senior .run-senior-screen .run-clock { font: 900 clamp(96px, 32vw, 140px)/1 "Archivo", sans-serif; white-space: nowrap; }
.workout-player.is-senior .run-senior-screen .run-next { font-size: 22px; line-height: 1.3; }
.workout-player.is-senior .run-senior-screen .run-target { font-size: 24px; }
.run-senior-banner {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
}
.run-senior-screen .run-actions { gap: 10px; }
.run-screen .senior-big.run-senior-big { position: relative; min-height: 76px; font-size: 26px; border-radius: 20px; }
.run-screen .senior-big.run-senior-big,
.bf-sand .main-content .run-screen .senior-big.run-senior-big { background: #FFFFFF !important; color: var(--run-bg) !important; }
.bf-sand .main-content .run-screen .senior-big.run-senior-big :is(span, small) { color: var(--run-bg) !important; }
/* Holdet fylder knappen med fasens farve, svagt, og teksten står over fyldet. */
.run-screen .run-senior-big .run-hold-ring { background: rgba(0, 0, 0, 0.16); }
.run-screen .run-hold .run-hold-label { position: relative; }
.run-senior-hold-hint { margin: -4px 0 0; text-align: center; font-size: 16px; opacity: 0.92; }
.run-senior-screen .senior-link { min-height: 52px; font-size: 18px; }
.run-senior-screen .run-senior-stop { opacity: 0.92; }
/* Låsekortet dækker hele knap-området i Enkel: set på skærmen 16/9 (390 × 844)
   stak den store knap halvt frem under et smalt kort og lignede en knap man kunne trykke på. */
.workout-player.is-senior .run-senior-screen .run-lock-hold { width: 100%; max-width: 480px; min-height: 150px; align-content: center; background: #16130F; }
.workout-player.is-senior .run-senior-screen .run-lock-text { font-size: 20px; }
.workout-player.is-senior .run-senior-screen .run-lock-icon { font-size: 40px; }

/* Vil du stoppe? fylder hele skærmen i Enkel visning, med to store knapper. */
.run-confirm.run-senior-confirm {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  transform: none;
  border-radius: 0;
  align-content: center;
  gap: 16px;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.run-confirm.run-senior-confirm p { font: 800 26px/1.3 "Archivo", sans-serif; text-align: center; }
.bf-sand .main-content .run-screen .run-confirm .senior-big:not(.quiet) { color: #FFFFFF !important; }
.bf-sand .main-content .run-screen .run-confirm .senior-big.quiet { color: var(--bf-ink, #1C1A17) !important; }

/* Enkel Hjem og Træning: Sidst-kortet i ord for et løbepas. */
.senior-run-last { font-size: 20px; line-height: 1.4; }

/* ---- Løbeuret, etape C4: overblik, historik, coachens tabel og løbeindstillinger ----
   Alt går gennem var(--bf-*, fallback), så det virker i lys og mørk sand og i
   det gamle mørke portaltema. Tekstfarven arves (ink catch-all'en giver ink og
   muted2), kun fladerne og kilde-pillerne har egne farver. */

/* Ugestrippen: løbepassets korte tal ("10×1 min") står med faste cifre, og på
   telefon ombrydes det i stedet for at blive til "1…" (målt 16/9 på 390 px: dagens
   kolonne har 34 px til teksten). */
.program-week-pill.run-week-pill { padding: 4px 2px; text-align: center; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: break-word; text-overflow: clip; }

/* Lille Åbn Spotify på I dag-kortet ved siden af Start løbet. */
.training-row-actions .run-row-spotify { white-space: nowrap; }

/* Gennemførte løb og Mine løb: Denne uge, Sidste uge, Hele programmet og listen. */
.run-overview-body { display: grid; gap: 12px; padding: 14px 18px 16px; }
.run-volume { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.run-volume-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22));
  background: var(--bf-surface2, rgba(127, 127, 127, 0.08));
}
.run-volume-cell span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.run-volume-cell strong { font-size: 0.98rem; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.run-history { list-style: none; margin: 0; padding: 0; display: grid; }
.run-history li { border-top: 1px solid var(--bf-line, rgba(127, 127, 127, 0.22)); }
.run-history li:first-child { border-top: 0; }
.run-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.run-history-row:focus-visible { outline: 2px solid var(--bf-accent, #c75d34); outline-offset: 2px; border-radius: 8px; }
.run-history-main { display: grid; gap: 3px; min-width: 0; }
.run-history-main strong { font-size: 0.94rem; overflow-wrap: anywhere; }
.run-history-main small { font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.run-history-go { font-size: 1.3rem; opacity: 0.7; }
.run-history-empty { margin: 0; font-size: 0.92rem; line-height: 1.45; }

/* Slutskærmen set bagefter: bedømmelsen som tekst og en Luk-knap. */
.run-finish.is-read-only .run-finish-rated { margin: 4px 0 0; font-weight: 700; }
.run-finish.is-read-only .run-finish-close { width: 100%; min-height: 52px; }

/* Coachens resultatpanel for et løbepas: egen tabel med egen gitter-regel. Den
   pinnede regel for .results-head/.results-row (min-width 760 px) er urørt. */
.results-head.is-run,
.results-row.is-run {
  grid-template-columns: minmax(140px, 1.2fr) minmax(90px, 0.8fr) minmax(90px, 0.8fr) minmax(64px, 0.6fr) minmax(96px, 0.8fr) minmax(150px, 1.1fr);
  min-width: 680px;
}
.results-row.is-run.is-sub { padding: 4px 0; font-size: 0.9em; border-bottom-style: dashed; }
.results-row.is-run.is-sub .results-name { padding-left: 14px; font-weight: 500; opacity: 0.9; }
.results-run-num { font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.results-run-total { padding-bottom: 2px; }
.results-run-gap { padding: 0 0 6px; font-size: 0.9rem; font-weight: 700; }
.results-pills .run-source {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--bf-line, rgba(127, 127, 127, 0.4));
  background: transparent;
  font-size: 0.8rem;
  white-space: nowrap;
}
.results-pills .run-source.is-gap,
.results-pills .run-source.is-early { background: rgba(199, 93, 52, 0.16); border-color: rgba(199, 93, 52, 0.55); }
.results-pills .run-source.is-edited,
.results-pills .run-source.is-manual,
.results-pills .run-source.is-watch { background: rgba(46, 90, 120, 0.16); border-color: rgba(46, 90, 120, 0.55); }
.results-pills .run-source.is-gps { background: rgba(58, 125, 68, 0.16); border-color: rgba(58, 125, 68, 0.55); }
.cts-volume.cts-run { font-variant-numeric: tabular-nums; }

/* Løbeindstillinger: klientkortets Løb-kort og klientens Indstillinger. */
.run-prefs-body { display: grid; gap: 16px; padding: 14px 20px 18px; }
.run-prefs-body > .bf-set-note { margin: 0; }
.run-prefs-field { display: grid; gap: 8px; min-width: 0; }
.run-prefs-field > strong,
.run-prefs-field > label > strong,
.run-prefs-body .self-coached-toggle strong { font-size: 0.95rem; }
.run-prefs-field .admin-hint { margin: 0; }
.run-prefs-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.run-prefs-link input { flex: 1 1 220px; min-width: 0; min-height: 44px; font-size: 16px; }
.run-prefs-hint { font-size: 0.8rem; line-height: 1.4; }
.run-prefs-seg button { min-height: 44px; }

/* ===================== Tablet (v714) ===================== */
/* Gergø 16/9 kl. 16.05: menuen på tabletten lå hulter til bulter. Målt samme dag
   ved 820 x 1180: sidebaren var statisk, 805 x 1180 px, og fyldte hele første
   skærm, og indholdet startede først på 1289 px. Mellem 721 og 1180 px fandtes
   hverken desktoppens sidebar eller telefonens navigation.
   Fire dele, i denne rækkefølge og efter alt andet, så kaskaden vinder over
   1180-blokken, 820-blokken, sand-sidebaren og kostens regel fra 980 px:
   T1 tablet på højkant (721 til 1023), T2 tablet liggende (1024 til 1180),
   T3 fælles tablet-indhold (721 til 1180) og T4 Enkel visning og afspilleren
   fra 721 px. Telefonens blokke (max-width: 720px) og desktoppens blokke er ikke
   rørt. T5 retter offline-linjen på desktop og gælder kun, mens den vises. */

/* ===================== T1: tablet på højkant, 721 til 1023 px =====================
   Målt 16/9: mellem 721 og 1180 px lå menuen som en blok på en hel skærmhøjde
   øverst, og indholdet startede først på 1123 til 1388 px. Tabletten får her
   telefonens bundmenu og Mere-skuffe. Telefonens egne blokke (max-width: 720px)
   er ikke rørt, reglerne er kopieret hertil, så telefonen ikke kan ændre sig.
   Retter man bundmenuen eller skuffen, skal ≤720-blokken og T1 rettes sammen.
   Grænsen er 1023.98 px og ikke 1023 px: målt 16/9 i Chrome med skalering 125 %
   var et vindue på 1023 px i virkeligheden 1023.2 px bredt, og så ramte hverken
   T1 (max 1023) eller T2 (min 1024), og den gamle menu på en hel skærm kom
   tilbage. matchMedia i main.js bruger samme tal.
   Samme hul stod i bunden: målt 16/9 i en iframe på 720.5 px ramte hverken
   telefonens blokke (max 720) eller T1 (min 721), men 1180-blokken gjorde, og
   menuen fyldte igen hele skærmen (h1 på 1240 px). Derfor starter T1, T3 og T4
   på 720.02 px. Ved 1180/1181 er der intet hul af samme slags: 1180-blokken og
   T2 slutter begge på 1180 px, og målt i en iframe på 1180.5 px står desktoppens
   sidebar på 270 px med h1 på 104 px. */
@media (min-width: 720.02px) and (max-width: 1023.98px) {
  /* overflow-x: hidden gør body til en scroll-container, og så klæber intet
     sticky-element (målt 16/9: en sticky kolonne rullede 800 px med siden).
     clip klipper uden scroll-container. hidden står først, fordi Safari før
     version 16 (iPad Air 2 og iPad mini 4 kan ikke komme længere end iPadOS 15)
     ikke kender clip. Dér klæber tilbage-bjælken og T2's sidebar og topbar
     derfor ikke, men bundmenuen og skuffen er faste og virker. Det er valgt med
     vilje frem for at lade siden kunne rulle til siden, og det er ikke målt,
     for der findes ingen Safari 15 her. */
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .app-shell { display: block; }

  /* Skuffen. Højden kommer fra top og bottom, så persona-bjælkens top: 40px
     (body:has(.bf-persona-bar) .sidebar) ikke skubber bunden ud af skærmen.
     z-index over afspillerens footer (4000) og timeren (9000), under
     persona-bjælken (9600). visibility skjuler links for tabulatoren, når
     skuffen er lukket. */
  .app-shell .sidebar {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 9500;
    width: min(86vw, 340px);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 22px 0 44px rgba(0, 0, 0, 0.24);
    visibility: hidden;
    transform: translateX(-105%);
    transition: transform 200ms ease, visibility 0s linear 200ms;
  }
  .app-shell .sidebar.mobile-menu-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 200ms ease;
  }
  /* 820-blokken giver to kolonner, men skuffen er 340 px: én kolonne. */
  .app-shell .sidebar :is(.sidebar-nav, .sidebar-nav-secondary) { grid-template-columns: minmax(0, 1fr); }
  .app-shell .sidebar .sidebar-link { min-height: 44px; }
  /* Skuffe-gaten (min-width: 721px) skjuler dem, men topbaren er væk her. */
  .app-shell .sidebar :is(.sidebar-search, .sidebar-language, .sidebar-account) { display: block; }
  .app-shell .client-sidebar .client-help-card { display: none; }

  .app-shell .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9490;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.54);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .app-shell .mobile-menu-backdrop.visible { opacity: 1; pointer-events: auto; }

  /* Topbaren skjules som på telefonen: søgning, sprog og Log ud ligger i skuffen.
     !important fordi .bf-sand .bf-topbar (0,2,0) sætter display: flex. */
  .app-shell :is(.client-topbar, .coach-topbar) { display: none !important; }

  .app-shell .main-content { padding: 20px 24px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .app-shell:has(.bf-appbar) .main-content { padding-top: 0; }

  /* Bundmenuen: som telefonens, men fanerne holdes inden for 640 px på midten. */
  .bf-tabbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--bf-surface, #fff);
    border-top: 1px solid var(--bf-line, #E5DFD2);
    padding: 6px max(4px, calc((100% - 640px) / 2)) 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.72rem;
    font-weight: 800; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bf-tab svg { width: 24px; height: 24px; }
  .bf-tab.active { color: var(--bf-accent-text, var(--bf-accent, #C75D34)); }

  /* Timerpillen (fast, bottom 14 px, z-index 9000) lå oven på bundmenuens
     midterfaner, når et ur kørte (målt 820x1180: pillen på 1116 til 1166,
     bjælken på 1115 til 1180). Den løftes over bjælken med bjælkens målte højde.
     Kun fra 721 px: under 701 px er pillen dokket i toppen, og top og bottom
     sammen strækker den over hele skærmen. Afspilleren har sin egen regel. */
  body:has(.bf-tabbar):not(:has(.workout-player)) #bf-workout-timer { bottom: calc(var(--bf-bottom-nav-h, 65px) + 10px); }
  /* Den løftede pille slutter 60 px over bjælken, men indholdet havde kun 96 px
     bundluft, så den sidste række lå under pillen og kunne ikke rulles frem
     (målt 16/9 ved 820x1180 på /app/program: Se progress på 1030 til 1083 under
     pillen på 1055 til 1105). Mens et ur kører, får indholdet bjælken plus
     pillen plus 16 px, og aldrig mindre end de 96 px ovenfor. */
  body:has(#bf-workout-timer):has(.bf-tabbar):not(:has(.workout-player)) .app-shell .main-content {
    padding-bottom: max(calc(96px + env(safe-area-inset-bottom, 0px)), calc(var(--bf-bottom-nav-h, 65px) + 76px));
  }

  /* Tilbage-bjælken på drill-in-skærme (afspilleren): som telefonens. */
  .bf-appbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    margin: 0 0 6px;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 16px 6px;
    background: var(--bf-surface, #fff);
    color: var(--bf-ink, #1C1A17);
    border-bottom: 1px solid var(--bf-line, #E5DFD2);
  }
  body:has(.bf-persona-bar) .bf-appbar { top: 40px; }
  .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-text, 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-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;
  }

  /* Kost: telefonrammen (468 px, radius 28, skygge) fjernes. .app-shell.bf-sand
     (0,3,0) står efter og slår den mørke skygge i .app-shell.bf-dark .kost-app. */
  .app-shell.bf-sand .kost-app { max-width: none; border-radius: 0; box-shadow: none; }

  /* Vaner og Fremgang: 820-blokken stablede tre korte kort (769 x 130 hver). */
  .habit-score-grid,
  .progress-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================== T2: tablet liggende, 1024 til 1180 px =====================
   Målt 16/9: 1024x768 og 1180x820 viste menuen som én kolonne i fuld bredde med
   sin egen scroll (1597 px menu i en kasse på 768 px), og et swipe rullede
   menuen i stedet for siden. Her får tabletten en smal fast sidebar på 232 px
   ved siden af indholdet, samme mønster som desktop. */
@media (min-width: 1024px) and (max-width: 1180px) {
  /* Se T1: uden clip klæber sidebaren ikke mellem 1024 og 1100
     (@media (max-width: 1100px) { html, body { overflow-x: hidden; } }). */
  html,
  body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  .app-shell { grid-template-columns: 232px minmax(0, 1fr); }

  .app-shell .sidebar {
    position: sticky;
    top: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 16px 10px;
  }
  body:has(.bf-persona-bar) .app-shell .sidebar {
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
  }
  /* Gergø 23/9: husets rester (9). Afspillerens fod var fast i fuld bredde og
     lå over menuens bund: målt ved indlæsning dækkede den beastfactory.dk,
     Mørkt tema og Enkel visning ved 1024x768 og Mørkt tema, Enkel visning og
     BEAST MODE ved 1180x820. De kunne kun nås ved at rulle menuen, og intet
     viste, at den kunne rulles. Før gav reglen menuen 124 px luft i bunden
     (padding-bottom) i stedet. Nu står foden i indholdets kolonne, til højre
     for menuen (232 px, samme tal som kolonnen ovenfor), og menuen har sin
     almindelige luft. Enkels afspiller har ingen menu og beholder foden i fuld
     bredde (T4). */
  .workout-player:not(.is-senior) .player-footer { left: 232px; }
  /* Gergø 27/9: bugrunden (B3), se urets tabel. Uret stod midt på hele skærmen
     med bund 112 px og dækkede "Spring pausen over" (målt 1180x820: uret
     317..863 x 659..708 over knappen 623..789 x 641..685; 1024x768 kanten).
     Det står nu øverst i indholdets kolonne (midt i den), afspilleren giver
     plads til det (66 px), og pausen er lavere (skive, mellemrum og næste-kortets
     billede), så "Spring pausen over" står over foden. */
  body:has(.workout-player:not(.is-senior)) #bf-workout-timer { top: 78px; bottom: auto; left: calc(232px + (100% - 232px) / 2); }
  body:has(#bf-workout-timer:not(.tv-clock)) .workout-player:not(.is-senior) { padding-top: 66px; }
  /* Skeptikerne 28/9 (S4): løbet skjuler uret (body:has(.workout-player.is-run)),
     så det får ikke urets 66 px; samme vægt som linjen ovenfor, derfor bagefter. */
  body:has(#bf-workout-timer:not(.tv-clock)) .workout-player.is-run { padding-top: 0; }
  .workout-player:not(.is-senior) .player-rest-dial { width: min(240px, calc(100vh - 560px)); min-width: 120px; }
  .workout-player:not(.is-senior) .player-rest { gap: 8px; padding: 8px 12px 12px; }
  .workout-player:not(.is-senior) :is(.player-next-row img, .player-next-dot) { width: 48px; height: 48px; }
  /* Med persona-bjælken (Mig som klient, Vis som og Test som, 40 px) står
     topbjælken 40 px lavere, så uret gør det også, og skiven er 40 px mindre
     (målt 1180x820: uret lå over sproget, og "Spring pausen over" under foden). */
  body:has(.bf-persona-bar):has(.workout-player:not(.is-senior)) #bf-workout-timer { top: 118px; }
  body:has(.bf-persona-bar) .workout-player:not(.is-senior) .player-rest-dial { width: min(240px, calc(100vh - 600px)); }
  /* Logoet: mærke 42 px, afstand 9 px og wordmark 176 px var 243 px bredt i en
     sidebar med 201 px til indhold (målt 1024x768), så .DK blev klippet af.
     Mærket bliver 36 px, og wordmarket skrumper med den plads, der er. */
  .app-shell .sidebar .brand-lockup { max-width: 100%; gap: 8px; padding: 4px 6px; }
  .app-shell .sidebar .brand-lockup .brand-mark { flex: 0 0 36px; width: 36px; height: 36px; }
  .app-shell .sidebar .brand-lockup > span:last-child { flex: 1 1 auto; min-width: 0; }
  .app-shell .sidebar .bf-wm-haslogo { display: flex; width: 100%; }
  .app-shell .sidebar .bf-wm-img { width: 100%; max-width: 176px; height: auto; }
  .app-shell .sidebar .sidebar-link { min-height: 44px; padding: 10px 9px; }

  .app-shell .topbar {
    grid-column: 2;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 20px;
  }
  .app-shell .main-content { grid-column: 2; padding: 20px 24px 32px; }
  /* Mens et ur kører, står pillen fast i bunden (bottom 14 px, 50 px høj), og med
     32 px bundluft lå den sidste række under den (målt 16/9 ved 1180x820 på
     /app/program: Se progress på 734 til 787, pillen på 756 til 806). Som i T1
     får indholdet pillen plus 16 px. */
  body:has(#bf-workout-timer):not(:has(.workout-player)) .app-shell .main-content { padding-bottom: 80px; }

  /* Offline-linjen (.bf-offline-line.is-chrome) er et gitterelement uden
     placering. Den tog række 2, som sidebarens 100vh strakte ud, og indholdet
     røg ned i række 3 (målt 16/9 ved 1024x768 på /app/habits uden net: linjen på
     78 px, .main-content på 768 px, h1 på 788 px, første skærm tom). Når linjen
     vises, får den sin egen række på højde med indholdet, og sidebaren spænder
     over alle tre. Uden linjen ændres intet. */
  .app-shell:has(> .bf-offline-line.is-chrome) { grid-template-rows: auto auto minmax(0, 1fr); }
  .app-shell:has(> .bf-offline-line.is-chrome) > .sidebar { grid-row: 1 / span 3; }
  .app-shell > .bf-offline-line.is-chrome { grid-column: 2; }

  /* Klientens sider: to kolonner igen (1180-blokken lagde dem i én, og kortene
     blev 973 til 1129 px brede). Samme forhold som desktop, lidt lavere gulv. */
  .portal-two-column { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr); }
  /* Træningssiden er undtaget: ugeskemaet har syv dagkolonner, og i venstre
     kolonne på 414 px (målt 1024x768) blev dagene 35 px brede og hver pas-pille
     117 til 185 px høj. Den side beholder én kolonne på tabletten. */
  .portal-two-column:has(.program-week-day-items) { grid-template-columns: minmax(0, 1fr); }
  .portal-progress-grid { grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr); }
  .documents-layout,
  .settings-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr); }
  /* Indstillinger er med vilje stadig én kolonne mellem 1024 og 1100 px: dér gør
     1100-blokken layoutet til en flex-kolonne, og det er rigtigt, for i et
     gitter blev hovedkolonnen 435 px, mens profilformularen skal bruge 472 px
     (målt 16/9 ved 1024x768). Gitteret ovenfor gælder fra 1101 px. */
  .message-portal-grid { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr); }
  .message-portal-grid > :nth-child(n + 3) { grid-column: 1 / -1; }

  .kost-app .kost-meals { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}

/* ===================== T3: tablet, begge retninger, 721 til 1180 px =====================
   Starter på 720.02 px af samme grund som T1. */
@media (min-width: 720.02px) and (max-width: 1180px) {
  /* Kost: fanebjælken som strimmel øverst, som på telefonen. Sticky i bunden
     virker ikke inde i .kost-app (overflow: hidden), så den lå efter alt
     indholdet (målt 1180x820: under folden). */
  .app-shell .kost-app { display: flex; flex-direction: column; padding-bottom: 16px; }
  .app-shell .kost-app > .kost-head { order: -2; }
  .app-shell .kost-app > .kost-tabbar {
    order: -1;
    position: static;
    bottom: auto;
    z-index: 20;
    border-top: 0;
    border-bottom: 1px solid var(--kost-line, #E5DFD2);
    padding: 4px 2px 6px;
  }

  /* Coachens beskeder: liste og tråd side om side, Planlæg besked på egen række
     (1180-blokken stablede alle tre, docH 2749 ved 1024x768). */
  .coach-messenger-shell { grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.5fr); min-height: 0; }
  .coach-messenger-shell > .coach-schedule-panel { grid-column: 1 / -1; }
  .coach-chat-list { max-height: min(620px, calc(100vh - 240px)); }
  .coach-thread-messages { min-height: 320px; max-height: min(560px, calc(100vh - 300px)); }

  /* Klientkortets faner: Indstillinger blev klippet ved 768 (scrollWidth 746
     mod 702) og der stod en tyk scrollbar under fanerne. */
  .bf-sand .bf-cd-tabs { gap: 2px; scrollbar-width: none; }
  .bf-sand .bf-cd-tabs::-webkit-scrollbar { display: none; }
  .bf-sand .bf-cd-tabs a { min-height: 44px; padding: 13px 11px; }

  /* Træningsfanens rækker: knapperne på egen linje, så titlen får bredden
     (målt 820: kolonnerne 110/156/80/305, titlen på tre linjer i 156 px). */
  .program-schedule-row { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .program-schedule-actions { grid-column: 1 / -1; justify-content: flex-end; margin-left: 0; }

  /* Hjem: med to spor (E2) er måltidskortene 343 til 369 px, og titlerne blev
     klippet med ellipse (målt 16/9 ved 768x1024: Skyr med havre, æble og mandler
     264 px i 228 px). Titlen må bryde som på telefonen (max-width: 700px). */
  .phone-meal-row-info strong { white-space: normal; line-height: 1.25; }

  /* Trykflader til en finger. */
  .player-head .icon-button[data-action="player-close"] { min-width: 44px; min-height: 44px; }
  .program-schedule-action-toggle,
  .program-schedule-action-remove { width: 40px; height: 40px; }
  .program-schedule-action-move { min-width: 40px; min-height: 40px; }
  .bf-sand .mp-portion button { width: 36px; height: 36px; }
  .bf-sand .mp-mini { min-height: 40px; padding: 8px 14px; }
  .habit-check,
  .habit-check-undo { width: 40px; height: 40px; }
  .progress-range-tabs button { min-height: 40px; }
  .bf-sand .bf-row-peek { width: 40px; height: 40px; }
  .bf-sand .bf-hold-count { display: inline-flex; align-items: center; min-height: 40px; }
  .bf-coach-simple .senior-pill { min-height: 44px; }
  /* Coachens Enkel-kalender på højkant: dagene var 93 px ved 768 (gitteret har
     18 px indvendig luft i hver side). 12 px giver dagene knap 2 px mere hver. */
  .bf-coach-simple.wrap .cal-grid { padding-left: 12px; padding-right: 12px; }
  .program-week-pill { min-height: 36px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  /* Fundet med DOM-målingen 16/9 ved 820x1180, alle under 40 px. De tre første
     er telefonens egne gulve (max-width: 720px, v505) kopieret hertil. */
  .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; }
  /* Startkortets og Nyt i appen-kortets ✕ var 28x28. */
  .bf-runner-x { width: 44px; height: 44px; }
  /* Opskrift 70x26 og Log 44x26 i måltidsrækkerne på Hjem og i madplanen. */
  .phone-meal-row-actions .meal-action-btn,
  .today-meal-plan-row-actions .meal-action-btn { min-height: 40px; }
  /* I dag 66x32 og Uge 60x32 i madplanen, Log 53x37 på Kost. */
  .kost-view-toggle button,
  .kost-meal-log { min-height: 40px; }
  /* Tilføj vand: glassene på Hjem var 20x28. */
  .phone-water-glasses button { width: 36px; height: 44px; }
  /* Indstillingers faner og Klienters filterchips var 34 px høje. */
  .bf-sand .bf-settings-tabs button,
  .bf-sand .bf-pill-tabs button { min-height: 44px; }
  /* Beskeders send-knap var 31x32. */
  .portal-message-composer button { min-width: 44px; min-height: 44px; }
  /* Træningsfanens ▶ og ✎ var 30x30, naboerne i samme række får 40. */
  .program-schedule-action-open,
  .program-schedule-action-edit { min-width: 40px; min-height: 40px; }
  /* Kalenderens lag-chips (Aftaler, Træning, Vaner, Check-ins) var 28 px høje. */
  .cal-layer-chip { min-height: 40px; }

  /* Enkel visning: ingen topbar på tablet, som på telefonen (Log ud ligger i
     Enkels egen boks, se T4). */
  body:has(.bf-senior) .app-shell :is(.client-topbar, .coach-topbar),
  body:has(.workout-player.is-senior) .app-shell :is(.client-topbar, .coach-topbar) { display: none !important; }

  /* Timerpillen, formatvælgeren og installér-banneret over bundmenuen stod her
     til og med 1180 px. Skeptiker 21/9 (fund 2 og 3): desktop fra 1181 px havde
     de samme overlap i Enkel visning og i afspilleren (fandtes også på live
     v719), så reglerne står nu i T4 uden øvre grænse. */
}

/* ============== T4: Enkel visning og afspilleren på brede skærme, fra 721 px ==============
   Starter på 720.02 px af samme grund som T1. */
@media (min-width: 720.02px) {
  /* Sidebaren er skjult i Enkel, men skallen beholdt sin sidebar-kolonne: tom
     stribe og en skæv kolonne (målt 1280x800: skallen på 447 til 1087, midte 767
     mod 640). Gælder også tablet liggende, hvor kolonnen nu er 232 px. */
  body:has(.bf-senior) .app-shell,
  body:has(.workout-player.is-senior) .app-shell { grid-template-columns: minmax(0, 1fr); }
  body:has(.bf-senior) .app-shell :is(.topbar, .main-content),
  body:has(.workout-player.is-senior) .app-shell :is(.topbar, .main-content) { grid-column: 1 / -1; }

  /* Enkels afspiller er section.workout-player.is-senior uden .bf-senior, så den
     viste hele den avancerede menu ved alle bredder fra 721 px. Mere i
     tilbage-bjælken ville åbne den samme menu, Tilbage bliver stående. */
  body:has(.workout-player.is-senior) :is(.sidebar, .bf-tabbar, .bf-appbar-more) { display: none !important; }

  /* Log ud i Enkel: boksen bærer klassen .sidebar-account, som skuffe-gaten
     skjuler fra 721 px. Uden denne regel havde Enkel ingen Log ud på tablet og pc. */
  .bf-senior .senior-account { display: block; }

  /* Coachens Enkel-kalender: 640 px gav dage på 77 px og navne som Ger… */
  .bf-coach-simple.wrap:has(.cal-grid) { max-width: 1040px; }

  /* Enkels bundmenu og timerpillen: pillen lå midt oven på .senior-bar, når et
     ur kørte (målt 820x1180: pillen på 1116 til 1166, bjælken på 1096 til 1180).
     Samme løft som bundmenuen i T1, med .senior-bar's målte højde. Skeptiker
     21/9 (fund 2): også på desktop (målt 1440x900 Enkel: pillen på 837 til 886
     over bjælken på 816 til 900), derfor flyttet fra T3 hertil uden øvre grænse. */
  body:has(.senior-bar):not(:has(.workout-player)) #bf-workout-timer { bottom: calc(var(--bf-bottom-nav-h, 84px) + 10px); }

  /* Formatvælgeren og installér-banneret følger bundmenuen og pillen op. Begge
     regner med --bf-bottom-nav-h, som syncBottomNavHeight() sætter til højden
     af den synlige bundmenu: bf-tabbar i T1, .senior-bar i Enkel og 0 px, hvor
     der ingen er (T2 avanceret, desktop avanceret og afspilleren). Der giver
     reglerne de gamle tal. Formatvælgeren stod på bottom 72 px oven på den
     løftede pille (målt 16/9 ved 820x1180 på /app/program: panelet på 629 til
     1108, pillen på 1055 til 1105, og tallet, ⏲ og Stop var dækket). */
  body:not(:has(.workout-player)) #bf-timer-format { bottom: calc(var(--bf-bottom-nav-h, 0px) + 72px); }
  /* I afspilleren står pillen på 112 px (Enkel 126 px, se E1), og panelet på
     72 px dækkede den også dér. Panelet står 12 px over pillens top. Skeptiker
     21/9 (fund 3): også på desktop (målt 1440x900: panelet på 351 til 828 over
     pillen på 739 til 788), derfor flyttet fra T3 hertil uden øvre grænse. */
  body:has(.workout-player) #bf-timer-format { bottom: 174px; }
  body:has(.workout-player.is-senior) #bf-timer-format { bottom: 188px; }
  /* Installér-banneret (z-index 9998) står fra 721 px på bottom 20 px og dækkede
     Fremgang og Mere (målt 16/9 ved 820x1180: banneret på 1079 til 1160, bjælken
     på 1115 til 1180). Telefonen løfter det over bjælken, og mens et ur kører,
     løftes det også over pillen, som ellers fik Stop dækket. På desktop uden
     bundmenu er det stadig 20 px; i Enkel løftes det over .senior-bar (fund 2). */
  #bf-install-banner { bottom: calc(var(--bf-bottom-nav-h, 0px) + 20px); }
  body:has(#bf-workout-timer):not(:has(.workout-player)) #bf-install-banner { bottom: calc(var(--bf-bottom-nav-h, 0px) + 72px); }
}

/* ============== T5: offline-linjen på desktop, fra 1181 px ==============
   Samme fejl og samme rettelse som i T2 (målt 16/9 ved 1440x900 på /app/habits
   uden net: .main-content på 900 px og h1 på 934 px). Fejlen fandtes før
   tabletrunden. Reglerne gælder kun, mens offline-linjen vises, så desktop uden
   linjen flytter ikke en pixel. De står for sig selv, så de kan fjernes uden at
   røre T2. */
@media (min-width: 1181px) {
  .app-shell:has(> .bf-offline-line.is-chrome) { grid-template-rows: auto auto minmax(0, 1fr); }
  .app-shell:has(> .bf-offline-line.is-chrome) > .sidebar { grid-row: 1 / span 3; }
  .app-shell > .bf-offline-line.is-chrome { grid-column: 2; }
}

/* ============== T6: afspilleren på desktop, fra 1181 px ==============
   Gergø 27/9: bugrunden (B3), se urets tabel ved #bf-workout-timer. Samme
   rettelse som i T2 med desktoppens sidebar på 270 px (.app-shell). Foden stod
   i fuld bredde over sidebarens bund (målt 1181x820 og 1280x820: beastfactory.dk
   og Mørkt tema dækket, 1440x900 også Enkel visning), og uret midt på skærmen
   dækkede "Spring pausen over" (1280x820). Enkels afspiller har ingen sidebar
   og er undtaget, som i T2. */
@media (min-width: 1181px) {
  .workout-player:not(.is-senior) .player-footer { left: 270px; }
  body:has(.workout-player:not(.is-senior)) #bf-workout-timer { top: 78px; bottom: auto; left: calc(270px + (100% - 270px) / 2); }
  body:has(#bf-workout-timer:not(.tv-clock)) .workout-player:not(.is-senior) { padding-top: 66px; }
  /* Skeptikerne 28/9 (S4): løbet skjuler uret (body:has(.workout-player.is-run)),
     så det får ikke urets 66 px; samme vægt som linjen ovenfor, derfor bagefter. */
  body:has(#bf-workout-timer:not(.tv-clock)) .workout-player.is-run { padding-top: 0; }
  .workout-player:not(.is-senior) .player-rest-dial { width: min(240px, calc(100vh - 560px)); min-width: 120px; }
  .workout-player:not(.is-senior) .player-rest { gap: 8px; padding: 8px 12px 12px; }
  .workout-player:not(.is-senior) :is(.player-next-row img, .player-next-dot) { width: 48px; height: 48px; }
  body:has(.bf-persona-bar):has(.workout-player:not(.is-senior)) #bf-workout-timer { top: 118px; }
  body:has(.bf-persona-bar) .workout-player:not(.is-senior) .player-rest-dial { width: min(240px, calc(100vh - 600px)); }
}

/* LABRADOR-TEMA START
   Gergøs Labrador-koncept (16/9-2026), kun for klienten med clientTheme
   "labrador". Klassen bf-tema-labrador sidder på .app-shell og sættes kun i
   renderApp. Hver selektor herinde begynder med .app-shell.bf-tema-labrador
   eller body:has(.app-shell.bf-tema-labrador), så ingen andre kan ramme den.
   Farverne er målt i designbillederne. Den orange fra mockuppen (#E8570D)
   klarer ikke AA som fyld bag hvid tekst (3,62) og heller ikke som tekst på
   baggrunden (3,11), så den bruges kun til grafik og stor tekst; knapfyld og
   orange tekst har egne tokens, som huset allerede gør. */

/* Tokens. 0,3,0 og 0,4,0 vinder over brandstilen (:root, .bf-sand), de
   sandfarvede tokens på .bf-sand og de mørke på .bf-sand.bf-dark. */
.app-shell.bf-sand.bf-tema-labrador {
  --bf-sand: #F2EDE5; --bg: #F2EDE5;
  --bf-surface: #FFFFFF; --surface: #FFFFFF; --surface-strong: #FFFFFF;
  --bf-surface2: #FBF9F5; --surface2: #FBF9F5;
  --bf-ink: #1C1A17; --ink: #1C1A17;
  --bf-muted: #6B6453; --muted: #6B6453;
  --bf-line: #E6E3DD; --line: #E6E3DD;
  --bf-accent: #E8570D; --accent: #E8570D;
  --bf-accent-btn: #C2410C; --bf-accent-btn-h: #9A3412;
  --bf-accent-text: #B03D0B;
  --lab-bubble-mine: #FFE4D2;
  --lab-ok: #0E8846;
  --lab-dot-muted: #C9C2B6;
  --lab-shadow: 0 8px 24px rgba(40, 28, 16, 0.07);
  --kost-sand: #F2EDE5; --kost-card: #FFFFFF; --kost-ink: #1C1A17; --kost-muted: #6B6453; --kost-line: #E6E3DD;
}
.app-shell.bf-sand.bf-dark.bf-tema-labrador {
  --bf-sand: #141210; --bg: #141210;
  --bf-surface: #1E1B18; --surface: #1E1B18; --surface-strong: #1E1B18;
  --bf-surface2: #26221D; --surface2: #26221D;
  --bf-ink: #F2EDE4; --ink: #F2EDE4;
  --bf-muted: #A79D8F; --muted: #A79D8F;
  --bf-line: #37312A; --line: #37312A;
  --bf-accent: #E8570D; --accent: #E8570D;
  --bf-accent-btn: #C2410C; --bf-accent-btn-h: #9A3412;
  --bf-accent-text: #F07A3C;
  --lab-bubble-mine: #4A2B1A;
  --lab-ok: #0E8846;
  --lab-dot-muted: #5A5249;
  --lab-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --kost-sand: #141210; --kost-card: #1E1B18; --kost-ink: #F2EDE4; --kost-muted: #A79D8F; --kost-line: #37312A;
}
/* Kost-appen skriver sine egne variabler direkte på .kost-app i mørkt tema
   (styles.css, "Dark theme: content follows the shell"), så de skrives også her. */
.app-shell.bf-tema-labrador .kost-app {
  --kost-sand: #F2EDE5; --kost-card: #FFFFFF; --kost-ink: #1C1A17; --kost-muted: #6B6453; --kost-line: #E6E3DD;
}
.app-shell.bf-dark.bf-tema-labrador .kost-app {
  --kost-sand: #141210; --kost-card: #1E1B18; --kost-ink: #F2EDE4; --kost-muted: #A79D8F; --kost-line: #37312A;
}

/* Siden bag skallen. */
body:has(.app-shell.bf-tema-labrador) { background: #F2EDE5; }
body:has(.app-shell.bf-tema-labrador.bf-dark) { background: #141210; }

/* Sidetitler: større end husets loft (.bf-sand .main-content h1). */
.app-shell.bf-tema-labrador .main-content h1 {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--bf-ink);
}

/* ---------- Genbrugelige dele ---------- */
.app-shell.bf-tema-labrador .main-content .lab-card {
  position: relative; overflow: hidden; display: block;
  background: var(--bf-surface); color: var(--bf-ink);
  border: 0; border-radius: 20px; box-shadow: var(--lab-shadow);
  padding: 18px;
}
.app-shell.bf-dark.bf-tema-labrador .main-content .lab-card { border: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-card :is(h2, h3).lab-card-title {
  margin: 0; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--bf-ink);
}
.app-shell.bf-tema-labrador .main-content .lab-card :is(p, span, li, strong) { color: var(--bf-ink); }
.app-shell.bf-tema-labrador .main-content .lab-card :is(small, .lab-meta, .lab-more) { color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content :is(.lab-lead, .lab-meta, .lab-more) { color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-lead { margin: 6px 0 0; font-size: 1rem; line-height: 1.45; }
.app-shell.bf-tema-labrador .main-content .lab-meta { margin: 2px 0 0; font-size: 0.95rem; }
.app-shell.bf-tema-labrador .main-content .lab-with-icon { display: flex; align-items: center; gap: 10px; }
.app-shell.bf-tema-labrador .main-content .lab-icon { flex: 0 0 auto; color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-chevron { flex: 0 0 auto; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .lab-speed { color: var(--bf-accent); }
.app-shell.bf-tema-labrador .lab-speed-left { transform: scaleX(-1); }
.app-shell.bf-tema-labrador .lab-heart { color: var(--bf-accent); vertical-align: -2px; }
.app-shell.bf-tema-labrador .lab-dog { display: block; height: auto; object-fit: contain; }
.app-shell.bf-dark.bf-tema-labrador .lab-dog { filter: drop-shadow(0 0 18px rgba(242, 237, 228, 0.18)); }

/* Primærknap. color med !important: knapreglen .bf-sand .main-content
   button:not(...) (styles.css, "non-primary buttons ... ink text") giver ellers
   blæk på orange. Samme undtagelse som sand-dark-pill. */
.app-shell.bf-tema-labrador .main-content .lab-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 52px; margin-top: 14px; padding: 0 18px;
  border: 0; border-radius: 14px;
  background: var(--bf-accent-btn); color: #fff !important;
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-size: 1.05rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.app-shell.bf-tema-labrador .main-content .lab-btn:hover { background: var(--bf-accent-btn-h); }
.app-shell.bf-tema-labrador .main-content .lab-btn :is(span, .lab-chevron) { color: #fff !important; }
.app-shell.bf-tema-labrador .main-content .lab-btn:focus-visible,
.app-shell.bf-tema-labrador .main-content .lab-btn-ghost:focus-visible,
.app-shell.bf-tema-labrador .lab-topbar-menu:focus-visible { outline: 3px solid var(--bf-accent-text); outline-offset: 2px; }

/* Sekundærknap med orange kant. Specificiteten 0,8,0 slår knapreglen 0,7,1
   uden !important. */
.app-shell.bf-tema-labrador.bf-sand.client-sand .main-content .lab-rest .player-rest-skip.lab-btn-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 420px; min-height: 52px; padding: 0 18px;
  border: 2px solid var(--bf-accent); border-radius: 14px;
  background: var(--bf-surface); color: var(--bf-accent-text);
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-size: 1.05rem; font-weight: 700;
  text-decoration: none;
}

/* ---------- Skallen ---------- */
.app-shell.bf-tema-labrador .lab-topbar { display: none; }
/* Telefonen OG tabletten på højkant (til og med 1023.98 px, samme grænse som T1
   og matchMedia i main.js). Skeptiker 21/9 (fund 1, høj): temaets blok gjaldt
   kun til 720 px, men T1 skjuler .client-topbar fra 720.02 px, og temaet tegner
   ingen Mere-fane, så mellem 720.02 og 1023.98 px (målt 768x1024 og 820x1180)
   havde en klient hverken ☰ eller Mere: Beskeder, Indstillinger, Dokumenter, Nyt i
   appen, Lys/Mørk, Enkel visning og Log ud kunne ikke nås. Nu står topbjælken
   med ☰ også på tabletten på højkant. Gergø 23/9: bundbjælken har igen sin egen
   Mere-fane, så de fem faner står i fem kolonner som hos alle andre klienter,
   og ☰ er den samme dør et trin højere oppe. Fra 1024 px er sidebaren
   navigationen som før. */
@media (max-width: 1023.98px) {
  .app-shell.bf-tema-labrador .lab-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 12px 8px 16px;
    background: var(--bf-sand); color: var(--bf-ink);
  }
  /* Under Vis som står ejerens faste bjælke øverst. Den er mindst 44 px på
     telefonen og højere, når teksten ombrydes, så labSyncOwnerBarOffset i
     main.js sætter den målte højde. 44 px plus safe area er husets eget tal,
     indtil målingen er sket. */
  .app-shell.bf-tema-labrador .lab-topbar.is-under-owner-bar { top: var(--lab-owner-bar-h, calc(44px + env(safe-area-inset-top, 0px))); }
  .app-shell.bf-tema-labrador .lab-topbar-brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .app-shell.bf-tema-labrador .lab-topbar-logo { width: 36px; height: 36px; object-fit: contain; }
  .app-shell.bf-tema-labrador .lab-topbar .bf-wm-img { height: 17px; }
  .app-shell.bf-tema-labrador .lab-topbar-menu {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0; margin: 0;
    border: 0; border-radius: 12px; background: none; color: var(--bf-ink); cursor: pointer;
  }

  /* Gergø 23/9: v730. Én dør til skuffen. Husets egen regel
     (.app-shell:has(.bf-tabbar) .mobile-menu-button) gælder nu også temaets ☰:
     står bundbjælken med Mere, skjules ☰, og topbjælken er logo og navnetræk.
     Kvitteringen efter Færdig skjuler bundbjælken (03 Færdig nedenfor), så dér
     bliver ☰ stående som vejen. På drill in (passet, afspilleren) tegnes
     hverken topbjælken eller bundbjælken; dér er tilbage-bjælkens ⋯ vejen. */
  .app-shell.bf-tema-labrador:has(.bf-tabbar):not(:has(.lab-high-five)) .lab-topbar-menu { display: none; }

  /* Gergø 23/9: fem bundfaner som alle andre klienter, så Mere står i bjælken.
     Kolonnetallet er husets eget (repeat(5, 1fr) både under 720 px og i T1) og
     står her, så temaet ikke længere har en anden mening om det. Farver og kant
     er temaets og røres ikke. */
  .app-shell.bf-tema-labrador .bf-tabbar { grid-template-columns: repeat(5, 1fr); background: var(--bf-surface2); border-top-color: var(--bf-line); }
  .app-shell.bf-tema-labrador .bf-tab { color: var(--bf-muted); }
  .app-shell.bf-tema-labrador .bf-tab.active { color: var(--bf-accent-text); }
  .app-shell.bf-tema-labrador .bf-tab.active svg { color: var(--bf-accent); }
}
/* Skuffens tegn-ikoner (⌂, ▤) er tekst i var(--accent): 3,11 på temaets
   baggrund. Orange TEKST har sit eget token. */
.app-shell.bf-tema-labrador .sidebar-icon { color: var(--bf-accent-text); }
/* Den grønne kvittering (.flash bruger --success) målte 2,73 i mørkt tema:
   hvid på #7FA579. Det gælder alle i mørkt tema og er meldt som fund; her
   rettes det kun for temaet, fordi kvitteringen står oven på High five. */
.app-shell.bf-dark.bf-tema-labrador .flash-success { background: #0B7A3E; }
/* Mørk bundbjælke (overskriver .bf-sand.bf-dark .bf-tabbar). */
.app-shell.bf-sand.bf-dark.bf-tema-labrador .bf-tabbar { background: var(--bf-surface2); border-top-color: var(--bf-line); }
.app-shell.bf-sand.bf-dark.bf-tema-labrador .bf-tab.active { color: var(--bf-accent-text); }
/* Undersidefaner: den aktive har !important i huset (styles.css:18720,
   "Client Progress subtabs"), så farven skal også have det her. */
.app-shell.bf-tema-labrador.bf-sand .main-content .client-subtabs :is(a, button).active { color: var(--bf-accent-text) !important; border-bottom-color: var(--bf-accent); }

/* ---------- 01 I dag ---------- */
.app-shell.bf-tema-labrador .main-content .lab-hello { padding: 4px 2px 0; }
.app-shell.bf-tema-labrador .main-content .lab-hello h1 { margin: 0; }
.app-shell.bf-tema-labrador .main-content .lab-buddy-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px;
  min-height: 200px; padding: 0 0 0 18px;
}
.app-shell.bf-tema-labrador .main-content .lab-buddy-text { align-self: center; padding: 20px 0; }
.app-shell.bf-tema-labrador .main-content .lab-buddy-text p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-rule { display: block; width: 32px; height: 4px; margin: 12px 0; border-radius: 2px; background: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-buddy-dog { align-self: end; width: auto; height: 190px; max-width: 40vw; object-position: bottom; }

.app-shell.bf-tema-labrador .main-content .lab-row-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--bf-line); border-radius: 12px; background: var(--bf-surface);
  color: var(--bf-ink); text-decoration: none;
}
.app-shell.bf-tema-labrador .main-content .lab-row-text { display: grid; gap: 2px; min-width: 0; }
.app-shell.bf-tema-labrador .main-content .lab-row-text strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.app-shell.bf-tema-labrador .main-content .lab-row-text small { font-size: 0.9rem; }

.app-shell.bf-tema-labrador .main-content .lab-week-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
/* I dag på PC (Gergø 28/9: v738, billede 29.png). Hilsnen og Ugens træning har
   hele rækken som husets overskrift og uge (I DAG PAA PC efter REAKTIONER ARK).
   På telefonen er I dag et gitter, og flex-basis gør intet dér. */
.app-shell.bf-tema-labrador .main-content .phone-dashboard.phone-today > :is(.lab-hello, .lab-week-card) { flex-basis: 100%; }
.app-shell.bf-tema-labrador .main-content .lab-week-icon { display: inline-flex; padding-top: 2px; color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-week-body p { margin: 2px 0 10px; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-bar { display: block; height: 8px; border-radius: 999px; background: var(--bf-line); overflow: hidden; }
.app-shell.bf-tema-labrador .main-content .lab-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--bf-accent); }

/* ---------- 03 Færdig ---------- */
.app-shell.bf-tema-labrador:has(.lab-high-five) .bf-tabbar { display: none; }
/* Den grønne kvittering står fast på top 82 px og lå oven på Stærkt gået! i
   2,5 sekunder. Bundfanerne er skjult her, så den står nederst og bredere, og
   tryk går igennem til knappen under den. */
.app-shell.bf-tema-labrador:has(.lab-high-five) .flash { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.app-shell.bf-tema-labrador .main-content .lab-high-five { gap: 14px; padding-top: 8px; text-align: center; }
.app-shell.bf-tema-labrador .main-content .lab-high-five-head h1 { margin: 0; }
.app-shell.bf-tema-labrador .main-content .lab-high-five-art { position: relative; justify-self: center; width: fit-content; }
.app-shell.bf-tema-labrador .main-content .lab-high-five-dog { width: auto; height: min(300px, 36vh); }
.app-shell.bf-tema-labrador .main-content .lab-high-five-art .lab-speed { position: absolute; top: 4%; right: -30px; width: 44px; height: 44px; }
.app-shell.bf-tema-labrador .main-content .lab-high-five-note {
  position: absolute; right: -62px; top: 60%; transform: rotate(-12deg);
  font-family: "Archivo", sans-serif; font-style: italic; font-weight: 800; font-size: 1.05rem;
  color: var(--bf-accent-text); white-space: nowrap;
}
.app-shell.bf-tema-labrador .main-content .lab-stat-card { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 8px; text-align: left; }
.app-shell.bf-tema-labrador .main-content .lab-stat-card.is-single { grid-template-columns: 1fr; }
.app-shell.bf-tema-labrador .main-content .lab-stat { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; }
.app-shell.bf-tema-labrador .main-content .lab-stat + .lab-stat { border-left: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-stat .lab-icon { width: 28px; height: 28px; color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-stat > span { display: grid; gap: 2px; }
.app-shell.bf-tema-labrador .main-content .lab-stat strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.2rem; }
.app-shell.bf-tema-labrador .main-content .lab-stat small { font-size: 0.85rem; }
.app-shell.bf-tema-labrador .main-content .lab-offline-note { text-align: left; }
.app-shell.bf-tema-labrador .main-content .lab-offline-note p { margin: 6px 0 0; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-high-five > .lab-btn { margin-top: 2px; }

/* ---------- 09 Træning ---------- */
.app-shell.bf-tema-labrador .main-content .lab-training-page .client-page-header > div > p { display: block; margin: 4px 0 0; color: var(--bf-muted); font-size: 1rem; }
.app-shell.bf-tema-labrador .main-content .lab-ready-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px;
  min-height: 116px; padding: 0 0 0 18px;
}
.app-shell.bf-tema-labrador .main-content .lab-ready-text { align-self: center; padding: 18px 0; }
.app-shell.bf-tema-labrador .main-content .lab-ready-text p { margin: 4px 0 0; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-ready-art { position: relative; align-self: end; padding-right: 22px; }
.app-shell.bf-tema-labrador .main-content .lab-ready-dog { width: auto; height: 108px; object-position: bottom; }
.app-shell.bf-tema-labrador .main-content .lab-ready-art .lab-speed { position: absolute; top: 4px; right: 0; width: 30px; height: 30px; }

.app-shell.bf-tema-labrador .main-content .lab-program-name { margin: 8px 0 0; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.15; overflow-wrap: anywhere; }
.app-shell.bf-tema-labrador .main-content .lab-program-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.app-shell.bf-tema-labrador .main-content .lab-program-list li { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.app-shell.bf-tema-labrador .main-content .lab-num {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--lab-bubble-mine); color: var(--bf-accent-text); font-weight: 800; font-size: 0.9rem;
}
.app-shell.bf-tema-labrador .main-content .lab-program-exercise { font-size: 1rem; overflow-wrap: anywhere; }
.app-shell.bf-tema-labrador .main-content .lab-more { margin: 4px 0 0 38px; font-size: 0.9rem; }

.app-shell.bf-tema-labrador .main-content .lab-plan-list { list-style: none; margin: 10px 0 0; padding: 0; }
.app-shell.bf-tema-labrador .main-content .lab-plan-list li + li { border-top: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 0; color: var(--bf-ink); text-decoration: none;
}
.app-shell.bf-tema-labrador .main-content .lab-plan-day { display: grid; min-width: 0; }
.app-shell.bf-tema-labrador .main-content .lab-plan-day strong { font-weight: 700; font-size: 1rem; }
.app-shell.bf-tema-labrador .main-content .lab-plan-day small { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell.bf-tema-labrador .main-content .lab-plan-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.app-shell.bf-tema-labrador .main-content .lab-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--lab-dot-muted); }
.app-shell.bf-tema-labrador .main-content .lab-dot.is-ok { background: var(--lab-ok); }
.app-shell.bf-tema-labrador .main-content .lab-dot.is-accent { background: var(--bf-accent); }

/* ---------- 02 Pausen ---------- */
.app-shell.bf-tema-labrador .main-content .lab-rest { gap: 8px; padding: 2px 4px 16px; }
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-title { margin: 0; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1.1; color: var(--bf-ink); }
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-sub { margin: -2px 0 0; font-size: 1rem; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-rest .player-rest-dial.lab-rest-clock-card {
  width: 100%; max-width: 420px; aspect-ratio: auto; padding: 4px 16px;
  border-radius: 20px; background: var(--bf-surface); box-shadow: var(--lab-shadow);
}
.app-shell.bf-dark.bf-tema-labrador .main-content .lab-rest .player-rest-dial.lab-rest-clock-card { border: 1px solid var(--bf-line); }
/* Urskivens ring (.player-rest-dial::before) hører til standardpanelet. */
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-clock-card::before { display: none; }
.app-shell.bf-tema-labrador .main-content .lab-rest .player-rest-clock { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 4.5rem; line-height: 1; color: var(--bf-accent); }
/* "Spring pause over" skal kunne ses uden at rulle over den faste fod i
   afspilleren, også ved 390x844 med næste-kortet. Resten af panelet fylder
   målt ca. 750 px fra skærmens top mellem to sæt, så hunden får det der er
   tilbage, højst 170 px. Med Fortryd er der en knap mere, og uden næste-kortet
   er der mere plads. Overleveringen i Avanceret har sine egne regler herunder. */
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-dog { width: auto; max-width: 100%; height: clamp(56px, calc(100dvh - 750px), 170px); }
.app-shell.bf-tema-labrador .main-content .lab-rest:has(.player-rest-undo) .lab-rest-dog { height: clamp(40px, calc(100dvh - 802px), 170px); }
.app-shell.bf-tema-labrador .main-content .lab-rest:not(:has(.player-next-card)) .lab-rest-dog { height: clamp(90px, calc(100dvh - 650px), 170px); }
/* Overleveringen i Avanceret (fund O1, 17/9). Gergø sagde 17/9 ja til -30s og
   +30s ved overleveringen, så knaprækken står der nu også, og foden er 16 px
   højere ("Næste om" og "Bliv her"). Med 750 px stod "Spring pause over" ved
   390x844 19 px under foden, når næste øvelses navn fylder tre linjer. Med 780 px
   står knappen 51, 34 og 11 px over foden med et navn på én, to og tre linjer,
   målt 17/9 ved 390x844 og 430x932. Fortryd fylder 52 px mere. Er der ikke plads
   til en hund på 40 px, skjules den, som i Enkel: ved 360x740 står knappen så
   19 og 2 px over foden med én og to linjer (v718: 8 px over og 10 px under). */
.app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover) .lab-rest-dog { height: clamp(40px, calc(100dvh - 780px), 170px); }
.app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover):has(.player-rest-undo) .lab-rest-dog { height: clamp(40px, calc(100dvh - 832px), 170px); }
@media (max-height: 819px) {
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover) .lab-rest-dog { display: none; }
}
@media (max-height: 871px) {
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover):has(.player-rest-undo) .lab-rest-dog { display: none; }
}
/* Gergø 27/9: bugrunden (B3). Fra 1024 px giver afspilleren urets pille 66 px i
   toppen (urets tabel ved #bf-workout-timer), så hundens budgetter ovenfor er
   66 px større dér. Er der ikke plads til hunden, skjules den, som
   overleveringen allerede gør: under 856 px højde altid, og med Fortryd eller
   ved overleveringen under 938 px. Målt 1024x768 med hunden på 56 px: "Spring
   pause over" stod under foden. Skuffen, sidebaren og bundmenuen er urørte. */
@media (min-width: 1024px) {
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest .lab-rest-dog { height: clamp(40px, calc(100dvh - 816px), 170px); }
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.player-rest-undo) .lab-rest-dog { height: clamp(40px, calc(100dvh - 868px), 170px); }
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:not(:has(.player-next-card)) .lab-rest-dog { height: clamp(90px, calc(100dvh - 716px), 170px); }
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover) .lab-rest-dog { height: clamp(40px, calc(100dvh - 846px), 170px); }
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover):has(.player-rest-undo) .lab-rest-dog { height: clamp(40px, calc(100dvh - 898px), 170px); }
}
@media (min-width: 1024px) and (max-height: 855.98px) {
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest .lab-rest-dog { display: none; }
}
@media (min-width: 1024px) and (max-height: 937.98px) {
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.player-rest-undo) .lab-rest-dog { display: none; }
  .app-shell.bf-tema-labrador .main-content .workout-player:not(.is-senior) .lab-rest:has(.lab-rest-nudge-handover) .lab-rest-dog { display: none; }
}
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-breath { display: grid; gap: 0; margin: 0; line-height: 1.3; }
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-breath strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--bf-ink); }
.app-shell.bf-tema-labrador .main-content .lab-rest .lab-rest-breath span { font-size: 0.92rem; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-rest .player-next-card { padding: 10px 14px; background: var(--bf-surface); border: 0; border-radius: 20px; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador .main-content .lab-rest .player-next-label { margin-bottom: 6px; }
.app-shell.bf-tema-labrador .main-content .lab-rest .player-next-row :is(img, .player-next-dot) { width: 52px; height: 52px; }
.app-shell.bf-dark.bf-tema-labrador .main-content .lab-rest .player-next-card { border: 1px solid var(--bf-line); }
/* ========== Etape L2: 04 Kost, 05 Vaner, 06 Fremgang, 07 Kalender, 08 Beskeder ========== */

/* Fælles for L2-siderne. Undertitlen under sidetitlen skjules for alle på
   telefonen (.client-sand .client-page-header > div > p); temaets sider viser
   den, men aldrig en tom. */
.app-shell.bf-tema-labrador .main-content .lab-page .client-page-header > div > p:not(:empty) { display: block; margin: 4px 0 0; color: var(--bf-muted); font-size: 1rem; }
.app-shell.bf-tema-labrador .main-content .lab-page .client-page-header > div > p:empty { display: none; }
/* Sekundærknap som link (Se madplan). Knappen i pausen har sin egen regel. */
.app-shell.bf-tema-labrador .main-content a.lab-btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 52px; padding: 0 18px;
  border: 2px solid var(--bf-accent); border-radius: 14px;
  background: var(--bf-surface); color: var(--bf-accent-text);
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-size: 1.05rem; font-weight: 700;
  text-decoration: none;
}
.app-shell.bf-tema-labrador .main-content a.lab-btn-ghost :is(span, .lab-chevron) { color: var(--bf-accent-text); }
.app-shell.bf-tema-labrador .main-content .lab-btn .lab-chevron { margin-left: 2px; }
/* Hunde i kort: højre side med bunden mod kortets underkant. */
.app-shell.bf-tema-labrador .main-content :is(.lab-menu-card, .lab-habits-dog-card, .lab-streak-card) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px;
  padding: 0 0 0 18px;
}

/* ---------- 04 Kost ---------- */
/* Orange fyld bag hvid tekst (Log, coachens bogstav, knapper) bruger knap-tokenet:
   mockuppens orange giver kun 3,62 med hvid. */
.app-shell.bf-tema-labrador .kost-app { --kost-orange: var(--bf-accent-btn); }
.app-shell.bf-tema-labrador .main-content .kost-app .lab-kost-head { display: block; padding: 14px 18px 6px; }
.app-shell.bf-tema-labrador .main-content .kost-app .lab-kost-head h1 { margin: 0; }
.app-shell.bf-tema-labrador .main-content .lab-kost { gap: 16px; }
.app-shell.bf-tema-labrador .main-content .lab-menu-card { min-height: 150px; }
.app-shell.bf-tema-labrador .main-content .lab-menu-text { align-self: center; padding: 18px 0; }
.app-shell.bf-tema-labrador .main-content .lab-menu-text p { margin: 6px 0 0; color: var(--bf-muted); font-size: 0.95rem; line-height: 1.4; }
.app-shell.bf-tema-labrador .main-content .lab-menu-dog { width: auto; height: 138px; max-width: 42vw; object-position: bottom; }
.app-shell.bf-tema-labrador .main-content .lab-meals-card .kost-meals { margin-top: 12px; gap: 8px; }
.app-shell.bf-tema-labrador .main-content .lab-meals-card .kost-meal { padding: 10px 12px; border: 1px solid var(--bf-line); border-radius: 14px; box-shadow: none; background: var(--bf-surface); }
.app-shell.bf-tema-labrador .main-content .lab-meals-card .lab-meta { margin: 0; }
.app-shell.bf-tema-labrador .main-content .lab-water-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.app-shell.bf-tema-labrador .main-content .lab-water-head > .lab-icon { color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-water-text { display: grid; gap: 2px; min-width: 0; }
.app-shell.bf-tema-labrador .main-content .lab-water-card .lab-water-value { color: var(--bf-muted); font-size: 0.95rem; }
.app-shell.bf-tema-labrador .main-content .lab-water-card .lab-bar { margin-top: 14px; }
/* Kalorieboksen står under vandet, lys og uden den mørke flade. Boksen sætter
   selv --bf-accent-text til den mørke flades værdi; inherit giver temaets
   værdi tilbage. Tallene har faste farver med !important i huset
   (styles.css, "The sand shell now wraps the Kost pages too"), skrevet til den
   mørke flade, så de lyse farver her skal også have !important. */
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero {
  --bf-accent-text: inherit;
  background: var(--bf-surface); color: var(--bf-ink);
  border-radius: 20px; box-shadow: var(--lab-shadow);
}
.app-shell.bf-dark.bf-tema-labrador .main-content .lab-kost .kost-hero { border: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero .kost-ring-track { stroke: var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero .kost-ring-arc { stroke: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero .kost-ring-dot { fill: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero :is(.kost-ring-center strong, .kost-hero-rem, .kost-macro-k strong, .kost-macro-f strong) { color: var(--bf-ink) !important; }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero .kost-macro-p strong { color: var(--bf-accent-text) !important; }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero :is(.kost-ring-center small, .kost-macro small) { color: var(--bf-muted) !important; }
.app-shell.bf-tema-labrador .main-content .lab-kost .kost-hero .kost-macro { background: var(--bf-surface2); }
/* Kost-fanerne under temaet. To knapper havde for lav kontrast allerede før
   temaet (målt 16/9, gælder alle og er meldt som fund): Log under Madplan er
   hvid på #FF5A12 (3,12), og Byg fra meal plan under Indkøb har en grå
   knapflade bag blæk (3,26). Her rettes de kun for temaet. */
.app-shell.bf-tema-labrador .main-content .kost-app .meal-action-btn.meal-action-log { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); }
.app-shell.bf-tema-labrador .main-content .kost-app .text-link { background: transparent; }

/* ---------- 05 Vaner ---------- */
.app-shell.bf-tema-labrador .main-content .lab-habits-ring { display: flex; align-items: center; gap: 16px; }
.app-shell.bf-tema-labrador .main-content .lab-ring { flex: 0 0 auto; width: 64px; height: 64px; }
.app-shell.bf-tema-labrador .main-content .lab-ring-track { fill: none; stroke: var(--bf-line); stroke-width: 7; }
.app-shell.bf-tema-labrador .main-content .lab-ring-arc { fill: none; stroke: var(--bf-accent); stroke-width: 7; stroke-linecap: round; }
.app-shell.bf-tema-labrador .main-content .lab-habits-ring .lab-meta { margin: 4px 0 0; }
/* Dagslisten: den runde markering står til venstre, kun med order. Markup og
   tryk er de samme som for alle andre. */
.app-shell.bf-tema-labrador .main-content .habit-today-card .phone-habit-row { grid-template-columns: auto minmax(0, 1fr); }
.app-shell.bf-tema-labrador .main-content .habit-today-card .phone-habit-row > .phone-habit-tick { order: -1; }
.app-shell.bf-tema-labrador .main-content .lab-habits-dog-card { min-height: 170px; }
.app-shell.bf-tema-labrador .main-content .lab-habits-dog-text { align-self: center; display: grid; gap: 8px; justify-items: start; margin: 0; padding: 18px 0; }
.app-shell.bf-tema-labrador .main-content .lab-habits-dog-text strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.app-shell.bf-tema-labrador .main-content .lab-habits-dog-text .lab-heart { width: 22px; height: 22px; }
.app-shell.bf-tema-labrador .main-content :is(.lab-habits-dog-art, .lab-streak-art) { position: relative; align-self: end; padding-right: 26px; }
.app-shell.bf-tema-labrador .main-content :is(.lab-habits-dog-art, .lab-streak-art) .lab-speed { position: absolute; top: 2px; right: 0; width: 32px; height: 32px; }
.app-shell.bf-tema-labrador .main-content .lab-habits-dog { width: auto; height: 160px; max-width: 44vw; object-position: bottom; }
/* Gergø 23/9: husets rester (7). Vanens tal-boks ligger uden for .main-content,
   så Gem stod i husets orange med mørk tekst lige under temaets
   enhedsknap kg (--bf-accent-btn). Nu temaets knapfarve med hvid tekst:
   #C2410C giver 5,18:1, lyst og mørkt. Chokolade har sin egen petrol (F11). */
.app-shell.bf-tema-labrador .habit-prompt-card .habit-prompt-actions .button-primary { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff; }
.app-shell.bf-tema-labrador .habit-prompt-card .habit-prompt-actions .button-primary:hover { background: var(--bf-accent-btn-h); border-color: var(--bf-accent-btn-h); }

/* ---------- 06 Fremgang ---------- */
.app-shell.bf-tema-labrador .main-content .lab-progress { display: grid; gap: 16px; }
.app-shell.bf-tema-labrador .main-content .lab-progress > .lab-btn { margin-top: 0; }
.app-shell.bf-tema-labrador .main-content .lab-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.app-shell.bf-tema-labrador .main-content .lab-mini-stat { display: flex; align-items: center; gap: 10px; padding: 14px 12px; }
.app-shell.bf-tema-labrador .main-content .lab-mini-stat > .lab-icon { width: 30px; height: 30px; }
.app-shell.bf-tema-labrador .main-content .lab-mini-stat > span { display: grid; min-width: 0; }
.app-shell.bf-tema-labrador .main-content .lab-mini-stat strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 2rem; line-height: 1.05; }
.app-shell.bf-tema-labrador .main-content .lab-mini-stat small { font-size: 0.82rem; overflow-wrap: anywhere; }
.app-shell.bf-tema-labrador .main-content .lab-mini-stat small.lab-mini-label { color: var(--bf-ink); font-weight: 700; font-size: 0.9rem; }
.app-shell.bf-tema-labrador .main-content .lab-week-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 14px 0 10px; }
.app-shell.bf-tema-labrador .main-content .lab-week-col { display: grid; justify-items: center; gap: 6px; }
.app-shell.bf-tema-labrador .main-content .lab-week-bar-count { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem; }
.app-shell.bf-tema-labrador .main-content .lab-week-bar { display: flex; align-items: flex-end; width: 100%; max-width: 56px; height: 104px; border-bottom: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-week-bar > span { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 0 0; background: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-week-bar-label { color: var(--bf-muted); font-size: 0.85rem; white-space: nowrap; }
.app-shell.bf-tema-labrador .main-content .lab-effort-card .lab-meta { margin: 0; }
.app-shell.bf-tema-labrador .main-content .lab-streak-card { min-height: 120px; }
.app-shell.bf-tema-labrador .main-content .lab-streak-text { align-self: center; display: grid; gap: 4px; justify-items: start; padding: 16px 0; }
.app-shell.bf-tema-labrador .main-content .lab-streak-text .lab-card-title { font-size: 1.15rem; }
.app-shell.bf-tema-labrador .main-content .lab-streak-text .lab-meta { margin: 0; }
.app-shell.bf-tema-labrador .main-content .lab-star { color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .lab-streak-dog { width: auto; height: 112px; max-width: 40vw; object-position: bottom; }

/* ---------- 07 Kalender ---------- */
.app-shell.bf-tema-labrador .main-content .lab-calendar { display: grid; gap: 16px; }
.app-shell.bf-tema-labrador .main-content .lab-week-strip {
  list-style: none; margin: 0; padding: 8px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  background: var(--bf-surface); border-radius: 16px; box-shadow: var(--lab-shadow);
}
.app-shell.bf-dark.bf-tema-labrador .main-content .lab-week-strip { border: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-week-strip li { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; color: var(--bf-ink); }
.app-shell.bf-tema-labrador .main-content .lab-week-strip small { color: var(--bf-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.app-shell.bf-tema-labrador .main-content .lab-week-strip strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.1; }
.app-shell.bf-tema-labrador .main-content .lab-week-strip li.is-today { background: var(--bf-accent-btn); }
.app-shell.bf-tema-labrador .main-content .lab-week-strip li.is-today :is(small, strong) { color: #fff; }
.app-shell.bf-tema-labrador .main-content .lab-day-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 56px; margin-top: 10px; padding: 6px 0;
  color: var(--bf-ink); text-decoration: none;
}
.app-shell.bf-tema-labrador .main-content .lab-day-row + .lab-day-row { margin-top: 0; border-top: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-day-row .lab-row-text strong { font-size: 1rem; font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-weight: 700; }
.app-shell.bf-tema-labrador .main-content .lab-day-row .lab-row-text small { font-size: 0.9rem; }
.app-shell.bf-tema-labrador .main-content .lab-day-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lab-bubble-mine); }
.app-shell.bf-tema-labrador .main-content .lab-day-icon .lab-icon { color: var(--bf-accent-text); }
.app-shell.bf-tema-labrador .main-content .lab-day-row.is-rest .lab-day-icon { background: var(--bf-surface2); }
.app-shell.bf-tema-labrador .main-content .lab-day-row.is-rest .lab-day-icon .lab-icon { color: var(--bf-ink); }
.app-shell.bf-tema-labrador .main-content .lab-checkin-card .lab-btn { margin-top: 10px; }
.app-shell.bf-tema-labrador .main-content .lab-calendar-dog {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px;
  min-height: 110px; padding: 0 18px 0 0;
}
.app-shell.bf-tema-labrador .main-content .lab-sleep-dog { width: auto; height: 100px; max-width: 55vw; object-position: bottom; }
.app-shell.bf-tema-labrador .main-content .lab-calendar-dog p { align-self: center; margin: 0; font-weight: 600; line-height: 1.35; }

/* ---------- 08 Beskeder ---------- */
/* Tråden står på sidens baggrund som i mockuppen; boblerne er fladerne. */
.app-shell.bf-tema-labrador .main-content .lab-messages .portal-card.chat-thread-card { background: transparent; border: 0; box-shadow: none; }
.app-shell.bf-tema-labrador .main-content .lab-messages .thread-header { padding: 0; border: 0; }
.app-shell.bf-tema-labrador .main-content .lab-coach-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border-radius: 16px;
  background: var(--bf-surface); box-shadow: var(--lab-shadow);
}
.app-shell.bf-dark.bf-tema-labrador .main-content .lab-coach-row { border: 1px solid var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .lab-coach-row strong { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.1rem; }
/* Linjen med det aktive program står som en stille flade under coachens række. */
.app-shell.bf-tema-labrador .main-content .lab-messages .thread-focus { margin: 12px 0 0; padding: 12px 16px; border: 0; border-radius: 14px; background: var(--bf-surface2); }
.app-shell.bf-tema-labrador .main-content .lab-messages .thread-focus a { color: var(--bf-accent-text); }
/* Hvid på orange: 0,3,0 slår blæk-reglen på span (0,2,1) uden !important. */
.app-shell.bf-tema-labrador .main-content .lab-coach-avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bf-accent-btn); color: #fff;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.4rem;
}
/* Boblerne. Coachens er hvid til venstre, klientens er lys orange til højre.
   Husets egen boble har color #fff !important (styles.css, "The mine fill
   layers a black wash"), så blæk på den lyse boble skal også have det. */
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message .avatar { display: none; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message { grid-template-columns: minmax(0, 1fr); }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message p {
  position: relative; max-width: 84%; margin: 0 0 22px;
  border: 0; border-radius: 18px 18px 18px 6px;
  background: var(--bf-surface); color: var(--bf-ink); box-shadow: var(--lab-shadow);
}
.app-shell.bf-tema-labrador.bf-sand.bf-dark .main-content .lab-messages .thread-message p { border: 1px solid var(--bf-line); box-shadow: none; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message.mine p {
  border-radius: 18px 18px 6px 18px;
  background: var(--lab-bubble-mine); color: var(--bf-ink) !important;
}
/* Tidspunktet står under boblen i dæmpet tekst. Husets small i boblen har
   color #fff !important på klientens boble, og den regel rammer også
   filstørrelsen i en vedhæftet fil, så farven gælder alle small i boblen.
   Kun boblens egen tid (direkte barn af p) flyttes ud under boblen:
   filstørrelsen ligger også i p, men inde i filkortet, og skal blive der
   (skeptikeren L2 målte "234 KB" oven på beskedens tekst). */
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message p small { color: var(--bf-muted) !important; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message p > small {
  position: absolute; top: calc(100% + 4px); left: 6px; margin: 0;
  font-size: 0.78rem; white-space: nowrap;
}
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message.mine p > small { left: auto; right: 6px; }
/* Husets 0.75 på filstørrelsen tager dæmpet tekst under AA på den lyse boble. */
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .chat-attachment.is-file small { opacity: 1; }
.app-shell.bf-tema-labrador .main-content .lab-empty-thread { display: grid; justify-items: center; gap: 10px; padding: 20px 12px; text-align: center; }
.app-shell.bf-tema-labrador .main-content .lab-empty-thread p { margin: 0; max-width: 30ch; color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .lab-empty-dog { width: auto; max-width: 100%; height: 160px; }
/* Skrivefeltet: clipsen til venstre, et rundt felt og en rund Send-knap på én
   række. Chippen med en valgt fil står stadig på sin egen række (order 2). */
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .portal-message-composer { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .portal-message-composer .chat-attach { order: -1; width: 44px; height: 44px; border: 0; background: none; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .portal-message-composer input[name="body"] { flex: 1 1 120px; width: auto; min-width: 0; min-height: 46px; padding: 10px 16px; border-radius: 999px; }
/* 0,7,2 slår knapreglen .bf-sand .main-content button:not(...) (0,7,1) uden !important. */
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages form.portal-message-composer button.lab-send {
  display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; min-width: 48px; padding: 0;
  border: 0; border-radius: 50%; background: var(--bf-accent-btn); color: #fff; cursor: pointer;
}
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages form.portal-message-composer button.lab-send:focus-visible { outline: 3px solid var(--bf-accent-text); outline-offset: 2px; }
/* Reaktioner i Avanceret (Gergø 28/9, v738 etape 3). Tiden står under boblen i
   afsenderens side, så badgen står på samme linje i den modsatte side (24 px,
   så rækken ikke bliver højere), og boblen har allerede sin 22 px margin, så
   ingen ekstra luft; rækken og hvem-linjen står under tidslinjen. En kort
   boble får plads til både tid og badge. Resten står i REAKTIONER AVANCERET. */
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message.has-react { margin-bottom: 0; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message.has-react > p { min-width: 92px; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message.has-react > p + :is(.rx-who, .rx-row) { margin-top: 0; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message > p > .rx-badge { top: calc(100% + 1px); bottom: auto; right: 6px; height: 24px; min-width: 24px; font-size: 14px; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message.mine > p > .rx-badge { right: auto; left: 6px; }
.app-shell.bf-tema-labrador.bf-sand .main-content .lab-messages .thread-message > p > button.rx-badge::before { inset: -22px -10px 0; }
/* Gergø 29/9: Ny aftale (v741), etape 4. Aftalekortet i Labradors tråd: lab-kortets
   skygge, og den stille knap har orange kant og tekst (mockuppen, Labradors Beskeder);
   selektoren slår husets knapfarve (.bf-sand .main-content button:not(...)) uden !important. */
.app-shell.bf-tema-labrador .main-content .aftk { box-shadow: var(--lab-shadow, none); }
.app-shell.bf-tema-labrador.bf-sand .main-content .aftk-wrap .aftk button.aftk-btn.quiet { border-color: var(--bf-accent); color: var(--bf-accent-text, var(--bf-accent)); background: var(--bf-surface, #fff); }
/* ---------- Enkel visning (L3) ---------- */
/* Gergø 16/9 kl. 18.35: "yes also enkel visning!". Enkels egne regler står
   uændret for alle andre; her får de kun temaets farver, kort og hunde.
   Ingen tekst bliver mindre end i Enkel i dag, brødtekst i nye kort er 20 px,
   og store tryk-flader bliver store. Ingen nye tokens. */

/* Skallen. Topbjælken tegnes over Enkel-skallen, men Enkel skjuler skuffen,
   så ☰ ville åbne ingenting. 0,4,0 slår L1's regel ved 720 px (0,3,0). */
.app-shell.bf-tema-labrador:has(.bf-senior) .lab-topbar { display: none; }
.app-shell.bf-tema-labrador .main-content .senior-bar { background: var(--bf-surface2); border-top-color: var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .senior-bar a.on { background: transparent; color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .senior-bar a.on span { color: var(--bf-accent-text); }

/* Hvide kort med blød skygge, som temaets egne kort. */
.app-shell.bf-tema-labrador .main-content :is(.senior-card, .senior-card.paper) { background: var(--bf-surface); border: 0; border-radius: 20px; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador .main-content .senior-tile:not(.hot) { background: var(--bf-surface); border-color: transparent; border-radius: 20px; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador .main-content .senior-tile:not(.hot) svg { color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .senior-tile.hot { box-shadow: var(--lab-shadow); }
/* Husets 0.85 på den lille tekst gav hvid på temaets orange 4,16 (målt 16/9). */
.app-shell.bf-tema-labrador .main-content .senior-tile.hot small { opacity: 1; }
.app-shell.bf-tema-labrador.bf-dark .main-content :is(.senior-card, .senior-tile:not(.hot), .senior-bubble:not(.me)) { border: 1px solid var(--bf-line); }
/* Kost: husets 0.75 på "af 2200 kcal" i ringen gav 4,19 på hvidt (målt 16/9). */
.app-shell.bf-tema-labrador .main-content .senior-ring span small { opacity: 1; }
/* Et spist måltid beholder sin grønne ramme på det hvide kort. */
.app-shell.bf-tema-labrador .main-content .senior-card.senior-meal.is-eaten { border: 2px solid var(--lab-ok); }

/* Knapperne. Den stille knap får temaets sekundærknap: orange kant og orange
   tekst. Husets farve har !important, så den her skal også have det. */
.app-shell.bf-tema-labrador .main-content .senior-big.quiet {
  background: var(--bf-surface); border: 2px solid var(--bf-accent);
  /* Slår blækket med !important på .senior-big.quiet i styles.css:20488 (Senior-visning v651). */
  color: var(--bf-accent-text) !important;
}
/* Grønt fyld bag hvid tekst: --lab-ok klarer AA i begge temaer. */
.app-shell.bf-tema-labrador .main-content .senior-big.done { background: var(--lab-ok); }
.app-shell.bf-tema-labrador .main-content .senior-move-btn.is-on,
.app-shell.bf-tema-labrador .main-content .senior-move-btn.is-on:disabled { background: var(--lab-ok); border-color: var(--lab-ok); }
.app-shell.bf-tema-labrador .main-content .senior-shop-check { border-color: var(--bf-muted); }
/* Fluebenet er et span, så blæk-reglen (0,2,1) gjorde det mørkt på det grønne i lyst tema. */
.app-shell.bf-tema-labrador .main-content .senior-shop-row.is-done .senior-shop-check { background: var(--lab-ok); border-color: var(--lab-ok); color: #fff; }
.app-shell.bf-tema-labrador .main-content .senior-switch-view { border-color: var(--bf-muted); }

/* Vaner: runde bokse som i designet. Tallet i en tælle-boks står i en pille.
   Den dæmpede boks (.dim) beholder sine egne farver. */
.app-shell.bf-tema-labrador .main-content .senior-box { border-radius: 999px; }
.app-shell.bf-tema-labrador .main-content .senior-box:not(.dim) { border-color: var(--bf-muted); }
.app-shell.bf-tema-labrador .main-content .senior-box.on:not(.dim) { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); }
/* Denne uge: dagen i dag er orange som ugestrimlen i designet. Markøren er
   hvid, men kun når dagen har noget. */
.app-shell.bf-tema-labrador .main-content .senior-day.today { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); }
.app-shell.bf-tema-labrador .main-content .senior-day.today :is(span, b) { color: #fff; }
.app-shell.bf-tema-labrador .main-content .senior-day.today i.m:is(.t, .c, .r) { background: #fff; }

/* Chat: coachens boble er hvid, hendes er lys orange med blæk. */
.app-shell.bf-tema-labrador .main-content .senior-bubble:not(.me) { background: var(--bf-surface); box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador .main-content .senior-bubble.me:not(.is-sticker) { background: var(--lab-bubble-mine); color: var(--bf-ink); }
/* Slår den hvide tekst med !important på .senior-bubble.me span i styles.css:20556 (Senior-visning v651). */
.app-shell.bf-tema-labrador .main-content .senior-bubble.me:not(.is-sticker) span { color: var(--bf-ink) !important; }
/* Slår den hvide tekst med !important på .senior-bubble.me small i styles.css:20556 (Senior-visning v651). */
.app-shell.bf-tema-labrador .main-content .senior-bubble.me small { color: var(--bf-muted) !important; }
/* Husets 0.8 på tiden gav dæmpet tekst på hendes lyse boble 3,3 (målt 16/9). */
.app-shell.bf-tema-labrador .main-content .senior-bubble small { opacity: 1; }
.app-shell.bf-tema-labrador .main-content .lab-senior-empty { display: grid; justify-items: center; gap: 12px; padding: 12px 8px; text-align: center; }
.app-shell.bf-tema-labrador .main-content .lab-senior-empty-art { position: relative; padding-right: 30px; }
.app-shell.bf-tema-labrador .main-content .lab-senior-empty-dog { width: auto; max-width: 100%; height: 140px; }
.app-shell.bf-tema-labrador .main-content .lab-senior-empty-art .lab-speed { position: absolute; top: 0; right: 0; width: 34px; height: 34px; }
.app-shell.bf-tema-labrador .main-content .lab-senior-empty .senior-muted { font-size: 20px; max-width: 26ch; }

/* Temaets kort inde i Enkel visning: større tekst og større knapper. */
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-card :is(h2, h3).lab-card-title { font-size: 24px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-card p { font-size: 20px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-btn { min-height: 64px; font-size: 22px; border-radius: 18px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-buddy-card { min-height: 170px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-buddy-text { padding: 16px 0; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-buddy-text .lab-rule { margin: 8px 0; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-buddy-dog { height: 150px; }
/* Kost-hunden er bred; lidt lavere giver titlen plads til to linjer i 20 px-skriften. */
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-menu-dog { height: 112px; }
/* High five i Enkel visning fylder bredden som Enkels andre kort. Uden bredden
   krymper .phone-dashboard (margin: 0 auto) til sit indhold i Enkels gitter,
   og luften under den er Enkels egen. */
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-high-five { width: 100%; padding-bottom: 0; }
/* Uden net står beskeden om det over knappen; hunden bliver lavere, så
   "Tilbage til Hjem" stadig kan ses uden at rulle ved 390x844 (målt 16/9). */
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-high-five:has(.lab-offline-note) .lab-high-five-dog { height: min(230px, 27vh); }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-high-five :is(.lab-lead, .lab-high-five-note) { font-size: 20px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-stat strong { font-size: 22px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-stat small { font-size: 16px; }
/* Vand i dag i Enkel visning (17/9): dråben og bjælken fra vandkortet på Kost,
   men tallet er skærmens ene tal og står i blæk og 28 px (i Avanceret er det
   dæmpet og lille, fordi plus og minus står ved siden af). Enkels knapper står
   under kortet i en gruppe med lidt mindre luft end Enkels egen, og gruppen har
   ekstra luft under sig, så Fortryd hører til vandet og ikke til knappen under. */
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-senior-water-group { display: grid; gap: 10px; margin-bottom: 10px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-senior-water .lab-water-value { font-family: "Archivo", sans-serif; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--bf-ink); font-variant-numeric: tabular-nums; }
.app-shell.bf-tema-labrador .main-content .bf-senior .lab-senior-water .lab-water-head > .lab-icon { width: 40px; height: 40px; }

/* Trintælleren øverst i afspilleren ("2 / 6") har husets 0.65 og gav 3,08 på
   temaets lyse baggrund (målt 16/9). */
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .player-progress-label small { opacity: 1; }
/* Pausen i afspilleren i Enkel visning: større mål på knapperne og teksten. */
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest .player-rest-nudge .button { min-height: 56px; min-width: 96px; font-size: 20px; }
.app-shell.bf-tema-labrador.bf-sand.client-sand .main-content .workout-player.is-senior .lab-rest .player-rest-skip.lab-btn-ghost { min-height: 64px; font-size: 22px; }
/* Overskriften "Træk vejret" er mindst lige så stor som linjen under den (fund L3-S1, 17/9). */
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest :is(.lab-rest-sub, .lab-rest-breath strong, .lab-rest-breath span) { font-size: 20px; }
/* −30s og +30s står i temaets panel ved både pause og overlevering, for Enkel
   visning har dem begge steder, og i Enkel fjernes ingen knap (fund L3-S2, 17/9).
   Gergø 17/9 ("ja"): Avanceret viser dem også ved overleveringen, som Enkel og
   alle andre klienter, så reglen der skjulte dem uden for Enkel er fjernet.
   Markøren lab-rest-nudge-handover bruges nu kun til hundens højde: Enkels
   herunder og Avancerets under pausens regler øverst (fund O1, 17/9). */
/* Hunden i pausen får det der er tilbage, så "Spring pause over" altid står
   over foden ved 390x844 uden at rulle (målt 16/9 og 17/9). Knapperne er større
   i Enkel visning, så L1's mål er for store her. −30s og +30s står i panelet i
   begge former. Mellem to sæt er foden 114 px høj; ved overleveringen er den
   130 px med "Næste om" og "Bliv her". Fortryd tager 52 px mere, og er der ikke
   plads, forsvinder hunden. Næste-kortet er der altid, for når en pause kører,
   giver playerNextUpForRest altid et kort (sidst Færdig med træningen). */
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest .lab-rest-dog { height: clamp(48px, calc(100dvh - 772px), 150px); }
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest:has(.player-rest-undo) .lab-rest-dog { height: clamp(48px, calc(100dvh - 824px), 150px); }
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest:has(.lab-rest-nudge-handover) .lab-rest-dog { height: clamp(48px, calc(100dvh - 788px), 150px); }
.app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest:has(.lab-rest-nudge-handover):has(.player-rest-undo) .lab-rest-dog { height: clamp(48px, calc(100dvh - 840px), 150px); }
@media (max-height: 871px) {
  .app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest:has(.player-rest-undo) .lab-rest-dog { display: none; }
}
@media (max-height: 887px) {
  .app-shell.bf-tema-labrador .main-content .workout-player.is-senior .lab-rest:has(.lab-rest-nudge-handover):has(.player-rest-undo) .lab-rest-dog { display: none; }
}
/* Enkel under Mere (Gergø 27/9). Skallens store tilbage-knap har temaets
   kort-skygge i stedet for kanten, og titlen beholder temaets 2.1rem (Enkels
   regel for 30 px har :not() og slår ellers temaets h1). */
.app-shell.bf-tema-labrador .main-content .bf-senior:not(.bf-coach-simple) .senior-head h1 { font-size: 2.1rem; }
.app-shell.bf-tema-labrador .main-content .bf-senior:not(.bf-coach-simple) .senior-back { border-color: transparent; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador.bf-dark .main-content .bf-senior:not(.bf-coach-simple) .senior-back { border-color: var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .senior-bar .senior-more.on { background: transparent; color: var(--bf-accent); }
.app-shell.bf-tema-labrador .main-content .senior-bar .senior-more.on span { color: var(--bf-accent-text); }
/* Afkrydsningen: hvid på temaets fyld, også i mørkt (Enkels mørke regel uden tema er mørk tekst). */
.app-shell.bf-tema-labrador .main-content .senior-box.on:not(.dim) { color: #fff; }
/* Rækker, svar og kvittering som temaets kort: hvide med blød skygge, i mørkt med kant. */
.app-shell.bf-tema-labrador .main-content .bf-senior :is(.senior-go, .senior-hero) { border-color: transparent; border-radius: 20px; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador.bf-dark .main-content .bf-senior :is(.senior-go, .senior-hero) { border-color: var(--bf-line); }
/* Enkel under Mere, etape E2 og E3 (Gergø 27/9): kalenderens dagkort som
   temaets kort, det grønne i temaets grøn og hundenes mål (én pr. skærm). */
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-daycard { border-color: transparent; border-radius: 20px; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador.bf-dark .main-content .bf-senior .senior-daycard { border-color: var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-daycard.today { border: 3px solid var(--bf-accent); }
.app-shell.bf-tema-labrador.bf-dark .main-content .bf-senior .senior-pill.today,
.app-shell.bf-tema-labrador.bf-dark .main-content .bf-senior .senior-pill.new {
  /* Skeptikernes fund S11: pillerne I dag og Nyt siden sidst (fyld #0F6B75)
     skilte sig kun 2,76:1 fra kortet i chokolade mørkt. En ring i temaets
     accent (6,9:1) gør grafikken tydelig; fyldet og den hvide tekst (6,5:1)
     er mockuppens. Kommentaren står i reglen, så selektoren står alene. */
  box-shadow: 0 0 0 2px var(--bf-accent);
}
.app-shell.bf-tema-labrador .main-content .bf-senior :is(.senior-go.c .senior-go-icon, .senior-dayrow.c .ic, .senior-dayrow.done .ic) { color: var(--lab-ok); }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-dog.head { width: 104px; height: 90px; margin: -6px -4px 0 0; }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-dog.tall { width: 133px; height: 150px; }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-dog.side { width: 110px; height: 95px; margin: -8px -8px -16px 0; }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-dog.nap { justify-self: end; width: 176px; height: 67px; margin: 0 -8px -8px 0; }
/* Enkel under Mere, etape E4 og E5 (Gergø 27/9): filrækkerne som temaets
   kort, hvide med blød skygge, i mørkt med kant. */
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-doc2 { border-color: transparent; border-radius: 20px; box-shadow: var(--lab-shadow); }
.app-shell.bf-tema-labrador.bf-dark .main-content .bf-senior .senior-doc2 { border-color: var(--bf-line); }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-receipt { border-color: var(--lab-ok); }
.app-shell.bf-tema-labrador .main-content .bf-senior .senior-receipt-icon { background: var(--lab-ok); color: #fff; }
/* LABRADOR-VARIANT CHOKOLADE START (22/9-2026). Klassen bf-tema-labrador-chokolade
   sidder på .app-shell SAMMEN MED bf-tema-labrador. Kun tokens og de faste
   steder; alt andet i LABRADOR-blokken deles. Skal stå INDE i blokken, før
   LABRADOR-TEMA SLUT (tests/labrador-tema.test.js). */
.app-shell.bf-sand.bf-tema-labrador.bf-tema-labrador-chokolade {
  --bf-sand: #F6EFE7; --bg: #F6EFE7;
  --bf-surface: #FFFFFF; --surface: #FFFFFF; --surface-strong: #FFFFFF;
  --bf-surface2: #FBF5EF; --surface2: #FBF5EF;
  --bf-ink: #2A1A12; --ink: #2A1A12;
  --bf-muted: #6F5D50; --muted: #6F5D50;
  --bf-line: #E9DFD4; --line: #E9DFD4;
  --bf-accent: #138894; --accent: #138894;
  --bf-accent-btn: #0F6B75; --bf-accent-btn-h: #0B535B;
  --bf-accent-d: #0B535B;
  --bf-accent-text: #0E6A73;
  --lab-bubble-mine: #D8EEF0;
  --lab-ok: #0E8846;
  --lab-dot-muted: #CFC5B9;
  --lab-shadow: 0 8px 24px rgba(58, 36, 20, 0.08);
  --kost-sand: #F6EFE7; --kost-card: #FFFFFF; --kost-ink: #2A1A12; --kost-muted: #6F5D50; --kost-line: #E9DFD4;
}
.app-shell.bf-sand.bf-dark.bf-tema-labrador.bf-tema-labrador-chokolade {
  --bf-sand: #17110D; --bg: #17110D;
  --bf-surface: #221A15; --surface: #221A15; --surface-strong: #221A15;
  --bf-surface2: #2D2319; --surface2: #2D2319;
  --bf-ink: #F4EBE2; --ink: #F4EBE2;
  --bf-muted: #B4A596; --muted: #B4A596;
  --bf-line: #3F3229; --line: #3F3229;
  --bf-accent: #35B5C0; --accent: #35B5C0;
  --bf-accent-btn: #0F6B75; --bf-accent-btn-h: #0B535B;
  --bf-accent-d: #0B535B;
  --bf-accent-text: #4CC3CD;
  --lab-bubble-mine: #163E43;
  --lab-ok: #0E8846;
  --lab-dot-muted: #5E5046;
  --lab-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  --kost-sand: #17110D; --kost-card: #221A15; --kost-ink: #F4EBE2; --kost-muted: #B4A596; --kost-line: #3F3229;
}
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .kost-app {
  --kost-sand: #F6EFE7; --kost-card: #FFFFFF; --kost-ink: #2A1A12; --kost-muted: #6F5D50; --kost-line: #E9DFD4;
}
.app-shell.bf-dark.bf-tema-labrador.bf-tema-labrador-chokolade .kost-app {
  --kost-sand: #17110D; --kost-card: #221A15; --kost-ink: #F4EBE2; --kost-muted: #B4A596; --kost-line: #3F3229;
}
body:has(.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade) { background: #F6EFE7; }
body:has(.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade.bf-dark) { background: #17110D; }
.app-shell.bf-dark.bf-tema-labrador.bf-tema-labrador-chokolade .lab-dog { filter: drop-shadow(0 0 18px rgba(244, 235, 226, 0.16)); }
/* LABRADOR-VARIANT CHOKOLADE RETTELSER START (skeptikerne 22/9-2026). Husets
   egne dele uden for LABRADOR-blokken har faste orange farver, som variantens
   tokens ikke når (målt i headless Chrome ved 390x844 og 411x837, lyst og mørkt,
   Avanceret og Enkel). For Labrador passer de til temaets orange, så hver regel
   her bærer bf-tema-labrador-chokolade og rammer kun varianten. Tokenet
   --bf-accent-d (Foreslåede måltider, vandets +, valgt glasstørrelse) står i
   variantens to token-regler ovenfor: #0B535B, hvid giver 8,74:1. */
/* S1: afspillerens ur ligger i body uden for .app-shell, så det nås gennem
   body:has(). Urets flade er mørk i begge temaer (rgba(20, 14, 10, 0.95)), så
   den mørke petrol bruges i begge: #4CC3CD giver 8,99:1. */
body:has(.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade) #bf-workout-timer { border-color: rgba(53, 181, 192, 0.55); }
body:has(.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade) #bf-workout-timer .bf-timer-clock { color: #4CC3CD; }
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .player-progress-dots i.now { background: var(--bf-accent); }
/* S2: Log dette måltid på I dag (uden for .kost-app) og knappen i opstartskortet
   (Kom i gang, Åbn opgave, også på Vaner). Et logget måltid beholder husets grønne. */
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .meal-action-btn.meal-action-log:not(.is-logged) { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff !important; }
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .meal-action-btn.meal-action-log:not(.is-logged):hover { background: var(--bf-accent-btn-h); border-color: var(--bf-accent-btn-h); }
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .phone-startup-card a,
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .startup-card a { background: var(--bf-accent-btn); color: #fff !important; }
/* Også I dags dagsfliser med et pas (målt i Test som på Viktor: kant #C75D34/0.32). */
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .phone-daily-track-tile.has-workout { border-color: color-mix(in srgb, var(--bf-accent) 32%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--bf-accent) 6%, transparent); }
/* S3: skuffen Mere. Samme styrker som husets orange, men af variantens accent. */
.app-shell.bf-sand.bf-tema-labrador.bf-tema-labrador-chokolade .sidebar .sidebar-link.active { background: color-mix(in srgb, var(--bf-accent) 14%, transparent); border-color: color-mix(in srgb, var(--bf-accent) 55%, transparent); }
.app-shell.bf-sand.bf-tema-labrador.bf-tema-labrador-chokolade .sidebar .sidebar-link:hover { border-color: color-mix(in srgb, var(--bf-accent) 55%, transparent); }
.app-shell.bf-sand.bf-tema-labrador.bf-tema-labrador-chokolade .sidebar .beast-mode-card { background: color-mix(in srgb, var(--bf-accent) 8%, transparent); border-color: color-mix(in srgb, var(--bf-accent) 24%, transparent); }
/* S4: Opskrift-pillen i Madplan ved siden af den petrol Log. */
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .meal-action-btn.meal-action-recipe { border-color: color-mix(in srgb, var(--bf-accent) 40%, transparent); background: color-mix(in srgb, var(--bf-accent) 6%, transparent); }
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .meal-action-btn.meal-action-recipe:hover { background: color-mix(in srgb, var(--bf-accent) 16%, transparent); }
/* S9 (den billige): BF-miniaturen på Træning. */
.app-shell.bf-sand.bf-tema-labrador.bf-tema-labrador-chokolade .main-content .workout-thumb { background: color-mix(in srgb, var(--bf-accent) 12%, transparent); }
/* Skeptikernes F11 (23/9): vanens tal-boks (kg eller %) ligger uden for
   .main-content. Enhedsknappen er fyldt med variantens --bf-accent-btn (petrol),
   men Gem lige under stod i husets orange. Nu følger Gem den samme petrol med
   hvid tekst (husets knap har mørk tekst uden !important): 6,3:1 på #0F6B75.
   Gergø 23/9: husets rester (7). Labrador har nu sin egen regel under 05 Vaner
   (temaets --bf-accent-btn); denne vinder stadig for chokolade. */
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .habit-prompt-card .habit-prompt-actions .button-primary { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff; }
.app-shell.bf-tema-labrador.bf-tema-labrador-chokolade .habit-prompt-card .habit-prompt-actions .button-primary:hover { background: var(--bf-accent-btn-h); border-color: var(--bf-accent-btn-h); }
/* LABRADOR-VARIANT CHOKOLADE RETTELSER SLUT */
/* LABRADOR-VARIANT CHOKOLADE SLUT */
/* LABRADOR-TEMA SLUT */

/* KG ELLER % OG COACHENS ENKEL (Gergø 23/9: svar) START
   Muskelmasse, fedt og kropsvand kan gemmes i kg ELLER %, klientens valg (kun
   den ene er rigtig). Gruppen .bf-unit-choice er to knapper i én ramme; den
   valgte er fyldt med --bf-accent-btn (tokenet til hvid tekst på orange, målt
   5,20:1 lyst og 4,99:1 mørkt; Labrador #C2410C). Radioerne selv er skjult, men
   fokus ses på knappen. */
/* fieldset.x.x: panelets ".phone-input-panel fieldset { display: grid }" (0,1,1) må ikke vinde. */
fieldset.bf-unit-choice.bf-unit-choice { display: inline-flex; flex-direction: row; align-items: stretch; gap: 0; margin: 0; padding: 0; border: 1.5px solid var(--bf-line, rgba(127, 127, 127, 0.35)); border-radius: 999px; overflow: hidden; width: max-content; min-width: 0; }
.bf-unit-choice legend { padding: 0; }
.bf-unit-choice label { position: relative; display: inline-flex !important; margin: 0; cursor: pointer; }
.bf-unit-choice input[type="radio"] { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.bf-unit-choice span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 40px; padding: 0 14px; font-size: 0.95rem; font-weight: 800; color: var(--bf-ink, inherit); background: transparent; }
.bf-unit-choice label + label span { border-left: 1.5px solid var(--bf-line, rgba(127, 127, 127, 0.35)); }
.bf-unit-choice input:checked + span { background: var(--bf-accent-btn, #b34e28); color: #fff !important; }
.bf-unit-choice input:focus-visible + span { outline: 3px solid var(--bf-accent, #C75D34); outline-offset: -3px; }
/* Kropsscanningen: navn, tal og enhed i samme felt. */
.phone-bodyscan-panel .bodyscan-form:has(.bodyscan-field) { align-items: start; }
.phone-bodyscan-panel .bodyscan-form .bodyscan-field { display: grid; gap: 0.25rem; font-size: 0.8rem; align-content: start; }
.phone-bodyscan-panel .bodyscan-form .bodyscan-field > label { display: block; }
.phone-bodyscan-panel .bodyscan-form .bf-unit-choice label { display: inline-flex; gap: 0; font-size: inherit; }
.phone-bodyscan-panel .bodyscan-form .bodyscan-unit-hint { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--bf-muted, inherit); }
/* Gergø 29/9: v743. Feltet Apparat er lige så højt som Dato ved siden af (48 px).
   Skeptikerens fund 6: .bf-sand .main-content :is(input, select, textarea) bruger
   kortformen background og slettede selectens pil, så feltet lignede et tekstfelt;
   pilen tegnes igen (som grundreglen select), og skriften står i 900 som naboerne. */
.phone-bodyscan-panel .bodyscan-form select[name="scanDevice"] { min-height: 48px; font-weight: 900; background-color: var(--bf-surface2); 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; }
/* Fremgang (Avanceret): kun enhedsgruppen for den valgte type ses, og så
   gemmer det frie enhedsfelt sig. */
.progress-log-card .metric-comp-unit { display: none; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 18px; font-size: 0.9rem; font-weight: 700; }
.progress-log-card:has(input[name="metricType"][value="body_fat"]:checked) .metric-comp-unit-fat,
.progress-log-card:has(input[name="metricType"][value="muscle_mass"]:checked) .metric-comp-unit-muscle { display: flex; }
.progress-log-card:has(input[name="metricType"][value="body_fat"]:checked) .metric-unit-field,
.progress-log-card:has(input[name="metricType"][value="muscle_mass"]:checked) .metric-unit-field { display: none; }
/* Vanens tal-boks (Enkel og Avanceret). */
.habit-prompt-comp-unit { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; font-weight: 700; color: var(--bf-ink, inherit); }
/* ── Kropssammensætning som én skive (Gergø 29/9: v743, 2/3): klientens kort ──
   Farverne er KUN temaets tokens: fedt --bf-accent, muskel --bf-green, resten og
   fedtfri masse --bf-muted; tal og navne --bf-ink, forklaringer --bf-muted,
   beregnet --bf-accent-text. Stykkerne står 2 skærm-px fra hinanden i kortets
   farve (renderCompositionDisc), så hvert stykke kun grænser op til fladen.
   Farve-reglerne står under .main-content, fordi .bf-sand .main-content :is(p,
   span, div, small, b) (0,2,1) ellers giver al tekst samme farve. */
.comp-card .comp-body { display: grid; gap: 12px; padding: 14px 18px 18px; min-width: 0; container: comp / inline-size; }
.main-content .comp-card .comp-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--bf-line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--bf-muted); white-space: nowrap; }
.comp-disc { position: relative; margin: 0 auto; flex: none; }
.comp-disc svg { display: block; }
.comp-slice-fat { stroke: var(--bf-accent); }
.comp-slice-muscle { stroke: var(--bf-green); }
.comp-slice-rest, .comp-slice-fat_free { stroke: var(--bf-muted); }
.comp-ring-empty { stroke: var(--bf-line); }
.comp-disc-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.main-content .comp-disc .comp-disc-center b { display: block; font: 800 30px/1 "Archivo", sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--bf-ink); }
.main-content .comp-disc .comp-disc-center b small { font: 700 14px/1 "Hanken Grotesk", system-ui, sans-serif; margin-left: 3px; color: var(--bf-ink); }
.main-content .comp-disc .comp-disc-center span { display: block; margin-top: 5px; font-size: 13px; color: var(--bf-muted); }
.main-content .comp-disc.comp-disc-empty .comp-disc-center b { font-size: 17px; color: var(--bf-muted); }
.main-content .comp-disc.comp-disc-sm .comp-disc-center b { font-size: 20px; }
.main-content .comp-disc.comp-disc-sm .comp-disc-center b small { font-size: 11px; }
.main-content .comp-disc.comp-disc-sm .comp-disc-center span { margin-top: 3px; font-size: 11px; }
.main-content .comp-disc.comp-disc-senior .comp-disc-center b { font-size: 26px; }
.main-content .comp-disc.comp-disc-senior .comp-disc-center b small { font-size: 16px; }
.main-content .comp-disc.comp-disc-senior .comp-disc-center span { font-size: 18px; }
.main-content .comp-disc.comp-disc-senior.comp-disc-empty .comp-disc-center b { font-size: 20px; }
/* Rækkerne: prik | navn | tallene (kg og procent flugter til højre, ordet til
   venstre for dem), forklaringen under i hele bredden. */
.comp-legend { list-style: none; margin: 0; padding: 0; display: grid; }
.comp-row { display: grid; grid-template-columns: 16px minmax(min-content, 1fr) auto; gap: 3px 10px; align-items: center; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--bf-line); }
.comp-legend > .comp-row:first-child { border-top: 0; }
.comp-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; justify-self: center; flex: none; }
.comp-dot-fat { background: var(--bf-accent); }
.comp-dot-muscle { background: var(--bf-green); }
.comp-dot-rest, .comp-dot-fat_free { background: var(--bf-muted); }
.comp-dot-ring { border: 2px solid var(--bf-muted); }
.comp-dot-dashed { border: 1.5px dashed var(--bf-muted); }
.main-content .comp-row .comp-name { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--bf-ink); overflow-wrap: break-word; }
.main-content .comp-row .comp-sub { grid-column: 2 / -1; font-size: 12.5px; line-height: 1.35; color: var(--bf-muted); }
.comp-val { display: grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 3px; align-items: baseline; justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.main-content .comp-row .comp-val b { justify-self: end; font-size: 16px; line-height: 1.2; color: var(--bf-ink); }
.main-content .comp-row .comp-val .comp-pct { justify-self: end; font-size: 14px; line-height: 1.2; color: var(--bf-muted); }
.main-content .comp-row .comp-val .comp-only { grid-column: 1 / -1; justify-self: end; font-size: 14px; font-weight: 700; color: var(--bf-muted); }
.main-content .comp-card .comp-tag { justify-self: start; font-size: 11px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid currentColor; border-radius: 6px; padding: 1px 5px; color: var(--bf-muted); }
.main-content .comp-card :is(.comp-tag-derived, .comp-tag-estimated) { color: var(--bf-accent-text, var(--bf-accent)); }
/* En smal spalte (PC 1024 px med sidebjælke, 280 px kort): tallene går under navnet. */
@container comp (max-width: 270px) {
  .comp-row { grid-template-columns: 16px minmax(0, 1fr); }
  .comp-row .comp-val { grid-column: 2; justify-self: start; }
}
.main-content .comp-card .comp-h4 { margin: 4px 0 0; font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-muted); }
.main-content .comp-card .comp-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--bf-muted); }
.main-content .comp-card .comp-note.comp-note-ink { font-size: 13.5px; color: var(--bf-ink); }
.main-content .comp-card .comp-src { margin: 0; font-size: 12px; line-height: 1.4; color: var(--bf-muted); }
.comp-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.main-content .comp-card .comp-btn { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bf-line); background: var(--bf-surface2); color: var(--bf-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.main-content .comp-card .comp-btn.comp-btn-primary { background: var(--bf-accent-btn, var(--bf-accent)); border-color: transparent; color: #fff !important; }
/* .bf-sand .main-content button:not(...) (0,7,1) giver alle knapper --bf-ink; linket er en knap. */
.main-content .comp-card .comp-link { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--bf-accent-text, var(--bf-accent)) !important; cursor: pointer; }
.main-content .comp-card .comp-link span { color: inherit; }
/* Udvikling: details, foldet på telefonen. */
.comp-dev summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; }
.comp-dev summary::-webkit-details-marker { display: none; }
.main-content .comp-dev summary .comp-h4 { margin: 0; }
.main-content .comp-dev .comp-fold span { font-size: 12.5px; font-weight: 700; color: var(--bf-muted); }
.comp-dev:not([open]) .comp-fold-open, .comp-dev[open] .comp-fold-closed { display: none; }
.comp-dev > .comp-note { margin-top: 8px; }
.comp-card .composition-series { display: grid; gap: 2px; padding: 12px 0 0; }
.main-content .comp-card .composition-series > small { padding: 0; font-size: 13px; font-weight: 700; color: var(--bf-muted); }
.comp-spark { position: relative; height: 44px; margin: 0 4px; }
.comp-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.comp-spark path { fill: none; stroke: var(--bf-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.comp-spark .comp-spark-dot { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--bf-accent); }
.comp-ends { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-variant-numeric: tabular-nums; }
.main-content .comp-card .comp-ends span { font-size: 12.5px; color: var(--bf-muted); }
.main-content .comp-card .comp-ends b { color: var(--bf-ink); }
/* Overblik: skiven 120 px og tre linjer i fire spalter (prik, navn, kg,
   procent), så tallene flugter. Kan linjerne ikke stå ved siden af skiven (360 px,
   PC's smalle spalte, ungarsk), står de under den; aldrig klippet. */
.comp-compact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; }
.comp-mini { flex: 1 1 0; min-width: max-content; display: grid; grid-template-columns: 10px minmax(max-content, 1fr) auto auto; gap: 6px 8px; align-items: center; font-variant-numeric: tabular-nums; }
.comp-mini-row { display: contents; }
.comp-mini-row .comp-dot { width: 10px; height: 10px; }
.main-content .comp-card .comp-mini-name { font-size: 14.5px; color: var(--bf-ink); }
.main-content .comp-card .comp-mini-row b { justify-self: end; font-size: 15px; color: var(--bf-ink); white-space: nowrap; }
.main-content .comp-card .comp-mini-row .comp-mini-pct { justify-self: end; font-size: 13px; color: var(--bf-muted); white-space: nowrap; }
.comp-mini .comp-link { grid-column: 1 / -1; }
/* Overskriften og dato-chippen: chippen går på næste linje i en smal spalte. */
.comp-card .portal-card-heading { flex-wrap: wrap; row-gap: 6px; }
/* Krop på PC: kortet står i højre spalte over to rækker (vægten og kropsmål til
   venstre), og Seneste målinger under det, så kortets højde ikke strækker
   vægt-kortet. Under 1024 px er gitteret én spalte i samme rækkefølge som før. */
@media (min-width: 1024px) {
  .portal-progress-grid.comp-tab-grid { grid-template-rows: auto 1fr; align-items: start; }
  .portal-progress-grid.comp-tab-grid > .comp-card-full { grid-column: 2; grid-row: 1 / span 2; }
  .portal-progress-grid.comp-tab-grid > .progress-recent-card { grid-column: 2; }
}
/* Enkel: kortet Din krop (18 px, rækker på 52 px, ingen ord-mærker). */
.senior-body-card { gap: 10px; }
.main-content .senior-body-card h3 { font-size: 20px; color: var(--bf-ink); letter-spacing: 0; }
.senior-body-rows { display: grid; }
.senior-body-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--bf-line); font-variant-numeric: tabular-nums; }
.senior-body-row:last-child { border-bottom: 0; }
.main-content .senior-body-card .senior-body-name { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--bf-ink); }
.senior-body-row .comp-dot { width: 14px; height: 14px; }
.main-content .senior-body-card .senior-body-row strong { font-size: 22px; white-space: nowrap; color: var(--bf-ink); }
.main-content .senior-body-card .senior-body-row strong small { margin-left: 6px; font-size: 18px; font-weight: 400; color: var(--bf-muted); }
.main-content .senior-body-card .senior-body-note { margin: 0; font-size: 18px; line-height: 1.35; color: var(--bf-muted); }
/* ── Coachens klientfil og Enkel-kort (Gergø 29/9: v743, 3/3) ──
   Skive | Delene | Også målt vandret (220 px | 1fr | 1fr), stablet under 680 px
   kortbredde (tablet med sidebjælke, telefon). Hver spalte er sin egen comp-
   container, så rækkerne stables i en smal spalte som på klientens kort. Tabellen
   Sidste scanninger ruller i sin egen boks, aldrig siden; første spalte står fast. */
.coach-section-box > .comp-card-coach { margin: 14px 18px 4px; }
.main-content .comp-card-coach .comp-chip { white-space: normal; }
.comp-coach-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.comp-coach-col { display: grid; gap: 8px; min-width: 0; container: comp / inline-size; }
.comp-coach-disc { justify-items: center; }
.main-content .comp-coach-disc .comp-note { justify-self: stretch; }
@container comp (max-width: 680px) {
  .comp-coach-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.comp-coach-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.comp-coach-empty .comp-disc { margin: 0; }
.comp-coach-empty .comp-note { flex: 1 1 220px; }
/* Skeptikerens fund 5 (29/9): med 1,5 px streger hver 4. px stod der én eller to
   skrå streger i den runde prik, og den læstes som et forbudt-tegn. Tættere
   skravering (1 px hver 2,5 px) læses som anslået. */
.comp-dot-hatch { border: 1.5px solid var(--bf-muted); background: repeating-linear-gradient(45deg, var(--bf-muted) 0 1px, transparent 1px 2.5px); }
.main-content .comp-card-coach .comp-coach-ffm .comp-tag { display: inline-block; margin-left: 6px; }
/* Rullet starter i højre side (direction: rtl på boksen), så den nyeste dag ses først på en telefon; tabellen selv står fra venstre mod højre. */
.comp-scan-wrap { overflow-x: auto; max-width: 100%; direction: rtl; }
.comp-scan-wrap > .comp-scan { direction: ltr; }
.comp-scan { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.main-content .comp-card .comp-scan th, .main-content .comp-card .comp-scan td { padding: 7px 10px; border-bottom: 1px solid var(--bf-line); text-align: right; vertical-align: top; white-space: nowrap; color: var(--bf-ink); }
.main-content .comp-card .comp-scan thead th { background: transparent; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-muted); }
.main-content .comp-card .comp-scan :is(thead th:first-child, tbody th) { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--bf-surface); }
.main-content .comp-card .comp-scan tbody th { min-width: 96px; font-weight: 700; white-space: normal; }
.main-content .comp-card .comp-scan tr:last-child :is(th, td) { border-bottom: 0; }
.main-content .comp-card .comp-scan b { font-weight: 700; color: var(--bf-ink); }
.main-content .comp-card .comp-scan small { display: block; font-size: 11.5px; font-weight: 400; color: var(--bf-muted); }
/* Skeptikerens fund 2 (29/9): på en telefon stak kolonnen, der var rullet halvt ind
   under den faste spalte, frem med halve cifre (21,1 læst som 1,1). Nu er den faste
   spalte 116 px, og hver dag-kolonne er præcis (kortets bredde minus 116 px) delt
   med så mange hele kolonner, der er plads til (1 til 6), så der aldrig står en
   halv kolonne, heller ikke ved start i den nyeste dag; rullet snapper til hele
   kolonner. Tal og enhed hænger sammen (hårdt mellemrum); ordene må brydes. */
.comp-scan-wrap { scroll-snap-type: x mandatory; scroll-padding-left: 116px; --comp-scan-cols: 6; }
.comp-scan-wrap > .comp-scan { width: max-content; min-width: 100%; }
.main-content .comp-card .comp-scan :is(thead th:first-child, tbody th) { box-sizing: border-box; width: 116px; min-width: 116px; max-width: 116px; white-space: normal; }
.main-content .comp-card .comp-scan :is(thead th:not(:first-child), td) { box-sizing: border-box; width: calc((100cqi - 116px) / var(--comp-scan-cols)); min-width: calc((100cqi - 116px) / var(--comp-scan-cols)); white-space: normal; }
.comp-scan thead th:not(:first-child) { scroll-snap-align: end; }
@container comp (max-width: 779px) { .comp-scan-wrap { --comp-scan-cols: 5; } }
@container comp (max-width: 659px) { .comp-scan-wrap { --comp-scan-cols: 4; } }
@container comp (max-width: 539px) { .comp-scan-wrap { --comp-scan-cols: 3; } }
@container comp (max-width: 419px) { .comp-scan-wrap { --comp-scan-cols: 2; } }
@container comp (max-width: 279px) { .comp-scan-wrap { --comp-scan-cols: 1; } }
/* Muskelmasse-flisen: den anden enhed, beregnet. */
.main-content .coach-stat-tile > small.comp-tile-calc { opacity: 1; font-weight: 700; color: var(--bf-accent-text, var(--bf-accent)); }
/* Coachens Enkel-kort: linjen med den lille skive øverst i Målinger. */
.bf-coach-simple .csimple-comp { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 6px 0 10px; border-bottom: 1px solid var(--bf-line); color: inherit; text-decoration: none; }
.bf-coach-simple .csimple-comp .comp-disc { margin: 0; }
.bf-coach-simple .csimple-comp-text { display: grid; gap: 2px; min-width: 0; }
.bf-coach-simple .csimple-comp-text small { color: var(--bf-muted); }
/* Skeptikerens fund 1 (29/9): ved 360 px løb "Kropssammensætning" (ét ord) ind under
   pilen; titlen får samme regel som listens rækker (.csimple-item-text strong). */
.bf-coach-simple .csimple-comp-text strong { font-size: 1rem; overflow-wrap: anywhere; }
/* Coachens Enkel-kort: målinger (Slet) og vaner (Afslut, Genåbn). */
.bf-coach-simple .csimple-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bf-line, rgba(127, 127, 127, 0.25)); }
.bf-coach-simple .csimple-list .csimple-item:last-of-type { border-bottom: 0; }
.bf-coach-simple .csimple-item-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bf-coach-simple .csimple-item-text strong { font-size: 1rem; overflow-wrap: anywhere; }
.bf-coach-simple .csimple-item-text small { font-size: 0.85rem; opacity: 0.75; }
.bf-coach-simple .csimple-item .senior-pill { flex: 0 0 auto; min-height: 44px; }
.bf-coach-simple .senior-pill.csimple-danger { background: #F9DEDA; color: #7A2418 !important; border-color: transparent; }
.bf-coach-simple .csimple-item.is-ended .csimple-item-text { opacity: 0.7; }
.bf-coach-simple .csimple-list .senior-row.link strong { font-size: 1rem; }
/* Bekræftelsen (ui-prompt og vanens boks) ligger uden for .main-content og fik
   den gamle mørke knapstil på det hvide kort: målt 23/9 i coachens Enkel og
   Avanceret, lyst tema, "Slet måling" 1,98:1 og "Annullér" 1,13:1. Nu mørk
   tekst på kortet og en fyldt rød sletteknap (hvid på #B42318 = 6,5:1); i mørkt
   tema følger teksten kortets --bf-ink (lys). */
.habit-prompt-card .habit-prompt-actions .button-ghost { color: var(--bf-ink, #1C1A17) !important; border: 1.5px solid var(--bf-line, #D8D2C4); background: transparent; }
.habit-prompt-card .habit-prompt-actions .button-danger { background: #B42318; border: 1.5px solid #B42318; color: #fff !important; }
.habit-prompt-card .habit-prompt-actions .button-danger:hover { background: #912018; border-color: #912018; }
/* KG ELLER % OG COACHENS ENKEL SLUT */

/* KOSTMÅL AUTOMATISK START
   Gergø 27/9: kostmål automatisk. Den lille linje under målet: hvad det
   automatiske mål er regnet ud fra, eller hvad der mangler, før det kan regnes.
   Farven er temaets dæmpede blæk (--bf-muted) i lyst, mørkt og Labrador. */
.phone-nutrition-basis { margin: -4px 0 0; color: var(--bf-muted, #6b6453); font-size: 0.86rem; line-height: 1.4; }
.kost-screen > .kost-target-line { margin: -2px 6px 0; font-size: 0.86rem; line-height: 1.45; }
.senior-card .senior-target-basis { display: block; margin-top: 10px; }
.mp-target-source { margin: 8px 0 0; font-size: 0.76rem; line-height: 1.45; color: var(--bf-muted, #6b6453); }
.mp-calc-missing { margin: 0 0 10px; font-size: 0.84rem; line-height: 1.45; }
/* Uden vægt, højde, alder og køn er Gem som mål slået fra, og det skal kunne ses. */
.mp-calc .mp-calc-save:disabled { opacity: 0.45; cursor: not-allowed; }
/* KOSTMÅL AUTOMATISK SLUT */

/* KOSTMÅL SKEPTIKER START
   Skeptikerens fund 27/9 på kostmål automatisk. Retningen for det automatiske mål
   og vejen tilbage til det i madplan-editoren, ringen uden mål, linjen under
   vandkortet på Enkel-forsiden, og (S9) et mørkt spor under makrobarerne på I dag,
   så man i mørkt tema kan se hvor langt de er fyldt (før #eee under lyst blæk). */
.mp-target-goal { margin-top: 6px; }
.mp-target-auto { margin-top: 6px; }
.mp-ring-nogoal .mp-ring-pct { font-size: 0.72rem; }
.senior-water-basis { margin: -6px 4px 0; }
.bf-dark .phone-macro div { background: rgba(255, 255, 255, 0.16); }
/* KOSTMÅL SKEPTIKER SLUT */

/* REAKTIONER ENKEL START (Gergø 28/9, v738 etape 2: klientens og coachens Enkel).
   Under den andens nyeste boble står Reager (52 px, ét ord, i senior-big.quiet's
   stil: hvid flade, 2 px --bf-muted-kant, 20 px Archivo 800). Rækken fylder
   trådens bredde: fire emojis på op til 52 px (coachens Enkel 46 px), Flere og
   Luk deler resten i 17 px (min-width: max-content, så ordet aldrig klippes; på
   en smal telefon krymper emojierne i stedet, dog aldrig under 40 px). Alle
   seks celler er 52 px høje. Linjen efter valget er 52 px med Fjern. Den andens
   reaktion på min egen boble er en stille linje i 18 px, på coachens orange
   række en pille i --bf-surface. Blæk og flader med !important, fordi husets
   knapregel (0,7,1) og Enkels hvide tekst på egen boble ellers vinder (sand
   dark-pill). Wrapperen bevarer boblens bredde (88 %, grid stretch), og antallet
   af børn i .senior-thread er det samme som før (scrollChatToLatest). */
.senior-bubble-wrapper { display: grid; gap: 8px; min-width: 0; }
.senior-bubble-wrapper[data-action] > .senior-bubble { cursor: pointer; }
.bf-coach-simple .coach-chat-bubble[data-action] > :is(p, .chat-sticker-body) { cursor: pointer; }
.senior-bubble-wrapper > :is(.sr-btn, .sr-line, .sr-theirs) { width: 88%; }
.senior-bubble-wrapper.is-me > .sr-theirs { justify-self: end; }
.bf-coach-simple .coach-chat-bubble > :is(.sr-btn, .sr-line, .sr-row, .sr-theirs) { grid-column: 1 / -1; margin-bottom: 6px; }
.bf-coach-simple .coach-chat-bubble > .sr-btn { width: min(460px, 86%); justify-self: start; }
.bf-coach-simple .coach-chat-bubble > .sr-line { width: 100%; }
.senior-bubble-wrapper[tabindex]:focus, .bf-coach-simple .coach-chat-bubble[tabindex]:focus { outline: none; }
.senior-bubble-wrapper[tabindex]:focus-visible > .senior-bubble, .bf-coach-simple .coach-chat-bubble[tabindex]:focus-visible > p { outline: 3px solid var(--bf-accent-text, var(--bf-accent)); outline-offset: 2px; }
.app-shell.bf-sand .main-content .bf-senior button.sr-btn[data-action][type] {
  display: block;
  min-height: 52px;
  margin: 0;
  padding: 8px 18px;
  border-radius: 16px;
  border: 2px solid var(--bf-muted);
  background: var(--bf-surface);
  box-shadow: none;
  color: var(--bf-ink) !important;
  font: 800 20px/1.1 "Archivo", sans-serif;
  text-align: center;
  cursor: pointer;
}
.app-shell.bf-sand .main-content .bf-senior .sr-row { display: flex; gap: 3px; width: 100%; min-width: 0; }
.app-shell.bf-sand .main-content .bf-senior .sr-row button[data-action][type] {
  display: grid;
  place-items: center;
  height: 52px;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  border: 2px solid var(--bf-line);
  background: var(--bf-surface);
  box-shadow: none;
  color: var(--bf-ink) !important;
  cursor: pointer;
}
.app-shell.bf-sand .main-content .bf-senior .sr-row button.sr-e[data-action][type] { flex: 1 1 44px; min-width: 40px; max-width: 52px; font: 30px/1 "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.app-shell.bf-sand .main-content .bf-senior.bf-coach-simple .sr-row button.sr-e[data-action][type] { max-width: 46px; }
/* Skeptikeren 28/9 (fund 3): ved 360 px krympede Luk til ordets bredde (39,7 px),
   før emojierne nåede deres 40 px. Sporet minmax(36px, max-content) gør ordets
   mindste bredde til det største af ordet og 36 px, så knappen med 2 px
   polstring og 2 px kant aldrig er under 44 px; emojierne krymper i stedet. */
.app-shell.bf-sand .main-content .bf-senior .sr-row button.sr-word[data-action][type] { flex: 1 1 0; min-width: max-content; grid-template-columns: minmax(36px, max-content); justify-content: center; padding: 0 2px; border-color: var(--bf-muted); font: 800 17px/1 "Archivo", sans-serif; white-space: nowrap; }
.app-shell.bf-sand .main-content .bf-senior .sr-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--bf-ink) !important; }
.app-shell.bf-sand .main-content .bf-senior .sr-line-text { min-width: 0; color: var(--bf-ink) !important; }
.app-shell.bf-sand .main-content .bf-senior :is(.sr-line, .sr-theirs) .rx-e { font: 28px/1 "Apple Color Emoji", "Noto Color Emoji", sans-serif; vertical-align: middle; }
.app-shell.bf-sand .main-content .bf-senior button.sr-fjern[data-action][type] {
  flex: none;
  min-height: 52px;
  margin: 0;
  padding: 0 18px;
  border-radius: 16px;
  border: 2px solid var(--bf-muted);
  background: var(--bf-surface);
  box-shadow: none;
  color: var(--bf-ink) !important;
  font: 800 18px/1 "Archivo", sans-serif;
  cursor: pointer;
}
.app-shell.bf-sand .main-content .bf-senior .sr-theirs { margin: -2px 0 0; text-align: right; font-size: 18px; line-height: 1.3; color: var(--bf-muted) !important; }
.app-shell.bf-sand .main-content .bf-senior .coach-chat-bubble.mine > .sr-theirs { justify-self: end; width: auto; max-width: min(460px, 86%); margin: 0 0 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bf-line); background: var(--bf-surface); color: var(--bf-ink) !important; }
.app-shell.bf-sand .main-content .bf-senior :is(button.sr-btn, .sr-row button, button.sr-fjern)[data-action][type]:active { background: var(--bf-surface2); }
.app-shell.bf-sand .main-content .bf-senior :is(button.sr-btn, .sr-row button, button.sr-fjern)[data-action][type]:focus-visible { outline: 3px solid var(--bf-accent-text, var(--bf-accent)); outline-offset: 2px; }
/* REAKTIONER ENKEL SLUT */

/* REAKTIONER AVANCERET START (Gergø 28/9, v738 etape 3: klientens Avanceret,
   Labrador og 2027, coachens telefon og computer).
   Spøgelset: 44 px uden kant i den fri stribe ved boblens bundhjørne (målt
   47,6 px ved 390 px, Labrador 54,7), --bf-muted uden opacity. Badgen: en pille
   på 26 px (Labrador 24) i --bf-surface med 1 px --bf-line og let skygge, på
   boblens indre bundhjørne; den dækker højst bundpolstringen (12 px) og hænger
   14 px ud, så boblen får 14 px ekstra luft. Trykfladen er 44 px via ::before
   (opad og til siderne, aldrig ned i linjen under). Hunde og gifs: badgen på
   billedets indre bundhjørne, spøgelset ved det ydre. Kvikrækken står i flow
   under boblen: 7 x 44 px + 2 px mellem, 4 px polstring og 1 px kant = 330 px;
   på en smal telefon krymper cellerne (aldrig under 38 px), så tråden ikke
   bliver bredere end skærmen.
   Blæk med !important på --bf-surface, fordi egen boble (#fff !important),
   Labradors small og husets knapregel (0,7,1) ellers vinder (sand dark-pill).
   Labradors egen plads til badgen (på tidslinjen) står i temaets blok.
   Holdet: touch-action: pan-y (og pinch-zoom, så siden stadig kan zoomes) på
   boblen, og user-select/touch-callout: none kun under pointer: coarse. Coachens
   chat får aldrig hold. Computeren (hover og fin pointer): spøgelset viser sig
   ved hover og fokus på coachens bobler, som skraldespanden. */
.thread-message[data-message-id] > p,
.coach-chat-bubble[data-message-id] > p,
.rx-media { position: relative; }
.rx-media { display: block; width: fit-content; max-width: 100%; }
/* Gif'ens max-width: min(220px, 100%) er en procent af .rx-media, hvis bredde
   selv kommer af billedet, så kassen blev gif'ens fulde bredde (240), og badgen
   stod 12 px uden for billedet. 220 px uden procent giver kassen billedets bredde. */
.rx-media .chat-sticker.chat-gif { max-width: 220px; }
.thread-message.has-react,
.coach-chat-bubble.has-react { margin-bottom: 14px; }
.thread-message.has-react > p + :is(.rx-who, .rx-row),
.coach-chat-bubble.has-react > p + :is(.rx-who, .rx-row),
.coach-chat-bubble.has-react > p + .coach-chat-del + :is(.rx-who, .rx-row) { margin-top: 10px; }
.coach-chat-bubble > :is(.rx-who, .rx-row) { grid-column: 1 / -1; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) :is(.rx-badge, .rx-row .rx-e, .rx-who .rx-e) { font-family: "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) button.rx-ghost[data-action][type] {
  position: absolute;
  bottom: -4px;
  right: -46px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--bf-muted) !important;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-media > button.rx-ghost[data-action][type] { bottom: -2px; }
/* Skeptikeren 28/9 (fund 5): knappens runde hjørner fulgte med i trykket, så et
   tryk i hjørnet af de 44 x 44 px ramte boblen. Trykfladen er et kvadrat uden
   radius (::before), og cirklen er stadig tegningen og fokusringen. */
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) button.rx-ghost[data-action][type]::before { content: ""; position: absolute; inset: 0; border-radius: 0; }
.rx-ghost svg { display: block; width: 24px; height: 24px; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-badge {
  position: absolute;
  bottom: -14px;
  right: 10px;
  left: auto;
  top: auto;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  height: 26px;
  min-width: 26px;
  min-height: 0;
  margin: 0;
  padding: 0 5px;
  border: 1px solid var(--bf-line);
  border-radius: 999px;
  background: var(--bf-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  color: var(--bf-ink) !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.app-shell .main-content :is(.thread-message.mine, .coach-chat-bubble.mine) .rx-badge { right: auto; left: 10px; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-media > .rx-badge { bottom: 6px; right: 8px; }
.app-shell .main-content :is(.thread-message.mine, .coach-chat-bubble.mine) .rx-media > .rx-badge { right: auto; left: 8px; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) button.rx-badge { cursor: pointer; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) button.rx-badge::before { content: ""; position: absolute; inset: -20px -9px 0; border-radius: 999px; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row {
  display: flex;
  gap: 2px;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--bf-line);
  border-radius: 999px;
  background: var(--bf-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  color: var(--bf-ink) !important;
}
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row button[data-action][type] {
  display: grid;
  place-items: center;
  flex: 0 1 44px;
  width: 44px;
  min-width: 38px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--bf-ink) !important;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row button.rx-plus[data-action][type],
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row button.rx-e[aria-pressed="true"][type] { background: var(--bf-surface3); }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row button.rx-e[aria-pressed="true"][type] { box-shadow: inset 0 0 0 2px var(--bf-accent-text, var(--bf-accent)); }
.rx-row .rx-plus svg { display: block; width: 22px; height: 22px; }
/* v738 tillaeg (29/9): Kopiér sidst i kvikrækken, en flade som plus. */
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row button.rx-copy[data-action][type] { background: var(--bf-surface3); }
.rx-row .rx-copy svg { display: block; width: 22px; height: 22px; }
/* Med Kopiér har rækken otte celler: på en smal telefon må de gå ned under
   38 px i bredden (stadig 44 px høje), så Kopiér ikke stikker ud af pillen:
   målt 39,5 px ved 390, 36 ved 360 og 31 ved 320. */
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-row:has(> .rx-copy) button[data-action][type] { min-width: 30px; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-who {
  max-width: 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--bf-muted) !important;
}
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) .rx-who .rx-e { font-size: 15px; }
.app-shell .main-content .thread-message.mine > .rx-who { text-align: right; }
/* Hvem-linjen på coachens egen orange række er en pille i fladen med blæk:
   dæmpet tekst direkte på orange målte 1,6:1. */
.app-shell .main-content .coach-chat-bubble.mine > .rx-who { justify-self: end; width: auto; margin-right: 8px; margin-bottom: 8px; padding: 3px 10px; border: 1px solid var(--bf-line); border-radius: 999px; background: var(--bf-surface); color: var(--bf-ink) !important; }
.app-shell .main-content .coach-chat-bubble:not(.mine) > :is(.rx-who, .rx-row) { margin-bottom: 6px; }
.app-shell .main-content :is(.thread-message, .coach-chat-bubble) :is(button.rx-ghost, button.rx-badge, .rx-row button)[data-action]:focus-visible { outline: 3px solid var(--bf-accent-text, var(--bf-accent)); outline-offset: 2px; }
/* Holdet: kun klientens Avanceret, Labrador og 2027 (data-rx-hold). */
.thread-message[data-rx-hold] > :is(p, .chat-sticker-body) { touch-action: pan-y pinch-zoom; }
/* Skeptikeren 28/9 (fund 1): markeringen er kun slået fra, mens en finger holder
   (#app.rx-holding, fra pointerdown til fingeren løftes). Ellers kan klienten
   markere og kopiere coachens tekst som før v738. */
@media (pointer: coarse) {
  #app.rx-holding .thread-message[data-rx-hold] > :is(p, .chat-sticker-body) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* Mens fingeren holder, bliver boblen en anelse mørkere (efter 120 ms, så en
   rulning ikke blinker); ingen bevægelse. */
.thread-message.is-holding > :is(p, .chat-sticker-body) { filter: brightness(0.94); transition: filter 150ms ease 120ms; }
/* Computeren: spøgelset på coachens bobler viser sig ved hover og fokus. */
@media (hover: hover) and (pointer: fine) {
  .app-shell .main-content .coach-chat-bubble button.rx-ghost[data-action][type] { opacity: 0; }
  .app-shell .main-content .coach-chat-bubble:hover button.rx-ghost[data-action][type],
  .app-shell .main-content .coach-chat-bubble button.rx-ghost[data-action][type]:focus-visible,
  .app-shell .main-content .coach-chat-bubble button.rx-ghost[aria-expanded="true"][type] { opacity: 1; }
}
/* REAKTIONER AVANCERET SLUT */

/* REAKTIONER ARK START (Gergø 28/9, v738 etape 4: emoji-arket i reaktionstilstand,
   plus i Avanceret og hos coachen, Flere i Enkel).
   Hovedlinjen øverst i arket, som mockuppen: "Reaktion til beskeden" i små
   versaler i --bf-muted, beskedens første 40 tegn på én linje (Enkel: 18 px og
   brudt), og Fjern, når jeg allerede har reageret (44 px, Enkel 52 px med 2 px
   kant i Archivo). Mit valg i gitteret har en ring i accentfarven. Blæk med
   !important på Fjern, fordi husets knapregel og temaernes knapper ellers
   vinder (sand dark-pill). Resten af arket er emoji-arkets egen blok. */
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-reacthead { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px 0; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] p.chat-emoji-reactlbl { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; margin: 0; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-reactlbl b { font: 800 12.5px/1.2 "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-muted) !important; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] .chat-emoji-reactwhat { min-width: 0; font-size: 15px; line-height: 1.3; color: var(--bf-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-reactremove[data-action][type] {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bf-emoji-field-line, var(--bf-line));
  border-radius: 12px;
  background: var(--bf-surface);
  color: var(--bf-ink) !important;
  font: 800 15px/1 "Hanken Grotesk", Inter, system-ui, sans-serif;
}
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-reactremove[data-action][type]:active { background: var(--bf-surface2); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-reactremove[data-action][type]:focus-visible { outline: 3px solid var(--bf-accent); outline-offset: 1px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] button.chat-emoji-pick.is-on[data-action][type] { background: var(--bf-surface2); box-shadow: inset 0 0 0 2px var(--bf-accent); }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role] p.chat-emoji-hint.is-react { margin-top: 0; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-reacthead { padding: 12px 12px 0; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-reactlbl b { font-size: 14px; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel .chat-emoji-reactwhat { font-size: 18px; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.app-shell.bf-sand .main-content .chat-emoji-sheet[role].is-enkel button.chat-emoji-reactremove[data-action][type] { min-height: 52px; padding: 0 18px; border: 2px solid var(--bf-muted); border-radius: 16px; font: 800 18px/1 "Archivo", sans-serif; }
/* REAKTIONER ARK SLUT */

/* I DAG PAA PC START (Gergø 28/9: v738, billede 29.png, Labrador ved 1486 px).
   Husets gitter (repeat(auto-fit, minmax(340px, 1fr)), fra 1480 px 360px) har
   to kolonner ved 1280 og tre ved 1486 og 1920. Kort, der ikke stod på listen
   over fulde rækker (Labradors Ugens træning og hilsen, Nyt i appen,
   Kropsscanningens panel), fik én kolonne, og et ulige antal kort efterlod en
   tom celle ved siden af (målt før: 1 hul pr. bredde i huset, 3 til 4 i
   Labrador og chokolade, også Dagens plan ved siden af makkeren ved tre
   kolonner). Dagens måltider gjorde rækken så høj, at Vaner i dag stod med en
   tom hvid flade på 528 px. Nu er I dag (klassen phone-today) en række-flade,
   der brydes: hvert kort vokser, til rækken er fuld, så et kort alene i en
   række får hele bredden, og der er aldrig en tom celle. Rækkefølgen er den
   samme som på telefonen. Et korts grundbredde er 340 px og 360 px ved
   containerens 1480 px (100% * 360 / 1480), så der står to kort ved 1280 og
   tre ved 1486 og 1920 som før, aldrig fire. Overskriften, beskederne øverst,
   to-do, ugen, holdenes pas, Kropsscanning, panelerne og Dagens måltider (med
   blokke) har altid hele bredden, og måltidets blokke står side om side.
   Labradors hilsen og Ugens træning står i temaets blok (01 I dag). 2027-temaets I dag
   har sin egen spalte (2027-blokken), high five og Enkel er urørte. Fra
   720.02 px som tablettens blokke. */
@media (min-width: 720.02px) {
  .phone-dashboard.phone-today {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
  }
  .phone-dashboard.phone-today > *,
  .phone-dashboard.phone-today > .phone-mini-grid > * {
    flex: 1 1 clamp(340px, calc(100% * 360 / 1480), 360px);
    min-width: 0;
  }
  .phone-dashboard.phone-today > :is(.phone-app-header, .phone-priority-alert, .whats-new-card, .phone-startup-card, .startup-wizard-prompt, .resume-card, .phone-hero-card, .phone-todo-card, .phone-week-card, .phone-daily-tracks-card, .phone-quick-dock, .phone-input-panel, .phone-quick-panel),
  .phone-dashboard.phone-today > .phone-today-meals:has(.phone-meal-block) {
    flex-basis: 100%;
  }
  /* Måltidets blokke brydes på samme måde, så en blok alene i sin række får
     kortets bredde (et gitter efterlod tomme celler ved 1280: tre og én). */
  .phone-dashboard.phone-today > .phone-today-meals > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .phone-dashboard.phone-today > .phone-today-meals > ul > li {
    flex: 1 1 260px;
    min-width: 0;
  }
  /* Titlen bryder som på telefonen og tabletten i stedet for at blive klippet. */
  .phone-dashboard.phone-today > .phone-today-meals .phone-meal-row-info strong {
    white-space: normal;
    line-height: 1.25;
  }
  /* Står et kort i en højere række, samles indholdet foroven i stedet for at
     blive trukket ud over hele kortet (Billeddagbogens upload-felt). */
  .phone-dashboard.phone-today > :is(.phone-photo-journal-card, .phone-habits-card) {
    align-content: start;
  }
}
/* I DAG PAA PC SLUT */

/* ENKEL SKRIVER START (Gergø 29/9: v740, små rettelser 2/2; v739-skeptikernes
   fund 2). Kapslen bliver stående, mens tastaturet er fremme (Gergø 28/9), men
   Enkels skrivefelt var 295 px højt: med tastaturet oppe var der 62 px tråd
   tilbage hos en Enkel-klient ved 360 px og 2 px ved 320 (coachens Enkel: feltet 186 px,
   126 og 39 px tråd). Mens tekstfeltet i Enkels chat har fokus (klientens og
   coachens Enkel), er skrivefeltet kompakt som med emoji-arket åbent: kun
   tekstfeltet og Send. Vedhæft, Emojis og Indtal kommer tilbage, når feltet
   mister fokus. Det er det samme felt, så intet skrevet forsvinder, og en valgt
   fil (chippen) står der stadig, under feltet og Send (som hos coachen, hvor
   chippen har order 2). Kun til og med 700 px, hvor skrivefeltet står
   fast over kapslen. main.js (ENKEL SKRIVER) måler feltet igen, lægger nyeste
   besked over det og holder fokus i feltet, mens Send trykkes. */
@media (max-width: 700px) {
  .app-shell.bf-sand .main-content .bf-senior .senior-compose:has(textarea[name="body"]:focus) { grid-template-columns: minmax(0, 1fr) auto; }
  .app-shell.bf-sand .main-content .bf-senior .senior-compose:has(textarea[name="body"]:focus) textarea { grid-column: auto; min-height: 56px; }
  .app-shell.bf-sand .main-content .bf-senior .senior-compose:has(textarea[name="body"]:focus) :is(.chat-attach, button.chat-emoji-toggle[data-action][aria-expanded], .senior-voice) { display: none; }
  .app-shell.bf-sand .main-content .bf-senior .senior-compose:has(textarea[name="body"]:focus) .senior-big { padding: 0 20px; }
  .app-shell.bf-sand .main-content .bf-senior .senior-compose:has(textarea[name="body"]:focus) .chat-attach-chip { order: 2; }
  .app-shell.bf-sand .main-content .bf-coach-simple .coach-message-composer:has(input[name="body"]:focus) { grid-template-columns: minmax(0, 1fr) auto; }
  .app-shell.bf-sand .main-content .bf-coach-simple .coach-message-composer:has(input[name="body"]:focus) > :is(input[name="body"], button[type="submit"]) { grid-column: auto; }
  .app-shell.bf-sand .main-content .bf-coach-simple .coach-message-composer:has(input[name="body"]:focus) :is(.chat-attach, button.chat-emoji-toggle[data-action][aria-expanded]) { display: none; }
}
/* ENKEL SKRIVER SLUT */

/* TRAENINGSPAS FLISER START (Skeptikerne 29/9, v740 fund 4). Ved 320 px er
   Træningspas' fliser 142 px brede, og "Calisthenics / Bodyweight" med ikonet
   kunne ikke være der: titlen, tallet og "0 denne uge" stod 11,2 px uden for
   flisens højre kant (ved 340 px 1,2 px). Fliserne er nye for klienter siden
   v738. Under 360 px står de i én kolonne; fra 360 px er der plads (målt 320 til
   414 px, lyst og mørkt, Maja og Viktor). Ordet brydes ikke midt i. */
@media (max-width: 359.98px) {
  .workout-type-grid { grid-template-columns: minmax(0, 1fr); }
}
/* TRAENINGSPAS FLISER SLUT */

/* AFTALE-SVAR 2/2 (v746) START
   Gergø 30/9: v746. Enkels Mere: en lille prik, når der er nye dokumenter fra
   biblioteket (renderSeniorBar, dokumentbibliotekets spec-regel 10). Prikken står
   ved ikonets øverste hjørne, over pillen, med en ring i kapslens farve, så den ses
   på glasset og på pillen. Uden nye dokumenter er der ingen prik. */
.senior-bar .senior-more { position: relative; }
.senior-bar .senior-more .cdoc-dot { position: absolute; z-index: 2; top: 3px; left: calc(50% + 9px); width: 10px; height: 10px; border-radius: 50%; background: var(--bf-accent, #C75D34); box-shadow: 0 0 0 2px var(--boble-flade, var(--bf-surface, #fff)); pointer-events: none; }
/* Kropsscanning i mørkt tema: etiketterne stod i #555 på panelets mørke flade
   (2,30:1, også i Labrador og Chokolade). Nu temaets dæmpede tekst (--bf-muted),
   og feltet Tag billede eller vælg fil får temaets kantfarve. */
.bf-sand.bf-dark .phone-bodyscan-panel :is(.bodyscan-form label, .bodyscan-sheet-pick) { color: var(--bf-muted); }
.bf-sand.bf-dark .phone-bodyscan-panel .bodyscan-sheet-pick { border-color: var(--bf-line); }
/* Kost-sidens Fra {coach} (Avanceret, 2027 og Labrador): samme rækker som
   Dokumenter (kortet bærer .cdoc-page for rækkernes regler). Kortet har ingen egen
   polstring, så rækken er lige så bred som på Dokumenter, og typen står ved titlen. */
.kost-card.kost-docs { padding: 0; overflow: hidden; }
/* AFTALE-SVAR 2/2 (v746) SLUT */

/* EDITORVAGT KLIENT (v748) START (Gergø 30/9: editorvagten, svar 3).
   Punkt 2: noterne står med deres afsnit på passets side, i afspilleren, i Enkel
   og på løbeuret. Punkt 1: rækkens note på Enkels løbeur, i kortet over Start og
   under knapperne, mens hun går. */
.structured-notes,
.senior-exercise-note,
.run-ready-note,
.note-card p,
.run-senior-note { white-space: pre-line; }
.run-senior-note { margin: 0; font-size: 18px; line-height: 1.45; }
.run-senior-screen .run-senior-note { padding: 4px 4px 0; opacity: 0.92; }
.bf-sand .main-content .run-senior-ready .run-senior-note { color: var(--bf-ink, #1C1A17); }
/* EDITORVAGT KLIENT (v748) SLUT */

/* MADS-2027-TEMA START
   Gergø 23/9: 2027-temaet. "Road to 2027", kun for klienten med temaet
   "mads-2027". Klassen bf-tema-mads-2027 sidder på .app-shell og
   sættes kun i renderApp. Hver selektor herinde begynder med
   .app-shell(.…).bf-tema-mads-2027 eller body:has(.app-shell.bf-tema-mads-2027),
   så ingen andre kan ramme den (tests/mads-2027-tema.test.js). Farverne er målt
   med WCAG 2.1-formlen (kontrastfilen i _design_handoff/, 22/9):
   Gergøs rene orange falder som tekst, ikon og knapfyld på lys flade, så den står
   KUN som --mads-flame og bruges kun på den mørke plade over fotoet. På lys flade
   er grafikken --bf-accent, teksten --bf-accent-text og knapfyldet
   --bf-accent-btn. --mads-rule er stregerne der betyder noget (ugestregen, de
   åbne ringe, tidslinjen); --bf-line er kun pynt. Mindste skrift er 10,5 px. */

/* Tokens. 0,3,0 og 0,4,0 vinder over brandstilen og husets .bf-sand og
   .bf-sand.bf-dark, som Labrador gør det. Samme navne i begge temaer. */
.app-shell.bf-sand.bf-tema-mads-2027 {
  --bf-sand: #EBE7DB; --bg: #EBE7DB;
  --bf-surface: #FFFFFF; --surface: #FFFFFF; --surface-strong: #FFFFFF;
  --bf-surface2: #F6F3EA; --surface2: #F6F3EA;
  --bf-ink: #1A1815; --ink: #1A1815;
  --bf-muted: #635E51; --muted: #635E51;
  --bf-line: #DDD8C9; --line: #DDD8C9;
  --bf-accent: #CC5100; --accent: #CC5100;
  --bf-accent-btn: #B94708; --bf-accent-btn-h: #933705;
  --bf-accent-text: #A8420A;
  --mads-rule: #878172;
  --mads-track: #F6F3EA;
  --mads-ok: #0E8846;
  --mads-ok-ink: #FFFFFF;
  --mads-plate: #14110D;
  --mads-flame: #FF6500;
  --mads-shadow: 0 8px 22px rgba(46, 30, 14, 0.08);
}
.app-shell.bf-sand.bf-dark.bf-tema-mads-2027 {
  --bf-sand: #15120E; --bg: #15120E;
  --bf-surface: #1F1B16; --surface: #1F1B16; --surface-strong: #1F1B16;
  --bf-surface2: #29231C; --surface2: #29231C;
  --bf-ink: #F3EEE3; --ink: #F3EEE3;
  --bf-muted: #A9A093; --muted: #A9A093;
  --bf-line: #39322A; --line: #39322A;
  --bf-accent: #FF8A3D; --accent: #FF8A3D;
  --bf-accent-btn: #B94708; --bf-accent-btn-h: #933705;
  --bf-accent-text: #FF9455;
  --mads-rule: #766E60;
  --mads-track: #29231C;
  --mads-ok: #2FBF71;
  --mads-ok-ink: #15120E;
  --mads-plate: #0C0A08;
  --mads-flame: #FF6500;
  --mads-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

/* Siden bag skallen. */
body:has(.app-shell.bf-tema-mads-2027) { background: #EBE7DB; }
body:has(.app-shell.bf-tema-mads-2027.bf-dark) { background: #15120E; }

/* ---------- Skallen ---------- */
.app-shell.bf-tema-mads-2027 .mads-topbar { display: none; }
/* Telefonen og tabletten på højkant (til og med 1023,98 px, samme grænse som
   husets T1-blok, der skjuler .client-topbar fra 720,02 px). Fra 1024 px er
   sidebaren navigationen, og bundmenuen er skjult som for alle andre. */
@media (max-width: 1023.98px) {
  .app-shell.bf-tema-mads-2027 .mads-topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 6px 16px;
    /* Gergø 23/9: 2027-temaet flettet med v731. Lige høj med og uden ☰ (44 px plus
       polstringen 8 og 6 px), så den ikke springer fra 30 til 58 px mellem
       faneruterne, Færdig og drill in, og så der ikke ses rullende indhold i
       34 px mellem den og urets pille, mens et pas kører (skeptikerens S1). */
    min-height: 58px;
    background: var(--bf-sand); color: var(--bf-ink);
  }
  /* Under ejerens bjælke og Test som-banneret: den målte højde (madsSyncOwnerBarOffset). */
  .app-shell.bf-tema-mads-2027 .mads-topbar.is-under-owner-bar { top: var(--mads-owner-bar-h, calc(44px + env(safe-area-inset-top, 0px))); }
  .app-shell.bf-tema-mads-2027 .mads-topbar-brand { display: inline-flex; align-items: center; min-width: 0; }
  .app-shell.bf-tema-mads-2027 .mads-topbar .bf-wm-img { height: 16px; width: auto; }
  .app-shell.bf-tema-mads-2027 .mads-topbar-menu {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0; margin: 0;
    border: 0; border-radius: 12px; background: none; color: var(--bf-ink); cursor: pointer;
  }
  .app-shell.bf-tema-mads-2027 .mads-topbar-menu svg { width: 24px; height: 24px; stroke-width: 5; }

  /* Gergø 23/9: 2027-temaet flettet med v731. Én dør til skuffen, samme regel som
     v730 for Labrador og husets burger: står bundbjælken med Mere, skjules ☰,
     og topbjælken er kun wordmarket. Færdig skjuler bundbjælken (03 Færdig
     nedenfor), så dér bliver ☰ stående som vejen. På drill in tegnes hverken
     topbjælken eller bundbjælken; dér er tilbage-bjælkens knap vejen. */
  .app-shell.bf-tema-mads-2027:has(.bf-tabbar):not(:has(.mads-done)) .mads-topbar-menu { display: none; }

  /* Fem faner: I dag, Træning, Fremgang, Beskeder og Mere (færre, hvis et
     modul er slået fra; Mere står altid). --mads-tabs tæller Mere med. */
  .app-shell.bf-sand.bf-tema-mads-2027 .mads-tabbar {
    grid-template-columns: repeat(var(--mads-tabs, 5), 1fr);
    background: var(--bf-surface); border-top-color: var(--bf-line);
  }
  .app-shell.bf-tema-mads-2027 .mads-tabbar .bf-tab {
    position: relative; color: var(--bf-muted);
    font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-size: 0.7rem; font-weight: 700;
  }
  .app-shell.bf-tema-mads-2027 .mads-tabbar .bf-tab svg { width: 23px; height: 23px; stroke-width: 4; }
  .app-shell.bf-tema-mads-2027 .mads-tabbar .bf-tab.active { color: var(--bf-accent-text); }
  .app-shell.bf-tema-mads-2027 .mads-tabbar .mads-tab-badge {
    position: absolute; top: 2px; left: calc(50% + 6px);
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--bf-accent-btn); color: #fff;
    font: 700 0.7rem/18px "Hanken Grotesk", Inter, system-ui, sans-serif; text-align: center;
  }

  /* Drill-in (passet, afspilleren, løbeuret): husets tilbage-bjælke har allerede
     Mere med toggle-mobile-menu. Temaet tegner ☰ i stedet for de tre prikker, så
     det er det samme tryk på alle hans sider. */
  .app-shell.bf-tema-mads-2027 .bf-appbar-more svg { display: none; }
  .app-shell.bf-tema-mads-2027 .bf-appbar-more::before {
    content: ""; display: block; width: 22px; height: 2.5px; border-radius: 2px;
    background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }

  /* ☰ skal kunne bruges på alle hans sider, også i afspilleren og pausen. Husets
     skuffe har z-index 60 til og med 720 px, under afspillerens ur (9000) og fod
     (4000), så I dag i skuffen ikke kunne trykkes. Samme tal som husets T1-blok
     giver fra 720,02 px: skuffen 9500, baggrunden 9490, under persona-bjælken (9600). */
  .app-shell.bf-tema-mads-2027 .sidebar.mobile-menu-open { z-index: 9500; }
  .app-shell.bf-tema-mads-2027 .mobile-menu-backdrop.visible { z-index: 9490; }
}
/* Enkel visning har sin egen skal; temaets topbjælke står ikke oven på den. */
.app-shell.bf-tema-mads-2027:has(.bf-senior) .mads-topbar { display: none; }
/* Skuffens tegn-ikoner er tekst i var(--accent): orange TEKST har sit eget token. */
.app-shell.bf-tema-mads-2027 .sidebar-icon { color: var(--bf-accent-text); }
/* Husets tal-pille har hvid tekst på var(--bf-accent) med !important: 4,43:1 i
   lyst og 2,35:1 i mørkt tema med temaets orange. Knapfyldet giver 5,29:1. */
.app-shell.bf-tema-mads-2027 :is(.nav-badge, .conversation-item b) { background: var(--bf-accent-btn) !important; }
/* Versionen nederst i skuffen var 9,28 px med halv gennemsigtighed; temaets gulv er 10,5 px.
   Større skrift i husets hjørne ramte "Altid bedre.", så versionen får sin egen linje. */
.app-shell.bf-tema-mads-2027 .beast-mode-version { position: static; display: block; margin-top: 4px; text-align: right; font-size: 10.5px; opacity: 1; color: var(--bf-muted); }
/* Den aktive filterchip (Alle på passets side) er husets blæk på var(--accent):
   4,00:1 lyst og 2,03:1 mørkt med temaets orange. Knapfyldet med hvidt giver 5,29:1. */
.app-shell.bf-tema-mads-2027 .chip:is(.active, :hover) { background: var(--bf-accent-btn); border-color: var(--bf-accent-btn); color: #fff !important; }
/* Undersidefaner: den aktive har !important i huset, så farven skal også have det. */
.app-shell.bf-tema-mads-2027.bf-sand .main-content .client-subtabs :is(a, button).active { color: var(--bf-accent-text) !important; border-bottom-color: var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .mads-topbar-menu:focus-visible,
.app-shell.bf-tema-mads-2027 .main-content :is(.mads-btn, .mads-row, .mads-next):focus-visible { outline: 3px solid var(--bf-accent-text); outline-offset: 2px; }

/* ---------- Siderne ---------- */
.app-shell.bf-tema-mads-2027 .main-content :is(.mads-today, .mads-training, .mads-progress, .mads-done) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; align-content: start;
  color: var(--bf-ink); font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; line-height: 1.45;
}
/* Fra 720,02 px (husets tabletgrænse): én kolonne på højst 640 px midt på
   siden (husets I dag lægger ellers kortene i et gitter). */
@media (min-width: 720.02px) {
  .app-shell.bf-tema-mads-2027 .main-content :is(.mads-today, .mads-training, .mads-progress, .mads-done) { max-width: 640px; margin: 0 auto; }
  /* Fotobåndet: samme udsnit som på telefonen (358 x 162 ved 390 px), så
     cyklistens hoved og bjergtinderne er med. Fast 162 px på 640 px viste kun
     fotoets nederste halvdel. .bf-sand, fordi grundreglen står længere nede. */
  .app-shell.bf-sand.bf-tema-mads-2027 .main-content .mads-band .mads-photo { height: auto; aspect-ratio: 358 / 162; }
  /* Beskeder uden samtalelisten: tråden i samme spalte som de andre sider. */
  .app-shell.bf-tema-mads-2027 .main-content .client-page-shell:has(.chat-thread-card) { max-width: 640px; margin: 0 auto; }
}

.app-shell.bf-tema-mads-2027 .main-content .mads-eyebrow {
  margin: 0; font: 700 0.7rem/1.25 "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bf-muted);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-quiet { margin: 0; color: var(--bf-muted); font-size: 0.87rem; line-height: 1.45; }
.app-shell.bf-tema-mads-2027 .main-content .mads-num { font-variant-numeric: tabular-nums; }

/* Kort */
.app-shell.bf-tema-mads-2027 .main-content .mads-card {
  position: relative; display: block; margin: 0; padding: 15px 16px;
  background: var(--bf-surface); color: var(--bf-ink);
  border: 1px solid var(--bf-line); border-radius: 18px; box-shadow: var(--mads-shadow);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-card h2 {
  margin: 0; font: 800 1.12rem/1.2 "Archivo", sans-serif; letter-spacing: -0.01em; color: var(--bf-ink);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-week-count { font-weight: 700; white-space: nowrap; }
.app-shell.bf-tema-mads-2027 .main-content .mads-card-lead { margin: 5px 0 6px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-strong { margin: 7px 0 0; font: 800 1.2rem/1.2 "Archivo", sans-serif; letter-spacing: -0.01em; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-sep { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--bf-line); }
.app-shell.bf-tema-mads-2027 .main-content .mads-card.is-loading { display: grid; gap: 10px; }

/* 01 Målet: en linje, ikke et billede. Proportional i tid, og målets måned er
   et bånd, fordi dagen ikke er sat. */
.app-shell.bf-tema-mads-2027 .main-content .mads-goal { padding: 4px 2px 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-goal .mads-goal-title {
  margin: 5px 0 0; font: 800 1.42rem/1.12 "Archivo", sans-serif; letter-spacing: -0.02em; color: var(--bf-ink);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-goal .mads-goal-next { margin-top: 5px; }
/* Højst 440 px bred: SVG'en skalerer, så skriften ellers vokser med kortet på tabletten. */
.app-shell.bf-tema-mads-2027 .main-content .mads-rail { display: block; width: 100%; max-width: 440px; height: auto; margin: 8px 0 3px; overflow: visible; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rail :is(.mads-rail-line, .mads-rail-tick) { stroke: var(--mads-rule); stroke-width: 2; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rail .mads-rail-now { fill: var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .main-content .mads-rail .mads-rail-band { fill: none; stroke: var(--bf-accent); stroke-width: 2.5; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rail text {
  font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.08em; fill: var(--bf-muted);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-rail text.mads-rail-strong { fill: var(--bf-accent-text); }

/* Næste pas: lille foto eller ikon, titel og en linje. Hele rækken åbner passets overblik. */
.app-shell.bf-tema-mads-2027 .main-content .mads-next {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 13px; align-items: center;
  margin-top: 10px; color: var(--bf-ink); text-decoration: none; border-radius: 13px;
}
.app-shell.bf-tema-mads-2027 .main-content .mads-sep > .mads-next { margin-top: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-next .mads-next-photo { display: block; width: 56px; height: 56px; border-radius: 13px; object-fit: cover; }
.app-shell.bf-tema-mads-2027 .main-content .mads-next-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 13px; background: var(--bf-surface2); color: var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .main-content .mads-next-ico svg { width: 30px; height: 30px; stroke-width: 4; }
.app-shell.bf-tema-mads-2027 .main-content .mads-next-txt { min-width: 0; display: grid; gap: 2px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-next-txt strong { font: 800 1.14rem/1.18 "Archivo", sans-serif; letter-spacing: -0.01em; color: var(--bf-ink); overflow-wrap: anywhere; }
.app-shell.bf-tema-mads-2027 .main-content .mads-next-txt small { font-size: 0.86rem; color: var(--bf-muted); }

/* Knappen. color med !important: husets blækregel giver ellers blæk på orange. */
.app-shell.bf-tema-mads-2027 .main-content .mads-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; margin-top: 13px; padding: 0 18px;
  border: 0; border-radius: 13px; background: var(--bf-accent-btn); color: #fff !important;
  font: 700 1.02rem/1 "Hanken Grotesk", Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.app-shell.bf-tema-mads-2027 .main-content .mads-btn:hover { background: var(--bf-accent-btn-h); }
.app-shell.bf-tema-mads-2027 .main-content .mads-btn svg { width: 18px; height: 18px; stroke-width: 6; color: #fff; }

/* Ugens rytme: syv dage på en streg. */
.app-shell.bf-tema-mads-2027 .main-content .mads-week { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 11px 0 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-week-rail { position: absolute; left: 7.2%; right: 7.2%; top: 69px; height: 2px; background: var(--mads-rule); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day { position: relative; display: grid; justify-items: center; min-width: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-day-l { font: 700 0.68rem/16px "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day-d { font: 800 1.05rem/20px "Archivo", sans-serif; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 34px; height: 34px; margin-top: 17px; border-radius: 50%;
  background: var(--bf-surface); color: var(--bf-muted);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-day-dot svg { width: 21px; height: 21px; stroke-width: 5; }
.app-shell.bf-tema-mads-2027 .main-content .mads-day.is-done .mads-day-dot { background: var(--mads-ok); color: var(--mads-ok-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day.is-done .mads-day-dot svg { stroke-width: 6; }
.app-shell.bf-tema-mads-2027 .main-content .mads-day.is-next .mads-day-dot { color: var(--bf-accent); box-shadow: inset 0 0 0 2.5px var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day:is(.is-open, .is-skipped) .mads-day-dot { color: var(--bf-muted); box-shadow: inset 0 0 0 2px var(--mads-rule); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day.is-skipped .mads-day-dot svg { opacity: 0.55; }
.app-shell.bf-tema-mads-2027 .main-content .mads-day.is-free .mads-day-dot { width: 10px; height: 10px; margin: 29px 0 12px; background: var(--mads-rule); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day.is-today :is(.mads-day-d, .mads-day-l) { color: var(--bf-accent-text); }
.app-shell.bf-tema-mads-2027 .main-content .mads-day-m { margin-top: 7px; min-height: 15px; font: 700 0.68rem/15px "Hanken Grotesk", Inter, system-ui, sans-serif; color: var(--bf-muted); font-variant-numeric: tabular-nums; text-align: center; }
.app-shell.bf-tema-mads-2027 .main-content .mads-week-note { margin-top: 10px; }

/* Rækker: ugen på Træning og de tre discipliner. */
.app-shell.bf-tema-mads-2027 .main-content .mads-rows { display: grid; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row {
  display: grid; grid-template-columns: 46px 30px minmax(0, 1fr) 26px; align-items: center; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--bf-line); color: var(--bf-ink); text-decoration: none;
}
.app-shell.bf-tema-mads-2027 .main-content .mads-row.mads-row-wide { grid-template-columns: 30px minmax(0, 1fr); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row:first-child { border-top: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-day { display: grid; justify-items: start; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-day b { font: 700 0.7rem/14px "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-day i { font: 800 1.18rem/22px "Archivo", sans-serif; font-style: normal; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row.is-today .mads-row-day :is(b, i) { color: var(--bf-accent-text); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-ico { display: grid; place-items: center; width: 30px; height: 30px; color: var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-ico svg { width: 25px; height: 25px; stroke-width: 4; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-txt { min-width: 0; display: grid; gap: 1px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-txt strong { font: 700 1rem/1.25 "Hanken Grotesk", Inter, system-ui, sans-serif; color: var(--bf-ink); overflow-wrap: anywhere; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row.is-free .mads-row-txt strong { font-weight: 600; color: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row.is-skipped .mads-row-ico { color: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-txt small { font-size: 0.82rem; color: var(--bf-muted); font-variant-numeric: tabular-nums; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-txt small b { color: var(--bf-accent-text); font-weight: 700; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-state { display: grid; place-items: center; width: 26px; height: 26px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-state svg { width: 24px; height: 24px; stroke-width: 4; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-state.is-done { color: var(--mads-ok); }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-state.is-done svg { stroke-width: 5; }
.app-shell.bf-tema-mads-2027 .main-content .mads-row-state.is-open { color: var(--bf-muted); }

/* Tal adskilt af streger. */
.app-shell.bf-tema-mads-2027 .main-content .mads-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-shell.bf-tema-mads-2027 .main-content .mads-figs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-shell.bf-tema-mads-2027 .main-content .mads-fig { padding: 0 9px; border-left: 1px solid var(--bf-line); }
.app-shell.bf-tema-mads-2027 .main-content .mads-fig:first-child { border-left: 0; padding-left: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-fig b { display: block; font: 800 1.55rem/1.05 "Archivo", sans-serif; letter-spacing: -0.02em; color: var(--bf-ink); }
/* Tallet vokser med browserens skrift, men aldrig ud af sit felt: ved 150 % stod
   2.185 ind over nabofeltets streg. Ved 100 % er det 1,55rem som før. */
.app-shell.bf-tema-mads-2027 .main-content .mads-fig b { font-size: clamp(1.1rem, 6.4vw, 1.55rem); overflow-wrap: anywhere; }
.app-shell.bf-tema-mads-2027 .main-content .mads-fig > span { display: block; margin-top: 4px; font-size: 0.76rem; line-height: 1.3; color: var(--bf-muted); }

/* 02 Træning: sidehovedet med temaets titel og linjen under (huset skjuler den på telefonen). */
.app-shell.bf-tema-mads-2027 .main-content .mads-training .client-page-header { gap: 8px; padding: 4px 2px 0; border-bottom: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-training .client-page-header h1 { margin: 0; font: 800 2rem/1.08 "Archivo", sans-serif; letter-spacing: -0.025em; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-training .client-page-header > div > p { display: block; margin: 4px 0 0; color: var(--bf-muted); font-size: 0.97rem; text-wrap: pretty; }
.app-shell.bf-tema-mads-2027 .main-content .mads-coach { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 13px; align-items: center; }
.app-shell.bf-tema-mads-2027 .main-content .mads-coach-img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.app-shell.bf-tema-mads-2027 .main-content .mads-coach-letter { display: grid; place-items: center; background: var(--bf-surface2); color: var(--bf-accent-text); font: 800 1.3rem/1 "Archivo", sans-serif; }
.app-shell.bf-tema-mads-2027 .main-content .mads-coach-txt { display: grid; gap: 2px; min-width: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-coach-txt strong { font: 800 1.08rem/1.2 "Archivo", sans-serif; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-coach-txt small { font-size: 0.85rem; color: var(--bf-muted); }

/* Fotobåndet. Sløret er målt på fotoets egne pixels: hvid overskrift 14,47:1 på
   hero-båndet og 16,93:1 på bjerge-båndet, den orange streg 5,42:1 og 5,98:1.
   Råt er hero-båndet 1,01:1, så sløret bærer det hele. */
.app-shell.bf-tema-mads-2027 .main-content .mads-band { position: relative; display: block; overflow: hidden; border-radius: 18px; background: var(--mads-plate); }
.app-shell.bf-tema-mads-2027 .main-content .mads-band .mads-photo { display: block; width: 100%; height: 162px; object-fit: cover; object-position: center bottom; }
.app-shell.bf-tema-mads-2027 .main-content .mads-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20, 17, 13, 0.30) 0%, rgba(20, 17, 13, 0.52) 44%, rgba(20, 17, 13, 0.87) 52%, rgba(20, 17, 13, 0.94) 100%);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-band .mads-band-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 16px 14px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-band .mads-band-txt p { margin: 0; color: #fff; font: 800 1.14rem/1.22 "Archivo", sans-serif; letter-spacing: -0.01em; }
.app-shell.bf-tema-mads-2027 .main-content .mads-band .mads-band-rule { display: block; width: 44px; height: 3px; margin: 9px 0 0; border-radius: 2px; background: var(--mads-flame); }
/* ---------- Etape T2: Fremgang, pausen, Færdig og Beskeder ---------- */

/* 03 Fremgang: sidehovedet som på Træning; undersidefanerne er husets. */
.app-shell.bf-tema-mads-2027 .main-content .mads-progress .client-page-header { gap: 8px; padding: 4px 2px 0; border-bottom: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-progress .client-page-header h1 { margin: 0; font: 800 2rem/1.08 "Archivo", sans-serif; letter-spacing: -0.025em; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-progress .client-page-header > div > p { display: block; margin: 4px 0 0; color: var(--bf-muted); font-size: 0.97rem; }
.app-shell.bf-tema-mads-2027 .main-content .mads-figs.is-one { grid-template-columns: minmax(0, 1fr); }
.app-shell.bf-tema-mads-2027 .main-content .mads-strength-figs { margin-top: 11px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-fig .bf-skeleton { display: block; }

/* Diagrammerne. Planlagt er et spor med en målbar kant (3,88:1 lyst, 3,40:1
   mørkt), gennemført er fyld. SVG'en er 320 bred, så teksten på 11 px ikke
   skaleres under 10,5 px på en telefon på 390 px; højst 440 px på tabletten. */
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-chart-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 8px 0 2px; overflow: visible; }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-bar-plan { fill: var(--mads-track); stroke: var(--mads-rule); stroke-width: 1.5; }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-bar-done { fill: var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-bar-full { fill: var(--mads-ok); }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-base { stroke: var(--mads-rule); stroke-width: 2; }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-scale { stroke: var(--mads-rule); stroke-width: 1; }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart text { font-family: "Hanken Grotesk", Inter, system-ui, sans-serif; font-size: 0.6875rem; font-weight: 700; fill: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart text.mads-t-ink { fill: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-line { fill: none; stroke: var(--bf-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-pt { fill: var(--bf-accent); }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-pt-skip { fill: var(--bf-surface); stroke: var(--bf-muted); stroke-width: 2; }
.app-shell.bf-tema-mads-2027 .main-content .mads-chart .mads-chart-note { margin-top: 4px; font-size: 0.8rem; }

/* Milepælene som tekst uden flueben: der findes ingen status i basen. */
.app-shell.bf-tema-mads-2027 .main-content .mads-miles { display: grid; }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--bf-line); }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile:first-child { border-top: 0; padding-top: 2px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile > b { padding-top: 3px; font: 700 0.72rem/1.3 "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-accent-text); }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile-txt { display: grid; gap: 2px; min-width: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile-txt strong { font: 700 0.98rem/1.3 "Hanken Grotesk", Inter, system-ui, sans-serif; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile-txt small { font-size: 0.82rem; color: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-mile-txt .mads-nobr { white-space: nowrap; }

/* 04 Pausen. Husets knapper og ur, med temaets farver og kanter. */
/* Afspillerens vandmærke skriver BEASTFACTORY i 9,92 px; temaets gulv er 10,5 px. */
.app-shell.bf-tema-mads-2027 .bf-watermark span { font-size: 10.5px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest { gap: 13px; padding: 10px 4px 20px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .mads-rest-eyebrow { max-width: 100%; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-dial.mads-rest-dial {
  width: min(58vw, 228px);
  background: conic-gradient(var(--bf-accent) calc(var(--rest-pct) * 1%), var(--bf-surface2) 0);
}
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-dial.mads-rest-dial::before { width: 83%; background: var(--bf-surface); }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .mads-rest-in { grid-area: 1 / 1; display: grid; gap: 4px; justify-items: center; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-clock { font: 800 clamp(40px, 12vw, 52px)/1 "Archivo", sans-serif; letter-spacing: -0.03em; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .mads-rest-label { font: 700 0.7rem/1.2 "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-muted); }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-nudge { width: 100%; max-width: 420px; }
.app-shell.bf-tema-mads-2027.bf-sand .main-content .mads-rest .player-rest-nudge .button {
  flex: 1; min-height: 48px; border: 1px solid var(--mads-rule); border-radius: 13px;
  background: var(--bf-surface); color: var(--bf-ink); box-shadow: none;
  font: 700 1rem/1 "Hanken Grotesk", Inter, system-ui, sans-serif;
}
.app-shell.bf-tema-mads-2027.bf-sand .main-content .mads-rest .player-rest-skip {
  width: 100%; max-width: 420px; min-height: 48px; border: 1px solid var(--mads-rule); border-radius: 13px;
  background: var(--bf-surface); color: var(--bf-ink); text-decoration: none;
  font: 700 1rem/1 "Hanken Grotesk", Inter, system-ui, sans-serif;
}
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-undo { color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .mads-rest-next { width: 100%; max-width: 420px; text-align: left; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .mads-rest-next .mads-next-txt strong { font-size: 1.1rem; }
.app-shell.bf-tema-mads-2027 .main-content .mads-rest .mads-rest-note { margin-top: 11px; }
/* Gergø 27/9: bugrunden (B3), se urets tabel ved #bf-workout-timer. Liggende
   telefon: temaets skive (228 px) gik ned under afspillerens fod, og foden
   dækkede bunden af pausens ur (målt 844x390: uret 246..298, foden fra 287).
   Skiven og tallet følger husets liggende regel. */
@media (min-width: 701px) and (max-height: 500px) {
  .app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-dial.mads-rest-dial { width: min(58vw, 228px, calc(100vh - 250px)); }
  .app-shell.bf-tema-mads-2027 .main-content .mads-rest .player-rest-clock { font-size: clamp(28px, 9vh, 52px); }
}

/* 03 Færdig: bundmenuen er væk på skærmen, og flash-beskeden står nederst. */
.app-shell.bf-tema-mads-2027:has(.mads-done) .bf-tabbar { display: none; }
.app-shell.bf-tema-mads-2027:has(.mads-done) .flash { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
/* Den grønne kvittering (.flash bruger --success) måler 2,73:1 i mørkt tema:
   hvid på #7FA579. Her rettes den kun for temaet, som Labrador gør, fordi den
   står under Færdig. #0B7A3E som Labrador: hvid 5,43:1 (temaets #0E8846 målte
   kun 4,47:1 på den tegnede flash). */
.app-shell.bf-dark.bf-tema-mads-2027 .flash-success { background: #0B7A3E; }
.app-shell.bf-tema-mads-2027 .main-content .mads-done { padding-top: 8px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-done-head { text-align: center; }
.app-shell.bf-tema-mads-2027 .main-content .mads-done-head h1 { margin: 0; font: 800 2rem/1.08 "Archivo", sans-serif; letter-spacing: -0.025em; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-done-head p { margin-top: 6px; font-size: 0.97rem; }
.app-shell.bf-tema-mads-2027 .main-content .mads-done-gif { justify-self: center; margin: 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-done-gif .mads-done-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 36vh; border-radius: 18px; box-shadow: var(--mads-shadow); }
.app-shell.bf-tema-mads-2027 .main-content .mads-offline-note strong { display: block; font: 800 1.02rem/1.25 "Archivo", sans-serif; color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027 .main-content .mads-offline-note p { margin-top: 4px; }
.app-shell.bf-tema-mads-2027 .main-content .mads-done > .mads-btn { margin-top: 0; }

/* 05 Beskeder: linjen om hans sidste besked står under titlen i stedet for
   husets undertitel. Tråden, skrivefeltet og badget er husets; temaet giver
   boblerne, feltet og Send-knappen farver. */
.app-shell.bf-tema-mads-2027 .main-content .client-page-shell:has(> .mads-msg-lead) > .client-page-header p { display: none; }
.app-shell.bf-tema-mads-2027 .main-content .client-page-shell:has(> .mads-msg-lead) > .client-page-header h1 { margin: 0; font: 800 2rem/1.08 "Archivo", sans-serif; letter-spacing: -0.025em; color: var(--bf-ink); }
/* Husets Overblik-ring på siden skriver sin etiket i 9,28 px; temaets gulv er 10,5 px. */
.app-shell.bf-tema-mads-2027 .main-content .overview-ring span { font-size: 10.5px; }
/* Beskeder som mockuppen: tråden er skærmen. Husets Overblik-kort viste Kost og
   Vaner (og en ring), selv om han ikke har de moduler; trådens hoved skrev
   kontonavnet med initialer, og samtalelisten på tabletten det samme med andre
   initialer. Ingen af dem står i mockuppen, så de skjules kun her; portrættet
   står ved linjen om, at jeg ikke har svaret. */
.app-shell.bf-tema-mads-2027 .main-content .portal-side-stack > .portal-card:has(.client-overview-card) { display: none; }
.app-shell.bf-tema-mads-2027 .main-content :is(.conversation-list-card, .chat-thread-card > .thread-header) { display: none; }
.app-shell.bf-tema-mads-2027 .main-content .message-portal-grid:has(> .conversation-list-card) { grid-template-columns: minmax(0, 1fr); }
.app-shell.bf-tema-mads-2027 .main-content .mads-msg-lead { margin: -2px 2px 4px; font-size: 0.97rem; }
.app-shell.bf-tema-mads-2027 .main-content .mads-no-reply { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: center; padding: 2px 0 0; }
.app-shell.bf-tema-mads-2027 .main-content .mads-no-reply-img { display: block; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.app-shell.bf-tema-mads-2027 .main-content .mads-no-reply .mads-coach-letter { display: grid; place-items: center; font-size: 0.95rem; }
.app-shell.bf-tema-mads-2027 .main-content .mads-no-reply p { margin: 0; }
/* Boblerne: min er --bf-surface2, coachens --bf-surface med kant. Husets egen
   boble har color #fff !important, så blæk og tid skal også have det. */
.app-shell.bf-tema-mads-2027.bf-sand .main-content .portal-thread .thread-message p { border: 1px solid var(--bf-line); border-radius: 15px 15px 15px 5px; background: var(--bf-surface); color: var(--bf-ink); box-shadow: none; }
.app-shell.bf-tema-mads-2027.bf-sand .main-content .portal-thread .thread-message.mine p { border-radius: 15px 15px 5px 15px; background: var(--bf-surface2); color: var(--bf-ink) !important; }
.app-shell.bf-tema-mads-2027.bf-sand .main-content .portal-thread .thread-message p small { color: var(--bf-muted) !important; }
.app-shell.bf-tema-mads-2027.bf-sand .main-content .portal-message-composer input[name="body"] { border: 1px solid var(--mads-rule); background: var(--bf-surface); color: var(--bf-ink); }
.app-shell.bf-tema-mads-2027.bf-sand .main-content .portal-message-composer button[type="submit"] { background: var(--bf-accent-btn); color: #fff !important; border-color: var(--bf-accent-btn); }
/* MADS-2027-TEMA SLUT */

/* BOBLE-MENU START (Gergø 29/9: v739, boble og betalinger 1/3). Bundmenuen som
   svævende boble efter _design_handoff/boble-menu-mockup-2026-09-28.html og
   boble-menu-spec-2026-09-28.json med Gergøs fire svar 28/9: fanernes tekst i
   blæk, aktiv fane som pille bag ikonet, kapslen bliver stående mens tastaturet
   er fremme, og Enkels menutekst forbliver 14 px.
   Nav'en er gennemsigtig i fuld bredde og bærer luften som sin egen padding;
   kapslen er nav::before. Så måler syncBottomNavHeight kapslens overkant fra
   skærmens bund (78 px i huset, 95 i Enkel, 89 i coachens Enkel, plus
   safe-area), og alt, der står over bundmenuen, lander over kapslen uden en
   JS-ændring. Glasset er 72 % tæt (2027-temaet 80 %) med 20 px sløring; kan telefonen
   ikke sløre, er kapslen tæt. Aldrig gennemsigtighed uden sløring (v571-fejlen,
   som den mørke bjælke havde med 0,93). Ingen HTML er ændret, og blokken står
   sidst, så den slår temaernes bundbjælke. */
.app-shell.bf-sand { --boble-flade: var(--bf-surface); --boble-alpha: 72%; --boble-kant: rgba(28, 26, 23, 0.10); --boble-skygge: 0 8px 24px rgba(28, 26, 23, 0.14); --boble-pille: var(--bf-accent-btn); --boble-glyf: #fff; }
.app-shell.bf-sand.bf-dark { --boble-kant: rgba(255, 255, 255, 0.12); --boble-skygge: 0 10px 28px rgba(0, 0, 0, 0.45); --boble-pille: var(--bf-accent-text); --boble-glyf: var(--bf-dark); }
.app-shell.bf-sand.bf-tema-labrador { --boble-flade: var(--bf-surface2); --boble-skygge: var(--lab-shadow); }
/* 2027-temaet: fotobåndet gør det lyse glas gråt, og pillen målte 2,89 som form ved 72 %. */
.app-shell.bf-sand.bf-tema-mads-2027 { --boble-skygge: var(--mads-shadow); --boble-alpha: 80%; }

/* Husets bjælke, coachens bjælke, Labrador, chokolade og 2027: telefonen og
   tablet på højkant (T1) i samme regler. Kapslen er højst 640 px og centreret. */
@media (max-width: 1023.98px) {
  .app-shell.bf-sand .bf-tabbar,
  .app-shell.bf-sand.bf-dark .bf-tabbar,
  .app-shell.bf-sand.bf-tema-labrador .bf-tabbar,
  .app-shell.bf-sand.bf-dark.bf-tema-labrador .bf-tabbar,
  .app-shell.bf-sand.bf-tema-mads-2027 .bf-tabbar.mads-tabbar {
    left: 0; right: 0; bottom: 0;
    padding: 7px max(16px, calc((100% - 640px) / 2 + 4px)) calc(19px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border-top: 0;
    pointer-events: none;
  }
  /* Luften ved siden af og under kapslen kan trykkes igennem; kapslen og fanerne kan ikke. */
  .app-shell.bf-sand .bf-tabbar > * { pointer-events: auto; }
  .app-shell.bf-sand .bf-tabbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: auto;
    inset: 0 max(12px, calc((100% - 640px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
    border-radius: 28px;
    border: 1px solid var(--boble-kant);
    background: var(--boble-flade);
    background: color-mix(in srgb, var(--boble-flade) var(--boble-alpha, 72%), transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--boble-skygge);
  }
  /* Tekst i blæk, aktiv som inaktiv; pillen bærer den aktive fane. */
  .app-shell.bf-sand .bf-tabbar .bf-tab,
  .app-shell.bf-sand .bf-tabbar .bf-tab.active,
  .app-shell.bf-sand.bf-dark .bf-tabbar .bf-tab,
  .app-shell.bf-sand.bf-dark .bf-tabbar .bf-tab.active,
  .app-shell.bf-sand.bf-tema-labrador .bf-tabbar .bf-tab,
  .app-shell.bf-sand.bf-tema-labrador .bf-tabbar .bf-tab.active,
  .app-shell.bf-sand.bf-dark.bf-tema-labrador .bf-tabbar .bf-tab.active,
  .app-shell.bf-sand.bf-tema-mads-2027 .mads-tabbar .bf-tab,
  .app-shell.bf-sand.bf-tema-mads-2027 .mads-tabbar .bf-tab.active { color: var(--bf-ink); }
  .app-shell.bf-sand .bf-tabbar .bf-tab { position: relative; isolation: isolate; }
  .app-shell.bf-sand .bf-tabbar .bf-tab svg,
  .app-shell.bf-sand .bf-tabbar .bf-tab > span { position: relative; z-index: 1; }
  /* Pillen har en ring på 2 px i kapslens tætte farve: over et mørkt kort (lyst tema) eller
     et hvidt foto (mørkt tema) bliver glasset gråt, og pillen målte 2,95 som form (844 x 390
     over Dagens plan). Med ringen er pillens nabofarve altid den tætte flade (mindst 4,9). */
  .app-shell.bf-sand .bf-tabbar .bf-tab.active::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 3px; width: 52px; height: 28px; border-radius: 999px; background: var(--boble-pille); box-shadow: 0 0 0 2px var(--boble-flade); transform: translateX(-50%); }
  .app-shell.bf-sand .bf-tabbar .bf-tab.active svg,
  .app-shell.bf-sand.bf-tema-labrador .bf-tabbar .bf-tab.active svg,
  .app-shell.bf-sand.bf-dark.bf-tema-labrador .bf-tabbar .bf-tab.active svg { color: var(--boble-glyf); }
  /* 2027-temaets badge ligger inde i pillen på en aktiv Beskeder-fane: den bytter farve
     med pillen og står over den (2027-blokken giver den position: absolute). */
  .app-shell.bf-sand .bf-tabbar .bf-tab .mads-tab-badge { z-index: 2; }
  .app-shell.bf-sand .bf-tabbar .bf-tab.active .mads-tab-badge { background: var(--boble-glyf); color: var(--boble-pille); }
  /* Bundpolstring = kapslen (66) + 12 px luft under + 16 px luft over + safe-area. */
  .app-shell.bf-sand:has(.bf-tabbar) .main-content { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  /* Skrivefeltet står 8 px over kapslen (kun hvor det er fast, til og med 700 px).
     Emoji-arket løfter det selv, så reglen gælder ikke, mens arket er åbent.
     Skeptikerne 29/9 (fund 1): --bf-bottom-nav-h er nav'ens målte højde, og nav'ens
     bundpadding rummer allerede env(safe-area-inset-bottom), så safe-area lægges
     ikke til igen (målt med safe-area 34 px: feltet stod 42 px over kapslen). */
  body:not(.has-emoji-sheet) .app-shell.bf-sand :is(.bf-senior .senior-compose, .portal-message-composer, .coach-message-composer) { bottom: calc(var(--bf-bottom-nav-h, 78px) + 8px); }
  /* Klientens Beskeder: under tråden står kort, og det faste skrivefelt dækkede det
     nederste (også i v738, målt 106 px). Indholdet slutter nu 16 px over feltets
     overkant; feltets højde (--bf-composer-h) er 0 px, hvor feltet ikke er fast.
     Safe-area står allerede i --bf-bottom-nav-h (fund 1). */
  body:not(.has-emoji-sheet) .app-shell.bf-sand:has(.bf-tabbar) .main-content:has(.portal-message-composer) { padding-bottom: calc(var(--bf-bottom-nav-h, 78px) + 8px + var(--bf-composer-h, 0px) + 16px); }
}
/* Skeptikerne 29/9 (fund 1): til og med 700 px står skrivefeltet fast, og skallen
   lægger selv safe-area under indholdet (.app-shell har padding-bottom
   env(safe-area-inset-bottom) til og med 720 px). Beskeders luft trækker den fra
   igen, så tråden slutter 16 px over feltet, også på en iPhone (målt 49,7 px med
   safe-area 34 px). */
@media (max-width: 700px) {
  body:not(.has-emoji-sheet) .app-shell.bf-sand:has(.bf-tabbar) .main-content:has(.portal-message-composer) { padding-bottom: calc(var(--bf-bottom-nav-h, 78px) + 8px + var(--bf-composer-h, 0px) + 16px - env(safe-area-inset-bottom, 0px)); }
}

/* Enkel og coachens Enkel (.senior-bar inde i .main-content): kapslen på alle
   bredder, højst 720 px og centreret, 8 px luft til siderne. Punkterne beholder
   14 px tekst, 26 px ikon og 60,9 px højde. */
.app-shell.bf-sand .main-content .senior-bar,
.app-shell.bf-sand.bf-tema-labrador .main-content .senior-bar {
  left: 0; right: 0; bottom: 0;
  /* Skeptikerne 29/9 (fund 7): 4 px mellem punkterne fra 360 px som i v738, så
     ungarske ord (Kezdőlap, Edzés) ikke rører hinanden; 0 kun under 360 px. */
  gap: 4px;
  padding: 11px max(12px, calc((100% - 720px) / 2 + 4px)) calc(23px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: 0;
  pointer-events: none;
}
.app-shell.bf-sand .main-content .senior-bar > * { pointer-events: auto; }
.app-shell.bf-sand .main-content .senior-bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: auto;
  inset: 0 max(8px, calc((100% - 720px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px;
  border: 1px solid var(--boble-kant);
  background: var(--boble-flade);
  background: color-mix(in srgb, var(--boble-flade) var(--boble-alpha, 72%), transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--boble-skygge);
}
/* Alle punkter i blæk inde i .main-content-skopet; slår husets og Labradors
   a.on- og .senior-more.on-regler (dagens pille i --bf-surface2 målte 1,04:1). */
.app-shell.bf-sand .main-content .senior-bar a,
.app-shell.bf-sand .main-content .senior-bar a.on,
.app-shell.bf-sand .main-content .senior-bar a span,
.app-shell.bf-sand .main-content .senior-bar .senior-more,
.app-shell.bf-sand .main-content .senior-bar .senior-more.on,
.app-shell.bf-sand .main-content .senior-bar .senior-more span,
.app-shell.bf-sand .main-content .senior-bar .senior-more[aria-expanded="true"] { color: var(--bf-ink) !important; background: transparent !important; }
.app-shell.bf-sand .main-content .senior-bar a,
.app-shell.bf-sand .main-content .senior-bar .senior-more { position: relative; isolation: isolate; }
.app-shell.bf-sand .main-content .senior-bar svg,
.app-shell.bf-sand .main-content .senior-bar :is(a, .senior-more) > span { position: relative; z-index: 1; }
.app-shell.bf-sand .main-content .senior-bar a.on::before,
.app-shell.bf-sand .main-content .senior-bar .senior-more.on::before,
.app-shell.bf-sand .main-content .senior-bar .senior-more[aria-expanded="true"]::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 3px; width: min(60px, calc(100% - 8px)); height: 32px; border-radius: 999px; background: var(--boble-pille); box-shadow: 0 0 0 2px var(--boble-flade); transform: translateX(-50%); }
.app-shell.bf-sand .main-content .senior-bar a.on svg,
.app-shell.bf-sand .main-content .senior-bar .senior-more.on svg,
.app-shell.bf-sand .main-content .senior-bar .senior-more[aria-expanded="true"] svg,
.app-shell.bf-sand .main-content .senior-bar a.on .csb-ic { color: var(--boble-glyf) !important; }
/* Coachens Enkel: pillen bag emojien (⌂ og ⋯ er tegn og tager glyffens farve).
   Også her 8 px smallere end punktet (skeptikerne 29/9, fund 4). */
.app-shell.bf-sand .main-content .coach-simple-bar a.on::before { top: 4px; width: min(56px, calc(100% - 8px)); height: 24px; }
/* Bundpolstring: kapslen (83) + 12 + 16 = 111, oven i skallens 94 på telefonen. */
.app-shell.bf-sand .main-content .bf-senior { padding-bottom: calc(111px + env(safe-area-inset-bottom, 0px)); }
.app-shell.bf-sand .main-content .bf-coach-simple.wrap .senior-screen { padding-bottom: 105px; }
/* Seks punkter under 360 px: 4 px til siderne og intet mellemrum, så hvert punkt
   er 52 px som før. Pillen er altid 8 px smallere end punktet (4 px glas på hver
   side, også når punktet flugter med kapslens kant). */
@media (max-width: 359.98px) {
  .app-shell.bf-sand .main-content .senior-bar,
  .app-shell.bf-sand.bf-tema-labrador .main-content .senior-bar { gap: 0; padding-left: 4px; padding-right: 4px; }
  .app-shell.bf-sand .main-content .senior-bar::before { left: 4px; right: 4px; }
  /* Skeptikerne 29/9 (fund 4): husets bjælke ved 320 px havde punkter på 57 px, og
     pillens ring stod 1,5 px fra kapslens buede kant. Kapslen står 4 px fra siderne
     og fanerne 8 px, så punktet er 61 px (v738: 62), og pillen har 9 px til kanten. */
  .app-shell.bf-sand .bf-tabbar,
  .app-shell.bf-sand.bf-dark .bf-tabbar,
  .app-shell.bf-sand.bf-tema-labrador .bf-tabbar,
  .app-shell.bf-sand.bf-dark.bf-tema-labrador .bf-tabbar,
  .app-shell.bf-sand.bf-tema-mads-2027 .bf-tabbar.mads-tabbar { padding-left: 8px; padding-right: 8px; }
  .app-shell.bf-sand .bf-tabbar::before { left: 4px; right: 4px; }
}

/* Kan telefonen ikke sløre, eller har brugeren bedt om mindre gennemsigtighed,
   er kapslen tæt: samme form, kant, skygge og pille. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-shell.bf-sand .bf-tabbar::before,
  .app-shell.bf-sand .main-content .senior-bar::before { background: var(--boble-flade); }
}
@media (prefers-reduced-transparency: reduce) {
  .app-shell.bf-sand .bf-tabbar::before,
  .app-shell.bf-sand .main-content .senior-bar::before { background: var(--boble-flade); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* BOBLE-MENU SLUT */