/* Formad. The tokens are in one place, the Tempel block further down: colour, space,
   radius, type, icons and motion. Everything else reads them. */
.moment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.moment-actions button {
  font-size: var(--text-xs);
  min-height: 44px;
  padding: var(--space-2);
  border-color: transparent;
  color: var(--text-secondary);
}
.skipped-moment .row-body {
  border-left-style: dashed;
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-bottom: 150px;
}
body {
  margin: 0;
  color: var(--text-primary);
  font: var(--text-base)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button,
a,
input,
textarea,
select,
summary {
  touch-action: manipulation;
}
button,
summary {
  cursor: pointer;
}
button {
  min-height: var(--tap, 44px);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
}
button:disabled,
input:disabled {
  opacity: 0.45;
  cursor: default;
}
button:disabled {
  pointer-events: none;
}
@media (hover: hover) {
  button:hover {
    background: var(--surface-secondary);
    border-color: var(--border-strong);
  }
  .week-row:hover {
    background: var(--surface-secondary);
  }
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
a {
  color: var(--accent);
  text-underline-offset: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
input,
textarea,
select {
  min-height: var(--tap, 44px);
  max-width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
}
/* One tick box everywhere, the one the day's moments have: a square cut stone
   with an ink edge, filled when ticked. The browser's own is grey on grey in dark. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--text-primary);
  border-radius: 2px;
  background: var(--surface);
  cursor: pointer;
}
input[type="checkbox"]::after {
  content: "";
  width: 10px;
  height: 5px;
  border: solid var(--accent-foreground);
  border-width: 0 0 2.5px 2.5px;
  transform: translate(0, -1px) rotate(-45deg) scale(0);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  transform: translate(0, -1px) rotate(-45deg) scale(1);
}
input[type="time"],
input[type="number"] {
  font-variant-numeric: tabular-nums;
}
input[aria-invalid="true"] {
  border-color: var(--error);
}
textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  resize: vertical;
  line-height: 1.75;
}
svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.shell {
  margin: auto;
  padding: 0 var(--space-5) calc(112px + env(safe-area-inset-bottom));
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  text-decoration: none;
  color: var(--text-primary);
  min-height: 44px;
}
.brand svg {
  color: var(--accent);
  width: 26px;
}
.brand-dot {
  background: var(--accent);
}
.icon-button {
  width: 44px;
  padding: 10px;
  display: grid;
  place-items: center;
  border-color: transparent;
}
.heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.day-nav,
.week-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.day-nav button,
.week-nav button {
  width: 44px;
  padding: 0;
  font-size: var(--text-xl);
}
.pill {
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}
.shift-hero {
  margin-bottom: var(--space-6);
}
.shift-top,
.shift-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.shift-status {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}
.shift-status.active {
  color: var(--success);
}
.status-dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.shift-times {
  padding: var(--space-2) 0 var(--space-1);
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  line-height: 1.3;
}
.shift-times > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.shift-arrow {
  font-size: 0.6em;
  color: var(--text-tertiary);
  font-weight: 400;
}
.shift-bottom p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.shift-empty {
  line-height: 1.3;
  padding: var(--space-2) 0 var(--space-1);
}
.primary {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: transparent;
}
.primary:hover {
  background: var(--accent-hover);
  border-color: transparent;
}
.secondary {
  background: var(--surface);
}
.text-button {
  border-color: transparent;
  color: var(--text-secondary);
}
.section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-3);
}
.small,
.muted {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.small {
  font-size: var(--text-xs);
}

.home-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border);
}
.home-title,
.home-detail {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.home-time {
  margin-right: var(--space-2);
}
.home-card.confirmed .home-title {
  color: var(--success);
}

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-size: var(--text-xs);
  cursor: pointer;
}
.row-check:has(input:disabled),
.row-check:has(input[aria-disabled="true"]) {
  cursor: default;
}
/* Ticked by the data: looks as a disabled box does, and stays reachable for a screen reader. */
.row-check input[aria-disabled="true"] {
  opacity: 0.45;
}

.row-body {
  position: relative;
  border-left: 1px solid var(--border);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
}
.row-body:before {
  content: "";
  position: absolute;
  left: -3px;
  top: 23px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
  outline: 4px solid var(--background);
}
.row-title {
  font-size: var(--text-sm);
  font-weight: 450;
}
.row-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.row-check {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin-top: -6px;
  cursor: pointer;
}
.row-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: -6px;
}
.row-head .row-check {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  justify-content: flex-start;
}
.row-check input {
  order: -1;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--surface);
  display: grid;
  place-content: center;
  cursor: inherit;
}
.row-check input:after {
  content: "";
  border: solid var(--accent-foreground);
  transform: translate(0, -1px) rotate(-45deg) scale(0);
}
.row-check input:checked:after {
  transform: translate(0, -1px) rotate(-45deg) scale(1);
}

.past-label {
  display: block;
  font-size: var(--text-2xs);
}
.own-label {
  display: block;
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
}
.done-time {
  display: block;
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}

.pack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.pack-tag {
  font-size: var(--text-xs);
  padding: var(--space-2);
  text-align: left;
}
.pack-tag[aria-pressed="true"] {
  background: var(--accent-soft);
  text-decoration: line-through;
}
.skin-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.skin-steps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-1) 0;
}
.skin-num {
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
  min-width: 14px;
}
.skin-steps button {
  flex: 1;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
}
.skin-name,
.skin-note {
  display: block;
}
.skin-note,.skin-pause {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}
.skin-steps button[aria-pressed="true"] .skin-name {
  text-decoration: line-through;
  color: var(--success);
}
.skin-pause {
  padding-left: 22px;
}
.skin-countdown {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}
.skin-countdown.finished {
  color: var(--success);
}

.glasses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.glass {
  width: 44px;
  padding: var(--space-2);
  border-color: transparent;
  color: var(--text-tertiary);
}
.glass.filled {
  color: var(--accent);
  background: var(--accent-soft);
}

.glass svg {
  height: 28px;
  width: 24px;
}
.stats {
  padding: var(--space-3) 0 var(--space-6);
  border-bottom: 1px solid var(--border);
}

.day-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.day-actions button {
  font-size: var(--text-xs);
  border-color: transparent;
  color: var(--text-secondary);
  padding: var(--space-2);
}
.week-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: calc(-1 * var(--space-2));
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.week-summary p { margin: 0; }
.week-summary .empty { padding: 0; color: var(--text-primary); }
.week-total {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.week-list {
  margin-top: var(--space-4);
}
/* One blue line: on Mat it leads to the week's figures under Vecka, and under
   Vecka it folds out the schedule Personalkollen filled in. */
.week-fold > summary {
  display: block;
  text-align: center;
  padding: var(--space-3) 0;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.week-fold > summary::-webkit-details-marker { display: none; }
.week-fold[open] > summary { color: var(--text-secondary); }
.week-fold[open] > summary .when-shut, .week-fold:not([open]) > summary .when-open { display: none; }
.week-fold .week-list { margin-top: 0; }
@media (hover: hover) { .week-fold > summary:hover { text-decoration: underline; text-underline-offset: 3px; } }
.week-entry {
  border-bottom: 1px solid var(--border);
}
.week-row {
  display: grid;
  grid-template-columns: 128px 1fr 88px 12px;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: 0;
  border-radius: 0;
  text-align: left;
  min-height: 86px;
  padding: var(--space-4) var(--space-3);
  font-weight: 400;
}
.week-date {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.week-date strong {
  min-width: 30px;
}
.week-date > span {
  text-transform: capitalize;
  font-size: var(--text-xs);
}
.week-shift {
  display: grid;
  gap: 2px;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-base);
}
.week-shift small {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.week-length {
  font-size: var(--text-xs);
  text-align: right;
  color: var(--text-secondary);
}
.row-arrow {
  color: var(--text-tertiary);
  font-size: var(--text-xl);
}
.time-dash {
  color: var(--text-tertiary);
}
.off .week-shift {
  color: var(--text-secondary);
}
.routine-group {
  border-top: 1px solid var(--border);
}
.routine-group:last-of-type {
  border-bottom: 1px solid var(--border);
}
summary {
  list-style: none;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  padding: var(--space-4) 0;
}
summary::-webkit-details-marker {
  display: none;
}
.disclosure-plus {
  font-weight: 350;
}
.routine-content {
  padding: 0 0 var(--space-6);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.setting-row label {
  font-size: var(--text-sm);
  flex: 1;
}
.setting-row small {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.setting-row input[type="number"] {
  width: 70px;
}
.setting-row input[type="time"] {
  width: 124px;
}
.setting-row select {
  width: 128px;
}

.theme-options {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.theme-options [aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
}
#auth-token,
#coach-url {
  display: block;
  width: 100%;
  margin: var(--space-3) 0;
}
.routine-content > p {
  margin-bottom: var(--space-3);
}
.settings-save {
  position: sticky;
  bottom: calc(90px + env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow);
  z-index: 9;
}
.settings-save > p {
  font-size: var(--text-sm);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.tabs {
  position: fixed;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  z-index: 10;
}
/* While the keyboard is up the menu is put away, so it does not ride up on it (keyboard.js),
   and so is what floats over it: the fade at the foot and the workout in progress. */
html.kb .tabs,
html.kb body::after,
html.kb .wo-resume {
  display: none;
}
.tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* Sized by how many tabs there are, so adding one is a row in the registry. */
  flex: 1 1 0;
  max-width: 150px;
  border: 0;
}
.tabs svg {
  width: var(--icon-md);
  height: var(--icon-md);
}
.banner,
.warning,
.notice {
  font-size: var(--text-xs);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--warning-surface);
  color: var(--warning);
}
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.banner button {
  color: inherit;
  border-color: currentColor;
  flex-shrink: 0;
}
/* A save the server refused, or a sign-in that ran out: under the name, until it is mended. */
.sync-alert {
  margin: 0 0 var(--space-4);
  background: var(--error-surface);
  color: var(--error);
}
.warning {
  margin: 0 var(--space-3) var(--space-3);
}
.warning.crit {
  background: var(--error-surface);
  color: var(--error);
}
.notice {
  margin-bottom: var(--space-4);
  background: var(--accent-soft);
}
/* Health Connect that stopped coming in (native.js hcNotice): an h2 under the day's h1, the size of the notice's h3. */
.hc-notice h2 { font-size: var(--text-lg); line-height: 1.2; }
.field-error {
  color: var(--error);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.empty {
  padding: var(--space-6) 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 60ch;
}
footer {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--text-2xs);
}
.toast {
  position: fixed;
  bottom: calc(94px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--background);
  max-width: calc(100vw - 32px);
  width: max-content;
  z-index: 30;
  font-size: var(--text-sm);
  box-shadow: var(--shadow);
}
dialog {
  background: var(--surface);
  color: var(--text-primary);
  padding: var(--space-6);
  width: 480px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  box-shadow: var(--shadow);
}
/* An open sheet holds the page still behind it: a swipe on the sheet, also on a
   part that does not scroll (the exercise's animation, a header), and a list
   scrolled to its end never moves Idag or Träning underneath. */
html:has(dialog:modal) { overflow: hidden; }
dialog, dialog * { overscroll-behavior: contain; }
/* The grip at the top of a sheet on a phone: pulled down, the sheet closes
   (sheet-drag.js). Not on the intro and the guide, which are not pulled away. */
@media (max-width: 559px) {
  dialog:not(#intro-dialog, #guide-dialog)::before { content: ""; position: absolute; z-index: 2; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--grip); pointer-events: none; }
  #workout-dialog .wo-head { padding-top: var(--space-5); }
}
/* While it is pulled the backdrop lightens with it (--drag, 0 to 1, from sheet-drag.js). */
dialog.sheet-dragging { -webkit-user-select: none; user-select: none; }
dialog.sheet-dragging::backdrop { background: rgb(27 25 21 / calc(0.478 * (1 - var(--drag, 0)))); transition: none; }
dialog h2 {
  margin-bottom: var(--space-4);
}
dialog .toggles {
  margin-bottom: var(--space-4);
}
.block-fields {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.block-fields label {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.block-fields input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  font-size: var(--text-lg);
  letter-spacing: -0.5px;
  color: var(--text-primary);
  padding: var(--space-2);
}
.block-arrow {
  align-self: end;
  padding-bottom: 14px;
  color: var(--text-tertiary);
}
.remove {
  width: 44px;
  padding: 0;
  min-height: 52px;
  border-color: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xl);
}
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-2) var(--space-4);
}
.presets button {
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.chips button {
  font-size: var(--text-xs);
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--surface);
  padding: 12px;
}
.skip-link:focus {
  top: 12px;
}
/* The opening (index.html): Android's splash as the page's first frame, the
   portrait in its circle on the night, held while the first page is drawn and
   its fonts come in (liftOpening in app.js), then faded into the page. It goes
   by itself after four seconds, so a script that fails never hides the app. */
.app-opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--obsidian);
  animation: app-opening-gone var(--dur-base) var(--ease-in) 4s forwards;
}
.app-opening img {
  width: 192px;
  height: 192px;
  border-radius: 50%;
}
.in-app .app-opening img {
  visibility: hidden;
}
.app-opening.lifted {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-in);
}
@keyframes app-opening-gone {
  to { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .app-opening.lifted { transition: none; }
}
[hidden] {
  display: none !important;
}
@media (min-width: 768px) {
  .shell {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
  /* The menu stays the floating pill at the bottom; only its buttons lie flat. */
  .tabs button {
    flex-direction: row;
    gap: var(--space-2);
  }
  .tabs svg {
    width: var(--icon-md);
  }
  .settings-save {
    bottom: 24px;
  }
  .toast {
    bottom: 32px;
  }
  .routine-group {
    max-width: 760px;
  }
}
@media (max-width: 430px) {
  .heading {
    align-items: flex-start;
  }
  .day-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 128px;
  }
  .day-nav .pill {
    order: 3;
    text-align: right;
    padding-right: 0;
  }
  .shift-bottom {
    align-items: flex-start;
  }
  .shift-bottom p {
    max-width: 170px;
  }
  .section-label:has(.toggles) {
    flex-wrap: wrap;
  }
  .section-label .toggles {
    margin-top: -4px;
  }
  .week-row {
    gap: 8px;
    padding: 16px 4px;
  }
  .week-date {
    display: grid;
    gap: 0;
  }
  .week-date > span {
    font-size: var(--text-xs);
  }
  .week-shift {
    font-size: var(--text-sm);
  }
  .week-length {
    font-size: var(--text-xs);
  }
  dialog {
    padding: var(--space-4);
  }
  .block-fields {
    gap: 4px;
  }
  .block-fields input {
    font-size: var(--text-lg);
    padding: 8px 4px;
  }
  .block-arrow {
    display: none;
  }
}
@media (max-width: 350px) {
  .shell {
    padding-left: 16px;
    padding-right: 16px;
  }
  .shift-top {
    flex-direction: column;
    gap: 4px;
  }
  .shift-bottom {
    flex-wrap: wrap;
  }
  .setting-row {
    gap: 8px;
  }
  .setting-row input[type="time"] {
    width: 112px;
  }
  .setting-row select {
    width: 112px;
  }
  .theme-options {
    gap: 4px;
  }
  .theme-options button {
    padding: 8px 10px;
  }
}

.skin-details summary {
  font-size: var(--text-xs);
  min-height: 44px;
  padding: var(--space-2) 0;
  color: var(--text-secondary);
}
.skin-details .skin-steps {
  margin-top: 0;
}

dialog .eyebrow {
  color: var(--text-secondary);
}
@media (prefers-reduced-motion: no-preference) {
  button,
  a,
  input,
  select,
  textarea {
    transition:
      background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease),
      transform var(--dur-press) var(--ease);
  }
}

/* Mål och sviter.
   One hue,more is more: every filled surface here is the accent mixed into the
   page's own secondary surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  margin-bottom: var(--space-6);
  text-align: center;
}

/* Emphasis: the leading run carries the accent {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* Moving a moment: hold it, and it lifts off the list and follows the finger;
   the others slide aside to show where it will land. */
.check-row[data-row] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.check-row[data-row]:not(.dragging) { transition: transform var(--dur-fast) var(--ease-out, ease-out); }
.check-row.dragging {
  position: relative;
  z-index: 5;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow), 0 0 0 1px var(--border);
  cursor: grabbing;
}
.check-row.dragging .row-body { border-top-color: transparent; }
.check-row.dragging.dropping { transition: transform var(--dur-fast) var(--ease-out, ease-out), box-shadow var(--dur-fast); box-shadow: none; }
body.dragging-moment { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .check-row[data-row]:not(.dragging), .check-row.dragging.dropping { transition: none; } }

/* The one thing to do now, above everything else on Idag. */
.now-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.now-actions {
  flex-wrap: wrap;
  align-items: center;
}
.now-actions .primary {
  min-width: 120px;
}
.now-next {
  color: var(--text-secondary);
}
.now-card.calm {
  background: var(--surface);
  border-color: var(--border);
}
@media (prefers-reduced-motion: no-preference) {
  .row-check input,
  .row-check input:after {
    transition:
      background var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      transform var(--dur-fast) var(--ease);
  }
}
.row-head ~ .row-sub,
.row-head ~ .skin-details,
.row-head ~ .pack-tags,
.row-head ~ .moment-actions {
  margin-left: 38px;
}
.row-head ~ .moment-actions {
  margin-top: 0;
}

/* The macro colours are set with the rest of the palette (Tempel): protein blue, carbs gold, fat red, in both themes. */
.gauge { display: grid; grid-template-columns: minmax(56px, 1fr) minmax(0, 3fr) minmax(56px, 1fr); align-items: center; gap: var(--space-2); margin-block: var(--space-2) var(--space-4); }
.gauge-side { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.gauge-side span, .gauge-center span { font-size: var(--text-sm); color: var(--text-secondary); }
.gauge-dial { position: relative; max-width: 260px; width: 100%; justify-self: center; }
.gauge-dial svg { display: block; width: 100%; height: auto; }
.gauge-center { position: absolute; inset: 22% 10% auto; display: grid; justify-items: center; text-align: center; gap: 2px; }
.gauge-center strong { line-height: 1.1; }
.gauge-center small { font-size: var(--text-xs); color: var(--text-secondary); max-width: 72%; line-height: 1.35; }
.macros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.macro { display: grid; gap: var(--space-2); min-width: 0; }
.macro span { overflow-wrap: anywhere; }
.macro strong { font-variant-numeric: tabular-nums; }
.macro-bar { background: var(--gauge-track); overflow: hidden; }
.macro-bar div { height: 100%; }
.macro-carbs .macro-bar div { background: var(--macro-carbs); }
.macro-protein .macro-bar div { background: var(--macro-protein); }
.macro-fat .macro-bar div { background: var(--macro-fat); }
.moment-quick { flex-shrink: 0; min-width: 40px; min-height: 40px; padding: 0; border-color: transparent; font-size: var(--text-lg); font-weight: 600; line-height: 1; }
.moment-quick + .moment-quick { margin-left: var(--space-1); }
.water-link { display: flex; width: 100%; margin: var(--space-2) 0 var(--space-3); border: 0; font-size: var(--text-sm); text-align: left; }
.water-link svg { flex-shrink: 0; width: var(--icon-md); height: var(--icon-md); fill: var(--water); }
.water-link > span:first-of-type { flex: 1; min-width: 0; color: var(--text-secondary); }
.water-link strong { color: var(--water); font-variant-numeric: tabular-nums; }
.water-link small { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.water-link.behind small { color: var(--water); font-weight: 600; }
.water-link-add { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; background: var(--water); color: var(--surface); font-weight: 700; }
@media (hover: hover) { .water-link-add:hover { background: var(--water); border: 0; filter: brightness(1.08); } }
/* The bottle is the bigger drink, so it is the quieter button: outlined, with its own shape. */
.water-link-add.bottle { background: transparent; color: var(--water); box-shadow: inset 0 0 0 1.5px var(--water); }
@media (hover: hover) { .water-link-add.bottle:hover { background: transparent; } }
.water-link-add.bottle svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: var(--water); stroke-width: var(--icon-line-sm); stroke-linejoin: round; }
/* Flex, so the button and its white copy on the water (a span) set the words at the same height. */
.water-auto { display: flex; align-items: center; min-height: 24px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--water); font-size: var(--text-xs); font-weight: 600; text-align: left; }
@media (hover: hover) { .water-auto:hover { background: none; border: 0; text-decoration: underline; } }
.coach-quick { display: flex; align-items: center; gap: var(--space-3); margin-block: var(--space-3); color: var(--text-primary); text-decoration: none; }
.coach-quick span:first-child { flex: 1; min-width: 0; }
.coach-quick small { color: var(--text-secondary); }
.coach-quick span:last-child { font-size: var(--text-lg, 1.25rem); font-weight: 700; }

/* One calm system for every tab: cards with one radius, bigger numbers and a floating tab bar. */
body { background: var(--background); }
.shell { max-width: 720px; padding-inline: var(--space-4); }
.masthead { padding: var(--space-4) 0 var(--space-5); }
.masthead-actions .icon-button { color: var(--text-secondary); text-decoration: none; }
.masthead-actions .icon-button svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.heading { margin-bottom: var(--space-5); }
.card {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card-foot { margin-top: var(--space-4); }
.chip { font-size: var(--text-xs); font-weight: 600; padding: 4px 10px; background: var(--accent-soft); white-space: nowrap; }
.big-number small { font-weight: 500; letter-spacing: 0; }
.big-number.empty { color: var(--accent); }
.page-note { text-align: center; margin: var(--space-2) 0 var(--space-6); font-size: var(--text-xs); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.stat { container-type: inline-size; display: grid; align-content: start; gap: var(--space-1); padding: var(--space-3); background: var(--surface-secondary); min-width: 0; }
.stat span { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A number never breaks inside itself: it shrinks with the tile instead. */
.stat strong { white-space: nowrap; }
.workouts, .week-list { list-style: none; padding: 0; margin: 0; display: grid; }
.workouts li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.workouts li span { color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }
.week-list li { display: grid; grid-template-columns: 5.5em 1fr 1.2fr; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.week-list li span:nth-child(2) { font-variant-numeric: tabular-nums; }
.week-list li span:last-child { color: var(--text-secondary); overflow-wrap: anywhere; }
.goal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.goal-fields label { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.goal-fields label small { font-weight: 400; color: var(--text-secondary); font-size: var(--text-xs); }
.unit-input { gap: var(--space-2); }
.unit-input span { color: var(--text-secondary); font-weight: 400; }
.goal-fields .field-error, .goal-fields button { grid-column: 1 / -1; }
.goal-fields label.wide { grid-column: 1 / -1; }
.goal-fields textarea, .goal-fields select { width: 100%; min-width: 0; }
.goal-fields textarea { min-height: 4.5em; }
.tabs {
  left: 50%;
  right: auto;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--space-4)), 480px);
  gap: 0;
}
.tabs button { border-radius: 999px; font-size: var(--text-2xs); font-weight: 600; }
.tabs button[aria-current="page"] { background: var(--accent-soft); }
footer { border-top: 0; justify-content: center; }

/* Idag without clock times: three cards of rows, box first. */
.check-row .row-body { border-left: 0; }
.check-row:first-of-type .row-body { border-top: 0; }
.check-row .row-body:before { display: none; }
.check-row .row-check { justify-content: flex-start; margin-top: 0; flex: 1; min-width: 0; }
.check-row .row-check input { flex-shrink: 0; order: -1; }
.check-row .row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); min-width: 0; }
.check-row .row-sub { margin-left: 38px; }
.check-row .pack-tags, .check-row .skin-details, .check-row .moment-actions { margin-left: 38px; }
.morning-card, .evening-card { border: 1px solid var(--accent-soft); }
.morning-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.morning-cell { container-type: inline-size; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-secondary); min-width: 0; }
/* The note takes the slack, so the buttons sit level at the bottom. */
.morning-cell small { flex-grow: 1; }
.morning-cell span { font-size: var(--text-xs); color: var(--text-secondary); }
.morning-cell strong { white-space: nowrap; }
.morning-cell small { font-size: var(--text-xs); color: var(--text-secondary); }
.morning-cell.todo strong { color: var(--accent); }
.morning-cell button { margin-top: var(--space-2); }
.home-card.card { display: flex; align-items: center; justify-content: space-between; }
.day-actions { margin: var(--space-2) 0 var(--space-6); }

.plan-card p { margin-bottom: var(--space-2); line-height: 1.45; }
.target-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.target-form label { font-size: var(--text-sm); font-weight: 600; }
.stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.card .stats { border: 0; padding: 0; }

/* A quiet ✕: the row stays about the moment, not the button beside it. */
.moment-quick.skip { min-width: 36px; min-height: 36px; width: 36px; height: 36px; color: var(--text-tertiary); font-weight: 400; }
.moment-quick.skip:hover, .moment-quick.skip:focus-visible { color: var(--error); background: var(--skip-soft); }
.moment-undo { flex-shrink: 0; min-height: 36px; padding: 0 var(--space-3); border-color: transparent; font-size: var(--text-xs); color: var(--text-secondary); }
/* Till lunch beside the ✕ on what the morning left behind: a way on, not a warning. */
/* Ändra tid beside Vakna and Lägg dig in the simpler app: a tap picks another time. */
.sova-time { flex-shrink: 0; min-height: 44px; padding: 0 var(--space-3); border-radius: 999px; font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
#sova-dialog label { display: block; margin-top: var(--space-4); font-weight: 650; }
#sova-dialog .sova-select { width: 100%; min-height: 52px; margin-top: var(--space-2); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.moment-later { flex-shrink: 0; min-height: 36px; padding: 0 var(--space-3); border-radius: 999px; font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
/* The name is never narrower than its longest word, so a button beside it moves down rather than
   over it. Till lunch and Till kvällen always take a line of their own, under the name;
   Skippa stays on the name's line. */
.check-row .row-head { flex-wrap: wrap; row-gap: var(--space-1); }
.check-row .row-head .row-check { min-width: min-content; }
.check-row .row-head:has(.moment-later)::after { content: ""; order: 1; flex-basis: 100%; }
.check-row .row-head > .moment-later { order: 2; }
.check-row .row-head > .row-check + .moment-later { margin-left: 38px; }

.nudge { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--accent-soft); font-size: var(--text-sm); }
.nudge.done { background: transparent; padding: 0; }
.suggest { margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--accent-soft); display: grid; gap: var(--space-2); }
.suggest button { justify-self: start; }
.stats-4 .stat:nth-child(5):last-child { grid-column: 1 / -1; }
@media (min-width: 560px) { .stats-4 .stat:nth-child(5):last-child { grid-column: auto; } .stats-4 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .stats-4:has(.stat:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Design pass: fewer, calmer blocks on Idag. */
.actions.start { justify-content: flex-start; }
.check-group.folded > summary { list-style: none; cursor: pointer; margin: 0; }
.check-group.folded > summary::-webkit-details-marker { display: none; }
/* Folded, the part is one line: no room kept for the rows it is not showing. */
.check-group.folded:not([open]) { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.check-group.folded:not([open]) > summary .card-head { margin-bottom: 0; }
.check-group.folded > summary .muted { color: var(--accent); font-weight: 600; }
.check-group.folded[open] > summary { margin-bottom: var(--space-1); }
.morning-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.check-group.folded.missed > summary .muted { color: var(--text-secondary); font-weight: 400; }
.check-group.folded { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.check-group.folded > summary { min-height: 32px; align-items: center; }
.check-group.folded > summary h2 { font-size: var(--text-base); }

/* Narrow phones: the dial gets the full width, the macros become rows. */
@media (max-width: 359px) {
  .gauge { grid-template-columns: 1fr 1fr; row-gap: var(--space-3); }
  .gauge-dial { grid-column: 1 / -1; order: -1; max-width: 220px; }
  .macros { grid-template-columns: 1fr; }
  .macro { grid-template-columns: 1fr auto; align-items: baseline; }
  .macro-bar { grid-column: 1 / -1; }
}
.macro strong { white-space: nowrap; }
.shift-buttons { display: flex; gap: var(--space-2); flex-shrink: 0; }
button.pill { width: auto; min-height: 32px; border: 0; background: transparent; padding: var(--space-1) 0; text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-block; margin: 2px var(--space-1) 0 0; padding: 0 var(--space-2); font-size: var(--text-2xs); font-weight: 600; line-height: 20px; vertical-align: 1px; }
.tag.train { background: var(--accent-soft); }
.tag.walk { background: var(--surface-secondary); color: var(--text-secondary); }
.week-row.today .tag.train { background: var(--surface); }
.moment-quick.skip { font-size: var(--text-xs); }
.moment-quick.skip:hover, .moment-quick.skip:focus-visible { opacity: 1; }
.brand-dot { transition: background var(--dur-fast) var(--ease); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.connect-button { width: 100%; margin-top: var(--space-3); }
.push-actions { margin-top: var(--space-3); align-items: center; }
.small-note { font-size: var(--text-xs); }
.exercises { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.exercises li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0 !important; border: 0 !important; font-size: var(--text-sm); }
.exercises li span:last-child { color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Formad: Roman capitals that speak the headlines and numbers, a clean sans for the rest, warm paper by day and warm black by night,
   one accent that means "yours to do now". */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Cinzel: romerska versaler som huggna i sten, samma som i reklamfilmen. Gemenerna är
   kapitäler, så en rubrik läses som en inskription. Typsnittet har ingen kursiv; det kursiva
   ansiktet pekar på samma fil, så att webbläsaren aldrig lutar stenen på egen hand.
   size-adjust tar ner versalerna till ungefär den bredd rubrikerna hade, så att raderna
   får plats där de fick plats förut. */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  size-adjust: 78%;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  size-adjust: 78%;
  font-display: swap;
}
/* Cinzel har inga grekiska bokstäver. Inskriptionerna (ΓΥΜΝΑΣΙΟΝ, ΚΑΝΩΝ …) tar sina
   grekiska versaler ur EB Garamond, i samma familj och tagna till samma versalhöjd, så
   att ordet inte byter typsnitt och storlek mitt på raden. Vikten måste vara densamma
   som Cinzels, 400 900: med ett annat spann blir ansiktena två kandidater i stället för
   ett, webbläsaren väljer bara den ena, och då ritas antingen grekiskan eller den kursiva
   Nu-raden (Väg dig, Vakna …) med telefonens egen serif. EB Garamond slutar på 800, så
   900 ritas som 800. */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/eb-garamond-greek.woff2") format("woff2");
  font-weight: 400 900;
  size-adjust: 84%;
  unicode-range: U+0370-03FF;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("fonts/eb-garamond-greek.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  size-adjust: 84%;
  unicode-range: U+0370-03FF;
  font-display: swap;
}
/* Tempel: marmor om dagen, obsidian om natten. Egyptiskt blått är det du ska göra nu,
   guld är det du har byggt, cinnober är över målet eller missat, malakit är vatten.
   Antikens statyer var målade; färgen här är deras. */
:root {
  color-scheme: light;
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --display-weight: 400;
  --background: #f4f1ea;
  --surface: #fbf9f4;
  --surface-secondary: #ece7dd;
  --text-primary: #11121c;
  --text-secondary: #5d5a63;
  --text-tertiary: #6b6872;
  --border: #e2dcd0;
  --border-strong: #b5ad9c;
  --grip: #948d7a;
  --accent: #2b3fe0;
  --accent-hover: #1a2a9e;
  /* The edge a raised button stands on: always darker than the button, in both themes. */
  --accent-shade: #1a2a9e;
  --accent-foreground: #fff;
  --accent-soft: #e2e6fc;
  --accent-strong: #1a2a9e;
  --built: #f0b429;
  --built-text: #8a5d00;
  --built-shade: color-mix(in srgb, var(--built) 62%, #3a2600);
  /* What is written on gold: the tick in a box, a badge, a gold button. */
  --ink-on-gold: #1b1608;
  /* Obsidian is the night in both themes: the niche, the reckoning, the menu and the
     workout's head. What is written on it has three steps, as the text has. */
  --obsidian: #0d0e18;
  --obsidian-raised: #1b1d2b;
  --on-dark: #f4f1ea;
  --on-dark-soft: #c9c7d6;
  --on-dark-muted: #a9a7b8;
  /* The night's own lines and tracks, the ink of a dark card and the niche behind the statue. */
  --ink-deep: #11121c;
  --niche: #171a30;
  --obsidian-line: #2e3046;
  --obsidian-track: #262838;
  --obsidian-track-raised: #2c2f42;
  --obsidian-rim: #3a3c52;
  --obsidian-rim-strong: #42445c;
  --obsidian-edge: #4a4c63;
  --on-dark-line: #e4e1ee;
  --on-dark-calm: #e4e1d6;
  --on-dark-placeholder: #8f8ca6;
  --error-on-dark: #ff7a5c;
  /* What is written on a block of the accent: the built day, the walk that is done. */
  --on-fill: #fff;
  --on-fill-soft: #e4e8ff;
  --on-fill-label: var(--built);
  --silver: #c3c9d2;
  --silver-hi: #f2f4f7;
  --silver-ink: #3a414b;
  --success: var(--built-text);
  --warning: #8a5d00;
  --warning-surface: #f6e7c1;
  --error: #b3361a;
  --error-surface: #f8e4dd;
  --go: #1a7a43;
  --go-shade: #0f5730;
  --go-foreground: #fff;
  --water: #0f735a;
  --sea-far: #08503f;
  --sea-deep: #0f735a;
  --sea-mid: #12805f;
  --sea-shore: #178a6a;
  --macro-protein: var(--accent);
  --macro-carbs: var(--built);
  --macro-fat: #e0482a;
  --skip-soft: #f8e4dd;
  --gauge-track: #e2dcd0;
  --segment: #d9d3c6;
  --shadow: 0 16px 48px #11121c24;
  /* Rummet: steg om 4 px. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  /* Huggna kanter: sten, kort, ark. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 21px;
  /* Kanon: storlekarna följer Fibonacci, 13 · 21 · 34 · 55 · 89. */
  --text-2xs: 12px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 34px;
  --text-display: 55px;
  --text-monument: 89px;
  /* Icons: three sizes and two lines. A small icon draws a heavier line, so it reads as
     heavy as a big one. Marks inside a box or a figure (.wp-tick, .ex-tick, .fig-delta)
     follow their box and take the heavy line. */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-line: 1.8;
  --icon-line-sm: 2.2;
  /* Motion: four times and three curves. A press, a small change, a sheet or a page, and what is built.
     Nothing else is timed: app.js, mat.js and carve.js read the same tokens (motionMs). */
  --dur-press: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* For what leaves: it starts slowly and speeds away. */
  --ease-in: cubic-bezier(0.3, 0, 0.8, 0.15);
  /* The spring is the tick box's alone. */
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --chev-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #0d0e18;
    --surface: #171927;
    --surface-secondary: #20233a;
    --text-primary: #f4f1ea;
    --text-secondary: #a9a7b8;
    --text-tertiary: #8e8ca0;
    --border: #2e3046;
    --border-strong: #4a4c63;
    --grip: #6b6e8c;
    --accent: #7c8cff;
    --accent-hover: #9aa6ff;
    --accent-shade: #3d4ab8;
    --accent-foreground: #0d0e18;
    --accent-soft: #232a4d;
    --accent-strong: #7c8cff;
    --built-text: #f0b429;
    --warning: #f0b429;
    --warning-surface: #2a2311;
    --error: #ff7a5c;
    --error-surface: #3a2220;
    --go: #3ccf7a;
    --go-shade: #1f8a4c;
    --go-foreground: #0d0e18;
    --water: #3fd0ae;
    --macro-fat: #ff7a5c;
    --skip-soft: #3a2220;
    --gauge-track: #20233a;
    --segment: #2e3046;
    --shadow: 0 16px 48px #0008;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0d0e18;
  --surface: #171927;
  --surface-secondary: #20233a;
  --text-primary: #f4f1ea;
  --text-secondary: #a9a7b8;
  --text-tertiary: #8e8ca0;
  --border: #2e3046;
  --border-strong: #4a4c63;
  --grip: #6b6e8c;
  --accent: #7c8cff;
  --accent-hover: #9aa6ff;
  --accent-shade: #3d4ab8;
  --accent-foreground: #0d0e18;
  --accent-soft: #232a4d;
  --accent-strong: #7c8cff;
  --built-text: #f0b429;
  --warning: #f0b429;
  --warning-surface: #2a2311;
  --error: #ff7a5c;
  --error-surface: #3a2220;
  --go: #3ccf7a;
  --go-shade: #1f8a4c;
  --go-foreground: #0d0e18;
  --water: #3fd0ae;
  --macro-fat: #ff7a5c;
  --skip-soft: #3a2220;
  --gauge-track: #20233a;
  --segment: #2e3046;
  --shadow: 0 16px 48px #0008;
}
/* Teman. Original och Original ljus är dagens Formad, mörkt och ljust, och har inget eget
   block: utan data-look gäller allt ovan. Carrara, Rosa och Verde är egna stenar med egna
   typsnitt. Alla väljs vid första starten eller under Inställningar → Appen. Carrara och
   Rosa är ljusa, Verde är mörk: app.js sätter data-theme efter temat, så att reglerna för
   ljust och mörkt läge gäller som vanligt. Varje tema sätter samma tokens som :root, inget annat. */
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; size-adjust: 100%; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; size-adjust: 100%; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("fonts/gloock.woff2") format("woff2"); font-weight: 400; size-adjust: 92%; font-display: swap; }
@font-face { font-family: "Wix Madefor Text"; src: url("fonts/wix-madefor-text.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("fonts/young-serif.woff2") format("woff2"); font-weight: 400; size-adjust: 88%; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("fonts/mona-sans.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
/* Carrara: ljus varm marmor, terrakotta och honung. */
:root[data-look="carrara"] {
  color-scheme: light;
  --font: "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  --display: "Bodoni Moda", Georgia, serif;
  --display-weight: 600;
  --background: #f6f2ea;
  --surface: #fffdf8;
  --surface-secondary: #efe7da;
  --text-primary: #1f1d1a;
  --text-secondary: #5d574e;
  --text-tertiary: #675f55;
  --border: #e6dccb;
  --border-strong: #b9ae9c;
  --grip: #9a8f7d;
  --accent: #a84a2b;
  --accent-hover: #8f3e23;
  --accent-shade: #7a3219;
  --accent-foreground: #fffdf8;
  --accent-soft: #f8e6dc;
  --accent-strong: #9a4226;
  --built: #d9a441;
  --built-text: #845610;
  --ink-on-gold: #2a1c05;
  --obsidian: #2a221b;
  --obsidian-raised: #3a2f25;
  --on-dark: #f6f2ea;
  --on-dark-soft: #ddd4c7;
  --on-dark-muted: #c0b5a4;
  --ink-deep: #241d17;
  --niche: #3a2c22;
  --obsidian-line: #4a3d31;
  --obsidian-track: #3d3229;
  --obsidian-track-raised: #463a2f;
  --obsidian-rim: #5a4a3c;
  --obsidian-rim-strong: #64523f;
  --obsidian-edge: #6e5b48;
  --on-dark-line: #ece4d6;
  --on-dark-calm: #e6dccb;
  --on-dark-placeholder: #a89a88;
  --on-fill: #fffdf8;
  --on-fill-soft: #fbe7dc;
  --on-fill-label: #fbe7dc;
  --warning: #845610;
  --warning-surface: #f6e7c8;
  --error: #a8361a;
  --error-surface: #f8e2d8;
  --macro-protein: #3f6f8f;
  --macro-fat: #c8452c;
  --skip-soft: #f8e2d8;
  --gauge-track: #e6dccb;
  --segment: #ddd1bd;
  --shadow: 0 16px 48px #6b5a3f24;
}
/* Rosa: rosa marmor, plommon och korall. */
:root[data-look="rosa"] {
  color-scheme: light;
  --font: "Wix Madefor Text", ui-sans-serif, system-ui, sans-serif;
  --display: "Gloock", Georgia, serif;
  --display-weight: 400;
  --background: #f8ece6;
  --surface: #fffaf6;
  --surface-secondary: #f3dcd2;
  --text-primary: #2a1f22;
  --text-secondary: #6b5459;
  --text-tertiary: #6f5960;
  --border: #f1d3c6;
  --border-strong: #c99a8c;
  --grip: #b08478;
  --accent: #7a2e4d;
  --accent-hover: #5c2039;
  --accent-shade: #4a1a2e;
  --accent-foreground: #fffaf6;
  --accent-soft: #f6dde4;
  --accent-strong: #7a2e4d;
  --built: #e9806a;
  --built-text: #a33f2a;
  --ink-on-gold: #2a1f22;
  --obsidian: #3a1f2b;
  --obsidian-raised: #4a2938;
  --on-dark: #fbefe9;
  --on-dark-soft: #ead3d8;
  --on-dark-muted: #cfb0b9;
  --ink-deep: #331a26;
  --niche: #4a2536;
  --obsidian-line: #5a3446;
  --obsidian-track: #4a2a39;
  --obsidian-track-raised: #523041;
  --obsidian-rim: #6a4254;
  --obsidian-rim-strong: #744a5d;
  --obsidian-edge: #7e5366;
  --on-dark-line: #f6e4e8;
  --on-dark-calm: #f1d9de;
  --on-dark-placeholder: #b493a0;
  --on-fill: #fffaf6;
  --on-fill-soft: #f6dde4;
  --on-fill-label: #f9c9bc;
  --warning: #845610;
  --warning-surface: #f6e7c8;
  --error: #ad2f28;
  --error-surface: #f9e0dc;
  --macro-fat: #d24a32;
  --skip-soft: #f9e0dc;
  --gauge-track: #f1d3c6;
  --segment: #ecccbf;
  --shadow: 0 16px 48px #7a2e4d24;
}
/* Verde: mörkgrön marmor, salvia och mässing. */
:root[data-look="verde"] {
  color-scheme: dark;
  --font: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Young Serif", Georgia, serif;
  --display-weight: 400;
  --background: #14281f;
  --surface: #1d3a2d;
  --surface-secondary: #24463a;
  --text-primary: #f1ede2;
  --text-secondary: #c3cdbf;
  --text-tertiary: #a9b6a6;
  --border: #2f5443;
  --border-strong: #4a7a62;
  --grip: #5f8a74;
  --accent: #9cc5a1;
  --accent-hover: #b8d9bc;
  --accent-shade: #5d8a63;
  --accent-foreground: #14281f;
  --accent-soft: #24463a;
  --accent-strong: #9cc5a1;
  --built: #c9a24d;
  --built-text: #dcb965;
  --ink-on-gold: #1a1608;
  --obsidian: #0c1a13;
  --obsidian-raised: #163026;
  --on-dark: #f1ede2;
  --on-dark-soft: #d0d8cc;
  --on-dark-muted: #a9b6a6;
  --ink-deep: #0f1f17;
  --niche: #183528;
  --obsidian-line: #2a4a3a;
  --obsidian-track: #1f3a2d;
  --obsidian-track-raised: #254435;
  --obsidian-rim: #355a48;
  --obsidian-rim-strong: #3d6450;
  --obsidian-edge: #46705b;
  --on-dark-line: #e6ebe0;
  --on-dark-calm: #dfe6da;
  --on-dark-placeholder: #8fa596;
  --error-on-dark: #ff8a6c;
  --on-fill: #14281f;
  --on-fill-soft: #1d3a2d;
  --on-fill-label: #14281f;
  --warning: #dcb965;
  --warning-surface: #2a2a14;
  --error: #ff8a6c;
  --error-surface: #3a2420;
  --go: #7fd99c;
  --go-shade: #3f8a58;
  --go-foreground: #0c1a13;
  --water: #6fd6c0;
  --macro-fat: #ff8a6c;
  --skip-soft: #3a2420;
  --gauge-track: #24463a;
  --segment: #2f5443;
  --shadow: 0 16px 48px #0008;
}
/* Läs lättare: större text och större knappar, i vilket tema som helst. */
:root[data-easy] {
  --text-2xs: 13px;
  --text-xs: 14px;
  --text-sm: 16px;
  --text-base: 19px;
  --text-lg: 21px;
  --text-xl: 24px;
  --text-2xl: 38px;
  /* The plain button's and field's height; a class with its own height keeps it. */
  --tap: 52px;
}
body {
  font-family: var(--font);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}
/* Display voice: tight, a little narrow, heavy. Everything else stays text voice. */
.eyebrow { margin-bottom: var(--space-2); }
.brand { gap: 3px; align-items: baseline; }

/* Buttons: pills for actions, a gentle press everywhere. */
.primary, .secondary { padding-inline: var(--space-5); }

/* Cards: one surface, one radius. Dark cards are drawn by a hairline, not a shadow. */
.card, .shift-hero { border: 0; }

/* Idag: the day's heading steps back so "Nu" can lead. */
.day-heading .date { margin-top: var(--space-1); }

/* Nu: the one thing to do, set large on the page itself, and the day's progress above it. */
.now-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: var(--space-2) 0 var(--space-8);
}
.segments { display: flex; }
.segments i { flex: 1; border-radius: 3px; background: var(--segment); min-width: 0; }
.day-progress p { display: flex; justify-content: space-between; gap: var(--space-3); }
.now-sub { margin-top: var(--space-3); max-width: 34ch; }
.now-actions { display: grid; gap: var(--space-3); }
.now-actions .primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.now-actions .primary svg { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-line); }
.now-next { font-size: var(--text-sm); text-align: center; }
/* Under Klar, quieter: a moment that can wait goes to lunch. */
.now-later { width: 100%; min-height: 48px; font-size: var(--text-base); color: var(--text-secondary); }

/* The rows of a pile hang on one line, and each tick box is a stop on it. */
.check-group { padding: var(--space-5) var(--space-5) var(--space-3); }
.check-group .card-head { margin-bottom: var(--space-2); }
.check-row .row-body { position: relative; border-top: 0; padding: var(--space-2) 0; }
.check-row .row-body:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--border);
}
.check-group > .check-row:first-of-type .row-body:after, .check-group > summary + .check-row .row-body:after { top: 22px; }
.check-group > .check-row:last-child .row-body:after { bottom: calc(100% - 22px); }
.check-row .row-check input { position: relative; z-index: 1; }
.check-row .row-title { font-size: var(--text-base); }
.check-row.done .row-title { color: var(--text-tertiary); }
.row-check input { border-color: var(--border-strong); }

/* Menu: a pill that slides to the page you are on. */
.tabs { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.tabs button { position: relative; z-index: 1; background: transparent !important; }
.tab-indicator {
  position: absolute;
  top: var(--space-1);
  left: 0;
  height: calc(100% - 2 * var(--space-1));
  pointer-events: none;
  opacity: 0;
}
.tab-indicator.ready { opacity: 1; }

/* Vecka: the date is the landmark down the list. */
.week-row.today { background: var(--accent-soft); }
.week-entry { border-bottom-color: var(--border); }
.week-total { font-size: var(--text-base); }

/* Inställningar: sections read as headings. */
.disclosure-plus { transition: transform var(--dur-base) var(--ease-out); }

/* Toast: a small pill above the menu. */
.toast { font-weight: 550; padding: var(--space-3) var(--space-5); }

/* Dialogs rise from the bottom on a phone. */
dialog { border: 0; }
/* What is given focus only so a reader is told where it is (the page, a sheet, a title: tabindex -1) never shows a ring.
   iOS draws its own light blue one around the whole page when a tap lands on it, and around a sheet when the title it
   held is drawn anew between two questions. Fields keep theirs. */
dialog:focus, dialog:focus-visible, .intro-body:focus, .intro-body:focus-visible, #main:focus, #main:focus-visible,
[tabindex="-1"]:not(input, textarea, select):focus, [tabindex="-1"]:not(input, textarea, select):focus-visible { outline: none; }
dialog::backdrop { background: #1b19157a; }
@media (max-width: 559px) {
  dialog {
    margin: auto 0 0;
    width: 100%;
    max-width: 100%;
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px);
  }
}

/* Motion. Every move has a reason: where you went, what you finished, what came next.
   It only plays on a navigation or an action, never on the half-minute redraw. */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
  button:active:not(:disabled) { transform: scale(0.97); }
  /* The menu's block moves to the tab: a transform, no spring. */
  .tab-indicator.ready { transition: transform var(--dur-fast) var(--ease-out); }

  /* A page enters from the side it lies on, all of it at once and never from nothing. */
  #main[data-enter] > * { animation: page-in var(--dur-fast) var(--ease-out) both; }
  #main[data-enter="forward"] > * { --from-x: 12px; }
  #main[data-enter="back"] > * { --from-x: -12px; }
  #main[data-enter="fade"] > * { --from-y: 6px; }
  @keyframes page-in {
    from { opacity: 0.4; transform: translate(var(--from-x, 0), var(--from-y, 0)); }
  }

  /* Drawn in on arrival, and only when it changed since you last looked (data-draw, app.js):
     the calorie arc, the macro bars, the weight trend. Bars grow as a transform, not a width. */
  #main[data-draw] .valv .sten, #main[data-draw] .valv .key-gold { animation: fade-in var(--dur-slow) var(--ease-out) 120ms both; }
  #main[data-draw] .macro-bar div { animation: bar-in var(--dur-slow) var(--ease-out) 200ms both; transform-origin: left; }
  @keyframes bar-in { from { transform: scaleX(0); } }
  @keyframes draw { from { stroke-dashoffset: 400; } }
  #main[data-draw] .segments i { animation: seg-in var(--dur-slow) var(--ease-out) both; transform-origin: left; }
  @keyframes seg-in { from { transform: scaleX(0); } }
  @keyframes fade-in { from { opacity: 0; } }

  /* Finishing something: the box pops, its tick draws, the next thing rises. */
  .just-done .row-check input { animation: pop var(--dur-slow) var(--spring); }
  .just-done .row-check input:after { animation: tick var(--dur-base) var(--ease-out) 80ms both; }
  @keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
  @keyframes tick { from { transform: translate(0, -1px) rotate(-45deg) scale(0); } }
  .just-done .row-title { animation: settle var(--dur-slow) var(--ease-out); }
  @keyframes settle { from { color: var(--text-primary); } }
  .now-enter .now-label, .now-enter .now-title, .now-enter .now-sub, .now-enter .now-actions { animation: rise var(--dur-slow) var(--ease-out) both; }
  .now-enter .now-title { animation-delay: 40ms; }
  .now-enter .now-sub { animation-delay: 80ms; }
  .now-enter .now-actions { animation-delay: 120ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } }
  .segments i.fill { animation: fill var(--dur-slow) var(--ease-out) both; }
  @keyframes fill { from { background: var(--segment); transform: scaleY(1); } 50% { transform: scaleY(1.9); } }
  .water-link.pulse strong { animation: pop var(--dur-slow) var(--ease-out); display: inline-block; }
  @keyframes pulse { 40% { transform: scale(0.98); } }
  .skin-steps button[aria-pressed="true"].just-done .skin-name { animation: settle var(--dur-slow) var(--ease-out); }
  .pack-tag.just-done { animation: pop var(--dur-base) var(--ease-out); }

  /* Dialogs slide up and away; the backdrop fades with them. In they slow as they
     land (280 ms); out they speed up and are gone sooner (200 ms), so a sheet you
     close never hangs half-way down the screen. */
  dialog {
    animation: none !important;
    transition: transform var(--dur-fast) var(--ease-in), opacity var(--dur-fast) var(--ease-in), overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete;
    transform: translateY(32px);
    opacity: 0;
  }
  dialog[open] { transform: none; opacity: 1; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
  @starting-style { dialog[open] { transform: translateY(32px); opacity: 0; } }
  dialog::backdrop { transition: background var(--dur-fast) var(--ease-in), overlay var(--dur-fast) allow-discrete, display var(--dur-fast) allow-discrete; background: #1b191500; }
  dialog[open]::backdrop { background: #1b19157a; transition: background var(--dur-base) var(--ease-out), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
  @starting-style { dialog[open]::backdrop { background: #1b191500; } }
  @media (max-width: 559px) {
    dialog { transform: translateY(100%); opacity: 1; }
    @starting-style { dialog[open] { transform: translateY(100%); opacity: 1; } }
  }

  /* The toast rises in and sinks out. */
  .toast { animation: toast-in var(--dur-base) var(--ease-out); }
  .toast.leaving { animation: toast-out var(--dur-fast) var(--ease-in) forwards; }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(0.96); } }
  @keyframes toast-out { to { opacity: 0; transform: translate(-50%, 8px); } }

  /* Folded sections open to their height instead of jumping. */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { height: 0; overflow: clip; transition: height var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
    details[open]::details-content { height: auto; }
  }
}
.day-nav button svg, .week-nav button svg { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-line); }
.row-arrow svg { width: var(--icon-md); height: var(--icon-md); }
.week-summary { margin: var(--space-2) 0 var(--space-2); }
.restoring details::details-content { transition: none !important; }
/* Pages slide in from the side; what is still on its way never widens the page. */
#main { overflow-x: clip; }
.tabs button[aria-current="page"], .tabs button[aria-current="page"] svg, .tag.train, .chip, .notice, .nudge strong,
.theme-options [aria-pressed="true"], .pack-tag[aria-pressed="true"], .week-row.today .week-date strong { color: var(--accent-strong); }
@media (min-width: 768px) {
  .now-actions { max-width: 420px; }
  .now-next { text-align: left; }
}

/* Review pass. */
/* Away from today, the way back is a small link under the arrows, never a headline. */
.day-nav .pill { font-size: var(--text-xs); font-weight: 600; color: var(--accent-strong); width: auto; min-height: 32px; line-height: 1.3; letter-spacing: 0; }
/* Hints under a row line up with its title, like every other line of the row. */
/* Morning cells are narrow: their one button speaks small, with room for two
   lines on every button so "Jag är vaken" is as tall as "Logga vikt". */
.morning-cell button { font-size: var(--text-xs); min-height: 42px; padding: 0 var(--space-2); line-height: 1.15; }
/* Macros: the number is the point, the name is the label. */
.macro span { font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.macro strong { font-size: var(--text-base); color: var(--text-primary); }
/* The latest weight keeps a halo, so the dots behind it never cut through the number. */
/* Selects look like the pills beside them. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
}
.toggles select { font-size: var(--text-sm); font-weight: 500; }
/* The skin steps' fold turns its arrow instead of leaving it pointing down. */
.skin-details summary span[aria-hidden] { transition: transform var(--dur-base) var(--ease-out); }

/* A logged workout: its name gets the full width, the facts sit under it. */
.wo-past-more .exercises { gap: 0; }
.wo-past-more .exercises li { padding: var(--space-2) 0 !important; border-top: 1px solid var(--border) !important; }
.wo-past-more .exercises li span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* Each exercise: its name, and under it every set as it was done. */
.wo-past-more .exercises li { display: grid; gap: 2px; }
.wo-past-more .exercises li span:last-child { white-space: normal; }
/* Macros sit centred, each under its own third of the dial. */
.macro { justify-items: center; text-align: center; }
.macro-bar { width: 100%; }
/* Vecka: a long training note stays one tag long; the hours never break. */
.week-shift .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.week-length { white-space: nowrap; }
@media (max-width: 430px) { .week-row { grid-template-columns: 78px minmax(0, 1fr) auto 8px; } }
/* Warnings are cards like the rest, not a stripe down the side. */
.warning { border-left: 0; border-radius: var(--radius-md); margin-top: var(--space-1); }
/* As rows on the narrowest phones, a macro reads left to right again. */
@media (max-width: 359px) { .macro { justify-items: stretch; text-align: left; } }

/* Editorial voice. Headlines and the numbers that matter are set in the serif,
   one weight, a touch tight; everything you read or tap stays in the sans. */
.brand,
.heading h1,
.now-title,
.big-number,
.stat strong,
.gauge-center strong,
.gauge-side strong,
.week-date strong,
.card-head h2,
.routine-group summary,
dialog h2,
.shift-times,
.shift-empty,
.home-time,
.section-label h2,
.morning-cell strong,
.date-numeral {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-stretch: normal;
}
.brand { line-height: 1; }
.brand-dot { margin-bottom: 6px; }
.now-title { margin-top: var(--space-2); }
.week-date strong { line-height: 1; }
.macro strong { font-weight: 650; }
.primary, .secondary { font-weight: 600; }

/* Idag: the date is the backdrop — a numeral cut by the edge of the page. */
#main { position: relative; isolation: isolate; }
.date-numeral {
  position: absolute;
  z-index: -1;
  line-height: 0.8;
  pointer-events: none;
  user-select: none;
}
.day-heading .date { font-size: var(--text-sm); }
.day-progress { margin-bottom: var(--space-10); }
.segments { gap: 4px; }
.segments i { height: 3px; }
.now-card { margin-bottom: var(--space-10); }
.now-sub { color: var(--text-secondary); }
.now-actions { margin-top: var(--space-5); }
.now-actions .primary { min-height: 54px; font-size: var(--text-base); font-weight: 600; }
/* Calmer cards on Idag: a hairline instead of a lifted shadow. */
.card, .shift-hero { box-shadow: 0 0 0 1px var(--border); }
.check-row .row-title { font-weight: 400; }
/* The sync dot sits on the baseline, a full stop after the name. */
.brand-dot { align-self: baseline; margin: 0; }
/* The arrows sit over the numeral on a disc of the page, not through it. */
.day-nav button { background: var(--background); }

/* Mat. The gauge says where the day stands; under it, two ways in (Skanna and
   Sök) and the day as one ledger, meal under meal. The sheet that adds food has
   a fixed height and three parts: what you are looking at on top, the content
   in the middle, and the decision at the bottom, under the thumb. */
.food-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.food-actions button { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 650; }
.food-actions svg, .food-search button svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }

.food-day { padding-block: var(--space-2); }
.food-day .meal { padding-block: var(--space-4); }
.food-day .meal + .meal { border-top: 1px solid var(--border); }
.meal-head { display: flex; align-items: baseline; }
.meal.empty .meal-head h2 { color: var(--text-tertiary); }
.meal-kcal small { font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.food-day.empty { padding-block: var(--space-6); }
.food-day-intro { padding: var(--space-4) 0 var(--space-2); border-bottom: 1px solid var(--border); }
.food-day-intro h2 { font-family: var(--display); font-weight: var(--display-weight); }
.food-day-intro p { margin: var(--space-2) 0 0; max-width: 36ch; }
.food-day.empty h2 { font-family: var(--display); font-weight: var(--display-weight); }
.food-day.empty p { margin: var(--space-2) 0 0; max-width: 36ch; }
.food-day.empty button { margin-top: var(--space-4); border-radius: 999px; }

.food-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.food-list li { border-radius: 4px; }
.food-list li + li { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.food-row, .food-pick { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 0; border-radius: 0; background: transparent; padding: var(--space-3) 0; text-align: left; min-height: 56px; }
@media (hover: hover) { .food-row:hover, .food-pick:hover { background: transparent; } .food-row:hover .food-name, .food-pick:hover .food-name { color: var(--accent-strong); } }
.food-name { min-width: 0; font-size: var(--text-base); font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; }
.food-name small, .food-kcal small, .food-per small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.food-name small:empty { display: none; }
.food-kcal, .food-per { flex-shrink: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.food-per { font-weight: 600; color: var(--text-secondary); }

/* The sheet. */
/* Clipped, not hidden: a sheet whose lists scroll inside it must never scroll as a
   whole. Hidden, the browser still scrolls it to bring a focused field into view,
   and the head slides off the top with an empty band below (keyboard.js). */
dialog.food-dialog { width: 520px; padding: 0; height: min(700px, calc(100dvh - 32px)); overflow: clip; }
dialog.food-dialog[open] { display: flex; flex-direction: column; }
.food-pane:not([hidden]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pane-head { padding: var(--space-6) var(--space-6) var(--space-3); }
.pane-head h2 { margin-bottom: 0; outline: none; }
.eyebrow:empty { display: none; }
.pane-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-6) var(--space-6); }
/* A field brought into view above the keyboard keeps some room around it. */
.pane-body { scroll-padding-block: var(--space-4) var(--space-12); }
.pane-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.pane-foot .text-button:first-child { margin-right: auto; padding-inline: 0; }
@media (max-width: 559px) {
  dialog.food-dialog { height: min(760px, calc(100dvh - 24px)); padding: 0; }
  .pane-head { padding: var(--space-5) var(--space-4) var(--space-3); }
  .pane-body { padding-inline: var(--space-4); }
  .pane-foot { padding-inline: var(--space-4); }
}
.food-search { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.food-search input { flex: 1; min-height: 52px; font-size: var(--text-lg); padding-inline: var(--space-5); }
.food-search button { flex-shrink: 0; min-width: 52px; min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-4); }
.food-group { margin: var(--space-5) 0 0; }
/* The usual foods on one line that scrolls sideways, so the recent ones stay in view. */
/* The snap lines up with the padding, not the edge: without scroll-padding the first chip is pulled flush to the screen. */
.food-quick { margin: var(--space-1) calc(-1 * var(--space-6)) 0; padding: 2px var(--space-6) var(--space-1); scroll-padding-inline: var(--space-6); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.food-quick::-webkit-scrollbar { display: none; }
.food-quick button { flex-shrink: 0; scroll-snap-align: start; }
@media (max-width: 559px) { .food-quick { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); } }
.food-quick button, .food-units button { min-height: 40px; font-size: var(--text-sm); padding: 0 var(--space-4); }
.food-hint, .food-wait { margin-top: var(--space-5); }
/* With the keyboard up the hits are what counts: the head and the usual foods give them
   their room, and the line of what was just added stays (keyboard.js sets html.kb). */
html.kb [data-food-pane="search"] .pane-head > :is(.eyebrow, h2) { display: none; }
html.kb [data-food-pane="search"] .food-search { margin-top: 0; }
html.kb .food-quick { display: none; }
/* What the sheet just took, under the field: the food and its meal, and Ångra. */
.food-added { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-sm); }
.food-added[hidden] { display: none; }
.food-added p { margin: 0; min-width: 0; font-weight: 600; color: var(--text-primary); outline: none; }
.food-added .text-button { flex-shrink: 0; min-height: 44px; margin-block: -6px; padding-inline: 0; }
.dots { display: inline-block; width: 18px; margin-right: var(--space-2); }
.dots::before { content: "•••"; letter-spacing: 1px; }

/* How much: a readout like a kitchen scale, the amount and what it gives. */
.readout { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0 var(--space-3); border-bottom: 1px solid var(--border); }
.readout-kcal { margin: 0; text-align: right; font-size: var(--text-base); color: var(--text-secondary); white-space: nowrap; }
.readout-kcal strong { line-height: 1; color: var(--text-primary); }
.readout-macros { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0; margin: var(--space-3) 0 var(--space-5); font-size: var(--text-sm); color: var(--text-secondary); }
.readout-macros b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.protein { background: var(--macro-protein); }
.dot.carbs { background: var(--macro-carbs); }
.dot.fat { background: var(--macro-fat); }
.food-units { margin-bottom: var(--space-3); }
.food-units button small { font-size: var(--text-xs); color: var(--text-secondary); margin-left: 2px; }
.food-units button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.food-units button[aria-pressed="true"] small { color: inherit; }
p.food-per { font-size: var(--text-xs); text-align: left; font-weight: 400; margin: 0; }
.food-pane .field-error { margin: 0 0 var(--space-3); }

/* Which meal: last, four buttons under the thumb; the expected one is filled. */
.meal-foot { display: block; }
.meal-label { margin: 0 0 var(--space-2); }
.meal-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.meal-buttons button { min-height: 52px; font-size: var(--text-base); font-weight: 650; }
.meal-links { display: flex; justify-content: space-between; margin-top: var(--space-1); }
.meal-links button { padding-inline: 0; min-height: 40px; }
.food-dialog .danger { color: var(--error); }

/* The camera: a frame with corners, a line that sweeps while it looks, and
   corners that close on the code when it is found. */
.scanner { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: #0d0b09; margin-bottom: var(--space-4); }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 28% 12%; border-radius: 12px; box-shadow: 0 0 0 999px #0008;
  background:
    linear-gradient(#fff, #fff) top left / 26px 3px no-repeat, linear-gradient(#fff, #fff) top left / 3px 26px no-repeat,
    linear-gradient(#fff, #fff) top right / 26px 3px no-repeat, linear-gradient(#fff, #fff) top right / 3px 26px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 26px 3px no-repeat, linear-gradient(#fff, #fff) bottom left / 3px 26px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 26px 3px no-repeat, linear-gradient(#fff, #fff) bottom right / 3px 26px no-repeat; }
.scan-frame i { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); opacity: 0; }
.scanner.live .scan-frame i { opacity: 0.9; }
.scanner.found .scan-frame { box-shadow: 0 0 0 999px #000a, inset 0 0 0 3px var(--accent); }
.scanner.found .scan-frame i { opacity: 0; }
.scan-status { font-size: var(--text-sm); color: var(--text-secondary); min-height: 1.5em; margin: 0; }
#food-ean-form { margin-top: var(--space-5); }
#food-ean-form label { display: block; font-size: var(--text-sm); font-weight: 600; }
#food-ean-form .food-search { margin-top: var(--space-2); }
@media (max-width: 380px) {
  .food-actions button { font-size: var(--text-sm); }
  .food-actions.three svg { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* A step slides in from the side it lies on. */
  .food-pane.pane-in .pane-head, .food-pane.pane-in .pane-body { animation: pane-in var(--dur-base) var(--ease-out) both; }
  .food-pane.pane-in .pane-body { animation-delay: 30ms; }
  .food-pane.pane-in .pane-foot { animation: fade-in var(--dur-base) var(--ease-out) both; }
  .food-pane[data-dir="forward"] { --from-x: 28px; }
  .food-pane[data-dir="back"] { --from-x: -28px; }
  @keyframes pane-in { from { opacity: 0; transform: translateX(var(--from-x, 0)); } }
  .food-units button, .meal-buttons button { transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); }
  .dots::before { animation: dots 1.1s steps(4) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; }
  @keyframes dots { to { width: 18px; } }
  .scanner.live .scan-frame i { animation: sweep 1.8s ease-in-out infinite alternate; }
  @keyframes sweep { from { top: 8%; } to { top: 92%; } }
  .scan-frame { transition: inset var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease); }
  .scanner.found .scan-frame { inset: 31% 15%; }
  /* What you just logged settles into its meal. */
  .food-list li.just-added { animation: landed 1600ms var(--ease-out) both; }
  @keyframes landed {
    0% { background: var(--accent-soft); box-shadow: 0 0 0 10px var(--accent-soft); opacity: 0; transform: translateY(-6px); }
    20% { opacity: 1; transform: none; }
    100% { background: transparent; box-shadow: 0 0 0 10px transparent; }
  }
}

/* No hit: the way on is to add it, said plainly and as the one thing to do. */
.food-none { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface-secondary); }
.food-none h3 { font-family: var(--display); font-size: 24px; font-weight: var(--display-weight); letter-spacing: -0.3px; line-height: 1.15; overflow-wrap: anywhere; }
.food-none p { margin: var(--space-2) 0 var(--space-4); max-width: 40ch; }
.food-none button { width: 100%; min-height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: 650; }
.food-none button + button { margin-top: var(--space-2); }
.food-none svg, .food-missing svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.food-missing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.food-missing .text-button { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: 0; color: var(--accent-strong); font-weight: 600; min-width: 0; text-align: left; overflow-wrap: anywhere; }

/* Swipe a row left to remove it: the row follows the finger over a red field
   that says what letting go will do. */
.food-list li { position: relative; overflow: hidden; }
.food-row { position: relative; z-index: 1; background: var(--surface); touch-action: pan-y; }
.swipe-bg { position: absolute; inset: 1px 0; display: flex; align-items: center; justify-content: flex-end; padding-right: var(--space-4); border-radius: var(--radius-sm); background: var(--error-surface); color: var(--error); font-size: var(--text-sm); font-weight: 650; opacity: 0; }
.food-list li.swiping .swipe-bg { opacity: 1; }
.food-list li.armed .swipe-bg { background: var(--error); color: var(--surface); }
.food-row.settle { transition: transform var(--dur-base) var(--ease-out); }

/* Ofta valda: the third button folds out the usual dishes under the buttons.
   With three, all are cut stones with the same ledge, so the row stands level;
   Ofta valda stays pressed down while its list is open. */
.food-actions.three { grid-template-columns: 1fr 1.3fr 1fr; gap: var(--space-2); align-items: start; margin-bottom: var(--space-5); }
.food-actions.three button { min-height: 48px; padding-inline: var(--space-2); white-space: nowrap; gap: var(--space-1); font-size: var(--text-sm); }
.food-actions.three svg { width: var(--icon-md); height: var(--icon-md); }
.food-actions #food-meals[aria-expanded="true"] { border-color: var(--accent-strong); color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.favs-box { list-style: none; margin: calc(-1 * var(--space-2)) 0 var(--space-5); padding: 0 var(--space-4) var(--space-1); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.favs-head { display: flex; justify-content: center; align-items: baseline; gap: var(--space-2); padding: var(--space-3) 0 var(--space-1); font-size: var(--text-2xs); letter-spacing: 0.01em; color: var(--text-tertiary); font-weight: 600; }
.favs-box li + li { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.favs-box .fav { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border: 0; border-radius: 0; background: transparent; text-align: left; color: inherit; box-shadow: none; }
.favs-box .food-name { flex: 1; font-size: var(--text-sm); }
.favs-box .food-name small { font-variant-numeric: tabular-nums; }
.favs-empty { padding: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); text-align: center; }
.favs-box li.favs-head ~ li.favs-head { margin-top: var(--space-2); border-top: 1px solid var(--border); }
.fav-add { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm); border: 2px solid var(--accent-strong); color: var(--accent-strong); }
.fav-add svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: square; }
@media (hover: hover) { .favs-box .fav:hover { background: transparent; } .favs-box .fav:hover .fav-add { background: var(--accent-strong); color: var(--surface); } }
.favs-box .fav:active .fav-add { background: var(--accent-strong); color: var(--surface); }
/* The star: hollow until pressed, then gold, as the laurel. */
.favs-box .fav-row { display: flex; align-items: center; gap: var(--space-1); }
.favs-box .fav-row .fav { flex: 1; min-width: 0; }
.fav-star { display: grid; place-items: center; width: 40px; height: 44px; flex-shrink: 0; margin-left: calc(-1 * var(--space-2)); padding: 0; border: 0; background: transparent; color: var(--text-tertiary); box-shadow: none; }
.fav-star[aria-pressed="true"] { color: var(--built-text); }
@media (hover: hover) { .fav-star:hover { background: transparent; color: var(--built-text); } }
svg.star { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linejoin: round; }
svg.star.on { fill: var(--built); stroke: var(--built-text); }
.star-toggle { display: inline-flex; align-items: center; gap: var(--space-1); }
.fav-remove { display: grid; place-items: center; width: 40px; height: 44px; flex-shrink: 0; margin-left: calc(-1 * var(--space-2)); padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text-tertiary); }
.fav-remove svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: square; }
@media (hover: hover) { .fav-remove:hover { background: transparent; color: var(--error); } }
.pick-star { display: inline-block; vertical-align: -3px; margin-right: var(--space-1); }
.pick-star svg.star { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-line-sm); }
.star-toggle svg.star { width: var(--icon-md); height: var(--icon-md); }
.star-toggle[aria-pressed="true"] { color: var(--text-primary); }
@media (prefers-reduced-motion: no-preference) {
  .favs-box.opening { animation: favs-in var(--dur-fast) var(--ease-out) both; }
}
@keyframes favs-in { from { opacity: 0; transform: translateY(-4px); } }

.food-per-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.food-per-row .text-button { padding: 0; min-height: 36px; color: var(--accent-strong); font-weight: 600; font-size: var(--text-sm); }

/* Sparade måltider and Bara kalorier. */
/* Under a meal: Lägg till and Ofta valda to the left, Spara som måltid to the right, all blue. */
.meal-tools { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-4); margin-top: var(--space-1); }
.meal-add svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: square; }
.meal-tools .text-button { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; }
.meal-tools .meal-save { margin-left: auto; }
.meal-favs .favs-chevron { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.meal-favs[aria-expanded="true"] .favs-chevron { transform: rotate(180deg); }
@media (hover: hover) { .meal-tools .text-button:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; } }
@media (prefers-reduced-motion: no-preference) { .meal-favs .favs-chevron { transition: transform var(--dur-fast) var(--ease-out); } }
.favs-box.meal-favs-box { margin: var(--space-1) 0 var(--space-1); }
/* In the day's card, under the macros: the buttons and Måltider folding out under them. */
.food-hero .food-actions.three { margin: var(--space-5) 0 0; }
.food-hero .favs-box { margin: var(--space-4) 0 0; }

/* Mer under the day's summa: the burn to the left, Mer to the right, and the
   fiber, sugar, saturated fat and salt folding out under them. */
.food-foot { display: flex; align-items: center; gap: var(--space-3); }
.food-foot .muted { margin: 0; min-width: 0; }
.food-more-toggle { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; padding: 0 0 0 var(--space-2); min-height: 44px; border: 0; background: transparent; box-shadow: none; color: var(--accent-strong); font-size: var(--text-sm); font-weight: 600; flex: none; }
.food-more-toggle .favs-chevron { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.food-more-toggle[aria-expanded="true"] .favs-chevron { transform: rotate(180deg); }
@media (hover: hover) { .food-more-toggle:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; } }
.food-more { list-style: none; margin: var(--space-2) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border); display: grid; gap: var(--space-4); }
.more-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-1) var(--space-3); }
.more-row > span { font-size: var(--text-sm); font-weight: 600; }
.more-row > strong { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.more-row > small, .more-split > small { grid-column: 1 / -1; font-size: var(--text-xs); }
.more-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--gauge-track); overflow: hidden; }
.more-bar div { height: 100%; border-radius: 3px; background: var(--text-secondary); }
.more-row.met .more-bar div { background: var(--success); }
.more-row.over .more-bar div { background: var(--warning); }
.more-row.over > strong { color: var(--warning); }
.more-note, .more-empty { font-size: var(--text-xs); }
.micro-head { display: grid; gap: var(--space-1); padding-top: var(--space-2); }
.micro-head > span { font-size: var(--text-sm); font-weight: 600; }
.micro-head > small { font-size: var(--text-xs); }
.micro-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.micro-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--space-2); font-size: var(--text-xs); }
.micro-row > span { font-weight: 600; overflow-wrap: anywhere; }
.micro-row > strong { font-weight: 400; color: var(--text-secondary); font-variant-numeric: tabular-nums; grid-column: 1; }
.micro-row > em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.micro-row .more-bar { height: 4px; }
.micro-row.met .more-bar div { background: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .food-more.opening { animation: favs-in var(--dur-fast) var(--ease-out) both; }
  .food-more-toggle .favs-chevron { transition: transform var(--dur-fast) var(--ease-out); }
}
.readout.total { align-items: baseline; }
.readout.total .muted { margin: 0; }
.summary-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; min-height: 52px; }
.summary-list .food-name { font-size: var(--text-sm); }
.summary-list .food-kcal { font-weight: 600; font-size: var(--text-sm); }
.food-pane .field { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2); }
.food-pane .field input { min-height: 52px; font-size: var(--text-lg); }
.save-help { font-size: var(--text-sm); margin: var(--space-3) 0 0; }
#food-k-kcal { max-width: 6ch; }
@supports (field-sizing: content) { #food-k-kcal { min-width: 3ch; max-width: 6ch; } }

/* A meal on Idag: what was logged for it, one tap from Mat. */
.row-food { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); width: calc(100% - 38px); margin: 0 0 0 38px; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; font-size: var(--text-xs); color: var(--text-secondary); }
.row-food span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-food b { flex-shrink: 0; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.row-food.empty { width: auto; color: var(--accent-strong); font-weight: 600; }
@media (hover: hover) { .row-food:hover { background: transparent; border: 0; color: var(--accent-strong); } }

/* Veckan on Mat: seven bars against the goal line, the day shown in the accent. */
.food-week .card-head { align-items: baseline; flex-wrap: wrap; row-gap: var(--space-1); }
.food-week .card-head .muted { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); margin-top: var(--space-2); }
.wb { display: grid; justify-items: center; gap: 2px; min-height: 0; padding: var(--space-2) 0; border: 0; border-radius: var(--radius-sm); background: transparent; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .wb:hover { background: var(--surface-secondary); border: 0; } }
.wb-bar { position: relative; display: flex; flex-direction: column-reverse; width: 14px; height: 88px; margin-bottom: var(--space-2); border-radius: 7px; background: var(--gauge-track); overflow: hidden; }
.wb-bar i { display: block; width: 100%; flex-shrink: 0; }
.wb-fill { background: color-mix(in srgb, var(--text-tertiary) 55%, var(--gauge-track)); }
.wb-over { background: var(--warning); }
.wb.on .wb-fill { background: var(--accent); }
.wb-goal { position: absolute; left: 0; right: 0; height: 2px; background: var(--surface); z-index: 1; }
.wb-kcal { font-size: var(--text-xs); font-weight: 650; }
.wb-p { font-size: var(--text-2xs); color: var(--text-tertiary); }
.wb-p.met { color: var(--macro-protein); font-weight: 650; }
.wb-day { font-size: var(--text-2xs); letter-spacing: 0.01em; color: var(--text-tertiary); font-weight: 600; margin-top: 2px; }
.wb.on .wb-day { color: var(--accent-strong); }
.wb.none .wb-kcal { color: var(--text-tertiary); font-weight: 400; }
.wb-key { font-size: var(--text-xs); margin: var(--space-3) 0 0; }
@media (max-width: 360px) { .wb-kcal { font-size: var(--text-2xs); } }
@media (prefers-reduced-motion: no-preference) {
  #main[data-draw] .wb-bar i:not(.wb-goal) { animation: wb-grow var(--dur-slow) var(--ease-out) 150ms both; transform-origin: bottom; }
  @keyframes wb-grow { from { transform: scaleY(0); } }
}

/* The undo bar: low over the menu, where the toast is and the thumb reaches, with
   what just happened and Ångra, and a line along its foot that runs out like a
   cast bar while undo is possible. Over a workout in progress it rides above its bar.
   In a sheet it waits above the sheet, clear of the buttons at its foot. */
.undo-bar { position: fixed; z-index: 40; bottom: calc(94px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--space-3); width: max-content; max-width: calc(100vw - 32px); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-md); overflow: hidden; background: var(--text-primary); color: var(--background); box-shadow: var(--shadow); font-size: var(--text-sm); font-weight: 600; }
.undo-bar svg { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; fill: none; stroke: var(--accent-soft); stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.undo-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-bar button { flex-shrink: 0; min-height: 44px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--background) 14%, transparent); color: var(--accent-soft); font-weight: 700; }
@media (hover: hover) { .undo-bar button:hover { background: color-mix(in srgb, var(--background) 26%, transparent); border: 0; color: var(--accent-soft); } }
.undo-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.undo-bar.running .undo-time { animation: undo-run var(--undo-ms, 5000ms) linear forwards; }
@keyframes undo-run { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: no-preference) {
  .undo-bar:not([hidden]) { animation: undo-in var(--dur-base) var(--ease-out); }
  .undo-bar.leaving { animation: undo-out var(--dur-fast) var(--ease-in) forwards; }
  @keyframes undo-in { from { opacity: 0; transform: translate(-50%, 16px); } }
  @keyframes undo-out { to { opacity: 0; transform: translate(-50%, 12px); } }
  dialog:not(.guide-dialog) .undo-bar:not([hidden]) { animation-name: undo-in-top; }
  dialog:not(.guide-dialog) .undo-bar.leaving { animation-name: undo-out-top; }
  @keyframes undo-in-top { from { opacity: 0; transform: translate(-50%, -16px); } }
  @keyframes undo-out-top { to { opacity: 0; transform: translate(-50%, -12px); } }
}
body.wo-on > .undo-bar { bottom: calc(170px + env(safe-area-inset-bottom)); }
dialog:not(.guide-dialog) .undo-bar { top: calc(env(safe-area-inset-top) + var(--space-3)); bottom: auto; }

.water-link strong, .water-auto { white-space: nowrap; }
.water-link-add.bottle span { font: inherit; color: inherit; }
/* On a narrow phone the bottle keeps its shape and loses its word. */
@media (max-width: 374px) {
  .water-link-add.bottle span { display: none; }
}

/* Tempel, typografin. Cinzel bär det som är poängen: rubriker, klockslag,
   kilon och kalorier, i en vikt och utan kursiv. Hanken Grotesk bär allt du läser och
   trycker på. Versaler med luft är inskriptioner. Declared last, so it is the system. */
h1,
h2,
h3,
dialog h2,
.now-title,
.big-number,
.stat strong,
.gauge-center strong,
.gauge-side strong,
.week-date strong,
.home-time,
.shift-times,
.card-head h2,
.routine-group summary,
.meal-head h2,
.meal-kcal,
.readout-kcal strong,
.morning-cell strong {
  font-family: var(--display);
  font-weight: var(--display-weight);
  font-stretch: normal;
  font-variant-numeric: tabular-nums;
}
h1 { font-size: var(--text-2xl); line-height: 1; }
h2 { font-size: var(--text-xl); line-height: 1.1; }
h3 { font-size: var(--text-lg); line-height: 1.2; }
.heading h1, .day-heading h1 { font-size: var(--text-2xl); line-height: 1; font-weight: 400; }
.heading .date { font-family: var(--font); font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }
dialog h2 { font-size: 44px; line-height: 1; }
/* Inskriptioner: små versaler med luft, i det blå som betyder "nu". */
.eyebrow, .now-label { text-transform: uppercase; color: var(--accent-strong); }
/* Nu: en kursiv inskription, monumentstor. */
.now-title { font-style: italic; }
.now-card.calm .now-title { font-size: var(--text-2xl); font-style: normal; letter-spacing: -0.5px; }
.now-sub { font-size: var(--text-xl); font-weight: 500; line-height: 1.35; }
.now-next, .now-later { font-family: var(--font); }
/* Siffror som är poängen. */
.big-number, .evening-card .big-number { font-size: 72px; letter-spacing: -1.5px; line-height: 0.9; }
.big-number small { font-family: var(--display); font-style: italic; font-size: 26px; color: var(--text-secondary); }
/* Morgonvikten at reading size: the curve under it is the point, not the figure. */
.home-time, .shift-times { font-size: var(--text-2xl); }
.stat strong { font-size: min(var(--text-2xl), 26cqi); line-height: 1; }
.gauge-center strong { font-size: clamp(var(--text-2xl), 12vw, var(--text-display)); }
.week-date strong { font-size: var(--text-2xl); }
.meal-kcal { font-size: var(--text-xl); }
.readout-kcal strong { font-size: var(--text-display); }
.morning-cell strong { line-height: 1; }
.brand { font-family: var(--font); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.5px; }
/* Det du har byggt skrivs i guld, inte i accenten. */
.done-time, .nudge.done, .past-label { color: var(--built-text); }
.check-row.done .row-body:after { background: var(--built); }
.segments i.on { background: var(--built); }
/* Vatten är malakit. */
.water-link { color: var(--water); }
.water-link svg { color: var(--water); }
/* Huggna kanter: 4 px på allt du trycker på, kort 8, ark 21. Inga piller. */
button, .primary, .secondary, .actions button, .theme-options button, .day-actions button, .day-nav button, .week-nav button,
input, textarea, select, .toast, .pill, .chip, .tag, .pack-tag { border-radius: var(--radius-sm); }
.secondary { border: 2px solid var(--text-primary); color: var(--text-primary); }
.card, .shift-hero, .stat, .week-row.today { border-radius: var(--radius-md); }
dialog { border-radius: var(--radius-lg); }
@media (max-width: 559px) { dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }
.tab-indicator { border-radius: var(--radius-sm); background: var(--accent); }
.tabs { background: var(--text-primary); color: var(--background); }

/* Tempel, delarna. Pelare, gavel och stylobat ritas i SVG och färgas här, så att
   ljust och mörkt läge delar samma sten. */
.temple { display: block; width: 100%; height: auto; overflow: visible; }
/* Icons borrow currentColor as stroke; stone does not. */
.temple .ghost { stroke-width: 1.5; }
.temple text { font-family: var(--display); font-size: 15px; fill: var(--text-secondary); }
.day-progress p { font-size: var(--text-sm); margin-top: var(--space-1); }
.week-temple { margin-bottom: var(--space-4); }
.week-temple p { margin-top: var(--space-2); font-size: var(--text-sm); }
/* Numerals: the day's parts, the week, the stage. */
.numeral { font-family: var(--display); font-weight: var(--display-weight); color: var(--accent-strong); margin-right: var(--space-2); }
h1 .numeral { margin: 0; color: var(--text-secondary); }
/* The day is built: a blue block, the inscription in gold. */
.now-card.built { background: var(--accent); color: var(--on-fill); padding: var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.now-card.built .now-label { color: var(--on-fill-label); }
.now-card.built .now-title { font-style: normal; font-size: clamp(44px, 14vw, 66px); letter-spacing: -1.5px; }
.now-card.built .now-sub { color: var(--on-fill-soft); font-size: var(--text-base); }
.now-statue { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-3); color: var(--on-fill); font-weight: 700; text-underline-offset: 5px; }
/* The day's reckoning: obsidian like the statue's niche, gold for every blow
   taken, an empty slot for every one let go. A whole day keeps the blue. */
.now-card.reckoning { background: var(--obsidian); color: var(--on-dark); border: 0; padding: var(--space-5); border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.now-card.reckoning.built { background: var(--accent); }
.now-card.reckoning .now-label { color: var(--on-dark-muted); }
.now-card.reckoning.built .now-label { color: var(--on-fill-label); }
.now-card.reckoning .now-title { font-style: normal; font-size: clamp(40px, 12vw, 56px); letter-spacing: -1px; color: var(--on-dark); }
.now-card.reckoning .now-title i { color: var(--built); }
.now-card.reckoning.built .now-title i { color: inherit; }
.reck-score { display: flex; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-5); }
.reck-score b { font-family: var(--display); font-weight: var(--display-weight); font-size: 72px; line-height: 0.85; color: var(--built); font-variant-numeric: tabular-nums; }
.reck-score span { font-size: var(--text-sm); line-height: 1.3; color: var(--on-dark-soft); padding-bottom: 4px; }
.reck-meter { display: grid; grid-template-columns: repeat(auto-fit, minmax(6px, 1fr)); gap: 3px; height: 14px; margin-top: var(--space-4); }
.reck-meter i { background: var(--obsidian-track); }
.reck-meter i.on { background: var(--built); }
.reckoning.built .reck-meter i { background: color-mix(in srgb, #fff 20%, transparent); }
.reckoning.built .reck-meter i.on { background: var(--built); }
.reck-head { margin-top: var(--space-5); text-transform: uppercase; color: var(--on-dark-muted); }
.reck-lost { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; }
.reck-lost li { padding: 5px 10px; border: 1px solid var(--obsidian-rim); font-size: var(--text-sm); color: var(--on-dark-line); }
.now-card.reckoning .now-sub { color: var(--on-dark-soft); font-size: var(--text-base); margin-top: var(--space-4); max-width: none; }
.now-card.reckoning.built .now-sub { color: var(--on-fill-soft); }
.reck-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); font-size: var(--text-sm); color: var(--on-dark-soft); }
.reck-foot b { color: var(--on-dark); }
.reck-foot .now-statue { margin-top: 0; }
/* The coach, right under the water: one line, an arrow. */
.coach-quick { background: transparent; }
/* Stones, not circles: a square you fill with gold. */
.row-check input { border-radius: 2px; border: 2px solid var(--text-primary); width: 24px; height: 24px; }
.row-check input:checked { background: var(--built); border-color: var(--built); }
.row-check input:after { border-color: var(--ink-on-gold); border-width: 0 0 2.5px 2.5px; width: 11px; height: 6px; }
.skipped-moment .row-check input { border-style: dashed; border-color: var(--error); }
.check-row .row-body:after { left: 11px; width: 2px; }
/* The menu: an obsidian base, the page you are on as a blue block with a gold list. */
.tabs { border-radius: var(--radius-md); border: 0; box-shadow: 0 10px 30px #11121c40; padding: var(--space-1); }
.tabs button { min-height: 52px; }
/* The page fades into the marble under the floating menu, so nothing shows in
   the gap beneath it or behind the phone's own bar. */
body::after { content: ""; position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; height: calc(60px + var(--space-3) + var(--space-5) + env(safe-area-inset-bottom)); pointer-events: none;
  background: linear-gradient(to top, var(--background) calc(var(--space-3) + env(safe-area-inset-bottom)), color-mix(in srgb, var(--background) 92%, transparent) 60%, transparent); }
body.gated::after { display: none; }
/* Every pressed thing has cut corners, whatever came before. */
.shell button, .shell .primary, .shell .secondary, dialog button, dialog .primary, dialog .secondary, .food-actions button, .meal-buttons button,
.moment-quick, .water-link-add, .day-nav button, .week-nav button, .chips button, .presets button { border-radius: var(--radius-sm); }
.moment-quick { border-radius: var(--radius-sm); }
/* Brand: the gold wreath beside the word, rendered from the Träning wreath (scripts/brand-mark.cjs). */
.brand-mark { width: 28px; height: 28px; flex: none; align-self: baseline; margin-right: 1px; transform: translateY(6px); }
.brand-dot { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); }
.statue-link { width: auto; gap: 4px; padding: 0 var(--space-2) 0 var(--space-2); color: var(--text-primary); text-decoration: none; display: flex; align-items: center; }
.statue-link svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: square; stroke-linejoin: round; }
.statue-link .numeral { margin: 0; font-size: var(--text-xl); color: var(--text-primary); }
.masthead-actions { display: flex; gap: var(--space-1); }
/* The statue page: a dark niche the figure stands in, its band below, the stones under that. */
.statue-card { padding: 0; overflow: hidden; }
.statue-niche { color: var(--on-dark); padding: var(--space-6) var(--space-5) 0; display: grid; justify-items: center; position: relative; overflow: hidden; }
.statue-niche:before { content: ""; position: absolute; left: 50%; top: 32px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: var(--niche); }
.statue-figure { position: relative; }
.statue-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.statue-band { position: relative; width: 100%; max-width: 320px; margin-top: calc(-1 * var(--space-1)); padding: var(--space-2) 0 var(--space-1); text-align: center; font-family: var(--display); font-size: var(--text-lg); text-transform: uppercase; }
.statue-niche:after { content: ""; display: block; width: 100%; }
/* Under the niche: the level, the bar to the next, and when it comes. */
.level { padding: var(--space-5) var(--space-5) var(--space-5); }
.level-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.level-now { display: grid; gap: 0; margin: 0; }
.level-now .eyebrow { margin: 0 0 var(--space-1); }
.level-total { display: grid; justify-items: end; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.level-total b { font-size: var(--text-xl); font-weight: 700; }
.level-total span { font-size: var(--text-sm); color: var(--text-secondary); }
.level-bar { position: relative; height: 12px; margin-top: var(--space-4); background: var(--surface-secondary); overflow: hidden; }
.level-bar b { position: absolute; inset: 0 auto 0 0; background: var(--built); }
.level-ends { display: flex; justify-content: space-between; margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.level-next { margin: var(--space-3) 0 0; color: var(--text-secondary); }
.level-next b { color: var(--text-primary); }
/* Today, rule by rule: a gold diamond earned, an open one still there, a struck one gone. */
.score-list, .rule-list, .path-list { list-style: none; margin: 0; padding: 0; }
.score-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.score-list li > span:nth-child(2), .rule-list li > span:nth-child(2), .path-head > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.score-list small, .rule-list small, .path-head small { font-size: var(--text-sm); color: var(--text-secondary); }
.score-mark { width: 12px; height: 12px; margin-left: 3px; transform: rotate(45deg); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.score-list li.on .score-mark { background: var(--built); box-shadow: none; }
.score-list li.off .score-mark { box-shadow: inset 0 0 0 1.5px var(--error); opacity: 0.7; }
.score-pts { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.score-list li.on .score-pts, .score-list li.part .score-pts { color: var(--built-text); }
.score-list li.part .score-mark { box-shadow: inset 0 0 0 1.5px var(--built); }
.score-list li.off { color: var(--text-secondary); }
.score-week { margin: var(--space-3) 0 0; }
.rule-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-2) 0; }
.rule-pts { font-weight: 800; color: var(--built-text); font-variant-numeric: tabular-nums; }
.rule-list + .muted { margin-top: var(--space-3); }
/* The way to Arete: the five stages, each with its levels as a row of squares, a level a week. */
.path-now { margin: 0 0 var(--space-2); }
.path-now b { color: var(--text-primary); }
.path-stage { padding: var(--space-4) 0; border-top: 1px solid var(--border); color: var(--text-tertiary); }
.path-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; }
.path-stage.on { color: var(--text-primary); }
.path-stage .numeral { font-size: 26px; margin: 0; color: inherit; }
.path-stage.on .numeral { color: var(--built-text); }
.path-head .muted { font-size: var(--text-sm); white-space: nowrap; }
.path-weeks { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; margin: var(--space-3) 0 0; padding: 0; }
.path-weeks li { display: grid; place-items: center; aspect-ratio: 1; font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-tertiary); box-shadow: inset 0 0 0 1px var(--border); }
.path-weeks li.on { background: var(--built); color: var(--ink-on-gold); box-shadow: none; }
.path-weeks li.now { color: var(--built-text); box-shadow: inset 0 0 0 2px var(--built); background: color-mix(in srgb, var(--built) 14%, transparent); }
/* The week toward its level, under today's blows. */
.week-goal { margin-top: var(--space-4); }
.week-goal p { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.week-goal p > span:first-child { font-weight: 600; letter-spacing: 0.01em; font-size: var(--text-xs); color: var(--text-primary); align-self: center; }
.week-goal b { color: var(--text-primary); }
.level-bar.small { height: 8px; margin-top: var(--space-2); }
/* The column on Träning. */
/* The column is a photograph of marble. The ghost is the column to come; the stone is what stands. */
/* The arch on Mat: twelve voussoirs laid in pairs from the springings, the keystone gold inside the goal.
   What is still to come stands as a faint shadow of the arch, as the temple does. */
.valv .ghost { opacity: 0.1; filter: grayscale(1); }
.valv .sten, .valv .fot, .valv .key-gold { filter: drop-shadow(0 3px 5px #00000040); }
/* Past the goal the keystone keeps its light and shade, stained brick red. */
.valv .sten.over { filter: url(#valv-rod) drop-shadow(0 3px 5px #00000040); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .valv .ghost { opacity: 0.2; } }
:root[data-theme="dark"] .valv .ghost { opacity: 0.2; }
/* The goal under Kvar stands below the arch's feet: the dial keeps room for two lines of it, so it never
   runs into the macros, and it gets the centre's whole width so a narrow phone keeps it on one line. */
.gauge-dial .gauge-center small { max-width: none; }
.gauge.over .gauge-center strong { color: var(--error); }
.macro { background: transparent; padding: var(--space-2) 0 0; border-top: 2px solid var(--text-primary); border-radius: 0; }
.macro-bar, .macro-bar div { border-radius: 0; }
.macro-bar { height: 8px; }
/* Motion for the stone: a column rises, the pediment lands. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes raise { from { transform: scaleY(0); } }
  #main[data-draw] .column .stone { animation: raise var(--dur-slow) var(--ease-out) both; transform-box: view-box; transform-origin: 50% 100%; }
  #main[data-draw] .column .gold, #main[data-draw] .column .joint { animation: fade-in var(--dur-slow) var(--ease-out) 400ms both; }
  #main[data-draw] .level-bar b { animation: bar-in var(--dur-slow) var(--ease-out) 200ms both; transform-origin: left; }
  #main[data-draw] .statue-gilt { animation: fade-in var(--dur-slow) var(--ease-out) 300ms both; }
}
/* The box timer is a chip above the heading, with room under it. */
/* A missing weight asks in blue text, not with a blue frame. */
/* Menu text on obsidian, in both themes. */
.tabs button { color: var(--on-dark-muted); }
.tabs button[aria-current="page"], .tabs button[aria-current="page"] svg { color: var(--accent-foreground); }

/* Polish. The day's numeral is cut in the corner as a roman inscription, in the accent. */
.date-numeral { font-family: var(--display); font-size: 200px; letter-spacing: -6px; top: 36px; right: -10px; color: var(--accent); opacity: 0.08; }
@media (min-width: 768px) { .date-numeral { font-size: 260px; right: 0; top: 0; letter-spacing: -8px; } }
/* The shift card's head is an inscription, like every other head of its kind. */
.shift-top h2 { text-transform: uppercase; color: var(--text-secondary); }
.shift-hero { padding: var(--space-5); }
/* Morning cells: a word fits as well as a number. */
.morning-cell strong { font-size: min(28px, 22cqi); }
/* Marble: a faint vein in the ground, cut once as an SVG so it costs nothing. */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.24 0 0 0 0 0.22 -3.2 0 0 0 0.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.05'/%3E%3C/svg%3E"); background-attachment: fixed; background-size: 600px 600px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.58 0 0 0 0 0.85 -3.4 0 0 0 0.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.02'/%3E%3C/svg%3E"); } }
:root[data-theme="dark"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.012' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.58 0 0 0 0 0.85 -3.4 0 0 0 0.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.02'/%3E%3C/svg%3E"); }
/* Cards stand on the marble, not in it. */
.card, .shift-hero { background: var(--surface); }
/* The skip cross waits until you look for it. */
.moment-quick.skip { opacity: 0.45; background: transparent; }
.moment-quick.skip:focus-visible, .check-row:hover .moment-quick.skip { opacity: 1; }
/* Motion: the pediment lands on the last column; the menu block glides. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes land { from { opacity: 0; transform: translateY(-14px); } }
  .now-card.built.now-enter { animation: rise var(--dur-slow) var(--ease-out) both; }
  .statue-figure img { transition: opacity var(--dur-slow) var(--ease-out); }
  .coach-quick, .water-link, .week-row, .statue-link { transition: transform var(--dur-press) var(--ease-out), background var(--dur-fast) var(--ease); }
  .coach-quick:active, .water-link:active, .statue-link:active { transform: scale(0.98); }
}

/* Personalkollen. Punched in is gold: the day counting itself. A day the schedule
   wrote carries a small outlined mark, so the days you set yourself stand out. */
.shift-status.punched { color: var(--built-text); font-weight: 700; }
.shift-status.punched .status-dot { background: var(--built); border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; }
/* The day's work done: the punch-out home, in the same gold. */
.shift-status.over { color: var(--built-text); font-weight: 600; }
.shift-top h2 .source { display: block; margin-top: 2px; letter-spacing: 1px; font-weight: 600; color: var(--text-tertiary); text-transform: none; }
.tag.schedule { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text-secondary); }
.week-row.today .tag.schedule { background: transparent; }
.home-card.confirmed .home-detail { color: var(--built-text); font-weight: 600; }
.shift-status { white-space: nowrap; }
.shift-top { align-items: flex-start; }

/* Idag, second look at the phone. The headline scales with the name: a word is a
   monument, a sentence is a line. Never hyphenated. */
.now-title { text-wrap: balance; }
.now-title.mid { font-size: clamp(44px, 14vw, 64px); line-height: 0.92; letter-spacing: -1.2px; }
.now-title.long { font-size: clamp(34px, 10.5vw, 48px); line-height: 1; letter-spacing: -0.8px; }
/* The temple, calmer: solid lines, the columns to come as faint stone, the one you are on outlined. */
.temple .ghost { fill: var(--surface-secondary); stroke: none; }
.temple .ghost.now { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; }
/* The day's numeral in the corner was noise on a phone. */
.date-numeral { display: none; }
/* Water: the numbers on one line, the note under them, the buttons compact. */
.water-link { flex-wrap: nowrap; align-items: center; gap: var(--space-2); }
.water-link > span:first-of-type { gap: 1px; line-height: 1.25; }
.water-link small { display: block; margin: 0; }
.water-link strong { white-space: nowrap; }
.water-link-add { min-width: 0; padding: 0 var(--space-3); font-size: var(--text-sm); }
.water-link-add.bottle { padding: 0 var(--space-2); }
@media (max-width: 429px) { .water-link-add.bottle span { display: none; } }
/* The coach is a row, not a box. */
.coach-quick { border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; padding: var(--space-3) 0; margin: var(--space-2) 0 var(--space-5); }
.coach-quick span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.coach-quick strong { font-size: var(--text-base); }
.coach-quick small { font-size: var(--text-sm); }
.water-link > span:first-of-type { display: block; }
.water-link strong { margin-left: 2px; }
/* The day's hours: stamped, at home, together. Three small columns, the total in the accent. */
.hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border); }
.hours div { display: grid; gap: 2px; padding: 0 var(--space-3); border-left: 1px solid var(--border); min-width: 0; }
.hours div:first-child { padding-left: 0; border-left: 0; }
.hours dt { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
.hours dd { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours .total dd { color: var(--accent-text, var(--accent)); }
.hours-tasks { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
.tag.home { background: var(--accent-soft); color: var(--accent-strong, var(--accent)); }
.week-home { color: var(--text-secondary); font-weight: 500; }

/* The connection code with its Visa beside it, so it can be read off and copied. */
.token-field { display: flex; gap: var(--space-2); align-items: stretch; }
.token-field input { flex: 1; min-width: 0; }
.token-field button { flex: 0 0 auto; }

/* The temple, second cut: Doric, six columns built drum by drum. Built stone is
   the accent with a shaded side and two flutes; stone to come is faint; the
   drum you are on is outlined. Capitals, frieze and pediment are earned. */
.temple rect, .temple text { stroke: none; }
.temple text.day { font-family: var(--font); font-size: 12px; font-weight: 700; fill: var(--text-secondary); }
.day-progress { margin: var(--space-4) 0 var(--space-6); }

/* The temple in marble. It stands in a dark niche, like the statue: the ghost of
   the whole temple faint behind, the built part in full stone in front. */
.day-progress, .week-temple { background: var(--obsidian); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-3); color: var(--on-dark); }
.day-progress p { color: var(--on-dark-muted); }
.day-progress p b { color: var(--on-dark); }
.week-temple { box-shadow: none; }
.week-temple p { color: var(--on-dark-muted); }
.week-temple p b { color: var(--on-dark); }
.temple.marble { display: block; width: 100%; height: auto; }
.temple.marble .ghost { opacity: 0.16; filter: grayscale(1); }
.temple.marble .stone { filter: drop-shadow(0 6px 10px #00000080); }
.temple.marble .now { fill: var(--built); }
.temple.marble text.day { fill: var(--on-dark-muted); font-family: var(--font); font-size: 26px; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .temple.marble .stone { transition: clip-path var(--dur-slow) var(--ease-out); }
  #main[data-draw] .temple.marble .stone { animation: fade-in var(--dur-slow) var(--ease-out) both; }
  .day-progress.land .temple.marble .stone { animation: fade-in var(--dur-slow) var(--ease-out) both; }
  /* The gold comes after the last column has risen. */
  .day-progress.land .temple.marble .gilt { animation: fade-in var(--dur-slow) var(--ease-out) 500ms both; }
}

/* A new step on the statue: the header link wears the gold dot of news, the one
   Mentor's tabs have (.news-dot), until you look; then the step is struck once over
   the one you saw (carve.js). Mentor's link wears the same dot while an answer or a
   report waits unread. A dot, not a frame that moves: nothing loops for decoration. */
.statue-link, .coach-link { position: relative; isolation: isolate; }
.statue-link.new::after, .coach-link.new::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--built); box-shadow: 0 0 0 2px var(--background); pointer-events: none; }
/* The step you saw before is shown only while the new one is struck over it. */
.statue-figure .carved-from { visibility: hidden; }
.statue-news { margin: var(--space-4) var(--space-4) 0; text-align: center; text-transform: uppercase; color: var(--built-text); }
/* Until it is struck, the step you saw stands alone; the new one fades in over it where the stone fell. */
.statue-figure[data-carve] .carved-from { visibility: visible; }
.statue-figure[data-carve] .carve { opacity: 0; }
/* The strike (carve.js): the temple darkens around the figure, stone and dust fall
   on a canvas over the whole niche, and a sheen of gold crosses the new step. */
.statue-niche { isolation: isolate; }
.statue-niche .carve-hush { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 48%, #05060c00 35%, #05060ce6 100%); }
.statue-niche .carve-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.statue-figure .carve-glint {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, #ffe2a066 47%, #fff3d0b3 50%, #ffe2a066 53%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
}
@media (prefers-reduced-motion: no-preference) {
  /* The news waits for the stone to fall, then lands with the band's gold. */
  .statue-card:has(.statue-figure[data-carve]) .statue-news:not(.land) { opacity: 0; }
  .statue-news.land { animation: news-land var(--dur-slow) var(--ease-out) both; }
  .statue-band.fresh.gild { animation: band-gild 2200ms var(--ease-out) both; }
  @keyframes news-land { from { opacity: 0; letter-spacing: 12px; } to { opacity: 1; letter-spacing: 3.5px; } }
  .statue-link.new::after, .coach-link.new::after { animation: pop var(--dur-base) var(--ease-out) both; }
  @keyframes band-gild { 0% { color: #74561e; } 35% { color: #c58d22; text-shadow: 0 0 14px #f3c76acc, 0 1px 0 #ffffffcc; } 100% { color: #74561e; } }
}
/* The niche is a temple in the dark, lit the way the statue is: from a high
   window on the left, through the dust. The statue stands on its floor, with a
   shadow where the plinth meets it. */
.statue-niche { background: var(--obsidian) url("statyn/nisch.webp") center 30% / cover no-repeat; }
.statue-niche:before { display: none; }
.statue-figure { width: min(300px, 82%); aspect-ratio: 2 / 3; filter: drop-shadow(-6px 10px 14px #00000099) drop-shadow(0 0 1px #00000066); }
.statue-figure::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, #000000cc, #00000000); }

/* A meal folds from its head: name, pen, total and a chevron on one line. The toggle
   reaches over the whole line, so a tap on the name folds too; the pen sits above it. */
.meal-head { position: relative; justify-content: flex-start; gap: var(--space-1); }
.meal-head .meal-name { min-width: 0; overflow-wrap: anywhere; }
.meal-head .meal-toggle { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: var(--space-2); margin-left: auto; min-height: 44px; cursor: pointer; font: inherit; color: inherit; }
.meal-head .meal-toggle::after { content: ""; position: absolute; inset: 0; }
/* A pressed button shrinks a little, and a transform would hold the reach to the button itself:
   the tap would start on the toggle and end on the name, and fold nothing. */
.meal-head .meal-toggle:active:not(:disabled) { transform: none; }
.meal-head:has(.meal-toggle:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.meal-rename { all: unset; box-sizing: border-box; position: relative; z-index: 1; display: inline-grid; place-items: center; flex-shrink: 0; align-self: center; width: 36px; height: 44px; margin-left: calc(var(--space-1) * -1); cursor: pointer; color: var(--text-tertiary); }
.meal-rename svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linejoin: round; }
.meal-rename:hover { color: var(--text-secondary); }
.meal-rename:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.meal-chevron { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; align-self: center; fill: none; stroke: var(--text-secondary); stroke-width: var(--icon-line); }
.meal.shut .meal-chevron { transform: rotate(-90deg); }
.meal-count { font-family: var(--font); font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
@media (prefers-reduced-motion: no-preference) { .meal-chevron { transition: transform var(--dur-fast) var(--ease-out); } }
/* Mål och plan under Inställningar: two short headings, the forms under them. */
.goals-group .goals-sub { margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; color: var(--text-secondary); }
.goals-group .goals-sub:first-child { margin-top: 0; }
.goals-group .plan-card p { margin: 0 0 var(--space-2); line-height: 1.45; }
/* Fråga coachen in gold, like the rest of what is worth your attention: the title and the arrow. */
.coach-quick strong, .coach-quick span:last-child { color: var(--built-text); }

/* Undersidorna: arken och Inställningar. Ett fält ser ut som ett fält: en ruta
   med namnet ovanför och enheten inne i rutan. Mängden är det enda du måste
   ange, så den står störst, med − och + på var sin sida och portionerna under. */
/* The ready-made programs on Träning, as cards like the passes. */
.pg-lead { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.pg-open { margin-bottom: var(--space-5); }
.pg-list { margin-bottom: var(--space-3); }
/* The workout settings under Inställningar, one choice under another. */
.tr-settings { display: grid; gap: var(--space-5); }
.tr-settings .theme-options { margin: 0; }
.field-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.field-label small, .field small { font-size: var(--text-xs); font-weight: 400; color: var(--text-secondary); margin-left: var(--space-1); }
.field-help { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary); }
.form-help { margin: 0; }
.form-sub { margin: var(--space-5) 0 var(--space-2); text-transform: uppercase; color: var(--text-secondary); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin-top: var(--space-4); }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid > .field-help { margin-top: calc(-1 * var(--space-2)); }
.field { display: grid; gap: var(--space-2); align-content: end; min-width: 0; }
.field > input, .field > select { width: 100%; min-height: 52px; font-size: var(--text-lg); }

/* A number and its unit in one box, the unit inside it. */
.unit-input { display: flex; align-items: center; width: 100%; min-height: 48px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: text; }
.unit-input input { flex: 1; width: 100%; min-width: 0; min-height: 46px; border: 0; background: transparent; padding: 0 var(--space-2) 0 var(--space-3); font-variant-numeric: tabular-nums; }
.unit-input input:focus-visible { outline: none; }
.unit-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.unit-input:has([aria-invalid="true"]) { border-color: var(--error); }
.unit-input > span { flex-shrink: 0; padding-right: var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); pointer-events: none; }
.field .unit-input { min-height: 52px; }
.field .unit-input input { min-height: 50px; font-size: var(--text-lg); }
.goal-fields label { align-content: end; }

/* Hur mycket: − [ 150 g ] +, and the usual portions right under it. */
.amount-field .field-label { margin-bottom: var(--space-2); }
.amount-field .segmented { margin-top: 0; }
.amount-field .stepper { clear: both; }
.stepper { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; gap: var(--space-2); }
.stepper .step { min-height: 68px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 2px solid var(--text-primary); color: var(--text-primary); }
.stepper .step svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: square; }
.stepper-box { display: flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 68px; padding: 0 var(--space-3); background: var(--surface); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); cursor: text; }
.stepper-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.stepper-box input { flex: 1; width: 100%; min-width: 0; min-height: 0; height: 60px; padding: 0; border: 0; background: transparent; text-align: right; font-family: var(--display); font-size: 46px; line-height: 60px; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.stepper-box input:focus-visible { outline: none; }
.stepper-box input::placeholder { color: var(--text-tertiary); }
.stepper-unit { flex: 1; text-align: left; font-size: var(--text-lg); color: var(--text-secondary); }
.amount-field .field-error { margin: var(--space-2) 0 0; }
.amount-field .food-units { margin: var(--space-3) 0 0; }
.food-units button { min-height: 44px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; }
@media (max-width: 359px) {
  .stepper { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  .stepper-box input { font-size: 38px; }
}

/* What the amount gives, read down the left edge: the calories on one line,
   a bar of where they come from, then the three macros in a row. */
.yield { margin-top: var(--space-5); padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); }
.yield .readout-kcal { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; text-align: left; }
.yield-label { margin: 0 var(--space-1) 0 0; }
.yield .readout-kcal strong { font-size: 32px; line-height: 1; }
.yield-split { display: flex; gap: 2px; height: 6px; margin: var(--space-3) 0; border-radius: 3px; background: var(--gauge-track); overflow: hidden; }
.yield-split i { display: block; height: 100%; transition: width var(--dur-base) var(--ease-out); }
.yield-split .protein { background: var(--macro-protein); }
.yield-split .carbs { background: var(--macro-carbs); }
.yield-split .fat { background: var(--macro-fat); }
@media (prefers-reduced-motion: reduce) { .yield-split i { transition: none; } }
.yield .readout-macros { gap: var(--space-1) var(--space-4); margin: 0; }
.pane-head .food-per-row { justify-content: flex-start; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: var(--space-2); }
.pane-head .food-per { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
#food-a-name, #food-s-name { font-size: clamp(30px, 9vw, 40px); line-height: 1.05; overflow-wrap: anywhere; }

/* Sök: a square box with the glass inside, like every other field. */
.search-box { position: relative; flex: 1; display: flex; min-width: 0; }
.search-box svg { position: absolute; left: 14px; top: 50%; width: var(--icon-md); height: var(--icon-md); transform: translateY(-50%); fill: none; stroke: var(--text-secondary); stroke-width: var(--icon-line); stroke-linecap: round; pointer-events: none; }
.search-box input { width: 100%; padding-left: 44px; }
.food-search input, .food-search button, .food-quick button, .pane-foot > button { border-radius: var(--radius-sm); }
#food-ean { font-size: var(--text-xl); letter-spacing: 2px; font-variant-numeric: tabular-nums; }
#food-ean-form .field-label { margin-top: var(--space-5); }
/* Without a camera the message is the page: said in a box, not lost above the field. */
.scanner[hidden] + .scan-status:not(:empty) { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-primary); line-height: 1.45; }

/* Ny vara: what it is, then the values per 100 as a group with gram or ml beside the heading. */
.form-group { min-width: 0; margin: var(--space-6) 0 0; padding: 0; border: 0; }
.form-group legend { float: left; padding: 0; font-family: var(--display); font-size: var(--text-xl); line-height: 40px; }
.form-group legend .per-unit { margin-left: var(--space-1); font-family: var(--font); font-size: var(--text-sm); color: var(--text-secondary); }
.form-group .form-grid { clear: both; padding-top: var(--space-3); margin-top: 0; }
.segmented { float: right; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.segmented label { position: relative; display: flex; align-items: center; min-height: 34px; padding: 0 var(--space-3); border-radius: 2px; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.segmented input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented label:has(:checked) { background: var(--text-primary); color: var(--surface); }
.segmented label:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Passet: three short headings, the choices as boxes you tick, and Spara always in reach. */
#custom-dialog, #sleep-dialog, #sova-dialog, #weight-dialog, #flag-dialog { --sheet-pad: var(--space-6); padding: var(--sheet-pad) var(--sheet-pad) 0; }
@media (max-width: 430px) { #custom-dialog, #sleep-dialog, #sova-dialog, #weight-dialog, #flag-dialog { --sheet-pad: var(--space-4); } }
/* Hur sov du?: the night written as you would say it, its length read back at once. */
#sleep-dialog label { display: block; margin-top: var(--space-4); font-weight: 650; }
#weight-dialog label { display: block; margin-top: var(--space-4); font-weight: 650; }
/* Eget moment: the sheet of the food dialog, sized to what is in it. What, when in
   the day as three cards, and the sub-tasks as a numbered list with + at its foot. */
dialog.food-dialog.own-dialog { height: fit-content; max-height: min(760px, calc(100dvh - 24px - env(safe-area-inset-top))); }
.own-dialog .food-pane, .own-dialog .pane-body { flex: 0 1 auto; }
.own-dialog .pane-body { padding-top: var(--space-2); }
.own-dialog .field > input { border-radius: var(--radius-md); }
.own-group { min-width: 0; margin: var(--space-6) 0 0; padding: 0; border: 0; }
.own-group legend { padding: 0; margin-bottom: var(--space-2); }
.own-group .field-help { margin: 0 0 var(--space-3); }
.own-part { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.own-part label { position: relative; display: grid; gap: 2px; align-content: center; min-height: 64px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.own-part input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.own-part b { font-family: var(--display); font-size: var(--text-lg); font-weight: 600; line-height: 1.1; }
.own-part small { font-size: var(--text-2xs); color: var(--text-secondary); line-height: 1.25; }
.own-part label:has(:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.own-part label:has(:checked) b { color: var(--accent-strong); }
.own-part label:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.own-steps { list-style: none; padding: 0; margin: 0; counter-reset: own; }
.own-steps:not(:empty) { margin-bottom: var(--space-3); border-top: 1px solid var(--border); }
.own-steps li { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; border-bottom: 1px solid var(--border); }
.own-steps .skin-num { min-width: 20px; font-family: var(--display); font-size: var(--text-base); color: var(--built-text); text-align: center; }
.own-step-name { flex: 1; min-width: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.own-steps .text-button { min-height: 44px; padding: 0 var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }
.own-step-add { display: flex; gap: var(--space-2); }
.own-step-add input { flex: 1; min-width: 0; min-height: 48px; border-radius: var(--radius-md); }
.own-step-add button { flex-shrink: 0; width: 48px; min-height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.own-step-add svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.own-dialog .pane-foot .danger { color: var(--error); }
@media (max-width: 380px) { .own-part label { padding-inline: var(--space-2); } .own-part b { font-size: var(--text-base); } }
/* + beside Att göra: a moment of your own, straight into the day. */
.own-add { flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font-size: 24px; line-height: 1; display: inline-grid; place-items: center; }
@media (hover: hover) { .own-add:hover { border-color: var(--accent); color: var(--accent); } }
.mine-name small { display: block; font-size: var(--text-xs); color: var(--text-secondary); }
#weight-dialog .unit-input { display: flex; margin-top: var(--space-2); }
#weight-dialog #weight-kg { width: 100%; font-family: var(--display); font-size: var(--text-2xl); text-align: center; font-variant-numeric: tabular-nums; }
/* Somnade and Vaknade side by side, each a box you type the time in. */
.sleep-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
#sleep-dialog .sleep-times label { display: grid; gap: var(--space-2); margin-top: var(--space-2); text-align: center; }
#sleep-dialog .sleep-times input { width: 100%; min-width: 0; font-family: var(--display); font-size: var(--text-xl); text-align: center; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
/* The watch's night as one tap, when you wore it; your own words under it. */
.sleep-watch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.sleep-watch[aria-pressed="true"] { border-color: var(--built); background: color-mix(in srgb, var(--built) 14%, var(--surface)); }
.sleep-watch-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-secondary); }
.sleep-watch-icon svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.sleep-watch-text { display: grid; gap: 2px; }
.sleep-watch-text small { font-size: var(--text-xs); color: var(--text-secondary); }
.sleep-or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.sleep-or::before, .sleep-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sleep-total { min-height: 1.5em; margin: var(--space-3) 0 0; text-align: center; font-weight: 650; color: var(--built-text); }
#custom-dialog h2 { margin-bottom: 0; }
#custom-dialog .form-sub:first-of-type { margin-top: var(--space-4); }
#custom-dialog .presets { margin: 0; }
.presets button { min-height: 40px; border-radius: var(--radius-sm); font-weight: 600; }
#custom-dialog .toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
#custom-dialog .toggle { gap: var(--space-2); min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
#custom-dialog .toggle input { width: 18px; height: 18px; min-height: 18px; }
#custom-dialog .toggle:has(:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
#custom-dialog .toggle:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
#custom-dialog .toggle input:focus-visible { outline: none; }
#custom-dialog .block-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 44px; align-items: end; gap: var(--space-2); margin: 0 0 var(--space-3); }
#custom-dialog .block-name { grid-column: 1 / -1; margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
#custom-dialog .block-fields label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
#custom-dialog .block-fields input { min-height: 52px; padding: var(--space-2) var(--space-3); font-size: var(--text-lg); }
#custom-dialog .block-arrow { display: block; padding-bottom: 14px; color: var(--text-tertiary); }
#custom-dialog .remove { min-height: 52px; }
#custom-dialog .add-block { padding-inline: 0; color: var(--accent-strong); font-weight: 600; }
.edit-duration { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.edit-duration:empty { display: none; }
.sheet-actions { position: sticky; bottom: 0; z-index: 1; margin: var(--space-5) calc(-1 * var(--sheet-pad)) 0; padding: var(--space-3) var(--sheet-pad) calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); flex-wrap: nowrap; }
.sheet-actions button { flex: 1; min-height: 52px; }

/* Inställningar: + opens a section and − closes it; labels sit over their fields;
   a secondary action looks like one everywhere. */
.disclosure-plus::before { font-size: var(--text-xl); }
.routine-group[open] .disclosure-plus::before { content: "−"; }
.routine-content > label { display: block; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.routine-content > input { display: block; width: 100%; margin: 0; }
.routine-content > input[readonly] { color: var(--text-secondary); font-size: var(--text-sm); }
.routine-content > .actions.start { justify-content: flex-start; }
@media (max-width: 559px) {
  .routine-content .primary, .routine-content .actions .secondary { width: 100%; }
  .routine-content .push-actions .secondary { width: auto; }
}

/* The statue stands on a slab of the same marble: a plinth with the step and
   stage cut into it in gold leaf, lit from above like everything in the niche,
   and a darker step of marble under it. */
.statue-band {
  background: linear-gradient(#ffffff59, #ffffff00 22%, #ffffff00 70%, #2a1d0f38), #e9e2d4 url("statyn/plint.webp") center / cover;
  color: #74561e; letter-spacing: 5px;
  text-shadow: 0 1px 0 #ffffffd9, 0 -1px 0 #3a2a1240;
  box-shadow: inset 0 1px 0 #fffbf0e6, inset 0 -2px 0 #3a2a1233, 0 1px 0 #00000066, 0 10px 18px -6px #000000cc;
  border-radius: 1px;
}
.statue-niche:after {
  height: 12px; margin-top: 3px;
  background: linear-gradient(#ffffff33, #00000000 40%, #00000066), #8e877b url("statyn/plint.webp") center 70% / cover;
  box-shadow: inset 0 1px 0 #ffffff59, 0 6px 12px -4px #000000b3;
}

/* A new step waits to be struck: the stone takes taps, and under the niche a
   call to strike with one mark for each blow, gilded as they land. */
.statue-figure[data-carve] { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.carve-call { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0; text-align: center; }
.carve-call .muted { margin: 0; font-size: var(--text-sm); }
.carve-strike {
  min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--built); border-radius: 4px;
  background: transparent; color: var(--built-text); font: inherit; font-size: var(--text-xs); font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; cursor: pointer;
}
.carve-strike:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.carve-pips { display: flex; gap: 10px; }
.carve-pips i { width: 9px; height: 9px; border: 1px solid var(--built); transform: rotate(45deg); }
.carve-pips i.on { background: var(--built); }
@media (prefers-reduced-motion: no-preference) {
  .carve-pips i.on { animation: mark-in var(--dur-base) var(--ease-out) both; }
}


/* A skipped moment is a miss, and it looks like one: a red cross in its stop,
   the name in red and no stone for it. Not struck through — that reads as done. */
.skipped-moment .row-title { text-decoration: none; color: var(--error); }
.skipped-moment .row-check input:disabled { opacity: 1; border-style: solid; border-color: var(--error); background: var(--skip-soft); }
.skipped-moment .row-check input:after { content: "\2715"; width: auto; height: auto; border: 0; transform: none; color: var(--error); font-size: 13px; font-weight: 700; line-height: 1; }
.skipped-moment .row-body:after { background: color-mix(in srgb, var(--error) 40%, var(--border)); }
.past-label.miss { color: var(--error); font-weight: 600; }
.check-group .card-head .miss { color: var(--error); font-weight: 600; }
.day-progress .miss { color: var(--error-on-dark); font-weight: 600; }
/* The drum that was skipped: the same marble, stained the colour of a miss. */
.temple.marble .missed { opacity: 0.9; }
/* The week's Hercules: the still from the eye of the 3D, the canvas over it once
   the model is in, then the seven days under him. A drag across turns him, two
   fingers bring him closer; up and down still scrolls the page. */
/* A pose with room round it (the push, framed for his turn) shows a part of its
   picture (HERO_VIEW in app.js): the page sets the stage's shape and lays the
   still so that part fills it, and the 3D engine renders the same part. */
.hero-stage { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; margin: 0 auto; }
.hero-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-stage.viewed { overflow: hidden; }
.hero-stage.viewed img { position: absolute; left: var(--hero-x); top: var(--hero-y); width: var(--hero-w); height: var(--hero-h); max-width: none; }
.hero-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; touch-action: pan-y; cursor: grab; }
.hero-3d-canvas:active { cursor: grabbing; }
.hero-stage.ready .hero-3d-canvas { opacity: 1; }
.hero-stage.ready img { visibility: hidden; }
/* The week under him is a stylobate: one course of seven blocks cut from the
   plinth's marble, the veins running on across the hairline joints. A block not
   yet laid is its ghost, as in the temple; a whole day lays it, a fallen day is
   the marble stained brick red like the missed drum, today is laid as far as it
   came, and a whole week gilds the course. The card is dark in both themes, so
   the names take its own greys, small and spaced as the eyebrows are. */
.hero-days { --brick: #a8401f; --leaf-hi: #f8dc8c; --leaf-lo: #b07a18; list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: var(--space-3) 0 0; padding: 0; }
.hero-days li { display: grid; gap: 7px; justify-items: center; }
.hero-block, .hero-block i { display: block; width: 100%; height: 14px; background: url("statyn/plint.webp") calc(var(--i) * 100% / 6) 45% / 700% auto; }
.hero-block { position: relative; }
.hero-block::before { content: ""; position: absolute; inset: 0; background: var(--obsidian); opacity: 0.84; }
.hero-block i { position: absolute; inset: 0; box-shadow: inset 0 1px 0 #ffffff80, inset 0 -2px 0 #00000038; }
.hero-days li:first-child .hero-block, .hero-days li:first-child .hero-block i { border-radius: 2px 0 0 2px; }
.hero-days li:last-child .hero-block, .hero-days li:last-child .hero-block i { border-radius: 0 2px 2px 0; }
.hero-days .fell .hero-block i { background-image: linear-gradient(var(--brick), var(--brick)), url("statyn/plint.webp"); background-blend-mode: multiply; }
/* Gold leaf takes the window's light on its top edge and darkens below. */
.week-hero.built .hero-block i { background-image: linear-gradient(var(--leaf-hi), var(--built) 45%, var(--leaf-lo)), url("statyn/plint.webp"); background-blend-mode: multiply; }
.hero-days .day { position: relative; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark-muted); }
.hero-days .now .day { color: var(--on-dark); }
.hero-days .now .day::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; background: var(--built); transform: translateX(-50%) rotate(45deg); }
.week-hero .hero-days + p { margin-top: var(--space-4); }
@media (prefers-reduced-motion: no-preference) {
  .hero-3d-canvas { transition: opacity var(--dur-slow) var(--ease-out); }
  #main[data-draw] .hero-stage img { animation: fade-in var(--dur-slow) var(--ease-out) 200ms both; }
}

/* Water fills its row as a sea rolling in toward the bottle, its beach. Three
   waves in malachite, the stone of water: deepest far out and brighter toward the
   shore. They stand still, a picture of the sea, and the last one stands where you
   are, until 2,5 l is open sea. The sea is deep enough in both themes to carry
   white words; the words, the glass and the bottle beside it take --water. */
.water-link { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; padding: 6px 6px 6px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sea-mid) 5%, var(--background)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea-mid) 22%, transparent); }
.water-link > :not(.water-fill) { position: relative; z-index: 1; }
.water-link .water-link-add.bottle { background: var(--surface); }
.water-link.wet > svg { fill: #fff; color: #fff; }
.water-fill { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: var(--water-to); pointer-events: none; }
/* Full: the sea runs past the edge, so the waves never draw back from it. */
.water-link.full .water-fill { width: calc(100% + 64px); }
.water-fill .wave {
  position: absolute; top: 0; bottom: 0; left: -16px; right: var(--back); background: var(--sea);
}
/* Each wave's front is a curl, the same water as the wave, a little past its end.
   The curl is a file of its own: the app only loads images from itself. */
.water-fill .wave::after { content: ""; position: absolute; top: calc(var(--period) * -1); bottom: calc(var(--period) * -1); left: calc(100% - 1px); width: 13px; background: var(--sea); -webkit-mask: url("vag.svg") 0 0 / 100% var(--period) repeat-y; mask: url("vag.svg") 0 0 / 100% var(--period) repeat-y; }
.water-fill .shore { --back: 0px; --period: 34px; --sea: var(--sea-shore); }
.water-fill .mid { --back: 24px; --period: 40px; --sea: var(--sea-mid); }
.water-fill .deep { --back: 48px; --period: 46px; --sea: var(--sea-deep); background: linear-gradient(to left, var(--sea) 40px, var(--sea-far)); }
/* The sun on the water: a bright surface and soft light on it. Screened, so it only lights the sea. */
.water-fill::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 45%) 0 0 / 100% 100% no-repeat,
    radial-gradient(ellipse 26px 4px at 30% 30%, rgb(255 255 255 / 0.5), transparent 70%) 0 0 / 96px 44px,
    radial-gradient(ellipse 16px 3px at 70% 70%, rgb(255 255 255 / 0.4), transparent 70%) 0 0 / 74px 36px;
}
/* The white copy of the words lies in a window as wide as the water, measured
   on the row (--w is the fill in hundredths of it), and reaches over the curl
   of the last wave as far as it ever rolls in, and a little more: blue words on
   the curl's blue cannot be read, and a cut short of it splits a digit in two. Where the curl draws back, an outline of deep sea keeps the
   white words clear on the pale row. Inside it the words start where the real ones do:
   padding, drop and gap. */
.water-over { --curl: 28px; position: absolute; top: 0; bottom: 0; left: -36px; width: calc(var(--w) * 1cqw + var(--curl)); overflow: hidden; pointer-events: none; }
.water-over > span { display: block; width: 100cqw; box-sizing: border-box; padding-left: 36px; white-space: nowrap; color: #fff; text-shadow: -1px -1px 0 var(--sea-deep), 1px -1px 0 var(--sea-deep), -1px 1px 0 var(--sea-deep), 1px 1px 0 var(--sea-deep), 0 0 4px var(--sea-deep); }
.water-link .water-over strong, .water-link .water-over small, .water-link .water-over .water-auto { color: #fff; }
/* A glass rolls the sea in from where it stood (--wf, placeWater in app.js) to where
   it is now (--w). It slides as a whole, a transform, so no frame of it is a layout;
   the white words slide back inside their window by as much, and so stand still. */
@media (prefers-reduced-motion: no-preference) {
  .water-fill, .water-over { --rolled: calc((var(--wf, 0) - var(--w, 0)) * 1cqw); animation: water-rise var(--dur-slow) var(--ease-out) both; }
  .water-over > span { animation: water-rise-back var(--dur-slow) var(--ease-out) both; }
  @keyframes water-rise { from { transform: translateX(var(--rolled)); } }
  @keyframes water-rise-back { from { transform: translateX(calc(var(--rolled) * -1)); } }
}

/* The laurel wreath in gold leaf: the week's temple standing, a fourth drum on
   the column, full rhythm on the statue. */
.krans { position: relative; display: inline-block; flex: none; width: 44px; aspect-ratio: 1; }
.krans img { display: block; width: 100%; height: 100%; }
.laurel-line { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); }
.laurel-line b { color: var(--built-text); }
.week-temple .laurel-line b { color: var(--built); }
/* Around the column's count, behind the figures. */
.krans.behind { position: absolute; inset: 0; width: auto; }
@media (prefers-reduced-motion: no-preference) {
  #main[data-draw] .krans img { animation: krans-in var(--dur-slow) var(--ease-out) 120ms both; }
  @keyframes krans-in { from { opacity: 0; transform: scale(0.94); } }
}

/* The statue in 3D (statyn3d.js): the engine's canvas fills the figure's box
   over the niche, the step image stays under it until the stone is drawn, and
   the box takes the finger: taps strike, a drag turns him. A filter on a
   canvas costs every frame, so the figure's own drop shadow is off here. */
.statue-figure.statue-3d { filter: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.statue-figure.statue-3d:active { cursor: grabbing; }
.statue-figure.statue-3d::before { display: none; }
.statue-figure.statue-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
/* Shown only once this page's stone stands in it (statue3dMount), so no other
   step is ever glimpsed while the block loads. */
.statue-figure.statue-3d.ready canvas { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .statue-figure.statue-3d.ready:not(.at-once) canvas { animation: fade-in var(--dur-slow) var(--ease-out) both; }
}
.statue-figure.statue-3d.no-3d canvas { display: none; }
/* With the statue in 3D the niche is the page itself: no painted temple, no
   dark pool behind him, and the plinth stands on the card. */
.statue-niche.plain { background: var(--surface); color: var(--text-primary); padding: var(--space-3) var(--space-2) 0; }
.statue-niche.plain .statue-figure { width: min(380px, 100%); }
.statue-niche.plain:before { display: none; }

/* Om dig: the fields in four groups, each label's field on one line with its neighbour's. */
.goal-fields input[type="date"] { width: 100%; }

/* The first-run interview: one step at a time, the choices as large buttons.
   A page of its own, tall, with the statue turning far behind it as on the way
   in: the bar at the top, the questions at the thumb, and he in between. */
#intro-dialog { --sheet-pad: var(--space-6); padding: 0; height: min(800px, calc(100dvh - 32px)); overflow: clip; }
#intro-dialog[open] { display: flex; flex-direction: column; }
@media (max-width: 430px) { #intro-dialog { --sheet-pad: var(--space-4); } }
.intro-body { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--sheet-pad) var(--sheet-pad) 0; display: flex; flex-direction: column; }
.intro { flex: 1 0 auto; display: flex; flex-direction: column; }
.intro-head { margin-top: auto; padding-top: var(--space-4); }
.intro-stage { position: absolute; z-index: 0; inset: 0 0 auto; height: 74%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 46%, #000 30%, transparent 74%); mask-image: radial-gradient(ellipse 60% 56% at 50% 46%, #000 30%, transparent 74%); }
.intro-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.intro-still { position: absolute; inset: 8% 10% 0; width: 80%; height: 92%; object-fit: contain; object-position: 50% 30%; opacity: 0.12; transition: opacity var(--dur-slow) var(--ease-out); }
.intro-stage.ready canvas { opacity: 0.2; }
.intro-stage.ready .intro-still { opacity: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .intro-stage.ready canvas { opacity: 0.26; } :root:not([data-theme="light"]) .intro-still { opacity: 0.16; } }
:root[data-theme="dark"] .intro-stage.ready canvas { opacity: 0.26; }
:root[data-theme="dark"] .intro-still { opacity: 0.16; }
@media (prefers-reduced-motion: reduce) { .intro-stage canvas, .intro-still { transition: none; } }
.intro h2 { margin: 0 0 var(--space-2); outline: none; }
.intro-lead { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.intro-progress { height: 4px; border-radius: 999px; background: var(--surface-secondary); overflow: hidden; margin-bottom: var(--space-4); }
.intro-progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur-base) ease; }
.intro-fields { margin-top: var(--space-5); }
/* The work hours sit under the choice, across the whole sheet. */
.intro-fixed { grid-column: 1 / -1; margin-top: 0; }
.intro-fixed[hidden] { display: none; }
.intro-fixed input[type="time"] { width: 100%; min-width: 0; }
.intro-choices { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0; }
.intro-choices legend { display: grid; gap: var(--space-1); padding: 0; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.intro-choices legend small { font-weight: 400; color: var(--text-secondary); font-size: var(--text-xs); }
.choice-list { display: grid; gap: var(--space-2); }
.intro-choices.numbers .choice-list { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.intro-choices.days .choice-list { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.intro-choices.numbers .choice span { padding-inline: var(--space-1); white-space: nowrap; }
.intro-choices.multi .choice-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); font-size: var(--text-base); font-weight: 500; text-align: center; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.intro-choices:not(.numbers) .choice span { justify-content: flex-start; text-align: left; }
.intro-choices.multi .choice span { justify-content: center; text-align: center; }
.choice input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.intro-actions .text-button { flex: 0 0 auto; padding-inline: var(--space-2); }
/* The tour after the questions: each slide a picture from edge to edge, fading
   into the sheet, the words under it and the dots for where you are. The statue
   behind the questions rests meanwhile; the picture is the slide. */
#intro-dialog.slides .intro-stage { display: none; }
#intro-dialog.slides .intro-body { padding: 0; }
.intro-slide > :not(.intro-pic) { margin-inline: var(--sheet-pad); }
.intro-slide .sheet-actions { margin-inline: 0; }
.intro-pic { position: relative; flex: 1 0 auto; min-height: clamp(220px, 46dvh, 520px); margin: 0; overflow: hidden; background: var(--obsidian); }
.intro-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: intro-pic-in var(--dur-slow) var(--ease-out) both; }
.intro-pic.top img { object-position: 50% 0; }
.intro-pic::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
@keyframes intro-pic-in { from { opacity: 0; transform: scale(1.04); } }
.intro-slide .intro-head { margin-top: calc(-1 * var(--space-6)); position: relative; padding-top: 0; }
.intro-slide .eyebrow { color: var(--built-text); }
/* The line under the words, behind a gold rule. */
.intro-quote { margin: var(--space-4) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--built); }
.intro-quote p { margin: 0; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.3; }
.intro-quote cite { display: block; margin-top: var(--space-1); font-style: normal; text-transform: uppercase; color: var(--text-secondary); }
.intro-dots { display: flex; gap: 6px; margin-top: var(--space-4); }
.intro-dots span { width: 6px; height: 6px; border-radius: 1px; background: var(--border-strong); transition: width var(--dur-base) var(--ease-out), background var(--dur-base); }
.intro-dots span.on { width: 21px; background: var(--built); }
@media (prefers-reduced-motion: reduce) { .intro-pic img { animation: none; } .intro-dots span { transition: none; } }
/* The tour is not the questions: a card in the middle of the screen, round at
   every corner behind a thin gold edge, as tall from slide to slide so it never
   moves, and it fades in where it stands instead of rising from the bottom. */
#intro-dialog.tour { margin: auto; width: min(440px, calc(100vw - 32px)); max-width: none; height: min(700px, calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  border: 1px solid color-mix(in srgb, var(--built) 55%, transparent); border-radius: var(--radius-lg); padding: 0; box-shadow: 0 24px 64px #0000005c; }
#intro-dialog.tour .intro-pic { flex: 1 1 0; min-height: 150px; }
#intro-dialog.tour .intro-actions { padding-bottom: var(--space-4); }
#intro-dialog.tour[open]::backdrop { background: #0b0a08b8; }
@media (prefers-reduced-motion: no-preference) {
  #intro-dialog.tour { transform: scale(0.96); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete; }
  #intro-dialog.tour[open] { transform: none; opacity: 1; }
  @starting-style { #intro-dialog.tour[open] { transform: scale(0.96); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .intro-progress span, .choice span { transition: none; } }

/* Upprepa nästa vecka, under the week's days. */
.repeat-week { display: grid; gap: var(--space-2); margin: var(--space-4) 0 var(--space-6); }
.repeat-week button { justify-self: start; }
.repeat-week p { margin: 0; font-size: var(--text-sm); }

/* Konto och synk: signed in, or e-mail and then the code. */
.login-form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.login-form label { font-size: var(--text-sm); font-weight: 600; }
.login-form input { width: 100%; }
.choice-field { display: grid; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.choice-field[hidden] { display: none; }
.choice-field label { font-size: var(--text-sm); font-weight: 600; }
.choice-field input { width: 100%; }
.login-form .connect-button { margin-top: var(--space-1); }
.login-captcha:empty { display: none; }
#login-code { font-size: var(--text-xl); letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.account-who { margin: 0 0 var(--space-1); overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.text-button.danger { color: var(--error); }
.account .actions { gap: var(--space-5); }
.account .actions .text-button, .account-actions .text-button { padding-inline: 0; }
.account-actions .text-button { margin-left: 0; }
.login-or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; color: var(--text-tertiary); font-size: var(--text-xs); }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.google-button { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 48px; width: 100%; text-decoration: none; }
.google-mark { width: 18px; height: 18px; flex-shrink: 0; }

/* The way in: until you are signed in, the app is only this. The statue turns
   far behind, faded into the marble; the words and the sign-in sit at the thumb. */
body.gated .tabs, body.gated .masthead-actions, body.gated footer { display: none; }
.gate { min-height: calc(100dvh - 96px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
.gate-stage { position: fixed; z-index: 0; left: 50%; top: 24px; width: min(100vw, 560px); height: 64dvh; transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 42%, #000 30%, transparent 74%); mask-image: radial-gradient(ellipse 58% 54% at 50% 42%, #000 30%, transparent 74%); }
.gate-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.gate-still { position: absolute; inset: 8% 10% 0; width: 80%; height: 92%; object-fit: contain; object-position: 50% 30%; opacity: 0.12; transition: opacity var(--dur-slow) var(--ease-out); }
.gate-stage.ready canvas { opacity: 0.17; }
/* :root, so that it also wins over the dark theme's opacity for the still below. */
:root .gate-stage.ready .gate-still { opacity: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gate-stage.ready canvas { opacity: 0.24; } :root:not([data-theme="light"]) .gate-still { opacity: 0.16; } }
:root[data-theme="dark"] .gate-stage.ready canvas { opacity: 0.24; }
:root[data-theme="dark"] .gate-still { opacity: 0.16; }
.gate-body { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; }
.gate .eyebrow { margin-bottom: var(--space-3); }
.gate h1 { margin: 0; font-size: clamp(44px, 14.5vw, var(--text-display)); line-height: 0.95; letter-spacing: -1px; outline: none; text-wrap: balance; }
.gate h1 em { font-style: italic; color: var(--accent-strong); }
.gate-lead { margin: var(--space-4) 0 var(--space-5); max-width: 34ch; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.55; }
.gate .login-form { margin-top: 0; }
.gate .login-sent { margin: var(--space-4) 0 var(--space-5); line-height: 1.55; }
.gate .login-more { gap: var(--space-5); margin-top: var(--space-2); }
.gate .login-more .text-button { padding-inline: 0; }
.gate-note { margin: var(--space-5) 0 0; text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .gate-stage canvas, .gate-still { transition: none; } }

/* Mentor: the conversation on the marble, the statue far behind it as on the
   way in, the coach's words beside his bust under a thread of gold, yours in
   Egyptian blue, and the field riding above the tabs. */
.mentor { position: relative; padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
.mentor > *:not(.mentor-stage, .coach-form) { position: relative; z-index: 1; }
.mentor-stage { position: fixed; z-index: 0; left: 50%; top: 40px; width: min(100vw, 520px); height: 70dvh; transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 54% at 50% 40%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 58% 54% at 50% 40%, #000 25%, transparent 72%); }
.mentor-stage img { width: 100%; height: 100%; object-fit: contain; opacity: 0.07; }
:root[data-theme="dark"] .mentor-stage img { opacity: 0.1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mentor-stage img { opacity: 0.1; } }
.mentor-bust { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-secondary) url("statyn/steg-20.webp") no-repeat 54% 3% / 520%; box-shadow: 0 0 0 1.5px var(--built), 0 0 0 4px var(--background); }
.mentor-bust.large { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--built), 0 0 0 6px var(--background), 0 8px 24px #11121c1f; }
.mentor-head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0 var(--space-3); }
.mentor-title { flex: 1; min-width: 0; }
.mentor-title h1 { margin: 0; font-size: var(--text-xl); line-height: 1; }
.mentor-new { flex: 0 0 auto; }
.mentor-new svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.mentor-empty, .mentor-off { padding-top: var(--space-6); }
.mentor-greet { margin: 0; font-family: var(--display); font-size: clamp(40px, 12vw, var(--text-display)); line-height: 0.98; text-wrap: balance; }
.mentor-greet em { font-style: italic; color: var(--accent-strong); }
.mentor-first .mentor-greet { margin-bottom: var(--space-6); }
.mentor-lead { margin: var(--space-4) 0 var(--space-5); max-width: 36ch; font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); }
.coach-chat { display: grid; gap: var(--space-5); margin: var(--space-5) 0 var(--space-6); }
.msg { font-size: var(--text-base); line-height: 1.6; overflow-wrap: anywhere; }
.msg p { margin: 0 0 var(--space-2); }
.msg p:last-child, .msg ul:last-child { margin-bottom: 0; }
.msg ul { margin: 0 0 var(--space-2); padding-left: 1.1em; }
.msg li { padding-left: 2px; }
.msg li::marker { color: var(--built); }
.msg li + li { margin-top: var(--space-1); }
.msg b { font-weight: 700; color: var(--text-primary); }
.msg.from-you { justify-self: end; max-width: 82%; padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--accent-foreground); border-radius: 21px 21px 4px 21px; }
.msg.from-coach { display: flex; gap: var(--space-3); align-items: flex-start; max-width: 100%; }
.msg.from-coach .msg-body { flex: 1; min-width: 0; padding: 2px 0 2px var(--space-4); border-left: 1.5px solid color-mix(in srgb, var(--built) 70%, transparent); }
.msg.thinking .msg-body { display: flex; gap: 6px; align-items: center; min-height: 32px; }
.msg.thinking .msg-body small { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); }
.msg.thinking .msg-body span { width: 7px; height: 7px; border-radius: 50%; background: var(--built); animation: coach-dot 1.2s infinite ease-in-out; }
.msg.thinking .msg-body span:nth-child(2) { animation-delay: 0.15s; }
.msg.thinking .msg-body span:nth-child(3) { animation-delay: 0.3s; }
/* The answer while it is written: the text, and under it what Mentor is doing when the text is not moving. */
.msg.writing .coach-status { display: flex; gap: 6px; align-items: center; min-height: 20px; margin: var(--space-2) 0 0; }
.msg.writing .coach-status small { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); }
.msg.writing .coach-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--built); animation: coach-dot 1.2s infinite ease-in-out; }
.msg.writing .coach-status span:nth-child(2) { animation-delay: 0.15s; }
.msg.writing .coach-status span:nth-child(3) { animation-delay: 0.3s; }
@keyframes coach-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.coach-error { margin: 0; }
/* The field rides above the tabs, the same width as them, wherever the chat is scrolled. */
.coach-form { position: fixed; z-index: 3; left: 50%; bottom: calc(var(--space-3) + env(safe-area-inset-bottom) + 64px + var(--space-2)); transform: translateX(-50%); width: min(calc(100% - 2 * var(--space-4)), 480px);
  display: flex; gap: var(--space-2); align-items: flex-end; padding: 6px 6px 6px var(--space-2);
  background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 10px 30px #11121c1f; }
/* The words fade into the marble before they reach the field, not under it. */
.mentor::after { content: ""; position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(180px + env(safe-area-inset-bottom)); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--background) 45%); }
.coach-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 10px 30px #11121c1f; }
.coach-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 160px; padding: 11px 8px 11px 2px; border: 0; background: transparent; resize: none; font-size: var(--text-base); line-height: 1.4; }
.coach-form textarea:focus { outline: none; }
.coach-form .primary { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-sm); box-shadow: none; }
.coach-form svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
/* A picture and the voice beside the field: quiet tools, and the picture over the field until it is sent. */
.coach-form { flex-wrap: wrap; }
.coach-form .coach-tool { flex: 0 0 auto; width: 36px; height: 44px; min-height: 44px; padding: 0; color: var(--text-secondary); background: transparent; box-shadow: none; }
.coach-form .coach-tool.listening { color: var(--accent); background: var(--accent-soft); }
.coach-attach, .coach-pick { flex: 1 0 100%; display: flex; gap: var(--space-2); align-items: center; padding: 0 0 6px; }
.coach-attach img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.coach-attach span { flex: 1; font-size: var(--text-xs); color: var(--text-secondary); }
.coach-attach .icon-button { flex: 0 0 auto; }
.coach-pick button { flex: 1; min-height: 44px; }
.msg-photo { display: block; max-width: 100%; max-height: 220px; margin-bottom: var(--space-2); border-radius: 14px; }
.msg.from-you .msg-photo-gone { display: flex; gap: 6px; align-items: center; margin-bottom: var(--space-1); font-size: var(--text-xs); opacity: 0.85; }
.msg-photo-gone svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
/* Mentor in the menu: the face of the mentor picked (data-coach), where the other tabs have an icon. */
.tabs .tab-bust { width: 24px; height: 24px; box-shadow: 0 0 0 1.5px var(--built); }
.tabs .coach-link.new::after { top: 4px; right: calc(50% - 18px); }
/* On Mentor's page, before the first question: what he can do, the week laid from the interview. */
.mentor-week { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  text-align: left; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--built); border-radius: var(--radius-md); }
.mentor-week svg { flex: 0 0 auto; width: 24px; height: 24px; fill: var(--built); stroke: none; }
.mentor-week span:first-of-type { flex: 1; display: grid; gap: 2px; }
.mentor-week strong { font-size: var(--text-base); }
.mentor-week small { font-size: var(--text-sm); color: var(--text-secondary); }
/* The questions spent: in place of the field, what happened and when they come back. */
.coach-spent { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.coach-spent p { margin: 0; font-size: var(--text-sm); }
.coach-spent strong { display: block; }
/* A full conversation: the field gives way to the step to a new one. */
.chat-full { align-items: center; padding: var(--space-2) 6px var(--space-2) var(--space-3); }
.chat-full p { flex: 1; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.35; }
.chat-full strong { display: block; color: var(--text-primary); }
.coach-form.chat-full .primary { width: auto; padding: 0 var(--space-3); border-radius: 22px; white-space: nowrap; }
.coach-note { margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; text-wrap: balance; }
.mentor-off .coach-quick { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .msg.thinking .msg-body small { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--text-tertiary); }
.msg.thinking .msg-body span, .msg.writing .coach-status span { animation: none; opacity: 0.6; } }

/* Mentor's reports: a folio on the marble. The newest is a tablet of its own,
   the score a numeral over ten columns, the advice numbered as on an inscription, and every
   figure is the app's own count. */
.mentor.pane-rapporter { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.mentor.pane-rapporter::after { display: none; }
/* The conversations before, on Mentor's start: newest first, each by when and what was asked first. */
.earlier { display: grid; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.earlier-row { display: grid; gap: 2px; width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.earlier-date { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built-text); }
.earlier-row strong { font-weight: 600; line-height: 1.35; }
.earlier-row small { font-size: var(--text-xs); color: var(--text-secondary); }
/* Mentor's start: the latest conversation as a tablet with the gold thread of Mentor's words, Nytt samtal
   under it, and the ones before as the plain rows above. What is written over the field says where it goes. */
.mentor.at-start { padding-bottom: calc(230px + env(safe-area-inset-bottom)); }
.mentor-start { padding-top: var(--space-4); }
.mentor-start-h { margin: var(--space-5) 0 var(--space-2); font-family: inherit; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.mentor-resume { position: relative; display: grid; gap: var(--space-2); width: 100%; padding: var(--space-5) calc(var(--space-5) + 20px) var(--space-5) var(--space-5); text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--built); border-radius: var(--radius-md); box-shadow: inset 0 -3px 0 var(--surface-secondary); transition: transform var(--dur-press) var(--ease); }
.mentor-resume:active { transform: translateY(1px); }
.mentor-resume-label { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--built-text); }
.mentor-resume-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.15; color: var(--text-primary); }
.mentor-resume-meta { font-size: var(--text-xs); color: var(--text-secondary); }
.mentor-resume-meta b { color: var(--built-text); }
.mentor-resume-full { display: inline-block; margin-left: var(--space-1); padding: 1px 6px; border-radius: 6px; background: var(--surface-secondary); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built-text); }
.mentor-resume-go { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); font-size: var(--text-lg, 1.25rem); font-weight: 700; color: var(--text-secondary); }
.mentor-resume .news-dot { top: var(--space-4); right: var(--space-4); margin: 0; }
.mentor-start .earlier { margin-bottom: 0; }
.mentor-keep { margin-top: var(--space-3); }
.earlier-row:disabled, .mentor-resume:disabled { cursor: default; opacity: 0.6; }
/* In a conversation: the way back to the start, and + for a new one. */
.mentor-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.mentor-bar .report-back { position: relative; margin-bottom: var(--space-2); }
.mentor-bar .news-dot { top: 8px; }
.mentor-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--space-1) 0 var(--space-4); padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.mentor-tabs button { position: relative; flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.mentor-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 2px #11121c14, 0 0 0 1px var(--border); }
.news-dot { position: absolute; top: 10px; margin-left: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--built); box-shadow: 0 0 0 2px var(--surface); }
.report-h { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--border); font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.1; letter-spacing: -0.2px; color: var(--text-primary); }
.report-h::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; background: var(--built); transform: rotate(45deg); }
.report-h small { margin-left: auto; font-family: var(--font); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-tertiary); text-align: right; }

/* The list. */
/* Skriv en rapport: yesterday, last week and last month as three tablets; one
   written already is gilded and opens to read, one without data enough waits. */
.report-pick { margin-bottom: var(--space-6); }
.report-pick .report-h { flex-wrap: wrap; }
.report-pick .report-h small { flex-basis: 100%; margin: 2px 0 0 calc(7px + var(--space-3)); text-align: left; color: var(--text-secondary); }
.report-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.report-pick-card { display: grid; align-content: start; gap: 2px; min-height: 120px; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.report-pick-card .eyebrow { margin: 0; font-size: var(--text-2xs); color: var(--built-text); }
.report-pick-card strong { font-family: var(--display); font-size: var(--text-lg); font-weight: var(--display-weight); line-height: 1.15; }
.report-pick-name { font-size: var(--text-xs); color: var(--text-secondary); }
.report-pick-card small { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-xs); font-weight: 650; color: var(--accent); }
.report-pick-card.first { grid-column: 1 / -1; min-height: 0; }
.report-pick-card.made { border-color: color-mix(in srgb, var(--built) 60%, var(--border)); background: color-mix(in srgb, var(--built) 10%, var(--surface)); }
.report-pick-card.made small { color: var(--built-text); }
.report-pick-card:disabled { cursor: default; opacity: 0.6; }
.report-pick-card:disabled small { color: var(--text-tertiary); }
.report-hero { display: grid; gap: var(--space-3); width: 100%; padding: var(--space-5); text-align: left; color: inherit; font: inherit; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: inset 0 -4px 0 var(--surface-secondary), 0 1px 2px #11121c0d;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); }
.report-hero:hover { border-color: var(--border-strong); }
.report-hero:active { transform: translateY(1px); }
.report-hero-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.report-hero-top .eyebrow { margin: 0; color: var(--built-text); }
.report-new { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--built); color: var(--ink-on-gold); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; }
.report-hero-body { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.report-hero-name { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); color: var(--text-tertiary); }
.report-hero-title { display: block; font-family: var(--display); font-size: var(--text-2xl); font-weight: var(--display-weight); line-height: 1.02; text-wrap: balance; }
.report-hero-summary { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.report-hero-more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--accent); }
.report-hero-more svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-fast) var(--ease); }
.report-hero:hover .report-hero-more svg { transform: translateX(3px); }
.report-rows { display: grid; }
.report-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.report-row-kind { display: grid; font-size: var(--text-2xs); font-weight: 800; letter-spacing: 1.5px; color: var(--built-text); }
.report-row-kind small { font-size: var(--text-2xs); font-weight: 500; letter-spacing: 0; color: var(--text-tertiary); }
.report-row-main { display: grid; min-width: 0; }
.report-row-main strong { font-size: var(--text-sm); }
.report-row-main span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--display); font-size: var(--text-lg); color: var(--text-primary); }
.report-row.unread .report-row-main strong::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--built); vertical-align: middle; }
.report-row-score { font-family: var(--display); font-size: var(--text-xl); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.report-making { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); border: 1px dashed color-mix(in srgb, var(--built) 60%, var(--border)); border-radius: var(--radius-md); }
.report-making span:last-child { display: grid; gap: 2px; }
.report-making small { font-size: var(--text-xs); color: var(--text-tertiary); }
.quill { flex: 0 0 auto; width: 34px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--built), transparent) 0 0 / 200% 100%; animation: quill 1.6s linear infinite; }
@keyframes quill { to { background-position: -200% 0; } }
.reports-empty { padding-top: var(--space-4); }

/* One report. */
.report-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: var(--space-2) 0 var(--space-3) -6px; padding: 0 var(--space-2) 0 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.report-back svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.report-head .eyebrow { margin: 0 0 var(--space-3); color: var(--built-text); }
.report-period { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; }
.report-period span { margin-left: 6px; font-weight: 400; color: var(--text-tertiary); }
.report-head h1 { margin: 0; font-family: var(--display); font-size: clamp(36px, 10.5vw, var(--text-display)); font-weight: var(--display-weight); line-height: 0.98; text-wrap: balance; }
.report-verdict { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.report-summary { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); }
.report-score { flex: 0 0 auto; display: grid; justify-items: center; gap: var(--space-2); min-width: 76px; }
.report-score > span:first-child { display: flex; align-items: baseline; font-family: var(--display); line-height: 0.9; }
.report-score b { font-size: var(--text-display); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.report-score small { font-size: var(--text-lg); color: var(--text-tertiary); }
.score-cols { display: grid; grid-auto-flow: column; grid-auto-columns: 4px; gap: 3px; align-items: end; height: 18px; }
.score-cols i { height: 100%; border-radius: 1px 1px 0 0; background: var(--segment); }
.score-cols i.on { background: var(--built); }
.score-cols i:nth-child(odd) { height: 82%; }
.report-score.small { min-width: 64px; gap: 6px; }
.report-score.small b { font-size: var(--text-2xl); }
.report-score.small small { font-size: var(--text-sm); }
.report-score.small .score-cols { grid-auto-columns: 3px; gap: 2px; height: 12px; }
.fig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.fig { display: grid; align-content: start; gap: 4px; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.fig-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.fig-value { font-family: var(--display); font-size: var(--text-2xl); font-weight: var(--display-weight); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.3px; }
.fig-value small { font-family: var(--font); font-size: var(--text-xs); color: var(--text-tertiary); }
.fig-rule { position: relative; height: 3px; margin: 6px 0 2px; border-radius: 2px; background: var(--segment); overflow: hidden; }
.fig-rule i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: color-mix(in srgb, var(--built) 70%, var(--segment)); }
.fig-rule.met i { background: var(--built); }
.fig-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--space-2); }
.fig-sub, .fig-delta { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.fig-delta { display: inline-flex; align-items: center; gap: 3px; color: var(--text-tertiary); }
.fig-delta svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.report-areas { display: grid; }
.area { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.area:first-child { padding-top: 0; }
.area-sign { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--built-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--built) 55%, var(--border)); }
.area-sign svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.area-text { display: grid; gap: 2px; min-width: 0; }
.area-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 20px; }
.area-name { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.area-verdict { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
.area-stones { display: inline-flex; gap: 3px; }
.area-stones i { width: 7px; height: 7px; border-radius: 1px; background: var(--segment); }
.area-stones i.on { background: var(--built); }
.area strong { margin-top: 2px; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.15; letter-spacing: -0.2px; }
.area p { margin: 2px 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); }
.area.v-bra .area-sign { background: color-mix(in srgb, var(--built) 14%, var(--surface)); }
.area.v-bra .area-verdict { color: var(--built-text); }
.area.v-svag .area-stones i.on { background: var(--error); }
.area.v-svag .area-verdict { color: var(--error); }
.area.v-svag .area-sign { color: var(--error); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 45%, var(--border)); }
.area.v-saknas .area-sign { color: var(--text-tertiary); box-shadow: inset 0 0 0 1px var(--border-strong); background: transparent; }
.area.v-saknas .area-stones i { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.area.v-saknas strong { color: var(--text-secondary); }
.area.v-saknas .area-verdict { color: var(--text-tertiary); }
.report-split > div + div .report-h { margin-top: var(--space-6); }
.report-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.report-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); font-size: var(--text-base); line-height: 1.5; }
.report-list li:first-child { padding-top: 0; }
.list-mark { width: 16px; height: 16px; transform: translateY(3px); background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.report-list.good .list-mark { color: var(--built-text); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E"); }
.report-list.improve .list-mark { color: var(--accent); --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E"); }
.report-list.missing li { border-bottom: 0; padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--text-secondary); }
.report-list.missing .list-mark { width: 8px; height: 1px; transform: translateY(-4px); background: var(--text-tertiary); -webkit-mask: none; mask: none; }
.report-advice { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.report-advice li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.report-advice li:first-child { padding-top: var(--space-1); }
.roman { padding-top: 2px; font-family: var(--display); font-size: var(--text-2xl); line-height: 0.9; color: var(--built-text); text-align: center; }
.report-advice strong, .report-follow strong { display: block; font-size: var(--text-base); font-weight: 650; line-height: 1.45; }
.report-advice p, .report-follow p { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); }
.report-follow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.report-follow li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.report-follow li:first-child { padding-top: 0; }
.follow-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--segment); color: var(--text-tertiary); }
.follow-mark svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.f-gjort .follow-mark { background: var(--built); color: var(--ink-on-gold); }
.f-delvis .follow-mark { background: linear-gradient(135deg, var(--built) 50%, var(--segment) 50%); color: var(--ink-on-gold); }
.f-inte .follow-mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--error); color: var(--error); }
.f-okant .follow-mark { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }
.follow-status { display: block; margin-bottom: 1px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.f-gjort .follow-status { color: var(--built-text); }
.f-inte .follow-status { color: var(--error); }
.report-targets { margin-top: var(--space-6); padding: 0 var(--space-4) var(--space-5); border: 1px solid color-mix(in srgb, var(--built) 55%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.report-targets .report-h { border-top: 0; margin-top: var(--space-2); }
.target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.target-grid div { display: grid; }
.target-grid span { font-size: var(--text-xs); color: var(--text-tertiary); }
.target-grid strong { font-family: var(--display); font-size: var(--text-2xl); font-weight: var(--display-weight); font-variant-numeric: tabular-nums; }
.target-grid small { font-family: var(--font); font-size: var(--text-xs); color: var(--text-tertiary); }
.target-pace { margin: var(--space-4) 0 0; font-weight: 700; color: var(--built-text); }
.report-targets p { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); }
.report-targets .primary { width: 100%; }
.report-missing .report-h { font-size: var(--text-lg); color: var(--text-secondary); }
.report-missing .report-h::before { background: transparent; box-shadow: inset 0 0 0 1px var(--text-tertiary); }
.report-ask { width: 100%; margin: var(--space-8) 0 var(--space-4); }
@media (min-width: 420px) { .fig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .report-row { grid-template-columns: 60px minmax(0, 1fr) auto; } .fig-grid { column-gap: var(--space-4); } .report-verdict { gap: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .quill { animation: none; } .report-hero, .mentor-tabs button { transition: none; } }
.target-used { margin: var(--space-4) 0 0 !important; font-weight: 700; color: var(--built-text) !important; }

/* Matfoto: the plate as a framed plaque, a gilded line passing over it while
   Mentor looks, then each thing with its source, amount and calories. */
/* The yes to Mentor where the photo would be, in the same frame. */
.ai-consent-inline { margin-bottom: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid color-mix(in srgb, var(--built) 55%, var(--border)); border-radius: var(--radius-lg); }
.ai-consent-inline p { margin: 0 0 var(--space-2); }
.ai-consent-inline .muted { font-size: var(--text-sm); line-height: 1.5; }
.ai-consent .primary { margin-top: var(--space-2); }
#food-to-photo svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
/* The plate (tallrik3d.js): the still underneath, the turning plate fading in over it. */
.plate-stage { position: relative; display: block; width: 100%; height: 100%; }
.plate-stage img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur-slow) var(--ease); }
.plate-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--dur-slow) var(--ease); pointer-events: none; }
.plate-stage.ready .plate-3d-canvas { opacity: 1; }
.plate-stage.ready img { opacity: 0; }
.photo-shot.empty .plate-stage { width: auto; aspect-ratio: 1; margin-inline: auto; }
.photo-shot.empty .plate-stage img { object-fit: contain; filter: none; }
.mentor-food-text { display: grid; gap: var(--space-2); }
.mentor-food-text strong { font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.1; }
.mentor-food-text small { font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary); }
/* The photo and the words to Mentor in the day's card under Sök mat, Skanna and
   Måltider: the plate and a line on top, the two ways in side by side under it,
   since they lead to the same list. */
.mentor-food { display: grid; gap: var(--space-5); margin: var(--space-8) 0 var(--space-4); }
.food-hero .ai-consent-inline { margin: var(--space-8) 0 var(--space-4); padding: 0; background: none; border: 0; border-radius: 0; }
.mentor-food-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.mentor-food-plate { display: block; width: 88px; height: 88px; margin-left: calc(-1 * var(--space-1)); }
.mentor-food-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3); }
.mentor-food-actions button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: var(--space-2) var(--space-3); border: 1px solid var(--built); font-size: var(--text-base); font-weight: 700; }
.mentor-food-actions svg { flex: 0 0 auto; width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.mentor-food-photo { background: var(--built); color: var(--ink-on-gold); }
/* Logga med AI on Mat: one row, the plate on its own and beside it the button, in a colour of its own. */
.mentor-food-row { grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-2); }
.mentor-food-row .mentor-food-plate { width: 48px; height: 48px; margin: 0; }
.mentor-food-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border: 1px solid var(--built); border-radius: var(--radius-md); background: var(--built); color: var(--ink-on-gold); text-align: left; box-shadow: none; }
.mentor-food-go .mentor-food-text { gap: 0; min-width: 0; }
.mentor-food-go .mentor-food-text strong { font-family: inherit; font-size: var(--text-base); font-weight: 700; }
.mentor-food-go .mentor-food-text small { overflow: hidden; font-size: var(--text-xs); line-height: 1.3; color: inherit; opacity: 0.8; white-space: nowrap; text-overflow: ellipsis; }
.mentor-food-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--ink-on-gold) 12%, transparent); }
.mentor-food-icon svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .mentor-food-go:hover { background: color-mix(in srgb, var(--built) 88%, white); } }
.mentor-food-describe { background: transparent; color: var(--built-text); }
@media (hover: hover) {
  .mentor-food-photo:hover { background: color-mix(in srgb, var(--built) 88%, white); border-color: var(--built); }
  .mentor-food-describe:hover { background: color-mix(in srgb, var(--built) 12%, transparent); border-color: var(--built); }
}
/* Beskriv maten: what you wrote, as a note on the plaque while Mentor reads it. */
.describe-form { display: grid; gap: var(--space-2); }
.describe-form label { font-size: var(--text-sm); font-weight: 600; }
.describe-form textarea { width: 100%; min-height: 96px; resize: vertical; font: inherit; }
.describe-form .field-error, .describe-form .photo-fix-note { margin: 0; }
.describe-said { position: relative; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); overflow: hidden; border-left: 3px solid var(--built); border-radius: var(--radius-sm); background: var(--surface-secondary); font-family: var(--display); font-style: italic; font-size: var(--text-lg); line-height: 1.35; }
.describe-said p { position: relative; margin: 0; }
.describe-said.reading .photo-sweep { display: block; position: absolute; left: 0; right: 0; top: 0; height: 60%; opacity: 0.5; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--built) 35%, transparent)); animation: photo-sweep 1.8s ease-in-out infinite alternate; }
.photo-shot { position: relative; margin: 0 0 var(--space-4); overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-md); background: var(--surface-secondary); box-shadow: 0 0 0 1px var(--border), 0 0 0 4px var(--background), 0 0 0 5px color-mix(in srgb, var(--built) 45%, transparent); }
.photo-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-shot.small { aspect-ratio: 16 / 6; margin-bottom: var(--space-3); }
.photo-sweep { display: none; }
.photo-shot.reading img { filter: saturate(0.7) brightness(0.92); }
.photo-shot.reading .photo-sweep { display: block; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--built) 35%, transparent) 85%, var(--built)); animation: photo-sweep 1.8s ease-in-out infinite alternate; }
@keyframes photo-sweep { from { transform: translateY(-100%); } to { transform: translateY(330%); } }
.photo-status { display: flex; align-items: center; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.photo-total { margin-top: var(--space-2); }
.photo-help { margin: var(--space-3) 0 0; font-size: var(--text-xs); }
.photo-fix { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.photo-fix label { font-size: var(--text-sm); font-weight: 600; }
.photo-fix-row { display: flex; gap: var(--space-2); }
.photo-fix-row input { flex: 1; }
.photo-fix-row button { flex: 0 0 auto; }
.photo-fix-note { margin: 0; font-size: var(--text-xs); }
/* Logga med AI: the photo to take as a large frame first, and the field to speak or write in under it. */
.ai-form { gap: var(--space-3); }
.ai-take { display: grid; justify-items: center; gap: var(--space-1); }
.ai-camera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 140px; padding: var(--space-4); border: 2px dashed var(--built); border-radius: var(--radius-md); background: color-mix(in srgb, var(--built) 8%, var(--surface)); color: var(--built-text); box-shadow: none; }
.ai-camera svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.ai-camera span { display: grid; gap: 2px; text-align: center; }
.ai-camera strong { font-size: var(--text-lg); font-weight: 700; }
.ai-camera small { font-size: var(--text-xs); color: var(--text-secondary); }
@media (hover: hover) { .ai-camera:hover { background: color-mix(in srgb, var(--built) 14%, var(--surface)); } }
.ai-shot { margin: 0; aspect-ratio: 16 / 9; }
.ai-shot-off { position: absolute; top: var(--space-2); right: var(--space-2); width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.ai-take.small { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); }
.ai-take.small .ai-camera { flex-direction: row; width: auto; min-height: 44px; padding: var(--space-1) var(--space-3); border-width: 1px; }
.ai-take.small .ai-camera svg { width: var(--icon-md); height: var(--icon-md); }
.ai-take.small .ai-camera strong { font-size: var(--text-sm); }
.ai-take.small .ai-camera small { display: none; }
.ai-speak { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; }
.ai-speak svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.ai-speak.listening { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); animation: food-mic 1.2s ease-in-out infinite; }
.ai-pics-out { margin: 0; }
.food-mic { flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; color: var(--text-secondary); background: transparent; box-shadow: none; }
.food-mic svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.food-mic.listening { color: var(--accent); background: var(--accent-soft); animation: food-mic 1.2s ease-in-out infinite; }
@keyframes food-mic { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); } }
.hearing { border-color: var(--accent); }
.ai-out { display: grid; gap: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .food-mic.listening, .ai-speak.listening { animation: none; } }
.photo-fix .field-error { margin: 0; }
.photo-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.photo-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.photo-row-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.photo-name { flex: 1; min-width: 0; display: grid; gap: 2px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.photo-name strong { font-size: var(--text-base); line-height: 1.3; }
.photo-name small { font-size: var(--text-xs); color: var(--text-secondary); }
.photo-row.unsure .photo-name small { color: var(--warning); }
.photo-remove { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; }
.photo-remove svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.photo-options { display: grid; gap: 0; margin: var(--space-1) 0 var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-secondary); }
.photo-options label { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; cursor: pointer; }
.photo-options input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--accent); }
.photo-options span { display: grid; font-size: var(--text-sm); }
.photo-options small { font-size: var(--text-xs); color: var(--text-secondary); }
.photo-amount { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.photo-amount .step { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text-primary); cursor: pointer; }
.photo-amount .step svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.photo-g { display: flex; align-items: baseline; gap: 4px; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border); background: var(--surface); }
.photo-g input { width: 4.5ch; min-height: 38px; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--text-base); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.photo-g input:focus { outline: none; }
.photo-g:focus-within { border-color: var(--accent); }
.photo-g span { font-size: var(--text-sm); color: var(--text-tertiary); }
.photo-kcal { margin-left: auto; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.photo-kcal b { font-size: var(--text-base); color: var(--text-primary); }
.photo-count { display: block; font-size: var(--text-xs); text-align: right; }
@media (prefers-reduced-motion: reduce) { .describe-said.reading .photo-sweep { animation: none; } .photo-shot.reading .photo-sweep { animation: none; transform: translateY(150%); } .plate-stage img, .plate-3d-canvas { transition: none; } }

/* Övningar: the library as a set of small plaques, each exercise's start and end
   crossfading into a movement, filters as chips, and one exercise to a page. */
.ex-figure { position: relative; display: block; flex: 0 0 auto; overflow: hidden; background: #fff; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border); }
.ex-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(1.08); }
.ex-figure.small { width: 52px; height: 52px; border-radius: 12px; }
.ex-figure.large { width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--space-4); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--border), 0 0 0 4px var(--background), 0 0 0 5px color-mix(in srgb, var(--built) 45%, transparent); }
.ex-figure .f1 { opacity: 0; }
.ex-figure.moving .f1 { animation: ex-move 2.6s ease-in-out infinite; }
@keyframes ex-move { 0%, 30% { opacity: 0; } 50%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Hercules: a still of the loop in the lists, the loop itself on the exercise, in
   the colours it was rendered in. */
.ex-figure.clip { background: #5d5e60; }
.ex-figure.clip img { filter: none; }
.ex-clip { margin: 0 0 var(--space-4); }
/* The loop is square and fills the card's width, so the muscle can be seen,
   up to a size where it stops gaining anything. */
.ex-figure.large.clip { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto var(--space-3); }
.ex-figure.clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex-clip figcaption { display: grid; justify-items: center; gap: var(--space-2); }
.ex-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-secondary); }
.ex-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ex-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.ex-legend .primar::before { background: #d9483b; }
.ex-legend .sekundar::before { background: #e2913f; }
.ex-legend .stabil::before { background: #7a8ba3; }
.ex-figure.ex-own { display: grid; place-items: center; background: var(--surface-secondary); font-family: var(--display); font-size: var(--text-xl); color: var(--built-text); }
.ex-figure.large.ex-own { font-size: 80px; }
.ex-filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.ex-filter { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; }
.ex-filter span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ex-filter svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.ex-filter.on { border-color: var(--accent); background: var(--accent); color: var(--accent-foreground); }
.ex-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ex-tile { display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 72px; padding: var(--space-2) var(--space-3); border: 2px solid transparent; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: 650; text-align: left; cursor: pointer; }
.ex-tile > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ex-tile .ex-figure { border-radius: 50%; }
.ex-tile .ex-figure .f1 { display: none; }
.ex-tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-secondary)); }
.ex-f-foot > * { flex: 1 1 0; }
.ex-count { margin: var(--space-3) 0 0; font-size: var(--text-xs); }
.ex-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ex-group { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.ex-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 68px; padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* Picking: the picture opens the exercise, the rest of the row takes it. */
.ex-pickrow { --gutter: var(--space-6); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); border-bottom: 1px solid var(--border); transition: background-color var(--dur-fast); }
.ex-pickrow .ex-row { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--space-3); border-bottom: 0; }
.ex-pickrow.on { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.ex-pickrow.on::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.ex-pickfig { position: relative; display: block; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; cursor: zoom-in; }
.ex-pickfig .ex-figure { transition: transform var(--dur-press), box-shadow var(--dur-fast); }
.ex-pickfig:active .ex-figure { transform: scale(0.94); }
.ex-tick { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); opacity: 0; transform: scale(0.6); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.ex-tick svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-foreground); stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.ex-pickrow.on .ex-tick { opacity: 1; transform: none; }
.ex-add { flex: 1 1 auto; min-height: 48px; }
@media (hover: hover) {
  .ex-pickrow .ex-row:hover, .ex-pickfig:hover { background: transparent; border-color: transparent; }
  .ex-pickrow:hover:not(.on) { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
  .ex-pickfig:hover .ex-figure { box-shadow: 0 0 0 2px var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .ex-pickrow, .ex-tick, .ex-pickfig .ex-figure { transition: none; } }
.ex-row-text { display: grid; gap: 2px; min-width: 0; }
.ex-row-text strong { font-size: var(--text-base); font-weight: 650; }
.ex-row-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-xs); color: var(--text-secondary); }
.ex-tag { padding: 1px 8px; border: 1px solid var(--built); border-radius: 999px; color: var(--built-text); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; }
.ex-empty { padding: var(--space-6) 0; text-align: center; color: var(--text-secondary); }
/* What the exercise is, in one card: the muscles, the equipment, the setup. */
.ex-facts { display: grid; margin: 0 0 var(--space-2); padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.ex-facts div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: 48px; padding: var(--space-3) 0; }
.ex-facts div + div { border-top: 1px solid var(--border); }
.ex-facts dt { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
.ex-facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--text-sm); font-weight: 600; line-height: 1.45; }
/* Your own exercise's setup, written and saved in place. */
.ex-setup { display: flex; flex: 1; gap: var(--space-2); min-width: 0; }
.ex-setup input { flex: 1; min-width: 0; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--surface); font: inherit; color: var(--text-primary); }
.ex-setup button { flex: none; min-height: 40px; padding: 0 var(--space-3); }
.ex-howto { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); }
.ex-howto div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.ex-howto dt { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); }
.ex-howto dd { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.ex-example { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
/* On the exercise the rule sits in a soft card, its example under a hairline. */
.ex-logcard { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); }
.ex-logcard .ex-howto { margin: 0; }
.ex-logcard .ex-example { margin: var(--space-3) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: var(--text-xs); }
.ex-muscle { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: var(--text-xs); font-weight: 600; }
.ex-muscle.main { border-color: var(--built); background: color-mix(in srgb, var(--built) 18%, transparent); color: var(--built-text); }
/* Under the loop the muscles wear its colours, so the legend reads straight onto them. */
.ex-facts.coloured .ex-muscle::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e2913f; }
.ex-facts.coloured .ex-muscle.main::before { background: #d9483b; }
.ex-h { margin: var(--space-6) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); text-transform: uppercase; color: var(--text-secondary); }
.ex-tips { display: grid; gap: var(--space-2); margin: 0; padding-left: 1.4em; }
.ex-tips li { line-height: 1.55; }
.ex-tips li::marker { color: var(--built-text); font-family: var(--display); font-size: var(--text-lg); }
/* The exercise as a scene: the movement and its name on dark at the top, the
   facts as tiles under it, the steps numbered, and the choice in gold. */
.ex-scene .pane-body { padding: 0; }
.exercise-dialog:has(.ex-scene:not([hidden]))::before { background: var(--on-dark-muted); }
.ex-hero { padding-top: var(--space-6); background: var(--obsidian); color: var(--on-dark); }
.ex-hero .ex-clip { margin: 0; }
.ex-hero .ex-figure.large { margin: 0; border-radius: 0; box-shadow: none; }
.ex-hero .ex-figure.large.clip { max-width: none; }
.ex-hero .ex-clip figcaption p { margin: var(--space-3) var(--space-6) 0; font-size: var(--text-sm); color: var(--on-dark-soft); }
.ex-hero-text { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.ex-hero-text .eyebrow { margin: 0; font-size: var(--text-xs); letter-spacing: 2.4px; color: var(--on-dark-muted); }
.ex-hero-text h2 { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: 34px; line-height: 1.1; color: var(--on-dark); outline: none; overflow-wrap: anywhere; }
.ex-hero .ex-legend { justify-content: flex-start; margin-top: var(--space-2); color: var(--on-dark-soft); }
#ex-d-legend:empty { display: none; }
.ex-d-body { padding: var(--space-5) var(--space-4) var(--space-6); }
.ex-scene .ex-coming { margin: 0 0 var(--space-4); }
.ex-scene .ex-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: 0; border: 0; background: none; }
.ex-scene .ex-facts div { grid-template-columns: none; align-content: start; gap: var(--space-1); min-height: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ex-scene .ex-facts dd { font-size: var(--text-lg); font-weight: 700; }
.ex-scene .ex-facts .ex-muscle { font-size: var(--text-sm); }
/* Two muscles or more take the whole row, and then the equipment too, so no tile stands alone. */
.ex-scene .ex-facts:has(.ex-muscle + .ex-muscle) div, .ex-scene .ex-facts .ex-fact-setup { grid-column: 1 / -1; }
.ex-scene .ex-facts .ex-fact-setup { grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-3); }
.ex-scene .ex-fact-setup::before { content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; background: var(--accent-strong); -webkit-mask: var(--sliders) center / contain no-repeat; mask: var(--sliders) center / contain no-repeat; }
.ex-scene .ex-fact-setup dd { font-size: var(--text-base); font-weight: 500; line-height: 1.45; }
.ex-scene .ex-h { margin: var(--space-6) var(--space-1) var(--space-3); padding: 0; border: 0; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.ex-scene .ex-tips { counter-reset: ex-step; gap: var(--space-2); padding: 0; list-style: none; }
.ex-scene .ex-tips li { counter-increment: ex-step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); line-height: 1.45; }
.ex-scene .ex-tips li::before { content: counter(ex-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--text-primary); color: var(--background); font-size: var(--text-sm); font-weight: 700; }
.ex-scene .ex-logcard { border-radius: var(--radius-lg); }
/* Picking: Tillbaka is a round arrow beside the gold choice, and keeps its name. */
.ex-scene .pane-foot { flex-wrap: nowrap; }
.ex-scene .pane-foot:has(#ex-pick:not([hidden])) #ex-back { flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; font-size: 0; background: transparent; }
.ex-scene .pane-foot:has(#ex-pick:not([hidden])) #ex-back::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--chev-back) center / contain no-repeat; mask: var(--chev-back) center / contain no-repeat; }
.ex-scene #ex-pick { flex: 1; min-height: 56px; border-radius: 999px; background: var(--built); color: var(--ink-on-gold); font-size: var(--text-lg); font-weight: 700; }
.ex-scene #ex-pick:hover { background: color-mix(in srgb, var(--built) 88%, #000); }

.ex-types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ex-types label { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.ex-types label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ex-types input, .ex-check input { width: 20px; height: 20px; accent-color: var(--accent); }
#ex-own-form select { width: 100%; min-height: 52px; }
#ex-own-form fieldset { display: block; min-width: 0; margin: var(--space-5) 0 var(--space-2); padding: 0; border: 0; }
#ex-own-form legend { float: none; display: block; margin: 0 0 var(--space-2); padding: 0; font-family: var(--font); font-size: var(--text-sm); font-weight: 600; }
.ex-check { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-height: 52px; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.ex-check small { flex-basis: 100%; margin-left: 32px; font-size: var(--text-xs); font-weight: 400; color: var(--text-secondary); }
@media (max-width: 559px) { .ex-pickrow { --gutter: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .ex-figure.moving .f1 { animation: none; } }

/* The workout: a ledger of sets, the done ones in gold leaf. */
dialog.workout-dialog { height: min(820px, calc(100dvh - 32px)); }
@media (max-width: 559px) { dialog.workout-dialog { height: calc(100dvh - 24px); } }
/* The head is the session itself, dark as the column: its name, the clock and
   a gold rule that fills as the sets are ticked off. */
.wo-head { --ink: var(--ink-deep); padding-bottom: var(--space-4); background: var(--ink); color: var(--on-dark); }
.wo-head-row { display: flex; align-items: center; gap: var(--space-3); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0; }
.wo-head-row .eyebrow { margin: 0; color: var(--built); }
.wo-close { margin-left: auto; padding: 8px; color: var(--on-dark); }
@media (hover: hover) { .wo-close:hover { background: #ffffff14; border-color: transparent; } }
.wo-title { width: 100%; padding: 0; border: 0; border-radius: 0; background: none; color: var(--on-dark); font-family: var(--display); line-height: 1.15; }
.wo-title::placeholder { color: var(--on-dark-placeholder); }
.wo-title:focus-visible { outline-color: var(--built); outline-offset: 2px; }
.wo-progress { grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-1) var(--space-4); }
.wo-bar { grid-column: 1 / -1; height: 3px; margin-top: var(--space-2); border-radius: 3px; background: var(--obsidian-line); overflow: hidden; }
.wo-bar i { display: block; height: 100%; background: var(--built); border-radius: 3px; transition: width var(--dur-slow) var(--ease-out, ease-out); }
.wo-body { padding-top: var(--space-4); }
.wo-when { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 0.6fr); gap: var(--space-2); margin-bottom: var(--space-5); }
.wo-when input { width: 100%; font-variant-numeric: tabular-nums; }
.wo-ex { margin-bottom: var(--space-3); }
.wo-ex-head:not(:has(.wo-ex-show)) { grid-template-columns: minmax(0, 1fr) auto; }
.wo-ex-show { min-height: 0; padding: 0; border: 0; border-radius: 12px; background: none; }
.wo-menu { position: relative; }
.wo-menu summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; list-style: none; color: var(--text-secondary); }
.wo-menu summary::-webkit-details-marker { display: none; }
.wo-menu[open] summary { background: var(--surface-secondary); color: var(--text-primary); }
.wo-menu ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 200px; margin: 0; padding: var(--space-1); list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.wo-menu li button { width: 100%; border: 0; text-align: left; font-weight: 600; }
.wo-menu li button.danger { color: var(--error); }
.wo-ex-note { min-height: 0; margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.wo-sets { width: 100%; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.wo-sets th { padding: 0 0 2px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); text-align: center; }
.wo-sets th:first-child { width: 44px; }
.wo-sets th:last-child:has(.sr-only) { width: 48px; }
/* RPE, when it is on, is the fifth column, after Förra. */
.wo-sets:not(.rt-sets) th:nth-child(5):not(:last-child), .wo-sets:not(.rt-sets) th:nth-child(5):not(:has(.sr-only)) { width: 60px; }
.wo-sets td { padding: 0 2px; text-align: center; vertical-align: middle; }
.wo-sets tr td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.wo-sets tr td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.wo-set.done td { background: color-mix(in srgb, var(--built) 16%, transparent); }
/* The set just ticked fades into its done colour, so the tick is seen to take. */
@media (prefers-reduced-motion: no-preference) { .wo-set.just-done td { animation: wo-done-in var(--dur-fast) var(--ease-out, ease-out) both; } @keyframes wo-done-in { from { background: transparent; } } }
.wo-num { padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums; border-color: var(--border); }
/* Last time's numbers (or the routine's) stand faintly in the empty inputs, a preview a tick takes. */
.wo-num::placeholder { color: var(--text-primary); opacity: 0.62; font-weight: 600; }
/* kg and reps as squares, as in Hevy: an empty one soft grey with last time faint in it,
 a filled one white with a clear edge, so what is filled in shows at a glance. */
.wo-sets td:has(> .wo-num) { padding: 0 3px; }
.wo-num { display: block; width: min(100%, 76px); height: 48px; min-height: 48px; margin: 0 auto; border-radius: var(--radius-md); border: 1.5px solid transparent; background: var(--surface-secondary); font-size: var(--text-lg); font-weight: 750; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.wo-num:not(:placeholder-shown) { background: var(--surface); border-color: color-mix(in srgb, var(--text-primary) 40%, transparent); }
.wo-num:focus-visible { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.wo-set.done .wo-num, .wo-set.done .wo-num:not(:placeholder-shown) { border-color: transparent; background: transparent; }
.wo-rpe { width: 100%; min-height: 44px; padding: 0 2px; text-align: center; font-size: var(--text-sm); border-color: var(--border); }
.wo-kind { width: 36px; min-height: 36px; padding: 0; border-radius: 999px; border-color: transparent; background: var(--surface-secondary); font-weight: 750; font-size: var(--text-sm); }
.kind-w .wo-kind { background: color-mix(in srgb, var(--built) 30%, transparent); color: var(--built-text); }
.kind-d .wo-kind { background: var(--accent-soft); color: var(--accent); }
.kind-f .wo-kind { background: var(--error-surface); color: var(--error); }
/* A record set: a gold rosette in place of its number, as in Hevy, that pops in as it is set. */
.wo-set.pb .wo-kind-menu summary.wo-kind { background: transparent; color: #5c3d00; }
.wo-rosette { display: block; width: 36px; height: 36px; overflow: visible; filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--built) 55%, transparent)); animation: wo-pb var(--dur-slow) var(--ease) both; }
.wo-rosette-tail { fill: #c98a0b; stroke: #8a5d00; stroke-width: 0.8; stroke-linejoin: round; }
.wo-rosette-edge { fill: var(--built); stroke: #8a5d00; stroke-width: 0.8; stroke-linejoin: round; }
.wo-rosette-face { fill: #ffd76a; stroke: #c98a0b; stroke-width: 1; }
.wo-rosette text { fill: #5c3d00; font: 800 11px var(--font); }
@keyframes wo-pb { 0% { transform: scale(0.4) rotate(-20deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .wo-rosette { animation: none; } }
/* The set's number opens its menu: the kinds with what they mean, and removing it. */
.wo-kind-menu summary.wo-kind { justify-content: center; width: 36px; height: 36px; min-height: 36px; background: var(--surface-secondary); color: var(--text-primary); font-weight: 750; font-size: var(--text-sm); cursor: pointer; }
.kind-w .wo-kind-menu summary.wo-kind { background: color-mix(in srgb, var(--built) 30%, transparent); color: var(--built-text); }
.kind-d .wo-kind-menu summary.wo-kind { background: var(--accent-soft); color: var(--accent); }
.kind-f .wo-kind-menu summary.wo-kind { background: var(--error-surface); color: var(--error); }
.wo-kind-menu ul { left: 0; right: auto; min-width: min(300px, calc(100vw - 48px)); }
.wo-kind-menu li button { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2); white-space: normal; }
.wo-kind-menu li button[aria-pressed="true"] { background: var(--surface-secondary); }
.wo-kind-menu li button small { display: block; margin-top: 2px; font-weight: 500; font-size: var(--text-xs); line-height: 1.4; color: var(--text-secondary); }
.wo-kind-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-secondary); font-weight: 750; font-size: var(--text-sm); }
.wo-kind-mark.kind-w { background: color-mix(in srgb, var(--built) 30%, transparent); color: var(--built-text); }
.wo-kind-mark.kind-d { background: var(--accent-soft); color: var(--accent); }
.wo-kind-mark.kind-f { background: var(--error-surface); color: var(--error); }
.wo-kind-mark.kind-s { background: none; box-shadow: inset 0 0 0 1.5px var(--built); color: var(--built-text); }
.wo-kind-menu li button.danger { display: block; padding: var(--space-2) var(--space-2) var(--space-2) calc(32px + var(--space-5)); }
/* The rest is a menu too: a tap on it changes it for the exercise. */
.wo-rest-menu { display: inline-block; margin: 0 0 var(--space-2); }
.wo-rest-menu summary.wo-rest { justify-content: flex-start; gap: var(--space-2); align-items: center; width: auto; height: auto; min-height: 36px; padding: 0 var(--space-2) 0 0; margin: 0; border-radius: 999px; display: inline-flex; place-items: initial; color: var(--accent); cursor: pointer; }
.wo-rest-menu[open] summary.wo-rest { background: none; color: var(--accent); }
.wo-rest-std { margin-left: var(--space-2); font-weight: 500; color: var(--text-secondary); }
.wo-rest-menu ul { left: 0; right: auto; min-width: 180px; max-height: 320px; overflow-y: auto; }
.wo-rest-menu li button[aria-pressed="true"] { background: var(--surface-secondary); }
.wo-check { width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--radius-sm); border-color: var(--border-strong); background: var(--surface); color: var(--text-tertiary); }
.wo-check svg { width: var(--icon-md); height: var(--icon-md); stroke-width: var(--icon-line); }
.wo-check[aria-pressed="true"] { border-color: var(--built); background: var(--built); color: var(--ink-on-gold); }
@media (hover: hover) { .wo-check[aria-pressed="true"]:hover { background: var(--built); border-color: var(--built); } }
.wo-ex-foot { justify-content: space-between; }
.wo-ex-foot .text-button { padding-inline: var(--space-2); font-weight: 650; }
.wo-ex-foot .text-button:first-child { color: var(--accent); margin-left: calc(-1 * var(--space-2)); }
.wo-add { width: 100%; min-height: 52px; border-style: dashed; font-weight: 650; }
.wo-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-4); text-align: center; color: var(--text-secondary); }
.wo-empty-mark { font-family: var(--display); font-size: 72px; line-height: 1; color: var(--built-text); opacity: 0.7; }
.wo-empty p { margin: 0; }
.wo-empty .primary { min-width: 200px; min-height: 52px; border-radius: 999px; }
.wo-stats { margin-bottom: var(--space-2); padding: 0; border: 0; }
#wo-form .field { margin-top: var(--space-4); }
#wo-form textarea { min-height: 0; font-size: var(--text-base); line-height: 1.5; }
#wo-form .ex-check { margin-top: var(--space-3); }
.wo-energy { display: block; margin: var(--space-5) 0 0; }
.wo-energy legend { float: none; display: block; margin: 0 0 var(--space-2); font-family: var(--font); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.wo-energy-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.wo-energy-scale label { position: relative; display: grid; justify-items: center; gap: 2px; padding: var(--space-2) 0; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.wo-energy-scale input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wo-energy-scale b { font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.1; }
.wo-energy-scale small { font-size: var(--text-2xs); color: var(--text-secondary); }
.wo-energy-scale label:has(input:checked) { border-color: var(--built); background: color-mix(in srgb, var(--built) 18%, transparent); }
.wo-energy-scale label:has(input:checked) small { color: var(--built-text); font-weight: 700; }
.wo-energy-scale label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.wo-done-head { padding-bottom: var(--space-5); background: var(--ink-deep); color: var(--on-dark); }
.wo-done-head .eyebrow { color: var(--built); }
.wo-done-head h2 { margin-bottom: var(--space-4); font-size: 40px; line-height: 1.05; color: var(--on-dark); }
.wo-done-head .stat strong { color: var(--on-dark); }
.wo-done-head .wo-stats { margin: 0; }
#wo-done-body .ex-h:first-child { margin-top: var(--space-2); border-top: 0; }
/* Four figures after a workout sit two by two. */
.wo-stats:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The muscles a workout trained: the share of its work sets per group, in gold. */
.wo-split { display: grid; gap: var(--space-2); margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.wo-split li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.wo-split-name { font-weight: 650; }
.wo-split-bar { height: 10px; border-radius: 999px; background: var(--surface-secondary); overflow: hidden; }
.wo-split-bar i { display: block; height: 100%; border-radius: inherit; background: var(--built); }
.wo-split-share { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.wo-split-more summary { min-height: 36px; display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 650; color: var(--accent); cursor: pointer; list-style: none; }
.wo-split-more summary::-webkit-details-marker { display: none; }
.wo-split-more[open] summary { display: none; }
.wo-records { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
#wo-done-body .wo-records + .wo-done-note, #wo-done-body > .wo-done-note:first-child { border-top: 0; padding-top: 0; }
.wo-records li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.wo-records strong { display: block; font-size: var(--text-base); }
.wo-records small { font-size: var(--text-sm); color: var(--built-text); font-weight: 600; }
.wo-record-mark { width: 36px; height: 36px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #fff3c4, var(--built) 55%, #b07d0a); box-shadow: 0 0 0 3px var(--background), 0 0 0 4px color-mix(in srgb, var(--built) 55%, transparent); }
.wo-done-note { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.55; }
/* On Träning: the week's wreath, gold laid session by session. */
.card.wk-card { --ink: var(--ink-deep); position: relative; overflow: hidden; padding-bottom: var(--space-4); background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.wk-card::before { content: ""; position: absolute; left: 50%; top: 150px; width: 360px; height: 360px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--built) calc(8% + 14% * var(--glow, 0)), transparent), transparent 68%); pointer-events: none; }
.wk-card.whole { --glow: 1; }
.wk-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.wk-top .eyebrow { margin: 0; color: var(--built); }
.wk-krans { position: relative; width: min(100%, 300px); aspect-ratio: 1 / 0.86; margin: var(--space-2) auto 0; }
.wk-krans canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* While the 3D wreath loads, the picture stands in for it in the same dark bronze, not grey. */
.wk-krans-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: saturate(calc(0.4 + 0.6 * var(--share))) brightness(calc(0.6 + 0.4 * var(--share))) contrast(calc(0.8 + 0.2 * var(--share))); }
.wk-krans.krans-live .wk-krans-still { display: none; }
.wk-count { position: absolute; inset: 0 0 11% 0; display: grid; place-content: center; justify-items: center; margin: 0; pointer-events: none; }
.wk-count strong { font-family: var(--display); font-size: clamp(60px, 20vw, 84px); font-weight: var(--display-weight); line-height: 0.9; color: var(--on-dark); font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px #000c; }
.wk-count span { margin-top: var(--space-1); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built); }
.wk-line { position: relative; max-width: 30ch; margin: var(--space-2) auto var(--space-5); text-align: center; font-size: var(--text-sm); line-height: 1.5; color: var(--on-dark-soft); }
.wk-line em { display: block; font-family: var(--display); font-size: var(--text-lg); color: var(--built); }
.wk-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--obsidian-line); }
.wk-stats > div { display: grid; gap: 2px; padding: var(--space-3) var(--space-2) var(--space-3) 0; min-width: 0; }
.wk-stats > div + div { padding-left: var(--space-3); border-left: 1px solid var(--obsidian-line); }
.wk-label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark-muted); }
.wk-stats strong { font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.1; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wk-stats strong small { font-family: var(--display); font-style: italic; font-size: 0.6em; color: var(--on-dark-soft); }
.wk-weight {position: relative; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--obsidian-line); }
.wk-weight .wk-label { grid-column: 1 / -1; }
.wk-weight strong { font-family: var(--display); font-size: 34px; font-weight: var(--display-weight); line-height: 1; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.wk-weight strong small { font-family: var(--display); font-style: italic; font-size: var(--text-base); color: var(--on-dark-soft); }
.wk-weight > small { justify-self: end; font-size: var(--text-xs); color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.wk-weight.missing strong { color: var(--built); }
.wk-weight > .text-button { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 0; text-underline-offset: 3px; }
/* The way into a session. */
.card.wo-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); }
.wo-card-text { display: grid; gap: 2px; min-width: 0; }
.wo-card .eyebrow { margin: 0; color: var(--built-text); }
.wo-card h2 { margin: 0; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.15; }
.wo-card-text small { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.4; }
/* Blue, as everything you are to do now; the gold is for what is done. */
.wo-go { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-foreground); font-size: var(--text-base); font-weight: 750; }
.wo-go svg { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; stroke: none; }
@media (hover: hover) { .wo-go:hover { background: var(--accent-hover); } }
.wo-go .wo-live { background: var(--accent-foreground); }
.wo-quick { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0 var(--space-5); }
.wo-quick-start { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; font-weight: 650; cursor: pointer; }
.wo-quick-start svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; }
.wo-quick-start:active { background: var(--surface); }
.wo-quick .text-button { color: var(--accent); font-weight: 650; }
.wo-history .card-head { margin-bottom: 0; }
.wo-history > summary { list-style: none; cursor: pointer; }
.wo-history > summary::-webkit-details-marker { display: none; }
.wo-history-chevron { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.wo-history[open] .wo-history-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) { .wo-history-chevron { transition: transform var(--dur-fast) var(--ease-out); } }
.wo-past { display: grid; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.wo-past li + li .wo-past-row { border-top: 1px solid var(--border); }
.wo-past-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 68px; padding: var(--space-2) 0; border: 0; border-radius: 0; background: none; text-align: left; }
.wo-past-date { display: grid; justify-items: center; padding: 6px 0; border-radius: var(--radius-md); background: var(--surface-secondary); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); line-height: 1.2; }
.wo-past-date b { font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: 0; color: var(--text-primary); line-height: 1; }
.wo-past-text { display: grid; gap: 2px; min-width: 0; }
.wo-past-row strong { font-size: var(--text-base); font-weight: 650; }
.wo-past-row small { font-size: var(--text-xs); color: var(--text-secondary); }
.wo-past-edit { font-size: var(--text-xl); color: var(--text-tertiary); }
.wo-past li + li .wo-past-more .wo-past-row { border-top: 1px solid var(--border); }
.wo-past-more summary { list-style: none; cursor: pointer; }
.wo-past-more summary::-webkit-details-marker { display: none; }
.wo-past-more .exercises { margin: 0 0 var(--space-3) 60px; }
.wo-past-more[open] .wo-past-edit { transform: rotate(180deg); }
div.wo-past-row { cursor: default; }
/* The workout in progress floats over the menu, as wide as it, until opened. */
.wo-resume { position: fixed; z-index: 11; left: 50%; bottom: calc(var(--space-3) + 70px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 2 * var(--space-4)), 480px); }
.wo-float { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-1); border-radius: 999px; background: var(--obsidian-raised); color: var(--on-dark); box-shadow: 0 12px 32px #0006, 0 0 0 1px #ffffff14; }
@media (prefers-reduced-motion: no-preference) { .wo-float { animation: wo-bar-in var(--dur-base) var(--ease-out, ease-out) both; } @keyframes wo-bar-in { from { transform: translateY(16px); opacity: 0; } } }
.wo-bar-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 52px; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; text-align: left; }
@media (hover: hover) { .wo-bar-main:hover { background: none; } }
.wo-watch-slot:empty { display: none; }
.wo-watch { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
/* In sync with the watch: a green light that breathes, as a device that is on. */
.wo-watch-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px 1px #22c55eb3; flex: none; }
.wo-watch.off { color: var(--text-tertiary); }
.wo-watch.off .wo-watch-dot { background: var(--text-tertiary); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  .wo-watch:not(.off) .wo-watch-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; animation: watch-glow 2.4s ease-out infinite; }
  @keyframes watch-glow { from { opacity: 0.6; transform: scale(1); } 70%, to { opacity: 0; transform: scale(2.6); } }
}
#wo-progress .wo-watch-slot { display: block; margin-top: var(--space-2); }
.wo-bar-up { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--obsidian-track-raised); }
.wo-bar-up::after { content: ""; position: absolute; left: 50%; top: 55%; width: 10px; height: 10px; border-left: 2px solid var(--on-dark); border-top: 2px solid var(--on-dark); transform: translate(-50%, -50%) rotate(45deg); }
.wo-bar-text { display: grid; gap: 1px; min-width: 0; }
.wo-bar-top { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); }
.wo-bar-top strong { font-weight: 700; }
.wo-bar-clock { font-variant-numeric: tabular-nums; color: var(--built); font-weight: 700; }
.wo-bar-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-sm); color: var(--on-dark-soft); }
body.wo-on .shell { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
body.wo-on .toast { bottom: calc(170px + env(safe-area-inset-bottom)); }
/* With a workout in progress its bar takes the field's place over the menu, so
   Mentor's field rides above the bar instead of under it, and the chat makes room. */
body.wo-on .coach-form { bottom: calc(var(--space-3) + 70px + 60px + var(--space-2) + env(safe-area-inset-bottom)); }
body.wo-on .mentor { padding-bottom: calc(230px + env(safe-area-inset-bottom)); }
body.wo-on .mentor.at-start { padding-bottom: calc(270px + env(safe-area-inset-bottom)); }
body.wo-on .mentor::after { height: calc(250px + env(safe-area-inset-bottom)); }
.wo-live { width: 8px; height: 8px; border-radius: 50%; background: var(--built); }
@media (prefers-reduced-motion: no-preference) { .wo-live:not(.still) { animation: wo-pulse 1.6s ease-in-out infinite; } }
@keyframes wo-pulse { 50% { opacity: 0.35; transform: scale(0.8); } }
body.gated .wo-resume { display: none; }
/* Dina pass: the routines, each a stone tablet. The pass number is cut in
   Roman numerals beside its name, how hard it is stands as one to three
   stones, and a few words say what it trains. The next in the order has a
   gold lintel and the gold Starta on its plinth; the rest wait in marble. */
.rt-section { margin-bottom: var(--space-4); }
.wk-passes { margin-top: var(--space-5); }
.rt-section .section-label { margin-top: var(--space-2); }
.rt-section .section-label h2 { margin: 0; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); }
.rt-section .section-label .text-button { padding-inline: 0; color: var(--accent); font-weight: 650; }
.rt-list-cards { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rt-card { position: relative; display: grid; gap: 0; padding: var(--space-5) var(--space-4) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 1px 0 #0000000d; }
.rt-card.next { border-color: color-mix(in srgb, var(--built) 55%, var(--border)); border-top-color: var(--built); background: linear-gradient(180deg, color-mix(in srgb, var(--built) 9%, var(--surface)), var(--surface) 70%); }
.rt-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.rt-num { min-width: 64px; box-sizing: border-box; padding-right: var(--space-4); border-right: 1px solid var(--border); font-family: var(--display); font-size: var(--text-display); line-height: 0.82; text-align: center; letter-spacing: -1px; color: var(--text-tertiary); font-variant-numeric: lining-nums; }
.rt-card.next .rt-num { color: var(--built-text); border-right-color: color-mix(in srgb, var(--built) 45%, var(--border)); }
.rt-title { display: grid; gap: 6px; min-width: 0; }
.rt-title h3 { margin: 0; font-family: var(--display); font-size: var(--text-2xl); font-weight: var(--display-weight); line-height: 1; text-wrap: balance; overflow-wrap: break-word; }
.rt-next { position: absolute; top: 0; right: var(--space-4); padding: 3px 8px 4px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: var(--ink-on-gold); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; }
.rt-level { display: flex; align-items: center; gap: var(--space-2); margin: 0; white-space: nowrap; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.rt-stones { display: inline-flex; gap: 3px; }
.rt-stones i { width: 9px; height: 9px; border: 1.5px solid var(--text-secondary); border-radius: 1px; }
.rt-level[data-level="1"] .rt-stones i:nth-child(-n + 1),
.rt-level[data-level="2"] .rt-stones i:nth-child(-n + 2),
.rt-level[data-level="3"] .rt-stones i { border-color: var(--text-primary); background: var(--text-primary); }
.rt-level[data-level="3"] { color: var(--text-primary); }
.rt-desc { margin: var(--space-4) 0 0; font-size: var(--text-base); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.rt-meta { margin: var(--space-4) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rt-card .wo-go { width: 100%; min-height: 52px; margin-top: var(--space-3); border-radius: var(--radius-sm); font-weight: 750; }
@media (max-width: 359px) { .rt-head { gap: var(--space-3); } .rt-num { min-width: 52px; padding-right: var(--space-3); font-size: 44px; } .rt-level { letter-spacing: 1px; } }
.rt-start { justify-self: start; margin: 0 0 calc(-1 * var(--space-2)) calc(-1 * var(--space-4)); color: var(--accent); font-weight: 700; }

/* The routine being made: the same ledger as the workout, without ticks. */
.rt-tally { margin: var(--space-1) 0 0; justify-self: start; }
.rt-sets th:first-child { width: 44px; }
.rt-error { margin: 0; padding: var(--space-2) var(--space-6); }
/* A new routine: the name as a framed field under its label, so it is plain where
   the name goes, and the two steps under it before any exercise is picked. */
.rt-name-label { display: block; margin-top: var(--space-4); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark-muted); }
.wo-title.rt-name { box-sizing: border-box; min-height: 52px; margin-top: 6px; padding: 8px 14px; border: 1.5px solid var(--obsidian-rim-strong); border-radius: var(--radius-sm); background: var(--obsidian-raised); font-size: var(--text-xl); }
.wo-title.rt-name:focus-visible { border-color: var(--built); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--built) 30%, transparent); }
.rt-guide { display: grid; gap: var(--space-4); padding: var(--space-2) 0 var(--space-6); }
.rt-guide-lead { margin: 0; color: var(--text-secondary); }
.rt-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rt-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.rt-step-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--built); color: var(--ink-on-gold); font-family: var(--display); font-size: 18px; line-height: 1; }
.rt-step.done { border-color: color-mix(in srgb, var(--built) 45%, var(--border)); }
.rt-step.done .rt-step-n { background: none; box-shadow: inset 0 0 0 2px var(--built); color: var(--built-text); font-family: var(--font); font-size: 16px; font-weight: 800; }
.rt-step b { display: block; font-weight: 700; }
.rt-step small { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-secondary); }
.rt-guide-add { min-height: 52px; }
.rt-tools { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.rt-tools .text-button { white-space: nowrap; }
/* The heading and its tools share a line while they fit, and the tools go under it when not. */
.rt-section .section-label:has(.rt-tools) { flex-wrap: wrap; row-gap: var(--space-1); }
.rt-tools .text-button { padding-inline: 0; color: var(--accent); font-weight: 650; }
.rt-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rt-edit { min-height: 36px; padding: 0; color: var(--text-secondary); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.rt-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rt-empty-actions .secondary { font-weight: 650; }
.wo-as-routine { margin: var(--space-3) 0 0 calc(-1 * var(--space-4)); color: var(--accent); font-weight: 650; }
/* The shift card's button stands on its own row under the hours, not wedged beside them. */
.shift-bottom:has(> p:empty) { display: block; margin-top: var(--space-4); }
.shift-bottom:has(> p:empty) > p { display: none; }
.shift-bottom:has(> p:empty) .shift-buttons button { flex: 1; }
/* The statue in the header is an icon with its level, like the others: no frame of its own. */
.statue-link { border: 0; }

/* Skippa waits out of sight: a swipe to the left on the row brings it in, a
   hover does with a mouse, and the keyboard finds it after the box. */
.check-row[data-row] { touch-action: pan-y; }
.check-row .moment-quick.skip { width: auto; min-width: 0; padding: 0 var(--space-3); opacity: 0; pointer-events: none; transform: translateX(12px); background: var(--skip-soft); color: var(--error); font-size: var(--text-xs); font-weight: 700; transition: opacity var(--dur-fast) var(--ease-out, ease-out), transform var(--dur-fast) var(--ease-out, ease-out); }
.check-row.reveal-skip .moment-quick.skip, .check-row .moment-quick.skip:focus-visible { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: hover) and (pointer: fine) { .check-row:hover .moment-quick.skip { opacity: 1; pointer-events: auto; transform: none; } }
@media (prefers-reduced-motion: reduce) { .check-row .moment-quick.skip { transition: none; } }
/* The routine as a list: each exercise one line that says what it asks for, a
   tap opens it to its sets. */
.rt-rows { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.rt-row { background: var(--surface); border: 1px solid var(--border); }
.rt-row.open { border-color: color-mix(in srgb, var(--built) 55%, var(--border)); }
.rt-row-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding-right: var(--space-1); }
.rt-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-lg); background: none; color: inherit; text-align: left; }
/* The picture is its own button, to see how the exercise is done. */
.rt-ex-show { display: grid; margin-left: var(--space-3); }
.rt-ex-show .ex-figure.small { width: 44px; height: 44px; }
.rt-row-text { display: grid; gap: 2px; min-width: 0; }
.rt-row-text strong { font-size: var(--text-base); font-weight: 650; line-height: 1.25; outline: none; }
.rt-row-text small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--text-xs); line-height: 1.4; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rt-row.open .rt-row-text small { color: var(--built-text); font-weight: 600; }
@media (hover: hover) { .rt-row-main:hover { background: none; } .rt-row-main:hover .rt-row-text strong { text-decoration: underline; text-underline-offset: 3px; } }
.rt-chev { margin-right: var(--space-1); border-right: 1.75px solid var(--text-tertiary); border-bottom: 1.75px solid var(--text-tertiary); transition: transform var(--dur-fast) var(--ease-out, ease-out); }
.rt-row-body { padding: 0 var(--space-3) var(--space-3); }
.rt-sets th span { display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.5px; text-transform: none; color: var(--text-tertiary); }
.rt-sets.ranged td:nth-child(4) { position: relative; padding-left: 12px; }
.rt-sets.ranged td:nth-child(4)::before { content: "–"; position: absolute; left: 1px; top: 50%; translate: 0 -50%; color: var(--text-tertiary); font-size: var(--text-sm); }
.rt-rest { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.rt-rest select { min-height: 40px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.rt-note { display: grid; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.rt-note small { font-weight: 400; color: var(--text-secondary); margin-left: var(--space-1); }
.rt-note .wo-ex-note { margin: 0; min-height: 0; line-height: 1.45; }

/* Inställningar: three small labels over the sections, and the sections' titles
   a size down, so the page reads as a list and not as eleven headlines. */
.settings-label { margin: var(--space-8) 0 var(--space-1); text-transform: uppercase; color: var(--text-tertiary); }
.heading + .settings-label { margin-top: var(--space-4); }
#main .routine-group > summary { font-size: 22px; }

/* The workout, laid out like the apps people know: a compact head with Avsluta at the top,
   time, volume and sets in one row, and the exercises as a flat list with last
   time's sets in their own column. */
#workout-dialog .wo-head { padding-top: var(--space-4); padding-bottom: var(--space-3); }
#workout-dialog .wo-head-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); margin: 0 0 0 calc(-1 * var(--space-2)); }
/* The bottle in the session's top bar: malachite on the dark head (its night shade in both themes), the day's litres beside it. */
.wo-water { --water: #3fd0ae; }
.wo-water { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3) 0 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--water); color: var(--water); font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wo-water svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linejoin: round; }
@media (hover: hover) { .wo-water:hover { background: color-mix(in srgb, var(--water) 12%, transparent); } }
.wo-water.drank svg { animation: wo-drank var(--dur-slow) var(--ease) both; }
@keyframes wo-drank { 0% { transform: scale(1); fill: transparent; } 40% { transform: scale(1.3) rotate(-12deg); fill: var(--water); } 100% { transform: none; fill: transparent; } }
@media (prefers-reduced-motion: reduce) { .wo-water.drank svg { animation: none; } }
.wo-head-row .eyebrow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#workout-dialog .wo-close { margin-left: 0; }
.wo-finish-top { min-height: 40px; padding: 0 var(--space-5); border: 0; border-radius: 999px; background: var(--built); color: var(--ink-on-gold); font-weight: 750; }
@media (hover: hover) { .wo-finish-top:hover { background: color-mix(in srgb, var(--built) 86%, #fff); } }
.wo-title { min-height: 40px; margin-top: var(--space-2); font-size: var(--text-xl); }
.wo-progress { display: block; margin-top: var(--space-2); }
.wo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.wo-strip span { display: block; font-size: var(--text-xs); color: var(--on-dark-muted); }
.wo-strip strong { display: block; margin-top: 2px; font-size: var(--text-lg); font-weight: 650; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.wo-strip #wo-clock { color: var(--built); }
.wo-progress .wo-bar { display: block; margin-top: var(--space-3); }
.wo-body { background: var(--surface); }
.wo-ex { margin: 0; padding: var(--space-4) 0 var(--space-3); background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.wo-ex:first-of-type { padding-top: var(--space-1); }
.wo-ex-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); }
.wo-ex .ex-figure.small { width: 48px; height: 48px; border-radius: 50%; }
.wo-ex-title { margin: 0; font-family: var(--font); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.2px; line-height: 1.25; color: var(--accent); outline: none; scroll-margin-top: var(--space-4); }
/* The name opens the exercise, as the picture does; the chevron says so. */
.wo-ex-name { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.wo-ex-name span { min-width: 0; overflow-wrap: anywhere; }
.wo-ex-name svg { flex: none; width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; transition: transform var(--dur-fast), opacity var(--dur-fast); }
@media (hover: hover) { .wo-ex-name:hover { background: none; } .wo-ex-name:hover svg { opacity: 1; transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .wo-ex-name svg { transition: none; } }
.wo-plan { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--text-primary); }
.wo-rest { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; color: var(--accent); }
.wo-rest svg { width: var(--icon-md); height: var(--icon-md); }
/* How the exercise is logged, under its name: tapping it shows the whole rule in a box over the sets. */
.wo-howto-menu { display: block; margin: 0 0 var(--space-2); }
.wo-howto-menu summary.wo-howto { display: inline-flex; place-items: initial; width: auto; height: auto; margin: 0; border-radius: var(--radius-sm); }
.wo-howto-menu summary.wo-howto span { text-decoration: underline dotted; text-underline-offset: 3px; }
.wo-howto-menu[open] summary.wo-howto { background: none; color: var(--text-primary); }
.wo-howto-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); }
.wo-howto-pop .ex-example { margin: 0; }
.wo-howto-h { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.wo-howto { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; margin: 0 0 var(--space-2); padding: 0; background: none; border: 0; font: inherit; font-size: var(--text-sm); color: var(--text-secondary); text-align: left; cursor: pointer; }
.wo-howto:hover { color: var(--text-primary); }
/* The setup (the bench's angle, the seat), under it: read before the first set. */
.wo-setup { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 650; line-height: 1.4; color: var(--text-primary); }
.wo-setup svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: var(--accent); stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
/* A superset: its exercises joined by a gold bar down their side, without the rule
   between them, and a line under the name that says what comes after the set. */
.wo-ex.ss { position: relative; padding-left: var(--space-4); }
.wo-ex.ss::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--built); }
.wo-ex.ss-start::before { top: var(--space-4); border-radius: 3px 3px 0 0; }
.wo-ex.ss-start:first-of-type::before { top: var(--space-1); }
.wo-ex.ss-end::before { bottom: var(--space-3); border-radius: 0 0 3px 3px; }
.wo-ex.ss:not(.ss-end) { border-bottom: 0; }
.wo-ss { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: 1.4; color: var(--text-secondary); }
.wo-ss b { font-weight: 750; color: var(--built-text); }
.wo-ss svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: var(--built); stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.rt-row.ss { border-left: 3px solid var(--built); }
.rt-row.ss:not(.ss-end) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rt-row.ss:not(.ss-start) { margin-top: calc(-1 * var(--space-2)); border-top-style: dashed; border-top-left-radius: 0; border-top-right-radius: 0; }
p.rt-rest { margin-bottom: 0; font-weight: 500; color: var(--text-secondary); }
/* Plates per side and the warm-up, under an exercise when asked for. */
.wo-plates { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); font-size: var(--text-sm); }
.wo-plates p { margin: 0 0 var(--space-2); }
.wo-plates-h { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.wo-plates ul { margin: 0 0 var(--space-3); padding: 0; list-style: none; display: grid; gap: var(--space-1); }
/* The rest after a set, at the foot of the workout: the gold fills as it runs. */
/* The rest, as dark as the workout's head over it so it cannot be missed: the time
   in gold, a gold edge running across as it passes, and the last button gold. */
.wo-rest-bar { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--built) 55%, transparent);
  background: color-mix(in srgb, var(--ink-deep) 86%, var(--text-primary)); color: var(--on-dark); box-shadow: 0 -10px 28px #11121c40; }
.wo-rest-bar[hidden] { display: none; }
/* It slides up as the rest starts, as the workout's bar does (wo-bar-in), rather than jumping in. */
@media (prefers-reduced-motion: no-preference) { .wo-rest-bar { animation: wo-rest-in var(--dur-base) var(--ease-out, ease-out) both; } @keyframes wo-rest-in { from { transform: translateY(100%); opacity: 0; } } }
.wo-rest-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--built) 24%, transparent); box-shadow: inset 0 3px 0 var(--built); transition: width 1s linear; pointer-events: none; }
.wo-rest-label { position: relative; flex: 1; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark-soft); }
.wo-rest-label strong { margin-left: var(--space-2); font-family: var(--display); font-size: var(--text-2xl, 1.9rem); font-weight: var(--display-weight); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--built); }
.wo-rest-bar button { position: relative; min-height: 40px; padding: 0 var(--space-3); border: 1px solid #ffffff2e; border-radius: 999px; background: #ffffff14; font: inherit; font-size: var(--text-sm); font-weight: 650; color: var(--on-dark); cursor: pointer; }
.wo-rest-bar button:last-child { border-color: var(--built); background: var(--built); color: var(--ink-on-gold); }
@media (hover: hover) { .wo-rest-bar button:hover { background: #ffffff24; } .wo-rest-bar button:last-child:hover { background: color-mix(in srgb, var(--built) 85%, #fff); } }
@media (prefers-reduced-motion: reduce) { .wo-rest-fill { transition: none; } }
.wo-howto svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; }
.wo-sets th.wo-prev, .wo-sets td.wo-prev { width: 76px; text-align: left; padding-left: var(--space-1); }
.wo-sets td.wo-prev { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
@media (max-width: 359px) { .wo-sets th.wo-prev, .wo-sets td.wo-prev { width: 58px; font-size: var(--text-xs); } }
.wo-ex-foot { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); margin-top: var(--space-2); }
.wo-addset { min-height: 44px; border: 0; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--text-primary); font-weight: 650; }
.wo-ex-foot .text-button { color: var(--text-secondary); }
.wo-add { margin-top: var(--space-4); }
.wo-discard { display: block; width: 100%; margin-top: var(--space-3); color: var(--error); font-weight: 650; }
.wo-finish-discard { color: var(--error); font-weight: 650; }
/* Every set ticked: a wide green button under the last one, the way out of the session. */
.wo-complete { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-height: 60px; margin-top: var(--space-5); border: 0; border-radius: var(--radius-md); background: var(--go); color: var(--go-foreground); font-size: var(--text-lg); font-weight: 750; }
.wo-complete svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .wo-complete:hover { background: color-mix(in srgb, var(--go) 88%, #fff); } }
@media (prefers-reduced-motion: no-preference) {
  .wo-complete.arrive { animation: wo-complete-in var(--dur-slow) var(--ease-out) both; }
  .wo-complete.arrive svg { animation: wo-complete-tick var(--dur-slow) 180ms var(--ease-out) both; stroke-dasharray: 24; }
}
@keyframes wo-complete-in { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
@keyframes wo-complete-tick { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.wo-view-text { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }

/* The Mentor's way in, under the routines and in a routine: one quiet row. */
.rt-mentor-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; margin-top: var(--space-3); padding: 0 var(--space-4); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--accent); text-align: left; font-weight: 650; }
.rt-mentor-row .eyebrow { margin: 0; color: var(--accent); }
/* On an exercise: what Mentor will tell you, under the button's words. */
.ex-mentor { margin-top: var(--space-4); padding-block: var(--space-3); }
.ex-mentor small { display: block; margin-top: 2px; color: var(--text-secondary); font-weight: 500; font-size: var(--text-sm); line-height: 1.35; }
/* A routine proposed by the Mentor, under its answer. */
.proposal { margin-top: var(--space-3); padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--built) 55%, var(--border)); background: var(--surface); }
.proposal .eyebrow { margin: 0; color: var(--built-text); }
.proposal h2 { margin: 2px 0 0; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); }
.proposal-meta { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
.proposal-list { display: -webkit-box; margin: var(--space-2) 0 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.proposal-actions { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.proposal-actions .wo-go { width: 100%; min-height: 48px; }
.proposal-actions .text-button { color: var(--accent); font-weight: 650; }
.proposal-saved { margin: var(--space-3) 0 0; color: var(--built-text); font-weight: 650; }
/* Underlag under an answer: folded, quiet, the app's own counts. */
.basis { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); }
.basis > summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; font-weight: 650; color: var(--text-tertiary); cursor: pointer; }
.basis > summary::after { content: "+"; font-weight: 400; }
.basis[open] > summary::after { content: "–"; }
.basis ul { display: grid; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.basis li { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); line-height: 1.45; }
.basis li b { font-weight: 650; color: var(--text-primary); }
.basis-when { color: var(--text-tertiary); }
.basis li > span:last-child { flex-basis: 100%; }
.basis-sync.stale, .basis-failed { color: var(--error); }
.remembered { margin: var(--space-2) 0 0; }
/* Rapportera: there for whoever looks for it, quieter than the answer. */
.coach-flag { display: block; min-height: 32px; margin-top: var(--space-1); padding: 0; font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); text-align: left; }
.coach-note .coach-flag { display: inline; margin: 0; }
#flag-dialog .flag-reasons { margin: var(--space-4) 0 0; padding: 0; border: 0; }
#flag-dialog label[for="flag-note"] { display: block; margin-top: var(--space-4); font-weight: 650; }
#flag-dialog textarea { width: 100%; margin-top: var(--space-2); }
.remembered .text-button { min-height: 32px; padding: 0; font-size: var(--text-xs); font-weight: 600; text-align: left; overflow-wrap: anywhere; }

/* Det Mentor minns om mig: the rows of Inställningar, each with where it came from. */
.memory h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built-text); }
.memory-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.memory-row { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.memory-row p { margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.memory-row small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.memory-actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-1); }
.memory-actions .text-button { min-height: 40px; padding: 0; font-size: var(--text-sm); font-weight: 650; color: var(--accent); }
.memory-actions .text-button.danger { color: var(--error); }
.memory-note { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.45; }
.memory-log { margin-top: var(--space-5); }
.memory-log > summary { min-height: 44px; display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.memory-edit { display: grid; gap: var(--space-3); }
.memory-edit textarea { width: 100%; font: inherit; }
.memory-kind { grid-template-columns: repeat(3, 1fr); }
.memory-kind .choice span { min-height: 40px; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); }
.memory-until { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
/* A meal told to Mentor: the foods with their amounts, then what it all gives. */
.msg .meal-proposal-items { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.msg .meal-proposal-items li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0; padding: 0; }
.msg .meal-proposal .readout-macros { padding: 0; }
.msg .meal-proposal .readout-macros li { margin: 0; padding: 0; }
.meal-proposal-items small { color: var(--text-secondary); }
.meal-proposal-items b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meal-proposal .readout-macros { margin: var(--space-3) 0 0; }
/* Planera veckan on Vecka: the weekdays as small circles. A dumbbell in gold
   for training, a walking figure in the water's green for a walk, and the pass
   as a gold square in the circle's corner. */
.wp-card { display: grid; gap: var(--space-3); }
.wp-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.wp-head h2 { margin: 0; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); }
.wp-note { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.wp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: 0 calc(-1 * var(--space-1)); padding: 0; list-style: none; }
.wp-day { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 6px 0 2px; border: 0; background: none; color: var(--text-primary); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wp-day:hover, .wp-day:focus { background: none; }
.wp-day:focus-visible { outline: none; }
.wp-day:focus-visible .wp-circle { outline: 2px solid var(--accent); outline-offset: 3px; }
.wp-letter { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.08em; color: var(--text-tertiary); }
.wp-day.today .wp-letter { color: var(--accent); }
.wp-circle { position: relative; display: grid; place-items: center; width: min(32px, 100%); aspect-ratio: 1; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-press) var(--ease); }
.wp-circle svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.wp-day:active:not(:disabled) .wp-circle { transform: scale(0.92); }
.wp-day.today .wp-circle { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.wp-day.train .wp-circle { border: 1.5px solid var(--built); background: color-mix(in srgb, var(--built) 16%, var(--surface)); color: var(--built-text); }
/* A walk is a thing to do, in the blue; malachite is for water alone. */
.wp-day.walk .wp-circle { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.wp-day.done .wp-circle { border-style: solid; }
.wp-day.done.train .wp-circle { color: #fff; }
.wp-day.done.walk .wp-circle { background: var(--accent); color: var(--on-fill); }
.wp-day:disabled { cursor: default; }
.wp-day:disabled:not(.done):not(.missed) .wp-circle, .wp-day:disabled:not(.done):not(.missed) .wp-letter { opacity: 0.7; }
/* The pass, a small gold square cut in the corner, as on the wreath. */
.wp-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 4px; background: linear-gradient(140deg, #f8d77a 0%, var(--built) 45%, #c98a0b 100%); color: var(--ink-on-gold); font-family: var(--display); font-size: 12px; font-weight: var(--display-weight); line-height: 1; box-shadow: 0 1px 2px #11121c40, inset 0 1px 0 #ffffff70; }
.wp-circle .wp-badge { position: absolute; top: -6px; right: -9px; border: 1.5px solid var(--surface); }
.wp-walk { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.wp-walk.on { background: var(--accent); }
/* A day done wears a green ring, so it reads at a glance: a hairline of the
   card, then the green, lit from the top left as the badge is. A pass done is
   green too. Drawn in once, with a glint, when the day turns done in front of
   you. A planned day gone by without it done wears the same ring in red. */
.wp-day.done .wp-circle { box-shadow: 0 0 14px -3px #2f9e5bb3; }
.wp-day.done.train .wp-circle { border-color: #1e7a45; background: radial-gradient(circle at 34% 28%, #a9e9bf, #34b46a 52%, #1e7a45); }
.wp-day.done .wp-circle::after, .wp-day.missed .wp-circle::after { content: ""; position: absolute; inset: -4.5px; padding: 2.25px; border-radius: calc(var(--radius-sm) + 4px); background: conic-gradient(from 200deg, #17643a, #34b46a 14%, #d4f7df 22%, #7fd9a0 30%, #1e7a45 48%, #34b46a 66%, #d4f7df 76%, #1e7a45 88%, #17643a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.wp-day.done .wp-badge, .wp-day.missed .wp-badge { z-index: 1; }
.wp-day.missed .wp-circle { border: 1.5px solid #b42a2f; background: color-mix(in srgb, #e5484d 14%, var(--surface)); color: #c8363b; }
.wp-day.missed .wp-circle::after { background: #d23b40; }
/* The tick and the cross as Idag's rows draw them: square ends, a little heavier than the icons. */
.wp-circle .wp-mark { stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
/* Done today is green like any day done: the blue ring gives way, the letter stays blue. */
@media (prefers-reduced-motion: no-preference) {
  .wp-day.earned .wp-circle { animation: wp-earn var(--dur-slow) var(--ease-out) backwards; }
  .wp-day.earned .wp-badge { animation: wp-badge var(--dur-slow) 500ms var(--ease-out) both; }
}
@keyframes wp-earn {
  0% { scale: 0.82; box-shadow: 0 0 0 0 #2f9e5bcc; }
  45% { scale: 1.14; }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { scale: 1; box-shadow: 0 0 14px -3px #2f9e5bb3; }
}
@keyframes wp-badge { from { scale: 0.4; rotate: -25deg; } to { scale: 1; rotate: 0deg; } }
.wp-repeat { justify-self: start; }
/* Planera dagen: rows as the app's lists, the passes numbered as on their
   cards, and a small stone, as on the cards' difficulty, for what is chosen. */
.wp-dialog { max-width: 440px; }
.wp-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 2px; }
.wp-sheet-head .eyebrow { margin: 0; }
.wp-sheet-head .icon-button { margin-right: calc(-1 * var(--space-2)); }
.wp-dialog h2 { margin: 0 0 var(--space-3); font-family: var(--display); font-size: var(--text-2xl); font-weight: var(--display-weight); }
.wp-rows { display: grid; border-top: 1px solid var(--border); }
.wp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-1); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.wp-row:hover { background: none; }
.wp-row-text { display: grid; gap: 1px; min-width: 0; font-size: var(--text-base); font-weight: 650; }
.wp-row-text small { font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.wp-row-icon { display: grid; place-items: center; color: var(--text-tertiary); }
.wp-row-icon svg, .wp-num.turn svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.wp-row[aria-pressed="true"] .wp-row-icon.train { color: var(--built-text); }
.wp-row[aria-pressed="true"] .wp-row-icon.walk { color: var(--accent); }
.wp-label { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.wp-num { display: grid; place-items: center; align-self: stretch; padding-right: var(--space-3); border-right: 1px solid var(--border); font-family: var(--display); font-size: 26px; line-height: 1; color: var(--text-tertiary); font-variant-numeric: lining-nums; }
.wp-pass-name { font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); letter-spacing: -0.2px; }
.wp-row[aria-pressed="true"] .wp-num { color: var(--built-text); border-right-color: color-mix(in srgb, var(--built) 45%, var(--border)); }
#wp-dialog-list .wp-row[aria-pressed="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--built) 10%, var(--surface)), transparent 75%); }
.wp-tick { display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 2px; }
.wp-tick svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-on-gold); stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.wp-row[aria-pressed="true"] .wp-tick { border-color: var(--built); background: var(--built); }
.wp-row[aria-pressed="true"] .wp-tick svg { opacity: 1; }

/* Mina rutiner: the optional moments as setting rows, the bag and the door as the
   tags they are in the day, and your own moments as a plain list with their time. */
.mine .setting-row { min-height: 64px; }
.mine .setting-row:last-of-type { border-bottom: 1px solid var(--border); }
.mine .setting-row input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; }
.mine-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: var(--space-3) 0; }
.mine-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2) 0 var(--space-3); }
.mine-chip span { font-size: var(--text-sm); line-height: 1; color: var(--text-tertiary); }
@media (hover: hover) { .mine-chip:hover span { color: var(--error); } }
.mine-add { display: flex; gap: var(--space-2); margin: 0; }
.mine-add input:not([type="time"]) { flex: 1; min-width: 0; }
.mine-add input[type="time"] { width: 120px; flex-shrink: 0; }
.mine-add button { flex-shrink: 0; }
.mine-own { list-style: none; padding: 0; margin: var(--space-3) 0; }
.mine-own li { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; border-top: 1px solid var(--border); }
.mine-own li:last-child { border-bottom: 1px solid var(--border); }
.mine-time { font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--built-text); min-width: 44px; }
.mine-name { flex: 1; min-width: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.mine-own .text-button { min-height: 44px; padding: 0; font-size: var(--text-xs); color: var(--text-secondary); }
.mine-supp { padding: var(--space-4) 0 0; }
.mine-sub { margin: 0; font-size: var(--text-xs); color: var(--text-secondary); }
.mine-sub b { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.mine-empty { margin: var(--space-3) 0; font-size: var(--text-xs); color: var(--text-tertiary); font-style: italic; }
/* The planned week on the day card: the circles from Vecka, in place of the button. */
.shift-bottom:has(.wp-strip) { display: block; }
.shift-bottom:has(.wp-strip) > p:not(:empty) { max-width: none; margin-bottom: var(--space-3); }
.shift-buttons:has(.wp-strip) { display: block; }
.wp-strip { padding: var(--space-1) 0 0; }
.wp-strip .wp-days { margin: 0; }
.wp-strip .wp-day { min-height: 0; }
.wp-strip .wp-day.past:not(.done):not(.missed) .wp-circle, .wp-strip .wp-day.past:not(.done):not(.missed) .wp-letter { opacity: 0.7; }
/* A split day: the blocks side by side at a smaller size, two with a hairline
   between, so a day of two blocks is not twice as tall as a day of one. */
.shift-times.multi { letter-spacing: -0.3px; column-gap: var(--space-4); }
.shift-times.multi > div { gap: var(--space-1); }
.shift-times.two { display: grid; grid-template-columns: auto auto; justify-content: start; }
.shift-times.two > div + div { padding-left: var(--space-4); border-left: 1px solid var(--border); }
@media (hover: hover) { .wp-strip .wp-day:hover .wp-circle { border-color: var(--accent); } .wp-strip .wp-day.train:hover .wp-circle { border-color: var(--built-text); } .wp-strip .wp-day.walk:hover .wp-circle { border-color: var(--accent-strong); } }
/* A pass opened from the week's circles: its card lights up once. */
.rt-card.rt-flash { animation: rt-flash 1.6s ease-out; }
@keyframes rt-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--built); } 100% { box-shadow: 0 1px 0 #0000000d; } }
@media (prefers-reduced-motion: reduce) { .rt-card.rt-flash { animation: none; } }
/* The pass tags as metal: gold for the next, silver for those planned after it,
   and when a silver one becomes the next it turns gold. Done today is ink and gold. */
.rt-next { background: var(--built); }
.rt-next.rt-when { background: var(--silver); color: var(--silver-ink); }
.rt-card.ahead { border-top-color: var(--silver); }
.rt-next.rt-done { background: var(--ink-deep); color: var(--built); box-shadow: none; border: 1px solid color-mix(in srgb, var(--built) 60%, transparent); border-top: 0; }
/* A pass done today: the numeral in the gold wreath, and how it went. */
.rt-card.done { border-color: color-mix(in srgb, var(--built) 40%, var(--border)); border-top-color: var(--built-text); }
.rt-num.rt-laurel { position: relative; display: grid; place-items: center; width: 84px; min-width: 0; height: 84px; margin: -10px -6px -10px -10px; padding: 0; border: 0; }
.rt-laurel b { position: relative; font-weight: 400; font-size: 34px; line-height: 1; color: var(--built-text); transform: translateY(-4px); }
.rt-done-line { gap: 6px; color: var(--built-text); }
.rt-done-line svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.rt-again { margin-top: 2px; white-space: normal; color: var(--text-tertiary); }
.rt-next-week { margin-top: var(--space-3); }
.rt-loads { margin: var(--space-3) 0 0; }
.rt-loads-h { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; text-align: left; color: var(--text-tertiary); cursor: pointer; }
.rt-loads-h > span:first-child { flex: 1; }
.rt-loads-sum { letter-spacing: 0; text-transform: none; font-size: var(--text-xs); font-weight: 650; color: var(--text-secondary); }
.rt-loads-sum.up { color: var(--built-text); }
.rt-loads-h .rt-chev { flex: none; margin: 0 4px 0 0; }
.rt-loads ul { margin: 0; padding: 0; list-style: none; }
.rt-loads li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 5px 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.rt-loads li:first-child { border-top: 0; }
.rt-load-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.rt-load { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rt-load.up { color: var(--built-text); }
.rt-next-week .text-button { color: var(--accent); font-weight: 650; }
.rt-card .wo-go.rt-move { flex-direction: column; gap: 2px; line-height: 1.2; }
.rt-move small { font-size: var(--text-xs); font-weight: 600; }
.text-button.rt-move small { margin-left: var(--space-2); color: var(--built-text); }
.rt-moved { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); min-height: 44px; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 650; color: var(--built-text); }
.rt-moved > span { display: inline-flex; align-items: center; gap: 6px; }
.rt-moved svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.rt-moved .text-button { color: var(--accent); font-weight: 650; }
.rt-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-4) 0 0; }
.rt-sum div { min-width: 0; padding-right: var(--space-2); }
.rt-sum div + div { padding-left: var(--space-3); border-left: 1px solid var(--border); }
.rt-sum dt { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.rt-sum dd { margin: 4px 0 0; font-family: var(--display); font-size: var(--text-xl); line-height: 1.1; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.rt-up { color: var(--built-text); font-weight: 700; }
@media (max-width: 359px) { .rt-sum dt { letter-spacing: 0.8px; } .rt-sum dd { font-size: var(--text-lg); } .rt-num.rt-laurel { width: 72px; height: 72px; } .rt-laurel b { font-size: 28px; } }
/* Touch targets: at least 44 px for a thumb. Where a taller button would make the
   row taller, an invisible area reaches out round it instead. */
.masthead-actions .icon-button { min-height: 44px; }
.water-link-add, .water-link-add.bottle { height: 44px; min-height: 44px; }
.water-link-add.bottle { min-width: 44px; }
.wo-close { width: 44px; min-height: 44px; }
.day-nav .pill, button.pill, .moment-quick.skip, .food-per-row .text-button, .pane-foot .text-button { position: relative; }
.day-nav .pill::before, button.pill::before, .moment-quick.skip::before, .food-per-row .text-button::before, .pane-foot .text-button::before { content: ""; position: absolute; inset: -6px -4px; }

/* A link that acts is drawn as a button, never underlined. The plan's buy button
   and its notes (paket-view.js) keep the names they had on Kommande. */
a.primary, a.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-2) var(--space-5); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.fund-give { width: 100%; min-height: 52px; margin-top: var(--space-5); font-size: var(--text-base); }
.fund-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: 1.45; }
.routine-content > a.secondary { margin-top: var(--space-3); }
/* On an exercise, under the picture the animation will replace: a quiet way to the goal. */
.ex-coming { display: block; margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }

/* The app from Google Play draws under the status bar, as an iPhone does: the page
   and the sheets keep clear of it. In a browser the inset is 0. */
.shell { padding-top: env(safe-area-inset-top); }
@media (max-width: 559px) {
  dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top)); }
  dialog.food-dialog { height: min(760px, calc(100dvh - 24px - env(safe-area-inset-top))); }
  #intro-dialog { height: min(800px, calc(100dvh - 32px - env(safe-area-inset-top))); }
}

/* The keyboard (keyboard.js). The page is as tall as what is left above it
   (interactive-widget in index.html), so the sheets shrink to fit there with their
   head in place. What sits on the menu comes down to the keyboard while the menu is
   away, and the statues behind keep the height they had. */
html.kb .coach-form { bottom: var(--space-2); }
html.kb .settings-save { bottom: var(--space-2); }
html.kb .gate-stage { height: calc(var(--page-h, 100dvh) * 0.64); }
/* The questions with the keyboard up: the statue away and the title at the top, so what you type into
   stays in the short sheet instead of sitting at the thumb under it. */
html.kb #intro-dialog .intro-stage { display: none; }
html.kb #intro-dialog .intro-head { margin-top: 0; }
.mp-rotate { margin: 0 0 var(--space-3); }
html.kb .mentor-stage { height: calc(var(--page-h, 100dvh) * 0.7); }
/* A browser that leaves the page its height and only shortens what you see (Safari,
   or one that does not know interactive-widget) gets the sheet set in what you see. */
html.kb-fit dialog:modal { top: var(--kb-top); bottom: var(--kb-bottom); max-height: calc(var(--kb-h) - 24px - env(safe-area-inset-top)); }
html.kb-fit :is(dialog.food-dialog:not(.own-dialog), #intro-dialog):modal { height: min(760px, calc(var(--kb-h) - 24px - env(safe-area-inset-top))); }

/* Inställningar, städad. Mentor först i ett kort med bysten, sedan varje sektion
   som en rad: ikonen i en sten, namnet och en rad om vad den håller. Inne i en
   sektion ligger delarna i egna veck med det de håller på den stängda raden, så
   sidan läses på ett ögonkast. Roadmap står i bladguld vid rubriken. */
.settings-heading { flex-wrap: wrap; align-items: flex-end; row-gap: var(--space-3); }
.roadmap-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3) 0 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 750; letter-spacing: 0.2px; text-decoration: none; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.roadmap-link svg { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: var(--icon-line-sm); stroke-linecap: round; stroke-linejoin: round; }
.roadmap-link:active { transform: translateY(2px); }
.roadmap-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mentor-hero { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 var(--space-6); padding: var(--space-5); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--built) 18.8%, transparent), transparent 60%), var(--surface); }
/* The card at the head of a page wears the gold ring: Mentor, the day's food, the week's wreath, the statue. */
.mentor-hero, .card.food-hero, .card.wk-card, .card.statue-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--built) 45%, var(--border)), 0 12px 32px #11121c14; }
.mentor-hero::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -10px; width: 210px; height: 315px; background: url("statyn/steg-20.webp") no-repeat center top / contain; opacity: 0.13; pointer-events: none; }
.mentor-hero-head { display: flex; align-items: center; gap: var(--space-4); }
.mentor-hero-head .eyebrow { margin: 0 0 var(--space-1); color: var(--built-text); }
.mentor-hero h2 { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: 30px; line-height: 1.02; letter-spacing: -0.3px; }
.mentor-hero h2 em { color: var(--built-text); }
.mentor-hero-lead { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-base); line-height: 1.45; max-width: 34ch; }
.mentor-perks { list-style: none; display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; }
.mentor-perks li { position: relative; padding-left: 22px; font-size: var(--text-sm); line-height: 1.4; }
.mentor-perks li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 8px; height: 8px; background: var(--built); transform: rotate(45deg); }
.mentor-hero .mentor-cta { display: flex; width: 100%; min-height: 52px; font-size: var(--text-base); }
.mentor-hero-note { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-xs); color: var(--text-secondary); }
/* Mentor's schedule at the head of Träning, drawn as a pass card: the bust where the numeral
   stands, the answers it goes from in the meta line, and the pass card's big button. */
.mp-section { margin-bottom: var(--space-5); }
.mp-num { display: grid; place-items: center; }
.mp-facts { color: var(--text-secondary); font-weight: 600; }
.mp-card .wo-go { text-decoration: none; }
.mp-card .wo-go svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.mp-note { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-xs); color: var(--text-secondary); }
.mp-card .rt-title h2 { margin: 0; font-family: var(--display); font-size: var(--text-2xl); font-weight: var(--display-weight); line-height: 1; letter-spacing: -0.4px; text-wrap: balance; overflow-wrap: break-word; }
.mp-more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); }
.mp-more .text-button { color: var(--accent); font-weight: 650; }
/* Mentor's answer on Träning: his words beside the bust, then the passes as pass cards and Spara alla. */
.mp-result .mp-reply { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--built) 40%, var(--border)); }
.mp-reply .msg-body { font-size: var(--text-sm); line-height: 1.5; }
.mp-reply .msg-body > :first-child { margin-top: 0; }
.mp-reply .msg-body > :last-child { margin-bottom: 0; }
.mp-result .mp-save-all { width: 100%; margin-top: var(--space-4); }
.mp-consent { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); box-shadow: inset 0 0 0 1px var(--border); }
.mp-consent p { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.mp-consent .mp-consent-title { margin-bottom: var(--space-2); font-size: var(--text-base); font-weight: 650; color: var(--text-primary); }
.mentor-consent { margin-top: var(--space-3); border-top: 1px solid var(--border); }
#main .mentor-consent > summary { min-height: 44px; padding: var(--space-2) 0; justify-content: center; font-family: var(--font); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.mentor-consent p { margin: 0 0 var(--space-2); font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.mentor-consent .text-button { padding-inline: 0; }

#main .set-section > summary { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); min-height: 76px; }
.set-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface-secondary); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--border); }
.set-icon svg { width: var(--icon-lg); height: var(--icon-lg); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.set-section[open] .set-icon { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.set-title { min-width: 0; line-height: 1.05; }
.set-title small { display: block; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font); font-size: var(--text-sm); letter-spacing: 0; color: var(--text-secondary); }
.set-section > .routine-content > .muted:first-child { margin-top: 0; }
.admin-group .set-icon { color: var(--text-secondary); }
.admin-group > summary .set-title { font-size: 20px; color: var(--text-secondary); }

.sub-fold { margin: 0 0 var(--space-2); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
#main .sub-fold > summary { min-height: 60px; padding: var(--space-3) var(--space-4); gap: var(--space-3); font-family: var(--font); font-size: var(--text-base); font-weight: 650; letter-spacing: 0; }
.sub-fold-title { min-width: 0; }
.sub-fold-title small { display: block; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.sub-fold-chev { margin-right: 4px; border-right: 2px solid var(--text-tertiary); border-bottom: 2px solid var(--text-tertiary); transition: transform var(--dur-base) var(--ease-out); }
.sub-fold[open] { box-shadow: 0 0 0 1px var(--border-strong); }
.sub-fold-body { padding: 0 var(--space-4) var(--space-4); }
.stats-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; margin-block: var(--space-2) var(--space-4); }
.stats-flags { list-style: none; margin: var(--space-2) 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.stats-flags summary { cursor: pointer; }
.stats-flags p { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.stats-flag-answer { white-space: pre-wrap; color: var(--text-secondary); }
.stats-table th, .stats-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border); text-align: right; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; padding-left: 0; }
.stats-table th { color: var(--text-secondary); font-weight: 500; }
.stats-scroll { overflow-x: auto; }
.stats-people th, .stats-people td { white-space: nowrap; }
.stats-people .stats-gone td { color: var(--text-secondary); }
.sub-fold-body > .muted:first-child { margin-top: 0; }
.sub-fold-body > .goal-fields:first-child { margin-top: 0; }
.sub-fold .setting-row:first-child, .sub-fold .muted + .setting-row { border-top: 0; }
.mine .sub-fold .setting-row:last-of-type { border-bottom: 0; }
.sub-fold .plan-card { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); }
.sub-fold .plan-card .target-form { margin-bottom: 0; }
.about-group .profile-form { margin-top: var(--space-2); }
.about-group .goal-fields > button[type="submit"] { margin-top: var(--space-1); }
.about-group .goals-sub { font-family: var(--font); margin: var(--space-5) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.about-links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin-top: var(--space-3); }
.about-links .text-button { padding-inline: 0; }

.auto-box { margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-secondary); }
.auto-head { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built-text); }
.auto-list { list-style: none; display: grid; gap: var(--space-2); margin: 0; padding: 0; }
.auto-list li { position: relative; padding-left: 26px; font-size: var(--text-sm); line-height: 1.4; }
.auto-list li::before { content: ""; position: absolute; left: 2px; top: 1px; width: 16px; height: 16px; border-radius: var(--radius-sm); background: var(--built); }
.auto-list li::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 4px; height: 8px; border-right: 2px solid var(--ink-on-gold); border-bottom: 2px solid var(--ink-on-gold); transform: rotate(45deg); }

.set-sub { margin: var(--space-6) 0 var(--space-2); font-family: var(--font); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.account-card { display: flex; align-items: center; gap: var(--space-3); }
.account-card .muted { margin: 0; }
.account-mark { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md); background: linear-gradient(135deg, #f7d27a, var(--built) 50%, #c98a12); color: var(--ink-on-gold); font-family: var(--display); font-size: 24px; }
.pref-rows { display: grid; }
.pref-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: 64px; padding: var(--space-2) 0; border-top: 1px solid var(--border); }
.pref-row:last-child { border-bottom: 1px solid var(--border); }
.pref-label { font-size: var(--text-sm); font-weight: 650; }
.pref-label small { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--text-secondary); }
.pref-row .theme-options { margin: 0; }
.pref-row .theme-options button { min-height: 44px; padding-inline: var(--space-3); }
.account .account-actions { margin-top: 0; padding-top: 0; border-top: 0; }
.account .legal-links { margin-top: var(--space-5); }
/* The yeses to health data and Mentor: where to read more under each, and the line
   that stands where health data would be without the yes (samtycken.md). */
.consent-link { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); }
.goal-fields .data-off { grid-column: 1 / -1; margin: 0; }
.morning-card .data-off { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.food-hero > .data-off { margin: var(--space-4) 0 0; }
.intro-consent .intro-lead + .intro-lead { margin-top: var(--space-3); }

/* Kommande, plain: the goal as one card with its figures, its bar and the way to help,
   and the rest of the way as rows like the ones under Inställningar, grouped by when. */
.road-list { list-style: none; margin: 0; padding: 0; }
.road-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: 76px; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.road-row:last-child { border-bottom: 0; }
.road-row .set-title { font-family: var(--display); font-size: 22px; }
.road-row .set-title small { white-space: normal; line-height: 1.4; }
.road-row.nu .set-icon { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.road-row.sen .set-icon { color: var(--text-secondary); }
.road-row.klar .set-icon { color: var(--built-text); background: color-mix(in srgb, var(--built) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--built) 45%, transparent); }
.road-row.klar .set-icon svg { stroke-width: var(--icon-line-sm); }
/* Done is ticked and struck through, and shown as it looks in the app: the pictures
   of a row share its width by their shape (--ar, width over height), so they stand
   equally tall, and a row is never taller than about 230px. Where there is room
   they stand under the text. */
.road-done { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: var(--built); }
.road-shots { grid-column: 1 / -1; display: flex; gap: var(--space-2); width: 100%; max-width: calc(var(--ar) * 230px); margin: 0 auto var(--space-1); }
.road-shots img { flex: var(--ar) 1 0; min-width: 0; width: 0; height: auto; border-radius: var(--radius-md); background: var(--surface-secondary); }
.road-shots img.round { border-radius: 50%; }
@media (min-width: 600px) { .road-shots { grid-column: 2; margin-inline: 0; } }
.road-share { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: var(--space-6); }
/* Paket: the plans as the app's large choices, one under the other with the price to the
   right, the button under them, and then everything side by side in a table where the
   chosen plan's column is lit. */
.paket-mine { margin-bottom: var(--space-4); }
.paket-mine .settings-label, .paket-buy .settings-label { margin-top: 0; }
.paket-mine h2 { margin: 0 0 var(--space-1); font-family: var(--display); font-weight: var(--display-weight); font-size: 28px; }
.paket-mine .muted { margin: 0; font-size: var(--text-sm); }
.paket-portal { width: 100%; margin-top: var(--space-4); }
.paket-store { margin-top: var(--space-3); flex-wrap: wrap; }
.paket-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.paket-choices .choice-list { grid-template-columns: minmax(0, 1fr); }
.paket-choice span, .paket-row > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); justify-content: stretch; padding: var(--space-3) var(--space-4); text-align: left; }
.paket-name { font-size: var(--text-lg); font-weight: 700; }
.paket-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.paket-line { grid-column: 1 / -1; font-size: var(--text-sm); font-weight: 400; line-height: 1.4; color: var(--text-secondary); }
.choice input:checked + span .paket-line { color: inherit; }
.paket-rows { margin: 0; padding: 0; list-style: none; }
.paket-row + .paket-row { border-top: 1px solid var(--border); }
.paket-row > span { padding-inline: 0; }
.paket-tag { margin-left: var(--space-1); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-secondary); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); vertical-align: 2px; }
.paket-compare { margin: var(--space-8) 0 var(--space-3); font-family: var(--display); font-weight: var(--display-weight); font-size: 26px; }
.paket-table-wrap { margin: 0 calc(-1 * var(--space-1)); }
.paket-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.paket-table col, .paket-table thead th:not(:first-child), .paket-table td { width: 48px; }
.paket-table thead th:first-child { width: auto; }
/* Gratis holds only – and ✓, so it takes less room than the three that hold numbers. */
.paket-table thead th:nth-child(2) { width: 38px; }
.paket-table thead th { padding: var(--space-2) 0; font-size: var(--text-xs); font-weight: 700; text-align: center; color: var(--text-secondary); }
.paket-table th[scope="row"] { padding: var(--space-3) var(--space-1); text-align: left; font-weight: 600; border-top: 1px solid var(--border); }
.paket-table td { padding: var(--space-3) 0; text-align: center; vertical-align: middle; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.paket-table .on { background: var(--accent-soft); color: var(--accent-strong); }
.paket-table thead .on { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.paket-group th { padding: var(--space-5) var(--space-1) var(--space-2); text-align: left; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.paket-feat { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--text-sm); line-height: 1.3; }
.paket-feat .set-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); }
.paket-feat .set-icon svg { width: var(--icon-md); height: var(--icon-md); }
.paket-feat small { display: block; margin-top: 3px; font-size: var(--text-xs); font-weight: 400; line-height: 1.4; color: var(--text-secondary); }
/* Four plans on a narrow phone: the words keep the room, and the pictures step aside. */
@media (max-width: 380px) {
  .paket-feat { grid-template-columns: minmax(0, 1fr); }
  .paket-feat .set-icon { display: none; }
}
.paket-n { font-size: var(--text-sm); font-weight: 700; }
.paket-yes { font-weight: 700; color: var(--accent-strong); }
.paket-no { color: var(--text-tertiary); }
.paket-fine { margin: var(--space-4) 0 0; font-size: var(--text-xs); line-height: 1.5; }
/* Stöd: the amounts are the app's large choices (.choice, as in the intro), three in a row,
   and your own amount is a field with its unit, as the goals under Mål are. */
.stod-thanks { margin-bottom: var(--space-5); box-shadow: 0 0 0 1px var(--built); }
.stod-thanks h2 { margin: 0 0 var(--space-2); font-family: var(--display); font-weight: var(--display-weight); font-size: 26px; color: var(--built-text); }

/* A saved workout, read. On the dark band the figures are an inscription, divided by
   hairlines of gold, and under them how it went against last time. Below, each
   exercise has its numeral, every set as a stone (dashed for a warm-up, gold for the
   one that made a record) and the time before, so the progress can be read. */
.wo-done-head { border-bottom: 1px solid color-mix(in srgb, var(--built) 45%, var(--ink-deep)); }
.wo-done-head .wo-stats { gap: 0; }
.wo-done-head .stat { padding: 0 var(--space-3); border-left: 1px solid color-mix(in srgb, var(--built) 30%, var(--ink-deep)); border-radius: 0; background: none; }
.wo-done-head .stat:first-child { padding-left: 0; border-left: 0; }
.wo-done-head .stat span { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--on-dark-muted); }
.wo-done-head .stat strong { font-size: min(34px, 30cqi); }
.wo-done-head .wo-stats:has(> :nth-child(4)) { row-gap: var(--space-4); }
.wo-done-head .wo-stats:has(> :nth-child(4)) .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
.wo-v-verdict { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--on-dark-soft); }
.wo-v-verdict span { display: inline-flex; align-items: center; gap: 6px; }
.wo-v-verdict .up { color: var(--built); font-weight: 650; }
.wo-v-verdict b { font-weight: 800; }
.wo-v-mark { display: inline-block; flex: none; width: 7px; height: 7px; background: var(--built); transform: rotate(45deg); }

.wo-v-h { display: flex; justify-content: space-between; align-items: baseline; }
.wo-v-h span { font-family: var(--display); font-size: var(--text-lg); font-weight: var(--display-weight); letter-spacing: 0; text-transform: none; color: var(--text-tertiary); }
.wo-v-list { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.wo-v-ex { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.wo-v-ex:first-child { padding-top: var(--space-2); border-top: 0; }
.wo-v-top { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; }
.wo-v-num { padding-top: 1px; font-family: var(--display); font-size: 24px; line-height: 1; text-align: center; color: var(--text-tertiary); font-variant-numeric: lining-nums; }
.wo-v-ex.has-pr .wo-v-num { color: var(--built-text); }
.wo-v-name strong { display: block; font-size: var(--text-base); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.wo-v-name small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-secondary); }
.wo-v-total { font-family: var(--display); font-size: var(--text-lg); line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wo-v-sets, .wo-v-pr, .wo-v-prev, .wo-v-note { margin-left: calc(34px + var(--space-3)); }
.wo-v-sets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); margin-bottom: 0; padding: 0; list-style: none; }
.wo-v-sets li { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wo-v-sets li.warm { border-style: dashed; border-color: var(--border-strong); background: transparent; color: var(--text-secondary); }
.wo-v-sets li.pr { border-color: var(--built); background: color-mix(in srgb, var(--built) 20%, var(--surface)); font-weight: 700; }
.wo-v-kind { font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.5px; text-decoration: none; color: var(--text-tertiary); }
.wo-v-sets small { font-size: var(--text-2xs); color: var(--text-secondary); }
.wo-v-pr { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); margin-bottom: 0; font-size: var(--text-sm); font-weight: 650; line-height: 1.45; color: var(--built-text); }
.wo-v-pr .wo-v-mark { transform: translateY(-1px) rotate(45deg); }
.wo-v-prev { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--text-xs); line-height: 1.45; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wo-v-prev span { display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.wo-v-note { margin-top: var(--space-2); margin-bottom: 0; font-size: var(--text-sm); font-style: italic; color: var(--text-secondary); overflow-wrap: anywhere; }

.wo-v-energy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-sm); }
.wo-v-stones { display: inline-flex; gap: 4px; }
.wo-v-stones i { width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 2px; }
.wo-v-stones i.on { border-color: var(--built-text); background: var(--built); }
.wo-v-energy strong { font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1; }
.wo-v-energy span:last-child { color: var(--text-secondary); }
.wo-v-quote { margin: var(--space-3) 0 0; padding: 2px 0 2px var(--space-3); border-left: 2px solid var(--built); font-family: var(--display); font-size: var(--text-lg); font-style: italic; line-height: 1.35; overflow-wrap: anywhere; }
.wo-v-hurt { margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 650; color: var(--error); }
/* The Mentor's row under a workout: the inscription above the words, so they have the width. */
.wo-v-mentor { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mark go" "text go"; row-gap: 4px; margin-top: var(--space-6); padding-block: var(--space-3) var(--space-4); }
.wo-v-mentor .eyebrow { grid-area: mark; font-size: var(--text-2xs); }
.wo-v-mentor > span:nth-child(2) { grid-area: text; }
.wo-v-mentor > span:last-child { grid-area: go; font-size: var(--text-lg); }
/* Tillskott: what is worth getting, under the interview's choices and in Mina rutiner. */
.supp-tips:empty { display: none; }
.supp-tips { grid-column: 1 / -1; margin-top: var(--space-4); }
.supp-tips-h { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.supp-tips-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.supp-tips-list li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.supp-tips-list p { flex: 1; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.supp-tips-list b { color: var(--text-primary); }
.supp-tips-list button { flex: none; }
.supp-tips-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); }

/* Inskriften. Cinzel står i versaler och är bredare än serifen den ersatte. Den negativa
   spärrningen var gjord för en smal serif; versaler behöver luft. Nu var en kursiv i
   monumentstorlek och blir en inskription som får plats på två rader. Etiketterna över
   sektionerna huggs i samma sten som rubrikerna; de små dataetiketterna stannar i
   Hanken Grotesk, där de läses snabbast. Storlekarna räknar med size-adjust (78 %).
   Declared last, so it is the system. */
h1,
h2,
h3,
dialog h2,
.heading h1,
.day-heading h1,
.big-number,
.stat strong,
.gauge-center strong,
.gauge-side strong,
.week-date strong,
.home-time,
.shift-times,
.card-head h2,
.routine-group summary,
.meal-head h2,
.readout-kcal strong,
.mentor-greet,
.report-head h1,
.report-hero-title,
.rt-title h3,
.wp-dialog h2,
.wo-title,
.wk-count strong,
.wk-weight strong,
.reck-score b {
  letter-spacing: 0.01em;
}
.now-title { font-size: clamp(var(--text-2xl), 12vw, var(--text-display)); line-height: 1; letter-spacing: 0.01em; overflow-wrap: break-word; hyphens: auto; }
.eyebrow,
.now-label,
.shift-top h2,
.goals-group .goals-sub,
.reck-head,
.statue-news,
.form-sub {
  font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: 2.5px;
}
.intro-quote cite, .settings-label, .ex-h {
  font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 2px;
}

/* Idag: Nu first, and the day's temple under it in brief. The whole of it is a
   button down to the list, so it is the size of a summary, not of a picture. */
.day-progress.compact { display: block; text-align: left; font: inherit; border: 0; cursor: pointer; }
.day-progress.compact .temple { display: block; width: auto; max-width: 100%; margin: 0 auto; }
.day-progress .dp-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--on-dark-muted); }
.day-progress .dp-line b { color: var(--on-dark); }
.day-progress.compact:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.now-actions .now-mark { width: 100%; min-height: 48px; font-size: var(--text-base); }
.now-counts { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
/* Mat: the ways to add food under one heading. */
.food-add-label { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.food-more .more-head { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }
.food-more .kcal-row:last-of-type { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.food-estimate { color: var(--warning); font-weight: 600; }
/* Statyn: a key to the marks, earned against what is still there to take. */
.score-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.score-key span { display: inline-flex; align-items: center; gap: var(--space-2); }
.score-key .score-mark { display: inline-block; margin-left: 0; }
.score-key .on .score-mark { background: var(--built); box-shadow: none; }
.score-key .off .score-mark { box-shadow: inset 0 0 0 1.5px var(--error); opacity: 0.7; }
/* The rules, folded under Så fungerar det. */
.rules-card > summary { cursor: pointer; list-style: none; }
.rules-card > summary::-webkit-details-marker { display: none; }
.rules-card > summary h2::after { color: var(--text-tertiary); }
.rules-card[open] > summary h2::after { content: " ⌃"; }
/* Idag after a day without a gable: the way back, above Nu. */
.now-back { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.score-key .part .score-mark { box-shadow: inset 0 0 0 1.5px var(--built); }
button.coach-quick { width: 100%; text-align: left; font: inherit; cursor: pointer; }
/* Fråga Mentor last on Idag, over the tabs, apart from the list above it. */
.coach-quick.today-mentor { margin: var(--space-5) 0 0; }
/* The first-run questions end on the first day itself. */
.intro-plan { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; gap: 0; }
.intro-plan li { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border); font-size: var(--text-sm); }
.intro-plan li.work { color: var(--text-secondary); }
.intro-plan-time { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.intro-plan-note { font-size: var(--text-sm); }
.intro-to-work { margin-top: var(--space-3); }
/* The way in: two ways on, and the example day under them. */
.gate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.gate-actions button { min-height: 48px; }
.gate-example { margin: 0 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.gate-example h2 { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-xl); }
.gate-ex-pick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.gate-ex-pick button { min-height: 44px; padding: 0 var(--space-4); }
.gate-free { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.gate-have { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
/* Easy to hit: the small buttons on Idag and Mat keep their look, and the buttons
   themselves are 44 px high, the room they take back from their margins. */
.moment-quick.skip, .morning-card button { position: relative; }
.moment-quick.skip::after, .morning-card button::after { content: ""; position: absolute; inset: -4px; }
.row-food { padding-block: 6px; margin-block: -6px; }
.meal-tools .text-button { min-height: 44px; margin-block: -2px; }
.morning-cell .text-button { min-height: 44px; margin-bottom: -2px; }
.mentor-hero-note a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
/* The program cards under Träning: with larger type the name and the line under it wrap instead of running off the card. */
.pg-list .rt-head { grid-template-columns: minmax(0, 1fr) auto; }
.pg-list .rt-level { white-space: normal; flex-wrap: wrap; }

/* Hold the glass or the bottle (holdForWaterPick in app.js): the finger may
   drag sideways once it has held, so the buttons keep only vertical scrolling,
   and the phone's own callout and text selection stay away. */
.water-link-add { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.water-pick h2 { margin-bottom: var(--space-2); }
/* The vessel grows with the amount, from a small glass to a large one. */
.water-pick-stage { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-5); height: 176px; margin: var(--space-3) 0 var(--space-4); }
.water-pick-vessel { flex-shrink: 0; height: calc(72px + 100px * var(--pick, 0.5)); width: auto; aspect-ratio: 60 / 100; overflow: visible; }
.water-pick-water { fill: var(--water); opacity: 0.8; }
.water-pick-outline { fill: none; stroke: var(--water); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.water-pick-amount { display: grid; gap: 2px; min-width: 7ch; margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); }
.water-pick-amount strong { color: var(--water); font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.water-pick-amount small { font-size: var(--text-xs); }
.water-pick-range { display: block; width: 100%; height: 44px; margin: 0 0 var(--space-3); accent-color: var(--water); }
.water-pick-presets { margin-bottom: 0; }
.water-pick-presets button { min-height: 40px; font-variant-numeric: tabular-nums; }
.water-pick-presets button[aria-pressed="true"] { background: var(--water); border-color: var(--water); color: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
  .water-pick-vessel { transition: height var(--dur-fast) var(--ease-out); }
}

/* Visa mig runt (guide.js): the page goes dark as for the tour, but for the one
   button a step is about, ringed in the gold of a built day; a card points at it
   and says what it is for. Nothing under it is pressed. */
#guide-dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; transform: none; opacity: 1; animation: none !important; }
#guide-dialog::backdrop { background: transparent; }
.guide-spot { position: absolute; border-radius: var(--radius-lg); box-shadow: 0 0 0 2px var(--built), 0 0 24px 2px color-mix(in srgb, var(--built) 45%, transparent), 0 0 0 200vmax #0b0a08b8; pointer-events: none; }
.guide-spot::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--built); opacity: 0; }
.guide-card { position: absolute; background: var(--surface); color: var(--text-primary); border-radius: 22px; padding: var(--space-4) var(--space-5); box-shadow: 0 18px 48px #0006, 0 2px 6px #0003; }
/* The point, at the button: over the card when the card is under it, under when over. */
.guide-card::before { content: ""; position: absolute; left: var(--tip, 50%); width: 14px; height: 14px; margin-left: -7px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.guide-card[data-side="below"]::before { top: -6px; }
.guide-card[data-side="above"]::before { bottom: -6px; }
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
#guide-dialog .guide-head .eyebrow { margin: 0; }
.guide-skip { font-size: var(--text-sm); color: var(--text-tertiary); padding: 6px 0; min-height: 32px; }
#guide-dialog h2 { font-size: var(--text-xl); letter-spacing: -0.4px; line-height: 1.15; margin: 0 0 var(--space-2); }
#guide-dialog h2:focus { outline: none; }
.guide-text { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.5; margin: 0; }
.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
#guide-dialog .guide-dots { margin: 0; }
.guide-nav { display: flex; align-items: center; gap: var(--space-2); }
.guide-back { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.guide-back svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
#guide-next { min-width: 104px; }
@media (prefers-reduced-motion: no-preference) {
  .guide-spot { transition: top var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); }
  /* The ring calls three times, then the spot stands still: a loop is only for what is going on. */
  .guide-spot::after { animation: guide-ring 2.4s var(--ease-out) 400ms 3; }
  .guide-card { transition: top var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out); }
  .guide-card.turn :is(.guide-head, h2, .guide-text) { animation: guide-in var(--dur-slow) var(--ease-out) both; }
  .guide-card.turn h2 { animation-delay: 40ms; }
  .guide-card.turn .guide-text { animation-delay: 80ms; }
  #guide-dialog[open] { animation: guide-fade var(--dur-base) var(--ease-out) both !important; }
}
@keyframes guide-ring { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.08); } }
@keyframes guide-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes guide-fade { from { opacity: 0; } }

/* Idag: the temple's niche under Nu is a card, as the week's temple is, with room
   inside it: run out over the gutters it was clipped at the page's edge, and its
   words lay against the screen's. The temple stands in it nearly twice as tall as before. */
#main { overflow-clip-margin: var(--space-4); }
.day-progress.compact { width: 100%; border-radius: var(--radius-md); margin: var(--space-3) 0 var(--space-8); padding: var(--space-5) var(--space-4) var(--space-4); }
.day-progress.compact .temple { height: 168px; }
.day-progress .dp-line { margin-top: var(--space-3); }

/* Idag under Nu, second cut. The morning, once answered, is one line under the
   date: when you woke, what you weighed, how long you slept, and Ändra to open
   the card again. Dagens pass is lower: the times a step smaller, the session
   or the walk on a line of its own with its mark, Vila on a day off that has
   one, the week in the card for everyone, and Ändra pass as a text button. */
.morning-fold { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.morning-fold > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; cursor: pointer; min-height: 44px; font-size: var(--text-sm); color: var(--text-secondary); -webkit-tap-highlight-color: transparent; }
.morning-fold > summary::-webkit-details-marker { display: none; }
.morning-fold > summary b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.morning-fold .fold-ok { color: var(--built-text); font-weight: 700; }
.morning-fold .fold-edit { margin-left: auto; color: var(--accent-strong); font-weight: 600; }
.morning-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.morning-fold[open] > summary { margin-bottom: var(--space-2); }
.morning-fold[open] > .morning-card { margin-bottom: 0; }
.shift-times { font-size: 24px; letter-spacing: -0.3px; }
.shift-times.multi { font-size: clamp(20px, 5.6vw, 24px); }
.shift-empty { font-size: 24px; letter-spacing: -0.3px; }
.shift-rest { font-family: var(--display); }
.shift-act { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.shift-act b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-act .act-mark { width: 9px; height: 9px; border-radius: 1px; background: var(--built); transform: rotate(45deg); flex-shrink: 0; }
.shift-act.walk .act-mark { background: var(--accent); border-radius: 50%; transform: none; }
.shift-week { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.shift-bottom { margin-top: var(--space-3); }
.shift-buttons .text-button { color: var(--accent-strong); font-weight: 600; padding-inline: 0; min-height: 44px; margin-block: -4px; }

/* Mat: every calorie figure says kalorier, as the macros say g. Ätit and Rörelse
   are set in the macro values' voice (the sans, one weight, the reading size),
   with the word under the number, small and in the sans: the display face has no
   lowercase, so a word is never set in it. The number under Kvar keeps the display
   size as the point of the arch, with the word under it and the goal under that. Without
   a goal the way to one is a button where the goal would be. */
.gauge-figure { display: grid; justify-items: center; gap: 0; }
.gauge-side strong { font-family: var(--font); font-size: var(--text-base); font-weight: 650; font-stretch: normal; letter-spacing: 0; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gauge-center strong { white-space: nowrap; }
/* The number is a span inside the strong, so it can count up: it takes the strong's voice, not the label's. */
.gauge-side strong span, .gauge-center strong span { font: inherit; letter-spacing: inherit; color: inherit; }
.gauge-unit { font-family: var(--font); font-style: normal; font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.1px; line-height: 1.2; color: var(--text-secondary); white-space: nowrap; }
.gauge-center .gauge-figure { gap: 0; }
.gauge-center .gauge-unit { font-size: var(--text-sm); margin-top: -4px; }
.gauge-cta { display: inline-block; padding: 0; min-height: 0; line-height: 1.35; font-size: var(--text-sm); font-weight: 600; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.gauge-center small.gauge-set { max-width: 90%; }
/* The dial is one grid cell that the arch and the words under Kvar share: the words
   start 37 % down the arch (326 of its 480 wide) and take the room they need, so at
   large text the goal pushes the macros down instead of lying across their line. */
.gauge-dial { display: grid; margin-bottom: 0; }
.gauge-dial > .valv, .gauge-dial > .gauge-center { grid-area: 1 / 1; }
.gauge-dial .gauge-center { position: static; inset: auto; align-self: start; margin: calc(37% * 326 / 480) 18% 0; }
/* A macro too wide for its third breaks after the slash, never between the figure and g. */
.macros .macro strong { white-space: normal; }
@media (min-width: 360px) {
  /* The bars stay on one line when one figure takes two. */
  .macros .macro { grid-template-rows: auto 1fr auto; }
  .macros .macro strong { align-self: center; }
}

/* Kom igång (guide.js): the first things to do, on the night of the training
   wreath, its laurel going from bronze to gold as they are done. The next one
   to do is the one thing lit; the done ones keep their place, struck in gold. */
.card.start-card { --ink: var(--ink-deep); position: relative; overflow: hidden; padding: var(--space-5) var(--space-4) var(--space-2); background: var(--ink); color: var(--on-dark); border-color: var(--ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--built) 45%, var(--border)), 0 12px 32px #11121c14; }
.start-card::before { content: ""; position: absolute; left: 64px; top: 68px; width: 240px; height: 240px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--built) calc(10% + 16% * var(--share, 0)), transparent), transparent 68%); pointer-events: none; }
.start-head { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.krans.start-krans { width: 96px; }
.start-krans img { object-fit: contain; filter: saturate(calc(0.4 + 0.6 * var(--share))) brightness(calc(0.62 + 0.38 * var(--share))) contrast(calc(0.8 + 0.2 * var(--share))); }
.start-count { position: absolute; inset: 0 0 12% 0; display: grid; place-content: center; justify-items: center; }
.start-count strong { font-family: var(--display); font-size: 34px; font-weight: var(--display-weight); line-height: 0.9; color: var(--on-dark); font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px #000c; }
.start-count small { margin-top: 2px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built); }
.start-title { min-width: 0; }
.start-title .eyebrow { margin: 0; color: var(--built); }
.start-title h2 { margin: var(--space-1) 0; font-family: var(--display); font-size: var(--text-xl); font-weight: var(--display-weight); line-height: 1.15; color: var(--on-dark); }
.start-line { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--on-dark-soft); }
.start-list { position: relative; display: grid; gap: var(--space-1); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.start-row > button, .start-row.done { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); }
.start-row > button { border: 1px solid transparent; background: transparent; color: var(--on-dark); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
@media (hover: hover) { .start-row > button:hover { background: #ffffff0f; } }
.start-row > button:focus-visible { outline: 2px solid var(--built); outline-offset: 2px; }
.start-row.next > button { border-color: color-mix(in srgb, var(--built) 70%, transparent); background: color-mix(in srgb, var(--built) 11%, transparent); }
.start-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--obsidian-edge); border-radius: 50%; font-size: var(--text-sm); font-weight: 700; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.start-row.next .start-mark { border-color: var(--built); color: var(--built); }
.start-row.done .start-mark { border-color: var(--built); background: var(--built); color: var(--ink); }
.start-mark svg { width: var(--icon-md); height: var(--icon-md); fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.start-text { display: grid; gap: 2px; min-width: 0; }
.start-text b { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
.start-text small { font-size: var(--text-sm); line-height: 1.35; color: var(--on-dark-muted); }
.start-row.done .start-text b { font-weight: 600; color: var(--on-dark-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--built) 70%, transparent); text-decoration-thickness: 1.5px; }
.start-row.done .start-text small { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--built); }
.start-go svg { display: block; width: var(--icon-md); height: var(--icon-md); fill: none; stroke: var(--on-dark-muted); stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.start-row.next .start-go svg { stroke: var(--built); }
.start-foot { position: relative; display: flex; justify-content: flex-end; margin-top: var(--space-1); }
.start-card .start-foot .text-button { min-height: 44px; padding: 0 var(--space-1); }
.start-card.whole { padding-bottom: var(--space-2); }
.start-card.whole .start-line { color: var(--on-dark-calm); }
/* Show me on a page whose guide was already seen (showMe in guide.js): the thing
   in a ring of gold that fades, over nothing. */
.guide-flash { animation: guide-flash 2.6s var(--ease-out); }
@keyframes guide-flash {
  0%, 55% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--built-text), 0 0 0 12px color-mix(in srgb, var(--built) 30%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent, 0 0 0 6px transparent, 0 0 0 12px transparent; }
}
/* Less motion: the ring stands still, and goes when guide.js takes the class away. */
@media (prefers-reduced-motion: reduce) {
  .guide-flash { animation: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--built-text); }
}
/* The day's tip, the first week: a card of the page, with a thread of gold. */
.card.day-tip { box-shadow: inset 3px 0 0 var(--built); padding: var(--space-4) var(--space-4) var(--space-3) calc(var(--space-4) + 3px); }
.day-tip .eyebrow { margin: 0; color: var(--built-text); }
.day-tip h2 { margin: var(--space-1) 0 var(--space-2); font-family: var(--display); font-size: var(--text-lg); font-weight: var(--display-weight); line-height: 1.2; }
.day-tip p:not(.eyebrow) { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.day-tip-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.day-tip-actions .secondary { min-height: 44px; padding-inline: var(--space-4); }
.day-tip-actions .text-button { min-height: 44px; padding: 0; color: var(--text-secondary); }
/* A tip where a thing is first met: one line of help, put away with Uppfattat. */
.tip { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: var(--space-1) var(--space-2); margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in srgb, var(--built) 12%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--built) 40%, transparent); text-align: left; }
.tip-mark { width: var(--icon-md); height: var(--icon-md); margin-top: 1px; fill: none; stroke: var(--built-text); stroke-width: var(--icon-line); stroke-linecap: round; stroke-linejoin: round; }
.tip p { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--text-primary); }
.tip .text-button { grid-column: 2; justify-self: start; min-height: 36px; padding: 0; font-size: var(--text-sm); font-weight: 700; }
.describe-form .tip { margin-top: 0; }

/* Skalet och designsystemet (designgranskningen 18 okt, docs/design-granskning-okt.md).
   Declared after everything it settles, and before the motion safety net that ends the file. */

/* The phone's status bar lies over the page (EdgeToEdge, viewport-fit=cover): a band of
   the page's own ground stands under it, so nothing scrolls in behind the clock. */
body::before { content: ""; position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--background); pointer-events: none; }

/* The menu in dark: a step up from the cards it floats over, with an edge of its own. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs { background: var(--surface-secondary); box-shadow: 0 0 0 1px var(--border-strong), 0 10px 30px #0008; } }
:root[data-theme="dark"] .tabs { background: var(--surface-secondary); box-shadow: 0 0 0 1px var(--border-strong), 0 10px 30px #0008; }
/* The menu is obsidian in both themes: its focus ring is the light of the page, inside the tab. */
.tabs button:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -3px; }

/* The sync stone after the name has a shape for each state, so it reads without its
   colour: cut and filled when synced, hollow while a change waits, round and red when
   it failed, a flat line when it saves only here. */
.brand-dot[data-state="ok"] { background: var(--built); box-shadow: none; }
.brand-dot[data-state="pending"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--built-text); }
.brand-dot[data-state="error"] { background: var(--error); border-radius: 50%; transform: none; width: 7px; height: 7px; }
.brand-dot[data-state="local"] { background: var(--border-strong); border-radius: 1px; transform: none; width: 8px; height: 2px; }

/* What did not go is said in the colour of an error, and a tap takes it away (toast(text, { error: true })). */
.toast.error { background: var(--error-surface); color: var(--error); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 45%, transparent), var(--shadow); font-weight: 650; cursor: pointer; }

/* Buttons are three: .primary for the one thing to do, .secondary for another way,
   .text-button for a word. Cut corners on all of them, no pills; gold only for
   what you have built. In dark the secondary's edge is the quiet ink, not a cream
   ring that reads as focus. */
.photo-g, .check-row .moment-quick.skip { border-radius: var(--radius-sm); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .secondary { border: 1.5px solid var(--text-secondary); } }
:root[data-theme="dark"] .secondary { border: 1.5px solid var(--text-secondary); }
.text-button:not(.danger) { color: var(--accent-strong); font-weight: 650; text-decoration: none; }
/* On the dark cards the word keeps the light of the card. */
.wk-weight > .text-button { color: var(--on-dark); text-decoration: none; }
.start-card .start-foot .text-button { color: var(--on-dark-soft); }

/* Headings: a card's title is one size wherever the card is; labels over a group
   are inscriptions like Inställningar's. */
.card-head h2, .section-label h2, .routine-group summary, .meal-head h2, .food-day-intro h2, .food-day.empty h2 { font-size: var(--text-xl); letter-spacing: 0; line-height: 1.15; }
.meal-label, .food-group { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-tertiary); }

/* One fold mark: the chevron the SVG ones draw, down when shut and up when open. */
.rt-chev, .sub-fold-chev, .disclosure-plus, .skin-details summary span[aria-hidden] {
  display: inline-block; flex: none; width: 18px; height: 18px; margin: 0 var(--space-1) 0 0; border: 0; font-size: 0; line-height: 0; vertical-align: middle;
  color: var(--text-secondary); background: currentColor; transform: none;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
}
.disclosure-plus::before { content: none; }
.skin-details summary span[aria-hidden] { margin: 0 0 0 var(--space-1); }
.routine-group[open] .disclosure-plus, .rt-row.open .rt-chev, .sub-fold[open] > summary .sub-fold-chev, .skin-details[open] summary span[aria-hidden],
.rt-loads-h .rt-chev { transform: rotate(180deg); }
.rt-loads.shut .rt-loads-h .rt-chev { transform: none; }
.rules-card > summary h2::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: var(--space-1); vertical-align: middle; background: var(--text-tertiary); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
.meal-chevron { stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .rt-chev, .sub-fold-chev, .disclosure-plus, .skin-details summary span[aria-hidden] { transition: transform var(--dur-fast) var(--ease-out); }
}

/* Roadmap by Inställningar's heading is a way somewhere, not something built: a secondary, not gold. */
.roadmap-link, .roadmap-link:active { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
@media (hover: hover) { .roadmap-link:hover { background: var(--surface-secondary); box-shadow: inset 0 0 0 1.5px var(--text-secondary); } }

/* Radii: 4 on what you press, 8 on cards, 21 on sheets. */
.mentor-hero, .proposal, .rt-row { border-radius: var(--radius-md); }

/* Gold is for what you have built: Mentor's remembered things and a tip speak in the accent. */
.remembered .text-button, .tip .text-button { color: var(--accent-strong); }

/* Prestanda (H4): a card or an open section of Inställningar far down the page is laid out
   only when it comes near the screen, at the size it had the last time it was drawn. */
.card, .settings-group, .set-section[open] { content-visibility: auto; contain-intrinsic-size: auto 320px; }

/* Motion safety net. Whatever above forgot to guard, a phone set to reduce motion
   gets everything at once: no animation runs and no transition takes time. Keep last. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* The simpler app before the release (enkel in app.js, shared/features.js):
   Vecka is not in the menu, and what it hid is all still there under the flag. */
body.enkel .tabs [data-tab="vecka"] {
  display: none;
}
/* Hercules on Träning, over the last seven days: smaller than he stood on Vecka. */
.week-hero.small .hero-stage {
  max-width: 220px;
}
/* What is left on Idag of the temple and the shift card: the moments done, and the bedtime. */
.day-tally {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

/* Omgång B (enkelB) */
/* Om dig: the four fields that matter open, the rest folded under Mer om dig. */
.about-more {
  margin-top: var(--space-4);
}
.about-more > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-2) 0;
}
/* Mat: protein first, and in bold. */
.macros.protein-first .macro-protein span,
.macros.protein-first .macro-protein strong {
  font-weight: 700;
}
/* Lägg till mat and Foto side by side; Skanna, Beskriv and Sparade under them. */
.food-actions.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.food-actions-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
}
.food-actions-sub button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.food-actions-sub svg {
  width: var(--icon-sm, 18px);
  height: var(--icon-sm, 18px);
}

/* The simpler app's Träning (enkelHead in pages.js) and Mat (foodWeek in mat.js). */
.tr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.heading .tr-krans,
.tr-krans {
  flex: none;
  min-width: 0;
  min-height: 0;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
}
.tr-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}
.tr-ring img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(calc(0.4 + 0.6 * var(--share))) brightness(calc(0.75 + 0.25 * var(--share)));
}
.tr-ring b {
  position: relative;
  font-family: var(--display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.tr-of {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  white-space: nowrap;
}
.wk-help-text {
  margin: 0 0 var(--space-3);
}
.tr-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}
.tr-stats div {
  min-width: 0;
}
.tr-stats dt {
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.tr-stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-md, 1.05rem);
  overflow-wrap: anywhere;
}
.tr-stats dd small {
  font-family: var(--body, inherit);
  font-size: var(--text-2xs);
  color: var(--text-secondary);
}
.tr-stats dd button {
  padding: 0;
  min-height: 44px;
  font: inherit;
  text-align: left;
  color: inherit;
}
.wb.met .wb-fill,
.wb.on.met .wb-fill {
  background: var(--macro-protein);
}
/* Idag's guide, asked for on Kom igång in the simpler app: out of the head's grid,
   in its top corner, so the wreath and the words keep their two columns. */
.start-head .start-help {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-2));
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-dark-soft);
  font-size: var(--text-base);
  font-weight: 700;
  box-shadow: none;
}
.start-head .start-help::before { content: ""; position: absolute; inset: 8px; border: 1.5px solid color-mix(in srgb, var(--on-dark-soft) 55%, transparent); border-radius: 50%; }
.start-head .start-help:focus-visible { outline: 2px solid var(--built); outline-offset: -2px; border-radius: 50%; }
.start-head:has(.start-help) .start-title { padding-right: calc(var(--space-6) + var(--space-2)); }
/* Temaväljaren: varje kort visar sitt eget tema, oavsett vilket som gäller, så
   färgerna här är temanas egna och inte tokens. */
.look-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: 100%; margin: var(--space-2) 0; }
.look-pick { position: relative; display: grid; align-content: end; justify-items: start; gap: 2px; min-height: 92px; padding: var(--space-3); text-align: left; border: 1px solid var(--lp-line); border-radius: var(--radius-md); background: var(--lp-bg); color: var(--lp-ink); overflow: hidden; }
@media (hover: hover) { .look-pick:hover { background: var(--lp-bg); border-color: var(--lp-accent); } }
.look-pick[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--accent); }
.look-pick b { font-family: var(--lp-display); font-weight: var(--lp-weight); font-size: 24px; line-height: 1.05; }
.look-pick small { font-family: var(--lp-font); font-size: 13px; line-height: 1.3; color: var(--lp-soft); font-variant-numeric: normal; }
/* Five themes in two columns: the last one takes the whole row, so nothing hangs to one side. */
.look-pick:last-child:nth-child(odd) { grid-column: 1 / -1; }
.look-pick .look-dots { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; gap: 4px; }
.look-pick .look-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--lp-accent); }
.look-pick .look-dots i + i { background: var(--lp-gold); }
.look-pick[data-look-set="original-ljus"] { --lp-bg: #f4f1ea; --lp-ink: #11121c; --lp-soft: #5d5a63; --lp-line: #b5ad9c; --lp-accent: #2b3fe0; --lp-gold: #f0b429; --lp-display: "Cinzel", serif; --lp-weight: 400; --lp-font: "Hanken Grotesk", sans-serif; }
.look-pick[data-look-set="original"] { --lp-bg: #0d0e18; --lp-ink: #f4f1ea; --lp-soft: #a9a7b8; --lp-line: #4a4c63; --lp-accent: #7c8cff; --lp-gold: #f0b429; --lp-display: "Cinzel", serif; --lp-weight: 400; --lp-font: "Hanken Grotesk", sans-serif; }
.look-pick[data-look-set="carrara"] { --lp-bg: #f6f2ea; --lp-ink: #1f1d1a; --lp-soft: #5d574e; --lp-line: #b9ae9c; --lp-accent: #a84a2b; --lp-gold: #d9a441; --lp-display: "Bodoni Moda", serif; --lp-weight: 600; --lp-font: "Libre Franklin", sans-serif; }
.look-pick[data-look-set="rosa"] { --lp-bg: #f8ece6; --lp-ink: #2a1f22; --lp-soft: #6b5459; --lp-line: #c99a8c; --lp-accent: #7a2e4d; --lp-gold: #e9806a; --lp-display: "Gloock", serif; --lp-weight: 400; --lp-font: "Wix Madefor Text", sans-serif; }
.look-pick[data-look-set="verde"] { --lp-bg: #14281f; --lp-ink: #f1ede2; --lp-soft: #c3cdbf; --lp-line: #4a7a62; --lp-accent: #9cc5a1; --lp-gold: #c9a24d; --lp-display: "Young Serif", serif; --lp-weight: 400; --lp-font: "Mona Sans", sans-serif; }
.pref-row.look-row { display: grid; }
.intro-looks { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.intro-looks .theme-options { margin: 0; }
:root[data-look] .statue-niche { background-blend-mode: luminosity; }
/* The themes' marble, last, so that it wins over Original's dark one (data-theme="dark") for Verde. */
:root[data-look="carrara"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.012' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.26 -3.2 0 0 0 0.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.08'/%3E%3C/svg%3E"); }
:root[data-look="rosa"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.012' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.34 0 0 0 0 0.32 -3.2 0 0 0 0.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.08'/%3E%3C/svg%3E"); }
:root[data-look="verde"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0045 0.012' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.75 0 0 0 0 0.88 0 0 0 0 0.78 -3.4 0 0 0 0.9'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23v)' opacity='0.04'/%3E%3C/svg%3E"); }
/* Välj din coach: tre kort, ett per läge, med ansikte, stil, mentalitet och en mening
   som Mentor skulle säga den. Det valda kortet bär accenten. */
.coach-picks { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; border: 0; min-width: 0; grid-column: 1 / -1; }
.goal-fields > div.wide { grid-column: 1 / -1; }
.coach-pick { position: relative; display: block; cursor: pointer; }
.coach-pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.coach-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.coach-pick input:checked + .coach-card { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.coach-pick input:focus-visible + .coach-card { outline: 3px solid var(--accent); outline-offset: 3px; }
.coach-head { display: flex; align-items: center; gap: var(--space-4); }
.coach-face { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: var(--obsidian) url("statyn/mentor-tuff.webp") center / cover no-repeat; box-shadow: 0 0 0 2px var(--built), 0 0 0 5px var(--surface); }
.coach-face-varm { background-image: url("statyn/mentor-varm.webp"); }
.coach-face-lugn { background-image: url("statyn/mentor-lugn.webp"); }
.coach-name { display: block; font-family: var(--display); font-weight: var(--display-weight); font-size: var(--text-2xl); line-height: 1; }
.coach-suits { display: inline-block; margin-top: var(--space-1); padding: 2px var(--space-2); border-radius: 999px; background: var(--accent); color: var(--accent-foreground); font-size: var(--text-2xs); font-style: normal; font-weight: 600; letter-spacing: 0.01em; }
.coach-short { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--text-secondary); }
.coach-pick input:checked + .coach-card .coach-short { color: var(--accent-strong); font-weight: 600; }
.coach-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); font-size: var(--text-sm); line-height: 1.45; }
.coach-facts i { display: block; font-style: normal; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); }
.coach-says { position: relative; display: block; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8); border-radius: var(--radius-md); background: var(--surface-secondary); font-size: var(--text-base); font-style: italic; line-height: 1.45; quotes: none; }
.coach-says::before { content: "\201D"; position: absolute; left: var(--space-2); top: -2px; font-family: var(--display); font-size: 44px; font-style: normal; line-height: 1; color: var(--built); }
/* Mentor's face in the chat follows the coach you picked (data-coach, set in render). */
:root[data-coach="tuff"] .mentor-bust { background-image: url("statyn/mentor-tuff.webp"); background-position: center; background-size: cover; }
:root[data-coach="varm"] .mentor-bust { background-image: url("statyn/mentor-varm.webp"); background-position: center; background-size: cover; }
:root[data-coach="lugn"] .mentor-bust { background-image: url("statyn/mentor-lugn.webp"); background-position: center; background-size: cover; }
:root[data-coach="varm"] .mentor-hero::after { background-image: url("statyn/mentor-varm-hel.webp"); }
:root[data-coach="lugn"] .mentor-hero::after { background-image: url("statyn/mentor-lugn-hel.webp"); }
/* Din första dag in the simpler app has no times: the name takes the whole row. */
.intro-plan li > span:only-child { grid-column: 1 / -1; }
/* Pekytor: allt man trycker på är minst 44 px högt (ui-ux-pro-max, Touch & Interaction).
   Där knappen ska se mindre ut växer bara ytan man träffar, inte det man ser. */
.moment-later, .roadmap-link, .row-food { position: relative; }
.moment-later::before, .roadmap-link::before { content: ""; position: absolute; inset: -4px 0; }
.row-food::before { content: ""; position: absolute; inset: -6px 0; }
.coach-spent .primary { display: flex; align-items: center; justify-content: center; width: auto; height: auto; min-height: 44px; padding: 0 var(--space-4); text-decoration: none; }
.mentor:has(.coach-spent) { padding-bottom: calc(260px + env(safe-area-inset-bottom)); }
/* Mentor's card at the top of Idag (mentor-kort-view.js): his face, one line in his voice, a button and Inte nu. */
.card.mentor-kort { padding: var(--space-4); }
.mentor-kort-head { display: flex; align-items: center; gap: var(--space-2); }
.mentor-kort-head .eyebrow { margin: 0; color: var(--built-text); }
.mentor-kort-text { margin: var(--space-3) 0 0; font-size: var(--text-base); line-height: 1.5; }
.mentor-kort-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.mentor-kort-actions .secondary { min-height: 44px; padding-inline: var(--space-4); }
.mentor-kort-actions .text-button { min-height: 44px; padding: 0; color: var(--text-secondary); }
/* Mentor's page, the calmer one: his name in the head with the questions left as a line under it, the first
   questions as plain rows, Fortsätt as one quiet row and the conversations before folded. */
.mentor-left { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.mentor-left.low { color: var(--built-text); font-weight: 700; }
.mentor-greet.mentor-greet-start { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-2xl); line-height: 1.15; }
.mentor-empty .mentor-greet { font-size: var(--text-2xl); line-height: 1.15; }
.starter-rows { display: grid; margin: var(--space-2) 0 var(--space-4); padding: 0; list-style: none; border-top: 1px solid var(--border); }
.starter-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 48px; padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.starter-row span { color: var(--text-secondary); }
.mentor-resume { padding: var(--space-3) calc(var(--space-4) + 20px) var(--space-3) var(--space-4); gap: var(--space-1); }
.mentor-resume-label { font-size: var(--text-xs); }
.mentor-resume-title { font-family: inherit; font-size: var(--text-base); font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; }
.mentor-earlier { margin-top: var(--space-4); }
.mentor-earlier > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.coach-flag-icon { display: grid; place-items: center; min-height: 44px; min-width: 44px; margin: 0 0 0 calc(-1 * var(--space-3)); padding: 0; text-align: center; color: var(--text-tertiary); }
.coach-flag-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: var(--icon-line); stroke-linejoin: round; stroke-linecap: round; }