/* islands.css — THE ARCHIPELAGO.
 * ===========================================================================
 * SPECIFICITY IS NOT OPTIONAL IN THIS FILE. instrument.css:343 collapses four
 * axes across every element the app will ever render:
 *
 *   body *:not(svg):not(svg *) {
 *     font-family: var(--mono) !important; font-size: var(--t-sm) !important;
 *     font-weight: 400 !important; letter-spacing: normal !important;
 *     border-radius: 0 !important; box-shadow: none !important; }
 *
 * So every size, weight, radius and tracking below carries !important behind
 * an `html body` prefix. That is the house idiom (learn.css does the same for
 * the leaderboard), not a shortcut: a plain class at (0,1,0) loses to an
 * important declaration no matter how late it is declared.
 *
 * WHAT THE BLUNT LAYER DOES NOT RESET IS font-style, which is why every <i>
 * and <em> here is pinned to `normal` by hand. The same file records an italic
 * silently killed by a `font` shorthand; the reverse bug is a caption that
 * arrives in italics because nobody said otherwise.
 *
 * THE 900px TRAP IS THE LAYOUT CONSTRAINT. nav.css:129 turns the rail into a
 * fixed 208px sidebar at exactly 900px, so the content box gets NARROWER as
 * the viewport gets WIDER: measured 764px at viewport 885 and 570px at 900. A
 * grid with hard floors summing past ~560px is silently sliced there and
 * nothing in the DOM reports it. Two rules follow and both are load-bearing:
 *
 *   1. Every track floor is min(100%, Npx), so a track can always collapse to
 *      the container instead of overflowing it.
 *   2. The one element with a genuine minimum, the crossing table, carries its
 *      OWN overflow-x scroller, the way .vn-table, .chv-exps and .bk-tape do.
 *      main.stage is display:flex with overflow-y:auto, which forces
 *      overflow-x:auto and clips anything trying to break out of it.
 */

/* ── THE HEAD ──────────────────────────────────────────────────────────── */

html body .isl-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
html body .isl-hd .tl-h { margin: 0; }
html body .isl-sub { margin: 8px 0 16px; max-width: 74ch; }

html body .isl-wait {
  margin: 18px 0;
  color: var(--ink3);
  font-size: 12px !important;
}

/* ── THE STRIP. The fact, before any interaction, at every width ────────────
   Four figures. It is a <ul> and not a table for learn.css's reason: grid
   tracks here would invite someone to align it with the map below, and the two
   have nothing to do with each other. Three lines per item, because the third
   line is the DENOMINATOR and a zero without its denominator is a claim. */
/* ── A GRID WITH A DECLARED COLUMN COUNT, NOT A WRAPPING FLEX ROW ──────────
   The strip orphaned at every width it was measured at: five items wrapped
   4+1 at 1920 and left "2 of 19" alone on a row; cut to four items, a wrapping
   flex row still ran 3+1 at 1280. Content-sized flex items also spaced
   unevenly, so four figures that are four clauses of one sentence read as two
   pairs and a straggler.

   THE COLUMN COUNT IS 4, 2 OR 1 AND NEVER 3, because 3 is the only count that
   can orphan four items. An auto-fill or auto-fit track list cannot express
   that: it steps through every count on its way down, 3 included. So the
   counts are declared, and the breakpoints are MEASURED against the content
   box rather than guessed against the viewport.

   Content box by viewport on this build (the 900px trap, nav.css:129, is why
   this is not monotonic and why a round number cannot be trusted):
     390->300  480->390  560->465  620->520  768->657  885->764  899->777
     900->570  1000->662  1100->754  1280->920  1440->1070  1920->1138
   Four columns need 4*200 + 3*24 = 872px of content: first satisfied at
   1280 (920) and monotonic above 900, so 1260 is the floor with slack. Two
   columns need 2*200 + 24 = 424px: satisfied from 560 (465) upward, INCLUDING
   at 900 (570) on the far side of the trap. Re-measure before moving either. */
html body .isl-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
  margin: 0 0 20px;
  padding: 0 0 16px;
  list-style: none;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 560px) {
  html body .isl-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── THE FOUR-COLUMN RULE IS GONE, BECAUSE THE STRIP IS TWO ITEMS (2026-08-30)
   `repeat(4, minmax(0,1fr))` over two <li> does not centre or shrink them: it
   lays two items into the first two of four equal tracks and leaves half the
   row empty, so each figure sits in a 25% column with its caption wrapping
   inside it while 570px of the strip is blank. The count that can orphan two
   items is none, so the declared-count machinery above is no longer needed at
   all above 560px — two columns is both the maximum and the safe count.

   THE MEASUREMENT THAT STILL BINDS: two columns need 2*200 + 24 = 424px of
   content, satisfied from viewport 560 (465px of content) upward INCLUDING at
   900 (570px) on the far side of the rail trap. Unchanged from the note above,
   and it is the only breakpoint this element now has. */
@media (min-width: 1260px) {
  html body .isl-strip { gap: 16px 40px; }
}
html body .isl-strip li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html body .isl-strip b {
  font-size: 26px !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* NO FIGURE ON THE STRIP TAKES THE ACCENT. An earlier version accented the
   first item, which read as "this is the finding" and put the product's one
   emphasis colour on a number that turned out to be a tautology. The accent is
   spent on the map instead, where it marks a STRUCTURAL fact that cannot go
   stale: the one chain two venues share. */
html body .isl-strip span {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  color: var(--ink2);
}
html body .isl-strip i {
  font-style: normal;
  font-size: 11px !important;
  color: var(--ink3);
}

/* ── THE SEA. Grounds are bands, islands are cards inside them ───────────── */

/* THE SEA IS A GRID OF GROUNDS, NOT A STACK OF THEM. Stacked, the six bands
   ran 1,640px and put the crossing table, which is the whole navigation, below
   two screens of map: measured, .isl-focus started at y=1943 on a 1,100px
   viewport. Five of the six grounds hold exactly ONE island, so a stack spent
   a full-width band on a single 255px card five times over.

   Grounds that hold more than one island span the full width, which is also
   the honest emphasis: the shared ground and the five off-chain venues are the
   two rows worth their width, and they are the two that get it.

   min(100%, 300px) rather than 300px, for the 900px trap in the header. */
html body .isl-sea {
  display: grid;
  /* 268px is the card (232) plus the band's own padding and border, so a band
     holding one island hugs it instead of leaving 140px of sea inside its own
     frame. Measured at 1138px of content it yields four tracks, which lays the
     eleven islands out as three rows: the shared ground, the four grounds that
     hold one island each, and the five venues that are not on a chain. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: 10px;
  align-items: start;
  min-width: 0;
}
/* ── HOW WIDE A BAND IS ─────────────────────────────────────────────────────
   A band is as wide as the islands in it. Measured before this rule, EVERY
   band holding more than one island took the whole row, which drew the
   two-island band at 1,188px around 480px of cards (~700px of it empty) with
   the four one-island bands compressed into a tight row beneath it. The band
   with two venues dominated the map; the eight venues under it did not.

   .isl-band-w2 SPANS TWO TRACKS, AND ONLY WHERE TWO TRACKS EXIST. In an
   auto-fill grid an item whose span exceeds the computed track count FORCES
   the count up, and a forced second 268px track in a 300px content box
   overflows a scrollport that clips rather than scrolls (main.stage,
   style.css:623). So the span is behind a measured breakpoint rather than
   declared flat.

   THE BREAKPOINT IS 680px OF VIEWPORT AND IT IS MEASURED, NOT GUESSED. Two
   tracks need 2*268 + 10 = 546px of CONTENT. Content box against viewport,
   measured on this build: 390->300, 480->390, 560->465, 620->520, 768->657,
   885->764, 899->777, 900->570, 1000->662, 1280->920, 1920->1138. The 900px
   trap (nav.css:129) is the reason that list is not monotonic and the reason a
   round breakpoint cannot be trusted: content DROPS from 777px to 570px as the
   viewport crosses 899 to 900. 570 still clears 546, and every viewport at or
   above 680 measures at least 570px of content, so the rule holds on both
   sides of the trap. Re-measure this list before moving the number. */
html body .isl-band-wide { grid-column: 1 / -1; }
@media (min-width: 680px) {
  html body .isl-band-w2 { grid-column: span 2; }
}

html body .isl-band {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line2);
  padding: 10px 12px 12px;
  min-width: 0;
}
/* THE EXCEPTION GETS THE MARK. One band on this map holds more than one
   island, which is the only place a crossing is mechanically possible at all.
   A left rule in the accent is how the rail already says "this one". */
html body .isl-band-shared { border-left-color: var(--accent); }
/* NOT A CHAIN, AND THE BORDER SAYS SO BEFORE THE LABEL DOES. Dashed, because
   these five are not ground in the sense the rest of the map means it. */
html body .isl-band-off {
  border-style: dashed;
  border-left-style: dashed;
  border-left-color: var(--line);
}

/* NAME OVER CAPTION, NEVER BESIDE IT. This was a baseline-aligned wrapping
   flex row, which put the caption inline after a short ground name and on a
   second line after a long one: "BASE  1 island, its own chain" and "DERIVE
   CHAIN (OP STACK)" / "1 island, its own chain" sat in the same row of bands
   in two different formats, decided by nothing but how many characters a chain
   is called. Stacked, every band header is one shape and one height, which is
   also what lets the bands beside each other line up. */
html body .isl-gh {
  display: block;
  margin: 0 0 9px;
  min-width: 0;
}
html body .isl-gn,
html body .isl-gc {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .isl-gc { margin-top: 2px; }
html body .isl-gn {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--ink2);
  cursor: help;
}
html body .isl-gc {
  font-size: 11px !important;
  color: var(--ink3);
}
html body .isl-band-shared .isl-gc { color: var(--accent); }

/* THE TRACK FLOOR IS min(100%, 208px) AND NOT 208px. At the 900px trap the
   container is 570px wide; a hard 208px floor with a 10px gap fits two tracks
   there and is fine, but the same floor at 390px (container ~358px) would
   still fit one and clip nothing, while a wider card would have been sliced
   with no scrollWidth to report it. min() removes the whole class of failure:
   a track can never be wider than the box it is in. */
/* EVERY CARD IS THE SAME WIDTH, AND THAT IS A CORRECTNESS RULE, NOT A TASTE
   ONE. Size on this map is carried by the bar inside the card, drawn as a
   percentage of the card. Left to 1fr the tracks stretched to fill whatever
   band they were in: measured at viewport 900, the CEX band drew five cards at
   ~205px while the single-island Base band drew one at ~445px, so CallPut's
   58% bar rendered LONGER than Hypercall's 100% bar. A magnitude that changes
   with how many neighbours a venue happens to have is not a magnitude.

   A capped track (196 to 232) plus justify-content:start fixes the denominator
   for all eleven, at every width, in every band. min(100%, 196px) keeps the
   floor collapsible for the 900px trap. */
html body .isl-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 232px));
  justify-content: start;
  gap: 8px;
  min-width: 0;
}

html body .isl-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px 11px;
  text-align: left;
  background: var(--s1);
  border: 1px solid transparent;
  border-radius: 4px !important;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
html body .isl-card:hover { background: var(--s2); border-color: var(--line2); }
html body .isl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html body .isl-card.on {
  border-color: var(--accent);
  background: var(--s2);
}

html body .isl-card .isl-name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
html body .isl-card .isl-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body .isl-mk { flex: 0 0 auto; }

/* SIZE IS CONTRACTS READ, AND THE BAR SAYS ONLY THAT. It is not open interest
   and it is not volume: open_interest_usd is null for ten of the eleven, and
   traded volume is unknown for eight of them, so either would have drawn most
   of this map at zero area and asserted something false. */
/* THE TRACK IS NOT var(--empty). Measured on the live palette, --empty resolves
   to rgb(138,135,126) and --ink3 to rgb(155,142,130): seventeen points apart on
   one channel, which drew every island at full width. A magnitude bar whose
   track and fill are the same colour is a bar that always reads 100%, and it
   read that way on all eleven. A flat alpha over the card ground cannot drift
   with a token again. */
html body .isl-card .isl-bar {
  display: block;
  height: 4px;
  background: rgba(255, 255, 255, .09);
  margin: 2px 0 5px;
  cursor: help;
}
html body .isl-card .isl-bar i {
  display: block;
  height: 100%;
  font-style: normal;
  background: var(--ink3);
}
html body .isl-card.on .isl-bar i { background: var(--accent); }

html body .isl-card .isl-l {
  display: block;
  min-width: 0;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
  color: var(--ink2);
  overflow-wrap: anywhere;
}
html body .isl-card .isl-l em,
html body .isl-card .isl-l-oi em {
  font-style: normal;
  color: var(--ink3);
}
html body .isl-card .isl-l b {
  font-weight: 400 !important;
  color: var(--line2);
  margin: 0 3px;
}
html body .isl-card .isl-l-q { color: var(--ink); }
html body .isl-card .isl-l-x,
html body .isl-card .isl-l-oi { color: var(--ink3); }

/* WHO IT NAMES, coloured by state and not by value. "both" is the only state
   that is complete; the rest are degrees of gap and they read as gaps. */
html body .isl-card .isl-w-both,
html body .isl-card .isl-w-partial { color: var(--ink); }

/* ── UNKNOWN. The single most important rule in this section, AND IT IS NO
      LONGER IN THIS FILE ────────────────────────────────────────────────────
   Eight of eleven islands publish no trade feed, so eight of eleven cards land
   on an absence. It must read as a WORD WITH A REASON and never as a 0, a
   blank or a dash.

   THE TREATMENT THAT WAS HERE DID NOT RENDER. It was `color: var(--ink3)` plus
   `border-bottom: 1px dotted var(--line)`, and on the live dark palette
   (instrument.css:220) --line is #24383a against a #0b1416 ground: measured on
   the rendered pixels, the dotted underline is invisible at 1x and barely
   present at 3x. The hover rule was worse than useless, since --line and
   --line2 are THE SAME VALUE in that palette, so :hover changed nothing. What
   a reader actually saw was one ink step: "no trade feed" drawn as a fainter
   version of "firm book". An absence rendered as a degraded measurement is the
   same failure as an absence rendered as a zero, one notch quieter.

   IT IS gap.css NOW, as .mn-gap, because this is not an Islands problem. Six
   sections invented six vocabularies for the same object (a bare em dash in
   Venues and Trades, a middot at 38% opacity in Lattice, an omitted tile in
   Flow). One object, one drawing, declared once, loaded last. */
html body .isl-unk { font-style: normal; }

/* ── THE FOCUSED ISLAND AND ITS CROSSINGS ───────────────────────────────── */

html body .isl-focus {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
html body .isl-fh {
  display: flex;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}
html body .isl-fn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink);
}
html body .isl-fg {
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  color: var(--ink3);
}
html body .isl-fs { font-size: 11.5px !important; color: var(--ink2); }
html body .isl-fs em { font-style: normal; color: var(--ink3); }
html body .isl-fs b { font-weight: 400 !important; color: var(--line2); margin: 0 5px; }

/* ONE CAPTION, AND IT IS THE LINE THAT KEEPS THIS HONEST. A reader hops island
   to island here in a keystroke; nobody in the fill data hops at all. Nothing
   on this screen executes, routes or moves anything, and this sentence is not
   to be softened into something that could be read as one. */
html body .isl-cap {
  margin: 0 0 10px;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--ink3);
  max-width: 88ch;
}

/* ITS OWN SCROLLER, FOR THE REASON THE HEADER RECORDS. Five columns cannot fit
   the 570px content box at the 900px trap, and main.stage clips rather than
   scrolls. .vn-table and .bk-tape solve it the same way. */
html body .isl-xwrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
html body .isl-xwrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 700px BECAME 430px WHEN THE TABLE LOST THREE COLUMNS (2026-08-30) ──────
   Ground, "quotes as" and "publishes" came off: all three restated, in the
   same words, what the card above had just said. What is left is the two
   things the map cannot draw — what it takes to leave a position, and how
   many underlyings a PAIR of venues share — plus the island they belong to.

   THE MIN-WIDTH IS THE POINT OF THE CUT, not a side effect. At 700px this
   table scrolled horizontally inside .isl-xwrap at every width below 700px of
   content, which the 900px trap guarantees: content measures 570px at viewport
   900 and 300px at 390. Three columns clear 430 and the wrapper still scrolls
   below that, so nothing is ever clipped, but the common case stopped being
   "scroll to read it". Re-measure before moving it: 12px of inter-column
   padding is inside these figures. */
html body table.isl-x {
  width: 100%;
  min-width: 430px;
  border-collapse: collapse;
}
/* THE HOUSE DEFAULT FOR A CELL IS RIGHT-ALIGNED. style.css:693 sets a bare
   `td { text-align: right }` and :686 does the same for th, because most tables
   in this app are numeric. Four of these five columns are words, and they
   arrived flush right with their two-line sub-labels ragged against them: the
   ground column read as a right-aligned block in the middle of the table. Both
   ends are declared here rather than one, so the intent survives someone
   changing the default. */
html body table.isl-x th,
html body table.isl-x td { text-align: left; }
html body table.isl-x th.num,
html body table.isl-x td.num { text-align: right; }

html body table.isl-x th {
  vertical-align: bottom;
  padding: 0 12px 7px 0 !important;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  color: var(--ink3);
  white-space: nowrap;
}
html body table.isl-x th i {
  display: block;
  font-style: normal;
  font-size: 10px !important;
  letter-spacing: .02em !important;
  text-transform: none;
  color: var(--line2);
  margin-top: 2px;
}
html body table.isl-x th.num,
html body table.isl-x td.num { padding-right: 0 !important; }

/* COLUMN WIDTHS ARE DECLARED, not left to the auto algorithm. Auto sizing gave
   the ground column 287px and the crossing count 259px of a 1,070px table,
   which put the one figure on the table five columns away from the island it
   belongs to. table-layout stays auto so a long venue name can still take the
   room it needs; these are hints, not floors. */
/* THREE COLUMNS NOW, AND THE HINTS WERE RE-CUT RATHER THAN LEFT TO ROT. Six
   declarations against three columns leaves nth-child(4..6) matching nothing
   and the three that remain claiming 17/21/12 of the table, i.e. half of it,
   with the auto algorithm handing out the other half. "Leaving a position"
   carries the longest string on the table ("2 to 10 min, else a 7-day
   challenge") and gets the widest track; the crossing count is one figure. */
html body table.isl-x th:nth-child(1) { width: 34%; }
html body table.isl-x th:nth-child(2) { width: 44%; }
html body table.isl-x th:nth-child(3) { width: 22%; }

/* !important on the padding because instrument.css:3128 pins
   `body td:not(.tl-c):not(.cov-c) { padding: 7px 10px !important }` on every
   cell in the app, which would have put 10px of left padding under a column
   that starts at the table's left edge. */
html body table.isl-x td {
  padding: 9px 12px 9px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: 12px !important;
  color: var(--ink2);
  vertical-align: top;
}
html body table.isl-x tr.isl-x-row { cursor: pointer; }
html body table.isl-x tr.isl-x-row:hover td { background: var(--s1); }
html body table.isl-x tr.isl-x-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* THE ONE PAIR THAT SHARES GROUND. Marked on the row, because it is the only
   row on this table where a crossing is mechanically possible and the count is
   still what it is. */
html body table.isl-x tr.isl-x-same-chain td:first-child {
  box-shadow: inset 2px 0 0 var(--accent) !important;
  padding-left: 8px;
}

/* THE MARK AND THE NAME ARE A FLEX ROW INSIDE THE CELL, NOT THE CELL ITSELF.
   `display: flex` on a <td> takes it out of the table box model: the row then
   carries one anonymous cell plus four real ones and the column widths stop
   agreeing with the header. Measured before the fix, this cell sat at 182px
   while its header claimed a different track. */
html body table.isl-x td.isl-x-n { color: var(--ink); font-weight: 500 !important; }
html body table.isl-x .isl-x-nn {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
html body table.isl-x .isl-x-nn > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* THE BRIDGE WORD MOVED UNDER THE ISLAND'S NAME when the Ground column came
   off. It is the same sub-line, drawn the same way, in the cell it is about
   rather than in a column of its own — and it keeps the accent on the one pair
   that shares a chain, which is the only row where a crossing is mechanically
   possible at all. .isl-x-g is kept below it: the class no longer renders, and
   the rules are two lines that cost nothing and would have to be rewritten
   verbatim if the column ever comes back. */
html body table.isl-x td.isl-x-n i,
html body table.isl-x td.isl-x-g i {
  display: block;
  font-style: normal;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--ink3);
  margin-top: 2px;
}
html body table.isl-x td.isl-x-g span { color: var(--ink2); }
html body table.isl-x tr.isl-x-same-chain td.isl-x-n i,
html body table.isl-x tr.isl-x-same-chain td.isl-x-g i { color: var(--accent); }

html body table.isl-x td.isl-x-e { color: var(--ink2); }
/* "none" IS A MEASURED ZERO AND THE ONLY ONE ON THIS SCREEN. Both venues
   publish their full asset lists, so sharing no underlying is a fact rather
   than a gap, and it must NOT wear the dotted underline that every unknown
   here wears. Same muted weight, no promise of a reason, because there is no
   missing reason to promise. */
html body .isl-none { color: var(--ink3); cursor: help; }

/* WHAT CHANGES IS IN FULL INK, WHAT DOES NOT IS MUTED. That contrast is the
   learning: run down the column and the differences are the only thing lit. */
html body table.isl-x td.isl-diff { color: var(--ink); }
html body table.isl-x td.isl-same { color: var(--ink3); }

html body table.isl-x td.isl-x-c b {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ── "READ ONCE" ───────────────────────────────────────────────────────────
   Two figures on this screen were measured off this app on a date: the
   owner-resolution study and the collateral and exit terms out of each venue's
   docs. Both are true and neither is live, and a reader has no way to tell
   those apart unless the page says so. The marker is a small trailing word,
   not a colour: colour would rank it against the live figures, and it is not
   worse than them, it is a different kind of thing.

   It shares its shape with .isl-unk on purpose. Both mean "this value is not
   what it looks like at a glance, and the reason is in the title". */
html body .isl-once { cursor: help; }
/* ONE CHIP, TWO PLACES. .isl-once i is the trailing chip on a friction value;
   .isl-chip is the same object on a strip item, where the label is its own
   element and the chip has to sit inside it rather than after the value. They
   are declared together so they can never drift apart visually, which would be
   the worst outcome: two different-looking markers for the same claim. */
html body .isl-once i,
html body .isl-chip {
  font-style: normal;
  font-size: 9.5px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
  color: var(--ink3);
  border: 1px solid var(--line);
  padding: 1px 4px;
  margin-left: 6px;
  white-space: nowrap;
}
html body .isl-strip li.isl-li-once b { color: var(--ink2); }
/* A hairline down the left of the dated item, so the distinction survives a
   reader who never gets as far as the chip. */
html body .isl-strip li.isl-li-once {
  padding-left: 10px;
  border-left: 1px dotted var(--line2);
}
html body .isl-help { cursor: help; }

/* ── THE HONESTY NOTES ─────────────────────────────────────────────────────
   Two sentences under the strip, and the only long-form text in the section.
   The first is the correction to a claim this section used to make and is
   rendered as written rather than paraphrased. The second says that the one
   test which COULD have compared like with like cannot be run at all, because
   a reader who is not told that will assume it was run and passed.

   They are a list and not paragraphs: each is one fact, they are set at the
   footnote size the rest of the app uses for provenance, and nothing else in
   this section is allowed to grow into prose beside them. */
html body .isl-notes {
  margin: -6px 0 20px;
  padding: 0;
  list-style: none;
  max-width: 96ch;
}
html body .isl-notes li {
  position: relative;
  padding-left: 14px;
  margin: 0 0 5px;
  font-size: 11.5px !important;
  line-height: 1.55 !important;
  color: var(--ink3);
}
html body .isl-notes li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: var(--line2);
}

/* ── THE FOCUSED ISLAND'S KEY/VALUE STRIP ──────────────────────────────────
   What it takes to hold and to leave a position here, which is the barrier the
   whole map is about. It changes on every hop, so it is the payload of the
   navigation rather than decoration on top of it.

   auto-fill over min(100%, 190px) so it loses columns rather than overflowing
   at the 900px trap, and so a single long value (Derive's exit terms run to 38
   characters) can take a whole row to itself at 390px. */
html body .isl-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 10px 18px;
  margin: 0 0 12px;
  min-width: 0;
}
html body .isl-kv > div { min-width: 0; }
html body .isl-kv dt {
  font-size: 10px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0 0 2px;
}
html body .isl-kv dd {
  margin: 0;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--ink);
  overflow-wrap: anywhere;
}
html body .isl-kv dd em { font-style: normal; color: var(--ink3); }
html body .isl-kv dd b { font-weight: 400 !important; color: var(--line2); margin: 0 4px; }

/* ── NARROW. Under the trap band the strip is still the first thing read, so
      it keeps its size; only the gaps close. */
@media (max-width: 620px) {
  html body .isl-strip { gap: 12px 22px; }
  html body .isl-strip b { font-size: 22px !important; }
  html body .isl-band { padding: 9px 10px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * 2026-08-30 — LESS TEXT, MORE FORM.
 * ══════════════════════════════════════════════════════════════════════════
 * Owner: "make also the islands ui less text and more clear we don't need too
 * much information and text but more representative ui".
 *
 * The section read like a paper about islands rather than like islands: a
 * three-line standfirst, four figures each carrying a caption AND a
 * sub-caption, two paragraphs of caveat, then eleven cards of six lines each.
 * Several hundred words before anything looked like a map.
 *
 * Everything below replaces WORDS WITH SHAPE. Nothing below invents a
 * vocabulary: every absence is gap.css's, solid rule for "we looked and the
 * venue does not publish it" and a 3-on/3-off gradient for "we have not read
 * it", and the two coverage objects are the same object at two scales.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE COVERAGE OBJECT ───────────────────────────────────────────────────
   Eleven venues, three lit. The one sentence a venue operator has to believe,
   drawn instead of written. It sits directly under the standfirst because it
   is the fastest true thing on the screen. */
html body .isl-cov {
  margin: 14px 0 16px;
  padding: 13px 15px 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--s1);
  min-width: 0;
}
html body .isl-cov-hd {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}
html body .isl-cov-hd b {
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.05;
  letter-spacing: -.02em !important;
  color: var(--ink);
}
html body .isl-cov-hd span {
  font-size: 12px !important;
  color: var(--ink2);
}

/* ── A GRID, BECAUSE ELEVEN EQUAL THINGS MUST RENDER EQUAL ─────────────────
   This was a wrapping flex row and it was read back off the render twice.
   `flex: 1 1 62px` lets a SHORT FINAL ROW divide the full width between its
   members: at viewport 900 (620px of content) the eleven wrapped 8 + 3 and the
   three orphans drew ~190px against ~64px for the eight above them. Capping
   the growth at 128px narrowed the disparity to ~2x and did not remove it,
   because the cause is not the cap — it is that a flex line distributes ITS
   OWN slack, and a row of three has far more slack than a row of eight.

   Eleven venues drawn at two sizes says three of them are bigger. They are
   not: this row is a COUNT, and the same correctness rule .isl-row already
   records for the cards (a magnitude that changes with how many neighbours an
   item happens to have is not a magnitude) applies to it.

   A GRID FIXES THE TRACK, SO EVERY TICK IS THE SAME WIDTH ON EVERY ROW.
   auto-fill over a 92px floor, measured against the content box on this build:
     1188 -> 12 tracks of ~94px, 11 filled, ONE empty at the right
      970 -> 10 tracks of ~92px, 11 items wrap 10 + 1
      620 ->  6 tracks of ~98px, 11 items wrap 6 + 5   (the 900px trap)
      350 ->  3 tracks of ~113px, 11 items wrap 3+3+3+2
   Up to one trailing blank track at the widest is the whole cost, and it buys
   uniform ticks at every width including both sides of the trap.

   92px AND NOT 62: the floor now has to hold the venue NAME, not just the
   mark, because a track no longer stretches to the room going spare.
   "Hypercall" is the longest at ~63px, plus 8px of padding. min(100%, 92px)
   keeps it collapsible if the container is ever narrower than one track. */
html body .isl-cov-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 92px), 1fr));
  gap: 5px;
  margin: 12px 0 9px;
  min-width: 0;
}
/* A TICK IS A VENUE, AND IT IS A BUTTON. It carries the venue's own mark, so
   the row reads as "the eleven venues" rather than as an abstract bar, and
   clicking one selects that island — the object is the coverage statement AND
   the navigation, which is why it can afford the room it takes. */
html body .isl-cov-row .isl-tick {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 7px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px !important;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s;
}
html body .isl-cov-row .isl-tick:hover { border-color: var(--line2); background: var(--s2); }
html body .isl-cov-row .isl-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html body .isl-cov-row .isl-tick-m {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  opacity: .38;
  filter: grayscale(1);
}
html body .isl-cov-row .isl-tick-n {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px !important;
  letter-spacing: .01em !important;
  color: var(--ink3);
}
/* ── LIT: WE READ THIS VENUE'S FILLS ──────────────────────────────────────
   Full ink, the venue's own colours, a solid accent underline. */
html body .isl-cov-row .isl-tick.on {
  border-color: var(--line2);
  background: var(--s2);
  box-shadow: inset 0 -2px 0 var(--accent);
}
html body .isl-cov-row .isl-tick.on .isl-tick-m { opacity: 1; filter: none; }
html body .isl-cov-row .isl-tick.on .isl-tick-n { color: var(--ink); }
/* ── UNLIT: OURS, AND DASHED FOR IT ───────────────────────────────────────
   NOT a dimmer version of a lit tick. A faded solid would read as "less
   activity here", which is the one claim this product exists to refuse. The
   3-on/3-off gradient is gap.css's mark for "we have not read this", stated as
   a gradient rather than as border-style:dashed for the reason recorded there:
   a 2px dashed border is rendered by the engine as very nearly solid at 1x. */
html body .isl-cov-row .isl-tick:not(.on) {
  background-image: repeating-linear-gradient(
    to right, var(--ink3) 0 3px, transparent 3px 6px);
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
html body .isl-cov-f {
  margin: 0;
  font-size: 11.5px !important;
  line-height: 1.5;
  color: var(--ink3);
}

/* ── THE STRIP, AT TWO ITEMS AND TWO TIERS ─────────────────────────────────
   The <i> sub-caption is gone from the markup; this drops the gap that was
   holding a line for it. Two items never orphan, so the auto-fill floor that
   the four-item version needed is no longer load-bearing. */
html body .isl-strip { margin-bottom: 16px; }

/* ── THE CARD'S READS ROW ──────────────────────────────────────────────────
   Three fixed slots — book, tape, open interest — each a FIGURE where we have
   one and a MARK where we do not, at the same weight. This replaced three
   full sentences stacked one per line on every card ("two-sided not
   published" / "fills not read" / "open interest not published"), which put
   the phrase "not published" on this screen fourteen times. */
html body .isl-card .isl-reads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  font-size: 11.5px !important;
  color: var(--ink3);
}
/* THE RULE MUST NOT HANG HERE. gap.css gives .mn-gap and .mn-gap-ours a
   -9px margin so the rule hangs into a card's own padding, which is right for
   the FIRST thing in a padded box and wrong for the second and third: inside
   this column the negative margin pulled every mark 9px left of the figures
   above it, so a card with one gap and two values had its column edge broken
   in two places. Same repair gap.css already makes for a table cell, and the
   7px/9px inset it leaves behind is wanted: in a card where two slots are
   gaps and one is a value, the value is the only thing flush left. */
html body .isl-card .isl-reads .mn-gap,
html body .isl-card .isl-reads .mn-gap-ours { margin-left: 0; }
/* THE MEASUREMENT IS THE INK, THE UNIT IS NOT. Same relation the card's
   contract count already draws, so a figure in this row reads as a figure and
   its noun does not compete with it. */
/* ── EVERY CHILD PINS ITS OWN SIZE, AND THAT IS NOT BELT-AND-BRACES ────────
   instrument.css:343 sets `font-size: var(--t-sm) !important` on
   `body *:not(svg)`, i.e. on EVERY element, so a size declared on this row
   reaches the row and NOT the spans inside it: the container was 11.5px and
   its own children rendered at --t-sm. Measured on the rendered card at 1920,
   that is what broke "56% two-sided" across two lines on the Derive card — the
   figure and its unit are one phrase and were drawn as two.

   The children are pinned here and the phrase is nowrap, so a slot wraps as a
   WHOLE SLOT or not at all. It can still wrap between slots, which is wanted:
   the row is a column of three and each line is one fact. */
html body .isl-card .isl-reads > *,
html body .isl-card .isl-reads .isl-vw,
html body .isl-card .isl-reads .isl-v,
html body .isl-card .isl-reads em {
  font-size: 11.5px !important;
  letter-spacing: normal !important;
}
html body .isl-card .isl-reads > * { white-space: nowrap; }
html body .isl-card .isl-reads .isl-v { color: var(--ink); }
html body .isl-card .isl-reads em {
  font-style: normal;
  color: var(--ink3);
}

/* ── THE CAVEATS, BELOW THE MAP AND SHUT ───────────────────────────────────
   Every word of both notes survives inside. What changed is that they no
   longer stand between the reader and the first island. */
html body .isl-caveats {
  margin: 16px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 11px;
  min-width: 0;
}
html body .isl-caveats > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  color: var(--ink3);
}
html body .isl-caveats > summary::-webkit-details-marker { display: none; }
html body .isl-caveats > summary::before {
  content: "+";
  display: inline-block;
  width: 13px;
  text-align: center;
  color: var(--line2);
}
html body .isl-caveats[open] > summary::before { content: "\2212"; }
html body .isl-caveats > summary:hover { color: var(--ink2); }
html body .isl-caveats .isl-notes { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════════════════
 * THE CODA — WHAT THE SEA LOOKS LIKE
 * ══════════════════════════════════════════════════════════════════════════
 * Ported from the retired Venues section. It is SUBORDINATE by construction:
 * one type step down from the map, behind a rule, after the caveats. The
 * eleven cards and the clearinghouse argument stay the spine. */
html body .isl-coda {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  min-width: 0;
}
html body .isl-coda-h {
  margin: 0;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--ink2);
}
html body .isl-coda-s {
  margin: 5px 0 14px;
  font-size: 11.5px !important;
  line-height: 1.5;
  color: var(--ink3);
}

/* ── THE REGISTRY BAR ──────────────────────────────────────────────────────
   36 protocols to scale, and the DASHED RUN IS THE SIZE OF OUR OWN GAP. Same
   encoding as the coverage object above: solid where we measured something,
   the 3-on/3-off gradient where the status is a hole of ours. A reader who
   learned the marks at the top of the section already knows this one. */
html body .isl-reg { margin: 0 0 18px; min-width: 0; }
html body .isl-reg-hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
html body .isl-reg-hd b {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--ink);
}
html body .isl-reg-hd span { font-size: 11.5px !important; color: var(--ink3); }

html body .isl-rb {
  display: flex;
  gap: 2px;
  height: 15px;
  margin: 10px 0 9px;
  min-width: 0;
}
html body .isl-rb-s {
  min-width: 3px;
  border-radius: 1px !important;
  cursor: help;
}
/* INDEXED: full ink. It is the only part of the registry every figure in this
   product is built from. */
html body .isl-rb-on { background: var(--accent); }
/* MEASURED, AND NOT OURS: dormant and shut down. Solid, muted, no dash — we
   looked, and what we found is what is there. */
html body .isl-rb-them { background: var(--line2); }
/* OURS: live and unread, or never checked. Dashed, on a faint ground so a
   segment three pixels wide is still visible as a segment. */
html body .isl-rb-ours {
  background-color: rgba(128, 128, 128, .10);
  background-image: repeating-linear-gradient(
    to right, var(--ink3) 0 3px, transparent 3px 6px);
  background-size: 100% 2px;
  background-repeat: repeat-y;
  background-position: left center;
}

html body .isl-rb-key {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin: 0 0 9px;
  padding: 0;
  list-style: none;
  min-width: 0;
}
html body .isl-rb-l {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  cursor: help;
  font-size: 11px !important;
  color: var(--ink3);
}
html body .isl-rb-l b {
  font-weight: 600 !important;
  font-size: 11.5px !important;
  color: var(--ink2);
}
html body .isl-rb-k {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 1px !important;
}
/* A MEASURED ZERO KEEPS ITS ROW AND LOSES ITS SWATCH. `excluded` is 0: it is
   drawn out of the bar entirely, because a zero-width segment is either
   invisible or, rounded up, a sliver claiming a venue was excluded. The count
   still prints, wearing .mn-zero — gap.css is explicit that a measured zero
   must never wear an absence mark, and nothing is missing here. */
html body .isl-rb-kz {
  background: transparent !important;
  border: 1px solid var(--line);
}
html body .isl-rb-z { opacity: .62; }
html body .isl-reg-f {
  margin: 0;
  font-size: 11.5px !important;
  line-height: 1.55;
  color: var(--ink3);
  max-width: 78ch;
}

/* ── THE CHAINS WE INDEX NOTHING ON ────────────────────────────────────────
   Was fourteen equal chips, eleven of which carried the identical string
   "1 listed, none indexed". Now: the chains that carry information get a row
   with a bar scaled to the largest, and the rest get one line that still names
   every one of them. Collapsing must not become hiding. */
html body .isl-nw { min-width: 0; }
html body .isl-nw-h {
  margin: 0 0 9px;
  font-size: 11px !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  color: var(--ink3);
}
html body .isl-nw-l { margin: 0 0 9px; padding: 0; list-style: none; min-width: 0; }
/* NAME LEFT, COUNT RIGHT, AND NO BAR TRACK. The bar column was removed after
   reading it back off the render: with two lead rows, one of them dead, it
   drew a single 100% bar against no comparison. See netBlock() for the whole
   reasoning. Two columns, and the count carries the weight in its own type. */
html body .isl-nw-i {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 3px 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
html body .isl-nw-n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink);
}
html body .isl-nw-c {
  font-size: 12px !important;
  color: var(--ink2);
  white-space: nowrap;
  text-align: right;
}
html body .isl-nw-c .mn-gap-ours { margin-left: 0; }
/* THE DEAD CHAIN'S SENTENCE SPANS THE ROW. It is the one line in this block
   that says something about the market rather than about our coverage, and it
   is too long to sit in the count column. */
html body .isl-nw-w {
  grid-column: 1 / -1;
  font-size: 11px !important;
  line-height: 1.5;
  color: var(--ink3);
  max-width: 72ch;
}
/* A CHAIN WHOSE ONLY LISTING IS GONE IS NOT A GAP OF OURS. Its name is muted
   one step, because the row is a fact about the market rather than about our
   coverage, and its count is the measured zero "none" rather than a mark. */
html body .isl-nw-dead .isl-nw-n { color: var(--ink2); }
html body .isl-nw-rest {
  margin: 0;
  font-size: 11.5px !important;
  line-height: 1.6;
  color: var(--ink3);
  max-width: 90ch;
}
html body .isl-nw-rest .mn-gap-ours { margin-left: 0; color: var(--ink2); }

/* ── THE 900px TRAP, AND 390 ───────────────────────────────────────────────
   nav.css:129 turns the rail into a fixed 208px sidebar at exactly 900px, so
   the content box gets NARROWER as the viewport gets WIDER: measured 764px at
   885, 570px at 900, 300px at 390. Nothing above carries a hard floor that
   sums past ~560px — the tick row wraps, the registry bar is flex-relative,
   and the network rows are a 1fr grid — but the fixed 88px bar track and the
   three-column network row are worth collapsing on a phone rather than
   letting the count column wrap under its own bar. */
@media (max-width: 560px) {
  html body .isl-cov-hd b { font-size: 22px !important; }
  html body .isl-reg-hd b { font-size: 17px !important; }
}