/* The "paper" look.
 *
 * Modelled on the paper's teaser and qualitative figures: a light paper
 * ground, thin warm-grey rules, rounded
 * panels carrying a pale tint of their concept's colour, and colour itself
 * reserved for concepts. Light is the designed default; dark is an explicit
 * toggle (data-theme="dark") rather than following the OS, because the figures
 * it imitates are light-only and a heatmap-free, washed-to-white rendering
 * reads as intended only on a light page.
 *
 * Tints use color-mix() against the page background, so the same --c works
 * in both themes. Type is Avenir, falling back to Noto Sans (Google Fonts).
 */

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f5f6;
  --line: #e3e5e8;
  --line-strong: #c7cbd1;
  --text: #1c1e21;
  --muted: #5d636b;
  --accent: #0072B2;            /* the teaser's rank-1 blue */
  --warn: #b35c00;
  --ok: #1a7f4b;
  --radius: 4px;
  /* One typeface throughout: Avenir where the OS has it (macOS/iOS), Noto Sans
     otherwise (loaded in base.html, fetched only if Avenir is missing). The
     "serif" variable is kept so titles/captions can be split out later. */
  --sans: "Avenir Next", Avenir, "Noto Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: var(--sans);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #16171a;
  --panel: #1e2024;
  --panel-2: #26292e;
  --line: #33363c;
  --line-strong: #454950;
  --text: #e8e6e1;
  --muted: #a09b92;
  --accent: #56b4e9;
  --warn: #ffb454;
  --ok: #6bd68a;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14.5px/1.5 var(--sans);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; }
h1 { font-size: 26px; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 21px; margin: 38px 0 6px; }
h3 { font-size: 16px; margin: 0; }
.lede { color: var(--muted); margin: 0 0 16px; max-width: 76ch; }
.small { font-size: 13px; }
.muted { color: var(--muted); }
.warn { color: var(--warn); }
.ok { color: var(--ok); }
.spacer { flex: 1; }

/* ---- chrome ---- */

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 28px; background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--text); }
.brand em { font-style: italic; font-weight: 400; color: var(--muted); }
.brand:hover { text-decoration: none; }
.tabs { display: flex; gap: 16px; }
.tabs a { color: var(--text); font-size: 14px; }
.tabs a:hover { color: var(--accent); text-decoration: none; }
.bankpick { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.bankpick select, .find input, .toolbar select, .toolbar input {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; font: inherit; font-size: 13px; max-width: 260px;
}
.find { margin: 0; }
.find input { width: 110px; }

/* View controls: a segmented control per setting, plus the theme toggle. */
.viewctl { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--panel); }
.seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px; padding: 3px 10px;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--text); color: var(--bg); }
.themebtn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 4px; width: 28px; height: 26px; cursor: pointer; font-size: 13px;
}

main { padding: 28px; max-width: 1480px; margin: 0 auto; }
footer { padding: 28px; color: var(--muted); font-size: 12.5px; text-align: center; border-top: 1px solid var(--line); margin-top: 40px; }

.pagehead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.pagehead h1 { margin: 0; }

/* ---- tiles ---- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.grid.gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.tile {
  display: block; position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  color: var(--text); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover { border-color: var(--line-strong); text-decoration: none; }
.tile img { display: block; width: 100%; height: auto; }
.tilebar {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; font-size: 12px;
  background: var(--panel); border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .code {
  position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, .62); color: #fff;
  font-family: ui-monospace, Menlo, monospace; font-size: 9px;
  padding: 2px 4px; border-radius: 4px; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}

.chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chip.big { width: 18px; height: 18px; border-radius: 5px; }

/* Numbered rank badge — the teaser's circled numbers. */
.badge {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c, var(--accent)); color: #fff;
  font: 700 10.5px/1 var(--sans); box-shadow: 0 0 0 1.5px var(--panel);
}
.badge.sm { width: 15px; height: 15px; font-size: 9px; }

/* ---- panels ---- */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card h2 { margin-top: 0; }

.stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 0; }
.stats div { display: flex; flex-direction: column; }
.stats dt { color: var(--muted); font-size: 12px; }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.stats.wide { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; gap: 10px 30px; }
.statline { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.statline b { color: var(--text); font-weight: 600; }

.prov { margin: 18px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; }
.prov summary { cursor: pointer; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.callout { margin-top: 10px; color: var(--muted); }
.callout p { margin: 6px 0; }

.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; }
.split { display: flex; gap: 18px; flex-wrap: wrap; }
.split figure { margin: 0; }
.split img { border-radius: 8px; border: 1px solid var(--line); display: block; }
.split figcaption { color: var(--muted); font-size: 12px; margin-top: 6px; font-family: var(--serif); font-style: italic; }

/* ---- bank list ---- */

.bankcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
.bankcard {
  display: block; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 12px;
}
.bankcard:hover { border-color: var(--line-strong); text-decoration: none; }
.bankcard .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.bankcard .thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 3px; }
.bankcard h3 { font-size: 16px; margin: 0 2px 4px; }
.bankcard .statline { margin: 0 2px; font-size: 12.5px; }

/* ---- landing page ---- */

.hero { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 22px; }
.hero-text { flex: 1 1 520px; }
.hero-text h1 { font-size: 28px; }

.herogrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1100px) { .herogrid { grid-template-columns: repeat(3, 1fr); } }
.herocard { border-radius: var(--radius); }
.herocard .imgs { position: relative; aspect-ratio: 1; }
.herocard .imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .18s ease; }
.herocard .imgs img.plain { opacity: 0; }
.herocard:hover .imgs img.plain { opacity: 1; }
.herocap { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.herocap .name { font-family: var(--serif); font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note { color: var(--muted); font-size: 12px; font-style: italic; margin: 8px 0 0; }

.atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.atlascard {
  display: block; color: var(--text); border-radius: var(--radius); padding: 12px 12px 10px;
  background: color-mix(in srgb, var(--c) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line));
  transition: box-shadow .12s ease, transform .12s ease;
}
.atlascard:hover { text-decoration: none; }
.atlascard header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.atlascard header h3 { font-size: 17px; }
.atlascard .classes { font-size: 12px; color: var(--muted); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlasrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.atlasrow img { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); }

/* ---- bars ---- */

.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 12em 1fr 3.5em; align-items: center; gap: 10px; padding: 3px 0; }
.barlabel { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bartrack { background: var(--panel-2); border-radius: 1px; height: 8px; overflow: hidden; }
.barfill { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: 1px; }
.barval { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }

/* ---- controls ---- */

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  background: var(--panel); border: 1px solid var(--line); font-size: 13px; color: var(--text);
}
.pill:hover { border-color: var(--line-strong); text-decoration: none; }
.pill.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.toolbar button.pill { cursor: pointer; font: inherit; font-size: 13px; }
.toolbar button.pill:disabled { opacity: .45; cursor: not-allowed; }
.sep { width: 1px; height: 20px; background: var(--line); }
.pager { display: flex; align-items: center; gap: 16px; margin: 20px 0; }
ul.plain { list-style: none; padding: 0; color: var(--muted); }
ul.plain li { padding: 2px 0; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 34px; height: 19px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); position: relative; transition: background .12s linear;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--muted); transition: transform .12s ease, background .12s linear;
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .track .knob { transform: translateX(15px); background: #fff; }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- modal ---- */

dialog#imgmodal {
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text);
  padding: 0; width: min(1520px, 96vw); max-width: 96vw; max-height: 95vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
dialog#imgmodal::backdrop { background: rgba(30, 26, 20, .45); backdrop-filter: blur(2px); }
.modal-close {
  position: sticky; float: right; top: 10px; right: 10px; z-index: 5;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; width: 30px; height: 30px; font-size: 17px; line-height: 1; cursor: pointer;
}
#modalbody { padding: 16px 20px 16px; }
.modal-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.modal-head h2 { margin: 0; font-size: 24px; }
.defn { margin: 2px 0 8px; max-width: 90ch; font-family: var(--serif); font-style: italic; }
.tag { font-style: normal; color: var(--muted); margin-right: 2px; }

.layertabs { display: flex; gap: 6px; margin: 10px 0 6px; }
.layertabs .pill { cursor: pointer; font: inherit; font-size: 12.5px; }

.stack { position: relative; flex: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.stack .layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .1s linear; }
.stack .layer.on { opacity: 1; }

/* Rank badges on the image, at each region's innermost point. They double as
   the connectors' anchors. The top four are full size, the rest smaller. */
.stack .peak {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--c); color: #fff; font: 700 9.5px/1 var(--sans);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .35);
  pointer-events: none; transition: transform .1s ease;
}
.stack .peak.minor { width: 13px; height: 13px; font-size: 7.5px; opacity: .92; }
.stack .peak.hot { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }

/* ---- CRAFT layout ---- */

.craft-wrap { position: relative; display: flex; gap: 42px; align-items: flex-start; }
/* Width is pinned to the image by an inline style. As `flex: none` it would
   otherwise size to max-content, and the hint paragraph below the image is one
   long line — that left a 440px dead zone between the image and the rows. */
.craft-image { flex: none; position: sticky; top: 0; }
.craft-image p { margin: 6px 0 0; }
/* Rows flank the image, so every connector spans only the gutter beside it. */
.craft-rows { flex: 1 1 0; min-width: 240px; display: flex; flex-direction: column; gap: 3px; align-self: stretch; }
.craft-rows.left .crow { flex-direction: row-reverse; }
.craft-rows.left .crow-head { align-items: flex-end; }
.craft-rows.left .hline, .craft-rows.left .sub { flex-direction: row-reverse; }

svg.connectors { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
svg.connectors path { fill: none; stroke-width: 1.6; transition: opacity .1s linear, stroke-width .1s linear; }
svg.connectors path.link { opacity: .75; }
svg.connectors path.leader { opacity: .3; stroke-width: 1.3; }
svg.connectors path.hot { opacity: 1; stroke-width: 2.4; }
svg.connectors path.dim { opacity: .08; }

/* Each concept row sits on a pale tint of its own colour, like the teaser's
   neighbour cells; the top four carry a stronger tint than the rest. */
.crow {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  transition: background .1s linear, box-shadow .1s linear;
}
.crow.major { background: color-mix(in srgb, var(--c) 13%, var(--bg)); border-color: color-mix(in srgb, var(--c) 38%, transparent); }
.crow.hot { background: color-mix(in srgb, var(--c) 20%, var(--bg)); box-shadow: 0 0 0 1.5px var(--c); }
.crow-head { flex: none; width: 104px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.crow-head .hline { display: flex; align-items: center; gap: 5px; }
.crow-head .hline a { color: var(--text); font-weight: 600; }
.crow-head .share { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.crow-head .bartrack { height: 5px; width: 100%; background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
.craft-rows.left .crow-head .bartrack { transform: scaleX(-1); }
.crow-head .sub { display: flex; gap: 6px; font-size: 10px; color: var(--muted); }
.crow-head .mini { font-size: 10px; color: var(--muted); }
.crow-head .mini:hover { color: var(--accent); }

.crow-strip { display: flex; align-items: center; gap: 3px; flex: 1; min-width: 0; }
.crow-strip .strip { display: flex; gap: 4px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; flex: 1; }
.crow-strip .strip::-webkit-scrollbar { display: none; }
.crow-strip .tile { flex: none; border-radius: 5px; border-color: color-mix(in srgb, var(--c) 30%, var(--line)); }
.crow-strip .tile img { display: block; }
button.scroll {
  flex: none; width: 14px; height: 46px; padding: 0; cursor: pointer; background: transparent;
  color: var(--muted); border: 0; font-size: 9px;
}
button.scroll:hover { color: var(--c, var(--text)); }

/* ---- evidence bands ---- */

.evidence { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.evhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.band { margin-bottom: 14px; }
.bandlabel { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 13px; }
.bandlabel strong { font-family: var(--serif); font-size: 15px; }
.bandlabel em { font-style: normal; font-size: 12px; }
.bandrow { display: flex; gap: 8px; flex-wrap: wrap; }
.bandrow .tile { width: 104px; flex: none; }
.bandrow .tilebar { padding: 3px 6px; font-size: 11px; }

/* Paper site additions on top of style.css (which the debug browser also uses). */

.brand.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0; }
.brand.logo img { width: 22px; height: 22px; display: block; }

.intro { margin: 8px 0 26px; max-width: 80ch; }

footer { font-style: italic; }

/* ---- the path: DisParQ / dataset [its sections] ---- */

.pathsep { color: var(--line-strong); font-size: 20px; margin: 0 -6px; }
.scope {
  display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 3px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2);
}
.scope .dspick {
  border: 0; background: var(--panel); color: var(--text); font: inherit;
  font-size: 14px; font-weight: 600; padding: 4px 8px; border-radius: 4px;
  max-width: 220px; cursor: pointer;
}
.scopetabs { display: flex; gap: 2px; margin-left: 4px; }
.scopetabs a {
  color: var(--text); font-size: 13.5px; padding: 3px 9px; border-radius: 4px;
}
.scopetabs a:hover { background: var(--panel); text-decoration: none; }
.scopetabs a.on { background: var(--panel); box-shadow: inset 0 -2px 0 var(--accent); font-weight: 600; }
.scope .find input { width: 96px; margin-left: 4px; }

/* ---- concept cards: four strongest matches in a 2x2 grid ---- */

.cards2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.ccard {
  display: block; color: var(--text); padding: 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--c) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line));
}
.ccard:hover { text-decoration: none; border-color: var(--c); }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cgrid img {
  width: 100%; aspect-ratio: 1; display: block; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
}
.cmeta { display: flex; align-items: center; gap: 6px; margin: 7px 2px 0; font-size: 13.5px; }
.cclasses { font-size: 11.5px; color: var(--muted); margin: 1px 2px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- overview halves, each ending in a button ---- */

.half { margin-top: 30px; }
.half > h2 { margin-top: 0; }
.more { display: flex; justify-content: center; margin: 18px 0 6px; }
.btn {
  display: inline-block; padding: 8px 18px; border-radius: 4px; font-size: 14px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--text);
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }


/* ---- screen sizes ----
   Checked at a phone (390 px), a 13-inch laptop (1280 x 800 and 1440 x 900)
   and a wide desktop. */

.bankcards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Below ~1000 px there is no room for rows on both sides of the image: stack
   image first, then every concept row in one column, and drop the arrows. */
@media (max-width: 1000px) {
  .craft-wrap { flex-direction: column; align-items: stretch; gap: 12px; }
  .craft-image { order: -1; position: static; width: 100% !important;
    display: flex; flex-direction: column; align-items: center; }
  .craft-image p { max-width: 42ch; text-align: center; }
  .craft-rows { min-width: 0; width: 100%; }
  .craft-rows.left .crow { flex-direction: row; }
  .craft-rows.left .crow-head { align-items: flex-start; }
  svg.connectors { display: none; }
}

@media (max-width: 760px) {
  main { padding: 14px; }
  .topbar { padding: 8px 14px; gap: 8px 10px; }
  /* The dataset and its sections get their own full-width line. */
  .scope { order: 5; width: 100%; flex-wrap: wrap; }
  .scope .dspick { flex: 1 1 auto; max-width: none; }
  .scope .find { flex: 1 1 100%; }
  .scope .find input { width: 100%; margin: 2px 0 0; box-sizing: border-box; }
  .scopetabs { margin-left: 0; flex-wrap: wrap; }
  .pathsep { display: none; }

  h1 { font-size: 22px; }
  .herogrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cards2 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ccard { padding: 5px; }
  .cmeta { font-size: 12.5px; }
  .grid, .grid.gallery { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .bars li { grid-template-columns: 8.5em 1fr 3em; }
  .toolbar { gap: 6px; }

  /* The popup becomes a full-screen sheet. */
  dialog#imgmodal { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    margin: 0; border-radius: 0; border: 0; }
  #modalbody { padding: 12px; }
  .crow-head { width: 88px; }
}

/* Concept cards: column counts that divide both 12 (overview) and 48 (a page
   of the concepts list), so no row ends half empty. minmax(0, 1fr) lets a
   card shrink below its one-line class list instead of widening the page. */
.cards2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ccard { min-width: 0; }
@media (max-width: 1199px) { .cards2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .cards2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.herocap .name { text-align: left; }
@media (max-width: 760px) {
  .cword { display: none; }
  .crow-head { width: 64px; }
}
/* Card header: the concept's name, and its image count on the line below, at
   every width (side by side they wrap awkwardly once cards are ~190 px). */
.cmeta { flex-wrap: wrap; row-gap: 0; }
.cmeta .spacer { display: none; }
.cmeta .muted { flex-basis: 100%; padding-left: 16px; font-size: 11.5px; }

/* ---- one path in the header: DisParQ / dataset [sections] > item ---- */

.pathitem {
  font-size: 14px; font-weight: 600; color: var(--text);
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leadline { font-size: 17px; line-height: 1.6; margin: 4px 0 0; }

/* ---- what is about to be clicked ----
   Anything that opens something gets a ring on hover, and while it is pressed
   on a touch screen. Tiles draw the ring inside their edge: in the concept
   strips an outer ring would be clipped by the scrolling row. */

.tile:hover, .tile:focus-visible, .tile:active {
  outline: 2px solid var(--c, var(--accent)); outline-offset: -2px; text-decoration: none;
}
.ccard:hover, .ccard:focus-visible, .ccard:active,
.bankcard:hover, .bankcard:focus-visible, .bankcard:active {
  border-color: var(--c, var(--accent)); box-shadow: 0 0 0 1px var(--c, var(--accent)); outline: none;
}
.bankcard:hover h3 { color: var(--accent); }
.ccard, .bankcard { transition: border-color .1s linear, box-shadow .1s linear; }

/* ---- the per-image and concept views: heading with previous / next ---- */

.viewhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
#modalbody .viewhead { padding-right: 40px; }
.viewhead h2 { margin: 0; font-size: 22px; }
.navbtn {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0 0 3px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel);
  color: var(--text); font: 400 22px/1 var(--sans); cursor: pointer;
}
.navbtn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.navbtn:disabled { opacity: .3; cursor: default; border-color: var(--line); color: var(--muted); }
.viewhead .pill:hover { border-color: var(--accent); color: var(--accent); }

/* A concept row's label: its rank and number, a button in the row's colour.
   Every label fills the same column, so a short number gets the same box as a
   long one, and the digits are tabular so the numbers line up. */
.crow-head { width: 124px; }
.clabel {
  display: flex; align-items: center; gap: 5px; width: 100%; font-variant-numeric: tabular-nums;
  padding: 2px 8px 2px 3px; border-radius: 4px; white-space: nowrap;
  background: var(--panel); color: var(--text); font-weight: 600; font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line));
  transition: background .1s linear, box-shadow .1s linear;
}
.clabel:hover, .clabel:focus-visible, .clabel:active {
  text-decoration: none; border-color: var(--c); box-shadow: 0 0 0 1px var(--c);
  background: color-mix(in srgb, var(--c) 16%, var(--panel)); outline: none;
}
.crow-strip .tile img { width: var(--strip, 64px); height: var(--strip, 64px); }

/* The image: pointing at a part highlights its concept, and it can be clicked. */
.stack.onpart { cursor: pointer; }

/* ---- the concept view ---- */

.cview .viewhead h2 { margin-right: 4px; }
.cview .viewhead .small { font-size: 13px; }

/* Strongest, typical and weakest matches on one line. */
.bands3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; margin: 0 0 22px; }
.bands3.single { grid-template-columns: minmax(0, 1fr); }
.band3label { font-size: 13px; color: var(--muted); margin: 0 0 4px 1px; }
.band3row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bands3.single .band3row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.band3row .tile { border-color: color-mix(in srgb, var(--c) 30%, var(--line)); }
.band3row .tile img { aspect-ratio: 1; }

.colhead { font-size: 15px; margin: 0 0 8px; }
.cview .columns { gap: 18px 36px; }
.xbars { list-style: none; margin: 0; padding: 0; }
.xbars li {
  display: grid; align-items: center; gap: 10px; padding: 2px 0;
  grid-template-columns: minmax(0, 11em) 150px minmax(30px, 1fr) 3em;
}
.xbars.co li { grid-template-columns: minmax(0, 13em) minmax(30px, 1fr) 3em; }
.xlabel { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xthumbs { display: flex; gap: 4px; }
.xthumbs .tile { flex: none; border-radius: 3px; border-color: color-mix(in srgb, var(--c) 30%, var(--line)); }
.xthumbs .tile img { width: 46px; height: 46px; }
.xconcept {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 2px 8px 2px 2px;
  border: 1px solid transparent; border-radius: 4px; color: var(--text); font-size: 13.5px;
  transition: background .1s linear, border-color .1s linear;
}
.xconcept img {
  width: 46px; height: 46px; flex: none; display: block; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
}
.xconcept:hover, .xconcept:focus-visible, .xconcept:active {
  text-decoration: none; outline: none; border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--panel));
}
.xbars .bartrack { height: 7px; }

@media (max-width: 1000px) {
  .bands3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .band3row { max-width: 560px; }
  .bands3.single .band3row { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: none; }
}

@media (max-width: 760px) {
  .pathitem { display: none; }
  .leadline { font-size: 15.5px; }
  .viewhead { gap: 8px; margin-bottom: 10px; }
  .viewhead h2 { font-size: 18px; }
  .crow-head { width: 70px; }
  .clabel { padding: 2px 6px 2px 3px; }
  .crow-strip .tile img { width: var(--strip, 56px); height: var(--strip, 56px); }
  .bands3.single .band3row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Classes: name, three examples and the count; the bar is dropped. */
  .xbars li { grid-template-columns: minmax(0, 1fr) 118px 2.6em; gap: 8px; }
  .xbars li > .bartrack { display: none; }
  .xbars.co li { grid-template-columns: minmax(0, 1fr) minmax(30px, 90px) 2.6em; }
  .xbars.co li > .bartrack { display: block; }
  .xthumbs .tile img, .xconcept img { width: 36px; height: 36px; }
}

/* ---- overview: each half's title with its "All ..." button beside it ---- */

.halfhead { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.halfhead h2 { margin: 0; }
.halfhead .btn { padding: 5px 14px; font-size: 13.5px; }

/* The image view's heading: its ID, then its class, which lists that class. */
.h2sub { font-size: 16px; color: var(--muted); }
.h2sub:hover { color: var(--accent); }

/* Running text spans the content width, like the grids under it: the home
   intro, the overview's model sentence and each page's lede. */
.nobr { white-space: nowrap; }
.intro, .intro .leadline, .modelline, .lede { max-width: none; }
.leadline, .modelline, .lede { text-wrap: pretty; }

/* The image view's "concepts" switch, under the image like the images page's. */
.mapswitch { margin: 10px 0 2px; }

/* The concept view's two lists: rows of one fixed height, so the columns line
   up row for row and end level. Each row's link gets the same hover box: the
   class name (which lists that class's images) and the co-occurring concept. */
.xbars li { height: 54px; padding: 0; }
.xconcept { padding: 3px 8px 3px 3px; }
a.xlabel {
  align-self: stretch; display: block; line-height: 52px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 4px; color: var(--text);
  transition: background .1s linear, border-color .1s linear;
}
a.xlabel:hover, a.xlabel:focus-visible, a.xlabel:active {
  text-decoration: none; outline: none; color: var(--text); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--panel));
}
@media (max-width: 760px) {
  .xbars li { height: 44px; }
  a.xlabel { line-height: 42px; padding: 0 6px; }
}

/* Previous / next as one pair before a view's title. */
.navpair { display: inline-flex; gap: 4px; margin-right: 4px; }

/* ---- overview: both halves on one laptop screen ----
   Measured at 13-inch browser viewports (1470 x 830, 1440 x 775, 1280 x 675):
   each half is one row, eight across, so the concept row ends above the fold.
   Narrower screens show six or four across and hide the rest; phones show
   two rows of two. */

.overview .pagehead { margin-bottom: 2px; }
.overview .modelline { margin: 2px 0 0; }
.overview .half { margin-top: 14px; }
.overview .halfhead { margin-bottom: 8px; }
.overview .halfhead h2 { font-size: 20px; }
/* The card's image count is in its popup; here the name and classes suffice. */
.overview .cmeta .muted { display: none; }
.overview .halfhead .hint { color: var(--muted); font-size: 13px; }
.overview .halfhead .btn { padding: 4px 12px; font-size: 13px; }
/* Each cell (an image, or a concept card's width) is as wide as eight columns
   allow, but no taller than the window leaves room for: the page is two rows
   of cells plus 363-383 px of headings, captions, card labels and footer
   (measured at 1470, 1440 and 1280 px wide), so capping a cell at
   (100vh - 390px) / 2 keeps the whole page, footer included, on one screen.
   Rows narrower than the page stay left-aligned. */
.overview { --cell: clamp(100px, calc((100vh - 390px) / 2), 1000px); }
.overview .herogrid, .overview .cards2 {
  grid-template-columns: repeat(8, minmax(0, var(--cell))); gap: 12px; justify-content: start;
}

/* Less space above the content and around the footer on every page. */
main { padding-top: 18px; padding-bottom: 12px; }
footer { margin-top: 10px; padding: 10px 28px; }
.overview .herocap { padding: 2px 7px; }
.overview .herocap .name { font-size: 12.5px; }
.overview .ccard { padding: 6px; }
.overview .cmeta { margin-top: 5px; font-size: 13px; }
@media (max-width: 1199px) {
  .overview .herogrid, .overview .cards2 { grid-template-columns: repeat(6, minmax(0, var(--cell))); }
  .overview .herocard:nth-child(n+7), .overview .ccard:nth-child(n+7) { display: none; }
}
@media (max-width: 899px) {
  .overview .herogrid, .overview .cards2 { grid-template-columns: repeat(4, minmax(0, var(--cell))); }
  .overview .herocard:nth-child(n+5), .overview .ccard:nth-child(n+5) { display: none; }
}
@media (max-width: 599px) {
  .overview .herogrid, .overview .cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Rows the concept popup leaves out to fit the screen (see fitPopup). */
.xbars li[hidden] { display: none; }

/* ---- strips: a fixed number of thumbnails beside each row, no scrolling ---- */
.crow-strip .strip { overflow: hidden; }

/* A thumbnail of an image a static export does not include: shown, not a link. */
.tile.nolink { cursor: default; }
.tile.nolink:hover, .tile.nolink:active { outline: none; }

/* ---- static export ----
   The image view keeps the photo underneath the concept map, and draws each
   concept's highlight over it from the region's outline: the teaser's 72%
   white wash outside the region and the outline in its colour (the live site
   loads a pre-rendered image per concept instead). */
.static-export .stack .layer[data-layer="plain"] { opacity: 1; }
.stack svg.layer { overflow: hidden; }
.hl .wash { fill: #fff; fill-opacity: .72; }
.hl .edge { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.gallery .tile[hidden] { display: none; }

/* A view whose previous / next was just pressed, and a popup while its next
   view loads: the current one dims until the new one arrives. */
.imgview.pending .craft-wrap, .cview.pending .bands3, .cview.pending .columns,
#modalbody.busy > .modal-body { opacity: .5; transition: opacity .15s linear; }

/* The static export's link to its code, under the home page's intro: the
   site's one filled button. Text in the page colour reads on the accent in
   both themes. */
.introlinks { margin: 14px 0 0; }
.btn.code {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
  font-weight: 600; padding: 4px 16px;
}
.btn.code:hover, .btn.code:focus-visible { color: var(--bg); border-color: var(--accent); filter: brightness(1.1); }

/* The full export (export_full.py): thumbnails are cells of shared image
   sheets (CSS backgrounds, positioned by full.js), and the image view draws
   its photo, concept map and highlights on canvases. Added after style.css
   and paper.css in the export's site.css. */

.spr { display: block; background-repeat: no-repeat; }

/* Strips: the outline is transparent in the sheet, so the row's colour shows
   through it. */
.crow-strip .tile .spr { width: var(--strip, 64px); height: var(--strip, 64px); background-color: var(--c); }
@media (max-width: 760px) { .crow-strip .tile .spr { width: var(--strip, 56px); height: var(--strip, 56px); } }

.band3row .tile .spr, .gallery .tile .spr { width: 100%; aspect-ratio: 1; }
.xthumbs .tile .spr { width: 46px; height: 46px; }
.xconcept .xprev {
  width: 46px; height: 46px; flex: none; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
}
@media (max-width: 760px) { .xthumbs .tile .spr, .xconcept .xprev { width: 36px; height: 36px; } }
.cgrid .spr {
  width: 100%; aspect-ratio: 1; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
}

/* The images page: a concept map drawn over a thumbnail while the switch is on. */
.gallery .tile canvas.tmap { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; display: none; }
.gallery.maps-on .tile canvas.tmap { display: block; }

/* Home: the paper's links (paper, code) in a row. */
.introlinks { display: flex; flex-wrap: wrap; gap: 8px; }

/* The authors, on a line of their own under the paper's title in every page's
   footer. Title and authors read as one citation: both in the text colour, the
   title a little larger, neither in italics. The extra line makes the footer
   taller, so the overview leaves room for it (--cell in paper.css budgets 390 px
   for everything but the two rows of cells) and still fits one laptop screen. */
body:has(footer .byline) footer { color: var(--text); font-size: 14px; font-style: normal; }
footer .byline { display: block; margin-top: 2px; font-size: 12.5px; }
body:has(footer .byline) .overview { --cell: clamp(100px, calc((100vh - 412px) / 2), 1000px); }