/* Lists (round 3, 2026-11-03): /categories, /categories/{slug} and /movers. The plates, instruments, chrome figure, provenance
   line, chips, chip tones, tables and row sheen are site.css's; this file styles what belongs to these pages: the share bars,
   the up/down split, the composition strip (a one-row treemap on the market map's shading scale), the movers' spread
   histogram and the lists. Cyan is up and the lit part of a bar, magenta down, lavender the scale and the labels. Nothing
   here moves on its own; the only transitions answer a pointer, and html.calm drops them with the rest of the site's. */

/* ---- page heads: the intro on the left, the reading or the period tabs on the right */
.ls-head,.mv-head{align-items:flex-end}
.ls-prov{justify-content:flex-end;margin:0 0 4px}
.ls-reading{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:0;text-align:right}
.ls-reading .provenance{justify-content:flex-end;white-space:nowrap}
.ls-reading .provenance>span+span::before,.ls-prov>span+span::before{content:"·";margin-right:10px;color:var(--lavender-text)}
.crumbs a{display:inline-block;padding:8px 0;margin:-8px 0}

/* chip intensity: how strongly a change lights its chip (site.css's chip-tone reads --m) */
.lv1{--m:.45}.lv2{--m:.65}.lv3{--m:.85}.lv4{--m:1}

/* ---- a share bar: a faint track and the lit part, as wide as the share */
.ls-bar{display:block;width:100%;height:6px;border-radius:3px;overflow:hidden}
.ls-track{fill:rgba(201,184,255,.13)}
.ls-fill{fill:var(--cyan)}
.ls-pct{font:600 13px var(--mono);font-variant-numeric:tabular-nums;color:var(--text);text-align:right;white-space:nowrap}

/* ---- the categories board */
.ls-board{margin:28px 0 0}
.ls-table th:first-child,.ls-table td:first-child{padding-left:16px}
.ls-table th:last-child,.ls-table td:last-child{padding-right:16px}
.ls-table tbody th{font:inherit;font-weight:600;font-size:15px;text-transform:none;letter-spacing:0;color:var(--text);white-space:normal;text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ls-table tbody tr:hover th,.ls-table tbody tr:focus-within th{box-shadow:inset 2px 0 0 var(--cyan)}
.ls-name a{color:var(--text)}
.ls-name a:hover{color:var(--cyan);text-decoration:none}
.ls-sub{display:block;margin-top:3px;font:500 11px var(--mono);letter-spacing:.04em;color:var(--muted)}
.ls-sub-cap{display:none}
.ls-col-share{width:32%}
.ls-share{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:12px;min-width:150px}
.ls-top{white-space:nowrap}
.ls-top a{display:inline-flex;align-items:center;gap:6px;margin-right:14px;padding:4px 0;color:var(--text-2);font:500 11px var(--mono);letter-spacing:.04em}
.ls-top a:last-child{margin-right:0}
.ls-top a:hover{color:var(--cyan);text-decoration:none}
.ls-top .coin-logo{width:20px;height:20px}
.ls-foot{margin:0;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.ls-empty{margin:0;padding:16px;color:var(--muted)}

.ls-notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ls-notes-grid h3{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text);margin:0 0 8px}
.ls-notes-grid p{margin:0;color:var(--text-2);max-width:60ch}

/* ---- one category: three instruments */
.ls-instruments{grid-template-columns:repeat(3,minmax(0,1fr))}
.ls-instruments .instrument-caption{margin-top:auto}
.ls-meters{flex-direction:column;align-items:stretch;justify-content:center;gap:12px}
.ls-meter{display:grid;grid-template-columns:86px minmax(0,1fr) 72px;align-items:center;gap:10px}
.ls-meter-label{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lavender-text);white-space:nowrap}

.ls-today{flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
.ls-split{display:block;width:100%;height:12px}
.ls-split .ls-up{fill:var(--up)}
.ls-split .ls-down{fill:var(--down)}
.ls-split .ls-flat{fill:var(--tone-flat)}
.ls-split-key{display:flex;justify-content:space-between;gap:12px;margin:0;font:600 14px var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* the composition strip: tiles tinted like the market map's (a dark mix of the tone, a lit top edge), labels in text ink */
.ls-strip{display:block;width:100%;height:auto;overflow:visible}
.ls-seg{--tone:var(--tone-flat);--m:.3}
.ls-seg rect{fill:color-mix(in oklab,var(--tone) calc(14% + var(--m) * 30%),#0b0b14);transition:filter var(--t-fast)}
.ls-seg .ls-edge{fill:color-mix(in oklab,var(--tone) calc(40% + var(--m) * 50%),transparent)}
.ls-seg:hover rect{filter:brightness(1.3)}
.ls-seg text{font:600 10.5px var(--mono);letter-spacing:.03em;fill:var(--text);pointer-events:none}
.ls-u1,.ls-u2,.ls-u3,.ls-u4{--tone:var(--tone-up)}
.ls-d1,.ls-d2,.ls-d3,.ls-d4{--tone:var(--tone-down)}
.ls-u1,.ls-d1{--m:.25}.ls-u2,.ls-d2{--m:.5}.ls-u3,.ls-d3{--m:.75}.ls-u4,.ls-d4{--m:1}
.ls-f0{--tone:var(--tone-flat);--m:.3}
.ls-rest{--tone:var(--lavender);--m:.1}
.ls-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px 14px;font:500 11px var(--mono);font-variant-numeric:tabular-nums}
.ls-legend li{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.ls-legend b{color:var(--text);font-weight:600}
.ls-legend-name{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.ls-sw{flex:none;width:10px;height:10px;border-radius:2px;background:color-mix(in oklab,var(--tone) calc(14% + var(--m) * 30%),#0b0b14);border:1px solid color-mix(in oklab,var(--tone) calc(40% + var(--m) * 50%),transparent)}

/* the shared coins and the names the group was built from, side by side */
.ls-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:var(--gap-section) 0 0;align-items:start}
.ls-overlap{list-style:none;margin:0;padding:4px 16px 8px}
.ls-overlap li{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 88px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.ls-overlap li:last-child{border-bottom:0}
.ls-overlap a{display:block;padding:4px 0;color:var(--text);font-weight:600}
.ls-overlap a:hover{color:var(--cyan);text-decoration:none}
.ls-sources-body{padding:14px 16px 16px}
.ls-sources-body>p:first-child{margin:0 0 12px;color:var(--text-2);font-size:14px}
.ls-names{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ls-names li{display:inline-flex;align-items:baseline;gap:8px;padding:5px 9px;border:1px solid var(--line-2);border-radius:var(--r);font-size:13px;color:var(--text)}
.ls-names b{font:500 10.5px var(--mono);letter-spacing:.04em;color:var(--muted)}
.ls-note{margin:0;font-size:13px;color:var(--muted)}

/* ---- movers: the period tabs, the spread, the two lists, the records */
.mv-periods{margin:0}
.mv-periods .chip{display:inline-flex;align-items:center;min-height:38px}
.mv-spread{margin:28px 0 0}
.mv-none{margin:0;padding:12px 0 4px;color:var(--muted)}
.mv-spread-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:center}
.mv-hist{min-width:0;padding-top:6px}
.mv-bars{display:block;width:100%;height:150px;overflow:visible}
.mv-bars rect{--tone:var(--tone-flat);--m:.4;fill:color-mix(in oklab,var(--tone) calc(var(--m) * 100%),var(--tone-flat));transition:filter var(--t-fast)}
.mv-bars rect:hover{filter:brightness(1.3)}
.mv-bars .mv-u1,.mv-bars .mv-u2,.mv-bars .mv-u3,.mv-bars .mv-u4{--tone:var(--tone-up)}
.mv-bars .mv-d1,.mv-bars .mv-d2,.mv-bars .mv-d3,.mv-bars .mv-d4{--tone:var(--tone-down)}
.mv-bars .mv-u1,.mv-bars .mv-d1{--m:.4}.mv-bars .mv-u2,.mv-bars .mv-d2{--m:.6}.mv-bars .mv-u3,.mv-bars .mv-d3{--m:.8}.mv-bars .mv-u4,.mv-bars .mv-d4{--m:1}
.mv-base{stroke:var(--line-3);stroke-width:1;vector-effect:non-scaling-stroke}
.mv-zero{stroke:rgba(233,236,243,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.mv-median{stroke:var(--lavender);stroke-width:2;vector-effect:non-scaling-stroke}
/* 22 columns: the ten bins each side of zero and the two end bins (MoversController::BINS) */
.mv-axis{display:grid;grid-template-columns:repeat(22,minmax(0,1fr));height:14px;margin-top:8px;font:500 10px/14px var(--mono);letter-spacing:.04em;color:var(--lavender-text)}
.mv-axis span{position:relative}
.mv-axis i{position:absolute;left:0;top:0;transform:translateX(-50%);font-style:normal;white-space:nowrap}
.mv-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin:0}
.mv-stats div{padding-top:8px;border-top:1px solid var(--line)}
.mv-stats dt{display:flex;align-items:center;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.mv-stats dd{margin:4px 0 0;font:600 22px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text)}
.mv-stats dd.up{color:var(--up)}.mv-stats dd.down{color:var(--down)}
.mv-key{display:inline-block;flex:none;width:2px;height:11px;margin-right:8px;background:var(--lavender)}
.mv-table-view{margin-top:2px}
.mv-table-view summary{display:inline-block;padding:6px 0}
.mv-bands{max-width:360px;margin-top:6px}

.mv-lists{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:28px 0 0;align-items:start}
.mv-table th:first-child,.mv-table td:first-child{padding-left:16px}
.mv-table th:last-child,.mv-table td:last-child{padding-right:16px}
.mv-table th,.mv-table td{padding-left:8px;padding-right:8px}
.mv-table td{padding-top:8px;padding-bottom:8px}
.mv-table .coin-name{max-width:150px}
.mv-table .coin-sym{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-table .coin-logo{width:22px;height:22px}
.mv-highs{margin:28px 0 0}
.mv-when{font:500 12px var(--mono);color:var(--text-2);white-space:nowrap}
.mv-at{font:600 11px var(--mono);letter-spacing:.04em;color:var(--cyan);white-space:nowrap}

.mv-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px 28px;margin:0}
.mv-defs div{padding-top:12px;border-top:1px solid var(--line)}
.mv-defs dt{margin:0 0 6px;font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lavender-text)}
.mv-defs dd{margin:0;font-size:14px;line-height:1.55;color:var(--text-2)}
.mv-foot{max-width:80ch;margin:24px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* ---- narrower screens */
/* the two lists sit side by side only where a row fits its panel */
@media (max-width:1280px){
  .mv-lists{grid-template-columns:minmax(0,1fr)}
  .mv-table .coin-name{max-width:none}
}
@media (max-width:1100px){
  .ls-top-sym{display:none}
  .ls-top a{margin-right:8px;padding:6px 0}
  .ls-instruments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ls-made{grid-column:1/-1}
}
/* the strip spans both columns here: the legend moves beside it, so the strip keeps about its drawn size */
@media (min-width:641px) and (max-width:1100px){
  .ls-made{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:center}
  .ls-made .instrument-head,.ls-made .instrument-caption{grid-column:1/-1}
}
@media (max-width:900px){
  .ls-notes-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .ls-pair{grid-template-columns:minmax(0,1fr)}
  .mv-spread-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .mv-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ls-reading{align-items:flex-start;text-align:left}
  .ls-reading .provenance,.ls-prov{justify-content:flex-start;white-space:normal}
}
@media (max-width:640px){
  .ls-instruments{grid-template-columns:minmax(0,1fr)}
  .ls-sub-cap{display:block;margin-top:1px}
  .ls-col-share{width:auto}
  .ls-share{grid-template-columns:minmax(0,1fr) 60px;gap:8px;min-width:110px}
  .ls-table tbody th{font-size:14px}
  .ls-name a{display:inline-block;padding:12px 0;margin:-12px 0}
  .ls-overlap a{padding:12px 0;margin:-8px 0}
  .crumbs a{padding:14px 0;margin:-14px 0}
  .ls-meter{grid-template-columns:78px minmax(0,1fr) 64px}
  .ls-overlap li{grid-template-columns:minmax(0,1fr) 84px;row-gap:6px}
  .ls-overlap .ls-bar{grid-column:1/-1;grid-row:2}
  .mv-periods{width:100%}
  .mv-periods .chip{min-height:44px;flex:1 1 0;justify-content:center}
  .mv-bars{height:120px}
  .mv-axis{font-size:9.5px}
  .mv-stats{grid-template-columns:1fr 1fr}
  .mv-stats dd{font-size:19px}
  .mv-table td{padding-top:5px;padding-bottom:5px}
  .mv-table .coin-cell>a{min-height:44px}
  .mv-table-view summary{padding:12px 0}
}
@media (forced-colors:active){
  .ls-fill,.ls-split rect,.ls-seg rect,.mv-bars rect{fill:CanvasText}
  .ls-track{fill:GrayText}
  .ls-seg text{fill:Canvas}
  .ls-sw{background:CanvasText}
  .mv-median{stroke:Highlight}
}