/* 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;
  flex: 0 0 auto;
  gap: var(--space-2);
}
.toolbar--no-wrap .toolbar-spacer {
  min-width: var(--space-2);
}
.toolbar--no-wrap .filter-select {
  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;
}

/* 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: 3px;
  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: 20px;
  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: 1rem;
  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: 3px;
  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: 2rem;
  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: 3px;
  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: 9px;
  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: 2px;
  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: 3px;
  overflow: hidden;
}

.tool-ws-completeness-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: 3px;
  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 (box-shadow — works with overflow:hidden) */
.page-card[data-drop="before"],
.page-card[data-file-drop="before"] {
  box-shadow: -4px 0 0 0 var(--color-accent), -4px 0 8px color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.page-card[data-drop="after"],
.page-card[data-file-drop="after"] {
  box-shadow: 4px 0 0 0 var(--color-accent), 4px 0 8px color-mix(in srgb, var(--color-accent) 50%, 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: 3px;
  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: 9px;
  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: 3px;
  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: 3px;
}

.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 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; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

.review-image-page {
  animation: page-load-in 0.35s 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: 3px;
  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: 12px;
  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: 7px;
  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 .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;
}

/* ── 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: 14px;
  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: 14px;
  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: 14px;
  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: 3px;
}

.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: 3px; 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: 14px;
  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: 14px;
  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: 6px;
  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: 6px;
  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-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: 4px;
  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: 6px;
  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: 6px;
  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: 6px;
  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.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page header crumb ─────────────────────────────────────────────────────── */

.page-header-crumbs {
  font-size: var(--font-sm);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

/* ── 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-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 {
  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-text);
  font-weight: var(--weight-medium);
  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: 520px;
}

/* ── 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;
}

.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: 22px;
  height: 22px;
  padding: 0;
  margin-right: var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: var(--color-subtle);
  transition: background var(--transition-normal), color var(--transition-normal);
}

.bucket-collapse-all:hover {
  background: var(--color-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: transparent;
  border: 0;
  color: var(--color-subtle);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: inherit;
}

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

/* ── 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);
}

/* ── Search input collapse-to-icon at narrower widths ──────────────────────── */

/* 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. */
@media (max-width: 1400px) {
  .toolbar .search-input--collapsible {
    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;
    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;
}

/* Filter builder modal */

.lv-filter-builder {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-text-strong) 40%, transparent);
  display: grid;
  place-items: center;
  z-index: var(--z-modal);
}

.lv-filter-builder[hidden] { display: none; }

.lv-filter-builder-panel {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  width: min(640px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.lv-filter-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.lv-filter-builder-title {
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
}

.lv-filter-builder-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lv-filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.lv-filter-group-header h4 {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
}

.lv-filter-group-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lv-filter-builder-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.lv-filter-builder-footer .spacer { flex: 1 1 auto; }

/* 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);
}

.lv-saved-views-footer {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* Columns picker */

.lv-columns-picker {
  min-width: 220px;
  padding: var(--space-2) var(--space-4);
}

.lv-columns-picker-title {
  margin: 0 0 var(--space-2) 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-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.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);
}

.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;
  gap: var(--space-4);
  font-size: var(--font-xs);
  color: var(--color-muted);
}

.lv-footer-count {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.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 field-row scaffolding (rows are JS-injected, this is the row look) */

.lv-filter-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(160px, 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);
}
.lv-filter-row-remove:hover {
  color: var(--color-danger);
}
.lv-filter-row select,
.lv-filter-row input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--font-sm);
}
/* ── end List-view framework (#266) ── */