/* HistGramBench note: components adapted from the HistGramBench artifact (cards, bars, steps, gallery,
   leaderboard), using the variables of /research/template.css and the colours set in figures.css. */

.tldr-box { background: var(--manilla); border-left: 3px solid var(--crail); padding: 18px 22px 6px; margin: 32px 0 8px; }
.tldr-box h2.callout-label { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--missed-text); margin: 0 0 10px; }
.tldr-box ol { margin: 0 0 12px; padding-left: 22px; }
.tldr-box li { margin-bottom: 10px; line-height: 1.55; }
.kicker { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); margin: 40px 0 8px; }

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--bone); border-bottom: 1px solid var(--bone); margin: 8px 0 0; }
.stat { padding: 18px 12px; border-left: 1px solid var(--bone); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { display: block; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-family: var(--sans); font-size: 12px; color: var(--stone); }
.plates-fig { margin: 16px 0 8px; }
.plates { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.plates:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.plate { flex: 0 0 auto; margin: 0; }
.plate img { display: block; height: 104px; width: auto; max-width: none; background: #fff; border: 1px solid var(--bone); }
.plate figcaption { font-family: var(--sans); font-size: 11px; color: var(--stone); margin-top: 6px; }
.plates-note { font-family: var(--sans); font-size: 13px; color: var(--stone); margin-top: 6px; line-height: 1.5; }

.card { background: var(--manilla); border: 1px solid var(--bone); padding: 22px 24px 16px; margin: 8px 0 24px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.card-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0; }
.card-sub { font-family: var(--sans); font-size: 13px; color: var(--stone); margin: 4px 0 0; max-width: 560px; }
.card-foot { font-family: var(--sans); font-size: 12px; color: var(--stone); border-top: 1px solid var(--bone); padding-top: 12px; margin-top: 14px; line-height: 1.55; }
.card .download { margin-top: 8px; }

.hbars { display: grid; gap: 6px; }
.hrow { display: grid; grid-template-columns: 172px minmax(0, 1fr) 48px; align-items: center; gap: 2px 12px; border-radius: 2px; }
.hrow[data-model] { cursor: pointer; }
.hrow[data-model]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hlabel { font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.25; }
.hlabel small { display: block; font-weight: 400; font-size: 11px; color: var(--stone); }
.htrack, .dtrack, .divtrack { position: relative; height: 26px; display: block; }
.grid { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--bone); }
.hbar { position: absolute; left: 0; top: 3px; height: 20px; border-radius: 0 3px 3px 0; transition: width .35s ease; }
.hrow[data-tier="1"] .hbar, .hrow[data-tier="1"] .stack .ok { background: var(--tier1); }
.hrow[data-tier="2"] .hbar, .hrow[data-tier="2"] .stack .ok { background: var(--tier2); }
.hrow[data-tier="3"] .hbar, .hrow[data-tier="3"] .stack .ok { background: var(--tier3); }
.hval { font-family: var(--sans); font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.axis { display: grid; grid-template-columns: 172px minmax(0, 1fr) 48px; gap: 12px; margin-top: 6px; }
.axis-ticks { position: relative; height: 16px; font-family: var(--sans); font-size: 11px; color: var(--stone); }
.axis-ticks span { position: absolute; transform: translateX(-50%); }
.tier-break { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--stone); margin-top: 6px; }
.tier-break::after { content: ""; flex: 1; border-top: 1px dashed var(--wax); }
.tier-break .sw { margin-right: 0; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--sans); font-size: 12px; color: var(--graphite); margin-bottom: 12px; }
.legend i { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-right: 6px; }
.lg-ok { background: linear-gradient(90deg, var(--tier1) 33%, var(--tier2) 33% 66%, var(--tier3) 66%); }
.lg-no, .stack .no { background: repeating-linear-gradient(45deg, var(--wax) 0 4px, var(--manilla) 4px 7px); border: 1px solid var(--wax); }
.lg-all { background: var(--wax); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--stone); }
.lg-drawn { background: var(--ink); border-radius: 50%; }
.stack { position: absolute; inset: 3px 0; display: flex; gap: 2px; }
.stack .ok, .stack .no { height: 20px; display: block; }
.stack .no { flex: 1; border-radius: 0 3px 3px 0; }
.why { grid-column: 2 / -1; font-family: var(--sans); font-size: 11.5px; color: var(--stone); margin-bottom: 4px; }
.dline { position: absolute; top: 12px; height: 2px; background: var(--wax); }
.dot { position: absolute; top: 6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--manilla); }
.dot.all { background: var(--wax); box-shadow: inset 0 0 0 1px var(--stone); }
.dot.drawn { background: var(--ink); }
.hrow[data-tier="1"] .dot.drawn { background: var(--tier1); }
.hrow[data-tier="2"] .dot.drawn { background: var(--tier2); }
.hrow[data-tier="3"] .dot.drawn { background: var(--tier3); }
.range-row .htrack { height: 34px; }
.range { position: absolute; top: 20px; height: 8px; background: var(--tier2); opacity: .55; border-radius: 4px; }
.range-row.hard .range { background: var(--crail); opacity: .8; }
.rend { position: absolute; top: 15px; width: 2px; height: 18px; background: var(--ink); }
.rlab { position: absolute; top: -1px; font-family: var(--sans); font-size: 11px; color: var(--graphite); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.divzone { position: absolute; top: 0; bottom: 0; background: var(--manilla-deep); border-left: 1px dashed var(--wax); border-right: 1px dashed var(--wax); }
.divzero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--stone); }
.divbar { position: absolute; top: 5px; height: 16px; background: var(--graphite); }
.divbar.pos { border-radius: 0 3px 3px 0; }
.divbar.neg { border-radius: 3px 0 0 3px; }
.hrow[data-tier="1"] .divbar { background: var(--tier1); }
.hrow[data-tier="2"] .divbar { background: var(--tier2); }
.hrow[data-tier="3"] .divbar { background: var(--tier3); }
.hrow.pooled { border-top: 1px solid var(--bone); padding-top: 8px; margin-top: 4px; }
.hrow.pooled .divbar { background: var(--ink); }

/* Selection across all charts */
.hrow.is-dim .hbar, .hrow.is-dim .stack .ok, .hrow.is-dim .dot, .hrow.is-dim .divbar, .hrow.is-dim .dline { opacity: 0.25; }
.hrow.is-dim .hlabel, .hrow.is-dim .hval, .hrow.is-dim .why { color: var(--stone); }
.hrow.is-sel .hname, .hrow.is-sel .hval { font-weight: 700; }
.hrow.is-sel .hbar, .hrow.is-sel .stack .ok, .hrow.is-sel .divbar { box-shadow: 0 0 0 2px var(--manilla), 0 0 0 4px var(--ink); }
.hrow.is-sel .dot.drawn { box-shadow: 0 0 0 2px var(--ink); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bone); background: var(--manilla); margin: 8px 0 24px; }
.step { padding: 20px; border-left: 1px solid var(--bone); min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.step:first-child { border-left: 0; }
.step h3 { margin: 0; font-size: 18px; }
.step p { font-family: var(--sans); font-size: 13px; color: var(--graphite); margin: 0; line-height: 1.55; }
.stepno { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--missed-text); }
.step img { width: 100%; height: 150px; object-fit: contain; background: #fff; border: 1px solid var(--bone); }
.step pre { margin: 0; font-size: 11px; line-height: 1.45; padding: 10px 12px; max-height: 230px; overflow: auto; }
.mini-checks { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 12.5px; border: 1px solid var(--bone); background: #fff; }
.mini-checks li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--manilla-deep); margin: 0; line-height: 1.35; }
.mini-checks li:first-child { border-top: 0; }
.mini-checks .y { color: #17704f; font-weight: 600; }
.mini-checks .n { color: var(--missed-text); font-weight: 600; }

/* Gallery */
.gallery-fig { margin: 8px 0 24px; }
.gallery { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.gal { margin: 0; background: #fff; border: 1px solid var(--bone); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gal[data-model] { cursor: pointer; }
.gal[data-model]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gal img { width: 100%; height: 110px; object-fit: contain; }
.gal.orig { grid-row: 1 / span 2; }
.gal.orig img { height: 100%; min-height: 220px; flex: 1; }
.gal figcaption { font-family: var(--sans); font-size: 12px; color: var(--graphite); display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0; }
.gal figcaption b { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.gal .meter { display: block; height: 4px; background: var(--manilla-deep); overflow: hidden; }
.gal .meter i { display: block; height: 100%; background: var(--ink); }
.gal[data-tier="1"] .meter i { background: var(--tier1); }
.gal[data-tier="2"] .meter i { background: var(--tier2); }
.gal[data-tier="3"] .meter i { background: var(--tier3); }
.gal-sub { font-family: var(--sans); font-size: 11px; color: var(--stone); }
.gal.low figcaption b { color: var(--missed-text); }
.gal.is-dim { opacity: 0.45; }
.gal.is-sel { box-shadow: 0 0 0 2px var(--ink); }

/* Leaderboard */
.lb-wrap { border: 1px solid var(--bone); background: var(--manilla); overflow-x: auto; margin: 0 0 8px; }
table.lb { width: 100%; min-width: 720px; border-collapse: collapse; font-family: var(--sans); font-size: 14px; margin: 0; background: none; }
.lb thead th { text-align: right; font-weight: 500; font-size: 12px; color: var(--stone); padding: 0; border-bottom: 1px solid var(--bone); vertical-align: bottom; }
.lb thead th:first-child, .lb thead th:nth-child(2), .lb thead th:last-child { text-align: left; }
.lb thead .sort-btn { display: block; padding: 12px 14px; line-height: 1.35; text-align: inherit; }
.lb thead .sort-ind::after { content: "↕"; color: var(--bone); margin-left: 4px; }
.lb thead th[aria-sort="descending"] .sort-ind::after { content: "↓"; color: var(--ink); }
.lb thead th[aria-sort="ascending"] .sort-ind::after { content: "↑"; color: var(--ink); }
.lb thead th.hl { border-top: 2px solid var(--crail); border-left: 2px solid var(--crail); border-right: 2px solid var(--crail); color: var(--ink); font-weight: 600; }
.lb td, .lb tbody th { padding: 12px 14px; border-bottom: 1px solid var(--bone); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }
.lb tbody th { text-align: left; font-weight: 400; }
.lb td.tcol, .lb td.fail { text-align: left; }
.lb td.fail { font-size: 12px; color: var(--graphite); }
.lb td.hl { border-left: 2px solid var(--crail); border-right: 2px solid var(--crail); font-weight: 600; }
.lb tbody tr:last-child td.hl { border-bottom: 2px solid var(--crail); }
.lb .mname { display: block; font-weight: 600; }
.lb .org { display: block; color: var(--stone); font-size: 12px; }
.lb tbody tr { cursor: pointer; }
.lb tbody tr:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lb tr.is-sel th, .lb tr.is-sel td { background: var(--manilla-deep); }
.lb tr.is-sel .mname { text-decoration: underline; text-decoration-thickness: 2px; }
.lb tr.is-dim th, .lb tr.is-dim td, .lb tr.is-dim .org { color: var(--stone); }
.lb tr.is-dim .cellbar i { opacity: .3; }
.pill { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.lb .cellbar { display: inline-block; vertical-align: middle; width: 56px; height: 6px; margin: 0 0 0 8px; }
.lb .cellbar i { background: var(--graphite); }
.lb td.hl .cellbar i { background: var(--crail); }
.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; font-family: var(--sans); font-size: 13px; color: var(--graphite); margin: 12px 0 24px; }
.glossary dt { font-weight: 600; color: var(--ink); }
.glossary dd { margin: 0 0 8px; }

/* Resources */
.reslinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--bone); background: var(--manilla); margin: 8px 0; }
.reslink { display: flex; flex-direction: column; gap: 4px; padding: 18px; text-decoration: none; border-left: 1px solid var(--bone); min-width: 0; color: var(--ink); }
.reslink:first-child { border-left: 0; }
a.reslink:hover { background: var(--manilla-deep); }
.reslink b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.reslink span { font-family: var(--sans); font-size: 12px; color: var(--stone); }
.reslink.is-pending b { color: var(--stone); }
.refs { font-family: var(--sans); font-size: 13px; color: var(--graphite); padding-left: 20px; }
.refs li { margin-bottom: 8px; }
.limits li { margin-bottom: 12px; }

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--bone); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { border-left: 0; border-top: 1px solid var(--bone); }
  .step:first-child { border-top: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal.orig { grid-row: auto; grid-column: 1 / -1; }
  .gal.orig img { min-height: 160px; height: 180px; }
  .reslinks { grid-template-columns: minmax(0, 1fr); }
  .reslink { border-left: 0; border-top: 1px solid var(--bone); }
  .reslink:first-child { border-top: 0; }
  .glossary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .hrow, .axis { grid-template-columns: 108px minmax(0, 1fr) 40px; gap: 2px 8px; }
  .hlabel { font-size: 12px; }
  .card { padding: 16px 12px 12px; }
  .card-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hbar { transition: none; } }

/* Leaderboard on narrow screens: keep the model column in view while the table scrolls. */
@media (max-width: 760px) {
  .lb thead th:first-child, .lb tbody th { position: sticky; left: 0; z-index: 1; background: var(--manilla); box-shadow: 1px 0 0 var(--bone); }
  .lb tr.is-sel th { background: var(--manilla-deep); }
}
.lb-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }