/* ============================================================
   Alpha Finance v2: the Terminal shell
   Loaded after alpha.css, article.css and the page skin. Owns the app
   chrome (rail, top bar, palette, docs block) and re-fits the page skins
   to a full-width instrument surface. Every override is scoped to
   body.term so the marketing site and the blog never see it.
   ============================================================ */

:root {
  --rail-w: 236px;
  --top-h: 46px;
  --tape-h: 32px;
  --docs-w: 760px;
}

body.term {
  overflow-x: hidden;
}

/* ---------- the tape: a market strip, not a news ticker ---------- */

body.term .tape {
  height: var(--tape-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.tape-lead, .tape-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
}
.tape-lead { border-right: 1px solid var(--line); }
.tape-lead b { font-weight: 500; color: var(--text-2); }
.tape-end { border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
body.term .tape-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
body.term .tk {
  gap: 6px;
  height: var(--tape-h);
  padding: 0 14px;
  border-left: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
}
body.term .tk + .tk { box-shadow: -1px 0 0 var(--line); }
.tk-ic { width: 13px; height: 13px; border-radius: 50%; }
body.term .tk b { font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
body.term .tk .px { font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
body.term .tk .ch {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--panel);
}
body.term .tk.up .ch { color: var(--pos-text); background: color-mix(in srgb, var(--pos) 14%, transparent); }
body.term .tk.dn .ch { color: var(--neg-text); background: color-mix(in srgb, var(--neg) 14%, transparent); }
body.term .tk .ch .ar { display: none; }

/* ---------- frame ---------- */

.term-app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--tape-h));
  transition: grid-template-columns 0.18s ease;
}
body.rail-closed .term-app { grid-template-columns: 0 minmax(0, 1fr); }

/* ---------- rail ---------- */

.term-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: var(--rail-w);
  border-right: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  z-index: 40;
}
body.rail-closed .term-rail { width: 0; border-right: 0; }

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--top-h);
  padding: 0 16px;
  flex-shrink: 0;
}
.rail-brand .logo-mark { width: 22px; height: 22px; }
.rail-brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.rail-brand-t b { font-family: var(--display); font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.rail-brand-t small { margin-top: 2px; font-size: 10.5px; color: var(--muted); }

.rail-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 12px 4px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, color 0.15s;
}
.rail-search:hover { border-color: var(--line-2); color: var(--text-2); }
.rail-search svg { width: 13px; height: 13px; flex-shrink: 0; }
.rail-search kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px;
}

.rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 12px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

.rail-group { margin-top: 8px; }
.rail-group:first-child { margin-top: 2px; }
.rail-h {
  padding: 8px 10px 4px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.rail-item:hover { background: var(--panel); color: var(--text); }
.rail-item.on { background: var(--panel-2); color: var(--text); }
.rail-item .ic {
  display: flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--muted);
}
.rail-item.on .ic { color: var(--lime); }
.rail-item .ic svg { width: 100%; height: 100%; stroke-width: 1.75; }
.rail-item .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-beta { margin-left: 6px; padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--heat) 55%, transparent); border-radius: 3px; font-family: var(--mono); font-size: 8px; font-style: normal; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--heat); vertical-align: 1px; }
.rail-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
}
.rail-foot a, .rail-foot button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 27px;
  padding: 0 10px;
  border-radius: 6px;
  border: 0;
  background: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.rail-foot a:hover, .rail-foot button:hover { color: var(--text); background: var(--panel); }
.rail-foot svg { width: 13px; height: 13px; }

/* ---------- top bar ---------- */

.term-main { min-width: 0; display: flex; flex-direction: column; }

.term-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--top-h);
  padding: 0 14px 0 10px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.term-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.term-toggle:hover { color: var(--text); background: var(--panel); }
.term-toggle svg { width: 15px; height: 15px; }

/* the breadcrumb: one bright word, the current view; everything before it
   is wayfinding in the muted tone, links or not */
.term-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.term-crumb a, .term-crumb .grp { color: var(--muted); }
.term-crumb a:hover { color: var(--text); }
.term-crumb .sep { color: var(--line-2); }
.term-crumb .here { color: var(--text); font-weight: 600; }

.term-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.term-top-actions a, .term-top-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.term-top-actions a:hover, .term-top-actions button:hover { color: var(--text); background: var(--panel); }
.term-top-actions button svg { width: 13px; height: 13px; color: var(--muted); }
.term-top-actions button kbd {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 4px;
}
.term-top-actions .btn {
  margin-left: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.term-top-actions .btn:hover { background: var(--panel-2); border-color: var(--muted); }
.term-top-actions .btn svg { width: 13px; height: 13px; color: var(--muted); }
.term-top-actions .btn:hover svg { color: var(--lime); }
.term-top-actions .btn .lbl { display: inline; }
/* the account button: Sign in in lime until the reader is in, then their face */
.term-top-actions a.term-acct { margin-left: 6px; border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--line-2)); color: var(--lime); font-weight: 600; }
.term-top-actions a.term-acct:hover { background: color-mix(in srgb, var(--lime) 10%, transparent); color: var(--lime); }
.term-top-actions a.term-acct.is-in { padding-left: 5px; border-color: var(--line-2); color: var(--text); }
.term-top-actions a.term-acct.is-in:hover { background: var(--panel); border-color: var(--muted); }

/* ---------- report a bug ----------
   The same shell as the palette: one dialog pattern on this chrome, not two. */

.term-bug {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
  background: rgba(4, 5, 7, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
}
.term-bug[hidden] { display: none; }
.bugbox {
  width: min(520px, 100%);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.bug-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 14px 13px;
  border-bottom: 1px solid var(--line);
}
.bug-head .ic { display: flex; width: 17px; height: 17px; margin-top: 1px; color: var(--lime); flex-shrink: 0; }
.bug-head .ic svg { width: 100%; height: 100%; }
.bug-t { min-width: 0; }
.bug-t h2 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }
.bug-t p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.bug-x {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.bug-x:hover { color: var(--text); background: var(--panel-2); }
.bug-x svg { width: 15px; height: 15px; }

.bug-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.bug-l {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.bug-l small { font-family: var(--sans); font-size: 10px; letter-spacing: 0; text-transform: none; color: var(--faint); }
.bug-f textarea, .bug-f input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  resize: vertical;
}
.bug-f textarea::placeholder, .bug-f input::placeholder { color: var(--faint); }
.bug-f textarea:focus, .bug-f input:focus { border-color: var(--muted); }
.bug-f.is-bad textarea { border-color: var(--heat); }

.bug-ctx { border-top: 1px solid var(--line); padding-top: 12px; }
.bug-ctx dl { margin: 7px 0 0; display: flex; flex-direction: column; gap: 4px; }
.bug-ctx dl > div { display: flex; gap: 10px; font-size: 11.5px; min-width: 0; }
.bug-ctx dt { width: 58px; flex-shrink: 0; color: var(--faint); }
.bug-ctx dd {
  margin: 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bug-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.bug-note { margin: 0; margin-right: auto; font-size: 11px; color: var(--muted); }
.bug-note a { color: var(--text-2); }
.bug-note a:hover { color: var(--lime); }
.bug-b {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.bug-b:hover { color: var(--text); border-color: var(--muted); }
.bug-b.is-go { border-color: var(--lime); color: var(--lime); }
.bug-b.is-go:hover { background: color-mix(in srgb, var(--lime) 12%, transparent); }

/* ---------- the view ---------- */

.term-view { flex: 1; }
/* the top bar stays put, so anything jumped to stops below it rather than
   under it: the chart a tape quote opens, and the in-page links */
body.term .term-view .section[id], body.term .term-docs[id] { scroll-margin-top: calc(var(--top-h) + 12px); }

/* the page skins were written for a 1280px centred column under a marketing
   nav. In the terminal the column is the whole pane. */
body.term .wrap { max-width: none; padding: 0 22px; }
body.term .section { padding: 22px 0 24px; }
body.term .section + .section { padding-top: 0; }
/* the v1 pages headed each instrument like an article section. In the pane a
   heading is a panel label: small, sentence-case, with its note beside it. */
body.term .section-head {
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
}
body.term .section-head h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.term .section-head h2 small {
  display: inline;
  margin-left: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
body.term .section-head .more {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
body.term .section-head .more:hover { color: var(--lime); text-decoration: none; }

/* every page hero becomes the view header: same markup, a quarter of the
   height, no gradient, the breadcrumb already lives in the top bar */
/* the view header's top space lives on the section, so every view starts
   the same distance below the top bar whatever its skin's inner wrapper does */
body.term .vhero {
  padding-top: 30px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: visible;
}
body.term .vhero .crumb { display: none; }
body.term .vhero h1 {
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
body.term .vhero .dek {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
  /* house rule: two lines, never more; the copy is written to fit and
     tools/build.py warns when it does not */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.term .vhero .feed { margin-top: 10px; margin-bottom: 0; }
/* contains, not ends-with: a header that carries a second class (pm-hero) was
   slipping past the reset and keeping its own 26px on top */
body.term .vhero [class*="hero-inner"] { padding: 0 0 24px; max-width: none; }
/* where a tab strip closes the header, the strip is the bottom edge */
body.term .vhero:has(.assetrail) [class*="hero-inner"] { padding-bottom: 6px; }
body.term .vhero.liqshero { padding-bottom: 24px; }
body.term .vhero.liqshero .opthero-main { padding-bottom: 0; }
body.term .vhero [class$="hero-side"] { display: block; padding: 0 0 14px; }
/* the side column is bounded, never sized by its content: a stat tile's
   caption at max-content width would otherwise take the whole row and
   squeeze the headline into a one-word column */
body.term .vhero [class$="hero-grid"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 54%);
  gap: 12px 28px;
  align-items: start;
}
/* the stat tiles beside the headline: a row of quiet cards, equal in
   height, the value the one bright thing on each, the source note pinned
   to the bottom so the row lines up. One treatment for every view. */
body.term .vhero [class$="stats"],
body.term .vhero .fnhero-side,
body.term .vhero .opthero-side {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}
body.term .vhero .opthero-side { padding: 0 0 14px; }
body.term .vhero [class$="stat"],
body.term .vhero .fnstat,
body.term .opthero-side .lcard {
  flex: 1 1 0;
  min-width: 124px;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 60%, var(--panel)), var(--panel));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  transition: border-color 0.15s;
}
body.term .vhero [class$="stat"]:hover,
body.term .vhero .fnstat:hover,
body.term .opthero-side .lcard:hover { border-color: var(--line-2); }
body.term .vhero [class$="stat-k"], body.term .vhero .fnstat-k, body.term .opthero-side .lcard .k {
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--muted);
}
body.term .opthero-side .lcard .k .ic { display: none; }
body.term .vhero [class$="stat-row"] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 9px; }
/* the icon sits in a small tinted chip: the coin's colour where it has one, the desk's lime otherwise */
body.term .vhero [class$="stat-ic"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(200, 255, 80, 0.08);
  color: var(--lime);
  flex-shrink: 0;
}
body.term .vhero [class$="stat-ic"].is-coin { background: color-mix(in srgb, var(--cb) 14%, transparent); color: var(--cb); }
/* the value may carry a state class ("trstat-v up", "nwsstat-v bear"), so it
   is matched on the stem, not the end of the attribute */
body.term .vhero [class*="stat-v"], body.term .vhero .fnstat-v, body.term .opthero-side .lcard .v {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
/* a value straight under its label keeps the same gap an icon row gives it */
body.term .vhero .fnstat-v, body.term .vhero [class$="stat-k"] + [class*="stat-v"], body.term .opthero-side .lcard .v { margin-top: 9px; }
body.term .vhero [class$="stat-c"] { font-family: var(--mono); font-size: 10.5px; }
body.term .vhero [class$="stat-s"], body.term .vhero .fnstat-s, body.term .opthero-side .lcard .split {
  margin-top: auto;
  padding-top: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--faint);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.term .opthero-side .lcard .split { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px 12px; font-size: 10px; }
body.term .opthero-side .lcard .split > span { white-space: nowrap; }
body.term .liqshero .ltabs {
  display: inline-flex;
  gap: 0;
  margin: 12px 0 0 !important;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
body.term .liqshero .ltabs button {
  padding: 5px 12px;
  border: 0;
  border-radius: 5px;
  background: none;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  cursor: pointer;
}
body.term .liqshero .ltabs button:hover { color: var(--text); }
body.term .liqshero .ltabs button.on,
body.term .liqshero .ltabs button[aria-pressed="true"] {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* the per-asset rail on the hero's bottom edge is the view's tab strip:
   sentence-case tabs in the UI face, the ticker as a small mono aside */
body.term .assetrail { gap: 0; margin: 12px 0 0; }
body.term .assetrail > a, body.term .assetrail > span {
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}
body.term .assetrail > a:hover { color: var(--text); }
body.term .assetrail > .on { color: var(--text); border-bottom-color: var(--lime); }
body.term .assetrail .soon { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--muted); }
body.term .assetrail .coin { opacity: 0.75; }
/* the liquidations overview links to the per-coin maps from its notes and
   the rail; a tab strip that navigates away is not a tab strip */
body.term.liqs .vhero .assetrail { display: none; }

/* one segmented control everywhere: the v1 skins each drew their own */
body.term .seg, body.term .ltabs {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
}
body.term .seg button, body.term .ltabs button {
  border: 0;
  border-radius: 4px;
  padding: 4px 9px;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  color: var(--muted);
  cursor: pointer;
}
body.term .seg button:hover, body.term .ltabs button:hover { color: var(--text); background: none; }
body.term .seg button[aria-pressed="true"], body.term .ltabs button.on, body.term .ltabs button[aria-pressed="true"] {
  background: var(--panel-2);
  color: var(--text);
}
body.term .pick { display: flex; align-items: center; gap: 8px; }
body.term .pick-l {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
body.term .pick select, body.term select.pick-sel, body.term #venue {
  height: 28px;
  padding: 0 24px 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b727c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 11px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
}
/* two panels side by side share one height; the chart on the right fills it */
body.term .liq-grid { align-items: stretch; }
body.term .liq-grid .lpanel { display: flex; flex-direction: column; }
body.term .liq-grid .lpanel-body { flex: 1; min-height: 0; }
body.term .liq-grid .lpanel-foot { margin-top: auto; }
/* the liquidations totals board: no ornament icons, tighter cells */
body.term .liq-cards .lcard { padding: 14px 18px 15px; }
body.term .liq-cards .lcard .k .ic { display: none; }
body.term .liq-cards .lcard .v { font-size: 21px; margin-bottom: 7px; }

/* the docs block: the page's notes, beneath the instrument. One reading
   column, a compact header with the jump links, no boxes. The v1 article
   rail (sticky contents box and subscribe card) is removed by the build. */
.term-docs {
  margin-top: 24px;
  padding: 0 22px 48px;
  border-top: 1px solid var(--line);
}
.term-docs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--line);
  max-width: 1328px;   /* prose + gap + rail, so the rule ends with the rail */
}
.term-docs-head h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.term-docs-head .rev {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
}
/* the trust line under the head: method, corrections, and the advice line,
   on every dashboard in the same words */
.term-docs-head .note {
  flex-basis: 100%;
  min-width: 0;   /* the links and the advice line wrap between each other; they never widen the page */
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}
.term-docs-head .note a {
  margin-right: 10px;
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.term-docs-head .note a:hover { color: var(--text); text-decoration-color: currentColor; }
.term-docs-head .note-adv { white-space: nowrap; }
/* the v1 guide sections carry an inline padding-top:0, so the breathing
   room after the header rule goes on the grid itself */
body.term .term-docs .section { padding: 0; }
body.term .term-docs .wrap { padding: 0; max-width: none; margin: 0; }
/* the prose fills the pane, the contents rail keeps it company on the right */
body.term .term-docs .guide-grid {
  display: grid;
  margin-top: 40px;
  grid-template-columns: minmax(0, 1040px) 240px;
  justify-content: start;
  gap: 48px;
  align-items: start;
}
body.term .term-docs .prose { max-width: none; }
body.term .term-docs .rail { position: sticky; top: calc(var(--top-h) + 16px); }
body.term .term-docs .rail-box { padding: 16px 18px; }
body.term .term-docs .faq { max-width: 1040px; }
body.term .term-docs .prose h2 {
  font-size: 17px;
  letter-spacing: -0.015em;
  margin: 32px 0 10px;
  padding-top: 0;
}
body.term .term-docs .prose h2:first-child { margin-top: 0; }
body.term .term-docs .prose h3 { font-size: 14.5px; margin: 20px 0 8px; }
body.term .term-docs .prose p, body.term .term-docs .prose li { font-size: 14px; line-height: 1.65; margin-bottom: 11px; }
body.term .term-docs .prose ul li::before { top: 9px; width: 4px; height: 4px; }
body.term .term-docs .keyfact { padding: 12px 14px; margin: 16px 0; }
body.term .term-docs .keyfact p { font-size: 13.5px; margin: 0; }
body.term .term-docs .section-head { margin: 28px 0 8px; }
body.term .term-docs .section-head h2 { font-size: 17px; letter-spacing: -0.015em; }
body.term .term-docs .faq summary { font-size: 14px; }
body.term .term-docs .faq p { font-size: 13.5px; }

/* ---------- foot ---------- */

.term-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.term-foot a { color: var(--muted); }
.term-foot a:hover { color: var(--text); }
.term-foot .r { margin-left: auto; display: flex; gap: 16px; }

/* ---------- terminal home (overview) ---------- */

.ov-head { padding: 30px 22px 0; }
.ov-head h1 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ov-head .dek { margin-top: 5px; font-size: 13px; color: var(--text-2); }
.ov-head kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  padding: 1px 5px;
}
body.term .ov .desk-board { margin: 0 22px; border: 0; background: none; padding: 0; }
body.term .ov .section { padding: 18px 0 24px; }
body.term .ov .desk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ov-all { padding: 0 22px; }
/* the options panel's rows: side, strike, expiry */
.opt-t {
  display: inline-block;
  min-width: 30px;
  margin-right: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opt-t.is-c { color: var(--pos-text); }
.opt-t.is-p { color: var(--neg-text); }
.ov-all .inst-group { margin-top: 18px; }

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

@media (max-width: 1180px) {
  body.term .ov .desk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .term-app { grid-template-columns: minmax(0, 1fr); }
  body.rail-closed .term-app { grid-template-columns: minmax(0, 1fr); }
  .term-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
  }
  body.rail-open .term-rail { transform: none; }
  body.rail-closed .term-rail { width: min(300px, 86vw); }
  .term-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.5);
  }
  .term-scrim[hidden] { display: none; }
  body.term .wrap { padding: 0 14px; }
  .term-docs { padding: 0 14px 32px; }
  body.term .term-docs .guide-grid { grid-template-columns: minmax(0, 1fr); }
  body.term .term-docs .rail { display: none; }
  body.term .vhero [class$="hero-grid"] { grid-template-columns: minmax(0, 1fr); }
  body.term .ov .desk-grid { grid-template-columns: minmax(0, 1fr); }
  body.term .ov .desk-board { margin: 0 14px; }
  .ov-all { padding: 0 14px; }
  .term-top-actions a:not(.btn) { display: none; }
  .term-top-actions a.term-acct { display: inline-flex; padding: 0 9px; }
  .term-top-actions a.term-acct.is-in { padding: 0 4px; }
  .term-top-actions a.term-acct.is-in .lbl { display: none; }
  .term-top-actions button span, .term-top-actions button kbd { display: none; }
  /* the pill keeps its glyph and drops the word, like the search button beside it */
  .term-top-actions .btn { margin-left: 4px; padding: 0 9px; }
  .term-top-actions .btn .lbl { display: none; }
  .term-bug { padding: 0; align-items: stretch; }
  .bugbox { width: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; }
  .bug-body { flex: 1; overflow-y: auto; }
  .bug-note { display: none; }
  .bug-b { flex: 1; height: 38px; }
  .term-crumb { min-width: 0; flex: 1; }
  .term-crumb .here { overflow: hidden; text-overflow: ellipsis; }
  .term-foot .r { margin-left: 0; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
}

/* ---------- the asset picker ----------
   Where a view has many assets (tools/build.py decides), the strip of tabs
   is a picker instead: the asset on screen on a button that opens a
   searchable list of all of them, one-tap chips for the first few beside it,
   and a chip that opens the rest. Adding an asset lengthens the list, never
   the page. */
.assetnav { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; margin: 10px 0 0; padding-bottom: 14px; }
.assetnav-pick { position: relative; flex: none; margin-right: 4px; }
.assetnav-btn {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px 0 7px;
  border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--lime) 7%, transparent); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.assetnav-btn:hover, .assetnav-btn[aria-expanded="true"] { border-color: var(--lime); background: color-mix(in srgb, var(--lime) 11%, transparent); }
/* the picker on a page that is not one asset's own: a way in to the maps,
   not a statement about where you are, so it is quiet rather than lime */
.assetnav-btn.is-all { border-color: var(--line-2); background: none; }
.assetnav-btn.is-all:hover, .assetnav-btn.is-all[aria-expanded="true"] { border-color: var(--muted); background: var(--panel-2); }
.assetnav-btn b { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.assetnav-btn small, .assetnav a small { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--muted); }
.assetnav-btn svg { width: 12px; height: 12px; margin-left: 1px; color: var(--text-2); transition: transform 0.15s; }
.assetnav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.assetnav img { flex: none; width: 16px; height: 16px; border-radius: 50%; }
.assetnav-menu {
  position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: 248px; max-width: calc(100vw - 28px);
  border: 1px solid var(--line-2); border-radius: 8px; background: #14171c; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); overflow: hidden;
}
.assetnav-menu[hidden] { display: none; }
.assetnav-q { display: flex; align-items: center; gap: 7px; padding: 0 10px; border-bottom: 1px solid var(--line); color: var(--muted); }
.assetnav-q svg { width: 12px; height: 12px; flex: none; }
.assetnav-q input { flex: 1; min-width: 0; height: 34px; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 12.5px; }
.assetnav-q input::placeholder { color: var(--faint); }
.assetnav-q input::-webkit-search-cancel-button { display: none; }
.assetnav-menu ul { list-style: none; margin: 0; padding: 4px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.assetnav-menu ul::-webkit-scrollbar { width: 6px; }
.assetnav-menu ul::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line-2); }
.assetnav-menu ul::-webkit-scrollbar-track { background: transparent; }
.assetnav-menu li[hidden] { display: none; }
.assetnav-menu a { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 5px; color: var(--text-2); text-decoration: none; font-size: 12.5px; }
.assetnav-menu a b { font-weight: 500; }
.assetnav-menu a small { margin-left: auto; }
.assetnav-menu a:hover, .assetnav-menu a:focus-visible { background: var(--panel-2); color: var(--text); outline: 0; }
.assetnav-menu a.on { color: var(--text); background: color-mix(in srgb, var(--lime) 8%, transparent); }
.assetnav-menu a.on small { color: var(--lime); }
.assetnav-none { margin: 0; padding: 12px; font-size: 12px; color: var(--muted); }
.assetnav-none[hidden] { display: none; }
.assetnav-chips { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.assetnav-chips::-webkit-scrollbar { display: none; }
.assetnav-chips a, .assetnav-more {
  display: flex; align-items: center; flex: none; gap: 6px; height: 32px; padding: 0 10px 0 8px;
  border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text-2); font: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.assetnav-chips a b { font-weight: 500; }
.assetnav-chips a small { display: none; }   /* the mark and the name are enough beside the picker */
.assetnav-chips a:hover, .assetnav-more:hover { color: var(--text); border-color: var(--line); background: var(--panel); }
.assetnav-more { padding: 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); }
body.term .vhero:has(.assetnav) [class*="hero-inner"] { padding-bottom: 6px; }
body.term .vhero:has(.assetnav) { overflow: visible; position: relative; z-index: 5; }
@media (max-width: 640px) {
  .assetnav { flex-wrap: wrap; gap: 6px; }
  .assetnav-pick { width: 100%; margin-right: 0; }
  .assetnav-btn { width: 100%; height: 38px; }
  .assetnav-chips a, .assetnav-more { height: 34px; border-color: var(--line); }
  .assetnav-btn svg { margin-left: auto; }
  .assetnav-menu { width: 100%; }
  .assetnav-chips { flex-basis: 100%; }
  .assetnav-chips a small { display: none; }
}

/* ============================================================
   Phones. One block for every view, because every view is built from the
   same parts: the view header and its stat tiles, panels with a row of
   controls, a chart, a wide table, the guide underneath. A view's own
   stylesheet only adds what is particular to it.
   ============================================================ */
@media (max-width: 640px) {
  body.term .wrap { padding: 0 12px; }
  body.term .section { padding-top: 14px; padding-bottom: 14px; }
  body.term .section-head { margin-bottom: 10px; }
  body.term .section-head h2 { font-size: 16px; }

  /* the view header: the whole subheading (a cut-off sentence reads worse
     than a third line), and a status line that wraps without stray dots */
  body.term .vhero { padding-top: 18px; }
  body.term .vhero h1 { font-size: 20px; }
  body.term .vhero .dek { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 13px; line-height: 1.5; color: var(--text-2); }
  body.term .vhero .feed { gap: 4px 14px; font-size: 12px; }
  body.term .vhero .feed > span + span::before { content: none; }
  body.term .vhero [class*="hero-inner"] { padding-bottom: 14px; }

  /* stat tiles: always two to a row, compact, captions held to two lines */
  body.term .vhero [class$="stats"],
  body.term .vhero .fnhero-side,
  body.term .vhero .bchero-side,
  body.term .vhero .opthero-side,
  body.term .vhero .liq-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }
  /* an odd tile out takes the full row rather than sit beside a hole */
  body.term .vhero [class$="stats"] > :last-child:nth-child(odd),
  body.term .vhero .fnhero-side > :last-child:nth-child(odd),
  body.term .vhero .bchero-side > :last-child:nth-child(odd),
  body.term .vhero .opthero-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.term .liq-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.term .liq-cards .lcard { padding: 12px 12px; }
  body.term .liq-cards .lcard .v { font-size: 19px; }
  body.term .liq-cards .lcard .split { flex-wrap: wrap; gap: 2px 10px; }
  body.term .vhero [class$="stat"],
  body.term .vhero .fnstat,
  body.term .opthero-side .lcard { min-width: 0; padding: 9px 10px; }
  body.term .vhero [class$="stat-v"], body.term .vhero .fnstat-v, body.term .opthero-side .lcard .v { font-size: 18px; }
  body.term .vhero [class$="stat-s"], body.term .vhero .fnstat-s {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* panel heads: title first, then each control on its own full-width row,
     its label above it, its buttons sharing the row equally and tall enough
     to hit with a thumb */
  body.term [class*="-head"] .picks,
  body.term [class*="-head"] .pick,
  body.term .fr-bar .pick { flex-basis: 100%; width: 100%; margin-left: 0; }
  body.term .pick { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
  body.term .picks { display: flex; flex-direction: column; gap: 8px; }
  body.term .pick-l { display: block; flex: none; font-size: 9.5px; }
  body.term main .seg { display: flex; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  body.term main .seg::-webkit-scrollbar { display: none; }
  body.term main .seg button { flex: 0 0 auto; min-height: 34px; padding-left: 11px; padding-right: 11px; white-space: nowrap; }
  body.term main select { min-height: 36px; max-width: 100%; }
  body.term main input[type="search"], body.term main input[type="text"], body.term main input[type="number"], body.term main textarea { font-family: var(--sans); font-size: 16px; letter-spacing: 0; }   /* under 16px, iOS zooms the page on focus */
  body.term .tbl-pager { justify-content: space-between; }
  body.term .tbl-pager .seg button { min-width: 44px; min-height: 36px; }

  /* search and chip bars over tables */
  body.term .fr-bar { gap: 8px; }
  body.term .fr-bar .fr-search { flex: 1 1 100%; }
  body.term .fr-bar .fr-count { margin-left: auto; }
  body.term .fr-bar select { flex: 1 1 calc(50% - 4px); min-width: 0; }   /* filters pair up, two to a row */

  /* wide tables scroll sideways under a name column that stays put
     (js/terminal.js marks the column); the right edge fades to say so */
  body.term .m-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  body.term table.m-sticky td, body.term table.m-sticky th { padding-left: 10px; padding-right: 10px; }

  /* charts and maps: shorter, so one fits a screen with its controls */
  body.term .rp-map { min-height: 300px; margin: 10px 10px 8px; }
  body.term .rp-ov { grid-template-columns: minmax(0, 1fr); }
  body.term .rp-side { grid-template-rows: none; }

  /* the slide-out menu: rows a thumb can hit */
  .term-rail .rail-item { min-height: 40px; }

  body.term main canvas { touch-action: pan-y; }   /* a sideways drag reads the chart, an up-and-down one scrolls the page */

  /* the hover readout, under a thumb: never wider than the screen */
  .tip { max-width: calc(100vw - 16px); white-space: normal; }
  .tip .tip-r, .tip .tip-h { white-space: nowrap; }

  /* the guide */
  body.term .term-docs .guide-grid { margin-top: 24px; }
  body.term .term-docs .prose h2 { font-size: 18px; }
  body.term .faq summary { padding-right: 28px; }
}