/* Agent Billy and the Pokemon card markets hub. Built by tools/billy/build_billy_pages.py.
   Every class is prefixed bl- so nothing leaks into other pages. Tokens only from assets/site.css;
   no new colour tokens (Mary 5.1). Rules: one question per row, nothing moves when a value changes,
   sibling cards do not stretch, two-idea headlines are two lines. */

/* Two-idea headlines: each phrase takes its own line from 700px down, may share a line above that. */
/* Two phrases, two lines, at every width: the second is the quieter subhead, never a run-on of the first. */
.bl-page h1 .h-l1,.bl-page h1 .h-l2{display:block}
.bl-page h1 .h-l1{text-wrap:balance}
.bl-page h1 .h-l2{font-size:.52em;line-height:1.1;margin-top:.35em;opacity:.8;text-wrap:balance}

/* Hero: copy left, Billy's card right; stacks on phones. align-items:start so the card is as tall as its content. */
.bl-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:1000px){.bl-hero-grid{grid-template-columns:minmax(0,1fr) 360px;gap:48px}}
.bl-hero-copy .lede{max-width:44em}

/* "No market open" status line: a line, not a card (Mary 3.1). */
.bl-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:18px;font:500 15px/1.4 var(--sans)}
.bl-pill{display:inline-flex;align-items:center;min-width:9.5em;justify-content:center;height:28px;padding:0 12px;border-radius:999px;font:700 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;border:1px solid currentColor}

/* Billy's card. Light by default; on the dark hero it takes the dark ramp. */
.bl-card{background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow)}
.page-hero:not(.page-hero--light) .bl-card{background:var(--dark-2);color:var(--dink);border-color:var(--dline-2);box-shadow:none}
.bl-card-top{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}
.bl-card-h{font:800 19px/1.25 var(--sans);margin:4px 0 0;text-wrap:balance}
.bl-say{margin:14px 0 0;font:500 14.5px/1.45 var(--sans);text-wrap:pretty}
.bl-rows{margin:14px 0 0;display:grid;gap:0}
.bl-rows>div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.page-hero:not(.page-hero--light) .bl-rows>div{border-top-color:var(--dline)}
.bl-rows dt{font:700 12px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.bl-rows dd{margin:0;font:600 14px/1.35 var(--sans)}
.bl-card-go{margin-top:14px;width:100%;justify-content:center}

/* Avatar: one svg, every mood a group, the svg's data-mood shows one (Mary's avatar rule). */
.bl-av{display:block;flex:none;overflow:visible}
.bl-av .bl-av-m{display:none}
.bl-av[data-mood="off-season"] [data-m="off-season"],
.bl-av[data-mood="studying"] [data-m="studying"],
.bl-av[data-mood="called"] [data-m="called"],
.bl-av[data-mood="pass"] [data-m="pass"]{display:inline}
.bl-av-horn{fill:var(--ink-3);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.bl-av-ear,.bl-av-face{fill:var(--light,#fff);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.bl-av-muzzle{fill:var(--line);stroke:var(--ink);stroke-width:2}
.bl-av-beard{fill:var(--ink-2);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.bl-av-coat{fill:var(--brand);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.bl-av-line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.bl-av-eye{fill:var(--ink)}
.bl-av-loupe{fill:none;stroke:var(--brand);stroke-width:3.5}
.bl-av-slab{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.bl-av-label{fill:var(--line-2)}
.bl-av-list{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.page-hero:not(.page-hero--light) .bl-av-face,.page-hero:not(.page-hero--light) .bl-av-ear{fill:#f4f1ea}

/* Profile identity row (mirrors the writer template's avatar + name block). */
.bl-id{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:center;margin-top:8px}
@media (max-width:520px){.bl-id{grid-template-columns:84px minmax(0,1fr);gap:14px}.bl-av--hero{width:84px;height:84px}}
.bl-page .wr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.bl-page .wr-chips li{font:700 11.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink)}

/* Results table: fits first; the product name keeps whole words. */
.bl-table{width:100%;font-variant-numeric:tabular-nums}
.bl-table th[scope="row"]{min-width:12em;font-weight:600}
.bl-table td{text-align:center;white-space:nowrap;min-width:5.5em}
.bl-res--yes{color:var(--gain);font-weight:700}
.bl-res--no{color:var(--ink);font-weight:700}
.bl-res--none{color:var(--ink-3);font-weight:500}
.bl-table tfoot th,.bl-table tfoot td{font-weight:700;border-top:2px solid var(--line-2)}
@media (max-width:700px){.bl-table th[scope="row"]{min-width:9em}.bl-table td{min-width:4.2em}}

/* Provenance: every number says where it came from and when, in real text, never a tooltip. */
.bl-src{margin:14px 0 0;font:500 13px/1.5 var(--sans);color:var(--ink-2);max-width:60em}

/* How it works: one question per row. */
.bl-how{display:grid;gap:0;margin:8px 0 0}
.bl-how>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 0;border-top:1px solid var(--line)}
@media (min-width:760px){.bl-how>div{grid-template-columns:12em minmax(0,1fr);gap:24px}}
.bl-how dt{font:700 15px/1.35 var(--sans);color:var(--ink)}
.bl-how dd{margin:0;color:var(--ink-2);line-height:1.55;text-wrap:pretty}

.bl-rules{margin:8px 0 0;padding-left:1.2em;display:grid;gap:14px;line-height:1.55;color:var(--ink-2)}
.bl-rules b{color:var(--ink)}

/* Browse links: sibling tiles do not stretch to the tallest. */
.bl-links{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;align-items:start}
.bl-links a{display:grid;gap:4px;min-height:44px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);color:var(--ink);text-decoration:none}
.bl-links a:hover{border-color:var(--ink-3)}
.bl-links a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-links b{font:700 15px/1.3 var(--sans)}
.bl-links span{font:500 13.5px/1.4 var(--sans);color:var(--ink-2)}

/* Disclosures: body size, not a grey micro-line (Mary 5.2). */
.bl-foot .bl-tm{margin:0 0 14px;font:500 14px/1.5 var(--sans);color:var(--ink-2);max-width:60em}

/* Site defect found 2026-10-01 (also on /markets/commodities): in light theme the current crumb on a dark hero
   takes --ink, dark on dark, so the page's own name is invisible. Fixed here for Billy's pages; the site-wide fix
   belongs in assets/site.css and is flagged to the main thread. */
.bl-page .page-hero:not(.page-hero--light) .crumbs [aria-current]{color:var(--dink)}

/* 320px: one long word ("Collectibles", "Methodology") in the display face must still fit the column. */
@media (max-width:360px){.bl-page h1.display{font-size:clamp(28px,10vw,40px)}}

/* ===================== Billy's Prize Counter (2026-10-01) =====================
   An arcade prize counter: the wins are the ticket, the slabs sit on lit shelves, and an amount stamps the
   ones it covers. Stamps, ribbons and the meter are always laid out and only shown, so nothing moves. */
.bl-hero--counter{position:relative;overflow:hidden}
.bl-hero--counter::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;pointer-events:none;
  background:radial-gradient(circle at 10px 5px,var(--amber) 2.5px,transparent 3.5px) 0 0/20px 10px;opacity:.75}
.bl-says{text-wrap:pretty}
.bl-status .btn{min-width:11em}

/* The ticket: perforated edge, a big number that never reflows its card. */
.bl-ticket{position:relative;border-style:dashed;border-width:2px}
.page-hero:not(.page-hero--light) .bl-ticket{border-color:var(--amber)}
.bl-ticket-n{display:block;font:800 clamp(30px,4.2vw,40px)/1.05 var(--cond,var(--sans));letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--amber)}
.bl-ticket-l{display:block;font:700 13px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;opacity:.8}
.bl-ticket .bl-rows dd{font-variant-numeric:tabular-nums;text-align:right}
.bl-ticket .bl-src{color:inherit;opacity:.75;margin-top:10px}

/* Who won them: two tiles, avatar left, months below. */
.bl-agents{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;align-items:start}
.bl-agent{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper);padding:16px 18px}
.bl-agent>a:first-child{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;color:var(--ink);text-decoration:none}
.bl-agent img{display:block;width:88px;height:88px;border-radius:var(--r);background:var(--surface-2)}
.bl-agent-who b{display:block;font:800 18px/1.25 var(--sans)}
.bl-agent-who span{display:block;font:500 14px/1.4 var(--sans);color:var(--ink-2)}
.bl-agent-rows{margin:12px 0 0;display:grid}
.bl-agent-rows>div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.bl-agent-rows dt{font:700 12px/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.bl-agent-rows dd{margin:0;font-variant-numeric:tabular-nums}
.bl-agent-rows dd b{color:var(--gain);font:800 16px/1.3 var(--sans)}
.bl-agent-rows dd span{color:var(--ink-2);font-size:13.5px;margin-left:6px}
.bl-agent-go{display:inline-block;margin-top:10px;font-weight:700}

/* Shared widget layout: inputs left, a fixed readout right; stacks on phones. */
.bl-sim-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
@media (min-width:900px){.bl-sim-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px}}
.bl-sim-in{display:grid;gap:16px}
.bl-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:8px}
.bl-chips--sm{grid-template-columns:repeat(4,minmax(0,1fr))}
.bl-chip{display:grid;align-content:center;gap:2px;min-height:52px;padding:8px 12px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.bl-chips--sm .bl-chip{min-height:44px;text-align:center}
.bl-chip b{font:800 15px/1.2 var(--sans)}
.bl-chip span{font:600 12.5px/1.2 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.bl-chip:hover{border-color:var(--ink-3)}
.bl-chip[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.bl-chip:focus-visible,.bl-seg-b:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-amt,.bl-field{display:grid;gap:6px;font:700 13px/1.3 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.bl-field output{float:right;color:var(--ink);font-variant-numeric:tabular-nums;text-transform:none}
.bl-amt-box{display:flex;align-items:center;border:1px solid var(--line-3);border-radius:var(--r);background:var(--paper);max-width:16em}
.bl-amt-box i{font-style:normal;padding:0 0 0 12px;color:var(--ink-2);font-size:16px}
.bl-amt input,.bl-field select{width:100%;min-height:44px;border:0;background:transparent;color:var(--ink);font:700 16px/1 var(--sans);padding:0 12px;font-variant-numeric:tabular-nums}
.bl-field select{border:1px solid var(--line-3);border-radius:var(--r);background:var(--paper);text-transform:none;letter-spacing:0;font-weight:600}
.bl-field input[type=range]{width:100%;accent-color:var(--brand);min-height:32px}
.bl-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bl-seg-b{min-height:44px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--paper);color:var(--ink);font:700 14.5px/1.2 var(--sans);cursor:pointer;padding:6px 10px;text-transform:none;letter-spacing:0}
.bl-seg-b[data-side="yes"][aria-pressed="true"]{border-color:var(--gain);background:var(--gain-soft);box-shadow:inset 0 0 0 1px var(--gain)}
.bl-seg-b[data-side="no"][aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}

/* The readout: every row present from the first paint, each value two lines tall at most. */
.bl-read{margin:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper);padding:6px 18px;box-shadow:var(--shadow)}
.bl-read>div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.bl-read>div:first-child{border-top:0}
.bl-read dt{font:700 12px/1.45 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.bl-read dd{margin:0;font:600 15px/1.4 var(--sans);font-variant-numeric:tabular-nums;min-height:2.8em}
@media (max-width:520px){.bl-read>div{grid-template-columns:minmax(0,1fr);gap:2px}.bl-read dd{min-height:2.8em}}
.bl-meter{display:block;height:10px;margin-top:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bl-meter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .25s}
#bt-res.is-win{color:var(--gain)}
#bt-res.is-loss{color:var(--loss-ink,var(--loss))}

/* The shelves: each price band is a lit shelf; slabs sit on its lip. */
.bl-shelf{margin-top:26px}
.bl-shelf-h{font:800 14px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.bl-shelf-row{list-style:none;margin:0;padding:0 0 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;align-items:start;
  border-bottom:6px solid var(--line-2);box-shadow:0 10px 14px -12px rgba(0,0,0,.35)}
.bl-slab{display:grid;gap:6px;opacity:.55;transition:opacity .2s}
.bl-slab.is-in{opacity:1}
.bl-slab-case{position:relative;border:2px solid var(--line-3);border-radius:10px;background:var(--surface-2);padding:7px;box-shadow:inset 0 0 0 3px var(--paper)}
.bl-slab-label{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;background:var(--paper);border:1px solid var(--line-2);border-radius:5px;padding:6px 8px}
.bl-slab-name{font:800 12.5px/1.25 var(--sans);color:var(--ink);min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-slab-set{grid-row:2;font:600 11px/1.3 var(--sans);color:var(--ink-2);min-height:2.6em}
.bl-slab-grade{grid-row:1/3;grid-column:2;align-self:center;min-width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:var(--brand);color:var(--on-brand);font:800 16px/1 var(--cond,var(--sans))}
.bl-slab-win{margin-top:7px;aspect-ratio:63/56;border-radius:6px;background:var(--paper);padding:7px;border:1px solid var(--line-2)}
.bl-slab-card{height:100%;border-radius:5px;display:grid;align-content:end;gap:4px;padding:8px;
  background:linear-gradient(135deg,var(--brand-soft) 0%,var(--surface-2) 38%,var(--chip) 52%,var(--brand-soft) 70%,var(--surface-2) 100%);
  border:1px solid var(--line-2)}
.bl-slab[data-g] .bl-slab-card{background:linear-gradient(135deg,rgba(124,77,214,.28) 0%,var(--surface-2) 40%,rgba(124,77,214,.18) 62%,var(--chip) 100%)}
.bl-slab-card span{font:700 11px/1.25 var(--sans);color:var(--ink-2);letter-spacing:.03em;text-transform:uppercase}
.bl-slab-card .bl-slab-lang{color:var(--brand-ink)}
.bl-slab-stamp{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-12deg);padding:4px 10px;border:3px solid var(--gain);border-radius:6px;
  color:var(--gain);background:color-mix(in srgb,var(--paper) 80%,transparent);font:800 16px/1 var(--cond,var(--sans));letter-spacing:.08em;text-transform:uppercase;visibility:hidden}
.bl-slab.is-in .bl-slab-stamp{visibility:visible}
.bl-slab-pick{position:absolute;right:-6px;top:-10px;padding:4px 8px;border-radius:6px;background:var(--amber);color:#1b1404;font:800 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;visibility:hidden;box-shadow:var(--shadow)}
.bl-slab.is-pick .bl-slab-pick{visibility:visible}
.bl-slab.is-pick .bl-slab-case{border-color:var(--amber)}
.bl-tag{justify-self:start;margin:2px 0 0;padding:5px 14px;font:800 16px/1.1 var(--sans);font-variant-numeric:tabular-nums;color:#1b1404;background:var(--amber);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px) right/51% 100% no-repeat}
.bl-tag span{font-weight:600;font-size:12px;opacity:.8}
.bl-slab-why{margin:0;font:500 13px/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
.bl-slab-src{margin:0;font:500 12px/1.4 var(--sans);color:var(--ink-3)}
.bl-record{margin-top:22px}
@media (max-width:420px){.bl-shelf-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bl-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.bl-tag{font-size:14px;padding:5px 11px}.bl-slab-stamp{font-size:13px}}
.bl-slab,.bl-slab>*{min-width:0}
.bl-slab{grid-template-columns:minmax(0,1fr)}
@media (max-width:420px){.bl-read dd{min-height:1.4em}#bl-r-best,.bl-read-g dd,#bt-buy,#bt-win,#bt-res{min-height:4.2em}}
#bl-r-next{display:block;min-height:2.8em}.bl-read-g dd{min-height:0}
@media (max-width:420px){#bl-r-next{min-height:5.6em}}
.bl-ticket .bl-rows>div{grid-template-columns:9em minmax(0,1fr)}
#bl-r-best,#bl-r-next{display:block;min-height:4.2em}
@media (max-width:420px){#bl-r-best,#bl-r-next{min-height:5.6em}}

/* The line (2026-10-01, Jay: "u need to show the line price better"): the market's question in one box,
   above the side buttons, so Yes and No read against a number. */
.bl-line{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:baseline;
  padding:12px 16px;border:1px solid var(--line-2);border-left:4px solid var(--brand);border-radius:var(--r);background:var(--paper)}
.bl-line-k{grid-column:1/-1;font:700 12px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.bl-line-v{font:800 30px/1.1 var(--cond,var(--sans));font-variant-numeric:tabular-nums;color:var(--ink);min-width:5.2em}
.bl-line-note{font:500 13.5px/1.4 var(--sans);color:var(--ink-2);min-height:2.8em;text-wrap:pretty}
@media (max-width:420px){.bl-line{grid-template-columns:minmax(0,1fr)}.bl-line-note{min-height:4.2em}}
.bl-seg-b b{font-weight:800}
.bl-seg-b span{font-weight:600;font-variant-numeric:tabular-nums}

/* Market browser (2026-10-01, Jay: "organize this better ... so we can browse and see prices"): a toolbar, then
   one card per product with its months as rows. Cards keep their own height; nothing stretches to a neighbour. */
.bl-tools{display:grid;gap:12px;margin-top:8px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper)}
.bl-tools-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px;align-items:center}
@media (max-width:860px){.bl-tools-row{grid-template-columns:minmax(0,1fr)}}
.bl-tabs{display:flex;flex-wrap:wrap;gap:6px}
.bl-tab{min-height:40px;padding:0 14px;border:1px solid var(--line-3);border-radius:999px;background:var(--paper);color:var(--ink);font:700 14px/1 var(--sans);cursor:pointer;white-space:nowrap}
.bl-tab span{font-weight:600;color:var(--ink-2);margin-left:4px;font-variant-numeric:tabular-nums}
.bl-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bl-tab[aria-pressed="true"] span{color:inherit;opacity:.75}
.bl-tab:focus-visible,.bl-mk-try:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bl-tabs--sm .bl-tab{min-height:36px;font-size:13.5px}
.bl-search input,.bl-sort select{min-height:40px;width:100%;border:1px solid var(--line-3);border-radius:var(--r);background:var(--paper);color:var(--ink);font:600 15px/1 var(--sans);padding:0 12px}
.bl-sort{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.bl-sort select{width:auto;text-transform:none;letter-spacing:0}
.bl-count{margin:0;font:600 14px/1.4 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.bl-mks{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.bl-mk{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--paper);padding:16px 16px 14px}
.bl-mk[hidden]{display:none}
.bl-mk-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bl-mk-h h3{margin:0;font:800 17px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.bl-mk-kind{flex:none;padding:4px 8px;border-radius:999px;background:var(--chip);color:var(--ink-2);font:700 11px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.bl-mk-t{width:100%;margin-top:10px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bl-mk-t th,.bl-mk-t td{padding:8px 4px;text-align:right;border-top:1px solid var(--line);font:600 14px/1.2 var(--sans);white-space:nowrap}
.bl-mk-t thead th{border-top:0;padding-top:0;font:700 11px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.bl-mk-t th:first-child,.bl-mk-t td:first-child{text-align:left}
.bl-mk-t tbody th{font-weight:800;color:var(--ink)}
.bl-mk-t tr[hidden]{display:none}
.bl-mv--up{color:var(--gain)}
.bl-mv--dn{color:var(--loss-ink,var(--loss))}
.bl-res-pill{display:inline-block;min-width:3.2em;padding:4px 0;border-radius:999px;text-align:center;font:800 12px/1 var(--sans);letter-spacing:.03em}
.bl-res-pill--yes{background:var(--gain-soft);color:var(--gain)}
.bl-res-pill--no{background:var(--chip);color:var(--ink)}
.bl-mk-tries{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bl-mk-try{min-height:36px;padding:0 12px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--paper);color:var(--brand-ink);font:700 13px/1 var(--sans);cursor:pointer}
.bl-mk-try:hover{border-color:var(--brand)}
.bl-mk-try[hidden]{display:none}
.bl-empty{margin:18px 0 0;font:600 15px/1.5 var(--sans);color:var(--ink-2)}
@media (max-width:380px){.bl-mk{padding:14px 12px 12px}.bl-mk-t th,.bl-mk-t td{font-size:13px;padding:7px 2px}}
@media (max-width:420px){.bl-seg-b{min-height:70px}#bt-res{min-height:5.6em}}
@media (max-width:400px){.bl-mk-t th:nth-child(4),.bl-mk-t td:nth-child(4){display:none}}