/* Narratives you can trade: the scorecard section on the Pairs page
   (static/js/pairs-board.js `narrSection`, documentations/NARRATIVES.md).

   Its own file rather than a block in pairs-board.css, because that stylesheet is
   regenerated by scripts/port_pairs_board_css.py and a hand-added rule there is silently
   dropped by the next re-port. Scoped under #view-pairs and drawn from the same palette
   tokens (--up-bg, --dn-bg, --amber-bg, --sunk2), so every palette in both modes drives it.
   Every class here is `nb`-prefixed and only rendered while the scorecard is served, so
   with NARRATIVES_ENABLED off this file styles nothing. */

/* Traded through gets the widest share (2026-09-27): three chips and "+7 more" take 258px
   in slate (Inter) and 248px in editorial (JetBrains Mono), MEASURED in headless Chrome on
   the live scorecard, and at a 1280px viewport with the rail open (an 821px card) this
   split gives the column 265px, so the set is one line there and on anything wider, while
   Priced in keeps 95px, enough for "Partly priced in" on one line.
   The row follows the CARD's width (a container query, see the stack below): under an
   800px card it is the page's narrow stack, as it is on a phone, because five columns
   there squeezed the name into a clamp and the status word past its column. */
#view-pairs .pbtable.nbtable {container:nbrows / inline-size}
#view-pairs .pbethead.nb, #view-pairs .pbet.nb {
  grid-template-columns:28px minmax(0,1.15fr) minmax(0,2fr) minmax(0,.5fr) minmax(0,.72fr) minmax(0,.58fr) 20px;
  gap:14px}
#view-pairs .pbethead.nb span {white-space:normal}
#view-pairs .pbethead.nb span[title] {cursor:help;text-decoration:underline dotted var(--faint);text-underline-offset:4px}

#view-pairs .pbet.nb .nbnm {display:flex;flex-direction:column;min-width:0;gap:2px}

#view-pairs .nblik {display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.4;cursor:help}
#view-pairs .nblik b {font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
#view-pairs .nblik i {font-style:normal;color:var(--soft)}

/* Traded through: three chips and a plain "+N more", held whole so it never breaks inside. */
#view-pairs .pbchip.nbmore {white-space:nowrap}

/* Priced in and Status are one word each, as coloured text rather than a chip or pill: the
   reasons and the size of the move are in the opened row (owner, 2026-09-26). */
#view-pairs .nbpi, #view-pairs .nbstat {font-size:12.5px;line-height:1.4;font-weight:600;color:var(--ink);cursor:help}
#view-pairs .nbpi.pr {color:var(--amber)}
#view-pairs .nbstat.up {color:var(--up)}
#view-pairs .nbstat.dn, #view-pairs .nbstat.inv {color:var(--dn)}
#view-pairs .nbstat.nt {color:var(--soft)}

#view-pairs .nbfoot {padding:0 4px}
#view-pairs .nbnone {padding:14px 16px;margin:0}

@container nbrows (max-width:799.98px) {
  #view-pairs .pbethead.nb {display:none}
  #view-pairs .pbet.nb {grid-template-columns:24px minmax(0,1fr) 16px}
  #view-pairs .pbet.nb .pbchips, #view-pairs .pbet.nb .nblik, #view-pairs .pbet.nb .nbpi,
  #view-pairs .pbet.nb .nbstat {grid-column:2 / -1}
  /* Stacked, a blank cell would only add an empty gap; on wide screens it keeps its column. */
  #view-pairs .pbet.nb .nbpi:empty, #view-pairs .pbet.nb .nbstat:empty {display:none}
}

/* ── The opened row: the owner's redesign "2a" (2026-09-27) ──────────────────────────
   A port of the Claude Design reference: its structure, grid templates, sizes, gaps,
   paddings and weights, with its colours mapped onto this page's tokens (ink #0F172A and
   body #1E293B -> --ink; muted -> --soft; faint -> --faint; green -> --up; red -> --dn;
   amber -> --amber; navy fills -> --ink with --bg text; tracks and chips -> --sunk2;
   rules -> --rule). The line heights the reference leaves at the browser's `normal` are
   left there too, rather than inheriting the page's 1.6.

   Two deliberate differences. The panel keeps the opened row's own --sunk, so the row and
   its panel read as one block as they did before, and the rule under the opened row goes
   so the strip's top rule is the only line between them, as in the reference. The indent
   is 58px rather than the reference's 68px because the point of it is to line up under
   the narrative's name, and this row puts the name at 58px (16px padding, 28px number
   column, 14px gap).

   The layout follows the PANEL's width, not the viewport's (a container query), and the
   default below is the narrow one: each member pair is a card of label and value, the
   strip's blocks wrap, and nothing is ever clipped or scrolled sideways. The table layout
   starts at 1120px of panel width, MEASURED in headless Chrome (2026-09-27) with the
   design's own ten rows: the fixed columns take 790px with their gaps, the indent 74px, and
   the Moved cell needs 250px for "17 Sep 1.14578 -> 1.13896" on one line beside its bar, so
   no cell overflows from a 1104px panel in slate (Inter) and 1114px in editorial (JetBrains
   Mono, the widest figure face we have). The design's own estimate, 66rem at 16px, was
   about 60px short. In px, not rem, as the page's other container queries are: this app's
   root is 14px, so a rem here is not the 16px the estimate assumed. A longer line than the
   design's (a first-seen start with eight-digit prices needs 1186px) breaks at its arrow
   instead of running into the next column: the "-> {mark}" half is kept whole, and the start
   half wraps only if it is itself wider than the cell, so nothing spills into the next
   column. On a narrow card the empty track beside "None" is dropped; in the table it keeps
   its place so the figures line up. */

#view-pairs .pbet.nb.open {border-bottom-color:transparent}
#view-pairs .nbexp {container-type:inline-size;background:var(--sunk);border-bottom:1px solid var(--rule);
  line-height:normal}
#view-pairs .nbin {display:flex;flex-direction:column;gap:16px;padding:4px 16px 18px 58px;min-width:0}
#view-pairs .nbexp b {font-weight:600}

/* Part 1: the summary strip. Flex rather than the reference's `auto auto minmax(0,1fr)`
   grid so a block with no data can be left out and the others close up; with all three
   present the two draw the same. */
#view-pairs .nbsum {display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 36px;padding:14px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
#view-pairs .nbblk {display:flex;flex-direction:column;gap:6px;min-width:0}
#view-pairs .nbmove {min-width:200px}
#view-pairs .nbdist {min-width:170px}
#view-pairs .nbpri {gap:7px;flex:1 1 100%}
#view-pairs .nbk {font-size:12px;color:var(--soft)}
#view-pairs .nbvr {display:flex;align-items:center;gap:10px}
#view-pairs .nbbig {font-size:18px;font-weight:600;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
#view-pairs .nbbig.dn {color:var(--dn)}
#view-pairs .nbpl {display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#view-pairs .nbstg {display:flex;flex-wrap:wrap;gap:3px}
#view-pairs .nbsc {font-size:11.5px;padding:2px 7px;border-radius:4px;background:var(--sunk2);color:var(--faint);
  font-weight:400;white-space:nowrap}
#view-pairs .nbsc.on {background:var(--ink);color:var(--bg);font-weight:600}
#view-pairs .nbsc[title] {cursor:help}
#view-pairs .nbps {margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);text-wrap:pretty}
#view-pairs .nbwarn {color:var(--amber)}

/* The bars. Decorative (aria-hidden): the number beside each carries the meaning. */
#view-pairs .nbbar {position:relative;display:block;flex:none;height:5px;border-radius:3px;background:var(--sunk2)}
#view-pairs .nbbar.mv {width:80px}
#view-pairs .nbbar.ds {width:60px}
#view-pairs .nbsum .nbbar {width:90px}
#view-pairs .nbbar.none {display:none;background:transparent}
#view-pairs .nbfill {position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ink)}
#view-pairs .nbbar.up .nbfill {background:var(--up)}
#view-pairs .nbbar.dn .nbfill {background:var(--dn)}
#view-pairs .nbbar.nt .nbfill {background:var(--faint)}
#view-pairs .nbtick {position:absolute;left:16.7%;top:-3px;bottom:-3px;width:1.5px;background:var(--faint)}

/* The why-not line under the strip. */
#view-pairs .nbwhy {margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}

/* Part 2: the pair table. Narrow first: the header row is hidden and each member is a card,
   the Pair cell on top, then a two-column grid of the header's own titles and the values. */
#view-pairs .nbtab {display:flex;flex-direction:column;min-width:0}
#view-pairs .nbth {display:none}
#view-pairs .nbr {display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:7px 14px;
  align-items:start;padding:10px 0;border-bottom:1px solid color-mix(in srgb, var(--rule) 60%, transparent)}
#view-pairs .nbr > .nbpcell, #view-pairs .nbr > .nbwn {grid-column:1 / -1}
#view-pairs .nbc {display:contents}
#view-pairs .nbc.nbe {display:none}
#view-pairs .nbl {font-size:12px;color:var(--soft)}
#view-pairs .nbv {min-width:0;color:var(--ink)}

/* The Pair cell: both flags, the pair, the call; then status, conviction and notes. */
#view-pairs .nbpcell {display:flex;flex-direction:column;gap:4px;min-width:0}
#view-pairs .nbp1 {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#view-pairs .nbp1 .fpair {margin:0}
#view-pairs .nbp1 .fpair img.fl {border:0;box-shadow:0 0 0 1.5px var(--sunk)}
#view-pairs .nbp1 .fpair img.fl+img.fl {margin-left:-5px}
#view-pairs .nbpc {font-family:var(--fmono);font-size:13px;font-weight:600;color:var(--ink);padding:0;
  font-variant-numeric:tabular-nums}
#view-pairs .nbpc.live {cursor:pointer;text-decoration:underline dotted var(--faint);text-underline-offset:4px}
#view-pairs .nbpc.live:hover {color:var(--blue);text-decoration-color:var(--blue)}
#view-pairs .nbcall {font-size:11px;font-weight:600;white-space:nowrap}
#view-pairs .nbcall.up {color:var(--up)}
#view-pairs .nbcall.dn {color:var(--dn)}
#view-pairs .nbcall.nt {color:var(--soft)}
#view-pairs .nbp2 {display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-left:1px;font-size:11.5px}
#view-pairs .nbdot {flex:none;width:6px;height:6px;border-radius:50%;background:var(--faint)}
#view-pairs .nbdot.up {background:var(--up)}
#view-pairs .nbdot.dn {background:var(--dn)}
#view-pairs .nbsw {color:var(--soft)}
#view-pairs .nbsw.up {color:var(--up)}
#view-pairs .nbsw.dn {color:var(--dn)}
#view-pairs .nbpips {display:inline-flex;gap:1.5px;margin-left:4px}
#view-pairs .nbpips i {width:4px;height:8px;border-radius:1px;background:var(--sunk2)}
#view-pairs .nbpips i.on {background:var(--ink)}
#view-pairs .nbmut {color:var(--soft)}

/* The value cells. */
#view-pairs .nbmv .nbv {display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#view-pairs .nbmvt {display:flex;flex-direction:column;gap:1px;min-width:0}
#view-pairs .nbmvv {font-size:13px;font-variant-numeric:tabular-nums}
#view-pairs .nbmvv span {font-weight:400;color:var(--soft)}
#view-pairs .nbmvv .nbmutv {color:var(--soft)}
#view-pairs .nbpx {font-family:var(--fmono);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
#view-pairs .nbds .nbv {display:flex;align-items:center;gap:8px;font-size:13px;font-variant-numeric:tabular-nums}
#view-pairs .nbds b.dn {color:var(--dn)}
#view-pairs .nbli .nbv {font-size:13px;font-variant-numeric:tabular-nums}
#view-pairs .nbds .nbnil, #view-pairs .nbli .nbnil {font-weight:600}
#view-pairs .nblv {font-family:var(--fmono);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
#view-pairs .nblv.dn {color:var(--dn)}
#view-pairs .nbnil {color:var(--faint)}
#view-pairs .nbop .nbv {font-size:12.5px}
#view-pairs .nbccy {font-family:var(--fmono);font-size:11.5px;color:var(--faint);margin-right:5px}
#view-pairs .nbpv {color:var(--ink)}
#view-pairs .nbpv.pr {color:var(--amber)}
#view-pairs .nbpv.none {color:var(--faint)}
#view-pairs .nbnw {font-size:12.5px}
#view-pairs .nbnw.up {color:var(--up)}
#view-pairs .nbnw.dn {color:var(--dn)}
#view-pairs .nbnw.nt {color:var(--soft)}
#view-pairs .nbwn {margin:0;font-size:12.5px;line-height:1.5;color:var(--ink)}

/* Part 3: the notes. */
#view-pairs .nbnotes {margin:0;font-size:12px;line-height:1.6;color:var(--soft);text-wrap:pretty}

/* The desktop layout, once the panel is wide enough for the table (see the note above). */
@container (min-width:1120px) {
  #view-pairs .nbsum {flex-wrap:nowrap;gap:36px}
  #view-pairs .nbpri {flex:1 1 0}
  #view-pairs .nbth, #view-pairs .nbr {grid-template-columns:196px minmax(0,1fr) 110px 58px 90px 132px 96px}
  #view-pairs .nbth {display:grid;gap:18px;padding:0 0 8px;font-size:12px;color:var(--soft);
    border-bottom:1px solid var(--rule)}
  #view-pairs .nbr {gap:6px 18px;align-items:center;padding:9px 0}
  #view-pairs .nbr > .nbpcell {grid-column:auto}
  #view-pairs .nbr > .nbwn {grid-column:2 / -1}
  #view-pairs .nbc, #view-pairs .nbc.nbe {display:block;min-width:0}
  #view-pairs .nbl {display:none}
  #view-pairs .nbmv .nbv {flex-wrap:nowrap}
  #view-pairs .nbpx > span + span {white-space:nowrap}
  #view-pairs .nbbar.none {display:block}
}

/* The indent that lines the panel up under the narrative's name goes on a narrow panel. */
@container (max-width:639.98px) {
  #view-pairs .nbin {padding-left:16px}
}

/* ── The pairs table ("Our biases", Table view) with the scorecard on file (2026-09-27) ──
   `.nbboard`, `.pbhead.nb` and `.pbrow.nb` are drawn only while the scorecard is served, so
   with the switch off the table is the ported one, untouched. A Priced in column sits
   between Trade quality and Why we lean this way, and every column is centred both ways
   except the why prose and its header, which stay left-aligned: centred prose over two
   lines reads badly.

   The layout follows the CARD's width (a container query), as the opened narrative's does.
   The columns before the why prose need 618px with their gaps and padding, MEASURED in
   headless Chrome at their widest content (the pair 135px, the call 76px, the Trade quality
   header 103px, a Priced in half 99px), so the table starts at an 800px card, which leaves
   the prose at least 182px and its header room on one line: a 1280px viewport with the
   rail open is an 821px card. Below that each pair is the page's own narrow stack, the
   Priced in cell on its own line under the pair; and above the phone layout, where the
   header row used to hide with the table, it stays as a bar of the sort buttons alone so
   they keep working. The ported table clipped under a 1060px card before this, and with
   the new column would have clipped under a 1250px one. */
#view-pairs .pbtable.nbboard {container:nbboard / inline-size}
#view-pairs .nbpinh {cursor:help;text-decoration:underline dotted var(--faint);text-underline-offset:4px}
#view-pairs .nbpin {font-size:12.5px;line-height:1.4;color:var(--ink)}
#view-pairs .nbpin .nbpv {font-weight:600}
#view-pairs .nbh {white-space:nowrap}
#view-pairs .nbh.dn {color:var(--dn)}
@container nbboard (min-width:800px) {
  #view-pairs .pbhead.nb, #view-pairs .pbrow.nb {grid-template-columns:40px 140px 86px 112px 104px minmax(0,1fr) 20px}
  #view-pairs .pbhead.nb > span, #view-pairs .pbrow.nb > span {justify-self:center;text-align:center}
  #view-pairs .pbhead.nb > .nbwhyh, #view-pairs .pbrow.nb > .pbwhy {justify-self:stretch;text-align:left}
}
@container nbboard (max-width:799.98px) {
  #view-pairs .pbhead.nb {display:none}
  #view-pairs .pbrow.nb {grid-template-columns:24px minmax(0,1fr) auto auto 16px;height:auto;
    padding-top:12px;padding-bottom:12px}
  #view-pairs .pbrow.nb .pbwhy, #view-pairs .pbrow.nb .nbpin {grid-column:2 / -1}
  #view-pairs .pbrow.nb .nbpin:empty {display:none}
  #view-pairs .nbboard .pbexp {grid-template-columns:1fr;padding-left:16px}
}
/* On a phone the pair, the call and the Trade quality pill do not fit on one line: they
   need a 393px card (the pair 135px, the call 76px, the pill 54px, MEASURED), and a 390px
   phone gives a 300px one, so the call pill was drawn over the pair's code. Under a 400px
   card the pair takes its line alone and the two pills go on the next. */
@container nbboard (max-width:399.98px) {
  #view-pairs .pbrow.nb {grid-template-columns:24px auto auto minmax(0,1fr)}
  #view-pairs .pbrow.nb > .pbp {grid-column:2 / -1}
  #view-pairs .pbrow.nb > span:nth-child(3) {grid-column:2}
  #view-pairs .pbrow.nb > span:nth-child(4) {grid-column:3}
}
@media (min-width:901px) {
  @container nbboard (max-width:799.98px) {
    #view-pairs .pbhead.nb {display:flex;flex-wrap:wrap;gap:6px 24px}
    #view-pairs .pbhead.nb > span:nth-child(3), #view-pairs .pbhead.nb > .nbpinh,
    #view-pairs .pbhead.nb > .nbwhyh, #view-pairs .pbhead.nb > span:last-child {display:none}
  }
}

/* The opened pair's strip: the narrative strip's own blocks, first in the opened row. No
   top rule, since the row's own bottom rule is right above it; the four blocks sit in one
   line while they fit and wrap as the narrative strip's do. Wrapping and gaps are set here
   because the card is now a container too, and the narrative strip's wide rules would
   otherwise reach this strip on a card over 1120px. */
#view-pairs .pbexp > .nbpsum {grid-column:1 / -1;flex-wrap:wrap;gap:16px 36px;padding:0 0 14px;border-top:0;
  line-height:normal}
#view-pairs .nbpsum .nbpri {flex:0 1 auto}
#view-pairs .nbpsum .nbpv {font-size:12.5px;font-weight:600}