/* ══════════════════════════════════════════════════════════════════════════
   The Console: the Terminal's rail beside its pane

   Extracted verbatim from app-4-console-terminal.html's own <style> block so a
   second page can carry the same surface. app-4 still holds its inline copy
   and is unchanged: it is a reviewed page and this extraction is not a reason
   to reopen it. THAT MEANS THESE RULES EXIST TWICE. If you change one, change
   the other, and the day app-4 is next edited for its own reasons, delete its
   copy and link this file instead.

   What is NOT in here, because it belongs to app-4 and not to the component:
   .section-head, .globe-split, .registry-*, .figure-slot, .gate*, .cat-*,
   .prov*, .closing, and the four extra views. This file is the rail, the main
   column, the view chrome and the table, and nothing else.

   Provenance for every rule is in the comments carried across with it. The
   header of app-ui.css is binding on this component too: no monospace, light
   only, every trial row is sample data, and the four analysis columns are
   shown locked because the product locks them.
   ══════════════════════════════════════════════════════════════════════════ */

.console-t {
  --rail-w: 210px; /* Sidebar.tsx EXPANDED_WIDTH */
  --rail-inset: 14px; /* Sidebar.tsx INSET */
  --band-inset: 24px; /* TerminalPage view bands */
  --app-blue-wash: rgb(61 142 252 / 0.07); /* Sidebar `${accent}12` */

  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  overflow: hidden;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--r-surface);
}

/* Below 900 the product itself stops being a rail plus a pane: it swaps to
   MobileNav, a top bar over the content. Same move here. */
@media (max-width: 900px) {
  .console-t {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Rail: three bands, and only the middle one scrolls ───────────────
   Sidebar.tsx: logo band, the nav band with `flex: 1; min-height: 0`, then
   a footer band pinned outside it. */
.rail-t {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--app-bg);
  border-right: 1px solid var(--app-border);
}

@media (max-width: 900px) {
  .rail-t {
    grid-template-rows: auto auto auto;
    border-right: 0;
    border-bottom: 1px solid var(--app-border);
  }
}

.rail-brand {
  display: flex;
  align-items: center;
  padding: 14px var(--rail-inset);
  border-bottom: 1px solid var(--app-border);
}

/* The same lockup base.css uses in the site header, at the sidebar's own
   26px cap so it clears the 210px rail minus its inset.

   THE PADDING RESET IS NOT TIDYING. base.css gives .wordmark `padding: 2px 0`
   to seat the 40px header lockup in the site bar, and that padding is
   inherited by every other use of the lockup, including this one. Here it
   lands on a band whose height is a measured constant: 14px of inset over a
   26px mark is a 55px brand band, and the 2px top and bottom silently made it
   59. The rail is a fixed grid of `auto minmax(0, 1fr) auto`, so the four
   pixels came straight out of the nav band and every row below moved up.
   The rail caps the lockup's SIZE here, so it caps its spacing here too. */
.rail-brand .mark {
  width: calc(26px * 3.375);
  height: 26px;
}

.rail-brand .wordmark {
  padding: 0;
}

.rail-nav {
  display: grid;
  align-content: start;
  overflow-y: auto;
}

@media (max-width: 900px) {
  .rail-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* The row. `.rail-item` stays the class so the component's provenance in
   app-ui.css still applies; everything below is this page's presentation
   of it, which is the only axis the four app previews differ on. */
.console-t .rail-item {
  display: block;
  width: 100%;
  padding: 11px var(--rail-inset);
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--app-dim);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

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

/* aria-current, not aria-selected: these are navigations in the product,
   not tabs, and that is the attribute Sidebar.tsx sets. */
.console-t .rail-item[aria-current='page'] {
  background: var(--app-blue-wash);
  border-left-color: var(--app-blue);
  color: var(--app-text);
  font-weight: 500;
}

@media (max-width: 900px) {
  .console-t .rail-item {
    border-left: 0;
    border-bottom: 2px solid transparent;
  }

  .console-t .rail-item[aria-current='page'] {
    border-bottom-color: var(--app-blue);
  }
}

/* Intel Reports carries a padlock on this door for anyone without Insight.
   The padlock is an icon, so the state is a word. Sidebar.tsx:187-203 */
.rail-lock {
  float: right;
  margin-left: 10px;
  color: var(--app-dim);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rail-foot {
  padding: 14px var(--rail-inset);
  border-top: 1px solid var(--app-border);
}

.rail-foot a {
  color: var(--app-dim);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.rail-foot a:hover {
  color: var(--app-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Main column ─────────────────────────────────────────────────────── */
.console-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

/* The page header, and the point of it is what is NOT there. On the
   Terminal door the title is deliberately dropped, because the view below
   names itself and "TERMINAL" over "HUMAN BODY" is the same answer twice.
   The band survives to hold the actions, which hug the right.
   TerminalPage.tsx:750-785

   The deck's own artefact, the Sample data chip, takes the vacated left
   slot rather than being bolted onto the right. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 18px var(--band-inset);
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border);
}

.page-head .sample {
  margin-left: 0;
}

.head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* primitives.tsx Btn, at `small`. Outline uses the theme-aware CTA blue,
   which is #1d4ed8 in light and clears AA; ghost is the dim hairline. */
.btn-app {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.btn-app-outline {
  background: transparent;
  border: 1px solid rgb(29 78 216 / 0.31);
  color: var(--app-blue-ink);
}

.btn-app-outline:hover {
  border-color: var(--app-blue-ink);
}

.btn-app-ghost {
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-dim);
}

.btn-app-ghost:hover {
  border-color: var(--app-dim);
  color: var(--app-text);
}

.btn-app-solid {
  background: var(--app-blue-ink);
  border: 1px solid var(--app-blue-ink);
  color: #fff;
}

.btn-app-solid:hover {
  background: #17389c;
  border-color: #17389c;
}

/* ── Views ───────────────────────────────────────────────────────────── */
/* A <section>, so base.css's section rhythm has to come off: a 120px band
   of air above every view heading is the page's spacing, not the app's. */
.panel-t {
  display: none;
  align-content: start;
  padding: 0;
  min-height: 496px;
}

.panel-t.is-shown {
  display: grid;
}

/* Scripting off: every view renders, stacked, each under its own heading,
   and the rail's rows are in-page anchors to them. Nothing is behind a
   class that never lands. */
html:not(.js) .panel-t {
  display: grid;
  border-bottom: 1px solid var(--app-border);
}

/* Two views end on an area the product fills with a drawing or a card. The
   last band takes the leftover height there, so what is in it sits in the
   middle of the space rather than hugging the band above it and leaving a
   hole underneath. Global View does this already through .globe-pane. */
.panel-fill-figure {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.panel-fill-card {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.panel-fill-card .gate {
  align-self: center;
}

.view-head {
  padding: 18px var(--band-inset);
  background: var(--app-card);
}

.view-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text);
}

.view-sub {
  margin: 6px 0 0;
  max-width: 60ch;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--app-dim);
}

/* An inset band: search, filters, applied pills. --c-inset in the product,
   one step off the panel ground, hairline below. */
.band {
  padding: 12px var(--band-inset);
  background: var(--app-bg);
  border-bottom: 1px solid var(--app-border);
}

.band-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.band-note {
  padding: 16px var(--band-inset);
  color: var(--app-dim);
  font-size: 0.85rem;
  max-width: 68ch;
}

.band-note strong {
  color: var(--app-text);
  font-weight: 600;
}

.band-note + .band-note {
  padding-top: 0;
}

/* The results line, in the slot the product fills with `Trials · N results`.
   The count there is served; six is what is actually on screen here. */
.result-line {
  padding: 10px var(--band-inset);
  border-bottom: 1px solid var(--app-border);
  color: var(--app-dim);
  font-size: 0.8rem;
}

.search-field {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 8px;
}

/* Two selectors because there are two kinds of caller. A real surface, such
   as app-4, uses a live <input>. A PREVIEW of the surface uses .search-text,
   which is a span carrying the same words, because a focusable field inside a
   picture of an app is a trap: a tap raises the keyboard and, under 16px,
   zooms the page on iOS. Both must look identical or the preview stops being
   a preview. */
.search-field input,
.search-field .search-text {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--app-text);
}

/* The span stands in for placeholder text, so it takes the placeholder's
   colour rather than the field's. */
.search-field input::placeholder,
.search-field .search-text {
  color: var(--app-dim);
}

/* One line of the input's layout that a span does not get for free: an input
   is a replaced element with an intrinsic size, a span is not, so without
   this the text sits on the flex line's baseline box and the field loses the
   9px of padding above and below that sets its height. */
.search-field .search-text {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.link-quiet {
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-dim);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-quiet:hover {
  color: var(--app-text);
}

/* ── Table, full bleed ───────────────────────────────────────────────
   The product's rows run the width of the pane with a 24px inset, so the
   shared wrapper's border and radius come off and the inset moves to the
   first and last cells. Ten columns do not fit a laptop pane, and they do
   not in the product either: the pane scrolls sideways. */
.console-t .table-wrap {
  border: 0;
  border-radius: 0;
}

.console-t table.trials {
  min-width: 900px;
}

/* Every cell in the product is a single clamped line, and the pane scrolls
   sideways rather than letting a long indication wrap a row to four lines.
   TrialFinderTable.tsx clamp() */
.console-t table.trials td {
  white-space: nowrap;
}

.console-t .t-sub {
  white-space: nowrap;
}

/* Ten columns at the shared 9px gutter run 64px past a 1180px shell, so the
   default view opened on a clipped Status column. The gutter and the
   redaction bar tighten instead: all ten columns are visible at rest from
   1180 up, and the pane still scrolls below that, which is what the product
   does at every width. */
.console-t table.trials th,
.console-t table.trials td {
  padding-left: 7px;
  padding-right: 7px;
}

.console-t .gated::before {
  width: 13px;
}

.console-t table.trials th:first-child,
.console-t table.trials td:first-child {
  padding-left: var(--band-inset);
}

.console-t table.trials th:last-child,
.console-t table.trials td:last-child {
  padding-right: var(--band-inset);
}

/* GatedCell takes align="right" on PoS, NPV and Sites only; Enrolled is
   left aligned in the product. TrialFinderTable.tsx:830-833 */
.gated-left {
  justify-content: flex-start;
}

.t-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}