/* ==========================================================================
   Vetted — one design system, two modes.
   Mode changes ground, density and type ratio. Never the palette.
   ========================================================================== */

:root {
  /* Palette carried over from gaurav.ventures so the portfolio reads as one
     body of work. Teal is ink there, not decoration, and that holds here. */
  --ink: #075056;
  --ink-soft: #2a5f65;
  --graphite: #7a9196;
  --rule: #d4dcdd;

  --signal: #075056;
  --signal-wash: rgba(7, 80, 86, 0.08);
  --signal-edge: rgba(7, 80, 86, 0.26);

  /* Orange is the site's accent. Used here only where something has just
     arrived or needs to be noticed, never as decoration. */
  --accent: #E84E00;
  --accent-soft: #FF5B04;
  --accent-wash: rgba(232, 78, 0, 0.09);
  --accent-edge: rgba(232, 78, 0, 0.3);

  --sans: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Mode-owned. Defaults are scouting. */
  --paper: #FAF7F4;
  --paper-deep: #F0EBE5;
  --u: 4px;
  --body-face: var(--sans);
  --body-size: 0.9375rem;
  --body-leading: 1.5;
  --abstract-size: 0.9375rem;
  --abstract-leading: 1.62;
  --panel-w: 560px;

  --radius: 2px;
  --focus: 2px solid var(--accent);
}

[data-mode="help"] {
  --paper: #FDFBF8;
  --paper-deep: #F5EFE8;
  --u: 5px;
  --body-face: var(--serif);
  --body-size: 1rem;
  --body-leading: 1.6;
  --abstract-size: 1.0625rem;
  --abstract-leading: 1.72;
}

/* --------------------------------------------------------------- reset -- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-face);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  transition: background-color 240ms ease;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

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

.skip {
  position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * -12);
  z-index: 100; background: var(--paper); color: var(--signal);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  border: 1px solid var(--signal);
  transition: top 140ms ease;
}
.skip:focus { top: calc(var(--u) * 2); }

/* --------------------------------------------------------- type helpers -- */

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite);
}

h1, h2, h3 { font-family: var(--sans); font-weight: 600; margin: 0; letter-spacing: -0.015em; }

/* --------------------------------------------------------------- shell -- */

.shell { max-width: 1240px; margin: 0 auto; padding: 0 calc(var(--u) * 5); }

.masthead {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
}
.masthead-in {
  display: flex; align-items: center; gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 3) 0;
}

.wordmark {
  font-family: var(--sans);
  font-weight: 600; font-size: 0.9375rem;
  letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: calc(var(--u) * 1.5);
}
.wordmark b { font-weight: 600; }
.wordmark span {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--graphite); font-weight: 400; letter-spacing: 0;
}

.masthead-stat {
  margin-left: auto;
  font-family: var(--mono); font-size: 0.75rem;
  color: var(--graphite);
  display: flex; gap: calc(var(--u) * 2);
}
.masthead-stat i { font-style: normal; color: var(--rule); }

/* mode switch */
.modeswitch { display: flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.modeswitch button {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  color: var(--graphite);
  white-space: nowrap;
}
.modeswitch button[aria-pressed="true"] { background: var(--accent); color: #FAF7F4; }
.modeswitch button + button { border-left: 1px solid var(--rule); }

/* ---------------------------------------------------------- search bar -- */

.searchzone { padding: calc(var(--u) * 12) 0 calc(var(--u) * 7); }
.searchzone.compact { padding: calc(var(--u) * 5) 0 calc(var(--u) * 3); }

.searchwrap { max-width: 720px; margin: 0 auto; }
.searchzone.compact .searchwrap { margin: 0; max-width: none; }

.h1 {
  font-family: var(--sans);
  font-size: 1.75rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 calc(var(--u) * 3);
  max-width: 20em;
}

.searchhint {
  margin: calc(var(--u) * 2.5) 0 0;
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--graphite); max-width: 56ch; line-height: 1.5;
}

.modecards { margin-top: calc(var(--u) * 3); }
.modecard-grid {
  margin-top: calc(var(--u) * 2.5);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 3);
}
/* Deliberately the heaviest element on the page. This choice changes the
   whole experience, so it should not look like a preference toggle. */
.modecard {
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.5);
  text-align: left;
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: calc(var(--u) * 4) calc(var(--u) * 4.5);
  background: var(--ink);
  color: #FAF7F4;
  transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.modecard:hover { background: var(--ink-soft); transform: translateY(-1px); }
.modecard[aria-pressed="true"] {
  box-shadow: inset 4px 0 0 var(--accent-soft);
}
.mc-name {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -0.015em; color: #FAF7F4;
}
.modecard[aria-pressed="true"] .mc-name::after {
  content: " · selected"; font-weight: 500; font-size: 0.75rem;
  color: var(--accent-soft); letter-spacing: 0.02em;
}
.mc-blurb {
  font-family: var(--body-face); font-size: 0.9375rem; line-height: 1.5;
  color: rgba(250, 247, 244, 0.92);
}
.mc-for { font-family: var(--sans); font-size: 0.75rem; color: rgba(250, 247, 244, 0.62); }
.modecard:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.lede {
  font-family: var(--serif);
  font-size: 1.375rem; line-height: 1.42;
  margin: 0 0 calc(var(--u) * 6);
  max-width: 34em;
  letter-spacing: -0.01em;
}
.lede em { font-style: italic; }

.searchfield {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  padding: 0 calc(var(--u) * 3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.searchfield:focus-within {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash);
}
.searchfield input {
  flex: 1; border: 0; background: none; outline: none;
  padding: calc(var(--u) * 3.25) 0;
  font-family: var(--sans); font-size: 1rem;
}
.searchfield input::placeholder { color: var(--graphite); opacity: 0.8; }
/* type="search" draws its own clear button in WebKit, which sat next to ours
   and read as two X's. */
.searchfield input::-webkit-search-cancel-button,
.searchfield input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.searchfield button.go {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  color: var(--signal); padding: calc(var(--u) * 1.5) 0;
  white-space: nowrap;
}
.searchfield button.clear { color: var(--graphite); font-size: 1.125rem; line-height: 1; padding: var(--u); }

/* expansion chips — the inspectable layer */
.expansion { margin-top: calc(var(--u) * 3); font-size: 0.75rem; }
.exp-row {
  display: grid; grid-template-columns: 148px 1fr;
  gap: calc(var(--u) * 2); align-items: baseline;
  padding: calc(var(--u) * 1) 0;
}
.exp-row + .exp-row { border-top: 1px solid var(--rule); margin-top: var(--u); padding-top: calc(var(--u) * 2); }
.expansion .label {
  font-family: var(--sans); color: var(--graphite);
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
}
.exp-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5); }
.exp-toggle { font-family: var(--sans); font-size: 0.6875rem; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* Your own words read as ink; added terms sit back a step. */
.chip.own { border-color: var(--signal); color: var(--ink); background: transparent; font-weight: 500; }
.chip {
  font-family: var(--mono); font-size: 0.6875rem;
  border: 1px solid var(--signal-edge);
  color: var(--signal);
  background: var(--signal-wash);
  padding: 2px calc(var(--u) * 1.5);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: var(--u);
}
.chip[aria-pressed="false"] {
  border-color: var(--rule); color: var(--graphite);
  background: none; text-decoration: line-through;
}
.chip .x { font-family: var(--sans); opacity: 0.65; }
.chip:hover .x { opacity: 1; }

/* example queries */
.examples { margin-top: calc(var(--u) * 6); }
.examples ul { list-style: none; margin: calc(var(--u) * 2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 4); }
.examples button {
  font-family: var(--body-face); font-size: 0.875rem;
  color: var(--ink);
  border-bottom: 1px solid var(--signal-edge);
  padding-bottom: 1px;
  text-align: left;
}
.examples button:hover { color: var(--signal); border-bottom-color: var(--signal); }

/* condition browse — help mode homepage */
.browse { margin-top: calc(var(--u) * 10); border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 5); }
.browse-grid {
  margin-top: calc(var(--u) * 3);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.browse-grid button {
  background: var(--paper);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--u);
  text-align: left;
}
.browse-grid button:hover { background: var(--signal-wash); color: var(--signal); }
.browse-grid .n { font-family: var(--mono); font-size: 0.6875rem; color: var(--graphite); }
.browse-grid button:hover .n { color: var(--signal); }

/* -------------------------------------------------------------- layout -- */

.results-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: calc(var(--u) * 9);
  align-items: start;
  padding-bottom: calc(var(--u) * 20);
}

/* ------------------------------------------------------------- filters -- */

.filters { position: sticky; top: 76px; }
.filterset { border-top: 1px solid var(--rule); padding: calc(var(--u) * 3) 0; }
.filterset:first-child { border-top: 0; padding-top: 0; }
.filterset > h3 { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--graphite); font-family: var(--sans); margin-bottom: calc(var(--u) * 2); }

.opt {
  display: flex; align-items: baseline; gap: calc(var(--u) * 2);
  width: 100%; text-align: left;
  padding: calc(var(--u) * 1) 0;
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--graphite);
  line-height: 1.35;
}
.opt:hover { color: var(--ink); }
.opt .box {
  flex: 0 0 auto; width: 11px; height: 11px;
  border: 1px solid var(--rule); border-radius: 1px;
  position: relative; top: 1px;
}
.opt[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.opt[aria-pressed="true"] .box { background: var(--signal); border-color: var(--signal); }
.opt .n { margin-left: auto; font-family: var(--mono); font-size: 0.6875rem; opacity: 0.75; }

.source-note {
  margin-top: calc(var(--u) * 3);
  max-width: 68ch;
}
.source-note p { margin: 0 0 calc(var(--u) * 2.5); line-height: 1.55; font-size: 0.875rem; }
.source-note p:last-child { margin-bottom: 0; }

.filter-note {
  font-family: var(--sans); font-size: 0.6875rem; color: var(--graphite);
  margin: calc(var(--u) * 3) 0 0; line-height: 1.4;
  border-top: 1px solid var(--rule); padding-top: calc(var(--u) * 2);
}

.intel-body p { margin: 0 0 calc(var(--u) * 2); }
.intel-body ul { margin: 0 0 calc(var(--u) * 2); padding-left: calc(var(--u) * 4); }
.intel-body li { margin-bottom: calc(var(--u) * 1.5); }
.intel-body > :last-child { margin-bottom: 0; }

.filterset .more { font-family: var(--sans); font-size: 0.75rem; color: var(--signal); margin-top: var(--u); }

.filter-clear {
  font-family: var(--sans); font-size: 0.75rem; color: var(--signal);
  margin-top: calc(var(--u) * 3);
}

/* mobile filter toggle */
.filter-toggle { display: none; }

/* ------------------------------------------------------------- results -- */

.results-head {
  display: flex; align-items: baseline; gap: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 3);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.results-count { font-family: var(--mono); font-size: 0.75rem; color: var(--graphite); }
.results-count b { color: var(--ink); font-weight: 500; }
.results-count .cap { font-family: var(--sans); font-size: 0.6875rem; opacity: 0.75; }

.results-tools { margin-left: auto; display: flex; gap: calc(var(--u) * 3); align-items: center; }
.results-tools select {
  font-family: var(--sans); font-size: 0.75rem; color: var(--graphite);
  border: 0; background: none; padding: 2px 0; cursor: pointer;
}
.viewtoggle { display: flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.viewtoggle button { font-family: var(--sans); font-size: 0.6875rem; padding: 3px calc(var(--u) * 2); color: var(--graphite); }
.viewtoggle button[aria-pressed="true"] { background: var(--accent); color: #FAF7F4; }

/* result row — the signature element lives here.
   The row is an article, not a button: only the company name is focusable,
   and its ::after stretches across the card to keep the large click target. */
.result {
  position: relative;
  padding: calc(var(--u) * 4) 0;
  border-bottom: 1px solid var(--rule);
}
.result::before {
  content: ""; position: absolute; left: calc(var(--u) * -3); top: calc(var(--u) * 4);
  bottom: calc(var(--u) * 4); width: 2px; background: transparent;
  transition: background-color 120ms ease;
}
.result:hover::before, .result[aria-current]::before { background: var(--signal); }

.r-top { display: flex; align-items: baseline; gap: calc(var(--u) * 2.5); flex-wrap: wrap; }
.r-name { font-size: 1.0625rem; letter-spacing: -0.015em; margin: 0; }
.r-name button {
  font: inherit; letter-spacing: inherit; text-align: left; color: inherit;
}
.r-name button::after { content: ""; position: absolute; inset: 0; }
.r-name button { text-decoration: underline; text-decoration-color: var(--signal-edge);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.result:hover .r-name button { color: var(--accent); text-decoration-color: var(--accent); }

/* Nothing on the row said "this opens something". The name now reads as a
   link, and an explicit affordance appears on hover and on keyboard focus. */
.r-open {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 500;
  color: var(--accent);
  opacity: 0; transition: opacity 120ms ease;
  white-space: nowrap;
}
.result:hover .r-open, .result:focus-within .r-open { opacity: 1; }
@media (hover: none) { .r-open { opacity: 1; } }
.r-name button:focus-visible { outline: none; }
.r-name button:focus-visible::after { outline: var(--focus); outline-offset: 2px; }

.r-money {
  margin: 0 0 0 auto; font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap;
}
.r-money .cnt { color: var(--graphite); }

.r-meta {
  margin: calc(var(--u) * 1.5) 0 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--u) * 1) calc(var(--u) * 2.5);
  font-family: var(--sans); font-size: 0.75rem; color: var(--graphite);
}
.r-meta .sep { color: var(--rule); }
.r-meta .predicted { border-bottom: 1px dotted var(--graphite); cursor: help; }

/* THE matched sentence */
.matched {
  margin: calc(var(--u) * 2.5) 0 0;
  /* Above the stretched link so the evidence stays selectable and copyable.
     Clicking the row's whitespace or its name still opens the record. */
  position: relative; z-index: 1;
  font-family: var(--serif);
  font-size: var(--abstract-size);
  line-height: var(--abstract-leading);
  color: var(--ink);
  padding-left: calc(var(--u) * 3);
  border-left: 1px solid var(--rule);
  max-width: 68ch;
}
.matched.is-excerpt { color: var(--graphite); }
mark {
  background: var(--signal-wash);
  color: var(--signal);
  font-weight: 600;
  padding: 0 1px;
  border-radius: 1px;
}

.r-why {
  margin: calc(var(--u) * 2) 0 0;
  position: relative; z-index: 1;
  font-family: var(--sans); font-size: 0.8125rem;
  color: var(--graphite);
  display: flex; gap: calc(var(--u) * 2); align-items: baseline;
  max-width: 68ch;
}
.tier {
  flex: 0 0 auto;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 2px calc(var(--u) * 2);
  white-space: nowrap;
}
.tier.high { border-color: var(--signal); background: var(--signal); color: var(--paper); }
.tier.medium { border-color: var(--signal-edge); color: var(--signal); }
.tier.low { border-color: var(--rule); color: var(--graphite); }

/* The explanation is Claude's reasoning about this specific company. It was
   rendering in the same grey as the metadata, so it read as chrome. */
.why-text { color: var(--ink-soft); }

/* Ranking lands a beat after the results do. A short accent flash makes the
   change perceptible without being a spinner. */
@keyframes arrive {
  0%   { background: var(--accent-wash); }
  100% { background: transparent; }
}
.r-why.arriving { animation: arrive 1600ms ease-out; border-radius: var(--radius); }
.r-why.arriving .tier { box-shadow: 0 0 0 3px var(--accent-wash); }

.ranknote {
  margin: calc(var(--u) * 2.5) 0 0;
  font-family: var(--sans); font-size: 0.75rem;
  display: flex; align-items: center; gap: calc(var(--u) * 1.5);
}
.ranknote::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
}
.ranknote.working { color: var(--accent); }
.ranknote.working::before { background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.ranknote.done { color: var(--graphite); }
.ranknote.done::before { background: var(--signal); }
@keyframes pulse { 0%,100% { opacity: 0.3 } 50% { opacity: 1 } }

/* status dot */
.status { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.25); white-space: nowrap; }
.status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--graphite); background: transparent;
}
.status.active .dot { background: var(--signal); border-color: var(--signal); }
.status.recent .dot { background: var(--graphite); }
.status.active { color: var(--signal); }

/* Accelerator badge. Deliberately quieter than the award figures: this is
   corroborating context, not the federal record the tool is built on. */
.badge {
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 500;
  border: 1px solid var(--accent-edge); color: var(--accent);
  background: var(--accent-wash);
  border-radius: 999px; padding: 1px calc(var(--u) * 1.75);
  white-space: nowrap;
  /* A company with many cohorts has a long label; on a phone it ends in an
     ellipsis instead of widening the page. The full text is in the title. */
  max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.badge i { font-style: normal; opacity: 0.8; font-weight: 400; }

/* ending-soon marker, scouting only */
.ending {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--signal); border: 1px solid var(--signal-edge);
  border-radius: 999px; padding: 0 calc(var(--u) * 1.5);
}

/* sparkline */
.spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 12px; }
.spark i { width: 3px; background: var(--rule); display: block; }
.spark i.on { background: var(--graphite); }

/* table view — scouting */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.tbl th {
  text-align: left; font-family: var(--sans); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite);
  font-weight: 600; padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 2) 0;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.tbl td { padding: calc(var(--u) * 2.5) calc(var(--u) * 2) calc(var(--u) * 2.5) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl tr:hover td { background: var(--signal-wash); }
.tbl .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.tbl button.cellname { font-family: var(--sans); font-weight: 600; text-align: left; }
.tbl button.cellname:hover { color: var(--signal); }

/* empty + loading */
.empty { padding: calc(var(--u) * 12) 0; max-width: 46ch; }
.empty h3 { font-size: 1.0625rem; margin-bottom: calc(var(--u) * 2); }
.empty p { color: var(--graphite); margin: 0 0 calc(var(--u) * 3); }

.loading { font-family: var(--mono); font-size: 0.75rem; color: var(--graphite); padding: calc(var(--u) * 6) 0; }
.loading::after { content: "…"; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { opacity: 0.3 } 50% { opacity: 1 } 100% { opacity: 0.3 } }

.notice {
  border: 1px solid var(--rule); border-left: 2px solid var(--signal);
  padding: calc(var(--u) * 2.5) calc(var(--u) * 3);
  font-size: 0.8125rem; color: var(--graphite);
  margin: calc(var(--u) * 3) 0;
}

/* --------------------------------------------------------------- panel -- */

.scrim {
  position: fixed; inset: 0; background: rgba(16, 22, 25, 0.28);
  z-index: 50; opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); max-width: 100vw;
  background: var(--paper); z-index: 60;
  border-left: 1px solid var(--rule);
  transform: translateX(100%); transition: transform 260ms cubic-bezier(0.3, 0.8, 0.3, 1);
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(16, 22, 25, 0.06);
}
.panel.open { transform: none; }

.panel-head {
  padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 3);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; gap: calc(var(--u) * 3);
}
.panel-head h2 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
.panel-close { font-size: 1.25rem; line-height: 1; color: var(--graphite); margin-left: auto; padding: var(--u); }
.panel-close:hover { color: var(--ink); }

.panel-body { overflow-y: auto; padding: 0 calc(var(--u) * 5) calc(var(--u) * 12); flex: 1; }

.figures {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin: calc(var(--u) * 4) 0;
}
.fig { background: var(--paper); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
.fig dt { font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.fig dd { margin: calc(var(--u) * 1) 0 0; font-family: var(--mono); font-size: 1rem; }
.fig dd small { font-size: 0.6875rem; color: var(--graphite); }

.sect { border-top: 1px solid var(--rule); padding: calc(var(--u) * 4) 0; }
.sect > h3 { font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--graphite); margin-bottom: calc(var(--u) * 2.5); }

.abstract {
  font-family: var(--serif);
  font-size: var(--abstract-size); line-height: var(--abstract-leading);
  margin: 0;
}
.abstract-title { font-family: var(--sans); font-weight: 600; font-size: 0.9375rem; margin: 0 0 calc(var(--u) * 2); line-height: 1.35; }

.gloss {
  background: var(--signal-wash);
  border-left: 2px solid var(--signal);
  padding: calc(var(--u) * 3);
  margin-bottom: calc(var(--u) * 3);
  font-family: var(--serif); font-size: var(--abstract-size); line-height: var(--abstract-leading);
}
.gloss .eyebrow { display: block; margin-bottom: var(--u); color: var(--signal); }

.act {
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 500;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: calc(var(--u) * 1.75) calc(var(--u) * 3);
  color: var(--ink);
}
.act:hover { border-color: var(--signal); color: var(--signal); }
.act[disabled] { opacity: 0.45; cursor: default; }
.act-row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }

.intel { font-size: 0.875rem; }
.intel ul { margin: 0; padding-left: calc(var(--u) * 4); }
.intel li { margin-bottom: calc(var(--u) * 1.5); }
.checked { font-family: var(--mono); font-size: 0.6875rem; color: var(--graphite); margin-top: calc(var(--u) * 2); }

.simlist { list-style: none; margin: 0; padding: 0; }
.simlist li { border-top: 1px solid var(--rule); padding: calc(var(--u) * 2.5) 0; }
.simlist li:first-child { border-top: 0; }
.simlist button { text-align: left; }
.simlist .nm { font-family: var(--sans); font-weight: 600; font-size: 0.875rem; }
.simlist button:hover .nm { color: var(--signal); }
.simlist .rz { font-size: 0.8125rem; color: var(--graphite); margin-top: 2px; }

.kv { display: grid; grid-template-columns: 96px 1fr; gap: calc(var(--u) * 1.5) calc(var(--u) * 3); font-size: 0.8125rem; margin: 0; }
.kv dt { color: var(--graphite); font-family: var(--sans); font-size: 0.75rem; }
.kv dd { margin: 0; }

.reach { font-size: 0.875rem; }
.reach p { margin: 0 0 calc(var(--u) * 2); }
.caveat { color: var(--graphite); font-size: 0.8125rem; line-height: 1.55; }

.tag {
  display: inline-block;
  font-family: var(--sans); font-size: 0.6875rem;
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 1px calc(var(--u) * 1.75); margin: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0;
  color: var(--graphite);
}
.tag:hover { border-color: var(--signal); color: var(--signal); }

/* shortlist */
.shortlist-bar {
  position: fixed; left: 50%; bottom: calc(var(--u) * 5); transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  display: flex; align-items: center; gap: calc(var(--u) * 3);
  font-family: var(--sans); font-size: 0.8125rem;
  z-index: 45;
  box-shadow: 0 6px 24px rgba(16, 22, 25, 0.18);
}
.shortlist-bar button { color: var(--paper); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 2px; }
.shortlist-bar .n { font-family: var(--mono); }

.star { flex: 0 0 auto; color: var(--graphite); font-size: 0.875rem; padding: 0 var(--u); }
.star:hover, .star[aria-pressed="true"] { color: var(--signal); }

/* ------------------------------------------------------------- footer -- */

.foot {
  border-top: 1px solid var(--rule);
  padding: calc(var(--u) * 6) 0 calc(var(--u) * 10);
  font-size: 0.8125rem; color: var(--graphite);
}
.foot p { margin: 0 0 calc(var(--u) * 2); max-width: 62ch; }
.foot .mono { font-size: 0.6875rem; }
/* Only true where it is true. On a desktop this note is noise. */
.footnote-mobile { display: none; }
@media (max-width: 900px) { .footnote-mobile { display: block; } }

/* ------------------------------------------------------------ responsive */

/* ------------------------------------------------------------ responsive */

/* Tablet and small laptop. The filter rail folds away behind a toggle and the
   result list gets the full width. */
@media (max-width: 900px) {
  .shell { padding: 0 calc(var(--u) * 4); }
  .results-layout { grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); }
  .filters { position: static; display: none; }
  .filters.open { display: block; margin-bottom: calc(var(--u) * 4); }
  .filter-toggle {
    display: inline-flex; align-items: center; gap: var(--u);
    font-family: var(--sans); font-size: 0.8125rem;
    border: 1px solid var(--rule); border-radius: var(--radius);
    padding: calc(var(--u) * 2) calc(var(--u) * 3);
    min-height: 40px;
  }
  .masthead-stat { display: none; }
  .modecard-grid { grid-template-columns: 1fr; gap: calc(var(--u) * 2); }
  .exp-row { grid-template-columns: 1fr; gap: var(--u); }
  .searchzone { padding: calc(var(--u) * 7) 0 calc(var(--u) * 5); }
  .h1 { font-size: 1.5rem; }
  .lede { font-size: 1.125rem; }
  .panel { width: 100%; }
  .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Phone. Everything single column, and every control gets a real touch
   target. Layout that works with a mouse is not automatically usable with a
   thumb, which is the failure this breakpoint exists to prevent. */
@media (max-width: 640px) {
  .shell { padding: 0 calc(var(--u) * 3); }

  .masthead-in { flex-wrap: wrap; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.5) 0; }
  .wordmark { flex: 1 1 100%; }
  .wordmark span { display: none; }
  .modeswitch { flex: 1 1 100%; }
  .modeswitch button { flex: 1; text-align: center; min-height: 40px; }

  .h1 { font-size: 1.3125rem; line-height: 1.25; }
  .lede { font-size: 1.0625rem; }
  .searchzone { padding: calc(var(--u) * 5) 0 calc(var(--u) * 4); }
  .searchfield { padding: 0 calc(var(--u) * 2); }
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  .searchfield input { font-size: 1rem; padding: calc(var(--u) * 3) 0; }
  .searchfield button.go { min-height: 44px; padding: 0 var(--u); }
  .searchfield button.clear { min-width: 40px; min-height: 40px; }

  .browse-grid { grid-template-columns: 1fr; }
  .browse-grid button { min-height: 48px; }
  .modecard { padding: calc(var(--u) * 3) calc(var(--u) * 3.5); }

  /* Filter rows are the smallest targets in the interface. */
  .opt { padding: calc(var(--u) * 2) 0; min-height: 40px; align-items: center; }
  .opt .box { width: 14px; height: 14px; top: 0; }
  .chip { min-height: 32px; padding: 2px calc(var(--u) * 2.5); }
  .examples button { min-height: 36px; }

  .results-head { gap: calc(var(--u) * 2); }
  .results-tools { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
  .viewtoggle button { min-height: 34px; padding: 0 calc(var(--u) * 2.5); }

  .r-top { gap: var(--u); }
  .r-money { margin-left: 0; width: 100%; font-size: 0.75rem; }
  .r-name { font-size: 1rem; }
  .matched { padding-left: calc(var(--u) * 2.5); }
  .r-why { flex-wrap: wrap; }

  .panel-head { padding: calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 2.5); }
  .panel-head h2 { font-size: 1.125rem; }
  .panel-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; margin: -8px -8px 0 auto; }
  .panel-body { padding: 0 calc(var(--u) * 3) calc(var(--u) * 10); }
  .figures { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px calc(var(--u) * 2); }
  .kv dt { margin-top: calc(var(--u) * 1.5); }
  .act { min-height: 44px; display: inline-flex; align-items: center; }
  .act-row { gap: calc(var(--u) * 1.5); }

  .shortlist-bar { left: calc(var(--u) * 3); right: calc(var(--u) * 3); transform: none; justify-content: center; }
  .foot { padding: calc(var(--u) * 5) 0 calc(var(--u) * 8); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .filters, .masthead-stat, .modeswitch, .shortlist-bar, .scrim { display: none; }
}

/* Every grant on a company's record, newest first. */
.awardlist { list-style: none; margin: 8px 0 0; padding: 0; }
.awardlist li {
  display: grid; grid-template-columns: 3.5em 1fr auto; gap: 4px 12px;
  padding: 8px 0; border-top: 1px solid var(--rule); font-size: .8125rem;
}
.awardlist li:first-child { border-top: 0; }
.awardlist .aw-when, .awardlist .aw-amt { color: var(--graphite); font-size: .75rem; }
.awardlist .aw-amt { text-align: right; white-space: nowrap; }
.awardlist small { display: block; color: var(--graphite); font-size: .6875rem; margin-top: 2px; }
.awardlist a { color: inherit; }