/* ============================================================
   Fallowing Space — controller.css  (Tab 1, therapist-facing)
   Responsive shell that works in Android split-screen whether the
   half is tall+narrow (portrait split) or short+wide (landscape
   split), and full-width on a single screen.
   ============================================================ */

.controller {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Top bar (control strip) ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--sand-rgb), 0.82);
  backdrop-filter: blur(6px);
  flex: none;
  z-index: 5;
}
.brand { display: flex; align-items: baseline; gap: 0.5rem; }
.brand .mark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}
.brand .mark .a { color: var(--rust); }
.brand .sub {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* compact bilateral on/off, lives in the header */
.bilateral-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.1rem;
  border-radius: var(--r-md);
  background: var(--rust);
  color: #fff;
  border: 1px solid var(--rust-deep);
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s var(--ease), background 0.18s var(--ease);
}
.bilateral-mini:active { transform: scale(0.97); }
.bilateral-mini .glyph {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: grid; place-items: center; font-size: 0.78rem;
}
.bilateral-mini.active { background: var(--ink); border-color: #000; }
.bilateral-mini.active .glyph { background: var(--rust); }

/* Scripts / Notes tabs */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.tab {
  min-height: 42px;
  padding: 0 1.1rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tab.active { background: var(--rust); color: #fff; }

.topbar-right { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }

/* ---------- Content area — two independently-scrolling regions ---------- */
.content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;   /* stacked on narrow */
  gap: 1rem;
  padding: 1rem 1.1rem 1.2rem;
}

/* On narrow, the left (video + bilateral) is capped and scrolls on its own,
   so expanding the bilateral box never pushes the notes panel away. */
.col-monitor {
  flex: 0 1 auto;
  max-height: 48%;
  min-height: 0;
  overflow-y: auto;
}
.col-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  container-type: inline-size;
}

/* Side by side when there's room: even 50/50, each scrolls independently. */
@media (min-width: 820px) {
  .content { flex-direction: row; }
  .col-monitor { flex: 1 1 0; max-height: none; }
  .col-stage   { flex: 1 1 0; }
}

.col-monitor, .col-stage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- Client video (placeholder slot) ---------- */
.video-feed {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 20%, #3A403E, #262A29);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--on-dark-rgb), 0.55);
  box-shadow: var(--shadow-md);
}
.video-feed .slot-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 1rem;
}
.video-feed .slot-label strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: rgba(var(--on-dark-rgb), 0.85);
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.feed-tag {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--on-dark-rgb), 0.8);
  background: rgba(0,0,0,0.35);
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-pill);
}

/* ---------- "What the client sees" preview ---------- */
.preview {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mode-badge {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--sage-tint);
  color: var(--sage);
}
.mode-badge.bilateral { background: var(--rust-tint); color: var(--rust-deep); }

.preview-stage {
  position: relative;
  height: 64px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #262A29;
}
.preview-stage .layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.preview-stage .layer.on { opacity: 1; }
.preview-stage .video-layer {
  background: radial-gradient(120% 120% at 50% 25%, #3A403E, #262A29);
  color: rgba(var(--on-dark-rgb), 0.5);
  font-size: 0.78rem;
}
.preview-stage .bilateral-layer { background: #1E211F; }
.preview-stage .mini-ball {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rust-light), var(--rust));
  box-shadow: 0 0 18px rgba(var(--rust-rgb), 0.6);
  will-change: transform;
}

/* ---------- Primary action: bilateral toggle ---------- */
.bilateral-toggle {
  width: 100%;
  min-height: var(--tap-lg);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: #fff;
  background: var(--rust);
  border: 1px solid var(--rust-deep);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  transition: transform 0.12s var(--ease), background 0.2s var(--ease);
  letter-spacing: -0.01em;
}
.bilateral-toggle:active { transform: scale(0.985); }
.bilateral-toggle .glyph {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.bilateral-toggle.active {
  background: var(--ink);
  border-color: #000;
}
.bilateral-toggle.active .glyph { background: var(--rust); }

/* ---------- Placeholder slot cards (future phases) ---------- */
.slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
.slot {
  padding: 1rem;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: space-between;
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--cream-2);
}
.slot .slot-name { font-family: var(--font-display); font-size: 1.05rem; }
.slot .phase {
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--clay);
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-pill);
}
.slot p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Topbar right + settings button ---------- */
.topbar-right { display: flex; align-items: center; gap: 0.6rem; }

/* Header session-client control. The ONLY variable-width item in .topbar, which
   wraps rather than compresses (see .topbar flex-wrap) — so a long client name
   would otherwise push the whole header onto a second row. Capped and ellipsised
   instead; the full name stays available via the title attribute. Surface matches
   the neighbouring .icon-btn (same --cream-2 fill, --r-md corners, --tap-derived
   height via .btn.small) so it reads as part of the same control cluster. */
.session-client-btn {
  flex: none;
  max-width: 12rem;
  display: inline-block;
  line-height: 42px;          /* .btn.small min-height 44px, less the 1px borders */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Session-client chooser rows — one tap per entry, choosing starts the session. */
.chooser-row { list-style: none; border-bottom: 1px solid var(--line); }
.chooser-row:last-child { border-bottom: none; }
.chooser-pick {
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.8rem;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
}
.chooser-pick:hover { background: var(--cream-2); }
.chooser-pick:active { background: var(--rust-tint); }
.icon-btn {
  width: var(--tap); height: var(--tap);
  min-width: 48px; min-height: 48px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-size: 1.25rem;
  color: var(--ink-soft);
  display: grid; place-items: center;
  transition: transform 0.12s var(--ease), background 0.15s var(--ease);
}
.icon-btn:active { transform: scale(0.95); }

/* ---------- Live video elements ---------- */
.feed-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  background: #262A29;
}
.feed-video.on { opacity: 1; }
.feed-waiting {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(var(--on-dark-rgb), 0.55);
}
/* Recoverable "client paused" overlay — sits over the frozen frame, never
   removes tracks or audio. Hidden by default; .on toggled from controller.js. */
.feed-paused {
  position: absolute; inset: 0;
  z-index: 2;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(var(--ink-rgb), 0.62);
  color: rgba(var(--on-dark-rgb), 0.7);
}
.feed-paused.on { display: flex; }

/* Permanent end-of-session overlay (therapist). z-index above every other
   surface (the .overlay modals top out at 1000) so a deliberate end can't be
   masked by the recoverable #client-paused overlay. */
.session-ended {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.6rem;
  background: rgba(var(--ink-rgb), 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.session-ended[hidden] { display: none; }
.session-ended-card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 2.2rem 1.8rem;
}
.session-ended-logo {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.8rem;
}
.session-ended-logo .a { color: var(--rust); }
.session-ended .ended-text { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; }
.session-ended-card .btn { margin-top: 1.4rem; }

/* In-room camera/mic failure warning — a prominent fixed top bar, visible DURING
   a live call (above the topbar, below modal overlays). Never lives in the hidden
   settings panel, which is the whole point. */
.media-warning {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap;
  padding: 0.7rem 1rem;
  background: var(--rust); color: #fff;
  font-size: 0.95rem; line-height: 1.4; text-align: center;
  box-shadow: 0 2px 12px rgba(var(--ink-rgb), 0.28);
}
.media-warning[hidden] { display: none; }
.media-warning-text { max-width: 70ch; }
.media-warning .btn {
  flex: 0 0 auto; background: #fff; color: var(--rust-deep); border-color: #fff; font-weight: 600;
}
.media-warning .btn:hover { background: var(--cream); }

/* In-room 'client left' notice — DISMISSIBLE, in-flow below the topbar (so the
   Hang-up bar stays reachable), NOT a full-screen blocking overlay. Calm sage
   tint (informational, not the rust alarm); mirrors .client-link-block's bar. */
.client-left {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--sage-tint); color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.95rem; line-height: 1.4; text-align: center;
}
.client-left[hidden] { display: none; }
.client-left .btn { flex: 0 0 auto; }

/* Session-state notice — same in-flow bar idiom as .client-left above (identical
   padding and border-bottom), but a rust TINT rather than the solid rust of
   .media-warning: this is a degraded state worth seeing, not an alarm. Absent
   entirely while the call is healthy. Single line; long strings ellipsise rather
   than reflowing the bar region and shifting the stage below. */
.session-state {
  width: 100%;
  padding: 0.6rem 1rem;
  background: var(--rust-tint);
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.85rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-state[hidden] { display: none; }

/* Knock bar — someone is waiting to be let in. A CALL TO ACTION, not an alarm:
   a --rust-tint fill with a 3px --rust left edge, so it draws the eye without
   the solid-rust urgency #media-warning reserves for a genuine fault. Distinct
   from .client-left's --sage-tint, which reports a completed event. Same padding
   and border-bottom as both, so the bar region stacks evenly.
   There is deliberately NO dismiss control. .client-left may be dismissed
   because the client has already gone; a dismissed knock would be a dead end for
   someone still waiting on the other side. */
.knock-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem; flex-wrap: wrap;
  padding: 0.6rem 1rem;
  background: var(--rust-tint); color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  border-left: 3px solid var(--rust);
  font-size: 0.95rem; line-height: 1.4; text-align: center;
}
.knock-bar[hidden] { display: none; }
.knock-bar .btn { flex: 0 0 auto; }
/* Admit is disabled until the therapist's own media is confirmed, so admission
   can never produce a one-way room. It must LOOK unavailable; the title says why.
   Matches the app's existing disabled treatment (.prep-btns, .pdf-nav). */
.knock-bar .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.self-view {
  position: absolute;
  right: 0.6rem; bottom: 0.6rem;
  width: 28%; max-width: 130px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 2px solid rgba(var(--on-dark-rgb), 0.7);
  box-shadow: var(--shadow-md);
  background: #262A29;
  transform: scaleX(-1);   /* mirror, so it reads like a, well, mirror */
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.self-view.on { opacity: 1; }
.self-view.hidden { display: none; }

.self-toggle {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(var(--on-dark-rgb), 0.28);
  z-index: 4;
  transition: transform 0.12s var(--ease), background 0.15s var(--ease);
}
.self-toggle:active { transform: scale(0.92); }
.self-toggle .slash { opacity: 0; transition: opacity 0.15s var(--ease); }
.self-toggle.off { background: var(--rust); border-color: var(--rust-deep); }
.self-toggle.off .slash { opacity: 1; }

/* ---------- Settings panel ---------- */
.settings-scrim {
  position: fixed; inset: 0;
  background: rgba(var(--ink-rgb), 0.42);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.6rem 1.2rem;
  overflow-y: auto;
  z-index: 50;
}
.settings-scrim[hidden] { display: none; }
.settings-panel {
  width: 100%; max-width: 460px;
  max-height: calc(100dvh - 3.2rem);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.settings-title { font-size: 1.4rem; }
.settings-help { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.settings-help code {
  font-size: 0.82rem; background: var(--clay);
  padding: 0.1rem 0.35rem; border-radius: 6px;
}
.field-label {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 0.3rem;
}
.field {
  font-family: var(--font-ui);
  font-size: 1rem;
  min-height: var(--tap);
  padding: 0 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--cream-2);
  color: var(--ink);
}
.field:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px var(--rust-tint); }
.settings-status { margin: 0; min-height: 1.2em; font-size: 0.86rem; color: var(--rust-deep); }
.settings-actions {
  display: flex; gap: 0.7rem; justify-content: flex-end;
  position: sticky; bottom: 0;
  background: var(--cream);
  margin: 0.6rem -1.5rem -1.3rem;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- Client link row ---------- */
.client-link-block { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--cream); border-bottom: 1px solid rgba(0,0,0,0.08); }
.client-link-block[hidden] { display: none; }
.client-link-block .field-label { margin: 0; }
.link-row { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.link-row .field { flex: 1; min-width: 0; font-size: 0.85rem; }
.link-row .btn { flex: none; min-height: auto; padding: 0 1.1rem; }

/* ---------- Monitor visibility toggle ---------- */
.preview-head-right { display: flex; align-items: center; gap: 0.5rem; }
.mon-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-soft);
  background: var(--cream-2);
  border: 1px solid var(--line);
  transition: transform 0.12s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.mon-toggle:active { transform: scale(0.92); }
.mon-toggle .slash { opacity: 0; transition: opacity 0.15s var(--ease); }
.mon-toggle.off { background: var(--rust); color: #fff; border-color: var(--rust-deep); }
.mon-toggle.off .slash { opacity: 1; }
.preview-stage.hidden { display: none; }

/* ---------- Bilateral controls ---------- */
.bcontrols { padding: 0; overflow: hidden; flex: none; }
.bcontrols-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.2rem;
  min-height: var(--tap);
  background: transparent;
  text-align: left;
}
.bcontrols-head .card-title { flex: none; }
.bcontrols-summary {
  flex: 1;
  text-align: right;
  font-size: 0.8rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}
.bcontrols.collapsed .bcontrols-summary { display: block; }
.chevron {
  flex: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform 0.2s var(--ease);
}
.bcontrols.collapsed .chevron { transform: rotate(-90deg); }
.bcontrols-body {
  padding: 0 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bcontrols.collapsed .bcontrols-body { display: none; }
.ctrl-row {
  display: grid;
  grid-template-columns: 4.6rem 1fr 2.2rem;
  align-items: center;
  gap: 0.8rem;
}
.ctrl-row label { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
/* A live value in a fixed slot: it counts 9 -> 10 -> 11 while a slider moves,
   and proportional digits make the number jump sideways as it does. */
.ctrl-val {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* range input — warm rust track + large thumb for fingertips */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: var(--r-pill);
  background: var(--clay);
}
input[type="range"]::-moz-range-track {
  height: 8px; border-radius: var(--r-pill); background: var(--clay);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -11px;
  border-radius: 50%; background: var(--rust);
  border: 3px solid var(--cream-2);
  box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rust); border: 3px solid var(--cream-2);
  box-shadow: var(--shadow-sm);
}

.ctrl-block { display: flex; flex-direction: column; gap: 0.55rem; }
.ctrl-block > label { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.seg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; }
.seg-btn {
  min-height: 48px;
  border-radius: var(--r-sm);
  font-size: 0.92rem; font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream-2);
  border: 1px solid var(--line);
  transition: transform 0.1s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.seg-btn:active { transform: scale(0.95); }
.seg-btn.active { background: var(--rust); color: #fff; border-color: var(--rust-deep); }

.pause-btn { width: 100%; }
.pause-btn:disabled { opacity: 0.45; }
.pause-btn.active { background: var(--ink); color: #fff; border-color: #000; }

/* ---------- Audio controls ---------- */
.ctrl-divider { height: 1px; background: var(--line); margin: 0.2rem 0; }
.ctrl-head { display: flex; align-items: center; justify-content: space-between; }
.ctrl-head label { font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }

.switch {
  width: 58px; height: 34px; border-radius: var(--r-pill);
  background: var(--clay); border: 1px solid var(--line-strong);
  position: relative; flex: none;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease);
}
.switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease);
}
.switch[aria-checked="true"] { background: var(--rust); border-color: var(--rust-deep); }
.switch[aria-checked="true"] .knob { transform: translateX(24px); }

.seg-2 { grid-template-columns: 1fr 1fr; }
.test-btn { width: 100%; }

/* ---------- Session clock chip (topbar) ---------- */
.clock-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border-radius: var(--r-pill);
  background: var(--cream-2);
  border: 1px solid var(--line);
  --c: var(--ok);
  --track: var(--clay);
}
.clock-chip[hidden] { display: none; }
.clock-pie {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--c) 360deg, var(--track) 0deg);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.10);
}
.clock-chip.amber { --c: var(--warn); }
.clock-chip.red   { --c: var(--alert); }
.clock-time {
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 3.1ch;
  text-align: center;
}
.clock-chip.amber .clock-time { color: var(--warn); }
.clock-chip.red   .clock-time { color: var(--alert); }

.clock-setting-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.clock-setting-row label {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.clock-setting-row .field {
  width: 5rem;
  flex: none;
  text-align: center;
}
.clock-setting-row .suffix {
  width: 4.2rem;
  flex: none;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- Scripts card + pinned grid ---------- */
.scripts-card { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; }
.scripts-head { display: flex; align-items: center; justify-content: space-between; }
.btn.small { min-height: 44px; padding: 0 1rem; font-size: 0.9rem; }

.scripts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.7rem;
}
.script-tile {
  position: relative;
  border-radius: var(--r-md);
  background: var(--cream-2);
  border: 1px solid var(--line);
  transition: transform 0.1s var(--ease), background 0.15s var(--ease), opacity 0.15s var(--ease);
}
.script-tile.dragging { opacity: 0.45; }
.tile-main {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.9rem 0.5rem;
  background: transparent; border: none; border-radius: var(--r-md); cursor: pointer;
}
.tile-main:active { transform: scale(0.96); }
.tile-unpin {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; line-height: 1; font-size: 0.95rem;
  background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line-strong);
}
.tile-unpin:hover { background: var(--alert); color: #fff; border-color: var(--alert); }
.tile-icon {
  display: grid; place-items: center;
  width: 46px; height: 54px;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  border: 1.5px solid var(--ink);
}
.tile-name {
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  text-align: center; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.scripts-empty { margin: 0; font-size: 0.86rem; color: var(--ink-faint); }

/* ---------- Generic overlay (library) ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(var(--ink-rgb), 0.42);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem; z-index: 1000;
}
.overlay[hidden] { display: none; }
.overlay-panel {
  width: 100%; max-width: 540px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line);
}
.overlay-head h2 { font-size: 1.4rem; }

/* THE ADD PANEL IS A VIEW, NOT A HEADER — and .library-view is why the list
   still scrolls after the move.

   A VERBATIM COPY OF .clients-list-view WOULD HAVE UNDONE v131. That wrapper
   is flex: 1; min-height: 0; overflow-y: auto but NOT display: flex, which is
   exactly what the comment on .library-list below means by "unlike
   #clients-list". Wrap .library-list in a non-flex box and its flex: 1 and
   min-height: 0 go inert, the WRAPPER scrolls instead of the list, and the fix
   is quietly gone with every test still green. So this wrapper is a flex
   column that passes the panel's capped height straight through to the list.

   Do not add padding here either: .lib-filter-row and .library-list carry
   their own, and a padded wrapper would inset the scrollbar. */
.library-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* The add view scrolls as a whole — it is a form, not a list, and on a short
   tablet in landscape the textarea alone can outrun the panel.

   THAT overflow-y IS SAFE ONLY BECAUSE THERE IS NO LIST IN HERE. Put one
   inside this view and it becomes the same trap .library-view exists to
   avoid: the wrapper would scroll, the list's own flex: 1 and min-height: 0
   would go inert, and the fault this seam fixed would be back with every
   test still green. A list added here needs its own .library-view wrapper
   and this overflow-y taken off. */
.library-add-view { overflow-y: auto; }
.lib-back { align-self: flex-start; margin: 0.9rem 1.3rem 0; }
/* Sits at the right-hand end of the Show row: the field is flex: 1 capped at
   240px, so without this the button would crowd it rather than balance it. */
.lib-add-btn { margin-left: auto; }

.library-add {
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.9rem;
}
/* The border separated the form from the list it used to sit above. In its own
   view there is nothing beneath it to separate, so the line would just hang.
   Scoped rather than removed: the clients overlay and records.html still put
   .library-add above a list, where it still divides something. */
.library-add-view .library-add { border-bottom: 0; }
.add-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.add-hint { font-size: 0.82rem; color: var(--ink-faint); flex: 1; min-width: 12rem; }
.add-text { display: flex; flex-direction: column; gap: 0.6rem; }
.script-textarea { min-height: 90px; padding: 0.7rem 0.9rem; resize: vertical; line-height: 1.5; font-family: var(--font-ui); }

/* flex: 1 and min-height: 0 are what make overflow-y actually scroll here.
   This ul IS the flex item of .overlay-panel (a capped column), unlike
   #clients-list which sits inside the .clients-list-view wrapper. Without
   flex: 1 it never grows into the panel, so .library-add — unshrinkable,
   with a 90px-min textarea — takes the 88vh and .overlay-panel's
   overflow: hidden clips the rest. Without min-height: 0 the automatic
   minimum size is the content height whenever an engine reads the
   overflow-x: visible half of overflow-y: auto as "visible", and the list
   cannot shrink at all. .agenda-list is the same shape and carries both. */
.library-list { list-style: none; margin: 0; padding: 0.6rem 0.8rem; overflow-y: auto; flex: 1; min-height: 0; }
.library-empty { padding: 1rem; color: var(--ink-faint); font-size: 0.9rem; text-align: center; }
.library-row {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line);
}
.library-row:last-child { border-bottom: none; }
.row-tag {
  flex: none; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  color: var(--rust-deep); background: var(--rust-tint);
  border: 1px solid var(--clay); border-radius: 6px; padding: 0.25rem 0.4rem;
}
.row-ref { flex: none; font-family: monospace; font-size: 0.72rem; color: var(--ink-soft); opacity: 0.85; }
.row-name { flex: 1 1 50%; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.row-docs {
  flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ink-faint); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 0.18rem 0.5rem; white-space: nowrap;
}
.row-docs.ready { color: var(--rust-deep); background: var(--rust-tint); border-color: rgba(var(--rust-rgb), 0.25); }
.row-docs.done { color: var(--ok-deep); background: rgba(var(--ok-fill-rgb), 0.16); border-color: rgba(var(--ok-fill-rgb), 0.4); }
.row-btn {
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
  padding: 0.4rem 0.6rem; border-radius: var(--r-sm);
  background: var(--cream-2); border: 1px solid var(--line); min-height: 40px;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.row-btn:hover { text-decoration: none; }
.row-btn.active { background: var(--rust); color: #fff; border-color: var(--rust-deep); }
.row-btn.danger { color: var(--alert); }

/* ---------- Full-screen reader ---------- */
.reader {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column;
  background: var(--cream);
}
.reader[hidden] { display: none; }
.reader-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--line);
  background: var(--cream); flex: none;
}
.reader-title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reader-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.reader-bilateral { min-height: 48px; }
.reader-bilateral.active { background: var(--ink); color: #fff; border-color: #000; }
.reader-body { flex: 1; overflow: auto; }
.reader-text {
  max-width: 70ch; margin: 0 auto; padding: 1.6rem 1.4rem 3rem;
  font-size: 1.2rem; line-height: 1.75; color: var(--ink);
  white-space: pre-wrap; word-wrap: break-word;
}
.reader-frame { width: 100%; height: 100%; border: none; display: block; }
.reader-fallback { padding: 2.4rem 1.4rem; text-align: center; color: var(--ink-soft); display: flex; flex-direction: column; gap: 1rem; align-items: center; }
/* pdf.js-rendered reader: one canvas per page, scrollable column. */
.reader-pdf { padding: 0.5rem; }
.reader-pdf-note { text-align: center; color: var(--ink-soft); padding: 1.4rem; }
.reader-pdf-page { display: block; width: 100%; height: auto; margin: 0 auto 8px; background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-md); }

/* ---------- Right-hand stage (scripts / notes display) ---------- */
.col-stage { min-height: 0; }
.stage-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.stage-view[hidden] { display: none; }
.stage-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.stage-title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn.ghost { background: transparent; border-color: transparent; color: var(--rust-deep); box-shadow: none; }

/* pinned tiles fill the wider panel */
.col-stage .scripts-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  align-content: start;
}

/* the large reading box */
.reader-inline {
  flex: 1;
  min-height: 380px;
  display: flex;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.reader-inline[hidden] { display: none; }
.reader-inline .reader-body { flex: 1; overflow: auto; }

.notes-stub {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: var(--cream);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  font-size: 0.95rem;
  padding: 2rem;
  text-align: center;
}

@media (max-width: 560px) {
  .brand .mark { font-size: 1.05rem; }
}

/* ---------- Notes view ---------- */
.client-select {
  flex: none;
  max-width: 14rem;
  min-height: 44px;
  padding: 0 0.8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
}
.notes-empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--ink-faint);
  background: var(--cream);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  font-size: 0.95rem;
  padding: 2rem;
  text-align: center;
}
.notes-area { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 0.9rem; }
.note-compose {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.note-input {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 0.7rem 0.9rem;
  line-height: 1.5;
  font-family: var(--font-ui);
}
.note-compose-actions { display: flex; justify-content: flex-end; }

.notes-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.note-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.8rem 0.9rem;
}
.note-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.35rem; }
.note-time { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-faint); }
.note-edited { font-size: 0.74rem; color: var(--ink-faint); }
.tag-optional { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--rust-tint); color: var(--rust-deep); vertical-align: middle; }
.note-text { white-space: pre-wrap; word-wrap: break-word; line-height: 1.55; cursor: text; }
.note-image { display: block; max-width: 100%; margin-top: 0.5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.note-edit { display: flex; flex-direction: column; gap: 0.6rem; }
.note-edit-actions { display: flex; align-items: center; gap: 0.4rem; }
.note-edit-actions .spacer { flex: 1; }

/* ---------- Notes: session client display ---------- */
.stage-title.none { color: var(--ink-faint); font-weight: 500; }
.notes-empty {
  flex-direction: column;
  gap: 1rem;
}
.notes-empty p { margin: 0; }

/* ---------- Clients manager ---------- */
.clients-list-view, .client-detail-view {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0.2rem;
}
.client-detail-view { padding: 1rem 1.3rem 1.3rem; }
.row-tag.session-tag {
  background: var(--sage-tint);
  color: var(--sage);
  border-color: var(--sage-tint);
}
/* An archived client found by search. Marked like the SESSION tag beside it —
   same shape, so it reads as a state of the row — but in the muted ink rather
   than an accent, because it is the absence of activity, not a kind of it. The
   row itself dims: the difference between an archived result and an active one
   has to survive a glance. */
.row-tag.archived-tag {
  background: var(--clay);
  color: var(--ink-soft);
  border-color: var(--clay);
}
.library-row.is-archived .row-name { color: var(--ink-soft); }
.library-row.is-archived { opacity: 0.75; }
.client-fields { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.client-fields .field-label { margin-top: 0.5rem; }
.cd-textarea { min-height: 90px; padding: 0.7rem 0.9rem; resize: vertical; line-height: 1.5; font-family: var(--font-ui); }
.client-detail-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.client-detail-actions .spacer { flex: 1; }
.danger-btn { color: var(--alert); border-color: rgba(var(--alert-rgb), 0.3); }
.client-history-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.4rem 0 0.6rem;
}
.client-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.history-item {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.6rem 0.8rem;
}
.history-item .note-text { white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; margin-top: 0.2rem; }

/* ---------- Diary ---------- */
.diary-split {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;   /* stacked until the panel is wide enough */
  gap: 1rem;
}
@container (min-width: 440px) {
  .diary-split { flex-direction: row; align-items: stretch; }
  .diary-split .diary-cal { flex: 0 0 300px; width: auto; max-width: 48%; align-self: flex-start; }
  .diary-split .day-agenda { flex: 1; min-width: 0; }
}
.diary-cal {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0.8rem;
  flex: none;
  width: 100%;
  max-width: 420px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cal-label { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-weekday {
  text-align: center; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink-faint);
  text-transform: uppercase; padding-bottom: 0.2rem;
}
.cal-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--cream-2);
  border: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 0.25rem 0.35rem;
}
.cal-cell.blank { background: transparent; border: none; }
/* Day numbers, in a seven-column grid — a column of figures by definition. */
.cal-num { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.cal-cell.today { border-color: var(--rust); }
.cal-cell.today .cal-num { color: var(--rust-deep); }
.cal-cell.selected { background: var(--rust); border-color: var(--rust-deep); }
.cal-cell.selected .cal-num { color: #fff; }
.cal-dot {
  position: absolute; bottom: 3px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 999px; background: var(--sage); color: #fff;
  font-size: 0.62rem; font-weight: 700;
  display: grid; place-items: center;
}
.cal-cell.selected .cal-dot { background: #fff; color: var(--rust-deep); }

.day-agenda { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.agenda-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin: 0 0 0.6rem; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; flex: 1; min-height: 0; }
.agenda-empty { color: var(--ink-faint); font-size: 0.9rem; padding: 0.6rem 0; }
.appt {
  display: flex; align-items: flex-start; gap: 0.8rem;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.7rem 0.8rem;
}
/* A TIME RANGE, "10:00–10:50", down the left of the agenda. v139 fixed the
   .appt-offhours span INSIDE this rule — the child that had to push itself
   back to sans against a display parent — and left the parent itself asking
   for the display face. It is the figure; the span is its label. */
.appt-when { font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rust-deep); white-space: nowrap; min-width: 5.5rem; }
.note-session { font-family: var(--font-display); font-weight: 700; color: var(--rust-deep); margin-right: 0.5rem; }
.appt-offhours { display: block; white-space: normal; margin-top: 0.15rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--rust); }
.appt-main { flex: 1; min-width: 0; }
.appt-who { font-weight: 600; }
.appt-meta { font-size: 0.84rem; color: var(--ink-soft); margin-top: 0.1rem; }
.appt-deposit { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; }
.dep-amt { font-size: 0.8rem; color: var(--ink-soft); }
.dep-status {
  font-size: 0.78rem; font-weight: 600;
  border-radius: var(--r-pill); padding: 0.2rem 0.5rem;
  border: 1px solid var(--line); background: var(--cream-2); color: var(--ink-soft);
}
.dep-status.dep-received { background: var(--sage-tint); color: var(--sage); border-color: var(--sage-tint); }
.dep-status.dep-refunded { background: var(--rust-tint); color: var(--rust-deep); border-color: var(--clay); }

/* booking form */
.booking-form { padding: 1.1rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.booking-form .field-label { margin-top: 0.5rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.two-col .field-label { margin-top: 0.5rem; }
.booking-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.booking-actions .spacer { flex: 1; }

/* ---------- Diary: appointment status ---------- */
.appt-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; }
.appt-confirmed { font-size: 0.78rem; font-weight: 700; color: var(--sage); }
.appt-inv { font-size: 0.76rem; font-weight: 700; color: var(--rust-deep); background: var(--rust-tint); border-radius: var(--r-pill); padding: 0.15rem 0.5rem; }
.confirm-btn { color: var(--sage); border-color: var(--sage-tint); }

/* ---------- Invoices ---------- */
.inv-filters { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex: none; }
.chip {
  border: 1px solid var(--line-strong); background: var(--cream-2);
  color: var(--ink-soft); border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem; font-size: 0.85rem; font-weight: 600;
}
.chip.active { background: var(--rust); border-color: var(--rust-deep); color: #fff; }
.inv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; }
.inv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.75rem 0.9rem; cursor: pointer;
}
.inv-row:hover { border-color: var(--line-strong); }
.inv-num { font-weight: 600; }
.inv-sub { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.1rem; }
.inv-row-right { display: flex; align-items: center; gap: 0.7rem; }
.inv-amt { font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-badge { font-size: 0.75rem; font-weight: 700; border-radius: var(--r-pill); padding: 0.2rem 0.55rem; }
.inv-unpaid { background: var(--rust-tint); color: var(--rust-deep); }
.inv-paid { background: var(--sage-tint); color: var(--sage); }

.invoice-body { padding: 1.1rem 1.3rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.invoice-body .field-label { margin-top: 0.5rem; }
.inv-meta { margin-bottom: 0.8rem; line-height: 1.5; }
.inv-items { list-style: none; margin: 0; padding: 0; }
.inv-items li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.inv-total { text-align: right; font-family: var(--font-ui); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 0.8rem; }
.inv-status-row { display: inline-block; margin-top: 0.9rem; padding: 0.3rem 0.8rem; border-radius: var(--r-pill); font-weight: 700; font-size: 0.85rem; }
.inv-status-row.inv-paid { background: var(--sage-tint); color: var(--sage); }
.inv-status-row.inv-unpaid { background: var(--rust-tint); color: var(--rust-deep); }
.invoice-actions { display: flex; align-items: center; gap: 0.6rem; padding: 0 1.3rem 1.3rem; flex-wrap: wrap; }
.invoice-actions .spacer { flex: 1; }

/* ---------- Office pages (Clients, Admin) ---------- */
.office-page { min-height: 100vh; }
.office-top {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--sand-rgb), 0.9);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 5;
}
.office-back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--rust-deep); font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--clay); background: var(--cream); border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem; min-height: 38px;
}
.office-back:hover { background: var(--rust-tint); border-color: var(--rust); text-decoration: none; }
.office-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin: 0; }
.office-main { max-width: 880px; margin: 0 auto; padding: 1.2rem; }
.office-cols { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .office-cols { grid-template-columns: 3fr 2fr; align-items: start; } }
.office-card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; min-width: 0; }
.office-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.office-card-head h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 0; }
.office-card-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.office-soon h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem; }
.office-soon p { color: var(--ink-soft); line-height: 1.5; margin: 0 0 0.8rem; }
.soon-list { margin: 0; padding-left: 1.1rem; color: var(--ink-faint); line-height: 1.7; }

/* Render the shared clients manager inline on its office page (only #clients;
   other overlays like #invoice / #business stay normal toggleable modals). */
.office-page #clients.overlay { position: static; display: block; background: transparent; padding: 0; }
/* Here #clients is the page, not a modal, so it must stay rendered even while
   carrying the hidden attribute — a background click sets it (clients.js:254)
   and nothing on records.html calls open() to put it back. The rule above used
   to hold that on its own; the global [hidden] rule in base.css now outranks
   it, so the exemption has to match its weight. */
.office-page #clients.overlay { display: block !important; }
.office-page #clients .overlay-panel { width: 100%; max-width: none; max-height: none; margin: 0; box-shadow: none; border: none; background: transparent; }
.office-page #clients .overlay-head { background: transparent; }
.office-page #clients-close { display: none; }
.office-page .clients-list-view, .office-page .client-detail-view { overflow: visible; }

/* History blocks (client detail) */
.hist-line { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.2rem; }
.pay-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.pay-amt { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Admin layout + rates ---------- */
.admin-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .admin-grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.admin-col-side { display: flex; flex-direction: column; gap: 1.2rem; }
.admin-col-main { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.office-note { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0 0 0.9rem; }

.rate-add-row { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.rate-add-row .field { min-height: 44px; }
.rate-add-row #rate-name { flex: 1 1 120px; min-width: 0; }
.rate-amount-in { flex: 0 0 90px; width: 90px; }
.rate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rate-row {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.55rem 0.7rem;
}
.rate-name { flex: 1; font-weight: 600; }
/* money(r.amount), stacked down a list of rates — a column of figures that
   v139's audit did not reach, so it had neither the face nor the alignment. */
.rate-amt { font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rust-deep); }

/* Inline rate editing — the row swaps its spans for inputs, with Save and Cancel
   in the row. Messages wrap onto their own line so a long rename note never
   squeezes the controls. Private to this card, like the rate- rules above. */
.rate-row-editing { flex-wrap: wrap; }
.rate-row-editing .field { min-height: 44px; }
.rate-edit-name { flex: 1 1 120px; min-width: 0; }
.rate-row-note, .rate-row-error {
  flex: 1 0 100%; margin: 0.15rem 0 0; font-size: 0.82rem; line-height: 1.4;
}
.rate-row-note { color: var(--ink-soft); }
.rate-row-error { color: var(--alert); }
.rate-add-error { margin: -0.5rem 0 0.9rem; font-size: 0.82rem; line-height: 1.4; color: var(--alert); }
.rate-row-note[hidden], .rate-row-error[hidden], .rate-add-error[hidden] { display: none; }

/* Session mode (M2). A property of the rate, not a status — so it sits quietly
   in secondary ink beside the fee rather than taking a badge or an alert
   colour. The control is the same width in both the add row and an open edit
   row, so the two line up. */
.rate-mode { flex: none; font-size: 0.82rem; color: var(--ink-soft); }
.rate-mode-in { flex: 0 0 auto; width: auto; }

/* ---------- Backup card ---------- */
.backup-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.9rem 0 0.5rem; }
.backup-row .btn { flex: 1 1 auto; }
/* 2FA + encryption cards: buttons sized to content with comfortable spacing, not cramped */
#security-card .backup-row, #encryption-card .backup-row { gap: 0.7rem; margin: 1rem 0 0.4rem; }
#security-card .backup-row .btn, #encryption-card .backup-row .btn { flex: 0 1 auto; }
#security-card .field, #encryption-card .field { margin-bottom: 0.5rem; }
#security-card .office-note + .office-note, #encryption-card .office-note + .office-note { margin-top: 0.6rem; }
.backup-status { font-size: 0.84rem; color: var(--ink-faint); margin: 0; }

/* Admin: connections walkthrough + availability layout */
.conn-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
.day-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.2rem; }
.day-picker .chip { cursor: pointer; }
.time-row { display: flex; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }
.time-field { flex: 1 1 130px; }
.howto { margin: 0.6rem 0 0.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream-2); }
.howto > summary { cursor: pointer; padding: 0.6rem 0.9rem; font-weight: 600; color: var(--rust-deep); font-size: 0.9rem; list-style: none; }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary::before { content: "\25B8  "; }
.howto[open] > summary::before { content: "\25BE  "; }
.howto-body { padding: 0 0.9rem 0.9rem; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.55; }
.howto-body ol { margin: 0.4rem 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; }
.howto-body code { background: var(--cream); padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.85em; word-break: break-all; }
.howto-tip { margin-top: 0.6rem; font-size: 0.85rem; }

/* Admin: Day prep reminders */
.prep-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.prep-label { font-weight: 700; color: var(--ink); font-size: 0.95rem; text-align: center; flex: 1; }
.prep-list { display: flex; flex-direction: column; gap: 0.7rem; }
.prep-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream-2); padding: 0.7rem 0.8rem; }
.prep-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.prep-when { font-weight: 700; color: var(--rust-deep); font-variant-numeric: tabular-nums; }
.prep-who { font-weight: 600; }
.prep-type { font-weight: 500; color: var(--ink-faint); font-size: 0.85rem; }
.prep-btns { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.prep-btns .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.prep-empty { color: var(--ink-faint); font-size: 0.92rem; margin: 0.2rem 0; }

/* Diary: per-appointment reminder actions */
.appt-remind { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; margin-top: 0.45rem; }
.appt-remind-lbl { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }
.appt-remind-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* The same send group on the create/edit appointment card. It reuses the row's
   label and button classes above — one look for one thing — and adds only what
   a card needs that a row does not: a rule separating it from the Save/Cancel
   actions beneath, and a line for the result, since a card has no row to
   re-render as feedback. */
.appt-send { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start;
             margin: 1rem 0 0.2rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.appt-send-status { font-size: 0.82rem; color: var(--ink-soft); margin: 0.1rem 0 0; min-height: 1.1em; }

/* Document library: category headers, image preview, filter */
.library-cat { list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--rust-deep); margin: 0.8rem 0 0.2rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--line); }
.library-cat:first-child { margin-top: 0; }
/* The Show row sat hard against the panel edge: .library-add above it and
   .library-list below both carry their own horizontal padding, and this had
   none, so the label started where the panel did. Matched to the list beneath
   it — the two read as one column. */
.lib-filter-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.6rem; padding: 0 0.8rem; }
.lib-filter-row .field { width: auto; flex: 1; max-width: 240px; padding-left: 1rem; }
.reader-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; margin: 0 auto; border-radius: var(--r-sm); }

/* Document reader: active "sharing to screen" state */
#doc-share.active { background: var(--sage); border-color: var(--sage); color: #fff; }

/* Document reader: send-to-client status text */
.doc-send-status { font-size: 0.8rem; color: var(--ink-soft); margin-left: 0.2rem; flex: 1 1 100%; min-width: 0; order: 99; }
.library-status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-soft); min-height: 1.1em; }
.library-status.ok { color: var(--rust-deep); font-weight: 600; }

/* Screen-share control under the video feed */
.video-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.5rem 0 0.2rem; flex-wrap: wrap; }
.video-actions-hint { font-size: 0.8rem; color: var(--ink-soft); }
#screen-share.active { background: var(--sage); border-color: var(--sage); color: #fff; }
.video-actions-note { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.45; margin: 0.1rem 0 0.3rem; }

/* New-invoice form: aligned full-width field groups with breathing room */
.inv-form { display: flex; flex-direction: column; gap: 1rem; padding: 0.3rem 0; }
.inv-form .form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.inv-form .field-label { margin: 0; }
.inv-form .field { display: block; width: 100%; box-sizing: border-box; }

/* Diary appointment actions row (Generate Invoice / Email invoice / Edit) */
.appt-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }

/* PDF live-share page navigation bar */
.pdf-nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.2rem 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 0.6rem; }
.pdf-page { font-weight: 700; font-variant-numeric: tabular-nums; }
.pdf-nav .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pdf-nav-note { font-size: 0.78rem; color: var(--ink-faint); margin-left: auto; }

/* ---------- EMDR workspace ---------- */
.emdr-empty { text-align: center; color: var(--ink-faint); padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.emdr-area { display: flex; flex-direction: column; gap: 1rem; }
.emdr-clienthead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }
.emdr-card { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.emdr-h { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.2rem; }
.emdr-card .field-label { margin-top: 0.4rem; }
.emdr-card .field { display: block; width: 100%; box-sizing: border-box; }
.emdr-ta { padding: 0.6rem 0.9rem; resize: vertical; line-height: 1.5; font-family: var(--font-ui); }
.emdr-saved { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--sage); min-height: 1em; }
.emdr-pad-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin-top: 0.5rem; }
.emdr-keys { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.emdr-key {
  flex: 1 1 auto; min-width: 40px; min-height: 44px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--cream-2); color: var(--ink); font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform 0.1s var(--ease), background 0.15s var(--ease);
}
.emdr-key:hover { border-color: var(--rust); }
.emdr-key.hit { background: var(--rust); color: #fff; border-color: var(--rust-deep); transform: scale(0.94); }
.emdr-graph-wrap { margin-top: 0.6rem; }
.emdr-graph { width: 100%; height: 120px; background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-sm); }
.emdr-graph .suds-line { stroke: var(--rust); stroke-width: 2; }
.emdr-graph .suds-dot { fill: var(--rust); }
.emdr-graph .voc-line { stroke: var(--sage); stroke-width: 2; }
.emdr-graph .voc-dot { fill: var(--sage); }
.emdr-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.74rem; margin-top: 0.3rem; }
.emdr-legend .lg::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; }
.emdr-legend .lg-suds { color: var(--rust-deep); } .emdr-legend .lg-suds::before { background: var(--rust); }
.emdr-legend .lg-voc { color: var(--sage); } .emdr-legend .lg-voc::before { background: var(--sage); }
.emdr-log { list-style: none; margin: 0.6rem 0 0; padding: 0; max-height: 150px; overflow-y: auto; }
.emdr-logrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.emdr-logt { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.emdr-logkind { font-weight: 700; font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: var(--r-pill); }
.emdr-logkind.emdr-suds { color: var(--rust-deep); background: var(--rust-tint); }
.emdr-logkind.emdr-voc { color: var(--sage); background: rgba(var(--sage-fill-rgb), 0.15); }
.emdr-logv { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.emdr-log-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
#emdr-clear { margin-left: auto; }

/* EMDR — interweaves + closure */
.emdr-sub { font-size: 0.82rem; color: var(--ink-faint); margin: 0 0 0.3rem; }
.iw-group { margin-top: 0.5rem; }
.iw-theme { font-weight: 700; font-size: 0.9rem; color: var(--rust-deep); }
.iw-theme span { font-weight: 400; color: var(--ink-faint); }
.iw-list { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.iw-list li { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }
.iw-more { margin-top: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.iw-more summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--rust-deep); }
.iw-more .iw-list { margin-top: 0.4rem; }
.emdr-last { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin: 0 0 0.2rem; }
.emdr-close-row { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.emdr-close-row > div { flex: 1 1 6rem; min-width: 5rem; }
.emdr-close-row .field { width: 100%; box-sizing: border-box; }
.emdr-close-row .row-btn { flex: 0 0 auto; }
.emdr-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; margin-top: 0.6rem; cursor: pointer; }
.emdr-check input { width: 18px; height: 18px; }
.emdr-reminder { font-size: 0.8rem; color: var(--ink-faint); background: var(--rust-tint); border-radius: var(--r-sm); padding: 0.5rem 0.7rem; margin: 0.4rem 0 0; }

/* ---------- Modality tools (shared) ---------- */
.tabs { flex-wrap: wrap; }
.ctrl-grouplabel { font-weight: 700; display: block; margin-bottom: 0.2rem; }
.content.quiet .col-stage { display: none; }
.content.quiet .col-monitor { max-height: none; flex: 1; }
.btn.ghost.on, .btn.small.ghost.on { background: var(--rust); color: #fff; border-color: var(--rust-deep); }

/* CBT */
.cbt-emo-row, .cbt-rec-grid { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cbt-emo-row > div { flex: 1 1 8rem; }
.cbt-emo-row .field { width: 100%; box-sizing: border-box; }
.cbt-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cbt-chip { font-size: 0.8rem; padding: 0.3rem 0.6rem; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--cream-2); color: var(--ink-soft); cursor: pointer; }
.cbt-chip.on { background: var(--rust); color: #fff; border-color: var(--rust-deep); }
.cbt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cbt-rec { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.6rem 0.7rem; background: var(--cream-2); }
.cbt-rec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.cbt-rec-date { font-size: 0.8rem; color: var(--ink-faint); }
.cbt-rec-grid { flex-direction: column; gap: 0.3rem; }
.cbt-rec-cell { display: flex; flex-direction: column; }
.cbt-rec-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rust-deep); }
.cbt-rec-val { font-size: 0.9rem; white-space: pre-wrap; }
.cbt-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cbt-tag { font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: var(--r-pill); background: var(--rust-tint); color: var(--rust-deep); }

/* ACT */
.act-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.act-q { display: flex; flex-direction: column; gap: 0.25rem; }
.act-q-lbl { font-size: 0.74rem; font-weight: 700; color: var(--rust-deep); }
.act-q .field { width: 100%; box-sizing: border-box; resize: vertical; }
@container (max-width: 420px) { .act-matrix { grid-template-columns: 1fr; } }
.act-value-form { display: flex; flex-direction: column; gap: 0.5rem; }
.act-value-form .field { width: 100%; box-sizing: border-box; }
.act-value-nums { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.act-value-nums label { font-size: 0.82rem; display: flex; align-items: center; gap: 0.35rem; }
.act-value-nums .field { width: 4rem; }
.act-values-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.act-value { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); flex-wrap: wrap; }
.act-v-name { font-weight: 600; flex: 1 1 8rem; }
.act-v-meta { font-size: 0.8rem; color: var(--ink-soft); }
.act-v-del { margin-left: auto; }

/* DBT */
.dbt-emotions { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.dbt-emo { display: flex; align-items: center; gap: 0.7rem; }
.dbt-emo-name { flex: 0 0 5rem; font-size: 0.9rem; }
.dbt-range { flex: 1; }
.dbt-emo-val { flex: 0 0 1.4rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Sketch pad (therapist) */
.sketch-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.sketch-bar .switch { width: auto; min-height: 40px; padding: 0 0.9rem; border-radius: var(--r-pill); font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.sketch-bar .switch.on { background: var(--rust); color: #fff; border-color: var(--rust-deep); }
.sketch-tools { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.sk-swatches { display: flex; gap: 0.35rem; }
.sk-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--cream-2); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; }
.sk-swatch.on { box-shadow: 0 0 0 2px var(--rust-deep); }
.sk-width { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.sketch-wrap { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: #fff; aspect-ratio: 4 / 3; }
.sketch-wrap.live { border-color: var(--rust); box-shadow: 0 0 0 2px var(--rust-tint); }
.sketch-pad { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }

/* Diary — availability awareness */
.cal-cell.off { opacity: 0.4; }
.cal-cell.off .cal-num { color: var(--ink-faint); }
.cal-cell.off.selected, .cal-cell.off.today { opacity: 1; }
.agenda-offhint { font-size: 0.82rem; color: var(--ink-faint); background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; list-style: none; }
.note-session { font-family: var(--font-display); font-weight: 700; color: var(--rust-deep); margin-right: 0.5rem; }
.appt-offhours { display: inline-block; margin-left: 0.4rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--clay); }

/* Editable interweaves */
.iw-mine { margin-top: 0.7rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.iw-mine-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ink-soft); padding: 0.15rem 0; }
.iw-mine-del { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--cream); color: var(--ink-soft); cursor: pointer; line-height: 1; padding: 0; }
.iw-mine-del:hover { background: var(--alert); color: #fff; border-color: var(--alert); }
.iw-add { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.iw-add .field { flex: 1; }

/* Bilateral toggle now lives in the card under the video — slim it a touch
   and hide the ball display entirely when bilateral is off, to keep the
   client video as large as possible. */
.bcontrols-body .bilateral-toggle { min-height: var(--tap); font-size: 1.15rem; box-shadow: var(--shadow-sm); margin-bottom: 0.7rem; }
.bcontrols-body .bilateral-toggle .glyph { width: 26px; height: 26px; }
.preview-stage.off { display: none; }

/* Save-to-notes button rows in modality tools */
.note-row { margin-top: 0.4rem; }

/* Bilateral orb: one compact box that is the Start button when off and the
   moving ball when on. Same height in both states, so turning bilateral on
   never shrinks the client video. Tap the ball to stop. */
.bilateral-orb {
  position: relative; display: block; width: 100%; height: 76px;
  border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
  background: var(--rust); border: 1px solid var(--rust-deep);
  box-shadow: var(--shadow-sm); margin-bottom: 0.7rem;
  transition: background 0.2s var(--ease);
}
.bilateral-orb:active { transform: scale(0.99); }
.bilateral-orb .orb-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
}
.bilateral-orb .orb-hint {
  position: absolute; bottom: 5px; left: 0; right: 0; text-align: center;
  color: rgba(var(--on-dark-rgb), 0.65); font-size: 0.68rem; opacity: 0; pointer-events: none;
}
.bilateral-orb .bilateral-layer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #1E211F; opacity: 0; transition: opacity 0.2s var(--ease);
}
.bilateral-orb .mini-ball {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rust-light), var(--rust));
  box-shadow: 0 0 18px rgba(var(--rust-rgb), 0.6); will-change: transform;
}
.bilateral-orb.on { background: #1E211F; border-color: #000; }
.bilateral-orb.on .orb-label { display: none; }
.bilateral-orb.on .bilateral-layer { opacity: 1; }
.bilateral-orb.on .orb-hint { opacity: 1; }

/* ---------- Genogram ---------- */
.geno-toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.geno-toolbar .btn.active { background: var(--rust); color: #fff; border-color: var(--rust-deep); }
.geno-tb-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 0.15rem; }
.geno-toolbar .btn[disabled], .geno-toolbar .row-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.geno-hint { font-size: 0.8rem; color: var(--ink-faint); margin: 0 0 0.5rem; }
.geno-wrap { position: relative; }
.geno-svg { width: 100%; height: clamp(240px, 44vh, 520px); display: block; background: var(--cream-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); touch-action: none; }
.geno-sublabel { font-family: var(--font-ui); font-size: 26px; fill: var(--ink-faint); }
.geno-mark { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.geno-node { cursor: grab; }
.geno-node:active { cursor: grabbing; }
.geno-shape { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.geno-node.sel .geno-shape { stroke: var(--rust); stroke-width: 4; }
.geno-node.pick .geno-shape { stroke: var(--rust-deep); stroke-width: 4; stroke-dasharray: 5 4; }
.geno-label { font-family: var(--font-ui); font-size: 34px; fill: var(--ink); font-weight: 600; }
.geno-label-bg { fill: var(--cream-2); stroke: none; }
.geno-dead { stroke: var(--ink); stroke-width: 2.5; }
.geno-link { stroke: var(--ink-soft); stroke-width: 2.5; }
.geno-link-separated { stroke: var(--ink); }
.geno-link-child { stroke: var(--sage); }
.geno-link-partner { stroke: var(--ink); }
.geno-link-divorced { stroke: var(--ink); }
.geno-descent { stroke: var(--ink); stroke-width: 2.5; fill: none; }
.geno-status { font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; margin: 0.15rem 0 0.35rem; }
.geno-disc { margin-left: auto; }
.geno-disc.active { background: var(--alert); color: #fff; border-color: var(--alert); }
.geno-edit-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.geno-person-form { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; overflow: auto; }
.geno-person-form .field { width: 100%; box-sizing: border-box; }


/* ---------- Banking & reconciliation (admin) ---------- */
.bank-controls { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; margin: 0.6rem 0 0.4rem; }
.bank-region { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.bank-region-lbl { font-size: 0.85rem; color: var(--ink-soft); font-weight: 600; margin-right: 0.2rem; }
.bank-region .seg-btn { padding: 0.4rem 0.7rem; }
.bank-import-btn { cursor: pointer; }
.bank-empty { color: var(--ink-faint); font-size: 0.9rem; margin: 0.6rem 0; }
.bank-note { color: var(--ink-faint); font-size: 0.88rem; margin: 0.4rem 0; }
.bank-h { font-family: var(--font-display); font-size: 1.05rem; margin: 1.1rem 0 0.5rem; }

.bank-summary { background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.7rem 0.85rem; margin-top: 0.6rem; }
.bank-sum-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.bank-sum-meta { font-size: 0.8rem; color: var(--ink-faint); }
.bank-sum-stats { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin: 0.5rem 0; font-size: 0.85rem; color: var(--ink-soft); }
.bank-sum-stats span { white-space: nowrap; }

.bank-list { display: flex; flex-direction: column; gap: 0.45rem; }
.bank-item { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.6rem 0.75rem; background: #fff; }
.bank-item.is-matched { background: rgba(var(--sage-fill-rgb), 0.12); border-color: rgba(var(--sage-fill-rgb), 0.5); }
.bank-item-main { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; min-width: 12rem; }
.bank-item-action { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end; }
.bank-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.bank-desc { color: var(--ink); }
.bank-date { color: var(--ink-faint); font-size: 0.8rem; }
.bank-select { min-width: 13rem; max-width: 100%; padding: 0.4rem 0.5rem; font-size: 0.85rem; }
.bank-matched { color: var(--sage-deep); font-weight: 600; font-size: 0.88rem; }
.bank-suggest { flex-basis: 100%; text-align: right; font-size: 0.78rem; color: var(--ink-faint); }
.bank-out-item { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; align-items: baseline; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: 0.45rem 0.65rem; }

.bank-map { display: flex; flex-direction: column; gap: 0.45rem; background: var(--cream-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0.8rem; margin-top: 0.6rem; }
.bank-map label { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; font-size: 0.88rem; }
.bank-map select { flex: 1; max-width: 60%; padding: 0.35rem 0.5rem; }
.bank-help { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.bank-help summary { cursor: pointer; font-weight: 600; color: var(--rust); }
.bank-help p { margin: 0.5rem 0 0; color: var(--ink-faint); }
.row-btn.primary { background: var(--rust); color: #fff; border-color: var(--rust-deep); }

/* ---------- Admin calendar widget ---------- */
.cal-card { display: flex; flex-direction: column; min-width: 0; }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0.4rem 0 0.6rem; }
.cal-month { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; min-width: 11rem; text-align: center; }
.cal-grid-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.cal-grid-head span { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-cell { min-height: 80px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 3px 4px 5px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
.cal-cell:hover { border-color: var(--rust); }
.cal-cell.other { background: var(--cream-2); opacity: 0.6; }
.cal-cell.off { background: repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 6px, #fff 6px, #fff 12px); }
.cal-cell.today { border-color: var(--rust-deep); box-shadow: inset 0 0 0 1px var(--rust-deep); }
.cal-cell.drop-hover { border-color: var(--rust-deep); background: rgba(var(--rust-rgb), 0.12); }
.cal-cell-num { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); align-self: flex-end; }
.cal-cell.today .cal-cell-num { color: var(--rust-deep); }
.cal-chip { font-size: 0.72rem; line-height: 1.2; font-weight: 600; padding: 3px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; touch-action: none; border: 1px solid transparent; }
.cal-chip.cal-booked { background: rgba(var(--sage-fill-rgb), 0.18); color: var(--ink); border-color: rgba(var(--sage-fill-rgb), 0.45); }
.cal-chip.cal-confirmed { background: var(--rust); color: #fff; }
.cal-chip.dragging { opacity: 0.35; }
.cal-chip-drag { box-shadow: var(--shadow-md); transform: rotate(-2deg); opacity: 0.95; }
.cal-legend { font-size: 0.76rem; color: var(--ink-faint); margin: 0.6rem 0 0; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.cal-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.cal-key.cal-booked { background: rgba(var(--sage-fill-rgb), 0.45); }
.cal-key.cal-confirmed { background: var(--rust); }
.cal-form-row { display: flex; gap: 0.6rem; }
.cal-form-row > div { flex: 1; }
@media (max-width: 560px) { .cal-cell { min-height: 64px; } .cal-chip { font-size: 0.66rem; } }

/* ---------- Calendar: week / day time grid + mode switch ---------- */
.cal-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0 0 0.8rem; }
.cal-modes .seg-btn { min-width: 5rem; }
.cal-time-head { display: grid; grid-template-columns: 52px repeat(var(--cols, 7), minmax(0, 1fr)); gap: 0; margin-bottom: 0; }
.cal-dhead { text-align: center; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.cal-dhead.today { color: var(--rust-deep); }
.cal-dhead.off { color: var(--ink-faint); font-weight: 600; }
.cal-time { display: grid; grid-template-columns: 52px repeat(var(--cols, 7), minmax(0, 1fr)); max-height: 56vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.cal-gutter { background: var(--cream); }
.cal-hr { position: relative; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.cal-hr span { position: absolute; top: -8px; right: 6px; font-size: 0.7rem; color: var(--ink-faint); background: var(--cream); padding: 0 3px; }
.cal-col { position: relative; border-left: 1px solid var(--line); cursor: pointer; background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-repeat: repeat-y; }
.cal-col.today { background-color: rgba(var(--rust-rgb), 0.045); }
.cal-col.off { background-color: rgba(var(--ink-rgb), 0.035); }
.cal-col.drop-hover { background-color: rgba(var(--rust-rgb), 0.12); box-shadow: inset 0 0 0 2px var(--rust); }
.cal-block { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 3px 6px; font-size: 0.74rem; line-height: 1.18; overflow: hidden; cursor: grab; touch-action: none; border: 1px solid transparent; box-shadow: var(--shadow-sm); }
.cal-block.cal-booked { background: rgba(var(--sage-fill-rgb), 0.22); border-color: rgba(var(--sage-fill-rgb), 0.5); color: var(--ink); }
.cal-block.cal-confirmed { background: var(--rust); color: #fff; }
.cal-block.dragging { opacity: 0.35; }
.cal-block b { font-weight: 700; }
.cal-block-sub { display: block; font-size: 0.66rem; opacity: 0.82; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
@media (max-width: 560px) { .cal-time { max-height: 70vh; } }

/* destructive .btn variant (used by admin: turn off lock / turn off encryption) */
.btn.danger { color: var(--alert); border-color: rgba(var(--alert-rgb), 0.35); }
.btn.danger:hover { background: rgba(var(--alert-rgb), 0.08); }

/* ============================================================
   Client documents (records.html) — send / receive / store
   ============================================================ */
.cd-docs { margin-top: 0.4rem; }
/* LOADING AND FAILED ARE DIFFERENT STATES AND MUST NOT LOOK ALIKE. The
   failure used to be printed with .cd-docs-loading, so "still working" and
   "gave up" were the same faint grey line and a therapist could not tell
   which she was looking at — she would wait on a section that had already
   stopped. Loading stays quiet; failed is bordered, in the alert colour,
   and says what to do. */
.cd-docs-loading { color: var(--ink-faint); font-size: 0.9rem; padding: 0.4rem 0; }
.cd-docs-error {
  border: 1px solid var(--alert); border-radius: var(--r-md);
  background: var(--cream-2); padding: 0.8rem 0.9rem; margin: 0.4rem 0;
}
.cd-docs-error-msg { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.5; }
/* The detail line, in the quietest type there is — the same job Admin's
   running-version line does. She will not trip over it; the person she rings
   can act on it, and on a tablet there is no console to get it from. */
.cd-docs-error-detail {
  margin: 0.6rem 0 0; color: var(--ink-faint); font-size: 0.78rem;
  font-family: var(--font-ui); word-break: break-word;
}
.cd-progress { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.cd-stage-h { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rust-deep); margin: 0.9rem 0 0.4rem; }
.cd-stage { display: flex; flex-direction: column; gap: 0.5rem; }
.cd-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.7rem 0.85rem; }
.cd-doc-main { min-width: 12rem; flex: 1 1 auto; }
.cd-doc-top { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.cd-doc-label { font-weight: 600; color: var(--ink); }
.cd-doc-meta { font-size: 0.78rem; color: var(--ink-faint); margin-top: 0.25rem; }
.cd-status { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: var(--r-pill); border: 1px solid transparent; }
.cd-status-todo { background: var(--sand); color: var(--ink-soft); border-color: var(--line); }
.cd-status-sent { background: var(--rust-tint); color: var(--rust-deep); border-color: rgba(var(--rust-rgb), 0.28); }
.cd-status-received { background: rgba(var(--ok-fill-rgb), 0.16); color: var(--ok-deep); border-color: rgba(var(--ok-fill-rgb), 0.4); }
.cd-doc-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.cd-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.9rem; }
.cd-add .field { flex: 1 1 12rem; min-width: 9rem; }
.cd-add-stage { flex: 0 0 auto; width: auto; }
.cd-tpls { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); padding: 0.4rem 0.85rem; }
.cd-tpls > summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 0.35rem 0; list-style: revert; }
.cd-tpls-hint { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin: 0.3rem 0 0.7rem; }
.cd-tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.cd-tpl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0 0.2rem; }
.cd-tpl-label { font-weight: 600; color: var(--ink); flex: 0 0 9rem; }
.cd-tpl-file { font-size: 0.8rem; color: var(--ink-soft); flex: 1 1 auto; }
.cd-tpl-none { color: var(--ink-faint); }
.cd-flash { font-size: 0.8rem; color: var(--ink-soft); margin: 0.4rem 0 0; min-height: 1.1em; }
@media (max-width: 560px) {
  .cd-doc { flex-direction: column; align-items: stretch; }
  .cd-doc-actions { justify-content: flex-start; }
  .cd-tpl-label { flex-basis: 100%; }
}

/* ============================================================
   Income & tax year (admin.html) — taxyear.js

   TABULAR FIGURES ON EVERY COLUMN OF MONEY. These tables are right-aligned
   but were set in PROPORTIONAL digits, so the columns lined up only because
   Hanken's digits happen to be nearly equal-width. That is luck, not
   typesetting: a 1 is narrower than a 0 in most faces, and the moment
   --font-display becomes a serif the decimal points in a year's Received
   column stop being a straight line.

   Correct on its own merits, and deliberately landed BEFORE the serif so
   that if a column looks wrong afterwards the typeface is not the suspect.
   ============================================================ */
.ty-note { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 0.9rem; }
.ty-empty { color: var(--ink-faint); font-size: 0.9rem; }
.ty-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.ty-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 700; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line-strong); }
.ty-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.ty-table .r, .ty-months .r, .ty-invs .r { text-align: right; }
.ty-table tr:last-child td { border-bottom: none; }
.ty-current td { background: var(--rust-tint); }
.ty-y { font-weight: 600; }
.ty-badge { margin-left: 0.45rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rust-deep); background: #fff; border: 1px solid rgba(var(--rust-rgb), 0.3); border-radius: var(--r-pill); padding: 0.1rem 0.4rem; }
.ty-out { color: var(--ink-soft); }
.ty-detail { margin-top: 1.1rem; padding: 1rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto; }
.ty-detail-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.ty-detail-head strong { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.ty-detail-range { font-size: 0.8rem; color: var(--ink-faint); }
.ty-detail-head .btn { margin-left: auto; }
.ty-detail-sub { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 700; margin: 1rem 0 0.4rem; }
.ty-months, .ty-invs { width: 100%; border-collapse: collapse; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.ty-months th, .ty-invs th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); font-weight: 700; padding: 0.3rem 0.45rem; border-bottom: 1px solid var(--line); }
.ty-months td, .ty-invs td { padding: 0.35rem 0.45rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.ty-months tr:last-child td, .ty-invs tr:last-child td { border-bottom: none; }
@media (max-width: 560px) { .ty-detail { padding: 0.7rem; } .ty-table, .ty-months, .ty-invs { font-size: 0.82rem; } }
/* tax-year card: contain wide tables + compact per-row View action */
.ty-body { overflow-x: auto; }
.ty-view {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--rust); text-decoration: underline;
  white-space: nowrap;
}
.ty-view.on { font-weight: 700; color: var(--rust-deep); text-decoration: none; }
.ty-view:hover { opacity: .8; }
/* bank reconciliation — client-invoice tick allocation (Chunk 2) */
.bank-ticks { display: flex; flex-direction: column; gap: .25rem; margin: .35rem 0; }
.bank-tick  { display: flex; align-items: center; gap: .45rem; font-size: .85rem; }
.bank-alloc { font-size: .82rem; color: var(--ink-soft); }
.bank-item.is-dismissed { opacity: .45; }
/* invoice overlay — manual payment history + record form (Chunk 3) */
.inv-pay-h { font-size: .8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin-top: .8rem; }
.inv-pay-list { list-style: none; margin: .3rem 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.inv-pay-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.inv-pay-list li .inv-pay-x { margin-left: auto; }
.inv-pay-empty { color: var(--ink-faint); }
.inv-pay-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .45rem; }
.inv-pay-form .field { max-width: 9rem; }
/* bank auto-match rules + client credit (Chunk 2d) */
.bank-rule-opt { display: flex; align-items: center; gap: .4rem; font-size: .82rem; margin-top: .3rem; color: var(--ink-soft); }
.bank-rules-list { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.bank-rules-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.bank-rules-list li .bank-rule-x { margin-left: auto; }
.bank-rule-empty { color: var(--ink-faint); }
.inv-credit { color: var(--rust); font-weight: 600; }