/* ============================================================================
 * handle-components.css — shared styles for the Handle component library.
 * Pulls every value from /static/tokens.css. Components MUST NOT hardcode.
 * Spec: 16_UI_UX_SPEC.md §22 (animation, toast contract, sub-state colors).
 * ========================================================================== */

/* ── Shared resets that components depend on ──────────────────────────────── */
.handle-rail, .handle-sidepanel-stack, .handle-toast-stack,
.handle-empty, .skeleton {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .handle-rail *, .handle-sidepanel, .handle-toast, .skeleton {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* ── RailStrip (§4) ───────────────────────────────────────────────────────── */
.rail-shell { width: 100%; max-width: var(--layout-max-width, 1440px); margin: 0 auto; padding: 0 var(--sp-6, 24px); box-sizing: border-box; }
.handle-rail {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-2);
}
.rail-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--text-primary);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color 150ms ease-out;
}
.rail-tile:hover { border-color: var(--border-strong); }
.rail-tile.active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}
.rail-row {
  display: flex; align-items: center; gap: var(--sp-2);
}
.rail-icon { font-size: 14px; line-height: 1; opacity: 0.85; }
.rail-label {
  flex: 1;
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.rail-count {
  font-family: var(--font-mono);
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
}
.rail-sla {
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
}
.rail-sla.sla-green  { background: var(--status-success); }
.rail-sla.sla-yellow { background: var(--status-warning); }
.rail-sla.sla-red    { background: var(--status-danger); animation: pulse-red 1s infinite linear; }
.rail-heat {
  display: flex; gap: 3px;
}
.heat-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-elevated);
}
.heat-dot.lit { background: var(--brand-primary); }

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Skeleton (§9.3) ─────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 0%,
    color-mix(in srgb, var(--bg-elevated) 80%, var(--text-muted)) 50%,
    var(--bg-elevated) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--r-md);
  animation: skeleton-shimmer 1.5s linear infinite;
  margin-bottom: var(--sp-2);
}
.skeleton-row   { height: 20px; }
.skeleton-card  { height: 120px; }
.skeleton-tile  { height: 96px; aspect-ratio: 4/3; height: auto; }
.skeleton-grid  { height: 240px; }
.skeleton-block { height: 60px; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast (§22.2) ───────────────────────────────────────────────────────── */
.handle-toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: var(--z-toast, 1000);
  pointer-events: none;
}
.handle-toast {
  width: 320px; max-width: calc(100vw - 32px);
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--type-sm);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.25));
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.handle-toast.toast-in { opacity: 1; transform: translateY(0); }
.handle-toast.toast-out {
  opacity: 0; transform: translateY(8px);
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.handle-toast.lvl-success { border-color: var(--status-success); }
.handle-toast.lvl-warning { border-color: var(--status-warning); }
.handle-toast.lvl-error   { border-color: var(--status-danger); }
.toast-undo {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--type-xs);
  padding: 4px 10px;
  cursor: pointer;
}
.toast-undo:hover { border-color: var(--brand-primary); }

@media (max-width: 600px) {
  .handle-toast-stack { right: 16px; left: 16px; }
  .handle-toast { width: 100%; }
}

/* ── EmptyState (§12.1) ──────────────────────────────────────────────────── */
.handle-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--text-secondary);
}
.empty-glyph {
  width: 80px; height: 80px;
  margin: 0 auto var(--sp-4) auto;
  background: var(--bg-elevated);
  border-radius: var(--r-pill);
  opacity: 0.4;
}
.empty-msg {
  color: var(--text-primary);
  font-size: var(--type-md);
  margin-bottom: var(--sp-4);
}
.empty-cta {
  display: inline-block;
  padding: 8px 16px;
  background: var(--gradient-cta);
  color: var(--text-on-brand);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
}

/* ── SidePanel (§7) ──────────────────────────────────────────────────────── */
.handle-sidepanel-stack {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: var(--z-modal, 400);
}
.handle-sidepanel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--panel-width, 480px);
  max-width: 100vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.35));
  pointer-events: auto;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.handle-sidepanel.panel-in  { transform: translateX(0); }
.handle-sidepanel.panel-out { transform: translateX(100%); }

/* Stacked panels: each subsequent panel offsets back */
.handle-sidepanel-stack > .handle-sidepanel:nth-last-child(2) { transform: translateX(calc(-1 * var(--sp-8, 32px))); opacity: 0.5; }
.handle-sidepanel-stack > .handle-sidepanel:nth-last-child(3) { transform: translateX(calc(-2 * var(--sp-8, 32px))); opacity: 0.3; }

.panel-head {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
}
.panel-crumbs {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2);
  font-size: var(--type-xs); color: var(--text-muted);
}
.panel-crumbs .crumb { cursor: pointer; }
.panel-crumbs .crumb:hover { color: var(--text-primary); }
.panel-crumbs .crumb-sep { color: var(--text-muted); }
.panel-title-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
}
.panel-title { font-size: var(--type-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.panel-subtitle { color: var(--text-secondary); font-size: var(--type-xs); margin-top: 4px; }
.panel-close {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 22px;
  width: 32px; height: 32px; cursor: pointer;
  border-radius: var(--r-md);
}
.panel-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.panel-body {
  flex: 1;
  padding: var(--sp-6);
  overflow-y: auto;
}

.panel-actions {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-default);
  background: var(--bg-elevated);
  display: flex; gap: var(--sp-2); justify-content: flex-end;
}
.panel-btn {
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.panel-btn:hover { border-color: var(--border-strong); }
.panel-btn.primary {
  background: var(--gradient-cta);
  border: none;
  color: var(--text-on-brand);
}
.panel-btn.danger {
  border-color: var(--status-danger);
  color: var(--status-danger);
}
.panel-btn.danger:hover { background: var(--status-danger-soft); }

@media (max-width: 600px) {
  .handle-sidepanel { width: 100%; }
}

/* ── JobCard (§10.5) ─────────────────────────────────────────────────────── */
.handle-jobcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  display: flex; gap: var(--sp-3); align-items: flex-start;
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}
.handle-jobcard:hover { border-color: var(--brand-primary); }
.handle-jobcard:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.handle-jobcard.sla-red { border-left: 3px solid var(--status-danger); }
.handle-jobcard.sla-yellow { border-left: 3px solid var(--status-warning); }
.handle-jobcard.sla-green { border-left: 3px solid var(--status-success); }

.card-body { flex: 1; }
.card-title { color: var(--text-primary); font-weight: var(--weight-medium); font-size: var(--type-sm); }
.card-meta { color: var(--text-secondary); font-size: var(--type-xs); margin-top: 4px; }
.card-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.agent-name { color: var(--text-secondary); font-size: var(--type-xs); }
.agent-tier {
  font-size: 10px; padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--bg-elevated); color: var(--text-secondary);
}
.agent-tier.tier-top-producer { background: var(--brand-primary-soft); color: var(--brand-primary); }
.agent-tier.tier-gold { background: var(--brand-accent-soft, rgba(201,168,76,0.14)); color: var(--brand-accent, #C9A84C); }
.agent-tier.tier-at-risk { background: var(--status-warning-soft); color: var(--status-warning); }
.agent-tier.tier-churned { background: var(--status-danger-soft); color: var(--status-danger); }
.sla-pill {
  font-size: 10px; padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono);
  background: var(--bg-elevated); color: var(--text-secondary);
}
.sla-pill.sla-red { background: var(--status-danger-soft); color: var(--status-danger); }
.sla-pill.sla-yellow { background: var(--status-warning-soft); color: var(--status-warning); }
.card-actions { display: flex; flex-direction: column; gap: 4px; }
.card-action {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 4px 10px;
  font-size: var(--type-xs); color: var(--text-primary); cursor: pointer;
}
.card-action:hover { border-color: var(--brand-primary); }

/* ── DensityToggle (§5.4) ────────────────────────────────────────────────── */
.handle-density-toggle {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}
.density-btn {
  background: transparent; border: none;
  color: var(--text-secondary);
  padding: 4px 12px;
  border-radius: var(--r-sm);
  font-size: var(--type-xs);
  cursor: pointer;
}
.density-btn.active {
  background: var(--brand-primary-soft);
  color: var(--text-primary);
}

/* ── DataTable (§5.2) ────────────────────────────────────────────────────── */
.handle-datatable { width: 100%; }
.handle-datatable table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
}
.handle-datatable th, .handle-datatable td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--type-sm);
  border-bottom: 1px solid var(--border-default);
}
.handle-datatable th {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
}
.handle-datatable th.sortable { cursor: pointer; user-select: none; }
.handle-datatable th.sortable:hover { color: var(--text-primary); }
.handle-datatable tbody tr { cursor: pointer; }
.handle-datatable tbody tr:hover { background: var(--bg-elevated); }
.handle-datatable tbody tr.selected { background: var(--brand-primary-soft); }
.handle-datatable td.checkbox-cell, .handle-datatable th.checkbox-cell {
  width: 32px; padding-right: 0;
}
.handle-datatable td.empty { text-align: center; color: var(--text-muted); padding: var(--sp-8); }

.dt-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0;
  color: var(--text-secondary); font-size: var(--type-xs);
}
.dt-pager { display: flex; gap: var(--sp-2); align-items: center; }
.dt-pager button {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-primary); border-radius: var(--r-sm);
  width: 28px; height: 28px; cursor: pointer;
}
.dt-pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Bulk action bar (§5.2 + §11.7) */
.handle-bulk-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-surface); border: 1px solid var(--brand-primary);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; gap: var(--sp-2); align-items: center;
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.35));
  z-index: var(--z-popover, 300);
}
.bulk-count { color: var(--text-primary); font-size: var(--type-sm); margin-right: var(--sp-2); }
.bulk-btn, .bulk-cancel {
  padding: 6px 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-primary); border-radius: var(--r-sm);
  font-size: var(--type-xs); cursor: pointer;
}
.bulk-btn.danger { border-color: var(--status-danger); color: var(--status-danger); }
.bulk-cancel { color: var(--text-muted); }

/* ── HeatGrid (§5.1) ─────────────────────────────────────────────────────── */
.handle-heatgrid {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.heat-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-default);
}
.heat-stage { font-size: var(--type-md); font-weight: var(--weight-semibold); text-transform: capitalize; }
.heat-total { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--type-sm); }
.handle-heatgrid h3 {
  font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-secondary); margin: var(--sp-3) 0 var(--sp-2) 0;
}
.heat-row {
  display: grid; grid-template-columns: 1fr 60px 200px;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) 0;
  font-size: var(--type-sm);
}
.heat-row.sub-row { cursor: pointer; border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); }
.heat-row.sub-row:hover { background: var(--bg-elevated); }
.heat-name { color: var(--text-primary); }
.heat-count { color: var(--text-secondary); font-family: var(--font-mono); text-align: right; }
.heat-bar { color: var(--brand-primary); font-family: var(--font-mono); letter-spacing: -1px; }
.heat-dots { color: var(--brand-primary); font-family: var(--font-mono); letter-spacing: -1px; }
.dots-urgent { color: var(--status-danger); animation: pulse-red 1s infinite linear; }

.heat-risk {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--status-warning-soft);
  border: 1px solid var(--status-warning);
  border-radius: var(--r-md);
  display: flex; justify-content: space-between; align-items: center;
}
.risk-label { color: var(--status-warning); font-size: var(--type-sm); }
.risk-btn {
  background: transparent; border: 1px solid var(--status-warning);
  color: var(--status-warning); padding: 4px 12px; border-radius: var(--r-sm);
  cursor: pointer; font-size: var(--type-xs);
}

/* ── CommandPalette (§8) ─────────────────────────────────────────────────── */
.handle-cmdk-scrim {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  display: grid; place-items: flex-start center;
  padding-top: 12vh;
  z-index: var(--z-modal, 400);
}
.handle-cmdk {
  width: min(640px, 92vw);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl, 0 24px 64px rgba(0,0,0,0.45));
  overflow: hidden;
}
.cmdk-input-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-default);
}
.cmdk-glyph {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.cmdk-input {
  flex: 1; border: none; background: transparent;
  color: var(--text-primary); font-size: var(--type-md);
  font-family: var(--font-sans);
  outline: none;
}
.cmdk-hint { color: var(--text-muted); font-size: var(--type-xs); }
.cmdk-list {
  list-style: none; margin: 0; padding: var(--sp-2) 0;
  max-height: 60vh; overflow-y: auto;
}
.cmdk-section {
  font-size: var(--type-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted); padding: var(--sp-2) var(--sp-5); margin-top: var(--sp-2);
}
.cmdk-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  cursor: pointer;
  font-size: var(--type-sm);
}
.cmdk-item:hover, .cmdk-item.active {
  background: var(--brand-primary-soft);
}
.cmdk-kind {
  font-family: var(--font-mono); font-size: var(--type-xs);
  color: var(--text-muted);
  min-width: 60px;
}
.cmdk-label { flex: 1; color: var(--text-primary); }
.cmdk-sub { color: var(--text-secondary); font-size: var(--type-xs); }
.cmdk-empty { padding: var(--sp-5); color: var(--text-muted); font-style: italic; text-align: center; }

/* ── TopNav ──────────────────────────────────────────────────────────────── */
.hc-topnav {
  height: var(--layout-topbar-h, 56px);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  position: sticky; top: 0; z-index: var(--z-sticky, 50);
}
.hc-topnav-left, .hc-topnav-right {
  display: flex; align-items: center; gap: var(--sp-3);
}
.hc-brand {
  /* Brand wordmark per handle/brand/README.md — Tiempos Headline Semibold Italic */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  font-size: 22px;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1;
}
.hc-brand-dot { display: none; } /* legacy — wordmark no longer needs the navy dot */
.hc-cmdk-btn {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-muted); border-radius: var(--r-sm);
  padding: 4px 10px; cursor: pointer; font-family: var(--font-mono);
  font-size: var(--type-xs);
}
.hc-user { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--type-xs); }
.hc-icon-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 4px; border-radius: var(--r-sm); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
}
.hc-icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* ── StatusDot ───────────────────────────────────────────────────────────── */
.hc-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--r-pill);
  vertical-align: middle;
}
.hc-status-green  { background: var(--status-success); }
.hc-status-yellow { background: var(--status-warning); }
.hc-status-red    { background: var(--status-danger);  }
.hc-status-muted  { background: var(--text-muted);     }

/* ── SlaPill ─────────────────────────────────────────────────────────────── */
.hc-sla-pill {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--type-xs); font-family: var(--font-mono);
}
.hc-sla-green  { background: rgba(60, 200, 120, 0.15); color: var(--status-success); }
.hc-sla-yellow { background: rgba(240, 180, 60, 0.15); color: var(--status-warning); }
.hc-sla-red    { background: rgba(220, 80, 80, 0.18);  color: var(--status-danger);  }
.hc-sla-muted  { background: var(--bg-elevated); color: var(--text-muted); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.hc-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  font-size: var(--type-xs); color: var(--text-secondary);
}
.hc-badge-name { color: var(--text-primary); font-weight: var(--weight-medium); }
.hc-badge-depth { color: var(--text-muted); font-family: var(--font-mono); }
.hc-tier-dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--text-muted); }
.hc-tier-gold     .hc-tier-dot { background: var(--brand-accent); }
.hc-tier-silver   .hc-tier-dot { background: var(--text-muted); }
.hc-tier-new      .hc-tier-dot { background: var(--brand-primary); }
.hc-tier-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted); margin-left: 2px;
}

/* ── NotificationBadge ───────────────────────────────────────────────────── */
.hc-notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--status-danger); color: #fff;
  border-radius: var(--r-pill); font-size: 10px; font-weight: var(--weight-semibold);
}
.hc-notif-badge.hc-pulse { animation: hc-pulse 1.4s ease-out infinite; }
@keyframes hc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220,80,80,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(220,80,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,80,80,0); }
}

/* ── KeyboardShortcut + Tooltip ─────────────────────────────────────────── */
.hc-kbd-combo { display: inline-flex; align-items: center; gap: 2px; }
.hc-kbd {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 1px 6px; font-family: var(--font-mono);
  font-size: var(--type-xs); color: var(--text-secondary); line-height: 1.4;
}
.hc-kbd-plus { color: var(--text-muted); margin: 0 2px; }
.hc-has-tooltip { position: relative; }
.hc-has-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: var(--type-xs); white-space: nowrap;
  z-index: var(--z-tooltip, 100); margin-bottom: 4px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; font-weight: var(--weight-medium); font-size: var(--type-sm);
  padding: 6px 14px; line-height: 1.4; transition: all 150ms ease-out;
}
.hc-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.hc-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.hc-btn-primary {
  background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}
.hc-btn-primary:hover:not([disabled]) { filter: brightness(1.1); }
.hc-btn-secondary {
  background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default);
}
.hc-btn-secondary:hover:not([disabled]) { background: var(--bg-surface); }
.hc-btn-ghost { background: transparent; color: var(--text-secondary); }
.hc-btn-ghost:hover:not([disabled]) { background: var(--bg-elevated); color: var(--text-primary); }
.hc-btn-danger {
  background: var(--status-danger); color: #fff; border-color: var(--status-danger);
}
.hc-btn-sm { padding: 4px 10px; font-size: var(--type-xs); }
.hc-btn-lg { padding: 10px 20px; font-size: var(--type-md); }
.hc-btn.is-loading .hc-btn-label::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: hc-spin 0.8s linear infinite;
}
@keyframes hc-spin { to { transform: rotate(360deg); } }

/* ── BulkActionBar ──────────────────────────────────────────────────────── */
.hc-bulk-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-surface); border-top: 1px solid var(--border-default);
  padding: var(--sp-3) var(--sp-6);
  transform: translateY(100%); transition: transform 200ms ease-out;
  z-index: var(--z-sticky, 50);
}
.hc-bulk-bar.is-visible { transform: translateY(0); }
.hc-bulk-bar-inner {
  display: flex; align-items: center; gap: var(--sp-4); max-width: var(--layout-max-width); margin: 0 auto;
}
.hc-bulk-count { color: var(--text-secondary); font-size: var(--type-sm); }
.hc-bulk-actions { display: flex; gap: var(--sp-2); flex: 1; }

/* ── ContextMenu ────────────────────────────────────────────────────────── */
.hc-ctx-menu {
  position: fixed; min-width: 180px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  padding: var(--sp-1); z-index: var(--z-modal, 200);
}
.hc-ctx-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  color: var(--text-primary); font-size: var(--type-sm);
}
.hc-ctx-item:hover { background: var(--brand-primary-soft); }
.hc-ctx-item.is-danger { color: var(--status-danger); }
.hc-ctx-divider { height: 1px; background: var(--border-default); margin: var(--sp-1) 0; }

/* ── Form primitives ────────────────────────────────────────────────────── */
.hc-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.hc-field-label { font-size: var(--type-xs); color: var(--text-secondary); font-weight: var(--weight-medium); }
.hc-field-hint  { font-size: var(--type-xs); color: var(--text-muted); }
.hc-field-error { font-size: var(--type-xs); color: var(--status-danger); }
.hc-input, .hc-textarea, .hc-select {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); color: var(--text-primary);
  padding: 8px 10px; font-family: inherit; font-size: var(--type-sm);
  transition: border-color 150ms ease-out;
}
.hc-input:focus, .hc-textarea:focus, .hc-select:focus {
  outline: none; border-color: var(--brand-primary);
}
.hc-textarea { resize: vertical; min-height: 80px; }
.hc-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.hc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.hc-toggle-knob {
  position: relative; width: 32px; height: 18px;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-pill); transition: background 150ms ease-out;
}
.hc-toggle-knob::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px; background: var(--text-secondary);
  border-radius: 50%; transition: transform 150ms ease-out;
}
.hc-toggle input:checked + .hc-toggle-knob { background: var(--brand-primary); border-color: var(--brand-primary); }
.hc-toggle input:checked + .hc-toggle-knob::after { transform: translateX(14px); background: #fff; }
.hc-toggle-label { font-size: var(--type-sm); color: var(--text-primary); }
.hc-slider-row { display: flex; align-items: center; gap: var(--sp-3); }
.hc-slider { flex: 1; }
.hc-slider-value { font-family: var(--font-mono); color: var(--text-secondary); font-size: var(--type-xs); min-width: 40px; }
.hc-taginput {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 4px 6px;
}
.hc-taginput-entry { background: transparent; border: none; outline: none; flex: 1; min-width: 80px; color: var(--text-primary); padding: 4px; }
.hc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand-primary-soft); color: var(--text-primary);
  padding: 2px 6px; border-radius: var(--r-sm); font-size: var(--type-xs);
}
.hc-tag-x { background: transparent; border: none; cursor: pointer; color: var(--text-muted); padding: 0 2px; }
.hc-daterange { display: flex; align-items: center; gap: var(--sp-2); }
.hc-daterange-sep { color: var(--text-muted); }
.hc-dropzone {
  border: 2px dashed var(--border-default); border-radius: var(--r-md);
  background: var(--bg-elevated); padding: var(--sp-6); cursor: pointer;
  transition: all 150ms ease-out;
}
.hc-dropzone:hover, .hc-dropzone.is-drag {
  border-color: var(--brand-primary); background: var(--brand-primary-soft);
}
.hc-dropzone-inner { text-align: center; }
.hc-dropzone-icon { font-size: 32px; color: var(--text-muted); margin-bottom: var(--sp-2); }
.hc-dropzone-text { color: var(--text-primary); font-size: var(--type-sm); font-weight: var(--weight-medium); }
.hc-dropzone-hint { color: var(--text-muted); font-size: var(--type-xs); margin-top: 2px; }

/* ── ProgressInline + ProgressTask ──────────────────────────────────────── */
.hc-progress-inline { padding: var(--sp-3) 0; }
.hc-progress-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.hc-progress-step { color: var(--text-secondary); font-size: var(--type-xs); }
.hc-progress-bar {
  height: 4px; background: var(--bg-elevated); border-radius: var(--r-pill); overflow: hidden;
}
.hc-progress-fill { height: 100%; background: var(--brand-primary); transition: width 200ms ease-out; }
.hc-progress-bar.hc-indeterminate .hc-progress-fill {
  width: 30% !important; animation: hc-indet 1.6s linear infinite;
}
@keyframes hc-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
#hc-task-stack {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6);
  display: flex; flex-direction: column-reverse; gap: var(--sp-2);
  z-index: var(--z-sticky, 50); max-width: 320px;
}
.hc-task {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.hc-task-label { color: var(--text-primary); font-size: var(--type-sm); margin-bottom: var(--sp-2); }

/* ── HelpDrawer ─────────────────────────────────────────────────────────── */
.hc-helpdrawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: var(--z-modal, 200);
}
.hc-helpdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100vw;
  background: var(--bg-surface); border-left: 1px solid var(--border-default);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hc-helpdrawer.is-open { transform: translateX(0); }
.hc-helpdrawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4); border-bottom: 1px solid var(--border-default);
}
.hc-helpdrawer-title { font-weight: var(--weight-semibold); }
.hc-helpdrawer-body { padding: var(--sp-4); flex: 1; overflow-y: auto; color: var(--text-secondary); font-size: var(--type-sm); }
.hc-helpdrawer-shortcuts { padding: var(--sp-4); border-top: 1px solid var(--border-default); }
.hc-helpdrawer-section {
  font-size: var(--type-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-muted); margin-bottom: var(--sp-2);
}
.hc-shortcut-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-1) 0; font-size: var(--type-sm);
}
.hc-shortcut-keys { display: inline-flex; gap: 4px; }
.hc-shortcut-label { color: var(--text-secondary); }

/* ── SnoozePicker ───────────────────────────────────────────────────────── */
.hc-snooze-picker {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--sp-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: var(--z-modal, 200); min-width: 220px;
}
.hc-snooze-head {
  font-size: var(--type-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.hc-snooze-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  color: var(--text-primary); font-size: var(--type-sm);
}
.hc-snooze-item:hover { background: var(--brand-primary-soft); }
.hc-snooze-divider { height: 1px; background: var(--border-default); margin: var(--sp-1) 0; }
.hc-snooze-custom { padding: var(--sp-2) var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .hc-helpdrawer, .hc-bulk-bar, .hc-progress-fill, .hc-btn, .hc-toggle-knob,
  .hc-toggle-knob::after { transition: none !important; }
  .hc-progress-bar.hc-indeterminate .hc-progress-fill,
  .hc-notif-badge.hc-pulse, .hc-btn.is-loading .hc-btn-label::after { animation: none !important; }
}

/* ── RailStrip hover popover (spec §4.2) ─────────────────────────────────── */
.rail-tile { position: relative; }
.rail-popover {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  min-width: 200px; max-width: 280px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--sp-3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  z-index: var(--z-tooltip, 100);
  font-size: var(--type-xs);
}
.rail-tile:hover .rail-popover,
.rail-tile:focus-visible .rail-popover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rail-popover-head {
  font-weight: var(--weight-semibold); color: var(--text-primary);
  text-transform: capitalize; margin-bottom: var(--sp-2);
}
.rail-popover-row {
  display: flex; justify-content: space-between;
  padding: 2px 0; color: var(--text-secondary);
}
.rail-popover-n { font-family: var(--font-mono); color: var(--text-primary); }
.rail-popover-sla {
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: 1px solid var(--border-default);
  font-size: var(--type-xs);
}
.rail-popover-sla-green  { color: var(--status-success); }
.rail-popover-sla-yellow { color: var(--status-warning); }
.rail-popover-sla-red    { color: var(--status-danger);  }
@media (prefers-reduced-motion: reduce) {
  .rail-popover { transition: opacity 1ms; }
}

/* Floating help button (mounted by StageShortcuts) */
.hc-help-floating {
  position: fixed; bottom: var(--sp-6); left: var(--sp-6);
  width: 36px; height: 36px;
  background: var(--bg-elevated); color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: 50%; cursor: pointer;
  font-size: var(--type-md); font-weight: var(--weight-semibold);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-sticky, 50);
  transition: transform 150ms ease-out, color 150ms ease-out;
}
.hc-help-floating:hover {
  transform: scale(1.05); color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* ── VariantViewer (spec §10.5 + §32.2 Variants tab) ─────────────────────── */
.vv-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  z-index: var(--z-modal, 200);
  display: flex; align-items: stretch; justify-content: stretch;
}
.vv-modal {
  flex: 1; display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 280px;
  grid-template-areas: "head head" "stage rail";
  background: var(--bg-base);
  margin: 24px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border-default);
}
.vv-head {
  grid-area: head;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.vv-title { color: var(--text-primary); font-weight: var(--weight-medium); font-size: var(--type-sm); }
.vv-actions { display: flex; gap: var(--sp-2); align-items: center; }
.vv-stage {
  grid-area: stage;
  position: relative; overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.vv-canvas {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.vv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vv-corner {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(0,0,0,0.6); color: #fff;
  padding: 4px 10px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
}
.vv-empty { color: var(--text-muted); padding: var(--sp-6); text-align: center; }
.vv-rail {
  grid-area: rail;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  padding: var(--sp-3); overflow-y: auto;
}
.vv-rail-head {
  font-size: var(--type-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.vv-thumb {
  display: block; width: 100%; padding: 0;
  background: transparent; border: 2px solid transparent;
  border-radius: var(--r-sm); cursor: pointer;
  margin-bottom: var(--sp-2); overflow: hidden;
}
.vv-thumb img {
  display: block; width: 100%; height: auto; border-radius: var(--r-sm);
}
.vv-thumb-meta {
  font-family: var(--font-mono); font-size: var(--type-xs);
  color: var(--text-muted); padding: 4px 6px; text-align: left;
}
.vv-thumb.active   { border-color: var(--brand-primary); }
.vv-thumb.hero .vv-thumb-meta { color: #d4a017; }

/* ============================================================================
 * Handle — brand polish layer (appended 2026-05-02)
 *
 * Refines core components to match the editorial-premium voice from the
 * brand book. Operates as overrides on top of the prior component CSS so
 * we don't break behavior — this layer only retones surfaces.
 *
 * Source of truth: handle/brand/README.md
 * Target voice:  quietly competent, premium, paper-feel
 * ========================================================================= */

/* ── Wordmark in <h1> + brand spots ─────────────────────────────────────── */
.wordmark, h1.brand, .hc-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ── JobCard — tighter hierarchy, paper feel ────────────────────────────── */
.handle-jobcard {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms var(--ease-out),
              box-shadow 200ms var(--ease-out),
              transform 150ms var(--ease-out);
}
.handle-jobcard:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.handle-jobcard.sla-red    { border-left: 2px solid var(--status-danger);  }
.handle-jobcard.sla-yellow { border-left: 2px solid var(--status-warning); }
.handle-jobcard.sla-green  { border-left: 2px solid transparent; }    /* quiet by default */

.card-title {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--type-md);
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
}
.card-meta {
  color: var(--text-muted);
  font-size: var(--type-xs);
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* SLA pill — brand-muted, mono numerics */
.sla-pill, .hc-sla-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
}
.sla-pill.sla-red,    .hc-sla-red    { background: var(--status-danger-soft);  color: var(--status-danger);  border-color: var(--status-danger-soft); }
.sla-pill.sla-yellow, .hc-sla-yellow { background: var(--status-warning-soft); color: var(--status-warning); border-color: var(--status-warning-soft); }
.sla-pill.sla-green,  .hc-sla-green  { background: var(--status-success-soft); color: var(--status-success); border-color: var(--status-success-soft); }
.hc-sla-muted { background: var(--bg-elevated); color: var(--text-muted); border-color: var(--border-default); }

/* Card actions — quieter, secondary feel */
.card-action {
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.card-action:hover {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ── Rail strip — Linear-tier polish ────────────────────────────────────── */
.rail-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  transition: border-color 150ms var(--ease-out),
              background-color 150ms var(--ease-out);
}
.rail-tile:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
}
.rail-tile.active {
  border-color: var(--text-primary);
  background: var(--bg-elevated);
}
.rail-label {
  text-transform: capitalize;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: var(--text-primary);
}
.rail-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.rail-tile.active .rail-count { color: var(--text-primary); }

/* heat-dot tone classes — keeps the bar style from line 70, adds warm/hot intensity */
.heat-dot.lit.warm { background: var(--status-warning, #C9A875); }
.heat-dot.lit.hot  { background: var(--status-danger, #B5524A); }

.rail-sla {
  width: 6px; height: 6px; border-radius: var(--r-pill);
}
.rail-sla.sla-green  { background: var(--status-success); }
.rail-sla.sla-yellow { background: var(--status-warning); }
.rail-sla.sla-red    { background: var(--status-danger); }

/* ── Buttons — primary is ink-on-paper (or paper-on-ink in dark) ───────── */
.hc-btn-primary {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
}
.hc-btn-primary:hover:not([disabled]) {
  filter: none;
  background: var(--brand-primary-deep);
  box-shadow: var(--shadow-md);
  transform: translateY(-0.5px);
}
.hc-btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.hc-btn-secondary:hover:not([disabled]) {
  background: var(--bg-elevated);
  border-color: var(--border-strong);
}
.hc-btn-ghost {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}
.hc-btn-ghost:hover:not([disabled]) {
  background: var(--brand-primary-soft);
  color: var(--text-primary);
}
.hc-btn-danger {
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: var(--text-on-brand);
}
.hc-btn-danger:hover:not([disabled]) { filter: brightness(0.92); }

/* Primary action button on top of cards ("+ New job" etc) */
.pa-btn {
  background: var(--brand-primary) !important;
  color: var(--text-on-brand) !important;
  border: 1px solid var(--brand-primary) !important;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.pa-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Top bar — brand surface, soft border ──────────────────────────────── */
.topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}
.hc-topnav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}

/* Cmd-K hint chip — paper feel */
.cmdk-hint-btn, .hc-cmdk-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.cmdk-hint-btn:hover, .hc-cmdk-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ── Side panel — premium chrome ───────────────────────────────────────── */
.handle-sidepanel {
  background: var(--bg-page);
  box-shadow: -16px 0 48px rgba(20, 18, 14, 0.10),
              -2px 0 8px rgba(20, 18, 14, 0.06);
  border-left: 1px solid var(--border-default);
}
.sp-header {
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}
.sp-title {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.sp-subtitle {
  color: var(--text-muted);
  font-size: var(--type-xs);
}

/* ── Skeleton shimmer — paper-toned for light, deep for dark ───────────── */
.handle-skeleton, .skeleton {
  background: var(--bg-elevated);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--brand-primary-soft) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -200% 0;
  animation: handle-shimmer 1.5s linear infinite;
  border-radius: var(--r-md);
}
@keyframes handle-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Empty state — paper-feel typography ───────────────────────────────── */
.handle-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--text-muted);
}
.empty-msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 32ch;
  margin: 0 auto;
}
.empty-cta {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: 8px 18px;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border: 1px solid var(--brand-primary);
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.empty-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* ── Bucket headers in /queue (SLA at risk · Needs me · Snoozed) ───────── */
.bucket-head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-md);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  text-transform: none !important;
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.bucket-head .dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
}
.bucket-head .dot.red    { background: var(--status-danger); }
.bucket-head .dot.yellow { background: var(--status-warning); }
.bucket-head .dot.green  { background: var(--status-success); }

/* Queue title (h1) — italic display */
.queue-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-xl);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Stage title (h1 on /inbox /book /shoot /edit etc) */
.stage-head h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* /jobs/{id} title */
.job-title {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ── Lane toggle — cleaner inactive state ──────────────────────────────── */
.lane-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
}
.lane-toggle button {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.lane-toggle button.active {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ── DensityToggle — match lane toggle treatment ───────────────────────── */
.handle-density-toggle {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
}
.density-btn { color: var(--text-muted); font-weight: var(--weight-medium); }
.density-btn.active {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ── Tabs (/jobs/{id}) — quieter, type-driven ──────────────────────────── */
.tabs { border-bottom: 1px solid var(--border-default); }
.tab {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  font-size: var(--type-sm);
  letter-spacing: 0.005em;
}
.tab:hover { color: var(--text-secondary); }
.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

/* ── Detail tables on /jobs/{id} — paper feel ──────────────────────────── */
.detail-table th {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}
.detail-table td { color: var(--text-primary); }
.detail-table th, .detail-table td {
  border-bottom-color: var(--border-default);
}

/* ── Files grid tiles (/jobs/{id} Files tab) ───────────────────────────── */
.file-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  transition: border-color 150ms var(--ease-out),
              transform 150ms var(--ease-out),
              box-shadow 150ms var(--ease-out);
}
.file-tile:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.file-tile-name {
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--text-primary);
}

/* ── Toast — brand-feel ────────────────────────────────────────────────── */
.handle-toast, .hc-toast, .toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  font-weight: var(--weight-medium);
}
.toast-undo, .hc-toast-undo {
  background: transparent;
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ── Selection (already in tokens, but reinforce here) ─────────────────── */
::selection { background: var(--text-primary); color: var(--bg-page); }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .handle-jobcard, .rail-tile, .file-tile, .pa-btn, .empty-cta {
    transition: none !important;
  }
  .handle-skeleton, .skeleton { animation: none !important; }
}

/* ============================================================================
 * Figma-pattern overlay (Untitled UI + Dashboard UI Charts inspiration)
 * Appended 2026-05-02. Sits on top of brand polish layer.
 *
 * Patterns applied:
 *   - JobCard: Untitled UI inbox card (glyph · body · actions)
 *   - Stage view: Dashboard UI Charts KPI strip
 *   - HeatGrid: chart-kit visual hierarchy
 *   - Cmd-K: Linear-style sectioned palette
 * ========================================================================= */

/* ── JobCard (Untitled UI inbox card pattern) ──────────────────────────── */
.handle-jobcard {
  display: grid !important;
  grid-template-columns: 32px 1fr auto;
  gap: var(--sp-3);
  align-items: stretch;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-3);
}

.jc-glyph {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
  user-select: none;
}
.handle-jobcard.sla-red .jc-glyph    { background: var(--status-danger-soft);  color: var(--status-danger);  border-color: var(--status-danger-soft); }
.handle-jobcard.sla-yellow .jc-glyph { background: var(--status-warning-soft); color: var(--status-warning); border-color: var(--status-warning-soft); }
.handle-jobcard[data-card-type="booking_triage"] .jc-glyph    { background: var(--status-info-soft);    color: var(--status-info); }
.handle-jobcard[data-card-type="revision_request"] .jc-glyph  { background: var(--status-warning-soft); color: var(--status-warning); }
.handle-jobcard[data-card-type="qc_failure"] .jc-glyph        { background: var(--status-danger-soft);  color: var(--status-danger); }
.handle-jobcard[data-card-type="invoice_overdue"] .jc-glyph   { background: var(--brand-accent-soft);   color: var(--brand-accent); }

.jc-body { min-width: 0; }   /* enables ellipsis on overflow */

.jc-row-1 {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: 4px;
}
.jc-title {
  font-weight: var(--weight-semibold);
  font-size: var(--type-md);
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jc-time {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0;
  flex-shrink: 0;
}
.jc-sub {
  color: var(--text-secondary);
  font-size: var(--type-sm);
  line-height: 1.5;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.jc-tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-size: var(--type-xs);
}
.jc-address {
  color: var(--text-muted);
  font-size: var(--type-xs);
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.jc-actions {
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
}

/* ── Stage view KPI strip (Dashboard UI Charts pattern) ────────────────── */
.stage-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.stage-kpi-tile {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out),
              transform 150ms var(--ease-out);
}
.stage-kpi-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.stage-kpi-tile.active {
  border-color: var(--text-primary);
  background: var(--bg-elevated);
}
.stage-kpi-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.stage-kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.stage-kpi-trend {
  font-size: var(--type-xs);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0;
}
.stage-kpi-trend.up   { color: var(--status-success); }
.stage-kpi-trend.down { color: var(--status-danger); }

/* ── HeatGrid (chart-kit polish) ───────────────────────────────────────── */
.handle-heatgrid {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.heatgrid-head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-lg);
  letter-spacing: -0.005em;
  margin-bottom: var(--sp-4);
  color: var(--text-primary);
}
.heatgrid-total {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 56px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.heatgrid-sub {
  display: grid;
  gap: var(--sp-2);
}
.heatgrid-row {
  display: grid;
  grid-template-columns: 1fr auto 60px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-default);
}
.heatgrid-row:last-child { border-bottom: none; }
.heatgrid-row-label {
  color: var(--text-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  text-transform: capitalize;
}
.heatgrid-row.urgent .heatgrid-row-label { color: var(--status-danger); }
.heatgrid-row-bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--bg-elevated);
  overflow: hidden;
  width: 100%;
  max-width: 240px;
  justify-self: end;
}
.heatgrid-row-bar > span {
  display: block; height: 100%;
  background: var(--text-primary);
  border-radius: var(--r-pill);
}
.heatgrid-row.urgent .heatgrid-row-bar > span { background: var(--status-danger); }
.heatgrid-row-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-align: right;
}
.heatgrid-row.urgent .heatgrid-row-count { color: var(--status-danger); }
.heatgrid-sla-callout {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--status-danger-soft);
  border: 1px solid var(--status-danger-soft);
  border-radius: var(--r-md);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--type-sm);
  color: var(--status-danger);
  font-weight: var(--weight-medium);
}

/* ── Cmd-K palette (Linear-style polish) ───────────────────────────────── */
.cmdk-overlay {
  background: rgba(20, 18, 14, 0.55);
  backdrop-filter: blur(8px);
}
.cmdk-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  width: 580px;
  max-width: 92vw;
}
.cmdk-input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: var(--type-md);
  font-family: var(--font-sans);
  padding: var(--sp-4) var(--sp-5);
  width: 100%;
  outline: none;
  border-bottom: 1px solid var(--border-default);
  letter-spacing: -0.005em;
}
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-list {
  list-style: none; margin: 0; padding: var(--sp-2) 0;
  max-height: 60vh; overflow-y: auto;
}
.cmdk-section {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
  font-weight: var(--weight-medium);
}
.cmdk-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  font-size: var(--type-sm);
  border-left: 2px solid transparent;
}
.cmdk-item:hover, .cmdk-item.active {
  background: var(--brand-primary-soft);
  border-left-color: var(--text-primary);
}
.cmdk-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.cmdk-label {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-sub {
  color: var(--text-muted);
  font-size: var(--type-xs);
  font-family: var(--font-mono);
  letter-spacing: 0;
  white-space: nowrap;
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stage-kpi-tile, .handle-heatgrid { transition: none !important; }
}

/* HeatGrid additional class styles (added 2026-05-02) */
.heatgrid-total-sub {
  color: var(--text-muted);
  font-size: var(--type-sm);
  margin-top: -8px; margin-bottom: var(--sp-5);
  letter-spacing: 0.01em;
}
.heatgrid-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  margin: var(--sp-4) 0 var(--sp-2);
}
.heatgrid-lanes { margin-top: var(--sp-4); }
.heatgrid-row[data-sub], .heatgrid-row[data-lane] {
  cursor: pointer;
  transition: background-color 100ms var(--ease-out);
  padding: var(--sp-2) var(--sp-2);
  margin: 0 calc(-1 * var(--sp-2));
  border-radius: var(--r-sm);
  border-bottom: none;
}
.heatgrid-row[data-sub]:hover, .heatgrid-row[data-lane]:hover {
  background: var(--brand-primary-soft);
}

/* ───── WS arrival pulse — Phase 1E differentiator ─────
 * Newly-arrived queue cards briefly slide+halo so operators visibly
 * see work land, instead of cards silently appearing on poll. */
@keyframes jc-arrive {
  0%   { transform: translateY(-6px); opacity: 0; box-shadow: 0 0 0 0 var(--brand-accent-soft); }
  35%  { transform: translateY(0);    opacity: 1; box-shadow: 0 0 0 6px var(--brand-accent-soft); }
  100% { transform: translateY(0);    opacity: 1; box-shadow: 0 0 0 0 transparent; }
}
.handle-jobcard.jc-arrived { animation: jc-arrive 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .handle-jobcard.jc-arrived { animation: none; }
}

/* ───── Cinematic empty states — Phase 1E differentiator ─────
 * Lucide line-art illustration + Tiempos italic headline + optional muted sub.
 * Soft "breathing" animation makes the surface feel alive, not abandoned. */
.empty-art {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--sp-5);
  color: var(--text-muted);
  opacity: 0.55;
  animation: empty-breathe 4.2s ease-in-out infinite;
}
.empty-art svg { display: block; }
.empty-sub {
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--text-muted);
  font-style: normal;
  letter-spacing: 0;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.handle-empty {
  /* widen the rhythm so the illustration + headline + sub don't crowd each other */
  padding: var(--sp-16) var(--sp-6);
}
@keyframes empty-breathe {
  0%, 100% { opacity: 0.50; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-art { animation: none; opacity: 0.55; }
}

/* ───── Cmd-K preview pane — Phase 1E differentiator ─────
 * Two-column palette: results list + live preview of the highlighted item.
 * Preview hides on narrow screens (mobile keeps the original single-column UX). */
.handle-cmdk--with-preview { width: min(920px, 94vw); }
.cmdk-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 360px;
  max-height: 60vh;
}
.cmdk-body .cmdk-list {
  border-right: 1px solid var(--border-default);
  margin: 0;
  overflow-y: auto;
}
.cmdk-preview {
  padding: var(--sp-5);
  background: var(--bg-elevated);
  overflow-y: auto;
}
.cmdk-preview-empty {
  display: flex; flex-direction: column; gap: var(--sp-2);
  height: 100%;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.cmdk-preview-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-lg);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-tight);
}
.cmdk-preview-sub {
  color: var(--text-muted);
  font-size: var(--type-sm);
}
.cmdk-preview-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  height: 100%;
}
.cmdk-preview-kind {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.cmdk-preview-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: 1.2;
}
.cmdk-preview-body {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--type-sm);
  color: var(--text-secondary);
}
.cmdk-preview-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-2);
}
.cmdk-preview-row .k {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: lowercase;
  align-self: center;
}
.cmdk-preview-row .v { color: var(--text-primary); }
.cmdk-preview-action {
  font-size: var(--type-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}
.cmdk-preview-foot {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-subtle, var(--border-default));
}
@media (max-width: 768px) {
  .handle-cmdk--with-preview { width: min(640px, 92vw); }
  .cmdk-body { grid-template-columns: 1fr; min-height: auto; }
  .cmdk-body .cmdk-list { border-right: none; }
  .cmdk-preview { display: none; }
}

/* ───── HeatGrid hex cluster — chart-kit MD/28 port ─────
 * Each hex = one job at this stage. Color encodes sub-bucket; opacity ramps
 * within a bucket so adjacent hexes have texture (not flat blocks). */
.heatgrid-hexes {
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-3);
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  overflow: hidden;
}
.heatgrid-hexes svg {
  width: 100%;
  height: auto;
  display: block;
}
.heatgrid-hex {
  cursor: pointer;
  transition: opacity 120ms var(--ease-out), filter 120ms var(--ease-out);
}
.heatgrid-hex:hover {
  opacity: 1 !important;
  filter: brightness(1.1) drop-shadow(0 0 2px rgba(0,0,0,0.18));
}
.heatgrid-hex.urgent { stroke: var(--status-danger); stroke-width: 0.6; }
.heatgrid-overflow {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-align: center;
}

/* Color swatch in sub-breakdown rows so legend matches the cluster colors */
.heatgrid-row-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-right: var(--sp-2);
}
.heatgrid-row { display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .heatgrid-hex, .heatgrid-hex:hover { transition: none; }
}

/* ───── ConversionFunnel — chart-kit Type=04 port ─────
 * Pipeline funnel: each stage is a horizontal bar narrower than the last.
 * Drop-rate badges between stages show where volume is being lost. */
.handle-funnel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.cf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.cf-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.cf-period {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.cf-body { display: flex; flex-direction: column; gap: 6px; }
.cf-stage {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 0;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 120ms var(--ease-out);
}
.cf-stage:hover { background: var(--bg-elevated); }
.cf-stage:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.cf-stage-label {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.cf-stage-bar-wrap {
  display: flex;
  justify-content: center;
}
.cf-stage-bar {
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-brand);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  transition: opacity 150ms var(--ease-out), filter 150ms var(--ease-out);
}
.cf-stage:hover .cf-stage-bar { opacity: 1 !important; filter: brightness(1.05); }
.cf-stage-pct { mix-blend-mode: normal; }
.cf-stage-meta { text-align: right; }
.cf-stage-count {
  font-family: var(--font-mono);
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.cf-stage-amount {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.cf-drop {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  padding: 2px 0;
}
.cf-drop > * { grid-column: 2; text-align: center; }
.cf-drop-pct { opacity: 0.7; }

@media (max-width: 640px) {
  .cf-stage, .cf-drop { grid-template-columns: 1fr; gap: 2px; }
  .cf-drop > * { text-align: left; }
  .cf-stage-meta { text-align: left; }
}

/* ───── CalendarHourGrid — single-day hour-block calendar (AiDEA pattern) ─── */
.handle-cal-day {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.cg-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  position: relative;
}
.cg-hours { border-right: 1px solid var(--border-default); }
.cg-hour-row {
  height: 60px;
  position: relative;
  border-bottom: 1px solid var(--border-default);
}
.cg-hour-row:last-child { border-bottom: none; }
.cg-hour-label {
  position: absolute;
  top: -7px;
  right: 8px;
  background: var(--bg-surface);
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.cg-canvas {
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 59px,
    var(--border-default) 59px,
    var(--border-default) 60px
  );
}
.cg-event {
  position: absolute;
  left: 8px;
  right: 8px;
  background: var(--brand-primary);
  border: none;
  border-left: 3px solid var(--brand-accent, var(--brand-primary));
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  text-align: left;
  color: var(--text-on-brand);
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  opacity: 0.9;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.cg-event:hover { opacity: 1; transform: translateX(1px); }
.cg-event:focus { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.cg-event-title {
  font-weight: var(--weight-semibold);
  font-size: var(--type-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cg-event-sub {
  font-size: 10px;
  opacity: 0.85;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cg-event-time {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.75;
  margin-top: 2px;
}
/* Per-event-type accent bands */
.cg-event--shoot      { background: var(--brand-primary);   border-left-color: var(--brand-accent, #C9A84C); }
.cg-event--reshoot    { background: var(--status-warning);  border-left-color: var(--status-warning); }
.cg-event--hold       { background: var(--text-muted);      border-left-color: var(--text-muted); }

/* Blocked / unavailable zones — diagonal-stripe overlay */
.cg-blocked {
  position: absolute;
  left: 0; right: 0;
  background-image: repeating-linear-gradient(
    45deg,
    var(--bg-elevated),
    var(--bg-elevated) 6px,
    transparent 6px,
    transparent 12px
  );
  background-color: rgba(0,0,0,0.02);
  z-index: 1;
  pointer-events: none;
  border-radius: 2px;
}

/* Live "now" line — only renders if date matches today */
.cg-now-line {
  position: absolute;
  left: -4px; right: 0;
  height: 0;
  border-top: 1.5px solid var(--status-danger);
  z-index: 3;
  pointer-events: none;
}
.cg-now-line::before {
  content: "";
  position: absolute;
  left: -6px; top: -5px;
  width: 9px; height: 9px;
  background: var(--status-danger);
  border-radius: 50%;
}

/* ───── PipelineSankey — chart-kit MD/35 + MD/41 port ───── */
.handle-sankey {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.handle-sankey svg { width: 100%; height: auto; display: block; }
.sk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.sk-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-xl);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.sk-period {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: lowercase;
}
.sk-link {
  cursor: pointer;
  transition: opacity 150ms var(--ease-out);
}
.sk-link:hover { opacity: 0.85 !important; }
.sk-node-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--text-primary);
}
.sk-node-value {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-muted);
}
.sk-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
  .sk-link, .sk-link:hover { transition: none; }
}

/* ───── CalendarHeatmap — chart-kit MD/13 port ───── */
.handle-cmh {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.cmh-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.cmh-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-lg);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.cmh-meta {
  display: flex; gap: var(--sp-3); align-items: baseline;
}
.cmh-total {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.cmh-period {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.cmh-body { overflow-x: auto; }
.cmh-body svg { display: block; min-width: 100%; }
.cmh-cell { transition: opacity 100ms var(--ease-out); cursor: pointer; }
.cmh-cell:hover { opacity: 1 !important; stroke: var(--text-primary); stroke-width: 1; }
.cmh-dow, .cmh-month {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-muted);
}
.cmh-legend {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  justify-content: flex-end;
}
.cmh-legend-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
}

/* ───── RegionMap — chart-kit XL/04 stategrid port ───── */
.handle-region {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.rm-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.rm-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-lg);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.rm-meta { display: flex; gap: var(--sp-3); align-items: baseline; }
.rm-total {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.rm-period { font-family: var(--font-mono); font-size: var(--type-xs); color: var(--text-muted); }
.rm-body { overflow-x: auto; }
.rm-body svg { display: block; max-width: 100%; height: auto; }
.rm-cell {
  cursor: pointer;
  transition: filter 120ms var(--ease-out);
}
.rm-cell:hover { filter: brightness(1.08) drop-shadow(0 0 2px rgba(0,0,0,0.18)); }
.rm-cell--empty { cursor: default; }
.rm-cell-code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rm-cell-val {
  font-family: var(--font-mono);
  font-size: 9px;
  opacity: 0.85;
}

/* ───── ActivityFeed — vertical timeline (AiDEA pattern) ───── */
.handle-feed {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.af-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.af-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-lg);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.af-period {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.af-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.af-list::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--border-default);
}
.af-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: var(--sp-3);
  padding: 10px 0;
  align-items: start;
  position: relative;
}
.af-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  border: 2px solid var(--bg-surface);
}
.af-content { min-width: 0; padding-top: 4px; }
.af-line {
  font-size: var(--type-sm);
  color: var(--text-primary);
  line-height: 1.4;
}
.af-actor { font-weight: var(--weight-semibold); }
.af-verb { color: var(--text-secondary); margin: 0 4px; }
.af-object {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-decoration: none;
}
a.af-object { color: var(--brand-primary); text-decoration: none; }
a.af-object:hover { text-decoration: underline; }
.af-context {
  font-size: var(--type-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.af-time {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 6px;
}

@media (max-width: 540px) {
  .af-item { grid-template-columns: 30px 1fr; }
  .af-time { grid-column: 2; padding-top: 0; margin-top: 2px; }
}

/* ───── Skeleton + Toast polish pass — premium-feel motion ─────
 * Dual-gradient base for skeleton "weight" + softer shimmer band.
 * Toast: spring entrance with level-tinted accent + shadow. */

/* Skeleton — slower breath, organic curve, dual-band depth */
.handle-skeleton, .skeleton {
  background-color: var(--bg-elevated);
  background-image:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--brand-primary) 8%, transparent) 35%,
      color-mix(in srgb, var(--brand-primary) 14%, transparent) 50%,
      color-mix(in srgb, var(--brand-primary) 8%, transparent) 65%,
      transparent 100%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: -220% 0;
  animation: handle-shimmer-v2 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: var(--r-md);
}
@keyframes handle-shimmer-v2 {
  0%   { background-position: -220% 0; }
  60%  { background-position:  120% 0; }
  100% { background-position:  220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .handle-skeleton, .skeleton { animation: none; background-image: none; }
}

/* Toast — spring entrance + level-tinted accent strip + tinted shadow */
.handle-toast {
  border-left: 3px solid var(--border-default);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition:
    opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 24px -4px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
}
.handle-toast.toast-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.handle-toast.toast-out {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition:
    opacity 180ms cubic-bezier(0.4, 0, 1, 1),
    transform 180ms cubic-bezier(0.4, 0, 1, 1);
}

.handle-toast.lvl-success {
  border-left-color: var(--status-success);
  box-shadow: 0 6px 24px -4px color-mix(in srgb, var(--status-success) 28%, transparent), 0 2px 8px rgba(0,0,0,0.06);
}
.handle-toast.lvl-warning {
  border-left-color: var(--status-warning);
  box-shadow: 0 6px 24px -4px color-mix(in srgb, var(--status-warning) 28%, transparent), 0 2px 8px rgba(0,0,0,0.06);
}
.handle-toast.lvl-error {
  border-left-color: var(--status-danger);
  box-shadow: 0 6px 24px -4px color-mix(in srgb, var(--status-danger) 28%, transparent), 0 2px 8px rgba(0,0,0,0.06);
}
.handle-toast.lvl-info {
  border-left-color: var(--brand-primary);
  box-shadow: 0 6px 24px -4px color-mix(in srgb, var(--brand-primary) 22%, transparent), 0 2px 8px rgba(0,0,0,0.06);
}

@media (prefers-reduced-motion: reduce) {
  .handle-toast, .handle-toast.toast-in, .handle-toast.toast-out {
    transition: opacity 100ms;
    transform: none;
  }
}

/* ───── Phase 1E.5 — Listing $ tag on JobCard ───── */
.jc-listing-price {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  color: var(--brand-accent, var(--text-primary));
  padding: 2px 7px;
  background: color-mix(in srgb, var(--brand-accent, var(--text-primary)) 12%, transparent);
  border-radius: var(--r-sm);
  letter-spacing: -0.01em;
}

/* ───── Phase 1E.5 — KPI tile semantic variants (Overdue / SLA / Healthy) ───── */
.stage-kpi-tile--danger {
  border-color: color-mix(in srgb, var(--status-danger) 22%, transparent);
  background: color-mix(in srgb, var(--status-danger) 8%, var(--bg-surface));
}
.stage-kpi-tile--danger .stage-kpi-label,
.stage-kpi-tile--danger .stage-kpi-value { color: var(--status-danger); }
.stage-kpi-tile--danger:hover {
  border-color: var(--status-danger);
  background: color-mix(in srgb, var(--status-danger) 12%, var(--bg-surface));
}

.stage-kpi-tile--warn {
  border-color: color-mix(in srgb, var(--status-warning) 28%, transparent);
  background: color-mix(in srgb, var(--status-warning) 9%, var(--bg-surface));
}
.stage-kpi-tile--warn .stage-kpi-label,
.stage-kpi-tile--warn .stage-kpi-value { color: var(--status-warning); }
.stage-kpi-tile--warn:hover {
  border-color: var(--status-warning);
  background: color-mix(in srgb, var(--status-warning) 14%, var(--bg-surface));
}

/* ───── Phase 1E Week 20 — Settings → Integrations grid (credential health dashboard) ───── */
.int-group { margin-bottom: var(--sp-6); }
.int-group-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.int-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color 120ms var(--ease-out);
}
.int-card:hover { border-color: var(--text-muted); }
.int-card--ok     { border-left-color: var(--status-success); }
.int-card--warn   { border-left-color: var(--status-warning); }
.int-card--danger { border-left-color: var(--status-danger); }
.int-card--off    { border-left-color: var(--border-default); opacity: 0.85; }

.int-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
}
.int-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-md);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
}
.int-status {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
  white-space: nowrap;
}
.int-status--ok     { background: color-mix(in srgb, var(--status-success) 12%, transparent); color: var(--status-success); }
.int-status--warn   { background: color-mix(in srgb, var(--status-warning) 14%, transparent); color: var(--status-warning); }
.int-status--danger { background: color-mix(in srgb, var(--status-danger) 14%, transparent);  color: var(--status-danger); }
.int-status--off    { background: var(--bg-elevated); color: var(--text-muted); }

.int-summary {
  font-size: var(--type-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}
.int-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}
.int-meta {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.int-btn {
  padding: 5px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.int-btn:hover:not(:disabled) { border-color: var(--brand-primary); color: var(--brand-primary); }
.int-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ───── Settings → Automation Rules editor ───────────────────────────────
 * List + toggle + filter + create + delete UI for automation_rules. */

.auto-summary { margin-bottom: var(--sp-5); }
.auto-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: stretch;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
}
.auto-stat, .auto-stat-cat {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 80px;
}
.auto-stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--type-2xl);
  line-height: 1;
  color: var(--text-primary);
}
.auto-stat-lbl, .auto-stat-cat-lbl {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: lowercase;
}
.auto-stat-cat {
  border-left: 1px solid var(--border-default);
  padding-left: var(--sp-4);
}
.auto-stat-cat-num {
  font-family: var(--font-mono);
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.auto-toolbar {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}
.auto-search, .auto-filter {
  padding: 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--text-primary);
}
.auto-search { flex: 1; min-width: 220px; }
.auto-filter { min-width: 140px; }
.auto-search:focus, .auto-filter:focus { outline: none; border-color: var(--brand-primary); }

.auto-grid { display: flex; flex-direction: column; gap: var(--sp-4); }

.auto-cat-group {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  overflow: hidden;
}
.auto-cat-head {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px var(--sp-4);
  display: flex; justify-content: space-between; align-items: center;
  background: color-mix(in srgb, var(--bg-elevated) 60%, transparent);
}
.auto-cat-count {
  font-family: var(--font-mono);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
}

.auto-rule {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: start;
  gap: var(--sp-3);
  padding: 12px var(--sp-4);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  cursor: pointer;
  transition: background 120ms var(--ease-out);
}
.auto-rule:first-child { border-top: none; }
.auto-rule:hover { background: color-mix(in srgb, var(--bg-elevated) 30%, var(--bg-surface)); }
.auto-rule.on { border-left: 3px solid var(--status-success); padding-left: calc(var(--sp-4) - 3px); }
.auto-rule.off { border-left: 3px solid var(--border-default); padding-left: calc(var(--sp-4) - 3px); opacity: 0.85; }

.auto-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  margin-top: 4px;
}
.auto-toggle input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.auto-toggle-track {
  width: 36px; height: 20px;
  background: var(--border-default);
  border-radius: 999px;
  position: relative;
  transition: background 150ms var(--ease-out);
}
.auto-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--bg-surface);
  border-radius: 50%;
  transition: left 150ms var(--ease-out);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.auto-toggle input:checked + .auto-toggle-track { background: var(--status-success); }
.auto-toggle input:checked + .auto-toggle-track::after { left: 18px; }
.auto-toggle input:focus + .auto-toggle-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent); }

.auto-rule-body { min-width: 0; }
.auto-rule-row1 {
  display: flex; align-items: baseline; gap: var(--sp-2);
  flex-wrap: wrap;
}
.auto-rule-id {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.auto-rule-name {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--text-primary);
}
.auto-rule-row2 {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.auto-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  padding: 1px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.auto-chip--action {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
  border-color: color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
.auto-chip--muted { color: var(--text-muted); }
.auto-rule-desc {
  font-size: var(--type-xs);
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
  max-width: 64ch;
}

.auto-rule-actions {
  display: flex; gap: var(--sp-1, 4px);
}
.auto-icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.auto-icon-btn:hover {
  color: var(--status-danger);
  border-color: color-mix(in srgb, var(--status-danger) 30%, transparent);
}

.auto-rule-detail {
  grid-column: 1 / -1;
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-page, var(--bg-elevated));
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.auto-detail-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-3);
}
.auto-detail-row .k {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.auto-detail-row .v {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-default);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  overflow-x: auto;
}

@media (max-width: 700px) {
  .auto-rule { grid-template-columns: 40px 1fr; }
  .auto-rule-actions { grid-column: 2; justify-content: flex-end; margin-top: 4px; }
  .auto-detail-row { grid-template-columns: 1fr; }
}

/* ───── Phase 1E.5 — stage filter strip + categorical sub-filter + team-load sub-rail ──── */
.stage-filter-strip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
}
.stage-filter-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.stage-filter-label {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding-top: 6px;
}
.stage-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stage-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.stage-filter-chip:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.stage-filter-chip.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--text-on-brand);
}
.stage-filter-chip-label { font-weight: var(--weight-medium); text-transform: capitalize; }
.stage-filter-chip-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.75;
}
.stage-filter-chip.active .stage-filter-chip-count { opacity: 1; }

/* Team-load sub-rail — chips with avatars */
.stage-team-row .stage-filter-chips { gap: 8px; }
.stage-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 120ms var(--ease-out), color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.stage-team-chip:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.stage-team-chip.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--text-on-brand);
}
.stage-team-chip-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.stage-team-chip.active .stage-team-chip-avatar {
  background: var(--text-on-brand);
  color: var(--text-primary);
}
.stage-team-chip-name { font-weight: var(--weight-medium); }
.stage-team-chip-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.75;
  margin-left: 2px;
}
.stage-team-chip.active .stage-team-chip-count { opacity: 1; }

@media (max-width: 700px) {
  .stage-filter-row { grid-template-columns: 1fr; }
  .stage-filter-label { padding-top: 0; }
}

/* ── Billing tab ─────────────────────────────────────────────────────── */
.bill-shell { display:flex; flex-direction:column; gap:var(--sp-8); }
.bill-block { padding-top:var(--sp-2); }
.bill-section-title { font-size:var(--fs-lg); font-weight:600; color:var(--ink); margin:0 0 var(--sp-1) 0; }
.bill-section-sub { color:var(--ink-3); font-size:var(--fs-sm); margin:0 0 var(--sp-4) 0; }
.bill-section-sub code { background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:var(--fs-xs); }

.bill-plan-card {
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--radius-2);
  padding:var(--sp-5) var(--sp-6);
}
.bill-plan-head { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-6); flex-wrap:wrap; }
.bill-plan-label { color:var(--ink-3); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; }
.bill-plan-tier { font-family:var(--font-display); font-style:italic; font-size:var(--fs-2xl); color:var(--ink); margin-top:var(--sp-1); }
.bill-plan-stats { display:flex; gap:var(--sp-6); }
.bill-plan-stats > div { display:flex; flex-direction:column; gap:2px; }
.bill-stat-num { font-size:var(--fs-xl); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.bill-stat-lbl { font-size:var(--fs-xs); color:var(--ink-3); }

.bill-calc { display:flex; flex-direction:column; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.bill-slider { display:grid; grid-template-columns:160px 1fr 80px; align-items:center; gap:var(--sp-4); }
.bill-slider span { color:var(--ink-2); font-size:var(--fs-sm); }
.bill-slider input[type=range] { width:100%; accent-color:var(--brand-navy); }
.bill-slider output { font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; text-align:right; }

.bill-skus { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.bill-sku-card {
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--radius-2);
  padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-2);
  position:relative;
}
.bill-sku-bundle { border-color:var(--brand-gold); box-shadow:0 0 0 1px var(--brand-gold) inset; }
.bill-sku-bundle::before { content:"Best value"; position:absolute; top:-10px; right:var(--sp-4); background:var(--brand-gold); color:var(--ink); font-size:var(--fs-xs); padding:2px 8px; border-radius:99px; font-weight:600; }
.bill-sku-name { font-family:var(--font-display); font-style:italic; font-size:var(--fs-xl); color:var(--ink); }
.bill-sku-tagline { font-size:var(--fs-xs); color:var(--ink-3); }
.bill-sku-tier { font-size:var(--fs-sm); color:var(--ink-2); margin-top:var(--sp-1); }
.bill-sku-tier strong { color:var(--ink); }
.bill-sku-price { font-size:var(--fs-3xl); font-weight:700; color:var(--ink); margin-top:var(--sp-2); font-variant-numeric:tabular-nums; }
.bill-sku-per { font-size:var(--fs-sm); color:var(--ink-3); font-weight:400; margin-left:4px; }
.bill-sku-yearly { font-size:var(--fs-sm); color:var(--ink-2); }
.bill-sku-savings { color:var(--brand-navy); font-weight:600; }
.bill-sku-overage { font-size:var(--fs-xs); color:var(--ink-3); font-style:italic; }
.bill-sku-foot { margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--line-2); font-size:var(--fs-xs); color:var(--ink-3); }

.bill-pricing-table { margin-bottom:var(--sp-6); }
.bill-pricing-table h3 { font-size:var(--fs-md); color:var(--ink); margin:0 0 var(--sp-2) 0; display:flex; gap:var(--sp-3); align-items:baseline; }
.bill-pricing-tag { font-size:var(--fs-xs); color:var(--ink-3); font-weight:400; font-style:italic; }
.bill-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.bill-table th { text-align:left; color:var(--ink-3); font-weight:500; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; }
.bill-table td { padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line-2); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.bill-table td:first-child { color:var(--ink); font-weight:500; }

@media (max-width: 900px) {
  .bill-skus { grid-template-columns:1fr; }
  .bill-plan-stats { width:100%; justify-content:space-between; }
  .bill-slider { grid-template-columns:1fr; gap:var(--sp-1); }
}

/* ── QC Chip Strip — per-image 3-layer verdict badges ─────────────────── */
/* Spec: Tech Spec/18_THREE_LAYER_QC.md §7.1 */

.qc-chip-strip {
  display: inline-flex;
  gap: var(--sp-1);
  align-items: center;
  flex-wrap: wrap;
}

.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: var(--fs-xs);
  font-family: var(--font-body);
  line-height: 1.2;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
  font-variant-numeric: tabular-nums;
}

.qc-chip:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--ink-3);
}

.qc-chip:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 1px;
}

.qc-chip-glyph {
  font-weight: 600;
  font-size: var(--fs-xs);
  display: inline-flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
}

.qc-chip-label { color: inherit; }
.qc-chip-conf  { opacity: 0.7; font-size: 10px; }

/* States */
.qc-chip--pass {
  background: var(--surface-1);
  color: var(--ink);
  border-color: var(--line);
}
.qc-chip--pass .qc-chip-glyph { color: var(--brand-navy); }

.qc-chip--warn {
  background: var(--status-warn-bg, #fff7e6);
  color: var(--status-warn-ink, #8a5a00);
  border-color: var(--status-warn-line, #f0d089);
}
.qc-chip--warn .qc-chip-glyph { color: var(--status-warn-ink, #8a5a00); }

.qc-chip--fail {
  background: var(--status-danger-bg, #fdecec);
  color: var(--status-danger-ink, #9b1c1c);
  border-color: var(--status-danger-line, #f3b6b6);
}
.qc-chip--fail .qc-chip-glyph { color: var(--status-danger-ink, #9b1c1c); }

.qc-chip--pending {
  color: var(--ink-3);
  background: transparent;
  border-style: dashed;
}
.qc-chip--pending .qc-chip-glyph { color: var(--ink-3); }

/* Compact mode — shorter labels, tighter padding */
.qc-chip-strip--compact .qc-chip {
  padding: 1px 6px;
  font-size: 10px;
}
.qc-chip-strip--compact .qc-chip-glyph {
  width: 10px;
  height: 10px;
}

/* ── Settings → QC tab ────────────────────────────────────────────────── */
.qc-shell { display:flex; flex-direction:column; gap:var(--sp-8); }
.qc-block { padding-top:var(--sp-2); }
.qc-section-title { font-size:var(--fs-lg); font-weight:600; color:var(--ink); margin:0 0 var(--sp-1) 0; }
.qc-section-sub { color:var(--ink-3); font-size:var(--fs-sm); margin:0 0 var(--sp-4) 0; }
.qc-section-sub code { background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:var(--fs-xs); }
.qc-section-sub em { color:var(--ink-2); font-style:italic; }

.qc-sliders { display:flex; flex-direction:column; gap:var(--sp-3); background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-2); padding:var(--sp-5); }
.qc-slider-row { display:grid; grid-template-columns:240px 1fr 60px; align-items:center; gap:var(--sp-4); }
.qc-slider-label { display:flex; flex-direction:column; gap:2px; }
.qc-slider-title { font-size:var(--fs-sm); color:var(--ink); font-weight:500; }
.qc-slider-help { font-size:var(--fs-xs); color:var(--ink-3); }
.qc-range { width:100%; accent-color:var(--brand-navy); }
.qc-slider-out { font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; text-align:right; font-size:var(--fs-md); }

.qc-actions { display:flex; align-items:center; gap:var(--sp-2); }

.qc-routing-options { display:flex; flex-direction:column; gap:var(--sp-2); }
.qc-routing-opt { display:flex; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--radius-2); cursor:pointer; transition:background 100ms ease, border-color 100ms ease; align-items:flex-start; }
.qc-routing-opt:hover { background:var(--surface-2); }
.qc-routing-opt.active { border-color:var(--brand-navy); background:color-mix(in srgb, var(--brand-navy) 4%, transparent); }
.qc-routing-opt input[type=radio] { margin-top:3px; accent-color:var(--brand-navy); }
.qc-routing-label { font-size:var(--fs-sm); color:var(--ink); font-weight:500; }
.qc-routing-desc { font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px; }

.qc-cost-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.qc-cost-card { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-2); padding:var(--sp-4); }
.qc-cost-name { font-size:var(--fs-sm); color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--sp-2); }
.qc-cost-stats { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
.qc-cost-stats > div { display:flex; flex-direction:column; gap:1px; }
.qc-cost-num { font-size:var(--fs-md); color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.qc-cost-lbl { font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.qc-cost-empty { font-size:var(--fs-xs); color:var(--ink-3); font-style:italic; padding-top:var(--sp-2); }

.qc-ignore-items { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.qc-ignore-items li { background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-1); padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); color:var(--ink-2); }
.qc-empty { color:var(--ink-3); font-size:var(--fs-sm); padding:var(--sp-3); border:1px dashed var(--line); border-radius:var(--radius-2); }

@media (max-width: 900px) {
  .qc-slider-row { grid-template-columns:1fr; gap:var(--sp-1); }
  .qc-cost-grid  { grid-template-columns:1fr; }
}

/* JobCard composite QC pill — Spec: Tech Spec/18_THREE_LAYER_QC.md §7.1 */
.jc-qc-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jc-qc-pass {
  background: rgba(46, 125, 50, 0.08);
  color: var(--brand-navy);
  border-color: rgba(46, 125, 50, 0.25);
}
.jc-qc-fail {
  background: rgba(155, 28, 28, 0.08);
  color: var(--status-danger-ink, #9b1c1c);
  border-color: rgba(155, 28, 28, 0.25);
}
.jc-qc-incomplete {
  background: transparent;
  color: var(--ink-3);
  border-style: dashed;
}


/* Bulk actions drawer — Shopify-style slide-up + keyboard hint
   Spec: Tech Spec/16_UI_UX_SPEC.md §225 */
@keyframes bulk-bar-slide-in {
  from { transform: translateX(-50%) translateY(120%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}
.handle-bulk-bar {
  animation: bulk-bar-slide-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.handle-bulk-bar .bulk-kbd {
  font-size: 10px;
  color: var(--ink-3, var(--text-muted));
  padding: 1px 5px;
  border: 1px solid var(--line, var(--border-default));
  border-radius: 3px;
  margin-left: 4px;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}

/* PWA install + update banners — Tech Spec/_COMPANION_APPS.md §2.2, §7.4 */
.handle-pwa-install,
.handle-pwa-update {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  z-index: 9999;
  max-width: calc(100vw - 32px);
  animation: hpwa-slide-in 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes hpwa-slide-in {
  from { transform: translateX(-50%) translateY(120%); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.handle-pwa-install .hpwa-icon {
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--brand-navy) 8%, transparent);
  border-radius: var(--radius-1);
  flex-shrink: 0;
}
.hpwa-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hpwa-title { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.hpwa-sub   { font-size: var(--fs-xs); color: var(--ink-3); }
.hpwa-actions { display: flex; gap: var(--sp-2); margin-left: auto; flex-shrink: 0; }
.hpwa-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: var(--radius-1);
  font-size: var(--fs-xs);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.hpwa-btn:hover { background: var(--surface-2); }
.hpwa-btn-primary {
  background: var(--brand-navy);
  color: white;
  border-color: var(--brand-navy);
}
.hpwa-btn-primary:hover { background: color-mix(in srgb, var(--brand-navy) 85%, black); }
.hpwa-update-msg { font-size: var(--fs-sm); color: var(--ink); }

@media (max-width: 480px) {
  .handle-pwa-install,
  .handle-pwa-update {
    left: 16px;
    right: 16px;
    transform: none;
    flex-wrap: wrap;
    animation-name: hpwa-slide-in-mobile;
  }
}
@keyframes hpwa-slide-in-mobile {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Logo dropdown nav menu — Brandon's request 2026-05-02 */
.handle-logo-nav {
  position: fixed;
  background: #FFFFFF;
  background: color-mix(in srgb, var(--paper, #F5F1EA) 92%, white);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  box-shadow: 0 20px 48px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  z-index: 99999;
  min-width: 720px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  animation: hln-fade-in 160ms cubic-bezier(0.2, 0.9, 0.3, 1);
  backdrop-filter: saturate(140%) blur(2px);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
}
.handle-logo-nav-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.18); z-index: 99998;
  animation: hln-backdrop-in 160ms ease;
}
@keyframes hln-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hln-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hln-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
}
.hln-group { min-width: 0; }
.hln-group-title {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 var(--sp-2) 0;
  padding-left: var(--sp-2);
}
.hln-items { display: flex; flex-direction: column; gap: 2px; }
.hln-item {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-1);
  text-decoration: none;
  color: var(--ink);
  transition: background 100ms ease;
}
.hln-item:hover { background: var(--surface-2); }
.hln-item--active {
  background: color-mix(in srgb, var(--brand-navy) 6%, transparent);
}
.hln-item--active .hln-item-label { color: var(--brand-navy); font-weight: 600; }
.hln-item-label {
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.hln-check {
  color: var(--brand-navy);
  font-size: 11px;
  margin-left: auto;
}
.hln-item-desc {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 1px;
}
.hln-foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-2) var(--radius-2);
}
.hln-foot-hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .handle-logo-nav { min-width: 0; left: 16px !important; right: 16px; }
  .hln-inner { grid-template-columns: 1fr; }
}

/* Theme toggle button — sits in topbar */
.handle-theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-family: inherit;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.handle-theme-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.handle-theme-toggle .theme-toggle-label { font-weight: 500; }

@media (max-width: 540px) {
  .handle-theme-toggle .theme-toggle-label { display: none; }
  .handle-theme-toggle { padding: 6px 8px; }
}

/* QcCompare component — visual hallucination check
   Spec: project_qc_visual_review.md */
.qcc-shell { display: flex; flex-direction: column; gap: var(--sp-3); }
.qcc-modes { display: flex; gap: var(--sp-2); align-items: center; }
.qcc-mode-btn { padding: 6px 12px; background: var(--surface-1); border: 1px solid var(--line); color: var(--ink-2); border-radius: var(--radius-1); font-size: var(--fs-xs); cursor: pointer; font-family: inherit; }
.qcc-mode-btn:hover { background: var(--surface-2); color: var(--ink); }
.qcc-mode-btn.is-active { background: var(--brand-navy); color: white; border-color: var(--brand-navy); }
.qcc-hint { font-size: var(--fs-xs); color: var(--ink-3); margin-left: auto; font-style: italic; }

.qcc-stage { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-2); overflow: hidden; position: relative; min-height: 400px; }
.qcc-img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.qcc-label { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.65); color: white; font-size: 10px; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; pointer-events: none; }

/* Side-by-side */
.qcc-side { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.qcc-side-pane { position: relative; background: var(--surface-1); }

/* Flip */
.qcc-flip { position: relative; cursor: pointer; }
.qcc-flip-label { position: absolute; bottom: 12px; right: 12px; background: var(--brand-navy); color: white; font-size: 11px; padding: 4px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Slider */
.qcc-slider { position: relative; user-select: none; }
.qcc-slider-orig, .qcc-slider-enh { position: absolute; top: 0; left: 0; right: 0; }
.qcc-slider-orig { z-index: 1; }
.qcc-slider-enh  { z-index: 2; }
.qcc-slider > .qcc-slider-orig { position: relative; }
.qcc-slider-handle { position: absolute; top: 0; bottom: 0; z-index: 3; transform: translateX(-50%); pointer-events: auto; }
.qcc-slider-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: white; box-shadow: 0 0 4px rgba(0,0,0,0.5); }
.qcc-slider-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; color: var(--brand-navy); font-size: 14px; padding: 8px 6px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-weight: 700; cursor: ew-resize; }

/* Actions */
.qcc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.qcc-action { padding: 8px 16px; border-radius: var(--radius-1); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; }
.qcc-action:hover { background: var(--surface-2); }
.qcc-action-approve { background: #2e7d32; color: white; border-color: #2e7d32; }
.qcc-action-approve:hover { background: #266b29; }
.qcc-action-rerun   { background: var(--brand-navy); color: white; border-color: var(--brand-navy); }
.qcc-action-flag    { color: #9b1c1c; border-color: #9b1c1c; }
.qcc-action-flag:hover { background: rgba(155,28,28,0.08); }

/* ════════════════════════════════════════════════════════════════════════
 * Phase 1F #1 — A1.3 Component Primitives (added 2026-05-03)
 * Source of truth: Tech Spec/_DESIGN_LANGUAGE.md §3
 * All token-driven, both themes work via existing token system.
 * ════════════════════════════════════════════════════════════════════════ */

/* ───── Button — link variant (5th, completes the set) ───── */
.hc-btn-link {
  background: transparent;
  color: var(--brand-primary);
  border: none;
  padding: 4px 6px;
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.hc-btn-link:hover { color: var(--brand-primary-deep); }
.hc-btn-link:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.hc-btn-link:disabled { opacity: 0.5; cursor: not-allowed; }

/* ───── Checkbox + Radio (form primitives) ───── */
.hc-checkbox, .hc-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  font-size: var(--type-sm);
  color: var(--text-primary);
  user-select: none;
}
.hc-checkbox input, .hc-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.hc-checkbox-box, .hc-radio-dot {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.hc-checkbox-box { border-radius: var(--r-sm); }
.hc-radio-dot   { border-radius: var(--r-pill); }
.hc-checkbox input:checked + .hc-checkbox-box,
.hc-radio    input:checked + .hc-radio-dot {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.hc-checkbox input:checked + .hc-checkbox-box::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--text-on-brand);
  border-bottom: 2px solid var(--text-on-brand);
  transform: rotate(45deg) translate(-1px, -1px);
}
.hc-radio input:checked + .hc-radio-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--text-on-brand);
}
.hc-checkbox input:focus-visible + .hc-checkbox-box,
.hc-radio    input:focus-visible + .hc-radio-dot {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.hc-checkbox input:disabled + .hc-checkbox-box,
.hc-radio    input:disabled + .hc-radio-dot { opacity: 0.5; }

/* ───── Chip (3 variants — CRITICAL for Modular Picker) ───── */
.hc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--picker-chip-h);
  padding: 0 var(--picker-chip-pad-x);
  border-radius: var(--r-pill);
  font-size: var(--type-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.hc-chip:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
.hc-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Chip variants */
.hc-chip--filled {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}
.hc-chip--filled:hover {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary-deep);
}
.hc-chip--outlined { /* default chip is outlined */ }
.hc-chip--ghost {
  background: transparent;
  border-color: transparent;
}
.hc-chip--ghost:hover { background: var(--brand-primary-soft); }

/* Chip states (used in Modular Picker for selection / image-aware filtering) */
.hc-chip[data-selected="true"],
.hc-chip.is-selected {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  border-color: var(--brand-primary);
}
.hc-chip[disabled],
.hc-chip.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.hc-chip-icon { width: 14px; height: 14px; flex-shrink: 0; }
.hc-chip-count {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  opacity: 0.75;
  margin-left: 2px;
}

/* ───── Badge — 5 status variants (extend existing single-variant .hc-badge) ───── */
.hc-badge--neutral {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.hc-badge--info {
  background: var(--status-info-bg);
  color: var(--status-info-ink);
  border: 1px solid var(--status-info-line);
}
.hc-badge--success {
  background: var(--status-success-bg);
  color: var(--status-success-ink);
  border: 1px solid var(--status-success-line);
}
.hc-badge--warning {
  background: var(--status-warn-bg);
  color: var(--status-warn-ink);
  border: 1px solid var(--status-warn-line);
}
.hc-badge--danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-ink);
  border: 1px solid var(--status-danger-line);
}
.hc-badge[class*="hc-badge--"] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
}

/* ───── Pill (generic, smaller than badge — different from .sla-pill) ───── */
.hc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--brand-primary-soft);
  white-space: nowrap;
}

/* ───── Modal (full-purpose, separate from cmdk-modal) ───── */
.hc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  animation: hc-modal-fade-in var(--dur-base) var(--ease-out);
}
.hc-modal {
  background: var(--bg-elevated);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - var(--sp-12));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
}
.hc-modal-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  color: var(--text-primary);
  margin: 0;
}
.hc-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--type-xl);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.hc-modal-close:hover { background: var(--brand-primary-soft); color: var(--text-primary); }
.hc-modal-body {
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  flex: 1;
}
.hc-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
@keyframes hc-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ───── Drawer (slide-in panel — different from .handle-sidepanel) ───── */
.hc-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: var(--z-modal);
  animation: hc-modal-fade-in var(--dur-base) var(--ease-out);
}
.hc-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 480px;
  max-width: 90vw;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-modal) + 1);
  display: flex;
  flex-direction: column;
  animation: hc-drawer-slide-in-right var(--dur-base) var(--ease-out);
}
.hc-drawer--right { right: 0; }
.hc-drawer--left  {
  left: 0;
  border-left: none;
  border-right: 1px solid var(--border-default);
  animation-name: hc-drawer-slide-in-left;
}
.hc-drawer-header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hc-drawer-body {
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
  flex: 1;
}
.hc-drawer-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}
@keyframes hc-drawer-slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes hc-drawer-slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ───── Tooltip ───── */
.hc-tooltip {
  position: absolute;
  background: var(--text-primary);
  color: var(--text-on-brand);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--type-xs);
  line-height: 1.3;
  white-space: nowrap;
  z-index: var(--z-tooltip);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.hc-tooltip[data-visible="true"],
[data-tooltip]:hover .hc-tooltip,
[data-tooltip]:focus-visible .hc-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.hc-tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text-primary);
}

/* ───── Card variants (extend existing .card-* with semantic variants) ───── */
.hc-card {
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.hc-card--flat {
  background: var(--bg-surface);
  border: none;
}
.hc-card--elevated {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
}
.hc-card--outlined {
  background: transparent;
  border: 1px solid var(--border-default);
}
.hc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.hc-card-title {
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.hc-card-meta {
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.hc-card-body { color: var(--text-secondary); font-size: var(--type-sm); }
.hc-card-footer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* ════════════════════════════════════════════════════════════════════════
 * Phase 1F #1 — A1.4 Handle-specific Composites (added 2026-05-03)
 * Source of truth: Tech Spec/_DESIGN_LANGUAGE.md §4
 * Composites that don't exist in any UI kit — Handle's unique surfaces.
 * All token-driven, both themes via existing token system.
 * ════════════════════════════════════════════════════════════════════════ */

/* ───── StageWorkShell — the 4th view mode of every stage chip ─────
 * Lives at /{stage}?view=work. Used by Edit/Shoot/Deliver/Revise.
 * Per rail-shell architecture: every operator action lives inside a stage chip.
 */
.stage-work-shell {
  display: grid;
  grid-template-rows: var(--stage-work-toolbar-h) 1fr;
  height: calc(100vh - var(--layout-topbar-h) - var(--stage-rail-h));
  background: var(--bg-page);
}
.stage-work-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--stage-canvas-pad);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
  gap: var(--sp-3);
}
.stage-work-toolbar-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-lg);
  color: var(--text-primary);
}
.stage-work-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.stage-work-canvas {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.stage-work-canvas--with-sidebar {
  grid-template-columns: 1fr var(--deepview-rightpanel-w);
}
.stage-work-main {
  padding: var(--stage-canvas-pad);
  overflow-y: auto;
}
.stage-work-sidebar {
  border-left: 1px solid var(--border-default);
  background: var(--bg-surface);
  overflow-y: auto;
}

/* ───── ModularPicker — THE shared component (3 modes) ─────
 * Per Q&A: same component in /batch (global), per-image overrides (mini),
 * image deep view right panel (deep). Image-aware section rendering.
 */
.modular-picker {
  display: flex;
  flex-direction: column;
  gap: var(--picker-section-gap);
  padding: var(--sp-4);
  background: var(--bg-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-default);
}
.modular-picker--mode-global { /* /batch global panel — full size */ }
.modular-picker--mode-mini   { /* per-image override popover — compact */
  padding: var(--sp-3);
  gap: var(--sp-3);
  font-size: var(--type-sm);
}
.modular-picker--mode-deep   { /* image deep view right panel — fills rightpanel-w */
  border: none;
  border-radius: 0;
  height: 100%;
  overflow-y: auto;
}
.modular-picker-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.modular-picker-section--hidden { display: none; } /* image-aware section-level filtering */
.modular-picker-section-label {
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.modular-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--picker-chip-gap);
}
.modular-picker-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--picker-tile-w), 1fr));
  gap: var(--picker-chip-gap);
}
.modular-picker-tile {
  width: var(--picker-tile-w);
  height: var(--picker-tile-h);
  border-radius: var(--r-md);
  border: 1px solid var(--border-default);
  background: var(--bg-elevated);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: var(--type-xs);
  color: var(--text-secondary);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.modular-picker-tile:hover { border-color: var(--border-strong); }
.modular-picker-tile.is-selected,
.modular-picker-tile[data-selected="true"] {
  border-color: var(--brand-primary);
  border-width: 2px;
  background: var(--brand-primary-soft);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.modular-picker-tile-glyph { font-size: 18px; opacity: 0.85; }
.modular-picker-custom-text {
  width: 100%;
  min-height: 80px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  resize: vertical;
}
.modular-picker-custom-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--type-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-2);
}
.modular-picker-advanced {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}
.modular-picker-advanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--picker-advanced-collapsed-h);
  padding: 0 var(--sp-3);
  cursor: pointer;
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.modular-picker-advanced-body {
  padding: var(--sp-3);
  border-top: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.modular-picker-advanced[data-collapsed="true"] .modular-picker-advanced-body {
  display: none;
}
.modular-picker-smart-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--picker-chip-gap);
  padding: var(--sp-2);
  background: var(--brand-primary-soft);
  border-radius: var(--r-md);
}

/* ───── Filmstrip — always-visible variant browser ─────
 * Per Q&A: Original first, then variants by category. Spacebar/click overlay.
 * Multi-pick checkboxes for delivery_variant_ids[].
 */
.filmstrip {
  display: flex;
  align-items: center;
  gap: var(--filmstrip-thumb-gap);
  height: var(--filmstrip-h);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  overflow-x: auto;
  scrollbar-width: thin;
}
.filmstrip-thumb {
  position: relative;
  width: var(--filmstrip-thumb-w);
  height: var(--filmstrip-thumb-h);
  flex-shrink: 0;
  border-radius: var(--filmstrip-thumb-r);
  background: var(--bg-elevated) center / cover no-repeat;
  cursor: pointer;
  border: var(--filmstrip-current-ring-w) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
  overflow: hidden;
}
.filmstrip-thumb:hover { border-color: var(--border-strong); }
.filmstrip-thumb.is-current { border-color: var(--brand-primary); }
.filmstrip-thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 4px;
  font-size: var(--type-xs);
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  text-align: center;
  font-weight: var(--weight-medium);
}
.filmstrip-thumb-deliver-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}
.filmstrip-thumb-hero-star {
  position: absolute;
  top: 4px;
  right: 4px;
  width: var(--filmstrip-hero-star-size);
  height: var(--filmstrip-hero-star-size);
  color: var(--brand-accent);
  z-index: 2;
}
.filmstrip-thumb-qc-badges {
  position: absolute;
  bottom: 18px;
  right: 4px;
  display: flex;
  gap: 2px;
  z-index: 2;
}
.filmstrip-qc-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--text-muted);
}
.filmstrip-qc-dot--pass { background: var(--status-success-ink); }
.filmstrip-qc-dot--flag { background: var(--status-warn-ink); }
.filmstrip-qc-dot--fail { background: var(--status-danger-ink); }
.filmstrip-thumb--original {
  border-color: var(--border-strong);
  border-style: dashed;
}
.filmstrip-thumb-download {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-size: var(--type-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.filmstrip-thumb:hover .filmstrip-thumb-download { opacity: 1; }

/* ───── PerStreamBadge — multi-stream architecture ─────
 * Per spec 13_PACKAGE_AWARENESS + locked Q&A: every job-touching surface
 * shows per-stream state badges (Ext/Int/FloorPlan/Walkthrough/Reel/Matterport).
 */
.stream-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--stream-badge-h-md);
  padding: 0 var(--stream-badge-pad-x);
  border-radius: var(--stream-badge-radius);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  white-space: nowrap;
}
.stream-badge--sm { height: var(--stream-badge-h-sm); font-size: 10px; }
.stream-badge--lg { height: var(--stream-badge-h-lg); }
.stream-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.stream-badge[data-stream="exterior"]    .stream-badge-dot { background: var(--stream-exterior); }
.stream-badge[data-stream="interior"]    .stream-badge-dot { background: var(--stream-interior); }
.stream-badge[data-stream="floorplan"]   .stream-badge-dot { background: var(--stream-floorplan); }
.stream-badge[data-stream="walkthrough"] .stream-badge-dot { background: var(--stream-walkthrough); }
.stream-badge[data-stream="reel"]        .stream-badge-dot { background: var(--stream-reel); }
.stream-badge[data-stream="matterport"]  .stream-badge-dot { background: var(--stream-matterport); }
.stream-badge[data-state="pending"]   { opacity: 0.5; }
.stream-badge[data-state="in_progress"] { color: var(--text-primary); }
.stream-badge[data-state="editor_assigned"] { color: var(--status-warn-ink); }
.stream-badge[data-state="delivered"] {
  background: var(--status-success-bg);
  color: var(--status-success-ink);
  border-color: var(--status-success-line);
}
.stream-badge-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--stream-badge-gap);
}

/* ───── RichCard — default card pattern (Q&A: rich Cards everywhere) ─────
 * Used in /batch Pending Review queue + Job grid + MyDay landing.
 * NOT compact — operator surfaces always render rich.
 */
.rich-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  padding: var(--pending-card-pad);
  min-height: var(--pending-card-min-h);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.rich-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.rich-card-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.rich-card-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.rich-card-title {
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rich-card-agent {
  font-size: var(--type-sm);
  color: var(--text-secondary);
}
.rich-card-package {
  font-size: var(--type-xs);
  color: var(--brand-accent);
  font-weight: var(--weight-medium);
}
.rich-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.rich-card-routing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--type-xs);
  color: var(--text-secondary);
}
.rich-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-end;
  min-width: var(--pending-card-status-w);
}
.rich-card-status {
  font-size: var(--type-xs);
  color: var(--text-muted);
}
.rich-card-smart-action-pill {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--brand-primary-soft);
  color: var(--text-secondary);
  border-radius: var(--r-pill);
  font-style: italic;
}

/* ───── PendingReviewCard (specialization of RichCard for /batch queue) ───── */
.pending-review-card { /* inherits .rich-card */ }
.pending-review-card[data-status="detecting"] { border-style: dashed; opacity: 0.85; }
.pending-review-card[data-status="ready"] { border-color: var(--status-success-ink); }
.pending-review-card[data-archived="true"] { display: none; } /* Show archived toggle reveals */

/* ───── AddressMatchTriageCard (3-way prompt) ─────
 * Per Q&A: when folder address-matches existing job → Revision/Reshoot/New shoot
 */
.triage-card {
  width: var(--triage-card-w);
  max-width: 100%;
  background: var(--status-warn-bg);
  border: 1px solid var(--status-warn-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.triage-card-title {
  font-size: var(--type-md);
  font-weight: var(--weight-semibold);
  color: var(--status-warn-ink);
}
.triage-card-body {
  font-size: var(--type-sm);
  color: var(--text-primary);
  line-height: 1.5;
}
.triage-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--triage-button-gap);
  margin-top: var(--sp-2);
}
.triage-card-action {
  height: var(--triage-button-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--type-md);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.triage-card-action:hover { border-color: var(--brand-primary); }
.triage-card-action-glyph { font-size: 22px; }
.triage-card-action-meta {
  font-size: var(--type-xs);
  color: var(--text-muted);
  font-weight: var(--weight-normal);
  margin-left: auto;
}

/* ───── MyDayGrid — landing page 3-section layout ─────
 * Per Q&A: Needs you now / In flight / Coming up
 */
.myday-grid {
  display: flex;
  flex-direction: column;
  gap: var(--myday-section-gap);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--sp-6);
}
.myday-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.myday-section-header {
  height: var(--myday-section-title-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--border-default);
}
.myday-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  color: var(--text-primary);
}
.myday-section-count {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--text-muted);
}
.myday-section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--myday-card-w), 1fr));
  gap: var(--sp-3);
}
.myday-section--needs-you-now .myday-section-title { color: var(--status-danger-ink); }
.myday-section--in-flight     .myday-section-title { color: var(--brand-primary); }
.myday-section--coming-up     .myday-section-title { color: var(--text-muted); }

/* ───── QCReviewLayout — fullscreen + filmstrip + Modular Picker ─────
 * Per Q&A: image deep view IS the QC review surface (no separate /edit/{id}/review).
 */
.qcreview-layout {
  display: grid;
  grid-template-columns: 1fr var(--deepview-rightpanel-w);
  grid-template-rows: 1fr var(--filmstrip-h);
  height: calc(100vh - var(--layout-topbar-h));
  background: var(--bg-page);
}
.qcreview-main {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--deepview-main-pad);
  background: var(--ink-black); /* dark backdrop helps photo evaluation */
  min-height: var(--qcreview-main-min-h);
}
.qcreview-main-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  user-select: none;
}
.qcreview-toolbar {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  height: var(--qcreview-toolbar-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  z-index: 2;
}
.qcreview-rightpanel {
  grid-column: 2;
  grid-row: 1 / span 2;
  border-left: 1px solid var(--border-default);
  background: var(--bg-surface);
  overflow-y: auto;
}
.qcreview-filmstrip {
  grid-column: 1;
  grid-row: 2;
}
.qcreview-decision-bar {
  /* Touch UX bottom action bar — appears on tablet/mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: var(--deepview-rightpanel-w);
  height: var(--qcreview-decision-bar-h);
  display: none;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--sp-4);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-default);
  z-index: var(--z-sticky);
}
@media (hover: none) and (pointer: coarse) {
  .qcreview-decision-bar { display: flex; }
}

/* ───── SettingsLeftRail — 5-group nav + auto-save indicator ───── */
.settings-shell {
  display: grid;
  grid-template-columns: var(--settings-rail-w) 1fr;
  height: calc(100vh - var(--layout-topbar-h));
}
.settings-rail {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  overflow-y: auto;
  padding: var(--sp-4) 0;
}
.settings-rail-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-4);
}
.settings-rail-group-label {
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-4);
}
.settings-rail-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--type-sm);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.settings-rail-link:hover { background: var(--brand-primary-soft); color: var(--text-primary); }
.settings-rail-link.is-active {
  background: var(--brand-primary-soft);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.settings-content {
  overflow-y: auto;
  padding: var(--sp-6);
}
.settings-content-inner {
  max-width: var(--settings-content-max-w);
  margin: 0 auto;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--settings-section-gap);
}
.settings-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  color: var(--text-primary);
}
.settings-autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--type-xs);
  color: var(--text-muted);
  font-style: italic;
}
.settings-autosave-indicator[data-state="saving"] { color: var(--status-warn-ink); }
.settings-autosave-indicator[data-state="saved"]  { color: var(--status-success-ink); }
.settings-autosave-indicator[data-state="error"]  { color: var(--status-danger-ink); }

/* ───── AdminSurfaceWrapper — visual differentiator for admin.handled.media ─────
 * Per moat rule: operator never sees prompt content / costs.
 * Admin gets full visibility on a separate subdomain — wrapper makes it obvious.
 */
.admin-surface {
  position: relative;
}
.admin-surface::before {
  content: 'ADMIN';
  position: fixed;
  top: 8px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  color: var(--brand-accent);
  background: var(--brand-accent-soft);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  z-index: var(--z-tooltip);
  pointer-events: none;
  border: 1px solid var(--brand-accent);
  opacity: 0.85;
}
.admin-surface-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--brand-accent);
  background: var(--brand-accent-soft);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.admin-surface-prompt-preview {
  background: var(--bg-page);
  border: 1px dashed var(--brand-accent);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}

/* ───── SidePanelStack — Linear-style stacked drawer pattern ───── */
.side-panel-stack {
  position: fixed;
  top: var(--layout-topbar-h);
  right: 0;
  bottom: 0;
  display: flex;
  pointer-events: none;
  z-index: calc(var(--z-modal) - 1);
}
.side-panel-stack > .hc-drawer {
  position: relative;
  pointer-events: auto;
  margin-left: -40px; /* slight stack overlap */
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.side-panel-stack > .hc-drawer:first-child { margin-left: 0; }

/* ───── Stage view-mode tab toggle (List/Map/Cards/Work) ─────
 * Extends existing .tabs to include the new Work mode.
 */
.stage-view-tabs {
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 2px;
  height: var(--stage-tab-h);
}
.stage-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--type-sm);
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.stage-view-tab:hover { color: var(--text-primary); }
.stage-view-tab.is-active {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}
.stage-view-tab-glyph { font-size: 14px; opacity: 0.85; }


/* ───── ModularPicker — chip + tile primitives (PHASE F) ───── */
.mp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 99px;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  color: var(--text-primary); font-size: var(--type-sm);
  cursor: pointer; transition: background 100ms, border-color 100ms;
  font-family: var(--font-sans);
}
.mp-chip:hover { background: var(--bg-surface); border-color: var(--text-secondary); }
.mp-chip.active {
  background: var(--brand-aged-bronze, #6E5A2C);
  color: var(--bg-elevated, #fff);
  border-color: var(--brand-aged-bronze, #6E5A2C);
}
.mp-chip-tag {
  font-size: 9px; padding: 1px 5px; border-radius: 99px; margin-left: 4px;
  background: rgba(110,90,44,0.20); color: inherit;
  text-transform: uppercase; letter-spacing: .04em;
}
.mp-sa-up {
  margin-left: 4px; font-size: 10px; opacity: 0.7;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.mp-adv-row {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--type-sm); color: var(--text-secondary);
}
.mp-adv-label { font-weight: 500; }
.mp-adv-row select, .mp-adv-row input[type=text] {
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); padding: 6px 10px;
  font-family: var(--font-sans); font-size: var(--type-sm); color: var(--text-primary);
}
.modular-picker-empty {
  font-size: var(--type-xs); color: var(--text-muted);
  padding: 0 12px 8px; font-style: italic;
}

/* Phase 3c — Fix: ModularPicker tiles use .active class but CSS only had .is-selected */
.modular-picker-tile.active {
  border-color: var(--brand-aged-bronze, #6E5A2C);
  border-width: 2px;
  background: rgba(110,90,44,0.15);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* Make selection summary in foot bar more prominent */
.pv2-foot .pv2-cost-summary {
  font-size: 12px !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
}
.pv2-grid .pv2-gtile { will-change: width, height; }


/* === STAGING LENS — Smart Action inline scope (2026-05-11) === */
.mp-chip.mp-chip-sa {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  white-space: normal;
  padding: 8px 12px;
  line-height: 1.3;
  height: auto;
  min-height: var(--picker-chip-h, 32px);
  max-width: 320px;
}
.mp-chip.mp-chip-sa .mp-sa-label {
  font-weight: 600;
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-tight);
}
.mp-chip.mp-chip-sa .mp-sa-scope {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.mp-chip.mp-chip-sa.active .mp-sa-scope {
  color: var(--text-secondary);
}
.mp-chip.mp-chip-sa .mp-sa-up {
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: 0.8;
}
/* === END STAGING LENS === */

/* ============================================================================
 * GLASS-BRONZE UTILITY CLASSES (Phase C.2)
 *
 * Locked 2026-05-23 PM. Consume the glass-bronze token stack from
 * tokens.css section 10. Pure additive per RULES.md reskin-not-rebuild:
 * pages add these classes to existing elements; no element is
 * automatically restyled, no markup is rewritten.
 *
 * Activation: a parent ancestor (body or page wrapper) must carry
 * the .glass-on class for the utility classes to take effect. This
 * lets us flip the entire glass-bronze treatment via the
 * GLASS_SURFACES feature flag in /admin/color-tool without per-page
 * code changes. When .glass-on is absent, these classes are no-ops.
 * ========================================================================= */

/* ---------- Page-wrapper halo: the single soft bronze radial atop the page.
   Only one .halo-bg per page (verify-Chrome gate #4: bronze restraint). ---- */
body.glass-on.halo-bg,
.glass-on .halo-bg,
.glass-on.halo-bg {
  background-image: var(--halo-bronze-radial), linear-gradient(var(--bg-page, #1A1814), var(--bg-page, #1A1814)) !important;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-attachment: fixed, fixed;
}

/* ---------- Glass card: opt-in semi-transparent frosted surface ---------- */
.glass-on .glass-surface {
  background: var(--surface-glass);
  backdrop-filter: var(--backdrop-blur-glass);
  -webkit-backdrop-filter: var(--backdrop-blur-glass);
  box-shadow: var(--depth-shadow-soft);
  border: none; /* the box-shadow inset provides the border-equivalent */
  border-radius: 12px;
  transition: box-shadow 180ms ease-out, transform 180ms ease-out;
}
.glass-on .glass-surface-elevated {
  background: var(--surface-glass-elevated);
  backdrop-filter: var(--backdrop-blur-glass);
  -webkit-backdrop-filter: var(--backdrop-blur-glass);
  box-shadow: var(--depth-shadow-elevated);
  border: none;
  border-radius: 14px;
  transition: box-shadow 220ms ease-out, transform 220ms ease-out;
}

/* ---------- Bronze rim: focused / hero element only.
   Apply via JS to one element at a time. ----------------------------------- */
.glass-on .glass-rim {
  box-shadow: var(--depth-shadow-soft), var(--rim-bronze-soft);
}
.glass-on .glass-rim-strong {
  box-shadow: var(--depth-shadow-elevated), var(--rim-bronze-strong);
}

/* ---------- Hover lift: subtle elevation on hover for interactive cards --- */
.glass-on .glass-hover {
  cursor: pointer;
}
.glass-on .glass-hover:hover {
  background-color: var(--state-hover-bg);
  transform: translateY(-1px);
  box-shadow: var(--depth-shadow-elevated);
}
.glass-on .glass-hover:active {
  transform: translateY(0);
  background-color: var(--state-active-bg);
}

/* ---------- Focus ring (LCH-derived bronze, works in light + dark) ------- */
.glass-on .glass-focusable:focus-visible {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- Sub-elements with frosted treatment inside a glass-surface --- */
.glass-on .glass-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    lch(from var(--lch-paper) calc(l - 12) c h / 0.18) 20%,
    lch(from var(--lch-paper) calc(l - 12) c h / 0.18) 80%,
    transparent);
  border: 0;
  margin: 12px 0;
}

/* ---------- Eyebrow label that matches /money's small-caps treatment --- */
.glass-on .glass-eyebrow {
  font-family: var(--font-mono, ui-monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* End of glass-bronze utility classes.
 * Apply via class addition only (per reskin-not-rebuild). The
 * GLASS_SURFACES feature flag toggles document.body.classList.add('glass-on')
 * which activates all the above rules. When the flag is off, nothing
 * visually changes -- the classes resolve to no-ops.
 */

/* ============================================================================
 * 11. AURORA THEME (Phase C.5) -- dramatic glass variant
 *
 * Locked 2026-05-23 PM per Brandon. Activated by body.theme-aurora class.
 * Default theme is handle-deep (no class needed) -- the calm-premium-dark
 * baseline shipped in section 10.
 *
 * Aurora amplifies the dark-mode glass into Apple-tier dramatic glass:
 *   - Mesh gradient on page bg (not just radial halo) -- gives blur signal
 *   - Specular top-edge highlight on cards (crisp white-bronze light line)
 *   - Bronze-tinted dramatic drop shadows (warm depth not just black drop)
 *   - More saturated AR rim with light bleed
 *   - Stronger backdrop-filter blur (the bg now has texture to blur)
 *
 * Per RULES.md reskin-not-rebuild: pure additive. Removing body.theme-aurora
 * restores handle-deep instantly. Each theme = three LCH inputs + a small
 * set of token overrides; never a code rewrite per theme.
 * ========================================================================= */

:root[data-theme="dark"] body.theme-aurora,
:root[data-theme="dark"] body.theme-aurora.glass-on,
:root[data-theme="dark"] body.theme-aurora.glass-on.halo-bg {
  /* Page bg: layered mesh of bronze halos that the backdrop-filter has
     real signal to blur. Multiple radial-gradients = the "aurora" feel
     without literal cosmic saturation. Eye-comfortable: total bronze
     coverage stays low; the mesh is mostly transparent over ink. */
  background-image:
    radial-gradient(1100px ellipse at 18% -10%,
      lch(from var(--lch-bronze) 70 50 h / 0.42),
      lch(from var(--lch-bronze) 70 50 h / 0.10) 30%,
      transparent 60%),
    radial-gradient(1300px ellipse at 90% 20%,
      lch(from var(--lch-bronze) 65 40 h / 0.28),
      lch(from var(--lch-bronze) 65 40 h / 0.05) 32%,
      transparent 60%),
    radial-gradient(800px ellipse at 50% 80%,
      lch(from var(--lch-bronze) 60 38 h / 0.18),
      transparent 55%),
    linear-gradient(var(--bg-page, #1A1814), var(--bg-page, #1A1814)) !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
}

/* Cards under aurora: stronger top specular highlight (crisp white-bronze
   light line), bronze-tinted outer drop shadow (warm depth not just black),
   bigger backdrop blur since the bg now has texture to blur properly. */
:root[data-theme="dark"] body.theme-aurora .glass-surface {
  background-color: lch(from var(--lch-ink) calc(l + 14) c h / 0.62) !important;
  backdrop-filter: blur(32px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
  box-shadow:
    0 1px 0 0 lch(from var(--lch-bronze) 88 30 h / 0.28) inset,
    0 20px 56px -12px lch(from var(--lch-bronze) 20 30 h / 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px lch(from var(--lch-bronze) 60 24 h / 0.18) !important;
}

:root[data-theme="dark"] body.theme-aurora .glass-surface-elevated {
  background-color: lch(from var(--lch-ink) calc(l + 20) c h / 0.74) !important;
  backdrop-filter: blur(36px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(170%) !important;
  box-shadow:
    0 1px 0 0 lch(from var(--lch-bronze) 88 30 h / 0.36) inset,
    0 40px 96px -16px lch(from var(--lch-bronze) 20 30 h / 0.55),
    0 12px 32px -8px rgba(0, 0, 0, 0.65),
    0 0 0 1px lch(from var(--lch-bronze) 60 24 h / 0.22) !important;
}

/* AR rim under aurora: dramatic light bleed -- the hero card glows. */
:root[data-theme="dark"] body.theme-aurora .glass-rim {
  box-shadow:
    0 1px 0 0 lch(from var(--lch-bronze) 88 30 h / 0.36) inset,
    0 20px 56px -12px lch(from var(--lch-bronze) 20 30 h / 0.45),
    0 8px 24px -8px rgba(0, 0, 0, 0.55),
    0 0 0 2px lch(from var(--lch-bronze) l c h / 1.0),
    0 0 80px -8px lch(from var(--lch-bronze) l c h / 0.95),
    0 0 24px 0 lch(from var(--lch-bronze) l c h / 0.55) !important;
}

/* Hover state: more pronounced lift under aurora */
:root[data-theme="dark"] body.theme-aurora .glass-hover:hover {
  transform: translateY(-2px) !important;
  background-color: lch(from var(--lch-ink) calc(l + 20) c h / 0.74) !important;
  box-shadow:
    0 1px 0 0 lch(from var(--lch-bronze) 88 30 h / 0.42) inset,
    0 28px 72px -12px lch(from var(--lch-bronze) 20 30 h / 0.55),
    0 12px 32px -8px rgba(0, 0, 0, 0.6),
    0 0 0 1px lch(from var(--lch-bronze) 60 24 h / 0.28) !important;
}

/* End of aurora theme. To add more themes later (handle-sage,
 * handle-charcoal, handle-rose per future workstream #25), follow
 * this same pattern: one body.theme-X selector, override the same
 * set of tokens with theme-specific values. The LCH inputs in
 * section 9 stay the brand foundation; themes are amplification.
 */

/* ============================================================================
 * AURORA v2 -- true translucent glass per Brandon's Spotify-on-Vision-Pro
 * reference (2026-05-23 PM, mid-Phase-C.5)
 *
 * v1 was "colored tab with glow" -- not glass. v2 targets actual translucent
 * glass that you see THROUGH to the bg behind, with crisp specular top edges
 * and CONTAINED rim glow (no bleed onto adjacent cards).
 *
 * Diagnosis of v1 vs Spotify Vision Pro reference:
 *   v1 cards = 0.62 alpha (too opaque, look solid-tinted, not see-through)
 *   v1 page bg = smooth mesh gradient (not enough texture for blur signal)
 *   v1 AR rim = 80px outer glow (bleeds onto adjacent Monthly Pace card)
 *
 * v2 changes:
 *   Cards at 0.40 alpha + visible top-edge specular = true translucent glass
 *   Page bg layers SVG noise + mesh + halo for visible texture under blur
 *   AR rim becomes crisp top-edge highlight + tight 24px contained glow
 *   Inner bottom-shadow on each card for carved-from-glass depth
 *
 * This OVERRIDES the v1 aurora rules above (later in source order wins for
 * equal specificity; same selector chain so specificity matches).
 * ========================================================================= */

/* Body bg: aurora v2 mesh + noise. SVG noise gives the blur visible grain
   to refract (otherwise blur on uniform bg = no glass effect). Noise is
   barely visible (3% opacity) but the backdrop-filter exaggerates it
   when blurring, giving the cards a real "see-through to texture" feel. */
:root[data-theme="dark"] body.theme-aurora,
:root[data-theme="dark"] body.theme-aurora.glass-on,
:root[data-theme="dark"] body.theme-aurora.glass-on.halo-bg {
  /* Layered background: bronze mesh ABOVE warm paper-grain texture ABOVE
     linear ink fill. The paper-grain SVG gives backdrop-filter real signal
     to refract through -- without it, dark glass over uniform dark has
     nothing visible to blur. Texture is editorial-luxury (warm noise on
     dark paper), matches handle's brand DNA (Tiempos italic + paper +
     aged bronze + boutique-hotel-lobby aesthetic). */
  background-image:
    radial-gradient(1100px ellipse at 15% -8%,
      lch(from var(--lch-bronze) 72 58 h / 0.52),
      lch(from var(--lch-bronze) 72 58 h / 0.14) 30%,
      transparent 58%),
    radial-gradient(1300px ellipse at 95% 12%,
      lch(from var(--lch-bronze) 68 52 h / 0.38),
      lch(from var(--lch-bronze) 68 52 h / 0.08) 32%,
      transparent 60%),
    radial-gradient(900px ellipse at 50% 92%,
      lch(from var(--lch-bronze) 62 46 h / 0.28),
      lch(from var(--lch-bronze) 62 46 h / 0.06) 35%,
      transparent 60%),
    radial-gradient(700px ellipse at 80% 70%,
      lch(from var(--lch-bronze) 60 40 h / 0.18),
      transparent 55%),
    url("/static/handle/textures/paper-grain-warm.svg"),
    linear-gradient(var(--bg-page, #1A1814), var(--bg-page, #1A1814)) !important;
  background-attachment: fixed, fixed, fixed, fixed, fixed, fixed !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 400px 400px, 100% 100% !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat !important;
}

/* Cards: TRUE translucent glass. Lower alpha so you see through to the
   bronze mesh + noise behind. Crisp specular top edge (1px white-bronze).
   Inner bottom-shadow for carved depth. Tighter outer drop. */
:root[data-theme="dark"] body.theme-aurora .glass-surface {
  background-color: lch(from var(--lch-ink) calc(l + 16) c h / 0.40) !important;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.05) !important;
  box-shadow:
    /* Crisp specular top edge (the "light catches glass" highlight) */
    0 1px 0 0 lch(from var(--lch-paper) 96 8 h / 0.42) inset,
    /* Subtle inner bottom shadow (carved depth) */
    0 -1px 0 0 lch(from var(--lch-ink) 4 2 h / 0.45) inset,
    /* Contained outer drop (no glow bleed) */
    0 12px 28px -10px rgba(0, 0, 0, 0.55),
    /* Hairline glass border */
    0 0 0 1px lch(from var(--lch-paper) 92 4 h / 0.08) !important;
}

:root[data-theme="dark"] body.theme-aurora .glass-surface-elevated {
  background-color: lch(from var(--lch-ink) calc(l + 22) c h / 0.55) !important;
  backdrop-filter: blur(32px) saturate(180%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.06) !important;
  box-shadow:
    0 1px 0 0 lch(from var(--lch-paper) 96 8 h / 0.52) inset,
    0 -1px 0 0 lch(from var(--lch-ink) 4 2 h / 0.55) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.65),
    0 0 0 1px lch(from var(--lch-paper) 92 4 h / 0.10) !important;
}

/* AR rim: CONTAINED. No more 80px outer glow bleeding onto Monthly Pace.
   Replace with: tight 1.5px bronze rim + bronze specular top edge that
   reads as "the hero card catches light differently" -- not "the hero
   is yelling at you with a corona." */
:root[data-theme="dark"] body.theme-aurora .glass-rim {
  background-color: lch(from var(--lch-ink) calc(l + 16) c h / 0.40) !important;
  backdrop-filter: blur(28px) saturate(170%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(28px) saturate(170%) brightness(1.05) !important;
  box-shadow:
    /* Brighter specular top -- the hero card catches more "light" */
    0 1px 0 0 lch(from var(--lch-bronze) 88 36 h / 0.62) inset,
    0 -1px 0 0 lch(from var(--lch-ink) 4 2 h / 0.45) inset,
    /* Tight bronze rim, no spread */
    0 0 0 1.5px lch(from var(--lch-bronze) l c h / 0.85),
    /* Small contained outer glow (24px not 80px) */
    0 0 24px -2px lch(from var(--lch-bronze) l c h / 0.45),
    /* Same contained drop as siblings */
    0 12px 28px -10px rgba(0, 0, 0, 0.55) !important;
}

/* Hover: subtle lift + slightly brighter top edge. No more dramatic glow. */
:root[data-theme="dark"] body.theme-aurora .glass-hover:hover {
  transform: translateY(-1px) !important;
  background-color: lch(from var(--lch-ink) calc(l + 20) c h / 0.48) !important;
  box-shadow:
    0 1px 0 0 lch(from var(--lch-paper) 96 8 h / 0.55) inset,
    0 -1px 0 0 lch(from var(--lch-ink) 4 2 h / 0.50) inset,
    0 18px 36px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px lch(from var(--lch-paper) 92 4 h / 0.12) !important;
}

/* End of aurora v2.
 * Two key truths from the Spotify Vision Pro reference:
 *   1. Translucency must let you SEE THROUGH (low alpha + visible bg texture)
 *   2. Light catches edges, not the whole panel (specular highlight + contained rim)
 */

/* ---------- C1.5-M.1: ListKeyboard data-focused state --------------------
   JS-driven focus state for keyboard nav (J/K). Mirrors :focus-visible so
   the operator gets the same bronze outline when navigating with keys
   even if the row isn't browser-focused (rows are not tabbable by default).
   Locked 2026-05-23 PM per _C1_5_CONNECTIVITY_SWEEP §8 (C1.5-M).
   ----------------------------------------------------------------------- */
.glass-on .glass-focusable[data-focused="true"],
.glass-on [data-focused="true"].glass-surface,
[data-focused="true"][data-list-item],
[data-focused="true"].ew-card,
[data-focused="true"].sig-card,
[data-focused="true"].item,
[data-focused="true"].fin-card,
[data-focused="true"].kpi-card,
[data-focused="true"].summary-tile,
[data-focused="true"].bucket,
[data-focused="true"].ah-thread,
[data-focused="true"].ah-list-item {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- C1.5-M.1 addendum: cover all wake-up-surface row selectors ---
   Append to the data-focused outline rule. Covers /money .answer-card,
   /nn .event-card/.approval-card, /deliver lrail items, /llm-review .item,
   etc. — anywhere ListKeyboard sets data-focused but the row isn't already
   listed by class.
   ----------------------------------------------------------------------- */
[data-focused="true"].answer-card,
[data-focused="true"].event-card,
[data-focused="true"].approval-card,
[data-focused="true"].group-card,
[data-focused="true"][data-cat],
[data-focused="true"][data-card-id] {
  outline: 2px solid var(--state-focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* topbar-tools centered like /edit on the cohesion topbars (where the cluster
   otherwise pins right because the topbar has only 2 zones). Scoped to the
   right-actions containers so /edit (.top-actions, 3-zone) is untouched. */
.topbar, .handle-topbar, .joc-topbar { position: relative; }
.topbar .topbar-tools, .handle-topbar .topbar-tools, .joc-topbar .topbar-tools {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}

.topbar .top-actions { margin-left: auto; }