/* ═══════════════════════════════════════════════════════════════════
   ORGANISMS — Complex, role-bearing components
   App shell · Sidebar · Topbar · Page header · Tables · Slide-in
   Section header · Filter bar · Stat row · Account row · Detail panel
   ═══════════════════════════════════════════════════════════════════ */

/* ── APP SHELL ─────────────────────────────────────────────────── */
.app {
  display: flex;
  min-height: 100vh;
}
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-x: hidden;
}

/* ── SIDEBAR ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--navy-800);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  color: var(--fg-on-dark);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--navy-600); }

/* SESSION-webplanner-002 / GAP-WEBPLANNER-002: sidebar-head flexes the brand
   stack on the left and the .sidebar-toggle chevron on the right. Mirrors
   Web-planner-Designs/prototype/assets/css/organisms.css §3.3 (lines 36–67). */
.sidebar-head {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border-dark);
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.sidebar-brand { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.workspace-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-2xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--navy-400);
  padding-left: 2px;
}
.sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  color: var(--navy-300);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.07); color: var(--paper-0); border-color: rgba(255,255,255,0.18); }

.sidebar-role { padding: var(--s-3) var(--s-4); } /* legacy: hand-coded share-page chips only */
.sidebar-sect-label {
  font-size: var(--text-2xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--navy-400);
  padding: var(--s-4) 20px var(--s-2);
}

.sidebar-nav { padding: 0 var(--s-3); display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: var(--w-medium);
  color: var(--navy-300);
  transition: background var(--dur-fast), color var(--dur-fast);
  position: relative;
}
.nav-item svg { opacity: 0.55; flex-shrink: 0; transition: opacity var(--dur-fast); }
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--paper-0); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { color: var(--paper-0); font-weight: var(--w-semi); }
.nav-item.active svg { opacity: 1; }

/* Role-tinted active state */
.nav-item.active-purple { background: rgba(155,89,182,0.18); }
.nav-item.active-coral  { background: rgba(232,97,58,0.18); }
.nav-item.active-teal   { background: rgba(46,196,160,0.18); }
.nav-item.active-amber  { background: rgba(245,166,35,0.18); }
.nav-item.active-blue   { background: rgba(76,124,222,0.18); }

.nav-item-badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: var(--w-bold);
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.08);
  color: var(--navy-300);
}
.nav-item.active .nav-item-badge { background: rgba(255,255,255,0.25); color: white; }
.nav-item.active-purple .nav-item-badge { background: var(--purple); color: white; }
.nav-item.active-coral  .nav-item-badge { background: var(--coral); color: white; }
.nav-item.active-teal   .nav-item-badge { background: var(--teal); color: white; }
.nav-item.active-amber  .nav-item-badge { background: var(--amber); color: white; }

/* ── SESSION-webplanner-002 / proto §3.3 — nested sub-nav + accordion ── */
.nav-children {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 4px;
  padding-left: 25px;
  position: relative;
}
.nav-children::before {
  content: '';
  position: absolute;
  left: 21px; top: 2px; bottom: 10px;
  width: 1.5px;
  background: rgba(255,255,255,0.10);
}
.nav-item-sub { font-size: var(--text-sm); padding: 7px 11px; color: var(--navy-300); }
.nav-item-sub svg { width: 13px; height: 13px; }

.nav-group { display: flex; flex-direction: column; }
.nav-item-row { display: flex; align-items: center; gap: 2px; }
.nav-item-row > .nav-item { flex: 1; min-width: 0; }
.nav-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 30px; margin-right: 8px;
  border: none; background: transparent; color: var(--navy-300);
  cursor: pointer; border-radius: var(--r-sm);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav-toggle:hover { background: rgba(255,255,255,0.07); color: var(--paper-0); }
.nav-toggle svg { transition: transform .18s var(--ease-out, ease); }
.nav-group.collapsed .nav-toggle svg { transform: rotate(-90deg); }
.nav-group.collapsed .nav-children { display: none; }

/* ── SESSION-webplanner-002 / proto §3.3 — collapsed rail (68px) ── */
.sidebar.collapsed { width: 68px; }
.sidebar.collapsed .sidebar-head { flex-direction: column; align-items: center; gap: 14px; padding: 18px 0 16px; }
.sidebar.collapsed .sidebar-brand { align-items: center; gap: 0; }
.sidebar.collapsed .workspace-tag { display: none; }
.sidebar.collapsed .logo-img { width: 28px; height: 28px; object-fit: cover; object-position: left center; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.sidebar.collapsed .sidebar-sect-label { display: none; }
.sidebar.collapsed .sidebar-nav { padding: 0 10px; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-item > span { display: none; }
.sidebar.collapsed .nav-item svg { opacity: 0.7; }
.sidebar.collapsed .nav-item.active svg { opacity: 1; }
/* Counts become a small corner dot when there's no room for the number */
.sidebar.collapsed .nav-item-badge {
  position: absolute; top: 4px; right: 8px; margin: 0;
  min-width: 7px; height: 7px; padding: 0;
  font-size: 0; line-height: 0; color: transparent;
  background: var(--navy-300); border-radius: var(--r-full);
}
.sidebar.collapsed .nav-item.active-purple .nav-item-badge { background: var(--purple); }
.sidebar.collapsed .nav-item.active-coral  .nav-item-badge { background: var(--coral); }
.sidebar.collapsed .nav-item.active-teal   .nav-item-badge { background: var(--teal); }
.sidebar.collapsed .nav-item.active-amber  .nav-item-badge { background: var(--amber); }
/* Sub-nav: drop the indent + tree line, render as plain icon rail */
.sidebar.collapsed .nav-children { padding-left: 0; margin: 2px 0; }
.sidebar.collapsed .nav-children::before { display: none; }
.sidebar.collapsed .nav-toggle { display: none; }
.sidebar.collapsed .nav-group.collapsed .nav-children { display: flex; }
.sidebar.collapsed .sidebar-foot { padding: var(--s-3) 10px; }
.sidebar.collapsed .sidebar-user { justify-content: center; padding: 6px 0; }
.sidebar.collapsed .sidebar-user-meta,
.sidebar.collapsed .sidebar-user > svg { display: none; }

/* Hover tooltip for collapsed nav items */
.sidebar.collapsed .nav-item::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  background: var(--navy-900, #0f1729); color: var(--paper-0, #fff);
  font-size: var(--text-sm); font-weight: var(--w-medium);
  padding: 5px 9px; border-radius: var(--r-md);
  border: 1px solid var(--border-dark);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  z-index: 60;
}
.sidebar.collapsed .nav-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.sidebar-spacer { flex: 1; }
.sidebar-foot {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-dark);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 6px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.sidebar-user:hover { background: rgba(255,255,255,0.05); }
.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--w-semi);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: var(--text-2xs);
  color: var(--navy-300);
}

/* ── TOPBAR ────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--page-px);
  height: var(--topbar-h);
  display: flex; align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: var(--s-3); }

/* Global search bar inside topbar */
.topbar-search {
  position: relative;
  max-width: 340px;
}
.topbar-search input {
  padding: 7px 12px 7px 34px;
  background: var(--surface-sunken);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  width: 260px;
}
.topbar-search input:focus { background: var(--surface); border-color: var(--blue); }

/* Notif button gets coral dot */
.notif-btn { position: relative; }
.notif-btn::after {
  content: '';
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  border: 1.5px solid var(--surface);
}

/* ── PAGE ─────────────────────────────────────────────────────── */
.page {
  flex: 1;
  padding: var(--page-py) var(--page-px) var(--s-9);
  max-width: var(--max-content);
  width: 100%;
}

.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.page-title-group { min-width: 0; }
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--w-black);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
  display: flex; align-items: center;
  gap: var(--s-3);
  line-height: 1.1;
}
.page-title-count {
  font-size: var(--text-sm);
  font-weight: var(--w-semi);
  color: var(--fg-muted);
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.page-subtitle {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

[data-theme="bold"] .page-title { font-size: var(--text-3xl); }

/* ── SECTION HEADER ──────────────────────────────────────────── */
.section {
  margin-bottom: var(--s-7);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: var(--s-4);
  gap: var(--s-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-black);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.section-sub {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-top: 4px;
}

/* ── STATS ROW ────────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

/* ── FILTER BAR ──────────────────────────────────────────────── */
.filterbar {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.filterbar-spacer { flex: 1; }

/* ── DATA TABLE (queue, deals, contacts, etc.) ──────────────── */
/* GAP-WEBPLANNER-011 — Tailwind ships `.table`, `.table-row`, `.table-cell`
   as display utilities (display: table / table-row / table-cell). Our bare
   class names collided with them; Tailwind won the cascade for `.table-row`
   + `.table-cell` and the contacts/queue/deals lists rendered as anonymous
   HTML tables instead of grids — visible as misaligned columns where data
   rows flowed in the right half while headers gridded the left half.

   Fixed by scoping every table-organism rule to `.table > …` (or `.table-row
   > …` for cells). This bumps specificity above the bare Tailwind utilities
   without touching the markup. Anyone wanting a Tailwind display utility on
   one of these element classes is unaffected (they're inside `.table`). */
/* GAP-WEBPLANNER-011 — `!important` matches Tailwind's display utilities
   (`.table`, `.table-row`, `.table-cell` all ship as `display: ... !important`
   so specificity alone can't override). Without these, Tailwind makes the
   list render as an anonymous HTML table — visible via DevTools as
   "display: table-row !important" winning over our `display: grid`. */
.table {
  display: block !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  width: 100%;
}
.table .table-head {
  display: grid !important;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--paper-50);
  width: 100%;
}
.table .table-head > .table-th,
.table .table-th {
  padding: 11px 10px;
  font-size: var(--text-2xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: flex; align-items: center; gap: 4px;
  cursor: pointer;
  user-select: none;
  transition: color var(--dur-fast);
}
.table .table-th:hover { color: var(--fg); }
.table .table-th.sort-active { color: var(--fg); }
.table .table-th svg { opacity: 0.5; }
.table .table-th.sort-active svg { opacity: 1; }

.table .table-row {
  display: grid !important;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast);
  align-items: center;
  position: relative;
  width: 100%;
}
.table .table-row:last-child { border-bottom: none; }
.table .table-row:hover { background: rgba(245,247,252,0.55); }
.table .table-row.highlighted { background: rgba(34,168,110,0.04); }

/* Verdict accent stripe */
.table .table-row::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
.table .table-row.row-advance::before    { background: var(--green); }
.table .table-row.row-requalify::before  { background: var(--amber); }
.table .table-row.row-disqualify::before { background: var(--red); }
.table .table-row.row-pending::before    { background: var(--paper-400); }
.table .table-row.row-stalled::before    { background: var(--red); }
.table .table-row.row-progressing::before{ background: var(--blue); }
.table .table-row.row-active::before     { background: var(--teal); }

.table .table-row > .table-cell,
.table .table-cell {
  padding: 14px 10px;
  display: flex !important;
  align-items: center;
  min-width: 0;
}
.table .table-cell-end { justify-content: flex-end; text-align: right; }
.row-chevron {
  position: absolute; right: 16px;
  color: var(--paper-400);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.table .table-row:hover .row-chevron { color: var(--fg-muted); transform: translateX(2px); }

/* Generic account/deal cell content */
.ac-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ac-account {
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ac-meta {
  display: flex; align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.ac-sep { color: var(--paper-400); }
.ac-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs);
  font-weight: var(--w-semi);
  padding: 1px 7px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: var(--surface);
}

/* ── DETAIL SLIDE-IN PANEL ───────────────────────────────────── */
.detail-overlay {
  position: fixed; inset: 0;
  background: rgba(13,21,38,0.45);
  z-index: 200;
  backdrop-filter: blur(3px);
  display: none;
  animation: overlayFade var(--dur-base) var(--ease-out);
}
.detail-overlay.open { display: flex; justify-content: flex-end; }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

.detail-panel {
  width: var(--panel-w);
  max-width: 96vw;
  background: var(--surface);
  height: 100vh;
  display: flex; flex-direction: column;
  position: relative;
  animation: panelSlide var(--dur-base) var(--ease-out);
}
@keyframes panelSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.detail-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-shrink: 0;
}
.detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-6) var(--s-7) var(--s-7);
}
.detail-foot {
  padding: var(--s-4) var(--s-7);
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

/* ── PROTOTYPE BAR (state switcher in prototypes) ──────────── */
.proto-bar {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  background: rgba(10,16,32,0.94);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  padding: 5px;
  border-radius: var(--r-full);
  z-index: 1000;
}
.proto-btn {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--w-semi);
  padding: 6px 13px;
  border-radius: var(--r-full);
  color: var(--navy-300);
  transition: all var(--dur-fast);
  white-space: nowrap;
}
.proto-btn:hover { color: white; }
.proto-btn.active { background: var(--navy-600); color: white; }

/* ── MODAL (centered dialog) ─────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(13,21,38,0.5);
  display: none;
  align-items: center; justify-content: center;
  z-index: 250;
  backdrop-filter: blur(4px);
  animation: overlayFade var(--dur-base) var(--ease-out);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r-2xl);
  width: 460px;
  max-width: 92vw;
  padding: var(--s-7);
  box-shadow: var(--shadow-xl);
  animation: modalIn var(--dur-base) var(--ease-out);
}
@keyframes modalIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── TOAST (transient notification) ───────────────────────── */
.toast-wrap {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--navy-800);
  color: white;
  padding: 12px 20px;
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-weight: var(--w-semi);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: var(--s-2);
  animation: toastIn var(--dur-base) var(--ease-snap);
}
@keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-success { background: var(--green); }
.toast-error { background: var(--red); }

/* ── HERO PANEL (used in admin / portfolio) ──────────────── */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3xl);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-dark {
  background: var(--navy-800);
  color: var(--fg-on-dark);
  border-color: var(--navy-700);
}
.hero-dark .hero-title { color: white; }
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--w-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--s-3);
}
.hero-sub {
  font-size: var(--text-md);
  color: var(--fg-on-dark);
  line-height: var(--leading-base);
}

[data-theme="bold"] .hero-title { font-size: var(--text-4xl); }

/* ── SESSION-webplanner-006 / GAP-WEBPLANNER-006 — IS empty-state organism.
   Shared by /queue, /sessions, /activity, /accounts, /contacts. Mirrors
   Web-planner-Designs/prototype/app/{queue,sessions-is,activity-is,
   accounts-is,contacts-is}-empty.html. /home uses its own page-scoped
   classes in home.component.scss. ─────────────────────────── */
.es {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 26px 22px 22px;
  gap: 14px;
}
.es-art { width: 100%; max-width: 372px; }
.es-art svg { width: 100%; height: auto; display: block; }
.es-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--fg); line-height: 1.2;
}
.es-sub {
  font-size: 14px; color: var(--fg-muted);
  line-height: 1.6; max-width: 460px;
}
.es-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-top: 4px;
}
.es-ivaan {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--fg-muted);
  margin-top: 8px; max-width: 460px; line-height: 1.55;
}
.es-ivaan .av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--blue-l, rgba(76,124,222,0.14));
  color: var(--blue-d); flex: none;
}
.es-legend {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  margin-top: 6px; font-size: 12px; color: var(--fg-muted);
}
.es-leg { display: inline-flex; align-items: center; gap: 6px; }
.es-leg .d { width: 8px; height: 8px; border-radius: 50%; flex: none; }

@keyframes esPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .es-art .pulse {
    animation: esPulse 3s ease-in-out infinite;
    transform-origin: center;
  }
}

/* ── ROLE-TINTED PAGE BACKGROUND ─────────────────────────── */
.page-tint-purple { background: linear-gradient(180deg, rgba(155,89,182,0.04) 0%, transparent 240px); }
.page-tint-coral  { background: linear-gradient(180deg, rgba(232,97,58,0.04) 0%, transparent 240px); }
.page-tint-teal   { background: linear-gradient(180deg, rgba(46,196,160,0.04) 0%, transparent 240px); }
.page-tint-amber  { background: linear-gradient(180deg, rgba(245,166,35,0.04) 0%, transparent 240px); }

/* ── THEME TOGGLE (DS-wide) ───────────────────────────────── */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(10,16,32,0.94);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-full);
  padding: 4px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.theme-toggle-btn {
  font-size: var(--text-2xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-full);
  color: var(--navy-300);
  transition: all var(--dur-fast);
}
.theme-toggle-btn.active { background: var(--paper-0); color: var(--fg); }
.theme-toggle-btn:not(.active):hover { color: white; }

/* ── NOTIFICATION BADGE ─────────────────────────────────────────── */
.notif-badge {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  background: var(--red);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs);
  font-weight: var(--w-bold);
  border: 2px solid var(--surface);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}

/* ── PROFILE MENU ──────────────────────────────────────────────── */
#profile-menu {
  position: relative;
}
.profile-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.profile-menu-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--border);
}
.profile-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  min-width: 180px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.profile-menu-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.profile-menu-item {
  padding: 10px 16px;
  font-size: var(--text-sm);
  font-weight: var(--w-semi);
  color: var(--fg);
  text-decoration: none;
  display: block;
  transition: background var(--dur-fast), color var(--dur-fast);
  cursor: pointer;
}
.profile-menu-item:hover {
  background: var(--paper-50);
}
.profile-menu-item:last-child:hover {
  background: rgba(232, 69, 69, 0.08);
}

/* ════════════════════════════════════════════════════════════════════
   SESSION-admin-ptg-002 — Admin Products catalogue + Add-product modal +
   shared organisms (audience picker / segmented control / spec repeater).
   Classes lifted verbatim from prototype/app/products.html + products-empty.html
   (tokens are byte-equivalent — VISUAL-DIFF §0). Reused by sessions 003 + 004.
   ════════════════════════════════════════════════════════════════════ */

/* ── product card grid (catalogue) ── */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.prod-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; cursor: default; transition: transform var(--dur-fast), border-color var(--dur-fast); text-decoration: none; color: inherit; display: block; }
.prod-card.linked { cursor: pointer; }
.prod-card.linked:hover { transform: translateY(-3px); border-color: var(--amber); }
.prod-img { aspect-ratio: 16/10; background: repeating-linear-gradient(45deg, var(--paper-100), var(--paper-100) 12px, var(--paper-200) 12px, var(--paper-200) 13px); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); overflow: hidden; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-meta { padding: 18px 20px; }
.prod-sku { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.05em; }
.prod-name { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.prod-cat { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.prod-pres-count { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--amber-d); }
.prod-pres-count.none { color: var(--fg-muted); }

/* ── empty / first-day state ── */
.empty-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 60px 40px 52px; max-width: 720px; margin: 0 auto; }
.empty-panel .empty { padding: 0; }
.empty-panel .empty-icon { width: 76px; height: 76px; background: var(--amber-l); border-color: transparent; color: var(--amber-d); margin-bottom: var(--s-6); }
.empty-panel .empty-sub { max-width: 460px; font-size: 14px; }
.empty-actions { display: flex; gap: 10px; margin-top: 28px; }
.empty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; max-width: 720px; margin: 36px auto 0; }
.estep { background: var(--surface); padding: 20px 22px; text-align: left; }
.estep-n { width: 26px; height: 26px; border-radius: 50%; background: var(--amber-l); color: var(--amber-d); font-family: var(--font-mono); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.estep-t { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; }
.estep-d { font-size: 12px; color: var(--fg-muted); line-height: 1.55; margin-top: 5px; }

/* ── modal width variant + chrome (base .modal/.modal-overlay already exist) ── */
.modal.modal-wide { width: 600px; max-height: 90vh; overflow-y: auto; }
/* SESSION-meet-ux-seq-scroll — .modal-xl was referenced by ModalOverlayComponent
   but never styled, so the xl modal had no height cap and grew past the viewport
   once enough sequence rows were added, pushing the footer buttons off-screen.
   Cap it at 90vh and make it a flex column so an inner region can scroll while
   the header and footer stay put. */
.modal.modal-xl {
  width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
/* The projected <form> becomes the flex column that owns the scroll split. */
.modal.modal-xl > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}
/* Pinned header / footer; the body between them scrolls. */
.modal-xl .modal-head { flex: 0 0 auto; padding: var(--s-7) var(--s-7) 0; }
.modal-xl .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--s-7) var(--s-5);
}
.modal-xl .modal-foot {
  flex: 0 0 auto;
  padding: var(--s-5) var(--s-7) var(--s-7);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.modal-eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-d); margin-bottom: 6px; }
.modal-divider { height: 1px; background: var(--border); margin: 20px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; resize: vertical; min-height: 84px; color: var(--fg); background: var(--surface); }
.textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,0.15); }

/* ── image drop-zone (Add product) ── */
.img-drop { aspect-ratio: 1; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-muted); cursor: pointer; background: var(--surface-sunken); font-size: 12px; text-align: center; padding: 12px; transition: border-color var(--dur-fast), color var(--dur-fast); overflow: hidden; }
.img-drop:hover { border-color: var(--amber); color: var(--amber-d); }
.img-drop .id-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--amber-l); color: var(--amber-d); display: flex; align-items: center; justify-content: center; }
.img-drop img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }

/* ── small icon action button (spec row delete, etc.) ── */
.ic-act { appearance: none; width: 30px; height: 30px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.ic-act:hover { background: var(--paper-100); color: var(--fg); }
.ic-act.danger:hover { background: var(--red-l, #fdeaea); color: var(--red); }

/* ── segmented control (SegmentedControlComponent) ── */
.seg { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px; gap: 3px; }
.seg.full { display: flex; }
.seg.full .seg-btn { flex: 1; justify-content: center; }
.seg-btn { appearance: none; border: none; background: none; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--fg-muted); padding: 8px 14px; border-radius: 7px; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); display: inline-flex; align-items: center; }
.seg-btn.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

/* ── audience picker (AudiencePickerComponent) ── */
.aud-picker { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.aud-picker[hidden] { display: none; }
.aud-grp-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); padding: 11px 14px 5px; background: var(--surface-sunken); }
.aud-opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.aud-opt:hover { background: var(--paper-50); }
.aud-opt-name { font-weight: 700; font-size: 13px; }
.aud-opt-meta { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }

/* ── audience badge (on cards/rows — reused by 003) ── */
.aud-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-full, 999px); background: var(--surface-sunken); color: var(--fg-muted); }
.aud-badge.all { background: rgba(46,196,160,0.12); color: var(--teal-d, #1c8f76); }

/* ── spec / sequence editor rows ── */
.spec-edit-row { display: grid; grid-template-columns: 1fr 1.4fr 30px; gap: 8px; align-items: center; }
.seq-add-btn { appearance: none; background: none; border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 9px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: border-color var(--dur-fast), color var(--dur-fast); width: 100%; }
.seq-add-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber-d); }
.seq-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.seq-add-hint { color: var(--fg-faint); margin-top: 6px; text-align: center; }

/* ─────────────────────────────────────────────────────────────────────
   SESSION-admin-ptg-004 — Teams & Groups page (/teams).
   Ports prototype/app/teams.html's page-scoped block to the canonical DS.
   ───────────────────────────────────────────────────────────────────── */

/* Team cards across the full width (SPEC-web-planner-013 AC-69: no map column) */
.tt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }

/* Team / Group card (shared shape — Group variant tints purple via .badge-purple) */
.team-card { padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.team-card:hover { border-color: var(--amber); transform: translateY(-2px); }
.team-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.team-name { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.022em; color: var(--fg); }
.team-meta { font-size: 12.5px; color: var(--fg-muted); margin-top: 4px; }
.team-card .avatar-stack { display: flex; margin-top: 14px; }
.team-card .avatar-stack .avatar { margin-left: -8px; border: 2px solid var(--surface); }
.team-card .avatar-stack .avatar:first-child { margin-left: 0; }

/* Territory tile (SPEC-web-planner-013 AC-77): a team-card shaped button in the Groups grid */
/* button.ter-tile outranks Tailwind preflight's [type='button'] { background: transparent }, which loads later */
button.ter-tile { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); }
.ter-tile .team-card-head, .ter-tile .team-name, .ter-tile .team-meta { display: flex; }
.ter-tile .ter-tile-text { display: flex; flex-direction: column; }
/* Fuse sets outline: none !important on :focus, so the keyboard ring is a box-shadow */
.ter-tile:focus-visible { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber); }
.ter-tile-archived .team-name { color: var(--fg-muted); }

/* Groups grid + dashed "+ New group" tile */
.grp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 720px) { .grp-grid { grid-template-columns: 1fr; } }
.grp-add { border: 1.5px dashed var(--border-strong); background: var(--surface); border-radius: var(--r-2xl); display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--fg-muted); cursor: pointer; min-height: 120px; font-weight: 700; font-size: 13.5px; transition: border-color var(--dur-fast), color var(--dur-fast); appearance: none; font-family: var(--font-sans); }
.grp-add:hover { border-color: var(--amber); color: var(--amber-d); }

/* Member picker (NewTeamDialog / NewGroupDialog) */
.mem-picker { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; max-height: 240px; overflow-y: auto; }
.mem-opt { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border); cursor: pointer; user-select: none; }
.mem-opt:first-child { border-top: none; }
.mem-opt:hover { background: var(--paper-50); }
.mem-name { font-weight: 700; font-size: 13px; color: var(--fg); }
.mem-meta { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }

/* ─────────────────────────────────────────────────────────────────────
   SESSION-admin-ptg-003 — Product manage page (/products/:id).
   Ports prototype/app/product-manage.html page-scoped block to the
   canonical DS. Page-scoped here (`.app` shell + amber accent) because the
   three tabs + presentation/document rows are only used on this surface.
   ───────────────────────────────────────────────────────────────────── */

/* Header card (.pm-head / .pm-name / .pm-edited / .pm-actions) */
.pm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pm-name { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 10px; }
.pm-edited { font-size: 12px; color: var(--fg-faint); margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.pm-actions { display: flex; gap: 8px; flex-shrink: 0; padding-top: 8px; }

/* Underline tabs (consumed by UnderlineTabsComponent) */
.pm-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); margin: 18px 0 24px; }
.pm-tab { appearance: none; background: none; border: none; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: var(--fg-muted); padding: 11px 2px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.pm-tab:hover { color: var(--fg); }
.pm-tab.active { color: var(--amber-d); border-bottom-color: var(--amber); }
.pm-tab-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--fg-faint); }
.pm-tab.active .pm-tab-n { color: var(--amber-d); }
.pm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.pm-bar p { font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; margin: 0; max-width: 640px; }
.pm-bar p b { color: var(--fg); }

/* AR-type pill (ArTagComponent) */
.ar-tag { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.06em; text-transform: uppercase; }
.ar-tag-client { background: rgba(232,97,58,0.14); color: var(--coral-d, #b8431f); }
.ar-tag-generic { background: var(--paper-100); color: var(--fg-muted); }

/* Presentation row (ArPresentationRowComponent) */
.pres-grid { display: flex; flex-direction: column; gap: 8px; }
.pres-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--dur-fast); }
.pres-item:hover, .pres-item.open { border-color: var(--amber); }
.pres-row { padding: 14px 18px; display: grid; grid-template-columns: 56px 1fr auto auto auto; gap: 18px; align-items: center; }
.pres-thumb { width: 56px; height: 56px; border-radius: var(--r-md); background: repeating-linear-gradient(45deg, var(--paper-100), var(--paper-100) 10px, var(--paper-200) 10px, var(--paper-200) 11px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.pres-thumb.thumb-client { background: linear-gradient(135deg, rgba(232,97,58,0.15), rgba(232,97,58,0.05)); color: var(--coral-d, #b8431f); }
.pres-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.022em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pres-sub { font-size: 11.5px; color: var(--fg-muted); margin-top: 3px; }
.pres-chev { appearance: none; background: none; border: none; padding: 0; color: var(--fg-faint); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--dur-fast), color var(--dur-fast); }
.pres-item.open .pres-chev { transform: rotate(180deg); color: var(--amber-d); }
.pres-expand { border-top: 1px solid var(--border); padding: 4px 18px 12px; }
.seq-head { display: grid; grid-template-columns: 24px 1fr 72px; gap: 16px; align-items: center; padding: 12px 0 8px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
.seq-line { display: grid; grid-template-columns: 24px 1fr 72px; gap: 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.seq-line:first-of-type { border-top: none; }
.seq-i { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--fg-faint); }
.seq-n { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; }
.seq-d { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); white-space: nowrap; }

/* Add tile (used by AR presentations grid) */
.add-tile { border: 1.5px dashed var(--border-strong); background: var(--surface); border-radius: var(--r-md); padding: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--fg-muted); cursor: pointer; font-weight: 700; font-size: 13px; transition: border-color var(--dur-fast), color var(--dur-fast); }
.add-tile:hover { border-color: var(--amber); color: var(--amber-d); }

/* Documents (DocumentRowComponent) */
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-row { display: grid; grid-template-columns: 44px 1fr 130px 120px auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px 16px; transition: border-color var(--dur-fast); }
.doc-row:hover { border-color: var(--amber); }
.doc-ic { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.doc-ic-pdf { background: rgba(232,97,58,0.12); color: var(--coral-d, #b8431f); }
.doc-ic-vid { background: rgba(45,123,231,0.12); color: #2d7be7; }
.doc-ic-cat { background: rgba(34,168,110,0.12); color: var(--green); }
.doc-ic-img { background: rgba(155,89,182,0.12); color: var(--purple, #7a3e9b); }
.doc-ic-doc { background: var(--paper-100); color: var(--fg-muted); }
.doc-title { font-size: 14px; font-weight: 700; color: var(--fg); }
.doc-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-top: 3px; }
.doc-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.doc-ok { color: var(--green); display: inline-flex; align-items: center; gap: 5px; }
.doc-wait { color: var(--amber-d); display: inline-flex; align-items: center; gap: 5px; }
.doc-fail { color: var(--red, #d24a4a); display: inline-flex; align-items: center; gap: 5px; }
.doc-retry { appearance: none; background: none; border: 1px solid currentColor; color: inherit; border-radius: var(--r-sm); padding: 1px 6px; font-size: 10.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.doc-retry:hover { background: rgba(210,74,74,0.08); }
.doc-actions { display: flex; gap: 4px; }

/* Dropzone (DropzoneComponent) */
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: 24px; text-align: center; color: var(--fg-muted); cursor: pointer; background: var(--surface-sunken); transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); display: block; }
.dropzone:hover, .dropzone.drag { border-color: var(--amber); background: var(--amber-l); color: var(--amber-d); }
.dropzone .dz-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--amber-l); color: var(--amber-d); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.dz-strong { font-weight: 700; color: var(--fg); font-size: 14px; }
.dz-hint { font-size: 12px; margin-top: 4px; }

/* Product info (`.pd-info`) */
.pd-info { display: grid; grid-template-columns: 300px 1fr; gap: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: 28px; }
.pd-img { aspect-ratio: 1; background: repeating-linear-gradient(45deg, var(--paper-100), var(--paper-100) 14px, var(--paper-200) 14px, var(--paper-200) 15px); border-radius: var(--r-lg); display: flex; align-items: flex-end; padding: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
.pd-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
.pd-desc { font-size: 14px; line-height: 1.75; color: var(--fg); }
.pd-desc + .pd-desc { margin-top: 14px; }
.pd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: 22px; }
.pd-specs .spec { background: var(--surface); padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.pd-specs .spec-k { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
.pd-specs .spec-v { font-size: 13px; font-weight: 600; color: var(--fg); }

/* Sequence-edit row (SequenceRowRepeaterComponent) */
.seq-edit { display: flex; flex-direction: column; gap: 7px; }
/* SESSION-meet-ux-seq-scroll — bound the repeater so adding sequences scrolls
   inside this block instead of growing the modal. ~6 rows visible (40px row +
   7px gap); beyond that the list scrolls and "Add sequence" stays reachable.
   Right padding + negative margin keep the scrollbar off the delete buttons. */
.seq-scroll {
  /* Cap at a whole number of rows: a fractional cap slices the last row
     mid-height, which reads as a rendering bug rather than "scroll for more".
     Row = .input-sm (7px*2 padding + ~15px line-box + 2px border) = 31px;
     pitch adds the 7px .seq-edit gap. Kept as vars so the two stay in step. */
  --seq-row-h: 31px;
  --seq-row-gap: 7px;
  --seq-visible-rows: 6;
  max-height: calc(
    var(--seq-visible-rows) * (var(--seq-row-h) + var(--seq-row-gap)) -
    var(--seq-row-gap)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  margin-right: -6px;
}
.seq-scroll::-webkit-scrollbar { width: 8px; }
.seq-scroll::-webkit-scrollbar-track { background: transparent; }
.seq-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.seq-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
/* Focus ring on the last row must not be clipped by the scroll container. */
.seq-scroll .seq-edit { padding: 2px; margin: -2px; }
/* On short viewports the modal's own body scroll is the safety net, so the
   inner cap only shrinks the usable area — relax it and let the body scroll. */
@media (max-height: 720px) {
  .seq-scroll { --seq-visible-rows: 4; }
}
.seq-edit-row { display: grid; grid-template-columns: 26px 1fr 96px 30px; gap: 9px; align-items: center; }
.seq-edit-i { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--fg-faint); text-align: center; }

/* Upload-doc staged-file list (UploadDocumentsDialog) */
.stage-list { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.stage-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 11px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.stage-ic { width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: 700; }