/* ---------------------------------------------------------------------------
   AniVerify — public stylesheet
   Dark-only by design: this is a registry, and the verdict colours are tuned
   for one background rather than compromised across two.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --bg:          #0b0c10;
  --bg-alt:      #101218;
  --panel:       #14161d;
  --panel-2:     #191c24;
  --border:      #262a34;
  --border-soft: #1d212a;

  --text:   #e8eaf0;
  --text-2: #b6bcca;
  --muted:  #7f8798;
  --faint:  #5c6474;

  --accent:      #8b9cff;
  --accent-dim:  #4a55a8;
  --accent-bg:   rgba(139, 156, 255, 0.12);

  --good:    #35d08b;
  --good-bg: rgba(53, 208, 139, 0.12);
  --warn:    #f2b33d;
  --warn-bg: rgba(242, 179, 61, 0.12);
  --bad:     #ff6070;
  --bad-bg:  rgba(255, 96, 112, 0.12);
  --neutral:    #7f8798;
  --neutral-bg: rgba(127, 135, 152, 0.12);

  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --wrap: 1080px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--sans);
  letter-spacing: 0.005em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 650; letter-spacing: -0.015em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 2rem 0;
}

code, .mono { font-family: var(--mono); font-size: 0.9em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }

/* --------------------------------------------------------------- header --- */
.site-header {
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--accent-bg);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--text-2);
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
}
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); background: var(--panel-2); }
.nav a.cta {
  background: var(--accent);
  color: #0a0b10;
  font-weight: 650;
}
.nav a.cta:hover { background: #a3b0ff; color: #0a0b10; }

/* ---------------------------------------------------------------- main ---- */
main { flex: 1 0 auto; padding: 40px 0 72px; }
.page-head { margin-bottom: 28px; }
.page-head p.lede { color: var(--text-2); font-size: 1.02rem; max-width: 62ch; margin: 0; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------- panels --- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
/* Every block that stacks in normal flow gets the same gap, however they are
   mixed. Enumerating pairs was already going wrong -- .callout had no rule at
   all, then .verdict was missed -- so this covers the set rather than the
   combinations. */
:is(.panel, .callout, .verdict) + :is(.panel, .callout, .verdict) { margin-top: 18px; }

/* Containers that space their own children with gap must not double up:
   a grid gap plus a sibling margin is two gaps. Repeats the full selector
   rather than using `> * + *` so it actually outweighs the rule above --
   :is(a,b) counts as one class, so the short form lost on specificity. */
:is(.grid, .split, .side-split, .review-split, .radio-cards)
  > :is(.panel, .callout, .verdict) + :is(.panel, .callout, .verdict) { margin-top: 0; }
.panel-tight { padding: 16px 18px; }
.panel h2:first-child, .panel h3:first-child { margin-top: 0; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }

/* --------------------------------------------------------------- badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.5;
}
.badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge-good    { color: var(--good);    background: var(--good-bg);    border-color: rgba(53, 208, 139, 0.32); }
.badge-warn    { color: var(--warn);    background: var(--warn-bg);    border-color: rgba(242, 179, 61, 0.32); }
.badge-bad     { color: var(--bad);     background: var(--bad-bg);     border-color: rgba(255, 96, 112, 0.32); }
.badge-muted   { color: var(--neutral); background: var(--neutral-bg); border-color: rgba(127, 135, 152, 0.3); }
.badge-accent  { color: var(--accent);  background: var(--accent-bg);  border-color: var(--accent-dim); }
.badge-lg { font-size: 0.92rem; padding: 6px 14px 6px 11px; }
.badge-plain::before { display: none; }

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 600;
}

/* ------------------------------------------------------------- verdict ---- */
.verdict {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 22px;
  border-left-width: 3px;
}
.verdict-good { border-left-color: var(--good); }
.verdict-warn { border-left-color: var(--warn); }
.verdict-bad  { border-left-color: var(--bad); }
.verdict-muted{ border-left-color: var(--neutral); }
.verdict .verdict-detail { color: var(--text-2); margin: 12px 0 0; font-size: 0.95rem; }

/* ---------------------------------------------------------------- forms --- */
label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.field { margin-bottom: 20px; }
.field .hint { color: var(--muted); font-size: 0.82rem; margin: 6px 0 0; font-weight: 400; }

input[type="text"], input[type="url"], input[type="email"], input[type="search"],
textarea, select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
input::placeholder, textarea::placeholder { color: var(--faint); }

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 10px;
}
.check input { margin: 3px 0 0; flex: none; accent-color: var(--accent); }

.radio-cards { display: grid; gap: 10px; }
.radio-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}
.radio-card:hover { border-color: var(--accent-dim); }
.radio-card input { margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.radio-card .rc-title { font-weight: 650; font-size: 0.94rem; color: var(--text); }
.radio-card .rc-body  { color: var(--muted); font-size: 0.84rem; margin-top: 3px; }
.radio-card input:checked ~ div .rc-title { color: var(--accent); }
.radio-card.is-disabled { opacity: 0.55; cursor: not-allowed; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--accent);
  color: #0a0b10;
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  cursor: pointer;
}
.btn:hover { background: #a3b0ff; text-decoration: none; color: #0a0b10; }
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------------- search --- */
.searchbar { display: flex; gap: 8px; }
.searchbar input { flex: 1; }
.searchbar.big input { padding: 14px 16px; font-size: 1rem; }
.searchbar.big .btn { padding: 14px 22px; font-size: 0.95rem; }

.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}
.filters a {
  font-size: 0.82rem;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--panel);
  font-weight: 550;
}
.filters a:hover { border-color: var(--accent-dim); text-decoration: none; }
.filters a.on { background: var(--accent-bg); border-color: var(--accent-dim); color: var(--accent); }
.filters .sep { color: var(--faint); font-size: 0.8rem; margin: 0 2px; }

/* ---------------------------------------------------------------- cards --- */
.artist-list { display: grid; gap: 10px; }
.artist-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
}
.artist-row:hover { border-color: var(--accent-dim); text-decoration: none; background: var(--panel-2); }
.avatar {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--muted);
  font-size: 0.9rem;
  flex: none;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.artist-row .who { min-width: 0; flex: 1; }
.artist-row .name {
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.artist-row .handle { color: var(--muted); font-size: 0.84rem; font-family: var(--mono); }
.artist-row .meta { color: var(--faint); font-size: 0.78rem; text-align: right; white-space: nowrap; }

/* ----------------------------------------------------- browse grid cards -- */
/* Public browse view. The border carries the verdict, so the grid can be read
   at a glance without stopping on any single card. */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
}

.artist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 168px;
  padding: 15px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 2px solid var(--border);
  color: inherit;
  overflow: hidden;
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease;
}
.artist-card:hover {
  text-decoration: none;
  background: var(--panel-2);
  transform: translateY(-2px);
}

.artist-card .ac-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.artist-card .ac-body { display: block; margin-top: auto; min-width: 0; }
.artist-card .ac-name {
  display: block;
  font-weight: 650;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artist-card .ac-handle {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artist-card .ac-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft);
}
.artist-card .ac-status {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.artist-card .ac-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.artist-card .ac-date { font-size: 0.72rem; color: var(--faint); white-space: nowrap; }

.artist-card .ac-appeal {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 2px 8px;
  flex: none;
}

/* Verdict colours. The glow is deliberately faint — this is a registry, not
   an alarm panel, and a wall of shouting red would misrepresent the calls. */
.artist-card.ac-good {
  border-color: var(--good);
  box-shadow: 0 0 20px -8px rgba(53, 208, 139, 0.55);
}
.artist-card.ac-good:hover { box-shadow: 0 0 26px -6px rgba(53, 208, 139, 0.75); }
.artist-card.ac-good .ac-status { color: var(--good); }

.artist-card.ac-muted {
  border-color: var(--neutral);
  box-shadow: 0 0 20px -9px rgba(127, 135, 152, 0.5);
}
.artist-card.ac-muted:hover { box-shadow: 0 0 26px -7px rgba(127, 135, 152, 0.7); }
.artist-card.ac-muted .ac-status { color: var(--neutral); }

.artist-card.ac-bad {
  border-color: var(--bad);
  box-shadow: 0 0 20px -8px rgba(255, 96, 112, 0.55);
}
.artist-card.ac-bad:hover { box-shadow: 0 0 26px -6px rgba(255, 96, 112, 0.75); }
.artist-card.ac-bad .ac-status { color: var(--bad); }

/* Unreviewed: dashed and unlit. Nobody has looked, so nothing is being said. */
.artist-card.ac-none {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
}
.artist-card.ac-none:hover { background: var(--panel); }
.artist-card.ac-none .ac-name { color: var(--text-2); }
.artist-card.ac-none .ac-status { color: var(--faint); }

.grid-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
  font-size: 0.78rem;
  color: var(--muted);
}
.grid-legend span { display: inline-flex; align-items: center; gap: 7px; }
.grid-legend i {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 2px solid;
  flex: none;
}

/* ----------------------------------------------------------------- stat --- */
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat .n { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.stat .k { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; margin-top: 4px; }
.stat.good .n { color: var(--good); }
.stat.warn .n { color: var(--warn); }
.stat.bad  .n { color: var(--bad); }
.stat.muted .n { color: var(--neutral); }

/* ---------------------------------------------------------------- queue --- */
.meter {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 10px 0 8px;
}
.meter > span { display: block; height: 100%; background: var(--accent); }
.meter.full > span { background: var(--bad); }

.ladder { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.rung {
  flex: 1 1 auto;
  min-width: 58px;
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  font-size: 0.8rem;
}
.rung .slot { color: var(--faint); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.rung .price { font-weight: 700; color: var(--text-2); font-size: 0.95rem; }
.rung.taken { opacity: 0.42; }
.rung.next { border-color: var(--accent-dim); background: var(--accent-bg); }
.rung.next .price { color: var(--accent); }

/* ----------------------------------------------------------------- misc --- */
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.callout.warn { border-left-color: var(--warn); }
.callout.bad  { border-left-color: var(--bad); }
.callout h3 { margin-bottom: 6px; font-size: 0.98rem; }
.callout p { font-size: 0.92rem; color: var(--text-2); }

.errors {
  border: 1px solid rgba(255, 96, 112, 0.4);
  background: var(--bad-bg);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
}
.errors ul { margin: 0; padding-left: 18px; }
.errors li { color: #ffb3ba; font-size: 0.9rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 42px;
  margin-bottom: 20px;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.steps li strong { display: block; margin-bottom: 3px; }
.steps li p { color: var(--text-2); font-size: 0.91rem; margin: 0; }

.evidence-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.evidence-list li {
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.evidence-list .desc { color: var(--text-2); }
.evidence-list a { word-break: break-all; font-size: 0.86rem; }

.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: 0.9rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; color: var(--text); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 20px 24px;
  border-left: 1px solid var(--border);
  margin-left: 5px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 5px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
}
.timeline li.done::before { background: var(--good); border-color: var(--good); }
.timeline li.now::before  { background: var(--accent); border-color: var(--accent); }
.timeline .t-title { font-weight: 650; font-size: 0.94rem; }
.timeline .t-body  { color: var(--muted); font-size: 0.86rem; }

.code-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  color: var(--accent);
  user-select: all;
}

.empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.empty h3 { color: var(--text-2); }

/* ------------------------------------------------------- authored prose --- */
/* Body copy from the editable pages. Generous measure and spacing, because
   these pages are read rather than scanned. */
.prose { padding: 30px 34px; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.72;
  margin: 0 0 1.15em;
  max-width: 68ch;
}
.prose h2 {
  font-size: 1.18rem;
  color: var(--text);
  margin: 2em 0 0.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border-soft);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1.02rem; color: var(--text); margin: 1.7em 0 0.5em; }
.prose strong { color: var(--text); font-weight: 650; }
.prose .page-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.15em;
  max-width: 68ch;
}
.prose .page-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.55em;
  color: var(--text-2);
  line-height: 1.66;
}
.prose .page-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-dim);
}

@media (max-width: 640px) {
  .prose { padding: 22px 20px; }
  .prose p, .prose .page-list li { font-size: 0.95rem; }
}

/* --------------------------------------------------------- konami egg --- */
/* The homepage easter egg (public/js/konami.js): the site briefly possessed
   by the automated detector it refuses to be, resolving to Uncertain.

   Deliberately NOT a strobe. The motion here is character churn plus one slow
   sweep -- no full-screen luminance flashing, and prefers-reduced-motion drops
   the animation entirely. A site that publishes an accommodation clause should
   not ship a seizure risk for a joke. */
.kx {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;                /* the page underneath stays usable */
  animation: kx-in 0.22s ease-out;
}

/* The dim is its own layer because it has to change mid-run and a
   background-image cannot be transitioned -- an opacity can. It sits at half
   strength through the scan so the page is visible enough to watch come apart,
   then goes full when the verdict resolves and everything calms down. */
.kx-dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(11, 12, 16, 0.88), rgba(11, 12, 16, 0.97));
  opacity: 0.5;
  transition: opacity 0.65s ease;
}
.kx-calm .kx-dim { opacity: 0.72; }
.kx-out { opacity: 0; transition: opacity 0.3s ease; }
@keyframes kx-in { from { opacity: 0; } to { opacity: 1; } }

/* One pass down the viewport, not a loop. */
/* Travels down, then back up, at one unchanging speed: `linear` so it does not
   ease at the ends, `alternate` so the return leg is the same pass reversed.
   Any easing here reads as the scanner hesitating, which it should not. */
.kx-sweep {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(180deg, transparent, rgba(255, 96, 112, 0.2), transparent);
  animation: kx-sweep 1.6s linear infinite alternate;
  transition: opacity 0.5s ease;
}
/* It gives up when the verdict does. */
.kx-calm .kx-sweep { opacity: 0; }
@keyframes kx-sweep {
  from { transform: translateY(-140px); }
  to   { transform: translateY(100vh); }
}

.kx-hud {
  font-family: var(--mono);            /* the font the site already reserves
                                          for machine-generated identifiers */
  text-align: center;
  padding: 26px 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(17, 19, 25, 0.985);
  box-shadow: var(--shadow);
  min-width: min(420px, 84vw);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.kx-hot .kx-hud {
  border-color: var(--bad);
  box-shadow: 0 0 0 1px rgba(255, 96, 112, 0.25), 0 0 44px rgba(255, 96, 112, 0.18);
}
.kx-calm .kx-hud {
  border-color: var(--border);
  box-shadow: var(--shadow), 0 0 60px rgba(0, 0, 0, 0.55);
}

.kx-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.kx-tag {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
}
.kx-hot .kx-blink { color: var(--bad); }
.kx-blink { animation: kx-pulse 1.1s ease-in-out infinite; }   /* ~0.9Hz, well
                                          under the 3-per-second flash limit */
@keyframes kx-pulse { 50% { opacity: 0.35; } }

.kx-verdict {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--muted);
  transition: color 0.5s ease;
}
.kx-hot  .kx-verdict { color: var(--bad); }
.kx-calm .kx-verdict { color: var(--neutral); }

.kx-conf {
  margin-top: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.kx-num { color: var(--text-2); }
.kx-hot .kx-num { color: var(--bad); }
/* The unit goes when the number does: "CONFIDENCE --%" reads like a broken
   template, and the point is that there is no figure, not that it is zero. */
.kx-resolved .kx-pct { display: none; }

/* The line that says what the joke was for. */
.kx-note {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.kx-resolved .kx-note { opacity: 1; }

/* A small shake under the corruption, while the scan runs.
   Deliberately tiny -- 1px of travel and a sub-pixel colour split, no opacity
   flicker. The words changing are the effect; this only has to suggest a
   picture that will not quite hold still. Anything bigger and the two read as
   competing rather than as one bad signal.

   `text-shadow` is inherited, so one declaration on <main> splits every
   character under it without touching a single descendant rule. */
.kx-glitch main {
  animation: kx-jitter 0.2s steps(2, end) infinite;
  text-shadow: -0.6px 0 rgba(255, 96, 112, 0.42), 0.6px 0 rgba(96, 190, 255, 0.28);
}
@keyframes kx-jitter {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-1px, 0, 0); }
  50%  { transform: translate3d(1px, 0, 0); }
  75%  { transform: translate3d(0, 1px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .kx, .kx-sweep, .kx-blink { animation: none; }
  .kx-sweep { display: none; }
  /* The JS never sets this class under reduced motion; this is the backstop. */
  .kx-glitch main { animation: none; text-shadow: none; }
}

@media (max-width: 640px) {
  .kx-hud { padding: 20px 22px; }
  .kx-verdict { font-size: 1.25rem; }
}

/* ----------------------------------------------------------- FAQ entries --- */
/* Collapsed questions on /faq. Native <details>, so no script runs and an
   answer is still findable by the browser's find-in-page while closed. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--accent-dim); }

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;                 /* the default marker, replaced below */
  color: var(--text);
  font-weight: 620;
  font-size: 1.02rem;
  line-height: 1.45;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--panel-2); }
.faq-item > summary:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: -2px;
}

/* Chevron, drawn rather than typed so it rotates cleanly and cannot pick up a
   colour emoji presentation. */
.faq-chev {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 3px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: 65% 65%;
  transition: transform 0.15s ease;
}
.faq-item[open] .faq-chev { transform: rotate(-135deg); border-color: var(--accent); }

.faq-a {
  padding: 2px 20px 20px;
  border-top: 1px solid var(--border-soft);
  margin-top: -1px;
}
.faq-a > *:first-child { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .faq-chev { transition: none; }
}

@media (max-width: 640px) {
  .faq-item > summary { padding: 14px 16px; font-size: 0.97rem; }
  .faq-a { padding: 2px 16px 16px; }
}

.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 32px; }
.mb-2 { margin-bottom: 20px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--text-2);
}
.pagination .on { background: var(--accent-bg); border-color: var(--accent-dim); color: var(--accent); }
.pagination .off { opacity: 0.4; }

/* --------------------------------------------------------------- footer --- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-alt);
  padding: 32px 0;
  color: var(--muted);
  font-size: 0.86rem;
  flex: none;
}
.site-footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.site-footer a { color: var(--text-2); }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main { padding: 26px 0 48px; }
  .artist-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .artist-card { min-height: 148px; padding: 13px; }
  .grid-legend { gap: 10px; font-size: 0.72rem; }
  h1 { font-size: 1.5rem; }
  .site-header .wrap { height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; gap: 10px; }
  .nav { margin-left: 0; width: 100%; }
  .grid-2, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 10px; }
  .artist-row .meta { display: none; }
  .searchbar { flex-wrap: wrap; }
  .searchbar .btn { width: 100%; }
}

/* --------------------------------------------------- queue head + track --- */
/* The lookup sits beside the page title rather than below the queue: someone
   who already submitted is not here to read the queue, they want their code
   redeemed and to leave. */
.queue-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}

.track-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.track-box h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
}
.track-box p {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}
.track-box .row { display: flex; gap: 8px; align-items: stretch; }
.track-box input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
}
.track-box .btn { flex: none; white-space: nowrap; }

@media (max-width: 820px) {
  .queue-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Checkbox groups inside a callout — the submit form's rule and confirmation
   blocks. Stacked checks need a rule between them or they read as one run-on
   paragraph. */
.callout .check + .check {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* ------------------------------------------------------ identicon + facts -- */
.avatar .identicon {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
}
.avatar-lg {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  font-size: 1.2rem;
  overflow: hidden;
  flex: none;
}

/* Observable account facts. A grid rather than a definition list: these are
   meant to be compared at a glance, not read as prose. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.facts .fact {
  background: var(--bg-alt);
  padding: 12px 14px;
}
.facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0 0 4px;
}
.facts dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Evidence and profile references render as text, never as anchors. The site
   emits no outbound link to anything an artist made or posted. */
.ref-text {
  font-size: 0.86rem;
  color: var(--text-2);
  word-break: break-all;
}