:root {
  color-scheme: dark;

  --bg:        #121211;
  --surface:   #1a1a18;
  --surface-2: #201f1d;
  --surface-3: #26251f;
  --line:      #262521;
  --line-soft: #1f1e1b;
  --frame:     #3a3935;

  --ink:   #f2f1ed;
  --ink-2: #97958e;
  --ink-3: #6f6d67;

  /* meaning: lime = the thing to look at, phosphor = confirmed launch, gold = maybe,
     orange = a contract, red = gone. Never used decoratively. */
  --accent: #a3e635;
  --accent-lit: #bef264;
  --go:     #4ade80;
  --maybe:  #e3b341;
  --brand:  #ea6a2a;
  --off:    #6f6d67;
  --stop:   #f2555a;
  --violet: #ea6a2a;
  --cyan:   #a3e635;
  --pink:   #ea6a2a;

  --go-bg:     color-mix(in srgb, var(--go) 14%, transparent);
  --maybe-bg:  color-mix(in srgb, var(--maybe) 14%, transparent);
  --accent-bg: color-mix(in srgb, var(--accent) 15%, transparent);

  --s1: 2px;  --s2: 4px;  --s3: 6px;  --s4: 8px;
  --s5: 12px; --s6: 16px; --s7: 24px; --s8: 32px;
  --r1: 4px;  --r2: 6px;  --r3: 10px;
  --row-h: 34px;

  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-fast: 90ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #f8f7f4;
  --surface:   #ffffff;
  --surface-2: #f5f3ef;
  --surface-3: #efece5;
  --line:      #efece5;
  --line-soft: #f3f1ec;
  --frame:     #dad6cc;
  --ink:   #1a1a18;
  --ink-2: #696762;
  --ink-3: #85837e;
  --accent: #4d7c0f;
  --accent-lit: #3f6212;
  --go:     #2e7d4f;
  --maybe:  #9a6b12;
  --brand:  #c2410c;
  --off:    #85837e;
  --stop:   #be123c;
  --violet: #c2410c;
  --cyan:   #4d7c0f;
}

:root[data-dense="comfortable"] { --row-h: 40px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 13px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -44px; z-index: 100;
  background: var(--accent); color: var(--bg); padding: var(--s3) var(--s5); border-radius: var(--r2);
}
.skip:focus { top: var(--s4); }

/* ── header ─────────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s6);
  padding: var(--s4) var(--s6);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: var(--s4); }
.logo { width: 24px; height: 24px; border-radius: 7px; flex: none; background: linear-gradient(140deg, var(--accent), var(--brand)); }
.brandtext b { display: block; font: 600 13px/1.1 var(--sans); letter-spacing: .15em; }
.brandtext small { display: block; color: var(--ink-3); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }

.groups { display: flex; gap: var(--s1); }
.groups button {
  background: none; border: 1px solid transparent; color: var(--ink-2);
  padding: var(--s3) var(--s5); border-radius: var(--r2); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.groups button:hover { color: var(--ink); background: var(--surface-2); }
.groups button[aria-current="page"] { background: var(--surface-3); color: var(--ink); border-color: var(--line); }

.spacer { flex: 1 1 auto; }

.kpis { display: flex; gap: var(--s7); margin: 0; }
.kpi { display: flex; flex-direction: column-reverse; align-items: flex-end; }
.kpi dt { color: var(--ink-3); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.kpi dd { margin: 0; font: 600 15px/1.1 var(--mono); font-variant-numeric: tabular-nums; }

.live { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--off); flex: none; }
.live[data-state="live"] .dot { background: var(--go); box-shadow: 0 0 0 3px var(--go-bg); }
.live[data-state="live"] .txt { color: var(--go); }
.live[data-state="reconnecting"] .dot,
.live[data-state="stale"] .dot { background: var(--maybe); }
.live[data-state="reconnecting"] .txt,
.live[data-state="stale"] .txt { color: var(--maybe); }

.tools { display: flex; align-items: center; gap: var(--s2); }
.icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  background: none; border: 1px solid var(--frame); border-radius: var(--r2);
  color: var(--ink-3); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon:hover { color: var(--ink); border-color: var(--ink-3); }
.icon[aria-pressed="true"] { color: var(--maybe); border-color: color-mix(in srgb, var(--maybe) 55%, transparent); }
.who {
  font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: var(--s3) var(--s4); border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2);
}
.who[data-color="green"]  { color: var(--go);     border-color: color-mix(in srgb, var(--go) 40%, transparent); }
.who[data-color="blue"]   { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.who[data-color="amber"]  { color: var(--maybe);  border-color: color-mix(in srgb, var(--maybe) 40%, transparent); }
.who[data-color="purple"] { color: var(--violet); }
.who[data-color="pink"]   { color: var(--pink); }
.who[data-color="cyan"]   { color: var(--cyan); }

/* ── filters ────────────────────────────────────────────────────────────── */
.filters { position: sticky; top: 46px; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.frow { display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--s6); flex-wrap: wrap; row-gap: var(--s3); }
.frow + .frow { border-top: 1px solid var(--line-soft); }
.fgroup { display: flex; align-items: center; gap: var(--s3); }
.fgroup.grow { flex: 1 1 260px; }
.flabel { color: var(--ink-3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.seg { display: flex; gap: var(--s1); }
.seg.wrap { flex-wrap: wrap; }
.seg button {
  background: var(--surface); border: 1px solid var(--frame); color: var(--ink-2);
  padding: var(--s3) var(--s4); border-radius: var(--r2); cursor: pointer; white-space: nowrap; font-size: 12px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] {
  background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink);
}
.seg button .n { color: var(--ink-3); font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; margin-left: var(--s2); }
.seg button[aria-selected="true"] .n, .seg button[aria-pressed="true"] .n { color: var(--ink-2); }
.seg button.zero { opacity: .5; }
.seg button.ghost { border-style: dashed; color: var(--ink-3); }
#sigBar button { font: 600 10px/1 var(--mono); letter-spacing: .04em; padding: var(--s4) var(--s3); min-width: 34px; }
#bellBar button { min-width: 0; padding: var(--s3) var(--s4); }
#bellBar button[aria-pressed="true"] { color: var(--maybe); border-color: color-mix(in srgb, var(--maybe) 55%, transparent); background: var(--maybe-bg); }

.search {
  display: flex; align-items: center; gap: var(--s3); flex: 1; max-width: 420px;
  background: var(--surface); border: 1px solid var(--frame); border-radius: var(--r2); padding: 0 var(--s4);
}
.search svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-3); stroke-width: 1.5; flex: none; }
.search input { flex: 1; background: none; border: 0; padding: var(--s3) 0; min-width: 0; }
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--accent); }

.chk { display: flex; align-items: center; gap: var(--s3); color: var(--ink-2); cursor: pointer; user-select: none; font-size: 12px; }
.chk input { accent-color: var(--accent); width: 14px; height: 14px; }
.sel select { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s3) var(--s4); color: var(--ink); font-size: 12px; cursor: pointer; }
.link { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; padding: var(--s2); }
.link:hover { color: var(--ink); }
.link[aria-pressed="true"] { color: var(--accent); }
.reasons { gap: var(--s2); }

/* ── table ──────────────────────────────────────────────────────────────── */
/* One measure for the whole page. Letting the table span a wide monitor opened a lane of dead
   space between the domain and everything that qualifies it; the slack now sits in the margin,
   where it reads as intentional. */
:root { --measure: 1180px; }
main { padding: 0 var(--s6) var(--s8); }
.wrap, main > .feed, .filters > .frow, .watchpanel { max-width: var(--measure); margin-inline: auto; }
.watchpanel { margin-block: var(--s5) 0; }
.watchpanel { margin-inline: auto; }
.feed { width: 100%; border-collapse: collapse; }
.feed thead th {
  position: sticky; top: 134px; z-index: 20; background: var(--bg);
  text-align: left; padding: var(--s4);
  font: 600 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.feed thead th button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.feed thead th button:hover { color: var(--ink); }
.feed thead th[aria-sort] button { color: var(--ink); }
.feed td { padding: 0 var(--s4); height: var(--row-h); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.feed td:first-child { padding-left: var(--s5); }
.feed td:last-child { padding-right: var(--s5); }
.row:hover td { background: var(--surface); }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.row.sel td { background: var(--surface-2); }

/* tier shows as a left edge, always paired with the score number and signal count */
.row[data-tier="strong"] td:first-child { box-shadow: inset 3px 0 0 var(--go); }
.row[data-tier="weak"]   td:first-child { box-shadow: inset 3px 0 0 var(--maybe); }
.row[data-tier="hidden"] td { color: var(--ink-3); }
.row[data-tier="hidden"] td:first-child { box-shadow: inset 3px 0 0 var(--line); }

/* table-layout: fixed keeps these honest; percentages let the browser hand all the slack to
   the domain column. */
.feed { table-layout: fixed; }
.c-age   { width: 62px; }
.c-dom   { width: 280px; }
.c-x     { width: 186px; }
.c-sig   { width: 252px; }
.c-coin  { width: 132px; }
.c-score { width: 84px; text-align: right; }
.c-w     { width: 40px; text-align: right; }

.age { font: 500 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.age[data-fresh="hot"] { color: var(--go); }
.age[data-fresh="warm"] { color: var(--maybe); }

.disc { background: none; border: 0; padding: 0 var(--s3) 0 0; cursor: pointer; color: var(--ink-3); vertical-align: middle; }
.disc svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease); }
.disc[aria-expanded="true"] svg { transform: rotate(90deg); }

.status { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: var(--s3); background: var(--off); vertical-align: middle; }
.status[data-s="live"] { background: var(--go); }
.status[data-s="challenge"] { background: var(--maybe); }
.status[data-s="dead"] { background: var(--stop); }
.status[data-s="pending"] { background: none; border: 1px solid var(--ink-3); }

.dom { font: 500 13px/1 var(--mono); text-decoration: none; vertical-align: middle; }
.c-dom, .c-x { overflow: hidden; }
.c-dom > *, .c-x > * { vertical-align: middle; }
.xh { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.dom:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.badges { display: inline-flex; gap: var(--s2); margin-left: var(--s3); vertical-align: middle; flex-wrap: wrap; }

.chip {
  display: inline-block; font: 600 9.5px/1.5 var(--mono); letter-spacing: .03em;
  padding: 1px var(--s3); border-radius: var(--r1);
  background: var(--surface-2); color: var(--ink-3); border: 1px solid transparent; white-space: nowrap;
}
.chip[data-k="reg-new"] { color: var(--go); background: var(--go-bg); }
.chip[data-k="multi"] { color: var(--maybe); background: var(--maybe-bg); }
.chip[data-k="rh"] { color: var(--pink); }
.chip[data-k="why"] { color: var(--ink-3); background: none; border-color: var(--line); text-transform: none; font-family: var(--sans); font-weight: 400; }
.chip[data-k="ca"] { color: var(--violet); }
.chip[data-k="watch"] { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }

/* the strip sizes itself; a fixed width made the 8 tiles overflow and the count sat on top of them */
.sigstrip { display: inline-grid; grid-template-columns: repeat(8, 26px); gap: 3px; vertical-align: middle; }
.sig { font: 600 9.5px/1 var(--mono); text-align: center; padding: 5px 0; border-radius: 3px; background: var(--surface-2); color: var(--ink-3); opacity: .35; letter-spacing: .01em; overflow: hidden; }
.sig[data-on="1"] { opacity: 1; background: var(--accent-bg); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
/* the contract tile is the one that means "there is a mint on this page" */
.sig[data-ca="1"] { background: var(--go-bg); color: var(--go); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--go) 55%, transparent); }
.signum { margin-left: var(--s4); font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); vertical-align: middle; display: inline-block; min-width: 26px; }
.signum[data-n="hot"] { color: var(--go); }
.signum[data-n="warm"] { color: var(--maybe); }

.coin { display: inline-flex; align-items: baseline; gap: var(--s3); text-decoration: none; }
.coin b { font: 600 11.5px/1 var(--mono); color: var(--maybe); }
.coin span { font: 400 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.coin:hover b { text-decoration: underline; text-underline-offset: 2px; }
.xh { font: 400 11.5px/1 var(--mono); color: var(--cyan); text-decoration: none; }
.xh:hover { text-decoration: underline; text-underline-offset: 2px; }
.xh[data-via="coin"] { color: var(--violet); }
.vb { margin-left: 3px; font-size: 9px; vertical-align: super; }
.vb[data-t="blue"] { color: var(--accent); }
.vb[data-t="gold"] { color: var(--maybe); }
.vb[data-t="gray"] { color: var(--ink-3); }
.dash { color: var(--ink-3); }

.c-score .meter { display: inline-block; width: 28px; height: 3px; border-radius: 2px; background: var(--surface-3); vertical-align: middle; margin-right: var(--s3); overflow: hidden; }
.c-score .meter i { display: block; height: 100%; background: var(--off); }
.c-score .num { font: 600 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.row[data-tier="strong"] .meter i { background: var(--go); }
.row[data-tier="weak"] .meter i { background: var(--maybe); }
.row[data-tier="strong"] .num { color: var(--go); }
.row[data-tier="weak"] .num { color: var(--maybe); }

.watch { background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: var(--s2); line-height: 1; }
.watch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.watch[aria-pressed="true"] svg { fill: currentColor; }
.watch[data-own="me"] { color: var(--maybe); }
.watch[data-own="other"] { cursor: not-allowed; }
.watch:hover { color: var(--maybe); }

/* a new row is tinted once, then left alone — never reflowed under the reader */
@keyframes settle { from { background: var(--accent-bg); } }
.row.fresh td { animation: settle 1.8s var(--ease); }

/* ── detail panel ───────────────────────────────────────────────────────── */
.detail td { background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s5) var(--s6) var(--s6) 38px; height: auto; }
.dgrid { display: grid; grid-template-columns: 108px 1fr auto; gap: var(--s3) var(--s5); align-items: baseline; margin: 0; }
.dgrid dt { color: var(--ink-3); font: 600 10px/1.5 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.dgrid dd { margin: 0; word-break: break-word; }
.dgrid .src { color: var(--ink-3); font-size: 10px; text-transform: uppercase; }
.mono { font-family: var(--mono); font-size: 11.5px; }
.ev { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.copy { background: none; border: 1px solid var(--line); border-radius: var(--r1); color: var(--ink-3); cursor: pointer; font-size: 10px; padding: 1px var(--s3); margin-left: var(--s3); }
/* one copy affordance per row is enough noise; reveal them on hover or keyboard focus */
.row .copy { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.row:hover .copy, .row:focus-within .copy { opacity: 1; }
.copy:hover { color: var(--ink); border-color: var(--ink-3); }
.dacts { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.dacts a, .dacts button {
  font-size: 11px; text-decoration: none; padding: var(--s3) var(--s5);
  border: 1px solid var(--line); border-radius: var(--r2); color: var(--ink-2); background: none; cursor: pointer;
}
.dacts a:hover, .dacts button:hover { color: var(--ink); border-color: var(--accent); }
.tokens { display: flex; flex-wrap: wrap; gap: var(--s3); }
.token { display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2) var(--s4); text-decoration: none; }
.token img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.token b { font: 600 11px/1 var(--mono); color: var(--maybe); }
.token span { font: 400 10.5px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── misc ───────────────────────────────────────────────────────────────── */
.empty { color: var(--ink-3); text-align: center; padding: var(--s8) var(--s6); }
.more { display: block; margin: var(--s6) auto; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); padding: var(--s4) var(--s7); border-radius: var(--r2); cursor: pointer; }
.more:hover { color: var(--ink); border-color: var(--accent); }
.hint { text-align: center; color: var(--ink-3); font-size: 11px; margin: var(--s7) 0 0; }
kbd { font: 500 10px/1 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r1); padding: 2px var(--s3); margin: 0 1px; }

.toasts { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 60; display: flex; flex-direction: column-reverse; gap: var(--s3); max-width: 340px; }
.toast { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--maybe); border-radius: var(--r2); padding: var(--s4) var(--s5); cursor: pointer; box-shadow: 0 10px 30px rgb(0 0 0 / .45); }
.toast[data-kind="strong"] { border-left-color: var(--go); }
.toast[data-kind="note"] { border-left-color: var(--accent); cursor: default; }
.toast[data-kind="found"] { border-left-color: var(--cyan); }
.toast b { display: block; font: 600 12px/1.3 var(--mono); }
.toast span { color: var(--ink-2); font-size: 11px; }

/* ── login ──────────────────────────────────────────────────────────────── */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: var(--s6); }
.login { width: min(340px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s7); }
.login .brand { margin-bottom: var(--s6); }
.login label { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--s2); }
.login input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.login input:focus { outline: none; border-color: var(--accent); }
.login button { width: 100%; margin-top: var(--s3); background: var(--accent); border: 0; color: #fff; font-weight: 600; padding: var(--s4); border-radius: var(--r2); cursor: pointer; }
.login button:disabled { opacity: .6; cursor: default; }
.err { color: var(--stop); font-size: 12px; margin: var(--s5) 0 0; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1240px) { .c-x { display: none; } }
@media (max-width: 1040px) { .kpis { display: none; } }
@media (max-width: 860px) {
  .c-sig { display: none; }
  .groups { display: none; }
  main { padding-inline: var(--s4); }
  .feed thead th { top: 206px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ── watchlist panel ────────────────────────────────────────────────────── */
.watchpanel { border: 1px solid var(--frame); border-radius: var(--r3); background: var(--surface); }
.wphead { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); }
.wphead b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.wpcount { font: 500 11px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wphint { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.wplist { list-style: none; margin: 0; padding: var(--s3) var(--s5) var(--s4); display: flex; flex-wrap: wrap; gap: var(--s3); }
.wplist:empty::after { content: "Nothing yet. Press + next to a live site that has no X account."; color: var(--ink-3); font-size: 11.5px; }
.wpitem { display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s2) var(--s4); }
.wpitem a { font: 500 11.5px/1 var(--mono); text-decoration: none; }
.wpitem a:hover { text-decoration: underline; text-underline-offset: 2px; }
.wpitem .left { font: 400 10px/1 var(--mono); color: var(--ink-3); }
.wpitem[data-found="1"] { border-color: color-mix(in srgb, var(--cyan) 50%, transparent); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.wpitem .drop { background: none; border: 0; color: var(--ink-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.wpitem .drop:hover { color: var(--stop); }

/* the watch control in a row: tick / lock / plus, each with its own shape */
.wbtn { background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: var(--s2); line-height: 1; display: inline-grid; place-items: center; }
.wbtn svg { width: 13px; height: 13px; }
.wbtn:hover { color: var(--maybe); }
.wbtn[data-kind="mine"] { color: var(--maybe); }
.wbtn[data-kind="taken"] { cursor: not-allowed; color: var(--off); }
.wbtn[data-kind="add-deadx"] { border: 1px dashed var(--line); border-radius: var(--r1); }
.wbtn[data-kind="none"] { visibility: hidden; }


/* ── zone chips: filter on the left, its own bell on the right ──────────── */
.zone { display: inline-flex; align-items: stretch; border: 1px solid var(--frame); border-radius: var(--r2); overflow: hidden; background: var(--surface); }
.zone.zero { opacity: .5; }
.zone:hover { opacity: 1; }
.zbtn {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--frame); color: var(--ink-2);
  padding: var(--s3) var(--s4); border-radius: var(--r2); cursor: pointer; white-space: nowrap; font-size: 12px;
}
.zone .zbtn { border: 0; border-radius: 0; }
.zbtn:hover { color: var(--ink); }
.zbtn[aria-pressed="true"] { background: var(--accent-bg); color: var(--ink); }
.zone:has(.zbtn[aria-pressed="true"]) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.zbtn .n { color: var(--ink-3); font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; }
.zbtn.ghost { border-style: dashed; color: var(--ink-3); }
.zbell {
  display: grid; place-items: center; width: 24px;
  background: none; border: 0; border-left: 1px solid var(--line); color: var(--ink-3); cursor: pointer;
}
.zbell svg { width: 11px; height: 11px; }
.zbell:hover { color: var(--maybe); }
.zbell[aria-pressed="true"] { color: var(--maybe); background: var(--maybe-bg); }

/* ── watchlist: a slim bar until it has something in it ─────────────────── */
.watchpanel[data-empty="1"] { background: none; border: 0; padding: 0; margin-top: var(--s5); }
.watchpanel[data-empty="1"] .wphead { padding-inline: 0; }
.watchpanel[data-empty="1"] .wplist { display: none; }
.watchpanel[data-empty="1"] .wphead { border-bottom: 0; }
.watchpanel[data-empty="1"] .wplist { padding-top: 0; }
.watchpanel[data-empty="1"] .wplist:empty::after { font-size: 11px; }


/* ── header: tighter, with the counters reading as one block ────────────── */
.kpis { gap: var(--s6); padding-right: var(--s5); border-right: 1px solid var(--line); }
.top { padding: var(--s4) max(var(--s6), calc((100vw - var(--measure)) / 2)); gap: var(--s5); }
.filters > .frow { padding-inline: var(--s6); }
.brandtext b { font-size: 12.5px; }


/* ══ strict system ══════════════════════════════════════════════════════════
   Hierarchy by inversion, the line as a language, no shadows, colour only
   where it carries meaning. Adapted from the workspace's strict-system
   reference; the palette stays the warm one.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --r1: 2px; --r2: 3px; --r3: 3px;
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
}

/* no shadow anywhere: depth is carried by the line, not by a blur */
.toast, .watchpanel, .top, .seg button, .zone, .icon { box-shadow: none; }
.toast { box-shadow: none; border: 1px solid var(--frame); }

/* keyboard focus is a dashed ring, offset, in the brand's own manner */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

/* ── inversion: the selected thing is a filled block ───────────────────── */
.seg button[aria-selected="true"],
.seg button[aria-pressed="true"],
.zbtn[aria-pressed="true"],
.link[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.seg button[aria-selected="true"] .n,
.seg button[aria-pressed="true"] .n,
.zbtn[aria-pressed="true"] .n { color: color-mix(in srgb, var(--bg) 62%, var(--ink)); }
/* the one place colour leads: the tier you are actually hunting in */
#tierBar button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #11130c; }
#tierBar button[aria-selected="true"] .n { color: color-mix(in srgb, #11130c 60%, var(--accent)); }
.zbell[aria-pressed="true"] { background: var(--maybe); color: var(--bg); }

/* ── the line as a language ────────────────────────────────────────────── */
.watchpanel { border: 1px solid var(--frame); }                 /* an object */
.seg button, .zone, .icon, .pbtn, .search { border: 1px solid var(--frame); }  /* a control */
.feed td { border-bottom: 1px solid var(--rule); }              /* a divider */
.feed thead th { border-bottom: 1.5px solid var(--ink-3); }     /* the edge of the object */
/* dashed means empty, unavailable, or nothing there yet */
.watchpanel[data-empty="1"] { border: 0; }
.wplist:empty::after { color: var(--ink-3); }
.wbtn[data-kind="add-deadx"] { border: 1px dashed var(--frame); }
.seg button.ghost, .zbtn.ghost { border-style: dashed; }
.dash { color: var(--ink-3); }

/* ── a sharp jump: data is large and monospaced, labels are small caps ──── */
.feed thead th { font-size: 9.5px; letter-spacing: .12em; }
.dom { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.kpi dd { font-size: 19px; letter-spacing: -.02em; }
.kpi dt { font-size: 9.5px; letter-spacing: .1em; }
.flabel { font-size: 9.5px; letter-spacing: .12em; }
.brandtext b { font-size: 13px; letter-spacing: .18em; }
.brandtext small { font-size: 9.5px; letter-spacing: .12em; }
.c-score .num { font-size: 13px; }
.age { font-size: 12px; }

/* ── colour only where it means something ──────────────────────────────── */
/* the chips that merely label a row go monochrome; the ones that report a
   finding keep their colour */
.chip[data-k="why"] { color: var(--ink-3); border-color: var(--rule); }
.chip[data-k="reg-new"] { color: var(--ink-2); background: none; border: 1px solid var(--rule); }
.chip[data-k="multi"] { color: var(--maybe); background: none; border: 1px solid color-mix(in srgb, var(--maybe) 45%, transparent); }
.chip[data-k="ca"] { color: var(--brand); background: none; border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); }
.xh { color: var(--ink); }
.xh[data-via="coin"] { color: var(--brand); }
.xh[data-via="search"] { color: var(--maybe); }

/* an unfired signal is a hairline ghost, a fired one is filled: inversion again */
.sig { background: none; border: 1px solid var(--rule); opacity: 1; color: var(--ink-3); }
.sig[data-on="1"] { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: none; }
.sig[data-ca="1"] { background: var(--go); border-color: var(--go); color: #0b1a12; box-shadow: none; }

/* the score bar is the number drawn: data as the only decoration */
.c-score .meter { width: 30px; height: 2px; background: var(--rule); border-radius: 0; }
.c-score .meter i { border-radius: 0; }

/* rows: the tier edge is the only standing colour in the table */
.row[data-tier="strong"] td:first-child { box-shadow: inset 2px 0 0 var(--go); }
.row[data-tier="weak"]   td:first-child { box-shadow: inset 2px 0 0 var(--maybe); }
.row[data-tier="hidden"] td:first-child { box-shadow: inset 2px 0 0 var(--rule); }
.row:hover td { background: var(--surface-2); }

/* the live dot is the one thing allowed to pulse, because it reports a fact */
.live[data-state="live"] .dot { animation: beat 2.6s ease-in-out infinite; }
@keyframes beat { 50% { opacity: .45; } }

/* ── header counters: three boxed cells, each centred in its own frame ──── */
.kpis {
  display: grid; grid-auto-flow: column; gap: 0;
  border: 1px solid var(--frame); border-radius: var(--r2); overflow: hidden;
  padding: 0; margin: 0;
}
.kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: var(--s3) var(--s5); min-width: 84px;
  background: var(--surface);
}
.kpi + .kpi { border-left: 1px solid var(--frame); }
.kpi dt { order: 2; color: var(--ink-3); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; line-height: 1; }
.kpi dd { order: 1; margin: 0; font: 500 17px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }


/* ── the domain cell is a grid, so the badges start on their own column ──
   They used to sit inline after the name, which made "reg 13m" land in a
   different place on every row and the eye could not scan down them. */
.c-dom { padding-right: var(--s3); }
.c-dom .inner {
  display: grid;
  grid-template-columns: 16px 11px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s3);
}
.c-dom .disc { padding: 0; justify-self: start; }
.c-dom .status { margin: 0; justify-self: center; }
.c-dom .dom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badges { margin-left: 0; justify-self: end; flex-wrap: nowrap; }
/* the copy control sits in the name's own column so it never shifts the badges */
.c-dom .copy { margin-left: var(--s3); }


/* ── the signal strip is reference, not headline ────────────────────────
   It was competing with the domain and the coin for attention. Smaller,
   quieter, and only the fired tiles carry any weight at all. */
.c-sig { width: 196px; }
.sigstrip { grid-template-columns: repeat(8, 20px); gap: 2px; }
.sig { font-size: 8px; padding: 3px 0; border-color: transparent; background: var(--surface-2); color: var(--ink-3); opacity: .5; }
.sig[data-on="1"] { background: none; border: 1px solid color-mix(in srgb, var(--ink-2) 45%, transparent); color: var(--ink-2); opacity: 1; box-shadow: none; }
.sig[data-ca="1"] { background: none; border-color: color-mix(in srgb, var(--go) 55%, transparent); color: var(--go); box-shadow: none; }
.signum { font-size: 10px; color: var(--ink-3); min-width: 24px; }
.signum[data-n="hot"], .signum[data-n="warm"] { color: var(--ink-2); }
.row:hover .sig[data-on="1"] { border-color: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--ink); }


/* ── the whole chrome sticks as one block ───────────────────────────────
   The header and the filter bar were two separate sticky elements and the
   filters were offset by a hard-coded 46px. Whenever the header was not
   exactly that tall the two drifted and the top scrolled out of view. */
.top, .filters { position: static; }
.chrome { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.chrome .top { border-bottom: 1px solid var(--line); }
.feed thead th { top: auto; position: static; }
.feed thead { position: sticky; top: var(--chrome-h, 120px); z-index: 20; background: var(--bg); }
.feed thead th { background: var(--bg); }

/* ── a long title or handle must never stretch a row ────────────────── */
.feed { table-layout: fixed; width: 100%; }
.row td { overflow: hidden; }
.c-dom .inner { min-width: 0; }
.badges { min-width: 0; overflow: hidden; }
.chip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.c-coin > *, .c-x > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin { max-width: 100%; }
.coin b, .coin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ── the mark: a flask whose contents rise and bubble ───────────────────
   The scanner watches things brewing, so the mark brews. It is drawn, not
   an image, so it costs nothing and stays sharp; it holds still for anyone
   who asked for less motion. */
.logo { width: 26px; height: 26px; display: block; flex: none; background: none; border-radius: 0; }
.logo svg { width: 100%; height: 100%; overflow: visible; }
.lg-glass, .lg-neck {
  fill: none; stroke: var(--ink-2); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
}
.lg-fill { fill: var(--accent); animation: lg-tide 5.5s ease-in-out infinite; }
.lg-b { fill: var(--bg); opacity: .85; animation: lg-rise 2.6s ease-in infinite; }
.lg-b2 { animation-duration: 3.4s; animation-delay: .7s; }
.lg-b3 { animation-duration: 2.1s; animation-delay: 1.3s; }

@keyframes lg-tide {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
@keyframes lg-rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateY(-11px) scale(1); opacity: 0; }
}
.logo:hover .lg-fill { fill: var(--accent-lit); }

@media (prefers-reduced-motion: reduce) {
  .lg-fill, .lg-b { animation: none; }
  .lg-b { opacity: .55; }
}


/* ── the badge column must stay inside its track ────────────────────────
   justify-self: end anchors the badges to the right edge, so when their
   content was wider than the track they spilled LEFT, straight over the
   domain name. Giving the track a hard ceiling and letting the badges clip
   keeps every row the same shape. */
.c-dom .inner { grid-template-columns: 16px 11px minmax(60px, 1fr) minmax(0, auto); }
.badges {
  display: flex; flex-wrap: nowrap; overflow: hidden;
  max-width: 100%; justify-content: flex-end;
}
.badges > * { flex: 0 0 auto; }
.chip { max-width: 92px; }
/* the reason belongs in the detail panel, not spelled out in the row */
.chip[data-k="why"] { max-width: 76px; }

/* ── a long domain truncates instead of shoving the badges over itself ──
   The name sat in a wrapper that had no min-width of its own, so the grid
   let it keep its full intrinsic width and the badge track, anchored right,
   spilled back across it. The wrapper now shrinks and the name clips. */
.c-dom .inner { grid-template-columns: 16px 11px minmax(0, 1fr) auto; }
.namecell {
  display: flex; align-items: center; gap: var(--s2);
  min-width: 0; overflow: hidden;
}
.namecell .dom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.namecell .copy { flex: none; }
.badges { max-width: 46%; }


/* ── the tags get a column of their own ─────────────────────────────────
   Squeezing a variable number of badges into whatever the domain name left
   over gave them 48px when they needed 104, and the chips were sliced
   through their own borders. A column of their own means they always have
   room, always start at the same x, and the domain name has all of its. */
.c-dom   { width: 226px; }
.c-tags  { width: 152px; }
.c-x     { width: 176px; }
.c-sig   { width: 188px; }
.c-coin  { width: 124px; }
.c-score { width: 80px; }
.c-age   { width: 58px; }
.c-w     { width: 34px; }
.c-dom .inner { grid-template-columns: 16px 11px minmax(0, 1fr); }
.badges { max-width: 100%; justify-content: flex-start; gap: var(--s2); }
.chip { max-width: 72px; }
/* three badges is the most a row ever needs to show; the rest are in the panel */
.badges > *:nth-child(n+4) { display: none; }

/* ── the strip and its count stay on one line ───────────────────────────
   Narrowing this column to make room for the tags pushed the n/8 count onto
   a second line and every row grew by four pixels. */
.c-sig { width: 212px; white-space: nowrap; }
.c-sig > * { vertical-align: middle; }
.signum { margin-left: var(--s3); min-width: 22px; }

/* ── a domain nobody has launched from yet reads green ──────────────────
   That is the opening: the site is up, the signals are there, and no coin
   has come out of it. Once one has, the row goes back to plain ink and the
   coin column carries the story. */
.row[data-virgin="1"] .dom { color: var(--go); }
.row[data-virgin="1"] td:first-child { box-shadow: inset 2px 0 0 var(--go); }
.row[data-virgin="1"]:hover .dom { color: var(--accent-lit); }
.c-coin .none { color: var(--go); font: 600 9.5px/1 var(--mono); letter-spacing: .04em; }

/* ── links inside the detail panel ──────────────────────────────────────
   The evidence is nearly always a url; it reads as a link and opens. */
.dgrid dd a { color: var(--accent); text-decoration: none; }
.dgrid dd a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tokens { flex-direction: column; align-items: flex-start; gap: var(--s3); }
.tklinks { display: inline-flex; align-items: center; gap: var(--s4); margin-left: var(--s4); }
.tklinks a { font-size: 10.5px; color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--frame); }
.tklinks a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── the pager ──────────────────────────────────────────────────────────
   It inherited the table's measure and sat hard against the left edge. It
   is its own centred block now, in the same language as the filter chips:
   outlined controls, inversion on hover, tabular figures between them. */
.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--s5);
  max-width: var(--measure); margin: var(--s7) auto var(--s5);
  padding: 0 var(--s6);
}
.pbtn {
  display: inline-flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--frame); color: var(--ink-2);
  padding: var(--s3) var(--s6); border-radius: var(--r2); cursor: pointer;
  font-size: 12px; min-width: 96px; justify-content: center;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pbtn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pbtn:disabled { opacity: .35; cursor: default; }
.pinfo {
  font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3);
  min-width: 150px; text-align: center; letter-spacing: .02em;
}
.hint { max-width: var(--measure); margin-inline: auto; }