/* GMID Platform — shared component styles
   Design tokens (custom properties) are defined in base_team.html / base_portal.html.
   This file adds shared UI components used across tools. */

/* ── Review mode: lock page scroll ── */
html.review-mode,
html.review-mode body {
  overflow: hidden !important;
  height: 100vh !important;
}

html.review-mode .main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

/* ── Text alignment utilities ──────────────────────────────────────────────── */

/* !important so utility classes beat component rules like `.data-table th`
   without needing per-context overrides. Convention matches Tailwind/Bootstrap. */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* ── View switcher (page-level pill toggle: Cases / Documents) ─────────────── */

.view-switcher {
  display: inline-flex;
  background: var(--color-surface-muted);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  gap: 2px;
}

.view-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-subtle);
  text-decoration: none;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.view-switcher-btn svg {
  width: 16px;
  height: 16px;
}

.view-switcher-btn:hover {
  color: var(--color-text);
}

.view-switcher-btn--active {
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-sm);
}

.view-switcher-btn--active:hover {
  color: var(--color-text-strong);
}

/* ── Tool view switcher (icon-only mode toggle inside docs workspace) ──────── */

.tool-view-switcher {
  display: inline-flex;
}

.tool-view-switcher-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  width: 32px;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.tool-view-switcher-btn svg {
  width: 16px;
  height: 16px;
}

.tool-view-switcher-btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.tool-view-switcher-btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tool-view-switcher-btn + .tool-view-switcher-btn {
  border-left: none;
}

.tool-view-switcher-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
  border-color: var(--color-muted);
}

.tool-view-switcher-btn--active {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.tool-view-switcher-btn--active:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}

/* ── Utilities ─────────────────────────────────────────────────────────────── */

.text-muted  { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-danger { color: var(--color-danger); }

/* ── Page header row ────────────────────────────────────────────────────────── */

.page-header {
  margin-bottom: var(--space-6);
}

.page-header h1 {
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
}

/* Row variant: title on left, action button on right */
.page-header--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), opacity var(--transition-normal);
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border-color: var(--color-border);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-hover);
  color: var(--color-text);
  border-color: var(--color-muted);
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-surface);
  border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-danger) 85%, black);
  border-color: color-mix(in srgb, var(--color-danger) 85%, black);
}

/* ── Danger zone (delete affordances) ───────────────────────────────────────── */

.danger-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.danger-zone-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
}
.danger-zone-blocked {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* ── Toolbar ────────────────────────────────────────────────────────────────── */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
}

.toolbar-spacer { flex: 1; }

/* Single-line toolbar variant — used by list views where the filter row
   should never wrap below itself. Filter selects truncate with ellipsis
   so the active value always fits; the full label still appears in the
   dropdown menu. Tighter inter-control gap saves another ~25px. */
.toolbar--no-wrap {
  flex-wrap: nowrap;
  gap: var(--space-2);
  min-width: 0;
}
.toolbar--no-wrap .toolbar-group {
  flex-wrap: nowrap;
  /* Allow the group to flex-shrink so its filter selects can compress
     when the toolbar runs out of room. Without this `flex: 0 0 auto`
     left the group at content width, pushing the rightmost controls
     off-screen instead of letting them truncate gracefully. */
  flex: 0 1 auto;
  min-width: 0;
  gap: var(--space-2);
}

/* Shrink-and-clip group: sizes to its content's natural width when
   there's room, shrinks below content (truncating filters) when the
   toolbar is tight, and clips overflow against its right edge so it
   never bleeds into the pinned group. `flex: 0 1 auto` — not 1 1 0 —
   because we want filters at their natural width on wide screens, not
   stretched to fill half the toolbar. The toolbar-spacer's `flex: 1`
   absorbs leftover space, keeping the pinned group anchored right.

   `overflow-x: clip` clips horizontal overflow without creating a
   scroll context AND without promoting overflow-y to `auto` (the
   spec quirk that bites `overflow: hidden`). That keeps the
   saved-views popover — absolute-positioned to extend below the
   toolbar group — visible vertically while still hiding any filter
   text that runs past the group's right edge. */
.toolbar--no-wrap .toolbar-group--shrink {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}

/* Pinned group: never shrinks, never gets pushed off-screen. The
   filter row's `--shrink` group clips against this group's left edge
   when the toolbar narrows. */
.toolbar--no-wrap .toolbar-group--pinned {
  flex: 0 0 auto;
}
.toolbar--no-wrap .toolbar-spacer {
  min-width: var(--space-2);
}
.toolbar--no-wrap .filter-select {
  /* `min-width: 0` lets the select shrink below its content's natural
     width — combined with text-overflow:ellipsis the label truncates
     ("Updated" → "Upda…") instead of forcing the parent to overflow. */
  min-width: 0;
  max-width: 11rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Note: do NOT set `overflow-x: auto` on the toolbar — it makes the
   toolbar a clipping container, which cuts off absolutely-positioned
   popovers (saved-views, columns) at the toolbar's bottom edge. The
   compression rules above keep the toolbar within reasonable widths. */

/* Filter chip (e.g. active person/assignee filter) */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--control-h);
  padding: 0 0.5rem 0 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.filter-chip-clear {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.filter-chip-clear:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

/* ── Filter selects ─────────────────────────────────────────────────────────── */

.filter-select {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  height: var(--control-h);
  padding: 0 1.6rem 0 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23979797' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
}

.filter-select:hover {
  border-color: var(--color-muted);
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.filter-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Search input ───────────────────────────────────────────────────────────── */

.search-input {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  height: var(--control-h);
  padding: 0 0.75rem 0 2rem;
  font-size: 0.8rem;
  font-family: inherit;
  min-width: 200px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23979797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.55rem center;
  transition: border-color var(--transition-normal), background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.search-input::placeholder { color: var(--color-muted); }

.search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-focus);
}

.search-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-focus);
}

/* Pill variant — icon + clear button, Front-style */
.search-field {
  position: relative;
  display: inline-block;
  width: 300px;
  max-width: 100%;
}

.search-field__icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted);
  pointer-events: none;
  display: flex;
}

.search-input--pill {
  width: 100%;
  background: var(--color-hover);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 0.55rem 0.85rem 0.55rem 2.5rem;
  font-size: 14px;
  min-width: 0;
}

.search-input--pill:focus,
.search-input--pill:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-accent);
  outline: none;
}

.search-input--pill::-webkit-search-cancel-button,
.search-input--pill::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-field__clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #c7c9d1;
  color: var(--color-surface);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.search-field__clear:hover { background: var(--color-muted); }

.search-field:has(.search-input--pill:not(:placeholder-shown)) .search-field__clear {
  display: flex;
}

/* ── Data table ─────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-base);
}

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8b92a0;
  background: var(--color-surface-dim);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sort-header {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 1rem;
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.sort-header:hover {
  color: var(--color-text);
}

.sort-header.active {
  color: var(--color-text);
}

.sort-arrow {
  font-size: 0.6rem;
}

.data-table th:has(.sort-header) {
  padding: 0;
}

.data-table th.col-right .sort-header {
  justify-content: flex-end;
}

.data-table td.col-right {
  text-align: right;
}

.data-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table .clickable-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.data-table--resizable {
  table-layout: fixed;
}

.data-table--resizable th,
.data-table--resizable td {
  border-right: 1px solid var(--color-border-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table--resizable th:last-child,
.data-table--resizable td:last-child {
  border-right: none;
}

.data-table--resizable th {
  position: relative;
}

.data-table--resizable td.cell-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
}

.col-resizer:hover,
.col-resizer.is-dragging {
  background: var(--color-border-subtle);
}

.data-table .clickable-row:hover {
  background: var(--color-surface-dim);
}

/* Case ID badge */
.case-id {
  font-family: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

a.case-id {
  text-decoration: none;
}
a.case-id:hover {
  text-decoration: underline;
}

/* Cases table — couple / type / assignee / created cells */
.couple-row {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.couple-avatars {
  display: inline-flex;
  flex-shrink: 0;
}

.couple-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  color: var(--color-accent);
  font-size: 0.62rem;
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  border: 2px solid var(--color-surface);
  overflow: hidden;
  flex-shrink: 0;
}

.couple-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.couple-avatars .couple-avatar + .couple-avatar {
  margin-left: calc(var(--space-2) * -1);
}

.couple-names {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.couple-names .couple-sep {
  color: var(--color-muted);
  margin: 0 0.25rem;
  font-weight: var(--weight-normal);
}

.type-text {
  color: var(--color-subtle);
}

.assignee {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}

.assignee-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  color: var(--color-accent);
  font-size: 0.62rem;
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  flex-shrink: 0;
}

.assignee-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.created-at {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.dash {
  color: var(--color-muted);
}

/* Cases table — column width locks via <colgroup> */
.col-id        { width: 110px; }
.col-couple    { min-width: 240px; }
.col-type      { width: 140px; }
.col-stage     { width: 200px; }
.col-assigned  { width: 180px; }
.col-assigned-to { width: 180px; }
.col-created   { width: 130px; }
.col-created-at  { width: 130px; }
.col-status      { width: 120px; }
.col-wedding-date { width: 140px; }
.col-town-hall   { width: 160px; }
.col-afl-case-number { width: 140px; }

/* Table footer — summary bar below the table */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-dim);
  color: var(--color-muted);
  font-size: var(--font-xs);
}

.table-footer b {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* Stage pill */
.stage-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  white-space: nowrap;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */

.empty-state {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* ── Case detail layout ─────────────────────────────────────────────────────── */

.case-detail {}

/* Header */
.case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  gap: var(--space-5);
  flex-wrap: wrap;
}

.case-header-identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.case-back {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition-normal);
  margin-right: 0.25rem;
}

.case-back:hover { color: var(--color-text); }

.case-couple-names {
  font-size: 1.15rem;
  font-weight: var(--weight-semibold);
}

.case-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.type-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  white-space: nowrap;
}

.case-assignee {
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* Case nav panel identity block */
.case-nav {
  padding: 0 0.6rem;
}

.nav-panel-back {
  color: var(--color-muted) !important;
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

.nav-panel-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  margin: 0.6rem 0 0.6rem 0;
}

.nav-panel-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal);
  cursor: pointer;
}

.nav-panel-item:hover {
  background: var(--color-hover);
}

.nav-panel-item.active {
  background: rgba(0, 0, 0, 0.07);
  font-weight: var(--weight-medium);
}

/* Tab bar */
.tab-bar {
  display: flex;
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  margin-bottom: 1.75rem;
}

.tab {
  padding: 0.65rem 1rem;
  font-size: var(--font-base);
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-normal), border-color var(--transition-normal);
  margin-bottom: -1px;
  white-space: nowrap;
}

.tab:hover { color: var(--color-text); }

.tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* Tab content area */
.tab-content {
  padding: 1.75rem 2rem;
  max-width: 900px;
}

/* ── Field table (Details tab) ──────────────────────────────────────────────── */

.details-panel {}

.field-table {
  width: 100%;
  border-collapse: collapse;
}

.field-row td {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.field-row:last-child td { border-bottom: none; }

.field-label {
  width: 220px;
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  padding-right: var(--space-6);
  white-space: nowrap;
}

.field-value-cell {
  font-size: var(--font-base);
  cursor: pointer;
}

.field-value-cell:hover .field-edit-hint { opacity: 1; }

.field-edit-hint {
  margin-left: var(--space-3);
  font-size: 0.7rem;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.field-input {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  padding: 0.3rem 0.5rem;
  font-size: var(--font-base);
  font-family: inherit;
  width: 100%;
  max-width: 380px;
  outline: none;
}

.field-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Activity log ───────────────────────────────────────────────────────────── */

.activity-panel {}

.activity-list { list-style: none; }

.activity-item {
  display: grid;
  grid-template-columns: 160px 150px 1fr;
  gap: var(--space-3);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-base);
  align-items: baseline;
}

.activity-item:last-child { border-bottom: none; }

.activity-when {
  font-size: var(--font-xs);
  color: var(--color-muted);
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
}

.activity-who {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}

.activity-what { color: var(--color-text); }

/* ── Links tab ──────────────────────────────────────────────────────────────── */

.links-panel {}

.links-list-items {
  list-style: none;
  margin-bottom: var(--space-6);
}

.link-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.link-item:last-child { border-bottom: none; }

.link-url {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--font-base);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-url:hover { text-decoration: underline; }

/* Icon-only button */
.btn-icon {
  padding: 0.2rem 0.45rem;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--font-lg);
  line-height: 1;
  background: transparent;
  color: var(--color-muted);
  font-family: inherit;
  transition: color var(--transition-normal), background var(--transition-normal);
  flex-shrink: 0;
}

.btn-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-danger-ghost:hover {
  color: var(--color-danger);
  background: rgba(224, 83, 83, 0.1);
}

.link-add-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* ── Form (case creation) ────────────────────────────────────────────────────── */

.back-link {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: 0.4rem;
  transition: color var(--transition-normal);
}

.back-link:hover { color: var(--color-text); }

.form-card {
  max-width: 640px;
  padding: 2rem;
}

.form-section {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.no-p2-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-muted);
  cursor: pointer;
  margin-left: 0.75rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.required {
  color: var(--color-danger);
}

.form-control {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: var(--font-base);
  font-family: inherit;
  width: 100%;
  transition: border-color var(--transition-normal);
}

.form-control::placeholder { color: var(--color-muted); }

.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.form-control:disabled,
.form-control[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.03);
}

select.form-control {
  cursor: pointer;
}

.form-control--sm {
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
}

.form-hint {
  font-size: var(--font-xs);
  color: var(--color-muted);
  margin-top: 0.15rem;
}

.stage-preview {
  color: var(--color-muted);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-5);
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-normal);
}

.btn-link:hover { color: var(--color-accent-hover); }

.btn-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.mt-sm { margin-top: var(--space-3); }

/* ── Client typeahead ────────────────────────────────────────────────────────── */

.client-results-dropdown {
  margin-top: var(--space-1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.client-results-list {
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.client-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background var(--transition-fast);
}

.client-result-item:last-child { border-bottom: none; }

.client-result-item:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }

.client-result-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.client-result-name {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
}

.client-result-email {
  font-size: var(--font-xs);
}

.client-results-empty {
  font-size: 0.8rem;
  padding: 0.5rem 0;
}

.client-selected-display {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: var(--radius-sm);
}

.client-selected-name {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  flex: 1;
}

.create-new-section {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: var(--space-3);
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ── Inline panels (saved views, column picker) ──────────────────────────────── */

.inline-panel {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
}

.inline-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.inline-panel-title {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.inline-panel-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.panel-save-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.panel-save-row .form-control--sm {
  flex: 1;
}

.inline-panel-empty {
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.inline-panel-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
}

/* Saved views list */
.views-list {
  list-style: none;
}

.view-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.view-item:last-child { border-bottom: none; }

.view-name {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  flex: 1;
}

.view-name--link {
  color: var(--color-text);
  text-decoration: none;
}

.view-name--link:hover {
  color: var(--color-muted);
}

.view-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.view-rename {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
  padding-top: var(--space-3);
}

.view-rename.hidden {
  display: none;
}

.view-rename .form-control--sm {
  flex: 1;
}

/* Column picker */
.column-picker-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
  padding: 0.75rem 1rem;
}

.column-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.35rem 0.25rem;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  user-select: none;
}

.column-option:hover { background: var(--color-hover); }

.column-option input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.status-badge--active {
  background: rgba(26, 140, 66, 0.1);
  color: var(--color-success);
}

.status-badge--closed {
  background: rgba(107, 113, 144, 0.1);
  color: var(--color-muted);
}

.status-badge--cancelled {
  background: rgba(214, 59, 59, 0.1);
  color: var(--color-danger);
}

/* ── Docs tool ───────────────────────────────────────────────────────────────── */

.upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--transition-normal), background var(--transition-normal);
}

.upload-zone--over {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.upload-browse-link {
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  font-weight: var(--weight-medium);
}

.upload-browse-link:hover {
  opacity: 0.8;
}

.upload-hint {
  font-size: var(--font-xs);
  color: var(--color-muted);
  opacity: 0.7;
  width: 100%;
  margin-top: var(--space-1);
}

.upload-section {
  margin-top: var(--space-6);
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.upload-form-client {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.doc-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

/* ── Document requirements (nav-panel style) ──────────────────────────────── */

/* Legacy classes kept for badge reuse */
.req-section {
  margin-bottom: var(--space-8);
}

.req-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.req-section-title {
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  margin: 0;
}

.req-section-role {
  font-weight: var(--weight-normal);
  color: var(--color-muted);
  margin-left: var(--space-3);
  font-size: var(--font-xs);
}

.req-section-count {
  font-weight: var(--weight-normal);
  color: var(--color-muted);
  margin-left: 0.35rem;
}

.req-empty {
  color: var(--color-muted);
  font-size: 0.82rem;
  padding: 0.75rem 0;
  margin: 0;
}

.req-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ── Requirement item (accordion) ── */

.req-item {
  background: var(--color-surface);
  cursor: pointer;
}

.req-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.875rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  gap: var(--space-4);
}

.req-item-header:hover {
  background: color-mix(in srgb, var(--color-accent) 3%, transparent);
}

.req-item-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.req-private {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  background: rgba(107, 113, 144, 0.1);
  color: var(--color-muted);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.req-item-label {
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-item-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.req-badge {
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-lg);
}

.req-badge--empty {
  background: rgba(107, 113, 144, 0.08);
  color: var(--color-muted);
}

.req-badge--uploaded {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
}

.req-badge--approved {
  background: rgba(34, 150, 79, 0.08);
  color: var(--color-success);
}

.req-badge--flagged {
  background: rgba(214, 59, 59, 0.08);
  color: var(--color-danger);
}

.req-item-files {
  font-size: 0.72rem;
  color: var(--color-muted);
}

/* Expand body removed — requirements now load workspace on click */

/* ── Files inside a requirement ── */

.req-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.req-file:last-of-type {
  border-bottom: none;
}

.req-file:hover {
  background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  margin: 0 -0.875rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.req-file-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.req-file-name {
  flex: 1;
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-file-status {
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}

.req-file-status--approved { color: var(--color-success); }
.req-file-status--rejected { color: var(--color-danger); }
.req-file-status--pending  { color: var(--color-muted); }

.req-file-empty {
  color: var(--color-muted);
  font-size: 0.82rem;
  padding: 0.6rem 0;
  margin: 0;
}

/* Footer with upload + remove */
.req-item-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.req-upload-inline { margin: 0; }

.req-upload-btn {
  cursor: pointer;
}

.req-note {
  flex: 1;
  font-size: 0.72rem;
  color: var(--color-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-item-footer .text-danger { margin-left: auto; }

/* ── Add requirement form ── */

.add-req-form {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  z-index: var(--z-dropdown);
}

.add-req-form select {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  background: var(--color-bg);
}

.add-req-form .add-req-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* ── Unsorted files row ── */

.unsorted-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.6rem 0.875rem;
  background: var(--color-surface);
}

.unsorted-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.unsorted-info {
  flex: 1;
  min-width: 0;
}

.unsorted-filename {
  display: block;
  font-size: 0.82rem;
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unsorted-meta {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.unsorted-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.unsorted-assign {
  min-width: 160px;
}

/* ── Document review panel ─────────────────────────────────────────────────── */

.doc-review-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  max-width: 680px;
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--color-surface);
}

.doc-review-panel img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border);
}

.doc-review-meta {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: var(--space-5);
  line-height: 1.6;
}

.doc-review-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.doc-type-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.doc-type-form .form-label {
  margin: 0;
  white-space: nowrap;
}

.rejection-note-section {
  margin-top: var(--space-4);
}

.rejection-note-section.hidden {
  display: none;
}

.rejection-note-section .form-control {
  width: 100%;
  resize: vertical;
}

.privacy-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: 0.85rem;
}

.privacy-row input[type="checkbox"] {
  margin-right: 0.35rem;
}

.doc-status-badge {
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
}

.doc-status-badge--approved {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.doc-status-badge--rejected {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  color: var(--color-danger);
}

.doc-status-badge--pending {
  background: color-mix(in srgb, var(--color-muted) 15%, transparent);
  color: var(--color-muted);
}

/* ── Docs queue ─────────────────────────────────────────────────────────────── */

.tab-count {
  font-size: 0.78rem;
  font-weight: var(--weight-normal);
  color: var(--color-muted);
  margin-left: 0.2rem;
}

.tab--active .tab-count {
  color: inherit;
}

.tab--empty .tab-count {
  opacity: 0.5;
}

.queue-filters {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.875rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.table-empty {
  text-align: center;
  color: var(--color-muted);
  font-size: var(--font-base);
  padding: 2.5rem 1rem;
}

/* ── System / Users ──────────────────────────────────────────────────────────── */

.user-row--inactive td {
  opacity: 0.5;
}

.role-select {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--font-base);
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.role-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.role-select:hover {
  color: var(--color-accent);
}

.role-select option {
  background: var(--color-surface);
  color: var(--color-text);
}

.role-badge {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.status-badge {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
}

.status-badge--active {
  background: rgba(26, 140, 66, 0.1);
  color: var(--color-success);
}

.status-badge--inactive {
  background: rgba(107, 113, 144, 0.1);
  color: var(--color-muted);
}

.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: var(--font-xs);
}

.new-user-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
}

.hidden {
  display: none !important;
}

/* ── Modal ── */

.modal-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgb(255 255 255 / 59%);
  backdrop-filter: blur(1px);
  z-index: var(--z-toast);
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modal-overlay.modal-visible {
  opacity: 1;
  pointer-events: auto;
}
.modal-dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 640px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.92);
  transform-origin: center center;
  box-shadow:
      0 0 30px 0 rgb(0 0 0 / 5%),
        0 0 20px 0 rgb(0 0 0 / 5%);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.modal-overlay.modal-visible .modal-dialog {
  transform: scale(1);
}
.modal-dialog--sm { width: 420px; }
.modal-dialog--md { width: 540px; }
.modal-dialog--lg { width: 720px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.modal-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}
.modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ── Filter builder ── */

.filter-section {
  margin-bottom: 1.25rem;
}
.filter-section-title {
  font-size: 0.8rem;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.filter-conditions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.filter-condition-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.filter-condition-row select,
.filter-condition-row input {
  min-width: 0;
  flex: 1;
}
.filter-condition-row .filter-value-wrap {
  flex: 1;
  display: flex;
}
.filter-condition-row .filter-value-wrap select,
.filter-condition-row .filter-value-wrap input {
  width: 100%;
}
.filter-save-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}
.filter-actions {
  display: flex;
  gap: 0.4rem;
}

.btn-icon--sm {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
}
.btn-icon--sm:hover {
  background: rgba(107, 113, 144, 0.1);
  color: var(--color-danger);
}

/* ── Shared view badges ── */

.badge--muted {
  display: inline-block;
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-xs);
  background: rgba(107, 113, 144, 0.15);
  color: var(--color-muted);
  vertical-align: middle;
  margin-left: var(--space-1);
}
.view-owner {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-left: var(--space-1);
}

/* ── HTMX button loading state ───────────────────────────────────────────────── */

.btn.htmx-request,
form.htmx-request .btn[type="submit"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Error pages ─────────────────────────────────────────────────────────────── */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: var(--space-4);
}

.error-page .error-code {
  font-size: 4rem;
  font-weight: var(--weight-bold);
  color: var(--color-border);
  line-height: 1;
}

.error-page h2 {
  font-size: 1.1rem;
  font-weight: var(--weight-medium);
}

.error-page p {
  color: var(--color-muted);
  font-size: var(--font-base);
  max-width: 320px;
}

/* ── Responsive — 900px breakpoint ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .card {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .case-detail-layout {
    flex-direction: column;
  }

  .doc-panel-inner {
    width: 100%;
  }
}

/* ── System tabs ───────────────────────────────────────────────────────────── */

.system-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.system-tab {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.system-tab:hover:not(.system-tab--disabled) {
  color: var(--color-text);
}

.system-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.system-tab--disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Filter date input ─────────────────────────────────────────────────────── */

.filter-input {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  font-family: inherit;
  transition: border-color var(--transition-normal);
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.filter-input--date {
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.filter-input--date::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  margin-left: var(--space-1);
}

/* ── Source badges ──────────────────────────────────────────────────────────── */

.source-badge {
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.source-badge--auth {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-info);
}

.source-badge--case {
  background: rgba(26, 140, 66, 0.1);
  color: var(--color-success);
}

.source-badge--gdpr {
  background: rgba(214, 59, 59, 0.1);
  color: var(--color-danger);
}

.source-badge--system {
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
}

/* ── Audit footer ──────────────────────────────────────────────────────────── */

.audit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
}

/* ── Toggle switch ─────────────────────────────────────────────────────────── */

.toggle-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  transition: background var(--transition-slow);
  flex-shrink: 0;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background: var(--color-surface);
  border-radius: 50%;
  transition: transform var(--transition-slow);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.toggle-input:checked + .toggle-switch {
  background: var(--color-accent);
}

.toggle-input:checked + .toggle-switch::after {
  transform: translateX(1rem);
}

.toggle-input:focus-visible + .toggle-switch {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── System info ─────────────────────────────────────────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--space-5);
}

.card-title {
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  padding: 1rem 1.25rem 0.5rem;
  margin: 0;
}

.info-list {
  margin: 0;
  padding: 0 1.25rem 1rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-5);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row dt {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.info-row dd {
  margin: 0;
  font-size: 0.8rem;
  font-weight: var(--weight-medium);
  text-align: right;
}

/* ── Q&A sidebar (slide-out overlay) ──────────────────────────────────────── */

.qa-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
  transform: translateX(100%);
  transition: transform var(--transition-slow) ease;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
}

.qa-sidebar.open {
  transform: translateX(0);
}

.qa-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.qa-sidebar-title {
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
}

.qa-sidebar-close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  transition: background var(--transition-normal), color var(--transition-normal);
  display: flex;
  align-items: center;
}

.qa-sidebar-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.qa-sidebar-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Q&A messages ── */

.qa-context {
  flex-shrink: 0;
}

.qa-context-active {
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border-bottom: 1px solid var(--color-border);
}

.qa-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.qa-welcome {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.qa-msg {
  max-width: 95%;
}

.qa-msg-user {
  align-self: flex-end;
}

.qa-msg-user .qa-msg-content {
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 12px 12px 2px 12px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.qa-msg-assistant {
  align-self: flex-start;
}

.qa-msg-assistant .qa-msg-content {
  background: var(--color-bg);
  border-radius: 12px 12px 12px 2px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.qa-streaming::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 14px;
  background: var(--color-accent);
  margin-left: 2px;
  animation: qa-cursor-blink 0.7s infinite;
  vertical-align: text-bottom;
}

@keyframes qa-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.qa-error-text {
  color: var(--color-danger);
}

/* ── Q&A sources ── */

.qa-sources {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.qa-sources-label {
  font-weight: var(--weight-semibold);
}

.qa-source-link {
  display: inline-block;
  color: var(--color-accent);
  text-decoration: none;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-xs);
  margin: 0.1rem 0.15rem;
  transition: background var(--transition-normal);
}

.qa-source-link:hover {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  text-decoration: underline;
}

/* ── Q&A input ── */

.qa-input-wrap {
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.qa-history-bar {
  display: flex;
  gap: var(--space-1);
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.qa-history-btn,
.qa-new-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 0.68rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.qa-history-btn:hover,
.qa-new-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.qa-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: 0.75rem;
}

.qa-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.4;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-normal);
  max-height: 120px;
  overflow-y: auto;
}

.qa-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.qa-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.qa-input::placeholder {
  color: var(--color-muted);
}

.qa-send-btn {
  background: var(--color-accent);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-normal), opacity var(--transition-normal);
}

.qa-send-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.qa-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Q&A history ── */

.qa-history-list {
  display: flex;
  flex-direction: column;
}

.qa-history-item {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background var(--transition-normal);
}

.qa-history-item:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
}

.qa-history-preview {
  font-size: 0.82rem;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-history-meta {
  display: flex;
  gap: var(--space-3);
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: var(--color-muted);
}

.qa-history-empty {
  padding: 2rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.qa-loading {
  padding: 2rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.qa-error {
  padding: 1rem;
  color: var(--color-danger);
  font-size: 0.82rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .qa-sidebar {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Head Engineer sidebar — same pattern as Q&A sidebar
   ══════════════════════════════════════════════════════════════════════════════ */

.engineer-trigger {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  font-weight: var(--weight-semibold);
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: background var(--transition-normal), transform var(--transition-normal);
}

.engineer-trigger:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
}

.engineer-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.06);
  transform: translateX(100%);
  transition: transform var(--transition-slow) ease;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
}

.engineer-sidebar.open {
  transform: translateX(0);
}

.engineer-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.engineer-sidebar-title {
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
}

.engineer-sidebar-close {
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  transition: background var(--transition-normal), color var(--transition-normal);
  display: flex;
  align-items: center;
}

.engineer-sidebar-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.engineer-sidebar-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Engineer messages ── */

.engineer-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.engineer-welcome {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.engineer-msg {
  max-width: 95%;
}

.engineer-msg-user {
  align-self: flex-end;
}

.engineer-msg-user .engineer-msg-content {
  background: var(--color-accent);
  color: var(--color-surface);
  border-radius: 12px 12px 2px 12px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.engineer-msg-assistant {
  align-self: flex-start;
}

.engineer-msg-assistant .engineer-msg-content {
  background: var(--color-bg);
  border-radius: 12px 12px 12px 2px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  word-break: break-word;
}

.engineer-msg-assistant .engineer-msg-content p { margin: 0.3em 0; }
.engineer-msg-assistant .engineer-msg-content p:first-child { margin-top: 0; }
.engineer-msg-assistant .engineer-msg-content p:last-child { margin-bottom: 0; }
.engineer-msg-assistant .engineer-msg-content code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
}
.engineer-msg-assistant .engineer-msg-content pre {
  background: rgba(0, 0, 0, 0.04);
  padding: 0.5rem;
  border-radius: var(--radius-xs);
  overflow-x: auto;
  font-size: var(--font-xs);
  margin: 0.4em 0;
}
.engineer-msg-assistant .engineer-msg-content pre code {
  background: none;
  padding: 0;
}
.engineer-msg-assistant .engineer-msg-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.4em 0;
  font-size: 0.78rem;
}
.engineer-msg-assistant .engineer-msg-content th,
.engineer-msg-assistant .engineer-msg-content td {
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.5rem;
  text-align: left;
}
.engineer-msg-assistant .engineer-msg-content th {
  background: rgba(0, 0, 0, 0.03);
  font-weight: var(--weight-semibold);
}
.engineer-msg-assistant .engineer-msg-content a {
  color: var(--color-accent);
  text-decoration: underline;
}

.engineer-streaming::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 14px;
  background: var(--color-accent);
  margin-left: 2px;
  animation: engineer-cursor-blink 0.7s infinite;
  vertical-align: text-bottom;
}

@keyframes engineer-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.engineer-error-text { color: var(--color-danger); }

/* ── Engineer input ── */

.engineer-input-wrap {
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.engineer-history-bar {
  display: flex;
  gap: var(--space-1);
  padding: 0.35rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.engineer-history-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  font-size: 0.68rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.engineer-history-btn:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.engineer-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: 0.75rem;
}

.engineer-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.4;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition-normal);
  max-height: 120px;
  overflow-y: auto;
}

.engineer-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.engineer-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.engineer-input::placeholder {
  color: var(--color-muted);
}

.engineer-send-btn {
  background: var(--color-accent);
  color: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-normal), opacity var(--transition-normal);
}

.engineer-send-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.engineer-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .engineer-sidebar {
    width: 100%;
  }
  .engineer-trigger {
    bottom: 1rem;
    right: 1rem;
  }
}

/* ── Docs tool: layout ── */

/* ── Docs nav items (admin sidebar style) ── */

.docs-nav-label {
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  padding: 0.5rem 0.65rem 0.3rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.docs-nav-label:first-child {
  padding-top: var(--space-1);
}

.docs-nav-role {
  font-weight: var(--weight-normal);
  opacity: 0.7;
}

.docs-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem !important;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.docs-nav-item:hover {
  background: var(--color-hover);
}

.docs-nav-item.active {
  background: rgba(0, 0, 0, 0.07);
  font-weight: var(--weight-medium);
}

.docs-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-muted);
}

.docs-nav-icon svg {
  width: 100%;
  height: 100%;
}

.docs-nav-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-nav-badge {
  font-size: 0.62rem;
  font-weight: var(--weight-semibold);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

.docs-nav-badge--empty {
  background: rgba(107, 113, 144, 0.1);
  color: var(--color-muted);
}

.docs-nav-badge--uploaded {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}

.docs-nav-badge--approved {
  background: rgba(26, 140, 66, 0.1);
  color: var(--color-success);
}

.docs-nav-badge--flagged {
  background: rgba(214, 59, 59, 0.1);
  color: var(--color-danger);
}

.docs-nav-badge--private {
  background: rgba(107, 113, 144, 0.1);
  color: var(--color-muted);
  font-size: 0.58rem;
}

.docs-nav-count {
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  flex-shrink: 0;
}

.docs-nav-empty {
  font-size: 0.8rem;
  color: var(--color-muted);
  padding: 0.35rem 0.65rem;
  opacity: 0.6;
}

.docs-nav-add {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-normal), color var(--transition-normal);
  margin-bottom: var(--space-1);
}

.docs-nav-add:hover {
  background: var(--color-hover);
  color: var(--color-accent);
}

.docs-nav-item--unsorted {
  font-size: 0.8rem;
}

.docs-nav-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.docs-nav-assign {
  font-size: 0.7rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* ── Empty state ── */

.docs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--color-muted);
  text-align: center;
  padding: 2rem;
}

.docs-empty-icon {
  opacity: 0.3;
  margin-bottom: var(--space-5);
}

.docs-empty-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  margin: 0 0 0.25rem;
  color: var(--color-text);
}

.docs-empty-hint {
  font-size: 0.82rem;
  margin: 0;
}

/* ── Tool workspace ── */

.tool-ws {
  padding: 1rem 1.5rem;
  position: relative;
}

.tool-ws--review-active {
  padding-bottom: 0 !important;
}

.tool-ws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin: -1rem -1.5rem var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  z-index: var(--z-sticky);
}

.tool-ws-header-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tool-ws-header-titles {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tool-ws-person {
  font-weight: var(--weight-semibold);
  font-size: 0.9rem;
}

.tool-ws-doctype {
  font-size: 0.82rem;
  color: var(--color-muted);
}

.tool-ws-header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tool-ws-upload-btn {
  cursor: pointer;
}

.tool-ws-popover-wrap {
  position: relative;
}

.tool-ws-checks-has-data {
  color: var(--color-success);
  border-color: var(--color-success);
}

.tool-ws-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 0.75rem;
  min-width: 320px;
  z-index: var(--z-dropdown);
}

.tool-ws-export-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tool-ws-export-caret {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* Export menu — visual language matches the Add Pages panel:
   --radius-md card, soft shadow, --color-border edge. */
.tool-ws-export-menu {
  width: 240px;
  min-width: 240px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.tool-ws-export-menu form {
  display: block;
  margin: 0;
}

.tool-ws-export-heading {
  padding: 0 var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.tool-ws-export-item {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.tool-ws-export-menu form + form .tool-ws-export-item {
  margin-top: var(--space-1);
}

.tool-ws-export-item:hover {
  background: var(--color-hover);
  border-color: var(--color-border);
}

.tool-ws-export-item:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.tool-ws-export-item:active {
  background: var(--color-active);
}

.tool-ws-export-item-icon {
  flex: 0 0 auto;
  color: var(--color-subtle);
}

.tool-ws-export-item-label {
  flex: 1 1 auto;
}

.tool-ws-export-item-meta {
  flex: 0 0 auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-surface-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-subtle);
  letter-spacing: 0.04em;
}

/* ── Completeness bar ── */

.tool-ws-completeness-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tool-ws-completeness-bar-inline {
  width: 60px;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: block;
}

/* Legacy block layout (unused, kept for compatibility) */
.tool-ws-completeness {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.tool-ws-completeness-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.tool-ws-completeness-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-xs);
  transition: width 0.3s ease;
}

.tool-ws-completeness-fill--gaps {
  background: var(--color-accent);
}

.tool-ws-completeness-label {
  font-size: var(--font-xs);
  color: var(--color-muted);
  white-space: nowrap;
}

/* ── Thumbnail grid ── */

.tool-ws-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-5);
}

.tool-ws-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ── Page card ── */

.page-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
  position: relative;
  cursor: grab;
  grid-column: span 2;
}

.page-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
}

.page-card--landscape {
  grid-column: span 3;
}

.page-card--landscape .page-card-thumb {
  aspect-ratio: 4 / 3;
}

/* ── Card size variants ── */

.page-card--spread {
  grid-column: span 3;
}

/* Spreads are inherently landscape content (two facing pages), so force
   a landscape card-thumb shape regardless of the file's native dimensions.
   Avoids tall portrait cards for spreads photographed with phone held
   upright — the file is portrait but the content is a landscape book. */
.page-card--spread .page-card-thumb {
  aspect-ratio: 4 / 3;
}

/* Medium (default): 6 cards per row, spreads span 3 */
.tool-ws-grid--md .page-card { grid-column: span 2; }
.tool-ws-grid--md .page-card--landscape { grid-column: span 3; }
.tool-ws-grid--md .page-card--spread { grid-column: span 3; }

/* Large: 4 cards per row, spreads span 4 */
.tool-ws-grid--lg .page-card { grid-column: span 3; }
.tool-ws-grid--lg .page-card--landscape { grid-column: span 4; }
.tool-ws-grid--lg .page-card--spread { grid-column: span 4; }

.page-card--missing {
  border-style: dashed;
  opacity: 0.7;
}

.page-card--excluded {
  opacity: 0.45;
}

.page-card--dragging {
  opacity: 0.3;
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.page-card--dragging .page-card-thumb img {
  opacity: 0.3;
}

.page-card--dragging .page-card-info,
.page-card--dragging .page-card-controls {
  opacity: 0.3;
}

/* Grid drop indicator — a single bar in the gap, no card shifting. Cards
   stay still so they don't swing as the cursor crosses midlines (which
   would re-target which card holds data-drop). The bar grows in (width
   0→6) when data-drop is set and pulses gently while active. */
.page-card[data-drop],
.page-card[data-file-drop] {
  overflow: visible;
}

.page-card[data-drop]::after,
.page-card[data-file-drop]::after {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 6px;
  background: var(--color-accent);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
  animation: drop-bar-in 0.14s ease-out both, drop-bar-pulse 1.6s ease-in-out 0.14s infinite;
}

/* Bar centred in the original 16px grid gap. */
.page-card[data-drop="before"]::after,
.page-card[data-file-drop="before"]::after {
  left: -11px;
}
.page-card[data-drop="after"]::after,
.page-card[data-file-drop="after"]::after {
  right: -11px;
}

@keyframes drop-bar-in {
  0%   { transform: scaleX(0); opacity: 0; box-shadow: 0 0 0 transparent; }
  100% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent) 60%, transparent); }
}

@keyframes drop-bar-pulse {
  0%, 100% { box-shadow: 0 0 8px  color-mix(in srgb, var(--color-accent) 50%, transparent); }
  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--color-accent) 75%, transparent); }
}

.page-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.page-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Rotated 90/270: swap pre-rotate dimensions so the post-rotate visual fills
   the card edge-to-edge. Same reciprocal trick as the filmstrip thumb. */
.page-card--landscape.page-card--rotated .page-card-thumb img {
  width: 75%;
  height: 133.3333%;
}

.page-card--rotated:not(.page-card--landscape) .page-card-thumb img {
  width: 133.3333%;
  height: 75%;
}

.page-card-missing-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--font-xs);
}

.page-card-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  font-size: var(--font-xs);
}

.page-card-pos {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  min-width: 1.2rem;
}

.page-card-label {
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.page-card-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.4rem 0.35rem;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.page-card-type {
  font-size: 0.68rem;
  padding: 0.1rem 0.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  flex: 1;
  min-width: 0;
}

.page-card-actions {
  display: flex;
  gap: 0.15rem;
  margin-left: auto;
}

.page-card-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.page-card-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.page-card-btn--active {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}

.page-card-btn--danger:hover {
  background: var(--color-danger);
  color: var(--color-surface);
  border-color: var(--color-danger);
}

.page-card-quality {
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.page-card-quality--approved {
  background: var(--color-success);
  color: var(--color-surface);
}

.page-card-quality--needs_replacement {
  background: #e67e22;
  color: var(--color-surface);
}

.page-card-quality--rejected {
  background: var(--color-danger);
  color: var(--color-surface);
}


.page-card-slot {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  min-width: 18px;
  height: 18px;
  padding: 0 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-surface);
}

.page-card-slot small {
  font-size: 0.55rem;
  font-weight: var(--weight-medium);
  opacity: 0.85;
}

/* ── Multi-select mode ── */

.page-card-select {
  display: none;
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 3;
  cursor: pointer;
}

.tool-ws-grid--select-mode .page-card-select {
  display: block;
}

.page-card-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-xs);
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.3);
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.page-card--selected .page-card-checkbox {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.page-card--selected .page-card-checkbox::after {
  content: "✓";
  display: block;
  text-align: center;
  line-height: 1.25rem;
  font-size: 0.75rem;
  color: var(--color-surface);
  font-weight: bold;
}

.tool-ws-grid--select-mode .page-card {
  cursor: pointer;
  user-select: none;
}

.page-card--selected {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* ── Filmstrip multi-select ── */

.filmstrip-thumb-select {
  display: none;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 3;
  cursor: pointer;
}

.filmstrip-thumbs--select-mode .filmstrip-thumb-select {
  display: block;
}

.filmstrip-thumb-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-xs);
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.3);
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.filmstrip-thumb--selected .filmstrip-thumb-checkbox {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.filmstrip-thumb--selected .filmstrip-thumb-checkbox::after {
  content: "✓";
  display: block;
  text-align: center;
  line-height: 1rem;
  font-size: 0.6rem;
  color: var(--color-surface);
  font-weight: bold;
}

.filmstrip-thumb--selected {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.filmstrip-thumbs--select-mode .filmstrip-thumb {
  cursor: pointer;
}

/* ── Floating select action bar ── */

/* ── Multi-select header actions ── */

.tool-ws-select-pill {
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-surface);
  background: var(--color-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  white-space: nowrap;
  line-height: var(--line-height-normal);
}

.tool-ws-select-sep {
  width: 1px;
  height: 1.5rem;
  background: var(--color-border);
  flex-shrink: 0;
}

.tool-ws-select-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  flex-shrink: 0;
}

.tool-ws-select-icon:hover {
  background: var(--color-hover);
  color: var(--color-text);
  border-color: var(--color-muted);
}

.tool-ws-select-icon--success {
  color: var(--color-muted);
}

.tool-ws-select-icon--success:hover {
  color: var(--color-success);
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 6%, transparent);
}

.tool-ws-select-icon--warning {
  color: var(--color-muted);
}

.tool-ws-select-icon--warning:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

.tool-ws-select-icon--danger {
  color: var(--color-muted);
}

.tool-ws-select-type {
  height: 2rem;
  padding: 0 var(--space-3);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-normal), color var(--transition-normal);
}

.tool-ws-select-type:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.tool-ws-select-icon--danger:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

/* ── Add pages panel ── */

.tool-ws-add-panel {
  position: absolute;
  top: 3.5rem;
  right: var(--space-5);
  z-index: var(--z-dropdown);
  width: 380px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.tool-ws-add-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
}

.tool-ws-add-tabs {
  display: flex;
  gap: var(--space-1);
}

.tool-ws-add-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.tool-ws-add-tab:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.tool-ws-add-tab--active {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}

.tool-ws-add-tab--active:hover {
  background: var(--color-accent-hover);
}

/* ── Upload drop zone ── */

.tool-ws-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-5);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: border-color var(--transition-normal), background var(--transition-normal);
}

.tool-ws-dropzone:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}

.tool-ws-dropzone-hint {
  font-size: var(--font-xs);
  color: var(--color-muted);
}

/* ── Upload queue ── */

.tool-ws-upload-queue {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tool-ws-queue-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name status"
    "bar  bar";
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tool-ws-queue-name {
  grid-area: name;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-ws-queue-status {
  grid-area: status;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}

.tool-ws-queue-progress {
  grid-area: bar;
  height: 3px;
  background: var(--color-hover);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.tool-ws-queue-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.15s linear;
}

.tool-ws-queue-row--uploading .tool-ws-queue-status {
  color: var(--color-accent);
}

.tool-ws-queue-row--done .tool-ws-queue-status {
  color: var(--color-success);
}

.tool-ws-queue-row--done .tool-ws-queue-progress-bar {
  background: var(--color-success);
}

.tool-ws-queue-row--error {
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
}

.tool-ws-queue-row--error .tool-ws-queue-status {
  color: var(--color-danger);
}

.tool-ws-queue-row--error .tool-ws-queue-progress {
  visibility: hidden;
}

.tool-ws-queue-row--leaving {
  opacity: 0;
  transform: translateY(-4px);
}


.tool-ws-add-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.tool-ws-add-item {
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-normal);
}

.tool-ws-add-item:has(input:checked) {
  border-color: var(--color-accent);
}

.tool-ws-add-item input[type="checkbox"] {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: var(--z-base);
}

.tool-ws-add-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.tool-ws-add-empty {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin: 0;
}

/* ── Thumbnail strip (shared by review view) ── */

.filmstrip-thumbs {
  width: 120px;
  min-width: 120px;
  border-right: 1px solid var(--color-border);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  scrollbar-width: none;
}

.filmstrip-thumbs::-webkit-scrollbar {
  display: none;
}

.filmstrip-thumb {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-xs);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition-normal), margin var(--transition-normal) ease;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filmstrip-thumb--landscape {
  aspect-ratio: 4 / 3;
}

.filmstrip-thumb:hover {
  border-color: var(--color-border);
}

.filmstrip-thumb--active {
  border-color: var(--color-accent);
}

.filmstrip-thumb--excluded {
  opacity: 0.45;
}

.filmstrip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rotated 90/270: swap pre-rotate dimensions so the post-rotate visual fills
   the container exactly. 75% / 133.333% are the reciprocals that turn a
   landscape container into a portrait pre-rotate box (and vice versa). */
.filmstrip-thumb--landscape.filmstrip-thumb--rotated img {
  width: 75%;
  height: 133.3333%;
}

.filmstrip-thumb--rotated:not(.filmstrip-thumb--landscape) img {
  width: 133.3333%;
  height: 75%;
}

.filmstrip-thumb-missing {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.75rem;
}

.filmstrip-thumb--dragging {
  opacity: 0.4;
}

/* Filmstrip drop indicator (box-shadow line — works with overflow:hidden) */
.filmstrip-thumb[data-drop="before"],
.filmstrip-thumb[data-file-drop="before"] {
  box-shadow: 0 -4px 0 0 var(--color-accent), 0 -4px 8px color-mix(in srgb, var(--color-accent) 50%, transparent);
  margin-top: var(--space-2);
}

.filmstrip-thumb[data-drop="after"],
.filmstrip-thumb[data-file-drop="after"] {
  box-shadow: 0 4px 0 0 var(--color-accent), 0 4px 8px color-mix(in srgb, var(--color-accent) 50%, transparent);
  margin-bottom: var(--space-2);
}

.filmstrip-thumb-pos {
  position: absolute;
  bottom: 0.15rem;
  left: 0.2rem;
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  color: var(--color-surface);
  background: rgba(0, 0, 0, 0.5);
  padding: 0.05rem 0.25rem;
  border-radius: var(--radius-xs);
}

.filmstrip-thumb-alts {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  font-size: 0.55rem;
  font-weight: var(--weight-bold);
  color: var(--color-surface);
  background: var(--color-accent);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-md);
  line-height: 1;
}

.filmstrip-viewer-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  aspect-ratio: 4 / 3;
  max-height: 60vh;
  margin: 0 auto;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  color: var(--color-muted);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.filmstrip-viewer-missing-dropbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-8);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-dim);
  transition: border-color var(--transition-normal), background var(--transition-normal);
  cursor: pointer;
}

.filmstrip-viewer-missing-dropbox:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}

.filmstrip-viewer-missing--spread {
  aspect-ratio: 8 / 3;
}

.filmstrip-viewer-missing-title {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  color: var(--color-subtle);
}

.filmstrip-viewer-missing-hint {
  font-size: var(--font-xs);
  color: var(--color-muted);
  opacity: 0.7;
}

.filmstrip-viewer-missing--drop-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
}

/* ── File drop indicators on review images ── */

.review-image-page[data-file-drop="before"] {
  box-shadow: 0 -4px 0 0 var(--color-accent);
}

.review-image-page[data-file-drop="after"] {
  box-shadow: 0 4px 0 0 var(--color-accent);
}

/* ── Highlight flash for newly inserted/replaced pages ── */

@keyframes fade-in-delayed {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Workspace loading skeleton ── */

.workspace-loading-placeholder {
  padding: 1rem 1.5rem;
  opacity: 0;
  animation: fade-in-delayed 0.3s ease-out var(--transition-slow) forwards;
}

.workspace-loading-header {
  height: 2.25rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  animation: pulse-load 3s ease-in-out infinite;
}

.workspace-loading-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}

.workspace-loading-card {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  animation: pulse-load 3s ease-in-out infinite;
}

@keyframes page-highlight-fade {
  0%   { box-shadow: 0 0 0 4px var(--color-accent); }
  60%  { box-shadow: 0 0 0 4px var(--color-accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes page-overlay-fade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}

.review-image-page--highlight {
  position: relative;
}

.review-image-page--highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
  animation: page-overlay-fade 2.5s ease-out forwards;
}

.filmstrip-thumb--highlight {
  animation: page-highlight-fade 2.5s ease-out;
}

.page-card--highlight {
  position: relative;
}

.page-card--highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
  animation: page-overlay-fade 2.5s ease-out forwards;
}

/* ── Page enter animation ── */

@keyframes page-enter {
  0%   { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.review-image-page--entering {
  animation: page-enter 0.35s ease-out;
}

.filmstrip-thumb--entering {
  animation: page-enter 0.25s ease-out;
}

.page-card--entering {
  animation: page-enter 0.3s ease-out;
}

/* ── Image loading shimmer ── */

@keyframes pulse-load {
  0%, 100% { background: var(--color-surface-dim); }
  50%      { background: var(--color-border); }
}

.page-card-thumb {
  animation: pulse-load 3s ease-in-out infinite;
}

.page-card-thumb:has(img[style*="opacity: 1"]) {
  animation: none;
  background: var(--color-surface-dim);
}

/* Missing pages don't need pulse */
.page-card--missing .page-card-thumb {
  animation: none;
  background: var(--color-bg);
}

/* ── Staggered load-in animation ── */

@keyframes page-load-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.page-card {
  animation: page-load-in 0.15s ease-out both;
}

.review-image-page {
  animation: page-load-in 0.18s ease-out both, pulse-load 3s ease-in-out infinite;
}

.review-image-page:has(img[style*="opacity: 1"]) {
  animation: none;
  background: transparent;
}

.filmstrip-thumb {
  animation: page-load-in var(--transition-slow) ease-out both, pulse-load 3s ease-in-out infinite;
}

.filmstrip-thumb:has(img[style*="opacity: 1"]) {
  animation: none;
  background: var(--color-surface-dim);
}

/* ── Delete animation ── */

@keyframes page-shrink-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

.review-image-page--deleting,
.page-card--deleting {
  animation: page-shrink-out 0.3s ease-in forwards;
  pointer-events: none;
}

.filmstrip-thumb--deleting {
  animation: page-shrink-out 0.25s ease-in forwards;
  pointer-events: none;
}

/* ── Review view (three-column) ── */

.tool-ws-review {
  display: flex;
  gap: 0;
  overflow: hidden;
}

.review-images {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.review-image-page {
  position: relative;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.review-image-alts {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  font-size: 0.75rem;
  font-weight: var(--weight-bold);
  color: var(--color-surface);
  background: var(--color-accent);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-lg);
  pointer-events: none;
}

.review-image-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

.review-panel {
  width: 320px;
  min-width: 320px;
  border-left: 1px solid var(--color-border-light, rgba(0,0,0,0.06));
  padding: 0 0.75rem 0.75rem;
  overflow-y: auto;
}

.review-panel-inner {
  transition: opacity var(--transition-normal) ease;
}

.review-panel-inner .page-modal-controls {
  margin: 0 -0.75rem;
  padding: 0.25rem 0.75rem 0.5rem;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.review-panel-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.review-panel-pos {
  font-weight: var(--weight-semibold);
  font-size: 0.85rem;
}

.review-panel-label {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.review-panel-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.review-panel-loader-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: review-spin 0.6s linear infinite;
}

@keyframes review-spin {
  to { transform: rotate(360deg); }
}

/* ── Page detail modal ── */

#page-modal-overlay {
  background: transparent;
}

.page-modal-dialog {
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  animation: modal-enter var(--transition-normal) ease-out;
}

@keyframes modal-enter {
  0%   { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes modal-exit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.98); }
}

.page-modal-dialog > #page-modal-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.page-modal-controls {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  justify-content: space-evenly;
}

.page-modal-counter {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  color: var(--color-surface);
  background: rgba(0, 0, 0, 0.5);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xs);
  pointer-events: none;
}

.page-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Image viewer ── */

.page-modal-image-area {
  flex: 7;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  min-width: 0;
  min-height: 0;
}

.page-modal-spread-labels {
  display: flex;
  justify-content: space-around;
  padding: 0.35rem 1rem;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
}

.page-modal-image-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem;
  position: relative;
  display: flex;
}

/* Sized by JS to the image's *visual* (post-rotate) dimensions so the
   wrap's scroll behaviour matches what the user sees, independent of
   how the <img> is rotated. margin: auto centers the rotator in the
   wrap when it fits, sticks to start when it overflows. */
.page-modal-image-rotator {
  position: relative;
  margin: auto;
  flex-shrink: 0;
}

.page-modal-image-area--zoom-cursor,
.page-modal-image-area--zoom-cursor * {
  cursor: zoom-in !important;
}

.page-modal-img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  cursor: grab;
}

.page-modal-img.dragging {
  cursor: grabbing;
}

.page-modal-img--spread {
  max-width: 100%;
}

.page-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.5rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.page-modal-toolbar-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--color-border);
  margin: 0 0.5rem;
}

.page-modal-missing {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  background: var(--color-bg);
  cursor: pointer;
  gap: var(--space-4);
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  border: none;
}

.page-modal-missing:hover {
  background: var(--color-bg);
}

.page-modal-missing .filmstrip-viewer-missing-dropbox:hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}

/* ── Side panel ── */

.page-modal-side {
  flex: 3;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border);
  min-width: 280px;
  max-width: 400px;
}

.page-modal-page-controls {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
}

.page-modal-control-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-modal-control-row .form-label--sm {
  font-size: 0.72rem;
  margin: 0;
  min-width: 2.5rem;
  color: var(--color-muted);
}

.page-modal-control-row .form-control--sm {
  font-size: 0.75rem;
  padding: 0.2rem 0.35rem;
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
}

.page-modal-control-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.page-modal-delete-btn {
  margin-left: auto;
  color: var(--color-danger);
}

.page-modal-delete-btn:hover {
  background: rgba(214, 59, 59, 0.08);
}

.page-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.page-modal-tab {
  flex: 1;
  padding: 0.6rem 0.5rem;
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  text-align: center;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--color-muted);
  transition: color var(--transition-normal), border-color var(--transition-normal);
}

.page-modal-tab:hover {
  color: var(--color-text);
}

.page-modal-tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.page-modal-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* ── Crop overlay ── */

.crop-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.crop-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  z-index: 5;
}

.crop-selection {
  position: absolute;
  border: 2px dashed var(--color-surface);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
  cursor: move;
}

.crop-selection-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--color-danger);
  color: var(--color-surface);
  font-size: 18px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.crop-selection-close:hover {
  filter: brightness(1.1);
}

.crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-text);
  box-sizing: border-box;
  z-index: 1;
}

.crop-handle--nw { top: -6px; left: -6px; cursor: nw-resize; }
.crop-handle--ne { top: -6px; right: -6px; cursor: ne-resize; }
.crop-handle--sw { bottom: -6px; left: -6px; cursor: sw-resize; }
.crop-handle--se { bottom: -6px; right: -6px; cursor: se-resize; }
.crop-handle--n  { top: -6px;    left: 50%; margin-left: -6px; cursor: n-resize; }
.crop-handle--s  { bottom: -6px; left: 50%; margin-left: -6px; cursor: s-resize; }
.crop-handle--e  { right: -6px;  top: 50%;  margin-top: -6px;  cursor: e-resize; }
.crop-handle--w  { left: -6px;   top: 50%;  margin-top: -6px;  cursor: w-resize; }

/* Hide the close button and handles until the selection has a meaningful
   size — saves a stray cluster hanging at (0, 0) before the first drag. */
.crop-selection[style*="width: 0"] .crop-selection-close,
.crop-selection[style*="width:0"] .crop-selection-close,
.crop-selection[style*="width: 0"] .crop-handle,
.crop-selection[style*="width:0"] .crop-handle {
  display: none;
}

.crop-actions {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 6;
  background: var(--color-bg);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.crop-hint {
  font-size: var(--font-xs);
  color: var(--color-muted);
  padding-left: var(--space-2);
}

.crop-hint kbd {
  font-family: inherit;
  font-size: 0.9em;
  padding: 1px 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
}

.crop-aspect-bar {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 6;
  background: var(--color-bg);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.crop-aspect-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crop-aspect-segment {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.crop-aspect-option {
  border: 0;
  background: transparent;
  color: var(--color-text);
  padding: 4px 10px;
  font-size: var(--font-sm);
  cursor: pointer;
  font-family: inherit;
}

.crop-aspect-option + .crop-aspect-option {
  border-left: 1px solid var(--color-border);
}

.crop-aspect-option:hover {
  background: var(--color-surface);
}

.crop-aspect-option--active {
  background: var(--color-accent);
  color: var(--color-surface);
}

.crop-aspect-option--active:hover {
  background: var(--color-accent);
}

/* ── Quality checklist ── */

.quality-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: 0.5rem;
}

.quality-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.quality-section-title {
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  margin: 0 0 0.15rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quality-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.82rem;
  cursor: pointer;
  line-height: 1.4;
}

.quality-check input[type="checkbox"] {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.quality-status-buttons {
  display: flex;
  gap: 0.35rem;
}

.quality-status-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.quality-status-btn input[type="radio"] {
  display: none;
}

.quality-status-btn--approved.quality-status-btn--active,
.quality-status-btn--approved:has(input:checked) {
  background: rgba(40, 167, 69, 0.12);
  border-color: var(--color-success);
  color: var(--color-success);
}

.quality-status-btn--needs_replacement.quality-status-btn--active,
.quality-status-btn--needs_replacement:has(input:checked) {
  background: rgba(255, 165, 0, 0.12);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.quality-status-btn--rejected.quality-status-btn--active,
.quality-status-btn--rejected:has(input:checked) {
  background: rgba(214, 59, 59, 0.12);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.quality-reason-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
  font-weight: var(--weight-medium);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.quality-reason-btn input[type="checkbox"] {
  display: none;
}

.quality-reason-btn--active,
.quality-reason-btn:has(input:checked) {
  background: rgba(255, 165, 0, 0.12);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* ── Alternatives ── */

.page-alternatives-intro {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin: 0 0 0.5rem;
}

.page-alternatives-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-alt-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.page-alt-card--excluded {
  opacity: 0.5;
}

.page-alt-thumb {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.page-alt-missing {
  width: 60px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: var(--radius-xs);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.page-alt-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.page-alt-date {
  font-size: 0.72rem;
  color: var(--color-muted);
}

.page-alt-thumb--clickable {
  cursor: pointer;
  transition: outline var(--transition-normal);
}

.page-alt-thumb--clickable:hover {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.page-alt-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex-shrink: 0;
}

.page-alt-card--viewing {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.page-alt-card--current .page-alt-thumb--clickable {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.page-alt-card--viewing .page-alt-thumb--clickable,
.page-alt-card--current.page-alt-card--viewing .page-alt-thumb--clickable {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.page-alt-current-label {
  font-size: 0.68rem;
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Page info ── */

.page-modal-info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.75rem;
  font-size: 0.82rem;
  margin: 0;
}

.page-modal-info-list dt {
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}

.page-modal-info-list dd {
  margin: 0;
}

/* ── Page timeline ── */

/* ── Timeline (shared: case overview + page-level) ── */

.timeline-filters {
  display: flex;
  gap: 0.25rem;
  padding: 0 0 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.75rem;
}
.timeline-filter {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-surface);
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--color-muted);
}
.timeline-filter:hover { color: var(--color-text); }
.timeline-filter--active {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}
.timeline-entries { display: flex; flex-direction: column; gap: 0.25rem; }
.timeline-empty { color: var(--color-muted); text-align: center; padding: 2rem 0; font-size: 0.8rem; }

.timeline-comment {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: none;
  width: fit-content;
  max-width: 85%;
}
.timeline-comment--pinned {
  background: var(--color-surface);
  box-shadow: inset 3px 0 0 var(--color-accent);
}
.timeline-comment--shared {
  background: var(--color-surface);
  box-shadow: inset 3px 0 0 var(--color-warning, #e5a00d);
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
}
.comment-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  flex-shrink: 0;
}
.comment-avatar--small { width: 18px; height: 18px; font-size: 0.55rem; }
.comment-author { font-weight: 600; color: var(--color-text); font-size: 0.8rem; }
.comment-time { color: var(--color-muted); font-size: 0.7rem; }
.comment-pin-badge, .comment-shared-badge, .comment-edited {
  font-size: 0.6rem;
  color: var(--color-muted);
}
.comment-pin-badge { color: var(--color-accent); }
.comment-shared-badge { color: var(--color-warning, #e5a00d); }
.comment-context-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-dim);
  color: var(--color-subtle);
  font-size: 0.7rem;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid var(--color-border-subtle);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
a.comment-context-pill:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text);
}
.comment-context-pill--inert {
  cursor: default;
}
.comment-body {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}
.comment-body p { margin: 0 0 0.25rem 0; }
.comment-body p:last-child { margin-bottom: 0; }

.timeline-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
.comment-actions {
  display: flex;
  gap: 0;
  align-items: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
  padding-top: 0.2rem;
  flex-shrink: 0;
}
.timeline-comment-row:hover .comment-actions { opacity: 1; }
.comment-action {
  background: none;
  border: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  filter: grayscale(1);
}
.comment-action:hover {
  color: var(--color-subtle);
  filter: grayscale(1);
}

.timeline-reply {
  margin-left: 1.75rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg, #f5f6fa);
  font-size: 0.85rem;
}
.reply-form { margin-top: 0.35rem; margin-left: 1.75rem; }
.reply-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-family: inherit;
  resize: none;
  outline: none;
}
.reply-input:focus { border-color: var(--color-accent); }
.reply-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.timeline-activity {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font-size: 0.7rem;
  color: var(--color-muted);
}
.activity-text { text-align: center; }
.activity-time { font-size: 0.65rem; }
.activity-text::before {
  content: '\00B7';
  margin-right: 0;
}
.timeline-activity-group {
  text-align: center;
  padding: 0.2rem 0;
}
.activity-group-toggle {
  background: none;
  border: none;
  font-size: 0.65rem;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
}
.activity-group-toggle:hover { color: var(--color-text); }
.activity-group-items .timeline-activity {
  justify-content: center;
}

/* ── Composer (shared: case overview + page-level) ── */

.composer-wrap {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  background: var(--color-surface);
}
.composer-wrap:focus-within {
  border-color: rgba(0,0,0,0.15);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.composer-inline {
  display: flex;
  align-items: flex-end;
  gap: 0;
}
.composer-inline-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem 0.4rem 0;
  flex-shrink: 0;
}
.visibility-toggle {
  background: none;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0.15rem 0;
}
.visibility-toggle:hover { color: var(--color-text); }
.visibility-toggle--shared {
  color: var(--color-warning, #e5a00d);
  font-weight: 600;
}
.composer-send {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--color-muted);
}
.composer-send:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* ── Page-level timeline ── */

.page-timeline {
  display: flex;
  flex-direction: column;
}

.page-timeline .timeline-entries {
  flex: 1;
  overflow-y: auto;
}

.page-composer {
  border-top: 1px solid var(--color-border);
  padding: 0.5rem 0;
  flex-shrink: 0;
}

.page-composer-wrap {
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.page-composer-wrap .composer-editor-textarea {
  border-bottom: 1px solid var(--color-border);
  border-radius: 12px 12px 0 0;
}

.page-composer-wrap .composer-inline-actions {
  padding: 0.3rem 0.5rem;
  justify-content: flex-end;
}

.composer-editor-textarea {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.5;
  border: none;
  outline: none;
  resize: none;
  min-height: 1.4em;
  background: transparent;
}

/* ── Passport checks ── */

.tool-ws-passport-checks {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-dim);
}

.tool-ws-passport-checks-title {
  font-size: 0.82rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.passport-checks-form {
  margin-top: var(--space-3);
}

.passport-checks-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.passport-checks-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.passport-checks-hint {
  font-size: 0.72rem;
  color: var(--color-warning);
}

/* ── Files tab ── */

.files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.files-table th {
  text-align: left;
  font-weight: var(--weight-medium);
  font-size: 0.75rem;
  color: var(--color-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.files-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.files-row:hover {
  background: var(--color-hover);
}

.files-row--highlight {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  animation: files-highlight-fade 3s ease-out forwards;
}

@keyframes files-highlight-fade {
  0% { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  100% { background: transparent; }
}

.files-filename {
  font-weight: var(--weight-medium);
  word-break: break-all;
}

.files-date,
.files-uploader,
.files-pages,
.files-size {
  white-space: nowrap;
  color: var(--color-muted);
}

.files-req-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.8rem;
}

.files-req-link:hover {
  text-decoration: underline;
}

.source-file-link {
  color: var(--color-accent);
  text-decoration: none;
}

.source-file-link:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════════
   COMPONENTS — primitives used by macros in core/templates/components/
   Keep this section tight; one class family per primitive, variants as modifiers.
   Added as part of #162 (design-system alignment).
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tag (canonical badge family for MVP) ──────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  line-height: 1.4;
}

.tag--sm {
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
}

.tag--neutral {
  background: var(--color-surface-muted);
  color: var(--color-subtle);
}

.tag--success {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.tag--warning {
  background: color-mix(in srgb, #b45309 12%, transparent);
  color: #b45309;
}

.tag--danger {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

.tag--info {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
}

.tag--muted {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

/* ── Auth shell (used by base_auth.html and 404/500) ───────────────────────── */

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  background: var(--color-bg);
}

.auth-shell .card {
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  border-radius: var(--radius-lg);
}

.auth-shell .logo {
  margin-bottom: var(--space-3);
  text-align: center;
}

.auth-shell .logo img {
  height: 36px;
  width: auto;
}

.auth-shell .subtitle {
  text-align: center;
  font-size: 1.1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-8);
}

/* ── Card header / actions (extensions to existing .card) ──────────────────── */

.card--padded {
  padding: var(--space-6);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.card--padded .card-header {
  padding: 0 0 var(--space-5) 0;
  margin-bottom: var(--space-5);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Form error + icon-glyph span ──────────────────────────────────────────── */

.form-group.has-error .form-control {
  border-color: var(--color-danger);
}

.form-error {
  font-size: var(--font-xs);
  color: var(--color-danger);
  margin-top: 0.2rem;
}

.btn-icon-glyph {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* ── Empty state extensions ────────────────────────────────────────────────── */

.empty-state-icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--font-lg);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.empty-state-message {
  font-size: var(--font-base);
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.empty-state-action {
  display: inline-block;
}

/* ── Stage bar (case detail header) ────────────────────────────────────────── */

.stage-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.stage-bar-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-muted);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.stage-bar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}

.stage-bar-step.is-done {
  color: var(--color-success);
}

.stage-bar-step.is-done .stage-bar-dot {
  background: var(--color-success);
}

.stage-bar-step.is-active {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.stage-bar-step.is-active .stage-bar-dot {
  background: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.stage-bar-connector {
  flex: 0 0 24px;
  height: 1px;
  background: var(--color-border);
}

.stage-bar-connector.is-done {
  background: var(--color-success);
}

/* ── Loading indicators ────────────────────────────────────────────────────── */

.loading-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loading-spin 0.6s linear infinite;
  vertical-align: -2px;
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.loading-indicator {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-sm);
}

.loading-indicator.htmx-request,
.htmx-request .loading-indicator {
  display: inline-flex;
}

.loading-label {
  line-height: 1;
}

.loading-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.loading-skeleton-row {
  height: 12px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg,
    var(--color-surface-muted) 0%,
    var(--color-border-subtle) 50%,
    var(--color-surface-muted) 100%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.2s ease-in-out infinite;
}

@keyframes loading-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Responsive breakpoints for primitives ─────────────────────────────────── */

@media (max-width: 480px) {
  .auth-shell { padding: var(--space-5) var(--space-3); }
  .auth-shell .card { padding: var(--space-6); }
  .card--padded { padding: var(--space-5); }
  .card-header { padding: var(--space-4) var(--space-5); }
  .stage-bar { padding: var(--space-3) var(--space-4); }
  .modal-dialog { width: 92vw !important; }
}

/* ── migrated: platform/core/templates/base_error.html ── */

.auth-shell .error-code {
  font-size: 3rem;
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  text-align: center;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

/* ── end migrated: platform/core/templates/base_error.html ── */

/* ── migrated: platform/core/templates/base_portal.html ── */

:root {
  --topbar-height: 60px;
}

body.portal-shell {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

.portal-shell .topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: var(--z-modal);
}

.portal-shell .topbar-logo {
  font-weight: var(--weight-bold);
  font-size: var(--font-lg);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.portal-shell .topbar-logo span { color: var(--color-accent); }

.portal-shell .topbar-spacer { flex: 1; }

.portal-shell .topbar-user {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.portal-shell .topbar-logout {
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, color 0.15s;
}

.portal-shell .topbar-logout:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.portal-shell .container {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

.portal-shell .page-header {
  margin-bottom: 2rem;
}

.portal-shell .page-header h1 {
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
}

.portal-shell .page-header p {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.portal-shell .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.portal-shell .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  border: none;
  text-decoration: none;
}

.portal-shell .btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.portal-shell .btn-primary:hover { background: var(--color-accent-hover); }

/* ── end migrated: platform/core/templates/base_portal.html ── */

/* ── migrated: platform/core/templates/base_team.html ── */

:root {
  --rail-width: 48px;
  --rail-inset: 10px;
  --rail-inset-y: 10px;
  --panel-width: 200px;
  --nav-width: calc(var(--rail-width) + var(--rail-inset) + var(--panel-width));
}

body.team-shell {
  font-family: var(--font);
  background: var(--color-surface-muted);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.htmx-progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 200;
}
.htmx-request .htmx-progress-bar,
.htmx-progress-bar.htmx-request {
  opacity: 1;
  animation: progress-pulse 1.2s ease-in-out infinite;
}
@keyframes progress-pulse {
  0%   { transform: scaleX(0.3); transform-origin: left; }
  50%  { transform: scaleX(0.8); transform-origin: left; }
  100% { transform: scaleX(0.3); transform-origin: left; }
}

.team-shell .layout {
  display: flex;
  min-height: 100vh;
}

.team-shell .nav-rail {
  width: var(--rail-width);
  background: var(--color-team-rail);
  box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 6px;
  position: fixed;
  top: var(--rail-inset-y);
  bottom: var(--rail-inset-y);
  left: var(--rail-inset);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0;
  z-index: var(--z-dropdown);
}

.team-shell .nav-rail-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  margin-bottom: 0.6rem;
}

.team-shell .nav-rail-toggle:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--color-text);
}

.team-shell .nav-rail-toggle svg {
  width: 16px;
  height: 16px;
}

.team-shell .nav-panel {
  transition: width 0.2s ease-in-out, border-color 0.2s ease-in-out;
  overflow: hidden;
}

.team-shell .layout.nav-collapsed .nav-panel,
.team-shell .layout.no-panel .nav-panel {
  width: 0;
  border-right-color: transparent;
}

.team-shell .layout.nav-collapsed .main,
.team-shell .layout.no-panel .main {
  margin-left: calc(var(--rail-width) + var(--rail-inset) + var(--rail-inset));
}

.team-shell .main {
  transition: margin-left 0.2s ease-in-out;
}

.team-shell .nav-rail-sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.team-shell .nav-rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}

.team-shell .nav-rail-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text);
}

.team-shell .nav-rail-btn.active {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.team-shell .nav-rail-btn svg {
  width: 18px;
  height: 18px;
}

.team-shell .nav-rail-btn::after,
.team-shell .nav-rail-help::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text);
  color: #fff;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  height: 34px;
  line-height: 34px;
  padding: 0 0.7rem;
  border-radius: var(--radius-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 200;
}

.team-shell .nav-rail-btn:hover::after,
.team-shell .nav-rail-help:hover::after {
  opacity: 1;
}

.team-shell .nav-rail-divider {
  width: 24px;
  height: 1px;
  background: var(--color-border);
  margin: 0.25rem 0;
}

.team-shell .nav-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.team-shell .nav-rail-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
}

.team-shell .nav-rail-help:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--color-text);
}

.team-shell .nav-rail-help svg {
  width: 18px;
  height: 18px;
}

.team-shell .nav-rail-help-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
}

.team-shell .nav-rail-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  font-size: 0;
  overflow: hidden;
}

.team-shell .nav-rail-user-wrap {
  position: relative;
}

.team-shell .nav-rail-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--avatar-border-radius);
  background: var(--avatar-bg);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: opacity 0.15s;
}

.team-shell .nav-rail-avatar:hover {
  opacity: 0.85;
}

.team-shell .nav-rail-avatar--image {
  background: transparent;
  border-radius: 50%;
}

.team-shell .nav-rail-avatar::after {
  content: "";
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--color-surface);
}

.team-shell .nav-rail-menu {
  display: none;
  position: absolute;
  bottom: -4px;
  left: calc(100% + 10px);
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: var(--z-modal);
}

.team-shell .nav-rail-user-wrap.open .nav-rail-menu {
  display: block;
}

.team-shell .nav-rail-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.1s;
  white-space: nowrap;
}

.team-shell .nav-rail-menu a:hover {
  background: var(--color-hover);
}

.team-shell .nav-rail-menu a + a {
  border-top: 1px solid var(--color-border);
}

.team-shell .nav-rail-menu-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-muted);
}

.team-shell .nav-panel {
  width: var(--panel-width);
  min-width: 0;
  background: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--rail-width) + var(--rail-inset));
  overflow-y: auto;
  z-index: 5;
  white-space: nowrap;
}

.team-shell .nav-panel-title {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  padding: 1.5rem 1.1rem 1rem;
  color: var(--color-text);
}

.team-shell .nav-panel-section {
  padding: 0 0.6rem;
  margin-bottom: 0.5rem;
}

.team-shell .nav-panel-label {
  font-size: 0.72rem;
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  padding: 1rem 0.65rem 0.3rem;
  letter-spacing: 0.01em;
}

.team-shell .nav-panel-label:first-child {
  padding-top: 0.1rem;
}

.team-shell .nav-panel a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.team-shell .nav-panel a:hover {
  background: var(--color-hover);
}

.team-shell .nav-panel a.active {
  background: rgba(0, 0, 0, 0.07);
  font-weight: var(--weight-medium);
}

.team-shell .sidenav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-muted);
}
.team-shell .sidenav-icon svg {
  width: 100%;
  height: 100%;
}

.team-shell .nav-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--color-accent);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-xs);
}

.team-shell .main {
  margin-left: var(--nav-width);
  flex: 1;
  padding: 2rem;
  min-width: 0;
  background: var(--color-team-surface);
  border-radius: var(--radius-lg);
  margin-top: var(--rail-inset-y);
  margin-right: var(--rail-inset-y);
  margin-bottom: var(--rail-inset-y);
}

.team-shell .page-header {
  margin-bottom: 2rem;
}

.team-shell .page-header h1 {
  font-size: 1.125rem;
  font-weight: var(--weight-semibold);
}

.team-shell .page-header p {
  color: var(--color-muted);
  font-size: var(--font-base);
  margin-top: 0.25rem;
}

.team-shell #toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}
.team-shell .toast {
  background: #fdf0f0;
  color: var(--color-danger);
  border: 1px solid #f5c6c6;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  max-width: 24rem;
  cursor: pointer;
  pointer-events: auto;
  animation: toast-in 0.25s ease-out;
}
.team-shell .toast.toast-out {
  animation: toast-out 0.2s ease-in forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(1rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(1rem); }
}
.team-shell .toast.toast--success {
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
  color: var(--color-success);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

.team-shell .help-sidebar {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.2s ease-in-out;
}
.team-shell .help-sidebar.open {
  width: 300px;
}
.team-shell .help-sidebar-inner {
  width: 300px;
  min-width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
}
.team-shell .help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.team-shell .help-panel-title {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
}
.team-shell .help-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  display: flex;
}
.team-shell .help-panel-close:hover {
  color: var(--color-text);
  background: var(--color-hover);
}
.team-shell .help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ── Feedback panel — Direction A "Stack" (composer + activity + recording) ── */

.feedback-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform var(--transition-slow) ease;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}
.feedback-panel.open { transform: translateX(0); }

.feedback-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.feedback-panel__title {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  margin: 0;
}
.feedback-panel__head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.feedback-panel__close,
.feedback-panel__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.feedback-panel__close:hover,
.feedback-panel__refresh:hover { background: var(--color-hover); color: var(--color-text); }
.feedback-panel__close:focus-visible,
.feedback-panel__refresh:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.feedback-panel__close svg,
.feedback-panel__refresh svg { width: 16px; height: 16px; }
.feedback-panel__refresh--loading svg {
  animation: feedback-panel-spin 0.7s linear infinite;
}

.feedback-panel__tabs {
  display: flex;
  height: 42px;
  padding: 0 var(--space-5);
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.feedback-panel__tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0 2px;
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--transition-fast);
}
.feedback-panel__tab:hover { color: var(--color-text); }
.feedback-panel__tab[aria-selected="true"] {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}
.feedback-panel__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -1px;
  height: 2px;
  background: var(--color-accent);
}
.feedback-panel__tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}
.feedback-panel__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  min-width: 16px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-subtle);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
}

.feedback-panel__pane {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.feedback-panel__pane[hidden] { display: none; }
.feedback-panel__pane--compose {
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
}

.feedback-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.feedback-panel__form[hidden] { display: none; }

.feedback-panel__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feedback-panel__label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
  margin: 0;
}
.feedback-panel__label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-normal);
  color: var(--color-muted);
}

.feedback-panel__type {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.feedback-panel__type-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.feedback-panel__type-option:hover { background: var(--color-hover); color: var(--color-text); }
.feedback-panel__type-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: inherit;
}
.feedback-panel__type-icon { width: 14px; height: 14px; flex-shrink: 0; }
.feedback-panel__type-option:has(.feedback-panel__type-input:checked) {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border));
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}
.feedback-panel__type-option--friction:has(.feedback-panel__type-input:checked) {
  background: color-mix(in srgb, var(--color-info) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-border));
  color: var(--color-info);
}
.feedback-panel__type-option:has(.feedback-panel__type-input:focus-visible) {
  box-shadow: var(--shadow-focus);
}
.feedback-panel__type-option[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--color-surface);
  color: var(--color-text-strong);
  border: 1px solid var(--color-border);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: var(--z-dropdown);
}
/* Anchor leftmost / rightmost tooltips to their pill edge so the
   bubble doesn't extend past the panel's overflow clip. */
.feedback-panel__type-option:first-child[data-tip]::after {
  left: 0;
  transform: none;
}
.feedback-panel__type-option:last-child[data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}
.feedback-panel__type-option:hover::after,
.feedback-panel__type-option:has(.feedback-panel__type-input:focus-visible)::after {
  opacity: 1;
  transition-delay: 250ms;
}
.feedback-panel__type:hover .feedback-panel__type-option:not(:hover)::after {
  opacity: 0;
  transition-delay: 0ms;
}

.feedback-panel .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.feedback-panel__input,
.feedback-panel__textarea {
  width: 100%;
  font: inherit;
  font-size: var(--font-base);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.feedback-panel__input::placeholder,
.feedback-panel__textarea::placeholder { color: var(--color-muted); }
.feedback-panel__input:focus,
.feedback-panel__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.feedback-panel__textarea {
  resize: vertical;
  min-height: 92px;
  font-family: inherit;
}

.feedback-panel__attach {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
}
.feedback-panel__attach-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  position: relative;
}
.feedback-panel__attach-row[hidden] { display: none; }
/* General-sibling rule so separators land between every attach-row even
   when an attach-preview div sits in between (which `+ adjacent` would
   skip). The mic-row override below removes the separator above mic so
   Record clip + Microphone visually pair as one unit. */
.feedback-panel__attach-row ~ .feedback-panel__attach-row {
  border-top: 1px solid var(--color-border-subtle);
}
#feedback-record-mic-row {
  border-top: 0;
}
.feedback-panel__attach-row--filled {
  background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface));
}
.feedback-panel__attach-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-muted); }
.feedback-panel__attach-row--filled .feedback-panel__attach-icon { color: var(--color-accent); }
.feedback-panel__attach-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.feedback-panel__attach-name {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.feedback-panel__attach-row--filled .feedback-panel__attach-name { color: var(--color-text-strong); }
.feedback-panel__attach-hint {
  font-size: var(--font-xs);
  color: var(--color-muted);
}
.feedback-panel__attach-action { flex-shrink: 0; }
.feedback-panel__attach-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-dim);
}
.feedback-panel__attach-preview[hidden] { display: none; }
.feedback-panel__attach-preview-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  object-fit: cover;
  background: var(--color-surface);
}
.feedback-panel__attach-preview-meta {
  flex: 1;
  min-width: 0;
  font-size: var(--font-xs);
  color: var(--color-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.feedback-panel__attach-preview-meta strong {
  color: var(--color-text-strong);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-panel__attach-preview-remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-base);
  line-height: 1;
}
.feedback-panel__attach-preview-remove:hover {
  color: var(--color-danger);
  background: var(--color-hover);
}
.feedback-panel__attach-preview-remove:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.feedback-panel__attach-preview video {
  width: 100%;
  max-height: 220px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
}

.feedback-panel__switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.feedback-panel__switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.feedback-panel__switch-track {
  position: relative;
  width: 30px;
  height: 18px;
  background: color-mix(in srgb, var(--color-muted) 45%, var(--color-surface));
  border-radius: var(--radius-pill);
  transition: background var(--transition-normal);
}
.feedback-panel__switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}
.feedback-panel__switch-input:checked + .feedback-panel__switch-track { background: var(--color-accent); }
.feedback-panel__switch-input:checked + .feedback-panel__switch-track::after { transform: translateX(12px); }
.feedback-panel__switch-input:focus-visible + .feedback-panel__switch-track {
  box-shadow: var(--shadow-focus);
}

.feedback-panel__ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 28px;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.feedback-panel__ghost:hover { background: var(--color-hover); }
.feedback-panel__ghost:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--color-accent);
}
.feedback-panel__ghost--recording { color: var(--color-danger); border-color: var(--color-danger); }

.feedback-panel__context {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-dim);
}
.feedback-panel__context-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-xs);
  color: var(--color-subtle);
  font-weight: var(--weight-medium);
}
.feedback-panel__context-summary::-webkit-details-marker { display: none; }
.feedback-panel__context-summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid var(--color-muted);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform var(--transition-fast);
}
.feedback-panel__context[open] .feedback-panel__context-summary::before { transform: rotate(90deg); }
.feedback-panel__context-body {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-xs);
  color: var(--color-subtle);
  line-height: var(--line-height-relaxed);
  border-top: 1px dashed var(--color-border);
}
.feedback-panel__context-body ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.feedback-panel__context-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-xs);
}

.feedback-panel__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.feedback-panel__foot[hidden] { display: none; }
.feedback-panel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-4);
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}
.feedback-panel__btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.feedback-panel__btn--ghost:hover { background: var(--color-hover); }
.feedback-panel__btn--primary {
  background: var(--color-accent);
  color: var(--color-surface);
  font-weight: var(--weight-semibold);
}
.feedback-panel__btn--primary:hover { background: var(--color-accent-hover); }
.feedback-panel__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.feedback-panel__btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.feedback-panel__spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--color-surface) 50%, transparent);
  border-top-color: var(--color-surface);
  animation: feedback-panel-spin 0.7s linear infinite;
}
@keyframes feedback-panel-spin { to { transform: rotate(360deg); } }

/* Activity tab */
.feedback-panel__pane--activity {
  padding: var(--space-3) var(--space-5);
}
.feedback-panel__activity-empty {
  font-size: var(--font-sm);
  color: var(--color-muted);
  margin: 0;
}
.feedback-panel__group { padding: var(--space-3) 0 var(--space-2); }
.feedback-panel__group + .feedback-panel__group {
  border-top: 1px solid var(--color-border-subtle);
}
.feedback-panel__group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}
.feedback-panel__group-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-muted);
}
.feedback-panel__group--new      .feedback-panel__group-dot { background: var(--color-info); }
.feedback-panel__group--planned  .feedback-panel__group-dot { background: var(--color-warning); }
.feedback-panel__group--progress .feedback-panel__group-dot { background: var(--color-accent); }
.feedback-panel__group--shipped  .feedback-panel__group-dot { background: var(--color-success); }
.feedback-panel__group-count {
  margin-left: auto;
  font-size: var(--font-xs);
  color: var(--color-muted);
  font-weight: var(--weight-normal);
  letter-spacing: 0;
  text-transform: none;
}
.feedback-panel__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feedback-panel__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2);
  color: inherit;
  border-radius: var(--radius-xs);
}
.feedback-panel__item-num {
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--font-xs);
  flex-shrink: 0;
  width: 36px;
}
.feedback-panel__item-title {
  flex: 1;
  min-width: 0;
  font-size: var(--font-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedback-panel__item-age {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: var(--font-xs);
}
.feedback-panel__items--empty {
  font-size: var(--font-sm);
  color: var(--color-muted);
  font-style: italic;
  margin: 0;
  padding: var(--space-2);
}

/* Success state */
.feedback-panel__success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  gap: var(--space-3);
}
.feedback-panel__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
  margin-bottom: var(--space-2);
}
.feedback-panel__success-mark svg { width: 28px; height: 28px; }
.feedback-panel__success-title {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  margin: 0;
}
.feedback-panel__success-meta {
  font-size: var(--font-sm);
  color: var(--color-subtle);
  max-width: 280px;
  margin: 0;
  line-height: var(--line-height-normal);
}
.feedback-panel__success-meta a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.feedback-panel__success-meta a:hover { text-decoration: underline; }
.feedback-panel__success-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* Floating "Stop recording" pill (rendered as a sibling of the panel) */
.feedback-rec-pill {
  position: fixed;
  bottom: 1.25rem;
  left: 4.25rem;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  font: inherit;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  transition: background var(--transition-fast);
}
.feedback-rec-pill[hidden] { display: none; }
.feedback-rec-pill:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}
.feedback-rec-pill__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-danger);
  animation: feedback-rec-pulse 1.4s ease-in-out infinite;
}
.feedback-rec-pill__time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--color-muted);
  font-weight: var(--weight-normal);
}
@keyframes feedback-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* "Recording isn't supported" hint inside an attach row */
.feedback-panel__attach-unsupported {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-xs);
  color: var(--color-muted);
  background: var(--color-surface-dim);
  border-top: 1px solid var(--color-border-subtle);
}

/* ── end migrated: platform/core/templates/base_team.html ── */

/* ── migrated: platform/core/templates/base_auth.html ── */

.auth-shell .error {
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}

.auth-shell .success {
  background: #edfaf1;
  border: 1px solid #b7e9c7;
  color: var(--color-success);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}

.auth-shell .forgot-link {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
}

.auth-shell .forgot-link:hover {
  color: var(--color-accent);
}

.auth-shell .field {
  position: relative;
  margin-bottom: 1.25rem;
}

.auth-shell .field input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.4rem 0.875rem 0.5rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 0;
}

.auth-shell .field input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.auth-shell .field label {
  position: absolute;
  top: 0;
  left: 0.875rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  pointer-events: none;
  padding: 0.45rem 0;
  margin-bottom: 0;
}

/* ── end migrated: platform/core/templates/base_auth.html ── */

/* ── migrated: platform/core/templates/login.html ── */

/* Tokens scoped to this page — brand-surface palette (warm/ceremonial).
   Promote to design-system.css behind body.brand-surface when a second
   customer-facing surface needs them. */
.auth-page {
  --auth-ink:           #3D3D24;
  --auth-ink-soft:      #6d6a4f;
  --auth-ink-strong:    #2a2a18;
  --auth-accent:        var(--color-accent);
  --auth-accent-deep:   #3a4785;
  --auth-coral:         #d47864;
  --auth-butter:        #f0e1b8;
  --auth-paper:         #f6f1e7;
  --auth-paper-deep:    #ecdfc9;
  --auth-card:          #fdfaf3;
  --auth-card-edge:     #e6ddc8;
  --auth-rule-strong:   color-mix(in srgb, var(--auth-ink) 30%, transparent);
  --auth-muted:         color-mix(in srgb, var(--auth-ink) 55%, transparent);
  --auth-success:       #6b8f4e;
  --auth-danger:        #b0463a;

  --auth-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --auth-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* Override .auth-shell defaults — this page is a full-viewport split, not a centred card. */
body.auth-page {
  display: block;
  padding: 0;
  background: var(--auth-paper);
  color: var(--auth-ink-strong);
}

.auth-page .auth-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

@media (max-width: 960px) {
  .auth-page .auth-stage { grid-template-columns: 1fr; }
  .auth-page .auth-sheet  { order: 1; }
  .auth-page .auth-poster { order: 2; }
}

/* ─── Poster (left) ─── */

.auth-page .auth-poster {
  position: relative;
  background: var(--auth-paper-deep);
  color: var(--auth-ink-strong);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.5rem;
  isolation: isolate;
}

.auth-page .auth-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 18% 12%, rgba(239, 217, 207, 0.85), transparent 70%),
    radial-gradient(55% 40% at 85% 35%, rgba(240, 225, 184, 0.75), transparent 70%),
    radial-gradient(70% 55% at 70% 95%, rgba(201, 206, 232, 0.65), transparent 70%),
    radial-gradient(40% 30% at 12% 80%, rgba(212, 120, 100, 0.22), transparent 65%);
  z-index: -1;
}

.auth-page .auth-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.24  0 0 0 0 0.14  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

.auth-page .auth-poster__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--auth-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-page .auth-poster__meta {
  text-align: right;
  line-height: 1.6;
}

.auth-page .auth-poster__meta em {
  font-family: var(--auth-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--auth-ink-strong);
}

.auth-page .auth-poster__stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  border: 1px solid var(--auth-rule-strong);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(2px);
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-page .auth-poster__lock {
  width: 13px;
  height: 13px;
  color: var(--auth-accent);
}

.auth-page .auth-poster__body {
  margin-top: auto;
  padding-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-page .auth-poster__title {
  font-family: var(--auth-serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--auth-ink-strong);
  max-width: 14ch;
}

.auth-page .auth-poster__title em {
  font-style: italic;
  color: var(--auth-accent);
  font-weight: 400;
  position: relative;
}

.auth-page .auth-poster__title em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 4%;
  height: 8px;
  background: var(--auth-butter);
  z-index: -1;
  border-radius: var(--radius-xs);
  transform: skew(-6deg, -1deg);
  opacity: 0.7;
}

.auth-page .auth-poster__lede {
  font-family: var(--auth-serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--auth-ink-soft);
  max-width: 42ch;
}

.auth-page .auth-poster__lede em {
  color: var(--auth-coral);
  font-style: italic;
}

.auth-page .auth-assurances {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 1.1rem 1.25rem;
  background: rgba(253, 250, 243, 0.72);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-auth-card);
  box-shadow: 0 12px 30px -18px rgba(60, 60, 36, 0.25);
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.auth-page .auth-assurances li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: var(--auth-ink-strong);
}

.auth-page .auth-assurances svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--auth-accent);
}

.auth-page .auth-assurances strong {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--auth-ink-strong);
}

.auth-page .auth-assurances span {
  display: block;
  margin-top: 2px;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-page .auth-poster__foot {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--auth-rule-strong);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  font-family: var(--auth-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-page .auth-poster__num {
  display: block;
  font-family: var(--auth-serif);
  font-weight: 500;
  font-size: 1.85rem;
  color: var(--auth-ink-strong);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 0.2rem;
  line-height: 1;
}

.auth-page .auth-poster__num em {
  font-style: italic;
  color: var(--auth-coral);
  font-weight: 400;
}

/* ─── Sheet (right) ─── */

.auth-page .auth-sheet {
  position: relative;
  background: var(--auth-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  overflow: hidden;
}

.auth-page .auth-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(239, 217, 207, 0.35), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(201, 206, 232, 0.3), transparent 55%);
  pointer-events: none;
}

.auth-page .auth-form-col {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.auth-page .auth-sheet__head {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.auth-page .auth-sheet__logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.auth-page .auth-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.auth-page .auth-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  background: rgba(253, 250, 243, 0.6);
  border: 1px solid var(--auth-rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-page .auth-rating svg {
  color: var(--auth-accent);
}

.auth-page .auth-crumbs {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-muted);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.auth-page .auth-crumbs__dot {
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.5;
}

.auth-page .auth-hello {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.auth-page .auth-hello h1 {
  font-family: var(--auth-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--auth-ink-strong);
}

.auth-page .auth-hello h1 em {
  font-style: italic;
  color: var(--auth-accent);
  font-weight: 400;
}

.auth-page .auth-hello p {
  font-size: 14px;
  color: var(--auth-ink-soft);
  line-height: 1.55;
  max-width: 42ch;
}

.auth-page .auth-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--auth-rule-strong);
}

.auth-page .auth-rule::before,
.auth-page .auth-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}

.auth-page .auth-rule span {
  color: var(--auth-ink-soft);
  font-family: var(--auth-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 10px;
}

/* Form */
.auth-page form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-page .auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-page .auth-field label {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--auth-ink-soft);
}

.auth-page .auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--auth-card);
  border: 1.5px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-page .auth-input-wrap:focus-within {
  border-color: var(--auth-accent);
  box-shadow: var(--shadow-focus);
  background: white;
}

.auth-page .auth-field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.85rem 0.95rem;
  font-size: 1rem;
  color: var(--auth-ink-strong);
  outline: none;
  letter-spacing: 0.01em;
  font-family: inherit;
}

.auth-page .auth-field input::placeholder {
  color: color-mix(in srgb, var(--auth-ink) 32%, transparent);
  font-style: italic;
  font-family: var(--auth-serif);
  font-size: 1.05rem;
}

.auth-page .auth-field:focus-within label {
  color: var(--auth-accent);
}

.auth-page .auth-pw-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--auth-ink-soft);
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  transition: color 0.15s;
}

.auth-page .auth-pw-toggle:hover {
  color: var(--auth-accent);
}

.auth-page .auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.25rem;
}

.auth-page .auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 13px;
  color: var(--auth-ink-soft);
  cursor: pointer;
  user-select: none;
}

.auth-page .auth-checkbox input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--auth-rule-strong);
  border-radius: var(--radius-xs);
  background: var(--auth-card);
  cursor: inherit;
  position: relative;
  transition: all 0.15s;
}

.auth-page .auth-checkbox input:checked {
  background: var(--auth-accent);
  border-color: var(--auth-accent);
}

.auth-page .auth-checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.auth-page .auth-link-soft {
  font-size: 13px;
  color: var(--auth-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.15s;
}

.auth-page .auth-link-soft:hover {
  color: var(--auth-accent);
  border-bottom-color: var(--auth-accent);
}

.auth-page .auth-submit {
  margin-top: 0.5rem;
  position: relative;
  width: 100%;
  background: var(--auth-ink-strong);
  color: var(--auth-paper);
  border: 0;
  padding: 0 1.5rem;
  height: 54px;
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: background 0.2s, transform 0.15s;
  border-radius: var(--radius-sm);
}

.auth-page .auth-submit:hover:not(:disabled) {
  background: var(--auth-accent-deep);
}

.auth-page .auth-submit:active:not(:disabled) {
  transform: translateY(1px);
}

.auth-page .auth-submit:disabled {
  background: color-mix(in srgb, var(--auth-ink-strong) 22%, transparent);
  cursor: not-allowed;
}

.auth-page .auth-submit__arrow {
  display: inline-flex;
  transition: transform 0.25s;
}

.auth-page .auth-submit:hover:not(:disabled) .auth-submit__arrow {
  transform: translateX(4px);
}

.auth-page .auth-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--auth-rule-strong);
  font-size: 12px;
  color: var(--auth-ink-soft);
  text-align: center;
}

.auth-page .auth-sheet__foot a {
  color: var(--auth-ink-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--auth-rule-strong);
  padding-bottom: 1px;
  transition: all 0.15s;
}

.auth-page .auth-sheet__foot a:hover {
  color: var(--auth-accent);
  border-bottom-color: var(--auth-accent);
}

.auth-page .auth-sheet__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

/* Error states — preserved from previous implementation, re-styled for warm palette */
.auth-page .error.error--locked {
  position: relative;
  padding-right: 2.25rem;
}

.auth-page .error--locked .error-lock {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: var(--color-danger);
  opacity: 0.8;
}

.auth-page .error--locked .error-lock svg {
  width: 18px;
  height: 18px;
}

.auth-page .error p {
  margin: 0 0 0.5rem 0;
}

.auth-page .error p:last-child {
  margin-bottom: 0;
}

/* ── end migrated: platform/core/templates/login.html ── */

/* ── migrated: platform/core/templates/forgot_password.html ── */

/* Back-link under submit (used on forgot-password, also available on other .auth-page forms). */
.auth-page .auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.4rem 0.25rem;
  color: var(--auth-ink-soft);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s, transform 0.2s;
}

.auth-page .auth-back-link svg {
  transition: transform 0.2s;
}

.auth-page .auth-back-link:hover {
  color: var(--auth-accent);
}

.auth-page .auth-back-link:hover svg {
  transform: translateX(-3px);
}

/* Success state — shown once a reset link has been dispatched. */
.auth-page .auth-sent {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.25rem 0;
  animation: auth-sent-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.auth-page .auth-sent-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--auth-accent) 12%, var(--auth-card));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-accent);
  border: 1px solid color-mix(in srgb, var(--auth-accent) 25%, transparent);
}

.auth-page .auth-sent-mark svg {
  width: 24px;
  height: 24px;
}

.auth-page .auth-sent h2 {
  font-family: var(--auth-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--auth-ink-strong);
}

.auth-page .auth-sent > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--auth-ink-soft);
  max-width: 42ch;
}

.auth-page .auth-sent > p strong {
  color: var(--auth-ink-strong);
  font-weight: 500;
  font-family: var(--auth-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 0 var(--space-1);
  background: color-mix(in srgb, var(--auth-butter) 45%, transparent);
  border-radius: var(--radius-xs);
}

.auth-page .auth-sent > p em {
  color: var(--auth-accent);
  font-style: italic;
  font-weight: 500;
}

/* Dispatch receipt card — Sent · From · Subject. */
.auth-page .auth-dispatch {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 2rem;
  padding: 0.9rem 1rem;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  overflow-x: auto;
}

.auth-page .auth-dispatch dt {
  margin-bottom: var(--space-1);
  opacity: 0.75;
}

.auth-page .auth-dispatch dd {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--auth-ink-strong);
  white-space: nowrap;
}

.auth-page .auth-sent-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.25rem;
}

.auth-page .auth-sent-actions form {
  margin: 0;
}

.auth-page .auth-sent-actions button.auth-link-soft {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

.auth-page .auth-sent-actions button.auth-link-soft:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.auth-page .auth-sent-actions button.auth-link-soft:disabled:hover {
  color: var(--auth-ink-soft);
  border-bottom-color: transparent;
}

/* Dev-mode reset-url fallback. */
.auth-page .auth-reset-url-fallback {
  margin: 0;
  font-size: 11px;
  word-break: break-all;
  color: var(--auth-ink-soft);
  font-family: var(--auth-mono);
}

.auth-page .auth-reset-url-fallback a {
  color: var(--auth-accent);
}

@keyframes auth-sent-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── end migrated: platform/core/templates/forgot_password.html ── */

/* ── migrated: platform/core/templates/reset_password.html ── */

/* Input-wrap validation states (extend the shared .auth-input-wrap). */
.auth-page .auth-input-wrap.is-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent);
}

.auth-page .auth-input-wrap.is-match {
  border-color: var(--color-success);
}

/* Token validity banner — shown above the form when the link is still good. */
.auth-page .auth-token-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: color-mix(in srgb, var(--auth-accent) 8%, var(--auth-card));
  border: 1px solid color-mix(in srgb, var(--auth-accent) 22%, var(--auth-card-edge));
  border-radius: var(--radius-sm);
  font-family: var(--auth-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}

.auth-page .auth-token-banner svg {
  width: 16px;
  height: 16px;
  color: var(--auth-accent);
  flex-shrink: 0;
}

/* Strength meter — four bars, filled progressively via data-score. */
.auth-page .auth-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  margin-top: 0.3rem;
}

.auth-page .auth-meter__bar {
  height: 4px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--auth-ink) 12%, transparent);
  transition: background 0.25s;
}

.auth-page .auth-meter[data-score="1"] .auth-meter__bar:nth-child(-n+1) { background: var(--color-danger); }
.auth-page .auth-meter[data-score="2"] .auth-meter__bar:nth-child(-n+2) { background: var(--auth-coral); }
.auth-page .auth-meter[data-score="3"] .auth-meter__bar:nth-child(-n+3) { background: var(--auth-butter); }
.auth-page .auth-meter[data-score="4"] .auth-meter__bar:nth-child(-n+4) { background: var(--color-success); }

.auth-page .auth-meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  margin-top: 0.3rem;
}

.auth-page .auth-meter-row__strength em {
  font-family: var(--auth-serif);
  font-style: italic;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--auth-ink-strong);
  margin-left: 0.35rem;
}

/* Password requirements checklist — ticks as rules are met. */
.auth-page .auth-reqs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  padding: 0.9rem 1rem;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  margin: 0.25rem 0 0;
}

.auth-page .auth-reqs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: var(--auth-ink-soft);
  transition: color 0.2s;
}

.auth-page .auth-reqs__mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--auth-rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.auth-page .auth-reqs__mark svg {
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: opacity 0.15s;
  color: white;
}

.auth-page .auth-reqs li.is-met {
  color: var(--auth-ink-strong);
}

.auth-page .auth-reqs li.is-met .auth-reqs__mark {
  background: var(--color-success);
  border-color: var(--color-success);
}

.auth-page .auth-reqs li.is-met .auth-reqs__mark svg {
  opacity: 1;
}

/* Inline hint under a field — used for the match/mismatch feedback. */
.auth-page .auth-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  min-height: 14px;
}

.auth-page .auth-hint.is-error {
  color: var(--color-danger);
}

.auth-page .auth-hint.is-ok {
  color: var(--color-success);
}

/* Expired-link fallback copy. */
.auth-page .auth-expired-copy {
  font-size: 14px;
  line-height: 1.55;
  color: var(--auth-ink-soft);
  max-width: 42ch;
}

/* ── end migrated: platform/core/templates/reset_password.html ── */

/* ── migrated: platform/core/templates/login_2fa.html ── */

.login-2fa-page input[type="text"] {
  letter-spacing: 0.25em;
  text-align: center;
}

/* ── end migrated: platform/core/templates/login_2fa.html ── */

/* ── migrated: platform/core/templates/account_2fa_setup.html ── */

/* Poster-side numbered steps — replaces the assurances block on setup */
.auth-2fa-setup-page .auth-steps {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 1.1rem 1.25rem;
  background: rgba(253, 250, 243, 0.72);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-auth-card);
  box-shadow: 0 12px 30px -18px rgba(60, 60, 36, 0.25);
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.auth-2fa-setup-page .auth-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--auth-ink) 16%, transparent);
}
.auth-2fa-setup-page .auth-steps li:last-child { border-bottom: 0; }
.auth-2fa-setup-page .auth-steps__num {
  font-family: var(--auth-serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--auth-accent);
  line-height: 1;
  padding-top: 2px;
  text-align: center;
}
.auth-2fa-setup-page .auth-steps strong {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--auth-ink-strong);
  margin-bottom: 2px;
}
.auth-2fa-setup-page .auth-steps span {
  display: block;
  font-size: 12.5px;
  color: var(--auth-ink-soft);
  line-height: 1.45;
}

/* Sheet-side QR card */
.auth-2fa-setup-page .auth-qr-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-auth-card);
  box-shadow: 0 20px 40px -24px rgba(60, 60, 36, 0.25);
}
.auth-2fa-setup-page .auth-qr-frame {
  position: relative;
  width: 172px;
  height: 172px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-2fa-setup-page .auth-qr-frame img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.auth-2fa-setup-page .auth-qr-meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.auth-2fa-setup-page .auth-qr-tag {
  font-family: var(--auth-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}
.auth-2fa-setup-page .auth-qr-meta h3 {
  font-family: var(--auth-serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--auth-ink-strong);
  letter-spacing: -0.01em;
}
.auth-2fa-setup-page .auth-qr-meta h3 em {
  font-style: italic;
  color: var(--auth-accent);
  font-weight: 400;
}
.auth-2fa-setup-page .auth-qr-meta p {
  font-size: 12.5px;
  color: var(--auth-ink-soft);
  line-height: 1.5;
}
.auth-2fa-setup-page .auth-app-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 0.15rem;
}
.auth-2fa-setup-page .auth-app-list span {
  font-family: var(--auth-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--auth-ink) 16%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

/* Manual-entry disclosure */
.auth-2fa-setup-page details.auth-manual {
  border: 1px dashed var(--auth-rule-strong);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.9rem;
  background: rgba(253, 250, 243, 0.4);
  transition: background 0.2s;
}
.auth-2fa-setup-page details.auth-manual[open] {
  background: var(--auth-card);
  border-style: solid;
  border-color: var(--auth-card-edge);
}
.auth-2fa-setup-page details.auth-manual summary {
  cursor: pointer;
  padding: 0.7rem 0;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.auth-2fa-setup-page details.auth-manual summary::-webkit-details-marker { display: none; }
.auth-2fa-setup-page details.auth-manual summary::after {
  content: "+";
  font-family: var(--auth-serif);
  font-size: 1.25rem;
  color: var(--auth-ink-soft);
  line-height: 1;
}
.auth-2fa-setup-page details.auth-manual[open] summary::after { content: "−"; }
.auth-2fa-setup-page details.auth-manual summary:hover { color: var(--auth-accent); }
.auth-2fa-setup-page .auth-manual__body {
  padding: 0 0 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.auth-2fa-setup-page .auth-manual__label {
  font-family: var(--auth-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
}
.auth-2fa-setup-page .auth-code-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.auth-2fa-setup-page .auth-code-row code {
  flex: 1;
  padding: 0.75rem 0.85rem;
  font-family: var(--auth-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--auth-ink-strong);
  word-break: break-all;
  line-height: 1.35;
  background: transparent;
}
.auth-2fa-setup-page .auth-copy-btn {
  border: 0;
  border-left: 1px solid var(--auth-card-edge);
  background: var(--auth-paper);
  padding: 0 1rem;
  cursor: pointer;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.auth-2fa-setup-page .auth-copy-btn:hover {
  color: var(--auth-accent);
  background: color-mix(in srgb, var(--auth-accent) 8%, var(--auth-paper));
}
.auth-2fa-setup-page .auth-copy-btn[data-copied="true"] { color: var(--auth-success); }
.auth-2fa-setup-page .auth-copy-btn svg { width: 12px; height: 12px; }

/* Six-digit split input */
.auth-2fa-setup-page .auth-code-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.auth-2fa-setup-page .auth-code-field > label {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--auth-ink-soft);
}
.auth-2fa-setup-page .auth-digits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}
.auth-2fa-setup-page .auth-digits input {
  aspect-ratio: 1 / 1.15;
  width: 100%;
  border: 1.5px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  background: var(--auth-card);
  font-family: var(--auth-mono);
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  color: var(--auth-ink-strong);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.auth-2fa-setup-page .auth-digits input:hover { border-color: var(--auth-rule-strong); }
.auth-2fa-setup-page .auth-digits input:focus {
  border-color: var(--auth-accent);
  box-shadow: var(--shadow-focus);
  background: var(--color-surface);
}
.auth-2fa-setup-page .auth-digits input:not(:placeholder-shown) {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--auth-accent) 35%, var(--auth-card-edge));
}
.auth-2fa-setup-page .auth-digits.is-filled input { border-color: var(--auth-success); }
.auth-2fa-setup-page .auth-digits.is-error input {
  border-color: var(--auth-danger);
  animation: auth-shake 0.4s cubic-bezier(.36, .07, .19, .97);
}
.auth-2fa-setup-page .auth-code-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 12px;
  color: var(--auth-ink-soft);
}
.auth-2fa-setup-page .auth-paste-hint {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-2fa-setup-page .auth-ttl {
  font-family: var(--auth-mono);
  color: var(--auth-ink-strong);
}
.auth-2fa-setup-page .auth-acct-email {
  color: var(--auth-ink-strong);
  font-weight: 500;
}

/* Success state */
.auth-2fa-setup-page .auth-done {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.auth-2fa-setup-page .auth-done__mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--auth-success) 14%, var(--auth-card));
  border: 1px solid color-mix(in srgb, var(--auth-success) 30%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--auth-success);
}
.auth-2fa-setup-page .auth-done__mark svg { width: 24px; height: 24px; }
.auth-2fa-setup-page .auth-recovery {
  padding: 1rem 1.1rem;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.auth-2fa-setup-page .auth-recovery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.auth-2fa-setup-page .auth-recovery__head h4 {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  font-weight: 500;
}
.auth-2fa-setup-page .auth-recovery__tip {
  font-family: var(--auth-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--auth-coral);
}
.auth-2fa-setup-page .auth-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem 0.8rem;
  font-family: var(--auth-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--auth-ink-strong);
}
.auth-2fa-setup-page .auth-codes-grid div {
  padding: 0.4rem 0.6rem;
  background: var(--auth-paper);
  border-radius: var(--radius-xs);
  border: 1px solid color-mix(in srgb, var(--auth-ink) 16%, transparent);
}
.auth-2fa-setup-page .auth-recovery__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.auth-2fa-setup-page .auth-recovery__actions button {
  flex: 1;
  min-width: 140px;
  padding: 0.65rem 0.9rem;
  background: var(--auth-paper);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
.auth-2fa-setup-page .auth-recovery__actions button:hover {
  color: var(--auth-accent);
  border-color: var(--auth-accent);
}
.auth-2fa-setup-page .auth-recovery__actions button svg {
  width: 12px;
  height: 12px;
}

/* Anchor styled as a submit button (for "Continue to dashboard") */
.auth-2fa-setup-page .auth-submit--link {
  text-decoration: none;
}

@keyframes auth-shake {
  10%, 90%  { transform: translateX(-1px); }
  20%, 80%  { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60%  { transform: translateX(3px); }
}

/* ── end migrated: platform/core/templates/account_2fa_setup.html ── */

/* ── migrated: platform/tools/dev/templates/components.html ── */

.dev-gallery .gallery-header {
  margin-bottom: 2rem;
}
.dev-gallery .gallery-intro {
  color: var(--color-muted);
  max-width: 48rem;
}
.dev-gallery .gallery-intro code {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--color-bg);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-xs);
}

.dev-gallery .gallery-category {
  margin-bottom: 3rem;
}
.dev-gallery .gallery-category-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.dev-gallery .gallery-component {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.dev-gallery .gallery-component-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.dev-gallery .gallery-component-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.dev-gallery .gallery-path {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-xs);
}
.dev-gallery .gallery-component-description {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  max-width: 60rem;
}

.dev-gallery .gallery-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .dev-gallery .gallery-variant-grid {
    grid-template-columns: 1fr;
  }
}

.dev-gallery .gallery-variant {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.dev-gallery .gallery-variant-label {
  padding: 0.4rem 0.75rem;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.dev-gallery .gallery-frame {
  padding: 1rem;
  background: var(--color-surface);
  overflow-x: auto;
  pointer-events: none;
}
.dev-gallery .gallery-frame > * {
  max-width: 100%;
}

.dev-gallery .gallery-snippet {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.dev-gallery .gallery-snippet > summary {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
}
.dev-gallery .gallery-snippet > summary:hover {
  color: var(--color-text);
}
.dev-gallery .gallery-snippet pre {
  margin: 0;
  padding: 0.75rem;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.dev-gallery .gallery-snippet code {
  background: none;
  padding: 0;
  color: var(--color-text);
}

/* ── end migrated: platform/tools/dev/templates/components.html ── */

/* ── migrated: platform/tools/dev/templates/tokens.html ── */

.dev-gallery .tokens-header {
  margin-bottom: 2rem;
}
.dev-gallery .tokens-intro {
  color: var(--color-muted);
  max-width: 48rem;
}
.dev-gallery .tokens-intro code {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--color-bg);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-xs);
}

.dev-gallery .tokens-category {
  margin-bottom: 3rem;
}
.dev-gallery .tokens-category-title {
  font-size: 1.2rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.dev-gallery .tokens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}
@media (max-width: 640px) {
  .dev-gallery .tokens-grid {
    grid-template-columns: 1fr;
  }
}

.dev-gallery .token-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dev-gallery .token-sample {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Sample bodies */
.dev-gallery .swatch {
  width: 100%;
  height: 100%;
}
.dev-gallery .radius-sample {
  width: 48px;
  height: 48px;
  background: var(--color-accent);
}
.dev-gallery .shadow-sample {
  width: 60%;
  height: 44px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.dev-gallery .space-sample {
  background: var(--color-accent);
  border-radius: var(--radius-xs);
}
.dev-gallery .type-sample {
  font-family: var(--font);
  font-size: 1.75rem;
  color: var(--color-text);
}
.dev-gallery .type-sample--lh {
  font-size: 0.875rem;
  line-height: inherit;
  text-align: center;
}
.dev-gallery .transition-sample {
  width: 28px;
  height: 28px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: dev-gallery-token-transition-bounce 1.6s ease-in-out infinite alternate;
}
@keyframes dev-gallery-token-transition-bounce {
  from { transform: translateX(-60px); }
  to   { transform: translateX(60px); }
}
.dev-gallery .z-sample {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  color: var(--color-accent);
}
.dev-gallery .opacity-sample {
  width: 60%;
  height: 100%;
}

/* Card meta */
.dev-gallery .token-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.dev-gallery .token-name {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--color-text);
}
.dev-gallery .token-value {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--color-muted);
  word-break: break-all;
}
.dev-gallery .token-description {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: var(--line-height-normal);
}

/* ── end migrated: platform/tools/dev/templates/tokens.html ── */

/* ── migrated: platform/tools/system/templates/design.html ── */

.dev-gallery .gallery-header {
  margin-bottom: 2rem;
}
.dev-gallery .gallery-intro {
  color: var(--color-muted);
  max-width: 52rem;
}
.dev-gallery .gallery-intro strong { color: var(--color-text); }
.dev-gallery .gallery-intro code {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--color-bg);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-xs);
}
.dev-gallery .gallery-intro a { color: var(--color-accent); text-decoration: none; }
.dev-gallery .gallery-intro a:hover { text-decoration: underline; }

.dev-gallery .gallery-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dev-gallery .gallery-category {
  margin-bottom: 3rem;
}
.dev-gallery .gallery-category-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.dev-gallery .gallery-component {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.dev-gallery .gallery-component-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.dev-gallery .gallery-component-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.dev-gallery .gallery-path {
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-xs);
}
.dev-gallery .gallery-component-description {
  margin: 0 0 1rem;
  color: var(--color-muted);
  font-size: 0.85rem;
  max-width: 60rem;
}

.dev-gallery .gallery-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .dev-gallery .gallery-variant-grid { grid-template-columns: 1fr; }
}

.dev-gallery .gallery-variant {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.dev-gallery .gallery-variant-label {
  padding: 0.4rem 0.75rem;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.dev-gallery .gallery-frame {
  padding: 1rem;
  background: var(--color-surface);
  overflow-x: auto;
  pointer-events: none;
}
.dev-gallery .gallery-frame > * { max-width: 100%; }

.dev-gallery .gallery-snippet {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.dev-gallery .gallery-snippet > summary {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
}
.dev-gallery .gallery-snippet > summary:hover { color: var(--color-text); }
.dev-gallery .gallery-snippet pre {
  margin: 0;
  padding: 0.75rem;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.dev-gallery .gallery-snippet code {
  background: none;
  padding: 0;
  color: var(--color-text);
}

/* Mobile preview — constrains each variant frame to 375px wide */
.dev-gallery .gallery-body.gallery--mobile .gallery-variant-grid {
  grid-template-columns: 375px;
}
.dev-gallery .gallery-body.gallery--mobile .gallery-frame {
  max-width: 375px;
}

/* ── end migrated: platform/tools/system/templates/design.html ── */

/* ── migrated: platform/tools/onboarding/templates/help_menu.html ── */
/* Rendered inside #help-panel-body (base_team.html); requires .help-panel-body ancestor. */

.help-panel-body .help-section {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.help-panel-body .help-section:last-child {
  border-bottom: none;
}

.help-panel-body .help-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.help-panel-body .help-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  color: var(--color-text);
  text-decoration: none;
}

.help-panel-body .help-link:hover {
  color: var(--color-accent);
}

.help-panel-body .help-shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.8rem;
}

.help-panel-body .help-shortcut-key {
  font-size: 0.7rem;
  font-family: monospace;
  background: var(--color-bg);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}

/* ── end migrated: platform/tools/onboarding/templates/help_menu.html ── */

/* ── migrated: platform/tools/onboarding/templates/partials/whats_new.html ── */
/* HTMX-loaded fragment inside help_menu.html; requires .help-panel-body ancestor. */

.help-panel-body .onb-whatsnew {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-panel-body .onb-whatsnew-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.help-panel-body .onb-whatsnew-item:last-child {
  border-bottom: none;
}

.help-panel-body .onb-whatsnew-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.help-panel-body .onb-new-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-xs);
}

.help-panel-body .onb-whatsnew-content {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
  line-height: 1.4;
}

.help-panel-body .onb-whatsnew-date {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

.help-panel-body .onb-whatsnew-empty {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ── end migrated: platform/tools/onboarding/templates/partials/whats_new.html ── */

/* ── migrated: platform/tools/onboarding/templates/partials/tips.html ── */
/* HTMX-loaded fragment inside help_menu.html; requires .help-panel-body ancestor. */

.help-panel-body .onb-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  color: var(--color-text);
}

.help-panel-body .onb-tip-icon {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 0.1rem;
}

.help-panel-body .onb-tip-body {
  flex: 1;
}

.help-panel-body .onb-tip-title {
  font-weight: 600;
  font-size: 0.82rem;
  margin-bottom: 0.15rem;
}

.help-panel-body .onb-tip-content {
  font-size: 0.8rem;
  color: var(--color-text);
}

.help-panel-body .onb-tip-dismiss {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.help-panel-body .onb-tip-dismiss:hover {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.help-panel-body .onb-tips-empty {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ── end migrated: platform/tools/onboarding/templates/partials/tips.html ── */

/* ── migrated: platform/tools/library/templates/library_librarian_queue.html ── */

.librarian-queue .ingest-tab.active {
  background: var(--color-primary, #4a6cf7);
  color: #fff;
}

/* ── end migrated: platform/tools/library/templates/library_librarian_queue.html ── */

/* ── migrated: platform/tools/system/templates/system_audit.html ── */

.system-audit .export-menu-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 0.875rem;
  color: var(--color-text);
  cursor: pointer;
}

.system-audit .export-menu-item:hover {
  background: var(--color-border-subtle);
}

/* ── end migrated: platform/tools/system/templates/system_audit.html ── */

/* ── migrated: platform/tools/library/templates/library_librarian_review.html ── */

.librarian-review .ingest-review-panels {
  display: flex;
  height: 55vh;
  min-height: 300px;
  gap: 0;
}

.librarian-review .ingest-panel-left {
  flex: 1;
  min-width: 200px;
  overflow: hidden;
}

.librarian-review .ingest-panel-right {
  flex: 1;
  min-width: 200px;
  overflow: hidden;
}

.librarian-review .ingest-resize-handle {
  width: 6px;
  cursor: col-resize;
  background: var(--color-border, #e2e2e2);
  flex-shrink: 0;
  transition: background 0.15s;
}

.librarian-review .ingest-resize-handle:hover,
.librarian-review .ingest-resize-handle.dragging {
  background: var(--color-primary, #4a6cf7);
}

/* Rendered markdown */
.librarian-review .md-rendered h1 { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.librarian-review .md-rendered h2 { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 0.4rem; }
.librarian-review .md-rendered h3 { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.3rem; }
.librarian-review .md-rendered p { margin: 0.4rem 0; }
.librarian-review .md-rendered ul,
.librarian-review .md-rendered ol { margin: 0.4rem 0; padding-left: 1.5rem; }
.librarian-review .md-rendered li { margin: 0.2rem 0; }
.librarian-review .md-rendered code { background: rgba(0,0,0,0.06); padding: 0.1rem 0.3rem; border-radius: var(--radius-xs); font-size: 0.85em; }
.librarian-review .md-rendered pre { background: rgba(0,0,0,0.04); padding: 0.75rem; border-radius: var(--radius-xs); overflow-x: auto; }
.librarian-review .md-rendered pre code { background: none; padding: 0; }
.librarian-review .md-rendered blockquote { border-left: 3px solid var(--color-border, #e2e2e2); padding-left: 0.75rem; color: var(--color-muted); margin: 0.5rem 0; }
.librarian-review .md-rendered a { color: var(--color-primary, #4a6cf7); }
.librarian-review .md-rendered table { border-collapse: collapse; margin: 0.5rem 0; }
.librarian-review .md-rendered th,
.librarian-review .md-rendered td { border: 1px solid var(--color-border, #e2e2e2); padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* Shimmer animation */
.librarian-review .ingest-shimmer {
  height: 8px;
  width: 60%;
  margin: 0 auto;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Keyframe name kept global — unique across repo. */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── end migrated: platform/tools/library/templates/library_librarian_review.html ── */

/* ── migrated: platform/core/templates/dashboard.html ── */

.dashboard .dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.dashboard .dashboard-grid .welcome-banner {
  grid-column: 1 / -1;
}

.dashboard .welcome-banner {
  padding: 1.5rem;
}

.dashboard .welcome-banner h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.dashboard .welcome-banner p {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.dashboard .widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}

.dashboard .widget-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin: 0;
}

.dashboard .widget-link {
  font-size: 0.75rem;
  color: var(--color-accent);
  text-decoration: none;
}

.dashboard .widget-link:hover {
  text-decoration: underline;
}

.dashboard .widget-empty {
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* My cases widget */
.dashboard .case-stage-group {
  padding: 0 1.25rem;
  margin-bottom: 0.75rem;
}

.dashboard .case-stage-group:last-child {
  margin-bottom: 0.75rem;
}

.dashboard .case-stage-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
}

.dashboard .case-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.dashboard .case-row a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
}

.dashboard .case-row a:hover {
  color: var(--color-accent);
}

.dashboard .case-meta {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.dashboard .case-service {
  font-size: 0.7rem;
  color: var(--color-muted);
  background: var(--color-bg);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-xs);
}

/* Activity widget */
.dashboard .activity-list {
  padding: 0 1.25rem 0.75rem;
  list-style: none;
}

.dashboard .activity-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--color-border);
}

.dashboard .activity-item:last-child {
  border-bottom: none;
}

.dashboard .activity-action {
  color: var(--color-text);
  font-weight: 500;
}

.dashboard .activity-case {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.78rem;
}

.dashboard .activity-case:hover {
  text-decoration: underline;
}

.dashboard .activity-who {
  color: var(--color-muted);
  font-size: 0.75rem;
}

.dashboard .activity-when {
  margin-left: auto;
  color: var(--color-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Team online widget */
.dashboard .online-list {
  padding: 0 1.25rem 0.75rem;
  list-style: none;
}

.dashboard .online-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  font-size: 0.85rem;
}

.dashboard .online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  flex-shrink: 0;
}

.dashboard .online-name {
  font-weight: 500;
  color: var(--color-text);
}

.dashboard .online-context {
  font-size: 0.75rem;
  color: var(--color-muted);
}

@media (max-width: 768px) {
  .dashboard .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ── end migrated: platform/core/templates/dashboard.html ── */

/* ── migrated: platform/tools/cases/templates/case_detail.html ── */

/* Case detail uses its own layout — remove main padding so header/tabs are flush */
html:has(body.case-detail-page),
body.case-detail-page {
  overflow: hidden;
  height: 100%;
}
body.case-detail-page .main {
  padding: 0;
  overflow: hidden;
}

.case-detail-page .presence-indicator {
  font-size: 0.75rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Assignee picker */
.case-detail-page .assignee-picker { position: relative; display: inline-block; }
.case-detail-page .assignee-trigger {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-muted);
}
.case-detail-page .assignee-trigger:hover { color: var(--color-text); }
.case-detail-page .assignee-caret { font-size: 0.65rem; margin-left: 0.15rem; }
.case-detail-page .assignee-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  margin-top: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}
.case-detail-page .assignee-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  text-align: left;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--color-text);
}
.case-detail-page .assignee-option:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.case-detail-page .assignee-option--active { font-weight: 600; color: var(--color-accent); }

/* ── Front conversations badge + dropdown ── */
.case-detail-page .fc-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.65rem;
}
.case-detail-page .fc-badge-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.case-detail-page .fc-badge-trigger:hover { color: var(--color-text); border-color: var(--color-text); }
.case-detail-page .fc-badge-icon { width: 0.9rem; height: 0.9rem; }
.case-detail-page .fc-badge-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 280px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 0.25rem 0;
}
.case-detail-page .fc-badge-dropdown[hidden] { display: none; }

/* ── Front conversations — rows shared by badge dropdown + sidebar panel ── */
.case-detail-page .fc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--color-border);
}
.case-detail-page .fc-row:last-child { border-bottom: none; }
.case-detail-page .fc-row:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.case-detail-page .fc-icon { width: 0.9rem; height: 0.9rem; flex-shrink: 0; color: var(--color-muted); }
.case-detail-page .fc-subject {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-detail-page .fc-subject--full {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.case-detail-page .fc-time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* ── Front conversations sidebar panel ── */
.case-detail-page .fc-panel {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.case-detail-page .fc-panel-heading {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.case-detail-page .fc-panel-count {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-muted);
}
.case-detail-page .fc-panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ── Make case detail fill viewport so content can stretch ── */
.case-detail-page .case-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Main content area (replaces tab-content) ── */
.case-detail-page #case-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.case-detail-page .case-main-padded {
  padding: 1.75rem 2rem;
  max-width: 900px;
}

/* ── Stage field (dropdown in details panel) ── */
.case-detail-page .detail-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.case-detail-page .detail-field-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
  min-width: 100px;
  flex-shrink: 0;
}
.case-detail-page .detail-field-value {
  flex: 1;
}
.case-detail-page .field-select {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.case-detail-page .field-select:focus {
  outline: none;
  border-color: var(--color-accent);
}
.case-detail-page .overview-layout {
  display: flex;
  gap: 0;
  height: 100%;
}
.case-detail-page .overview-fields {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem 2rem;
}
.case-detail-page .overview-resize {
  width: 1px;
  background: var(--color-border);
  flex-shrink: 0;
  cursor: col-resize;
  position: relative;
}
.case-detail-page .overview-resize::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 7px;
}
.case-detail-page .overview-resize:hover,
.case-detail-page .overview-resize.dragging {
  background: var(--color-accent);
}
.case-detail-page .overview-timeline {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.case-detail-page .overview-timeline-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 70px 0; /* space so last entries aren't hidden behind floating composer */
  min-height: 0;
}
.case-detail-page .overview-timeline-scroll.timeline-fading {
  opacity: 0;
}
.case-detail-page .overview-timeline-scroll.timeline-fade-in {
  animation: timelineFadeIn 0.28s ease-out;
}
@keyframes timelineFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Timeline (shared styles in main.css) ── */
.case-detail-page .timeline { padding: 0.75rem 1rem; }

/* ── Composer — case-specific overrides (shared styles in main.css) ── */
.case-detail-page .composer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 0.75rem 1rem;
  z-index: 10;
  background: linear-gradient(to bottom, transparent, rgb(252, 251, 254) 35%);
}
.case-detail-page .composer .composer-wrap {
  background: var(--color-surface) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 -2px 8px rgba(0,0,0,0.04);
}
.case-detail-page .composer--shared .composer-wrap {
  border-color: var(--color-warning, #e5a00d);
}
.case-detail-page .composer-editor {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  min-height: 1.4em;
  max-height: 300px;
  overflow-y: auto;
  color: var(--color-text);
}
.case-detail-page .composer-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--color-muted);
  pointer-events: none;
}
.case-detail-page .composer-editor--expanded {
  min-height: 120px;
}
.case-detail-page .composer-inline .composer-editor {
  flex: 1;
  min-height: 1.4em;
  padding: 0.55rem 0.75rem;
}
.case-detail-page .composer-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: 0.85rem;
  padding: 0.15rem;
  line-height: 1;
}
.case-detail-page .composer-expand-btn:hover { color: var(--color-text); }

/* ── Floating toolbar (appears on text selection) ── */
.case-detail-page .floating-toolbar {
  display: none;
  position: absolute;
  z-index: var(--z-modal);
  background: #1a1d27;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.35rem;
  gap: 0.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.case-detail-page .floating-toolbar.visible { display: flex; }
.case-detail-page .floating-toolbar .toolbar-btn {
  width: 28px;
  height: 26px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: #fff;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-detail-page .floating-toolbar .toolbar-btn:hover {
  background: rgba(255,255,255,0.15);
}

@media (max-width: 768px) {
  .case-detail-page .overview-layout {
    flex-direction: column;
    height: auto;
  }
  .case-detail-page .overview-fields {
    flex: none;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* ── end migrated: platform/tools/cases/templates/case_detail.html ── */

/* ── migrated: platform/tools/cases/templates/partials/tab_people.html ── */
/* Included only from case_detail.html; requires body.case-detail-page ancestor. */

.case-detail-page .people-panel { padding: 0; }

.case-detail-page .people-table {
  width: 100%;
  border-collapse: collapse;
}
.case-detail-page .people-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.case-detail-page .people-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
}
.case-detail-page .people-name { font-weight: 500; }
.case-detail-page .people-name a { color: var(--color-accent); text-decoration: none; }
.case-detail-page .people-name a:hover { text-decoration: underline; }
.case-detail-page .people-email { color: var(--color-muted); }

.case-detail-page .people-role-form { display: inline; }
.case-detail-page .people-role-select {
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.case-detail-page .people-add-section {
  padding: 1rem 0.75rem;
}
.case-detail-page .people-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.case-detail-page .people-add-fields {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.case-detail-page .people-add-fields .search-input {
  flex: 1;
  min-width: 140px;
}

/* ── end migrated: platform/tools/cases/templates/partials/tab_people.html ── */

/* ── migrated: platform/tools/cases/templates/partials/person_search_results.html ── */
/* HTMX-swapped into #person-search-results inside tab_people; requires body.case-detail-page ancestor. */

.case-detail-page .person-search-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
}
.case-detail-page .person-search-item {
  border-bottom: 1px solid var(--color-border);
}
.case-detail-page .person-search-item:last-child { border-bottom: none; }
.case-detail-page .person-search-btn {
  display: flex;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.85rem;
}
.case-detail-page .person-search-btn:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.case-detail-page .person-search-name { font-weight: 500; }
.case-detail-page .person-search-email { color: var(--color-muted); font-size: 0.8rem; }
.case-detail-page .person-search-empty {
  font-size: 0.8rem;
  color: var(--color-muted);
  padding: 0.25rem 0;
}
.case-detail-page .person-selected {
  font-size: 0.85rem;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── end migrated: platform/tools/cases/templates/partials/person_search_results.html ── */

/* ── migrated: platform/tools/cases/templates/case_new.html ── */

.case-new-page .doc-requirements { margin-top: 1rem; }
.case-new-page .doc-requirements h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.case-new-page .doc-check-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.case-new-page .doc-check-label input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.case-new-page .doc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--color-border, #ddd);
  color: var(--color-muted, #888);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 600;
  cursor: help;
  flex-shrink: 0;
  margin-left: auto;
}
.case-new-page .child-cert-count { margin-top: 0.75rem; padding-left: 1.5rem; }

/* ── end migrated: platform/tools/cases/templates/case_new.html ── */

/* ── migrated: platform/tools/people/templates/person_profile.html ── */

.person-profile-page .profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.person-profile-page .profile-info { flex: 1; min-width: 0; }

.person-profile-page .avatar-edit {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
}
.person-profile-page .avatar-edit__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
  border-radius: 50%;
}
.person-profile-page .avatar-edit:hover .avatar-edit__overlay,
.person-profile-page .avatar-edit:focus-visible .avatar-edit__overlay { opacity: 1; }

.person-profile-page .avatar-dropzone {
  display: block;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.person-profile-page .avatar-dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-bg);
}
.person-profile-page .avatar-dropzone__preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 2rem;
}
.person-profile-page .avatar-dropzone__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person-profile-page .avatar-dropzone__hint {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0;
}
.person-profile-page .avatar-dropzone__choose {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
}
.person-profile-page .avatar-dropzone__choose input { display: none; }

.person-profile-page .profile-info h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.person-profile-page .profile-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.25rem;
}
.person-profile-page .profile-meta span { white-space: nowrap; }

.person-profile-page .profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .person-profile-page .profile-grid { grid-template-columns: 1fr; }
}
.person-profile-page .profile-section { min-width: 0; }
.person-profile-page .profile-section-full { grid-column: 1 / -1; }

.person-profile-page .section-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.person-profile-page .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.85rem;
}
.person-profile-page .detail-label {
  color: var(--color-muted);
  flex-shrink: 0;
  margin-right: 1rem;
}
.person-profile-page .detail-value { text-align: right; }

.person-profile-page .action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.person-profile-page .profile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.person-profile-page .form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .person-profile-page .form-row-2 { grid-template-columns: 1fr; }
}

.person-profile-page .access-grid {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: 0;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.person-profile-page .access-grid-header {
  background: var(--color-bg);
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.person-profile-page .access-grid-cell {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
}
.person-profile-page .access-grid-cell:last-child,
.person-profile-page .access-grid-header:last-child { border-bottom: none; }
.person-profile-page .access-grid-module {
  font-weight: 500;
  background: var(--color-bg);
}

/* ── end migrated: platform/tools/people/templates/person_profile.html ── */

/* Login 2FA — editorial challenge page (migrated from Two-factor - GMID.html) */

.auth-login-2fa-page .auth-device-card {
  margin-top: 0.5rem;
  padding: 1rem 1.15rem;
  background: rgba(253, 250, 243, 0.72);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-auth-card);
  box-shadow: 0 12px 30px -18px rgba(60, 60, 36, 0.25);
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.auth-login-2fa-page .auth-device-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.auth-login-2fa-page .auth-device-row svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--auth-accent);
}
.auth-login-2fa-page .auth-device-row__label {
  display: block;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  margin-bottom: 3px;
}
.auth-login-2fa-page .auth-device-row__val {
  display: block;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--auth-ink-strong);
  word-break: break-all;
}
.auth-login-2fa-page .auth-device-row__sep {
  height: 1px;
  background: color-mix(in srgb, var(--auth-ink) 16%, transparent);
}

.auth-login-2fa-page .auth-methods {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 1.05rem 1.25rem;
  background: rgba(253, 250, 243, 0.55);
  border: 1px dashed var(--auth-rule-strong);
  border-radius: var(--radius-auth-card);
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.auth-login-2fa-page .auth-methods li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  margin: 0;
  padding: 0;
}
.auth-login-2fa-page .auth-methods__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-accent);
  flex-shrink: 0;
}
.auth-login-2fa-page .auth-methods__dot--muted { background: var(--auth-rule-strong); }
.auth-login-2fa-page .auth-methods__name {
  font-family: var(--font-sans, inherit);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--auth-ink-strong);
  font-weight: 500;
}
.auth-login-2fa-page .auth-methods li small {
  margin-left: auto;
  font-family: var(--auth-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--auth-ink-soft);
}

.auth-login-2fa-page .auth-code-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.auth-login-2fa-page .auth-code-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.auth-login-2fa-page .auth-code-field label {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--auth-ink-soft);
}
.auth-login-2fa-page .auth-field-hint {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.auth-login-2fa-page .auth-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--auth-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--auth-success) 60%, transparent);
  animation: auth-pulse 1.8s ease-out infinite;
}
@keyframes auth-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--auth-success) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--auth-success) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--auth-success) 0%, transparent); }
}

.auth-login-2fa-page .auth-code-cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.55rem;
}
.auth-login-2fa-page .auth-cell {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--auth-card);
  border: 1.5px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
}
.auth-login-2fa-page .auth-cell input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--auth-mono);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  color: var(--auth-ink-strong);
  outline: none;
  caret-color: var(--auth-accent);
}
.auth-login-2fa-page .auth-cell--filled {
  background: #fff;
  border-color: color-mix(in srgb, var(--auth-accent) 35%, var(--auth-card-edge));
}
.auth-login-2fa-page .auth-cell--active,
.auth-login-2fa-page .auth-cell:focus-within {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 18%, transparent);
  background: #fff;
}

.auth-login-2fa-page .auth-backup-input {
  display: flex;
  background: var(--auth-card);
  border: 1.5px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-login-2fa-page .auth-backup-input input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0.95rem 1rem;
  font-family: var(--auth-mono);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--auth-ink-strong);
  outline: none;
  text-transform: uppercase;
}
.auth-login-2fa-page .auth-backup-input:focus-within {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 18%, transparent);
}
.auth-login-2fa-page .auth-backup-hint {
  margin: 0.5rem 0 0;
  font-family: var(--auth-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--auth-ink-soft);
  min-height: 1em;
}
.auth-login-2fa-page .auth-backup-hint--warn {
  color: var(--auth-danger);
}

.auth-login-2fa-page .auth-checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 13px;
  color: var(--auth-ink-soft);
  cursor: pointer;
  user-select: none;
  line-height: 1.45;
  margin: 0.25rem 0 0.5rem;
}
.auth-login-2fa-page .auth-checkbox input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--auth-rule-strong);
  border-radius: var(--radius-xs);
  background: var(--auth-card);
  cursor: inherit;
  position: relative;
  transition: all 0.15s;
  margin-top: 1px;
  flex-shrink: 0;
}
.auth-login-2fa-page .auth-checkbox input:checked {
  background: var(--auth-accent);
  border-color: var(--auth-accent);
}
.auth-login-2fa-page .auth-checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.auth-login-2fa-page .auth-checkbox small {
  display: block;
  font-size: 11.5px;
  color: var(--auth-muted);
  margin-top: 2px;
}

.auth-login-2fa-page .auth-alt-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: -0.25rem;
}
.auth-login-2fa-page .auth-alt {
  appearance: none;
  background: var(--auth-card);
  border: 1px solid var(--auth-card-edge);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  font-family: inherit;
  color: inherit;
}
.auth-login-2fa-page .auth-alt:hover {
  border-color: var(--auth-accent);
  background: #fff;
}
.auth-login-2fa-page .auth-alt__ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--auth-accent) 10%, var(--auth-card));
  color: var(--auth-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-login-2fa-page .auth-alt__ico svg { width: 17px; height: 17px; }
.auth-login-2fa-page .auth-alt__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.auth-login-2fa-page .auth-alt__title {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--auth-ink-strong);
}
.auth-login-2fa-page .auth-alt__sub {
  font-family: var(--auth-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-ink-soft);
  margin-top: 1px;
}
.auth-login-2fa-page .auth-alt__go {
  color: var(--auth-ink-soft);
  transition: transform 0.2s, color 0.15s;
  flex-shrink: 0;
}
.auth-login-2fa-page .auth-alt:hover .auth-alt__go {
  color: var(--auth-accent);
  transform: translateX(3px);
}

.auth-login-2fa-page .auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.4rem 0.25rem;
  color: var(--auth-ink-soft);
  text-decoration: none;
  font-size: 13px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.auth-login-2fa-page .auth-back-link svg { transition: transform 0.2s; }
.auth-login-2fa-page .auth-back-link:hover { color: var(--auth-accent); }
.auth-login-2fa-page .auth-back-link:hover svg { transform: translateX(-3px); }

.auth-login-2fa-page .auth-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--auth-rule-strong);
  font-size: 12px;
  color: var(--auth-ink-soft);
  text-align: center;
}
.auth-login-2fa-page .auth-sheet__foot a {
  color: var(--auth-ink-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--auth-rule-strong);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.auth-login-2fa-page .auth-sheet__foot a:hover {
  color: var(--auth-accent);
  border-bottom-color: var(--auth-accent);
}

.auth-login-2fa-page .error {
  font-family: var(--auth-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--auth-danger);
  background: color-mix(in srgb, var(--auth-danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--auth-danger) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}
.auth-login-2fa-page .error p { margin: 0; }

/* ── end migrated: platform/core/templates/login_2fa.html ── */

/* ── /system/status dashboard ── */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}
.status-grid > .card {
  padding: var(--space-5);
}
.status-grid .card-title {
  margin-bottom: var(--space-3);
}
.status-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}
.status-dl dt {
  color: var(--color-muted);
  font-size: var(--font-sm);
}
.status-dl dd {
  margin: 0;
  font-size: var(--font-sm);
}
.status-line {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-base);
}
.status-line--ok { color: var(--color-success); }
.status-line--bad { color: var(--color-danger); }
.status-big {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: 600;
}
.status-hint {
  margin: var(--space-1) 0 0;
  color: var(--color-muted);
  font-size: var(--font-xs);
}
.status-card-subtitle {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-size: var(--font-sm);
}
.status-errors {
  margin-top: var(--space-4);
  padding: var(--space-5);
}
.status-errors .data-table th,
.status-errors .data-table td {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-sm);
}
.status-errors-count {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0 var(--space-2);
  background: var(--color-surface-muted);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--font-xs);
  text-align: center;
}
.status-modal-dl {
  margin-bottom: var(--space-5);
}
.status-modal-subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-sm);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.status-modal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.status-modal-list li {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--color-border-subtle);
}
.status-modal-list li:last-child {
  border-bottom: none;
}
/* ── end /system/status ── */

/* ══════════════════════════════════════════════════════════════════════════════
   DOCUMENTS VIEW (#174) — activity-led document list at /cases/docs.
   Activity row, date-bucket grouping, filter chips, popover menu, pagination.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Couple avatar tints (activity rows + grouped headers) ─────────────────── */
/* Per-party tints — bespoke palette, not part of the canonical token set.
   Kept as literals because they're semantically tied to "party A/B avatar". */

.couple-avatar--a { background: var(--couple-a-bg, #dde1f3); color: var(--couple-a-fg, #3b4790); }
.couple-avatar--b { background: var(--couple-b-bg, #f3ddea); color: var(--couple-b-fg, #903b71); }
.couple-avatar--c { background: var(--couple-c-bg, #ddf3e7); color: var(--couple-c-fg, #1a8c42); }
.couple-avatar--d { background: var(--couple-d-bg, #f3ecdd); color: var(--couple-d-fg, #905a3b); }

/* ── Activity-led row ──────────────────────────────────────────────────────── */

.activity {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}

.activity-verb {
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  font-size: var(--font-base);
  white-space: nowrap;
}

/* Activity row layout — actor name leads, verb tag follows inline.
   Filename / quote drops to a second line below. The bucket header
   already names the document, so we don't repeat the requirement
   label here — what's informative per row is who did it and what
   specifically. */
.activity-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.activity-actor {
  color: var(--color-text);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Indent docs row content so the verb-tag/actor line aligns with the
   bucket header's requirement label above it (which sits past the
   collapse caret). Without this the rows hug the column's left edge
   while the header indents — a small visual jolt every time a bucket
   opens. Also tightens vertical padding to match the bucket-row rhythm
   so the open bucket reads as one block. */
.docs-row td {
  padding: var(--space-3) var(--space-5);
}

.docs-row td:first-child {
  padding-left: calc(var(--space-5) + 14px + var(--space-2));
}

.activity-verb--upload   { color: var(--color-info); }
.activity-verb--replace  { color: var(--color-info); }
.activity-verb--comment  { color: var(--color-accent); }
.activity-verb--message  { color: var(--color-accent); }
.activity-verb--flag     { color: var(--color-danger); }
.activity-verb--approve  { color: var(--color-success); }

.activity-time,
.row-time {
  color: var(--color-muted);
  font-size: var(--font-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.activity-sep {
  color: var(--color-border);
}

.activity-what {
  color: var(--color-subtle);
  font-weight: var(--weight-regular);
  font-size: var(--font-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.activity-quote {
  display: block;
  margin-top: 2px;
  color: var(--color-subtle);
  font-size: var(--font-sm);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── List-view layout manager (responsive columns + resize) ──────────────────
   When a list-view table opts in via data-lv-layout + table[data-lv-resizable]
   + <colgroup> with data-col-key/priority/min-width, the layout JS pins
   per-column widths and auto-hides low-priority columns when the host
   is too narrow to fit them all. These rules cover:
     - table-layout: fixed for stable column widths
     - per-cell hide via .lv-col-hidden
     - resize handle look + drag affordance
*/

.lv-host[data-lv-layout] table[data-lv-resizable] {
  table-layout: fixed;
}

/* ── List-view live-updates pill (#268) ─────────────────────────────────────
   Floating overlay anchored top-center inside .table-wrap. Mounted by
   static/js/list_view_realtime.js on pages whose host carries
   data-lv-realtime-scope. position:absolute means appearing/disappearing
   never reflows the table — the pill announces itself without nudging
   the data the user is reading. Accent-coloured so the eye actually
   catches it; one-shot pulse on first appearance to sell the moment.
   Click → re-fetch the current URL via the framework's refresh path. */

.lv-host[data-lv-realtime-scope] .table-wrap {
  /* Anchor for the pill's position: absolute. Scoped to realtime-opt-in
     hosts so unrelated tables aren't affected. */
  position: relative;
}

.lv-realtime-pill {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  /* --z-dropdown sits above the table's sticky <th>s (which use
     --z-sticky); without this, ths painted later in DOM order would
     occlude the pill at the same coordinate. */
  z-index: var(--z-dropdown, 50);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent);
  /* Mirrors .btn-primary's white-on-accent text token. */
  color: var(--color-surface);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  /* Resting hidden state: nudged up + invisible. .--in mounts the pill
     into its rest position with a slight overshoot via the spring-y
     cubic-bezier — gives the entrance a sense of physicality. */
  transform: translate(-50%, -0.75rem);
  opacity: 0;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.18s ease-out;
}

.lv-realtime-pill[hidden] {
  display: none;
}

.lv-realtime-pill--in {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* One-shot ring pulse on first appearance (count crosses 0 → 1). Draws
   the eye to the announcement, then settles. JS strips the class after
   the keyframe so the next 1 → 2 increment doesn't re-trigger it (only
   the first emergence is the surprising moment worth animating). */
.lv-realtime-pill--pulse {
  animation: lv-realtime-pulse 0.6s ease-out;
}

@keyframes lv-realtime-pulse {
  0% {
    box-shadow:
      var(--shadow-md),
      0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  100% {
    box-shadow:
      var(--shadow-md),
      0 0 0 14px color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
}

.lv-realtime-pill-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.lv-realtime-pill:hover {
  background: var(--color-accent-hover);
}

.lv-realtime-pill:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lv-realtime-pill--warning {
  background: var(--color-warning-soft, #fef3c7);
  color: var(--color-warning-text, #92400e);
}

.lv-realtime-pill--warning:hover {
  background: var(--color-warning-soft-hover, #fde68a);
}

/* The platform-wide `@media (max-width: 900px) { .data-table { display:
   block; overflow-x: auto } }` rule converts every data table into a
   horizontally-scrollable block on small screens. That predates the
   layout manager and now conflicts with it: the manager has already
   sized columns to fit, but the .data-table picks up its own
   scrollbar anyway. Override for layout-managed tables only. */
@media (max-width: 900px) {
  .lv-host[data-lv-layout] table[data-lv-resizable].data-table {
    display: table;
    overflow-x: hidden;
  }
}

.lv-host[data-lv-layout] table[data-lv-resizable] th,
.lv-host[data-lv-layout] table[data-lv-resizable] td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Single per-cell hide token. Set by the layout manager on every
   <col>, <th>, and <td> for an auto-hidden column. */
.lv-col-hidden {
  display: none !important;
}

/* Resize handle — sits at the right edge of a <th>, captures drags. */
.lv-host[data-lv-layout] table[data-lv-resizable] thead th {
  position: relative;
}

/* The hit zone is intentionally wide (~14px) so the user does not have
   to hit the exact pixel. The visible tick is rendered as a 1px
   pseudo-element pinned to the column boundary so the affordance stays
   thin and unobtrusive — only the invisible parent grows. */
.lv-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: var(--z-sticky);
}

/* Subtle always-on tick at the column edge so the user can find the
   drag zone. Half-height vertical line at low contrast — reads as a
   column separator. On hover it grows to full height and brightens
   to the accent colour so the affordance is unmistakable. */
.lv-col-resizer::after {
  content: "";
  position: absolute;
  top: 30%;
  bottom: 30%;
  right: 0;
  width: 1px;
  background: var(--color-border);
  transition: background var(--transition-fast),
    top var(--transition-fast),
    bottom var(--transition-fast),
    width var(--transition-fast);
}

.lv-col-resizer:hover::after,
.lv-col-resizer.is-dragging::after {
  background: var(--color-accent);
  top: 0;
  bottom: 0;
  width: 2px;
}

/* Suppress hover affordances on the rest of the page during a drag so
   the cursor stays col-resize even over rows / popovers. */
body.lv-resizing,
body.lv-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* Inside the layout-managed Case column, the responsive_text renderer
   needs to know the *available* width for the couple name. By default
   `.case-ref` and `.couple-row` are inline-flex and content-sized —
   they grow to fit whatever the renderer writes in, defeating the
   measurement. Force them to fill the cell and let the inner
   couple-row span flex-shrink to 0; the renderer then reads a
   well-defined width and picks the right tier. */
.lv-host[data-lv-layout] td[data-col-key="case"] .case-ref {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
}

.lv-host[data-lv-layout] td[data-col-key="case"] .couple-row {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.lv-host[data-lv-layout] td[data-col-key="case"] .couple-row > span {
  display: block;
  min-width: 0;
}

/* Auto-hidden columns pill — becomes visible when the layout manager
   has auto-hidden columns. The native title attribute carries the
   list of hidden column labels for hover. The `--header` modifier
   anchors it inside .table-wrap, floating over the right edge of the
   thead row so the indicator sits where columns ran out of space. */
.lv-hidden-cols-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-dim);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-muted);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  cursor: help;
  user-select: none;
}

.lv-hidden-cols-pill[hidden] {
  display: none;
}

.lv-hidden-cols-pill [data-count] {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Required so the absolutely-positioned pill anchors here and not at
   the document root. Scoped to layout-managed hosts so non-list-view
   tables (audit_table etc.) don't gain an unexpected positioning context. */
.lv-host[data-lv-layout] .table-wrap {
  position: relative;
  /* The layout manager already constrains every column's width to fit
     the wrap's content box, so the wrap's default `overflow-x: auto`
     is just a fallback that never should fire. Hide it explicitly to
     silence rounding-edge-case scrollbars that flicker in/out as the
     manager packs and re-packs at narrow viewports. !important is
     needed to win against the base `.table-wrap { overflow-x: auto }`
     that otherwise leaks through under pre-existing per-page rules. */
  overflow-x: hidden !important;
  /* Same spec quirk as on the host: setting overflow-x non-visible
     silently promotes overflow-y to `auto`, giving the wrap its own
     vertical scrollbar in addition to the body's intended scroll.
     Force `visible` to keep the table tall in flow; the body's
     overflow-y: auto is the single scroll authority. */
  overflow-y: visible;
}

/* Layout-managed host stays `overflow: visible` (inherited from the
   base `.lv-host` rule) so absolutely-positioned popovers in the
   toolbar — Saved Views, plus any future popover-style controls —
   can extend below the toolbar without being clipped. The shell
   body inside handles its own `overflow-x: hidden` and `overflow-y:
   auto` for the internal scroll, and `.table-wrap` clips its own
   horizontal overflow. The host itself doesn't need any clipping
   rules. */

/* Header-anchored variant — pinned to the right edge of the thead row.
   z-index above the sticky thead so it doesn't disappear under the
   header background when the list scrolls vertically. */
.lv-hidden-cols-pill--header {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  z-index: var(--z-dropdown);
}

/* ── Case-ref cell (case id chip + couple) ─────────────────────────────────── */

.case-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* ── Date-bucket header (when grouped) ─────────────────────────────────────── */

.bucket-row td {
  background: var(--color-surface-dim);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bucket-row--toggle {
  cursor: pointer;
  user-select: none;
}

.bucket-row--toggle:hover td {
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface-dim));
  color: var(--color-text-strong);
}

.bucket-row td .bucket-count {
  margin-left: var(--space-2);
  color: var(--color-muted);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0;
}

.bucket-row td .bucket-latest {
  margin-left: var(--space-2);
  color: var(--color-subtle);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--font-xs);
  font-variant-numeric: tabular-nums;
}

/* Document bucket header — per-column cells aligned with rows below.
   The activity cell keeps the uppercase section-divider treatment;
   other cells render in normal row style so the data is readable. */
.bucket-row--document td {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  font-size: var(--font-sm);
}
.bucket-row--document td:first-child {
  font-weight: var(--weight-semibold);
  color: var(--color-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-xs);
}

.bucket-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: var(--space-2);
  transition: transform var(--transition-normal);
  color: var(--color-muted);
}

.bucket-caret--closed {
  transform: rotate(-90deg);
}

.bucket-collapse-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-muted);
  transition: color var(--transition-normal);
}

.bucket-collapse-all:hover {
  color: var(--color-text);
}

/* ── Filter chip row (active filters under the toolbar) ────────────────────── */

.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-dim);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
  font-size: var(--font-sm);
}

.filter-chips-label {
  color: var(--color-muted);
  margin-right: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
  font-size: var(--font-xs);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.chip--view {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.chip-key {
  color: var(--color-muted);
  font-weight: var(--weight-normal);
}

.chip-close {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.chip-close:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.chips-clear {
  margin-left: auto;
  background: var(--color-surface-dim);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: inherit;
  transition: background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.chips-clear:hover {
  background: var(--color-bg);
  border-color: var(--color-muted);
  color: var(--color-text-strong);
}

/* ── Saved-views popover menu ──────────────────────────────────────────────── */

.menu-host {
  position: relative;
  display: inline-block;
}

.menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 240px;
  z-index: var(--z-dropdown);
  padding: var(--space-2);
}

.menu-heading {
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text);
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
}

.menu-item:hover {
  background: var(--color-hover);
}

.menu-item--active {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.menu-count {
  margin-left: auto;
  color: var(--color-muted);
  font-size: var(--font-xs);
  font-variant-numeric: tabular-nums;
}

.menu-divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) 0;
}

/* ── Pagination footer (extends existing .table-footer) ────────────────────── */

.table-footer-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.page-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  height: 28px;
  min-width: 28px;
  padding: 0 var(--space-3);
  font-size: var(--font-sm);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--color-text);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.page-btn[disabled] {
  color: var(--color-muted);
  cursor: not-allowed;
}

.page-btn--active {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}

.page-btn--active[disabled] {
  color: var(--color-surface);
}

/* ── Toolbar narrow mode — search collapse ───────────────────────────────────

   Below 1400px the documents toolbar can't fit a 220px search alongside
   all filter dropdowns. Collapse to a 32px icon that re-expands on
   hover, focus, or while typing — keeps the toolbar single-row without
   losing the affordance.

   Filter selects intentionally do NOT get a forced compression rule.
   The existing `.toolbar--no-wrap .filter-select { max-width: 11rem }`
   plus default flex-shrink lets each filter shrink to its content's
   min-width and truncate the label with ellipsis ("Updated" → "Upda").
   That gracefully degrades from full label → truncated label as the
   toolbar tightens, without the abrupt chevron-only flip we tried
   earlier (which felt aggressive even when there was still room).
*/
@media (max-width: 1400px) {
  .toolbar .search-input--collapsible {
    width: var(--space-8);
    /* Override `.search-input { min-width: 200px }` — without this the
       width:32px collapse never takes effect, the field stays at the
       200px floor and just hides its text. */
    min-width: var(--space-8);
    padding: 0 0 0 var(--space-8);
    cursor: pointer;
    color: transparent;
  }
  .toolbar .search-input--collapsible::placeholder {
    color: transparent;
  }
  .toolbar .search-input--collapsible:hover,
  .toolbar .search-input--collapsible:focus,
  .toolbar .search-input--collapsible:not(:placeholder-shown) {
    width: 220px;
    min-width: 220px;
    padding: 0 var(--space-4) 0 var(--space-8);
    cursor: text;
    color: var(--color-text);
  }
  .toolbar .search-input--collapsible:hover::placeholder,
  .toolbar .search-input--collapsible:focus::placeholder {
    color: var(--color-muted);
  }
}
/* ── end Documents view (#174) ── */

/* ── List-view framework (#266) ──────────────────────────────────────────────
   Components are namespaced .lv-*. Consumers compose their own page shell
   (see /cases/docs in cases_docs.html for the canonical layout).
*/

/* List-view host wrapper. Override .card's overflow:hidden so absolutely-
   positioned popovers (saved-views, columns picker) inside the toolbar
   can escape the card's bounds. The body div handles its own scroll. */
.lv-host {
  overflow: visible;
}

/* Internal scroll shell — bounds the card to the viewport, lets the
   inner body div flex-grow and scroll vertically. With this in place
   the table's `position: sticky` thead anchors to the body container
   instead of the viewport, so headers stay put as rows scroll. The
   sticky footer-summary anchors the same way, sitting at the body's
   bottom. The toolbar sits above the body (flex: 0 0 auto) so it never
   scrolls. The hidden-cols pill, anchored to .table-wrap inside the
   body, scrolls naturally with the table content as designed.

   `12rem` is the rough chrome above the card on the documents view —
   app header + page title + spacing. If the viewport is shorter than
   that, max-height fails open (card can grow taller; page falls back
   to ordinary scroll). */
.lv-host[data-lv-layout] {
  display: flex;
  flex-direction: column;
  /* Explicit height (not max-height): with `max-height` and body's
     `flex-basis: 0`, the container's natural height collapses to just
     the toolbar (body contributes zero), so the body never gets any
     allocated space and the rows vanish. Setting `height` directly
     gives the flex container a definite size and the body fills the
     remaining axis. `min-height` is the fallback for very short
     viewports (page scrolls naturally rather than the card going to
     a negative size).

     The `calc()` is a conservative first-paint fallback before JS
     measures — after the layout manager runs `setHostHeight()` (in
     list_view_layout.js) the host gets an exact pixel `height` set
     inline, computed from
     `innerHeight - host.getBoundingClientRect().top - 24px`. The
     CSS undershoot here is intentional: a slight gap below the card
     for the first frame is invisible, but a slight overshoot triggers
     the page scrollbar to flash before JS shrinks the host. */
  height: calc(100vh - 11rem);
  min-height: 400px;
}

.lv-host[data-lv-layout] > form.toolbar,
.lv-host[data-lv-layout] > .toolbar {
  flex: 0 0 auto;
}

.lv-host[data-lv-layout] [id^="lv-shell-body-"] {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Flex-column inside the body so the footer can be pushed to the
     bottom via `margin-top: auto` when content is short. Sticky still
     handles the scroll case (footer rides at the bottom of the
     scroll viewport while the body scrolls). */
  display: flex;
  flex-direction: column;
}

.lv-host[data-lv-layout] [id^="lv-shell-body-"] > .lv-footer {
  /* `!important` because the body uses flex; without it some baseline
     `.lv-footer` margin or the framework's component CSS can overrule
     the auto. The auto only does work when there's spare flex space
     above the footer (i.e. content shorter than body); when content
     is taller, it's a no-op and the footer flows naturally before
     `position: sticky` takes over for scroll. */
  margin-top: auto !important;
}

/* Filter builder modal — built on the design-system .modal-* primitives
   (see "Modal" section). The width override here is the only bespoke
   shell rule: condition rows (field × op × value × remove) need more
   than --lg's 720px to breathe. The body's flex / overflow / padding
   come from .modal-body. */

.lv-filter-builder-panel {
  width: min(880px, 95vw);
}

/* Filter section — uppercase tracked label, condition rows below,
   then a "+ Add condition" button. Two sections per modal: All (AND)
   and Any (OR). */

.lv-filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lv-filter-section + .lv-filter-section {
  margin-top: var(--space-4);
}

.lv-filter-section-title {
  margin: 0;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lv-filter-section-title strong {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.lv-filter-section-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lv-filter-section-rows:empty {
  display: none;
}

.lv-filter-add {
  align-self: flex-start;
}

/* Save row — name input + Shared toggle. Sits flush left in the footer;
   actions (Preview/Save) anchor right. */

.lv-filter-save-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
}

.lv-filter-name-input {
  flex: 1 1 auto;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font: inherit;
  font-size: var(--font-sm);
  color: var(--color-text);
  min-width: 0;
}

.lv-filter-name-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

/* Visible "circle → filled" toggle for the Shared checkbox. The native
   input is positioned over the circle so click reaches it but the
   visual is the styled circle. */
.lv-filter-shared-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.lv-filter-shared-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lv-filter-shared-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* 1px hairline border — `1px` is exempt-as-structural per the
     design-system rules. */
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: background var(--transition-fast),
    border-color var(--transition-fast);
}

.lv-filter-shared-toggle:has(input:checked) .lv-filter-shared-circle {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.lv-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Condition row — field × op × value × remove. */

.lv-filter-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(180px, 2fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.lv-filter-row-remove {
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-lg);
  line-height: 1;
  border-radius: var(--radius-sm);
}

.lv-filter-row-remove:hover {
  color: var(--color-text);
  background: var(--color-surface-dim);
}

/* Columns modal — built on the design-system .modal-* primitives. The
   panel sizes to the natural width of its content (pill row), so a
   5-column list view stays compact and a 12-column one expands up to
   the viewport cap. `fit-content` resolves to max-content of the
   children, clamped by max-width. min-width keeps the chrome readable
   when there are very few columns. */

.lv-columns-modal-panel {
  width: fit-content;
  max-width: 95vw;
  min-width: min(420px, 95vw);
}

/* The picker form inside the modal panel drops its own width
   constraints — modal-body provides padding/scroll, the panel's
   fit-content sizing absorbs the pill row. */
.lv-columns-modal-panel .lv-columns-picker {
  min-width: 0;
  max-width: none;
  padding: 0;
}

/* Single Done button right-aligns instead of taking the modal-footer
   default justify-content: space-between's leftward placement. */
.lv-columns-modal-panel .modal-footer {
  justify-content: flex-end;
}

/* Saved-views popup */

.lv-saved-views {
  display: flex;
  flex-direction: column;
  min-width: 280px;
}

.lv-saved-views-error {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-danger);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-xs);
}

.lv-saved-views-section {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.lv-saved-views-section:last-of-type { border-bottom: 0; }

.lv-saved-views-heading {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lv-saved-views-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lv-saved-views-list li {
  display: flex;
  align-items: stretch;
}

.lv-saved-views-row {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-base);
  color: var(--color-text);
}
.lv-saved-views-row:hover { background: var(--color-hover); }

.lv-saved-views-label {
  font-weight: var(--weight-medium);
}

.lv-saved-views-shared-tag {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--font-xs);
  color: var(--color-muted);
  font-weight: var(--weight-normal);
}

.lv-saved-views-desc {
  font-size: var(--font-xs);
  color: var(--color-muted);
}

.lv-saved-views-delete {
  align-self: stretch;
  width: 32px;
  background: transparent;
  border: 0;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--font-base);
  line-height: 1;
}
.lv-saved-views-delete:hover {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  color: var(--color-danger);
}

.lv-saved-views-empty {
  padding: var(--space-3) var(--space-4);
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-muted);
}

/* Columns picker — pill-row variant.

   Renders configured columns as draggable pills inside the popover.
   Drag a pill (from the grip) to reorder; click the toggle on the
   right to flip visibility. Order persists in
   `localStorage["lv-order-{scope}"]`; visibility persists in the
   existing `{scope}_columns` cookie via the form's hx-post. */

.lv-columns-picker {
  min-width: 360px;
  max-width: 520px;
  padding: var(--space-3) var(--space-4);
}

.lv-columns-picker-title {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lv-columns-picker-hint {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-xs);
  color: var(--color-subtle);
}

.lv-columns-picker-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lv-col-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-dim);
  border: 1px solid var(--color-border);
  font-size: var(--font-sm);
  color: var(--color-text);
  cursor: grab;
  user-select: none;
  transition: background var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.lv-col-pill:hover {
  border-color: var(--color-muted);
}

.lv-col-pill--hidden {
  opacity: 0.55;
  background: transparent;
  border-style: dashed;
}

.lv-col-pill--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

/* Drop indicator — a 2px accent-coloured bar on the leading or
   trailing edge of the hovered pill. Layered via ::before / ::after
   so we don't disturb the pill's own padding/border. */
.lv-col-pill--drop-before::before,
.lv-col-pill--drop-after::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.lv-col-pill--drop-before::before { left: -5px; }
.lv-col-pill--drop-after::after { right: -5px; }

.lv-col-pill-grip {
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  cursor: grab;
}

.lv-col-pill-label {
  font-weight: var(--weight-medium);
}

.lv-col-pill-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.lv-col-pill-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.lv-col-pill-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.lv-col-pill-toggle:has(input:checked) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent, #fff);
}

.lv-col-pill-toggle:has(input:checked) .lv-col-pill-check {
  opacity: 1;
}

/* Legacy `.lv-columns-picker-row` selector retained for any consumer
   still rendering the checkbox-list variant; safe no-op when the new
   pill template is in use. */
.lv-columns-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  cursor: pointer;
  font-size: var(--font-sm);
}

/* Chip — advanced (custom filter) variant */

.chip--advanced {
  border-style: dashed;
}
.chip-key--button {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Group-by control */

/* Sort header */

.lv-sort-th-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Match the th's uppercase / letter-spacing rhythm so sortable and
     non-sortable headers read as the same row visually. font: inherit
     above carries weight + size, but text-transform and letter-spacing
     are split off by the user-agent button reset on some browsers. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color var(--transition-normal);
}

.lv-sort-th-btn:hover {
  color: var(--color-text);
}

.lv-sort-th--active .lv-sort-th-btn {
  color: var(--color-text-strong);
}

.lv-sort-th-glyph {
  font-size: var(--font-xs);
  color: var(--color-muted);
}

/* Search input */

.lv-search-input {
  background: var(--color-surface-dim);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--font-sm);
  min-width: 220px;
}
.lv-search-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

/* Footer summary */

.lv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-dim);
  font-size: var(--font-xs);
  color: var(--color-muted);
  position: sticky;
  bottom: 0;
  z-index: var(--z-base);
  /* Sticky child can escape the parent .card overflow clip in Chrome/Safari
     when promoted to its own compositing layer — match the card radius so
     the bottom corners stay rounded. */
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.lv-footer-count {
  color: var(--color-muted);
  font-weight: var(--weight-medium);
}

.lv-footer-num {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.lv-footer-sep {
  margin: 0 var(--space-1);
  color: var(--color-subtle);
}

.lv-footer-totals {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
}

.lv-footer-total-label {
  color: var(--color-muted);
}
.lv-footer-total-value {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

/* Infinite-scroll sentinel */

.lv-sentinel td {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-muted);
  font-size: var(--font-xs);
}

.lv-sentinel--terminal td {
  color: var(--color-subtle);
  font-style: italic;
}
/* Popover container (saved-views, columns picker triggers) */

[data-lv-popover-host] {
  position: relative;
  display: inline-block;
}

.lv-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
  z-index: var(--z-dropdown);
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
}

.lv-popover.open {
  display: block;
}

/* Filter-builder row select/input styling (rows are JS-injected via
   list_view.js's renderFilterRow; the grid layout itself lives near
   the rest of the filter-builder scaffolding above). */

.lv-filter-row select,
.lv-filter-row input {
  height: var(--control-h);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--font-sm);
  color: var(--color-text);
  min-width: 0;
}

.lv-filter-row select:focus,
.lv-filter-row input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
/* ── end List-view framework (#266) ── */