/* site.css — Plumb.

   The page is a photograph with things set on top of it. Two rules keep it
   both legible and not flat, and both were learned the hard way on the builds
   before this one:

   1. A full-width BAND is thin glass — alpha 0.06 to 0.34. Anything heavier
      turns the photograph into paint. Bands never carry backdrop-filter:
      blurring a whole band destroys the frame's detail even at the right alpha.
   2. Nothing is ever set directly on a bare band. Every paragraph, table, stat
      and heading sits on its own SURFACE (a card or a sheet, 0.62-0.88), which
      is where the blur and the shadow live.

   The ground is fixed, so the same region of the photograph sits behind every
   section, and the frame was chosen because its texture reaches all four edges.

   Two colours carry meaning and are never used for decoration: `--under` when
   the chain is BELOW the tape, `--over` when it is above. */

:root {
  --ink: #16202e;
  --ink-2: #33465e;
  --ink-3: #3d5068;          /* measured: the old #4d6076 read 3.4:1 on --surface-2 */
  --brass: #9a6a1e;
  --brass-ink: #67450f;       /* measured: #7c5415 read 4.0:1 as a 12.8px link, under the 4.5 small text needs */
  --brass-lift: #d9a94f;      /* brass on the photograph */
  --under: #1c6b4f;           /* the chain is cheaper than the tape */
  --under-ink: #14563e;
  --over: #9c3a26;            /* the chain is dearer than the tape */
  --over-ink: #8a3220;
  --paper: #f8f6f1;
  --deep: #111a26;

  --line: rgba(22, 32, 46, .14);
  --line-2: rgba(22, 32, 46, .08);

  --surface: rgba(250, 249, 245, .82);
  --surface-2: rgba(250, 249, 245, .80);
  --surface-3: rgba(250, 249, 245, .74);   /* the board's table: thin enough to keep the photograph's colour under it */
  --head-wash: rgba(250, 249, 245, .62);

  --band-1: rgba(250, 249, 245, .15);
  --band-2: rgba(250, 249, 245, .26);
  --band-deep: rgba(17, 26, 38, .88);   /* only the footer, which is never a whole screen */

  --r: 12px;
  --r-lg: 20px;
  --shadow: 0 2px 4px rgba(12, 20, 32, .05), 0 10px 30px rgba(12, 20, 32, .10);
  --shadow-lg: 0 4px 10px rgba(12, 20, 32, .07), 0 22px 60px rgba(12, 20, 32, .16);
  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font: 400 16.5px/1.62 var(--sans);
  background: #dfe3e6 url("/img/ground.jpg") center center / cover fixed no-repeat;
}
/* iOS ignores background-attachment: fixed and repaints the photo per section.
   A fixed layer behind everything gives the same result everywhere. */
@supports (-webkit-touch-callout: none) {
  body { background: #dfe3e6; }
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("/img/ground.jpg") center center / cover no-repeat; }
}
img { max-width: 100%; height: auto; }
a { color: var(--brass-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -.014em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
small { font-size: .84rem; }
code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* A feed's name — "Robinhood AAPL / USD" — is wider than a 375 px card, and an
   unbroken run painted past the card's edge is text on the photograph: it
   measured 2.26:1 there while reading fine inside the card. */
p, li, .mono, .note, .tiny { overflow-wrap: break-word; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }

/* ---- layout ------------------------------------------------------------ */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 780px); margin-inline: auto; }
.band { padding: clamp(2.8rem, 6.5vw, 5.5rem) 0; background: var(--band-1); }
.band + .band { border-top: 1px solid rgba(250, 249, 245, .16); }
.band-2 { background: var(--band-2); }
.band-deep { background: var(--band-deep); color: #eaf0f7; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep a { color: var(--brass-lift); }
.row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* ---- surfaces ---------------------------------------------------------- */
.card, .sheet {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow); backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.card { padding: 1.15rem 1.25rem; }
.sheet { padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.card-quiet { background: var(--surface-2); box-shadow: none; }
.eyebrow {
  font: 500 .72rem/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .55rem;
}
.lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-2); }
.muted { color: var(--ink-3); }
.tiny { font-size: .8rem; line-height: 1.5; }

/* ---- controls ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
  padding: .62rem 1.15rem; border-radius: 99px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); font: 500 .95rem/1 var(--sans);
  cursor: pointer; text-decoration: none; transition: transform .08s ease, background .15s ease;
}
.btn:hover { background: #0c1420; color: #fff; transform: translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-brass { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn-brass:hover { background: var(--brass-ink); border-color: var(--brass-ink); }
.btn-ghost { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.btn-sm { padding: .42rem .85rem; font-size: .87rem; }
.btn-block { width: 100%; padding: .85rem 1.2rem; font-size: 1rem; }

input[type="text"], input[type="number"], select {
  font: 500 1rem/1.2 var(--mono); color: var(--ink); background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line); border-radius: 10px; padding: .62rem .7rem; width: 100%;
}
input:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brass); outline-offset: 2px;
}
label { display: block; font: 500 .78rem/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .35rem; }
input[type="range"] { width: 100%; accent-color: var(--brass); }

.seg { display: inline-flex; background: rgba(255, 255, 255, .78); border: 1px solid var(--line); border-radius: 99px; padding: 3px; gap: 2px; }
.seg button {
  border: 0; background: none; font: 500 .88rem/1 var(--sans); color: var(--ink-2);
  padding: .45rem .9rem; border-radius: 99px; cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---- the two prices ---------------------------------------------------- */
.under { color: var(--under-ink); }
.over { color: var(--over-ink); }
.gap-pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .5rem; border-radius: 99px;
  font: 500 .82rem/1.3 var(--mono); font-variant-numeric: tabular-nums;
}
/* A pill is the surface its own text sits on, so it has to be nearly opaque:
   at 13px on a thin table surface with the photograph showing through, a 12%
   tint measured 3.98:1. */
.gap-pill.under { background: rgba(228, 243, 236, .94); }
.gap-pill.over { background: rgba(250, 233, 228, .94); }
.gap-pill.flat { background: rgba(238, 240, 243, .94); color: var(--ink-2); }

/* ---- tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; border-radius: var(--r); background: var(--surface-3); box-shadow: var(--shadow); border: 1px solid var(--line-2); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: right; padding: .62rem .75rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: inherit; }
thead th {
  font: 500 .72rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); background: var(--head-wash); border-bottom: 1px solid var(--line); cursor: pointer;
}
thead th[aria-sort] { color: var(--ink); }
tbody tr:hover { background: rgba(255, 255, 255, .5); }
tbody tr[aria-selected="true"] { background: rgba(154, 106, 30, .10); }
tbody tr:last-child td { border-bottom: 0; }
td .sym { font: 500 1rem/1.2 var(--sans); }
td .co { display: block; font-size: .76rem; color: var(--ink-3); }

/* ---- nav --------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 249, 245, .74); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--line-2); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .62rem 0; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
.brand b { font: 500 1.5rem/1 var(--serif); letter-spacing: -.015em; }
.brand [data-mark] { width: 26px; height: 26px; display: block; }
.brand [data-mark] svg { width: 100%; height: 100%; display: block; }
.nav nav { display: flex; align-items: center; gap: .35rem; }
.nav nav a:not(.btn) { color: var(--ink-2); text-decoration: none; font: 500 .93rem/1 var(--sans); padding: .5rem .7rem; border-radius: 8px; }
.nav nav a:not(.btn):hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.x-link svg { width: 16px; height: 16px; display: block; }
.nav .btn { color: var(--paper); }          /* the nav's link colour must not repaint the button */
.nav .btn-ghost { color: var(--ink); }

/* ---- footer ------------------------------------------------------------
   Light, like every other surface on the site. A near-opaque dark band across
   the foot of the page measured 54.7% flat on the last frame — the reference's
   last frame is 1.7% — and the darker it went to keep its small print legible,
   the flatter it read. A pale surface solves both at once. */
.foot { background: var(--surface-2); color: var(--ink-2); padding: 2.6rem 0 3rem; border-top: 1px solid var(--line-2); backdrop-filter: blur(10px) saturate(1.06); -webkit-backdrop-filter: blur(10px) saturate(1.06); }
.foot a { color: var(--brass-ink); }
.foot h4 { color: var(--ink); font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin: .3rem 0; font-size: .9rem; }

/* ---- app --------------------------------------------------------------- */
.app-head { padding: 1.1rem 0 0; }
.tabs { display: flex; gap: .2rem; flex-wrap: wrap; margin: 0 0 1.1rem; background: rgba(250, 249, 245, .80); border: 1px solid var(--line-2); border-radius: 99px; padding: 4px; width: fit-content; }
.tabs button { border: 0; background: none; cursor: pointer; padding: .5rem 1.05rem; border-radius: 99px; font: 500 .95rem/1 var(--sans); color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.panel[hidden] { display: none; }
.split { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .9fr); align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }

.stat { display: grid; gap: .1rem; }
.stat b { font: 500 1.55rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.stat span { font-size: .78rem; color: var(--ink-3); }

.tape-strip { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .7rem 1rem; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); margin: 0 0 1.1rem; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ink-3); flex: none; }
.dot.live { background: var(--under); box-shadow: 0 0 0 4px rgba(28, 107, 79, .18); }
.dot.shut { background: var(--brass); box-shadow: 0 0 0 4px rgba(154, 106, 30, .16); }

.spark { display: block; width: 100%; height: 54px; }
.note { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
.err { color: var(--over-ink); font-size: .88rem; }
.ok { color: var(--under-ink); font-size: .88rem; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .9rem; border-bottom: 1px dashed var(--line-2); }
.kv:last-child { border-bottom: 0; }
.kv b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.venue-tag { display: inline-block; padding: .1rem .42rem; border-radius: 5px; background: rgba(238, 240, 243, .92); font: 500 .74rem/1.5 var(--mono); color: var(--ink-2); }
.pill-thin { display: inline-block; padding: .1rem .42rem; border-radius: 5px; background: rgba(247, 236, 215, .95); font: 500 .72rem/1.5 var(--sans); color: var(--brass-ink); }

/* A modal for the wallet steps, so a signature is never a surprise. */
.scrim { position: fixed; inset: 0; background: rgba(12, 18, 28, .55); display: grid; place-items: center; z-index: 100; padding: 1.2rem; }
.scrim[hidden] { display: none; }
.modal { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.6rem; width: min(100%, 460px); }
.steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.steps li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-size: .93rem; color: var(--ink-3); }
.steps li[data-state="doing"] { color: var(--ink); font-weight: 500; }
.steps li[data-state="done"] { color: var(--under-ink); }
.steps li[data-state="failed"] { color: var(--over-ink); }

@media (max-width: 700px) {
  .nav nav a:not(.btn):not(.x-link) { display: none; }
  body { font-size: 16px; }
}

/* ---- narrow screens ----------------------------------------------------
   A seven-column table on a 375 px screen shows the reader one column: the
   name, which is the one thing they already knew. The venue columns are the
   ones worth losing — the trade panel names the venue it will actually use —
   so the three prices that matter survive at every width. */
@media (max-width: 760px) {
  table { font-size: .86rem; }
  th, td { padding: .55rem .45rem; }
  #board-head th:nth-child(n+5), #board-body td:nth-child(n+5) { display: none; }
  td .co { display: none; }
  .tape-strip { gap: .45rem .6rem; padding: .6rem .75rem; }
  .tape-strip .muted:nth-of-type(1), .tape-strip .muted:nth-of-type(2) { display: none; }  /* the separators */
  .tape-strip > span[style] { display: none; }                                             /* the spacer */
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding: .5rem .6rem; }
  .grid.g3 { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .sheet { padding: 1.2rem; }
}

/* ---- the board at desktop widths ---------------------------------------
   At 1280px the seven-column table was 60px wider than its grid column, so
   the gap — the one number the site exists to show — scrolled out of sight
   behind the detail panel. The table gets the room, the panel sticks to the
   top so it stays beside whatever row is being read, and the venue-comparison
   column is the one that goes when there is not enough width for all seven. */
.panel[data-tab="board"] .split { grid-template-columns: minmax(0, 1.75fr) minmax(300px, .78fr); }
#detail { position: sticky; top: 74px; }
td .co { display: block; color: var(--ink-2); max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dropped in order of what a reader can act on least: the venue comparison
   first, then the round-trip cost, then which venue it is. The three prices
   and the gap survive to the narrowest screen. */
@media (max-width: 1400px) { #board-head th:nth-child(6), #board-body td:nth-child(6) { display: none; } }
@media (max-width: 1120px) { #board-head th:nth-child(7), #board-body td:nth-child(7) { display: none; } }
@media (max-width: 1000px) { #board-head th:nth-child(5), #board-body td:nth-child(5) { display: none; } }