/* ════════════════════════════════════════════════════════
   SCHEDE ESERCIZI — UI ridisegnata
   Stile: clinico-premium, hairline, tipografia tabulare
   ════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* layout */
  --sidebar-w: 248px;
  --inspector-w: 380px;
  --topbar-h: 44px;
  --subbar-h: 38px;

  /* radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* easing */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* semantic stacking scale: popover → overlay → drawer → modal → onboarding → toast → tour → tooltip.
     Toast sits ABOVE the modal stack: a form/request error toast fired while a
     modal is open (e.g. delete-user, invite) must stay visible on top of that
     modal's own backdrop, never rendered invisibly behind it. The tour sits
     above everything else so it can guide over open modals; the tooltip tops
     the whole scale. Numbers preserved from the prior ad-hoc values. */
  --z-popover: 50;
  --z-popover-high: 80;
  --z-overlay: 200;
  --z-drawer: 220;
  --z-modal-backdrop: 240;
  --z-modal-high: 280;
  --z-onboarding: 300;
  --z-toast: 310;
  --z-tour: 9990;
  --z-tour-highlight: 9991;
  --z-tour-card: 9992;
  --z-tooltip: 9999;
  --z-select-menu: 320; /* portaled dropdown list: above .modal-backdrop(240)/modal-high(280), below tooltips */
}

/* LIGHT theme tokens */
[data-theme="light"] {
  color-scheme: light;
  --bg:        oklch(99% .002 80);
  --bg-2:      oklch(97.8% .003 80);
  --bg-3:      oklch(96% .004 80);
  --bg-hov:    oklch(94% .005 80);
  --bg-press:  oklch(91% .006 80);

  --line:      oklch(91.5% .004 80);
  --line-2:    oklch(87% .005 80);
  --line-soft: oklch(94% .003 80);

  --fg:        oklch(20% .01 270);
  --fg-2:      oklch(35% .01 270);
  /* Muted band: secondary text (10-12px labels, hints, breadcrumbs, table
     headers, placeholders) on a 99% L bg. At 40% L this reaches ~4.65:1 so even
     the smallest text clears WCAG 1.4.3 AA (4.5:1). The prior values fell short
     — 47-48% ≈ 3.5:1, 43% ≈ 4.16:1 — so secondary text was sub-AA. */
  --muted:     oklch(40% .012 270);
  --faint:     oklch(40% .012 270);
  --whisper:   oklch(40% .01 270);
  --placeholder: oklch(40% .012 270); /* form placeholders — ≥4.5:1 on --bg (AA) */

  --accent:       var(--ac);
  --accent-fg:    #fff;
  --accent-soft:  color-mix(in oklab, var(--ac) 12%, var(--bg));
  --accent-soft-2:color-mix(in oklab, var(--ac) 18%, var(--bg));
  --focus:        color-mix(in oklab, var(--ac) 22%, transparent);

  --ok:        oklch(52% .14 160);
  --warn:      oklch(54% .15  60);
  --danger:    oklch(56% .19  20);

  --shadow-sm: 0 1px 2px rgba(15,20,30,.04), 0 1px 1px rgba(15,20,30,.02);
  --shadow-md: 0 8px 24px rgba(15,20,30,.06), 0 2px 6px rgba(15,20,30,.04);
  --shadow-lg: 0 24px 60px rgba(15,20,30,.10), 0 8px 20px rgba(15,20,30,.06);

  --sheet-bg: #fff;
  --sheet-line: oklch(92% .003 80);
  --sheet-line-2: oklch(85% .005 80);
  --sheet-fg: oklch(18% .008 270);
  --sheet-muted: oklch(48% .01 270);
  --ph-bg: oklch(96% .004 80);
  --ph-stripe: oklch(91% .005 80);
}

/* DARK theme tokens */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:        oklch(15.5% .006 270);
  --bg-2:      oklch(17.5% .008 270);
  --bg-3:      oklch(20% .01 270);
  --bg-hov:    oklch(22.5% .012 270);
  --bg-press:  oklch(25% .014 270);

  --line:      oklch(28% .013 270);
  --line-2:    oklch(34% .014 270);
  --line-soft: oklch(23% .01 270);

  --fg:        oklch(97% .005 270);
  --fg-2:      oklch(90% .008 270);
  /* Same AA rationale as light: faint/whisper carry small hint text; 60% L on
     a 15.5% L bg is borderline, 65% clears 4.5:1 with margin. */
  --muted:     oklch(72% .012 270);
  --faint:     oklch(65% .013 270);
  --whisper:   oklch(65% .012 270);
  --placeholder: oklch(62% .013 270); /* form placeholders only — ≥4.5:1 on dark --bg (AA) */

  --accent:       var(--ac);
  --accent-fg:    oklch(15% .005 270);
  --accent-soft:  color-mix(in oklab, var(--ac) 22%, var(--bg));
  --accent-soft-2:color-mix(in oklab, var(--ac) 32%, var(--bg));
  --focus:        color-mix(in oklab, var(--ac) 32%, transparent);

  --ok:        oklch(68% .15 160);
  --warn:      oklch(74% .16  70);
  --danger:    oklch(66% .19  20);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 12px 28px rgba(0,0,0,.40), 0 3px 8px rgba(0,0,0,.30);
  --shadow-lg: 0 28px 64px rgba(0,0,0,.55), 0 10px 24px rgba(0,0,0,.40);

  --sheet-bg: oklch(98.5% .003 80);
  --sheet-line: oklch(92% .003 80);
  --sheet-line-2: oklch(85% .005 80);
  --sheet-fg: oklch(18% .008 270);
  --sheet-muted: oklch(48% .01 270);
  --ph-bg: oklch(95% .004 80);
  --ph-stripe: oklch(90% .005 80);
}

/* Accent palette — bound by data-accent on body */
[data-accent="indigo"]   { --ac: oklch(57% .18 270); }
[data-accent="cobalt"]   { --ac: oklch(54% .19 250); }
[data-accent="emerald"]  { --ac: oklch(54% .14 160); }
[data-accent="teal"]     { --ac: oklch(54% .12 195); }
[data-accent="amber"]    { --ac: oklch(63% .16  60); --accent-fg: oklch(20% .01 270); }
[data-accent="coral"]    { --ac: oklch(58% .18  30); }
[data-accent="crimson"]  { --ac: oklch(53% .19  20); }
[data-accent="violet"]   { --ac: oklch(54% .19 300); }
[data-accent="rose"]     { --ac: oklch(58% .18 350); }
[data-accent="lime"]     { --ac: oklch(68% .16 130); --accent-fg: oklch(20% .01 270); }
[data-accent="slate"]    { --ac: oklch(45% .02 270); }
[data-accent="graphite"] { --ac: oklch(30% .005 270); }

[data-theme="dark"][data-accent="indigo"]   { --ac: oklch(70% .17 270); }
[data-theme="dark"][data-accent="cobalt"]   { --ac: oklch(70% .17 250); }
[data-theme="dark"][data-accent="emerald"]  { --ac: oklch(72% .14 160); }
[data-theme="dark"][data-accent="teal"]     { --ac: oklch(72% .12 195); }
[data-theme="dark"][data-accent="amber"]    { --ac: oklch(78% .16  75); }
[data-theme="dark"][data-accent="coral"]    { --ac: oklch(74% .17  35); }
[data-theme="dark"][data-accent="crimson"]  { --ac: oklch(70% .19  20); }
[data-theme="dark"][data-accent="violet"]   { --ac: oklch(72% .18 300); }
[data-theme="dark"][data-accent="rose"]     { --ac: oklch(74% .17 350); }
[data-theme="dark"][data-accent="lime"]     { --ac: oklch(82% .16 130); }
[data-theme="dark"][data-accent="slate"]    { --ac: oklch(72% .015 270); }
[data-theme="dark"][data-accent="graphite"] { --ac: oklch(82% .005 270); }

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  letter-spacing: -0.005em;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
input, textarea { font-family: inherit; }
kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--muted);
  background: var(--bg-2);
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::selection { background: var(--accent-soft-2); color: var(--fg); }

/* ── REDUCED MOTION ───────────────────────────────────
   Honor the OS "reduce motion" setting: collapse every animation/transition to
   effectively instant. Carve out nothing — the whole UI should be motion-free here. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── KEYBOARD FOCUS ───────────────────────────────────
   Branded focus ring for keyboard users. :focus-visible only renders for keyboard
   navigation (not mouse click), and :where() keeps specificity 0 so per-component
   :focus styles (e.g. the box-shadow ring on .ins-field inputs) still win. Inputs,
   selects and textareas already get their own ring, so they're excluded. */
:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── APP SHELL ────────────────────────────────────── */
/* Hidden until app.js's boot IIFE confirms auth (api.me() succeeds) and adds
   .auth-ready to body — otherwise the static shell (sidebar, empty nav, zero
   counts) paints for the ~300-900ms the auth check + one retry take, then
   flashes away into /login on a failed check. No real data is ever at risk
   (initialRender() only runs after the same check), but the empty-shell flash
   itself reads as broken. renderLapsedShell()'s overlay is a body-level
   sibling of .app, unaffected by this. */
body:not(.auth-ready) .app {
  visibility: hidden;
}
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
  grid-template-rows: 100dvh;
  width: 100vw;
  background: var(--bg);
  /* Column tracks snap instantly; the panels slide via transform/opacity
     (see .sidebar / .inspector transitions). Animating grid-template-columns
     is a layout-property animation — it thrashes the whole grid on every
     toggle, so it's intentionally not transitioned here. */
}
[data-right-open="false"] .app {
  grid-template-columns: var(--sidebar-w) 1fr 0px;
}
[data-right-open="false"] .inspector {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* ── SIDEBAR SX ───────────────────────────────────── */
.sidebar {
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px 11px 14px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.brand-mark {
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, #000) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 18%, transparent);
}
.brand-mark-fig {
  width: 16px; height: 16px;
  background: #fff;
  -webkit-mask: url('mark.svg') center / contain no-repeat;
          mask: url('mark.svg') center / contain no-repeat;
}
.brand-meta { flex: 1; min-width: 0; line-height: 1.1; }
.brand-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-sub {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
  letter-spacing: -0.005em;
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 10px 4px;
  padding: 0 9px;
  height: 28px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: border-color .15s, background .15s;
}
.sidebar-search:focus-within {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--focus);
}
.sidebar-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font-size: 12.5px;
  color: var(--fg);
}
.sidebar-search input::placeholder { color: var(--placeholder); }
.sidebar-search kbd { margin-left: auto; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px 12px;
}

.nav-group { padding: 4px 4px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--fg-2);
  cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
}
.nav-item svg { color: var(--muted); flex-shrink: 0; }
.nav-item:hover { background: var(--bg-hov); color: var(--fg); }
.nav-item:hover svg { color: var(--fg-2); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.nav-item.active svg { color: var(--accent); }
.nav-item span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: 0;
  font-weight: 500;
}

.nav-section {
  margin-top: 14px;
  padding: 0 4px;
}
.nav-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.patient-list, .recent-list { display: flex; flex-direction: column; gap: 1px; }

.patient-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--fg-2);
  transition: background .12s;
  position: relative;
}
.patient-item:hover { background: var(--bg-hov); color: var(--fg); }
.patient-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.patient-item.active .patient-name { color: var(--accent); }
.avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-press);
  color: var(--fg-2);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-2);
}
.avatar-sm { width: 24px; height: 24px; font-size: 10.5px; }
.patient-meta { flex: 1; min-width: 0; line-height: 1.2; }
.patient-name {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patient-sub {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.patient-state {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--faint);
}
.patient-state.dot-ok::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 5px;
  vertical-align: middle;
}
.patient-state.dot-warn::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warn);
  margin-right: 5px;
  vertical-align: middle;
}

.recent-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--fg-2);
  transition: background .12s;
}
.recent-item:hover { background: var(--bg-hov); color: var(--fg); }
.recent-bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--whisper);
  margin-top: 6px;
  flex-shrink: 0;
}
.recent-meta { flex: 1; min-width: 0; line-height: 1.25; }
.recent-title {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-sub {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-foot {
  padding: 8px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s;
}
.user-chip:hover { background: var(--bg-hov); }
.user-meta { flex: 1; min-width: 0; line-height: 1.2; }
.user-name {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-sub {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── STAGE & TOPBAR ───────────────────────────────── */
.stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  flex-shrink: 0;
  gap: 12px;
}
.topbar-left, .topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tb-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 4px;
  flex-shrink: 0;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.crumb {
  font-size: 12.5px;
  color: var(--muted);
  padding: 3px 6px;
  border-radius: var(--r-xs);
  cursor: pointer;
  white-space: nowrap;
}
.crumb:hover { background: var(--bg-hov); color: var(--fg); }
.crumb.current {
  color: var(--fg);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crumb-sep {
  color: var(--whisper);
  font-size: 12px;
  font-weight: 300;
}

/* Buttons */
.icon-btn {
  width: 26px; height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background .12s, color .12s;
  flex-shrink: 0;
  position: relative;
}
.icon-btn:hover { background: var(--bg-hov); color: var(--fg); }
.icon-btn.xs { width: 24px; height: 24px; border-radius: var(--r-xs); }
.icon-btn.ghost { background: transparent; }
/* Enlarge the hit area of isolated icon buttons to ~40-44px without changing
   their visual size: a transparent ::after extends the clickable box around
   the button. Scoped to roomy contexts only (new-patient, command palette,
   profile menu) — dense rows like the topbar/zoom/table controls are excluded
   so neighboring targets don't overlap. .icon-btn is position:relative. */
.sidebar-brand .icon-btn::after,
.sidebar-foot .icon-btn::after,
.nav-section-head .icon-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}

/* theme toggle behavior */
[data-theme="light"] .ico-moon { display: none; }
[data-theme="dark"] .ico-sun { display: none; }

/* accent picker */
.accent-pop { position: relative; }
.accent-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 25%, transparent),
              0 0 0 1px var(--line);
}
.accent-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 200px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 10px;
  box-shadow: var(--shadow-md);
  z-index: var(--z-popover);
  display: none;
}
.accent-menu.open { display: block; }
.accent-menu-head {
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 8px;
}
.accent-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.swatch {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 18%, transparent);
  transition: transform .14s, box-shadow .14s;
}
.swatch:hover { transform: scale(1.08); }
.swatch.active::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid var(--fg);
  border-radius: 50%;
}

.btn-secondary, .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .12s, border-color .12s, color .12s, transform .08s;
  white-space: nowrap;
}
.btn-secondary:active, .btn-primary:active { transform: translateY(0.5px); }

.btn-secondary {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line-2);
}
.btn-secondary:hover { background: var(--bg-hov); border-color: var(--muted); }
.btn-secondary kbd { margin-left: 4px; }

.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid color-mix(in oklab, var(--accent) 70%, #000);
  box-shadow: var(--shadow-sm), inset 0 1px 0 color-mix(in oklab, #fff 15%, transparent);
}
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 90%, #000); }
[data-theme="dark"] .btn-primary { color: oklch(15% .005 270); }

.btn-primary.block, .btn-secondary.block {
  width: 100%;
  justify-content: center;
  height: 32px;
  font-size: 13px;
}

.link-btn {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  transition: background .12s;
}
.link-btn:hover { background: var(--accent-soft); }

/* status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--muted);
  border: 1px solid var(--line);
  margin-left: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}
.pill-saved .dot { background: var(--ok); }

/* ── SUB-TOOLBAR FOGLIO ──────────────────────────── */
.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.sheet-toolbar {
  height: var(--subbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  gap: 12px;
}
.st-left, .st-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-divider { width: 1px; height: 16px; background: var(--line); margin: 0 2px; }
.zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1px;
}
.zoom-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0;
  padding: 0 6px;
  min-width: 42px;
  text-align: center;
}
.meta-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  color: var(--fg-2);
  letter-spacing: 0.04em;
}
.meta-dot { color: var(--whisper); }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  color: var(--fg-2);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: background .12s, border-color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip-btn:hover { background: var(--bg-hov); border-color: var(--line-2); color: var(--fg); }

/* ── CANVAS + SHEET ─────────────────────────────── */
.canvas {
  flex: 1;
  overflow: auto;
  padding: 24px 24px 60px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklab, var(--accent) 4%, transparent), transparent 70%),
    var(--bg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#sheet-scaler {
  flex-shrink: 0;
  position: relative;
}

.sheet {
  width: 210mm;
  min-height: 297mm;
  background: var(--sheet-bg);
  color: var(--sheet-fg);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  padding: 22mm 20mm 18mm;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── SHEET: HEADER ──────────────────────────────── */
.sh-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sheet-line);
  margin-bottom: 12px;
}
.sh-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.sh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sh-brand-mark {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 70%, #000) 100%);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sh-brand-fig {
  width: 22px; height: 22px;
  background: #fff;
  -webkit-mask: url('mark.svg') center / contain no-repeat;
          mask: url('mark.svg') center / contain no-repeat;
}
.sh-brand-meta { line-height: 1.2; }
.sh-brand-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sheet-fg);
}
.sh-brand-sub {
  font-size: 9.5px;
  color: var(--sheet-muted);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sh-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 26px;
  text-align: right;
}
.sh-meta-k {
  font-size: 8.5px;
  font-weight: 500;
  color: var(--sheet-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sh-meta-v {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--sheet-fg);
  margin-top: 3px;
  letter-spacing: 0;
}

.sh-patient {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  padding: 4px 0 0;
}
.sh-patient-l { padding-right: 24px; border-right: 1px solid var(--sheet-line); }
.sh-patient-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--sheet-fg);
  line-height: 1.1;
}
.sh-patient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sh-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--sheet-muted);
  background: var(--ph-bg);
  border: 1px solid var(--sheet-line);
  letter-spacing: 0.01em;
}
.sh-patient-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--sheet-fg);
  line-height: 1.15;
}
.sh-patient-sub {
  font-size: 11px;
  color: var(--sheet-muted);
  margin-top: 6px;
  letter-spacing: -0.002em;
}

/* ── SHEET: SECTION + ESERCIZI ─────────────────── */
.sh-section { margin-bottom: 12px; }
.sh-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sh-section-kicker {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--sheet-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  /* Rendered as <h2> for heading semantics; reset the UA defaults so the
     visual stays identical to the old <span> kicker. */
  margin: 0;
  line-height: 1;
}
.sh-section-meta {
  font-size: 10px;
  color: var(--sheet-muted);
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.ex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ── DAYS (optional grouping) ─────────────────────── */
.ex-day {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 2px solid color-mix(in oklab, var(--accent) 55%, var(--sheet-line));
  page-break-after: avoid;
}
.ex-day:first-child { margin-top: 0; }
.ex-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-day-title {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--sheet-fg); outline: none; min-width: 40px;
}
.ex-day-title:focus { outline: 1px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; border-radius: 3px; }
.ex-day-actions { display: flex; gap: 4px; align-items: center; }
.ex-day-actions .day-ico {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--sheet-line-2); border-radius: 4px;
  background: var(--sheet-bg); color: var(--sheet-muted); cursor: pointer; font-size: 12px;
  opacity: 0; transition: opacity .12s;
}
.ex-day:hover .ex-day-actions .day-ico,
.ex-day-actions .day-ico:focus-visible { opacity: 1; }
.ex-day-actions .day-ico:hover { color: var(--accent); border-color: var(--accent); }
.ex-day-actions .day-ico.danger:hover { color: var(--danger); border-color: var(--danger); }
.ex-day-actions .day-add-ex {
  width: auto; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--sheet-line-2)); border-radius: 4px;
  background: color-mix(in oklab, var(--accent) 8%, transparent); color: var(--accent);
  cursor: pointer; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ex-day-actions .day-add-ex:hover { background: color-mix(in oklab, var(--accent) 16%, transparent); border-color: var(--accent); }
.ex-day-note {
  margin-top: 5px; font-size: 11px; color: var(--sheet-fg); line-height: 1.55;
  outline: none; border-radius: 4px;
}
.ex-day-note:empty::before { content: attr(data-placeholder); color: var(--sheet-muted); opacity: 0.5; font-style: italic; }
.ex-day-note:focus { outline: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); outline-offset: 3px; }

/* days manager (inspector) */
.days-list { display: flex; flex-direction: column; gap: 4px; }
.day-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2); font-size: 12.5px; color: var(--fg);
}
.day-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-row { cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.day-row:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.day-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.day-row.is-selected {
  border-color: color-mix(in oklab, var(--accent) 60%, var(--line));
  background: color-mix(in oklab, var(--accent) 9%, var(--bg-2));
}
.day-row.is-selected .day-row-name { color: var(--accent); }
.day-row .icon-btn.xs { cursor: pointer; }
/* Day table rendered inside a day block on the sheet (read-only there). */
.ex-day-table-wrap { margin-top: 8px; }
.ex-day-table-wrap .sh-table-title { margin-bottom: 3px; }
.ex {
  display: grid;
  grid-template-columns: auto 1fr 196px;
  grid-template-areas:
    "num   body  photos"
    "extbl extbl extbl";
  gap: 6px 12px;
  padding: 14px 6px;
  border-top: 1px solid var(--sheet-line);
  align-items: baseline;
  page-break-inside: avoid;
}
.ex-num    { grid-area: num; }
.ex-body   { grid-area: body; align-self: baseline; }
.ex-photos { grid-area: photos; align-self: start; }
/* In the editor the exercise action overlay (move up/down/delete) sits at the
   top-right of .ex — same corner as the photos. Drop the photos below it so
   the two button groups never overlap. The overlay only exists in editor DOM,
   so this margin never applies to the PDF/print render. */
.ex:has(.ex-actions-overlay) .ex-photos { margin-top: 34px; }
.ex .ex-table-wrap { grid-area: extbl; align-self: start; }
.ex:first-child { border-top: 1px solid var(--sheet-line-2); }
.ex:last-child { border-bottom: 1px solid var(--sheet-line-2); }

.ex-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--sheet-muted);
  line-height: 1;
  letter-spacing: -0.02em;
  padding-top: 3px;
}
.ex-body { min-width: 0; }
.ex-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 7px;
}
.ex-title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--sheet-fg);
  margin: 0;
  line-height: 1.25;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* metrics rail — pairs of (label, value). Flex (not grid) so empty metrics,
   marked .is-empty and display:none'd, collapse without leaving column gaps.
   Wraps to a second line if many metrics are present. */
.ex-reps {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  align-items: baseline;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0;
  flex-shrink: 0;
  max-width: 210px;
}
.rep-k {
  font-size: 8.5px;
  color: var(--sheet-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding-left: 6px;
}
.rep-k:first-child { padding-left: 0; }
.rep-v {
  color: var(--sheet-fg);
  font-weight: 500;
  padding-right: 2px;
}
/* a metric with no value: never shown on the sheet/PDF (still in DOM for edit) */
.rep-k.is-empty, .rep-v.is-empty { display: none; }
.ex-desc {
  font-size: 11px;
  color: var(--sheet-muted);
  margin: 0;
  line-height: 1.55;
  max-width: 56ch;
  min-width: 0;
  /* Long unbroken tokens (URLs, chemical names, typos) must break instead of
     overflowing the sheet width and sliding under the photo column / off-page. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap; /* preserve intentional line breaks the user types */
}

.ex-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  margin-top: 4px;
  align-self: start;
  min-width: 0;
}
.ex-photo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Single photo spans the full photos column (both grid tracks) so it reads at
   a usable size; a second photo drops the first back into the 2-up grid. */
.ex-photos:has(.ex-photo:only-child) .ex-photo { grid-column: 1 / -1; }
.ph-frame {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 3px;
  background:
    repeating-linear-gradient(135deg,
      var(--ph-stripe) 0 1px,
      var(--ph-bg) 1px 7px);
  border: 1px solid var(--sheet-line);
  overflow: hidden;
  position: relative;
}
.ph-frame.xs { aspect-ratio: 1; border-radius: 4px; }
/* orientation lives on the sheet copy only */
.ph-frame[data-orient="landscape"] { aspect-ratio: 4/3; }
.ph-frame[data-orient="portrait"]  { aspect-ratio: 3/4; }
.ph-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
/* per-photo tools (rotate / orientation) — screen only, on hover.
   Bottom-right of the frame so they don't collide with the exercise-level
   .ex-actions-overlay (up/down/del), which sits at the top-right of .ex. */
.ph-tools {
  position: absolute; bottom: 4px; right: 4px;
  display: none; gap: 3px; z-index: 4;
}
.ex-photo:hover .ph-tools { display: flex; }
.ph-tools button {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--bg); color: var(--fg-2);
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  font-size: 12px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s, color .12s, border-color .12s;
}
.ph-tools button:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ph-cap {
  font-size: 9px;
  color: var(--sheet-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

/* ── SHEET: NOTE + FOOTER ──────────────────────── */
.sh-notes {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sheet-line-2);
}
.sh-notes p {
  font-size: 11px;
  color: var(--sheet-fg);
  line-height: 1.6;
  margin: 0;
  max-width: 68ch;
}
/* rich note content on the sheet (shared .rich styles handle blocks/lists) */
.sh-notes-body .rich, .sh-general-body .rich {
  font-size: 11px;
  color: var(--sheet-fg);
  line-height: 1.6;
  max-width: 68ch;
}
.sh-notes-body .rich:empty { display: none; }

.sh-foot {
  margin-top: auto;
  padding-top: 22px;
}
.sh-sign {
  max-width: 320px;
  margin-bottom: 20px;
}
.sh-sign-line {
  height: 1px;
  background: var(--sheet-fg);
  width: 220px;
  margin-bottom: 5px;
  margin-top: 36px;
}
.sh-sign-k {
  font-size: 8.5px;
  color: var(--sheet-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.sh-sign-v {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--sheet-fg);
  margin-top: 4px;
  letter-spacing: 0;
}
.sh-foot-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--sheet-line);
  font-size: 9.5px;
  color: var(--sheet-muted);
  letter-spacing: 0.01em;
}
.sh-foot-meta > div:first-child {
  flex: 1; min-width: 0;
  line-height: 1.5;
}
.sh-foot-page {
  font-family: var(--font-mono);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ── INSPECTOR (RIGHT PANEL) ───────────────────── */
.inspector {
  background: var(--bg-2);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-width: 0;
  overflow: hidden;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.ins-head {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.ins-tabs {
  display: flex;
  gap: 1px;
  background: var(--bg-3);
  border-radius: var(--r-sm);
  padding: 2px;
  border: 1px solid var(--line);
}
.ins-tab {
  height: 22px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  transition: background .12s, color .12s;
}
.ins-tab:hover { color: var(--fg); }
.ins-tab.active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.ins-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 12px;
  display: flex;
  flex-direction: column;
}
.ins-body.hidden { display: none; }

/* Exercise pane: the action bar (.ins-foot) is a NON-scrolling flex sibling of
   the scroll region (.ins-scroll), so it stays pinned at the bottom with an
   opaque background. Content scrolling in .ins-scroll can never pass behind the
   buttons. (Previously .ins-foot was position:sticky inside the scroll container
   with margin-top:auto — a flex+sticky combo that doesn't keep the bar reliably
   pinned, letting sheet content bleed through under it.) Other panes keep the
   default .ins-body scroll (they have no action bar). */
.ins-body[data-pane="exercise"] { overflow: hidden; padding: 0; }
.ins-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0 12px;
  display: flex;
  flex-direction: column;
}

.ins-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ins-section:last-of-type { border-bottom: 0; }

.ins-kicker {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ins-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}
.state-badge .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.state-badge.sm { font-size: 10px; height: 18px; padding: 0 7px; margin-left: auto; }

.ins-field { display: flex; flex-direction: column; gap: 5px; }
.ins-field label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.ins-field input, .ins-field textarea, .ins-field select {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  outline: none;
  transition: border-color .14s, box-shadow .14s, background .14s;
  font-family: inherit;
}
.ins-field textarea { resize: vertical; line-height: 1.5; min-height: 64px; }

/* ── STUDIO LOGO (tenant-admin only) ──────────────────────────────────────── */
.logo-manage { display: flex; align-items: center; gap: 12px; }
.logo-preview {
  width: 56px; height: 56px; flex-shrink: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg-3) center / contain no-repeat;
  display: grid; place-items: center;
  color: var(--faint); font-size: 10px; overflow: hidden;
}
.logo-preview:not(.has-logo)::after { content: 'nessuno'; }
.logo-actions { display: flex; flex-direction: column; gap: 6px; }

/* ── RICH-TEXT EDITOR (notes + exercise instructions) ───────────────────────
   A lightweight contenteditable with a small toolbar. Stores sanitized HTML.
   The .rich content class is shared between the editor and the sheet render so
   what you type matches the PDF. */
.rich-editor { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); overflow: hidden; transition: border-color .14s, box-shadow .14s; }
.rich-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.rich-toolbar { display: flex; align-items: center; gap: 1px; padding: 3px; border-bottom: 1px solid var(--line); background: var(--bg-2); flex-wrap: wrap; }
.rich-tb-btn {
  width: 26px; height: 24px; display: inline-grid; place-items: center;
  border-radius: var(--r-xs); color: var(--muted); background: transparent;
  border: 0; cursor: pointer; font-size: 12.5px; transition: background .12s, color .12s;
}
.rich-tb-btn:hover { background: var(--bg-hov); color: var(--fg); }
.rich-tb-btn.active { background: var(--accent-soft); color: var(--accent); }
.rich-tb-btn b, .rich-tb-btn i { font-size: 13px; line-height: 1; }
.rich-tb-sep { width: 1px; height: 15px; background: var(--line-2); margin: 0 3px; flex-shrink: 0; }
.rich-area {
  min-height: 72px; max-height: 260px; overflow-y: auto;
  padding: 8px 10px; outline: none; font-size: 12.5px; line-height: 1.5; color: var(--fg);
}
.rich-area:empty::before { content: attr(data-placeholder); color: var(--whisper); pointer-events: none; }

/* shared rich content rendering (editor .rich-area + sheet .rich) */
.rich-area, .rich { overflow-wrap: anywhere; word-break: break-word; }
.rich-area p, .rich p { margin: 0 0 6px; }
.rich-area p:last-child, .rich p:last-child { margin-bottom: 0; }
.rich-area ul, .rich ul, .rich-area ol, .rich ol { margin: 4px 0 6px; padding-left: 20px; }
.rich-area li, .rich li { margin: 1px 0; }
.rich-area h4, .rich h4 { margin: 8px 0 4px; font-size: 1.05em; font-weight: 700; letter-spacing: -0.01em; }
.rich-area h4:first-child, .rich h4:first-child { margin-top: 0; }
.rich-area strong, .rich strong { font-weight: 700; }
.rich-area em, .rich em { font-style: italic; }
.rich-area a, .rich a { color: var(--accent); text-decoration: underline; }
.ins-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  cursor: pointer;
  height: 30px;
}
.ins-field input:focus, .ins-field textarea:focus, .ins-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
.ins-field input::placeholder, .ins-field textarea::placeholder { color: var(--placeholder); }
.ins-field select option { background: var(--bg); color: var(--fg); }
.ins-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Inspector day selector (shown when the scheda is organized by days). */
.ins-select {
  appearance: none; -webkit-appearance: none;
  min-width: 140px; max-width: 60%;
  height: 30px; padding: 0 28px 0 10px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background-color: var(--bg-press);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 10px;
  color: var(--fg); cursor: pointer; font-size: 12px;
}
.ins-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.ins-select option { background: var(--bg); color: var(--fg); }

/* ── Custom dropdown (replaces OS-native <select> popup) ───────────────────
   The closed control is a flex trigger (selected text vertically centered, no
   OS chrome); the open list is an app-styled, portaled menu — never the native
   OS-rendered <option> popup. Mirrors the platform panel's .ui-select so every
   combobox across the project looks the same. */
@keyframes ui-menu-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ui-select { position: relative; width: 100%; }
.ui-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--fg); border-radius: var(--r-md);
  padding: 7px 12px; font-size: 13px; font-family: inherit; font-weight: 400; min-height: 30px;
  box-shadow: none; cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s; }
.ui-select-trigger:hover { filter: none; box-shadow: none; background: var(--bg); border-color: var(--accent); }
.ui-select-trigger:active { transform: none; }
.ui-select.open .ui-select-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.ui-select-trigger .ui-select-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-trigger .ui-select-val.placeholder { color: var(--placeholder); }
.ui-select-trigger .ui-select-chev { flex: none; color: var(--faint); transition: transform .18s; }
.ui-select.open .ui-select-trigger .ui-select-chev { transform: rotate(180deg); }
.ui-select.disabled .ui-select-trigger { opacity: .55; cursor: not-allowed; }
.ui-select-menu { position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 70;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 5px; max-height: 260px; overflow-y: auto; display: none; animation: ui-menu-pop .15s cubic-bezier(.2,.8,.2,1) both; }
.ui-select.open .ui-select-menu { display: block; }
/* floating menu: portaled to <body> as position:fixed so it is never clipped by
   a .modal/.modal-body { overflow: hidden } ancestor and always floats on top. */
.ui-select-menu-floating { position: fixed !important; z-index: var(--z-select-menu); left: 0; top: 0; display: block;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 5px; max-height: 260px; overflow-y: auto; animation: ui-menu-pop .15s cubic-bezier(.2,.8,.2,1) both; }
.ui-select-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--fg); cursor: pointer; }
.ui-select-opt:hover, .ui-select-opt.hl { background: var(--bg-hov); }
.ui-select-opt.sel-active { color: var(--accent); font-weight: 500; }
.ui-select-opt .ui-select-tick { margin-left: auto; color: var(--accent); opacity: 0; }
.ui-select-opt.sel-active .ui-select-tick { opacity: 1; }
/* Touch parity: bump the trigger to a comfortable target on coarse pointers. */
@media (pointer: coarse) {
  .ui-select-trigger { min-height: 40px; padding: 9px 12px; }
  .ui-select-opt { padding: 11px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-select-menu, .ui-select-menu-floating { animation: none; }
  .ui-select-trigger .ui-select-chev { transition: none; }
}

/* Custom exercise fields (user-defined, beyond the 5 fixed metrics). Each row
   is an editable label + value + remove. The fields are stored in the exercise
   reps array (reps[5+]) and render on the sheet/PDF like any other metric. */
.custom-rep { display: flex; flex-direction: column; gap: 6px; }
.custom-rep-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.custom-rep-head .link-btn { font-size: 11.5px; }
.custom-rep-row { display: grid; grid-template-columns: 116px 1fr 30px; gap: 6px; align-items: center; }
.custom-rep-k, .custom-rep-v {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 8px 10px; background: var(--bg); color: var(--fg);
  font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.custom-rep-k { font-weight: 500; }
.custom-rep-k::placeholder, .custom-rep-v::placeholder { color: var(--placeholder); }
.custom-rep-k:focus, .custom-rep-v:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.custom-rep-x {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .12s, color .12s, border-color .12s;
}
.custom-rep-x:hover { background: color-mix(in oklab, var(--danger) 12%, var(--bg)); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 26%, transparent); }

/* Read-only display row (account summary fields: email, role, 2FA status) —
   looks like an input so it doesn't read as broken/unstyled next to real
   form fields in the same modal. */
.ins-field .ins-static {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 6px 9px; background: var(--bg-2); color: var(--fg-2);
  font-size: 12.5px; line-height: 1.4;
}
.ins-static.ok { color: var(--ok); }
.ins-static.warn { color: var(--warn); }

/* Read-only studio branding for operators: the admin owns studio identity/logo,
   operators inherit it. Signals "you can see it but the admin sets it". */
.ins-field input.ro-studio, .ins-field textarea.ro-studio {
  background: var(--bg-2);
  color: var(--fg-2);
  cursor: default;
  opacity: .82;
}
.ins-field input.ro-studio:focus, .ins-field textarea.ro-studio:focus {
  border-color: var(--line);
  box-shadow: none;
}
button.ro-studio { opacity: .55; cursor: not-allowed; }

.ins-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-2);
  cursor: pointer;
  user-select: none;
}
.ins-check input { accent-color: var(--accent); width: 13px; height: 13px; }

.seg {
  display: flex;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 1px;
}
.seg-btn {
  flex: 1 1 0;
  height: 24px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: var(--r-xs);
  transition: background .12s, color .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.seg-btn:hover { color: var(--fg); }
.seg-btn.active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}

.thumb-row { display: flex; gap: 6px; }
.thumb {
  width: 68px; height: 68px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.thumb .ph-frame.xs { width: 100%; height: 100%; border: 0; border-radius: 0; }
.thumb-x {
  position: absolute;
  top: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.thumb-add {
  border-style: dashed;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.thumb-add:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.lib-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  height: 26px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--muted);
}
.lib-search input { flex: 1; border: 0; background: transparent; outline: 0; font-size: 12px; color: var(--fg); }
.lib-search input::placeholder { color: var(--placeholder); }
.lib-list { display: flex; flex-direction: column; gap: 1px; }
.lib-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  transition: background .12s;
  cursor: pointer;
}
.lib-item:hover { background: var(--bg-hov); }
.lib-meta { flex: 1; min-width: 0; line-height: 1.25; }
.lib-name { font-size: 12px; font-weight: 500; color: var(--fg); }
.lib-sub {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-3);
}
.ws-row + .ws-row { margin-top: 6px; }
.ws-row > svg { color: var(--muted); flex-shrink: 0; }
.ws-meta { flex: 1; min-width: 0; line-height: 1.25; }
.ws-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-sub {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 1px;
}

.ins-foot {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  background: var(--bg-2);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
  z-index: 2;
}
.ins-foot > button { flex: 1 1 0; min-width: 0; }
.ins-foot .btn-primary.block,
.ins-foot .btn-secondary.block,
.ins-foot .btn-ghost.block {
  height: 34px;
  font-size: 11.5px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* ── SHEET TABLES (esercizio + generale) ──────────── */
.ex-table-wrap {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--sheet-line);
}
.ex-table-kicker {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  color: var(--sheet-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.sh-general-table {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--sheet-line-2);
}

.sh-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 10px;
  line-height: 1.4;
  background: var(--sheet-bg);
  border: 1px solid var(--sheet-line-2);
  border-radius: 4px;
  overflow: hidden;
}
.sh-table th,
.sh-table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--sheet-line);
  border-right: 1px solid var(--sheet-line);
  vertical-align: middle;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--sheet-fg);
  letter-spacing: 0;
}
.sh-table th:last-child,
.sh-table td:last-child { border-right: 0; }
.sh-table tbody tr:last-child > td { border-bottom: 0; }
.sh-table th {
  background: var(--ph-bg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sheet-muted);
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom-color: var(--sheet-line-2);
}
.sh-table td.tx,
.sh-table td:first-child {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--sheet-fg);
  letter-spacing: -0.005em;
}
.sh-table tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--ph-bg) 45%, transparent);
}
.sh-table tbody tr.row-active {
  background: color-mix(in oklab, var(--accent) 9%, transparent);
}
.sh-table tbody tr.row-active > td.tx,
.sh-table tbody tr.row-active > td:first-child {
  color: color-mix(in oklab, var(--accent) 75%, var(--sheet-fg));
  font-weight: 600;
}
.sh-table-lg { font-size: 10.5px; }
.sh-table-lg th { font-size: 9px; }
/* Empty editable cells (fresh column header / fresh value cell): no default
   placeholder character is stored — the cell stays empty until the user types.
   min-width keeps an empty contenteditable cell wide enough to click; the
   border + padding already delimit it, so no fake "—" or "Colonna N" hint. */
.sh-table th[contenteditable]:empty, .sh-table td[contenteditable]:empty { min-width:72px; }

/* ── INSPECTOR — row + switch + mini chips ────────── */
.ins-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ins-hint {
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 2px;
  letter-spacing: -0.002em;
}
.ins-hint.subtle { color: var(--whisper); font-size: 10px; }

.sw { display: inline-flex; flex-shrink: 0; cursor: pointer; user-select: none; }
/* Visually hidden, NOT display:none — the checkbox must stay focusable so
   keyboard users can reach and toggle the switch (display:none removes it
   from the tab order entirely). */
.sw input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.sw input:focus-visible + .sw-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sw-track {
  position: relative;
  width: 26px; height: 15px;
  background: var(--bg-press);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: background .16s, border-color .16s;
}
.sw-thumb {
  position: absolute;
  top: 1px; left: 1px;
  width: 11px; height: 11px;
  background: var(--bg);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), background .16s;
}
.sw input:checked + .sw-track {
  background: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 60%, #000);
}
.sw input:checked + .sw-track .sw-thumb {
  transform: translateX(11px);
  background: #fff;
}

.tbl-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.chip-btn.xs {
  height: 28px;
  padding: 0 8px;
  font-size: 10.5px;
  gap: 4px;
  justify-content: center;
}
.seg.seg-sm { padding: 1px; }
.seg.seg-sm .seg-btn { height: 20px; font-size: 10.5px; padding: 0 8px; }

/* ── COLLAPSED SIDEBAR ─────────────────────────── */
.sidebar {
  transition: transform .26s var(--ease), opacity .18s var(--ease);
  will-change: transform;
}
[data-sidebar-open="false"] .app { grid-template-columns: 0px 1fr var(--inspector-w); }
[data-sidebar-open="false"][data-right-open="false"] .app { grid-template-columns: 0px 1fr 0px; }
[data-sidebar-open="false"] .sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
#sidebarToggle.is-collapsed svg { transform: rotate(180deg); }
#sidebarToggle svg { transition: transform .2s var(--ease); }

/* ── DENSITY ───────────────────────────────────── */
[data-density="compact"] .sheet {
  padding: 16mm 16mm 14mm;
  font-size: 11px;
}
[data-density="compact"] .ex { padding: 11px 0; gap: 12px; }
[data-density="compact"] .sh-section { margin-bottom: 10px; }
[data-density="compact"] .ex-title { font-size: 12.5px; }
[data-density="compact"] .ex-desc { font-size: 10.5px; }
[data-density="compact"] .sh-head { padding-bottom: 12px; margin-bottom: 12px; }
[data-density="compact"] .sh-head-row { margin-bottom: 14px; }

[data-density="airy"] .sheet {
  padding: 26mm 24mm 22mm;
  font-size: 12px;
}
[data-density="airy"] .ex { padding: 22px 0; gap: 18px; }
[data-density="airy"] .sh-section { margin-bottom: 22px; }
[data-density="airy"] .ex-title { font-size: 14.5px; }
[data-density="airy"] .ex-desc { font-size: 11.5px; line-height: 1.65; }
[data-density="airy"] .sh-head { padding-bottom: 22px; margin-bottom: 22px; }

/* ── SIGNATURE TOGGLE ──────────────────────────── */
[data-show-sign="false"] #shSign,
[data-show-sign="false"] .sh-foot-meta { display: none !important; }

/* ── EXERCISE SELECTION ON SHEET ──────────────── */
.ex {
  cursor: pointer;
  background: transparent;
  transition: background .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
  isolation: isolate;
}
.ex::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  border-radius: 16px;
  z-index: -1;
  transition: background .15s var(--ease);
}
.ex:hover::before { background: color-mix(in oklab, var(--accent) 9%, transparent); }
.ex.is-selected::before { background: color-mix(in oklab, var(--accent) 16%, transparent); }
.ex.is-selected::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  pointer-events: none;
}
.ex.is-selected .ex-num { color: var(--accent); }
.ex.is-new { animation: exFlash .9s ease-out; }
@keyframes exFlash {
  0% { background: color-mix(in oklab, var(--accent) 30%, transparent); }
  100% { background: color-mix(in oklab, var(--accent) 16%, transparent); }
}

/* exercise inline action overlay (sheet) */
.ex-actions-overlay {
  position: absolute;
  top: 8px; right: 8px;
  display: none;
  gap: 4px;
  z-index: 3;
}
.ex:hover .ex-actions-overlay,
.ex.is-selected .ex-actions-overlay { display: flex; }
.ex-actions-overlay button {
  width: 26px; height: 26px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.ex-actions-overlay button:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.ex-actions-overlay button.danger:hover {
  background: color-mix(in oklab, var(--danger) 16%, transparent);
  color: var(--danger);
  border-color: var(--danger);
}

/* exercise reorder buttons (inspector) — più grandi */
.ex-order { display: inline-flex; gap: 4px; }
.ex-order .icon-btn { width: 36px; height: 36px; }
.ex-order .icon-btn svg { width: 14px !important; height: 14px !important; }

/* Tabella per esercizio: no sfondo (eredita da .ex) */
.ex-table-wrap {
  margin-top: 10px;
}
/* Titolo tabella opzionale (font mono come rep values) */
.sh-table-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--sheet-fg);
  margin-bottom: 6px;
  outline: none;
  min-height: 14px;
  letter-spacing: 0;
}
/* Placeholder only on the EDITABLE title fields (inspector editors). The
   sheet-rendered copies are not contenteditable — an empty optional title there
   must show NOTHING (and collapse), otherwise the placeholder text "Titolo
   tabella (opzionale)" leaks into the exported PDF. */
.sh-table-title[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--sheet-muted);
  opacity: 0.5;
  font-style: italic;
}
.sh-table-title:not([contenteditable]):empty { display: none; }
.sh-table-title:focus { outline: 1px dashed color-mix(in oklab, var(--accent) 50%, transparent); outline-offset: 2px; }

/* Note + tabella generale: solo BODY ha sfondo accent (intestazione fuori) */
.sh-notes-body, .sh-general-body {
  background: color-mix(in oklab, var(--accent) 4%, transparent);
  padding: 12px 14px;
  border-radius: 6px;
}
.sh-notes-body p { margin: 0; }

/* ── TOAST STACK ──────────────────────────────── */
.toast-stack {
  position: fixed;
  top: calc(var(--topbar-h, 48px) + 56px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
  max-width: min(420px, calc(100vw - 28px));
  align-items: center;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 12.5px; font-weight: 500;
  color: var(--fg);
  min-width: 240px;
  max-width: 380px;
  pointer-events: auto;
  transform: translateY(10px); opacity: 0;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
  cursor: default;
}
.toast.in { transform: translateY(0); opacity: 1; }
.toast .toast-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}
.toast.toast-info .toast-dot { background: var(--accent); }
.toast.toast-warn .toast-dot { background: var(--warn); }
.toast.toast-danger .toast-dot { background: var(--danger); }
.toast .toast-msg { flex: 1; line-height: 1.35; }
.toast .toast-action {
  font-size: 11.5px; font-weight: 600;
  color: var(--accent);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.toast .toast-action:hover { background: var(--accent-soft); }
.toast .toast-x {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--faint);
  cursor: pointer;
  font-size: 14px;
}
.toast .toast-x:hover { background: var(--bg-hov); color: var(--fg); }

/* ── POPOVER ──────────────────────────────────── */
.popover {
  position: fixed;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 5px;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  max-width: 320px;
  z-index: var(--z-popover-high);
  font-size: 12.5px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.popover.in { opacity: 1; transform: translateY(0); }
.popover-head {
  font-size: 10.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  padding: 8px 10px 6px;
}
.pop-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  cursor: pointer;
  color: var(--fg-2);
  user-select: none;
  transition: background .12s, color .12s;
}
.pop-item:hover { background: var(--bg-hov); color: var(--fg); }
.pop-item > svg { color: var(--muted); flex-shrink: 0; }
.pop-item:hover > svg { color: var(--fg); }
.pop-item.danger { color: var(--danger); }
.pop-item.danger > svg { color: var(--danger); }
.pop-item-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  margin-left: auto;
  letter-spacing: 0;
}
.pop-divider { height: 1px; background: var(--line); margin: 4px 2px; }
.pop-form { display: flex; flex-direction: column; gap: 10px; padding: 6px 8px 8px; }
.pop-form .ins-field label {
  font-size: 10.5px; color: var(--muted); font-weight: 500;
}
.pop-form .ins-field input {
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 6px 9px;
  font-size: 12.5px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.pop-form .ins-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}
.pop-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.pop-actions .btn-secondary, .pop-actions .btn-primary { height: 28px; padding: 0 11px; }

.history-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background .12s;
}
.history-item:hover { background: var(--bg-hov); }
.history-item .h-bullet {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--whisper);
}
.history-item.is-current .h-bullet { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.history-item .h-meta { line-height: 1.25; min-width: 0; }
.history-item .h-name { font-size: 12px; font-weight: 500; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item .h-sub { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.history-item .h-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); letter-spacing: 0; }

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
}
.settings-row + .settings-row { border-top: 1px solid var(--line-soft); }
.settings-row .s-meta { line-height: 1.3; }
.settings-row .s-name { font-size: 12px; font-weight: 500; color: var(--fg); }
.settings-row .s-sub { font-size: 10.5px; color: var(--faint); margin-top: 1px; }

/* ── SPINNING STATE ───────────────────────────── */
.icon-btn.is-spinning svg { animation: spin .9s linear infinite; }
.chip-btn.is-spinning svg { animation: spin .9s linear infinite; }
.icon-act.is-spinning svg { animation: spin .9s linear infinite; }
/* Inline dot spinner prepended to any button while a network request it
   triggered is in flight (auto, via api.js / platform.html call()).
   Shared by the superadmin portal and the tenant app. */
/* Inline dot spinner prepended to a labeled button while a network request it
   triggered is in flight (auto, via api.js / platform.html call()). It is a
   flex item inside the button (inline-flex + align-items:center), so it is
   vertically centered by flex — no vertical-align hack, and the button's own
   flex gap handles the spacing to the label (no fixed margin, which would
   double the gap and look off). Icon-only buttons spin their svg instead
   (see .icon-act.is-spinning svg above). For labeled buttons the dot is
   absolutely centered over the button and the label/icon fade out, so the
   spinner sits dead-center in its scope (the button) instead of left of the
   label. */
.spin-dot { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:13px; height:13px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; display:block; flex:none; animation:spin-dot .7s linear infinite; pointer-events:none; }
button.is-spinning, .btn.is-spinning { pointer-events:none; opacity:.72; position:relative; }
/* When a labeled button has a spin-dot, fade its other children (label + icon)
   so the centered spinner is the only thing visible. Icon-only buttons have no
   spin-dot (call() skips prepending it), so their svg stays visible and spins. */
button.is-spinning:has(.spin-dot) > *:not(.spin-dot), .btn.is-spinning:has(.spin-dot) > *:not(.spin-dot) { opacity:0; }
@keyframes spin { to { transform: rotate(360deg); } }
/* spin-dot keeps the centering translate across the rotation (the shared
   @keyframes spin only sets rotate, which would drop the translate and throw
   the dot off-center). */
@keyframes spin-dot { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ── STATUS PILL STATES ──────────────────────── */
.status-pill.is-saving .dot {
  background: var(--warn);
  animation: pulse 1s ease-in-out infinite;
}
.status-pill.is-dirty .dot {
  background: var(--warn);
}
.status-pill.is-saved .dot { background: var(--ok); }
/* Save failed with dirty edits: persistent, clickable retry affordance. */
.status-pill.is-error {
  cursor: pointer;
  border-color: color-mix(in oklab, var(--danger) 45%, var(--line-2));
  color: var(--danger);
}
.status-pill.is-error .dot {
  background: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.85); } }

/* ── COMMAND PALETTE ─────────────────────────── */
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  display: grid;
  place-items: start center;
  padding-top: 14vh;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.cmdk-backdrop.in { opacity: 1; }
.cmdk {
  width: min(560px, calc(100vw - 32px));
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: transform .15s var(--ease);
}
.cmdk-backdrop.in .cmdk { transform: translateY(0) scale(1); }
.cmdk-search {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.cmdk-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 14px;
  color: var(--fg);
  font-family: inherit;
}
.cmdk-search input::placeholder { color: var(--placeholder); }
.cmdk-search kbd { margin-left: auto; }
.cmdk-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.cmdk-group-head {
  font-size: 10px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 9px 9px 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--fg-2);
}
.cmdk-item.is-active { background: var(--bg-hov); color: var(--fg); }
.cmdk-item > svg { color: var(--muted); flex-shrink: 0; }
.cmdk-item.is-active > svg { color: var(--accent); }
.cmdk-item .ci-name { flex: 1; font-size: 13px; font-weight: 500; }
.cmdk-item .ci-sub {
  font-size: 11px; color: var(--faint);
}
.cmdk-item kbd { margin-left: auto; }
.cmdk-empty {
  padding: 22px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

/* ── PRINT ────────────────────────────────────── */
/* Print-only footer: hidden on screen, shown only in @media print. */
.print-footer { display: none; }

@media print {
  /* Footer e paginazione gestiti da Electron printToPDF (header/footerTemplate).
     I margini superiore/inferiore sono già riservati dal main process (margins option),
     qui usiamo @page solo come fallback per browser print diretto. */
  @page {
    size: A4;
    margin: 14mm 12mm 20mm;
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      font-size: 8px; color: #888;
    }
  }
  /* Print-only footer (replaces the Electron printToPDF footerTemplate).
     Fixed-position elements repeat on every printed page in Chromium. */
  .print-footer {
    display: block !important;
    position: fixed; bottom: 4mm; left: 0; right: 0;
    z-index: var(--z-tooltip); /* top of the scale: must sit above any leftover chrome in print */
  }
  html, body { background: white !important; overflow: visible !important; height: auto !important; }
  body { display: block !important; }
  .sidebar, .topbar, .sheet-toolbar, .inspector, .toast-stack, .popover, .cmdk-backdrop { display: none !important; }
  .app { display: block !important; grid-template-columns: none !important; }
  .stage, .workspace { display: block !important; height: auto !important; overflow: visible !important; }
  .canvas { display: block !important; overflow: visible !important; padding: 0 !important; background: white !important; }
  #sheet-scaler {
    width: auto !important;
    height: auto !important;
  }
  .sheet {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    zoom: 1 !important;
    transform: none !important;
  }
  .ex { background: transparent !important; box-shadow: none !important; cursor: default !important; break-inside: avoid; border-radius: 0 !important; }
  .ex::before, .ex::after { display: none !important; }
  .ex.is-selected { background: transparent !important; box-shadow: none !important; }
  .ex.is-selected .ex-num { color: var(--sheet-muted) !important; }
  .ex-actions-overlay { display: none !important; }
  .ph-tools { display: none !important; }
  .ex-day-actions { display: none !important; }
  .ex-day { break-inside: avoid; }
  .ex-table-wrap { background: transparent !important; }
  .sh-notes-body, .sh-general-body { background: transparent !important; padding: 0 !important; }
  .sh-head { break-after: avoid; }
  /* .sh-foot del documento viene nascosto in stampa: il footer è iniettato da
     Electron printToPDF come template ripetuto su ogni pagina. */
  .sh-foot { display: none !important; }
  .sh-notes { break-inside: avoid; }
  .sh-section-head { break-after: avoid; }
  .sh-table thead { display: table-header-group; }
  .sh-table tr { break-inside: avoid; }
  /* Page counter già nel @bottom-right, nascondiamo quello in-page */
  .sh-foot-page { display: none !important; }
}

/* ── EXPORT-MODE (light strip of chrome) ──────── */
body.is-printing .toast-stack,
body.is-printing .popover,
body.is-printing .cmdk-backdrop,
body.is-printing .ph-tools,
body.is-printing .ex-actions-overlay { display: none !important; }

/* ── RESPONSIVE GUARDS ─────────────────────────── */
@media (max-width: 1440px) {
  :root { --inspector-w: 340px; }
}
@media (max-width: 1200px) {
  :root { --sidebar-w: 220px; --inspector-w: 320px; }
  .sheet { transform-origin: top center; }
}
@media (max-width: 980px) {
  :root { --sidebar-w: 210px; --inspector-w: 300px; }
  .crumb:not(.current) { display: none; }
  .crumb-sep { display: none; }
  .status-pill { display: none; }
  .meta-row { display: none; }
  .st-divider { display: none; }
}
/* Narrow viewports (tablet / narrow window): the sidebar and inspector become
   off-canvas drawers so the canvas keeps full width. The existing toggles
   (#sidebarToggle / #rightToggle / #rightClose) drive them via the
   data-sidebar-open / data-right-open attributes; app.js auto-collapses both
   when entering/below this breakpoint. Drawers sit below the topbar so the
   toggle buttons stay reachable while a drawer is open. */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr !important; }
  .sidebar, .inspector {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    height: auto;
    width: min(320px, 84vw);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-lg);
    transition: transform .22s var(--ease);
  }
  .sidebar  { left: 0;  transform: translateX(-100%); }
  .inspector { right: 0; transform: translateX(100%); }
  [data-sidebar-open="true"] .sidebar  { transform: translateX(0); }
  [data-right-open="true"]   .inspector { transform: translateX(0); }
  .topbar { gap: 4px; padding: 0 6px; }
  /* The topbar holds ~10 buttons; let them scroll horizontally instead of
     overflowing/clipping so every action stays reachable on narrow screens. */
  .topbar-right { overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .topbar-right::-webkit-scrollbar { display: none; }
  .topbar-right .btn-secondary, .topbar-right .btn-primary { padding: 0 8px; font-size: 12px; }
  .topbar-right .btn-secondary kbd, .topbar-right .btn-primary kbd { display: none; }
  .sheet-toolbar { flex-wrap: wrap; gap: 6px; }
}

/* Hide signature block / studio strip when toggle off */
body[data-show-sign="false"] .sh-sign,
body[data-show-sign="false"] .sh-foot-meta [data-bind-target="studio-line"],
body[data-show-sign="false"] [data-bind-target="clinician-line"] { display: none !important; }

/* jsTooltip (data-tip) */
#jsTooltip {
  position: fixed; z-index: var(--z-tooltip);
  background: rgba(15, 20, 30, 0.94); color: #fff;
  padding: 5px 9px; border-radius: 6px;
  font-size: 11px; line-height: 1.35; text-align: center;
  pointer-events: none;
  opacity: 0; transition: opacity .12s;
  white-space: normal; max-width: 280px;
  overflow-wrap: anywhere; word-break: normal;
}
[data-theme="dark"] #jsTooltip { background: rgba(245, 247, 252, 0.96); color: #111; }

/* ══════════════════════════ MODALS ══════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal-backdrop);
  background: rgba(15, 20, 30, 0.42);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center; justify-content: center;
  padding: 32px 16px;
  animation: modal-bd-in .18s ease both;
}
[data-theme="dark"] .modal-backdrop { background: rgba(5, 8, 14, 0.7); }
.modal-backdrop.show { display: flex; }
/* stacking: confirm sopra modali normali, onboarding sopra tutto */
#confirmModalBackdrop { z-index: var(--z-modal-high); }
#onboardingBackdrop   { z-index: var(--z-onboarding); }
@keyframes modal-bd-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg);
  color: var(--fg);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%; max-width: 480px;
  max-height: calc(100dvh - 64px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modal-in .22s cubic-bezier(.2, .8, .25, 1.05) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}
.modal-close-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: none; transition: background .12s, color .12s;
}
.modal-close-btn:hover { background: var(--bg-hov); color: var(--fg); }
.modal-close-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  overflow-wrap: anywhere; word-break: break-word;
  display: flex; flex-direction: column; gap: 12px;
}
.modal-intro {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--muted);
}
.modal-empty { margin: 16px 0; font-size: 13px; color: var(--muted); text-align: center; }
/* Tier summary under the owner's payment-link tier chooser: reads as a quiet
   status chip (no border stripe, per DESIGN §5) — just mono price + subtext. */
.pl-tier-info {
  font-size: 12.5px; color: var(--fg-2); line-height: 1.5;
  padding: 8px 10px; background: var(--bg-3); border-radius: var(--r-sm);
}
.pl-tier-info .cell-strong { font-weight: 600; color: var(--fg); }
.pl-tier-info .cell-sub { color: var(--muted); }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; justify-content: flex-end;
}
.modal-actions { display: flex; gap: 8px; }

/* ── Unified "Profilo e sicurezza" modal ─────────────────────────────
   A two-pane settings layout: left rail of tabs, right scrollable panel.
   Padding lives on the panes (not on .modal-body) so content never sits
   flush against the modal edges. */
.modal.profile-modal { max-width: 860px; }
.profile-modal .modal-body {
  flex-direction: row;
  gap: 0;
  padding: 0;
  max-height: min(78vh, calc(100dvh - 132px));
}
.profile-rail {
  flex: 0 0 184px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 22px 14px 22px 18px;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
}
.profile-tab {
  display: flex; align-items: center; min-height: 38px;
  text-align: left; padding: 8px 12px;
  border-radius: var(--r-md); border: 0; background: transparent;
  color: var(--fg); font: inherit; font-weight: 500; cursor: pointer;
  transition: background .12s, color .12s;
}
.profile-tab:hover { background: var(--bg-hov); }
.profile-tab[aria-selected="true"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.profile-panel {
  flex: 1; min-width: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px 28px 26px;
}
.profile-panel .ws-section { margin: 0; }
/* Studio pane reuses the sidebar's .ins-section blocks (own padding/border
   per section, meant for a taller, dedicated panel). Stacked three-deep
   inside the profile modal's fixed height they pushed past the visible
   area and forced a scrollbar; tighten the reused chrome instead of
   shrinking the modal. */
.profile-panel .ins-section { padding: 10px 0; }
.profile-panel .ins-section + .ins-section { margin-top: 0; }
.profile-panel .logo-preview { width: 40px; height: 40px; }
.profile-panel .ins-hint { margin-bottom: 4px !important; }
.profile-panel .ins-hint.subtle { margin-top: 2px !important; }

/* Account summary card */
.acct-card {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--bg-2);
}
.acct-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 16px;
}
.acct-row + .acct-row { border-top: 1px solid var(--line); }
.acct-row .k { font-size: 13px; color: var(--muted); }
.acct-row .v { font-size: 13px; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.acct-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
/* Text mixed toward --fg so the small 12px label clears 4.5:1 in BOTH themes
   (bare --ok/--warn on the tint only reached ~3.3:1 in light mode). */
.acct-badge.ok   { background: color-mix(in oklab, var(--ok) 15%, var(--bg));   color: color-mix(in oklab, var(--ok) 62%, var(--fg)); }
.acct-badge.warn { background: color-mix(in oklab, var(--warn) 18%, var(--bg)); color: color-mix(in oklab, var(--warn) 60%, var(--fg)); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 620px) {
  .profile-modal .modal-body { flex-direction: column; }
  .profile-rail {
    flex: none; flex-direction: row; flex-wrap: wrap;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 12px 14px;
  }
  .profile-panel { padding: 20px 18px 22px; }
  .acct-row { flex-wrap: wrap; }
}

/* Touch devices: comfortable 44px targets without inflating desktop density.
   Covers every tap target that stays small on desktop: topbar/icon buttons,
   switches, segmented controls, chips, inspector tabs, zoom + rich-text
   toolbar buttons. Density-sensitive rows (table cells, crumbs) are left
   alone so neighboring targets don't overlap. */
@media (pointer: coarse) {
  .pop-item, .profile-tab,
  .acct-actions .btn-secondary, .acct-actions .btn-primary { min-height: 44px; }
  .pop-item, .profile-tab { display: flex; align-items: center; }
  .icon-btn, .icon-btn.xs { min-width: 44px; min-height: 44px; }
  .seg-btn, .seg.seg-sm .seg-btn { min-height: 36px; }
  .chip-btn, .chip-btn.xs { min-height: 36px; }
  .ins-tab { min-height: 32px; }
  .rich-tb-btn { min-width: 36px; min-height: 32px; }
  /* Switch track is tiny (26×15); enlarge the clickable label hit area. */
  .sw { min-width: 44px; min-height: 32px; display: inline-flex; align-items: center; }
  .sw-track { width: 34px; height: 20px; }
  .sw-thumb { width: 14px; height: 14px; }
  .sw input:checked + .sw-track .sw-thumb { transform: translateX(14px); }
}

/* form fields inside modals reuse .ins-field from main */
.modal-body .ins-field input,
.modal-body .ins-field textarea,
.modal-body .ins-field select {
  width: 100%;
}

/* buttons */
.btn-danger {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500;
  background: var(--danger);
  color: #fff; border: 1px solid color-mix(in oklab, var(--danger) 70%, #000);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s, transform .08s;
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:active { transform: translateY(0.5px); }

.btn-primary.block, .btn-secondary.block, .btn-ghost.block { width: 100%; justify-content: center; }

.link-btn.back-link {
  margin-top: 14px; font-size: 12px; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.link-btn.back-link:hover { color: var(--fg); }

/* onboarding */
.onboarding-cards {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
.onboarding-card {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 12px; text-align: center; cursor: pointer;
  background: var(--bg-2);
  transition: transform .12s, border-color .12s, background .12s;
}
.onboarding-card:hover { transform: translateY(-1px); border-color: var(--accent); background: var(--accent-soft); }
.onboarding-card-icon {
  width: 32px; height: 32px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent); border-radius: 8px;
  font-size: 18px; font-weight: 600;
}
.onboarding-card h3 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.onboarding-card p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.onboarding-folder-info {
  margin-top: 10px; padding: 8px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 12px; color: var(--accent);
  word-break: break-all;
}
.onboarding-folder-label {
  margin: 0 0 12px; font-size: 12px; color: var(--muted);
  word-break: break-all;
}
.onboarding-error {
  margin-top: 10px; padding: 8px 12px;
  background: color-mix(in oklab, var(--danger) 10%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  border-radius: 8px;
  font-size: 12px; color: var(--danger);
}

/* manage patients list */
.manage-list { display: flex; flex-direction: column; gap: 6px; }
.manage-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2);
}
.manage-item .avatar { flex-shrink: 0; }
.manage-meta { flex: 1; min-width: 0; }
.manage-name { font-size: 13px; font-weight: 500; }
.manage-sub { font-size: 11px; color: var(--muted); }
.manage-actions { display: flex; gap: 4px; }

/* photo picker */
.picker-upload-area {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  padding: 18px; border-radius: 10px;
  border: 2px dashed var(--line);
  cursor: pointer; text-align: center;
  transition: border-color .12s, background .12s;
}
.picker-upload-area:hover { border-color: var(--accent); background: var(--accent-soft); }
.picker-upload-area strong { font-size: 13px; }
.picker-upload-area small { font-size: 11px; color: var(--muted); }

/* Name-the-photo row: preview + label input, shown after upload. */
.picker-name-row {
  display: flex; gap: 14px; align-items: center;
  margin-top: 14px; padding: 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg-2);
}
.picker-preview {
  width: 96px; height: 72px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-3);
}
.picker-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-name-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.picker-name-fields input {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--bg); color: var(--fg); font-size: 13px;
}
.picker-name-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.modal-sep {
  text-align: center; font-size: 11px; color: var(--muted);
  margin: 4px 0;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px; max-height: 320px; overflow-y: auto;
}
.picker-thumb {
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.picker-thumb:hover { border-color: var(--accent); }
.picker-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.picker-thumb p { margin: 0; padding: 4px 6px; font-size: 11px; color: var(--muted); text-align: left; }

/* workspace modal contents */
#workspaceModalBody { gap: 14px; }
.ws-section {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 10px);
  background: var(--bg-2);
}
.ws-section h3 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.ws-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 12px;
}
.ws-status .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--muted); }
.ws-status.connected .dot { background: var(--ok); }
.ws-status.pending .dot { background: var(--warn); }
.ws-status.error .dot { background: var(--danger); }
.ws-path { word-break: break-all; }

/* btn-danger uses --danger, which already adapts per theme; no dark override needed */

/* btn-ghost variant */
.btn-ghost {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .08s;
}
.btn-ghost:hover { background: var(--bg-hov); border-color: var(--muted); }
.btn-ghost:active { transform: translateY(0.5px); }
.btn-ghost.block { width: 100%; justify-content: center; height: 32px; font-size: 13px; }

/* ── ADDITIONAL FIX-UPS ─────────────────────────── */
/* Sidebar search inline (patient filter) */
.sidebar-search-inline {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 8px;
  padding: 0 4px;
  height: 28px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
}
.sidebar-search-inline svg { flex-shrink: 0; margin-left: 6px; }
.sidebar-search-inline input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-size: 11.5px; color: var(--fg);
  padding: 0 6px;
}
.sidebar-search-inline input::placeholder { color: var(--placeholder); }

/* Patient actions inline */
.patient-actions {
  display: none; gap: 2px;
  margin-left: auto;
}
.patient-item:hover .patient-actions,
.patient-item.active .patient-actions { display: inline-flex; }
.patient-actions .icon-btn { width: 30px; height: 30px; }

/* Recent actions inline */
.recent-actions {
  display: none; gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.recent-item { position: relative; }
.recent-item:hover .recent-actions,
.recent-item.active .recent-actions { display: inline-flex; }
.recent-actions .icon-btn {
  width: 22px; height: 22px;
  font-size: 12px;
  background: var(--bg);
}
.recent-actions .icon-btn:disabled { opacity: 0.3; cursor: default; }

/* Input error state (validation) — not scoped to .ins-field: the static
   auth pages (login/attiva/ripristina-2fa) use bare label+input, no wrapper. */
input.input-error, textarea.input-error, select.input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent) !important;
}

/* Field validation badge — small pill dropped next to a field's <label for>
   by fieldError()/fieldError() in app.js (and its twin in the static auth
   pages). Replaces the old pattern of a toast or a shared .err text line for
   validation feedback tied to one specific input. */
.field-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
  background: color-mix(in oklab, var(--danger) 16%, var(--bg));
  color: var(--danger);
}

/* Date input: usa stesso stile degli altri input + arrow custom */
.ins-field input[type="date"] {
  font-family: inherit;
  color-scheme: light dark;
  position: relative;
  padding-right: 8px;
}
[data-theme="dark"] .ins-field input[type="date"] { color-scheme: dark; }
.ins-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.55);
  cursor: pointer;
  margin-left: 4px;
}
.ins-field input[type="date"]:hover::-webkit-calendar-picker-indicator { filter: opacity(0.85); }
[data-theme="dark"] .ins-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.9) opacity(0.7); }

/* ── Custom datepicker (replaces native <input type="date">) ──────────────
   A popover calendar keyed off a trigger button, mirroring Nursery's DatePicker
   (.dp / .dp-day). Trigger reuses the .ui-select-trigger chrome so the picker
   reads as the same control family as the custom dropdown. The popover is
   portaled to <body> as position:fixed (escapes .modal/.ins-body overflow). */
.movesy-dp { position: relative; width: 100%; }
.movesy-dp input[type="hidden"] { display: none; }
.movesy-dp-trigger {
  width: 100%; display: flex; align-items: center; gap: 9px;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--fg);
  border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 13px; font-family: inherit; font-weight: 400; min-height: 0;
  box-shadow: none; cursor: pointer; text-align: left;
  transition: border-color .14s, box-shadow .14s;
}
.movesy-dp-trigger:hover { border-color: var(--faint); }
.movesy-dp-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.movesy-dp-trigger .movesy-dp-ico { flex: none; color: var(--faint); transition: color .14s; }
.movesy-dp-trigger:focus-visible .movesy-dp-ico,
.movesy-dp.open .movesy-dp-trigger .movesy-dp-ico { color: var(--accent); }
.movesy-dp-trigger .movesy-dp-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.movesy-dp-trigger .movesy-dp-val.placeholder { color: var(--placeholder); text-transform: none; }
.movesy-dp-trigger .movesy-dp-chev { flex: none; color: var(--faint); transition: transform .18s; }
.movesy-dp.open .movesy-dp-trigger .movesy-dp-chev { transform: rotate(180deg); }

.dp-scrim { position: fixed; inset: 0; z-index: 300; background: transparent; }
.dp {
  position: fixed; z-index: 310; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 14px; width: 296px; max-width: 92vw;
  animation: dp-pop .16s cubic-bezier(.2,.8,.2,1) both; transform-origin: top left;
}
@keyframes dp-pop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 4px; }
.dp-head .dp-title { font-size: 13px; font-weight: 600; color: var(--fg); text-transform: capitalize; letter-spacing: -.01em; }
.dp-nav-btn {
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg-2);
  border-radius: var(--r-sm); cursor: pointer; padding: 0; min-height: 0; box-shadow: none;
  transition: background .12s, color .12s, border-color .12s;
}
.dp-nav-btn:hover { background: var(--bg-hov); color: var(--fg); border-color: var(--line-2); filter: none; }
.dp-nav-btn:active { transform: none; }
.dp-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; }
.dp-day {
  aspect-ratio: 1 / 1; border: none; background: transparent; border-radius: 50%;
  font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--fg);
  cursor: pointer; display: grid; place-items: center; min-height: 0; box-shadow: none; padding: 0;
  transition: background .12s, color .12s;
}
.dp-day:hover { background: var(--bg-hov); filter: none; }
.dp-day.today { color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 45%, transparent); }
.dp-day.sel { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.dp-day:disabled { opacity: .3; cursor: not-allowed; }
.dp-day:disabled:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { .dp { animation: none; } }
@media (pointer: coarse) {
  .movesy-dp-trigger { min-height: 40px; padding: 10px 12px; }
  .dp-day { font-size: 13.5px; }
  .dp-nav-btn { width: 32px; height: 32px; }
}

/* Save Drive credentials button: larghezza compatta */
#saveDriveCredentialsBtn { width: auto; align-self: flex-start; }

/* ── GUIDED TOUR ───────────────────────────────────────
   Position via transform (GPU, no layout thrash); the highlight's size is set
   directly (instant) and the card's entrance is an opacity fade. */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-tour);
  cursor: default;
}
.tour-highlight {
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  transform: translate(0, 0);
  border-radius: 8px;
  z-index: var(--z-tour-highlight);
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48);
  outline: 2px solid color-mix(in oklab, var(--accent) 75%, transparent);
  outline-offset: 1px;
  opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.tour-highlight.in { opacity: 1; }
.tour-card {
  position: fixed;
  left: 0; top: 0;
  transform: translate(0, 0);
  z-index: var(--z-tour-card);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 16px;
  width: 290px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  opacity: 0;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.tour-card.in { opacity: 1; }
.tour-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tour-close:hover { background: var(--bg-hov); color: var(--fg); }
.tour-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.tour-dot {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background: var(--line-2);
  transition: transform .2s ease, background .2s ease;
  transform-origin: left center;
}
.tour-dot.active { transform: scale(1.4); background: var(--accent); }
.tour-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
  padding-right: 20px;
}
.tour-card-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.tour-card-desc kbd {
  font-size: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 1px 4px;
  font-family: inherit;
  color: var(--fg-2);
}
.tour-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}


/* ── SCREEN-READER ONLY ───────────────────────────────────
   Visually hidden but available to assistive tech. Used for the app's
   landmark heading (<h1>) and any control that needs an accessible name
   without visible text. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── ONBOARDING / AUTH (shared: attiva.html + platform.html owner profile)
   Mirrors the platform owner auth-card + 2FA-setup graphics so the tenant
   admin / tenant-client onboarding (attiva.html) looks identical to the
   superadmin auth + 2FA screens. platform.html keeps its own inline copies
   (identical values) for its auth screens; this block is the canonical
   source consumed by the standalone attiva page. */
.logo-mark { width:22px; height:22px; border-radius:var(--r-sm); display:grid; place-items:center; color:#fff; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent) 0%, color-mix(in oklab, var(--accent) 65%, #0b1020) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab, #fff 18%, transparent), var(--shadow-sm); }
.logo-mark svg { width:14px; height:14px; }
.logo-mark.lg { width:46px; height:46px; border-radius:13px; box-shadow:var(--shadow-md); }
.logo-mark.lg svg { width:24px; height:24px; }
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; gap:16px; position:relative; }
.auth-wrap::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(960px 620px at 10% -12%, color-mix(in oklab, var(--accent) 22%, var(--bg)), transparent 60%),
    radial-gradient(900px 700px at 112% 8%, color-mix(in oklab, var(--accent) 16%, var(--bg)), transparent 56%),
    radial-gradient(760px 760px at 50% 124%, color-mix(in oklab, var(--accent) 10%, var(--bg)), transparent 60%); }
.auth-wrap::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image: radial-gradient(color-mix(in oklab, var(--fg) 7%, transparent) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 78%);
                         mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 78%); }
.auth-wrap > * { position:relative; z-index:1; }
.auth-card { width:100%; max-width:420px; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:30px 28px 26px;
  box-shadow: 0 1px 0 0 color-mix(in oklab, var(--accent) 26%, transparent) inset, 0 24px 60px rgba(15,20,30,.12), 0 8px 22px rgba(15,20,30,.06); }
.auth-card h1, .auth-card h2 { margin:0 0 6px; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.auth-card .sub { color:var(--muted); font-size:13px; margin:0 0 16px; line-height:1.5; }
.auth-card label { display:block; font-size:11px; color:var(--muted); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.auth-card input { width:100%; padding:11px 12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md);
  color:var(--fg); font-size:14px; font-family:inherit; }
.auth-card input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus); }
.auth-card button { width:100%; margin-top:20px; padding:12px; background:var(--accent); color:var(--accent-fg); border:0;
  border-radius:var(--r-md); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; min-height:42px;
  transition:filter .12s, box-shadow .12s, transform .05s; box-shadow:0 1px 2px color-mix(in oklab, var(--accent) 22%, transparent); }
.auth-card button:hover { filter:brightness(1.05); box-shadow:0 3px 8px color-mix(in oklab, var(--accent) 28%, transparent); }
.auth-card button:active { transform:translateY(.5px); }
.auth-card button:disabled { opacity:.55; cursor:default; box-shadow:none; }
.auth-card button.ghost { background:transparent; color:var(--fg); border:1px solid var(--line); box-shadow:none; }
.auth-card button.ghost:hover { background:var(--bg-hov); filter:none; box-shadow:none; }
.brand-block { text-align:center; margin-bottom:20px; }
.brand-block .logo-mark { margin:0 auto 14px; }
.brand-block .brand-name { font-size:15.5px; font-weight:700; letter-spacing:-.015em; }
.brand-block .brand-sub { font-size:12.5px; color:var(--muted); margin-top:3px; }
/* fields with leading icon + password eye toggle */
.field { position:relative; }
.field > input { padding-left:36px; }
.field .lead-ico { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none; }
.pw-field { position:relative; }
.pw-field > input { padding-right:44px; }
.field.pw-field > input { padding-left:36px; padding-right:44px; }
.pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:30px; height:30px;
  display:grid; place-items:center; background:transparent; border:0; color:var(--muted); cursor:pointer; border-radius:var(--r-sm); padding:0; }
.pw-toggle:hover { color:var(--fg-2); background:var(--bg-hov); filter:none; }
.pw-toggle .ico-eye-off { display:none; }
.pw-toggle.is-visible .ico-eye { display:none; }
.pw-toggle.is-visible .ico-eye-off { display:inline; }
/* pw-toggle lives inside .auth-card; reset the card's button defaults so the
   eye stays a 30×30 transparent icon, not a full-width accent button. */
.auth-card .pw-toggle { width:30px; height:30px; margin-top:0; padding:0; min-height:0; background:transparent; border:0; box-shadow:none; }
.auth-card .pw-toggle:hover { background:var(--bg-hov); filter:none; box-shadow:none; }
/* 2FA setup — QR + side panel (mirrors platform owner profile 2FA) */
/* .auth-card is 420px max-width everywhere else, but the TOTP step packs a
   200px QR code next to a recovery-steps column: at 420px the two tracks
   never fit (220px + 240px + gap > the ~360px left after padding), so the
   card widens for this step specifically instead of squeezing the grid. */
.auth-card.wide { max-width: 560px; }
.totp-setup { display:grid; grid-template-columns: 220px minmax(240px, 420px); gap:22px; align-items:start; }
@media (max-width:680px){ .totp-setup { grid-template-columns:1fr; justify-items:center; } }
.qr-frame { width:200px; height:200px; padding:10px; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-md); position:relative; border:1px solid var(--line); }
.qr-frame canvas, .qr-frame img { width:180px; height:180px; display:block; border-radius:4px; }
.qr-logo { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#fff; background:#fff; box-shadow:0 0 0 4px #fff, var(--shadow-sm); }
.qr-logo .logo-mark { width:32px; height:32px; border-radius:8px; }
.totp-side { min-width:0; display:flex; flex-direction:column; gap:16px; }
.totp-side .steps { margin:0; padding-left:18px; color:var(--fg-2); font-size:12.5px; line-height:1.6; }
.totp-side .steps li { margin-bottom:5px; }
.totp-field { display:flex; flex-direction:column; gap:6px; }
.secret-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.totp-code { max-width:170px; letter-spacing:.3em; font-family:var(--font-mono); font-size:15px; text-align:center; }
.totp-actions { margin-top:2px; padding-top:14px; border-top:1px solid var(--line); display:flex; gap:10px; }
.auth-card .totp-actions button { width:auto; margin-top:0; flex:1; }
.codes-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; font-family:var(--font-mono); font-size:14px; color:var(--fg-2); margin-top:8px; }
.auth-card .copy-btn { width:auto; margin-top:0; min-height:0; padding:7px 12px; font-size:12.5px; display:inline-flex; align-items:center; gap:7px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--muted); cursor:pointer; box-shadow:none; }
.auth-card .copy-btn:hover { color:var(--fg); border-color:var(--line-2); filter:none; }
.auth-card .copy-btn.done { color:var(--ok); border-color:var(--ok); }
.err { color:var(--danger); font-size:12px; margin-top:12px; min-height:16px; }
.ok { color:var(--ok); font-size:13px; }
.hidden { display:none; }
body.onboarding-page { overflow-y:auto; }

/* ── Onboarding finished screen (attiva.html success state) ───────────────
   Replaces the old "Attiva il tuo account → Vai al login" bare link with a
   polished success card: brand mark, check badge, status chip, countdown +
   auto-redirect, and a manual "vai ora" link. */
.done-block { text-align:center; padding:6px 0 2px; }
.done-check { width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab, var(--ok) 15%, var(--bg)); color:var(--ok); border:1px solid color-mix(in oklab, var(--ok) 30%, transparent); }
.done-check svg { width:32px; height:32px; }
.done-block h2 { margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.done-block .sub { margin:0 0 18px; }
.done-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:999px; font-size:12px; font-weight:600;
  background:color-mix(in oklab, var(--ok) 14%, var(--bg)); color:var(--ok); border:1px solid color-mix(in oklab, var(--ok) 30%, transparent); }
.done-chip::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.done-redirect { margin-top:18px; font-size:12.5px; color:var(--muted); }
.done-redirect b { color:var(--fg); font-variant-numeric:tabular-nums; }
.done-redirect a { color:var(--accent); text-decoration:none; font-weight:600; margin-left:6px; }
.done-redirect a:hover { text-decoration:underline; }
/* standalone attiva page: no topbar, toast sits at the very top */
.onboarding-page .toast-stack { top:24px; }
.onboarding-page .btnlink { display:inline-block; color:var(--accent); text-decoration:none; font-size:14px; font-weight:600; }
.onboarding-page .btnlink:hover { text-decoration:underline; }