/* ECHO design system.
 *
 * Deliberately plain: a dataset repository is read, scanned and cited, so the
 * visual job is density, hierarchy and legibility -- not atmosphere. This
 * replaces a near-black violet theme with neutral surfaces, hairline borders
 * and a single restrained accent.
 *
 * Colour tokens are NOT defined here. They are generated into tokens.css from
 * the settings table so the admin's theme editor changes the site without a
 * code change. This file only consumes var(--...).
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  /* Tabular figures everywhere: this site is mostly numbers in columns, and
     proportional digits make them impossible to compare down a list. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.011em; }
h1 { font-size: 1.95rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .9rem; }
p  { margin: 0 0 1em; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .89em; }

.muted    { color: var(--ink-muted); }
.subtle   { color: var(--ink-subtle); }
.crumbs { color: var(--ink-subtle); margin-bottom: .35rem; }
.crumbs a { color: var(--ink-muted); }
.small    { font-size: .82rem; }
.nowrap   { white-space: nowrap; }
.stack > * + * { margin-top: var(--gap, 1rem); }

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

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; height: 56px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; color: var(--ink); }
/* The OrangeAtlas rings mark, carried over from the original site. Decorative:
   the name beside it is the link text. */
.brand picture { display: inline-flex; flex: none; }
.brand img { height: 40px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 750; font-size: 1.2rem; letter-spacing: -.02em; }
.brand-long { font-size: .7rem; font-weight: 500; color: var(--ink-muted);
              letter-spacing: .01em; white-space: nowrap; }
.brand .dot { color: var(--brand); }
.brand small { font-weight: 450; color: var(--ink-subtle); font-size: .72rem;
               letter-spacing: .02em; }

.site-nav { display: flex; gap: .15rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
@media (min-width: 901px) { .site-nav { flex-wrap: nowrap; } .site-nav a { white-space: nowrap; } .qs { min-width: 0; flex-shrink: 1; } }
/* Below 900px the nav (with the Data Lab logo) takes its own row, as on phones. */
@media (max-width: 900px) {
  .site-header .wrap { height: auto; padding-block: .5rem; flex-wrap: wrap; gap: .4rem 1rem; }
  .site-nav { margin-left: 0; width: 100%; }
  .qs { margin-left: auto; }
}
@media (max-width: 1100px) { .site-nav .lab-logo img { height: 22px; } }
.site-nav a {
  color: var(--ink-muted); padding: .35rem .6rem; border-radius: var(--radius);
  font-size: .89rem; font-weight: 500;
}
.site-nav a:hover { background: var(--bg-muted); color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--bg-muted); }

/* Data Lab wordmark (data.syr.edu): black ink on transparent; tokens.css sets
   --logo-ink-filter in dark mode so it follows the site's colour policy. */
.lab-logo { display: inline-flex; align-items: center; flex: none; }
.site-nav a.lab-logo { padding: .2rem .4rem; margin-left: .35rem; }
.site-nav a.lab-logo:hover { background: none; opacity: .75; }
.lab-logo img { display: block; height: 28px; width: auto; filter: var(--logo-ink-filter, none); }
.footer-lab { margin: .9rem 0 .6rem; }
.footer-lab .lab-logo img { height: 38px; }

main { display: block; min-height: 60vh; padding-block: 2rem 4rem; }

.site-footer {
  border-top: 1px solid var(--border); background: var(--bg-subtle);
  padding-block: 2rem; margin-top: 3rem; font-size: .86rem; color: var(--ink-muted);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.site-footer .cols { display: grid; gap: 1.5rem; grid-template-columns: 2fr 1fr 1fr; }
.site-footer h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--ink-subtle); margin-bottom: .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .3rem; }

/* ------------------------------------------------------------ surfaces --- */

.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.panel {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.section { margin-block: 2.5rem; }
.section > h2 { display: flex; align-items: baseline; gap: .6rem; }
.section > h2 .count { font-size: .8rem; font-weight: 500; color: var(--ink-subtle);
                       font-family: var(--font-mono); }

.rule { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }

/* --------------------------------------------------------------- chips --- */

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-subtle);
  font-size: .78rem; color: var(--ink-muted); line-height: 1.5;
}
a.chip:hover { border-color: var(--border-strong); color: var(--ink);
               background: var(--bg-muted); text-decoration: none; }
.chip .n { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-subtle); }
.chip-accent { border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
               background: var(--accent-weak); color: var(--accent); }

/* Modality identity is carried by the ICON + LABEL, not by colour -- four
   categorical hues used on scattered chips would not clear colour-blindness
   separation, and a label is unambiguous for everyone. */
.chip-mod .ico { font-family: var(--font-mono); font-weight: 700; font-size: .7rem;
                 opacity: .75; }

.badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--border); color: var(--ink-muted); background: var(--bg-muted);
}
.badge.tier-full     { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.badge.tier-analyzed { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 35%, var(--border)); }
.badge.tier-aggregate{ color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.badge.tier-limited  { color: var(--ink-muted); }

/* ------------------------------------------------------- dataset cards --- */

.ds-list { display: grid; gap: .75rem; }
.ds-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem 1rem; background: var(--bg);
  display: grid; gap: .45rem;
}
.ds-card:hover { border-color: var(--border-strong); }
.ds-card h3 { margin: 0; font-size: 1rem; }
.ds-card h3 a { color: var(--ink); }
.ds-card h3 a:hover { color: var(--accent); }
.ds-card .sum { margin: 0; color: var(--ink-muted); font-size: .88rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-card .meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .78rem;
                 color: var(--ink-subtle); font-family: var(--font-mono); }

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

.stats { display: grid; gap: .6rem; grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr)); margin-block: 1rem; }
.stat { border: 1px solid var(--border); border-radius: var(--radius);
        padding: .7rem .8rem; background: var(--bg-subtle); }
.stat-v { font-size: 1.45rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.15; }
.stat-l { font-size: .76rem; color: var(--ink-muted); margin-top: .15rem; }
.stat-n { font-size: .7rem; color: var(--ink-subtle); margin-top: .1rem; }

.hero-figs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hero-fig .v { font-size: 2.3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.hero-fig .l { font-size: .8rem; color: var(--ink-muted); margin-top: .3rem; }

/* -------------------------------------------------------------- charts --- */

.chart { margin: 0 0 1.5rem; }
.chart figcaption { font-size: .8rem; font-weight: 600; color: var(--ink-muted);
                    margin-bottom: .6rem; }

.bars { display: grid; gap: .28rem; }
.bar-row { display: grid; grid-template-columns: minmax(70px, 150px) 1fr auto;
           align-items: center; gap: .6rem; font-size: .82rem; }
.bar-row.mini { grid-template-columns: minmax(56px, 90px) 1fr; font-size: .76rem; gap: .4rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             color: var(--ink-muted); }
.bar-track { position: relative; height: 10px; background: var(--bg-muted);
             border-radius: 5px; overflow: hidden; }
/* 4px rounded data-end, anchored flat to the baseline at the start. */
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.bar-value { font-family: var(--font-mono); font-size: .76rem; color: var(--ink);
             min-width: 3.4em; text-align: right; }

ol.ranked { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
ol.ranked li { display: grid; grid-template-columns: 1.6rem minmax(70px, 160px) 1fr auto;
               align-items: center; gap: .6rem; font-size: .82rem; }
.rank-n { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-subtle);
          text-align: right; }
.rank-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
              color: var(--ink-muted); }

/* A 2px surface gap keeps adjacent fills from blending into one block. */
.prop-track { display: flex; height: 22px; border-radius: var(--radius);
              overflow: hidden; background: var(--bg-muted); gap: 2px; }
.prop-seg { display: block; height: 100%; }
.prop-legend { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .25rem; }
.prop-legend li { display: grid; grid-template-columns: 10px 1fr auto;
                  align-items: center; gap: .5rem; font-size: .8rem; }
.swatch { width: 10px; height: 10px; border-radius: 2px; }
.prop-name { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.prop-val { font-family: var(--font-mono); font-size: .76rem; }

.svg-line { width: 100%; height: auto; overflow: visible; }
.svg-line .grid   { stroke: var(--border); stroke-width: 1; }
.svg-line .axis   { fill: var(--ink-subtle); font-size: 10px; font-family: var(--font-mono); }
.svg-line .line   { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* A 2px surface ring keeps overlapping markers readable. */
.svg-line .dot    { stroke: var(--bg); stroke-width: 2; }
.svg-line .series-label { font-size: 10px; font-weight: 600; }

.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .55rem;
         line-height: 1.5; }
.cw { font-weight: 600; cursor: default; }

.topic-grid { display: grid; gap: .8rem;
              grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.topic-card { border: 1px solid var(--border); border-radius: var(--radius);
              padding: .7rem .8rem; background: var(--bg-subtle); }
.topic-card h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
                 color: var(--ink-subtle); margin-bottom: .5rem; }
/* Topics past site.topics.visible (no-script; charts.js swaps in a button) */
.topic-rest { margin-top: .8rem; }
.topic-rest > summary { cursor: pointer; font-size: .85rem; color: var(--accent); margin-bottom: .8rem; }
.topic-show-all { display: block; margin: .8rem auto 0; }

.fields { display: grid; gap: .45rem; }
.field-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto;
             align-items: center; gap: .6rem; font-size: .8rem; }
.field-name { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-muted);
              overflow: hidden; text-overflow: ellipsis; }
.field-track { position: relative; height: 10px; background: var(--bg-muted);
               border-radius: 5px; }
.field-span { position: absolute; inset: 0; border-radius: 5px;
              background: var(--viz-seq-2); }
.field-mean { position: absolute; top: -3px; width: 2px; height: 16px;
              background: var(--viz-seq-7); transform: translateX(-1px); }
.field-nums { display: flex; gap: .45rem; font-family: var(--font-mono); font-size: .72rem; }
.field-dist { grid-column: 1 / -1; display: flex; height: 6px; gap: 2px;
              border-radius: 3px; overflow: hidden; }

.availability { border: 1px solid var(--border); border-left-width: 3px;
                border-radius: var(--radius); padding: .8rem 1rem; background: var(--bg-subtle);
                margin-bottom: 1.25rem; }
/* Status is never colour alone: an icon and the word both carry it. */
.availability.tone-warn { border-left-color: var(--warn); }
.availability.tone-ok   { border-left-color: var(--ok); }
.avail-icon { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em;
              border-radius: 50%; font-size: .72rem; font-weight: 700; margin-right: .4rem;
              background: var(--warn); color: var(--bg); }
.tone-ok .avail-icon { background: var(--ok); }
.avail-status { margin-bottom: .4rem; }
.avail-reasons { margin: .3rem 0 .4rem 1.1rem; padding: 0; font-size: .85rem;
                 color: var(--ink-muted); }
.note.sampling { font-size: .8rem; color: var(--ink-subtle); border-left: 2px solid var(--border);
                 padding-left: .7rem; margin-block: 1rem; }

/* --------------------------------------------------------------- tables --- */

.table-wrap { overflow-x: auto; }
table.data { border-collapse: collapse; width: 100%; font-size: .85rem; }
table.data th, table.data td { text-align: left; padding: .45rem .6rem;
                               border-bottom: 1px solid var(--border); }
table.data th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
                color: var(--ink-subtle); font-weight: 600; }
table.data td.num { text-align: right; font-family: var(--font-mono); }
table.data tr:hover td { background: var(--bg-subtle); }

dl.kv { display: grid; grid-template-columns: minmax(120px, 190px) 1fr;
        gap: .4rem .9rem; margin: 0; font-size: .87rem; }
dl.kv dt { color: var(--ink-subtle); font-size: .8rem; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

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

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--bg);
  color: var(--ink); font-size: .88rem; font-weight: 550; cursor: pointer;
}
.btn:hover { background: var(--bg-muted); text-decoration: none; color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent, #fff); }

/* Light/dark toggle: shown only when tokens.css sets --theme-toggle (the
   "follow system" policy); the icon shown is the mode it switches to. */
.theme-toggle { display: var(--theme-toggle, none); align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; margin-left: .25rem; flex: none; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: transparent; color: var(--ink-muted); }
.theme-toggle:hover { background: var(--bg-muted); color: var(--ink); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .tt-sun  { display: var(--tt-sun, none); }
.theme-toggle .tt-moon { display: var(--tt-moon, inline); }

input[type=search], input[type=text], select {
  font: inherit; font-size: .9rem; padding: .45rem .65rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); width: 100%;
}

.pager { display: flex; gap: .3rem; align-items: center; justify-content: center;
         margin-top: 2rem; flex-wrap: wrap; }
.pager a, .pager span { padding: .35rem .6rem; border-radius: var(--radius);
                        font-size: .85rem; font-family: var(--font-mono); }
.pager a { border: 1px solid var(--border); color: var(--ink-muted); }
.pager a:hover { border-color: var(--border-strong); color: var(--ink); text-decoration: none; }
.pager .cur { border: 1px solid var(--accent); color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 1100px) {
  /* The long name competes with search and nav for header width; the homepage
     title carries it in full. */
  .brand-long { display: none; }
}
@media (max-width: 900px) {
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (max-width: 620px) {
  body { font-size: 14.5px; }
  h1 { font-size: 1.55rem; }
  .hero-title { gap: .9rem; }
  .hero-title img { height: 72px; }
  .home-hero h1 { font-size: 1.55rem; }
  .site-header .wrap { height: auto; padding-block: .6rem; flex-wrap: wrap; gap: .5rem; }
  .site-nav { margin-left: 0; width: 100%; overflow-x: auto; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: minmax(60px, 110px) 1fr auto; }
  ol.ranked li { grid-template-columns: 1.3rem minmax(60px, 110px) 1fr auto; }
  dl.kv { grid-template-columns: 1fr; gap: .1rem .5rem; }
  dl.kv dd { margin-bottom: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------- search --- */

.qs { position: relative; margin-left: auto; width: min(calc(320px - var(--theme-toggle-room, 0px)), 38vw); }
.qs input { font-size: .85rem; padding: .34rem .6rem; background: var(--bg-subtle); }
.qs-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgb(0 0 0 / .10);
  overflow: hidden; display: none; max-height: 70vh; overflow-y: auto;
}
.qs.open .qs-results { display: block; }
.qs-item, .qs-all {
  display: flex; gap: .6rem; justify-content: space-between; align-items: baseline;
  padding: .45rem .7rem; font-size: .85rem; color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.qs-item:hover, .qs-all:hover { background: var(--bg-muted); text-decoration: none; }
.qs-all { color: var(--accent); font-weight: 550; border-bottom: 0; }
.qs-empty { padding: .6rem .7rem; margin: 0; }

.search-form { margin-block: 1.2rem; }
.search-form input { font-size: 1.05rem; padding: .7rem .9rem; }
.search-facets { margin-bottom: 1.4rem; }
.search-facets h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
                    color: var(--ink-subtle); margin: .8rem 0 .35rem; }
.search-facets .chip { cursor: pointer; font: inherit; font-size: .78rem; }
#search-app.loading #results { opacity: .4; }
#results .btn { margin-top: 1rem; }

/* ------------------------------------------------- home / dataset bits --- */

.home-hero { padding-block: 1.5rem 1rem; max-width: 70ch; }
.home-hero h1 { font-size: 2.3rem; letter-spacing: -.03em; margin: 0; }
.hero-title { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.hero-title picture { flex: none; }
.hero-title img { height: 140px; width: auto; display: block; }
.lede { font-size: 1.05rem; color: var(--ink-muted); }
.home-search { display: flex; gap: .5rem; margin-top: 1.2rem; max-width: 620px; }
.home-search input { flex: 1; }

.ds-head { margin-bottom: 1.5rem; }
.ds-head h1 { margin-bottom: .6rem; }
.ds-head .chips { margin-bottom: .8rem; }
.permalink code { background: var(--bg-muted); padding: .12rem .4rem; border-radius: 4px;
                  border: 1px solid var(--border); }
.ds-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.25rem 2rem; }
.ds-actions [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.block { margin-bottom: 1.5rem; }
pre.mono { background: var(--bg-subtle); border: 1px solid var(--border);
           border-radius: var(--radius); padding: .8rem; overflow-x: auto;
           white-space: pre; margin: 0; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2rem; }

/* ---- interactive network (static/js/graph.js) ---- */
.graphviz { position: relative; border: 1px solid var(--border); border-radius: var(--radius);
            background: var(--bg); padding: .6rem; }
.gv-bar { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; margin-bottom: .5rem; }
.gv-search { flex: 1 1 12rem; min-width: 0; max-width: 18rem; padding: .3rem .5rem; font: inherit;
             font-size: .85rem; border: 1px solid var(--border-strong); border-radius: var(--radius);
             background: var(--bg); color: var(--ink); }
.gv-search.gv-miss { border-color: var(--bad); }
.gv-sz { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-muted); }
.gv-sz input { width: 7rem; }
.gv-btns { display: inline-flex; gap: .25rem; margin-left: auto; }
.gv-btns button, .gv-legend button { font: inherit; font-size: .8rem; padding: .2rem .55rem; cursor: pointer;
             border: 1px solid var(--border-strong); border-radius: var(--radius);
             background: var(--bg-subtle); color: var(--ink); }
.gv-btns button:hover, .gv-legend button:hover { background: var(--bg-muted); }
.gv-wrap { position: relative; }
.gv-canvas { height: 520px; width: 100%; background: var(--bg-subtle); border-radius: var(--radius); }
.gv-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
             pointer-events: none; text-align: center; padding: 1rem; }
.gv-status .btn { pointer-events: auto; }
.gv-ready .gv-status { display: none; }
.gv-tip { position: absolute; z-index: 5; max-width: 220px; pointer-events: none; font-size: .78rem;
          background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong);
          border-radius: var(--radius); padding: .4rem .55rem; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.gv-tip b { display: block; margin-bottom: .2rem; overflow-wrap: anywhere; }
.gv-tip span { color: var(--ink-muted); }
.gv-legend { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .55rem; font-size: .8rem; }
.gv-legend-h { color: var(--ink-muted); margin-right: .2rem; }
.gv-legend-h:not(:first-child) { margin-left: .6rem; }
.gv-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .3rem;
               vertical-align: -1px; }
.gv-legend button span { color: var(--ink-subtle); }
.gv-legend button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-weak); }
.gv-key { display: inline-flex; align-items: center; color: var(--ink-muted); margin-right: .4rem; }
.gv-ramp { width: 2.4rem !important; border-radius: 3px !important;
           background: linear-gradient(90deg, rgb(42,120,214), rgb(220,60,50)) !important; }
.gv-more { color: var(--ink-subtle); }
.gv-meta { margin: .45rem 0 0; }
.gv-note { margin: .2rem 0 0; }
.graphviz.gv-is-full { padding: 1rem; display: flex; flex-direction: column; }
.graphviz.gv-is-full .gv-wrap { flex: 1; }
.graphviz.gv-is-full .gv-canvas { height: 100%; }
@media (max-width: 640px) {
  .gv-canvas { height: 380px; }
  .gv-btns { margin-left: 0; }
}

/* ---- Semantic Scholar panel ---- */
.s2-paper { margin: 0 0 .8rem; line-height: 1.45; }
.s2-citing { padding-left: 1.1rem; }
.s2-citing li { margin-bottom: .5rem; line-height: 1.4; }
.s2-more summary { cursor: pointer; color: var(--accent); margin-bottom: .4rem; }

/* ---- citations (templates/_macros.html cite_tabs, static/js/cite.js) ---- */
.cite-panel + .cite-panel { margin-top: .9rem; }
.cite-tabs.is-tabbed .cite-panel + .cite-panel { margin-top: 0; }
.cite-h { margin: 0 0 .35rem; color: var(--ink-muted); font-weight: 600; }
.cite-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
            border-bottom: 1px solid var(--border); margin-bottom: .6rem; }
.cite-tablist { display: flex; gap: .15rem; }
.cite-tab { font: inherit; font-size: .85rem; padding: .4rem .75rem; border: 0; background: none;
            color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cite-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.cite-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.btn-sm { padding: .25rem .6rem; font-size: .8rem; }
.cite-copy.is-copied { color: var(--ok); border-color: var(--ok); }
/* BibTeX: keep the field-per-line layout, but wrap long values instead of
   forcing a sideways scroll, with the continuation indented under the value. */
pre.cite-bib { font-family: var(--font-mono); font-size: .8rem; line-height: 1.5;
               background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
               padding: .75rem .9rem; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
               tab-size: 2; max-height: 28rem; overflow-y: auto; }
div.cite-text p { margin: 0 0 .6rem; line-height: 1.55; overflow-wrap: anywhere; }
div.cite-text p:last-child { margin-bottom: 0; }
div.cite-text p + p { padding-top: .6rem; border-top: 1px dashed var(--border); }

/* ---- free-form tags ---- */
.ds-tags { margin-top: .5rem; }
.chip-tag { background: transparent; color: var(--ink-muted); }
.ds-card .chips .chip-tag { font-size: .72rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
.prose pre { font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; background: var(--bg-subtle);
             border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem;
             white-space: pre-wrap; overflow-wrap: anywhere; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
/* The long name must wrap beside the logo instead of pushing the page wide. */
.hero-title h1 { min-width: 0; overflow-wrap: break-word; }
@media (max-width: 480px) { .hero-title h1 { font-size: clamp(1.35rem, 6.4vw, 1.9rem); } }

/* ---- platform logos (static/img/platforms, bin/make-platform-icons.js) ---- */
.pf-ico { display: inline-block; vertical-align: -2px; flex: none; object-fit: contain; }
.chip-pf { gap: .35rem; }
.chip-pf .pf-ico { width: 14px; height: 14px; }
.pf-link, .pf-inline { display: inline-flex; align-items: center; gap: .45rem; }
.ds-title, .pf-heading { display: flex; align-items: center; gap: .6rem; }
.ds-title .pf-ico, .pf-heading .pf-ico { flex: none; }
.ds-title > span, .pf-heading > span { min-width: 0; }
.qs-item .pf-ico { margin-right: .4rem; vertical-align: -2px; }
.cat-opt-l .pf-ico { margin-right: .35rem; vertical-align: -2px; }
/* Near-black logos (X, TikTok, Wikipedia, GitHub...) get a light disc in dark mode. */
:root[data-theme="dark"] .pf-ico.pf-dark { background: #fff; border-radius: 50%; padding: 1px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pf-ico.pf-dark { background: #fff; border-radius: 50%; padding: 1px; }
}

/* =====================================================================
   Visual layer: depth, motion and one central colour (Syracuse orange,
   --brand / --accent). Tokens only, so every preset and dark mode follow.
   ===================================================================== */

:root {
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .05);
  --shadow-md: 0 6px 18px -6px rgb(16 24 40 / .14), 0 2px 6px rgb(16 24 40 / .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --glow: color-mix(in srgb, var(--brand) 16%, transparent);
}
:root[data-theme="dark"] { --shadow-sm: 0 1px 2px rgb(0 0 0 / .35); --shadow-md: 0 8px 24px -8px rgb(0 0 0 / .6); }

/* Wider pages: use the screen, with gutters that grow with it. Reading text
   stays capped separately (.prose, .lede). */
.wrap { padding-inline: clamp(16px, 3vw, 44px); }
.lede { max-width: 80ch; }

/* Backdrop: a soft brand glow in the top corners and a faint dot grid that
   fades out down the page. Fixed and behind everything; never interactive. */
body { position: relative; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 8% -6%, var(--glow), transparent 70%),
    radial-gradient(760px 420px at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 380px, transparent 900px);
          mask-image: linear-gradient(to bottom, #000 0, #000 380px, transparent 900px);
}
.site-header { box-shadow: 0 1px 0 color-mix(in srgb, var(--brand) 25%, transparent); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 0%, transparent) 60%); }
.site-nav a { transition: background .15s var(--ease), color .15s var(--ease); position: relative; }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-weak); }

/* Section headings carry a short brand bar. */
.section > h2::before { content: ""; align-self: center; width: 4px; height: 1.05em; border-radius: 2px;
  background: linear-gradient(var(--brand), var(--accent)); flex: none; }

/* ---- buttons: lift on hover, press on click ---- */
.btn { transition: transform .15s var(--ease), box-shadow .15s var(--ease),
       background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
       box-shadow: var(--shadow-sm); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--accent); color: var(--accent); background: var(--bg); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--accent)); border-color: var(--accent); }
.btn-primary:hover { background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--on-accent, #fff); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: var(--shadow-sm); color: var(--ink); border-color: var(--border-strong); }
.chip { transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease); }
a.chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent); background: var(--accent-weak); }
input[type=search], input[type=text], select { transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
input[type=search]:focus, input[type=text]:focus, select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---- dataset entries: a raised surface with an accent edge on hover ---- */
.ds-card { position: relative; box-shadow: var(--shadow-sm); border-radius: calc(var(--radius) + 2px);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  overflow: hidden; }
.ds-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--brand), var(--accent)); opacity: .0; transition: opacity .18s var(--ease); }
.ds-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ds-card:hover::before, .ds-card.kb-active::before { opacity: 1; }
.ds-card h3 { font-size: 1.04rem; }
.card, .panel { box-shadow: var(--shadow-sm); }

/* ---- headline figures as tiles ---- */
.hero-fig { position: relative; padding: 1rem 1.1rem .9rem; background: var(--bg); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-sm); overflow: hidden; }
.hero-fig::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent)); }
.hero-fig .v { color: var(--ink); }
.hero-fig:first-child .v { color: var(--accent); }

/* ---- homepage hero ---- */
.home-hero { position: relative; max-width: none; padding: 2.2rem clamp(1rem, 3vw, 2.4rem) 2rem;
  margin-top: .5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * 2.5);
  background:
    url("/assets/backdrop.svg") right center / auto 115% no-repeat,
    radial-gradient(600px 300px at 0% 0%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-subtle));
  box-shadow: var(--shadow-md); overflow: hidden; }
.home-hero > * { position: relative; max-width: 72ch; }
.home-hero .hero-title img { filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent));
  animation: echo-float 7s ease-in-out infinite; }
.home-hero h1 { background: linear-gradient(90deg, var(--ink) 40%, var(--accent)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
@keyframes echo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- featured datasets ---- */
.featured-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.feat-card { position: relative; display: flex; flex-direction: column; gap: .45rem; padding: 1.05rem 1.1rem 1rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-sm); color: var(--ink); overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.feat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--feat-c, var(--accent)); }
.feat-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--feat-c, var(--accent)) 16%, transparent), transparent 70%);
  transition: transform .3s var(--ease); }
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--ink);
  border-color: color-mix(in srgb, var(--feat-c, var(--accent)) 45%, var(--border)); }
.feat-card:hover::after { transform: scale(1.35); }
.feat-sub { font-size: .7rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.feat-title { display: flex; align-items: center; gap: .5rem; font-size: 1.12rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.feat-blurb { font-size: .86rem; color: var(--ink-muted); margin: 0; flex: 1; }
.feat-stat { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-subtle); }
.feat-card .chips { margin-top: .1rem; }
.feat-card .chip { font-size: .7rem; }
.feat-1 { --feat-c: var(--viz-cat-1); } .feat-2 { --feat-c: var(--viz-cat-8); } .feat-3 { --feat-c: var(--viz-cat-7); }
.feat-4 { --feat-c: var(--viz-cat-3); } .feat-5 { --feat-c: var(--viz-cat-5); } .feat-6 { --feat-c: var(--viz-cat-4); }
.feat-7 { --feat-c: var(--viz-cat-6); } .feat-8 { --feat-c: var(--viz-cat-2); }

/* Tier key on /stats/. */
dl.tier-key { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .8rem; align-items: center; margin: 0 0 1rem; }
dl.tier-key dt { margin: 0; } dl.tier-key dd { margin: 0; color: var(--ink-muted); }

/* Wide screens: two columns of results rather than one long measure. */
@media (min-width: 1500px) {
  .ds-list.ds-cols, .cat-results .ds-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .home-hero { background: radial-gradient(400px 240px at 0% 0%, var(--glow), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg-subtle)); padding: 1.4rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-title img { animation: none; }
  .btn:hover, .ds-card:hover, .feat-card:hover, a.chip:hover { transform: none; }
}

/* Graph full-screen button: icon + label that flips to "Exit full screen". */
.gv-full { display: inline-flex; align-items: center; gap: .35rem; }
.gv-ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gv-ico-out, .gv-is-full .gv-ico-in { display: none; }
.gv-is-full .gv-ico-out { display: inline; }
.gv-full[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
/* Overlay fallback where the Fullscreen API is missing. */
.graphviz.gv-is-full:not(:fullscreen) { position: fixed; inset: 0; z-index: 200; border-radius: 0; }
html.gv-lock, html.gv-lock body { overflow: hidden; }
@media (max-width: 620px) {
  /* After the 140px desktop rule in source order, so it must be this specific. */
  .home-hero .hero-title { gap: .8rem; align-items: center; }
  .home-hero .hero-title img { height: 60px; }
  .home-hero h1 { font-size: clamp(1.3rem, 6vw, 1.6rem); overflow-wrap: normal; word-break: normal; hyphens: manual; }
}
.about { max-width: 80ch; margin: .35rem 0 .5rem; line-height: 1.5; }