/* ============================================================
   Ledstjärnan Web — App styles
   Design tokens + layout: Ledstjärnan Design System (web/)
   ============================================================ */

@import url('tokens.css?v=8');
@import url('layout.css');

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: var(--ls-text-lg); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overflow-x: hidden; }
/* Inline links use the darker --ls-fg-link (== rose-dark) for AA contrast,
   matching .ls-link and .ls-breadcrumb-link (one link colour everywhere). */
a { color: var(--ls-fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: var(--ls-text-lg); }
img { max-width: 100%; display: block; }

/* Scrollbar — thin, subtle */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ls-border); border-radius: var(--ls-r-6); }

/* --- Login Page --- */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(160deg, #F6F3F3 0%, #F3EAEF 50%, #FAF7F9 100%);
  padding: var(--ls-sp-20);
}
.login-card {
  background: var(--ls-paper);
  border-radius: var(--ls-r-22);
  padding: var(--ls-sp-48) var(--ls-sp-40);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--ls-shadow-lg);
  text-align: center;
}
.login-logo {
  width: 80px;
  height: 80px;
  background: var(--ls-rose-gradient);
  border-radius: var(--ls-r-circle);
  margin: 0 auto var(--ls-sp-24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-5xl);
  color: white;
}
.login-card h1 {
  font-size: var(--ls-text-3xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-6);
}
.login-card p.subtitle {
  color: var(--ls-fg-2);
  margin-bottom: var(--ls-sp-28);
  font-size: var(--ls-text-md);
}

/* --- Forms --- */
.form-group {
  margin-bottom: var(--ls-sp-18);
  text-align: left;
}
.form-group label {
  display: block;
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-2);
  margin-bottom: var(--ls-sp-6);
}
.form-input {
  width: 100%;
  padding: var(--ls-sp-12) var(--ls-sp-16);
  border: 1.5px solid var(--ls-border);
  border-radius: var(--ls-r-12);
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-1);
  background: var(--ls-paper);
  transition: border-color var(--ls-dur-fast) var(--ls-ease-spring), box-shadow var(--ls-dur-fast) var(--ls-ease-spring);
  outline: none;
}
.form-input:hover:not(:disabled):not(:focus) { border-color: var(--ls-border-strong); }
.form-input:focus {
  border-color: var(--ls-rose);   /* active-field tint; keyboard ring via :focus-visible */
}
/* Error — pair with aria-invalid="true" for screen readers (see fieldCard). */
.form-input.is-invalid,
.form-input[aria-invalid="true"] { border-color: var(--ls-critical); }
.form-input:disabled,
.form-input[disabled] { opacity: 0.5; cursor: not-allowed; background: var(--ls-panel); }
.form-input::placeholder { color: var(--ls-fg-3); }
textarea.form-input { resize: vertical; min-height: 100px; }

/* Native checkboxes & radios — brand accent everywhere (canonical
   components reassert this on .ls-check-field/.ls-radio-option input). */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--ls-rose-dark); }

/* Native date/time/number widgets — tint the picker popup, spinners and
   selection highlight to the brand rose (browser default is blue). */
.form-input,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"] { accent-color: var(--ls-rose-dark); }
/* The calendar/clock dropdown trigger icon → brand tone, not grey/blue. */
.form-input::-webkit-calendar-picker-indicator { opacity: 0.6; }
.form-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

select.form-input {
  appearance: none;
  /* chevron stroke = --ls-fg-2 (#6B6360); CSS vars can't resolve inside a data-URI */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6360' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: var(--ls-sp-40);
}

/* Field-level error message — pair with aria-invalid + aria-describedby. */
.ls-field-error {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-6);
  margin-top: var(--ls-sp-6);
  color: var(--ls-critical-dark);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-medium);
}

/* Visually hidden but focusable & screen-reader accessible.
   Use for the real <input> behind a custom-styled control. */
.ls-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;
}
/* Custom checkbox/radio indicator gets the keyboard ring when its
   visually-hidden input is focused. */
.ls-sr-only:focus-visible + .ls-custom-indicator {
  outline: var(--ls-focus-width) solid var(--ls-focus-color);
  outline-offset: var(--ls-focus-offset);
}

/* --- Buttons (iOS style) --- */
/* ============================================================
   Buttons — ONE canonical system (layout.css no longer defines .btn).
   Variants: primary · secondary · ghost · danger · success.
   Sizes: sm · md (default, set on .btn) · lg · block; .btn-icon = round.
   Every variant shares the same size, radius, and states. Focus = the
   global :focus-visible ring (no per-button override).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ls-sp-8);
  padding: var(--ls-sp-10) var(--ls-sp-20);    /* md — the default size */
  border-radius: var(--ls-r-12);
  border: 1.5px solid transparent;             /* reserved so bordered variants don't change size */
  font-family: var(--ls-font-sans);
  font-size: var(--ls-text-md);
  font-weight: var(--ls-weight-semibold);
  line-height: var(--ls-lh-none);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease-standard),
              border-color var(--ls-dur-fast) var(--ls-ease-standard),
              color var(--ls-dur-fast) var(--ls-ease-standard),
              box-shadow var(--ls-dur-fast) var(--ls-ease-standard),
              transform var(--ls-dur-fast) var(--ls-ease-spring);
}
.btn:disabled, .btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn .icon { font-size: 1.1em; }

/* ── Variants ──────────────────────────────────────────── */
.btn-primary   { background: var(--ls-rose-dark); color: var(--ls-fg-on-rose); }
.btn-primary:hover  { background: var(--ls-rose-deep); box-shadow: var(--ls-shadow-md); }
.btn-primary:active { transform: translateY(1px); box-shadow: none; }

.btn-secondary { background: var(--ls-paper); color: var(--ls-fg-1); border-color: var(--ls-border); }
.btn-secondary:hover  { border-color: var(--ls-rose); color: var(--ls-rose-dark); }
.btn-secondary:active { transform: translateY(1px); }

.btn-ghost     { background: transparent; color: var(--ls-rose-dark); }
.btn-ghost:hover { background: var(--ls-rose-veil); }
/* low-emphasis destructive (ghost + danger): outlined delete actions —
   faint critical border at rest so it reads as a button, fills on hover.
   Lower-emphasis than the solid .btn-danger; pair with a trash icon. */
.btn-ghost.btn-danger { background: transparent; color: var(--ls-critical-dark); border-color: var(--ls-critical); }
.btn-ghost.btn-danger:hover { background: var(--ls-critical-tint); border-color: var(--ls-critical-dark); }

/* danger = destructive too (destructive merged in). */
.btn-danger    { background: var(--ls-critical); color: var(--ls-fg-on-rose); }
.btn-danger:hover  { background: var(--ls-critical-dark); }
.btn-danger:active { background: var(--ls-critical-darker); transform: translateY(1px); }

.btn-success   { background: var(--ls-favourable); color: var(--ls-fg-on-rose); }
.btn-success:hover { background: var(--ls-favourable-dark); }

/* ── Sizes (md is the .btn default) ────────────────────── */
.btn-sm { padding: var(--ls-sp-6) var(--ls-sp-14); font-size: var(--ls-text-sm); gap: var(--ls-sp-6); }
.btn-lg { padding: var(--ls-sp-14) var(--ls-sp-28); font-size: var(--ls-text-lg); }
.btn-block { width: 100%; }
/* ── Icon buttons ──────────────────────────────────────── */
/* .btn-icon = standalone round icon action (40px). Pair with a variant for
   fill (e.g. .btn.btn-icon.btn-primary) or leave bare for a subtle one. */
.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  border-radius: var(--ls-r-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-2xl);
}
/* .btn-icon-sm = compact, subtle inline icon affordance (edit, expand…).
   Standalone (no .btn needed); transparent until hover. */
.btn-icon-sm {
  width: 30px; height: 30px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--ls-r-circle);
  background: transparent; color: var(--ls-fg-2);
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease-standard), color var(--ls-dur-fast) var(--ls-ease-standard);
}
.btn-icon-sm:hover { background: var(--ls-rose-veil); color: var(--ls-rose-dark); }

/* Full-width primary CTAs now use .btn.btn-primary.btn-lg.btn-block —
   the old gradient .btn-action-wide was retired for one unified button. */

/* Floating Action Button (iOS plus.circle.fill) */
.btn-fab {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose-dark);
  color: white;
  border: none;
  font-size: var(--ls-text-4xl);
  font-weight: var(--ls-weight-regular);
  line-height: var(--ls-lh-none);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ls-shadow-rose);
  cursor: pointer;
  z-index: var(--ls-z-fab);
  transition: transform var(--ls-dur-fast) var(--ls-ease-spring), box-shadow var(--ls-dur-fast) var(--ls-ease-spring);
}
.btn-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--ls-shadow-rose-lg);
}
.btn-fab:active {
  transform: scale(0.95);
}

/* ============================================================
   MAIN LAYOUT — Design system shell (sidebar + main)
   ============================================================ */
.main-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* .mode-badge removed — see Settings → Integritet for the demo/live switch. */

/* --- Page Header (inside main content) --- */
/* Sticky header band: title + actions + rose rule stay pinned to the
   top of the scrolling content area (the scroll container is
   .page-content, not the window). Solid page-coloured background so the
   body scrolls cleanly underneath. */
.page-head-sticky {
  position: sticky;
  top: 0;
  z-index: var(--ls-z-sticky);
  background: var(--ls-page);
  padding-top: var(--ls-sp-8);
}
/* Cap the scroll container's top padding so body content can't peek
   above the pinned header. The cap travels with the sticky band and is
   painted in the page colour, so the header reads as flush to the top. */
.page-head-sticky::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px;
  background: var(--ls-page);
}
.page-head-sticky .page-rule {
  margin-bottom: 0;
  padding-bottom: var(--ls-sp-8);
}
.page-head-titles { min-width: 0; }

/* Skip-to-content link — off-screen until focused, then slides in at the
   top-left. Lets keyboard/screen-reader users bypass the sidebar. */
.ls-skip-link {
  position: fixed;
  left: 12px;
  top: -56px;
  z-index: 1000;
  background: var(--ls-rose-dark);
  color: #fff;
  padding: var(--ls-sp-10) var(--ls-sp-18);
  border-radius: var(--ls-r-12, var(--ls-r-12));
  font-weight: var(--ls-weight-semibold);
  text-decoration: none;
  transition: top var(--ls-dur-fast) var(--ls-ease-spring, var(--ls-ease-standard));
}
/* Slides into view on focus; the keyboard ring comes from the global
   :focus-visible rule (a11y.css) so it matches every other control. */
.ls-skip-link:focus { top: 12px; }

/* Assessment forms (assess-domain) build their own top bar instead of
   Components.page — give it the same pinned-on-scroll behaviour + cap so
   the domain title + client context stay visible on these long forms. */
.assess-sticky-bar {
  position: sticky;
  top: 0;
  z-index: var(--ls-z-sticky);
  background: var(--ls-page);
  border-bottom: 1px solid var(--ls-border);
}
.assess-sticky-bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 48px;
  background: var(--ls-page);
}

.page-header {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titles actions" "rule rule";
  align-items: end;
  column-gap: var(--ls-sp-16);
  margin-bottom: var(--ls-sp-4);
  padding: 0;
  max-width: none;
}
.page-header h1 {
  font-family: var(--ls-font-serif);
  font-size: var(--ls-text-5xl);
  font-weight: var(--ls-weight-semibold);
  line-height: var(--ls-lh-tight);
  letter-spacing: var(--ls-tr-tight);
  color: var(--ls-fg-1);
  margin: 0;
}
.page-header .header-actions {
  grid-area: actions;
  align-self: end;
  display: flex;
  gap: var(--ls-sp-12);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
/* Persistent global-search affordance in the page header. */
.ls-page-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-circle);
  background: var(--ls-paper);
  color: var(--ls-fg-2);
  cursor: pointer;
  transition: border-color var(--ls-dur-fast) var(--ls-ease-standard), color var(--ls-dur-fast) var(--ls-ease-standard);
}
.ls-page-search:hover { border-color: var(--ls-rose); color: var(--ls-rose-dark); }

/* Mobile full-width search bar (under the rose rule) — replaces the round
   header icon on small screens so the title row isn't broken. */
.ls-page-search-bar {
  display: none;  /* desktop: hidden (the round icon is used instead) */
  align-items: center;
  gap: var(--ls-sp-10);
  width: 100%;
  padding: var(--ls-sp-12) var(--ls-sp-14);
  margin-bottom: var(--ls-sp-16);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-14);
  background: var(--ls-paper);
  color: var(--ls-fg-3);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.ls-page-search-bar-icon { display: flex; flex-shrink: 0; color: var(--ls-fg-2); }
.ls-page-search-bar-text {
  flex: 1;
  min-width: 0;
  font-size: var(--ls-text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1023px) {
  .ls-page-search { display: none; }       /* hide the round icon on mobile */
  .ls-page-search-bar { display: flex; }   /* show the full-width bar */
}

.page-body {
  padding: var(--ls-sp-16) 0 var(--ls-sp-40);
  max-width: none;
  margin: 0;
  width: 100%;
}

/* --- Cards — design system workbook cards (single source; the duplicate
   .card block in layout.css was merged here) --- */
.card {
  background: var(--ls-paper);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-14);
  padding: var(--ls-sp-20);
  box-shadow: var(--ls-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ls-dur-fast) var(--ls-ease-spring), transform var(--ls-dur-fast) var(--ls-ease-spring);
}
.card:hover {
  box-shadow: var(--ls-shadow-md);
}
.card.hero {
  background: var(--ls-panel);
  border-radius: var(--ls-r-18);
  padding: var(--ls-sp-24);
}
.card.accent { padding: 0; overflow: hidden; }
.card.accent .accent-rule { height: 2px; background: var(--ls-rose); }
.card.accent .inner { padding: var(--ls-sp-20); }
.card-clickable { cursor: pointer; }
.card-clickable:hover { transform: translateY(-1px); }
.card-header {
  padding: var(--ls-sp-18) var(--ls-sp-24);
  border-bottom: 1px solid var(--ls-border-rose);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-sp-12);
}
.card-header h2, .card-header h3 {
  font-size: var(--ls-text-lg);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
}
.card-body { padding: var(--ls-sp-24); }
.card-footer {
  padding: var(--ls-sp-14) var(--ls-sp-24);
  border-top: 1px solid var(--ls-border-rose);
  background: var(--ls-panel);
}

/* --- Grid System --- */
.grid { display: grid; gap: var(--ls-sp-16); }
/* Flow grids — reflow progressively (N→…→1) by available width via auto-fit.
   The per-grid min caps the column count inside the ≤1080 content container;
   min(100%, …) guarantees a single column never overflows on narrow screens.
   No breakpoint needed — the grid responds to its container, not the viewport. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* --- Client List Items (iOS style — avatar, name, chevron) --- */
.client-list { display: flex; flex-direction: column; gap: 1px; }
.client-item {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-14);
  padding: var(--ls-sp-16) var(--ls-sp-20);
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease-spring);
  border-bottom: 1px solid var(--ls-border-rose);
}
.client-item:last-child { border-bottom: none; }
.client-item:hover { background: var(--ls-panel); }
.client-avatar {
  width: 44px; height: 44px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose-veil);
  color: var(--ls-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-md);
  flex-shrink: 0;
}
.client-info { flex: 1; min-width: 0; }
.client-name {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-md);
  color: var(--ls-fg-1);
}
.client-meta {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-2);
}
.client-flags {
  display: flex;
  gap: var(--ls-sp-6);
}
/* Chevron on right side (iOS style) */
.client-item::after {
  content: '›';
  font-size: var(--ls-text-3xl);
  color: var(--ls-fg-3);
  flex-shrink: 0;
  margin-left: var(--ls-sp-8);
}

/* Removed dead code: .flag-badge (superseded by safetyChip) and the legacy
   .filter-chip/.filter-chips and .ls-filter-chip pills (filter bars now use
   the tonal .ls-filter-scroller system; tabs use .ls-tablist/.ls-tab). */

/* --- iOS LSClientStatusChip (capsule status chips) --- */
.ls-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-6);
  padding: var(--ls-sp-6) var(--ls-sp-12);
  border-radius: var(--ls-r-pill);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  white-space: nowrap;
  transition: background var(--ls-dur-base) var(--ls-ease-spring), color var(--ls-dur-base) var(--ls-ease-spring);
}
button.ls-chip,
button.ls-safety-chip {
  appearance: none;
  font: inherit;
  margin: 0;
  cursor: pointer;
}
button.ls-chip-action:hover,
button.ls-safety-chip-action:hover {
  box-shadow: var(--ls-shadow-sm);
}
button.ls-chip-action:active,
button.ls-safety-chip-action:active {
  transform: translateY(1px);
}
.ls-chip-rose {
  color: var(--ls-rose-dark);
  background: rgba(201,105,156,0.14);
  border: 1px solid rgba(201,105,156,0.35);
}
.ls-chip-neutral {
  color: var(--ls-fg-2);
  background: var(--ls-panel-rose);
  border: 1px solid var(--ls-border);
}
.ls-chip-amber {
  color: var(--ls-warning-dark);
  background: rgba(184,110,0,0.12);
  border: 1px solid rgba(184,110,0,0.35);
}
.ls-chip-critical {
  color: var(--ls-critical-dark);
  background: rgba(194,59,59,0.12);
  border: 1px solid rgba(194,59,59,0.35);
}
.ls-chip-outline-rose {
  color: var(--ls-rose-dark);
  background: var(--ls-paper);
  border: 1px solid rgba(201,105,156,0.5);
}
.ls-chip .chip-icon {
  font-size: var(--ls-text-2xs);
}

/* --- Canonical metric tile (workbook stat: value + label) ---
   Single source for what used to be .stat-card / .metric-tile /
   .ls-mini-stat. Rendered as <figure>/<figcaption>. Size + tone +
   align are modifier classes; colour comes from tokens, not inline. */
.ls-metric-row { display: flex; gap: var(--ls-sp-10); }
.ls-metric-tile {
  flex: 1;
  margin: 0;
  background: var(--ls-paper);
  border-radius: var(--ls-r-14);
  padding: var(--ls-sp-16);
  border: 1px solid var(--ls-border);
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-6);
}
.ls-metric-tile--center { text-align: center; }
.ls-metric-value {
  font-family: var(--ls-font-serif);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  line-height: var(--ls-lh-none);
}
.ls-metric-tile--lg .ls-metric-value { font-size: var(--ls-text-4xl); }
.ls-metric-tile--md .ls-metric-value { font-size: var(--ls-text-3xl); }
.ls-metric-tile--sm .ls-metric-value { font-size: var(--ls-text-2xl); }
.ls-metric-tile.is-warning .ls-metric-value { color: var(--ls-warning); }
.ls-metric-tile.is-rose    .ls-metric-value { color: var(--ls-rose-dark); }
.ls-metric-tile.is-muted   .ls-metric-value { color: var(--ls-fg-2); }
.ls-metric-tile.is-faint   .ls-metric-value { color: var(--ls-fg-3); }
.ls-metric-tile.is-success .ls-metric-value { color: var(--ls-favourable); }
.ls-metric-label {
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-2);
  font-weight: var(--ls-weight-medium);
}

/* --- iOS LSClientListCard (rich client card) --- */
.ls-client-card {
  background: var(--ls-paper);
  border-radius: var(--ls-r-14);
  border: 1px solid var(--ls-border);
  overflow: hidden;
  transition: box-shadow var(--ls-dur-fast) var(--ls-ease-spring);
  cursor: pointer;
  /* Outer card is itself the horizontal flex row: a single .body
     column (name / chips / caption stacked) plus the chevron rail.
     Uniform card height across the list — every card reserves the
     same vertical footprint regardless of content density. The
     chip strip clips to single-line and the caption row always
     renders (with a spacer if no follow-up data), so short cards
     are padded to match the busy ones. Critical chips render
     first so any overflow drops less-important workflow chips,
     not safety alerts. */
  display: flex;
  align-items: stretch;
  gap: var(--ls-sp-12);
  padding: var(--ls-sp-16);
  min-height: 112px;
}
.ls-client-card:hover {
  box-shadow: var(--ls-shadow-md);
}
/* Body column — flex:1 + min-width:0 so the chip strip inside can
   shrink and clip correctly via overflow:hidden. Vertical stack
   of name → chips → caption with a fixed gap so every card has
   the same internal rhythm. */
.ls-client-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-8);
}
.ls-client-card-name-row {
  display: flex;
  align-items: baseline;
  gap: var(--ls-sp-8);
  min-width: 0;
}
.ls-client-card-name {
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ls-client-card-chips-row {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-8);
  /* Single-line chip strip. Anything past the row width gets
     clipped silently — but the chip order (in JS) puts critical
     safety + the primary workflow chips first, so the chips
     that survive are the most important ones. */
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  /* Reserve the line-height even when the chip list is empty so
     every card row sits at the same vertical position. */
  min-height: 22px;
}
.ls-client-card-chips-row > * {
  /* Don't let chips squeeze themselves narrower than their label.
     Combined with the parent's overflow:hidden this means each
     chip is either fully visible or not visible at all. */
  flex-shrink: 0;
}
.ls-client-card-chevron {
  color: var(--ls-fg-3);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
/* Legacy wrapper class kept inert — earlier markup combined this
   class with .left on the body div and laid the children out
   horizontally, which broke chip clipping. Body layout is now
   handled by .ls-client-card-body above. */
.ls-client-card-top {
  display: contents;
}
.ls-client-card-top > .left {
  display: contents;
}
.ls-client-card-status {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-8);
  padding: 0 var(--ls-sp-16) var(--ls-sp-12);
}
.ls-client-card-divider {
  height: 1px;
  background: var(--ls-border);
}
.ls-client-card-footer {
  /* Footer slot sits inside the body stack; padding/gap are
     handled by the parent .ls-client-card-body so every card
     has consistent vertical spacing. */
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-4);
  min-height: 18px;
}
.ls-client-card-footer-row {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-8);
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
}
.ls-client-card-footer-row .footer-icon {
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
}

/* --- iOS LSTabRootSubtitle --- */
.ls-subtitle {
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
  line-height: var(--ls-lh-body);
  margin-bottom: var(--ls-sp-4);
}

/* --- List meta row (result count + sort control) --- */
.ls-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-sp-12);
  margin-bottom: var(--ls-sp-10);
}
.ls-result-summary {
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-2);
  font-weight: var(--ls-weight-medium);
}
.ls-list-meta .ls-result-summary { margin-bottom: 0; }
.ls-sort-control { display: inline-flex; align-items: center; gap: var(--ls-sp-6); flex-shrink: 0; }
.ls-sort-icon { color: var(--ls-fg-2); display: inline-flex; }
.ls-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--ls-paper);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-pill);
  padding: var(--ls-sp-6) var(--ls-sp-12);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  cursor: pointer;
}
.ls-sort-select:hover { border-color: var(--ls-rose); }

/* --- Tablist (pill-style WAI-ARIA tabs) ---
   Used by Components.tabs (client detail, trauma screening). Pills wrap
   so all tabs stay visible (no horizontal scroll). Filter bars use the
   tonal .ls-filter-scroller system instead. */
.ls-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-sp-8);
  row-gap: var(--ls-sp-6);
  padding: var(--ls-sp-2) 0;
  margin-bottom: var(--ls-sp-16);
}
.ls-tab {
  appearance: none;
  padding: var(--ls-sp-6) var(--ls-sp-14);
  border-radius: var(--ls-r-pill);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  cursor: pointer;
  transition: background var(--ls-dur-base) var(--ls-ease-spring), color var(--ls-dur-base) var(--ls-ease-spring), border-color var(--ls-dur-base) var(--ls-ease-spring);
  background: var(--ls-paper);
  color: var(--ls-fg-2);
  border: 1px solid var(--ls-border);
  white-space: nowrap;
}
.ls-tab:hover {
  border-color: var(--ls-rose);
  color: var(--ls-rose);
}
.ls-tab.is-active {
  background: var(--ls-rose-dark);
  border-color: var(--ls-rose-dark);
  color: var(--ls-fg-on-rose);
}

/* --- iOS toggle switch --- */
.ls-toggle {
  position: relative;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--ls-r-14);
  background: var(--ls-border);
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease-spring);
  flex-shrink: 0;
}
.ls-toggle.on {
  background: var(--ls-rose);
}
.ls-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--ls-r-circle);
  background: white;
  box-shadow: var(--ls-shadow-sm);
  transition: transform var(--ls-dur-fast) var(--ls-ease-spring);
}
.ls-toggle.on::after {
  transform: translateX(20px);
}

/* --- iOS hero card (workflow hero) --- */
.ls-hero-card {
  background: var(--ls-paper);
  border-radius: var(--ls-r-14);
  border: 1px solid var(--ls-border);
  padding: var(--ls-sp-24);
  display: flex;
  align-items: center;
  gap: var(--ls-sp-16);
  margin-bottom: var(--ls-sp-14);
}
.ls-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--ls-r-14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-3xl);
  flex-shrink: 0;
}
.ls-hero-content { flex: 1; }
.ls-hero-title {
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
}
.ls-hero-subtitle {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-4);
}

/* --- Code digit box (linking) --- */
.ls-code-box {
  width: 48px;
  height: 56px;
  border-radius: var(--ls-r-12);
  border: 2px solid var(--ls-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-3xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-rose-dark);
  background: var(--ls-panel);
}

/* --- Countdown timer --- */
.ls-countdown {
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-2);
  font-variant-numeric: tabular-nums;
}

/* --- Step dot strip (plan chapters) --- */
.ls-step-dots {
  display: flex;
  gap: var(--ls-sp-4);
  align-items: center;
}
.ls-step-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--ls-r-circle);
  border: 2px solid var(--ls-border);
  background: transparent;
}
.ls-step-dot.filled {
  background: var(--ls-rose);
  border-color: var(--ls-rose);
}
.ls-step-dot.current {
  border-color: var(--ls-rose-dark);
  box-shadow: var(--ls-shadow-focus-sm);
}

/* --- iOS LSCard paper style (workbook border) --- */
.ls-card {
  background: var(--ls-paper);
  border-radius: var(--ls-r-14);
  border: 1px solid var(--ls-border);
  padding: var(--ls-sp-16);
  transition: box-shadow var(--ls-dur-base) var(--ls-ease-spring);
}
.ls-card-flush {
  padding: 0;
  overflow: hidden;
}
.ls-card-interactive {
  cursor: pointer;
}
.ls-card-interactive:hover,
.ls-card-interactive:focus-visible {
  box-shadow: var(--ls-shadow-md);
}
.ls-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ls-sp-12);
  margin-bottom: var(--ls-sp-14);
}
.ls-card-header-title {
  margin: 0;
  color: var(--ls-fg-1);
  font-size: var(--ls-text-lg);
  font-weight: var(--ls-weight-bold);
}
.ls-card-header-subtitle {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-sm);
  margin-top: var(--ls-sp-4);
}
.ls-card-list {
  display: grid;
  gap: var(--ls-sp-10);
}
.ls-section-title {
  margin-bottom: var(--ls-sp-10);
}
.ls-section-title-text {
  color: var(--ls-fg-1);
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-bold);
}
.ls-section-title-subtitle {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-sm);
  margin-top: var(--ls-sp-4);
}
.ls-field-card-body {
  padding: var(--ls-sp-16) var(--ls-sp-20);
}
.ls-field-card-title {
  color: var(--ls-fg-1);
  font-size: var(--ls-text-md);
  font-weight: var(--ls-weight-bold);
  margin-bottom: var(--ls-sp-4);
}
.ls-field-card-description {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-base);
  margin-bottom: var(--ls-sp-12);
}
.ls-field-card-value {
  background: var(--ls-panel);
  border-radius: var(--ls-r-10);
  font-weight: var(--ls-weight-medium);
  padding: var(--ls-sp-10) var(--ls-sp-14);
}

/* --- Standard library additions: form rows, navigation, data display --- */
.ls-check-field,
.ls-toggle-field,
.ls-radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-sp-10);
  padding: var(--ls-sp-12) var(--ls-sp-12);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-12);
  background: var(--ls-paper);
  cursor: pointer;
}
.ls-check-field.is-disabled,
.ls-toggle-field.is-disabled,
.ls-radio-option.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ls-check-field input,
.ls-radio-option input {
  width: 20px;
  height: 20px;
  margin-top: var(--ls-sp-2);
  accent-color: var(--ls-rose-dark);
  flex-shrink: 0;
}
.ls-check-field-body,
.ls-toggle-field-body,
.ls-radio-option-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ls-check-field-title,
.ls-toggle-field-title,
.ls-radio-option-title {
  color: var(--ls-fg-1);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
}
.ls-check-field-description,
.ls-toggle-field-description,
.ls-radio-option-description {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-xs);
  line-height: var(--ls-lh-snug);
  margin-top: var(--ls-sp-2);
}
.ls-toggle-field {
  align-items: center;
  justify-content: space-between;
}
.ls-radio-group {
  display: grid;
  gap: var(--ls-sp-8);
}
.ls-radio-group-label {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
}
.ls-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ls-sp-8);
  color: var(--ls-fg-2);
  font-size: var(--ls-text-sm);
  margin-bottom: var(--ls-sp-14);
}
.ls-breadcrumb-link {
  color: var(--ls-rose-dark);
  font-weight: var(--ls-weight-semibold);
  background: transparent;
  border: none;
  padding: var(--ls-sp-2) 0;
  cursor: pointer;
}
.ls-breadcrumb-link:hover { text-decoration: underline; }
.ls-breadcrumb-sep,
.ls-breadcrumb-current {
  color: var(--ls-fg-3);
}
.ls-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ls-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: var(--ls-z-tooltip);
  width: max-content;
  max-width: 280px;
  padding: var(--ls-sp-8) var(--ls-sp-10);
  border-radius: var(--ls-r-8);
  background: var(--ls-fg-1);
  color: #fff;
  font-size: var(--ls-text-xs);
  line-height: var(--ls-lh-snug);
  box-shadow: var(--ls-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-tooltip-wrap:hover .ls-tooltip,
.ls-tooltip-wrap:focus-within .ls-tooltip {
  opacity: 1;
}
/* Removed dead .ls-progress (linear progressBar component was unused; the
   live progress indicator is the circular progressRing in helpers.js). */
.ls-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ls-r-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ls-rose-mist);
  color: var(--ls-rose-dark);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-bold);
  flex-shrink: 0;
}
.ls-avatar--sm { width: 32px; height: 32px; font-size: var(--ls-text-xs); }
.ls-avatar--lg { width: 52px; height: 52px; font-size: var(--ls-text-lg); }
.ls-kv-list { margin: 0; }
.ls-key-value-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ls-sp-12);
  padding: var(--ls-sp-10) 0;
  border-bottom: 1px solid var(--ls-divider);
}
.ls-key-value-row:last-child { border-bottom: none; }
.ls-key-value-label {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-sm);
}
.ls-key-value-value {
  margin: 0; /* reset UA <dd> indent */
  color: var(--ls-fg-1);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  text-align: right;
}

/* --- Code block (monospace technical text, scrollable) --- */
.ls-code-block {
  margin: 0;
  padding: var(--ls-sp-12) var(--ls-sp-14);
  background: var(--ls-rose-mist);
  border-radius: var(--ls-r-12);
  font-family: var(--ls-font-mono);
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
}
.ls-divider {
  height: 1px;
  background: var(--ls-divider);
  border: none;
}
.ls-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-8);
  flex-wrap: wrap;
}
.ls-system-state {
  text-align: center;
  padding: var(--ls-sp-32) var(--ls-sp-24);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-14);
  background: var(--ls-paper);
}
.ls-system-state-icon {
  color: var(--ls-rose-dark);
  margin-bottom: var(--ls-sp-8);
}
.ls-system-state-title {
  color: var(--ls-fg-1);
  font-weight: var(--ls-weight-semibold);
}
.ls-system-state-message {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-sm);
  margin: var(--ls-sp-6) auto 0;
  max-width: 360px;
}
.ls-system-state.is-warning .ls-system-state-icon { color: var(--ls-warning); }
.ls-system-state.is-critical .ls-system-state-icon { color: var(--ls-critical); }

/* --- iOS LSProfileActionRow --- */
.ls-action-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-sp-12);
  padding: var(--ls-sp-14) var(--ls-sp-16);
  border-bottom: 1px solid var(--ls-divider);  /* row separator → divider token */
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease-spring);
}
.ls-action-row:last-child { border-bottom: none; }
.ls-action-row:hover { background: var(--ls-panel); }
.ls-action-row-icon {
  font-size: var(--ls-text-xl);
  width: 24px;
  text-align: center;
  padding-top: var(--ls-sp-2);
  flex-shrink: 0;
}
.ls-action-row-content { flex: 1; }
.ls-action-row-title {
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
}
.ls-action-row-subtitle {
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-4);
}
.ls-action-row-chevron {
  color: var(--ls-fg-3);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  padding-top: var(--ls-sp-4);
}

/* --- iOS LSInfoBanner --- */
.ls-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-sp-12);
  padding: var(--ls-sp-14);
  border-radius: var(--ls-r-14);
  border: 1px solid;
}
.ls-banner-rose {
  background: rgba(201,105,156,0.12);
  border-color: rgba(201,105,156,0.28);
}
.ls-banner-amber {
  background: rgba(184,110,0,0.1);
  border-color: rgba(184,110,0,0.35);
}
.ls-banner-critical {
  background: rgba(194,59,59,0.08);
  border-color: rgba(194,59,59,0.35);
}
.ls-banner-icon {
  font-size: var(--ls-text-lg);
  font-weight: var(--ls-weight-semibold);
  width: 24px;
  flex-shrink: 0;
}
.ls-banner-content { flex: 1; }
.ls-banner-title {
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
}
.ls-banner-message {
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-4);
}

/* --- Domain Cards (Assessment) --- */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ls-sp-14); }
.domain-card {
  background: var(--ls-paper);
  border-radius: var(--ls-r-18);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--ls-dur-fast) var(--ls-ease-spring);
  border: 2px solid transparent;
  box-shadow: var(--ls-shadow-sm);
}
.domain-card:hover { transform: translateY(-2px); box-shadow: var(--ls-shadow-md); }
.domain-card.completed { border-color: var(--ls-favourable); }
.domain-card-accent {
  height: 4px;
}
.domain-card-body {
  padding: var(--ls-sp-18) var(--ls-sp-20);
}
.domain-card-icon {
  font-size: var(--ls-text-3xl);
  margin-bottom: var(--ls-sp-6);
}
.domain-card-title {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-md);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-4);
}
.domain-card-status {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
}

/* --- Progress Ring --- */
.progress-ring {
  position: relative;
  width: 64px;
  height: 64px;
}
.progress-ring svg {
  transform: rotate(-90deg);
}
.progress-ring-bg {
  fill: none;
  stroke: var(--ls-border-rose);
  stroke-width: 4;
}
.progress-ring-fill {
  fill: none;
  stroke: var(--ls-rose);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s var(--ls-ease-standard);
}
.progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
}

/* --- Calendar / Schedule --- */
.calendar-mini {
  background: var(--ls-paper);
  border-radius: var(--ls-r-18);
  padding: var(--ls-sp-20);
  box-shadow: var(--ls-shadow-sm);
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ls-sp-16);
}
.calendar-header h3 { font-size: var(--ls-text-lg); font-weight: var(--ls-weight-semibold); }
.calendar-nav { display: flex; gap: var(--ls-sp-6); }
.calendar-nav button {
  width: 34px; height: 34px;
  border-radius: var(--ls-r-circle);
  border: 1px solid var(--ls-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ls-fg-2);
  transition: all var(--ls-dur-fast) var(--ls-ease-spring);
  background: var(--ls-paper);
}
.calendar-nav button:hover { border-color: var(--ls-rose); color: var(--ls-rose); background: var(--ls-rose-veil); }
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--ls-sp-4);
  text-align: center;
}
.calendar-day-name {
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-3);
  padding: var(--ls-sp-4);
  text-transform: uppercase;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ls-r-circle);
  font-size: var(--ls-text-base);
  cursor: pointer;
  transition: all var(--ls-dur-fast) var(--ls-ease-spring);
  position: relative;
}
.calendar-day:hover { background: var(--ls-rose-veil); }
.calendar-day.today {
  background: var(--ls-rose);
  color: white;
  font-weight: var(--ls-weight-bold);
}
.calendar-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 4px; height: 4px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose);
}
.calendar-day.other-month { color: var(--ls-fg-3); }

/* Schedule items */
.schedule-item {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-14);
  padding: var(--ls-sp-14) var(--ls-sp-18);
  border-radius: var(--ls-r-14);
  background: var(--ls-panel);
  margin-bottom: var(--ls-sp-8);
  transition: background var(--ls-dur-fast) var(--ls-ease-spring);
}
.schedule-item:hover { background: var(--ls-rose-veil); }
.schedule-time {
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-rose);
  min-width: 60px;
}
.schedule-dot {
  width: 8px; height: 8px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose);
  flex-shrink: 0;
}
.schedule-info { flex: 1; }
.schedule-title {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-base);
  color: var(--ls-fg-1);
}
.schedule-detail {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-2);
}

/* --- Assessment Form --- */
.assess-form { max-width: 720px; }
.assess-section {
  margin-bottom: var(--ls-sp-32);
}
.assess-section-title {
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-6);
}
.assess-section-lead {
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
  margin-bottom: var(--ls-sp-20);
  line-height: var(--ls-lh-body);
}
.assess-question {
  margin-bottom: var(--ls-sp-16);
  padding: var(--ls-sp-18);
  background: var(--ls-panel);
  border-radius: var(--ls-r-14);
}
.assess-question-text {
  font-weight: var(--ls-weight-medium);
  margin-bottom: var(--ls-sp-12);
  color: var(--ls-fg-1);
}
/* .assess-option(s) and .likert-* migrated to .ls-option-group
   (Components.optionGroup). See the unified block below. */

/* ============================================================
   Unified option group (Components.optionGroup)
   One accessible control for every clinical scale, yes/no and
   multi-select pill row. Replaces .likert-btn / .assess-option /
   .ls-trauma-*-option. Container is role=radiogroup (single) or
   role=group (multi); options are real <button>s with
   aria-checked / aria-pressed, roving tabindex, arrow-key focus.
   ============================================================ */
.ls-option-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ls-sp-8);
  align-items: center;
}
.ls-option-group--scale {
  flex-wrap: nowrap;
  gap: var(--ls-sp-6);
}
.ls-option-group--grid {
  display: grid;
  gap: var(--ls-sp-8);
}
.ls-option-group--grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ls-option-group--grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ls-option-group--grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.ls-option {
  appearance: none;
  background: var(--ls-paper);
  border: 1.5px solid var(--ls-border);
  border-radius: var(--ls-r-pill);
  padding: var(--ls-sp-8) var(--ls-sp-18);
  font: inherit;
  font-size: var(--ls-text-base);
  color: var(--ls-fg-1);
  cursor: pointer;
  text-align: center;
  line-height: var(--ls-lh-snug);
  transition: background var(--ls-dur-fast) var(--ls-ease-spring),
              border-color var(--ls-dur-fast) var(--ls-ease-spring),
              color var(--ls-dur-fast) var(--ls-ease-spring);
}
.ls-option:hover:not(.is-selected):not(:disabled) {
  border-color: var(--ls-rose);
  background: var(--ls-rose-mist);
}
.ls-option.is-selected {
  background: var(--ls-rose-dark);
  border-color: var(--ls-rose-dark);
  color: var(--ls-fg-on-rose);
}
.ls-option:disabled { opacity: 0.5; cursor: not-allowed; }

/* Grid cells: rectangular, lighter border (trauma look) */
.ls-option-group--grid .ls-option {
  border-radius: var(--ls-r-12);
  border-width: 1px;
  padding: var(--ls-sp-10) var(--ls-sp-12);
  color: var(--ls-fg-2);
}
.ls-option-group--grid .ls-option.is-selected { color: var(--ls-fg-on-rose); }

/* Scale cells: round number pills */
.ls-option-group--scale .ls-option {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--ls-r-circle);
  border-width: 2px;
  font-weight: var(--ls-weight-semibold);
  flex: 0 0 auto;
}

/* Endpoint legend under a scale (e.g. Aldrig … Ofta) */
.ls-option-endpoints {
  display: flex;
  justify-content: space-between;
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-3);
  margin-top: var(--ls-sp-4);
}

/* Mobile: collapse dense grids to 2 columns for ≥44px touch targets */
@media (max-width: 639px) {
  .ls-option-group--grid.cols-3,
  .ls-option-group--grid.cols-4 { grid-template-columns: 1fr 1fr; }
}

/* --- Search Bar --- */
.search-bar {
  position: relative;
  width: 100%;
}
.search-bar input {
  width: 100%;
  padding: var(--ls-sp-14) var(--ls-sp-16) var(--ls-sp-14) var(--ls-sp-48);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-18);
  font-size: var(--ls-text-base);
  background: var(--ls-paper);
  transition: border-color var(--ls-dur-fast) var(--ls-ease-spring);
}
.search-bar input:focus {
  border-color: var(--ls-rose);   /* active tint; keyboard ring via :focus-visible */
}
.search-bar .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ls-fg-2);
  font-size: var(--ls-text-md);
}

/* --- Tabs (iOS style underline) --- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ls-border-rose);
  margin-bottom: var(--ls-sp-20);
  flex-wrap: wrap;          /* wrap if labels overflow (e.g. long counters) */
  row-gap: var(--ls-sp-4);
}
.tab {
  padding: var(--ls-sp-12) var(--ls-sp-20);
  font-weight: var(--ls-weight-medium);
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -var(--ls-sp-2);
  transition: background var(--ls-dur-base) var(--ls-ease-spring), color var(--ls-dur-base) var(--ls-ease-spring), border-color var(--ls-dur-base) var(--ls-ease-spring);
}
.tab:hover { color: var(--ls-rose); }
.tab.active {
  color: var(--ls-rose);
  border-bottom-color: var(--ls-rose);
  font-weight: var(--ls-weight-semibold);
}

/* --- Badges / Tags (iOS pill style) --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-4);
  padding: var(--ls-sp-4) var(--ls-sp-12);
  border-radius: var(--ls-r-pill);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
}
/* Single canonical badge palette — uses the darker -dark text tokens for
   WCAG AA contrast on the tint. (A duplicate block in layout.css used to
   override these with lower-contrast colours; removed.) */
.badge-rose    { background: var(--ls-rose-veil); color: var(--ls-rose-dark); }
.badge-success { background: rgba(74,125,85,.16); color: var(--ls-favourable-dark); }
.badge-warning { background: rgba(176,112,26,.14); color: var(--ls-warning-dark); }
.badge-danger  { background: rgba(184,74,74,.12); color: var(--ls-critical-dark); }
.badge-info    { background: rgba(180,120,150,.14); color: var(--ls-rose-dark); }
.badge-neutral { background: rgba(154,144,140,.18); color: var(--ls-fg-2); }

/* ── Canonical inline alert (Components.alert) ──────────── */
.ls-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-sp-10);
  padding: var(--ls-sp-14) var(--ls-sp-16);
  border-radius: var(--ls-r-12);
  border-left: 4px solid;
}
.ls-alert-icon { display: flex; flex-shrink: 0; margin-top: var(--ls-sp-2); }
.ls-alert-body { flex: 1; min-width: 0; }
.ls-alert-title { font-weight: var(--ls-weight-bold); color: var(--ls-fg-1); font-size: var(--ls-text-base); }
.ls-alert-message { color: var(--ls-fg-2); font-size: var(--ls-text-sm); margin-top: var(--ls-sp-2); line-height: var(--ls-lh-body); }
.ls-alert-info     { background: var(--ls-info-tint);       border-left-color: var(--ls-info-dark); }
.ls-alert-info     .ls-alert-icon { color: var(--ls-info-dark); }
.ls-alert-warning  { background: var(--ls-warning-tint);    border-left-color: var(--ls-warning); }
.ls-alert-warning  .ls-alert-icon, .ls-alert-warning  .ls-alert-title { color: var(--ls-warning-dark); }
.ls-alert-critical { background: var(--ls-critical-tint);   border-left-color: var(--ls-critical); }
.ls-alert-critical .ls-alert-icon, .ls-alert-critical .ls-alert-title { color: var(--ls-critical-dark); }
.ls-alert-success  { background: var(--ls-favourable-tint); border-left-color: var(--ls-favourable); }
.ls-alert-success  .ls-alert-icon, .ls-alert-success  .ls-alert-title { color: var(--ls-favourable-dark); }

/* ── Canonical disclosure / accordion (Components.disclosure/accordion) ── */
.ls-disclosure-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-sp-8);
  width: 100%;
  padding: var(--ls-sp-12) var(--ls-sp-14);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  text-align: left;
}
.ls-disclosure-label { flex: 1; min-width: 0; }
.ls-disclosure-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ls-fg-2);
  transition: transform var(--ls-dur-fast) var(--ls-ease-standard);
}
.ls-disclosure-chevron.is-open { transform: rotate(180deg); }
.ls-accordion .ls-disclosure { border-bottom: 1px solid var(--ls-divider); }
.ls-accordion .ls-disclosure:last-child { border-bottom: none; }

/* --- Status dot --- */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--ls-r-circle);
  margin-right: var(--ls-sp-6);
}
.status-dot.active { background: var(--ls-favourable); }
.status-dot.draft { background: var(--ls-warning); }
.status-dot.archived { background: var(--ls-fg-3); }

/* --- Section Headers (iOS style — bold + gray subtitle) --- */
.section-header {
  margin-bottom: var(--ls-sp-14);
}
.section-header h2,
.section-header h3 {
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-2);
}
.section-header p {
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
}

/* --- Profile Card (iOS style — circle avatar, name, email, role) --- */
.profile-card {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-18);
  padding: var(--ls-sp-24);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose-veil);
  color: var(--ls-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-3xl);
  flex-shrink: 0;
}
.profile-info { flex: 1; }
.profile-name {
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
}
.profile-email {
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-2);
}
.profile-role {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-3);
  margin-top: var(--ls-sp-2);
}

/* --- Settings List (iOS grouped style) --- */
.settings-group {
  background: var(--ls-paper);
  border-radius: var(--ls-r-18);
  box-shadow: var(--ls-shadow-sm);
  overflow: hidden;
  margin-bottom: var(--ls-sp-16);
}
/* One flush section card → header + flat rows separated by hairlines.
   Rows are NOT individual cards (the old .list-row treatment was removed):
   uniform padding, full-bleed dividers, hover only on interactive rows.
   The divider sits on the [role=listitem] wrapper (added for a11y) so it
   isn't defeated by .settings-item being the wrapper's only child. */
.ls-settings-head { padding: var(--ls-sp-18) var(--ls-sp-20) var(--ls-sp-12); }
.ls-settings-list > [role="listitem"]:not(:last-child) {
  border-bottom: 1px solid var(--ls-border-rose);
}
.settings-item {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-14);
  padding: var(--ls-sp-16) var(--ls-sp-20);
  cursor: pointer;
  transition: background var(--ls-dur-fast) var(--ls-ease-spring);
}
.settings-item:hover { background: var(--ls-panel); }
.settings-item.is-static { cursor: default; }
.settings-item.is-static:hover { background: transparent; }
.settings-item-icon {
  font-size: var(--ls-text-2xl);
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.settings-item-content { flex: 1; }
.settings-item-title {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-md);
  color: var(--ls-fg-1);
}
.settings-item-subtitle {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-top: 1px;
}
.settings-item-chevron {
  color: var(--ls-fg-3);
  font-size: var(--ls-text-2xl);
}

/* --- Modal / Dialog --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ls-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ls-z-overlay);
  padding: var(--ls-sp-20);
  animation: fadeIn var(--ls-dur-base) var(--ls-ease-spring);
}
.modal {
  background: var(--ls-paper);
  border-radius: var(--ls-r-22);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ls-shadow-lg);
  animation: slideUp var(--ls-dur-base) var(--ls-ease-spring);
}
.modal-header {
  padding: var(--ls-sp-24) var(--ls-sp-24);
  border-bottom: 1px solid var(--ls-border-rose);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2 { font-size: var(--ls-text-xl); font-weight: var(--ls-weight-bold); }
.modal-close {
  width: 36px; height: 36px;
  border-radius: var(--ls-r-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ls-text-2xl);
  color: var(--ls-fg-2);
  transition: all var(--ls-dur-fast) var(--ls-ease-spring);
}
.modal-close:hover { background: var(--ls-rose-veil); color: var(--ls-rose); }
.modal-body { padding: var(--ls-sp-24); }
.modal-footer {
  padding: var(--ls-sp-16) var(--ls-sp-24);
  border-top: 1px solid var(--ls-border-rose);
  display: flex;
  justify-content: flex-end;
  gap: var(--ls-sp-10);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Lightbox (full-screen image viewer) ---
   Media-viewer palette: dark scrim + white controls, intentionally
   outside the rose tokens (an image needs a neutral backdrop). Spacing,
   radius, shadow, type still use tokens. */
.ls-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ls-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ls-sp-24);
  background: rgba(0, 0, 0, 0.85);
}
.ls-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ls-sp-12);
}
.ls-lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--ls-r-8);
  box-shadow: var(--ls-shadow-xl);
}
.ls-lightbox-caption {
  color: #fff;
  font-size: var(--ls-text-sm);
  text-align: center;
  max-width: 60ch;
}
.ls-lightbox-counter {
  position: absolute;
  bottom: var(--ls-sp-16);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--ls-text-xs);
}
.ls-lightbox-close,
.ls-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ls-r-circle);
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  transition: background var(--ls-dur-snap) var(--ls-ease-standard);
}
.ls-lightbox-close:hover,
.ls-lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); }
.ls-lightbox-close { top: var(--ls-sp-16); right: var(--ls-sp-16); }
.ls-lightbox-nav { top: 50%; transform: translateY(-50%); }
.ls-lightbox-prev { left: var(--ls-sp-16); }
.ls-lightbox-next { right: var(--ls-sp-16); }

/* --- Toast / Snackbar --- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--ls-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-10);
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-10);
  padding: var(--ls-sp-12) var(--ls-sp-14) var(--ls-sp-12) var(--ls-sp-16);
  border-radius: var(--ls-r-14);
  background: var(--ls-fg-1);
  color: white;
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-medium);
  box-shadow: var(--ls-shadow-lg);
  animation: slideUp var(--ls-dur-slow) var(--ls-ease-spring);
  transition: opacity var(--ls-dur-base) var(--ls-ease-standard), transform var(--ls-dur-base) var(--ls-ease-standard);
  max-width: 400px;
}
.toast.success { background: var(--ls-favourable); }
.toast.warning { background: var(--ls-warning-dark); }
.toast.error { background: var(--ls-critical); }
.toast-icon { display: flex; flex-shrink: 0; }
.toast-msg { flex: 1; min-width: 0; }
.toast-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--ls-r-circle);
  background: transparent; color: inherit; opacity: 0.7;
  font-size: var(--ls-text-base); cursor: pointer;
  transition: opacity var(--ls-dur-fast) var(--ls-ease-standard), background var(--ls-dur-fast) var(--ls-ease-standard);
}
.toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }

/* --- Loading / Spinner --- */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--ls-border);
  border-top-color: var(--ls-rose);
  border-radius: var(--ls-r-circle);
  animation: spin 0.8s var(--ls-ease-linear) infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  flex-direction: column;
  gap: var(--ls-sp-16);
  color: var(--ls-fg-2);
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: var(--ls-sp-64) var(--ls-sp-20);
  color: var(--ls-fg-2);
}
.empty-state-icon {
  font-size: var(--ls-text-6xl);
  margin-bottom: var(--ls-sp-16);
  opacity: 0.5;
}
.empty-state h3 {
  font-size: var(--ls-text-xl);
  margin-bottom: var(--ls-sp-8);
  color: var(--ls-fg-1);
}
.empty-state p {
  font-size: var(--ls-text-base);
  margin-bottom: var(--ls-sp-20);
}

/* --- Utility --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--ls-sp-8); }
.gap-md { gap: var(--ls-sp-16); }
.gap-lg { gap: var(--ls-sp-24); }
.mt-sm { margin-top: var(--ls-sp-8); }
.mt-md { margin-top: var(--ls-sp-16); }
.mt-lg { margin-top: var(--ls-sp-24); }
.mb-sm { margin-bottom: var(--ls-sp-8); }
.mb-md { margin-bottom: var(--ls-sp-16); }
.mb-lg { margin-bottom: var(--ls-sp-24); }
.text-center { text-align: center; }
.text-sm { font-size: var(--ls-text-base); }
.text-muted { color: var(--ls-fg-2); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden { display: none !important; }

/* ============================================================
   RESPONSIVE — iPad + Mobile
   ============================================================ */
@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .page-body { padding: var(--ls-sp-16) 0 var(--ls-sp-32); }
  .page-header h1 { font-size: var(--ls-text-4xl); }
}

/* Phone header stack — single column, rule above the wrapped actions so the
   action button never splits the title from the rule. Defined here (after the
   .page-header grid base) so the override wins source order. */
@media (max-width: 639px) {
  .page-head, .page-header {
    grid-template-columns: 1fr;
    grid-template-areas: "titles" "rule" "actions";
  }
  .page-head .actions, .page-header .header-actions { width: 100%; margin-top: var(--ls-sp-12); }
  .page-head .actions .btn, .page-header .header-actions .btn { flex: 1; justify-content: center; }
  /* A search-only actions slot (just the mobile-hidden search button) collapses
     so it leaves no gap above the rule. */
  .page-head .header-actions.is-search-only,
  .page-header .header-actions.is-search-only { display: none; }
}

@media (max-width: 767px) {
  /* Header layout is grid (see .page-head / .page-header); the phone stack is
     handled at ≤639. Here just scale the title + tighten body padding. */
  .page-header h1 { font-size: var(--ls-text-3xl); }
  .page-body { padding: var(--ls-sp-12) 0 var(--ls-sp-32); }
  /* .grid-2/3/4 now reflow on their own via auto-fit — no hard collapse here. */
  .domain-grid { grid-template-columns: 1fr; }
  .calendar-grid { font-size: var(--ls-text-sm); }
  .stat-card { padding: var(--ls-sp-16); }
  .stat-value { font-size: var(--ls-text-3xl); }
  .modal { max-width: 100%; margin: var(--ls-sp-10); border-radius: var(--ls-r-14); }
}

@media (max-width: 639px) {
  .login-card { padding: var(--ls-sp-32) var(--ls-sp-24); }
  .tabs { overflow-x: auto; }
  .tab { white-space: nowrap; padding: var(--ls-sp-10) var(--ls-sp-14); font-size: var(--ls-text-sm); }
}

/* ─── Onboarding Page ─────────────────────────────── */
.onboarding-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, var(--ls-rose-mist) 0%, var(--ls-page) 40%);
}
.onboarding-hero {
  width: 100%;
  padding: var(--ls-sp-48) var(--ls-sp-24) var(--ls-sp-32);
  text-align: center;
}
.onboarding-hero-inner {
  max-width: 480px;
  margin: 0 auto;
}
.onboarding-hero .star {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto var(--ls-sp-16);
  color: var(--ls-rose-dark);
}
.onboarding-title {
  font-family: var(--ls-font-sans);
  font-size: var(--ls-text-4xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-8);
}
.onboarding-subtitle {
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-2);
  line-height: var(--ls-lh-body);
}
.onboarding-card {
  max-width: 520px;
  width: calc(100% - 48px);
  background: #fff;
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-14, var(--ls-r-14));
  padding: var(--ls-sp-24);
  box-shadow: var(--ls-shadow-sm, 0 1px 3px rgba(63,47,53,0.06));
}
.onboarding-card-title {
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-6);
}
.onboarding-card-desc {
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
  line-height: var(--ls-lh-body);
  margin-bottom: var(--ls-sp-20);
}
.onboarding-features {
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-16);
}
.onboarding-feature {
  display: flex;
  gap: var(--ls-sp-14);
  align-items: flex-start;
}
.onboarding-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ls-r-10);
  background: var(--ls-rose-mist);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--ls-rose-dark);
}
.onboarding-step-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose-dark);
  color: #fff;
  font-size: var(--ls-text-2xs);
  font-weight: var(--ls-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: var(--ls-lh-none);
}
.onboarding-feature-title {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-md);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-2);
}
.onboarding-feature-detail {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  line-height: var(--ls-lh-snug);
}
.onboarding-actions {
  max-width: 520px;
  width: calc(100% - 48px);
  padding: var(--ls-sp-24) 0 var(--ls-sp-40);
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-10);
  align-items: center;
}
.onboarding-actions .btn-ghost {
  font-size: var(--ls-text-base);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-rose-dark);
  background: none;
  border: none;
  padding: var(--ls-sp-8) var(--ls-sp-16);
}
.onboarding-actions .btn-ghost:hover {
  text-decoration: underline;
}

/* ─── PDF Export Print Styles ─────────────────────── */
@media print {
  body { background: #fff !important; }
  .no-print { display: none !important; }
}

/* Keyboard focus is the single global :focus-visible outline ring (a11y.css).
   Interactive surfaces inherit it — no per-component focus styles. List rows
   that take tabindex="0" suppress only the dotted browser default; the
   :focus-visible ring still applies on keyboard focus. */
[data-list-item]:focus:not(:focus-visible) { outline: none; }

/* ─── Skeleton loaders ─────────────────────────────
   Shape-matched placeholders rendered while initial data is
   fetching. Used by Clients, Today, and Schedule's first paint.
   The shimmer is a left-to-right gradient sweep on the rose-mist
   background — subtle enough to read as "loading", not as
   decoration. */
.ls-skeleton {
  background: var(--ls-rose-mist);
  background-image: linear-gradient(90deg,
    var(--ls-rose-mist) 0%,
    var(--ls-panel) 50%,
    var(--ls-rose-mist) 100%);
  background-size: 200% 100%;
  animation: ls-shimmer 1.4s var(--ls-ease-spring) infinite;
  border-radius: var(--ls-r-8);
  display: inline-block;
}
@keyframes ls-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Reusable line of placeholder text inside a skeleton row */
.ls-skeleton-line { height: 12px; margin-bottom: var(--ls-sp-8); }
.ls-skeleton-line:last-child { margin-bottom: 0; }

/* ─── Privacy boundary on modals (public vs staff) ──
   Two visually distinct field groups used by modals that mix
   youth-visible (public) and staff-only data. The public block
   is the paper-default; the private block is a darker panel
   with a sharper hairline so it reads "off-limits to youth" at
   a glance — not just a divider line. */
.ls-modal-block {
  border-radius: var(--ls-r-14);
  padding: var(--ls-sp-14) var(--ls-sp-16) var(--ls-sp-12);
  margin-bottom: var(--ls-sp-16);
}
.ls-modal-block-head {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-8);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--ls-sp-10);
}
.ls-modal-public {
  background: var(--ls-paper);
  border: 1px solid var(--ls-border);
}
.ls-modal-public .ls-modal-block-head {
  color: var(--ls-favourable);
}
.ls-modal-private {
  background: var(--ls-panel);
  border: 1px solid var(--ls-border-strong);
}
.ls-modal-private .ls-modal-block-head {
  color: var(--ls-fg-2);
}
.ls-modal-block-head .ls-icon,
.ls-modal-block-head .ls-icon-sm { flex-shrink: 0; }

/* "Visa som Livbojen" toggle button — sits in the modal toolbar */
.ls-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-6);
  padding: var(--ls-sp-6) var(--ls-sp-12);
  border: 1px solid var(--ls-border);
  background: var(--ls-paper);
  border-radius: var(--ls-r-pill);
  font-family: inherit;
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-2);
  cursor: pointer;
  transition: background var(--ls-dur-snap) var(--ls-ease-spring), color var(--ls-dur-snap) var(--ls-ease-spring), border-color var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-preview-toggle:hover {
  background: var(--ls-rose-mist);
  color: var(--ls-rose-dark);
  border-color: var(--ls-border-rose);
}
.ls-preview-toggle.is-active {
  background: var(--ls-rose-dark);
  color: var(--ls-fg-on-rose);
  border-color: var(--ls-rose-dark);
}

/* Livbojen preview pane — Livbojen-blue accent (--ls-d-education). */
.ls-livbojen-preview { padding: var(--ls-sp-4); }
.ls-livbojen-preview-caption {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-8);
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-bottom: var(--ls-sp-12);
}
.ls-livbojen-preview-caption-icon { color: var(--ls-d-education); display: inline-flex; }
.ls-livbojen-card {
  border-radius: var(--ls-r-18);
  background: var(--ls-d-education-tint);
  border: 1px solid var(--ls-d-education);
  overflow: hidden;
}
.ls-livbojen-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ls-sp-12) var(--ls-sp-18);
  background: var(--ls-d-education);
  color: #fff;
}
.ls-livbojen-wordmark {
  font-family: var(--ls-font-serif);
  font-size: var(--ls-text-xl);
  font-weight: var(--ls-weight-semibold);
  letter-spacing: 0.02em;
}
.ls-livbojen-kind {
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--ls-sp-4) var(--ls-sp-10);
  border-radius: var(--ls-r-pill);
  background: rgba(255, 255, 255, 0.2);
}
.ls-livbojen-card-body { padding: var(--ls-sp-18) var(--ls-sp-20); }
.ls-livbojen-card-title {
  font-family: var(--ls-font-serif);
  font-size: var(--ls-text-2xl);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-4);
}
.ls-livbojen-card-when {
  font-size: var(--ls-text-sm);
  color: var(--ls-d-education);
  margin-bottom: var(--ls-sp-12);
  font-weight: var(--ls-weight-semibold);
}
.ls-livbojen-card-text {
  font-size: var(--ls-text-md);
  color: var(--ls-fg-1);
  line-height: var(--ls-lh-body);
  white-space: pre-wrap;
}

/* ─── Schedule list-first toolbar + row checkbox ────
   The page-header `actions` slot holds the [Lista | Månad]
   segmented toggle alongside the two create buttons. */
.ls-schedule-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-12);
  flex-wrap: wrap;
}
.ls-segmented {
  display: inline-flex;
  background: var(--ls-panel);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-pill);
  padding: var(--ls-sp-2);
}
.ls-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-2);
  padding: var(--ls-sp-6) var(--ls-sp-14);
  border-radius: var(--ls-r-pill);
  cursor: pointer;
  transition: background var(--ls-dur-snap) var(--ls-ease-spring), color var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-seg-btn.is-active {
  background: var(--ls-paper);
  color: var(--ls-rose-dark);
  box-shadow: var(--ls-shadow-sm);
}

.ls-row-check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border: 1.5px solid var(--ls-border-strong);
  border-radius: var(--ls-r-6);
  background: var(--ls-paper);
  color: var(--ls-fg-on-rose);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ls-dur-snap) var(--ls-ease-spring), border-color var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-row-check:hover { border-color: var(--ls-rose-dark); }
.ls-row-check.is-checked {
  background: var(--ls-favourable);
  border-color: var(--ls-favourable);
}

/* ─── Notifications bell + drawer ───────────────────
   Bell sits in the former sidebar avatar slot. Drawer is a right-edge
   slide-in mounted as a portal on body. */
.ls-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: var(--ls-sp-12);
  border: 1px solid var(--ls-border);
  background: var(--ls-paper);
  color: var(--ls-fg-2);
  border-radius: var(--ls-r-12);
  cursor: pointer;
  transition: background var(--ls-dur-snap) var(--ls-ease-spring), color var(--ls-dur-snap) var(--ls-ease-spring), border-color var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-bell:hover {
  background: var(--ls-rose-mist);
  color: var(--ls-rose-dark);
  border-color: var(--ls-border-rose);
}
.ls-bell.has-unread { color: var(--ls-rose-dark); border-color: var(--ls-border-rose); }
.sb-bell-slot {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.ls-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 var(--ls-sp-4);
  border-radius: var(--ls-r-8);
  background: var(--ls-rose-dark);
  color: var(--ls-fg-on-rose);
  font-size: var(--ls-text-2xs);
  font-weight: var(--ls-weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: var(--ls-lh-none);
}

.ls-drawer-overlay {
  position: fixed; inset: 0;
  background: var(--ls-overlay);
  z-index: var(--ls-z-overlay);
  display: flex;
  justify-content: flex-end;
  animation: ls-drawer-fade var(--ls-dur-base) var(--ls-ease-spring);
}
@keyframes ls-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
.ls-drawer {
  width: 360px;
  max-width: 100%;
  height: 100%;
  background: var(--ls-paper);
  box-shadow: var(--ls-shadow-lg);
  display: flex;
  flex-direction: column;
  animation: ls-drawer-slide var(--ls-dur-base) var(--ls-ease-spring);
}
@keyframes ls-drawer-slide { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.ls-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ls-sp-16) var(--ls-sp-20);
  border-bottom: 1px solid var(--ls-border);
}
.ls-drawer-close {
  border: none;
  background: transparent;
  color: var(--ls-fg-2);
  font-size: var(--ls-text-xl);
  cursor: pointer;
  padding: var(--ls-sp-4) var(--ls-sp-8);
  border-radius: var(--ls-r-8);
}
.ls-drawer-close:hover { background: var(--ls-panel); }
.ls-drawer-filterbar {
  display: flex;
  gap: var(--ls-sp-6);
  padding: var(--ls-sp-10) var(--ls-sp-20);
  border-bottom: 1px solid var(--ls-border);
}
.ls-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ls-sp-8) 0;
}
.ls-drawer-group-heading {
  padding: var(--ls-sp-14) var(--ls-sp-20) var(--ls-sp-6);
  color: var(--ls-fg-3);
}
.ls-drawer-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ls-sp-12);
  padding: var(--ls-sp-12) var(--ls-sp-20);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-drawer-row:hover    { background: var(--ls-rose-mist); }
.ls-drawer-row.is-unread { border-left-color: var(--ls-rose); }
.ls-drawer-row-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ls-rose-dark);
  flex-shrink: 0;
  padding-top: var(--ls-sp-2);
}
.ls-drawer-row-body { flex: 1; min-width: 0; }
.ls-drawer-row-title {
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  font-size: var(--ls-text-sm);
}
.ls-drawer-row-text {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-2);
  word-wrap: break-word;
}
.ls-drawer-row-time {
  font-family: var(--ls-font-mono);
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-3);
  margin-top: var(--ls-sp-4);
}
.ls-drawer-row-dot {
  width: 8px; height: 8px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose);
  flex-shrink: 0;
  margin-top: var(--ls-sp-8);
}
.ls-drawer-empty {
  padding: var(--ls-sp-40) var(--ls-sp-24);
  text-align: center;
  color: var(--ls-fg-2);
}
.ls-drawer-footer {
  border-top: 1px solid var(--ls-border);
  padding: var(--ls-sp-12) var(--ls-sp-20);
  text-align: right;
}

/* ─── Command palette (⌘K) ──────────────────────────
   Modal portal mounted on body. Centred 600 px wide, max 70vh.
   Pure keyboard UX — input is the only focusable element. */
.ls-palette-overlay {
  position: fixed; inset: 0;
  background: var(--ls-overlay);
  z-index: var(--ls-z-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  animation: ls-palette-fade var(--ls-dur-base) var(--ls-ease-spring);
}
@keyframes ls-palette-fade { from { opacity: 0; } to { opacity: 1; } }
.ls-palette {
  width: 100%;
  max-width: 600px;
  max-height: 70vh;
  background: var(--ls-paper);
  border-radius: var(--ls-r-18);
  box-shadow: var(--ls-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ls-palette-input-wrap {
  display: flex; align-items: center; gap: var(--ls-sp-12);
  padding: var(--ls-sp-14) var(--ls-sp-18);
  border-bottom: 1px solid var(--ls-border);
}
.ls-palette-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ls-fg-2);
  flex-shrink: 0;
}
/* Platform-aware shortcut hint on the right of the palette input. */
.ls-palette-kbd {
  flex-shrink: 0;
  font-family: var(--ls-font-mono);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-3);
  padding: var(--ls-sp-2) var(--ls-sp-8);
  border: 1px solid var(--ls-border);
  border-radius: var(--ls-r-6);
  white-space: nowrap;
}
/* No physical keyboard on touch — the hint is meaningless there. */
@media (pointer: coarse) {
  .ls-palette-kbd { display: none; }
}
.ls-palette-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ls-font-sans);
  font-size: var(--ls-text-xl);
  color: var(--ls-fg-1);
}
.ls-palette-input::placeholder { color: var(--ls-fg-3); }
.ls-palette-results {
  overflow-y: auto;
  flex: 1;
  padding: var(--ls-sp-8) 0;
}
.ls-palette-group-heading {
  padding: var(--ls-sp-10) var(--ls-sp-18) var(--ls-sp-6);
  color: var(--ls-fg-3);
}
.ls-palette-row {
  display: flex;
  align-items: center;
  gap: var(--ls-sp-14);
  padding: var(--ls-sp-10) var(--ls-sp-18);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--ls-dur-snap) var(--ls-ease-spring), border-color var(--ls-dur-snap) var(--ls-ease-spring);
}
.ls-palette-row.is-selected {
  background: var(--ls-rose-mist);
  border-left-color: var(--ls-rose);
}
.ls-palette-row-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ls-rose-dark);
  flex-shrink: 0;
}
.ls-palette-row-body { flex: 1; min-width: 0; }
.ls-palette-row-primary {
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-palette-row-secondary {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  margin-top: var(--ls-sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-palette-row-kind {
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.ls-palette-empty {
  padding: var(--ls-sp-28) var(--ls-sp-18);
  text-align: center;
  color: var(--ls-fg-2);
}
/* "Showing 40 of N" notice when the result cap hides matches. */
.ls-palette-truncation {
  padding: var(--ls-sp-10) var(--ls-sp-16);
  text-align: center;
  font-size: var(--ls-text-xs);
  color: var(--ls-fg-3);
  border-top: 1px solid var(--ls-border);
}
.ls-palette-empty-text {
  font-size: var(--ls-text-md);
  margin-bottom: var(--ls-sp-16);
}
.ls-palette-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ls-sp-8);
}
.ls-palette-chip {
  padding: var(--ls-sp-6) var(--ls-sp-12);
  border-radius: var(--ls-r-pill);
  border: 1px solid var(--ls-border);
  background: var(--ls-paper);
  color: var(--ls-fg-2);
  font-family: inherit;
  font-size: var(--ls-text-sm);
  cursor: pointer;
}
.ls-palette-chip:hover {
  background: var(--ls-rose-mist);
  color: var(--ls-rose-dark);
  border-color: var(--ls-border-rose);
}

/* ─── Domain progress sub-header (assess-domain.js) ──
   Sticky bar that sits below the domain header banner and tracks
   how many questions the staff has answered. Width animates on
   every successful autosave. */
.ls-domain-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--ls-paper);
  border-bottom: 1px solid var(--ls-border);
  margin-bottom: var(--ls-sp-16);
}
.ls-domain-progress-label {
  height: 56px;
  padding: var(--ls-sp-14) var(--ls-sp-20);
  display: flex;
  align-items: center;
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-2);
  letter-spacing: 0.01em;
}
.ls-domain-progress-track {
  height: 4px;
  background: var(--ls-border);
  overflow: hidden;
}
.ls-domain-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--ls-rose-dark), var(--ls-rose));
  transition: width var(--ls-dur-base) var(--ls-ease-spring);
}

/* ─── Autosave status pill ──────────────────────────
   Rendered in the top-right of the assessment domain header.
   The min-width keeps the pill from jumping width as the status
   text cycles through "Sparar…" / "Sparat just nu" / "Sparat
   för 1 min sedan" / "Ej sparat — försök igen". */
.ls-save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-8);
  min-width: 140px;
  text-align: right;
  justify-content: flex-end;
  padding: var(--ls-sp-6) var(--ls-sp-12);
  border-radius: var(--ls-r-pill);
  font-size: var(--ls-text-sm);
  font-weight: var(--ls-weight-semibold);
  font-family: var(--ls-font-sans);
  background: var(--ls-paper);
  color: var(--ls-fg-2);
  border: 1px solid var(--ls-border);
  transition: background var(--ls-dur-fast) var(--ls-ease-spring), color var(--ls-dur-fast) var(--ls-ease-spring), border-color var(--ls-dur-fast) var(--ls-ease-spring), box-shadow var(--ls-dur-fast) var(--ls-ease-spring);
  user-select: none;
}
.ls-save-status:hover { box-shadow: var(--ls-shadow-focus); }
.ls-save-status .ls-save-dot {
  width: 8px; height: 8px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-fg-3);
  flex-shrink: 0;
}
.ls-save-status.is-saving {
  color: var(--ls-rose-dark);
  border-color: var(--ls-border-rose);
  background: var(--ls-rose-mist);
}
.ls-save-status.is-saving .ls-save-dot {
  background: var(--ls-rose);
  animation: ls-save-pulse 1.1s ease-in-out infinite;
}
.ls-save-status.is-saved {
  color: var(--ls-favourable);
  border-color: rgba(74, 125, 85, 0.3);
  background: var(--ls-favourable-tint);
}
.ls-save-status.is-saved .ls-save-dot { background: var(--ls-favourable); }
.ls-save-status.is-error {
  color: var(--ls-critical);
  border-color: rgba(184, 74, 74, 0.35);
  background: var(--ls-critical-tint);
}
.ls-save-status.is-error .ls-save-dot { background: var(--ls-critical); }
.ls-save-status .ls-save-retry {
  margin-left: var(--ls-sp-4);
  padding: var(--ls-sp-2) var(--ls-sp-10);
  border-radius: var(--ls-r-pill);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  background: var(--ls-critical);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.ls-save-status .ls-save-retry:hover { background: var(--ls-critical-dark); }
@keyframes ls-save-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ============================================================
   ErrorView — global error fallback
   Centered card, max-width 480px, rose accent.
   ============================================================ */
.ls-error-shell {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ls-sp-32) var(--ls-sp-20);
}
.ls-error-card {
  max-width: 480px;
  width: 100%;
  padding: var(--ls-sp-40) var(--ls-sp-28);
  text-align: left;
}
.ls-error-card .ls-h2 {
  text-align: center;
}
.ls-error-card .btn-block + .btn-block {
  margin-top: 0;
}
.ls-error-expander:hover {
  color: var(--ls-fg-2) !important;
}

/* ============================================================
   Sidebar avatar trigger + user-menu popover (ticket: user menu)
   ============================================================ */
.sb-user-trigger {
  /* Reset button defaults so the existing .sb-user layout/visuals
     keep working when the wrapper becomes a <button>. */
  appearance: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: var(--ls-sp-8) var(--ls-sp-10);
  border-radius: var(--ls-r-12);
  display: flex;
  align-items: center;
  gap: var(--ls-sp-10);
  transition: background var(--ls-dur-snap) var(--ls-easing-spring, var(--ls-ease-standard));
}
.sb-user-trigger:hover {
  background: var(--ls-rose-mist);
}
.sb-user-trigger[aria-expanded="true"] {
  background: var(--ls-rose-mist);
}
.sb-user-row {
  padding: var(--ls-sp-8) 0;
  gap: var(--ls-sp-8);
}
.sb-user-menu-trigger {
  min-width: 0;
  flex: 1 1 auto;
  padding: var(--ls-sp-8) var(--ls-sp-10);
}
.sb-user-menu-trigger .meta {
  min-width: 0;
}
.sb-user-menu-trigger .nm,
.sb-user-menu-trigger .rl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-user-trigger .sb-user-chev {
  margin-left: auto;
  display: inline-flex;
  color: var(--ls-fg-3);
  transition: transform var(--ls-dur-fast) var(--ls-easing-spring, var(--ls-ease-standard));
}
.sb-user-trigger[aria-expanded="true"] .sb-user-chev {
  transform: rotate(180deg);
}

/* The popover itself — singleton, body-attached, positioned via JS. */
.ls-user-menu {
  position: fixed;
  z-index: var(--ls-z-popover);
  width: 240px;
  padding: var(--ls-sp-6);
  background: var(--ls-paper);
  border: 1px solid var(--ls-border-rose);
  border-radius: var(--ls-r-14);
  box-shadow: var(--ls-shadow-lg);
  display: flex;
  flex-direction: column;
}
.ls-user-menu-item {
  appearance: none;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  color: var(--ls-fg-1);
  padding: var(--ls-sp-10) var(--ls-sp-12);
  border-radius: var(--ls-r-12);
  cursor: pointer;
  width: 100%;
  font-size: var(--ls-text-md);
  font-weight: var(--ls-weight-medium);
  transition: background var(--ls-dur-snap) var(--ls-easing-spring, var(--ls-ease-standard));
}
.ls-user-menu-item:hover,
.ls-user-menu-item:focus-visible {
  background: var(--ls-rose-mist);   /* highlight reinforces the global ring */
}
.ls-user-menu-item.is-danger {
  color: var(--ls-critical);
  font-weight: var(--ls-weight-semibold);
}
.ls-user-menu-divider {
  height: 1px;
  background: var(--ls-divider);
  margin: var(--ls-sp-4) var(--ls-sp-6);
}

/* ============================================================
   Filter chip scroller — horizontal-scroll with right-edge fade
   Used by Klienter (and any future filter strip). Hides the
   scrollbar but keeps drag/swipe scrolling intact. The fade-mask
   signals "more chips to the right" on mobile where the row
   would otherwise clip silently.
   ============================================================ */
.ls-filter-scroller {
  display: flex;
  gap: var(--ls-sp-10);
  overflow-x: auto;
  padding-bottom: var(--ls-sp-2);
  margin-bottom: var(--ls-sp-16);
  -webkit-overflow-scrolling: touch;
  /* Mask the right edge so clipped chips fade out instead of
     hard-cutting — Firefox supports mask-image; webkit needs the
     prefixed variant. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.ls-filter-scroller::-webkit-scrollbar { display: none; }
.ls-filter-scroller { scrollbar-width: none; }

.ls-filter-scroller-item {
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
/* .ls-filter-scroller-item focus = the global :focus-visible ring (no override). */

/* Bump compact touch targets on mobile — WCAG 2.5.5 (44px). Desktop
   stays denser for staff workflows that scan many rows at once. */
@media (max-width: 767px) {
  .btn-sm,
  .btn-icon,
  .modal-close,
  .ls-tab,
  button.chip,
  button.ls-safety-chip,
  .chip[role="button"],
  .ls-filter-scroller-item {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .btn-sm {
    padding-top: var(--ls-sp-10);
    padding-bottom: var(--ls-sp-10);
  }

  .btn-icon,
  .modal-close,
  .ls-tab,
  button.chip,
  button.ls-safety-chip,
  .chip[role="button"],
  .ls-filter-scroller-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .modal-close {
    width: 44px;
    height: 44px;
  }

  .ls-filter-scroller .ls-chip {
    padding: var(--ls-sp-10) var(--ls-sp-14);
    font-size: var(--ls-text-base);
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ============================================================
   Schedule header — desktop has split [+ Nytt möte | + Ny uppgift];
   mobile collapses to a single [+ Skapa] popover trigger because
   three controls (toggle + 2 buttons) overflow on 375px.
   ============================================================ */
.ls-schedule-actions { display: flex; gap: var(--ls-sp-10); align-items: center; flex-wrap: wrap; }
.ls-schedule-actions-desktop { display: contents; }
.ls-schedule-actions-mobile { display: none; }

@media (max-width: 767px) {
  .ls-schedule-actions-desktop { display: none; }
  .ls-schedule-actions-mobile { display: inline-flex; }
}

/* The mobile create popover reuses the user-menu visual vocabulary
   so the app feels coherent (rose hairline + paper + modal shadow). */
.ls-schedule-create-popover {
  position: fixed;
  z-index: var(--ls-z-popover);
  padding: var(--ls-sp-6);
  background: var(--ls-paper);
  border: 1px solid var(--ls-border-rose);
  border-radius: var(--ls-r-14);
  box-shadow: var(--ls-shadow-lg);
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Empty-state card — used on Today's "Inget schemalagt" slot.
   Tighter than a real content card, calm icon + 2 lines of copy
   + a discreet text-link CTA. Goal: not look like an error.
   ============================================================ */
.ls-empty-card {
  padding: var(--ls-sp-24) var(--ls-sp-20) var(--ls-sp-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ls-sp-8);
  text-align: center;
}
.ls-empty-card .ls-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ls-r-circle);
  background: var(--ls-rose-mist);
  color: var(--ls-rose-dark);
  margin-bottom: var(--ls-sp-4);
}
.ls-empty-card .ls-empty-title {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-md);
  color: var(--ls-fg-1);
}
.ls-empty-card .ls-empty-body {
  color: var(--ls-fg-3);
  font-size: var(--ls-text-base);
  line-height: var(--ls-lh-body);
  max-width: 360px;
}
.ls-empty-card .ls-empty-action {
  appearance: none;
  background: transparent;
  border: none;
  margin-top: var(--ls-sp-4);
  padding: var(--ls-sp-6) var(--ls-sp-10);
  border-radius: var(--ls-r-12);
  color: var(--ls-rose-dark);
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-base);
  cursor: pointer;
  font: inherit;
  font-weight: var(--ls-weight-semibold);
  transition: background var(--ls-dur-snap) var(--ls-easing-spring, var(--ls-ease-standard));
}
.ls-empty-card .ls-empty-action:hover,
.ls-empty-card .ls-empty-action:focus-visible {
  background: var(--ls-rose-mist);   /* highlight reinforces the global ring */
}

/* ============================================================
   loadFailedCard — recoverable data-fetch failure card.
   Reuses .ls-empty-icon for the symbol; adds title/body/details.
   ============================================================ */
.ls-load-failed-card {
  padding: var(--ls-sp-28) var(--ls-sp-24) var(--ls-sp-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ls-sp-6);
  max-width: 480px;
  margin: var(--ls-sp-32) auto;
}
.ls-load-failed-title {
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-1);
  margin-top: var(--ls-sp-4);
}
.ls-load-failed-body {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-base);
  line-height: var(--ls-lh-body);
  max-width: 380px;
  margin-bottom: var(--ls-sp-4);
}
.ls-load-failed-detail {
  margin-top: var(--ls-sp-8);
  width: 100%;
  text-align: left;
}
.ls-load-failed-detail summary {
  cursor: pointer;
  color: var(--ls-fg-3);
  font-size: var(--ls-text-sm);
  padding: var(--ls-sp-4) var(--ls-sp-8);
  border-radius: var(--ls-r-12);
  display: inline-block;
}
.ls-load-failed-detail summary:hover { background: var(--ls-rose-mist); }
/* Code styling is canonical (.ls-code-block); only tweak context fit. */
.ls-load-failed-detail .ls-code-block { margin-top: var(--ls-sp-8); max-height: 160px; }

/* ============================================================
   safetyChip — visually distinct from statusChip so safety alerts
   (Trauma / Risk / substance use) don't get confused with workflow
   indicators (Baslinje / Plan / Länkad). Key differentiators:
     • Squared corners (--ls-r-12, not pill)
     • 1.5px border with stronger color saturation
     • Small triangle/octagon icon prefix
     • Severity drives accent: high=critical, medium=amber, low=rose
   This is the safety-flag remediation from the design audit.
   ============================================================ */
.ls-safety-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-6);
  padding: var(--ls-sp-6) var(--ls-sp-10) var(--ls-sp-6) var(--ls-sp-8);
  border-radius: var(--ls-r-12);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  white-space: nowrap;
  border-width: 1.5px;
  border-style: solid;
  line-height: var(--ls-lh-tight);
}
.ls-safety-chip .ls-safety-chip-icon {
  display: inline-flex;
  align-items: center;
}
.ls-safety-chip.is-high {
  color: var(--ls-critical);
  background: var(--ls-critical-tint, rgba(184, 74, 74, 0.10));
  border-color: rgba(184, 74, 74, 0.45);
}
.ls-safety-chip.is-medium {
  color: var(--ls-warn, var(--ls-warning, #B86E00));
  background: var(--ls-warn-tint, rgba(184, 110, 0, 0.10));
  border-color: rgba(184, 110, 0, 0.45);
}
.ls-safety-chip.is-low {
  color: var(--ls-rose-dark);
  background: rgba(201, 105, 156, 0.08);
  border-color: rgba(201, 105, 156, 0.45);
}

/* ============================================================
   Mobile-hide utility — drop decorative elements on small screens
   that have a more compact equivalent elsewhere (e.g. counts in
   filter chip labels duplicating metric tiles).
   ============================================================ */
@media (max-width: 767px) {
  .ls-hide-mobile { display: none !important; }
}

/* ============================================================
   heroActionCard — Klientprofil primary CTA, state-driven.
   Replaces the previous passive infoBanner. Tone drives accent
   color and severity; the body slot holds title + body + 1–2
   action buttons.
   ============================================================ */
.ls-hero-action {
  display: flex;
  gap: var(--ls-sp-16);
  align-items: flex-start;
  padding: var(--ls-sp-20) var(--ls-sp-24);
  border-radius: var(--ls-r-14);
  margin-bottom: var(--ls-sp-18);
  border: 1px solid transparent;
}
.ls-hero-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ls-r-circle);
  flex-shrink: 0;
  background: rgba(255,255,255,0.6);
}
.ls-hero-action-body { flex: 1; min-width: 0; }
.ls-hero-action-title {
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-4);
}
.ls-hero-action-text {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-md);
  line-height: var(--ls-lh-body);
  margin-bottom: var(--ls-sp-12);
}
.ls-hero-action-buttons {
  display: flex;
  gap: var(--ls-sp-8);
  flex-wrap: wrap;
}

/* Tone variants — pulled from existing token vocabulary. */
.ls-hero-action-rose {
  background: var(--ls-rose-mist);
  border-color: var(--ls-border-rose);
}
.ls-hero-action-rose .ls-hero-action-icon { color: var(--ls-rose-dark); }
.ls-hero-action-amber {
  background: var(--ls-warn-tint, rgba(184, 110, 0, 0.10));
  border-color: rgba(184, 110, 0, 0.30);
}
.ls-hero-action-amber .ls-hero-action-icon { color: var(--ls-warn, var(--ls-warning, #B86E00)); }
.ls-hero-action-critical {
  background: var(--ls-critical-tint, rgba(184, 74, 74, 0.10));
  border-color: rgba(184, 74, 74, 0.35);
}
.ls-hero-action-critical .ls-hero-action-icon { color: var(--ls-critical); }
.ls-hero-action-favourable {
  background: var(--ls-favourable-tint, rgba(74, 125, 85, 0.10));
  border-color: rgba(74, 125, 85, 0.30);
}
.ls-hero-action-favourable .ls-hero-action-icon { color: var(--ls-favourable); }
.ls-hero-action-neutral {
  background: var(--ls-surface-2, rgba(0,0,0,0.04));
  border-color: var(--ls-divider);
}
.ls-hero-action-neutral .ls-hero-action-icon { color: var(--ls-fg-2); }

@media (max-width: 639px) {
  .ls-hero-action { padding: var(--ls-sp-16) var(--ls-sp-18); gap: var(--ls-sp-12); }
  .ls-hero-action-icon { width: 36px; height: 36px; }
}

/* ============================================================
   Danger zone — Klientprofil destructive action separator.
   Critical-tint background + red border + caps eyebrow so it's
   visually obvious this isn't a regular section.
   ============================================================ */
.ls-danger-zone {
  margin-top: var(--ls-sp-32);
  padding: var(--ls-sp-18) var(--ls-sp-20);
  border: 1px solid rgba(184, 74, 74, 0.30);
  border-radius: var(--ls-r-14);
  background: var(--ls-critical-tint, rgba(184, 74, 74, 0.06));
}
.ls-danger-zone-label {
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-critical);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ls-sp-6);
}
.ls-danger-zone-title {
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-4);
}
.ls-danger-zone-body {
  color: var(--ls-fg-2);
  font-size: var(--ls-text-base);
  line-height: var(--ls-lh-body);
  margin-bottom: var(--ls-sp-14);
}

/* ============================================================
   Trauma screening (STRESS) — rewritten to match guidebook
   pages 69–74. Event rows use 4-column response; symptom rows
   use 4-step frequency; impairment rows use Yes/No.
   ============================================================ */
.ls-trauma-events,
.ls-trauma-impairment { display: flex; flex-direction: column; gap: var(--ls-sp-12); }

.ls-trauma-event-row,
.ls-trauma-symptom-row {
  padding: var(--ls-sp-14) var(--ls-sp-18);
}
.ls-trauma-event-text {
  font-weight: var(--ls-weight-medium);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-12);
  line-height: var(--ls-lh-body);
}
/* .ls-trauma-event-options / -option migrated to .ls-option-group
   (Components.optionGroup, variant=grid). */
.ls-trauma-event-age {
  margin-top: var(--ls-sp-10);
  padding-top: var(--ls-sp-10);
  border-top: 1px solid var(--ls-divider);
  display: flex;
  align-items: center;
}

/* .ls-trauma-symptom-options / -option migrated to .ls-option-group
   (Components.optionGroup, variant=grid). Mobile 2-column collapse
   and the 2-button impairment layout now live in .ls-option-group--grid. */

/* ============================================================
   Återkopplingsmall — compact one-page summary used at the
   återkopplingssamtal (guidebook page 89). Two columns:
   "Områden att minska" (pathogenic) | "Områden att öka"
   (salutogenic). Color bands match the guidebook headers.
   ============================================================ */
.ls-ak-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ls-sp-18);
}
.ls-ak-col {
  display: flex;
  flex-direction: column;
  gap: var(--ls-sp-12);
  min-width: 0;
}
.ls-ak-col-header {
  font-size: var(--ls-text-lg);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  margin: 0 0 var(--ls-sp-4) 0;
  letter-spacing: 0.02em;
}

.ls-ak-block {
  border-radius: var(--ls-r-14);
  overflow: hidden;
  border: 1px solid var(--ls-divider);
  background: var(--ls-paper);
}
.ls-ak-block-header {
  padding: var(--ls-sp-10) var(--ls-sp-14);
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-sm);
  letter-spacing: 0.04em;
  color: #fff;
}
.ls-ak-block-pathogenic .ls-ak-block-header { background: var(--ls-d-pathogenic); }
.ls-ak-block-cyan      .ls-ak-block-header { background: var(--ls-d-health); }
.ls-ak-block-purple    .ls-ak-block-header { background: var(--ls-d-social); }
.ls-ak-block-green     .ls-ak-block-header { background: var(--ls-d-relations); }

.ls-ak-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  padding: var(--ls-sp-8) var(--ls-sp-14);
  border-top: 1px solid var(--ls-divider);
  font-size: var(--ls-text-base);
}
.ls-ak-label {
  color: var(--ls-fg-2);
  font-weight: var(--ls-weight-medium);
}
.ls-ak-cell {
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-1);
  text-align: left;
  padding: var(--ls-sp-6) var(--ls-sp-10);
  border-radius: var(--ls-r-12);
  background: var(--ls-rose-mist);
  min-width: 36px;
  min-height: 28px;
  display: inline-block;
  line-height: var(--ls-lh-tight);
}

/* 2x2 matrix used by salutogenic blocks for Klient/Bedömning rows. */
.ls-ak-matrix {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  align-items: center;
  gap: var(--ls-sp-4) var(--ls-sp-8);
  padding: var(--ls-sp-12) var(--ls-sp-14);
  border-top: 1px solid var(--ls-divider);
  font-size: var(--ls-text-base);
}
.ls-ak-matrix-corner { /* empty top-left cell */ }
.ls-ak-matrix-h {
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-fg-2);
  font-size: var(--ls-text-xs);
  text-align: center;
}
.ls-ak-matrix-l {
  color: var(--ls-fg-2);
  font-weight: var(--ls-weight-medium);
}

@media (max-width: 1023px) {
  .ls-ak-grid { grid-template-columns: 1fr; }
}

@media print {
  body { background: white !important; }
  .sidebar, .mobile-tabbar, .ls-bell, .sb-user-trigger,
  .modal-overlay, .ls-user-menu, .page-head .btn { display: none !important; }
  .page-content { max-width: 100% !important; padding: 0 !important; }
  .ls-ak-block { break-inside: avoid; }
  .ls-ak-grid { gap: var(--ls-sp-12); }
}

/* Specialist-consultation flag inside an Återkoppling pathogenic block */
.ls-ak-specialist-flag {
  padding: var(--ls-sp-10) var(--ls-sp-14);
  border-top: 1px solid var(--ls-divider);
  background: var(--ls-critical-tint, rgba(184, 74, 74, 0.06));
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   Inkongruens banner — guidebook page 59 playbook surfaced when
   client vs assessor ratings diverge by ≥ 2 points.
   ============================================================ */
.ls-inkongruens-banner {
  padding: var(--ls-sp-18) var(--ls-sp-20);
  margin: 0 0 var(--ls-sp-18) 0;
  background: var(--ls-warn-tint, rgba(184, 110, 0, 0.08));
  border: 1px solid rgba(184, 110, 0, 0.35);
}
.ls-inkongruens-head {
  display: flex;
  gap: var(--ls-sp-12);
  margin-bottom: var(--ls-sp-12);
}
.ls-inkongruens-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: var(--ls-r-circle);
  background: rgba(184, 110, 0, 0.15);
  color: var(--ls-warn, #B86E00);
  align-items: center;
  justify-content: center;
}
.ls-inkongruens-title {
  font-weight: var(--ls-weight-bold);
  color: var(--ls-fg-1);
  font-size: var(--ls-text-lg);
}
.ls-inkongruens-steps {
  margin: var(--ls-sp-8) 0 var(--ls-sp-14) 0;
  padding-left: var(--ls-sp-24);
  color: var(--ls-fg-1);
  font-size: var(--ls-text-base);
  line-height: var(--ls-lh-body);
}
.ls-inkongruens-steps li { margin-bottom: var(--ls-sp-4); }
.ls-inkongruens-areas { margin-top: var(--ls-sp-10); padding-top: var(--ls-sp-10); border-top: 1px solid rgba(184, 110, 0, 0.25); }

/* ============================================================
   Instrument provenance chip — sub-line attribution under the
   domain banner so staff trust the question source (ASI for the
   four pathogenic domains, STRESS for trauma).
   ============================================================ */
.ls-instrument-provenance {
  display: inline-flex;
  align-items: center;
  gap: var(--ls-sp-6);
  padding: var(--ls-sp-4) var(--ls-sp-10);
  margin: -var(--ls-sp-8) 0 var(--ls-sp-14) 0;
  border-radius: var(--ls-r-pill, var(--ls-r-pill));
  background: var(--ls-rose-mist);
  color: var(--ls-rose-dark);
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-semibold);
  letter-spacing: 0.01em;
  cursor: help;
}
.ls-instrument-provenance .ls-icon-sm { width: 13px; height: 13px; }

/* ============================================================
   Behandlingsnivå picker — 2nd step of plan creation modal.
   Each tier (LIVBOJEN / LIVBOJEN 2 / LIVLINAN) gets a clickable
   card with title, subtitle, and tagline. "Välj senare" is the
   skip option, rendered slightly de-emphasized.
   ============================================================ */
.ls-level-card {
  margin-bottom: var(--ls-sp-10);
  padding: var(--ls-sp-16) var(--ls-sp-18);
  cursor: pointer;
  border: 1px solid var(--ls-border);
  transition: background var(--ls-dur-snap) var(--ls-easing-spring, var(--ls-ease-standard)), border-color var(--ls-dur-snap);
}
.ls-level-card:hover { background: var(--ls-rose-mist); border-color: var(--ls-border-rose); }
.ls-level-card-row { display: flex; align-items: center; gap: var(--ls-sp-14); }
.ls-level-card-body { flex: 1; min-width: 0; }
.ls-level-card-title {
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-lg);
  color: var(--ls-fg-1);
  margin-bottom: var(--ls-sp-4);
}
.ls-level-card-subtitle {
  font-size: var(--ls-text-base);
  color: var(--ls-rose-dark);
  font-weight: var(--ls-weight-semibold);
  margin-bottom: var(--ls-sp-6);
}
.ls-level-card-tagline {
  font-size: var(--ls-text-sm);
  color: var(--ls-fg-2);
  line-height: var(--ls-lh-body);
}
.ls-level-card-chev {
  font-size: var(--ls-text-2xl);
  color: var(--ls-fg-3);
  flex-shrink: 0;
}
.ls-level-card-skip {
  background: var(--ls-surface-2, rgba(0,0,0,0.03));
  border-style: dashed;
}
.ls-level-card-skip .ls-level-card-title { color: var(--ls-fg-2); }
.ls-level-card-skip .ls-level-card-subtitle { color: var(--ls-fg-3); }

/* Per-area free-text suggestion under each Återkoppling block. */
.ls-ak-comment {
  padding: var(--ls-sp-10) var(--ls-sp-14) var(--ls-sp-12);
  border-top: 1px solid var(--ls-divider);
  background: var(--ls-paper);
}
.ls-ak-comment-label {
  font-size: var(--ls-text-xs);
  font-weight: var(--ls-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ls-fg-3);
  margin-bottom: var(--ls-sp-4);
}
.ls-ak-comment-text {
  font-size: var(--ls-text-base);
  color: var(--ls-fg-2);
  font-style: italic;
  line-height: var(--ls-lh-body);
  white-space: pre-wrap;
}