/* Local :root override removed — global styles.css provides the
   luxe design tokens (bone/ocean/sage/Fraunces/DM Sans). */

/* Base typography */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5 { font-family: var(--serif); font-weight: 400; line-height: 1.15; color: var(--ink); letter-spacing: 0.03em; }
h1 { font-size: clamp(28px,4vw,44px); letter-spacing: 0.04em; }
h2 { font-size: clamp(22px,3vw,32px); letter-spacing: 0.035em; }
h3 { font-size: 20px; letter-spacing: 0.03em; }
p { line-height: 1.7; }

/* Override body to remove page constraints for this full-bleed layout */
body { margin: 0; padding: 0; }
/* Topbar — local layout only. Visual styling (black bg, white text, hard
   buttons, brand mark) inherited from styles.css. */
.topbar { padding: 12px 24px !important; position: relative !important; z-index: 100; display: flex !important; align-items: center; gap: 24px; }

/* .brand layout — visual styling inherited from styles.css. */
.brand { display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0; }
.nav-actions { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.chip { display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.04em;background:var(--surface);color:var(--muted);border:1px solid var(--border);white-space:nowrap; }
.chip.green { background:var(--green-light);color:var(--green);border-color:rgba(45,106,79,.2); }
.chip.amber { background:var(--amber-light);color:var(--amber);border-color:rgba(181,98,10,.2); }
/* Presence pill: status dot + small-caps label. Offline = hollow dot on a
   bordered card pill (visible on cream, unlike the old surface-on-surface chip). */
.pres-chip { display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--card,#fff);border:1px solid var(--border);white-space:nowrap; }
.pres-chip .pres-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted);opacity:.55; }
.pres-chip.green { color:var(--green);background:var(--green-light,#E8ECDF);border-color:rgba(90,107,87,.3); }
.pres-chip.green .pres-dot { background:var(--green);box-shadow:none;opacity:1; }
.pres-chip.amber { color:var(--amber);border-color:rgba(181,98,10,.3); }
.pres-chip.amber .pres-dot { background:var(--amber);box-shadow:none;opacity:1; }
.chip.blue { background:var(--accent-light);color:var(--accent);border-color:rgba(61,90,128,.2); }
.chip.red { background:var(--red-light);color:var(--red);border-color:rgba(184,50,50,.2); }
input[type="text"],input[type="email"],input[type="password"],input[type="number"],textarea,select { width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;font-family:var(--sans);font-weight:300;color:var(--ink);outline:none;transition:border-color .2s;appearance:none; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); }
textarea { resize:vertical;min-height:120px;line-height:1.6; }
label { font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;display:block;margin-bottom:6px; }
.form-stack { display:flex;flex-direction:column;gap:16px; }
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border);border-radius:3px; }
.spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }

/* ── Layout ── */
:root { --gutter: clamp(28px, 3.2vw, 64px); }
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }

/* ── Shell: FLEX row (was grid) — fixes Safari flex:1 child height propagation ──
   NOTE: visibility starts VISIBLE. We previously hid the shell until role was
   confirmed (to prevent a client-side flash before redirect), but that meant
   any JS error before the reveal line left users staring at a blank page.
   The redirect for wrong-role users still happens via window.location.replace,
   so the worst case now is a ~200ms flash instead of an indefinite blank. */
.hub-shell {
  display: flex;
  flex-direction: row;
  gap: 0;
  flex: 1;
  visibility: visible;
  min-height: 0;
  overflow: hidden;
}

/* ── Sidebar — LUXE ivory shiplap ── */
.hub-sidebar {
  background:
    repeating-linear-gradient(0deg,
      rgba(20, 19, 15, 0.05) 0,
      rgba(20, 19, 15, 0.05) 1px,
      transparent 1px,
      transparent 80px),
    var(--ivory);
  border-right: 1px solid var(--line-w);
  width: 240px;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s ease;
  position: relative;
}
/* Hamburger toggle — styled as a sidebar item */
.sidebar-toggle { font-size: 18px !important; }
.hub-sidebar.collapsed .sidebar-toggle .si-label { opacity: 0 !important; width: 0 !important; }
.sidebar-items-wrap { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 8px; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-section-label {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--whisper); font-weight: 600; padding: 14px 4px 5px;
  white-space: nowrap; overflow: hidden;
  transition: opacity 0.18s, height 0.22s, padding 0.22s;
}
.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 0;
  font-size: 13.5px; color: var(--ink-soft);
  cursor: pointer; border: none; background: transparent;
  text-align: left; font-family: var(--sans); font-weight: 400;
  transition: background 0.15s, color 0.15s, padding 0.22s; width: 100%; text-decoration: none;
  white-space: nowrap; overflow: hidden;
  position: relative;
}
.sidebar-item:hover { background: var(--bone); color: var(--ink); }
.sidebar-item:hover .si-icon { color: var(--ocean-d); }
.sidebar-item.active {
  background: var(--paper); color: var(--ink); font-weight: 500;
  box-shadow: 0 1px 2px rgba(31,61,82,0.05), 0 0 0 1px var(--line-w);
}
.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -1px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--ocean-d);
  border-radius: 2px;
}
/* Collapsed mode: move the active accent bar from the left edge to a
   centered short underline below the icon — keeps the icon visually
   centered in the 60px-wide sidebar. */
.hub-sidebar.collapsed .sidebar-item.active::before {
  left: 50%; top: auto; bottom: 4px;
  width: 16px; height: 2px;
  transform: translateX(-50%);
}
.sidebar-item.active .si-icon { color: var(--ocean-d); opacity: 1; }
.sidebar-item .si-icon { font-size: 14px; width: 20px; flex-shrink: 0; color: var(--muted); opacity: 0.85; transition: color 0.22s; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.sidebar-item .si-icon i { display: inline-block; line-height: 1; }
.si-label { transition: opacity 0.18s; white-space: nowrap; overflow: hidden; flex: 1; }
.sidebar-badge {
  margin-left: auto; background: var(--ocean-d); color: #fff;
  font-size: 10px; font-weight: 500; padding: 2px 7px;
  border-radius: 999px; min-width: 20px; text-align: center; flex-shrink: 0;
  letter-spacing: 0.02em;
}
.sidebar-badge.red { background: var(--red); }
.sidebar-divider { height: 1px; background: var(--line-w); margin: 6px 4px; flex-shrink: 0; transition: margin 0.22s; }
.sidebar-profile {
  padding: 14px; border-bottom: 1px solid var(--line-w);
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  transition: padding 0.22s; overflow: hidden;
}
.sidebar-signout {
  padding: 4px 10px 10px; flex-shrink: 0;
  border-top: 1px solid var(--line-w);
}
.sidebar-profile-info { overflow: hidden; transition: opacity 0.18s, width 0.22s; white-space: nowrap; }
.sidebar-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ocean-w); color: var(--ocean-d);
  border: 1px solid var(--line-w);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 13px; font-weight: 500; flex-shrink: 0; overflow: hidden;
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-profile-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.sidebar-profile-role { font-size: 11px; color: var(--muted); }

/* Hamburger toggle that sits inside the profile card, right-aligned. */
.sidebar-profile-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sidebar-profile-toggle:hover { background: var(--surface); color: var(--ink); border-color: var(--border); }
.sidebar-profile-toggle i { font-size: 18px; }
/* When the sidebar is collapsed: hide the avatar entirely and show only
   the hamburger toggle, centered, so the user has a single clear affordance
   to re-expand the sidebar. */
.hub-sidebar.collapsed .sidebar-avatar { display: none; }
.hub-sidebar.collapsed .sidebar-profile { justify-content: center; padding: 12px 0; gap: 0; }
.hub-sidebar.collapsed .sidebar-profile-toggle { margin-left: 0; }

/* ── Collapsed sidebar ── */
.hub-sidebar.collapsed { width: 60px; }
.hub-sidebar.collapsed .sidebar-section-label { opacity: 0; height: 0; padding: 0; pointer-events: none; }
.hub-sidebar.collapsed .si-label { opacity: 0; width: 0; pointer-events: none; }
.hub-sidebar.collapsed .sidebar-badge { opacity: 0; width: 0; min-width: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }
.hub-sidebar.collapsed .sidebar-item { justify-content: center; padding: 10px; gap: 0; }
.hub-sidebar.collapsed .sidebar-items-wrap { padding: 4px 8px 8px; }
.hub-sidebar.collapsed .sidebar-divider { margin: 6px 8px; }
.hub-sidebar.collapsed .sidebar-profile { justify-content: center; padding: 12px 0; gap: 0; }
.hub-sidebar.collapsed .sidebar-signout .sidebar-item { justify-content: center; padding: 10px; gap: 0; }
.hub-sidebar.collapsed .sidebar-profile-info { opacity: 0; width: 0; }

/* ── Main content — no padding, hero touches sidebar ── */
.hub-main {
  padding: 0 0 0;
  background: var(--bg);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}
/* Reliable bottom breathing room — padding-bottom on a flex overflow container is clipped in WebKit */
.hub-main::after { content: ''; display: block; height: 56px; flex-shrink: 0; }
.section { display: none; }
.section.active { display: flex; flex-direction: column; gap: 24px; }
/* Full-height sections: fill hub-main so their internal panes scroll */
#section-clients.active,
#section-journal.active,
#section-todo.active,
#section-notes.active,
#section-boards.active,
#section-assignments.active { flex: 1; min-height: 0; }
/* Bottom breathing room for every master-detail section. The inner
   widgets (clients-layout, notes-shell) get a generous
   min-height below so they fill the screen comfortably instead of
   collapsing to content size; this padding ensures there's always
   visible margin between the widget bottom and the page edge.
   The 56px .hub-main::after sits below this padding on the
   sections that don't suppress it. */
#section-clients.active,
#section-notes.active,
#section-assignments.active { padding-bottom: 40px; }

/* Substantial min-height on the three big master-detail widgets so
   the user gets a comfortable working surface regardless of how
   much hero / filter chrome sits above. Clamped: at least 560px on
   small viewports, scales with the viewport on larger screens, and
   capped at 1200px so 4K monitors don't blow it out. With a 240px
   sidebar at standard zoom, the widget is comfortably taller than
   most laptop screens; collapsing the sidebar (60px) automatically
   widens it because hub-main is flex:1 in the shell row.
   The `.hub-main` ancestor lifts specificity above the bare class
   selectors below that set `min-height: 0` for flex-shrink behavior
   — we want the widget to grow generously, not collapse to content. */
.hub-main .clients-layout,
.hub-main .notes-shell {
  min-height: clamp(560px, calc(100vh - 280px), 1200px);
}
/* Journal section: fills hub-main, journal-app fills remaining height.
   Side + bottom padding gives the journal-app and gdocs panel breathing
   room from the page edges instead of slamming flush. */
/* My Journal tab: the 3-panel app fills the first screen (viewport-height,
   not a brittle offset calc), and the "Recent Entries" log sits below it —
   reachable by scrolling. The section scrolls; the app's own panels scroll
   internally. Google Docs / Full Entry Log tabs hide the app + log and let
   their panel fill (flex:1) — JS toggles which panel is visible. */
#section-journal.active { flex: 1 !important; min-height: 0 !important; gap: 0 !important; padding: 12px 16px 20px !important; overflow-y: auto !important; overflow-x: hidden !important; }
#section-journal .tj-journal-app { flex: 0 0 auto !important; height: 84vh !important; min-height: 580px !important; overflow: hidden !important; }
#section-journal .tj-gdocs-panel { flex: 1 !important; min-height: 0 !important; height: auto !important; }
/* Full Entry Log panel fills the viewport on its tab. */
#section-journal .el-panel { flex: 1 !important; min-height: 0 !important; }
/* Recent Entries log: visibility is driven by tjSwitchTab (shown on the
   My Journal tab only). No display override here — that previously hid it. */
/* Suppress bottom spacer for full-height sections that manage their own scroll */
.hub-main:has(#section-journal.active)::after,
.hub-main:has(#section-todo.active)::after,
.hub-main:has(#section-clients.active)::after,
.hub-main:has(#section-notes.active)::after,
.hub-main:has(#section-boards.active)::after,
.hub-main:has(#section-assignments.active)::after { display: none; }
/* Boards mirrors the journal: workspace fills the first screen (78vh, set
   inline on #boards-mount) and the section scrolls so "Recent Boards" sits
   below, reachable by scrolling down. Spacer suppressed (above) + journal
   gutters so it fills fully. */
#section-boards.active { padding: 12px 16px 20px; overflow-y: auto; overflow-x: hidden; }
#section-boards #boardTrendsSection { flex-shrink: 0; }
/* Force the workspace to fill the first screen (78vh), overriding the
   whiteboard's own .wb-host/.wb-root height:100%/min-height:600 which can
   otherwise shrink the mounted board. wb-root fills the 78vh mount. */
/* Fill to the bottom of the screen. A percentage height on a flex-item's
   child resolves unreliably in WebKit (it falls back to min-height, leaving
   the board cut short), so pin to the viewport like the journal app does. */
#section-boards #boards-mount { height: calc(100vh - 92px) !important; min-height: 520px !important; flex: 0 0 auto !important; border-bottom: 1px solid var(--border) !important; }
#section-boards #boards-mount .wb-root { height: 100% !important; min-height: 0 !important; }
/* Recent Boards rows — the clinician doesn't load the client's journal CSS,
   so the shared .jlog-* row styles (used by recent-rows.js) live here too. */
/* Separate the workspace from Recent Boards with whitespace, not a floating
   rule — the bordered .jlog-card below already frames the list. */
.jlog-section { padding:44px 0 48px; }
.jlog-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding:0 20px; }
.jlog-header h3 { font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:0; margin:0; color:var(--ink); }
.jlog-header span { font-size:12px; color:var(--muted); }
.jlog-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg,0); overflow:hidden; }
.jlog-entry { display:flex; align-items:center; gap:16px; padding:14px 20px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; min-width:0; }
.jlog-entry:last-child { border-bottom:none; }
.jlog-entry:hover { background:var(--surface); }
.jlog-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.jlog-meta { flex-shrink:0; width:104px; }
.jlog-date { font-size:12px; color:var(--muted); white-space:nowrap; }
.jlog-body { flex:1; min-width:0; display:flex; align-items:baseline; gap:12px; overflow:hidden; }
.jlog-subject { font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; flex-shrink:0; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.jlog-topic { flex-shrink:0; font-size:11px; font-weight:500; letter-spacing:0.03em; color:var(--accent); background:color-mix(in srgb, var(--accent) 11%, transparent); border-radius:999px; padding:2px 9px; white-space:nowrap; }
.jlog-excerpt { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.jlog-tags { display:flex; gap:5px; flex-shrink:0; overflow:hidden; }
.jlog-tag { font-size:10.5px; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:1px 8px; white-space:nowrap; }
.jlog-words { font-size:12px; color:var(--muted); flex-shrink:0; }
.jlog-delete { flex-shrink:0; background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; padding:2px 4px; border-radius:4px; opacity:0.55; transition:opacity 0.15s, color 0.15s; line-height:1; }
.jlog-entry:hover .jlog-delete { opacity:1; }
.jlog-delete:hover { color:var(--red,#c0392b); }
@media (hover:none) { .jlog-delete { opacity:1; } }
.jlog-empty { padding:28px 20px; text-align:center; color:var(--muted); font-size:13px; }
/* To-Do section: fills hub-main and scrolls internally */
#section-todo.active { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; }
/* Clinical framework picker */
/* Clinical-framework picker: grouped dropdown + live description panel. */
.cf-control { max-width: 560px; }
.cf-select { width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 11px 14px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.cf-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cf-desc-panel { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.cf-desc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cf-desc-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cf-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }
.cf-desc-body { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
/* Journal log (below the editor, visible when scrolling) */
.tj-jlog-section { padding: 28px 32px 48px; }
.tj-jlog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tj-jlog-header h3 { font-size: 17px; font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
.tj-jlog-header span { font-size: 12px; color: var(--muted); }
.tj-jlog-card { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: 0; overflow: hidden; background: var(--card); }
.tj-jlog-entry { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.tj-jlog-entry:last-child { border-bottom: none; }
.tj-jlog-entry:hover { background: var(--surface); }
.tj-jlog-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; }
.tj-jlog-meta { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.tj-jlog-date { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tj-jlog-body { flex: 1; min-width: 0; }
.tj-jlog-subject { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-jlog-excerpt { font-size: 12px; color: var(--muted); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-jlog-words { font-size: 11px; color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.tj-jlog-delete { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 4px; border-radius: 4px; opacity: 0.55; transition: opacity 0.15s, color 0.15s; line-height: 1; }
.tj-jlog-entry:hover .tj-jlog-delete { opacity: 1; }
.tj-jlog-delete:hover { color: var(--red, #c0392b); }
@media (hover: none) { .tj-jlog-delete { opacity: 1; } }
.tj-jlog-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.8; }

/* ── In-app rich-text editor (Google Docs editing) ── */
.as-rte-toolbar { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 7px 12px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.as-rte-toolbar select { width: auto; max-width: 170px; flex: 0 0 auto; font-size: 12px; padding: 4px 24px 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); cursor: pointer; }
/* Icon format buttons only — exclude the .btn Cancel/Save buttons so they
   keep their normal width and don't collapse into squished squares. */
.as-rte-toolbar > button:not(.btn) { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; transition: background .12s, border-color .12s; }
.as-rte-toolbar > button:not(.btn):hover { background: var(--surface); border-color: var(--ink); }
.as-rte-color { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; position: relative; font-size: 13px; }
.as-rte-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Gray canvas that holds the page (Google Docs print-layout feel) */
.as-rte-canvas { flex: 1; min-height: 0; overflow-y: auto; background: #e9e9e7; padding: 28px 16px; }
/* The editable "page": white 8.5in sheet, ~0.9in margins, drop shadow */
.as-rte-surface { max-width: 816px; margin: 0 auto; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,0.18); border-radius: 2px; padding: 76px 84px; min-height: 1056px; color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.7; outline: none; }
.as-rte-surface:focus { outline: none; }
.as-rte-surface h1 { font-size: 22px; margin: 0 0 10px; }
.as-rte-surface h2 { font-size: 18px; margin: 16px 0 8px; }
.as-rte-surface h3 { font-size: 15px; margin: 14px 0 6px; }
.as-rte-surface p { margin: 0 0 10px; }
.as-rte-surface ul, .as-rte-surface ol { margin: 0 0 10px; padding-left: 24px; }
.as-rte-surface a { color: #1a73e8; }
/* Editable spreadsheet grid */
.as-grid-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--card); }
.as-grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.as-grid-cell { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; color: var(--ink); min-width: 96px; max-width: 320px; outline: none; white-space: pre-wrap; }
.as-grid-cell:focus { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.as-grid tr:first-child .as-grid-cell { font-weight: 600; background: var(--surface); }

/* ── Full Entry Log (therapist journal) ── */
.el-panel { display:flex; flex-direction:column; flex:1; min-height:0; border:1px solid var(--border); border-top:none; overflow:hidden; background:var(--bg); }
.el-topbar { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--card); flex-shrink:0; flex-wrap:wrap; }
.el-search-wrap { display:flex; align-items:center; gap:8px; flex:1; min-width:180px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; }
.el-search-wrap input { border:none; background:transparent; font-size:13px; outline:none; flex:1; color:var(--ink); }
.el-controls { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.el-controls select { font-size:12px; padding:7px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--ink); cursor:pointer; }
.el-view-toggle { display:flex; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px; }
.el-vbtn { width:30px; height:30px; border:none; background:transparent; border-radius:6px; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:14px; transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.el-vbtn.active { background:var(--card); color:var(--ink); box-shadow:0 1px 3px var(--shadow); }
.el-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); background:var(--card); flex-shrink:0; padding:0 20px; }
.el-tab { background:none; border:none; border-bottom:2px solid transparent; padding:11px 16px; font-size:13px; font-family:var(--sans); font-weight:500; color:var(--muted); cursor:pointer; transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; display:flex; align-items:center; gap:6px; margin-bottom:-1px; }
.el-tab.active { color:var(--ink); border-bottom-color:var(--accent); }
.el-content { flex:1; overflow-y:auto; padding:20px; min-height:0; }
.el-group-header { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:20px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.el-group-header:first-child { margin-top:0; }
.el-list-item { display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:6px; cursor:pointer; transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.el-list-item:hover { border-color:var(--accent); box-shadow:0 2px 8px var(--shadow); }
.el-list-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:5px; }
.el-list-main { flex:1; min-width:0; }
.el-list-subject { font-size:14px; font-weight:500; color:var(--ink); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.el-list-excerpt { font-size:12px; color:var(--muted); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.el-list-meta { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.el-list-date { font-size:11px; color:var(--muted); }
.el-list-words { font-size:11px; color:var(--muted); }
.el-label-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:500; background:var(--accent-light); color:var(--accent); border:1px solid rgba(61,90,128,.15); margin-right:4px; }
.el-add-label { background:none; border:1px dashed var(--border); border-radius:999px; padding:2px 8px; font-size:10px; color:var(--muted); cursor:pointer; font-family:var(--sans); }
.el-add-label:hover { border-color:var(--accent); color:var(--accent); }
/* Lineage: main entry + derived dropdown in the entry log */
.el-lineage-toggle { background:none; border:1px solid var(--border); border-radius:999px; padding:2px 9px; font-size:10px; color:var(--accent); cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; gap:4px; }
.el-lineage-toggle:hover { border-color:var(--accent); background:var(--surface); }
.el-lineage-toggle i { transition:transform .15s; font-size:9px; }
.el-lineage-toggle.is-open i { transform:rotate(180deg); }
.el-lineage-derived { margin:0 0 6px 22px; padding-left:14px; border-left:2px solid var(--border); }
.el-list-derived { background:var(--surface); }
.el-derived-prompt { font-size:11px; color:var(--accent); font-style:italic; margin:1px 0 4px; display:flex; align-items:center; gap:5px; }
.el-derived-prompt i { font-size:11px; opacity:.7; }
.el-list-actions { display:flex; gap:6px; flex-shrink:0; opacity:0; transition:opacity .15s; }
.el-list-item:hover .el-list-actions { opacity:1; }
.el-list-btn { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); padding:5px 9px; font-size:11px; color:var(--muted); cursor:pointer; font-family:var(--sans); transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.el-list-btn:hover { color:var(--ink); border-color:var(--ink); }
.el-list-btn.danger:hover { color:var(--red,#c0392b); border-color:var(--red,#c0392b); }
.el-has-analysis { width:16px; height:16px; border-radius:50%; background:var(--purple-light,#ede7f6); color:var(--purple,#7c3aed); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; margin-top:2px; }
.el-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.el-grid-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; cursor:pointer; transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; display:flex; flex-direction:column; gap:8px; }
.el-grid-card:hover { border-color:var(--accent); box-shadow:0 4px 16px var(--shadow); transform:translateY(-1px); }
.el-grid-date { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.el-grid-subject { font-size:14px; font-weight:500; color:var(--ink); line-height:1.3; }
.el-grid-excerpt { font-size:12px; color:var(--muted); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; flex:1; }
.el-grid-footer { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.el-grid-words { font-size:11px; color:var(--muted); }
.el-summary-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:10px; }
.el-summary-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.el-summary-date { font-size:11px; color:var(--muted); }
.el-summary-subject { font-size:15px; font-weight:500; color:var(--ink); }
.el-summary-text { font-size:13px; color:var(--ink); line-height:1.7; }
.el-summary-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.el-no-analysis { display:flex; flex-direction:column; align-items:center; gap:8px; padding:32px; text-align:center; color:var(--muted); }
.el-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:60px 20px; text-align:center; color:var(--muted); }
.el-empty i { font-size:36px; opacity:.3; }
.el-empty p { font-size:14px; }

.section-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 4px;
}
.section-hero h1 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 4px; }
.section-hero p { font-size: 14px; color: var(--muted); }

/* ── Cards ── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 24px; box-shadow: 0 2px 16px var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.card-header h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--sans); margin: 0; }

/* ── Overview hero banner — LUXE editorial paper card, HARD edges, touches sidebar ── */
.ov-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 56px 64px 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(92,143,168,0.06),
    0 20px 48px -22px rgba(31,61,82,0.22);
}
/* Ocean gradient rail on top — the luxe signature */
.ov-hero::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ocean-d) 0%, var(--ocean) 35%, var(--ocean-f) 65%, var(--ocean) 100%);
}
.ov-hero-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.ov-hero-text { flex: 1; min-width: 180px; }
.ov-hero-text h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-size: clamp(28px, 4vw, 48px);
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 8px 0 6px;
}
.ov-hero-text h2 em {
  font-style: italic;
  color: var(--ocean-d);
  font-variation-settings: "opsz" 96, "SOFT" 100, "wght" 300;
}
.ov-hero-sub { font-size: 14px; color: var(--ink-soft); margin-top: 4px; font-family: var(--serif); font-weight: 350; font-variation-settings: "opsz" 24, "SOFT" 50; }
.ov-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.ov-stat-tiles { display: flex; border-top: 1px solid var(--line-w); margin: 0 -64px; }
.ov-stat-tile { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line-w); min-width: 86px; flex: 1; }
.ov-stat-tile:first-child { padding-left: 64px; }
.ov-stat-tile:last-child { border-right: none; padding-right: 64px; }
.ov-st-label { font-family: var(--sans); font-size: 10.5px; color: var(--muted); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.ov-st-num {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum";
}
.ov-st-num em { font-style: italic; color: var(--ocean-f); font-variation-settings: "opsz" 72, "SOFT" 100, "wght" 300; }
.ov-st-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 6px; }

/* ── Overview body (left content + right clients sidebar) ── */
.ov-body { display: grid; grid-template-columns: 1fr 280px; padding: 32px 64px 48px; gap: 22px; align-items: stretch; }
/* All non-overview sections need horizontal padding now that hub-main has none.
   Side gutters tightened from 64px to 28px so panels feel proportioned
   to the surrounding chrome instead of floating in empty space. */
.section:not(#section-overview) { padding: 20px var(--gutter) 28px; }
/* Journal: tighter still because its 3-panel grid is self-contained. */
#section-journal { padding: 16px 12px 20px; }
.ov-content { display: flex; flex-direction: column; gap: 20px; }
.ov-sidebar { display: flex; flex-direction: column; }
.ov-sidebar .card { flex: 1; display: flex; flex-direction: column; }
.ov-sidebar .card .card-header { flex-shrink: 0; }
.jentry-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0; padding: 14px 16px; margin-bottom: 10px; transition: border-color 0.15s, box-shadow 0.15s; cursor: pointer; }
.jentry-card:last-child { margin-bottom: 0; }
.jentry-card.entry-green { border-left-color: var(--green); }
.jentry-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(61,90,128,0.08); }
.je-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.je-date { font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0.04em; }
.je-excerpt { font-size: 13px; color: var(--ink); line-height: 1.6; }

/* ── Calendar ── */
.cal-controls { display: flex; align-items: center; gap: 12px; }
.cal-controls h3 { font-size: 18px; }
.cal-view-toggle { display: flex; border: 1px solid var(--border); border-radius: 0; overflow: hidden; }
.cal-view-btn { padding: 6px 14px; font-size: 12px; font-family: var(--sans); border: none; background: transparent; cursor: pointer; color: var(--muted); transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.cal-view-btn.active { background: var(--ink); color: #fff; }

/* ── Schedule client filter ──
   Sits beside the view toggle; same square, quiet control language.
   Menu is a compact listbox: search (8+ clients), initials, upcoming counts. */
.cal-header-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.schf { position: relative; display: flex; align-items: stretch; }
.schf-trigger { display: flex; align-items: center; gap: 7px; max-width: 210px; padding: 6px 12px; font-size: 12px; font-family: var(--sans); border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.schf-trigger:hover { color: var(--ink); border-color: var(--ink); }
.schf-ic { font-size: 12px; }
.schf-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schf-caret { font-size: 10px; transition: transform 0.15s; }
.schf-caret.open { transform: rotate(180deg); }
.schf.filtering .schf-trigger { background: var(--ink); border-color: var(--ink); color: #fff; }
.schf-clear { display: none; align-items: center; justify-content: center; padding: 0 9px; font-size: 10px; border: 1px solid var(--ink); border-left: 1px solid rgba(255,255,255,0.3); border-radius: 0; background: var(--ink); color: #fff; cursor: pointer; }
.schf-clear:hover { opacity: 0.85; }
.schf.filtering .schf-clear { display: flex; }
.schf-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; width: 264px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--border); border-radius: 0; box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.schf-menu.schf-menu--left { left: 0; right: auto; } /* flipped by schfToggle when right-anchoring would clip off-screen */
.schf-search { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid var(--border); color: var(--muted); }
.schf-search i { font-size: 11px; flex-shrink: 0; }
/* !important counters the global "stationery input" override in styles.css —
   inside the menu the wrapper draws the separator, the input stays chromeless. */
.schf-menu .schf-search input { flex: 1; min-width: 0; padding: 0 !important; border: 0 !important; outline: none; background: transparent !important; font-family: var(--sans); font-size: 12.5px; color: var(--ink); }
.schf-list { max-height: 296px; overflow-y: auto; padding: 6px; }
.schf-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: none; border-radius: 0; background: transparent; cursor: pointer; font-family: var(--sans); font-size: 12.5px; color: var(--ink); text-align: left; transition: background 0.12s; }
.schf-item:hover { background: var(--surface); }
.schf-item.active .schf-name { font-weight: 600; }
.schf-av { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.schf-item.active .schf-av { background: var(--ink); border-color: var(--ink); color: #fff; }
.schf-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schf-count { font-size: 10.5px; color: var(--muted); flex-shrink: 0; }
.schf-check { display: none; font-size: 12px; flex-shrink: 0; }
.schf-item.active .schf-check { display: inline; }
.schf-sep { height: 1px; margin: 5px 3px; background: var(--border); }
.schf-empty { padding: 14px 12px; font-size: 12px; color: var(--muted); text-align: center; }

/* ── Per-page AI settings button + popup (mounted by 09-settings-section.js) ── */
.aipm { display: inline-flex; align-items: center; }
.drv-header .aipm { margin-left: 12px; }
.tj-tab-bar .aipm { margin-left: auto; align-self: center; }
.aipm-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 11.5px; font-family: var(--sans); letter-spacing: 0.04em; border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.aipm-trigger:hover { color: var(--ink); border-color: var(--ink); }
.aipm-trigger .bi-stars { font-size: 11px; color: var(--accent); }

/* Popup (portaled to <body>) */
.aipm-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(26,24,20,.46); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.aipm-overlay[hidden] { display: none; }
.aipm-modal { width: 440px; max-width: 100%; max-height: 86vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 0; box-shadow: 0 24px 64px rgba(0,0,0,.24); }
.aipm-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.aipm-eyebrow { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); margin: 0 0 3px; }
.aipm-modal-head h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.aipm-x { flex-shrink: 0; background: none; border: none; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px; line-height: 1; }
.aipm-x:hover { color: var(--ink); }
.aipm-modal-body { padding: 4px 24px; }
.aipm-loading { font-size: 12.5px; color: var(--muted); padding: 18px 0; margin: 0; }
.aipm-mod { padding: 18px 0; border-bottom: 1px solid var(--border); }
.aipm-mod:last-child { border-bottom: none; }
.aipm-mod-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.aipm-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.aipm-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 7px; }
.aipm-est { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; margin-top: 11px; }
.aipm-modal-foot { padding: 15px 24px 20px; }
.aipm-alllink { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; font-family: var(--sans); font-size: 12.5px; color: var(--accent); cursor: pointer; }
.aipm-alllink:hover { text-decoration: underline; }
html[data-theme="dark"] .schf.filtering .schf-trigger,
html[data-theme="dark"] .schf-clear,
html[data-theme="dark"] .schf-item.active .schf-av { background: var(--accent); border-color: var(--accent); }

.week-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.week-header { background: var(--surface); padding: 10px 8px; font-size: 12px; font-weight: 500; text-align: center; border-bottom: 1px solid var(--border); color: var(--muted); position: relative; }
/* Today: a clean highlight around just the date number (filled circle),
   not a full-block fill of the whole header cell. */
/* Hover speaks ocean, never ink — day numbers stay ink, states don't. */
.week-header:hover { background: var(--ocean-w, var(--accent-light)); color: var(--ocean-d, var(--accent)); }
.week-header.today { background: transparent; color: var(--ocean-d, var(--accent)); font-weight: 600; }
.week-header.today strong {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-top: 3px;
  background: var(--ocean, var(--accent)); color: #F4F6F8; border-radius: 50%;
  font-size: 12px; line-height: 1; font-weight: 600;
}
.week-time { padding: 0 8px; font-size: 11px; color: var(--muted); text-align: center; border-right: 1px solid var(--border); height: 56px; display: flex; align-items: center; justify-content: center; }
.week-cell { border-right: 1px solid var(--border); border-bottom: 1px solid rgba(216,208,192,0.4); height: 56px; position: relative; transition: background 0.1s; }
.week-cell:hover { background: color-mix(in srgb, var(--ocean, var(--accent)) 4%, transparent); }
.week-cell.today-col { background: color-mix(in srgb, var(--ocean, var(--accent)) 5%, transparent); }
.week-cell.today-col:hover { background: color-mix(in srgb, var(--ocean, var(--accent)) 8%, transparent); }
.week-cell:last-child { border-right: none; }
.cal-nowline { position: absolute; left: 0; right: 0; height: 1px; background: #C9A56A; pointer-events: none; z-index: 3; }
.cal-nowline::before { content: ''; position: absolute; left: -2px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #C9A56A; }
/* A chip's height is its duration (see eventChip), so content tiers with it:
   xs is a single inline line, lg earns attendees and a note. */
/* The washes: pastel blocks with a color spine — ocean for sessions,
   sage and gold for the clinician's own colors. No solids, no shadows. */
.cal-event {
  position: absolute; left: 3px; right: 4px;
  background: var(--ocean-w, var(--accent-light));
  color: color-mix(in srgb, var(--ocean, var(--accent)) 55%, var(--ink));
  border-left: 2px solid var(--ocean, var(--accent)); border-radius: 0;
  padding: 5px 8px; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px;
  z-index: 2;
}
.cal-event:hover { background: color-mix(in srgb, var(--ocean, var(--accent)) 16%, var(--ocean-w, var(--accent-light))); border-left-width: 3px; }
.cal-ev-t { font-size: 12px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-m { font-size: 10.5px; line-height: 1.35; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-m i { margin-right: 4px; font-size: 10px; }
.cal-ev-note { font-size: 10.5px; line-height: 1.4; opacity: .82; margin-top: 2px; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-ev-rate { position: absolute; top: 5px; right: 8px; font-size: 9.5px; font-weight: 600;
  background: color-mix(in srgb, var(--ocean, var(--accent)) 14%, transparent);
  padding: 1px 5px; border-radius: 0; white-space: nowrap; }
/* Single-line chip: title and start time share the row. */
.cal-ev--xs { flex-direction: row; align-items: center; gap: 6px; padding: 2px 8px; }
.cal-ev--xs .cal-ev-t { flex: 1; }
.cal-ev-xs-time { font-size: 10.5px; opacity: .9; flex-shrink: 0; }

.cal-event.green { background: var(--green-light, #E8ECDF); border-left-color: var(--green);
  color: color-mix(in srgb, var(--green) 60%, var(--ink)); }
.cal-event.green:hover { background: color-mix(in srgb, var(--green) 14%, var(--green-light, #E8ECDF)); }
.cal-event.amber { background: var(--amber-light, #FAEFD6); border-left-color: #C9A56A;
  color: #8a6d3f; }
.cal-event.amber:hover { background: color-mix(in srgb, #C9A56A 18%, var(--amber-light, #FAEFD6)); }
/* Shared-with-me is read-only, so it reads as an outline rather than a wash. */
.cal-event.cal-event--shared { background: transparent; color: var(--ocean-d, var(--accent)); border: 1.5px dashed var(--ocean, var(--accent)); border-radius: 0; box-shadow: none; }
.cal-event.cal-event--shared .cal-ev-m { color: var(--muted); opacity: 1; }
/* Not yet confirmed — present but provisional. */
.cal-event.cal-ev--tentative { opacity: .62; border: 1.5px dashed var(--ocean, var(--accent)); }
/* Already happened — recedes so the day ahead reads first. */
.cal-event.cal-ev--done { opacity: .45; }

/* ── Overview Week Time-Slot Grid (shared with client dashboard) ── */
.ovwk-tgrid {
  display: grid;
  grid-template-columns: 44px repeat(7, 1fr);
  overflow: hidden;
  border-top: 1px solid var(--border);
}
.ovwk-thdr {
  background: var(--surface);
  padding: 8px 4px 7px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}
.ovwk-thdr.today { color: var(--accent); }
.ovwk-thdr.time-lbl { background: var(--surface); }
.ovwk-ttime {
  font-size: 9px;
  color: var(--muted);
  height: 36px;
  display: flex;
  align-items: flex-start;
  padding: 4px 5px 0 0;
  justify-content: flex-end;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid rgba(216,208,192,0.35);
  white-space: nowrap;
}
.ovwk-tcell {
  height: 36px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid rgba(216,208,192,0.35);
  position: relative;
  transition: background 0.1s;
}
.ovwk-tcell:hover { background: rgba(61,90,128,0.04); }
.ovwk-tcell.today-col { background: rgba(61,90,128,0.03); }
.ovwk-tcell:last-child { border-right: none; }
.ovwk-tev {
  position: absolute;
  left: 2px; right: 2px; top: 2px; bottom: 2px;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 0 5px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--sans);
  box-shadow: 0 1px 3px rgba(61,90,128,0.25);
  z-index: 1;
  display: flex;
  align-items: center;
}
.ovwk-tev:hover { opacity: 0.82; }
.ovwk-tev.green  { background: var(--green); }
.ovwk-tev.purple { background: var(--purple); }
.ovwk-tev.gold   { background: var(--gold); }
.ovwk-tev.amber  { background: var(--amber); }
.ovwk-tev.red    { background: #c0392b; }

.upcoming-list { display: flex; flex-direction: column; gap: 10px; }
.upcoming-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 0;
  transition: border-color 0.15s;
}
.upcoming-item:hover { border-color: var(--accent); }
.upcoming-time { font-size: 13px; font-weight: 500; min-width: 80px; color: var(--ink); }
.upcoming-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.upcoming-dot.green { background: var(--green); }
.upcoming-dot.amber { background: var(--amber); }
.upcoming-info { flex: 1; }
.upcoming-info strong { font-size: 14px; display: block; margin-bottom: 2px; }
.upcoming-info span { font-size: 12px; color: var(--muted); }
.upcoming-actions { display: flex; gap: 8px; }

/* ── Appointment Modal ── */
.appt-overlay {
  position: fixed; inset: 0; background: rgba(26,24,20,0.4);
  backdrop-filter: blur(4px); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.appt-overlay.open { display: flex; }
.appt-modal {
  background: var(--card); border-radius: 0;
  width: min(680px, 100%); max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(26,24,20,0.2);
  animation: fadeUp 0.2s ease;
}
.appt-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.appt-modal-header h3 { font-size: 18px; }
.appt-modal-body { padding: 24px; }
.appt-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-top: 1px solid var(--border); gap: 12px;
}
.appt-delete-btn {
  background: transparent; color: var(--red); border: 1px solid rgba(184,50,50,.2);
  font-size: 13px; padding: 8px 16px; border-radius: 0;
  cursor: pointer; font-family: var(--sans); transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.appt-delete-btn:hover { background: var(--red-light); }

/* ── Schedule layout ── */
.schedule-layout { display: flex; flex-direction: column; gap: 20px; }
/* Day Notes v2 — document strip: baseline header row, full-width surface,
   quiet footer. Margins symmetric by construction (block flow, no grid). */
.dnp-v2 { display: block; }
.dnp2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 16px; }
.dnp2-title { font-family: var(--serif, Georgia, serif); font-size: 22px; font-weight: 400; letter-spacing: -0.018em; color: var(--ink); }
.dnp2-date { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-left: 14px; letter-spacing: 0; }
.dnp2-meta { font-size: 11px; color: var(--muted); display: inline-flex; gap: 18px; align-items: baseline; flex-shrink: 0; }
.dnp-status { min-height: 13px; }
.dnp-v2 textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: 300px; border: 1px solid var(--border); background: var(--bg); padding: 18px 20px; font-family: var(--serif, Georgia, serif); font-size: 17.5px; line-height: 1.75; color: var(--ink); outline: none; }
.dnp-v2 textarea:focus { border-color: var(--accent); }
.dnp2-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; }
.dnp2-hint { font-size: 11.5px; color: var(--muted); }

/* ── Client detail tab content ── */
.cdp-assign-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 0; background: var(--surface); margin-bottom: 8px; transition: border-color .15s; }
.cdp-assign-item:hover { border-color: var(--accent); }
.cdp-meet-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 0; background: var(--surface); margin-bottom: 8px; transition: border-color .15s; }
.cdp-meet-item:hover { border-color: var(--accent); }
.cdp-meet-time { font-size: 13px; font-weight: 500; min-width: 130px; line-height: 1.4; }
.cdp-meet-info { flex: 1; }
.cdp-meet-info strong { font-size: 13px; display: block; }
.cdp-meet-info span { font-size: 11px; color: var(--muted); }

@media (max-width: 460px) { .day-notes-panel { flex-direction: column; } .dnp-label { max-width: 100%; } }

/* ── Client roster ── */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.client-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0; padding: 20px;
  box-shadow: 0 2px 12px var(--shadow);
  cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.client-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px var(--shadow); border-color: var(--accent); }
.client-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.client-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px; flex-shrink: 0;
}
.client-name { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.client-meta { font-size: 12px; color: var(--muted); }
.client-stats { display: flex; gap: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.client-stat { font-size: 12px; color: var(--muted); }
.client-stat strong { display: block; font-size: 15px; color: var(--ink); font-weight: 500; }

/* Client detail panel */
.client-detail-overlay {
  position: fixed; inset: 0; background: rgba(26,24,20,0.4);
  backdrop-filter: blur(4px); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.client-detail-overlay.open { display: flex; }
.client-detail-panel {
  background: var(--card); border-radius: 0;
  width: min(780px, 100%); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(26,24,20,0.2);
  animation: fadeUp 0.2s ease;
}
.cdp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card); z-index: 1;
}
.cdp-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }
.cdp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.cdp-tab { padding: 8px 16px; font-size: 13px; border: none; background: transparent; cursor: pointer; color: var(--muted); font-family: var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.cdp-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.close-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 6px 12px; cursor: pointer; font-size: 13px; font-family: var(--sans); }

/* ── Pending requests panel ── */
.tc-find-panel { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 16px 20px; margin-bottom: 16px; }
.tc-find-row { display: flex; align-items: center; gap: 10px; }
.tc-find-icon { color: var(--muted); font-size: 15px; flex-shrink: 0; }
.tc-find-input { flex: 1; padding: 9px 13px; border: 1px solid var(--border); border-radius: 0; font-family: var(--sans); font-size: 13px; background: var(--surface); color: var(--ink); outline: none; }
.tc-find-input:focus { border-color: var(--accent); }
.tc-find-result-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; }
.tc-find-av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--sans); }
.tc-find-info { flex: 1; min-width: 0; }
.tc-find-name { font-size: 13px; font-weight: 500; font-family: var(--sans); }
.tc-find-meta { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pending-panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0; box-shadow: 0 2px 16px var(--shadow);
  margin-bottom: 20px; overflow: hidden;
}
.pending-panel-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 13px; border-bottom: 1px solid var(--border);
}
.pending-panel-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-light);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.pending-panel-title {
  font-size: 14px; font-weight: 600; font-family: var(--sans);
  letter-spacing: -0.01em; color: var(--ink); flex: 1;
}
.pending-panel-count {
  background: var(--accent); color: #fff; border-radius: 12px;
  padding: 2px 9px; font-size: 11px; font-weight: 600;
  font-family: var(--sans); flex-shrink: 0;
}
.pending-panel-list { display: flex; flex-direction: column; }
.pending-req-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid rgba(216,208,192,0.45);
  transition: background .12s;
}
.pending-req-row:last-child { border-bottom: none; }
.pending-req-row:hover { background: var(--surface); }
.pending-req-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-light); border: 1px solid rgba(61,90,128,.15);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; flex-shrink: 0;
}
.pending-req-info { flex: 1; min-width: 0; }
.pending-req-name {
  font-size: 14px; font-weight: 500; color: var(--ink);
  line-height: 1.3; font-family: var(--sans);
}
.pending-req-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pending-req-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Clients master-detail layout ── */
.clients-layout { display: grid; grid-template-columns: 280px 1fr; gap: 0; align-items: stretch; border: 1px solid var(--border); border-radius: 0; overflow: hidden; box-shadow: 0 2px 16px var(--shadow); flex: 1; min-height: 0; }
.clients-left { background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.clients-left-header { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.clients-left-list { overflow-y: auto; flex: 1; }
.client-menu-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid rgba(216,208,192,0.4); transition: background .12s; border-left: 3px solid transparent; }
.client-menu-item:hover { background: var(--surface); }
.client-menu-item.active { background: var(--accent-light); border-left-color: var(--accent); }
.client-menu-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 13px; flex-shrink: 0; }
.client-menu-name { font-size: 13px; font-weight: 500; margin-bottom: 1px; }
.client-menu-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 168px; }
/* min-height: 0 is essential — without it, this flex column's children
   (the messages thread in particular) can't trigger overflow scrolling.
   Classic flex+overflow trap: an unbounded parent collapses the inner
   overflow-y:auto into "grow the page instead of scroll the panel." */
.clients-right { background: var(--bg); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cdr-empty { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 400px; flex-direction: column; gap: 10px; }
.cdr-header { padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--card); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cdr-header-info { flex: 1; }
.cdr-tabs { display: flex; gap: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 0 24px; }
.cdr-tab { padding: 10px 14px; font-size: 13px; border: none; background: transparent; cursor: pointer; color: var(--muted); font-family: var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; white-space: nowrap; }
.cdr-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.cdr-body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cdr-body.messages-mode { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
@media (max-width: 900px) { .clients-layout { grid-template-columns: 1fr; } .clients-left { min-height: auto; max-height: 260px; } }

/* ── Session hub ── */
.launch-btn { background: var(--green); color: #fff; border: none; padding: 9px 18px; border-radius: 0; font-size: 13px; font-family: var(--sans); cursor: pointer; font-weight: 500; transition: opacity 0.15s; }
.launch-btn:hover { opacity: 0.85; }

/* ── Session detail screen ── */

/* ══════════════════════════════════════════════════════════════
   Sessions list — bars rendered inside .drv-cards.
   Mirrors the Clients drv-card pattern but adds a colored time-of-day
   rail on the left and inline title rename.
   ════════════════════════════════════════════════════════════ */
.ssn-group-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ssn-group-header i { font-size: 13px; }
.ssn-empty-mini {
  padding: 24px 16px; font-size: 13px;
  color: var(--muted); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0;
}
/* Wrap a bar + its (optional) inline AI dropdown so the dropdown
   sits below the bar in normal flow instead of squeezing into the
   bar's flex row. */
.ssn-bar-wrap { display: flex; flex-direction: column; }
.ssn-bar-ai-panel {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  font-size: 13px;
  line-height: 1.6;
}

/* The session bar — a drv-card variant with a colored left rail
   that hints at the time of day (morning/afternoon/evening) and
   becomes accent-colored when the session is upcoming. */
.ssn-bar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.12s;
  overflow: hidden;
}
.ssn-bar:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,24,20,.06);
}
.ssn-bar-rail {
  flex-shrink: 0;
  width: 6px;
  background: var(--muted);
  transition: background 0.15s;
}
.ssn-bar[data-tod="morning"]   .ssn-bar-rail { background: #f5b85a; } /* warm amber */
.ssn-bar[data-tod="afternoon"] .ssn-bar-rail { background: #6ea8c6; } /* mid-blue */
.ssn-bar[data-tod="evening"]   .ssn-bar-rail { background: #7d6da7; } /* dusk-violet */
.ssn-bar[data-state="upcoming"] .ssn-bar-rail { background: var(--accent); }
.ssn-bar[data-state="live"]     .ssn-bar-rail { background: var(--green); }
.ssn-bar[data-state="upcoming"] { border-color: var(--accent); }
.ssn-bar-time {
  flex-shrink: 0;
  width: 110px;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px;
}
.ssn-bar-time-primary {
  font-family: var(--serif); font-size: 18px;
  font-weight: 400; color: var(--ink);
  letter-spacing: -0.01em; line-height: 1.1;
}
.ssn-bar-time-secondary {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.ssn-bar-body {
  flex: 1; min-width: 0;
  padding: 16px 20px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px;
}
.ssn-bar-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
  font-family: var(--sans);
  min-width: 0;
}
.ssn-bar-title-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.ssn-bar-rename-btn {
  background: none; border: none; padding: 4px;
  cursor: pointer; color: var(--muted);
  border-radius: 0; opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  font-size: 12px; line-height: 1; flex-shrink: 0;
}
.ssn-bar:hover .ssn-bar-rename-btn { opacity: 1; }
.ssn-bar-rename-btn:hover { color: var(--accent); }
.ssn-bar-rename-input {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em;
  border: 1px solid var(--accent);
  background: var(--surface);
  padding: 3px 8px; border-radius: 0;
  width: 100%; max-width: 360px;
  box-sizing: border-box;
  outline: none;
}
.ssn-bar-meta {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--muted);
}
.ssn-bar-meta i { font-size: 12px; opacity: 0.7; margin-right: 3px; }
.ssn-bar-meta .chip {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 0;
}
.ssn-bar-actions {
  flex-shrink: 0;
  padding: 16px 18px;
  display: flex; align-items: center; gap: 8px;
  border-left: 1px solid var(--border);
  background: var(--card);
}
.ssn-bar-arrow {
  font-size: 14px; color: var(--muted);
  opacity: 0.5; transition: transform 0.15s, opacity 0.15s, color 0.15s;
  margin-left: 4px;
}
.ssn-bar:hover .ssn-bar-arrow {
  opacity: 1; transform: translateX(2px); color: var(--accent);
}
@media (max-width: 760px) {
  .ssn-bar { flex-wrap: wrap; }
  .ssn-bar-time { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 10px 16px; flex-direction: row; gap: 12px; align-items: baseline; }
  .ssn-bar-actions { border-left: none; border-top: 1px solid var(--border); width: 100%; justify-content: flex-end; }
}
/* Detail view layout — scoped so the drv-shell's data-view="list" rule
   (which sets display:none) isn't out-specificity'd by this ID selector. */
.drv-shell[data-view="detail"] #sessionDetailView { display: flex; flex-direction: column; gap: 20px; }
.sds-header { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; flex-wrap: wrap; }
.sds-body { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.sds-main { display: flex; flex-direction: column; gap: 20px; }
.sds-transcript { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; padding-right: 6px; }
.sds-turn { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(216,208,192,0.35); }
.sds-turn:last-child { border-bottom: none; }
.sds-speaker { font-size: 11px; font-weight: 500; color: var(--accent); min-width: 88px; flex-shrink: 0; padding-top: 3px; letter-spacing: 0.02em; }
.sds-speaker.client { color: var(--green); }
.sds-line { font-size: 13px; line-height: 1.72; color: var(--ink); }

/* ── Full-screen transcript viewer ── */
#tvOverlay { position: fixed; inset: 0; z-index: 5000; background: var(--bg, #F4F1EA); display: flex; flex-direction: column; }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 34px; border-bottom: 1px solid var(--border); background: var(--card, #FBF9F4); flex-shrink: 0; flex-wrap: wrap; }
.tv-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 3px; }
.tv-title { font-family: var(--serif, Georgia, serif); font-size: 21px; color: var(--ink); line-height: 1.2; }
.tv-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-search { width: 240px; font-size: 13px; font-family: var(--sans); padding: 8px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); outline: none; }
.tv-search:focus { border-color: var(--accent); }
.tv-count { font-size: 12px; color: var(--muted); min-width: 70px; }
.tv-x { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 6px; line-height: 1; }
.tv-x:hover { color: var(--ink); }
.tv-body { flex: 1; overflow-y: auto; padding: 34px 34px 60px; }
.tv-turn { display: flex; gap: 18px; max-width: 820px; margin: 0 auto; padding: 12px 0; border-bottom: 1px solid rgba(216,208,192,0.35); }
.tv-turn:last-child { border-bottom: none; }
.tv-rail { width: 52px; flex-shrink: 0; text-align: right; padding-top: 3px; }
.tv-time { font-size: 11px; color: var(--muted); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.tv-main { flex: 1; min-width: 0; }
.tv-speaker { font-size: 11px; font-weight: 500; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.tv-speaker.client { color: var(--green); }
.tv-text { font-size: 15px; line-height: 1.8; color: var(--ink); }
mark.tv-hit { background: var(--accent); color: var(--bg, #fff); padding: 0 2px; }
@media (max-width: 720px) {
  .tv-head { padding: 14px 18px; }
  .tv-body { padding: 22px 18px 48px; }
  .tv-search { width: 150px; }
  .tv-rail { display: none; }
}
.sds-ai-sidebar { display: flex; flex-direction: column; gap: 12px; }
.sds-ai-block { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 14px 16px; }
.sds-ai-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 7px; }
.sds-ai-value { font-size: 13px; line-height: 1.65; color: var(--ink); }
.sds-mood-bar { height: 5px; background: var(--border); border-radius: 3px; margin: 8px 0 4px; overflow: hidden; }
.sds-mood-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--red) 0%, var(--amber) 45%, var(--green) 100%); }
@media (max-width: 900px) { .sds-body { grid-template-columns: 1fr; } }

/* ── Notes ── */
.notes-shell { display: flex; flex-direction: row; gap: 16px; flex: 1; min-height: 0; }
.notes-shell .notes-list-card { width: 240px; flex-shrink: 0; overflow-y: auto; min-height: 0; }
.notes-shell .note-editor-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#section-notes { gap: 12px; }
#section-notes .note-editor-card textarea { flex: 1; min-height: 0; resize: none; margin-top: 12px; }
.notes-list { display: flex; flex-direction: column; gap: 6px; }
.note-item {
  padding: 12px 14px; border-radius: 0;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.note-item:hover, .note-item.active { border-color: var(--accent); background: var(--accent-light); }
.note-item .ni-client { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.note-item .ni-date { font-size: 11px; color: var(--muted); }
.note-item .ni-preview { font-size: 12px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-editor { display: flex; flex-direction: column; gap: 12px; }
.note-editor textarea { min-height: 320px; font-size: 14px; font-family: var(--sans); line-height: 1.7; padding: 16px; }
.note-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Export menu (Past Sessions) ── */
.export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 280px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(26,24,20,0.12); padding: 6px; display: none; }
.export-menu.open { display: block; }
.export-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--sans); transition: background 0.12s; }
.export-menu-item:hover { background: var(--surface); }
.export-menu-item i { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.export-menu-item .emi-title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.export-menu-item .emi-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.export-menu-tip { padding: 8px 12px; margin-top: 4px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); line-height: 1.5; }

/* ── Google Docs Tab ── */
.svt-tabs { display:flex; gap:4px; flex-shrink:0; border-bottom:1px solid var(--border); padding-bottom:0; margin-bottom:0; }
.svt-tab { padding:8px 18px; border-radius:var(--radius-sm) var(--radius-sm) 0 0; border:none; background:transparent; cursor:pointer; font-size:13px; font-family:var(--sans); color:var(--muted); display:flex; align-items:center; gap:6px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; border-bottom:2px solid transparent; margin-bottom:-1px; }
.svt-tab:hover { color:var(--ink); background:var(--surface); }
.svt-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:500; }
.notes-tab-bar { display:flex; gap:4px; flex-shrink:0; border-bottom:1px solid var(--border); padding-bottom:12px; }
.notes-tab { padding:7px 14px; border-radius:0; border:1px solid transparent; background:transparent; cursor:pointer; font-size:13px; font-family:var(--sans); color:var(--muted); display:flex; align-items:center; gap:6px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.notes-tab:hover { background:var(--surface); color:var(--ink); }
.notes-tab.active { background:var(--ink); color:var(--bg); }
#gdocsPanel { display:none; flex:1; min-height:0; gap:16px; }
#gdocsPanel.gdocs-active { display:flex; }
.gdocs-list-card { width:240px; flex-shrink:0; display:flex; flex-direction:column; min-height:0; padding:16px; }
.gdocs-embed-card { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:0; }
.gdocs-embed-card iframe { flex:1; width:100%; border:none; min-height:0; display:block; }
.gdoc-item { padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card); cursor:pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; flex-shrink:0; }
.gdoc-item:hover, .gdoc-item.gdoc-active { border-color:var(--accent); background:var(--accent-light); }
.gdoc-item .gdi-name { font-size:13px; font-weight:500; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gdoc-item .gdi-date { font-size:11px; color:var(--muted); }
.gdocs-center-state { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:16px; text-align:center; padding:32px; }
.gdocs-search { width:100%; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:12px; font-family:var(--sans); background:var(--surface); color:var(--ink); margin-bottom:8px; flex-shrink:0; box-sizing:border-box; }
.gdocs-search:focus { outline:none; border-color:var(--accent); }

/* ── Earnings ── */
.earnings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.earnings-chart { height: 180px; display: flex; align-items: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bar-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 44px; background: var(--ink); transition: height 0.3s; }
.bar.zero { background: var(--border); }
.bar-val { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.bar-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 8px; }
.bil-ov-figs { display: flex; gap: 40px; padding-top: 16px; }
.bil-ov-figs > div { display: flex; flex-direction: column; gap: 3px; }
.bil-ov-num { font-size: 26px; font-weight: 300; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.bil-ov-num.muted { color: var(--muted); }
.bil-ov-sub { font-size: 11.5px; color: var(--muted); }
.payout-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.payout-row:last-child { border-bottom: none; }
.payout-amount { font-weight: 500; color: var(--green); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 12px var(--shadow); }
.stat-num { font-family: var(--serif); font-size: 30px; color: var(--ink); line-height: 1; }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-delta { font-size: 12px; margin-top: 4px; }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--red); }

/* ── Billing panel ── */
.billing-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 24px; gap: 0; }
.billing-tab { padding: 11px 16px; font-size: 13px; border: none; background: transparent; cursor: pointer; color: var(--muted); font-family: var(--sans); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; white-space: nowrap; }
.billing-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.inv-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.inv-row:last-child { border-bottom: none; }
.inv-meta { flex: 1; min-width: 160px; }
.inv-meta strong { font-size: 14px; display: block; margin-bottom: 2px; }
.inv-meta small { font-size: 12px; color: var(--muted); }
.inv-amount { font-size: 15px; font-weight: 500; min-width: 60px; text-align: right; }
.inv-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rate-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rate-row:last-child { border-bottom: none; }
.rate-info { flex: 1; min-width: 160px; }
.rate-info strong { font-size: 14px; display: block; margin-bottom: 2px; }
.rate-info small { font-size: 12px; color: var(--muted); }
.rate-input-wrap { display: flex; align-items: center; gap: 8px; }
.rate-input-wrap input { width: 80px; text-align: center; }
.filter-pill { padding: 5px 13px; border-radius: 0; border: 1px solid var(--border); background: transparent; font-size: 12px; cursor: pointer; font-family: var(--sans); color: var(--muted); transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.filter-pill.active, .filter-pill:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.billing-empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 13px; }
.pm-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 15px 20px; display: flex; align-items: center; gap: 14px; }
.pm-logo { width: 38px; height: 38px; border-radius: 0; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; font-weight: 800; letter-spacing: -1px; }
.pm-paypal { color: #003087; }
.pm-venmo  { color: #008cff; }
.pm-zelle  { color: #6d1ed4; }
.pm-input  { font-size: 12px; margin-top: 5px; width: 210px; padding: 6px 10px; }
.pm-filter-btn { font-size: 11px; padding: 4px 12px; border-radius: 0; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.pm-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pm-filter-btn:hover:not(.active) { background: var(--surface); color: var(--ink); }

/* Billing inner content — editorial: hairline sections, no boxes, no radii. */
.bil-label { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.bil-empty { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 40px 24px; text-align: center; }
.bil-empty .t { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.bil-empty .s { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.bil-flat { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; }
.bil-note { border-top: 1px solid var(--border); padding: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.7; }
.bil-sku { border: 1px solid var(--border); background: var(--card); padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.bil-sku.feat { border-color: var(--ink); }
.bil-sku-badge { position: absolute; top: -9px; right: 14px; background: var(--ink); color: var(--bg); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; padding: 3px 10px; }
.bil-sku-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.bil-sku-price { font-size: 30px; font-weight: 300; color: var(--ink); line-height: 1; }
.bil-sku-actions { border-top: 1px solid var(--border); padding-top: 12px; }
.bil-sku-actions .n { font-size: 16px; font-weight: 500; color: var(--green); line-height: 1; }
.bil-sku-actions .d { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── Transaction detail modal ── */
#txDetailOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
#txDetailCard { background: var(--card); border-radius: 0; padding: 28px 32px; max-width: 460px; width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,.22); animation: txSlideUp .2s ease; }
@keyframes txSlideUp { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.txd-masked { display: inline-flex; align-items: center; gap: 5px; font-family: monospace; letter-spacing: 2px; font-size: 13px; }
.txd-masked-text { color: var(--ink); }
.txd-reveal-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0; font-size: 13px; line-height: 1; transition: color .15s; flex-shrink: 0; }
.txd-reveal-btn:hover { color: var(--accent); }
.ph-row { cursor: pointer; transition: background .12s; }
.ph-row:hover { background: var(--surface); }

/* ── Toast ── */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0; font-size: 13px; font-family: var(--sans); box-shadow: 0 4px 20px rgba(26,24,20,0.2); transform: translateY(80px); opacity: 0; transition: color 0.3s, background-color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s, box-shadow 0.3s; z-index: 999; }
.toast.show { transform: translateY(0); opacity: 1; }

/* ── Prescriptions Hub page ── */
.rxhub-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; align-items: stretch; border: 1px solid var(--border); border-radius: 0; overflow: hidden; box-shadow: 0 2px 16px var(--shadow); flex: 1; min-height: 0; }
.rxhub-left { background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.rxhub-left-header { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.rxhub-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.rxhub-filter-btn { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; font-size: 11px; cursor: pointer; font-family: var(--sans); color: var(--muted); transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; white-space: nowrap; }
.rxhub-filter-btn.active, .rxhub-filter-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.rxhub-filter-btn.amber.active { background: var(--amber); border-color: var(--amber); }
.rxhub-filter-btn.red.active { background: var(--red); border-color: var(--red); }
.rxhub-list { overflow-y: auto; flex: 1; }
.rxhub-item { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border-bottom: 1px solid rgba(216,208,192,0.4); cursor: pointer; transition: background .12s; border-left: 3px solid transparent; }
.rxhub-item:hover { background: var(--surface); }
.rxhub-item.active { background: var(--accent-light); border-left-color: var(--accent); }
.rxhub-item.expiring { border-left-color: var(--amber); }
.rxhub-item.expiring.active { background: #fff9ed; }
.rxhub-item-top { display: flex; align-items: center; gap: 9px; }
.rxhub-client-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 12px; flex-shrink: 0; }
.rxhub-med-name { font-size: 13px; font-weight: 600; font-family: var(--sans); letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); flex: 1; min-width: 0; }
.rxhub-client-name { font-size: 11px; color: var(--muted); }
/* Refill progress bar */
.rx-progress-wrap { display: flex; flex-direction: column; gap: 4px; }
.rx-progress-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.rx-progress-fill { height: 100%; border-radius: 3px; transition: width .3s; }
.rx-progress-fill.green  { background: var(--green); }
.rx-progress-fill.amber  { background: var(--amber); }
.rx-progress-fill.red    { background: var(--red); }
.rx-progress-meta { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }
/* Right detail panel */
.rxhub-right { background: var(--bg); display: flex; flex-direction: column; }
.rxhub-right-empty { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 400px; flex-direction: column; gap: 10px; color: var(--muted); }
.rxhub-detail-header { padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--card); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rxhub-detail-body { padding: 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.rx-timeline { display: flex; flex-direction: column; gap: 0; }
.rx-tl-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(216,208,192,0.35); font-size: 13px; }
.rx-tl-item:last-child { border-bottom: none; }
.rx-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 4px; }
.rx-tl-dot.green { background: var(--green); }
.rx-tl-dot.amber { background: var(--amber); }
.rx-tl-dot.red { background: var(--red); }
@media (max-width: 900px) { .rxhub-layout { grid-template-columns: 1fr; } .rxhub-left { min-height: auto; max-height: 280px; } }

/* ═══ Prescription system ═══ */
.rx-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 16px 18px; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s; }
.rx-card:last-child { margin-bottom: 0; }
.rx-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(61,90,128,0.08); }
.rx-card.rx-expired { opacity: .6; }
.rx-card.rx-cancelled { opacity: .5; }
.rx-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rx-name { font-size: 13px; font-weight: 600; font-family: var(--sans); letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.rx-brand { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rx-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 12px; margin: 10px 0; }
.rx-pill-item strong { display: block; font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.rx-pill-item span { color: var(--muted); }
.rx-foot { display: flex; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.rx-refill-banner { background: var(--amber-light); border: 1px solid rgba(181,98,10,.2); border-radius: 0; padding: 11px 14px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.rx-refill-banner i { color: var(--amber); flex-shrink: 0; margin-top: 1px; font-size: 15px; }
.rx-refill-banner .rb-info { flex: 1; }
.rx-refill-banner .rb-info strong { display: block; font-weight: 600; margin-bottom: 2px; }
.rx-refill-banner .rb-info small { color: var(--muted); font-size: 11px; }
.rx-interact-warn { background: var(--red-light); border: 1px solid rgba(184,50,50,.2); border-radius: 0; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.fda-drug-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; }
.fda-drug-item:last-child { border-bottom: none; }
.fda-drug-item:hover { background: var(--surface); }
.rx-interact-warn strong { display: block; color: var(--red); font-weight: 600; margin-bottom: 3px; }
.rx-filter-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
/* Write-Rx modal */
.rx-overlay { position: fixed; inset: 0; background: rgba(26,24,20,.46); backdrop-filter: blur(4px); z-index: 400; display: none; align-items: center; justify-content: center; padding: 24px; }
.rx-overlay.open { display: flex; }
.rx-modal { background: var(--card); border-radius: 0; width: min(580px,100%); max-height: 91vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(26,24,20,.22); animation: fadeUp .2s ease; }
.rx-modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 1; }
.rx-modal-hd h3 { font-size: 18px; }
.rx-modal-bd { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.rx-modal-ft { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }
.rx-block-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 10px; display: block; }
/* Clinician identity verification */
.rx-verify-box { background: var(--surface); border: 1.5px solid var(--border); border-radius: 0; padding: 16px 18px; transition: border-color .2s, background .2s; }
.rx-verify-box.unlocked { border-color: var(--green); background: var(--green-light); }
.rx-verify-box h4 { font-size: 13px; font-weight: 600; font-family: var(--sans); letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.rx-verify-box p { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.55; }
.rx-verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rx-unlock-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.rx-lock-icon { font-size: 16px; color: var(--muted); }
.rx-unlock-icon { font-size: 16px; color: var(--green); }

/* ════════════════════════════════════════════════════
   ── Assignments Section ──
   ════════════════════════════════════════════════════ */
.asgn-sub-file { font-size: 12px; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.asgn-sub-file:hover { text-decoration: underline; }

/* Create / Batch-assign form */
.asgn-form-overlay { position: fixed; inset: 0; background: rgba(26,24,20,.45); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.asgn-form-modal { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 32px 38px 28px; width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 64px rgba(26,24,20,.22); display: flex; flex-direction: column; gap: 20px; }
.asgn-form-modal h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: 0.01em; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.asgn-client-checks { display: flex; flex-direction: column; max-height: 180px; overflow-y: auto; border: 1px solid var(--border); border-radius: 0; padding: 2px 16px; background: var(--bg); }
.asgn-client-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 300; cursor: pointer; padding: 10px 0; }
.asgn-client-check + .asgn-client-check { border-top: 1px solid var(--border); }
.asgn-client-check input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; flex-shrink: 0; }
.asgn-remind-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.asgn-remind-row input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }
.asgn-form-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Assignments v2 (drill-in, page-locked) ──────────────────────
   Replaces the old two-pane master-detail with a drill-in layout.
   Page locks: only the inner list OR detail scrolls, never both,
   never the section underneath. One scroll context per view.

   Specificity: `.hub-main .drv-*` keeps these rules above the
   generic class selectors so the section padding/min-height
   from the section-bottom-padding block doesn't fight us. */

/* Section reset — the hero is replaced by the compact header bar
   inside the shell, so wipe section padding/gap and let the shell
   own the whole working area. Applies to every drill-view section. */
#section-assignments.drv-active.active,
#section-clients.drv-active.active,
#section-notes.drv-active.active,
#section-sessions.drv-active.active {
  flex: 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
  overflow: hidden;
}
/* When in drill-view mode, the hub-main bottom spacer would push our
   shell up and create a scroll. Suppress it. */
.hub-main:has(#section-assignments.drv-active.active)::after,
.hub-main:has(#section-clients.drv-active.active)::after,
.hub-main:has(#section-notes.drv-active.active)::after,
.hub-main:has(#section-sessions.drv-active.active)::after { display: none; }

.drv-shell {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
}

/* Compact header bar — replaces the 3-line section hero.
   Single row. Left side shows context-specific content
   (list breadcrumb OR back button + assignment title).
   Right side shows actions. */
.drv-header {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px var(--gutter);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  min-height: 60px;
}
.drv-header-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 500; }
.drv-header-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-family: var(--sans); }
.drv-header-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.drv-header-titlewrap { min-width: 0; flex-shrink: 1; }
.drv-header-spacer { flex: 1; }
.drv-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.drv-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 0;
  font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; font-family: var(--sans);
  flex-shrink: 0;
}
.drv-back-btn:hover { color: var(--ink); background: var(--surface); border-color: var(--accent); }
.drv-back-btn i { font-size: 13px; }

/* List view filter strip (chips + search). Sits on the second
   row of the header in list view, hidden in detail view. */
.drv-toolbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 32px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.drv-toolbar input[type="text"] {
  font-size: 12.5px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 0;
  background: var(--surface); color: var(--ink);
  font-family: var(--sans);
  max-width: 280px; flex: 1;
}
.drv-toolbar input[type="text"]:focus { border-color: var(--accent); outline: none; }
.drv-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* The body is a single scroll container. Whichever view is active
   uses the full body. Page never scrolls. */
.drv-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

/* Views — only one is shown at a time. Display toggling preserves
   list scroll position when returning from detail. */
.drv-shell[data-view="list"]   .drv-detail-view,
.drv-shell[data-view="list"]   .drv-detail-toolbar,
.drv-shell[data-view="detail"] .drv-list-view,
.drv-shell[data-view="detail"] .drv-toolbar { display: none; }
.drv-shell[data-view="detail"] .drv-back-btn { display: inline-flex; }
.drv-shell[data-view="list"]   .drv-back-btn { display: none; }

/* Notes-only third state: Google Docs panel. The gdocsPanel lives
   inside .drv-body alongside the list/detail views. Position it
   absolutely so it occupies the same coordinate space and can be
   toggled cleanly without fighting the absolute-positioned views.
   When `data-view="gdocs"`, both drv views + back button hide and
   the gdocs panel takes the full body. */
#notesShellV2 #gdocsPanel {
  position: absolute; inset: 0;
  display: none;
  flex-direction: row;
  gap: 16px;
  overflow: hidden;
  padding: 24px 32px 40px;
  box-sizing: border-box;
}
/* display:flex (not block) so .gdocs-list-card + .gdocs-embed-card
   lay out side-by-side. The earlier `display:block` rule meant the
   inner cards stacked vertically and the iframe collapsed to 0px. */
#notesShellV2[data-view="gdocs"] #gdocsPanel { display: flex; }
#notesShellV2[data-view="gdocs"] .drv-list-view,
#notesShellV2[data-view="gdocs"] .drv-detail-view,
#notesShellV2[data-view="gdocs"] .drv-back-btn { display: none !important; }

/* .drv-body needs a positioning context so the absolute children
   ground themselves to the body, not to hub-main. */
.drv-body { position: relative; }

/* List view content — full-width cards. */
.drv-list-view { padding: 24px var(--gutter) 56px; }
.drv-cards { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.drv-card {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.12s;
}
.drv-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,24,20,.06);
}
.drv-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.drv-card-body { flex: 1; min-width: 0; }
.drv-card-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px; font-family: var(--sans); }
.drv-card-meta { font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.drv-card-meta i { font-size: 12px; opacity: 0.6; margin-right: 3px; }
.drv-card-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 10px; }
.drv-card-status { flex-shrink: 0; }
.drv-card-arrow { font-size: 14px; color: var(--muted); opacity: 0.5; flex-shrink: 0; transition: transform 0.15s, opacity 0.15s; }
.drv-card:hover .drv-card-arrow { opacity: 1; transform: translateX(2px); color: var(--accent); }

.drv-empty {
  max-width: 480px; margin: 40px auto;
  padding: 48px 32px; text-align: center;
  background: var(--card); border: 1px dashed var(--border);
  border-radius: 0;
}
.drv-empty i { font-size: 36px; opacity: 0.35; display: block; margin-bottom: 12px; }
.drv-empty p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Detail view content — full-width, single continuous column. */
.drv-detail-view { padding: 28px var(--gutter) 56px; }
.drv-detail-wrap { max-width: 920px; }
/* Fill-height treatment for client detail view: lock drv-body overflow
   and grow the flex chain so the tab panel uses the full available area. */
#clientsShellV2[data-view="detail"] .drv-body { overflow: hidden; }
#clientsShellV2[data-view="detail"] .drv-detail-view {
  height: 100%; box-sizing: border-box; padding: 24px 32px; display: flex; flex-direction: column;
}
#clientsShellV2[data-view="detail"] .drv-detail-wrap {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
/* ════════════════════════════════════════════════════
   ── Assignments panels (ledger | My Lists) + personal to-do ── */
.da-panel { flex: 1; overflow-y: auto; display: none; flex-direction: column; min-height: 0; }
.da-panel.active { display: flex; }
/* My Lists (ported from the client) */
.da-lists-wrap { padding: 22px 26px 40px; display: flex; flex-direction: column; gap: 0; }
.da-lists-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.da-general-section { background: var(--card); border: 1px solid var(--accent); border-radius: 0; padding: 18px 20px; margin-bottom: 14px; }
.da-topic-section { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 18px 20px; margin-bottom: 12px; }
.da-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.da-section-head-title { font-size: 14px; font-weight: 600; font-family: var(--sans); letter-spacing: -.01em; margin: 0 0 2px; }
.da-section-head-sub { font-size: 12px; color: var(--muted); margin: 0; }
.da-task-list { display: flex; flex-direction: column; }
.da-task-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid transparent; transition: background .12s; cursor: pointer; }
.da-task-item:hover { background: var(--surface); border-color: var(--border); }
.da-task-item input[type=checkbox] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.da-task-text { font-size: 13px; flex: 1; min-width: 0; line-height: 1.4; }
.da-task-item.done .da-task-text { color: var(--muted); text-decoration: line-through; }
.da-task-del { opacity: 0; background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; transition: opacity .15s, color .15s; flex-shrink: 0; }
.da-task-item:hover .da-task-del { opacity: 1; }
.da-task-del:hover { color: var(--red); }
.da-add-row { display: flex; gap: 8px; margin-top: 10px; }
.da-add-input { flex: 1; padding: 8px 12px; font-size: 13px; border: 1px solid var(--border); background: var(--surface); font-family: var(--sans); transition: border-color .15s; }
.da-add-input:focus { border-color: var(--accent); background: var(--card); outline: none; }
.da-add-btn { padding: 8px 13px; background: var(--accent); color: #fff; border: none; font-size: 13px; font-family: var(--sans); cursor: pointer; transition: opacity .15s; flex-shrink: 0; }
.da-add-btn:hover { opacity: .85; }
.da-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.da-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.da-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; }
.da-progress-text { font-size: 11px; color: var(--muted); white-space: nowrap; }
.da-filter-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
.da-task-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.da-task-meta-chip { font-size: 10px; padding: 1px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.da-task-meta-chip.due { background: var(--amber-light); color: var(--amber); border: 1px solid rgba(181,98,10,.15); }
.da-task-meta-chip.due.overdue { background: var(--red-light); color: var(--red); border-color: rgba(184,50,50,.15); }
.da-task-meta-chip.priority-high { background: var(--red-light); color: var(--red); border: 1px solid rgba(184,50,50,.15); }
.da-task-meta-chip.priority-med { background: var(--amber-light); color: var(--amber); border: 1px solid rgba(181,98,10,.15); }
.da-task-meta-chip.priority-low { background: var(--accent-light); color: var(--accent); border: 1px solid rgba(61,90,128,.15); }
.da-task-meta-chip.has-notes { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.da-task-item.done .da-task-meta-chip { opacity: .45; }
.da-fchip { font-size: 11px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: transparent; cursor: pointer; font-family: var(--sans); color: var(--muted); transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.da-fchip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.da-lists-empty { text-align: center; padding: 36px 20px; color: var(--muted); border: 1px dashed var(--border); margin-top: 4px; }
.da-lists-empty p { font-size: 13px; line-height: 1.7; max-width: 220px; margin: 0 auto; }

/* ── Assignments v1: tracking ledger ──
   Serif page title + pulse line, Status/Clients rail, tabular ledger
   with word-chip statuses. Row click drills into the existing
   submissions/feedback detail (rendered into #asgnRight). ── */
.av1-shell { --avp: var(--gutter); flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.av1-head { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 30px var(--avp) 20px; border-bottom: 1px solid var(--border); }
.av1-title { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); font-weight: 400; letter-spacing: 0.01em; margin: 0; }
.av1-pulse { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-weight: 300; min-height: 1em; }
.av1-pulse .av1-dot { margin: 0 8px; opacity: .55; }
.av1-pulse .av1-clay { color: var(--clay, #A96F5F); }
.av1-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 3px; }
.av1-lists-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.04em; padding: 9px 16px; cursor: pointer; transition: color .15s, border-color .15s; }
.av1-lists-btn:hover, .av1-lists-btn.active { color: var(--ink); border-color: var(--ink); }
.av1-new { background: var(--ink); color: var(--paper, var(--bg)); border: 1px solid var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: 0.04em; padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: opacity .15s; }
.av1-new:hover { opacity: .85; }
#casgn-panel-detail { overflow: hidden; }
.av1-body { flex: 1; min-height: 0; display: grid; grid-template-columns: clamp(200px, 15vw, 260px) 1fr; }
.av1-rail { border-right: 1px solid var(--border); padding: 26px 0 30px; overflow-y: auto; }
.av1-rail-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 26px; margin: 28px 0 10px; }
.av1-rail-label:first-child { margin-top: 0; }
.av1-rail-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; border-left: 2px solid transparent; padding: 7px 26px 7px 24px; font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--muted); cursor: pointer; text-align: left; transition: color .15s; }
.av1-rail-row:hover { color: var(--ink); }
.av1-rail-row.active { color: var(--ink); border-left-color: var(--ink); font-weight: 400; }
.av1-rail-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av1-rail-n { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.av1-rail-row.active .av1-rail-n { color: var(--ink); }
.av1-rail-n.clay { color: var(--clay, #A96F5F); }
.av1-main { min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 28px var(--avp) 56px; }
/* Full-row: sits alone above the assignments ledger, so it matches its width. */
.av1-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 9px 14px; font-size: 13px; font-family: var(--sans); font-weight: 300; color: var(--ink); margin-bottom: 22px; flex-shrink: 0; }
.av1-search:focus { border-color: var(--ink); }
.av1-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.av1-table th:nth-child(1) { width: 42%; }
.av1-table th:nth-child(2) { width: 16%; }
.av1-table th:nth-child(3) { width: 12%; }
.av1-table th:nth-child(4) { width: 12%; }
.av1-table th:nth-child(5) { width: 18%; }
.av1-table th { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 0 18px 11px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.av1-table th:first-child, .av1-table td:first-child { padding-left: 0; }
.av1-table th:last-child, .av1-table td:last-child { padding-right: 0; }
.av1-table td { padding: 17px 18px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 13.5px; font-weight: 300; color: var(--ink); }
.av1-table tbody tr { cursor: pointer; transition: background .12s; }
.av1-table tbody tr:hover { background: var(--surface); }
.av1-c-name { font-size: 14.5px; font-weight: 400; letter-spacing: -0.005em; }
.av1-c-sub { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av1-c-client { white-space: nowrap; }
.av1-c-date, .av1-c-due { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.av1-c-due.clay { color: var(--clay, #A96F5F); }
.av1-c-status { white-space: nowrap; }
.av1-chip { display: inline-block; border: 1px solid var(--border); color: var(--muted); font-size: 11px; letter-spacing: 0.05em; padding: 3px 10px 4px; white-space: nowrap; }
.av1-chip.clay { border-color: var(--clay, #A96F5F); color: var(--clay, #A96F5F); }
.av1-chip.accent { border-color: var(--accent); color: var(--accent); }
.av1-chip.sage { border-color: var(--sage-d, var(--green)); color: var(--sage-d, var(--green)); }
.av1-fbline { font-size: 11px; color: var(--sage-d, var(--green)); margin-top: 5px; }
.av1-detailview { flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; }
.av1-detailview #asgnRight { flex: 1; display: flex; flex-direction: column; padding: 24px var(--avp) 56px; width: 100%; max-width: none; }
.av1-back { align-self: flex-start; background: none; border: 0; color: var(--muted); font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.03em; cursor: pointer; padding: 18px var(--avp) 0; display: inline-flex; align-items: center; gap: 7px; transition: color .15s; }
.av1-back:hover { color: var(--ink); }
/* Drill view — same language as the ledger */
.av1-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.av1-d-titlewrap { min-width: 0; flex: 1; }
.av1-d-title { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); font-weight: 400; letter-spacing: 0.01em; margin: 0 0 10px; }
.av1-d-facts { display: flex; align-items: flex-start; gap: clamp(30px, 6vw, 110px); flex-wrap: wrap; margin-top: 16px; }
.av1-d-facts .av1-clay { color: var(--clay, #A96F5F); }
.av1-d-f { display: flex; flex-direction: column; gap: 7px; }
.av1-d-fl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.av1-d-fv { font-size: 13.5px; font-weight: 300; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.av1-d-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; flex-wrap: wrap; padding-top: 6px; }
.av1-danger:hover { color: var(--clay, #A96F5F); border-color: var(--clay, #A96F5F); }
.av1-d-desc { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--ink); max-width: 78ch; margin: 2px 0 6px; white-space: pre-wrap; }
.av1-seam { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 9px; margin: 32px 0 18px; }
.av1-sub { border: 1px solid var(--border); background: var(--card); padding: 20px 24px; margin-bottom: 12px; }
.av1-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.av1-sub-n { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.av1-sub-review { background: none; border: 1px solid var(--border); color: var(--ink); font-family: var(--sans); font-size: 12px; letter-spacing: 0.03em; padding: 7px 14px; cursor: pointer; transition: border-color .15s; }
.av1-sub-review:hover { border-color: var(--ink); }
.av1-sub-notes { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.av1-sub .asgn-sub-file { display: inline-flex; margin-top: 8px; }
.av1-sub-time { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.av1-d-fb { width: 100%; flex: 1 0 auto; min-height: 130px; border: 1px solid var(--border); border-radius: 0; background: var(--bg); padding: 14px 16px; font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--ink); resize: vertical; }
.av1-d-fb:focus { border-color: var(--ink); outline: none; }
.av1-d-fbrow { display: flex; justify-content: flex-end; margin-top: 12px; flex-shrink: 0; }
@media (max-width: 900px) {
  .av1-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .av1-rail { display: flex; gap: 2px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 20px; }
  .av1-rail-label { display: none; }
  .av1-rail-group { display: flex; gap: 2px; }
  .av1-rail-row { width: auto; border-left: 0; padding: 6px 12px; white-space: nowrap; }
  .av1-rail-row.active { border-bottom: 2px solid var(--ink); }
}

/* ── Client portal: "Shared With You" journal entries ──
   Native <details> marker hidden; custom chevron + clean row so the
   subject/date read clearly instead of being shoved by the ▸ marker. */
.cdp-shared-card { margin-bottom: 10px; border: 1px solid var(--border); background: var(--card); border-radius: 0; transition: border-color 0.15s, box-shadow 0.15s; }
.cdp-shared-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(26,24,20,0.05); }
.cdp-shared-summary { padding: 13px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; list-style: none; }
.cdp-shared-summary::-webkit-details-marker { display: none; }
.cdp-shared-summary::marker { content: ""; }
.cdp-shared-chevron { font-size: 12px; color: var(--muted); flex-shrink: 0; transition: transform 0.18s ease; }
details[open] .cdp-shared-chevron { transform: rotate(90deg); }
.cdp-shared-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cdp-shared-meta strong { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdp-shared-date { font-size: 11px; color: var(--muted); }
.cdp-shared-peek { font-size: 11px; color: var(--muted); flex-shrink: 0; opacity: 0; transition: opacity 0.15s; }
.cdp-shared-card:hover .cdp-shared-peek { opacity: 0.7; }
details[open] .cdp-shared-peek { display: none; }
.cdp-shared-body { padding: 2px 16px 14px 40px; font-size: 13.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.cdp-shared-actions { padding: 8px 16px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.cdp-shared-fb { padding: 12px 16px 0; border-top: 1px solid var(--border); }
.cdp-shared-fb-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.cdp-shared-fb-text { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; padding: 10px 12px; font-size: 13px; line-height: 1.6; font-family: var(--sans); border: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--ink); }
.cdp-shared-fb-text:focus { border-color: var(--accent); outline: none; }

/* ── Settings → Session Notes: customization workspace ── */
.np-shell { display: grid; grid-template-columns: 300px 1fr; gap: 24px; margin-top: 18px; align-items: start; }
@media (max-width: 1100px) { .np-shell { grid-template-columns: 1fr; } }
.np-rail { display: flex; flex-direction: column; min-width: 0; }
.np-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; display: block; margin: 14px 0 5px; }
.np-rail > .np-label:first-child { margin-top: 0; }
.np-input { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--sans); }
.np-input:focus { border-color: var(--accent); outline: none; }
textarea.np-input { resize: vertical; line-height: 1.55; }
.np-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.np-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; margin-top: 8px; line-height: 1.4; }
.np-check input { accent-color: var(--accent); flex-shrink: 0; }
.np-hint { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 5px 0 0; }
.np-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Center stage — the document being designed */
.np-stage { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; min-width: 0; }
.np-stage-bar { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: var(--card); border-bottom: 1px solid var(--border); }
.np-stage-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Clean labeled design strip */
.np-design { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
.np-dctl { display: flex; flex-direction: column; gap: 5px; }
.np-dlbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }
.np-dctl .np-input { width: auto; font-size: 12.5px; padding: 6px 26px 6px 9px; }
.np-swatches { display: flex; gap: 5px; }
.np-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--border); }
.np-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--ink); }
.np-stage-actions { display: flex; gap: 8px; }
/* Full-width AI instruction prompt below the builder/preview */
.np-instruct { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.np-instruct-box { width: 100%; box-sizing: border-box; min-height: 180px; resize: vertical; padding: 16px 18px; font-size: 14px; line-height: 1.65; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-family: var(--sans); outline: none; }
.np-instruct-box:focus { border-color: var(--accent); background: var(--card); }
.np-depth { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.np-depth-opt { text-align: left; display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.np-depth-opt:hover { border-color: var(--accent); }
.np-depth-opt.active { border-color: var(--accent); background: var(--card); box-shadow: inset 0 0 0 1px var(--accent); }
.np-depth-label { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.np-depth-desc { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
@media (max-width: 640px) { .np-depth { grid-template-columns: 1fr; } }
.np-stage-scroll { padding: 26px; min-height: 620px; max-height: 760px; overflow-y: auto; display: flex; flex-direction: column; }
.np-stage-scroll > #npEditWrap, .np-stage-scroll > #npPreviewWrap { width: 100%; }
.np-stage-scroll > #npPreviewWrap { display: flex; flex-direction: column; align-items: center; }

/* The document "page" */
.np-doc { width: 100%; max-width: 640px; background: #fff; color: #1a1814; border: 1px solid var(--border); box-shadow: 0 6px 28px rgba(26,24,20,.10); padding: 40px 44px; box-sizing: border-box; }
.np-doc-modern { box-shadow: 0 2px 10px rgba(26,24,20,.06); }
.np-doc-minimal { box-shadow: none; border: none; padding: 24px 4px; background: transparent; }
.np-doc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid; padding-bottom: 8px; margin-bottom: 20px; }
.np-doc-title { font-size: 18px; font-weight: 600; }
.np-doc-meta { font-size: 11px; color: #6e6759; }
.np-doc-h { font-size: 13.5px; font-weight: 600; margin: 18px 0 5px; }
.np-doc-body > .np-doc-h:first-child { margin-top: 0; }
.np-doc-body p { font-size: 13px; line-height: 1.75; margin: 0 0 12px; color: #2a271f; }
.np-page-letter { width: 8.5in; min-height: 11in; background: #fff; padding: 0.9in; box-shadow: 0 8px 40px rgba(0,0,0,.3); margin: 0 auto; box-sizing: border-box; }

/* Full-page modal (print / save-as-PDF) */
.np-full-overlay { display: none; position: fixed; inset: 0; z-index: 5000; background: rgba(26,24,20,.7); flex-direction: column; }
.np-full-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--ink); flex-shrink: 0; }
.np-full-scroll { flex: 1; overflow: auto; padding: 30px; display: flex; justify-content: center; }

/* Edit ⇄ Preview tabs */
.np-stage-tabs { display: flex; gap: 2px; flex-shrink: 0; margin-right: auto; }
.np-tab { padding: 6px 13px; font-size: 12.5px; border: none; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--sans); display: inline-flex; align-items: center; }
.np-tab:hover { color: var(--ink); }
.np-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }

/* Google-Doc-style template editor — fills the stage, comfortable to read/write */
.np-doc-editor {
  width: 100%; box-sizing: border-box; min-height: 560px; resize: vertical;
  background: #fff; color: #2a271f;
  border: 1px solid var(--border); border-radius: 2px;
  box-shadow: 0 6px 28px rgba(26,24,20,.10);
  padding: 46px 54px;
  font-family: var(--sans); font-size: 15px; line-height: 1.85; outline: none;
}
.np-doc-editor:focus { border-color: var(--accent); box-shadow: 0 6px 28px rgba(26,24,20,.14); }
.np-doc-editor::placeholder { color: #b8b0a0; }

/* Session detail → Clinician Notes document surface */
.sds-note-tabs { display: flex; gap: 2px; }
.sds-nt { padding: 5px 12px; font-size: 12px; border: none; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-family: var(--sans); }
.sds-nt:hover { color: var(--ink); }
.sds-nt.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.sds-note-doc { min-height: 220px; }
.sds-note-doc .np-doc { margin: 0 auto; max-width: 100%; }

/* Session Notes → structured template builder */
.np-tb-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.np-tb-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; display: block; margin: 0 0 5px; }
.np-tb-chrome { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
@media (max-width: 760px) { .np-tb-chrome { grid-template-columns: 1fr; } }
.np-tb-sections { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.np-tb-sec { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); padding: 12px; }
.np-tb-sec-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.np-tb-heading { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; font-family: var(--sans); padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); outline: none; }
.np-tb-heading:focus { border-color: var(--accent); }
.np-tb-sec-actions { display: flex; gap: 4px; flex-shrink: 0; }
.np-tb-sec-actions button { width: 28px; height: 28px; border: 1px solid var(--border); background: var(--card); color: var(--muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; }
.np-tb-sec-actions button:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); }
.np-tb-sec-actions button:disabled { opacity: .35; cursor: default; }
.np-tb-instr { width: 100%; box-sizing: border-box; min-height: 54px; resize: vertical; font-family: var(--sans); font-size: 13px; line-height: 1.55; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); outline: none; }
.np-tb-instr:focus { border-color: var(--accent); }
.np-tb-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.np-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
/* Document chrome in the rendered page */
.np-doc-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid; font-size: 11.5px; }
/* Border designs */
.np-bd-box       { border: 1px solid var(--doc-accent); }
.np-bd-rule      { border-top: 3px solid var(--doc-accent); border-bottom: 3px solid var(--doc-accent); }
.np-bd-dotted    { border: 2px dotted var(--doc-accent); }
.np-bd-dashed    { border: 2px dashed var(--doc-accent); }
.np-bd-double    { border: 4px double var(--doc-accent); }
.np-bd-ornamental { border: 1px solid var(--doc-accent); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--doc-accent); }
/* Paper looks */
.np-paper-plain  { background: #fff; }
.np-paper-cream  { background: #fdfaf3; }
.np-paper-lined  { background-color: #fff; }
.np-paper-grid   { background-color: #fff; }
.np-paper-legal  { background-color: #fcfbe9; box-shadow: inset 3px 0 0 #e0a3a3; }
/* Ruled / grid papers: the lines live on the TEXT body and the body text is
   locked to the ruling unit so every line sits on a rule. The header sits
   above on plain paper, so it never throws off the rhythm. */
.np-doc-body { --rule: 28px; }
.np-paper-lined .np-doc-body { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), #dde7f0 calc(var(--rule) - 1px), #dde7f0 var(--rule)); }
.np-paper-legal .np-doc-body { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), #d9d4ad calc(var(--rule) - 1px), #d9d4ad var(--rule)); }
.np-paper-grid  .np-doc-body { background-image: radial-gradient(circle, #d6d6d6 1px, transparent 1.4px); background-size: var(--rule) var(--rule); }
.np-paper-lined .np-doc-body, .np-paper-legal .np-doc-body, .np-paper-grid .np-doc-body { background-position: left top; }
/* Lock the body rhythm to the ruling unit so text lands on the lines.
   Every block is line-height = rule, with margins in whole-rule multiples. */
.np-paper-lined .np-doc-body p, .np-paper-legal .np-doc-body p, .np-paper-grid .np-doc-body p { line-height: var(--rule); margin: 0 0 var(--rule); }
.np-paper-lined .np-doc-body .np-doc-h, .np-paper-legal .np-doc-body .np-doc-h, .np-paper-grid .np-doc-body .np-doc-h { line-height: var(--rule); margin: var(--rule) 0 0; }
.np-paper-lined .np-doc-body > :first-child, .np-paper-legal .np-doc-body > :first-child, .np-paper-grid .np-doc-body > :first-child { margin-top: 0; }
/* Template-tab chrome: 2 columns now that Border moved to the design strip */
.np-tb-chrome-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .np-tb-chrome-2 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════
   ── Therapist Journal Section ──
   ════════════════════════════════════════════════════ */
#section-journal { gap: 0; overflow: hidden; }
#section-journal .tj-tab-bar {
  display: flex; gap: 12px; flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) 0 0;
  padding: 10px 20px;
  background: var(--card);
}
#section-journal .tj-tab { padding: 9px 18px; border-radius: 0; border: none; background: transparent; cursor: pointer; font-size: 13px; font-family: var(--sans); color: var(--muted); display: flex; align-items: center; gap: 6px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
#section-journal .tj-tab:hover { background: var(--surface); color: var(--ink); }
#section-journal .tj-tab.active { background: var(--accent); color: #fff; }
#section-journal .tj-journal-app { display: grid; grid-template-columns: 1fr var(--jp-aw, 380px); grid-template-rows: 1fr; gap: 0; flex: 1 1 0; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--card); transition: grid-template-columns 0.34s cubic-bezier(.4, 0, .2, 1); }
#section-journal .tj-journal-app.jp-dragging,
#section-journal .tj-journal-app.jp-noanim { transition: none; }
/* The journal title + New Entry moved into the section hero (shared jv2-hero
   rules in styles.css) — the editor pane no longer carries its own header. */
#section-journal .tj-header-new { width: auto !important; flex: 0 0 auto !important; padding: 9px 16px !important; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; margin-top: 4px; }
/* Entries tab — search + new + recent list + view all. */
#section-journal .tj-entries-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
#section-journal .tj-entries-search { flex: 1; min-width: 0; padding: 8px 11px; font-size: 12.5px; }
#section-journal .tj-entries-toolbar .tj-new-btn { width: auto; flex-shrink: 0; padding: 8px 14px; white-space: nowrap; }
#section-journal .tj-entries-filters { margin-bottom: 8px; }
#section-journal .tj-entries-filters > summary { font-size: 11px; color: var(--muted); cursor: pointer; letter-spacing: 0.04em; padding: 4px 0; list-style: none; }
#section-journal .tj-entries-filters > summary::-webkit-details-marker { display: none; }
#section-journal .tj-entries-filters .tj-filters { padding: 8px 0 4px; border: none; }
#section-journal .tj-entries-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 6px 2px 8px; }
#section-journal #tj-section-entries .tj-entry-list { padding: 0; overflow: visible; }
#section-journal .tj-viewall-btn { width: 100%; margin-top: 10px; background: none; border: 1px solid var(--border); border-radius: 0; padding: 9px; font-size: 12.5px; font-family: var(--sans); color: var(--ink); cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
#section-journal .tj-viewall-btn:hover { background: var(--surface); border-color: var(--ink); }
#section-journal .tj-sidebar { border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
#section-journal .tj-sidebar-head { padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#section-journal .tj-sidebar-head h3 { font-size: 15px; margin-bottom: 10px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--sans); }
#section-journal .tj-new-btn { width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 0; padding: 10px; font-size: 13px; font-family: var(--sans); font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
#section-journal .tj-new-btn:hover { opacity: 0.8; }
#section-journal .tj-filters { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
#section-journal .tj-filters input { padding: 7px 10px; font-size: 12px; }
#section-journal .tj-entry-list { flex: 1; overflow-y: auto; padding: 8px; }
#section-journal .tj-entry-item { position: relative; padding: 11px 54px 11px 13px; border-radius: 0; cursor: pointer; border: 1px solid transparent; margin-bottom: 4px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; border-left: 3px solid transparent; }
#section-journal .tj-entry-item:hover { background: var(--card); border-color: var(--border); border-left-color: var(--border); }
#section-journal .tj-entry-item.active { background: var(--card); border-color: var(--accent); border-left-color: var(--accent); }
#section-journal .tj-entry-date { font-size: 10px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.07em; }
#section-journal .tj-entry-preview { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
#section-journal .tj-entry-meta { font-size: 10px; color: var(--muted); }
#section-journal .tj-entry-actions { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
#section-journal .tj-entry-item:hover .tj-entry-actions,
#section-journal .tj-entry-item.active .tj-entry-actions,
#section-journal .tj-entry-item.pinned .tj-entry-actions,
#section-journal .tj-entry-item.menu-open .tj-entry-actions { opacity: 1; pointer-events: auto; }
#section-journal .tj-menu-btn { background: none; border: none; cursor: pointer; width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--muted); padding: 0; }
#section-journal .tj-menu-btn:hover { background: var(--surface); color: var(--ink); }
#section-journal .tj-pin-btn { background: none; border: none; cursor: pointer; width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); padding: 0; }
#section-journal .tj-pin-btn:hover { background: var(--surface); color: var(--ink); }
#section-journal .tj-entry-item.pinned .tj-pin-btn { color: var(--accent); }
#section-journal .tj-entry-group-label { font-size: 11px; letter-spacing: 0.01em; text-transform: none; color: var(--muted); font-weight: 600; margin: 16px 2px 8px; }
#section-journal #tjEntryList > .tj-entry-group-label:first-child { margin-top: 4px; }
#section-journal .tj-pinned-label { color: var(--accent); display: flex; align-items: center; gap: 5px; }
/* Plain sans label, not a spaced-caps eyebrow — override the global bare-label rule (which uses !important). */
#section-journal .tj-hide-empty { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: normal !important; text-transform: none !important; color: var(--muted); cursor: pointer; margin: 2px 2px 10px; user-select: none; }
#section-journal .tj-hide-empty input { accent-color: var(--ink); cursor: pointer; margin: 0; }
#section-journal .tj-no-entries { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }
#section-journal .tj-editor-area { display: flex; flex-direction: column; overflow: hidden; background: var(--card); }
#section-journal .tj-editor-toolbar { padding: 14px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; flex-wrap: wrap; }
#section-journal .tj-editor-meta { display: flex; align-items: center; gap: 12px; flex: 1; }
#section-journal .tj-subject-input { background: transparent; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 6px 2px; font-size: 15px; font-weight: 500; color: var(--ink); width: 200px; }
#section-journal .tj-subject-input:focus { border-color: var(--accent); background: transparent; }
#section-journal .tj-date-label { font-size: 12px; color: var(--muted); }
#section-journal .tj-editor-actions { display: flex; align-items: center; gap: 8px; }
#section-journal .tj-btn-save { background: var(--green); color: #fff; border: none; border-radius: 0; padding: 8px 16px; font-size: 13px; font-family: var(--sans); font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
#section-journal .tj-btn-save:hover { opacity: 0.85; }
#section-journal .tj-btn-del { background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 0; padding: 8px 12px; font-size: 13px; font-family: var(--sans); cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
#section-journal .tj-btn-del:hover { color: var(--red); border-color: var(--red); }
#section-journal .tj-btn-dictate { background: none; color: var(--muted); border: 1px solid var(--border); border-radius: 0; width: 38px; height: 38px; padding: 0; font-size: 16px; line-height: 1; cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
#section-journal .tj-btn-dictate:hover { color: var(--ink); border-color: var(--ink); }
#section-journal .tj-btn-dictate.recording { color: #fff; background: #e05050; border-color: #e05050; animation: tjDictPulse 1.5s infinite; }
#section-journal .tj-btn-dictate.recording:hover { background: #c0392b; border-color: #c0392b; }
#section-journal .tj-btn-dictate .tj-dictate-label { font-size: 11px; font-family: var(--sans); font-weight: 500; }
@keyframes tjDictPulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
#section-journal .tj-saved-flash { font-size: 11px; color: var(--green); opacity: 0; transition: opacity 0.3s; }
#section-journal .tj-saved-flash.show { opacity: 1; }
#section-journal .tj-editor-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 40px 14px; display: flex; flex-direction: column; background: var(--card); }
#section-journal #tjEditorContent { flex: 1 0 auto !important; }
#section-journal .tj-empty-editor { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; color: var(--muted); gap: 10px; }
#section-journal .tj-empty-editor .icon { font-size: 40px; }
#section-journal .tj-empty-editor h3 { color: var(--ink); font-size: 22px; font-family: var(--serif); font-weight: 400; }
#section-journal .tj-empty-editor p { font-size: 13px; line-height: 1.7; max-width: 300px; }
#section-journal .tj-prompt-banner { background: var(--purple-light); border: 1px solid rgba(91,63,166,.2); border-radius: 0; padding: 14px 18px; margin-bottom: 18px; display: none; flex-shrink: 0; }
#section-journal .tj-prompt-banner.visible { display: flex; flex-direction: column; }
#section-journal .tj-prompt-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
#section-journal .tj-prompt-label .tj-prompt-dismiss { background: none; border: none; cursor: pointer; color: var(--purple); font-size: 13px; padding: 0; line-height: 1; opacity: 0.6; }
#section-journal .tj-prompt-label .tj-prompt-dismiss:hover { opacity: 1; }
#section-journal .tj-prompt-text { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink); border: none; background: transparent; resize: none; outline: none; width: 100%; min-height: 28px; padding: 0; }
#section-journal .tj-prompt-text::placeholder { color: rgba(91,63,166,.4); font-style: italic; }
#section-journal .tj-prompt-save-btn { background: none; border: none; cursor: pointer; color: var(--purple); font-size: 11px; font-weight: 600; font-family: var(--sans); padding: 2px 8px; letter-spacing: 0.02em; opacity: 0.8; transition: opacity 0.15s; }
#section-journal .tj-prompt-save-btn:hover { opacity: 1; }
#section-journal .tj-prompt-saved-actions { display: flex; align-items: center; gap: 6px; }
#section-journal .tj-prompt-edit-btn { background: none; border: none; cursor: pointer; color: var(--purple); font-size: 11px; font-weight: 500; font-family: var(--sans); padding: 2px 6px; opacity: 0.6; transition: opacity 0.15s; }
#section-journal .tj-prompt-edit-btn:hover { opacity: 1; }
#section-journal .tj-prompt-saved-text { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; font-style: italic; }
#section-journal .tj-prompt-toggle { background: none; border: 1px dashed rgba(91,63,166,.25); border-radius: 0; padding: 6px 12px; font-size: 12px; color: var(--purple); cursor: pointer; font-family: var(--sans); margin-bottom: 10px; display: none; transition: background 0.15s; }
#section-journal .tj-prompt-toggle:hover { background: rgba(91,63,166,.06); }
#section-journal .tj-prompt-toggle.visible { display: inline-flex; align-items: center; gap: 5px; }
#section-journal .tj-editor-highlight-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#section-journal .tj-editor-highlight-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; font-family: var(--sans); font-size: 16px; line-height: 1.85; color: transparent; padding: 0; margin: 0; border: none; z-index: 0; }
#section-journal .tj-editor-highlight-layer mark { background: rgba(255, 213, 79, 0.35); color: transparent; border-radius: 2px; cursor: pointer; pointer-events: auto; position: relative; }
#section-journal .tj-editor-highlight-layer mark:hover { background: rgba(255, 213, 79, 0.6); }
#section-journal .tj-editor-highlight-layer mark.active { background: rgba(255, 183, 0, 0.5); }
/* Rich-text editor (contenteditable) */
#section-journal #tjJournalEditor.tj-rte { flex: 1 0 auto; min-height: 260px; overflow-y: visible; width: 100%; background: transparent; border: none; padding: 0; font-family: var(--sans); font-size: 16px; line-height: 1.85; color: var(--ink); outline: none; box-sizing: border-box; }
#section-journal #tjJournalEditor.tj-rte:empty::before { content: attr(data-placeholder); color: #b8af9e; pointer-events: none; }
#section-journal #tjJournalEditor.tj-rte p { margin: 0 0 0.7em; }
#section-journal #tjJournalEditor.tj-rte ul, #section-journal #tjJournalEditor.tj-rte ol { margin: 0 0 0.7em; padding-left: 1.4em; }
#section-journal #tjJournalEditor.tj-rte a { color: var(--accent); text-decoration: underline; }
#section-journal #tjJournalEditor.tj-rte img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 6px 0; }
/* Note highlights painted with the CSS Custom Highlight API (no DOM mutation). */
::highlight(tj-note) { background-color: rgba(255, 213, 79, 0.38); }
::highlight(tj-note-active) { background-color: rgba(255, 183, 0, 0.55); }
/* Formatting toolbar pinned at the bottom of the editor pane. */
#section-journal .tj-format-bar { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-top: 10px; padding-top: 11px; padding-bottom: 2px; border-top: 1px solid var(--border); position: sticky; bottom: -14px; background: var(--card); z-index: 2; }
#section-journal .tj-fmt { background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 0; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; transition: color 0.12s, background-color 0.12s, border-color 0.12s, opacity 0.12s, transform 0.12s, box-shadow 0.12s; }
#section-journal .tj-fmt:hover { color: var(--ink); background: var(--surface); }
#section-journal .tj-fmt.on { color: var(--ink); background: var(--surface); }
#section-journal .tj-fmt-sep { width: 1px; height: 22px; background: var(--border); margin: 0 9px; }
#section-journal .tj-word-counter { font-size: 11px; color: var(--muted); opacity: 0.7; }
#section-journal .tj-format-bar .tj-word-counter { margin-left: auto; }
/* "Passage changed" badge for re-anchored notes whose quote was edited away. */
#section-journal .tj-jnote-detached { display: inline-block; margin-left: 6px; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; font-style: normal; vertical-align: middle; }
#section-journal .tj-jnote-card.detached { opacity: 0.72; }
#section-journal .tj-linked-entries-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
#section-journal .tj-linked-entry-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-family: var(--sans); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer; color: var(--muted); transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; text-decoration: none; }
#section-journal .tj-linked-entry-chip:hover { border-color: var(--accent); color: var(--accent); }
#section-journal .tj-linked-entry-chip .bi { font-size: 10px; }
#section-journal .tj-link-add-btn { background: none; border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px; font-size: 11px; color: var(--muted); cursor: pointer; font-family: var(--sans); transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
#section-journal .tj-link-add-btn:hover { border-color: var(--accent); color: var(--accent); }
#section-journal .tj-jnote-quote-preview { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 7px 10px; font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 7px; line-height: 1.5; }
#section-journal .tj-jnote-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 10px 11px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
#section-journal .tj-jnote-card:hover { border-color: var(--accent); }
#section-journal .tj-jnote-card.highlight-active { border-color: #d69e2e; background: rgba(255, 213, 79, 0.08); }
#section-journal .tj-jnote-quote { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--border); line-height: 1.5; }
#section-journal .tj-jnote-text { font-size: 12px; line-height: 1.6; color: var(--ink); }
#section-journal .tj-jnote-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
#section-journal .tj-jnote-time { font-size: 10px; color: var(--muted); }
#section-journal .tj-jnote-del { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 11px; padding: 2px 4px; border-radius: 4px; }
#section-journal .tj-jnote-del:hover { color: #c0392b; background: rgba(192,57,43,0.08); }
#section-journal .tj-analysis-panel { border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; background: var(--card); }
#section-journal .tj-panel-head { padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#section-journal .tj-panel-head h3 { font-size: 16px; margin-bottom: 14px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--sans); }
#section-journal .tj-entry-info { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 10px 12px; margin-bottom: 10px; }
#section-journal .tj-entry-info .aei-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 2px 0; }
#section-journal .tj-entry-info .aei-date { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
#section-journal .tj-entry-info .aei-subject { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
#section-journal .tj-entry-info .aei-words { font-size: 11px; color: var(--muted); }
#section-journal .tj-analyze-btn { width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 0; padding: 11px; font-size: 13px; font-family: var(--sans); font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
#section-journal .tj-analyze-btn:hover { opacity: 0.85; }
#section-journal .tj-analyze-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#section-journal .tj-panel-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; padding-right: 76px; }
#section-journal .tj-panel-tab { flex: 1; padding: 11px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; font-family: var(--sans); }
#section-journal .tj-panel-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
#section-journal .tj-panel-body { flex: 1; overflow-y: auto; padding: 14px; }
#section-journal .tj-tab-section { display: none; }
#section-journal .tj-tab-section.active { display: block; }
#section-journal .tj-empty-panel { text-align: center; padding: 32px 12px; color: var(--muted); font-size: 12px; line-height: 1.8; }
#section-journal .tj-empty-panel .ei { font-size: 26px; margin-bottom: 8px; }
#section-journal .tj-cached-banner { background: var(--accent-light); border: 1px solid rgba(61,90,128,0.2); border-radius: 0; padding: 8px 12px; margin-bottom: 12px; font-size: 11px; color: var(--accent); line-height: 1.5; }
#section-journal .tj-analysis-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 12px 14px; margin-bottom: 10px; animation: fadeUp 0.3s ease; }
#section-journal .tj-badge { display: inline-block; font-size: 10px; padding: 2px 9px; border-radius: 999px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 7px; }
#section-journal .tj-badge-warning  { background: var(--amber-light);  color: var(--amber); }
#section-journal .tj-badge-insight  { background: var(--accent-light); color: var(--accent); }
#section-journal .tj-badge-positive { background: var(--green-light);  color: var(--green); }
#section-journal .tj-badge-pattern  { background: var(--purple-light); color: var(--purple); }
#section-journal .tj-card-quote { font-size: 12px; color: var(--muted); font-style: italic; padding-left: 9px; border-left: 2px solid var(--border); margin-bottom: 7px; line-height: 1.5; }
#section-journal .tj-card-text { font-size: 12px; line-height: 1.6; color: var(--ink); }
#section-journal .tj-card-freq { font-size: 10px; color: var(--purple); margin-top: 5px; }
#section-journal .tj-score-item { margin-bottom: 14px; }
#section-journal .tj-score-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
#section-journal .tj-score-bar { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
#section-journal .tj-score-fill { height: 100%; border-radius: 3px; transition: width 1s ease; width: 0%; }
#section-journal .tj-summary-box { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 12px; margin-top: 14px; font-size: 12px; line-height: 1.7; }
#section-journal .tj-summary-box strong { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
#section-journal .tj-prompt-card { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
#section-journal .tj-prompt-card:hover { border-color: var(--purple); background: var(--purple-light); }
#section-journal .tj-prompt-num { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-bottom: 5px; font-weight: 500; }
#section-journal .tj-prompt-q { font-family: var(--serif); font-size: 14px; line-height: 1.5; font-style: italic; color: var(--ink); }
#section-journal .tj-prompt-why { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
#section-journal .tj-use-hint { font-size: 10px; color: var(--purple); margin-top: 6px; text-align: right; }
#section-journal .tj-gdocs-panel { display: none; height: calc(100vh - 180px); min-height: 400px; flex: none; border-top: 1px solid var(--border); overflow: hidden; }
#section-journal .tj-gdocs-panel.active { display: flex; }
#section-journal .tj-gdocs-list { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0; padding: 16px; border-right: 1px solid var(--border); background: var(--card); }
#section-journal .tj-gdocs-embed { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--card); }
#section-journal .tj-gdocs-embed iframe { flex: 1; width: 100%; border: none; min-height: 0; display: block; }
/* Mobile: stack list above embed; same approach as client side. */
@media (max-width: 760px) {
  #section-journal .tj-gdocs-panel { flex-direction: column; }
  #section-journal .tj-gdocs-list  { width: 100%; max-height: 200px; border-right: none; border-bottom: 1px solid var(--border); }
  #section-journal .tj-gdocs-embed { flex: 1; min-height: 240px; }
}
#section-journal .tj-gdoc-item { padding: 10px 12px; border-radius: 0; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; margin-bottom: 6px; flex-shrink: 0; }
#section-journal .tj-gdoc-item:hover, #section-journal .tj-gdoc-item.active { border-color: var(--accent); background: var(--accent-light); }
#section-journal .tj-gdoc-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#section-journal .tj-gdoc-date { font-size: 11px; color: var(--muted); }
#section-journal .tj-gdocs-search { width: 100%; padding: 8px 10px; border-radius: 0; border: 1px solid var(--border); font-size: 12px; font-family: var(--sans); background: var(--surface); color: var(--ink); margin-bottom: 8px; flex-shrink: 0; box-sizing: border-box; }
#section-journal .tj-gdocs-search:focus { outline: none; border-color: var(--accent); }

/* ── Collapsible "Your Files" column ── */
#section-journal .tj-gdocs-rail { display: none; }
#section-journal .tj-gdocs-panel.gdocs-collapsed .tj-gdocs-list { display: none; }
#section-journal .tj-gdocs-panel.gdocs-collapsed .tj-gdocs-rail {
  display: flex; width: 36px; flex-shrink: 0; align-items: flex-start; justify-content: center;
  padding-top: 14px; border-right: 1px solid var(--border); background: var(--card);
}
#section-journal .tj-gdocs-rail button {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  color: var(--muted); width: 26px; height: 26px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; transition: color .12s, background-color .12s, border-color .12s, opacity .12s, transform .12s, box-shadow .12s;
}
#section-journal .tj-gdocs-rail button:hover { color: var(--ink); border-color: var(--ink); }
/* Draggable splitter between the file list and the workspace */
#section-journal .tj-gdocs-splitter { width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent; transition: background .12s; }
#section-journal .tj-gdocs-splitter:hover { background: var(--border); }
#section-journal .tj-gdocs-panel.gdocs-collapsed .tj-gdocs-splitter { display: none; }
/* Roomier file-toolbar buttons (override the tight inline padding) */
#tjGdocsToolbar > .btn { padding: 7px 13px !important; font-size: 12.5px !important; }
#section-journal .tj-gdoc-item { padding: 12px 14px; }
#section-journal .tj-center-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 16px; text-align: center; padding: 32px; }
/* Portal menus */
.tj-entry-menu { position: fixed; background: var(--card); border: 1px solid var(--border); border-radius: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.14); z-index: 9999; min-width: 152px; padding: 4px 0; display: none; }
.tj-entry-menu.open { display: block; }
.tj-entry-menu .tj-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--ink); transition: background 0.1s; user-select: none; font-family: var(--sans); }
.tj-entry-menu .tj-menu-item:hover { background: var(--surface); }
.tj-entry-menu .tj-menu-item.danger { color: #c0392b; }
.tj-entry-menu .tj-menu-item.danger:hover { background: #fde8e6; }
.tj-delete-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 10000; align-items: center; justify-content: center; }
.tj-delete-backdrop.open { display: flex; }
.tj-delete-modal { background: var(--card); border-radius: 0; padding: 32px 28px 28px; max-width: 380px; width: calc(100% - 48px); box-shadow: 0 12px 48px rgba(0,0,0,0.22); }
.tj-delete-modal-icon { font-size: 28px; color: #c0392b; margin-bottom: 14px; }
.tj-delete-modal h3 { font-size: 16px; font-weight: 600; font-family: var(--sans); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; }
.tj-delete-modal p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 24px; }
.tj-delete-modal-btns { display: flex; gap: 10px; justify-content: flex-end; }
.tj-delete-modal-btns .tj-btn-cancel { padding: 8px 18px; border: 1.5px solid var(--border); border-radius: 0; background: transparent; cursor: pointer; font-size: 13px; font-family: var(--sans); color: var(--muted); }
.tj-delete-modal-btns .tj-btn-cancel:hover { border-color: var(--ink); color: var(--ink); }
.tj-delete-modal-btns .tj-btn-confirm-del { padding: 8px 18px; border: none; border-radius: 0; background: #c0392b; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--sans); }
.tj-delete-modal-btns .tj-btn-confirm-del:hover { background: #a93226; }
@media (max-width: 1300px) { #section-journal .tj-journal-app { grid-template-columns: 1fr var(--jp-aw, 340px); } }
@media (max-width: 900px) { #section-journal .tj-journal-app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } #section-journal .tj-analysis-panel { border-left: none; border-top: 1px solid var(--border); max-height: 46vh; } }

/* ── Stepped responsive ──
   The sidebar's own responsive behaviour lives in styles.css, in the shared
   shell layer (230px until 760px, then the 64px icon rail), the same as the
   client dashboard. The older clinician-only breakpoints at 1200, 1020 and
   900px used to hide the labels here while that layer held the column at
   230px, which left a full-width sidebar with no words in it between 760
   and 1020px. Only the non-sidebar layout rules from those blocks remain. */
@media (max-width: 1020px) {
  .clients-layout { grid-template-columns: 210px 1fr; }
  .rxhub-layout { grid-template-columns: 240px 1fr; }
  .sds-body { grid-template-columns: 1fr 240px; }
}
@media (max-width: 900px) {
  .notes-shell { flex-direction: column; }
  .notes-shell .notes-list-card { width: auto; max-height: 220px; }
  .earnings-grid { grid-template-columns: 1fr; }
  .ov-grid-3 { grid-template-columns: 1fr !important; }
  .chat-body { grid-template-columns: 1fr !important; }
  .chat-convos { display: none; }
  /* Adjust luxe full-bleed paddings for mobile */
  .ov-hero { padding: 32px 20px 0; }
  .ov-stat-tiles { margin: 0 -20px; }
  .ov-stat-tile:first-child { padding-left: 20px; }
  .ov-stat-tile:last-child { padding-right: 20px; }
  .ov-body { padding: 20px 16px 32px; grid-template-columns: 1fr; }
  .section:not(#section-overview) { padding: 20px 16px 32px; }
}

/* ── Friends Widget ── */
.ov-grid-3 { display: grid; grid-template-columns: 1fr 1fr 240px; gap: 20px; align-items: start; }
.fw-body { overflow-y: auto; max-height: 228px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.friend-row:last-child { border-bottom: none; }
.friend-av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.p-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--card); position: absolute; bottom: -1px; right: -1px; }
.p-dot.online { background: var(--green); }
.p-dot.offline { background: var(--border); }
.friend-name-cell { font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-pending { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 2px; font-size: 12px; color: var(--gold); }
.friend-msg-btn { padding: 4px 9px; font-size: 11px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-family: var(--sans); transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; flex-shrink: 0; }
.friend-msg-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ── Chat Modal ── */
.chat-overlay { position: fixed; inset: 0; background: rgba(26,24,20,.46); z-index: 950; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.chat-overlay.open { opacity: 1; pointer-events: all; }
.chat-modal { background: var(--card); border-radius: 0; width: min(820px,100%); height: min(560px,90vh); display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(26,24,20,.28); overflow: hidden; animation: fadeUp .2s ease; }
.chat-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat-body { display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0; overflow: hidden; }
.chat-convos { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); }
.chat-convo-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s; }
.chat-convo-item:hover { background: var(--bg); }
.chat-convo-item.active { background: var(--accent-light); }
.chat-conv-av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.chat-convo-meta { flex: 1; min-width: 0; }
.chat-convo-name { font-size: 13px; font-weight: 500; }
.chat-convo-prev { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-wrap { display: flex; flex-direction: column; min-height: 0; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.chat-bw { display: flex; flex-direction: column; gap: 3px; position: relative; }
.chat-bw.mine { align-items: flex-end; }
.chat-bw.theirs { align-items: flex-start; }
.chat-bubble-row { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.chat-bw.mine .chat-bubble-row { flex-direction: row-reverse; }
.chat-bubble { max-width: 66%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.5; word-break: break-word; }
.chat-bubble.mine { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.theirs { background: var(--surface); color: var(--ink); border-bottom-left-radius: 4px; }
.chat-bubble.retracted { font-style: italic; opacity: 0.72; }
.chat-ts { font-size: 10px; color: var(--muted); }
.chat-msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.chat-bubble-row:hover .chat-msg-actions { opacity: 1; }
.chat-msg-actions button { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 4px 6px; border-radius: 4px; font-size: 12px; line-height: 1; }
.chat-msg-actions button:hover { background: var(--surface); color: var(--ink); }
.chat-disclaimer { font-size: 10.5px; color: var(--muted); padding: 6px 16px 10px; line-height: 1.35; background: var(--card); border-top: 1px dashed var(--border); }
.chat-input-row { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; align-items: flex-end; }
.chat-input-row textarea { flex: 1; border: 1px solid var(--border); border-radius: 0; padding: 9px 12px; font-family: var(--sans); font-size: 13px; resize: none; background: var(--surface); color: var(--ink); outline: none; height: 38px; line-height: 1.4; overflow-y: auto; }
.chat-input-row textarea:focus { border-color: var(--accent); }

/* ── Form inputs (shared) ────────────────────────────────────── */
.form-input { display:block; width:100%; padding:9px 12px; font-size:13px; font-family:var(--sans); font-weight:400; color:var(--ink); background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); outline:none; transition:border-color .15s, box-shadow .15s; }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(61,90,128,.1); }
.form-input::placeholder { color:var(--muted); }

/* ── To-Do Section ───────────────────────────────────────────── */
.todo-lanes { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; }
@media (max-width: 900px) { .todo-lanes { grid-template-columns: 1fr; } }
.todo-lane-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; font-family: var(--sans); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; }
.todo-lane-count { font-size: 11px; font-weight: 500; background: var(--surface); color: var(--muted); padding: 1px 8px; border-radius: 999px; margin-left: 4px; }
.todo-list { display: flex; flex-direction: column; gap: 8px; }
.todo-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 28px 12px; background: var(--surface); border-radius: 0; border: 1px dashed var(--border); }
.todo-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; transition: box-shadow 0.15s, border-color 0.15s; position: relative; }
.todo-card:hover { box-shadow: 0 2px 10px var(--shadow); border-color: var(--accent); }
.todo-card.done-card { opacity: 0.65; }
.todo-card.done-card .todo-card-title { text-decoration: line-through; color: var(--muted); }
.todo-card-left { flex: 1; min-width: 0; }
.todo-card-title { font-size: 14px; font-weight: 500; font-family: var(--sans); letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 3px; word-break: break-word; }
.todo-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 6px; }
.todo-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-pri-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; }
.todo-pri-badge.high   { background: var(--red-light);   color: var(--red);   border: 1px solid rgba(184,50,50,.18); }
.todo-pri-badge.medium { background: var(--amber-light); color: var(--amber); border: 1px solid rgba(181,98,10,.18); }
.todo-pri-badge.low    { background: var(--green-light); color: var(--green); border: 1px solid rgba(45,106,79,.18); }
.todo-due { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.todo-due.overdue { color: var(--red); font-weight: 500; }
.todo-card-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.todo-action-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.todo-action-btn:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.todo-action-btn.complete:hover { background: var(--green-light); color: var(--green); border-color: var(--green); }
.todo-action-btn.restore:hover  { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
.todo-action-btn.delete:hover   { background: var(--red-light);   color: var(--red);   border-color: var(--red); }
.todo-filter-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 0; font-size: 12px; font-family: var(--sans); font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--muted); transition: color .15s, background-color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s; }
.todo-filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.todo-filter-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.todo-pri-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.todo-pri-dot.high   { background: var(--red); }
.todo-pri-dot.medium { background: var(--amber); }
.todo-pri-dot.low    { background: var(--green); }
/* ── To-Do: Lists panel ─────────────────────────────────────── */
.todo-layout { display: flex; gap: 28px; align-items: flex-start; flex: 1; min-height: 0; }
.todo-pulse { font-size: 12.5px; color: var(--muted); font-weight: 300; margin-top: 6px; min-height: 1em; }
.todo-pulse .dot { margin: 0 8px; opacity: .55; }
.todo-pulse .ov { color: var(--red); }
.todo-done-when { font-size: 11px; color: var(--muted); margin-top: 6px; }
.todo-lists-panel { width: 240px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 8px 6px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.todo-list-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 0; cursor: pointer; font-size: 13px; font-family: var(--sans); font-weight: 500; color: var(--muted); transition: background .13s, color .13s; user-select: none; }
.todo-list-item:hover { background: var(--surface); color: var(--ink); }
.todo-list-item.active { background: var(--surface); color: var(--ink); font-weight: 600; }
.tli-count { margin-left: auto; font-size: 11px; background: var(--surface); color: var(--muted); padding: 1px 7px; border-radius: 999px; flex-shrink: 0; }
.todo-list-item.active .tli-count { background: var(--border); }
.tli-actions { display: none; gap: 2px; margin-left: auto; flex-shrink: 0; }
.todo-list-item:hover .tli-actions { display: flex; }
.todo-list-item:hover .tli-count { display: none; }
.tli-act-btn { width: 22px; height: 22px; border: none; background: transparent; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.tli-act-btn:hover { background: var(--border); color: var(--ink); }
.todo-lists-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.todo-new-list-btn { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 0; cursor: pointer; font-size: 12px; font-family: var(--sans); font-weight: 500; color: var(--accent); background: transparent; border: none; transition: background .13s; width: 100%; text-align: left; }
.todo-new-list-btn:hover { background: var(--surface); }
.todo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 700px) { .todo-layout { flex-direction: column; } .todo-lists-panel { width: 100%; position: static; } }
/* Action Items panel in overview */
.ai-task-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.ai-task-item:last-child { border-bottom: none; }
.ai-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.ai-task-dot.high   { background: var(--red); }
.ai-task-dot.medium { background: var(--amber); }
.ai-task-dot.low    { background: var(--green); }
.ai-task-info { flex: 1; min-width: 0; }
.ai-task-info strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; }
.ai-task-info span { font-size: 11px; color: var(--muted); }

/* ── Connect / Directory section ── */
.dir-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dir-filter-chip {
  padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; font-family: var(--sans);
}
.dir-filter-chip.active, .dir-filter-chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.dir-filter-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dir-filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 130px; flex: 1; }
.dir-filter-group label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.dir-therapist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dir-therapist-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 0;
  padding: 20px; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.dir-therapist-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.08); border-color: var(--accent); }
.dir-therapist-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dir-therapist-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 16px; flex-shrink: 0; overflow: hidden;
}
.dir-therapist-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dir-therapist-degree { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dir-therapist-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.dir-conn-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.dir-conn-tab {
  padding: 10px 18px; font-size: 13px; font-weight: 500; background: none; border: none;
  color: var(--muted); cursor: pointer; font-family: var(--sans);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.dir-conn-tab:hover { color: var(--ink); }
.dir-conn-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.dir-conn-panel { display: none; }
.dir-conn-panel.active { display: block; }

/* Connection roster rows + request cards (My Connections / Requests tabs).
   Mirrors the client dashboard's .fr-* system so the unified roster —
   clients + colleagues — lays out as proper horizontal rows. */
.fr-row { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.fr-row:last-child { border-bottom: none; }
.fr-info { flex: 1; min-width: 0; }
.fr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fr-actions .btn { padding: 6px 12px; font-size: 12px; }
.fr-req-card { background: var(--surface); border-radius: 0; padding: 16px 18px; display: flex; align-items: center; gap: 13px; margin-bottom: 12px; border: 1px solid var(--border); }
.fr-req-card:last-child { margin-bottom: 0; }
.fr-req-av { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--sans); overflow: hidden; }
.fr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 10px; color: var(--muted); text-align: center; }
.fr-empty i { font-size: 36px; opacity: 0.3; }
.fr-empty p { font-size: 13px; line-height: 1.6; max-width: 280px; }
/* Clinical Notes header meta — calmer HIPAA / save-status chips */
.cn-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cn-status { font-size: 11.5px; color: var(--green); font-weight: 500; white-space: nowrap; }
.cn-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
/* Overflow menu for secondary note actions (Mark up / Export / Drive) */
.cn-more { position: relative; }
.cn-more-btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); cursor: pointer; font-size: 15px; transition: border-color .12s, background .12s; }
.cn-more-btn::-webkit-details-marker { display: none; }
.cn-more-btn:hover { background: var(--surface); border-color: var(--ink); }
.cn-more[open] .cn-more-btn { background: var(--surface); border-color: var(--ink); }
.cn-more-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 180px; display: flex; flex-direction: column; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(26,24,20,.12); }
.cn-more-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border: none; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; border-radius: 5px; cursor: pointer; transition: background .12s; }
.cn-more-menu button:hover { background: var(--surface); }
.cn-more-menu button i { font-size: 14px; color: var(--muted); width: 16px; }
/* Clinical note: titled, rich-text document */
.cn-title-input { width: 100%; border: none; outline: none; background: transparent; font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; padding: 0; }
.cn-title-input::placeholder { color: var(--muted); opacity: 0.5; }
/* Clean document surface — a quiet underlined toolbar over a borderless writing
   column that sits on the page like paper, instead of a framed widget box. */
.cn-rte-toolbar { border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; margin-bottom: 0; position: sticky; top: 0; z-index: 4; }
.cn-editor { width: 100%; min-height: 52vh; padding: 24px 2px 80px; font-size: 15px; line-height: 1.8; border: none; border-radius: 0; background: transparent; color: var(--ink); font-family: var(--sans); box-sizing: border-box; outline: none; }
.cn-editor:focus { border: none; }
.cn-editor:empty:before { content: attr(data-placeholder); color: var(--muted); opacity: 0.55; pointer-events: none; }
.cn-editor h2 { font-size: 18px; font-weight: 600; margin: 16px 0 6px; letter-spacing: -0.01em; }
.cn-editor h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
.cn-editor ul, .cn-editor ol { padding-left: 22px; margin: 6px 0; }
.cn-editor p { margin: 0 0 8px; }

/* ════════════════════════════════════════════════════════════
   CLINICAL NOTES — FULLSCREEN FOCUS MODE
   A distraction-free writing surface. body.cn-focus lifts the note
   detail into a calm, centered, full-viewport column and reveals a
   minimal focus bar. The SAME #noteEditor is reused, so autosave,
   formatting, and AI assists keep working untouched.
   ════════════════════════════════════════════════════════════ */
.cn-focus-bar { display: none; }
/* Hide the shell chrome so the writing surface is truly distraction-free.
   (The note detail lives inside hub-main's stacking context, so it can't
   simply paint over the higher-z topbar/sidebar — hiding them is cleaner.) */
body.cn-focus .topbar { display: none !important; }
body.cn-focus aside.hub-sidebar,
body.cn-focus .hub-sidebar { display: none !important; }
body.cn-focus #notesDetailView {
  position: fixed; inset: 0; z-index: 1200;
  background: var(--bg); overflow-y: auto;
  display: block !important; padding: 0; margin: 0;
}
body.cn-focus .cn-focus-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 54px; z-index: 1300;
  display: flex; align-items: center; gap: 16px;
  padding: 0 22px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.cn-focus-ctx { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.cn-focus-client { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cn-focus-status { color: var(--muted); }
.cn-focus-scaffold { display: flex; align-items: center; gap: 4px; }
.cn-focus-scaffold-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cn-focus-scaffold button {
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 600;
  font-family: var(--sans); transition: color .12s, background-color .12s, border-color .12s, opacity .12s, transform .12s, box-shadow .12s;
}
.cn-focus-scaffold button:hover { border-color: var(--ink); }
.cn-focus-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cn-focus-words { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cn-focus-exit {
  display: inline-flex; align-items: center; font-size: 12.5px; font-family: var(--sans);
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); cursor: pointer; transition: color .12s, background-color .12s, border-color .12s, opacity .12s, transform .12s, box-shadow .12s;
}
.cn-focus-exit:hover { border-color: var(--ink); }
/* The writing column — calm, centered, larger type. */
body.cn-focus #notesDetailView .wd-page {
  max-width: 760px !important; margin: 0 auto; padding: 96px 28px 140px;
}
body.cn-focus .cn-doc-meta { display: none; }      /* metadata is set in normal mode */
body.cn-focus .cn-title-input { font-size: 34px; margin-bottom: 18px; }
body.cn-focus .cn-rte-toolbar {
  position: sticky; top: 54px; z-index: 5;
  background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 14px;
}
body.cn-focus #noteEditor.cn-editor {
  border: none; background: transparent; padding: 4px 0;
  min-height: 64vh; font-size: 16.5px; line-height: 1.9;
}
body.cn-focus #noteEditor.cn-editor:focus { border: none; }
body.cn-focus #notesSummaryCard { max-width: 760px; }

.cn-list-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
.cn-list-filter select { font-size: 13px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); }
/* Notes workspace: list toolbar (search + folder/client/tag filters) */
.cn-list-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cn-search { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.cn-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; }
.cn-search input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); font-size: 13px; box-sizing: border-box; outline: none; }
.cn-search input:focus { border-color: var(--accent); }
.cn-list-toolbar > select { font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-family: var(--sans); }
/* Notes workspace: detail meta row (client / folder / tags / pin) */
/* Quiet metadata strip beneath the title — reads as document properties, not a
   form. Fields are borderless until hovered/focused so they recede. */
.cn-doc-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cn-meta-field { font-size: 12.5px; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-family: var(--sans); transition: border-color .12s, background .12s; }
.cn-meta-field:hover { background: var(--surface); }
.cn-meta-field:focus { border-color: var(--accent); background: var(--card); outline: none; }
.cn-doc-meta #noteClient { min-width: 150px; font-weight: 500; }
.cn-doc-meta #noteFolder { min-width: 130px; color: var(--muted); }
.cn-doc-meta #noteTags { flex: 1; min-width: 180px; color: var(--muted); }
.cn-pin-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 6px 11px; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--muted); cursor: pointer; font-family: var(--sans); }
.cn-pin-btn.on { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); border-color: var(--accent); }
/* Note cards: tags + pin */
.cn-tag-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.cn-tag { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.drv-card { position: relative; }
.cn-card-pin { position: absolute; top: 12px; right: 40px; width: 26px; height: 26px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .15s, color .15s; border-radius: 6px; }
.drv-card:hover .cn-card-pin, .cn-card-pin.on { opacity: 1; }
.cn-card-pin.on { color: var(--accent); }
.cn-card-pin:hover { background: var(--surface); }
/* Quiet resting state: the multi-select checkbox and the trailing chevron only
   appear on hover (or when active), so a row reads as a clean document at rest. */
/* Multi-select checkbox lives in the top-right next to the pin (not on the
   left), hover-revealed like the pin so the card reads clean at rest. */
.drv-card .cn-select-cb { position: absolute; top: 15px; right: 72px; margin: 0; flex-shrink: 0; opacity: 0; cursor: pointer; transition: opacity .15s; z-index: 2; }
.drv-card:hover .cn-select-cb, .drv-card .cn-select-cb:checked, .drv-card.cn-selected .cn-select-cb { opacity: 1; }
#notesList .drv-card-arrow { opacity: 0; }
#notesList .drv-card:hover .drv-card-arrow { opacity: 1; }
.drv-card.cn-pinned { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
/* Connect: fill the content area (no narrow centered column) — relies on the
   shared .section horizontal padding for breathing room. */
#section-connect.active { width: 100%; max-width: none; margin: 0; }
/* Each connection rendered as a bordered card, not a bare row */
.dir-conn-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--border); background: var(--card); border-radius: 0; margin-bottom: 12px; transition: border-color 0.15s; }
.dir-conn-card:hover { border-color: var(--accent); }
.dir-conn-card:last-child { margin-bottom: 0; }
/* Privacy-forward directory: exact @username lookup */
.dir-lookup-card { padding: 24px 26px; margin-bottom: 18px; }
.dir-lookup-state { grid-column: 1 / -1; }
.dir-lookup-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.dir-lookup-ico { font-size: 22px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.dir-lookup-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 4px; }
.dir-lookup-sub { font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 620px; }
.dir-lookup-field { position: relative; max-width: 360px; }
.dir-lookup-field .dir-lookup-at { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.dir-lookup-field input { width: 100%; padding-left: 28px; box-sizing: border-box; }
.dir-lookup-count { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.dir-lookup-state { padding: 40px 28px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 0; }
.dir-lookup-state i { font-size: 30px; opacity: 0.5; display: block; margin-bottom: 12px; }
.dir-lookup-state p { font-size: 14px; color: var(--ink); margin: 0 0 6px; font-weight: 500; }
.dir-lookup-state span { font-size: 12.5px; line-height: 1.55; display: block; max-width: 420px; margin: 0 auto; }
/* Two-column connection layouts (My Connections: clients | clinicians;
   Requests: incoming | sent). Stacks on narrow widths. */
.fr-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .fr-two-col { grid-template-columns: 1fr; gap: 20px; } }
.fr-req-col-head { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.fr-req-col-head .fr-col-count { font-size: 10px; font-weight: 600; background: var(--surface); color: var(--muted); padding: 1px 8px; border-radius: 999px; }
/* Connection search field (icon sits inside a full-width input). */
.fr-search-wrap { position: relative; margin-bottom: 16px; }
.fr-search-wrap input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--border); border-radius: 0; font-family: var(--sans); font-size: 13px; background: var(--surface); color: var(--ink); outline: none; box-sizing: border-box; }
.fr-search-wrap input:focus { border-color: var(--accent); }
.fr-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }

/* Directory visibility banner (driven by profiles.directory_visible) */
.dv-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 18px; border-radius: 0; background: var(--surface); border: 1px solid var(--border); }
.dv-banner.visible { background: color-mix(in srgb, var(--green) 8%, var(--card)); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.dv-banner-icon { font-size: 18px; color: var(--muted); flex-shrink: 0; }
.dv-banner.visible .dv-banner-icon { color: var(--green); }
.dv-banner-body { flex: 1; min-width: 0; }
.dv-banner-title { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; }
.dv-banner-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.dv-banner-cta { font-size: 12px; padding: 7px 14px; flex-shrink: 0; }
@media (max-width: 720px) { .dv-banner { flex-direction: column; align-items: stretch; text-align: left; } .dv-banner-cta { align-self: flex-start; } }

/* ── Settings panel ── */
.st-shell { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.st-nav { display: flex; flex-direction: column; gap: 2px; }
.st-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 0; font-size: 13px; color: var(--muted); cursor: pointer; border: none; background: transparent; text-align: left; font-family: var(--sans); transition: color 0.15s, background-color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s; }
.st-nav-item:hover { background: var(--surface); color: var(--ink); }
.st-nav-item.active { background: var(--accent-light); color: var(--accent); font-weight: 500; }
.st-ni-icon { font-size: 15px; width: 18px; text-align: center; }
.st-panel { display: none; }
.st-panel.active { display: flex; flex-direction: column; gap: 20px; }
.settings-card { background: var(--card); border: 1px solid var(--border); border-radius: 0; padding: 24px; box-shadow: 0 2px 16px var(--shadow); }
.settings-card h3 { margin-bottom: 6px; font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.settings-card .sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.avatar-row { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.avatar-large { width: 68px; height: 68px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 22px; font-family: var(--serif); overflow: hidden; flex-shrink: 0; border: 2px solid var(--border); }
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.credential-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 0; gap: 12px; }
.credential-row .cred-label { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.credential-row .cred-value { font-size: 14px; font-family: var(--sans); font-weight: 500; letter-spacing: 0; color: var(--ink); }
.verify-gate { background: var(--surface); border: 1px solid var(--border); border-radius: 0; padding: 28px; text-align: center; }
.verify-gate .lock-icon { font-size: 32px; margin-bottom: 12px; }
.verify-gate h4 { margin-bottom: 6px; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.verify-gate p { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.verify-form { max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.username-wrap { position: relative; display: flex; align-items: center; }
.username-wrap .at-prefix { position: absolute; left: 13px; color: var(--muted); font-size: 14px; pointer-events: none; user-select: none; }
.username-wrap input { padding-left: 26px; }
.username-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
@media (max-width: 760px) { .st-shell { grid-template-columns: 1fr; } }

/* Astrasera editorial rail lock.
   This dashboard-specific file loads after the global skin, so the final
   geometry for the luxury fixed rail lives here as well. Styling only. */
@media (min-width: 901px) {
  .hub-shell {
    overflow: visible !important;
  }

  .hub-sidebar {
    width: 270px !important;
    min-height: 100vh !important;
    height: 100vh !important;
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 130 !important;
  }

  .hub-main {
    margin-left: 270px !important;
  }

  header.topbar {
    padding-left: calc(270px + 36px) !important;
  }

  .hub-sidebar.collapsed {
    width: 72px !important;
  }

  .hub-sidebar.collapsed + .hub-main,
  .hub-shell.sidebar-collapsed .hub-main {
    margin-left: 72px !important;
  }

  body:has(.hub-sidebar.collapsed) header.topbar,
  body:has(.hub-shell.sidebar-collapsed) header.topbar {
    padding-left: calc(72px + 36px) !important;
  }
}

/* Collapsed rail spacing lock.
   Dashboard-specific CSS loads after the global skin, so collapsed geometry
   is finalized here too. Styling only; all buttons/routes remain unchanged. */
@media (min-width: 901px) {
  .hub-sidebar.collapsed {
    width: 72px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .hub-sidebar.collapsed .sidebar-profile {
    min-height: 76px !important;
    padding: 18px 0 12px !important;
    justify-content: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }

  .hub-sidebar.collapsed .sidebar-avatar,
  .hub-sidebar.collapsed .sidebar-profile-info {
    display: none !important;
  }

  .hub-sidebar.collapsed .sidebar-toggle,
  .hub-sidebar.collapsed .sidebar-profile-toggle {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
  }

  .hub-sidebar.collapsed .sidebar-items-wrap {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 12px 10px 10px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
  }

  .hub-sidebar.collapsed .sidebar-section-label,
  .hub-sidebar.collapsed .sidebar-divider {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .hub-sidebar.collapsed .sidebar-item {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  .hub-sidebar.collapsed .sidebar-item .si-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hub-sidebar.collapsed .si-label,
  .hub-sidebar.collapsed .sidebar-badge {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hub-sidebar.collapsed .sidebar-signout {
    margin-top: auto !important;
    padding: 10px 10px 14px !important;
    flex: 0 0 auto !important;
  }
}

/* ── Note Studio — fullscreen note designer (18-note-templates.js) ── */
.ns-overlay { position: fixed; inset: 0; z-index: 1200; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.ns-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ns-head-l h1 { font-family: var(--serif) !important; font-weight: 400 !important; font-size: 24px !important; line-height: 1.1 !important; margin: 0 0 2px; letter-spacing: -0.018em !important; }
.ns-head-sub { font-size: 12px; color: var(--muted); }
.ns-head-r { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.ns-body { display: grid; grid-template-columns: 420px minmax(0, 1fr); min-height: 0; }
.ns-rail { overflow-y: auto; padding: 22px 26px 70px; border-right: 1px solid var(--border); }
.ns-rail-div { border-top: 1px solid var(--border); margin: 22px 0 16px; }
.ns-stage { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.ns-designbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; padding: 13px 30px; border-bottom: 1px solid var(--border); background: var(--bg); }
.ns-stage-scroll { flex: 1; overflow-y: auto; padding: 36px 44px 90px; }
.ns-stage-scroll #npPage { max-width: 860px; margin: 0 auto; }

/* Settings → Session Notes summary card (the studio's front door) */
.ns-sumcard { display: flex; gap: 24px; align-items: stretch; border: 1px solid var(--border); background: var(--card); padding: 18px 20px; margin: 14px 0 8px; }
.ns-thumb { width: 216px; height: 172px; overflow: hidden; border: 1px solid var(--border-light, var(--border)); background: var(--surface); flex-shrink: 0; }
.ns-thumb-inner { transform: scale(0.30); transform-origin: top left; width: 700px; pointer-events: none; }
.ns-sum-main { display: flex; flex-direction: column; gap: 9px; justify-content: center; align-items: flex-start; min-width: 0; }
.ns-sum-spec { font-family: var(--serif); font-size: 17.5px; color: var(--ink); letter-spacing: -0.01em; line-height: 1.35; }
.ns-sum-hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; max-width: 54ch; }
@media (max-width: 900px) {
  .ns-body { grid-template-columns: 1fr; }
  .ns-rail { border-right: 0; border-bottom: 1px solid var(--border); max-height: 46vh; }
  .ns-sumcard { flex-direction: column; }
}

/* ── Messages v5 — correspondence thread (shared by client + clinician) ──
   Typographic blocks instead of bubbles: speaker label + rule color carry
   the voice; client/clinician anchors left, self anchors right (block
   floats right, text reads left). Session invites are attachment rows. */
.mv5-day { display: flex; align-items: center; gap: 16px; margin: 26px 0 2px; }
.mv5-day span { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 15px; color: var(--muted); flex-shrink: 0; }
.mv5-day::after { content: ""; flex: 1; border-top: 1px solid var(--border-light, var(--border)); }
.mv5 { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 0 2px; }
.mv5.you { align-items: flex-end; }
.mv5-in { max-width: 54ch; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.mv5-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.mv5-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.mv5.you .mv5-name { color: var(--accent); }
.mv5-time { font-size: 10.5px; color: var(--muted); }
.mv5-body { font-size: 13.5px; line-height: 1.6; color: var(--ink); border-left: 2px solid var(--border); padding-left: 13px; word-break: break-word; white-space: pre-wrap; }
.mv5.you .mv5-body { border-left-color: var(--accent); }
.mv5-body.retracted { color: var(--muted); font-style: italic; }
.mv5-meta { display: flex; gap: 12px; margin: 4px 0 0 15px; font-size: 10.5px; color: var(--muted); min-height: 13px; }
.mv5-read { opacity: 0.9; }
.mv5-act { cursor: pointer; opacity: 0; transition: opacity 0.12s ease; }
.mv5:hover .mv5-act { opacity: 1; }
.mv5-act:hover { color: var(--ink); }
.mv5-invite { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--card, var(--bg)); padding: 11px 14px; margin-left: 15px; }
.mv5-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink); flex-shrink: 0; }
.mv5-itx { display: flex; flex-direction: column; line-height: 1.3; }
.mv5-it1 { font-size: 13px; font-weight: 600; color: var(--ink); }
.mv5-it2 { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mv5-igo { margin-left: 8px; font-size: 11px; letter-spacing: 0.06em; font-weight: 600; padding: 7px 16px; border: none; background: var(--ink); color: var(--bg); cursor: pointer; flex-shrink: 0; }
.mv5-invite.ended { opacity: 0.62; }
.mv5-igo.ghost, .mv5-invite.ended .mv5-igo { background: transparent; border: 1px solid var(--border); color: var(--muted); font-weight: 500; cursor: default; }
.mv5-composer { border-top: 1px solid var(--border); padding: 12px 20px 8px; flex-shrink: 0; background: transparent; }
.mv5-input { width: 100%; box-sizing: border-box; border: none; background: transparent; font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink); outline: none; resize: none; height: 42px; max-height: 120px; overflow-y: auto; padding: 3px 0; }
.mv5-input::placeholder { color: var(--muted); opacity: 0.7; }
.mv5-cfoot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 0 6px; }
.mv5-note { font-size: 10px; color: var(--muted); line-height: 1.45; }
.mv5-send { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 9px 20px; border: none; background: var(--ink); color: var(--bg); cursor: pointer; flex-shrink: 0; }


/* ── Sessions v3 — hero-grade ledger (04-dashboard-main renderPastSessionsList) ──
   Squared geometry throughout: no pills, no rounded chips. One shared grid so
   the column headers register exactly over the artifact marks. */
.sv3-g { display: grid; grid-template-columns: 84px minmax(0, 1fr) 96px 84px 84px 84px 30px; gap: 0 12px; align-items: center; }
.sv3-cols { padding: 22px 4px 9px; border-bottom: 1px solid var(--ink); }
.sv3-cols span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sv3-cols span.c { text-align: center; }
.sv3-mo { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 24px 0 0; padding-left: 4px; }
.sv3-row { padding: 15px 4px; border-bottom: 1px solid var(--border-light, var(--border)); cursor: pointer; }
.sv3-row:hover { background: var(--card); }
.sv3-row.open { background: var(--card); border-bottom: 1px solid var(--border-light, var(--border)); }
.sv3-date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sv3-name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.sv3-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sv3-mark { text-align: center; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv3-mark.n { color: var(--border); }
.sv3-arrow { color: var(--muted); font-size: 15px; font-family: var(--serif); text-align: right; transition: transform 0.15s ease; display: inline-block; }
.sv3-arrow.open { transform: rotate(90deg); }
.sv3-xwrap { border-left: 2px solid var(--ink); background: var(--card); border-bottom: 1px solid var(--border-light, var(--border)); }
.sv3-xwrap .sv3-row { border-bottom: 1px solid var(--border-light, var(--border)); }
.sv3-x { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 40px; padding: 22px 26px 22px 24px; }
@media (max-width: 980px) { .sv3-x { grid-template-columns: 1fr; gap: 20px 0; } .sv3-side { border-left: 0 !important; padding-left: 0 !important; } }
.sv3-mood { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.5; max-width: 54ch; margin: 0 0 14px; color: var(--ink); }
.sv3-threads { border-top: 1px solid var(--border-light, var(--border)); }
.sv3-th { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 0 14px; padding: 10px 0; border-bottom: 1px solid var(--border-light, var(--border)); align-items: baseline; }
.sv3-th-w { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.sv3-th-w.n { color: var(--muted); }
.sv3-th-t { font-size: 13px; line-height: 1.55; color: var(--ink-soft, var(--ink)); }
.sv3-open { display: inline-block; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--bg); background: var(--ink); padding: 11px 20px; margin-top: 14px; cursor: pointer; }
.sv3-side { border-left: 1px solid var(--border-light, var(--border)); padding-left: 30px; }
.sv3-side-h { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--border-light, var(--border)); }
.sv3-rename { cursor: pointer; color: var(--muted); font-size: 11px; }
.sv3-rename:hover { color: var(--ink); }
.sv3-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-light, var(--border)); font-size: 13px; cursor: pointer; color: var(--ink); }
.sv3-item:hover { color: var(--accent); }
.sv3-item i { font-size: 13px; color: var(--muted); }
.sv3-item .v { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.sv3-item .v.go { font-family: var(--serif); font-size: 14px; }
.sv3-more { display: block; width: 100%; margin-top: 18px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; padding: 12px 0; border: 1px solid var(--border); background: transparent; color: var(--ink-soft, var(--ink)); cursor: pointer; }
.sv3-more:hover { border-color: var(--ink); }
/* Squared session toolbar + mode tabs (hero language: no pills) */
#sessionsShellV2 .drv-toolbar input[type="text"] { border-radius: 0 !important; }
#sessionsShellV2 .svt-tabs { border-radius: 0 !important; background: transparent !important; padding: 0 !important; display: flex; }
#sessionsShellV2 .svt-tab { border-radius: 0 !important; font-size: 10.5px !important; letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 18px !important; border: 1px solid var(--border) !important; border-left: none !important; background: transparent !important; color: var(--muted) !important; }
#sessionsShellV2 .svt-tab:first-child { border-left: 1px solid var(--border) !important; }
#sessionsShellV2 .svt-tab.active { border-color: var(--ink) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); background: transparent !important; }
#sessionsShellV2 .drv-header-actions .btn.primary { border-radius: 0 !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px !important; padding: 11px 18px !important; }
#sessionsShellV2 #btnExportPastSessions { border-radius: 0 !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px !important; }

/* Sessions v3 quiet empty states — one line, no bordered box. */
.sv3-quiet { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 14px 4px 8px; }

/* ── Client Work detail chrome — identity first, navigation on one rule ── */
.cws-dhead { padding: 22px 2px 0; }
/* Same spec as the schedule/section heroes — the global h1 clamp would
   otherwise balloon this to 64px. */
.cws-dname { font-family: var(--serif, Georgia, serif) !important; font-weight: 400 !important; font-size: clamp(24px, 2.1vw, 30px) !important; letter-spacing: -0.028em !important; line-height: 1.14 !important; margin: 0 0 14px !important; color: var(--ink); }
.cws-dnav { display: flex; align-items: stretch; justify-content: space-between; flex-direction: row-reverse; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.cws-dnav .cws-tabs { margin-left: 0; }
.cws-back { font-family: var(--sans); font-size: 12.5px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 12px 0; display: inline-flex; gap: 8px; align-items: center; }
.cws-back:hover { color: var(--ink); }
/* Serif, sentence-case tabs — the editorial treatment used across Inner Work. */
.cws-tabs { display: flex; gap: 26px; }
.cws-tab { font-family: var(--serif); font-size: 18px; letter-spacing: 0; text-transform: none; font-weight: 400; padding: 4px 0 12px; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); cursor: pointer; }
.cws-tab:hover { color: var(--ink); }
.cws-tab.on { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Emotion Arc: info tooltip + clickable rows + drill-down ── */
.arc-info { position: relative; display: inline-flex; color: var(--muted); cursor: help; font-size: 12px; }
.arc-info:hover, .arc-info:focus { color: var(--ink); outline: none; }
.arc-info-tip { position: absolute; top: 22px; left: -12px; z-index: 40; width: 340px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 400; line-height: 1.6; padding: 13px 15px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; text-transform: none; letter-spacing: 0; }
.arc-info-tip strong { display: block; margin-bottom: 4px; }
.arc-info:hover .arc-info-tip, .arc-info:focus .arc-info-tip { opacity: 1; pointer-events: auto; }
.arc-row { cursor: pointer; padding: 6px 8px; margin: -6px -8px; border: 1px solid transparent; transition: background 0.12s ease, border-color 0.12s ease; }
.arc-row:hover { background: var(--surface); }
.arc-row.sel { border-color: var(--border); background: var(--surface); }
.arc-detail { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.arc-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.arc-close { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.arc-close:hover { color: var(--ink); }
.arc-day { margin-top: 12px; border-top: 1px solid var(--border-light, var(--border)); padding-top: 10px; }
.arc-day-date { font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 14.5px; margin-bottom: 6px; }
.arc-day-entry { padding: 8px 0; }
.arc-open-entry { font-size: 12px; color: var(--accent); cursor: pointer; }
.arc-open-entry:hover { text-decoration: underline; }

/* Per-client Notes tab — index rows into the Clinical Notes module. */
.cdpn-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px; border-top: 1px solid var(--border-light, var(--border)); cursor: pointer; }
.cdpn-row:hover { background: var(--card); }
.cdpn-pin { font-size: 11px; color: var(--accent); margin-top: 3px; flex-shrink: 0; }
.cdpn-main { flex: 1; min-width: 0; }
.cdpn-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.cdpn-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cdpn-excerpt { font-size: 12.5px; color: var(--ink-soft, var(--ink)); line-height: 1.55; margin-top: 5px; }
.cdpn-arrow { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Sessions ledger — organize controls in the expanded rail. */
.sv3-org-sel, .sv3-org-tags { width: 100%; box-sizing: border-box; border: 1px solid var(--border); background: var(--card, #fff); color: var(--ink); font-family: var(--sans); font-size: 12px; padding: 8px 10px; outline: none; margin-top: 8px; }
.sv3-org-sel:focus, .sv3-org-tags:focus { border-color: var(--accent); }

/* ── Sessions v4: card sections + session-screen tabs ── */
.sv4-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 14px; margin-top: 10px; }
.sv4-card { border: 1px solid var(--border); background: var(--card, #fff); padding: 16px 18px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color 0.12s ease; }
.sv4-card:hover { border-color: var(--ink); }
.sv4-when { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sv4-name { font-family: var(--serif, Georgia, serif); font-size: 19px; letter-spacing: -0.01em; margin-top: 3px; color: var(--ink); }
.sv4-meta { font-size: 12px; color: var(--muted); }
.sv4-org { font-size: 11px; color: var(--accent); margin-top: 2px; }
.sv4-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--border-light, var(--border)); }
.sv4-marks { display: inline-flex; gap: 5px; color: var(--muted); font-size: 12px; }
.sv4-logi { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sv4-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--muted); border: 1px solid var(--border); padding: 2px 7px; opacity: 0.5; }
.sv4-chip.on { opacity: 1; color: var(--green); border-color: rgba(45,106,79,0.4); }
.sv4-go { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.sv4-card.up .sv4-go { color: var(--accent); }
/* Session screen — one continuous scroll: logistics, a seam, the analysis. */
.sd-seam { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: 9px; margin: 34px 0 22px; max-width: 900px; }
.sd-grid { width: 100%; }
/* Session facts as one full-width horizontal strip that fills the row. */
.sd-facts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 0 26px; }
.sd-fact { flex: 1 1 130px; min-width: 0; padding: 16px 22px 17px; border-right: 1px solid var(--border-light, var(--border)); }
.sd-fact:first-child { padding-left: 0; }
.sd-fact:last-child { border-right: 0; padding-right: 0; }
.sd-fact > span { display: block; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.sd-fact > b { display: block; font-family: var(--serif, Georgia, serif); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-fact > b.ok { color: var(--sage-d, #5A6B57); }
.sd-fact > b.due { color: var(--clay, #A96F5F); }
.sd-fact-wide { flex: 1.7 1 220px; }
.sd-people { display: flex; flex-direction: column; gap: 5px; }
.sd-person { font-family: var(--serif, Georgia, serif); font-size: 16px; color: var(--ink); display: flex; align-items: baseline; gap: 9px; }
.sd-person em { font-style: normal; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sd-organize { max-width: 560px; }
.sd-organize-row { display: flex; gap: 12px; align-items: flex-start; }
.sd-organize .sv3-org-sel { flex: 0 0 200px; margin-top: 8px; }
.sd-organize .sv3-org-tags { flex: 1; margin-top: 8px; }
.sd-h { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.sd-att-more { font-size: 11.5px; color: var(--accent); cursor: pointer; padding: 6px 0; }
@media (max-width: 640px) {
  .sd-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .sd-fact, .sd-fact:first-child, .sd-fact:last-child { padding: 14px 16px; }
}
#section-journal .tj-rte .j-tab { display: inline-block; width: 40px; white-space: pre; }


/* Month view is a list, not a wall of blocks — a dot for the colour, the
   start time, and the name. Both Google and Outlook stop there. */
.cal-month-ev { display:flex; align-items:center; gap:6px; font-size:11.5px; padding:2px 0; cursor:pointer; }
.cal-month-ev:hover .cal-month-t { color: var(--ink); }
.cal-month-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.cal-month-dot.green { background: var(--green); }
.cal-month-dot.amber { background: var(--amber); }
.cal-month-time { color:var(--muted); flex-shrink:0; }
.cal-month-t { color:var(--ink-soft, var(--ink)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-month-more { font-size:11px; color:var(--muted); padding:2px 0 0 12px; }

/* ── Doors out of a reading ──
   Every observation ends in a real button, not a text link: Write on This
   opens a fresh linked entry guided by the observation; Keep files one of
   its questions into the Question Log. Sage = the quiet action you can
   take, same as Mark All As Read and the Questions rail's Keep. */
.ac-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--hairline, rgba(27,25,22,.07)); }
.ac-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--green, #5A6B57); background: var(--green-light, #E8ECDF);
  border: 1px solid color-mix(in srgb, var(--green, #5A6B57) 30%, transparent);
  border-radius: 0; padding: 7px 14px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.ac-btn:hover { border-color: var(--green, #5A6B57); }
.ac-btn i { font-size: 12px; }
.ac-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.ac-q-t { flex: 1; min-width: 0; line-height: 1.55; }
.ac-keep {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--green, #5A6B57); background: var(--green-light, #E8ECDF);
  border: 1px solid color-mix(in srgb, var(--green, #5A6B57) 30%, transparent);
  border-radius: 0; padding: 4px 12px; cursor: pointer;
  transition: border-color .14s ease;
}
.ac-keep:hover { border-color: var(--green, #5A6B57); }
.ac-keep[disabled] { opacity: .6; cursor: default; }


/* ── Insurance claims ledger (Billing → Insurance) ── */
.ins-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.ins-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; max-width: 760px; }
.ins-claim { border: 1px solid var(--border); background: var(--card); padding: 14px 20px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 2px 24px; align-items: center; }
.ins-claim.quiet { background: var(--surface); }
.ins-main { min-width: 0; }
.ins-title { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.ins-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }
.ins-meta b { color: var(--ink-soft); font-weight: 600; }
.ins-warn { color: var(--amber); font-weight: 600; }
.ins-side { display: flex; flex-direction: column; gap: 7px; align-items: flex-end; justify-content: center; }
.ins-status { font-size: 12px; font-family: var(--sans); border: 1px solid var(--border); background: var(--bg); color: var(--ink); padding: 6px 10px; cursor: pointer; }
.ins-editor { grid-column: 1 / -1; border-top: 1px solid var(--border); margin-top: 12px; padding-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.ins-ed-row label { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.ins-ed-row input, .ins-ed-row select { width: 100%; box-sizing: border-box; font-size: 13px; font-family: var(--sans); border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 8px 11px; }
.ins-ed-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* ═══ tj journal: the ribbon head + caret prompt + folder picker (2026-08-28) ═══
   The client journal's entry grammar, brought to the clinician's own journal:
   serif name with topic box-widget beside it, prompt that grows while typing
   and condenses to one caret line on save, topic folders in the picker. */
.tj-entry-head { display: flex; align-items: baseline; gap: 16px; margin: 4px 0 14px; min-width: 0; }
.tj-entry-title { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0; cursor: text; min-width: 0; overflow-wrap: anywhere; border-bottom: 1px dashed transparent; }
.tj-entry-title:hover { border-bottom-color: var(--border); }
.tj-entry-title.untitled { color: var(--whisper, #A7A096); font-weight: 400; }
.tj-entry-title-input { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); outline: none; padding: 0; min-width: 200px; flex: 1; }
.tj-entry-head .tj-date-label { margin-left: auto; flex-shrink: 0; font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); }
.tj-topic-widget { align-self: center; flex-shrink: 0; display: inline-flex; align-items: center; border: 1px solid var(--border); background: var(--surface); }
.tj-topic-widget input { background: transparent; border: 0; outline: none; width: 160px; padding: 5px 12px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); }
.tj-topic-widget input::placeholder { color: var(--muted); font-weight: 500; }
.tj-topic-widget:hover { border-color: var(--whisper, #A7A096); }
/* caret prompt block — purple kept, exactly the client grammar */
.tj-prompt-block { margin-bottom: 16px; flex-shrink: 0; border-left: 2px solid var(--purple, #5b3fa6); background: color-mix(in srgb, var(--purple, #5b3fa6) 4.5%, transparent); }
.tj-prompt-toggle2 { display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 11px 18px 11px 15px; font-family: var(--sans); font-size: 12.5px; cursor: pointer; color: var(--purple, #5b3fa6); }
.tj-prompt-car { font-size: 11px; transition: transform .15s ease; opacity: .7; flex-shrink: 0; }
.tj-prompt-toggle2[aria-expanded="true"] .tj-prompt-car { transform: rotate(90deg); opacity: 1; }
.tj-pt-l { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--purple, #5b3fa6); opacity: 0.85; flex-shrink: 0; }
.tj-pt-v { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tj-pt-hint { margin-left: auto; font-size: 11.5px; color: var(--purple, #5b3fa6); opacity: 0.55; flex-shrink: 0; }
.tj-pt-v:not(:empty) ~ .tj-pt-hint { display: none; }
.tj-prompt-banner2 { display: none; padding: 4px 18px 14px 15px; }
.tj-prompt-banner2.visible { display: block; }
.tj-prompt-text2 { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink); border: 1px solid rgba(91,63,166,.18); background: var(--card); resize: none; overflow: hidden; outline: none; width: 100%; box-sizing: border-box; min-height: 44px; padding: 12px 14px; display: block; }
.tj-prompt-text2:focus { border-color: var(--purple, #5b3fa6); }
.tj-prompt-text2::placeholder { color: var(--muted); font-style: italic; opacity: 0.7; }
.tj-prompt-foot { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.tj-prompt-foot .tj-prompt-save-btn { font-family: var(--sans); font-size: 12.5px; font-weight: 500; padding: 6px 16px; background: var(--card); color: var(--purple, #5b3fa6); border: 1px solid var(--purple, #5b3fa6); border-radius: 0; cursor: pointer; }
.tj-prompt-dismiss2 { margin-left: auto; background: none; border: 0; font-family: var(--sans); font-size: 12px; color: var(--muted); cursor: pointer; }
/* folder picker bits (mirrors the client's) */
.jp-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jp-back { background: var(--card); border: 1px solid var(--border); border-radius: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); flex-shrink: 0; }
.jp-folder .jp-folder-ico { font-size: 20px; color: var(--muted); display: block; margin-bottom: 6px; }


/* ══════════════════════════════════════════════════════════════════
   SESSION RECAP (2026-09-30). The record of one hour, from Workflow Mockups/
   Session Recap option E. Drawn by therapist-dashboard/scripts/25-session-recap.js
   into #sessionDetailView. The masthead and the stub bleed through the detail
   view's padding (28px) and the body's (24px) to the edges of the main column.
   ══════════════════════════════════════════════════════════════════ */
#section-sessions { --ee-bleed: calc(var(--gutter, 28px) + 24px); }
#section-sessions .ee-recap { --ee-bleed-l: var(--ee-bleed); --ee-bleed-r: var(--ee-bleed); }
/* ══════════════════════════════════════════════════════════════════
   SESSION RECAP, the dark masthead.

   ONE DOCUMENT ABOUT ONE HOUR. The band at the top carries the facts of the
   hour as a paragraph, with the client's name large. The paper beneath it
   reads in the order a clinician needs it: the sixty-second read, then what
   deserves attention, then the note, then the transcript, and the page
   closes on the dark stub that says how long the hour is kept.

   THE COLOUR CONTRACT. Ocean is the colour of Sessions and it appears in
   two places only: the spine of the well that holds the timed markers, and
   the spine on the two questions to carry forward. Champagne is the em on
   the dark surfaces. No gold, no sage, no lavender, no red: nothing on this
   hour is owed, joining, journaled or past its date.

   THE LIFE. Depth, not colour: a dark band with the grain of dark wood under
   it, one raised sheet climbing over the band with a long soft shadow, the
   markers pressed into the paper, and the dark stub closing the page.
   ══════════════════════════════════════════════════════════════════ */
#section-sessions {
  --ee-ocean: var(--ocean, #6E7D91);
  --ee-band: #16140f; --ee-band-ink: #F3F0E8; --ee-champagne: #CDBB98;
  --ee-hair: var(--border-light, #E8E3DA);
  --ee-photo: url('../../Website%20Photos/personal/login-wood-hq.jpg');
  --ee-sheet: color-mix(in srgb, white 46%, var(--card));
  --ee-well: color-mix(in srgb, var(--putty) 34%, transparent);
  --ee-wellrule: color-mix(in srgb, var(--ink) 10%, transparent);
  --ee-action: var(--action, color-mix(in srgb, var(--ocean) 80%, var(--ink)));
  --ee-action-ink: var(--action-ink, var(--bg));
  --ee-pad: 44px; --ee-main: 1.35fr; --ee-side: 1fr; --ee-gut: 60px;
}
html[data-theme="dark"] #section-sessions { --ee-hair: rgba(255,255,255,.09); --ee-sheet: var(--card); --ee-well: rgba(0,0,0,.26); --ee-wellrule: rgba(255,255,255,.07); --ee-action: var(--champagne, #CDBB98); --ee-action-ink: #16141C; }
body:has(.hub-shell) #section-sessions.section.active { gap: 0 !important; }
#section-sessions .ee-in { animation: eeIn 600ms cubic-bezier(.2,.6,.2,1) both; }
@keyframes eeIn { from { opacity: 0; transform: translateY(12px); } }

/* the field the sheet is laid on */
body:has(#section-sessions[data-field="on"]) .hub-main { background: color-mix(in srgb, var(--putty) 30%, var(--bg)) !important; }
html[data-theme="dark"] body:has(#section-sessions[data-field="on"]) .hub-main { background: color-mix(in srgb, black 30%, var(--bg)) !important; }

/* ── the head of the page ── */
#section-sessions .ee-top { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; }
#section-sessions h1.ee-title { margin: 0 !important; font-family: var(--serif) !important; font-size: clamp(28px, 2.5vw, 38px) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -0.024em !important; color: var(--ink); }

/* ── the masthead ── */
#section-sessions .ee-mast { position: relative; overflow: hidden; margin: 0 calc(-1 * var(--ee-bleed-r)) 0 calc(-1 * var(--ee-bleed-l)); background: var(--ee-band); color: var(--ee-band-ink); padding: 56px var(--ee-bleed-r) 78px var(--ee-bleed-l); }
#section-sessions .ee-mast .ph { position: absolute; inset: -4% -3%; background: var(--ee-photo) center / cover no-repeat; opacity: .34; }
@keyframes eeDrift { from { transform: scale(1.02); } to { transform: scale(1.07) translateX(-1.2%); } }
#section-sessions .ee-mast::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,20,15,.72) 0%, rgba(22,20,15,.38) 58%, rgba(22,20,15,.18) 100%), linear-gradient(0deg, rgba(22,20,15,.66) 0%, transparent 60%); }
#section-sessions .ee-mast .inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 44px; align-items: end; }
#section-sessions h2.ee-name { margin: 0 !important; font-family: var(--serif) !important; font-weight: 300 !important; font-size: clamp(46px, 5.6vw, 76px) !important; line-height: .96 !important; letter-spacing: -0.028em !important; color: #fff; }
#section-sessions .ee-facts { font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: rgba(243,240,232,.86); margin: 24px 0 0; max-width: 60ch; text-wrap: pretty; }
#section-sessions .ee-facts em { font-style: normal; color: var(--ee-champagne); }
#section-sessions .ee-facts em.q { font-style: italic; }
#section-sessions .ee-mast .ee-acts { margin: 0; }

/* ── the sheet ── */
#section-sessions .ee-sheet { position: relative; z-index: 3; margin-top: -36px; background: var(--ee-sheet); border: 1px solid var(--border); padding: 42px var(--ee-pad) 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 46px 96px -54px rgba(27,27,27,.34), 0 6px 18px -12px rgba(27,27,27,.08); }
html[data-theme="dark"] #section-sessions .ee-sheet { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 46px 96px -54px rgba(0,0,0,.7); }
#section-sessions .ee-lede { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 23.5px); line-height: 1.55; letter-spacing: -0.006em; color: var(--ink); margin: 0; max-width: 66ch; text-wrap: pretty; }

/* ── a block: its heading, its one-line short version, then its body ── */
#section-sessions .ee-block { margin-top: 42px; }
#section-sessions .ee-seam { border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
#section-sessions .ee-seam h2 { margin: 0 !important; font-family: var(--serif) !important; font-size: clamp(22px, 2vw, 28px) !important; font-weight: 400 !important; letter-spacing: -0.014em !important; line-height: 1.1 !important; color: var(--ink); }
#section-sessions .ee-seam.loud h2 { font-size: clamp(28px, 2.7vw, 37px) !important; letter-spacing: -0.02em !important; }
#section-sessions .ee-line { font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; max-width: 72ch; }
#section-sessions .ee-line b { font-weight: 500; color: var(--ink); }
#section-sessions .ee-cols { display: grid; grid-template-columns: var(--ee-main) var(--ee-side); gap: var(--ee-gut); align-items: start; margin-top: 22px; }
#section-sessions .ee-side { border-left: 1px solid var(--border); padding-left: calc(var(--ee-gut) / 2); margin-left: calc(var(--ee-gut) / -2); }
#section-sessions h3.ee-h3 { margin: 0 0 8px !important; font-family: var(--serif) !important; font-size: 19px !important; font-weight: 500 !important; letter-spacing: -0.008em !important; line-height: 1.2 !important; color: var(--ink); }
#section-sessions .ee-p { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 14px 0 0; }
#section-sessions .ee-side .ee-h3 + .ee-p { margin-top: 0; }

/* the markers, pressed into the paper with the ocean spine */
#section-sessions .ee-well { margin: 0 0 0 calc(-1 * var(--ee-pad)); padding: 6px 18px 8px var(--ee-pad); background: var(--ee-well);
  box-shadow: inset 3px 0 0 var(--ee-ocean), inset 0 1px 0 var(--ee-wellrule), inset 0 -1px 0 var(--ee-wellrule); }
#section-sessions .ee-mark { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; padding: 13px 0 14px; border-top: 1px solid var(--ee-hair); align-items: baseline; }
#section-sessions .ee-mark:first-child { border-top: 0; }
#section-sessions .ee-mark .t { font-family: var(--serif); font-size: 16px; font-variant-numeric: tabular-nums; color: var(--muted); }
#section-sessions .ee-mark .w { font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--ink); }
#section-sessions .ee-q { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink); margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--ee-ocean); }
#section-sessions .ee-h3 + .ee-q { margin-top: 14px; }

/* ── the note as prose ── */
#section-sessions .ee-part { padding: 14px 0 15px; border-top: 1px solid var(--ee-hair); }
#section-sessions .ee-part:first-child { border-top: 0; padding-top: 0; }
#section-sessions .ee-part h4 { margin: 0 0 4px !important; font-family: var(--serif) !important; font-size: 17px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.3 !important; color: var(--ink); }
#section-sessions .ee-part p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
#section-sessions .ee-room { display: block; width: 100%; box-sizing: border-box; min-height: 200px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border); background: var(--bg); font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink); resize: vertical; outline: 0; border-radius: 0; }
#section-sessions .ee-room:focus { border-color: var(--ink); }
html[data-theme="dark"] #section-sessions .ee-room { background: color-mix(in srgb, black 20%, var(--card)); }
#section-sessions .ee-save { align-items: center; margin-top: 12px; }
#section-sessions .ee-quiet { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); margin-right: auto; }

/* the caret disclosure row and what it opens */
#section-sessions .ee-car { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 18px; padding: 12px 0; border: 0; border-top: 1px solid var(--ee-hair); border-bottom: 1px solid var(--ee-hair); background: transparent; font-family: var(--serif); font-size: 16px; color: var(--ink); cursor: pointer; text-align: left; border-radius: 0; }
#section-sessions .ee-car .bi { font-size: 12px; color: var(--muted); transition: transform .22s cubic-bezier(.2,.6,.2,1); }
#section-sessions .ee-car.open .bi { transform: rotate(180deg); }
#section-sessions .ee-car:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
#section-sessions .ee-how { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; padding: 18px 0 16px; border-bottom: 1px solid var(--ee-hair); }
#section-sessions .ee-how .wide { grid-column: 1 / -1; }
#section-sessions .ee-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; margin-top: 6px; }
#section-sessions .ee-check { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 15px; color: var(--ink-soft); cursor: pointer; }
#section-sessions .ee-check input { accent-color: var(--ink); width: 15px; height: 15px; margin: 0; }
#section-sessions .ee-how .ee-note { margin-top: 0; }

/* fields, in the login's voice */
#section-sessions .ee-f { display: flex; flex-direction: column; gap: 6px; }
#section-sessions .ee-f label { font-family: var(--serif); font-size: 14.5px; color: var(--muted); font-weight: 500; }
#section-sessions .ee-f input, #section-sessions .ee-f select { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 7px 0 8px; font-family: var(--serif); font-size: 16.5px; color: var(--ink); outline: 0; border-radius: 0; }
#section-sessions .ee-f select { appearance: none; -webkit-appearance: none; cursor: pointer; }
#section-sessions .ee-f input:focus, #section-sessions .ee-f select:focus { border-bottom-color: var(--ink); }
#section-sessions .ee-f input::placeholder { color: var(--whisper); font-style: italic; }
#section-sessions .ee-note { font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 16px 0 0; }

/* ── the transcript ── */
#section-sessions .ee-ex { margin-top: 22px; padding: 4px 0 4px 22px; border-left: 1px solid var(--border); }
#section-sessions .ee-say { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 8px 0; align-items: baseline; }
#section-sessions .ee-say .who { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); }
#section-sessions .ee-say p { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.55; color: var(--ink); max-width: 64ch; }
#section-sessions .ee-pause { margin: 2px 0; padding-left: 88px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }

/* ── the stub ── */
#section-sessions .ee-stub { background: var(--ee-band); color: var(--ee-band-ink); margin: 46px calc(-1 * var(--ee-pad)) 0; padding: 32px var(--ee-pad) 38px; }
#section-sessions .ee-stub .ee-seam { border-bottom-color: rgba(255,255,255,.22); }
#section-sessions .ee-stub .ee-seam h2 { color: var(--ee-band-ink); font-size: 22px !important; }
#section-sessions .ee-stub .ee-line { color: rgba(243,240,232,.74); }
#section-sessions .ee-stub .ee-line b { color: var(--ee-champagne); }
#section-sessions .ee-form { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 24px; margin-top: 22px; align-items: start; }
#section-sessions .ee-stub .ee-f label { color: rgba(243,240,232,.55); }
#section-sessions .ee-stub .ee-f input, #section-sessions .ee-stub .ee-f select { color: var(--ee-band-ink); border-bottom-color: rgba(255,255,255,.26); }
#section-sessions .ee-stub .ee-f select option { color: #1B1B1B; }
#section-sessions .ee-stub .ee-f input:focus, #section-sessions .ee-stub .ee-f select:focus { border-bottom-color: var(--ee-band-ink); }
#section-sessions .ee-stub .ee-f input::placeholder { color: rgba(243,240,232,.4); }
#section-sessions .ee-stub .ee-note { color: rgba(243,240,232,.5); }
#section-sessions .ee-tags { display: flex; flex-wrap: wrap; gap: 8px; }
#section-sessions .ee-tags:not(:empty) { margin-top: 10px; }
#section-sessions .ee-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.3); background: transparent; font-family: var(--serif); font-size: 14.5px; color: var(--ee-band-ink); cursor: pointer; border-radius: 0; }
#section-sessions .ee-tag .bi { font-size: 10px; color: rgba(243,240,232,.6); }
#section-sessions .ee-tag:hover { border-color: var(--ee-band-ink); }

/* ── buttons: the one filled action wears the platform's action colour ── */
#section-sessions .ee-acts { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
#section-sessions .ee-btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 1px solid var(--ee-action); background: var(--ee-action); font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ee-action-ink); cursor: pointer; white-space: nowrap; border-radius: 0; transition: gap .25s ease; }
#section-sessions .ee-btn:hover { gap: 13px; }
#section-sessions .ee-btn .bi { font-size: 11px; color: var(--ee-champagne); }
html[data-theme="dark"] #section-sessions .ee-btn .bi { color: #16141C; }
#section-sessions .ee-btn.ee-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
#section-sessions .ee-btn.ee-ghost .bi, html[data-theme="dark"] #section-sessions .ee-btn.ee-ghost .bi { color: var(--muted); }
#section-sessions .ee-btn.ee-ghost:hover { border-color: var(--ink); }
#section-sessions .ee-btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
/* on the dark surfaces, champagne is the fill and the hairline is light */
#section-sessions .ee-mast .ee-btn.ee-fill, html[data-theme="dark"] #section-sessions .ee-mast .ee-btn.ee-fill { background: var(--ee-champagne); border-color: var(--ee-champagne); color: #16140f; }
#section-sessions .ee-mast .ee-btn.ee-fill .bi, html[data-theme="dark"] #section-sessions .ee-mast .ee-btn.ee-fill .bi { color: #16140f; }
#section-sessions .ee-mast .ee-btn.ee-ghost, #section-sessions .ee-stub .ee-btn.ee-ghost { background: transparent; color: var(--ee-band-ink); border-color: rgba(255,255,255,.34); }
#section-sessions .ee-mast .ee-btn.ee-ghost .bi, #section-sessions .ee-stub .ee-btn.ee-ghost .bi { color: var(--ee-champagne); }
#section-sessions .ee-mast .ee-btn.ee-ghost:hover, #section-sessions .ee-stub .ee-btn.ee-ghost:hover { border-color: var(--ee-band-ink); }
html[data-theme="dark"] #section-sessions .ee-mast { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

@media (prefers-reduced-motion: reduce) { #section-sessions .ee-in, #section-sessions .ee-mast .ph { animation: none !important; } }
@media (max-width: 1050px) {
  #section-sessions { --ee-pad: 26px; --ee-gut: 36px; }
  #section-sessions .ee-mast { padding: 40px var(--ee-bleed-r) 66px var(--ee-bleed-l); }
  #section-sessions .ee-mast .inner { grid-template-columns: 1fr; }
  #section-sessions .ee-cols { grid-template-columns: 1fr; gap: 28px; }
  #section-sessions .ee-side { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--border); padding-top: 22px; }
  #section-sessions .ee-form, #section-sessions .ee-how { grid-template-columns: 1fr; }
  #section-sessions .ee-checks { grid-template-columns: 1fr 1fr; }
  #section-sessions .ee-sheet { padding: 30px var(--ee-pad) 0; }
  #section-sessions .ee-well { margin-right: calc(-1 * var(--ee-pad)); padding-right: var(--ee-pad); }
  #section-sessions .ee-stub { margin: 36px calc(-1 * var(--ee-pad)) 0; padding: 28px var(--ee-pad) 32px; }
  #section-sessions .ee-say { grid-template-columns: 1fr; gap: 2px; }
  #section-sessions .ee-pause { padding-left: 0; }
}
/* ── E: integrated. Nothing climbs over the masthead; the split lives at the top only ── */
#section-sessions { --ee-gold-ink: #8a6d3f; --ee-left: 1.5fr; --ee-right: 1fr; }
html[data-theme="dark"] #section-sessions { --ee-gold-ink: #d6bc8a; }
#section-sessions .ee-mast { padding-bottom: 56px; }
#section-sessions .ee-page { padding: 36px 0 0; }
#section-sessions .ee-btn { font-size: 12.5px; letter-spacing: .01em; text-transform: none; font-weight: 500; }
#section-sessions .ee-btn.ee-sm { padding: 6px 10px; font-size: 11.5px; gap: 6px; }
#section-sessions .ee-mark { grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; }
#section-sessions .ee-heads { display: grid; grid-template-columns: var(--ee-left) var(--ee-right); gap: var(--ee-gut); border-bottom: 1px solid var(--ink); padding-bottom: 12px; margin-bottom: 4px; }
#section-sessions .ee-heads h2 { position: relative; margin: 0 !important; font-family: var(--serif) !important; font-size: clamp(22px, 2vw, 29px) !important; font-weight: 400 !important; letter-spacing: -0.014em !important; line-height: 1.15 !important; color: var(--ink); }
#section-sessions .ee-heads h2::after { content: ''; position: absolute; left: 0; bottom: -13px; width: 48px; height: 2px; }
#section-sessions .ee-heads h2.hour::after { background: var(--ee-ocean); }
#section-sessions .ee-heads h2.file::after { background: var(--ink); }
#section-sessions .ee-split { display: grid; grid-template-columns: var(--ee-left) var(--ee-right); gap: var(--ee-gut); align-items: start; margin-top: 24px; }
#section-sessions .ee-split > .right { border-left: 1px solid var(--border); padding-left: calc(var(--ee-gut) / 2); margin-left: calc(var(--ee-gut) / -2); }
#section-sessions .ee-split .ee-lede { margin: 0; }
#section-sessions .ee-raise { margin: 20px 0 0; border-left: 3px solid var(--ee-ocean); background: color-mix(in srgb, var(--ee-ocean) 8%, transparent); padding: 14px 18px; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink); }
#section-sessions .ee-raise em { font-style: italic; }
#section-sessions .ee-say { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }
#section-sessions .ee-say b { font-weight: 500; color: var(--ink); }
#section-sessions .ee-say b.gold { color: var(--ee-gold-ink); }
#section-sessions .ee-split .ee-form { display: block; margin-top: 4px; }
#section-sessions .ee-split .ee-form .ee-f { margin-top: 12px; }
#section-sessions .ee-split .ee-acts { margin-top: 20px; }
#section-sessions .ee-doc { margin-top: 18px; border-top: 1px solid var(--ink); }
#section-sessions .ee-part { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 18px; padding: 14px 0 16px; border-top: 1px solid var(--ee-hair); }
#section-sessions .ee-part:first-child { border-top: 0; }
#section-sessions .ee-part h4 { margin: 0 !important; font-family: var(--serif) !important; font-style: italic; font-size: 15.5px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.6 !important; color: var(--muted); }
#section-sessions .ee-part p { margin: 0; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink); }
#section-sessions .ee-area { width: 100%; box-sizing: border-box; min-height: 190px; margin-top: 14px; padding: 14px 16px; resize: vertical; border: 1px solid var(--ee-hair); background: transparent; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink); outline: 0; border-radius: 0; }
#section-sessions .ee-area:focus { border-color: var(--ink); }
#section-sessions .ee-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
#section-sessions .ee-state { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--muted); }
#section-sessions .ee-tx { margin: 18px 0 0; background: var(--ee-well); border: 1px solid var(--ee-hair); box-shadow: inset 0 2px 8px rgba(27,27,27,.06); padding: 22px 26px; }
html[data-theme="dark"] #section-sessions .ee-tx { box-shadow: inset 0 2px 8px rgba(0,0,0,.35); }
#section-sessions .ee-tline { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 64ch; }
#section-sessions .ee-tline + .ee-tline, #section-sessions .ee-pause + .ee-tline { margin-top: 12px; }
#section-sessions .ee-tline b { display: block; font-weight: 500; font-size: 14.5px; color: var(--muted); margin-bottom: 2px; }
#section-sessions .ee-pause { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); margin: 10px 0 0; padding-left: 0; }
#section-sessions .ee-tx .ee-acts { margin-top: 18px; }
#section-sessions .ee-stub { margin: 52px calc(-1 * var(--ee-bleed-r)) 0 calc(-1 * var(--ee-bleed-l)); padding: 32px var(--ee-bleed-r) 38px var(--ee-bleed-l); }
#section-sessions .ee-stub .ee-acts { margin-top: 20px; }
@media (max-width: 1050px) {
  #section-sessions .ee-heads, #section-sessions .ee-split { grid-template-columns: 1fr; gap: 0; }
  #section-sessions .ee-heads h2.file { display: none; }
  #section-sessions .ee-split > .right { border-left: 0; padding-left: 0; margin-left: 0; margin-top: 36px; border-top: 1px solid var(--ink); padding-top: 14px; }
  #section-sessions .ee-split > .right::before { content: 'The File'; display: block; margin: 0 0 12px; font-family: var(--serif); font-size: 22px; letter-spacing: -0.014em; color: var(--ink); }
}

/* ── E, second pass: the split balanced. The Hour's line anchors to the foot of its column;
   The File is a ledger of three rows, two fields side by side, the tags beneath, one door ── */
#section-sessions .ee-split { align-items: stretch; }
#section-sessions .ee-split > .left { display: flex; flex-direction: column; }
#section-sessions .ee-split > .left .ee-raise { margin-top: auto; }
#section-sessions .ee-file { border-top: 1px solid var(--ink); }
#section-sessions .ee-frow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 11px 0 12px; border-top: 1px solid var(--ee-hair); align-items: baseline; }
#section-sessions .ee-frow:first-child { border-top: 0; }
#section-sessions .ee-frow .k { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
#section-sessions .ee-frow .v { font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
#section-sessions .ee-frow .v b { font-weight: 500; color: var(--ink); }
#section-sessions .ee-frow .v b.gold { color: var(--ee-gold-ink); }
#section-sessions .ee-split .ee-form2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 4px; }
#section-sessions .ee-split .ee-form2 .ee-f { margin-top: 14px; }
#section-sessions .ee-split .ee-form2 .ee-f.wide { grid-column: 1 / -1; }
#section-sessions .ee-split > .right .ee-acts { margin-top: 18px; }
@media (max-width: 1050px) { #section-sessions .ee-split > .left .ee-raise { margin-top: 20px; } }
@media (max-width: 640px) { #section-sessions .ee-split .ee-form2 { grid-template-columns: 1fr; } }

/* the production shell: the drv header carries Sessions and the one Back, so the page has no title row of its own */
#section-sessions .ee-recap .ee-top { display: none; }
#section-sessions .ee-recap .ee-mast { margin-top: -28px; }
#section-sessions .ee-mark.notime { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
#section-sessions .ee-mark .w .ev { display: block; margin-top: 4px; font-style: italic; font-size: 15px; color: var(--muted); }
#section-sessions .ee-mark.risk .w { color: var(--red); }
#section-sessions .ee-p.ee-risk b { font-weight: 500; color: var(--red); }
#section-sessions .ee-quiet { text-align: center; padding: 26px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#section-sessions .ee-quiet i { font-size: 22px; color: var(--muted); }
#section-sessions .ee-quiet .t { font-family: var(--serif); font-size: 20px; color: var(--ink); }
#section-sessions .ee-quiet .s { font-family: var(--serif); font-size: 15.5px; color: var(--muted); max-width: 48ch; }
#section-sessions .ee-acts.ee-center { justify-content: center; }
#section-sessions .ee-hidden { display: none !important; }
#section-sessions .ee-part.plain { grid-template-columns: minmax(0, 1fr); }
#section-sessions .ee-part.plain h4 { display: none; }
#section-sessions .ee-prose p { margin: 0 0 10px; font-family: var(--serif); font-size: 16.5px; line-height: 1.6; color: var(--ink); }
#section-sessions .ee-prose p:last-child { margin-bottom: 0; }
#section-sessions #sdsPostArea.ee-area { min-height: 260px; margin-top: 16px; }
#section-sessions .ee-split .left .ee-quiet { padding-top: 8px; }