/* ReplayCourt explorer - light and dark theme (system preference, or the header toggle). */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f1f3f6;
  --text: #17191d;
  --muted: #5d6673;
  --border: #dfe3e8;
  --accent: #2463eb;
  --accent-soft: #e7eefd;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);

  --ok: #157a3d;      --ok-bg: #e3f5ea;
  --bad: #b42318;     --bad-bg: #fde8e6;
  --warn: #9a5b00;    --warn-bg: #fdf1dc;
  --info: #1d4fbf;    --info-bg: #e5edfd;
  --human: #6b3fc2;   --human-bg: #efe8fd;
  --neutral: #4b5563; --neutral-bg: #eceef1;

  --sev-critical: #b42318; --sev-high: #c2410c; --sev-medium: #9a6700; --sev-low: #4b5563;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1c222b;
  --text: #e6e9ee;
  --muted: #98a2b0;
  --border: #2a313c;
  --accent: #7ba7ff;
  --accent-soft: #1b2a47;
  --shadow: none;

  --ok: #4ad07f;      --ok-bg: #12301f;
  --bad: #ff7b72;     --bad-bg: #3a1714;
  --warn: #f0b350;    --warn-bg: #36270c;
  --info: #8ab4ff;    --info-bg: #172748;
  --human: #c4a7ff;   --human-bg: #2a1d47;
  --neutral: #b4bcc8; --neutral-bg: #252c36;

  --sev-critical: #ff7b72; --sev-high: #ff9d5c; --sev-medium: #f0c050; --sev-low: #b4bcc8;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1116;
    --panel: #161b22;
    --panel-2: #1c222b;
    --text: #e6e9ee;
    --muted: #98a2b0;
    --border: #2a313c;
    --accent: #7ba7ff;
    --accent-soft: #1b2a47;
    --shadow: none;

    --ok: #4ad07f;      --ok-bg: #12301f;
    --bad: #ff7b72;     --bad-bg: #3a1714;
    --warn: #f0b350;    --warn-bg: #36270c;
    --info: #8ab4ff;    --info-bg: #172748;
    --human: #c4a7ff;   --human-bg: #2a1d47;
    --neutral: #b4bcc8; --neutral-bg: #252c36;

    --sev-critical: #ff7b72; --sev-high: #ff9d5c; --sev-medium: #f0c050; --sev-low: #b4bcc8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: 0.88em; }
code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.35em; }
h1 { font-size: 1.65rem; line-height: 1.25; margin: 0.6rem 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 1.8rem 0 0.7rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.spacer { flex: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); font-size: 0.85em; }
.nowrap { white-space: nowrap; }
.ok-text { color: var(--ok); }
.bad-text { color: var(--bad); }
.warn-text { color: var(--warn); font-weight: 600; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* header */
.top { background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; }
.top-inner { display: flex; align-items: center; gap: 14px; height: 56px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.net { font: 600 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn); background: var(--warn-bg); border-radius: 999px; padding: 4px 8px; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { color: var(--muted); padding: 6px 10px; border-radius: 6px; font-weight: 500; }
.nav a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.nav a.active { color: var(--text); background: var(--accent-soft); }
.proto { font: 600 0.72rem/1 var(--mono); color: var(--neutral); background: var(--neutral-bg); border-radius: 999px; padding: 4px 8px; }
.proto[hidden] { display: none; }
.ro { color: var(--muted); font-size: 0.8rem; }
.theme-btn { font: inherit; font-size: 0.85rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.theme-btn:hover { border-color: var(--accent); }
.banner { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 0.9rem; }

main { padding-top: 10px; padding-bottom: 32px; min-height: 60vh; }
.loading { color: var(--muted); padding: 40px 0; }
.foot { color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--border); padding-top: 14px; padding-bottom: 28px; }

.lead { font-size: 1.02rem; max-width: 980px; color: var(--text); margin: 0 0 1.2rem; }
.small-lead { font-size: 0.95rem; }
.crumbs { font-size: 0.85rem; color: var(--muted); margin-top: 8px; }
.crumbs .sep { margin: 0 6px; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-row h1 { margin-right: 4px; overflow-wrap: anywhere; }
.meta { color: var(--muted); margin: -0.2rem 0 1rem; }

/* tiles and panels */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.tile-label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tile-value { font-size: 1.25rem; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tile-value .acct { font-size: 0.82rem; word-break: break-all; }
.tile-hint { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.panel h2 { margin-top: 0; font-size: 1.05rem; }
.panel-head { display: flex; align-items: baseline; gap: 10px; }
.row-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.row-split.two { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.scope { margin: 12px 0; }
.error { border-color: var(--bad); }
.error h2 { color: var(--bad); }

.card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 6px; margin-bottom: 16px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: 1.1rem; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; }
table.list th, table.list td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.list th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--panel-2); vertical-align: bottom; }
table.list th.num { text-align: right; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover td { background: var(--panel-2); }
.title-cell { min-width: 240px; max-width: 420px; overflow-wrap: anywhere; }
table.list .acct, table.list td.num { white-space: nowrap; }
.title-cell a { color: var(--text); font-weight: 500; }
table.kv th { text-align: left; font-weight: 500; color: var(--muted); padding: 5px 14px 5px 0; vertical-align: top; white-space: nowrap; width: 1%; }
table.kv td { padding: 5px 10px 5px 0; vertical-align: top; overflow-wrap: anywhere; }
table.kv.compact th, table.kv.compact td { padding-top: 2px; padding-bottom: 2px; }
table.kv td.num + th { padding-left: 28px; }
table.kv td.num { white-space: nowrap; }
.reason { white-space: pre-wrap; overflow-wrap: anywhere; }
code.hash { font-size: 0.8rem; word-break: break-all; }
.acct { font-family: var(--mono); font-size: 0.86em; overflow-wrap: anywhere; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 2px 0; }

/* badges */
.badge { display: inline-block; font-size: 0.76rem; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; white-space: nowrap; color: var(--neutral); background: var(--neutral-bg); }
.st-paid { color: var(--ok); background: var(--ok-bg); }
.st-valid { color: var(--info); background: var(--info-bg); }
.st-pending { color: var(--neutral); background: var(--neutral-bg); }
.st-invalid, .st-rejected { color: var(--bad); background: var(--bad-bg); }
.st-duplicate { color: var(--warn); background: var(--warn-bg); }
.st-needs_human { color: var(--human); background: var(--human-bg); }
.st-disputed { color: var(--warn); background: var(--warn-bg); }
.st-withdrawn, .st-expired, .st-unknown { color: var(--neutral); background: var(--neutral-bg); }
.st-expired { box-shadow: inset 0 0 0 1px var(--border); }
.tag { display: inline-block; font-size: 0.7rem; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; color: var(--human); background: var(--human-bg); vertical-align: 1px; font-family: var(--sans); }
.note { margin: 8px 0 0; }
.left { font-variant-numeric: tabular-nums; color: var(--info); font-weight: 600; }
.left.passed { color: var(--warn); font-weight: 500; }
.chip { display: inline-block; font-size: 0.75rem; padding: 2px 7px; border-radius: 999px; margin: 1px 3px 1px 0; white-space: nowrap; }
.chip:hover { text-decoration: none; filter: brightness(0.95); }
.ids { min-width: 220px; }

.sev { font-weight: 600; text-transform: capitalize; }
.sev-critical { color: var(--sev-critical); }
.sev-high { color: var(--sev-high); }
.sev-medium { color: var(--sev-medium); }
.sev-low, .sev-unknown { color: var(--sev-low); }
.outcome { font-weight: 600; }
.oc-valid { color: var(--ok); }
.oc-invalid { color: var(--bad); }
.oc-duplicate { color: var(--warn); }
.oc-needs_human { color: var(--human); }

/* evidence check */
.evcheck { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin: 14px 0; background: var(--panel); }
.evcheck:has(> .evhead) { display: block; }
.evhead { display: flex; gap: 16px; align-items: flex-start; }
.formula { font-family: var(--mono); font-size: 0.78rem; margin-top: 2px; }
.evcheck h2 { margin: 2px 0 4px; font-size: 1.1rem; }
.evcheck p { margin: 0 0 8px; }
.evcheck .mark { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: var(--neutral); background: var(--neutral-bg); }
.evcheck.ok { border-color: var(--ok); background: var(--ok-bg); }
.evcheck.ok .mark { color: #fff; background: var(--ok); }
.evcheck.ok h2 { color: var(--ok); }
.evcheck.bad { border-color: var(--bad); background: var(--bad-bg); }
.evcheck.bad .mark { color: #fff; background: var(--bad); }
.evcheck.bad h2 { color: var(--bad); }
.evcheck.private { border-color: var(--info); background: var(--info-bg); }
.evcheck.private .mark { color: #fff; background: var(--info); }
.evcheck.private h2 { color: var(--info); }
.evcheck table.kv th { color: inherit; opacity: 0.8; }
.evbody { flex: 1; min-width: 0; }
:root[data-theme="dark"] .evcheck.ok .mark, :root[data-theme="dark"] .evcheck.bad .mark, :root[data-theme="dark"] .evcheck.private .mark { color: #0e1116; }
.checks-wrap { background: var(--panel); margin-top: 12px; }
table.checks th, table.checks td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.checks tbody tr:last-child th, table.checks tbody tr:last-child td { border-bottom: 0; }
table.checks thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--panel-2); font-weight: 600; }
table.checks tbody th { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--muted); white-space: nowrap; width: 1%; }
table.checks td { width: 49%; overflow-wrap: anywhere; }
table.checks td.ck { width: 1%; text-align: center; font-weight: 700; font-size: 1.05rem; }
table.checks code.hash { background: none; border: 0; padding: 0; font-size: 0.75rem; }
.ck-ok { color: var(--ok); }
.ck-bad { color: var(--bad); }
table.checks tr.bad-row td, table.checks tr.bad-row th { background: var(--bad-bg); }

/* hunters: per-program stats and vault */
.hunter-card { padding-bottom: 14px; }
.hunter-card .card-head { margin-bottom: 10px; }
.hunter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.hunter-grid .title-cell { min-width: 220px; }
.vault h3 { margin: 0; }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; margin-top: 10px; }
.vi { min-width: 0; }
.vi-label { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.vi-value { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vi-hint { color: var(--muted); font-size: 0.8rem; }

/* rendered summary.md */
.evidence { margin-top: 14px; }
.md-body { max-width: 100%; overflow-wrap: anywhere; }
.md-body h3 { font-size: 1.15rem; margin: 0.4rem 0 0.6rem; }
.md-body h4 { font-size: 1rem; margin: 1.2rem 0 0.4rem; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.md-body h5, .md-body h6 { font-size: 0.95rem; margin: 1rem 0 0.3rem; }
.md-body p { margin: 0.4rem 0; }
.md-body ul { margin: 0.3rem 0; padding-left: 1.3rem; }
.md-body pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.md-body pre code { background: none; border: 0; padding: 0; font-size: 0.82rem; }
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.md-body .table-wrap { margin: 0.5rem 0; }
table.md th, table.md td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.88rem; }
table.md th { background: var(--panel-2); }

/* overview for first-time visitors */
.foot:empty { display: none; }
html, body { overflow-x: clip; }
.top { background: #0a1020; border-bottom-color: #1c2a4d; }
.top .brand, .top .nav a.active, .top .theme-btn { color: #fff; }
.top .nav a, .top .ro { color: #9fb0d0; }
.top .nav a:hover { background: #17233f; color: #fff; }
.top .nav a.active { background: #1d3163; }
.top .theme-btn { background: #17233f; border-color: #2a3a63; }
.top .proto { color: #b9c6e0; background: #17233f; }

.hero { color: #fff; margin: -10px calc(50% - 50vw) 0; padding: 56px calc(50vw - 50%) 96px;
  background: radial-gradient(900px 420px at 85% 0%, #2a57d6 0%, transparent 70%), radial-gradient(700px 400px at 5% 100%, #5b2bb8 0%, transparent 70%), #0a1020; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 16px; }
.hero h1 em { font-style: normal; color: #ffc24b; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #c5d2ee; font-size: 0.88rem; font-weight: 500; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; animation: pulse 2s infinite; }
.lede { font-size: 1.28rem; line-height: 1.4; margin: 0 0 28px; color: #dbe4f7; max-width: 30em; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 36px; margin: 0; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dd { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hero-stats dt { color: #9fb0d0; font-size: 0.85rem; }

.replay { display: block; color: #e6ecfa; background: rgba(8, 13, 28, 0.82); border: 1px solid #2c3d6b; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: hidden; position: relative; }
.replay:hover { text-decoration: none; border-color: #5b84e8; }
.replay-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #111a33; }
.replay-bar span { width: 10px; height: 10px; border-radius: 50%; background: #33426b; }
.replay-bar em { font: 500 0.78rem var(--mono); color: #9fb0d0; margin-left: 8px; font-style: normal; }
.replay dl { margin: 0; padding: 16px 18px 86px; font: 0.88rem/1.5 var(--mono); }
.replay-line { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 8px; padding: 3px 0; animation: line-in 0.4s both; }
.replay-line dt { color: #7f93bd; }
.replay-line dd { margin: 0; overflow-wrap: anywhere; }
.d1 { animation-delay: 0.3s; } .d2 { animation-delay: 0.9s; } .d3 { animation-delay: 1.5s; } .d4 { animation-delay: 2.1s; }
.replay-stamp { position: absolute; right: 18px; bottom: 16px; animation: stamp-in 0.35s 2.8s both cubic-bezier(0.2, 1.6, 0.4, 1); }
.replay-stamp .stamp { font-size: 1.1rem; background: rgba(8, 13, 28, 0.6); }

.stamp { display: inline-block; flex: none; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 5px 11px; border: 2.5px solid currentColor; border-radius: 7px; transform: rotate(-4deg); }
.stamp-ok { color: var(--ok); } .stamp-bad { color: var(--bad); } .stamp-warn { color: var(--warn); } .stamp-info { color: var(--info); }
.replay .stamp-ok { color: #4ee08f; }

.roles { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin: -58px 0 0; }
.role { background: var(--panel); border-radius: 16px; box-shadow: 0 14px 38px rgba(10, 16, 32, 0.22); border-top: 5px solid var(--role); transition: transform 0.15s, box-shadow 0.15s; }
.role:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(10, 16, 32, 0.3); }
.role-hunter { --role: #f5a524; } .role-owner { --role: #3b82f6; }
.role summary { display: flex; align-items: center; gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none; }
.role summary::-webkit-details-marker { display: none; }
.role-icon { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; color: var(--role); background: color-mix(in srgb, var(--role) 15%, transparent); }
.role-icon svg, .flow-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-head { flex: 1; display: flex; flex-direction: column; min-width: 0; color: var(--muted); }
.role-head strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.015em; color: var(--text); line-height: 1.2; }
.role-open { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--role); position: relative; }
.role-open::before, .role-open::after { content: ""; position: absolute; left: 10px; right: 10px; top: 16px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform 0.15s; }
.role-open::after { transform: rotate(90deg); }
.role[open] .role-open::after { transform: rotate(0deg); }
.role-steps { margin: 0; padding: 0 24px 0 46px; font-size: 0.94rem; }
.role-steps li { margin-bottom: 10px; }
.role-more { margin: 0; padding: 4px 24px 20px; font-weight: 600; }
code.cmd { display: block; margin-top: 4px; overflow-wrap: anywhere; }

h2.section { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 2.8rem 0 1.1rem; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 44px; align-items: start; }
.flow { list-style: none; display: grid; gap: 20px; margin: 0; padding: 0; position: relative; }
.flow::before { content: ""; position: absolute; left: 28px; top: 20px; bottom: 60px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #f5a524, #3b82f6 40%, #7c4dff 70%, #18a058); }
.flow li { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.flow-icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: var(--accent); background: var(--panel); border: 3px solid var(--accent-soft); box-shadow: var(--shadow); }
.flow h3 { display: inline; font-size: 1.12rem; font-weight: 800; margin: 0 8px 0 0; }
.flow p { margin: 4px 0 0; color: var(--muted); font-size: 0.93rem; }
.demo { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #0a1020; box-shadow: 0 18px 44px rgba(10, 16, 32, 0.28); }
.who { font-size: 0.72rem; font-weight: 600; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

.cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0 0 1.4rem; }
.case { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 124px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; color: inherit; box-shadow: var(--shadow); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.case:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 28px rgba(10, 16, 32, 0.14); }
.case-id { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.case-title { flex: 1; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.fineprint { margin: 1.4rem 0 2rem; }

details.more { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 10px 0; }
details.more.inner { background: transparent; border: 0; padding: 0; margin: 4px 0 0; }
details.more summary { cursor: pointer; font-weight: 500; }
details.more[open] summary { margin-bottom: 8px; }
.card-line { margin: 6px 0 10px; }
.result { margin: 6px 0 16px; }
.result::after { content: ""; display: block; clear: both; }
.result-stamp { float: right; margin: 4px 0 8px 18px; }
.result-stamp .stamp { font-size: 1.15rem; padding: 7px 14px; }
.result-main { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; }
.result-why { color: var(--muted); margin: 0; }
.trail { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -18px 0 14px; padding: 0; }
.trail li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 26px rgba(10, 16, 32, 0.16); border-top: 4px solid var(--role); }
.trail .by-hunter { --role: #f5a524; } .trail .by-verifier { --role: #3b82f6; } .trail .by-contract { --role: #18a058; }

/* inner pages: the same band as the start page */
.band { color: #fff; margin: -10px calc(50% - 50vw) 0; padding: 36px calc(50vw - 50%) 56px;
  background: radial-gradient(800px 300px at 90% 0%, #2a57d6 0%, transparent 70%), radial-gradient(600px 300px at 0% 100%, #5b2bb8 0%, transparent 70%), #0a1020; }
.band .crumbs { color: #9fb0d0; margin: 0 0 16px; }
.band a { color: #a9c6ff; }
.band code { background: #17233f; border-color: #2a3a63; color: #e6ecfa; }
.band-main { display: flex; align-items: flex-start; gap: 28px; }
.band-copy { flex: 1; min-width: 0; }
.band h1 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 10px; overflow-wrap: anywhere; }
.band h1:has(.band-id) { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.band-id { color: #8fa3cc; font-weight: 700; }
.band-lede { color: #dbe4f7; font-size: 1.05rem; }
.band-lede p { margin: 0 0 6px; }
.band-note { display: block; color: #9fb0d0; font-size: 0.86rem; margin-top: 6px; }
.band-side { flex: none; padding-top: 8px; }
.band-side .stamp { font-size: 1.15rem; padding: 7px 14px; background: rgba(8, 13, 28, 0.55); }
.band .stamp-ok { color: #4ee08f; } .band .stamp-bad { color: #ff8a80; } .band .stamp-warn { color: #ffc24b; } .band .stamp-info { color: #9ec1ff; }
.band .hero-stats { margin-top: 22px; }
.band .result-main { font-size: 1.28rem; font-weight: 600; color: #fff; }
.band .result-why { color: #c5d2ee; }
.rule { display: inline-block; font-size: 0.86rem; color: #dbe4f7; background: rgba(255, 255, 255, 0.09); border-radius: 999px; padding: 2px 11px; margin: 4px 4px 0 0; }
.rule b { color: #ffc24b; }

.program-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; }
.program-card { display: flex; flex-direction: column; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: 14px; padding: 18px 20px; color: inherit; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; }
.program-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10, 16, 32, 0.14); }
.program-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.program-card h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.mini-stats { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }
.mini-stats div { display: flex; flex-direction: column; }
.mini-stats dd { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mini-stats dt { color: var(--muted); font-size: 0.8rem; }
.program-open { color: var(--accent); font-weight: 600; }

.terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 0; }
.term { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; }
.term dt { font-weight: 700; margin-bottom: 2px; }
.term dd { margin: 0; color: var(--muted); font-size: 0.93rem; }
.tech .lead { margin: 0 0 0.8rem; }
.tech .lead:last-child { margin-bottom: 0; }

table.reports .stamp { font-size: 0.86rem; padding: 4px 10px; }
table.reports tr.row-paid td { background: color-mix(in srgb, var(--ok-bg) 35%, transparent); }
table.reports td { vertical-align: middle; }
.result-note { margin-top: 5px; }

.hunter-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin: 24px 0 2rem; align-items: start; }
section.hunter-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.hunter-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rank { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: var(--accent); background: var(--accent-soft); }
.hunter-name { flex: 1; min-width: 0; font-weight: 600; }
.hunter-name .acct { font-size: 0.78rem; }
.hunter-earned { flex: none; text-align: right; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.hunter-earned span:last-child { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 500; }
.record { display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.r-ok { fill: var(--ok); } .r-bad { fill: var(--bad); } .r-warn { fill: var(--warn); } .r-human { fill: var(--human); }
.record-legend { margin: 6px 0 12px; font-size: 0.85rem; color: var(--muted); }
.l-ok { color: var(--ok); } .l-bad { color: var(--bad); } .l-warn { color: var(--warn); } .l-human { color: var(--human); }
.chips { margin-bottom: 8px; }
.hunter-card details.more.inner { margin-top: 10px; }
.hunter-card .vault { margin-top: 10px; }

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes stamp-in { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .live-dot, .replay-line, .replay-stamp { animation: none; }
  .role, .case { transition: none; }
}

@media (max-width: 1180px) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .row-split, .row-split.two { grid-template-columns: minmax(0, 1fr); }
  .tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .band-main { flex-direction: column; gap: 12px; }
  .band-side { padding-top: 0; }
  .hunter-cards, .program-cards { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 36px; padding-bottom: 88px; }
  .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .ro { display: none; }
  .wrap { padding: 0 14px; }
}

@media (max-width: 560px) {
  .cases { grid-template-columns: minmax(0, 1fr); }
  .case { min-height: 0; flex-direction: row; align-items: center; }
  .top .proto, .top .net { display: none; }
  .top-inner { gap: 6px; }
  .nav { margin-left: 0; gap: 0; }
  .nav a { padding: 6px 7px; }
  .hero-stats { gap: 24px; }
}