/* ==========================================================================
   Taleflyt — design system
   Rolig og tillitvekkende. Én merkefarge (lilla) + én alvorlighetsskala.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #F5F3F8;
  --surface: #FFFFFF;
  --surface-2: #F6F4FA;
  --surface-3: #ECE8F3;
  --line: rgba(40, 30, 70, 0.08);
  --line-strong: rgba(40, 30, 70, 0.16);

  /* Text */
  --ink: #1B1A22;
  --muted: #6C6878;
  --faint: #A5A1B0;

  /* Brand */
  --brand: #7A3FE0;
  --brand-strong: #6530C4;
  --brand-soft: #EFE7FD;
  --on-brand: #FFFFFF;
  /* Fylte flater (knapper, valgt dag) er lysere enn tekst-lilla, men holder 4,5:1 mot hvit tekst */
  --brand-fill: #8757F2;
  --brand-fill-strong: #7A45E6;
  --selected-bg: var(--brand-fill);
  --selected-ink: #FFFFFF;
  --selected-sub: rgba(255, 255, 255, 0.75);

  /* Severity 0 (ingen) → 9 (svært alvorlig) */
  --sev-0: #6FBF9D;
  --sev-1: #8CC99A;
  --sev-2: #AAD196;
  --sev-3: #C7D58F;
  --sev-4: #E0D38A;
  --sev-5: #EBC17E;
  --sev-6: #EEAB74;
  --sev-7: #EB956C;
  --sev-8: #E27F66;
  --sev-9: #D56B61;
  --on-sev: #1B1A22;

  /* Chart */
  --grid: rgba(40, 30, 70, 0.09);
  --grid-strong: rgba(40, 30, 70, 0.26);

  /* Shape & depth */
  --r-xl: 28px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(40, 30, 70, 0.04), 0 10px 28px -14px rgba(40, 30, 70, 0.16);
  --shadow-float: 0 1px 2px rgba(40, 30, 70, 0.06), 0 18px 40px -12px rgba(40, 30, 70, 0.3);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .5, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 18px;
  --nav-h: 66px;
  --nav-bottom: max(8px, calc(var(--safe-bottom) - 18px));
  --sheet-h: calc(500px + var(--safe-bottom));
  --sheet-tall: calc(760px + var(--safe-bottom));
  --sheet-short: calc(360px + var(--safe-bottom));
  --danger: #C8423A;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0E13;
  --surface: #18161E;
  --surface-2: #1F1D27;
  --surface-3: #282532;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);
  --ink: #F1EFF5;
  --muted: #A09CAB;
  --faint: #6D6978;
  --brand: #B794FF;
  --brand-strong: #C9AEFF;
  --brand-soft: rgba(183, 148, 255, 0.14);
  --on-brand: #1A0F33;
  --brand-fill: #B794FF;
  --brand-fill-strong: #C9AEFF;
  --selected-bg: rgba(183, 148, 255, 0.2);
  --selected-ink: #E4D6FF;
  --selected-sub: rgba(228, 214, 255, 0.7);
  --grid: rgba(255, 255, 255, 0.07);
  --grid-strong: rgba(255, 255, 255, 0.22);
  --shadow: none;
  --shadow-float: 0 18px 40px -12px rgba(0, 0, 0, 0.75);
  --danger: #FF8A80;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

svg { display: block; }

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

[hidden] { display: none !important; }

.app-shell {
  width: min(100vw, 480px);
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.page-stack { height: 100%; }

.page {
  display: none;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: calc(var(--safe-top) + 20px) var(--gutter) calc(var(--nav-h) + var(--nav-bottom) + 28px);
}

.page.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: page-in .28s var(--ease);
}

.page.active > * { flex-shrink: 0; }

/* I dag: alt på én skjerm, ingen scroll */
#todayPage.active {
  display: grid;
  grid-template-rows: auto auto auto repeat(3, minmax(0, 1fr));
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  padding-bottom: calc(var(--nav-h) + var(--nav-bottom) + 14px);
}

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Typography ---------- */

.eyebrow.swap { animation: eyebrow-swap .28s var(--ease); }

@keyframes eyebrow-swap {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.eyebrow {
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 2px;
}

h1 {
  font-size: 2.125rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.025em;
}

.label {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.footnote {
  color: var(--faint);
  font-size: .8125rem;
  line-height: 1.4;
}

/* ---------- Components ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

.top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 6px;
  min-height: 58px;
}

.icon-button {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  transition: background .15s var(--ease), color .15s var(--ease);
}

.icon-button svg,
.text-button svg,
.primary-button svg,
.jump-today svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button svg { width: 22px; height: 22px; }
.icon-button:active { background: var(--surface-3); }

.settings-button {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 2px;
}

.settings-button svg { width: 20px; height: 20px; stroke-width: 1.8; }
.settings-button .initials { display: none; font-size: .8125rem; font-weight: 700; color: var(--brand); letter-spacing: .02em; }
.settings-button.has-initials { background: var(--brand-soft); border-color: transparent; box-shadow: none; }
.settings-button.has-initials svg { display: none; }
.settings-button.has-initials .initials { display: block; }

/* Kommentar-ikon i dagskortet (50 % uten kommentar, 100 % med) */
.comment-button {
  width: 36px;
  height: 36px;
  margin: -2px -8px 0 auto;
  align-self: flex-start;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--brand);
  opacity: .5;
  transition: opacity .2s var(--ease), background .15s var(--ease);
}

.comment-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.comment-button.has-comment { opacity: 1; }
.comment-button.has-comment svg { fill: var(--brand-soft); }
.comment-button:active { background: var(--brand-soft); }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin: -6px -8px -6px 0;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--brand);
  font-size: .875rem;
  font-weight: 600;
}

.text-button svg { width: 16px; height: 16px; }
.text-button:active { background: var(--brand-soft); }

.primary-button {
  position: relative;
  width: 100%;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 16px;
  background: var(--brand-fill);
  color: var(--on-brand);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s var(--ease), background .15s;
}

.primary-button svg { width: 20px; height: 20px; }
.primary-button:active { transform: scale(.98); background: var(--brand-fill-strong); }

.secondary-button {
  height: 48px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--surface-3);
  font-weight: 600;
}

.secondary-button.strong { background: var(--ink); color: var(--bg); }

/* ---------- I dag: datorull ---------- */

.strip-wrap { position: relative; min-width: 0; }

.day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(100% / 7);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px);
}

.day-strip::-webkit-scrollbar { display: none; }

.day {
  width: calc(100% - 4px);
  justify-self: center;
  height: 62px;
  display: grid;
  grid-template-rows: auto auto 13px;
  place-items: center;
  align-content: center;
  gap: 1px;
  border-radius: 16px;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}

.day-name {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: capitalize;
}

.day-name.month { color: var(--brand); font-weight: 700; text-transform: none; }

.day-num {
  font-family: var(--font-num);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.day-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.day-dot.logged { background: var(--c); box-shadow: none; }

.day.today .day-num { color: var(--brand); }
.day.future { color: var(--faint); cursor: default; }
.day.future .day-name { color: var(--faint); }
.day.future .day-dot { box-shadow: none; }

/* Logopedmøte i kalenderen */
.day.meeting .day-dot {
  width: auto;
  height: 13px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--brand-fill);
  box-shadow: none;
}

.day.meeting .day-dot::after {
  content: "møte";
  font-style: normal;
  font-size: .5625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--on-brand);
}

.day.selected {
  background: var(--selected-bg);
  color: var(--selected-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent);
}

.day.selected .day-name,
.day.selected.today .day-num { color: var(--selected-sub); }
.day.selected.today .day-num { color: var(--selected-ink); }
.day.selected .day-dot:not(.logged) { box-shadow: inset 0 0 0 1.5px var(--selected-sub); }

.day:not(.selected):not(.future):active { background: var(--surface-3); }

.jump-today {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 8px 0 42px;
  color: var(--brand);
  font-size: .875rem;
  font-weight: 650;
  background: linear-gradient(90deg, transparent, var(--bg) 30px);
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .3s var(--spring);
}

.jump-today::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  height: 34px;
  width: calc(100% - 26px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--brand-soft);
  z-index: -1;
}

.jump-today { isolation: isolate; }
.jump-today svg { width: 16px; height: 16px; }
.jump-today.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- I dag: dagsverdi ---------- */

.day-card {
  --c: var(--line-strong);
  padding: 16px 20px 14px;
}

.day-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-score {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 12px;
}

.score {
  display: flex;
  align-items: baseline;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  line-height: .9;
}

.score span {
  font-size: 3.875rem;
  font-weight: 700;
  letter-spacing: -.04em;
  min-width: .62em;
}

.score small {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--faint);
  margin-left: 2px;
}

.score-copy { display: grid; gap: 3px; min-width: 0; }
.score-copy strong { font-size: 1.1875rem; font-weight: 650; letter-spacing: -.01em; }
.score-copy span { color: var(--muted); font-size: .875rem; line-height: 1.3; }

.meter-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sev-0), var(--sev-3), var(--sev-5), var(--sev-7), var(--sev-9));
}

.meter-marker {
  position: absolute;
  top: 50%;
  left: var(--pos, 0%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--c);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, .18);
  transform: translate(-50%, -50%);
  transition: left .35s var(--ease), background .35s var(--ease);
}

.meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--faint);
  font-size: .75rem;
  font-weight: 500;
}

/* ---------- I dag: tidspunkter ---------- */

.moment {
  --c: var(--brand);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px 12px;
  border-radius: var(--r-lg);
}

.moment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.moment-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--muted);
  flex: 0 0 auto;
}

.moment-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moment-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.moment-title h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; }
.moment-title p { color: var(--faint); font-size: .8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.moment.has-value .moment-icon { background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--ink); }

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

.rating-button {
  --c: var(--sev-0);
  position: relative;
  height: clamp(34px, 5.4dvh, 46px);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--font-num);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  transition: background .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}

.rating-button::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: var(--c);
  opacity: .75;
  transition: opacity .16s;
}

/* Skala 0–10 gir 11 knapper */
.rating-row[data-max="10"] { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.rating-row[data-max="10"] .rating-button { font-size: .9375rem; border-radius: 10px; }
.rating-row[data-max="10"] .rating-button::after { left: 26%; right: 26%; }

.rating-button:active { transform: scale(.92); }
.rating-button.selected { background: var(--c); color: var(--on-sev); font-weight: 700; }
.rating-button.selected::after { opacity: 0; }

/* ---------- Utvikling ---------- */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stat { padding: 14px 16px; border-radius: var(--r-lg); display: grid; gap: 2px; }

.stat strong {
  font-family: var(--font-num);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: 2px;
}

.trend { font-style: normal; font-size: .8125rem; color: var(--muted); line-height: 1.3; }
.trend.down { color: #2F9A73; }
.trend.up { color: #C0634F; }
html[data-theme="dark"] .trend.down { color: #7FD6B2; }
html[data-theme="dark"] .trend.up { color: #EE9A82; }

.chart-card { padding: 14px 0 12px; overflow: hidden; }

.chart-shell {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  padding-right: 12px;
}

.y-axis { width: 34px; height: 312px; }

/* Sidelengs panorering styres i JS, så loddrett scroll alltid går til siden */
.chart-scroller {
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.scale-chart { height: 312px; }

.chart-hint { text-align: center; color: var(--faint); font-size: .75rem; margin-top: 6px; }

.history { display: grid; gap: 10px; margin-top: 10px; }
.history-list { display: grid; gap: 18px; }
.week-group { display: grid; gap: 6px; }

.week-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px;
}

.week-group-head .label b { color: var(--ink); font-weight: 600; }
.week-group-head span:last-child { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.week-group .card { border-radius: var(--r-lg); overflow: hidden; }

.history-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  text-align: left;
}

.history-row + .history-row { border-top: 1px solid var(--line); }
.history-row:active { background: var(--surface-2); }

.badge {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--c);
  color: var(--on-sev);
  font-family: var(--font-num);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.history-copy { display: grid; gap: 1px; min-width: 0; }
.history-copy strong { font-size: .9375rem; font-weight: 600; }
.history-copy small { color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

.chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty { padding: 28px 20px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.empty strong { font-size: 1rem; }
.empty p { color: var(--muted); font-size: .875rem; line-height: 1.4; max-width: 30ch; }

/* ---------- Logoped ---------- */

.meeting-card { padding: 18px; display: grid; gap: 16px; }

.meeting-head { display: flex; gap: 14px; align-items: center; }

.meeting-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--brand);
}

.meeting-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.meeting-copy { display: grid; gap: 2px; min-width: 0; }
.meeting-copy strong { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; }
.meeting-copy small { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.meeting-card.has-meeting .meeting-copy small { color: var(--brand); font-weight: 600; }

.meeting-actions { display: flex; gap: 10px; }
.meeting-actions .primary-button { flex: 1; }
.meeting-actions .secondary-button { height: 52px; border-radius: 16px; }

/* Ekte datovelger ligger usynlig over knappen, så iOS åpner sitt eget hjul */
.date-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Om skalaen */
.info-card { padding: 20px; display: grid; gap: 10px; }
.info-card > p { color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.info-card > p b, .info-card > p i { color: var(--ink); }
.info-card > .footnote { font-size: .75rem; color: var(--faint); }
.info-head { display: flex; align-items: center; gap: 12px; }
.info-head h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }

.info-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.info-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

.scale-anchors { display: grid; gap: 6px; }
.anchor { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; }
.anchor .badge { width: 32px; height: 32px; border-radius: 10px; font-size: .9375rem; }

.info-more summary {
  cursor: pointer;
  list-style: none;
  color: var(--brand);
  font-size: .9375rem;
  font-weight: 600;
}

.info-more summary::-webkit-details-marker { display: none; }
.info-more summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
  transition: transform .2s var(--ease);
}

.info-more[open] summary::after { transform: translateY(-4px) rotate(45deg); }

.info-more ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

.info-more b { color: var(--ink); }
.info-card .list { border-radius: 16px; border: 1px solid var(--line); }
a.list-row { color: inherit; text-decoration: none; }

.report-card { padding: 20px; display: grid; gap: 6px; }
.report-illustration { width: 120px; margin-bottom: 10px; }
.ri-paper { fill: var(--surface-2); stroke: var(--line-strong); }
.ri-grid { stroke: var(--grid); stroke-width: 1; fill: none; }
.ri-line { stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ri-dot { fill: var(--surface); stroke: var(--brand); stroke-width: 1.8; }
.report-card h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.report-card > p { color: var(--muted); font-size: .9375rem; line-height: 1.4; margin-bottom: 10px; }

.field { display: grid; gap: 6px; margin-bottom: 12px; }

.text-input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.text-input::placeholder { color: var(--faint); }
.text-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* ---------- Innstillinger ---------- */

.group-label {
  margin: 10px 4px 0;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.group { border-radius: var(--r-lg); }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: 14px;
  background: var(--surface-2);
}

.segmented button {
  height: 40px;
  border-radius: 11px;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
  transition: background .15s var(--ease), color .15s var(--ease);
}

.segmented button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line);
}

html[data-theme="dark"] .segmented button.active { background: var(--surface-3); }

.list { padding: 0; overflow: hidden; box-shadow: none; background: var(--surface-2); }

.list-row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
}

.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row:active { background: var(--surface-3); }

.list-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
}

.list-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.list-copy { display: grid; gap: 1px; }
.list-copy strong { font-size: .9375rem; font-weight: 600; }
.list-copy small { color: var(--muted); font-size: .8125rem; }

.privacy { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 6px 4px 0; }
.privacy svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- PDF-forhåndsvisning ---------- */

.pdf-top { justify-content: flex-start; align-items: center; gap: 6px; margin-left: -10px; }
.pdf-preview { display: grid; gap: 16px; }
.pdf-actions { position: sticky; bottom: 0; padding-top: 8px; }

.pdf-report-page {
  background: #FFFFFF;
  color: #1B1A22;
  border-radius: 12px;
  padding: 22px 18px;
  box-shadow: var(--shadow-float);
  aspect-ratio: 210 / 297;
  overflow: hidden;
}

.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.report-brand { font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7A3FE0; }
.report-title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }
.report-page-no { font-size: .625rem; color: #8A857C; white-space: nowrap; }

.report-meta {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr .8fr;
  gap: 1px;
  margin: 12px 0 8px;
  background: #E6E1D8;
  border: 1px solid #E6E1D8;
  border-radius: 6px;
  overflow: hidden;
}

.report-meta div { background: #FFFFFF; padding: 5px 7px; }
.report-meta span { display: block; font-size: .5rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8A857C; }
.report-meta strong { display: block; font-size: .6875rem; font-weight: 600; margin-top: 1px; }
.report-scale { font-size: .5625rem; color: #6B675F; margin-bottom: 10px; }
.report-scale b { color: #1B1A22; font-weight: 600; }
.report-week-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.report-week h3 { display: flex; justify-content: space-between; font-size: .5625rem; font-weight: 600; margin-bottom: 3px; color: #1B1A22; }
.report-week h3 span { color: #8A857C; font-weight: 500; }
.report-week svg { width: 100%; height: auto; }

/* ---------- Navigasjon ---------- */

.bottom-nav {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--nav-bottom);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 34px -12px rgba(40, 30, 70, .32);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  z-index: 20;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html[data-theme="dark"] .bottom-nav {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 34px -12px rgba(0, 0, 0, .8);
}

.nav-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / 3);
  pointer-events: none;
  transition: transform .5s var(--spring);
}

.nav-indicator::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--brand-soft);
  transition: transform .35s var(--spring), background .2s, box-shadow .2s;
}

.bottom-nav.pressed .nav-indicator::before { transform: scale(.95); }
.bottom-nav.dragging .nav-indicator { transition: none; }

.bottom-nav.dragging .nav-indicator::before {
  transform: scale(1.1, 1.22);
  background: color-mix(in srgb, var(--surface) 35%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent),
    inset 0 1px 1px rgba(255, 255, 255, .7),
    0 10px 24px -8px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(3px) saturate(2.2);
  backdrop-filter: blur(3px) saturate(2.2);
}

.nav-button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 999px;
  color: var(--faint);
  font-size: .6875rem;
  font-weight: 600;
  transition: color .2s var(--ease), transform .35s var(--spring);
}

.nav-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-button.active { color: var(--brand); }
.bottom-nav.dragging .nav-button.active:not(.targeted) { color: var(--faint); }
.nav-button.targeted { color: var(--brand); }
.bottom-nav.dragging .nav-button.targeted { transform: scale(1.08); }

/* ---------- Skuffer ---------- */

.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Skuffer har alltid eksplisitt høyde – iOS regner feil på prosent-høyde inne i auto-høy <dialog> */
.sheet.fixed { height: min(var(--sheet-h), 92dvh); }
.sheet.tall { height: min(var(--sheet-tall), 92dvh); }
.sheet.short { height: min(var(--sheet-short), 92dvh); }

/* Rullbart innhold i høye skuffer; tittel og knapper står fast */
.sheet-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 -20px;
  padding: 0 20px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}

.sheet-scroll > * { flex-shrink: 0; }
.sheet-hint { margin: 0 4px; }
.segmented.two { grid-template-columns: 1fr 1fr; }

/* Konto */
.account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 4px;
  border-radius: 18px;
  background: var(--surface-2);
}

.avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-fill);
  color: var(--on-brand);
  font-size: 1rem;
  font-weight: 700;
}

.account-copy { display: grid; gap: 1px; min-width: 0; }
.account-copy strong { font-size: 1rem; font-weight: 650; }
.account-copy small { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.form-group {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
}

html[data-theme="dark"] .account-card,
html[data-theme="dark"] .form-group,
html[data-theme="dark"] .sheet .segmented { background: var(--surface-3); }

.form-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
}

.form-row + .form-row { border-top: 1px solid var(--line); }
.form-row span { color: var(--muted); font-size: .9375rem; }

.form-row input {
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 1rem;
  color: var(--ink);
}

.form-row input::placeholder { color: var(--faint); }
.form-row:focus-within { background: color-mix(in srgb, var(--brand) 6%, transparent); }

.segmented.outlined { border: 1px solid var(--line-strong); }
html[data-theme="dark"] .sheet .segmented button.active { background: var(--surface); }

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

/* Kommentar */
.comment-input {
  flex: 1;
  min-height: 96px;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  resize: none;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

html[data-theme="dark"] .comment-input { background: var(--surface-3); }
.comment-input::placeholder { color: var(--faint); }
.comment-input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.sheet .sheet-body > p.comment-count { text-align: right; color: var(--faint); font-size: .75rem; margin-top: -2px; }

.day-sheet-comment {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-2);
}

html[data-theme="dark"] .day-sheet-comment { background: var(--surface-3); }
.day-sheet-comment svg { width: 18px; height: 18px; margin-top: 2px; fill: var(--brand-soft); stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }

.day-sheet-comment p {
  font-size: .9375rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sheet .group-label { display: block; }

html[data-theme="dark"] .sheet { background: var(--surface-2); border-top: 1px solid var(--line); }

.sheet[open] { animation: sheet-in .38s var(--ease); }

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.sheet::backdrop {
  background: rgba(12, 8, 24, .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.sheet input,
.sheet textarea { touch-action: manipulation; -webkit-user-select: text; user-select: text; }

.sheet-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 20px calc(20px + var(--safe-bottom));
}

.sheet-grabber {
  align-self: center;
  width: 38px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
  margin-bottom: 10px;
  flex: 0 0 auto;
}

.sheet h2:focus { outline: none; }
.sheet h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; }
.sheet .sheet-body > p:not(.eyebrow):not(.manual-descriptor):not(.footnote):not(.comment-count) { color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.sheet .eyebrow { margin-bottom: -6px; }

.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 8px; }
.sheet-actions.single { grid-template-columns: 1fr; }

html[data-theme="dark"] .sheet .secondary-button:not(.strong) { background: var(--surface-3); }

.manual-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.manual-grid[data-max="10"] { grid-template-columns: repeat(6, 1fr); }

.manual-grid button {
  --c: var(--sev-0);
  position: relative;
  height: 56px;
  border-radius: 14px;
  background: var(--surface-2);
  font-family: var(--font-num);
  font-size: 1.375rem;
  font-weight: 600;
  overflow: hidden;
  transition: background .15s, transform .12s;
}

html[data-theme="dark"] .manual-grid button { background: var(--surface-3); }

.manual-grid button::after {
  content: "";
  position: absolute;
  left: 35%;
  right: 35%;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: var(--c);
}

.manual-grid button.selected { background: var(--c); color: var(--on-sev); font-weight: 700; }
.manual-grid button.selected::after { opacity: 0; }
.manual-grid button:active { transform: scale(.94); }

.manual-descriptor { text-align: center; min-height: 1.4em; margin: 4px 0 0; font-weight: 600; }

/* Dagsskuff */
.day-sheet-content { display: grid; gap: 10px; margin-top: 8px; }

.day-summary {
  --c: var(--line-strong);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--surface-2);
}

html[data-theme="dark"] .day-summary,
html[data-theme="dark"] .period-row { background: var(--surface-3); }

.day-summary .score span { font-size: 2.75rem; }
.day-summary .score small { font-size: 1.125rem; }

.period-list { display: grid; gap: 6px; }

.period-row {
  --c: var(--line-strong);
  display: grid;
  grid-template-columns: 34px 1fr auto 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  border-radius: 16px;
  background: var(--surface-2);
}

.period-row .moment-icon { background: color-mix(in srgb, var(--c) 24%, var(--surface)); color: var(--ink); }
.period-row.is-empty .moment-icon { background: var(--surface); color: var(--faint); }
.period-copy { display: grid; gap: 1px; min-width: 0; }
.period-copy strong { font-size: .9375rem; font-weight: 600; }
.period-copy small { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.period-scale { display: flex; gap: 3px; align-items: flex-end; }

.period-scale i {
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: var(--c);
  opacity: .28;
}

.period-scale i.on { opacity: 1; height: 22px; }

.period-row .badge { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
.period-row.is-empty .badge { background: var(--surface); color: var(--faint); }

.day-sheet-note {
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.4;
}

/* ---------- Toast ---------- */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-h) + var(--nav-bottom) + 14px);
  transform: translate(-50%, 12px);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 30;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Oppstart, innlogging og kom i gang ---------- */

body.gated .page-stack,
body.gated .bottom-nav { visibility: hidden; }

.gate {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  padding: calc(var(--safe-top) + 44px) var(--gutter) calc(var(--safe-bottom) + 32px);
  animation: page-in .3s var(--ease);
}

.gate.boot { display: grid; place-items: center; padding: 0; }
.gate.boot .gate-icon { width: 88px; height: 88px; border-radius: 22px; animation: boot-pulse 1.4s var(--ease) infinite alternate; }

@keyframes boot-pulse {
  from { transform: scale(.96); opacity: .8; }
  to { transform: scale(1); opacity: 1; }
}

.gate-inner { max-width: 420px; margin: 0 auto; display: grid; gap: 14px; }
.gate-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-float); margin-bottom: 6px; }
.gate h1 { font-size: 2.25rem; }
.gate-lead { color: var(--muted); font-size: 1rem; line-height: 1.45; margin-bottom: 8px; }
.gate-form { display: grid; gap: 12px; }
.gate-form .field { margin: 0; }
.gate-card { padding: 18px; display: grid; gap: 10px; }
.gate-card h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.gate-card > p,
.gate-note { color: var(--muted); font-size: .9375rem; line-height: 1.4; }
.gate-card .field { margin: 4px 0 2px; }
.code-input { font-family: var(--font-num); font-size: 1.5rem; letter-spacing: .28em; text-align: center; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.gate-links { display: flex; justify-content: space-between; }
.gate-links .text-button { margin: 0; }
.gate-error { color: var(--danger); font-size: .9375rem; line-height: 1.4; min-height: 1.3em; }
.gate-logout { justify-self: center; margin: 4px 0 0; color: var(--muted); }
.secondary-button.wide { width: 100%; height: 52px; border-radius: 16px; }
.is-busy { opacity: .55; pointer-events: none; }

/* ---------- Deling: hvem registrerte ---------- */

.moment-by {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--faint);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.moment-by.pending::after { content: " · venter"; color: var(--brand); }

/* ---------- Lesetilgang (logoped) ---------- */

.readonly-badge {
  display: none;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .75rem;
  font-weight: 600;
}

.read-only .readonly-badge { display: inline-flex; }
.read-only #manualButton,
.read-only .meeting-actions,
.read-only #inviteActions,
.read-only #commentInput,
.read-only #commentCount,
.read-only #commentClear { display: none !important; }
.read-only .rating-button { pointer-events: none; }
.read-only .rating-button:not(.selected) { opacity: .55; }
.read-only #commentSheet .sheet-actions { grid-template-columns: 1fr; }
.segmented button:disabled { opacity: .5; cursor: default; }

/* ---------- Tilgang og barneprofiler ---------- */

.member-list {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  overflow: hidden;
}

html[data-theme="dark"] .member-list { background: var(--surface-3); }

.member-row {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  text-align: left;
}

.member-row + .member-row { border-top: 1px solid var(--line); }
.member-copy { display: grid; gap: 1px; min-width: 0; }
.member-copy strong { font-size: .9375rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-copy small { color: var(--muted); font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-remove { padding: 8px 10px; border-radius: 10px; color: var(--danger); font-size: .875rem; font-weight: 600; }
.member-remove:active { background: var(--surface-3); }
.member-empty { padding: 12px 14px; }
.member-row.selectable:active { background: var(--surface-3); }
.member-row .check { width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.member-row.active .check { opacity: 1; }

.avatar.small { width: 36px; height: 36px; font-size: .8125rem; }
.avatar.therapist { background: var(--brand-soft); color: var(--brand); }

.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.invite-actions .secondary-button { height: 44px; font-size: .875rem; }
html[data-theme="dark"] .invite-actions .secondary-button { background: var(--surface-3); }

.app-version {
  margin: 18px 0 4px;
  text-align: center;
  color: var(--faint);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: text;
  user-select: text;
}

.sync-status { margin: 0 4px; color: var(--brand); font-size: .8125rem; font-weight: 600; }
.account-email { color: var(--ink); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: text; user-select: text; }

.invite-code {
  margin-top: 10px;
  padding: 18px;
  border-radius: 18px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-num);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
}

.sheet .sheet-body > p.invite-meta { text-align: center; color: var(--muted); font-size: .8125rem; }

/* ---------- Kommentarer fra flere ---------- */

.comment-list { display: grid; align-content: start; gap: 8px; }
#commentOthers { flex: 0 1 auto; max-height: 38%; margin: 6px -20px 0; }

.comment-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface-2);
}

html[data-theme="dark"] .comment-item { background: var(--surface-3); }
.comment-item .avatar { width: 32px; height: 32px; font-size: .75rem; }
.comment-item strong { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.comment-item p { font-size: .9375rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* ---------- Tilpasninger ---------- */

@media (max-height: 740px) {
  .page { padding-top: calc(var(--safe-top) + 12px); gap: 8px; }
  #todayPage.active { gap: 8px; }
  .top { min-height: 48px; padding-bottom: 2px; }
  h1 { font-size: 1.75rem; }
  .day { height: 54px; }
  .day-card { padding: 12px 16px; }
  .day-score { margin: 2px 0 10px; }
  .day-card .score span { font-size: 3rem; }
  .meter-ends { display: none; }
  .moment { padding-block: 8px 10px; }
  .moment-head { margin-bottom: 6px; }
  .moment .moment-icon { width: 28px; height: 28px; border-radius: 9px; }
}

@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .rating-row { gap: 3px; }
  .rating-button { font-size: .9375rem; border-radius: 10px; }
  .period-scale { display: none; }
}

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

@media print {
  body { background: #fff; overflow: visible; }
  .bottom-nav, .page:not(#pdfPage), .pdf-top, .pdf-actions { display: none !important; }
  .app-shell, #pdfPage { width: auto; height: auto; overflow: visible; }
  #pdfPage { display: block !important; padding: 0; }
  .pdf-report-page { break-after: page; box-shadow: none; border-radius: 0; aspect-ratio: auto; }
}