/* ══════════════════════════════════════════════════════════════════════════
   Product UI, extracted and re-set in the company page's language

   Shared by app-1 / app-2 / app-3 so those three differ in PRESENTATION only.
   The components below are the real ones, read out of
   frontend/src/features/biotower/. Provenance for each is noted at its rule.

   TWO DELIBERATE DEVIATIONS FROM THE PRODUCT, both per the brief:

   1. No monospace. The product sets every label and figure in JetBrains Mono
      and every display value in Rajdhani. That is the terminal register this
      deck was told to drop, so the components are re-set in the page sans with
      `font-variant-numeric: tabular-nums` doing the column-alignment job the
      mono was doing. Structure is faithful; the typeface is not.
   2. Light only. The product is dark-first and flips via `--c-*` custom
      properties. These are its light values, which is the mode a marketing
      page should show.

   WHAT IS REAL HERE, AND CHECKABLE:
     · table columns            TrialFinderTable.tsx:759-835
     · the four gated columns   TrialFinderTable.tsx:830-833 (GatedCell)
     · Terminal tool names      tokens.ts FLOOR_TOOLS.terminal (6 tools)
     · floor names and status   tokens.ts FLOORS (live / partial / preview)
     · status buckets + hints   TrialFinderTable.tsx:164-167
     · the 16 regions           TrialFinderTable.tsx:189-205
     · "Phased (1-3)" filter    TrialFinderTable.tsx:898
     · the LED strip divider    primitives.tsx LedLine
     · #3d8efc as the primary   tokens.ts C.teal

   WHAT IS NOT REAL: every trial row. The rows are sample data and every
   preview carries a visible "Sample data" chip that must not be removed. Real
   NCT identifiers were deliberately NOT used: attaching an invented indication
   or phase to a real public registry record is the same class of mistake as
   frontend/src/features/finance/**, which is banned from this page outright.
   The four analysis columns are shown LOCKED because the product locks them,
   which is both faithful and the reason no invented PoS or NPV appears here.
   ══════════════════════════════════════════════════════════════════════════ */

.app {
  --app-bg: #f7f9fc; /* --c-bg  light: soft blue-white */
  --app-card: #ffffff; /* --c-card */
  --app-border: #dbe4ef; /* --c-border, blue-tinted hairline */
  --app-dim: #64748b; /* --c-dim, slate */
  --app-text: #0f2038; /* --c-text, dark navy */
  --app-blue: #3d8efc; /* C.teal, the primary interactive */
  --app-blue-ink: #1d4ed8; /* --bt-cta-bg light: passes AA on white */
  --app-amber: #b45309;
  --app-green: #047857;

  font-size: 14px;
  line-height: 1.5;
  color: var(--app-text);
  font-variant-numeric: tabular-nums;
}

/* ── Window chrome ───────────────────────────────────────────────────────
   Not a macOS traffic-light bar. The product has no window chrome of its own,
   so this is the deck's frame for showing a product surface: a hairline top
   rail carrying the tool name and the floor it lives on. */
.win {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgb(13 23 32 / 0.04),
    0 18px 44px -20px rgb(13 32 56 / 0.22);
}

.win-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border);
}

.win-title {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.win-crumb {
  color: var(--app-dim);
  font-size: 0.82rem;
}

.win-body {
  padding: 16px;
  overflow: hidden;
}

/* The LED strip from primitives.tsx LedLine, which itself echoes the lit floor
   strips on the tower render. The one place a gradient is allowed on this page:
   it is the product's own brand device, not a decoration standing in for a
   colour decision. */
.led {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--app-blue) 18%,
    var(--app-blue) 82%,
    transparent 100%
  );
}

/* ── Sample-data chip. Required on every preview. ────────────────────────── */
.sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 9px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-card);
  color: var(--app-dim);
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Tag / chip. primitives.tsx Tag: tinted fill, tinted border. ─────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid rgb(61 142 252 / 0.35);
  border-radius: 4px;
  background: rgb(61 142 252 / 0.09);
  color: var(--app-blue-ink);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.chip-amber {
  border-color: rgb(180 83 9 / 0.3);
  background: rgb(180 83 9 / 0.08);
  color: var(--app-amber);
}

.chip-green {
  border-color: rgb(4 120 87 / 0.3);
  background: rgb(4 120 87 / 0.08);
  color: var(--app-green);
}

.chip-plain {
  border-color: var(--app-border);
  background: var(--app-bg);
  color: var(--app-dim);
}

/* primitives.tsx StatusDot. Real semantic state, which is why this page's one
   exception to the no-decorative-dots rule lives here and nowhere else. */
.dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--app-blue);
}

.dot-amber {
  background: #d97706;
}
.dot-dim {
  background: #94a3b8;
}

/* ── Filter pills. Real region and status buckets. ───────────────────────── */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pill {
  padding: 5px 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: var(--app-card);
  color: var(--app-dim);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.pill:hover {
  border-color: var(--app-blue);
  color: var(--app-text);
}

.pill[aria-pressed='true'] {
  border-color: rgb(61 142 252 / 0.5);
  background: rgb(61 142 252 / 0.1);
  color: var(--app-blue-ink);
  font-weight: 600;
}

/* ── Stat tiles. primitives.tsx StatCard: micro-label, big value, sub. ─────
   Every value below is a STRUCTURAL fact read out of the source, not a metric:
   16 regions, 6 Terminal tools, 7 floors, phases 1-3. No invented figures. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.stat {
  padding: 13px 15px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 9px;
}

.stat-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--app-dim);
  margin-bottom: 7px;
}

.stat-value {
  display: block;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--app-blue-ink);
}

.stat-sub {
  display: block;
  margin-top: 5px;
  font-size: 0.76rem;
  color: var(--app-dim);
}

/* ── Trial table. Columns exactly as TrialFinderTable.tsx declares them. ─── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 10px;
}

table.trials {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

table.trials th {
  padding: 10px 9px;
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border);
  text-align: left;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-dim);
  white-space: nowrap;
}

table.trials th.num {
  text-align: right;
}

table.trials td {
  padding: 11px 9px;
  border-bottom: 1px solid var(--app-border);
  vertical-align: middle;
}

table.trials tr:last-child td {
  border-bottom: 0;
}

table.trials tbody tr {
  transition: background-color 140ms ease;
}

table.trials tbody tr:hover {
  background: var(--app-bg);
}

.t-name {
  font-weight: 600;
  white-space: nowrap;
}

.t-sub {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--app-dim);
}

.t-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--app-dim);
  font-size: 0.8rem;
}

/* GatedCell. TrialFinderTable.tsx renders Enrolled / PoS / NPV / Sites through
   this, and the four analysis columns are NOT entitlement gated. The product's own
   source is explicit: TrialFinderTable.tsx:128-136 calls them a "Placeholder
   for the per-trial analysis fields (PoS %, NPV $, Enrolled, Sites) that the
   public list endpoint does not provide. These unlock with the analysis
   features that are built separately", and the cell's own tooltip reads
   "Unlocks with per-trial analysis, in development". The deck described them
   for several rounds as sitting behind the subscription, which was wrong, and
   is now doubly wrong because the subscription is being removed. They are
   unbuilt, not unpaid. Reproducing the marker is still right, and it is still
   the reason no invented probability or valuation figure appears here.
   Reproduced because it is faithful AND
   because it is the reason no probability-of-success or valuation figure
   appears anywhere on this page. */
.gated {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #94a3b8;
  font-size: 0.8rem;
}

.gated::before {
  content: '';
  width: 24px;
  height: 7px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    #e2e8f0 0 5px,
    transparent 5px 8px
  );
}

.gated::after {
  content: 'Locked';
  font-size: 0.72rem;
}

/* ── Tool rail. FLOOR_TOOLS.terminal, all six, real labels. ──────────────── */
.rail {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px;
  background: var(--app-bg);
  border-right: 1px solid var(--app-border);
}

.rail-label {
  padding: 0 10px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--app-dim);
}

.rail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--app-dim);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.rail-item:hover {
  background: rgb(61 142 252 / 0.07);
  color: var(--app-text);
}

.rail-item[aria-selected='true'] {
  background: rgb(61 142 252 / 0.12);
  color: var(--app-blue-ink);
  font-weight: 600;
}

/* ── Catalyst strip. Terminal's Catalyst Radar, as a dated horizon. ──────── */
.horizon {
  display: grid;
  gap: 0;
}

.horizon-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 2px;
  border-bottom: 1px solid var(--app-border);
}

.horizon-row:last-child {
  border-bottom: 0;
}

.horizon-when {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--app-blue-ink);
  white-space: nowrap;
}

.horizon-what {
  font-size: 0.85rem;
}

/* ── Floor rail. FLOORS with their real live / partial / preview status. ─── */
.floors-mini {
  display: grid;
  gap: 1px;
  background: var(--app-border);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  overflow: hidden;
}

.floor-mini {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  background: var(--app-card);
}

.floor-mini-name {
  font-size: 0.86rem;
  font-weight: 600;
}

.floor-mini-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--app-dim);
}

@media (max-width: 620px) {
  .app {
    font-size: 13px;
  }

  .win-body {
    padding: 12px;
  }
}