/* Layout rules shared by every page.
 *
 * A real stylesheet rather than a <style> block copied into three files. The
 * methodology page was built from a snapshot of the dashboard's head and
 * promptly fell behind it -- its tables were still auto-layout after the fix
 * landed, and the layout tests caught it. One definition, no drift.
 *
 * These are deliberately NOT Tailwind utilities. Tailwind arrives from the
 * Play CDN at runtime; when that is slow or blocked the utilities never apply,
 * and a layout that depends on them for STRUCTURE collapses into overlapping
 * columns. Everything here holds either way.
 */

/* ---------------------------------------------------------------- layout
   Plain CSS, not Tailwind utilities, for the rules that decide whether the
   page is READABLE rather than merely styled. Tailwind arrives from the
   Play CDN at runtime; when that is slow or blocked the utility classes
   never apply, and a layout that depends on them for structure collapses
   into overlapping columns. These few rules hold either way.

   min-width:0 is the load-bearing one. A grid item defaults to
   min-width:auto, so a table wider than its track pushes the track open
   and the content bleeds across the neighbouring column -- which is
   exactly what interleaving explainer tables look like. */
/* align-items:start, so a short section is not stretched to the height of
   the tallest in its row. Each is its own card and ends where its content
   ends. */
.explainer-grid {
  display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start;
}
.explainer-grid > * { min-width: 0; }
.explainer-card {
  background: rgba(17,24,39,.5); border: 1px solid var(--line);
  border-radius: .75rem; padding: 1rem;
}
@media (min-width: 768px)  { .explainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .explainer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------ dashboard rows -----
   Full-width stacked rows. Nothing's height is set by an unrelated
   neighbour, which is what left ~1100px of dead space under the options
   table while the right-hand column ran on. */
.row-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.asset-cards {
  display: grid; gap: .75rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.asset-cards > * { min-width: 0; }
.panel-row {
  display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: 1fr;
}
.panel-row > * { min-width: 0; }
@media (min-width: 1024px) {
  .panel-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Wide tables scroll inside their own box. Without this the page itself
   scrolls sideways, which is how a table in one column ends up drawn over
   the one beside it.

   The inner table needs an explicit min-width or the scroll container has
   nothing to scroll: a percentage-width table simply shrinks to whatever
   box it is given, and under table-layout:auto that squeezes columns until
   unbreakable tokens overflow their cells. That was the actual cause of
   the interleaving — not the grid. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  overscroll-behavior-x: contain;
}
.table-scroll > table { min-width: var(--table-min, 900px); }

/* Fixed layout so a long token cannot renegotiate the column widths for
   every other row. With auto layout the widest cell wins, and one
   endpoint path is enough to crush the columns beside it. */
.guide-table { table-layout: fixed; width: 100%; }
.guide-table td, .guide-table th { overflow-wrap: anywhere; word-break: normal; }
/* Code and endpoint cells are the ones carrying unbreakable tokens. */
.guide-table .code-cell, .guide-table code, .guide-table .mono {
  overflow-wrap: anywhere; word-break: break-word; hyphens: none;
}
/* A badge must never be clipped by a narrow fixed column: it is the part
   of the row that says whether to trust the row. */
.guide-table .badge-cell { white-space: normal; overflow: visible; }
.guide-table .badge-cell .unverified { white-space: nowrap; }

/* The main dashboard grid. align-items:start stops a short column being
   stretched to the height of a long one, which is what leaves dead space
   under the options table while the right-hand column runs on. */
.main-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.main-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .main-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main-grid > .main-wide { grid-column: span 2 / span 2; }
}

/* Unverified-mapping marker. Deliberately not subtle: it marks a number
   whose VERDICT is unsettled, and a quiet marker would be decorative. */
.unverified {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .625rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .1rem .35rem; border-radius: .25rem;
  color: #F0B429; background: rgba(240,180,41,.12);
  border: 1px solid rgba(240,180,41,.35);
}

/* ------------------------------------------------------- navigation -----
   ONE navigation system, shared by every page. These live here rather than in
   a page's <style> block because the whole point is that the header looks and
   behaves identically wherever you are — a per-page copy is how a site ends up
   with two answers to "where am I".

   Plain CSS for the same reason as everything else in this file: Tailwind
   arrives from the Play CDN at runtime, and a navigation bar that becomes an
   unstyled list of links when that is blocked is a page nobody can get out
   of. */
/* The header row: logo | nav | status. The nav was centered on the dashboard
   and hard-right on every other page, for a reason nobody chose: the dashboard
   header had a third (right-hand) cell and the others did not, so the same
   justify-between produced two different layouts. Every page now has all three
   cells, and above the breakpoint the two side cells are forced to EQUAL
   flexible widths so the nav sits at the true centre on every route — the same
   answer to "where am I" in the same place everywhere.

   Below the breakpoint this rule does nothing and the row falls back to
   space-between: on a phone, equal side thirds would crush the logo and the
   buttons to make room for symmetry nobody can see at that size. */
.header-row { display: flex; align-items: center; justify-content: space-between; }
/* Flex children may shrink below their content, and the nav scrolls its own
   overflow. Both exist as Tailwind utilities in the markup, but Tailwind
   arrives from the Play CDN at runtime — these are the plain-CSS copies that
   hold the header together when it does not, which is when the squeeze is
   worst. Without them a phone-width header pushes the whole document wider
   than the viewport. */
.header-row > * { min-width: 0; }
.header-row #nav { overflow-x: auto; }
/* ...except the action cell: its buttons cannot shrink, so a squeezed cell
   just pushes them out the side of the document. Rigid below the breakpoint;
   the equal-thirds rule restores its flexibility where there is room. */
.header-row > .header-side-right { flex-shrink: 0; }
@media (min-width: 900px) {
  /* The gap exists only where the equal thirds do: below the breakpoint the
     row is already at its minimum width on a phone, and a forced gap was
     measured pushing the document 89px past the viewport. */
  .header-row { gap: 1rem; }
  .header-row > .header-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
  .header-side-right { justify-content: flex-end; }
}
@media (max-width: 899.98px) {
  .header-side-right { display: flex; align-items: center; }
}

/* The clock and the data stamp. Tabular numerals so the ticking clock does not
   jitter the header, and nowrap so a squeezed header drops them (below 640px)
   rather than wrapping the row taller than its fixed height. */
.hdr-clock, .hdr-data {
  font-size: .6875rem; color: var(--ink-dim, #94a3b8);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hdr-data { color: var(--ink-dim, #64748b); }
.hdr-data.hdr-stale { color: var(--gold, #EF9F27); }
.hdr-data.hdr-stale::before { content: '\26A0 '; }
@media (max-width: 899.98px) {
  /* One breakpoint, not two: the status appears exactly when the equal-thirds
     layout does. Below it the header is compact — and these spans are nowrap,
     so at squeezed widths a visible status was measured sticking out of its
     shrunken cell and widening the whole document. The container too, not
     just the spans: an empty visible div still costs its flex gap. */
  .hdr-clock, .hdr-data, #hdr-status { display: none; }
}

.nav-bar {
  display: flex; flex-wrap: wrap; gap: .25rem; align-items: center;
}
.nav-link {
  padding: .3rem .6rem; border-radius: .5rem; font-size: .8125rem;
  color: var(--ink-dim, #94a3b8); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
}
.nav-link:hover { color: #fff; border-color: var(--line, #253044); }
/* The active route is marked by weight and a rule as well as colour, so it is
   still identifiable where colour is not available. */
.nav-link-on {
  color: var(--gold, #EF9F27); font-weight: 600;
  border-color: rgba(239,159,39,.4); background: rgba(239,159,39,.1);
}

/* Filter chips. Moved out of the dashboard's inline <style>: the filter is
   global now and appears on every page, so a definition that lived on one of
   them left the others with unstyled buttons. */
.chip {
  padding: .25rem .625rem; border-radius: 9999px; font-size: .75rem;
  line-height: 1rem; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip-on {
  background: rgba(239,159,39,.18); border-color: rgba(239,159,39,.5);
  color: var(--gold, #EF9F27);
}
.chip-off {
  background: transparent; border-color: var(--line, #253044);
  color: var(--ink-dim, #94a3b8);
}
.chip-off:hover { border-color: var(--brand, #374151); }

/* ------------------------------------------------- mobile-only tabs -----
   The tab strip exists ONLY below the breakpoint. On a phone four stacked
   panels put the fourth several screens down, where it is effectively
   invisible; on a desktop there is room for all of them, and hiding three
   quarters of the page behind tabs would destroy the side-by-side comparison
   the overview exists to make.

   display:none rather than a JS-only guard, so the strip cannot flash on a
   wide screen during load, and so a browser with the module blocked never
   shows a tab strip it cannot operate. */
.tab-strip { display: none; }
.tab {
  padding: .35rem .75rem; border-radius: .5rem .5rem 0 0; font-size: .8125rem;
  border: 1px solid var(--line, #253044); border-bottom: none; cursor: pointer;
  background: transparent; color: var(--ink-dim, #94a3b8);
}
.tab-on {
  color: var(--gold, #EF9F27); background: rgba(239,159,39,.1);
  border-color: rgba(239,159,39,.4);
}
@media (max-width: 767px) {
  .tab-strip {
    display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: -1px;
  }
  /* The strip is hidden by JS above the breakpoint too; this keeps it out of
     the flow before the module has run. */
  .tab-strip[hidden] { display: none; }
}