:root {
  --bg: #faf9f7;
  --card: #ffffff;
  --surface: #eeecea;
  --coral: #f26b3a;
  --emerald: #10b981;
  --amber: #e5a000;
  --lavender: #8b5cf6;
  --terracotta: #c2522a;
  --orange: #ff8c42;
  /* Declined column (triage board): a cool grey-blue, deliberately NOT --muted
     — Skipped already owns that, and "they said no" must read differently from
     "I never looked". Consumed from JS via TRIAGE_COLUMNS, like --gold. */
  --slate: #64748b;
  /* Test task column (triage board): a warm raspberry. Deliberately its own
     hue — the columns on either side are Applied (--coral) and Interview
     (--orange), and "they set me work" must not read as either of them.
     Consumed from JS via TRIAGE_COLUMNS, like --gold and --slate. */
  --raspberry: #d6336c;
  /* Accepted column (triage board): a deep pine green. Deliberately NOT
     --emerald — To apply already owns that, and a bright "go" green next to a
     dark "won" green would read as the same thing twice. Deep enough to hold
     white text and to sit apart from --q-good on the quality scale.
     Consumed from JS via TRIAGE_COLUMNS, like --gold, --slate and
     --raspberry. */
  --pine: #0e7a55;
  --text: #1a1612;
  --muted: #6b6460;
  /* Restored in U18 review (DHA-402): still consumed from JS, not just CSS —
     state.js's TRIAGE_COLUMNS sets the Liked column's color to this token,
     which pipeline.js interpolates into inline styles (move-button accents,
     the column header dot). Not just unreferenced CSS like its siblings
     below were; belongs to the same warm-palette follow-up migration as the
     other kept-with-reason tokens above — do not re-point state.js here. */
  --gold: #ffd166;
  /* Light tints for backgrounds */
  --emerald-tint: #ecfdf5;
  --amber-tint: #fffbeb;
  --rose-tint: #fef2f2;
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 16px rgba(42, 31, 20, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  /* Type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 18px;
  --text-2xl: 36px;

  /* --- Sky redesign token layer (DHA-385, U1) ---
     Single source for the new look. U18 (DHA-402) retired every token that
     had gone unreferenced in CSS AND JS (--mint, --coral-tint,
     --lavender-tint, --warm-tint, --text-xl — --gold looked unreferenced by
     a CSS-only grep but is still set from state.js, see above). The tokens
     above this block are NOT fully retired: a real slice of the app still
     renders in the old warm palette
     (location chips, deadline/freshness badges, monitoring chips, toasts,
     the scroll-to-top button, the company sort-chip bar, the company
     enrichment-stat cards, and the markdown renderer used for descriptions/
     reasoning). Recoloring those to the sky/quality/cobalt system is a
     visual-design decision, not a mechanical rename, so it was left for a
     follow-up rather than done silently inside this cleanup unit — see the
     PR description. */

  /* Sky material — shell (page background) + sheet (content surface) */
  --sky-shell: #e3e7ed;
  --sky-sheet: #f6f8fa;
  --sky-text: #3a3833;
  --sky-text-secondary: #67635a;
  /* tertiary/faint retuned for AA (U16, DHA-400): the originals (#8a867c,
     #b5b1a6) read 2.9–3.6:1 and 1.7–2.1:1 against every background they're
     used on (shell/sheet/white), both well under the 4.5:1 floor for
     body-size text. Contrast is ~L-dominated for this warm-grey hue, so the
     lightest value that clears 4.5:1 against the worst case (shell
     #e3e7ed, the un-seated material) sits within a hair of --sky-text-
     secondary — three visible levels survive, but the bottom two compress
     close together. Ratios (WCAG relative-luminance):
       tertiary #6b675f — shell 4.54:1, sheet 5.29:1, white 5.63:1
       faint    #6c675a — shell 4.54:1, sheet 5.30:1, white 5.64:1
     Genuinely decorative/redundant glyphs (row-arrow icons, a placeholder,
     a kbd hint next to an already-labeled control) stay on the ORIGINAL
     faint value via --sky-text-disabled below — WCAG's contrast minimum
     doesn't apply to them, and forcing them dark would fight their intent. */
  --sky-text-tertiary: #6b675f;
  --sky-text-faint: #6c675a;
  --sky-text-disabled: #b5b1a6;
  --sky-hairline: rgba(255, 255, 255, 0.85);
  --sky-row-hover: rgba(58, 56, 51, 0.035);

  /* Quality scale — the ONE meaning of green/ochre/crimson everywhere
     (score tiles, tier badges, breakdown bars, distribution strips) */
  --q-good: #0b5f44;
  --q-good-bg: #e3f2eb;
  --q-moderate: #8a6410;
  --q-moderate-bg: #f5ebd3;
  --q-weak: #b3262e;
  --q-weak-bg: #f9e9e8;

  /* Tier colors — fixed per tier, independent of the quality scale above */
  --tier-s: #0b5f44;
  --tier-a: #2e8b57;
  --tier-b: #c99a2c;
  --tier-c: #b3262e;

  /* Cobalt — interaction only, never quality (active nav, selection, links) */
  --cobalt: #2545d3;
  --cobalt-tint: rgba(37, 69, 211, 0.1);

  /* Shell glow (U2, DHA-386) — the two radial gradients behind the sky
     material (see body::after). Folded into tokens in U18 (DHA-402); values
     unchanged. */
  --glow-cobalt: rgba(37, 69, 211, 0.06);
  --glow-emerald: rgba(14, 122, 85, 0.07);

  /* Radii */
  --radius-row: 12px;
  --radius-sheet: 18px;
  --radius-pill: 9999px;
  --radius-tile: 8px;
  --radius-tile-lg: 9px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Onest", sans-serif;
  background-color: var(--sky-shell);
  color: var(--text);
  line-height: 1.6;
  font-size: var(--text-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden; /* guard against horizontal scroll on narrow viewports */
}

/* Sky material (DHA-386, U2): quiet cobalt + emerald radial glow in opposite
   corners, plus a fine grain — recipe and values from job-pipeline-dashboard.dc.html. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(700px 340px at 24% 8%, var(--glow-cobalt), transparent 65%),
    radial-gradient(
      700px 340px at 88% 96%,
      var(--glow-emerald),
      transparent 65%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size:
    auto,
    auto,
    240px 240px;
}

/* --- Sidebar navigation (DHA-387, U3) ---
   Left sidebar replaces the top tab bar (design-protocol.md #4). Sticky,
   whole-window scrolling stays (the sidebar scrolls independently only if its
   own content overflows). Below 900px it collapses to an icon rail — see the
   responsive block near the end of this file. */
.app-shell {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.main-area {
  flex: 1;
  min-width: 0;
}

.sidebar {
  width: 216px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 12px;
}

.sidebar-brand-mark {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--tier-a) 0%, var(--cobalt) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-brand-name {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sky-text);
}

.sidebar-search-wrap {
  margin: 0 2px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.sidebar-search-icon {
  flex: none;
  width: 12px;
  height: 12px;
  display: flex;
}

.sidebar-search {
  border: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: var(--sky-text);
  font-size: 12px;
  font-family: "Onest", sans-serif;
  cursor: default;
}

.sidebar-search::placeholder {
  color: var(--sky-text-tertiary);
}

.sidebar-search-kbd {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  /* Redundant with the labeled search affordance itself — decorative
     shortcut hint, not required to clear AA (U16). */
  color: var(--sky-text-disabled);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sky-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.4);
}

.nav-item.active {
  background: #fff;
  color: var(--sky-text);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.08);
}

.nav-icon {
  width: 16px;
  height: 16px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-count {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sky-text-tertiary);
}

.nav-count--cobalt {
  color: var(--cobalt);
}

.nav-subitems {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px 34px;
}

.nav-subitem {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sky-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.nav-subitem:hover {
  background: rgba(255, 255, 255, 0.4);
}

.nav-subitem.active {
  background: rgba(255, 255, 255, 0.55);
  color: var(--sky-text);
  font-weight: 600;
}

.nav-subitem .nav-count {
  font-size: 10px;
}

.nav-item:focus-visible,
.nav-subitem:focus-visible,
.sidebar-search:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

.sidebar-lang {
  padding: 4px 10px 6px;
}

.sidebar-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--sky-text-faint);
}

.sync-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  /* Default/neutral dot; the .sync-label text next to it carries the same
     state — decorative, not required to clear AA (U16). */
  background: var(--sky-text-disabled);
}

.sync-dot.ok {
  background: var(--q-good);
}

.sync-dot.stale {
  background: var(--q-moderate);
}

.sync-dot.error {
  background: var(--q-weak);
}

.sync-label.ok {
  color: var(--sky-text-tertiary);
}

.sync-label.stale {
  color: var(--q-moderate);
}

.sync-label.error {
  color: var(--q-weak);
}

/* Narrow widths (<900px, matching the table scroll-guard test width): the
   sidebar collapses to an icon rail — hide every text label, the search
   affordance's text, counts, inline sub-items, and the footer's language/sync
   words, keeping just the colourful section icons tappable. Icon tap still
   opens the section's default leaf (switchVacancies() unchanged; every other
   section, Triage included, is a single leaf with no sub-view to remember).
   The narrow-width pill row (vacancySubNav) takes over reaching Vacancies'
   sub-views instead. */
@media (max-width: 899px) {
  .sidebar {
    width: 56px;
    padding: 14px 6px 10px;
    align-items: center;
  }
  .sidebar-brand {
    padding: 2px 0 12px;
  }
  .sidebar-search-wrap {
    width: 36px;
    padding: 7px;
    justify-content: center;
  }
  .nav-item,
  .nav-subitem {
    justify-content: center;
    padding: 8px;
  }
  .nav-label,
  .sidebar-search,
  .sidebar-search-kbd,
  .nav-count,
  .nav-subitems,
  .sidebar-lang,
  .sync-label {
    display: none;
  }
  .sidebar-sync {
    justify-content: center;
    padding: 6px 0;
  }

  .vacancy-sub-nav.active {
    display: flex;
  }
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 96px;
  position: relative;
  z-index: 1;
}

/* Sky sheet seating (DHA-386, U2): each dashboard section's own wrapper div
   already is its natural container, so it becomes the sheet directly — no
   new markup. The company profile page is excluded; U7 gives it its own
   reading-column + rail sheet split (design-protocol.md #2, #6). Browse is
   excluded too (U5): its header now sits on the material and only the table
   is seated — see `.catalog-sheet` near the catalog rules below. Today is
   excluded too (U9): its header sits on the material and only the inner
   `.today-sheet` is seated — see the U9 block at the end of this file. */
.companies-section,
.stats-section,
.archive-section,
.boards-section,
.pipeline-section,
.settings-section {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  padding: 24px;
}

/* Browse (U5, DHA-389) keeps its own padding: the header lives directly on
   the material (no sheet padding), so .catalog-section only needs enough to
   match its siblings' outer rhythm; the table's seating is `.catalog-sheet`. */
.catalog-section {
  padding: 4px 0 0;
}

/* --- Location chips (shared: Browse, Archive, company profile) --- */
.loc-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: var(--text-sm);
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--surface);
  text-decoration: none;
  transition: all 0.15s;
}

.loc-chip:hover {
  border-color: var(--coral);
  color: var(--text);
}

/* --- Smart location overflow (shared) --- */
.loc-region-tag {
  font-style: italic;
  opacity: 0.8;
}

.loc-overflow-wrap {
  display: inline;
}
.loc-overflow-chips {
  display: none;
}
.loc-overflow-wrap.expanded .loc-overflow-chips {
  display: inline;
}
.loc-overflow-wrap.expanded .loc-more-btn {
  display: none;
}
.loc-overflow-chip {
  /* same as siblings, no extra style needed */
}
.loc-more-btn {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--surface);
  cursor: pointer;
  transition: all 0.15s;
}
.loc-more-btn:hover {
  border-color: var(--coral);
  color: var(--text);
  background: var(--bg);
}

.card-deadline {
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 9999px;
}

.card-deadline--active {
  color: var(--terracotta);
  background: #fef2f2;
}

.card-deadline--soon {
  color: var(--amber);
  background: var(--amber-tint);
}

.card-deadline--expired {
  color: var(--muted);
  background: var(--surface);
  text-decoration: line-through;
}

.sync-indicator {
  font-size: var(--text-xs);
  color: var(--emerald);
  text-align: center;
  margin-bottom: 8px;
  transition: opacity 0.5s ease;
}
.sync-indicator.fade-out {
  opacity: 0;
}
.sync-indicator.sync-offline {
  color: var(--q-weak);
  font-weight: 500;
  padding: 8px 16px;
  background: var(--q-weak-bg);
  border-radius: 8px;
  border: 1px solid var(--q-weak);
  opacity: 1;
}

/* --- Fallback banner (DHA-422) — offline snapshot notice --- */
/* display:flex is author-origin, so it would beat the UA stylesheet's
   [hidden] { display: none } on the default (live-mode) hidden banner —
   restate the [hidden] rule here so el.hidden actually hides it. */
.fallback-banner[hidden] {
  display: none;
}
.fallback-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--q-moderate);
  background: var(--q-moderate-bg);
  border: 1px solid var(--q-moderate);
}
.fallback-banner.fallback-banner--warning {
  color: var(--q-weak);
  background: var(--q-weak-bg);
  border-color: var(--q-weak);
}
.fallback-banner-text {
  flex: 1;
}
.fallback-banner-dismiss {
  background: none;
  border: none;
  padding: 0 4px;
  font-size: var(--text-lg);
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* --- Toast notification --- */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: "Onest", sans-serif;
  color: #fff;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.toast-liked {
  background: var(--emerald);
}

.toast.toast-passed {
  background: var(--terracotta);
}

/* --- Scroll to top button --- */
.scroll-top-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--coral);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 500;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .stat {
    min-width: 80px;
    padding: 12px 14px;
  }
  .container {
    padding: 16px 16px 80px;
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Section visibility --- */
.catalog-section {
  display: none;
}
.catalog-section.active {
  display: block;
  position: relative;
}
.today-section {
  display: none;
}
.today-section.active {
  display: block;
  position: relative;
}
.stats-section {
  display: none;
}
.stats-section.active {
  display: block;
  position: relative;
}

/* --- Browse header (U5, DHA-389): title + basket tabs + location pills +
   search/sort/show-all, all on the material (design-protocol.md #6). Not
   sticky — only the sidebar is (key decision: whole-window scroll stays). --*/
.browse-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 10px 12px;
  flex-wrap: wrap;
}
.browse-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sky-text);
}
.browse-header-right {
  margin-left: auto;
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.browse-search {
  border: none;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--sky-text);
  font-size: 12px;
  width: 190px;
  font-family: "Onest", sans-serif;
}
.browse-search:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: -1px;
}
.browse-org-filter {
  border: none;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--sky-text);
  font-size: 12px;
  font-family: "Onest", sans-serif;
  cursor: pointer;
}
.browse-org-filter:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: -1px;
}
.browse-sort-btn,
.browse-showall-btn {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
  color: var(--sky-text-secondary);
  cursor: pointer;
  font-family: "Onest", sans-serif;
}
.browse-sort-btn:hover,
.browse-showall-btn:hover {
  background: rgba(255, 255, 255, 0.8);
}
.browse-showall-btn.active {
  background: var(--cobalt-tint);
  color: var(--cobalt);
}
.browse-sort-btn:focus-visible,
.browse-showall-btn:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* --- Basket tabs (U5): segmented pill control, cobalt = active (protocol
   §1 — cobalt marks interaction/selection, never quality). --- */
.basket-tabs {
  display: flex;
  gap: 2px;
  background: rgba(58, 56, 51, 0.06);
  border-radius: 10px;
  padding: 2.5px;
}
.basket-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  font-family: "Onest", sans-serif;
  color: var(--sky-text-secondary);
  cursor: pointer;
}
.basket-tab:hover {
  color: var(--sky-text);
}
.basket-tab.active {
  background: #fff;
  color: var(--sky-text);
  box-shadow: 0 1px 2px rgba(58, 56, 51, 0.08);
}
.basket-tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}
.basket-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sky-text-tertiary);
}
.basket-tab[data-basket="unseen"] .basket-count {
  color: var(--cobalt);
}

/* --- Browse location pills (U5): removable-pill language (design-protocol
   Key Decision) — active pills show a trailing ✕, inactive ones stay
   clickable to add. Cobalt fill = the only "active" signal (never quality). */
.browse-loc-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.browse-loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3.5px 10px;
  border-radius: 9999px;
  border: none;
  background: rgba(58, 56, 51, 0.06);
  color: var(--sky-text-secondary);
  cursor: pointer;
  font-family: "Onest", sans-serif;
}
.browse-loc-chip:hover {
  background: rgba(58, 56, 51, 0.1);
}
.browse-loc-chip.active {
  background: var(--cobalt-tint);
  color: var(--cobalt);
}
.browse-loc-chip.active::after {
  content: " ✕";
}
.browse-loc-chip:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}

.catalog-search {
  flex: 1;
  min-width: 200px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--surface);
  background: var(--bg);
  font-size: var(--text-sm);
  font-family: "Onest", sans-serif;
  color: var(--text);
  outline: none;
}

.catalog-search:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: -1px;
}

.catalog-org-filter {
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--surface);
  background: var(--bg);
  font-size: var(--text-sm);
  font-family: "Onest", sans-serif;
  color: var(--text);
  outline: none;
  cursor: pointer;
  max-width: 200px;
}

.catalog-org-filter:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: -1px;
}

/* ===========================================================================
   BROWSE — dense table (U5, DHA-389). Row anatomy per design-protocol.md #6:
   tinted score tile · title + one grey subline · company + tier badge · facts
   in mono · quiet actions on the right. The 7-column template is shared by
   the header labels and every data row so they stay aligned.
   =========================================================================== */
.catalog-sheet {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  overflow-x: auto;
}
/* min-width guard (AE4): below 920px the table scrolls inside this sheet —
   body-level overflow-x: hidden (near the top of this file) keeps the page
   itself from ever scrolling sideways. */
.catalog-table {
  min-width: 920px;
  display: flex;
  flex-direction: column;
}
.catalog-row-head,
.catalog-row {
  display: grid;
  grid-template-columns: 48px minmax(240px, 1fr) 150px 140px 100px 64px 74px;
  gap: 12px;
  align-items: center;
}
.catalog-row-head {
  padding: 14px 20px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
}
.catalog-row {
  padding: 10px 20px;
  margin: 0 8px;
  border-radius: var(--radius-row);
  cursor: pointer;
}
.catalog-row:hover {
  background: var(--sky-row-hover);
}
.catalog-row:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}
.catalog-row.dismissing {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.catalog-row-score {
  width: 40px;
  height: 30px;
  border-radius: var(--radius-tile-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
}

.catalog-row-role {
  min-width: 0;
}
.catalog-row-title-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.catalog-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.catalog-row-title-line .card-deadline {
  flex: none;
}
.catalog-row-sub {
  font-size: 11.5px;
  color: var(--sky-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-row-company {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  min-width: 0;
}
.catalog-row-org {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sky-text);
}
.catalog-row-tier {
  flex: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
}

.catalog-row-loc {
  font-size: 12px;
  color: var(--sky-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-row-comp {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--sky-text-secondary);
}

.catalog-row-seen {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--sky-text-faint);
}

.catalog-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.catalog-row-btn {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.catalog-row-btn.like {
  background: var(--q-good);
  color: #fff;
}
.catalog-row-btn.like:hover {
  background: #094a35;
}
.catalog-row-btn.pass {
  background: rgba(58, 56, 51, 0.06);
  color: var(--sky-text-faint);
}
.catalog-row-btn.pass:hover {
  background: var(--q-weak-bg);
  color: var(--q-weak);
}
.catalog-row-btn:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}

.browse-rows .catalog-empty {
  padding: 48px 20px;
}
.browse-results-count {
  padding: 12px 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--sky-text-faint);
  text-align: right;
}

/* LLM score badge */
.llm-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: var(--text-sm);
  font-weight: 800;
  font-family: "Onest", sans-serif;
  letter-spacing: -0.03em;
  line-height: 1;
}

.llm-score-badge.llm-excellent {
  background: #f0fdf4;
  color: #16a34a;
}
.llm-score-badge.llm-good {
  background: #eff6ff;
  color: #2563eb;
}
.llm-score-badge.llm-partial {
  background: #fffbeb;
  color: #d97706;
}
.llm-score-badge.llm-weak {
  background: #fff1f2;
  color: #e11d48;
}
.llm-score-badge.llm-none {
  background: var(--surface);
  color: var(--muted);
}

/* Screen-only score marker — a cheap two-pass score not yet confirmed by the
   strong model, shown only when it's high enough to be mistaken for one. */
.screen-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin-left: 4px;
  padding: 0 6px;
  border: 1px dashed var(--muted);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--surface);
  cursor: help;
}

.catalog-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: var(--text-base);
  grid-column: 1 / -1;
}

.catalog-empty-icon {
  font-size: var(--text-2xl);
  margin-bottom: 12px;
}

.catalog-empty-hint {
  margin-top: 8px;
  font-size: var(--text-sm);
  opacity: 0.85;
}
.catalog-empty code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Hard requirements tags */
.hard-req-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.hard-req-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 9999px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.hard-req-tag::before {
  content: "⚠";
  font-size: 10px;
}

/* US work-eligibility "unclear" — softer amber (an unknown, not a blocker). */
.hard-req-tag--warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

/* ===========================================================================
   COMPANIES MODE
   =========================================================================== */

.companies-section {
  display: none;
}
.companies-section.active {
  display: block;
  position: relative;
}

.companies-filters {
  background: var(--card);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Company sub-tabs (.company-sub-tabs/.company-sub-tab/.sub-tab-count) —
   restyled as segmented pills in the U8 companies redesign block at EOF. */

/* --- Company stats cards ---
   Approved tab's Total/With new/Needs attention row was removed entirely
   (post-ship fast fix) — the container stays for Pending/Archived's smaller
   card rows below, and collapses to no space when empty (:empty). */
.company-enrichment-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.company-enrichment-stats:empty {
  margin-bottom: 0;
}
.ces-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 180px;
  padding: 14px 12px 12px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}
.ces-card:hover {
  box-shadow: var(--shadow-md);
}
.ces-card--pending {
  border-color: var(--amber);
  background: var(--amber-tint);
}
.ces-card--approved {
  border-color: var(--emerald);
  background: var(--emerald-tint);
}
.ces-card--total {
  border-color: var(--surface);
}
.ces-number {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.ces-card--pending .ces-number {
  color: var(--amber);
}
.ces-card--approved .ces-number {
  color: var(--emerald);
}
.ces-card--total .ces-number {
  color: var(--text);
}
.ces-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 2px;
}
.ces-shown {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 8px;
}
.ces-review-complete {
  text-align: center;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: var(--text-base);
  font-weight: 600;
  color: #059669;
  background: #ecfdf5;
  border-radius: 8px;
  animation: fadeInOut 4s ease-in-out;
}
.ces-pending-hidden {
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
/* Relocated to the sidebar footer (DHA-387, U3) — no border in the shell
   (design-protocol.md #2), quiet until active, cobalt for the current pick. */
.lang-switch {
  display: inline-flex;
  gap: 2px;
  width: fit-content;
  border-radius: 9999px;
  background: rgba(58, 56, 51, 0.06);
  padding: 2px;
}
.lang-btn {
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sky-text-tertiary);
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-family: "Onest", sans-serif;
}
.lang-btn:hover {
  color: var(--sky-text);
}
.lang-btn--active {
  color: #fff;
  background: var(--cobalt);
}
.lang-btn:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* .companies-grid (scroll-guard wrapper) restyled in the U8 block at EOF. */

/* --- Company card --- */
.company-card {
  background: var(--card);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 4px solid var(--coral);
}

.company-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.company-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-name a {
  color: var(--text);
  text-decoration: none;
}
.company-name a:hover {
  color: var(--coral);
}

/* .company-tier-badge / .ctier-s/a/b/c/none retired (U8, DHA-392): the
   companies table's tier badge now uses .vac-tier + tierClass() below, the
   same shared classes the vacancy page (U6) and company profile (U7) already
   use — a tier never shows two colors depending on which screen you're on. */

/* Sky redesign quality/tier classes (DHA-385, U1) — bound to the token layer
   above. */
.q-good {
  color: var(--q-good);
}
.q-good-bg {
  background: var(--q-good-bg);
  color: var(--q-good);
}
.q-moderate {
  color: var(--q-moderate);
}
.q-moderate-bg {
  background: var(--q-moderate-bg);
  color: var(--q-moderate);
}
.q-weak {
  color: var(--q-weak);
}
.q-weak-bg {
  background: var(--q-weak-bg);
  color: var(--q-weak);
}

.tier-s {
  color: #fff;
  background: var(--tier-s);
}
/* A/B badge text is black, not white (AA, R12): white-on-tier-a is 4.25:1
   and white-on-tier-b is 2.58:1, both below the 4.5:1 floor for this
   9px/800 weight text. The app's standard dark-text token (--sky-text,
   #3a3833) does NOT fix this — it's only 2.76:1 on tier-a and 4.54:1 on
   tier-b (review caught this: an earlier version of this comment wrongly
   quoted the black-on-tier-a ratio for --sky-text). Pure black clears both
   comfortably (4.95:1 on tier-a, 8.14:1 on tier-b) without touching the
   tier-a/tier-b background hex the design protocol documents as fixed
   brand colors. */
.tier-a {
  color: #000;
  background: var(--tier-a);
}
.tier-b {
  color: #000;
  background: var(--tier-b);
}
.tier-c {
  color: #fff;
  background: var(--tier-c);
}
.tier-unknown {
  color: #fff;
  background: var(--sky-text-faint);
}

/* .company-empty (shared with Geo via #statsSection override) restyled in
   the U8 block at EOF. */

/* The not-found panel's own back button (app.js's notFoundPanelHtml) —
   split out of .cp-back-btn in U18 (DHA-402); that class was never
   company-profile-exclusive despite the name, which this fixes. */
.nf-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid var(--surface);
  background: var(--card);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: "Onest", sans-serif;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  width: fit-content;
}

.nf-back-btn:hover {
  border-color: var(--coral);
  color: var(--text);
  background: #fff7ed;
}

/* Company table shell + row/cell base (.company-table, .ct-header-row,
   .ct-th*, .ct-col-*, .ct-row, .ct-td, .ct-name-text, .ct-liked-*,
   .ct-location-text, .ct-new-nonzero, .freshness-*, .mon-cell/.mon-dot*)
   rebuilt for the sky theme in the U8 companies redesign block at EOF.
   (.mon-chips-row/.mon-chip below are the separate filter-chips row —
   untouched by this unit.) */

/* --- Monitoring filter chips row --- */
.mon-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.mon-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.6;
  border: 1px solid var(--border);
  transition: opacity 0.15s;
  user-select: none;
}
.mon-chip:hover {
  opacity: 0.85;
}
.mon-chip.active {
  opacity: 1;
  border-color: currentColor;
  font-weight: 600;
}
.mon-chip--error {
  color: var(--coral);
}
.mon-chip--stale {
  color: var(--amber);
}
.mon-chip--manual {
  color: #6366f1;
}
.mon-chip--nosource {
  color: var(--amber);
}
.mon-chip--never {
  color: var(--muted);
}
.mon-chip--nodata {
  color: var(--amber);
}
.mon-chip--ok {
  color: var(--emerald);
}

/* .ct-row--archived, .ct-col-reason, .ct-badge-*, review buttons (.cr-*) and
   the old column-hiding responsive block are rebuilt (or, for the unused
   .cr-btn-lg/.cr-status/.cr-approved/.cr-rejected, dropped as dead) in the
   U8 companies redesign block at EOF — narrow widths now scroll the sheet
   (AE4) instead of hiding columns. */
@media (max-width: 768px) {
  .companies-filters {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===========================================================================
   COMPANY PROFILE PAGE
   =========================================================================== */

.company-profile-page {
  display: none;
}
.company-profile-page.active {
  display: block;
}

/* Vacancy detail page (routed, ?vacancy=, U6). The header band sits directly on
   the material; only the reading column + facts rail are seated on a sheet
   (protocol §6). The overlay itself is just a display toggle. */
.vacancy-detail-page {
  display: none;
}
.vacancy-detail-page.active {
  display: block;
}

.vac-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Header band (on the material) --- */
.vac-back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: "Onest", sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sky-text-tertiary);
  cursor: pointer;
}
.vac-back:hover {
  color: var(--cobalt);
}
.vac-back:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: 6px;
}
.vac-header-main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 6px;
}
.vac-score-tile {
  flex: none;
  width: 54px;
  height: 42px;
  border-radius: var(--radius-tile-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 19px;
  font-weight: 700;
}
.vac-score--none {
  background: var(--sky-row-hover);
  color: var(--sky-text-faint);
}
.vac-header-text {
  flex: 1;
  min-width: 240px;
}
.vac-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.vac-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--sky-text);
}
.vac-badge {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}
.vac-badge--expiring,
.vac-badge--expired,
.vac-badge--stale {
  color: var(--q-weak);
  background: var(--q-weak-bg);
}
.vac-status-chip {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  color: var(--cobalt);
  background: var(--cobalt-tint);
}
.vac-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--sky-text-tertiary);
  flex-wrap: wrap;
}
.vac-org {
  font-weight: 700;
  color: var(--sky-text);
}
.vac-org--link {
  cursor: pointer;
}
.vac-org--link:hover {
  color: var(--cobalt);
}
.vac-tier {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 1px 5px;
}
.vac-meta-comp {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--sky-text-secondary);
}
.vac-meta-seen {
  color: var(--sky-text-faint);
}

/* --- Actions --- */
.vac-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.vac-btn {
  height: 34px;
  padding: 0 15px;
  border-radius: 10px;
  border: none;
  display: inline-flex;
  align-items: center;
  font-family: "Onest", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.vac-btn:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}
.vac-btn--apply {
  background: var(--cobalt);
  color: #fff;
}
.vac-btn--apply:hover {
  background: #1d38b2;
}
.vac-btn--like {
  background: var(--q-good);
  color: #fff;
}
.vac-btn--like:hover {
  filter: brightness(1.1);
}
.vac-btn--pass {
  background: rgba(255, 255, 255, 0.6);
  color: var(--sky-text-secondary);
  font-weight: 600;
}
.vac-btn--pass:hover {
  background: var(--q-weak-bg);
  color: var(--q-weak);
}
.vac-btn--link {
  background: transparent;
  color: var(--cobalt);
  padding: 0 8px;
}
.vac-btn--link:hover {
  text-decoration: underline;
}
/* Research / Network dispositions — the two triage-column accent colors
   (--amber, --lavender). Amber takes dark text for contrast; lavender keeps
   white, matching the like button's white-on-color treatment. */
.vac-btn--research {
  background: var(--amber);
  color: #2b2200;
}
.vac-btn--research:hover {
  filter: brightness(1.05);
}
.vac-btn--network {
  background: var(--lavender);
  color: #fff;
}
.vac-btn--network:hover {
  filter: brightness(1.08);
}

/* Keyboard-nav hint (post-ship fast fix) — same quiet mono-chip recipe as
   Browse's .browse-keyhint, namespaced for the vacancy page. .vac-page's flex
   gap already spaces it from the header above and the sheet below. */
.vac-keyhint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sky-text-faint);
  flex-wrap: wrap;
}
.vac-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sky-text-tertiary);
  background: rgba(58, 56, 51, 0.05);
  border-radius: 5px;
  padding: 1px 6px;
}
.vac-keyhint-label {
  margin-right: 8px;
}

/* --- Sheet: reading column + facts rail --- */
.vac-sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  overflow: hidden;
}
.vac-reading {
  flex: 1;
  min-width: 320px;
  max-width: 700px;
  padding: 34px 44px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.vac-summary {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--sky-text);
  text-wrap: pretty;
}
.vac-caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  margin-bottom: 8px;
}
.vac-reasoning-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--sky-text-secondary);
  text-wrap: pretty;
}
.vac-section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  margin-bottom: 10px;
}
.vac-desc-block summary {
  cursor: pointer;
}
.vac-desc-block .vac-desc {
  margin-top: 10px;
}
.vac-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--sky-text);
  text-wrap: pretty;
}
.vac-desc p {
  margin-bottom: 10px;
}
.vac-desc ul {
  margin: 8px 0 12px 18px;
}
.vac-desc li {
  margin-bottom: 5px;
}
.vac-desc h1,
.vac-desc h2,
.vac-desc h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 14px 0 6px;
  color: var(--sky-text);
}
.vac-desc a {
  color: var(--cobalt);
}
.vac-empty {
  font-size: 13.5px;
  color: var(--sky-text-tertiary);
}

/* --- Facts rail --- */
.vac-rail {
  width: 264px;
  flex: none;
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vac-rail-group {
  display: flex;
  flex-direction: column;
}
.vac-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 4px 0;
}
.vac-fact-k {
  color: var(--sky-text-tertiary);
}
.vac-fact-v {
  font-weight: 600;
  color: var(--sky-text);
  text-align: right;
}
.vac-loc {
  display: block;
  font-size: 12.5px;
  color: var(--sky-text);
  padding: 3px 0;
  text-decoration: none;
}
.vac-loc--link {
  color: var(--cobalt);
}
.vac-loc--link:hover {
  text-decoration: underline;
}
.vac-us-warn {
  font-size: 12px;
  font-weight: 600;
  color: var(--q-weak);
  background: var(--q-weak-bg);
  border-radius: 10px;
  padding: 9px 12px;
  line-height: 1.4;
}
.vac-req-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vac-req-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--sky-text-secondary);
  background: var(--sky-row-hover);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}
.vac-company-card {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 13px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vac-company-card:hover {
  box-shadow: 0 2px 8px rgba(58, 56, 51, 0.1);
}
.vac-company-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.vac-company-mono {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.vac-company-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-text);
}
.vac-company-note {
  font-size: 11.5px;
  color: var(--sky-text-tertiary);
  line-height: 1.5;
}
.vac-company-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--cobalt);
}
.vac-empty-actions {
  margin-top: 16px;
}

/* Narrow: stack the rail under the reading column (protocol collapse width) */
@media (max-width: 900px) {
  .vac-reading {
    max-width: none;
    padding: 24px 22px;
  }
  .vac-rail {
    width: 100%;
    border-top: 1px solid var(--sky-row-hover);
  }
}

.company-profile {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Status bar --- */
.cp-status-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.cp-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 10px;
  background: var(--bg);
}

.cp-stat-icon {
  font-size: 14px;
}

.cp-stat-vacancies {
  color: var(--coral);
}
.cp-stat-liked {
  color: var(--emerald);
}
.cp-stat-passed {
  color: var(--muted);
}
.cp-stat-unseen {
  color: var(--amber);
}

/* --- Markdown rendered content --- */
.md-content {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.7;
}

.md-content h1 {
  font-size: var(--text-lg);
  font-weight: 800;
  margin: 24px 0 12px;
  color: var(--text);
  border-bottom: 2px solid var(--surface);
  padding-bottom: 8px;
}

.md-content h2 {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 20px 0 10px;
  color: var(--text);
}

.md-content h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.md-content p {
  margin: 0 0 10px;
}

.md-content ul,
.md-content ol {
  margin: 0 0 10px;
  padding-left: 20px;
}

.md-content li {
  margin-bottom: 4px;
}

.md-content a {
  color: var(--coral);
  text-decoration: none;
}
.md-content a:hover {
  text-decoration: underline;
}

.md-content code {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--text-xs);
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
}

.md-content blockquote {
  border-left: 3px solid var(--lavender);
  padding: 8px 14px;
  margin: 0 0 12px;
  background: #faf8f3;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-style: italic;
}

.md-content hr {
  border: none;
  border-top: 1px solid var(--surface);
  margin: 20px 0;
}

.md-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: var(--text-xs);
}

.md-content th,
.md-content td {
  padding: 6px 10px;
  border: 1px solid var(--surface);
  text-align: left;
}

.md-content th {
  background: var(--bg);
  font-weight: 700;
}

/* ===========================================================================
   TRIAGE MODE — Funnel + Kanban
   =========================================================================== */

.pipeline-section {
  display: none;
}
.pipeline-section.active {
  display: block;
  position: relative;
}
.archive-section {
  display: none;
}
.archive-section.active {
  display: block;
  position: relative;
}

/* --- Loading screen (shown until statuses load from API) --- */
.catalog-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 24px;
  animation: loadingFadeIn 0.3s ease-out;
}
.catalog-loading.hidden {
  animation: loadingFadeOut 0.4s ease-out forwards;
}
.loading-text {
  font-size: var(--text-lg);
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.loading-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--sky-hairline, rgba(0, 0, 0, 0.08));
  border-top-color: var(--muted);
  animation: loadingSpin 0.8s linear infinite;
}
@keyframes loadingSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation: none;
    border-top-color: var(--sky-hairline, rgba(0, 0, 0, 0.08));
  }
}
@keyframes loadingFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes loadingFadeOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-loading.hidden {
    animation: none;
    display: none;
  }
}

/* Applications & research — small blocks in the company profile (the
   standalone Applications dashboard section this once also fed was deleted,
   DHA-413; these company-profile blocks are a separate, unrelated feature). */
.cp-app-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-app-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.cp-app-status {
  text-transform: capitalize;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #ecfdf5;
  color: #047857;
}
.cp-app-status-rejected,
.cp-app-status-withdrawn {
  background: #fef2f2;
  color: #991b1b;
}
.cp-app-status-offer {
  background: #fffbeb;
  color: #b45309;
}
.cp-app-source {
  font-weight: 600;
  color: #6b7280;
}
.cp-app-meta {
  color: #9ca3af;
}
.cp-app-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cp-app-artifact {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  background: #f3f4f6;
  color: #4b5563;
}
.cp-app-research-label {
  margin: 12px 0 6px;
  font-weight: 600;
  color: #6b7280;
}

/* =========================================================================
   DHA-348 — six-section restructure: Vacancies sub-nav, Applications,
   Settings, and the Boards catalogue additions.
   ========================================================================= */

/* Vacancies sub-navigation (Browse / Geo / Archive). DHA-387, U3: the
   sidebar's own inline sub-items now cover this at desktop widths, so this
   row is hidden there and only reappears below 900px, as the pill row above
   the sheet that reaches Vacancies' sub-views once the sidebar collapses to
   an icon rail (see the responsive block near the end of this file). Active
   state is still toggled by app.js's switchMode(), via .active instead of an
   inline display style. Triage used to share a top-nav section (and this
   same row style) with the Applications section before it was deleted
   (DHA-413); Triage is now its own single-leaf section. */
.vacancy-sub-nav {
  display: none;
  gap: 0;
  margin-bottom: 14px;
  background: var(--sky-sheet);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
}
.vacancy-sub-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sky-text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
}
.vacancy-sub-tab:hover {
  background: var(--sky-row-hover);
  color: var(--sky-text);
}
.vacancy-sub-tab.active {
  color: var(--cobalt);
  border-bottom-color: var(--cobalt);
  background: var(--cobalt-tint);
}

.settings-section {
  display: none;
}
.settings-section.active {
  display: block;
  position: relative;
}
/* .settings-intro/.settings-h2/.settings-sub/.settings-empty (pre-redesign)
   removed here — settings.js (U14) now emits .settings-header/-header-title/
   -header-sub and .stg-empty instead (EOF block). The display/.active toggle
   above stays: Settings' new markup still lives in the same #settingsSection
   element (it used to be shared with the now-deleted Applications section). */

/* === U10 Geo (redesign) ===================================================
   Geo (`#statsSection`) reuses the shared `.company-table` / `.ct-*` classes
   from the not-yet-reskinned Companies table (U8), so every rule below is
   scoped under `#statsSection` — it restyles Geo only and never edits the
   base selectors Companies still relies on. `.geo-table-wrap`,
   `.geo-score-dash` are Geo-only classes (stats.js). Sheet seating for
   `.stats-section` itself already landed in U2.
   =========================================================================== */

#statsSection .stats-help {
  font-size: var(--text-xs);
  color: var(--sky-text-faint);
  margin-bottom: 14px;
}

/* Scroll-guard (AE4): table clamps to a floor so the city column can't be
   crushed on real mobile widths; on the 900px sidebar-collapse test width
   Geo's five narrow columns still fit, so no scrollbar appears there — the
   guard exists for genuinely narrow viewports. */
#statsSection .geo-table-wrap {
  overflow-x: auto;
}

#statsSection .company-table {
  min-width: 440px;
  background: transparent;
  box-shadow: none;
}

#statsSection .ct-header-row {
  background: transparent;
}

#statsSection .ct-th {
  padding: 6px 14px 10px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sky-text-faint);
}

#statsSection .ct-th-active {
  color: var(--cobalt);
}

#statsSection .ct-col-name {
  width: 28%;
}
#statsSection .ct-col-country {
  width: 24%;
}
#statsSection .ct-col-vac,
#statsSection .ct-col-liked,
#statsSection .ct-col-fit {
  width: 16%;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}

#statsSection .ct-row--remote .ct-name-text {
  color: var(--sky-text-tertiary);
  font-weight: 500;
}

/* Geo's rows read wider than Companies' — the only real override left here
   (U18, DHA-402: the border-left/border-bottom/hover overrides that used to
   sit alongside this were pruned — the shared .ct-row/.ct-td base already
   carries those same values). */
#statsSection .ct-td {
  padding: 10px 14px;
}
#statsSection .ct-name-text {
  font-family: "Onest", sans-serif;
  color: var(--sky-text);
}

#statsSection .ct-liked-nonzero {
  color: var(--q-good);
}
#statsSection .ct-liked-zero {
  color: var(--sky-text-faint);
  font-weight: 400;
}

#statsSection .geo-score-dash {
  color: var(--sky-text-faint);
}
#statsSection .q-good,
#statsSection .q-moderate,
#statsSection .q-weak {
  font-weight: 700;
}

#statsSection .company-empty {
  color: var(--sky-text-faint);
}
/* === Today (DHA-410 rework) === */
/* Today: a material header (title + subtitle) above a single-column sheet of
   six ordered, hide-when-empty action blocks — Committed · Awaiting reply ·
   Liked · Closing soon · Don't-let-good-ones-rot · In progress · Approve
   intake. The old main/rail split is gone (the rail's metrics/learning panels
   were cut for calm; pending-company approvals fold into the Approve-intake
   block). Rows open the vacancy/company detail page; inline quick actions keep
   stopPropagation so they don't also trigger that navigation. */

.today-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 10px 12px;
  flex-wrap: wrap;
}
.today-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sky-text);
}
.today-subtitle {
  font-size: 12.5px;
  color: var(--sky-text-tertiary);
}

.today-sheet {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
.today-main {
  flex: 1;
  min-width: 360px;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section-label rhythm shared by every block. */
.today-section-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sky-text-tertiary);
}
.today-section-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--sky-text-faint);
}

.today-rows {
  display: flex;
  flex-direction: column;
}
.today-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 11px;
  cursor: pointer;
}
.today-row:hover {
  background: var(--sky-row-hover);
}
.today-row:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}
.today-row.dismissing {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.today-row-score {
  flex: none;
  width: 36px;
  height: 26px;
  border-radius: var(--radius-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
}
.today-row-body {
  min-width: 0;
  flex: 1;
}
.today-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-row-sub {
  font-size: 11.5px;
  color: var(--sky-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-actions {
  flex: none;
  display: flex;
  gap: 16px;
  align-items: center;
}
/* Quiet cobalt text links, not filled pills — the calm sheet aesthetic, and
   the same treatment as the rail's .today-pending-cta. The primary action is
   cobalt; Pass is a muted secondary link. No colour fill, no emoji glyphs
   (design-protocol: cobalt = interaction only). DHA-412 item #2. */
.today-act {
  border: none;
  background: none;
  padding: 0;
  font-family: "Onest", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cobalt);
  cursor: pointer;
  white-space: nowrap;
}
.today-act:hover {
  text-decoration: underline;
}
.today-act:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}
.today-act.act-pass {
  color: var(--sky-text-tertiary);
  font-weight: 600;
}
.today-act.act-pass:hover {
  color: var(--q-weak);
  text-decoration: none;
}

/* Intake rows reuse the .today-row anatomy; the tile carries a neutral tier
   letter rather than a quality score, so it stays muted, never quality-green. */
.today-row--company .today-row-score {
  background: var(--sky-row-hover);
  color: var(--sky-text-tertiary);
  font-size: 11.5px;
}

/* The honest "N more deadlines hidden" link-out beneath Closing soon — a quiet
   count line, deliberately not a link (no deadline-filtered Browse exists). */
.today-linkout {
  margin-top: 8px;
  padding: 0 12px;
  font-size: 11.5px;
  color: var(--sky-text-faint);
}

/* Peak-End: the whole board empty is a win, said plainly, not a void. */
.today-allclear {
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--sky-text-faint);
}

/* =============================================================================
   === U7 company profile (redesign) ===
   DHA-391. Reuses the shared page/sheet/rail/fact/section-label primitives
   from U6's vacancy detail page (.vac-page/.vac-sheet/.vac-reading/.vac-rail/
   .vac-rail-group/.vac-fact*/
.vac-section-label/.vac-back/.vac-score-tile/
   .vac-tier/.vac-status-chip/.vac-btn*) and the shared score/tier tokens
   (.q-good/.q-moderate/.q-weak(+ -bg)/.tier-s/.tier-a/.tier-b/.tier-c) — the
   design protocol treats "Detail screens (Vacancy, Company)" as one anatomy.
   Everything below is specific to the profile: the review banner, the big fit
   score, WANT/verdict/strengths/risks blocks, the roles list + distribution
   strip, and a couple of rail-only widgets.
   ============================================================================= */

.cp-subtitle {
  font-size: 12.5px;
  color: var(--sky-text-tertiary);
  margin-top: 2px;
}

/* --- Review banner (workflow actions) --- */
.cp-review-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-top: 4px;
  border-radius: 12px;
}
.cp-review-label {
  flex: 1;
  font-weight: 700;
  font-size: 12.5px;
}

/* --- Fit analysis (big score + bar) --- */
.cp-fit-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.cp-fit-score {
  font-family: "JetBrains Mono", monospace;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}
.cp-fit-label {
  font-size: 14px;
  font-weight: 700;
}
.cp-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(58, 56, 51, 0.08);
  overflow: hidden;
}
.cp-bar-fill {
  height: 100%;
  border-radius: 4px;
}

/* --- WANT breakdown bars --- */
.cp-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}
.cp-bar-row .cp-bar {
  flex: 1;
  height: 7px;
}
.cp-bar-dim-label {
  flex: none;
  width: 74px;
  font-size: 12px;
  color: var(--sky-text-tertiary);
}
.cp-bar-value {
  flex: none;
  width: 24px;
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}

/* --- Strengths / risks --- */
.cp-block-title--good {
  color: var(--q-good);
}
.cp-block-title--weak {
  color: var(--q-weak);
}
.cp-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.cp-bullet {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  margin-top: 7px;
  /* Plain list-bullet marker, redundant with its own bullet text —
     decorative, not required to clear AA (U16). */
  background: var(--sky-text-disabled);
}
.cp-bullet--good {
  background: var(--q-good);
}
.cp-bullet--weak {
  background: var(--q-weak);
}
.cp-list-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sky-text-secondary);
  text-wrap: pretty;
}

/* --- Evidence (both variants) --- */
.cp-evidence,
.cp-deep {
  margin-top: 4px;
}
.cp-evidence summary,
.cp-deep summary {
  cursor: pointer;
}
.cp-evidence-item {
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sky-row-hover);
}
.cp-evidence-source {
  background: var(--cobalt-tint);
  color: var(--cobalt);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
}
.cp-evidence-claim {
  color: var(--sky-text);
}
.cp-evidence-quote {
  color: var(--sky-text-tertiary);
  font-style: italic;
  margin-top: 2px;
}

/* --- Approach / experience match prose --- */
.cp-prose {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--sky-text-secondary);
  text-wrap: pretty;
}

/* --- Verdict note --- */
.cp-verdict {
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.7;
  font-style: italic;
  text-wrap: pretty;
}

/* --- About lede: description/summary + personal note + recent news --- */
.cp-lede {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cp-note {
  background: rgba(58, 56, 51, 0.035);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--sky-text-secondary);
}
.cp-note summary {
  cursor: pointer;
  font-weight: 600;
  white-space: normal;
}
.cp-empty-fit {
  font-size: 13px;
  color: var(--sky-text-faint);
  font-style: italic;
}

/* --- Open roles: header, distribution strip, rows --- */
.cp-roles-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cp-roles-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--sky-text-faint);
}
.cp-dist {
  margin: 10px 0 2px;
}
.cp-dist-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 10.5px;
  color: var(--sky-text-tertiary);
  flex-wrap: wrap;
}
.cp-dist-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cp-dist-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.cp-dist-bar {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(58, 56, 51, 0.07);
  margin-bottom: 4px;
}
.cp-roles-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.cp-role-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
}
.cp-role-row:hover {
  background: var(--sky-row-hover);
}
.cp-role-score {
  flex: none;
  width: 36px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
}
.cp-role-score--none {
  background: var(--sky-row-hover);
  color: var(--sky-text-faint);
}
.cp-role-body {
  flex: 1;
  min-width: 0;
}
.cp-role-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cp-role-title {
  /* flex-shrink only (no grow): a short title sits snug next to its status
     chip/screen badge instead of stretching to push them to the row's far
     edge; a long title still shrinks below its content width and ellipsizes
     against those siblings. */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sky-text);
}
.cp-role-meta {
  font-size: 11.5px;
  color: var(--sky-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.cp-role-arrow {
  flex: none;
  font-size: 14px;
  /* Purely decorative chevron on an already-labeled, already-clickable row
     — not required to clear AA (U16). */
  color: var(--sky-text-disabled);
}
.cp-role-row:hover .cp-role-arrow {
  color: var(--cobalt);
}
.cp-view-all-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cobalt);
  cursor: pointer;
}
.cp-view-all-link:hover {
  text-decoration: underline;
}

/* --- Rail: fact links + status pill + monitoring row --- */
.cp-fact-link {
  color: var(--cobalt);
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none;
}
.cp-fact-link:hover {
  text-decoration: underline;
}
.cp-status-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 9999px;
}
.cp-mon-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--sky-text);
  margin-top: 4px;
}

/* === U11 Archive (redesign) === */
/* Flat rows in the new look (DHA-395): header on the material, rows in a
   sheet, per design-protocol.md #6. Overrides the generic section-sheet rule
   near the top of this file (same selector, later in the cascade) instead of
   editing that shared multi-section rule directly — this file is touched by
   several parallel reskin units and that rule is exactly the kind of shared
   line every one of them would otherwise collide on. */
.archive-section {
  background: none;
  box-shadow: none;
  padding: 4px 0 0;
}

.archive-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px 12px;
  flex-wrap: wrap;
}
.archive-header-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sky-text);
}
.archive-org-filter {
  border: none;
  padding: 3.5px 12px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--sky-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  font-family: "Onest", sans-serif;
  cursor: pointer;
}
.archive-org-filter:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -1px;
}
.archive-search {
  border: none;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--sky-text);
  font-size: 12px;
  width: 190px;
  font-family: "Onest", sans-serif;
}
.archive-search:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -1px;
}
.archive-header-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--sky-text-faint);
}

.archive-results-count {
  padding: 0 10px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--sky-text-faint);
  text-align: right;
}

.archive-sheet {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  overflow: auto;
  padding: 10px 8px;
}

/* Rows are quieter than Browse's (opacity .78, full at rest on hover) since
   Archive is a decided-out, read-only list (design-protocol mock). Not
   clickable — archived groups aren't in state.js's groupsById, so the only
   interactive element is the title's outbound link when a posting URL
   exists (see archive.js). */
.archive-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  margin: 0 8px;
  border-radius: var(--radius-row);
  opacity: 0.78;
  cursor: pointer;
}
.archive-row:hover {
  background: var(--sky-row-hover);
  opacity: 1;
}
.archive-row:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}
/* Un-archive control — quiet by default, revealed on row hover/focus (same
   restraint as the row's own opacity lift). */
.archive-row-restore {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-tile);
  background: transparent;
  color: var(--sky-text-faint);
  font-size: 14px;
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity 0.12s,
    background 0.12s,
    color 0.12s;
}
.archive-row:hover .archive-row-restore,
.archive-row:focus-within .archive-row-restore {
  opacity: 1;
}
.archive-row-restore:hover {
  background: var(--sky-row-hover);
  color: var(--cobalt);
}
.archive-row-restore:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  opacity: 1;
}
.archive-row-score {
  flex: none;
  width: 36px;
  height: 26px;
  border-radius: var(--radius-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  font-weight: 700;
}
.archive-row-role {
  min-width: 0;
  flex: 1;
}
.archive-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sky-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-row-title a {
  color: var(--sky-text);
  text-decoration: none;
}
.archive-row-title a:hover {
  text-decoration: underline;
}
.archive-row-sub {
  font-size: 11.5px;
  color: var(--sky-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-row-seen {
  flex: none;
  font-size: 11px;
  color: var(--sky-text-faint);
}

/* === U8 companies table (redesign) =========================================
   Companies (DHA-392): sky-themed table shell, seven WANT-dimension columns
   on the shared qualityBand/qualityClass helpers (retiring the old 75/55/35
   four-color scale), a name+monogram cell, a new Open (applyable_count)
   column, and segmented-pill sub-tabs. `.company-table`/`.ct-*` below are
   shared with Geo (`#statsSection`, U10) via cascade — Geo's higher-
   specificity `#statsSection .ct-*` overrides win regardless of source
   order, so redefining the base here is safe. Filters bar, stats cards and
   monitoring filter-chips row are untouched (out of this unit's scope).
   =========================================================================== */

/* --- Sub-tabs: segmented pill control, matching Browse's basket-tabs (U5) -- */
.company-sub-tabs {
  display: flex;
  gap: 2px;
  background: rgba(58, 56, 51, 0.06);
  border-radius: 10px;
  padding: 2.5px;
  width: fit-content;
  margin-bottom: 14px;
}
.company-sub-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sky-text-secondary);
  cursor: pointer;
}
.company-sub-tab:hover {
  color: var(--sky-text);
}
.company-sub-tab.active {
  background: #fff;
  color: var(--sky-text);
  box-shadow: 0 1px 2px rgba(58, 56, 51, 0.08);
}
.company-sub-tab:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}
.sub-tab-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sky-text-tertiary);
  background: transparent;
  padding: 0;
  min-width: 0;
}
.company-sub-tab.active .sub-tab-count {
  background: transparent;
  color: var(--sky-text-tertiary);
}
@media (max-width: 768px) {
  .company-sub-tab {
    font-size: 11.5px;
    padding: 6px 10px;
  }
}

/* --- Scroll-guard wrapper (AE4): the sheet scrolls horizontally, the page
   body never does (body-level overflow-x:hidden is set near the top of this
   file). This table is the widest in the app. --- */
.companies-grid {
  overflow-x: auto;
}

.company-table {
  width: 100%;
  /* 1300px keeps name >=180px (14%) and numeric columns >=47px. */
  min-width: 1300px;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
}

.ct-header-row {
  background: transparent;
}
.ct-th {
  padding: 10px 10px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  text-align: left;
  /* Headers wrap to two lines inside their fixed-layout column instead of
     spilling nowrap text over the neighbouring headers. */
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.2;
  vertical-align: bottom;
  overflow: hidden;
  user-select: none;
}
.ct-th.ct-col-dim {
  overflow: visible; /* keep the hover tooltip visible */
}
.ct-th[onclick] {
  cursor: pointer;
  transition: color 0.15s;
}
.ct-th[onclick]:hover {
  color: var(--sky-text);
}
.ct-th-active {
  color: var(--cobalt);
}

/* Column widths — Approved view */
.ct-col-name {
  width: 14%;
}
.ct-col-tier {
  width: 4%;
  text-align: center;
}
.ct-col-fit {
  width: 5%;
  text-align: center;
}
/* WANT aspect columns (Mission/Domain/…) — shared by Approved + Pending.
   Narrow numeric columns with short 3-letter headers; the full name + a
   one-line description show in an instant CSS tooltip on hover (data-tip). */
.ct-col-dim {
  width: 3.6%;
  text-align: center;
}
.ct-th.ct-col-dim,
.ct-td.ct-col-dim {
  padding-left: 3px;
  padding-right: 3px;
}
.ct-td.ct-col-dim {
  overflow: hidden;
}
.ct-th.ct-col-dim {
  position: relative;
}
/* Instant hover tooltip: full dimension name + what it measures. */
.ct-th.ct-col-dim[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: 230px;
  padding: 7px 10px;
  white-space: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: #fff;
  background: #1f2937;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.ct-dim-num {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}
.ct-dim-empty {
  color: var(--sky-text-faint);
  font-family: "JetBrains Mono", monospace;
}
.ct-col-open {
  width: 4%;
  text-align: center;
}
.ct-col-liked {
  width: 4%;
  text-align: center;
}
.ct-col-new {
  width: 4%;
  text-align: center;
}
.ct-col-loc {
  width: 12%;
}
.ct-col-freshness {
  width: 9%;
}
.ct-col-monitoring {
  width: 10%;
}

/* Column widths — Pending view */
.ct-col-name--pending {
  width: 15%;
}
.ct-col-cat--pending {
  width: 15%;
}
.ct-col-fit--pending {
  width: 8%;
  text-align: center;
}
.ct-col-vac--pending {
  width: 8%;
  text-align: center;
}
.ct-col-loc--pending {
  width: 16%;
}
.ct-col-source {
  width: 12%;
}

/* Column widths — Archived view */
.ct-col-name--archived {
  width: 25%;
}
.ct-col-cat--archived {
  width: 15%;
}
.ct-col-fit--archived {
  width: 8%;
  text-align: center;
}
.ct-col-loc--archived {
  width: 20%;
}
.ct-col-reason {
  width: 32%;
}
.ct-col-review {
  width: 6%;
  text-align: center;
}

/* Rows — whitespace + hover tint, no left-border accent stripe (protocol
   §1: the stripe is an "AI slop" tell). */
.ct-row {
  cursor: pointer;
  transition: background 0.12s;
}
.ct-row:hover {
  background: var(--sky-row-hover);
}
.ct-row--archived {
  opacity: 0.65;
}
.ct-row--archived:hover {
  opacity: 0.85;
}
/* Dead now that the stripe is gone; kept out of the new rules entirely
   (was .ct-row-nosource, never applied by any render path). */

.ct-td {
  padding: 10px 10px;
  vertical-align: middle;
  font-size: var(--text-sm);
  border-bottom: none;
  color: var(--sky-text-secondary);
}

.ct-name-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ct-mono {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: "Onest", sans-serif;
}
.ct-name-text {
  font-weight: 700;
  font-size: 13px;
  color: var(--sky-text);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-liked-nonzero {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--q-good);
}
.ct-liked-zero {
  font-family: "JetBrains Mono", monospace;
  color: var(--sky-text-faint);
}
.ct-new-nonzero {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--q-moderate);
  background: var(--q-moderate-bg);
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 11px;
}
.ct-location-text {
  display: inline-block;
  max-width: 100%;
  font-size: 12px;
  color: var(--sky-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.ct-col-cat,
.ct-col-reason {
  font-size: var(--text-xs);
  color: var(--sky-text-secondary);
  line-height: 1.4;
}
.ct-hot-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--q-moderate);
}
.ct-hot-deadline {
  font-size: 11px;
  color: var(--sky-text-tertiary);
}

/* --- Freshness cell (dot + relative time) --- */
.freshness-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--sky-text-tertiary);
}
.freshness-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.freshness-green {
  background: var(--q-good);
}
.freshness-amber {
  background: var(--q-moderate);
}
.freshness-red {
  background: var(--q-weak);
}
.freshness-never {
  background: transparent;
  /* The adjacent "Never fetched" text carries the same state — decorative,
     not required to clear AA (U16). */
  border: 1.5px dashed var(--sky-text-disabled);
}

/* --- Monitoring status cell (dot + text) --- */
.mon-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sky-text-tertiary);
  white-space: nowrap;
}
.mon-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mon-dot--ok {
  background: var(--q-good);
}
.mon-dot--stale {
  background: var(--q-moderate);
}
.mon-dot--error {
  background: var(--q-weak);
}
.mon-dot--nodata {
  background: var(--q-moderate);
  opacity: 0.7;
}
.mon-dot--manual {
  background: var(--cobalt);
}
.mon-dot--nosource {
  background: transparent;
  border: 1.5px dashed var(--q-moderate);
}
.mon-dot--never {
  background: transparent;
  /* The .mon-cell label text next to it carries the same state —
     decorative, not required to clear AA (U16). */
  border: 1.5px dashed var(--sky-text-disabled);
}

/* --- Company review buttons (Approve ✓ / Archive ✗) --- */
.cr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: transform 0.1s;
}
.cr-btn:hover {
  transform: scale(1.08);
}
.cr-btn:active {
  transform: scale(0.95);
}
.cr-approve {
  background: var(--q-good-bg);
  color: var(--q-good);
  margin-right: 4px;
}
.cr-approve:hover {
  background: var(--q-good);
  color: #fff;
}
.cr-reject {
  background: var(--q-weak-bg);
  color: var(--q-weak);
}
.cr-reject:hover {
  background: var(--q-weak);
  color: #fff;
}

.company-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--sky-text-faint);
  font-size: var(--text-base);
}
/* === U12 Triage (redesign) === */
/* Triage (DHA-396, U12): design-protocol.md #6 "Board (Triage)" — a title +
   funnel strip on the material, columns as soft-tinted wells inside a single
   sheet (`.pipeline-board`), white cards with a whisper shadow and a mono
   meaning-colored score. The board scrolls horizontally inside its sheet
   (fixed-width wells) rather than resizing a grid, so no column-count
   breakpoints are needed at narrow widths. SortableJS wiring, the derived
   Expired column, and every escaping path are untouched — this block is
   markup-compatible with pipeline.js's existing class names. */

/* Overrides the generic section-sheet rule near the top of this file (same
   selector, later in the cascade) instead of editing that shared
   multi-section rule directly — same technique as U11's .archive-section,
   which every parallel reskin unit would otherwise collide on. */
.pipeline-section {
  background: none;
  box-shadow: none;
  padding: 4px 0 0;
}

.triage-funnel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 10px 12px;
  flex-wrap: wrap;
}
.triage-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sky-text);
}
.triage-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--sky-text-faint);
}

.triage-funnel-track {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--sky-text-tertiary);
}
.triage-stage {
  display: inline-flex;
  align-items: baseline;
}
.triage-stage-btn {
  border: 0;
  background: none;
  padding: 2px 5px;
  margin: -2px -5px;
  border-radius: 6px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.triage-stage-btn:hover {
  background: var(--cobalt-tint);
}
.triage-stage-count {
  font-weight: 700;
  color: var(--sky-text);
  margin-right: 4px;
}
.stage-applied_total .triage-stage-count {
  color: var(--q-good);
}
.triage-stage-arrow {
  /* Purely decorative — the funnel strip's numbers already carry the
     information; not required to clear AA (U16). */
  color: var(--sky-text-disabled);
}

.triage-board-controls {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 8px;
}
.triage-board-controls:empty {
  display: none;
}

/* The sheet (design-protocol.md #2): only the columns are seated; the header
   above sits directly on the material (excluded at the shared sheet rule). */
.pipeline-board {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}

.pipe-col {
  /* Compact cards (title + org + score + note, no button row) let the column
     narrow so ~6 fit at 1440px instead of ~4, matching the mock. DHA-412 #5. */
  width: 190px;
  flex: none;
  background: var(--sky-row-hover);
  border-radius: var(--radius-row);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pipe-col-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
}
.pipe-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}
.pipe-col-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sky-text);
}
.pipe-col-count {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--sky-text-faint);
}

.pipe-col-cards {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pipe-col-empty {
  text-align: center;
  color: var(--sky-text-faint);
  padding: 20px 0;
  font-size: 12px;
}

/* Block flow, NOT flex: SortableJS's native drag-and-drop reads dragged-item
   geometry that a flex-column .pipe-card throws off enough that mousedown
   over the org button (a flex item) swallows the drag start instead of
   handing it to Sortable (filter: "a, button") — reproduced and confirmed
   headlessly. Child spacing comes from margin-bottom, same mechanism the
   pre-redesign card used. */
.pipe-card {
  background: var(--card);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(58, 56, 51, 0.07);
  cursor: grab;
  transition: box-shadow 0.15s ease;
}
.pipe-card:hover {
  box-shadow: 0 3px 10px rgba(58, 56, 51, 0.12);
}
.pipe-card:active {
  cursor: grabbing;
}
.pipe-card.compact {
  padding: 8px 10px;
}

.pipe-card-org {
  font-size: 11px;
  font-weight: 700;
  color: var(--sky-text);
  margin-bottom: 2px;
}
.pipe-card-org-link {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.pipe-card-org-link:hover {
  color: var(--cobalt);
}
.pipe-card-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
}
.pipe-card-title-link {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.pipe-card-title-link:hover {
  color: var(--cobalt);
}
.pipe-card-summary {
  font-size: 11.5px;
  color: var(--sky-text-tertiary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pipe-card-loc {
  font-size: 11.5px;
  color: var(--sky-text-tertiary);
  margin-bottom: 4px;
}
.pipe-card-score {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* No score at all — a hand-added application (a course, a grant, a
   programme) the scorer never saw. Neutral, like every other surface's
   "no score" cell; never the red a weak score gets. */
.pipe-card-score--none,
.pipe-grp-role-score--none {
  color: var(--sky-text-faint);
}

.pipe-card-deadline {
  font-size: 11px;
  color: var(--amber);
  margin-top: 4px;
}
.pipe-card-loc {
  font-size: 11.5px;
  color: var(--sky-text-tertiary);
  margin-top: 4px;
}
.pipe-card-source-link {
  font-size: 11px;
  color: var(--sky-text-tertiary);
  text-decoration: none;
}
.pipe-card-source-link:hover {
  color: var(--cobalt);
}
/* Triage deadline pill + staleness line — urgency-coloured. Flex is safe here
   (unlike .pipe-card itself): this is a nested child, not the Sortable
   draggable root, so it doesn't affect native drag-start detection. */
.pipe-card-fresh {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pipe-deadline {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  white-space: normal;
  overflow-wrap: break-word;
}
.pipe-deadline--expired {
  color: var(--coral);
  background: var(--rose-tint);
}
.pipe-deadline--soon {
  color: var(--amber);
  background: var(--amber-tint);
}
.pipe-deadline--active {
  color: var(--sky-text-tertiary);
  background: var(--sky-row-hover);
}
.pipe-deadline--stale {
  color: var(--q-weak);
  background: var(--q-weak-bg);
}
.pipe-card-note {
  font-size: 11px;
  color: var(--sky-text-tertiary);
  margin-top: 4px;
  line-height: 1.4;
  max-height: 4.2em;
  overflow: hidden;
}
.pipe-card-note.muted {
  font-style: italic;
  color: var(--sky-text-faint);
}
.pipe-card-issue {
  font-size: 11px;
  color: var(--sky-text-faint);
  font-weight: 600;
  margin-top: 4px;
}
.pipe-card-actions {
  margin-top: 2px;
}
.pipe-card-open-link {
  font-size: 11px;
  color: var(--sky-text-tertiary);
  text-decoration: none;
}
.pipe-card-open-link:hover {
  color: var(--cobalt);
}

.pipe-card-group .pipe-grp-count {
  display: inline-block;
  background: var(--sky-row-hover);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  color: var(--sky-text-secondary);
  margin-bottom: 6px;
}
.pipe-grp-roles {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pipe-grp-role-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pipe-grp-role-title {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sky-text);
  text-decoration: none;
}
.pipe-grp-role-title:hover {
  color: var(--cobalt);
}
.pipe-grp-role-score {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}

.triage-move-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.triage-move-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.55;
  transition:
    opacity 0.15s,
    background 0.15s;
  line-height: 1.6;
}
.triage-move-btn:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Drag-and-drop (SortableJS) — untouched wiring, restyled ghost/drag states. */
.pipe-card-ghost {
  opacity: 0.4;
  background: color-mix(in srgb, var(--sky-text) 6%, transparent);
  /* Transient drag-and-drop placeholder — decorative, not required to
     clear AA (U16). */
  border: 1px dashed var(--sky-text-disabled);
}
.pipe-card-dragging {
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.pipeline-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--sky-text-faint);
}
.pipeline-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.pipeline-empty p {
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto;
}
.pipeline-empty code {
  font-family: "JetBrains Mono", monospace;
  background: var(--sky-row-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* === U14 Boards+Settings (redesign) =========================================
   Boards + Settings (DHA-398): both read-mostly screens get the header-on-
   material + sheet-below anatomy (design-protocol.md #6), matching Archive
   (U11) and Companies (U8). Overrides `.boards-section`/`.settings-section`
   below instead of editing the generic multi-section sheet rule near the top
   of this file — see the U11 Archive comment for why. Old boards-table /
   board-status / settings-table rules (pre-redesign) were removed; the
   applications-shared toggle + intro rules near "DHA-348" are untouched
   (Applied's own reskin owns those). */

/* .boards-section's display:none/.active toggle used to live in the deleted
   pre-redesign "BOARDS MODE" block above — unlike Settings, it was never
   shared with another section, so it has to be restored here rather than
   overridden. */
.boards-section {
  display: none;
}
.boards-section.active {
  display: block;
  position: relative;
}

/* Health (trust/observability) is a leaf section like Boards: hidden until
   switchMode() stamps .active — without this pair it stacks under whatever
   section is on screen (bug: visible during initial load). */
.health-section {
  display: none;
}
.health-section.active {
  display: block;
  position: relative;
  padding: 4px 0 0;
}

.boards-section,
.settings-section {
  background: none;
  box-shadow: none;
  padding: 4px 0 0;
}

/* --- Shared header-on-material recipe (matches .archive-header*) --- */
.boards-header,
.settings-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 2px 10px 12px;
  flex-wrap: wrap;
}
.boards-header-title,
.settings-header-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--sky-text);
}
.boards-header-sub,
.settings-header-sub {
  font-size: 12.5px;
  color: var(--sky-text-tertiary);
}

/* --- Boards table --- */
.boards-table-wrap {
  overflow-x: auto;
}
.boards-table {
  width: 100%;
  table-layout: fixed;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  border-collapse: collapse;
  overflow: hidden;
}
.brd-th {
  padding: 12px 16px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  text-align: left;
  white-space: nowrap;
}
.brd-th.num {
  text-align: right;
}
.brd-td {
  padding: 14px 16px;
  vertical-align: middle;
  font-size: 13px;
  color: var(--sky-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
}
.brd-th:first-child { width: 38%; }
.brd-th:last-child { width: 30%; }
.brd-row + .brd-row .brd-td {
  border-top: 1px solid var(--sky-hairline);
}
.brd-td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: "JetBrains Mono", monospace;
  color: var(--sky-text-secondary);
}
.brd-row {
  transition: background 0.12s;
}
.brd-row:hover {
  background: var(--sky-row-hover);
}
.brd-row--off {
  opacity: 0.6;
}
.brd-row--off:hover {
  opacity: 0.85;
}
.brd-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brd-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.brd-dot-on {
  background: var(--q-good);
}
.brd-dot-off {
  background: var(--sky-text-faint);
}
/* Enabled toggle (full/local mode). padding + equal negative margin grows the
   click/focus target to ~19px while keeping the row's layout identical to the
   read-only dot it replaces. */
.brd-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -12px -8px -12px -16px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
}
.brd-toggle .brd-dot {
  transition: transform 0.12s ease;
}
.brd-toggle:hover .brd-dot {
  transform: scale(1.35);
}
.brd-toggle:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
}
.brd-name-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.brd-name-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--sky-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brd-name-text a {
  color: var(--sky-text);
  text-decoration: none;
}
.brd-name-text a:hover {
  color: var(--cobalt);
}
.brd-name-id {
  font-size: 11px;
  color: var(--sky-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brd-name-id code {
  font-family: "JetBrains Mono", monospace;
}
.brd-audience {
  color: var(--sky-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brd-empty {
  color: var(--sky-text-tertiary);
  padding: 16px 10px;
  font-size: 13px;
}
.boards-cli-hint {
  margin: 12px 8px 0;
  font-size: 11px;
  color: var(--sky-text-faint);
}
.boards-cli-hint code {
  font-family: "JetBrains Mono", monospace;
  background: rgba(58, 56, 51, 0.05);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--sky-text-secondary);
}
.boards-live-note {
  margin: 6px 8px 0;
  font-size: 11px;
  color: var(--sky-text-faint);
}
.boards-toggle-note {
  margin: 12px 8px 0;
  font-size: 11px;
  color: var(--sky-text-faint);
}

/* --- Per-board yield funnel (scored → fit → liked), derived in the browser --- */
.brd-th-yield {
  text-align: left;
}
.brd-yield {
  white-space: nowrap;
}
.brd-yield-funnel {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.brd-yield-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.brd-yield-stat b {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--sky-text);
}
.brd-yield-stat i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
}
.brd-yield-liked b {
  color: var(--gold);
}
.brd-yield-arrow {
  color: var(--sky-text-faint);
  font-size: 11px;
}
.brd-yield-empty {
  font-size: 11px;
  font-style: italic;
  color: var(--sky-text-faint);
}
.boards-yield-note {
  margin: 12px 8px 0;
  font-size: 11px;
  color: var(--sky-text-faint);
}
.boards-suggest {
  margin: 10px 8px 0;
  font-size: 12px;
}
.boards-suggest a {
  color: var(--cobalt);
  text-decoration: none;
  font-weight: 600;
}
.boards-suggest a:hover {
  text-decoration: underline;
}

/* --- Settings grouped rows --- */
.stg-sheet {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 820px;
}
.stg-group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  margin-bottom: 12px;
}
.stg-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 130px minmax(160px, 1.2fr);
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(58, 56, 51, 0.07);
}
.stg-group-title + .stg-row {
  border-top: none;
}
.stg-label {
  font-size: 13px;
  color: var(--sky-text);
}
.stg-value code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--sky-text);
}
.stg-source code {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--sky-text-tertiary);
}
.stg-empty {
  color: var(--sky-text-tertiary);
  padding: 16px 0;
  font-size: 13px;
}

/* ===========================================================================
   Keyboard triage (U15, DHA-399)
   =========================================================================== */

/* The selected Browse row. Cobalt marks selection (design-protocol §1) — a
   persistent full-row cobalt wash + inset cobalt hairline, deliberately
   distinct from the transient grey :hover tint, and never a left-border accent
   stripe (protocol §1 "AI slop" ban). The :hover override keeps the selection
   visible when the pointer rests on the cursor row. */
.catalog-row--cursor,
.catalog-row--cursor:hover {
  background: var(--cobalt-tint);
  box-shadow: inset 0 0 0 1px rgba(37, 69, 211, 0.28);
}

/* Keyboard hint row under the Browse header (design-protocol §4 — keep
   j/k/l/x/Enter affordances visible). Quiet, mono keys as kbd-style chips with
   faint action labels. */
.browse-keyhint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px 10px;
  font-size: 11px;
  color: var(--sky-text-faint);
  flex-wrap: wrap;
}
.browse-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sky-text-tertiary);
  background: rgba(58, 56, 51, 0.05);
  border-radius: 5px;
  padding: 1px 6px;
}
.browse-keyhint-label {
  margin-right: 8px;
}

/* === U17 palette (redesign) === */
/* ⌘K command palette (DHA-401). A floating dialog over a dimmed backdrop —
   unlike a seated sheet it genuinely floats, so it earns a real (but restrained)
   elevation on top of the sheet hairline rim. Selection is cobalt (protocol:
   cobalt marks the current place / interaction, never quality). */
.palette-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  background: rgba(26, 22, 18, 0.32);
}
.palette-overlay.active {
  display: flex;
}
.palette-dialog {
  width: min(600px, 94vw);
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 12px 32px rgba(26, 22, 18, 0.18);
  overflow: hidden;
}
.palette-input-wrap {
  padding: 14px 18px 10px;
}
.palette-input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: "Onest", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--sky-text);
  outline: none;
}
.palette-input::placeholder {
  /* Input placeholder text — WCAG's contrast minimum doesn't apply here
     (U16). */
  color: var(--sky-text-disabled);
  font-weight: 400;
}
.palette-results {
  overflow-y: auto;
  padding: 4px 8px 10px;
}
.palette-group {
  padding-top: 6px;
}
.palette-group-label {
  padding: 6px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
}
.palette-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-row);
  cursor: pointer;
}
.palette-option:hover {
  background: var(--sky-row-hover);
}
.palette-option--active {
  background: var(--cobalt-tint);
}
.palette-opt-score {
  flex: none;
  width: 34px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-tile);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
}
.palette-opt-score--none {
  background: var(--sky-row-hover);
  color: var(--sky-text-faint);
}
.palette-opt-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.palette-opt-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sky-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-opt-org {
  font-size: 12px;
  color: var(--sky-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-empty {
  padding: 22px 12px 26px;
  text-align: center;
  font-size: 13px;
  color: var(--sky-text-faint);
}

/* ===========================================================================
   === U16 sweep === (DHA-400): empty states, responsive + a11y hygiene.
   Everything below is additive — existing rules are untouched — to keep this
   block isolated from the in-flight ⌘K palette's own EOF style.css block.
   =========================================================================== */

/* --- Focus-visible (R12) ---------------------------------------------------
   A global cobalt fallback for every Tab-reachable control that had no
   per-component rule (Triage card links, Boards links, the vacancy page's
   company mini-card/org link, the company profile's role rows). Bare
   `:focus-visible` has lower specificity than any `.class:focus-visible`
   rule already in this file, so it never overrides them — it only fills the
   gaps. `.ct-row`/`.ct-th` get their own inset variant, matching the
   existing row/cell pattern used by `.catalog-row`/`.today-row`
   elsewhere in this file, since the outward 2px default here would be
   clipped or bleed into the adjacent cell/row inside a table. */
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}
.ct-row:focus-visible,
.ct-th:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}

/* --- Motion (R12): prefers-reduced-motion --------------------------------
   `.catalog-loading.hidden` already has a guard above; this extends it to
   the loading screen's own entrance fade plus two redesign affordances that
   animate on state change (toast, scroll-to-top) — none of these carry
   information, so removing the motion loses nothing. */
@media (prefers-reduced-motion: reduce) {
  .catalog-loading {
    animation: none;
  }
  .toast,
  .scroll-top-btn {
    transition: none;
  }
}

/* --- Responsive (R12): two real body-scrolls-horizontally bugs found by a
   375px headless walkthrough, neither caught by the scroll-guard audit above
   since neither is a table — both are a hard min-width that doesn't shrink
   below the sidebar's icon-rail breakpoint (900px, matching .today-rail's
   existing query above and the sidebar collapse). --------------------------- */
@media (max-width: 900px) {
  /* Today's main column refused to shrink below 360px, so at narrow widths
     the whole .today-sheet (flex, wrap) overflowed its container instead of
     stacking under the rail. */
  .today-main {
    min-width: 0;
  }
}
@media (max-width: 899px) {
  /* Settings' 3-column grid (label/value/source) has real min-widths summing
     past 430px — fine on desktop, but wider than the entire content column
     once the sidebar collapses. Stack the row instead of trying to scroll a
     label/value/source triple sideways (scroll-guard is for dense tables;
     a short settings list reads better stacked). */
  .stg-row {
    grid-template-columns: 1fr;
    gap: 2px;
    row-gap: 2px;
  }
  .stg-source {
    padding-bottom: 4px;
  }
}

/* ===========================================================================
   Applications table — the Triage tab's second view.

   Same sky material and the same row-hover / focus-ring language as the
   Companies table (.company-table) and the Archive list, so the two Triage
   views read as one tab rather than two products. Nine columns is wider than
   a phone, so the table scrolls horizontally inside its OWN container
   (.apps-table-scroll) and the page body never does.
   =========================================================================== */

/* The Board|Table switch swaps which view is mounted by setting `hidden` on
   the other one. The HTML `hidden` attribute is only a UA rule of
   `display: none`, and .triage-funnel / .pipeline-board both set an explicit
   display of their own — which wins on specificity, so the "hidden" board
   stayed on screen as an empty sheet-coloured bar above the table. This is
   the override that makes hidden mean hidden here. */
#pipelineSection > [hidden] {
  display: none !important;
}

.triage-view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 14px;
  background: var(--sky-sheet);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--sky-hairline);
}

.triage-view-btn {
  padding: 6px 16px;
  min-height: 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--sky-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.triage-view-btn:hover {
  color: var(--sky-text);
}
.triage-view-btn.is-active {
  background: var(--card);
  color: var(--cobalt);
  box-shadow: 0 1px 3px rgba(58, 56, 51, 0.12);
}
.triage-view-btn:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* The count strip: one plain-word line, no tiles. Every number is followed by
   the word for what it counts, so nothing on it needs a legend. */
.apps-count-strip {
  margin: 0 0 10px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.apps-table-scroll {
  overflow-x: auto;
}

.apps-table {
  width: 100%;
  /* The nine columns need this much to show every label in full. The shares
     below are set for the LONGEST label set rather than the shortest: a
     translated header runs noticeably longer than its English original, and
     percentages tuned to English alone ran the first header into the second
     and clipped the waiting time to "15 d…". */
  min-width: 1040px;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
}

.apps-table th {
  padding: 12px 12px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  text-align: left;
  white-space: nowrap;
}

/* Fixed layout, so the widths are the design. Dates and the waiting count are
   short and never wrap; What and Next step get the room. */
/* Sent on */
.apps-table th:nth-child(1) {
  width: 10%;
}
/* Organisation */
.apps-table th:nth-child(2) {
  width: 15%;
}
/* What */
.apps-table th:nth-child(3) {
  width: 17%;
}
/* Kind */
.apps-table th:nth-child(4) {
  width: 11%;
}
/* Stage */
.apps-table th:nth-child(5) {
  width: 10%;
}
/* Stage since */
.apps-table th:nth-child(6) {
  width: 8%;
}
/* Waiting */
.apps-table th:nth-child(7) {
  width: 8%;
}
/* Next step */
.apps-table th:nth-child(8) {
  width: 14%;
}
/* Link */
.apps-table th:nth-child(9) {
  width: 7%;
}

.apps-row {
  cursor: pointer;
  transition: background 0.12s;
}
.apps-row:hover {
  background: var(--sky-row-hover);
}
.apps-row:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}

.apps-cell {
  padding: 11px 12px;
  font-size: var(--text-sm);
  color: var(--sky-text);
  border-top: 1px solid var(--sky-hairline);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apps-cell-org,
.apps-cell-what {
  font-weight: 600;
}
.apps-cell-what {
  color: var(--sky-text);
}

.apps-cell-date,
.apps-cell-kind,
.apps-cell-waiting,
.apps-cell-next {
  color: var(--sky-text-secondary);
}

.apps-cell-waiting {
  font-variant-numeric: tabular-nums;
}

/* A send date the database never recorded, standing in as the date the stage
   last changed. Marked so an estimate never passes for a record; the cell's
   title says which it is. */
.apps-cell-date--fallback {
  color: var(--sky-text-tertiary);
  font-style: italic;
}

/* Same dot, same token, as the board column this status belongs to — the
   colour is read from TRIAGE_COLUMNS, not re-declared here. */
.apps-stage-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  vertical-align: baseline;
}

.apps-cell-link a {
  color: var(--cobalt);
  text-decoration: none;
  font-weight: 600;
}
.apps-cell-link a:hover {
  text-decoration: underline;
}

/* ===========================================================================
   Reports — the research behind the search, read inside the dashboard.

   Built from the dashboard's OWN tokens and components, not a stylesheet of
   its own: the sky material, the sky text ramp, --cobalt for interaction, the
   Onest / JetBrains Mono pair the whole app already loads, and the same
   row-hover and focus-ring language as the Archive and Applications rows. A
   report has to read as another tab of this product, not as a page that
   wandered in.

   Deliberately NOT the warm tokens the older .md-content rules use (--coral
   links, --amber h3): that palette is retired by the house style, and a
   report is the longest thing anyone reads here — it is where a warm-on-warm
   ramp costs the most. Every colour below comes from the sky/cobalt layer.

   No coloured strip on top of any card, no pills, no chips, no sticky bar.
   Category colour is carried by a dot, which is the one place the house style
   allows it.
   =========================================================================== */

/* One vivid, distinct accent per report kind — a dot beside the group heading
   and the row, never a border or a fill behind text. Cobalt/violet/magenta/
   pine/cyan: five hues that stay apart from each other and from the quality
   scale's green-ochre-crimson, so a report's kind can never be misread as a
   score. */
:root {
  --kind-research: #2545d3;
  --kind-sector: #7c3aed;
  --kind-company: #0e7a55;
  --kind-grant: #b3126b;
  --kind-other: #0e6f8a;
}

.reports-section {
  /* One measure for the whole tab, so the list and the report it opens have
     the same left edge and the same width. */
  max-width: 860px;
}

/* --- The list ------------------------------------------------------------ */

.reports-count-strip,
.reports-loading {
  margin: 0 0 16px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.report-group {
  margin: 0 0 32px;
}

/* Plain words, not a chip. The dot carries the kind; the count is labelled by
   the heading it sits next to. */
.report-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
}

.report-group-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kind-dot, var(--kind-other));
}

.report-group--research {
  --kind-dot: var(--kind-research);
}
.report-group--sector {
  --kind-dot: var(--kind-sector);
}
.report-group--company {
  --kind-dot: var(--kind-company);
}
.report-group--grant {
  --kind-dot: var(--kind-grant);
}
.report-group--other {
  --kind-dot: var(--kind-other);
}

.report-group-count {
  font-weight: 600;
  color: var(--sky-text-tertiary);
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* A light fill and a hairline, like every other row surface in the app. No
   outline border, no coloured strip. */
.report-row {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 12px 16px;
  border-radius: var(--radius-row);
  background: var(--sky-sheet);
  box-shadow: inset 0 0 0 1px var(--sky-hairline);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.report-row:hover {
  background: var(--card);
}
.report-row:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.report-row-main {
  flex: 1;
  min-width: 0;
}

.report-row-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--sky-text);
  margin-bottom: 4px;
}

/* Two lines of the report's opening prose, clamped rather than cut to one:
   one line of a research report's first sentence rarely says enough to tell
   two of them apart. */
.report-row-excerpt {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--sky-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.report-row-date {
  flex: none;
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--sky-text-tertiary);
  white-space: nowrap;
}

/* --- One report ---------------------------------------------------------- */

.report-detail {
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  padding: 24px 32px 40px;
}

.report-back {
  border: 0;
  background: transparent;
  padding: 8px 0;
  /* A 44px-tall hit area, per the UI rule, without a visible button box. */
  min-height: 44px;
  margin: 0 0 8px;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--cobalt);
  cursor: pointer;
}
.report-back:hover {
  text-decoration: underline;
}
.report-back:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.report-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--sky-text-tertiary);
  margin-bottom: 24px;
}

.report-detail-meta::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kind-dot, var(--kind-other));
}

.report-detail--research {
  --kind-dot: var(--kind-research);
}
.report-detail--sector {
  --kind-dot: var(--kind-sector);
}
.report-detail--company {
  --kind-dot: var(--kind-company);
}
.report-detail--grant {
  --kind-dot: var(--kind-grant);
}
.report-detail--other {
  --kind-dot: var(--kind-other);
}

/* --- The report body -----------------------------------------------------
   A report is the longest thing anyone reads in this product, so the body gets
   the reading treatment the rest of the app does not need: a wider type size
   than the UI, a loose line-height, and generous space above each heading.

   `.report-body` also carries `.md-content`, the renderer's generic class. That
   class still paints the OLD warm palette (coral links, amber uppercase h3) —
   the token block at the top of this file records why it survives: descriptions
   and LLM reasoning elsewhere in the app are still rendered by it, and
   recolouring those is its own design decision. So the rules below OVERRIDE it
   for reports only. Nothing here touches `.md-content` on its own, and the
   description/reasoning surfaces are left exactly as they were.
   ------------------------------------------------------------------------ */

.report-body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--sky-text);
}

/* Headings: the sky ramp, never the warm one. Size carries the level, and so
   does space above — a reader scanning for a section finds it by the gap. */
.report-body h1,
.report-body h2,
.report-body h3 {
  color: var(--sky-text);
  letter-spacing: -0.01em;
  /* The self-link `#` hangs in the left margin (see .md-anchor). */
  position: relative;
}

.report-body h1 {
  font-size: 25px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sky-hairline);
}

.report-body h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 36px 0 12px;
}

/* Deliberately NOT the uppercase amber label .md-content gives h3. Inside a
   report an h3 is a real subsection, and a reader who meets it after a long h2
   section needs to read it as a heading, not as a caption. */
.report-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 28px 0 8px;
  color: var(--sky-text);
  text-transform: none;
  letter-spacing: -0.01em;
}

.report-body p {
  margin: 0 0 14px;
}

.report-body ul,
.report-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.report-body li {
  margin-bottom: 6px;
}

.report-body li::marker {
  color: var(--sky-text-tertiary);
}

/* Links are cobalt, the app's one interaction colour — the same blue as the
   active nav item, so a link in a report reads as the same affordance the rest
   of the dashboard uses. Underlined on rest, not only on hover: inside a wall
   of prose, colour alone is not a reliable signal (WCAG 1.4.1 — never carry
   meaning by colour alone). */
.report-body a,
.report-body .md-jump {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(37, 69, 211, 0.35);
}

.report-body a:hover,
.report-body .md-jump:hover {
  text-decoration-color: var(--cobalt);
}

.report-body a:focus-visible,
.report-body .md-jump:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The heading self-link, rendered by mdToHtml as a literal "#". Left unstyled
   it printed a coral hash glued to every heading, which read as markdown that
   had failed to render. It belongs in the left margin, invisible until the
   reader is on the heading — the GitHub/MDN convention, and the one place the
   affordance costs nothing when unused.

   aria-hidden in the markup, so a screen reader never announces the "#";
   opacity (not display:none) keeps it focusable by keyboard, and :focus-visible
   brings it back for a keyboard reader who tabs onto it. */
.report-body .md-anchor {
  position: absolute;
  left: -0.85em;
  top: 0;
  width: 0.85em;
  color: var(--sky-text-disabled);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.12s;
}

.report-body h1:hover .md-anchor,
.report-body h2:hover .md-anchor,
.report-body h3:hover .md-anchor,
.report-body .md-anchor:focus-visible {
  opacity: 1;
}

.report-body .md-anchor:hover {
  color: var(--cobalt);
}

/* On a phone there is no margin to hang the anchor in and no hover to reveal
   it, so it would sit on top of the first letter of every heading. */
@media (max-width: 700px) {
  .report-body .md-anchor {
    display: none;
  }
}

/* Money amounts and grouped numbers, set in the monospace face by
   wrapNumbers(). Mono digits are all one width, so a column of amounts down a
   list or a table lines up and can be compared by eye; the body face sets "1"
   narrower than "8" and the column goes ragged. tabular-nums forces the fixed
   advance even in fonts that default to proportional figures.
   (design-styles §4: numbers in mono, tabular-nums, right-aligned.) */
.report-body .md-num {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* --- Tables --------------------------------------------------------------
   Hairline rules, no boxed grid: the same surface language as every other row
   in the app. A wide table scrolls inside its own wrapper rather than pushing
   the page sideways.
   ------------------------------------------------------------------------ */

/* The scroll lives on the wrapper, never on the table: overflow on a <table>
   needs display:block, which throws away the internal table layout and shrinks
   the table to the width of its longest cell instead of filling the measure. */
.md-table-wrap {
  overflow-x: auto;
  margin: 16px 0 20px;
}

.report-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--text-sm);
}

.report-body th,
.report-body td {
  padding: 9px 14px 9px 0;
  border: none;
  border-bottom: 1px solid var(--sky-hairline);
  text-align: left;
  vertical-align: top;
}

.report-body th {
  background: none;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  border-bottom: 1px solid var(--sky-text-disabled);
  white-space: nowrap;
}

.report-body tbody tr:hover {
  background: var(--sky-row-hover);
}

/* A cell holding nothing but a number, tagged by isNumericCell(). Right-aligned
   so the digits stack on the decimal — the one alignment rule that makes a
   column of money comparable at a glance (Tufte; IBCS). */
.report-body td.md-td-num {
  text-align: right;
  padding-right: 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The header above a numeric column moves with it, or the label floats away
   from the figures it names. */
.report-body th.md-td-num {
  text-align: right;
  padding-right: 20px;
}

.report-body code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  background: var(--sky-shell);
  color: var(--sky-text);
  padding: 1px 5px;
  border-radius: 4px;
}

.report-body pre {
  background: var(--sky-shell);
  border-radius: var(--radius-tile);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 16px;
}

.report-body pre code {
  background: none;
  padding: 0;
}

.report-body blockquote {
  border-left: 2px solid var(--cobalt);
  background: none;
  padding: 2px 0 2px 16px;
  margin: 0 0 16px;
  color: var(--sky-text-secondary);
  font-style: normal;
  border-radius: 0;
}

.report-body hr {
  border: none;
  border-top: 1px solid var(--sky-hairline);
  margin: 28px 0;
}

.report-body strong {
  font-weight: 700;
  color: var(--sky-text);
}

/* --- Reports on a narrow screen ------------------------------------------
   A 9,825-word report is the one thing here that is genuinely READ rather
   than scanned, so line length matters more than on any other tab. At 390px
   the icon rail already takes ~72px; the sheet's own 32px side padding then
   left a ~238px column, about 35 characters — far under the 70–80 the house
   style asks for, and short enough that phrases break mid-word ("uni-
   students", "pre-college") on almost every line.

   Reclaiming the side padding is the only width available without touching
   the global shell, and it buys back a third of the column.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .report-detail {
    padding: 20px 16px 40px;
    /* The shell's scroll-to-top button is fixed at bottom:32px/right:32px and
       floats over whatever is beneath it. Clearing its full height plus its
       offset means the END of a report — where a reader actually stops — is
       never hidden under it. */
    padding-bottom: 96px;
  }

  .reports-section {
    max-width: none;
  }
}

/* --- The Applications table on a narrow screen ---------------------------
   Nine columns need 1040px. At 390px the table scrolled sideways and the first
   screen showed the send date, the organisation and the start of the role —
   Stage, the answer to the question this table exists to ask, sat off the
   right edge behind a gesture most readers never try.

   Narrowing the columns instead does not work either: four columns share about
   246px once the icon rail takes its share, so every value clips to a few
   characters and an ellipsis — a Stage column present but unreadable, which is
   no better than a Stage column missing.

   So on a phone the row stops being a row of cells and becomes a small stacked
   block: organisation, role, then stage and waiting time together on one line.
   Nothing is truncated and nothing scrolls sideways. The five columns not
   shown — send date, kind, stage-since, next step, link — are one tap away:
   the row opens the application, where they all appear in full.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .apps-table-scroll {
    /* Nothing overflows once the row is a block. */
    overflow-x: visible;
  }

  .apps-table {
    min-width: 0;
    display: block;
    table-layout: auto;
  }

  .apps-table tbody {
    display: block;
  }

  /* The header names columns that no longer exist as columns. Each value below
     carries its own meaning instead: the organisation and role read as
     themselves, the stage has its dot and its word, and the waiting time
     carries its own unit word, so nothing is left as a bare number. */
  .apps-table thead {
    display: none;
  }

  .apps-row {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sky-hairline);
  }

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

  .apps-cell {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    /* The column rule that separated cells side by side would now draw a
       part-width line between the stacked lines of one row. The row's own
       bottom border is the separator here. */
    border-top: none;
  }

  /* Send on (1), Kind (4), Stage since (6), Next step (8), Link (9). */
  .apps-table td:nth-child(1),
  .apps-table td:nth-child(4),
  .apps-table td:nth-child(6),
  .apps-table td:nth-child(8),
  .apps-table td:nth-child(9) {
    display: none;
  }

  .apps-cell-org {
    font-weight: 700;
    font-size: var(--text-base);
    line-height: 1.35;
  }

  .apps-cell-what {
    color: var(--sky-text-secondary);
    line-height: 1.35;
    margin-bottom: 6px;
  }

  /* Stage and the time spent in it belong on one line: together they are the
     sentence "this is where it stands, and this is how long it has stood
     there". */
  .apps-cell-stage,
  .apps-cell-waiting {
    display: inline-block;
    vertical-align: baseline;
  }

  .apps-cell-waiting {
    color: var(--sky-text-tertiary);
  }

  .apps-cell-waiting::before {
    content: "·";
    margin: 0 6px;
    color: var(--sky-text-disabled);
  }

  /* A finished application waits on nobody, so its waiting cell is empty — and
     an empty cell must not leave its separator behind as a dangling dot after
     "Accepted". */
  .apps-cell-waiting:empty {
    display: none;
  }

  .apps-count-strip {
    white-space: normal;
  }
}

/* ===========================================================================
   Networking — everyone worth writing to, in one list.

   Same sky material, same row-hover and focus-ring language as the
   Applications table, because it answers the same shape of question one step
   earlier. Built from the dashboard's own tokens: no separate palette, no
   pills, no sticky bars, and colour never carries meaning alone — every status
   shows its word beside its dot.
   =========================================================================== */

.contacts-section {
  display: none;
}
.contacts-section.active {
  display: block;
  position: relative;
}

.contacts-count-strip,
.contacts-loading,
.contacts-empty {
  margin: 0 0 12px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

/* --- Group filter --------------------------------------------------------
   Plain words, and the group names as they are stored — these ARE the sweeps
   ("ea-georgia", "network-2026-07"), and renaming them for display would break
   the one link between the screen and the file the rows came from. */

.contact-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.contact-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px tap target on a phone, from padding rather than a fixed height, so a
     long group name still grows the button instead of clipping. */
  min-height: 32px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sky-sheet);
  box-shadow: inset 0 0 0 1px var(--sky-hairline);
  color: var(--sky-text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}

.contact-filter:hover {
  background: var(--sky-row-hover);
  color: var(--sky-text);
}

.contact-filter:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.contact-filter--on {
  background: var(--cobalt-tint);
  box-shadow: inset 0 0 0 1px var(--cobalt);
  color: var(--cobalt);
  font-weight: 600;
}

.contact-filter-count {
  font-family: "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--sky-text-tertiary);
}

.contact-filter--on .contact-filter-count {
  color: var(--cobalt);
}

/* --- The table ----------------------------------------------------------- */

.contacts-table-scroll {
  overflow-x: auto;
}

.contacts-table {
  width: 100%;
  /* Eight columns, sized for the longest label set rather than the shortest —
     the same lesson the Applications table learned when it was translated. */
  min-width: 1100px;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
}

.contacts-table th {
  padding: 12px 12px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
  text-align: left;
  white-space: nowrap;
}

/* Name */
.contacts-table th:nth-child(1) {
  width: 15%;
}
/* City */
.contacts-table th:nth-child(2) {
  width: 9%;
}
/* Role @ Org */
.contacts-table th:nth-child(3) {
  width: 16%;
}
/* Group */
.contacts-table th:nth-child(4) {
  width: 10%;
}
/* Why */
.contacts-table th:nth-child(5) {
  width: 17%;
}
/* Channels */
.contacts-table th:nth-child(6) {
  width: 12%;
}
/* Status */
.contacts-table th:nth-child(7) {
  width: 11%;
}
/* Last activity */
.contacts-table th:nth-child(8) {
  width: 10%;
}

.contact-row {
  cursor: pointer;
  transition: background 0.12s;
}
.contact-row:hover {
  background: var(--sky-row-hover);
}
.contact-row:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: -2px;
}

.contact-cell {
  padding: 11px 12px;
  font-size: var(--text-sm);
  color: var(--sky-text);
  border-top: 1px solid var(--sky-hairline);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-name {
  font-weight: 600;
  display: block;
}

/* Their own spelling, under the Latin form rather than instead of it: a
   message has to be addressed the way they write it, and the list has to stay
   scannable by someone who does not read that script. */
.contact-name-local {
  display: block;
  font-size: var(--text-xs);
  color: var(--sky-text-tertiary);
}

.contact-cell-city,
.contact-cell-group,
.contact-cell-active {
  color: var(--sky-text-secondary);
}

.contact-cell-why {
  color: var(--sky-text-secondary);
}

.contact-cell-channels {
  white-space: normal;
}

/* A word, never a bare glyph: the house style bans category codes on screen,
   and a row of unlabelled brand icons is exactly that. */
.contact-channel {
  display: inline-block;
  margin: 0 6px 2px 0;
  font-size: var(--text-xs);
  color: var(--cobalt);
  text-decoration: none;
  border-bottom: 1px solid rgba(37, 69, 211, 0.3);
}

.contact-channel:hover {
  border-bottom-color: var(--cobalt);
}

/* A handle with no resolvable URL is still information — it says the person is
   reachable there — so it reads as text rather than as a link that goes
   nowhere. */
.contact-channel--plain {
  color: var(--sky-text-tertiary);
  border-bottom: 1px dotted var(--sky-text-disabled);
}

.contact-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

/* --- The drawer ----------------------------------------------------------
   A panel rather than a modal in the middle of the screen: the list stays
   visible behind it, so moving down a queue does not lose your place. */

.contact-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(58, 56, 51, 0.28);
  z-index: 900;
  animation: contactScrimIn 0.16s ease-out;
}

@keyframes contactScrimIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.contact-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  z-index: 901;
  overflow-y: auto;
  padding: 28px 28px 48px;
  background: var(--sky-sheet);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
  animation: contactDrawerIn 0.18s ease-out;
}

@keyframes contactDrawerIn {
  from {
    transform: translateX(16px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.contact-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--sky-text-tertiary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.contact-drawer-close:hover {
  background: var(--sky-row-hover);
  color: var(--sky-text);
}

.contact-drawer-close:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.contact-drawer-name {
  margin: 0 44px 4px 0;
  font-size: 21px;
  font-weight: 700;
  color: var(--sky-text);
  letter-spacing: -0.01em;
}

.contact-drawer-local {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--sky-text-tertiary);
  margin-top: 2px;
}

.contact-drawer-meta {
  margin: 0 0 20px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.contact-drawer-block {
  margin: 0 0 20px;
}

.contact-drawer-block p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--sky-text);
}

.contact-drawer-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-faint);
}

.contact-status-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-row);
  border: none;
  box-shadow: inset 0 0 0 1px var(--sky-hairline);
  background: var(--card);
  color: var(--sky-text);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.contact-status-select:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* The opener is the expensive thing to reproduce, so it is the one element
   with a copy button — the point of the drawer is getting that text into the
   message window without retyping it. */
.contact-copy {
  border: none;
  background: transparent;
  color: var(--cobalt);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.contact-copy:hover {
  background: var(--cobalt-tint);
}

.contact-copy:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.contact-opener-text {
  padding: 12px 14px;
  border-radius: var(--radius-row);
  background: var(--sky-shell);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.contact-drawer-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.contact-drawer-empty {
  font-size: var(--text-sm);
  color: var(--sky-text-tertiary);
}

/* --- Networking on a narrow screen ---------------------------------------
   Eight columns cannot be squeezed into a phone any more than nine could, and
   the lesson from the Applications table applies unchanged: a column present
   but clipped to three characters is worse than one that is not there. The row
   becomes a stacked block — who they are, where, why they matter, then where
   to write and where it stands.
   ------------------------------------------------------------------------ */

@media (max-width: 700px) {
  .contacts-table-scroll {
    overflow-x: visible;
  }

  .contacts-table {
    min-width: 0;
    display: block;
    table-layout: auto;
  }

  .contacts-table tbody {
    display: block;
  }

  .contacts-table thead {
    display: none;
  }

  .contact-row {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sky-hairline);
  }

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

  .contact-cell {
    display: block;
    width: auto;
    padding: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    border-top: none;
  }

  /* City (2), Group (4) and Last activity (8): useful in a wide table, noise
     in a stacked one. All three are in the drawer a tap away. */
  .contacts-table td:nth-child(2),
  .contacts-table td:nth-child(4),
  .contacts-table td:nth-child(8) {
    display: none;
  }

  .contact-cell-role {
    color: var(--sky-text-secondary);
    margin-bottom: 2px;
  }

  .contact-cell-why {
    font-size: var(--text-xs);
    margin-bottom: 6px;
  }

  .contact-cell-status,
  .contact-cell-channels {
    display: inline-block;
    vertical-align: baseline;
  }

  .contact-cell-channels {
    margin-left: 10px;
  }

  .contact-drawer {
    width: 100vw;
    padding: 24px 18px 48px;
  }

  .contacts-count-strip {
    white-space: normal;
  }
}

/* =============================================================================
   Screen view — the bulk screening inbox (DHA-603). Sheet on the shell like
   Archive; rows are cards with a 44px checkbox head; one bright accent per
   group (dot + pressed tint), never a coloured top border.
   ============================================================================= */
.screen-section {
  display: none;
}
.screen-section.active {
  display: block;
  position: relative;
  background: var(--sky-sheet);
  border-radius: var(--radius-sheet);
  box-shadow:
    inset 0 0 0 1px var(--sky-hairline),
    0 1px 3px rgba(58, 56, 51, 0.05);
  padding: 20px 20px 0;
  min-width: 0;
}
.scr-title {
  font-size: 24px;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
  color: var(--sky-text);
}
.scr-processing,
.scr-hint {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}
.scr-tabs,
.scr-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
/* Tabs are one exclusive choice: a segmented control, unlike the group chips. */
.scr-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-tile-lg);
  background: rgba(58, 56, 51, 0.06);
}
.scr-tab {
  border-radius: var(--radius-tile);
  box-shadow: none;
  background: transparent;
}
.scr-groups[hidden],
.scr-hint[hidden] {
  display: none;
}
.scr-tab,
.scr-group,
.scr-btn {
  font-family: "Onest", sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--card);
  color: var(--sky-text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.scr-tab:disabled,
.scr-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.scr-tab[aria-selected="true"] {
  background: var(--cobalt);
  color: #fff;
}
.scr-count {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: rgba(58, 56, 51, 0.08);
  font-variant-numeric: tabular-nums;
}
.scr-tab[aria-selected="true"] .scr-count {
  background: rgba(255, 255, 255, 0.22);
}
.scr-group-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  background: var(--scr-accent, var(--slate));
}
.scr-group--language {
  --scr-accent: var(--lavender);
}
.scr-group--onsite {
  --scr-accent: var(--coral);
}
.scr-group--seniority {
  --scr-accent: var(--cobalt);
}
.scr-group--unclear {
  --scr-accent: #c026d3; /* magenta: far from the onsite coral, so the dots read apart */
}
.scr-group--all {
  --scr-accent: var(--pine);
}
.scr-group[aria-pressed="true"] {
  border-color: var(--scr-accent);
  background: color-mix(in srgb, var(--scr-accent) 12%, var(--card));
}
.scr-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.scr-empty {
  margin: 24px 0;
  color: var(--sky-text-secondary);
}
.scr-row {
  background: var(--card);
  border-radius: var(--radius-row);
  box-shadow: var(--shadow-sm);
  padding: 0 14px 10px;
  min-width: 0;
}
.scr-row--selected {
  box-shadow:
    0 0 0 2px var(--cobalt),
    var(--shadow-sm);
}
.scr-row-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 12px 0 6px 4px;
  cursor: pointer;
  border-radius: var(--radius-tile);
}
.scr-row-head:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.scr-row-head input {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  accent-color: var(--cobalt);
  pointer-events: none;
}
.scr-row-main {
  flex: 1;
  min-width: 0;
}
.scr-row-title {
  font-weight: 650;
  font-size: var(--text-base);
  color: var(--sky-text);
  overflow-wrap: anywhere;
}
.scr-row-sub {
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
  overflow-wrap: anywhere;
}
.scr-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.scr-meta {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--sky-text);
  background: var(--surface);
  overflow-wrap: anywhere;
}
.scr-meta--date {
  color: var(--cobalt);
  background: var(--cobalt-tint);
}
.scr-meta--location {
  color: var(--q-good);
  background: var(--q-good-bg);
}
.scr-meta--deadline {
  color: var(--q-moderate);
  background: var(--q-moderate-bg);
}
.scr-meta--expired {
  color: var(--q-weak);
  background: var(--q-weak-bg);
}
.scr-posting {
  color: var(--cobalt);
  text-decoration: underline;
}
.scr-row-fact {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--sky-text);
  overflow-wrap: anywhere;
}
.scr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.scr-badge {
  display: inline-block;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.scr-badge--required {
  background: var(--rose-tint);
  color: var(--raspberry);
}
.scr-badge--preferred {
  background: var(--amber-tint);
  color: var(--q-moderate);
}
.scr-badge--unknown {
  background: var(--surface);
  color: var(--slate);
}
.scr-row-actions {
  flex-wrap: wrap;
  display: flex;
  gap: 8px;
  margin: 8px 0 0 34px;
}
.scr-evidence {
  margin-left: 34px;
  font-size: var(--text-sm);
}
.scr-evidence summary {
  cursor: pointer;
  color: var(--cobalt);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.scr-quotes,
.scr-notes {
  margin: 4px 0 8px;
  padding-left: 0;
  list-style: none;
}
.scr-quotes li + li,
.scr-notes li + li {
  margin-top: 6px;
}
.scr-quotes > li > span {
  font-weight: 600;
}
.scr-quotes blockquote {
  margin: 4px 0 0;
  padding: 6px 12px;
  border-left: 3px solid var(--lavender);
  color: var(--sky-text-secondary);
  overflow-wrap: anywhere;
}
.scr-noquote {
  color: var(--slate);
  margin-left: 6px;
}
.scr-notes-title {
  font-weight: 600;
  margin-top: 8px;
}
.scr-finding {
  font-weight: 600;
  text-transform: capitalize;
}
.scr-finding--match {
  color: var(--pine);
}
.scr-finding--possible_conflict {
  color: var(--terracotta);
}
.scr-finding--unknown {
  color: var(--slate);
}
.scr-open {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0 4px;
  border: none;
  background: none;
  color: var(--cobalt);
  cursor: pointer;
}
.scr-notice {
  margin: 0;
  min-height: 20px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}
.scr-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px -20px 0;
  padding: 12px 20px;
  background: var(--sky-sheet);
  border-top: 1px solid rgba(58, 56, 51, 0.1);
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  z-index: 2;
}
.scr-footer-count {
  flex: 1;
  min-width: 100px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}
.scr-btn--keep:not(:disabled) {
  background: var(--emerald);
  color: #fff;
}
.scr-btn--aside:not(:disabled) {
  background: var(--terracotta);
  color: #fff;
}
/* Undo is a way back, not a decision: text, not a pill. */
#scrUndo {
  background: transparent;
  box-shadow: none;
  color: var(--cobalt);
  text-decoration: underline;
}
@media (max-width: 700px) {
  .screen-section.active {
    padding: 14px 12px 0;
  }
  .scr-footer {
    margin: 8px -12px 0;
    padding: 10px 12px;
  }
  .scr-evidence {
    margin-left: 0;
  }
  .scr-footer-count {
    flex-basis: 100%;
  }
  .scr-footer .scr-btn {
    padding: 8px 10px;
    white-space: nowrap;
  }
}

/* Phone: the group chips scroll sideways in one row so the first role card
   sits near the fold instead of 900px down (Screen view, UX critic 2026-09-06). */
@media (max-width: 640px) {
  .scr-groups {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .scr-groups::-webkit-scrollbar {
    display: none;
  }
  .scr-group {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Screening: bounded reading batches, native intersecting filters. */
.scr-filters {
  border: 0;
  padding: 0;
  margin: 18px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
.scr-question {
  border: 1px solid var(--border, #d9d9d9);
  border-radius: var(--radius-tile);
  padding: 12px;
  min-width: 0;
}
.scr-question summary {
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
}
.scr-question-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.scr-filters label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-sm);
  min-width: 0;
}
.scr-filters select,
.scr-filters input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid var(--border, #d9d9d9);
  border-radius: 8px;
  padding: 8px;
  font: inherit;
  background: var(--card);
  color: var(--sky-text);
}
.scr-filters > .scr-btn {
  align-self: end;
  justify-self: start;
}
.scr-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.scr-work {
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
  margin-top: 5px;
}
.scr-row-fact {
  overflow-wrap: anywhere;
}
.scr-matches {
  font-weight: 600;
}
@media (max-width: 700px) {
  .scr-filters {
    grid-template-columns: 1fr;
  }
  .scr-pagination {
    font-size: var(--text-sm);
  }
}

.scr-expired {
  color: var(--coral, #b33);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: 5px;
}

/* Small functional review groups: one working sheet, details on demand. */
.scr-review-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}
.scr-batch-nav {
  display: grid;
  gap: 8px;
}
.scr-batch {
  text-align: left;
  font: inherit;
  min-height: 70px;
  padding: 14px;
  background: var(--card);
  color: var(--sky-text);
  border: 1px solid var(--border, #d4d4d4);
  border-radius: 12px;
  cursor: pointer;
}
.scr-batch strong,
.scr-batch span {
  display: block;
}
.scr-batch span {
  font-size: 13px;
  margin-top: 6px;
}
.scr-batch[aria-pressed="true"] {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 9%, var(--card));
}
.scr-batch:focus-visible,
.scr-reason textarea:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}
.scr-review-sheet {
  min-width: 0;
  padding: 20px;
  border-radius: 16px;
  background: var(--card);
}
.scr-review-sheet h3 {
  margin: 0;
  font-size: 22px;
}
.scr-reason {
  display: grid;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 14px;
}
.scr-reason textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  padding: 10px;
  border: 1px solid var(--border, #bbb);
  border-radius: 8px;
  color: inherit;
  background: var(--card);
}
.scr-concern {
  font-size: 13px;
  margin-top: 8px;
  color: var(--muted, #625e56);
}
.scr-review-sheet .scr-footer {
  position: static;
  flex-wrap: wrap;
}
.scr-preparation {
  margin-top: 24px;
  font-size: 13px;
}
@media (max-width: 700px) {
  .scr-review-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .scr-batch-nav {
    display: flex;
    overflow-x: auto;
    padding: 3px 3px 8px;
  }
  .scr-batch {
    flex: 0 0 155px;
  }
  .scr-review-sheet {
    padding: 12px;
  }
}

/* One Inbox, four primary sections. Historic routes remain valid deep links. */
#navToday, #navReports, #navContacts, #navHealth,
#navSubVacancies, #vacancySubNav, #navCountCompanies { display: none !important; }
.inbox-filterbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 16px 0; }
.inbox-filterbar label { display: grid; gap: 5px; font-size: var(--text-sm); color: var(--sky-text); }
.inbox-filterbar input, .inbox-filterbar select { font: inherit; box-sizing: border-box; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border, #ccc); border-radius: 8px; max-width: 240px; background: var(--card); color: var(--sky-text); }
.inbox-filterbar summary { cursor: pointer; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; padding: 0 10px; }
.inbox-review-checkpoint { display: flex; flex-wrap: wrap; gap: 8px; }
/* Cards reuse the catalogue content and decision handlers. */
.scr-inbox { padding: 0; background: transparent; }
.scr-inbox .catalog-sheet { padding: 0; background: transparent; box-shadow: none; overflow: visible; }
.scr-inbox .catalog-table { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.scr-inbox .catalog-row {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: 8px; margin: 0; padding: 20px; min-width: 0; line-height: 1.45; overflow-wrap: anywhere;
  border: 1px solid var(--border, #ddd); border-radius: 16px; background: var(--card);
  box-shadow: 0 3px 12px #00000006;
}
.scr-inbox .catalog-row:hover { border-color: var(--cobalt); }
.scr-inbox .catalog-row:has(input:checked) { border-color: var(--cobalt); background: color-mix(in srgb, var(--cobalt) 5%, var(--card)); }
.scr-inbox .catalog-row-score { position: absolute; top: 18px; right: 20px; background: transparent; width: auto; min-width: 36px; height: auto; padding: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scr-inbox input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--cobalt); }
.scr-inbox .catalog-row-company { order: -1; padding-right: 48px; font-size: 14px; color: var(--cobalt); font-weight: 600; }
.scr-inbox .catalog-row-title { font-size: 18px; line-height: 1.3; white-space: normal; padding-right: 48px; }
.scr-inbox .catalog-row-title-line { display: block; }
.scr-inbox .catalog-row-sub { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: normal; color: var(--sky-text); line-height: 1.45; margin: 4px 0; }
.scr-inbox .catalog-row-loc, .scr-inbox .catalog-row-comp { white-space: normal; font-size: 13px; color: var(--muted); }
.scr-inbox .catalog-row-seen { display: none; } /* Exact dates already appear on every card. */
.scr-inbox .catalog-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
.scr-inbox .catalog-row-actions button { width: auto; height: auto; min-height: 40px; padding: 8px 18px; border-radius: 10px; }
.scr-inbox [data-decision="liked"] { background: #e5f5ed; color: #14633c; border-color: #9dceae; }
.scr-inbox [data-decision="passed"] { background: #fff1ed; color: #9b3b28; border-color: #e9bdad; }
.scr-inbox .scr-pagination { justify-content: space-between; align-items: center; margin: 14px 0; }
.scr-batch-nav { position: sticky; top: 20px; }
.scr-batch { min-height: 0; padding: 12px; }
.scr-batch span { color: var(--muted); }
@media (max-width: 1050px) {
  .scr-inbox .catalog-table { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .scr-batch-nav { position: static; }
  .scr-inbox .catalog-row { padding: 18px; }
  .inbox-filterbar label, .inbox-filterbar input, .inbox-filterbar select { max-width: 100%; }
}

.source-accounting { margin-bottom: 24px; }
.source-accounting details { margin: 10px 0; padding: 14px 16px; background: var(--card); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--sky-hairline); overflow-wrap: anywhere; }
.source-accounting h3 { font-size: 15px; font-weight: 600; margin: 0 10px 4px; }
.source-accounting > p { font-size: 13px; color: var(--sky-text-tertiary); margin: 0 10px 12px; }
.source-accounting summary { cursor: pointer; font-weight: 600; }
.source-accounting li { margin: 8px 0; overflow-wrap: anywhere; }

/* Keep retired catalogue controls out of the initial loading screen. */
#catalogLoading:not(.hidden) ~ * { display: none; }

/* Reason review is a filter on the scored table, not another vacancy view. */
#catalogReasonReview { margin: 12px 0; }
#catalogReasonReview summary { cursor: pointer; font-weight: 600; }
#catalogReasonReview p { font-size: 13px; max-width: 800px; }
#catalogReasonReview p:empty { display: none; }
.reason-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.reason-toolbar [aria-pressed="true"] { background: var(--cobalt); color: white; }
.reason-row { margin: 10px 0; font-size: 13px; line-height: 1.5; }
.reason-row label { display: block; margin-bottom: 6px; }
.reason-row input { accent-color: var(--cobalt); width: 18px; height: 18px; vertical-align: middle; }
.reason-row summary { cursor: pointer; color: #8b4d12; white-space: normal; }
.reason-row blockquote { white-space: normal; margin: 8px 0; padding-left: 10px; border-left: 3px solid var(--cobalt); }

.scr-filter-evidence { margin: 10px 0; white-space: normal; overflow-wrap: anywhere; }
.scr-filter-evidence summary { cursor: pointer; }
.scr-filter-evidence p { margin: 8px 0 4px; }
.scr-filter-evidence blockquote { margin: 0; padding-left: 10px; border-left: 2px solid #aaa; }
.scr-filter-hint { font-size: var(--text-sm); }
#inboxPreset { max-width: min(100%, 440px); }
@media (max-width: 600px) {
  #catalogReasonReview .inbox-filterbar label { width: 100%; min-width: 0; }
  #catalogReasonReview .inbox-filterbar input,
  #catalogReasonReview .inbox-filterbar select { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* ===========================================================================
   Daily review screen (Direction B, docs/2026-09-09-ux-build-spec.md).
   Tokens lifted from the design canvas onto the existing sky/quality/cobalt
   system; --sky-line is the one value the canvas had and the tokens did not.
   =========================================================================== */

:root {
  --sky-line: #d5d9e0;
  --review-row-h: 56px;
  --tap: 44px;
}

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

/* --- command bar --------------------------------------------------------- */

.review-sticky {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--sky-sheet);
}

.review-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0 14px;
  background: var(--sky-sheet);
  border-bottom: 1px solid var(--sky-line);
}

.review-bar .basket-tabs {
  margin: 0;
}

.review-bar-spacer {
  flex: 1;
}

/* Segmented, on a grey ground: the same shape as the filter pills would say
   "another filter", which is what the old tab strip did (Gestalt similarity). */
.basket-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--sky-shell);
}

.basket-switch .basket-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--sky-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.basket-switch .basket-tab.active {
  background: var(--card);
  color: var(--sky-text);
  box-shadow: var(--shadow-sm);
}

.basket-switch .basket-tab:not(.active) .basket-count {
  display: none;
}

.basket-switch .basket-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sky-text-tertiary);
}

.basket-switch .basket-tab.active .basket-count {
  color: var(--cobalt);
}

.review-search input {
  height: 100%;
}

.review-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--tap);
  padding: 0 14px;
  flex: 1 1 160px;
  max-width: 200px;
  background: var(--card);
  border: 1px solid var(--sky-line);
  border-radius: var(--radius-pill);
}

.review-search-icon {
  color: var(--sky-text-secondary);
  font-size: var(--text-sm);
}

.review-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--sky-text);
}

.review-band select,
.review-chip,
.review-more {
  height: var(--tap);
  padding: 0 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--sky-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--sky-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.review-band select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sky-text) 50%),
    linear-gradient(135deg, var(--sky-text) 50%, transparent 50%);
  background-position:
    right 18px center,
    right 13px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.review-chip.active {
  border-color: var(--cobalt);
  background: var(--cobalt-tint);
  color: var(--cobalt);
}

.review-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.review-more-count[hidden] {
  display: none;
}

.review-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--cobalt);
  color: #fff;
  font-size: var(--text-xs);
}

.review-bar :focus-visible,
.review-row:focus-visible,
.review-btn:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

/* --- drawer -------------------------------------------------------------- */

.review-drawer {
  width: min(720px, 94vw);
  max-height: 88vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sheet);
  background: var(--sky-sheet);
  color: var(--sky-text);
}

.review-drawer::backdrop {
  background: rgba(26, 22, 18, 0.4);
}

.review-drawer-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 88vh;
  padding: 22px 24px 0;
  overflow: auto;
}

.review-drawer-form > .review-group:last-of-type {
  padding-bottom: 8px;
}

.review-drawer-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.review-drawer-head strong {
  font-size: var(--text-lg);
}

.review-drawer-note {
  flex: 1 1 240px;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.review-drawer-clear {
  height: var(--tap);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--cobalt);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.review-group + .review-group {
  margin-top: 18px;
}

.review-group h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sky-text);
}

.review-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.review-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sky-text-secondary);
}

.review-field select,
.review-field input {
  height: var(--tap);
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--sky-line);
  border-radius: var(--radius-tile);
  background: var(--card);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sky-text);
}

.review-drawer-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 14px 0 18px;
  background: var(--sky-sheet);
  box-shadow: 0 -12px 12px -6px var(--sky-sheet);
}

.review-drawer-count {
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.review-drawer-close {
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--sky-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--sky-text);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
}

.review-drawer-apply {
  height: var(--tap);
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cobalt);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- the list ------------------------------------------------------------ */

.review-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.review-keyhint .browse-results-count {
  padding: 0;
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.review-head,
.review-row {
  display: grid;
  /* Both text columns flex, so neither starves the other: the title and the
     conflict are the two fields a decision is made on. */
  grid-template-columns:
    minmax(44px, auto) minmax(150px, 1.5fr) 52px 92px minmax(240px, 2fr) 84px 44px 148px;
  gap: 12px;
  align-items: center;
  padding: 0 12px 0 10px;
}

.review-head {
  padding-top: 10px;
  padding-bottom: 8px;
  background: var(--sky-sheet);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sky-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-row {
  /* Clear of the pinned block above and the pinned key hints below, so
     scrollIntoView never parks the cursor row under either. The top value is
     the block's measured height (catalog.js syncStickyHeight); it wraps to two
     rows at some widths, and a fixed number left rows behind it. */
  scroll-margin-top: calc(var(--review-sticky-h, 200px) + 8px);
  scroll-margin-bottom: 56px;
  min-height: var(--review-row-h);
  background: var(--card);
  border-radius: var(--radius-row);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.review-row:hover {
  background: var(--sky-row-hover);
}

.review-row--cursor {
  box-shadow:
    0 0 0 2px var(--cobalt),
    var(--shadow-sm);
}

.review-cell {
  min-width: 0;
}

/* On the desktop grid the wrapper disappears, so its four cells sit in the
   row's own columns. On the phone it becomes the second line. */
.review-meta {
  display: contents;
}

.review-cell--default {
  display: flex;
  align-items: center;
  min-width: 0;
}

.review-cell--default .review-pill {
  white-space: nowrap;
}

.review-default-none {
  color: var(--sky-text-disabled);
}

.review-cell--role {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-title,
.review-org,
.review-conflict,
.review-cell--source {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--sky-text);
}

.review-org,
.review-cell--source {
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.review-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.review-deadline {
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.review-deadline--soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--q-weak);
  font-weight: 600;
}

.review-deadline--soon > .review-clock {
  font-size: 14px;
  line-height: 1;
}

.review-conflict {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--q-moderate);
}

.review-conflict--none {
  font-weight: 400;
  color: var(--sky-text-secondary);
}

.review-cell--age {
  font-size: var(--text-xs);
  color: var(--sky-text-secondary);
  font-variant-numeric: tabular-nums;
}

.review-cell--actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--sky-line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}

/* On the desktop grid the column header carries the word; on the phone the
   header is gone, so the word rides on the control itself. */
.review-btn-word,
.review-score-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.review-btn--like {
  color: var(--q-good);
}
.review-btn--unsure {
  color: var(--q-moderate);
}
.review-btn--pass {
  color: var(--q-weak);
}

.review-btn:hover {
  border-color: currentColor;
}

/* --- the expanded row -----------------------------------------------------

   The panel is a sibling of the row, not a cell inside it. The row keeps its
   56px height and its cursor ring, and pins itself above the panel so the
   reader can always see which role the evidence belongs to. The panel carries
   a cobalt left rule instead of a frame around the whole card.
   ------------------------------------------------------------------------ */

.review-row--expanded {
  position: sticky;
  top: var(--review-sticky-h, 200px);
  z-index: 1;
}

.review-expand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 28px;
  margin: -2px 0 8px 10px;
  padding: 16px 18px 18px;
  border-left: 3px solid var(--cobalt);
  border-radius: 0 var(--radius-row) var(--radius-row) 0;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.review-expand h4 {
  margin: 0 0 12px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--sky-text);
}

.review-fact {
  margin-bottom: 16px;
}

/* A second group of requirements starts a new block, so six flat facts read as
   "what rules this out" and "what is only mentioned". */
.review-fact--group {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--sky-line);
}

/* Level 1: what the posting asks and how hard. Quiet, and the same shape for
   every row, so the eye can skip it once it knows the pattern. */
.review-fact-label {
  display: block;
  margin-bottom: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-text-secondary);
}

/* Level 2: the finding, in ink. This is the line a decision is made on. */
.review-fact-note {
  max-width: 66ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sky-text);
}

.review-finding {
  font-weight: 600;
}

.review-finding--conflict {
  color: var(--q-moderate);
}
.review-finding--match {
  color: var(--q-good);
}
.review-finding--unknown {
  color: var(--sky-text-secondary);
}

/* Level 3: the posting's own words, indented under the finding they support. */
.review-expand blockquote {
  max-width: 62ch;
  margin: 8px 0 0 24px;
  padding: 8px 14px;
  border-left: 2px solid var(--cobalt-tint);
  border-radius: 0 var(--radius-tile) var(--radius-tile) 0;
  background: var(--sky-sheet);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--sky-text-secondary);
}

.review-expand-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--cobalt);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.review-expand-link:hover {
  text-decoration: underline;
}

/* The right rail: the facts the 56px row has no room for. */
.review-expand-facts {
  position: sticky;
  top: calc(var(--review-sticky-h, 200px) + 74px);
  align-self: start;
}

.review-expand-facts dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.review-expand-facts dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--sky-text-secondary);
}

.review-expand-facts dd {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--sky-text);
  overflow-wrap: anywhere;
}

/* --- sections ------------------------------------------------------------ */

.review-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 14px 4px 6px;
}

.review-section-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--sky-text);
}

.review-section-meta,
.review-head-default {
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

/* Its own line. Sharing the header row left the reason 146px and clamped it
   to two of the three lines it needs. */
.review-head-default {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  order: 3;
  min-width: 0;
  font-size: var(--text-sm);
}

.review-head-default-label,
.review-head-default-note {
  color: var(--sky-text-secondary);
}

.review-head-default-note {
  min-width: 0;
  line-height: 1.35;
}

.review-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review-pill--passed {
  background: var(--q-weak-bg);
  color: var(--q-weak);
}
.review-pill--liked {
  background: var(--q-good-bg);
  color: var(--q-good);
}
.review-pill--unsure {
  background: var(--q-moderate-bg);
  color: var(--q-moderate);
}

.review-section-spacer {
  flex: 1;
}

.review-key-cap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid var(--sky-line);
  border-radius: 6px;
  background: var(--card);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--sky-text);
}

.review-accept {
  display: inline-flex;
  align-items: center;
  height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--cobalt);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--cobalt);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

/* --- status bar and key hints -------------------------------------------- */

/* The undo toast: transient, at the foot of the list, above the key hints.
   It replaced a permanent outlined button wedged between the filters and the
   column header, which read as part of the header and pushed the table down. */
.review-toast {
  position: fixed;
  left: 50%;
  bottom: 56px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--sky-text);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}

.review-toast[hidden] {
  display: none;
}

.review-toast--alert {
  background: var(--q-weak);
}

.review-toast-what {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-toast-undo {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.review-toast-undo:hover {
  background: rgba(255, 255, 255, 0.26);
}

.review-toast .review-key-cap {
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
}

.review-keyhint-spacer {
  flex: 1;
}

.review-keyhint {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 4px;
  background: var(--sky-sheet);
  border-top: 1px solid var(--sky-line);
  font-size: var(--text-sm);
  color: var(--sky-text-secondary);
}

.review-sentinel {
  height: 1px;
}

/* Clear of the pinned key hints and of the toast that rises above them. */
.review-rows {
  padding-bottom: 128px;
}

/* --- phone: two lines per row, no horizontal scroll ---------------------- */

@media (max-width: 1100px) {
  .review-head,
  .review-keyhint {
    display: none;
  }

  /* The command bar is four rows tall here; pinning it would cost a quarter
     of the screen for controls the reader uses once per session. The recovery
     strip does get pinned: it is empty until something needs saying, and a
     phone has no U key to undo with. */
  .review-sticky {
    position: static;
  }
  /* Fixed, not sticky: sticky is trapped inside .review-sticky, which scrolls
     away. A phone has no U key, so Undo has to be reachable from any scroll
     position — and the bottom of the screen is where the thumb already is. */
  /* No keyboard here, so the toast is the only way back: keep it in reach. */
  .review-toast {
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
  .review-rows {
    padding-bottom: 96px;
  }

  /* The tab strip scrolls inside itself; the page never scrolls sideways. */
  .review-bar {
    gap: 8px;
  }
  .basket-switch {
    order: -1;
    flex: 1 0 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .review-bar-spacer {
    display: none;
  }
  .review-search {
    flex: 1 0 100%;
  }
  .review-band,
  .review-more {
    flex: 1 1 40%;
    min-width: 0;
  }
  .review-band select,
  .review-more {
    width: 100%;
    padding: 0 12px;
  }
  /* Score band and the drawer share a line; the deadline chip takes the next
     one whole, so its label never truncates. */
  .review-more {
    order: 2;
  }
  .review-chip {
    order: 3;
    flex: 1 0 100%;
  }

  /* The row folds to two lines plus the decisions: the title over the
     company, then one line of meta. Both text fields clamp, so a long title or
     a long quoted requirement cannot stretch one row past its neighbours. */
  .review-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    line-height: 1.3;
  }
  .review-conflict {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .review-meta {
    line-height: 1.4;
  }
  .review-cell--conflict {
    flex: 1 1 auto;
    min-width: 0;
  }
  .review-cell--deadline,
  .review-cell--source,
  .review-cell--age {
    flex: 0 0 auto;
  }
  /* Source and age are one tap away on the detail page; on a 390px line the
     deadline and the conflict are what a decision needs. */
  .review-cell--source,
  .review-cell--age {
    display: none;
  }
  .review-cell--conflict::after {
    content: none;
  }
  .review-section {
    padding: 12px 4px 4px;
  }
  /* Stack the batch's proposal instead of squeezing it into a column. */
  .review-head-default {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .review-section-meta {
    flex: 1 1 100%;
  }

  .review-expand {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-left: 4px;
    padding: 14px;
  }
  /* The facts the row truncated come first here; two screens of evidence must
     not sit between the reader and the location or the contract kind. */
  .review-expand-facts {
    position: static;
    order: -1;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sky-line);
  }
  .review-expand-facts dl {
    grid-template-columns: 1fr 1fr;
  }
  .review-row--expanded {
    position: static;
  }

  .review-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "def role score"
      "meta meta meta"
      "acts acts acts";
    row-gap: 6px;
    padding: 10px 12px;
  }

  .review-cell--default {
    grid-area: def;
    align-items: flex-start;
    padding-top: 2px;
  }
  .review-cell--role {
    grid-area: role;
  }
  .review-cell--score {
    grid-area: score;
    justify-self: end;
  }
  .review-meta {
    grid-area: meta;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 4px 8px;
    font-size: var(--text-xs);
  }
  .review-cell--deadline {
    padding-right: 10px;
    border-right: 1px solid var(--sky-line);
    margin-right: 10px;
  }
  .review-cell--actions {
    grid-area: acts;
    justify-content: flex-start;
  }
  /* The word is the label here; the glyph beside it only stole the 15px the
     longest translated word needs. */
  .review-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
  }
  .review-btn-glyph {
    display: none;
  }
  .review-cell--actions {
    gap: 6px;
  }
  .review-btn-word {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .review-btn-word,
  .review-score-word {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
  .review-score-word {
    margin-right: 5px;
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.75;
  }
  .review-search {
    max-width: none;
  }
  .review-drawer-form {
    padding: 18px 16px;
  }
}

/* Applications board goes full width: lift the 1100px .container cap only
   while the pipeline section is active; columns share the width equally
   (min 220px, horizontal scroll below that) and each column scrolls on its own. */
.container:has(.pipeline-section.active) {
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 24px;
}
.pipeline-section.active .pipeline-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  align-items: stretch;
  height: calc(100vh - 170px);
  min-height: 420px;
}
.pipeline-section.active .pipe-col {
  width: auto;
  min-height: 0;
}
.pipeline-section.active .pipe-col-cards {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}