@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@300;400;700;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Typography */
  --font-primary: "Chivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Surfaces & borders */
  --bg-root: #F7F7F9;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FCFCFD;
  --bg-surface-hover: #F4F4F7;
  --bg-subtle: #FAFAFB;
  --bg-quiet: #F1F5F9;
  --bg-canvas: #EEF2F7;
  --border-light: #EAEAEF;
  --border-default: #DCDCE3;
  --border-strong: #A1A1AA;
  --border-focus: rgba(0, 47, 167, 0.35);

  /* Text */
  --text-primary: #09090B;
  --text-secondary: #52525B;
  --text-tertiary: #8A8A93;

  /* Brand — International Klein Blue */
  --primary-base: #002FA7;
  --primary-hover: #002175;
  --primary-light: #E6EBFC;
  --primary-quiet: #F3F6FF;
  --ink-blue: #14213D;
  --accent-cyan: #0E7490;
  --accent-olive: #3F6212;
  --accent-gold: #A16207;
  --accent-rust: #9A3412;

  /* Status */
  --status-success-bg: #ECFDF5;
  --status-success-text: #047857;
  --status-success-border: #A7F3D0;
  --status-warning-bg: #FFFBEB;
  --status-warning-text: #B45309;
  --status-warning-border: #FDE68A;
  --status-error-bg: #FEF2F2;
  --status-error-text: #B91C1C;
  --status-error-border: #FECACA;
  /* --- Customer workspace chrome -------------------------------------
     A dark navy shell around a light workspace. The chrome carries the
     premium, "this is an instrument" feel; the content surfaces stay light
     because the data is dense Greek company names, KAD descriptions,
     management tables and filings — long strings that are measurably easier
     to scan on light backgrounds. A fully dark product would look more
     fashionable and read worse, which is the wrong trade for the customer
     who uses this all day. */
  --shell-bg: #0F1729;
  --shell-bg-raised: #17203A;
  --shell-border: rgba(255, 255, 255, 0.08);
  --shell-text: #E6EAF2;
  --shell-text-muted: #9AA6BF;
  --shell-active-bg: rgba(93, 135, 255, 0.16);
  --shell-active-text: #FFFFFF;
  --shell-accent: #5D87FF;
  --shell-width: 244px;
  --shell-width-collapsed: 72px;
  --topbar-height: 60px;

  --status-neutral-bg: #F1F1F4;
  --status-neutral-text: #3F3F46;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05);
  --shadow-md: 0 4px 10px -2px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.05);
  --shadow-lg: 0 12px 28px -6px rgba(9, 9, 11, 0.14);
  --focus-ring: 0 0 0 3px rgba(0, 47, 167, 0.16);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 16% -8%, rgba(0, 47, 167, 0.09), transparent 32rem),
    linear-gradient(180deg, #FFFFFF 0, var(--bg-root) 132px),
    var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-body);
  /* 14px was an internal-tool size. A data product people read for a living
     needs to be legible without leaning in; every rem-based size below scales
     with it, so this one change lifts the whole surface. */
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--primary-base);
  color: #fff;
}

a {
  color: var(--primary-base);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover { color: var(--primary-hover); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ===================== Top bar / nav ===================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 58px;
  padding: 0 var(--space-6);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border-default);
}

.admin-topbar { border-bottom-color: #D8DCE8; }
.portal-topbar { border-bottom-color: #DDE7E3; }

.brand {
  display: inline-grid;
  grid-template-columns: 12px minmax(0, auto);
  align-items: center;
  column-gap: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  white-space: nowrap;
}

.brand:hover { color: var(--text-primary); text-decoration: none; }

.brand span,
.brand small {
  display: block;
}

.brand {
  line-height: 1.05;
}

.brand small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand::before {
  content: "";
  display: block;
  grid-row: 1 / 3;
  grid-column: 1;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--primary-base);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.brand span,
.brand small {
  grid-column: 2;
}

.nav {
  display: flex;
  flex: 1;
  gap: var(--space-1);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav a {
  position: relative;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  padding: 7px 11px;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* Five primary destinations, so each one can afford to be readable. */
.nav-primary {
  flex: 0 1 auto;
  gap: var(--space-1);
  margin-left: var(--space-6);
}

.nav-primary a {
  font-size: 0.9375rem;
  font-weight: 550;
  padding: 9px 14px;
}

.nav-primary a.active {
  font-weight: 650;
}

/* A visible bar under the current section: colour alone is a weak signal, and
   it is the only one a customer gets about where they are. */
.nav-primary a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -11px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.portal-app .nav-primary a.active::after { background: var(--accent-olive); }

/* Managed research: reachable, clearly not the product. */
.nav-secondary-link {
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-secondary-link:hover {
  color: var(--text-primary);
  background: var(--bg-surface-hover);
  text-decoration: none;
}
.nav-secondary-link.active { color: var(--primary-base); }

/* Account lives with the person it belongs to, not among the destinations. */
.account-menu { position: relative; }
.account-menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.account-menu > summary::-webkit-details-marker { display: none; }

/* The native marker is hidden, and on narrow screens the client name goes too —
   which would leave a customer looking at a bare tier pill with nothing saying
   it opens anything. An aria-label is not something a sighted user can read by
   squinting. A caret, drawn in CSS, no icon package. */
.account-menu > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
  flex: none;
}
.account-menu[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.account-menu > summary:hover::after { border-color: var(--text-primary); }

/* The word, for when the client name is not on screen. */
.account-menu-label {
  display: none;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 550;
}
.account-menu > summary:hover { background: var(--bg-surface-hover); }
.account-menu > summary:focus-visible {
  outline: 2px solid var(--primary-base);
  outline-offset: 2px;
}
.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  padding: var(--space-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.account-menu-panel a {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.account-menu-panel a:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.account-menu-panel .portal-logout-form {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}

/* Discover: three views of one capability, said once. */
.subnav {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface);
}
.subnav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: min(1840px, 96vw);
  margin: 0 auto;
  padding: 0 var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-label {
  margin-right: var(--space-3);
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.subnav-inner a {
  position: relative;
  padding: 11px 12px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.subnav-inner a:hover { color: var(--text-primary); text-decoration: none; }
.subnav-inner a.active { color: var(--text-primary); font-weight: 650; }
.subnav-inner a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  background: var(--accent-olive);
}
/* Comparison is an action on a selection, so it sits apart from the three
   places you can be. */
.subnav-inner a.subnav-trailing {
  margin-left: auto;
  color: var(--text-tertiary);
}

.nav a:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.nav a.active {
  color: var(--primary-base);
  background: var(--primary-light);
  font-weight: 600;
}

.nav a.nav-secondary {
  color: var(--text-tertiary);
}

.nav-section-label {
  align-self: center;
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-light);
  color: var(--text-tertiary);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.nav a.nav-engine {
  color: var(--text-tertiary);
  background: rgba(241, 245, 249, 0.35);
  font-size: 0.76rem;
}

.nav a.nav-secondary.active {
  color: var(--primary-base);
}

.portal-app .nav a.active {
  color: var(--accent-olive);
  background: #EFF6E8;
}

/* ===================== Page shell ===================== */
.page {
  /* On a 1920px display the old canvas left the product looking like a card
     floating in an empty room. Data-heavy screens should use the desk they are
     given; the cap still stops line lengths becoming unreadable on ultrawide. */
  /* `width: 100%` is load-bearing, not tidiness. `.page` is a flex item of
     `.workspace-body`, and `margin: 0 auto` makes auto cross-axis margins win
     over stretch — so without a definite width the box is fit-content sized,
     and fit-content is floored by its own min-content. A block with
     `overflow-x: auto` still CONTRIBUTES its content's min-content width in
     block layout, so the 860px table floor propagated all the way up: the page
     grew to 936px inside a 720px viewport and the DOCUMENT scrolled sideways
     while the table itself never did. A definite width stops the intrinsic
     size being consulted at all: the page fills its column, the scroller fills
     the page, and the wide table scrolls where it was always meant to. */
  width: 100%;
  max-width: min(1840px, 96vw);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6) var(--space-12);
  animation: page-in 0.3s ease both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.055), rgba(255, 255, 255, 0) 42%),
    rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-sm);
}

.page-header > div:first-child {
  min-width: 0;
}

h1, h2, h3 { margin: 0; color: var(--text-primary); }

h1 {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 2.2vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

h2 {
  font-family: var(--font-primary);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p { margin: 6px 0 0; }

.page-header p, .empty { color: var(--text-secondary); }

.page-header .actions {
  align-self: center;
}

.workspace-section {
  display: grid;
  gap: var(--space-5);
}

/* ===================== Buttons ===================== */
.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.button:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  text-decoration: none;
}

.button:active { transform: translateY(1px); }

.button.primary {
  border-color: var(--primary-base);
  background: linear-gradient(180deg, #0B45C9, var(--primary-base));
  color: #ffffff;
  box-shadow: 0 8px 18px -12px rgba(0, 47, 167, 0.85);
}

.button.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.button.secondary {
  background: var(--bg-quiet);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.button.ghost {
  background: transparent;
  border-color: transparent;
}

.button.small {
  min-height: 28px;
  padding: 3px 10px;
  font-size: 0.75rem;
}

.button[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.button:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.actions, .action-groups, .action-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.actions {
  min-width: 0;
}

.action-groups { flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.actions form, .action-group form, .action-groups form { margin: 0; }

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

.handoff-controls select {
  min-width: 180px;
}

.action-group > span {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ===================== Panels & metrics ===================== */
.panel {
  position: relative;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel.dense-panel {
  padding: var(--space-4);
}

.panel.status-rail,
.panel.ledger-rail {
  border-left-width: 3px;
  border-left-color: var(--primary-base);
}

.portal-app .panel.status-rail,
.portal-app .panel.ledger-rail {
  border-left-color: var(--accent-olive);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.panel-heading.compact {
  margin-bottom: var(--space-3);
  padding-block: var(--space-2);
}

.panel-heading h2 { font-size: 1rem; }
.panel-heading a { font-size: 0.8125rem; font-weight: 600; }
.panel-heading > div { min-width: 0; }

.panel > h2:first-child { margin-bottom: var(--space-3); }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.cockpit-metrics .metric {
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
}

.metric-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 0;
}

.metric {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary-base);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.metric:nth-child(3n + 2)::before { background: var(--accent-cyan); }
.metric:nth-child(3n)::before { background: var(--accent-olive); }

.metric:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.metric:hover::before { opacity: 1; }

.metric span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.metric strong {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.metric.compact-number strong {
  font-size: 1.05rem;
}

.metric small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: 0.72rem;
  font-weight: 600;
}

.metric.warning::before { background: var(--status-warning-text); opacity: 1; }
.metric.warning strong { color: var(--status-warning-text); }

.metric strong:only-child,
.portal-status-grid .metric strong {
  max-width: 100%;
}

/* ===================== Grids ===================== */
.grid { display: grid; gap: var(--space-6); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===================== Tables ===================== */
.table-wrap,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.panel > .table-wrap,
.panel > .table-scroll {
  border-color: var(--border-light);
}

table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

th, td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
}

td { color: var(--text-primary); }
td a { font-weight: 600; }

tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover td { background: var(--bg-surface-hover); }
tr:last-child td { border-bottom: 0; }

.data-table {
  table-layout: auto;
}

.table-compact th,
.table-compact td {
  padding: 7px 10px;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cell-truncate {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-wide {
  min-width: 260px;
}

.cell-muted {
  color: var(--text-tertiary);
}

.cell-strong {
  font-weight: 700;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.deliverables-ledger-table {
  table-layout: auto;
  min-width: 1180px;
}
.deliverables-ledger-table td,
.deliverables-ledger-table th { white-space: nowrap; }
.deliverables-ledger-table .ledger-reason { white-space: normal; max-width: 220px; }

.deliverables-ledger-table th,
.deliverables-ledger-table td {
  padding: 6px 8px;
  vertical-align: middle;
}

.deliverables-ledger-table .cell-wide {
  min-width: 220px;
}

.deliverables-ledger-table .cell-truncate {
  max-width: 220px;
}

.deliverables-ledger-table .helper {
  margin: 2px 0 0;
  line-height: 1.25;
}

.deliverables-ledger-table .ledger-reason {
  max-width: 180px;
  color: var(--text-tertiary);
}

.deliverable-row.state-failed td,
.deliverable-row.state-empty td {
  background: rgba(254, 242, 242, 0.35);
}

.deliverable-row.state-ready td {
  background: rgba(236, 253, 245, 0.22);
}

.ledger-actions {
  justify-content: flex-start;
  gap: 4px 6px;
}

.ledger-actions .button.small,
.ledger-actions .file-state,
.ledger-actions .status {
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.68rem;
}

.empty {
  color: var(--text-tertiary);
  font-style: italic;
  text-align: left;
  padding: var(--space-5) var(--space-3);
}

/* ===================== Readiness, notices & dense surfaces ===================== */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: var(--space-6);
}

.notice.success {
  border-left-color: var(--status-success-text);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.notice.warning {
  border-left-color: var(--status-warning-text);
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.notice.info {
  border-left-color: var(--primary-base);
  background: var(--primary-light);
  color: var(--primary-hover);
}

.builder-header {
  align-items: center;
}

.request-builder {
  display: grid;
  gap: var(--space-6);
}

.builder-section {
  overflow: visible;
}

.scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 30px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.scope-chip strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scope-chip.success {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.activity-explainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--primary-light);
  border-left: 3px solid var(--primary-base);
  border-radius: var(--radius-md);
  background: #FBFCFF;
  color: var(--text-secondary);
}

.activity-explainer strong {
  color: var(--text-primary);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  padding: 0;
  margin: var(--space-4) 0 0;
  list-style: none;
}

.flow-steps li {
  display: grid;
  gap: var(--space-1);
  min-height: 92px;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}

.flow-steps li strong {
  color: var(--text-primary);
}

.flow-steps li span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.flow-steps li.current {
  border-color: var(--primary-base);
  box-shadow: inset 3px 0 0 var(--primary-base);
}

.flow-steps li.done {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
}

.sticky-actions {
  position: sticky;
  bottom: var(--space-4);
  z-index: 20;
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-md);
}

.company-preview-table th:first-child,
.company-preview-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 240px;
  background: var(--bg-surface);
}

.company-preview-table th:first-child {
  z-index: 2;
  background: var(--bg-subtle);
}

.ledger-rail {
  border-left: 3px solid var(--primary-base);
}

.table-scroll table {
  min-width: 860px;
}

.file-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.file-state.ready {
  color: var(--status-success-text);
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

.file-state.pending {
  color: var(--status-warning-text);
  background: var(--status-warning-bg);
  border-color: var(--status-warning-border);
}

.file-state.warning {
  color: var(--status-error-text);
  background: var(--status-error-bg);
  border-color: var(--status-error-border);
}

.empty-state {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.empty-state .button {
  justify-self: start;
  margin-top: var(--space-2);
}

.form-intro {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
}

.form-intro p {
  color: var(--text-secondary);
  margin: 0;
}

.full-span {
  grid-column: 1 / -1;
}

.surface-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

/* ===================== Status pills ===================== */
.status,
.status-badge,
.qa-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 1px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.status.running, .status.queued, .status.pending,
.status.completed_with_warnings, .status.warning,
.status.submitted, .status.estimating, .status.crawling, .status.qualifying,
.status.exporting, .qa-badge.building, .qa-badge.queued, .qa-badge.empty {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
  border-color: var(--status-warning-border);
}

.status.completed, .status.crawled, .status.exported,
.status.available, .status.info, .status.ok, .status.ready,
.status.ready_to_deliver, .status.delivered, .status.published,
.qa-badge.ready, .qa-badge.published {
  background: var(--status-success-bg);
  color: var(--status-success-text);
  border-color: var(--status-success-border);
}

.status.failed, .status.error, .status.needs_review,
.qa-badge.failed {
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border-color: var(--status-error-border);
}

.status.cancelled, .qa-badge.private {
  background: var(--status-neutral-bg);
  color: var(--text-tertiary);
}

/* ===================== Forms ===================== */
.form { display: grid; gap: var(--space-6); }
.form.narrow { max-width: 720px; }
.form.wide { max-width: 100%; }

.form-grid, .checkbox-grid, .filters { display: grid; gap: var(--space-4); }

.form-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.checkbox-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.filters {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.filters .button { align-self: end; }

.database-search-panel,
.portal-search-panel,
.portal-request-panel {
  overflow: visible;
}

.portal-search-hero {
  align-items: stretch;
  border-color: #C9D4F4;
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.08), rgba(14, 116, 144, 0.05) 42%, rgba(255, 255, 255, 0.92)),
    var(--bg-surface);
}

.portal-search-hero h1 {
  max-width: 820px;
}

.portal-hero-actions {
  align-items: flex-end;
  gap: var(--space-3);
}

.portal-company-search-form {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.portal-company-results-table th,
.portal-company-results-table td {
  vertical-align: top;
}

.freshness-badge {
  display: inline-flex;
  max-width: 12rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.company-intel-header {
  border-color: #C9D4F4;
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.08), rgba(20, 33, 61, 0.03) 52%, rgba(255, 255, 255, 0.95)),
    var(--bg-surface);
}

.company-profile-hero {
  align-items: flex-start;
  border-color: #C7D2FE;
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.09), rgba(14, 116, 144, 0.04) 48%, rgba(255, 255, 255, 0.94)),
    var(--bg-surface);
}

.company-profile-title {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.company-profile-title h1 {
  max-width: 920px;
  overflow-wrap: anywhere;
}

.profile-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.profile-actions {
  align-items: flex-start;
}

.profile-identity-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.identity-chip {
  display: grid;
  gap: 2px;
  min-height: 68px;
  padding: var(--space-3);
  border: 1px solid #DDE7E3;
  border-left: 3px solid var(--accent-olive);
  border-radius: var(--radius-md);
  background: #FBFCFF;
  min-width: 0;
}

.identity-chip.freshness {
  border-left-color: var(--primary-base);
}

.identity-chip span {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.identity-chip strong {
  color: var(--text-primary);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.company-overview {
  margin-top: var(--space-5);
}

.module-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.module-nav a {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.module-nav a:hover,
.module-nav a:focus {
  border-color: var(--primary-base);
  color: var(--primary-hover);
}

.profile-module-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--space-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
}

.profile-module-nav a {
  background: #F8FAFC;
}

.company-intel-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-module {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  border-color: var(--border-light);
}

.profile-module.module-wide {
  grid-column: 1 / -1;
}

.profile-module h2 {
  margin: 0;
  font-size: 1.05rem;
}

.profile-details {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.profile-detail {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profile-detail span,
.profile-detail-label {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-detail strong,
.profile-detail-value {
  color: var(--text-primary);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.profile-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.profile-fact-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-fact {
  display: grid;
  gap: var(--space-1);
  min-height: 76px;
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  min-width: 0;
}

.profile-fact.span-2 {
  grid-column: span 2;
}

.profile-fact span {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-fact strong {
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.activity-chip.small {
  min-height: 26px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

.activity-primary-card {
  display: grid;
  grid-template-columns: auto minmax(90px, auto) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid #C9D4F4;
  border-left: 3px solid var(--primary-base);
  border-radius: var(--radius-md);
  background: #FBFCFF;
}

.activity-primary-card p {
  margin: 0;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-primary-card strong,
.activity-row strong {
  font-family: var(--font-mono);
}

.activity-type-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--status-success-border);
  border-radius: 999px;
  background: var(--status-success-bg);
  color: var(--status-success-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.activity-type-label.secondary {
  border-color: var(--border-default);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}

.activity-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.activity-list-heading h3 {
  margin: 0;
}

.activity-row-list {
  display: grid;
  gap: var(--space-2);
}

.activity-row {
  display: grid;
  grid-template-columns: auto minmax(88px, 120px) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 42px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.activity-row span:not(.activity-type-label) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-row small {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  white-space: nowrap;
}

.activity-row.muted {
  color: var(--text-secondary);
  background: var(--bg-subtle);
}

.activity-row-list.historic {
  margin-top: var(--space-3);
}

.contact-state-grid {
  display: grid;
  gap: var(--space-2);
}

.contact-state-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.25fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.contact-state-row > span {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-state-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.contact-state-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-state-badge.available {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.contact-state-badge.hidden {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.contact-state-badge.missing {
  color: var(--text-tertiary);
}

.lead-fit-list,
.intelligence-status-list {
  display: grid;
  gap: var(--space-2);
}

.lead-fit-item,
.intelligence-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
}

.lead-fit-item span,
.intelligence-status-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lead-fit-item strong,
.intelligence-status-row span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
}

.locked-module-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.locked-module {
  display: grid;
  gap: var(--space-2);
  min-height: 112px;
  padding: var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}

.locked-module strong {
  color: var(--text-primary);
}

.delivery-history-table .status-badge {
  max-width: 100%;
  white-space: normal;
}

.form-section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.form-section h2 { font-size: 1rem; }

.form.panel { gap: var(--space-5); }
.form.panel .form-section { background: var(--bg-subtle); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

label {
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  padding: 8px 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
  accent-color: var(--primary-base);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-base);
  box-shadow: 0 0 0 3px var(--primary-light);
}

input:disabled, select:disabled, textarea:disabled, button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

textarea { resize: vertical; min-height: 84px; }

select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352525B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* --- Delivery command center --- */
.command-hero {
  min-height: 240px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.15), rgba(20, 33, 61, 0.06) 48%, rgba(255, 255, 255, 0.85)),
    var(--bg-surface);
  border-color: #C7D2FE;
}

.command-hero h1,
.dashboard-hero h1 {
  max-width: 980px;
}

.command-panel {
  border-color: #D6DDF5;
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.09), rgba(14, 116, 144, 0.06) 38%, rgba(255, 255, 255, 0) 70%),
    var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.command-panel::after {
  content: "";
  position: absolute;
  right: var(--space-5);
  top: var(--space-5);
  width: 84px;
  height: 84px;
  border: 1px solid rgba(0, 47, 167, 0.18);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(0, 47, 167, 0.14) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(0, 47, 167, 0.14) 50%, transparent 51%);
  opacity: 0.42;
  pointer-events: none;
}

.command-form,
.command-inline-form {
  display: grid;
  gap: var(--space-4);
}

.command-input-label {
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-form textarea,
.command-inline-form textarea {
  width: 100%;
  min-height: 7rem;
  border-color: #C9D4F4;
  background: rgba(255, 255, 255, 0.88);
  font-family: var(--font-primary);
  font-size: 1.05rem;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.command-inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.command-inline-form textarea {
  min-height: 4.75rem;
  font-size: 0.95rem;
}

.command-options {
  margin-top: var(--space-2);
}

.command-options-panel {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(0, 47, 167, 0.12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.58);
}

.command-options-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--text-secondary);
  cursor: pointer;
}

.command-options-panel > summary strong {
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: 0.9rem;
}

.command-options-panel > summary .helper {
  margin: 0;
  text-align: right;
}

.command-options-panel[open] {
  background: rgba(255, 255, 255, 0.78);
}

.command-options-panel[open] > summary {
  margin-bottom: var(--space-3);
}

.optional-label {
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.command-helper {
  margin-top: calc(var(--space-2) * -1);
}

.command-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.command-choice-grid label.checkbox,
.mode-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.mode-pill.locked {
  color: var(--status-success-text);
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

.example-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.delivery-flow-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
  padding: 0;
  list-style: none;
  counter-reset: flow;
}

.delivery-flow-step {
  position: relative;
  min-height: 62px;
  padding: var(--space-3);
  border: 1px solid rgba(0, 47, 167, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
}
.flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-base);
  font-size: 0.62rem;
  font-weight: 700;
}
.flow-note { margin-top: 0; }

.delivery-flow-step strong {
  display: block;
  font-family: var(--font-primary);
  color: var(--ink-blue);
}

.delivery-flow-step span {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

.command-market-panels {
  align-items: stretch;
}

.compact-command-panel .command-inline-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

.engine-room-panel {
  margin: var(--space-4) 0 var(--space-6);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}

.engine-room-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 42px;
  color: var(--text-secondary);
}

.primary-next-action {
  min-width: min(100%, 360px);
  max-width: 420px;
  padding: var(--space-4);
  border: 1px solid #C7D2FE;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.primary-next-action .action-group {
  justify-content: flex-end;
}

.code-block {
  max-height: 24rem;
  overflow: auto;
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: #0F172A;
  color: #E5E7EB;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ===================== Wizard goal cards ===================== */
.intent-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.intent-option {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, background-color 0.18s ease;
}

.intent-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.intent-option::before {
  content: "";
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
}

.intent-option strong {
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.intent-option span {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.intent-option:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.intent-option:has(input:checked) {
  border-color: var(--primary-base);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary-base), var(--shadow-sm);
}

.intent-option:has(input:checked) strong { color: var(--primary-hover); }

.intent-option:focus-within {
  border-color: var(--primary-base);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* ===================== Export / inline panels ===================== */
.export-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  justify-content: flex-start;
}

.export-panel label { flex: 1 1 340px; }
.export-panel .button { align-self: flex-end; }

.helper {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.maintenance-form { margin-top: var(--space-4); }

.error-panel {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-text);
}

.warning-panel {
  border-color: var(--status-warning-border);
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.success-panel {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.inline-warning {
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
  padding: var(--space-4);
  font-size: 0.8125rem;
}

.error-panel.inline-warning { border-color: var(--status-error-border); }
.success-panel.inline-warning { border-color: var(--status-success-border); }

/* ===================== Definition lists ===================== */
.details {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
}

.details.compact { grid-template-columns: 160px minmax(0, 1fr); }

.details dt {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.details dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-weight: 500;
}

/* ===================== Lists ===================== */
.plain-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; }

.plain-list li {
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-3) 0;
}

.plain-list li:last-child { border-bottom: 0; }
.plain-list.scroll { max-height: 360px; overflow: auto; }

/* ===================== Code blocks ===================== */
.pre, .payload, code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: -0.01em;
}

.pre, .payload {
  background: #18181B;
  border: 1px solid #27272A;
  border-radius: var(--radius-md);
  color: #E4E4E7;
  line-height: 1.5;
  overflow: auto;
  padding: var(--space-4);
  white-space: pre-wrap;
}

.payload { max-height: 150px; min-width: 220px; }

td code {
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--text-secondary);
}

summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-base);
  border-radius: var(--radius-sm);
}

details.panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
}

details.panel[open] > summary {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}

/* ===================== Loading feedback ===================== */
#page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 100;
  background: linear-gradient(90deg, var(--primary-base), #4f7bff);
  box-shadow: 0 0 8px rgba(0, 47, 167, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

#page-progress.active {
  opacity: 1;
  animation: progress-fill 60s cubic-bezier(0.1, 0.7, 0.25, 1) forwards;
}

@keyframes progress-fill {
  0% { width: 0; }
  12% { width: 38%; }
  40% { width: 68%; }
  80% { width: 88%; }
  100% { width: 96%; }
}

.button.is-busy { pointer-events: none; opacity: 0.85; }

form.is-loading {
  opacity: 0.92;
  filter: saturate(0.94);
}

.partial-refresh-region {
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.partial-refresh-region.is-refreshing {
  border-color: #CBD5E1;
  box-shadow: inset 0 0 0 1px rgba(0, 47, 167, 0.08);
}

.partial-refresh-region.just-refreshed {
  animation: refreshed-card 0.85s ease both;
}

@keyframes refreshed-card {
  0% {
    background-color: #EEF4FF;
    box-shadow: 0 0 0 1px rgba(0, 47, 167, 0.12);
  }
  100% {
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-sm);
  }
}

.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  vertical-align: -2px;
}

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

@media (prefers-reduced-motion: reduce) {
  #page-progress.active { animation: none; width: 60%; }
  .spinner { animation-duration: 1.4s; }
  .page { animation: none; }
  .metric,
  .intent-option {
    transition: none;
  }
  .metric:hover,
  .intent-option:hover {
    transform: none;
  }
  .partial-refresh-region,
  .partial-refresh-region.just-refreshed {
    animation: none;
    transition: none;
  }
}

/* ===================== Responsive ===================== */
@media (max-width: 1100px) {
  .grid.two, .grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar {
    flex-wrap: wrap;
    min-height: auto;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .topbar > .button.primary { width: 100%; }
  .brand { width: 100%; }
  .nav { order: 3; width: 100%; }
  .nav-section-label {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .portal-user {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .filters { grid-template-columns: 1fr; }
  .page { padding: var(--space-5) var(--space-4) var(--space-8); }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .actions,
  .actions {
    justify-content: flex-start;
  }
  .command-inline-form,
  .compact-command-panel .command-inline-form,
  .delivery-flow-strip {
    grid-template-columns: 1fr;
  }
  .command-options-panel > summary {
    display: grid;
    gap: var(--space-1);
  }
  .command-options-panel > summary .helper {
    text-align: left;
  }
  .cell-truncate {
    max-width: 190px;
  }
  .details, .details.compact { grid-template-columns: 1fr; gap: var(--space-1); }
  .details dd { margin-bottom: var(--space-3); }
}


/* ===================== Tiers, builder & client portal ===================== */

.tier-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 10px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  vertical-align: middle;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}
.tier-pill.tier-pro { background: var(--primary-light); color: var(--primary-base); border-color: #9FB4E8; }
.tier-pill.tier-enterprise { background: #FDF6E0; color: #7A4D00; border-color: #E2C044; }

.progressbar {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--status-neutral-bg);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  overflow: hidden;
}
.progressbar i {
  display: block;
  height: 100%;
  background: var(--primary-base);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.progressbar.coverage i { background: var(--status-success-text); }
.progressbar.small { height: 6px; min-width: 90px; }
.progress-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 150px; }

.usage-meter { display: grid; gap: var(--space-1); margin-top: var(--space-3); }

.builder-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.builder-activity {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}
.builder-stats { display: grid; gap: var(--space-2); }

.checkbox-inline { display: flex; align-items: center; gap: var(--space-2); align-self: end; }

.inline-details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-base);
}
.inline-details[open] { margin-top: var(--space-2); }

.quota-indicator { display: flex; align-items: center; }
.pagination { display: flex; gap: var(--space-2); margin-top: var(--space-4); }

/* --- Portal chrome --- */
.portal-topbar { border-bottom-width: 3px; }
.portal-topbar .brand::before { background: var(--primary-base); }
.portal-user { display: flex; align-items: center; gap: var(--space-3); }
.portal-logout-form { margin: 0; }
.portal-client-name { font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary); white-space: nowrap; }

.portal-app .page {
  max-width: 1280px;
}

.portal-app .page-header {
  border-bottom-color: #DDE7E3;
}

.portal-app .surface-kicker {
  color: var(--accent-olive);
}

.portal-delivery-panel tbody tr td:first-child {
  min-width: 280px;
}

.quality-summary {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid #DDE7E3;
  border-left: 3px solid var(--accent-olive);
  border-radius: var(--radius-md);
  background: #FAFCF8;
}

.quality-summary p {
  margin: 0;
}

.quality-line {
  color: var(--text-secondary);
  font-weight: 600;
}

.quality-line.muted {
  color: var(--text-tertiary);
  font-weight: 500;
}

.portal-search-panel .form-intro,
.portal-request-panel .form-intro {
  margin-bottom: var(--space-4);
}

.masked { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.75rem; }
.masked-note { margin: 0 0 var(--space-3); }

.company-profile-header {
  align-items: center;
}

.profile-inline-meta {
  display: inline-flex;
  margin-left: var(--space-2);
  color: var(--text-secondary);
  font-weight: 600;
}

.company-overview .metric strong {
  font-size: 1rem;
  white-space: normal;
}

.company-profile-grid {
  align-items: start;
}

.contact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.contact-pills.large {
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact-pill.available {
  border-color: var(--status-success-border);
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.contact-lines {
  display: grid;
  gap: var(--space-1);
  min-width: 220px;
}

.contact-lines span {
  overflow-wrap: anywhere;
}

.company-empty-state h2 {
  font-size: 1.1rem;
}

.lookup-request-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.searched-terms {
  max-width: 720px;
}

.activity-primary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--primary-light);
  border-left: 3px solid var(--primary-base);
  border-radius: var(--radius-md);
  background: #FBFCFF;
  margin-bottom: var(--space-5);
}

.activity-primary strong {
  font-family: var(--font-mono);
  font-size: 1rem;
}

.activity-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-5);
}

.activity-chip {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.activity-chip.muted {
  color: var(--text-secondary);
}

.historic-activities summary {
  cursor: pointer;
  color: var(--primary-base);
  font-weight: 700;
}

.source-note {
  margin-top: var(--space-6);
}

/* --- Portal login --- */
.portal-login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(0, 47, 167, 0.06) 0%, transparent 45%),
    var(--bg-root);
}
.portal-login-wrap { width: 100%; max-width: 420px; padding: var(--space-6); }
.portal-login-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 4px solid var(--primary-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  animation: page-in 0.35s ease;
}
.portal-login-brand {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}
.portal-login-brand span { color: var(--primary-base); }
.portal-login-card h1 { margin: 0 0 var(--space-2); font-size: 1.5rem; }
.portal-login-card .form { margin-top: var(--space-5); }
.portal-login-error {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error-text);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}


/* Portal request automation */
.portal-request-form {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.portal-request-form .full-span,
.portal-request-form .form-actions {
  grid-column: 1 / -1;
}

.portal-request-form textarea {
  min-height: 112px;
  resize: vertical;
}

.portal-status-grid .metric strong {
  overflow-wrap: anywhere;
}

.status.error {
  background: var(--status-error-bg);
  color: var(--status-error-text);
  border-color: var(--status-error-border);
}

@media (max-width: 720px) {
  .company-intel-grid,
  .company-overview,
  .profile-identity-strip,
  .profile-fact-grid,
  .profile-fact-grid.compact {
    grid-template-columns: 1fr;
  }

  .profile-fact.span-2 {
    grid-column: auto;
  }

  .portal-hero-actions {
    align-items: stretch;
  }

  .portal-hero-actions .button,
  .module-nav a {
    width: 100%;
    justify-content: center;
  }

  .profile-actions {
    width: 100%;
  }

  .profile-actions .button {
    width: 100%;
    justify-content: center;
  }

  .profile-module-nav {
    position: static;
  }

  .activity-primary-card,
  .activity-row,
  .contact-state-row,
  .lead-fit-item,
  .intelligence-status-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .activity-primary-card p,
  .activity-row span:not(.activity-type-label) {
    white-space: normal;
  }

  .contact-state-badge,
  .activity-type-label {
    justify-self: start;
  }
}

/* =====================================================================
   Operator UI upgrade (PR #34): shell utility, search-first Companies
   grid, Activities/KAD workspace. Uses existing design tokens above.
   ===================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Header utility area: global search + engine menu + primary action */
.topbar-utility {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.global-search input {
  min-width: 220px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 0 12px;
}
.global-search input:focus-visible {
  outline: none;
  border-color: var(--primary-base);
  box-shadow: var(--focus-ring);
}
.engine-menu { position: relative; }
.engine-menu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}
.engine-menu > summary::-webkit-details-marker { display: none; }
.engine-menu > summary:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
.engine-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.engine-menu__panel a {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8125rem;
}
.engine-menu__panel a:hover { background: var(--bg-surface-hover); color: var(--text-primary); text-decoration: none; }
.engine-menu__panel a.active { color: var(--primary-base); background: var(--primary-light); }

/* Search-first company/activity forms */
.company-search-form { display: grid; gap: var(--space-4); }
.search-hero {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.search-hero__field { flex: 1; margin: 0; }
.search-hero__field input {
  width: 100%;
  height: 46px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0 16px;
}
.search-hero__field input:focus-visible {
  outline: none;
  border-color: var(--primary-base);
  box-shadow: var(--focus-ring);
}
.search-hero .button { align-self: stretch; padding-inline: 22px; }

.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
.filter-toolbar > label {
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.filter-toolbar > label input,
.filter-toolbar > label select {
  min-width: 150px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  padding: 0 8px;
}
.filter-toolbar__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-left: auto;
}
.advanced-filters { margin-top: var(--space-1); }
.advanced-filters > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-base);
  padding: var(--space-2) 0;
}
.advanced-filters__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
}
.advanced-filters__grid label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--text-secondary); }
.advanced-filters__grid input,
.advanced-filters__grid select {
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 0.8125rem;
  padding: 0 8px;
}

/* Results / pagination */
.results-panel { display: grid; gap: var(--space-4); }
.results-heading { align-items: start; }
.pagination-controls {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
}
.pagination-controls--footer {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
.button[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Companies operational grid (default, bounded, no horizontal scroll) */
.company-grid { width: 100%; table-layout: auto; }
.company-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-subtle);
}
.cell-company { min-width: 240px; }
.cell-company__name { font-weight: 600; color: var(--text-primary); }
.cell-company__ids {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-tertiary);
}
.cell-sub { display: block; font-size: 0.7rem; color: var(--text-tertiary); }
.cell-contact { white-space: nowrap; }
.contact-pill.off { opacity: 0.4; }
.col-action { text-align: right; white-space: nowrap; }
.text-muted { color: var(--text-tertiary); }

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border: 1px solid var(--border-default);
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
}
.status-pill.ok { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); }
.status-pill.muted { background: var(--status-neutral-bg); color: var(--status-neutral-text); }
.grade-pill {
  display: inline-flex;
  margin-left: 4px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 1px 7px;
  border: 1px solid var(--border-default);
  background: var(--bg-quiet);
  color: var(--text-secondary);
}
.grade-pill.grade-a { background: var(--status-success-bg); color: var(--status-success-text); border-color: var(--status-success-border); }
.grade-pill.grade-b { background: var(--primary-quiet); color: var(--primary-base); border-color: var(--primary-light); }

/* Activities / KAD sector overview */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.sector-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.sector-card__head { display: flex; align-items: center; gap: var(--space-3); }
.sector-card__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--primary-light);
  color: var(--primary-base);
  font-family: var(--font-mono);
  font-weight: 700;
}
.sector-card__title { margin: 0; font-size: 0.95rem; line-height: 1.3; }
.sector-card__stats { display: flex; gap: var(--space-6); margin: 0; }
.sector-card__stats div { display: grid; gap: 2px; }
.sector-card__stats dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.sector-card__stats dd { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.market-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-quiet);
  overflow: hidden;
}
.market-bar__fill { display: block; height: 100%; background: var(--primary-base); border-radius: 999px; }
.sector-card__actions { display: flex; justify-content: flex-end; }

/* Responsive: stack the company grid into cards on tablet/mobile */
@media (max-width: 768px) {
  .topbar-utility { flex-wrap: wrap; }
  .global-search input { min-width: 0; width: 100%; }
  .filter-toolbar__actions { margin-left: 0; width: 100%; }
  .pagination-controls { justify-content: space-between; }

  .company-grid thead { display: none; }
  .company-grid, .company-grid tbody, .company-grid tr, .company-grid td { display: block; width: 100%; }
  .company-grid tr {
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background: var(--bg-surface);
  }
  .company-grid td { border: none; padding: 4px 0; }
  .company-grid td.col-action { text-align: left; margin-top: var(--space-2); }
  .company-grid td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .sector-card__stats { gap: var(--space-4); }
  .health-grid { grid-template-columns: 1fr; }
}

/* System Health status cards */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.health-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.health-card__head { display: flex; align-items: center; justify-content: space-between; }
.health-card__head h2 { margin: 0; font-size: 0.9rem; }
.health-card__status { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.health-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--border-strong); }
.health-card.ok { border-left-color: var(--status-success-text); }
.health-card.ok .health-dot { background: var(--status-success-text); }
.health-card.warn { border-left-color: var(--status-warning-text); }
.health-card.warn .health-dot { background: var(--status-warning-text); }
.health-card.danger { border-left-color: var(--status-error-text); }
.health-card.danger .health-dot { background: var(--status-error-text); }
.health-card.muted { border-left-color: var(--border-strong); }
.health-card.muted .health-dot { background: var(--text-tertiary); }

/* =====================================================================
   Operator UI upgrade (PR #34, continuation): workspace redesigns.
   Summary strips, company detail, ledger/deliveries filters, mobile.
   ===================================================================== */

/* Summary strip (company detail, client detail) */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.summary-tile {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.summary-tile__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); }
.summary-tile__value { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); display: flex; gap: 4px; align-items: center; }

/* Company identity header */
.company-identity .identity-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.identity-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 0.72rem;
}
.identity-chip.mono { font-family: var(--font-mono); font-size: 0.68rem; }
.identity-chip.subtle-chip { border-color: transparent; background: transparent; color: var(--text-tertiary); }
.mono { font-family: var(--font-mono); }

/* In-page section anchors */
.section-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.section-anchors a {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
}
.section-anchors a:hover { background: var(--primary-light); color: var(--primary-base); text-decoration: none; }

/* Activity lists on company detail */
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.activity-list.scroll { max-height: 220px; overflow-y: auto; }
.activity-list li { display: grid; gap: 1px; }
.activity-list li a { font-size: 0.8rem; }
.activity-list li span { font-size: 0.75rem; color: var(--text-secondary); }
.activity-empty { color: var(--text-tertiary); font-size: 0.8rem; }

/* Internal audit blocks */
.audit-block { margin-top: var(--space-3); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--bg-subtle); }
.audit-block > summary { cursor: pointer; font-weight: 600; font-size: 0.82rem; color: var(--text-secondary); }
.audit-block.compact-audit { margin: 0; border: none; background: transparent; padding: 0; }
.audit-detail { display: grid; gap: 2px; padding-top: var(--space-2); }
.internal-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--status-neutral-bg);
  color: var(--status-neutral-text);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.empty-state.compact { padding: var(--space-4) var(--space-3); }

/* Deliverables / deliveries filter toolbars reuse .filter-toolbar */
.deliverables-filters, .deliveries-filters { margin-bottom: var(--space-4); }

/* The deliverables ledger is intentionally wide; give it a min-width so the
   surrounding .table-scroll scrolls horizontally instead of overlapping cells. */
.work-queue-table { min-width: 900px; }
.company-results-table { min-width: 1400px; }

/* Generalised mobile stacking for dense operator tables */
@media (max-width: 768px) {
  .work-queue-table thead,
  .deliverables-ledger-table thead { display: none; }
  .work-queue-table tr,
  .deliverables-ledger-table tr {
    display: block;
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    background: var(--bg-surface);
  }
  .work-queue-table td,
  .deliverables-ledger-table td { display: block; width: 100%; border: none; padding: 4px 0; }
  .work-queue-table td::before,
  .deliverables-ledger-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
  }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .section-anchors { overflow-x: auto; flex-wrap: nowrap; }
  .search-hero { flex-wrap: wrap; }
  .search-hero__field { flex-basis: 100%; }
  .search-hero .button { width: 100%; }
  .company-identity .actions { flex-wrap: wrap; }
}

/* =====================================================================
   Discovery-to-delivery (PR #35): row selection, bulk bar, draft review.
   ===================================================================== */
.discovery-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.col-select { width: 34px; text-align: center; }
.col-select input { width: 16px; height: 16px; cursor: pointer; }
.bulk-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--brand-soft, var(--primary-light));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.bulk-action-bar .bulk-count { font-weight: 700; color: var(--primary-base); }
.draft-confirm-form { margin-top: var(--space-3); }

@media (max-width: 768px) {
  .company-grid td.col-select { display: inline-flex; align-items: center; gap: 6px; width: auto; }
  .company-grid td.col-select::before { content: "Select"; }
  .bulk-action-bar { flex-wrap: wrap; }
  .discovery-actions { flex-direction: column; align-items: stretch; }
}

/* Registry history timeline (PR #37) */
.registry-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.registry-history-item {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-light);
}
.registry-history-item:last-child { border-bottom: 0; }
.registry-history-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); }
.registry-history-label { font-weight: 600; }
.registry-history-change { font-size: 0.8rem; color: var(--text-secondary); }
@media (max-width: 768px) {
  .registry-history-item { grid-template-columns: 1fr; gap: 2px; }
}

/* --- company comparison -------------------------------------------------- */
/* Companies are columns, attributes are rows. The attribute column stays put
   while the companies scroll horizontally, which is the only way a five-column
   table stays readable on a phone. */
.compare-table { border-collapse: collapse; min-width: 100%; }
.compare-table th,
.compare-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 2;
}
.compare-table .compare-attr {
  position: sticky;
  left: 0;
  background: var(--bg-surface);
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
}
.compare-table thead .compare-attr { z-index: 3; }
.compare-table .compare-company { min-width: 12rem; }
.compare-table .unavailable { color: var(--text-tertiary); }
.panel-actions { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }


/* ===================== Customer shell: smaller screens ===================== */
/* Desktop was the problem; solving it must not break the phone. The primary
   nav wraps rather than scrolling off, because navigation a customer cannot
   see is navigation they do not have. */
@media (max-width: 1100px) {
  .portal-topbar { flex-wrap: wrap; row-gap: var(--space-2); }
  /* The five primary destinations WRAP onto a second line. `.nav` inherits
     `overflow-x: auto` from the shared rule above, which would leave the last
     items scrolled off behind a hidden scrollbar — findable only by a customer
     who already knows they are there. The override is explicit for that reason.
     The Discover subnav keeps scrolling: it is a compact secondary control
     whose items are all one section, not the way around the product. */
  .nav-primary {
    margin-left: 0;
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: var(--space-1);
  }
  .nav-primary a.active::after { bottom: -4px; }
  .portal-user { margin-left: auto; }
}

@media (max-width: 720px) {
  .page { padding-left: var(--space-4); padding-right: var(--space-4); }
  .subnav-inner { padding: 0 var(--space-4); }
  .nav-secondary-link { display: none; }   /* still in the account menu */
  .portal-client-name { display: none; }
  /* With the client name gone, "Account" carries the meaning the pill cannot. */
  .account-menu-label { display: inline; }
  .account-menu-panel { right: -4px; min-width: 200px; }
}

/* Focus must stay visible everywhere in the shell: the new nav is the primary
   way around the product and keyboard users get no second chance. */
.nav-primary a:focus-visible,
.subnav-inner a:focus-visible,
.nav-secondary-link:focus-visible,
.account-menu-panel a:focus-visible {
  outline: 2px solid var(--primary-base);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ===================== Intelligence workspace (Overview + Alerts) ========= */
/* A dense feed, not an inbox and not a wall of giant cards. */
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.overview-grid > .panel { margin-bottom: 0; }

.alert-feed { list-style: none; margin: 0; padding: 0; }

.alert-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}
.alert-row:last-child { border-bottom: 0; padding-bottom: 0; }
.alert-feed.compact .alert-row { padding: var(--space-3) 0; }

/* The unread marker is a shape, not only a colour. */
.alert-row-marker {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
}
.alert-row.is-unread .alert-row-marker {
  background: var(--accent-olive);
  border-color: var(--accent-olive);
}

.alert-row-main { flex: 1 1 auto; min-width: 0; }
.alert-row-head { display: flex; align-items: center; gap: var(--space-2); }

.alert-category {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.alert-category-filing { color: var(--primary-base); }
.alert-category-company_change { color: var(--accent-olive); }

/* The word carries the state for anyone who cannot use the colour. */
.alert-unread-flag {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-base);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.alert-title {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
}
.alert-row.is-unread .alert-title { font-weight: 700; }

.alert-detail {
  margin: 2px 0 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.alert-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.alert-row-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

/* Alert views */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--border-default); text-decoration: none; }
.filter-chip.active {
  border-color: var(--accent-olive);
  background: #EFF6E8;
  color: var(--text-primary);
  font-weight: 650;
}
.filter-chip:focus-visible {
  outline: 2px solid var(--primary-base);
  outline-offset: 2px;
}

/* Monitoring summary: four facts, no scores. */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.monitor-tile {
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface-subtle, var(--bg-surface));
}
.monitor-tile__value {
  display: block;
  font-family: var(--font-primary);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
}
.monitor-tile__of { font-size: 1rem; color: var(--text-tertiary); font-weight: 500; }
.monitor-tile__label {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}

.panel-secondary { background: transparent; border-style: dashed; }

@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .alert-row { flex-wrap: wrap; }
  .alert-row-actions { width: 100%; padding-left: calc(8px + var(--space-3)); }
  .monitor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===================== Company dossier ==================================== */
/* Main content plus a monitoring rail. Watching a company is one of the two
   things a customer does FROM a profile, so it sits beside the dossier rather
   than at the end of a long scroll. */
.dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-5);
  align-items: start;
}
.dossier-main { min-width: 0; }

.dossier-rail { position: sticky; top: var(--space-4); }
.rail-panel { margin-bottom: var(--space-4); }
.rail-panel .panel-heading.compact { margin-bottom: var(--space-3); }
.rail-panel h2 { font-size: 0.95rem; }
.rail-actions { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; }
.rail-actions li { list-style: none; }
.rail-actions form { margin: 0; }
.rail-actions .button { width: 100%; }
.rail-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  font-size: 0.8125rem;
}

/* Identifiers, once, in the hero. */
.company-profile-hero .profile-identity-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
}
.company-profile-hero .identity-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  border: 0;
  background: transparent;
}
.company-profile-hero .identity-chip span {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.company-profile-hero .identity-chip strong { font-size: 0.9375rem; }

.profile-subnav { margin-bottom: var(--space-5); }

/* Managed work closes the dossier; it is context about our relationship with
   the company, not intelligence about the company. */
.research-services { padding: var(--space-4) var(--space-5); }
.research-services > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.research-services > summary::-webkit-details-marker { display: none; }
.research-services > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
}
.research-services[open] > summary::after { transform: rotate(-135deg); }
.research-summary-text { color: var(--text-secondary); font-size: 0.9375rem; }

@media (max-width: 1100px) {
  /* The rail stacks into normal flow; nothing depends on it staying beside. */
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier-rail { position: static; }
}
@media (max-width: 720px) {
  .company-profile-hero .profile-identity-strip { gap: var(--space-2) var(--space-4); }
  .profile-actions { flex-wrap: wrap; }
  .profile-actions .button { flex: 1 1 auto; }
}


/* ===================== Customer workspace shell ========================== */
/* Dark chrome, light canvas. The rail makes the product's shape visible from
   anywhere; the topbar keeps search one field away on every page. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--shell-bg);
  color: var(--shell-text);
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

.portal-app .workspace {
  display: grid;
  grid-template-columns: var(--shell-width) minmax(0, 1fr);
  min-height: 100vh;
}

.workspace-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-3);
  background: var(--shell-bg);
  border-right: 1px solid var(--shell-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.workspace-rail .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
  color: var(--shell-text);
}
.workspace-rail .brand:hover { text-decoration: none; }
/* `.brand::before` is the admin/topbar brand's little square, positioned for
   that component's grid. The rail used to hide it behind `.nav`'s overflow
   scroller; with the legacy classes gone it would show up as a stray block
   beside the rail's own mark. The rail has `.brand-mark`, so this is off. */
.workspace-rail .brand::before { content: none; }
.brand-mark { color: var(--shell-accent); font-size: 1.25rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text span { font-family: var(--font-primary); font-weight: 700; font-size: 1rem; }
.brand-text small { color: var(--shell-text-muted); font-size: 0.625rem; }

.rail-nav, .rail-subnav { list-style: none; margin: 0; padding: 0; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-nav > li { list-style: none; }

.portal-app .rail-nav a,
.portal-app .nav-secondary-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--shell-text-muted);
  font-size: 0.9375rem;
  font-weight: 550;
}
.portal-app .rail-nav a:hover,
.portal-app .nav-secondary-link:hover {
  background: var(--shell-bg-raised);
  color: var(--shell-text);
  text-decoration: none;
}
.portal-app .rail-nav a.active {
  background: var(--shell-active-bg);
  color: var(--shell-active-text);
  font-weight: 650;
}
/* A bar, not only a colour. */
.portal-app .rail-nav a.active::before {
  content: "";
  width: 3px;
  align-self: stretch;
  margin: -9px 0 -9px -12px;
  border-radius: 0 2px 2px 0;
  background: var(--shell-accent);
}

.rail-subnav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 var(--space-2) var(--space-5);
  padding-left: var(--space-3);
  border-left: 1px solid var(--shell-border);
}
.portal-app .rail-subnav a {
  padding: 6px 10px;
  font-size: 0.875rem;
  font-weight: 500;
}
.portal-app .rail-subnav a.active {
  background: transparent;
  color: var(--shell-active-text);
  font-weight: 650;
}
.portal-app .rail-subnav a.active::before { content: none; }

.rail-secondary {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--shell-border);
}
.rail-section-label {
  display: block;
  padding: 0 12px var(--space-2);
  color: var(--shell-text-muted);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.workspace-body { min-width: 0; display: flex; flex-direction: column; }

.portal-app .portal-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--topbar-height);
  padding: 0 var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-search { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; max-width: 640px; margin: 0; }
/* The selector said `company_name`; #74 renamed this input to `q`, so the rule
   matched nothing and the input kept its intrinsic width — which is why every
   page overflowed horizontally below 720px. `min-width: 0` is not decoration:
   without it a flex item refuses to shrink past its intrinsic size and the
   overflow comes straight back. */
.topbar-search input[name="q"] {
  flex: 1 1 0;
  min-width: 0;
  height: 38px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: 0.9375rem;
}
.topbar-search input:focus-visible {
  outline: 2px solid var(--primary-base);
  outline-offset: 1px;
  background: var(--bg-surface);
}

.portal-app .portal-user { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.portal-app .page { padding-top: var(--space-6); }

.portal-app .rail-nav a:focus-visible,
.portal-app .rail-subnav a:focus-visible,
.portal-app .nav-secondary-link:focus-visible,
.workspace-rail .brand:focus-visible {
  outline: 2px solid var(--shell-accent);
  outline-offset: 2px;
}

/* --- Narrow screens: the rail becomes a horizontal bar, nothing is lost --- */
@media (max-width: 1100px) {
  .portal-app .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace-rail {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid var(--shell-border);
  }
  .workspace-rail .brand { margin-right: auto; }
  /* The nav takes a full row of the bar. As a shrink-to-fit flex item it sized
     to its widest possible line instead — five destinations on one line, wider
     than a phone, which set the document's minimum width and made the PAGE
     scroll sideways. It cannot wrap if it is never narrower than its content. */
  .rail-nav { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; }
  .rail-nav > li { min-width: 0; }
  .portal-app .rail-nav a.active::before { content: none; }
  .portal-app .rail-nav a.active { box-shadow: inset 0 -2px 0 var(--shell-accent); }
  /* Every row in the bar must be able to WRAP. A row that cannot wrap sets the
     document's minimum width, and the whole page — not just the bar — then
     scrolls sideways. This is the second half of the same overflow the topbar
     search caused. */
  .rail-subnav {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding-left: var(--space-3);
    border-left: 1px solid var(--shell-border);
  }
  .workspace-rail, .rail-nav, .rail-subnav, .rail-secondary { min-width: 0; max-width: 100%; }
  .portal-app .rail-nav a, .portal-app .rail-subnav a { white-space: normal; }
  .rail-secondary {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--shell-border);
    padding-left: var(--space-3);
  }
  .rail-section-label { display: none; }
}

@media (max-width: 720px) {
  .brand-text small { display: none; }
  .portal-app .portal-topbar { height: auto; padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .topbar-search { max-width: none; order: 2; width: 100%; }
  .portal-app .portal-user { margin-left: auto; order: 1; }
  .portal-app .rail-nav a { font-size: 0.875rem; padding: 7px 10px; }
}


/* ===================== Shared table language ============================= */
/* Tables are the product. One language: the company name dominates, the
   identifiers support it, status is a pill and never colour alone. */
.data-table { width: 100%; border-collapse: collapse; }
/* NOT sticky.
   `.table-scroll` is `overflow-x: auto`, which makes it the scroll container a
   sticky header positions against — so `top: var(--topbar-height)` pushed the
   header DOWN 60px from the table's own top edge and printed it across rows one
   and two of every table in the product. Viewport-sticky headers are not
   reachable from inside that wrapper, and no customer table here runs to
   hundreds of rows, so the feature is dropped rather than approximated. A
   correct first row beats a clever header. */
.data-table thead th {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.data-table tbody td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bg-surface-hover); }
.data-table tbody tr:focus-within { background: var(--bg-surface-hover); }
/* The company is the row; everything else is context. */
.data-table tbody td:first-child strong,
.data-table tbody td:first-child a { font-size: 0.9375rem; font-weight: 650; }
.data-table .cell-sub {
  display: block;
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
}
.data-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table-compact tbody td { padding: var(--space-2) var(--space-3); }
.table-scroll { overflow-x: auto; }

/* ===================== Panel hierarchy =================================== */
/* Not every concept is the same bordered rectangle. */
.panel { background: var(--bg-surface); border: 1px solid var(--border-light); }
.panel-primary { border-color: var(--border-default); box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04); }
.panel-quiet { background: var(--bg-subtle); box-shadow: none; }
.panel-heading h2 { letter-spacing: -0.01em; }


/* ===================== Discover: active filters + pagination ============= */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.active-filters-label {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filter-chip.static { cursor: default; background: var(--bg-subtle); }
.filter-clear { font-size: 0.8125rem; font-weight: 550; }
.filter-clear:focus-visible { outline: 2px solid var(--primary-base); outline-offset: 2px; }

.pagination { display: flex; align-items: center; gap: var(--space-3); }
.pagination-context { color: var(--text-tertiary); font-size: 0.875rem; }


/* ===================== Action surfaces =================================== */
/* Search results, watchlists, saved searches, alerts and exports are four
   answers to the same question: here is something, here is why it is here,
   here is its state, here is what you can do about it. They used to invent
   that hierarchy separately, so the same company looked like a different kind
   of object depending on which page found it.

   One vocabulary, used by all of them:

     .entity-cell   identity — name, then identifiers, then classification
     .cell-stack    any two-level cell — lead line plus .cell-sub
     .state-stack   what state this is in, and the quiet action that changes it
     .action-cluster  what you can do, in decreasing loudness

   Button weight inside a row is deliberate and consistent everywhere:
   `.button.small` (bordered) is the row's primary action, `.button.small.ghost`
   is secondary, `.ghost.destructive` is the one you cannot undo. Filled
   `.primary` belongs to page and toolbar actions, not to twenty-five table
   rows shouting at once. */

.entity-cell {
  display: grid;
  gap: 1px;
  min-width: 220px;
  max-width: 420px;
}
/* Long Greek legal names wrap rather than stretching the table. */
.entity-name {
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.entity-ids {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.entity-meta {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.cell-stack { display: grid; gap: 1px; }
.cell-lead { color: var(--text-primary); font-size: 0.875rem; }
.cell-lead.mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.data-table .cell-stack .cell-sub { margin-top: 0; }
/* Activity descriptions are prose in a table; give them room but a ceiling. */
.cell-clamp {
  display: block;
  max-width: 300px;
  overflow-wrap: anywhere;
}

.state-stack {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}
.state-stack form { margin: 0; }
.state-stack .helper { margin: 0; max-width: 260px; }

.action-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.action-cluster form { margin: 0; }
.action-cluster.end { justify-content: flex-end; }
.data-table .action-cluster { justify-content: flex-end; }

/* Destructive actions stay quiet until you reach for them. */
.button.destructive { color: var(--status-error-text); }
.button.destructive:hover {
  border-color: var(--status-error-border);
  background: var(--status-error-bg);
  color: var(--status-error-text);
}

/* Contact availability: the same shape whether the plan shows values or only
   states, so a masked row can never structurally resemble an entitled one. */
.contact-states {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 150px;
}
.contact-states li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 1.35;
}
.contact-key {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 48px;
}
.contact-value { color: var(--text-primary); overflow-wrap: anywhere; }
.contact-value.is-available { color: var(--status-success-text); font-weight: 600; }
.contact-value.is-missing { color: var(--text-tertiary); }

/* Requested / completed / expires as one structured cell rather than three
   date columns that push the actions off the screen. */
.timing-lines { display: grid; gap: 1px; min-width: 150px; }
.timing-lines div { display: flex; gap: var(--space-2); font-size: 0.8125rem; }
.timing-key {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 66px;
}

/* Results toolbar: count on the left, the things you can do with the whole
   result set on the right. */
.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.results-toolbar-context { display: grid; gap: 2px; }
/* An open Save search must push its own panel down, not re-centre the
   buttons beside it. */
.results-toolbar .action-cluster { align-items: flex-start; }
.results-toolbar-context strong { font-size: 1.0625rem; letter-spacing: -0.01em; }
.results-toolbar-context .helper { margin: 0; }

.inline-disclosure { position: relative; }
.inline-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
}
.inline-disclosure > summary::-webkit-details-marker { display: none; }
.inline-disclosure > summary:hover { background: var(--bg-surface-hover); }
.inline-disclosure > summary:focus-visible {
  outline: 2px solid var(--primary-base);
  outline-offset: 2px;
}
.inline-disclosure-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
}
.inline-disclosure-panel label { display: grid; gap: 4px; font-size: 0.75rem; color: var(--text-secondary); }
.inline-disclosure-panel input { min-width: 220px; }

/* Watchlist detail settings: real, but not competing with the companies. */
.settings-disclosure { margin-top: var(--space-4); }
.settings-disclosure > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 650;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.settings-disclosure > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary:hover { color: var(--text-primary); }
.settings-disclosure > summary:focus-visible {
  outline: 2px solid var(--primary-base);
  outline-offset: 3px;
}
.settings-disclosure[open] > summary { margin-bottom: var(--space-4); }

/* Alerts keeps its feed — a change is an event, not a row — but its action
   cluster and its state chips speak the same language as the tables. */
.alert-row-actions.action-cluster { align-items: flex-start; }

@media (max-width: 1100px) {
  .results-toolbar { align-items: stretch; }
  .entity-cell { min-width: 180px; }
  .cell-clamp { max-width: 240px; }
}

@media (max-width: 720px) {
  .results-toolbar > .action-cluster { width: 100%; }
  .inline-disclosure-panel { flex-direction: column; align-items: stretch; }
  .inline-disclosure-panel input { min-width: 0; width: 100%; }
  .data-table .action-cluster { justify-content: flex-start; }
  .page-header .action-cluster { width: 100%; }
}


/* ===================== Discovery feeds =================================== */
/* Markets and New Companies are the other two ways into the same companies.
   They keep their own rendering technology — Markets is React, New Companies
   and market detail are server-rendered — and share the row language above. */

/* One toolbar: the period you are looking at, then the filters, in that order
   of how often they change. */
.discovery-toolbar { display: grid; gap: var(--space-3); }
.discovery-toolbar .filter-toolbar { margin: 0; }

/* Two clocks, and which one you are reading has to be visible before the
   numbers are. The mode switch is a tab bar, not a dropdown buried in a form. */
.filter-bar + .helper { margin-top: calc(var(--space-2) * -1); }

/* The market directory keeps sector names readable while the counts stay
   comparable down the column. */
.data-table .entity-name { display: block; }
.summary-strip + .helper { margin-top: calc(var(--space-3) * -1); }

@media (max-width: 1100px) {
  .discovery-toolbar .filter-toolbar { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 720px) {
  .filter-bar { overflow-x: auto; flex-wrap: nowrap; }
  .filter-bar .filter-chip { white-space: nowrap; }
}

/* Every way a continuation differs from the page it came from, as a list
   rather than a paragraph that nobody finishes. */
.bridge-notes { margin: 0 0 var(--space-3); padding-left: var(--space-4); }
.bridge-notes li { margin-bottom: 2px; }