@font-face { font-family: 'VT323'; src: url(fonts/vt323.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url(fonts/share-tech-mono.woff2) format('woff2'); font-display: swap; }

:root {
    /* Phosphor colour as "r g b", so every shade derives from one value. */
    --p: 46 255 132;
    --bg: #010804;
    --screen: #02130a;
    --fg: rgb(var(--p));
    --dim: rgb(var(--p) / .7);      /* secondary: body copy, labels */
    --muted: rgb(var(--p) / .55);   /* tertiary: meta info, still AA on --screen */
    --faint: rgb(var(--p) / .32);   /* rules and decoration only */
    --wash: rgb(var(--p) / .07);
    --glow: 0 0 1px rgb(var(--p) / .85), 0 0 9px rgb(var(--p) / .4);
    --glow-soft: 0 0 6px rgb(var(--p) / .2);
    --display: 'VT323', ui-monospace, monospace;
    --mono: 'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace;
    color-scheme: dark;
}
:root[data-phosphor="amber"] { --p: 255 182 66; --bg: #080501; --screen: #140c02; }
:root[data-phosphor="blue"] { --p: 105 205 255; --bg: #01050a; --screen: #03101a; }
:root[data-phosphor="white"] { --p: 222 234 250; --bg: #040506; --screen: #0d1014; }

* { box-sizing: border-box; }
/* Domains must read letter by letter: VT323 would draw .fi as one glyph, and every font
   shorthand below would reset a plain inherited setting. */
*, ::before, ::after { font-variant-ligatures: none !important; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--faint) var(--bg); }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(ellipse 90% 70% at 50% 35%, rgb(var(--p) / .06), transparent 70%) fixed, var(--bg);
    color: var(--fg);
    font: 17px/1.55 var(--mono);
    text-shadow: var(--glow);
}
::selection { background: var(--fg); color: var(--screen); text-shadow: none; }
a { color: var(--fg); text-underline-offset: 3px; }
a:hover { background: var(--fg); color: var(--screen); text-shadow: none; }
:focus-visible { outline: 2px dashed var(--fg); outline-offset: 3px; }
b { font-weight: 400; color: var(--fg); }
/* Tertiary: meta information kept quiet, so names and verdicts lead. */
.sys, .tabs a, .check, .progress .tally, .group-title, .row-details .via, .status-bar, h2::before,
.row[data-status="taken"] .row-main { color: var(--muted); text-shadow: var(--glow-soft); }

/* ---- CRT: scanlines, vignette, a faint flicker over everything ---- */
.crt { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; animation: flicker 7s infinite; }
.crt::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px);
}
.crt::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / .5) 100%);
}
/* The slow refresh band rolls through the background only: the screen (.term) covers it. */
.roll {
    position: fixed; left: 0; right: 0; top: 0; z-index: 0; height: 22vh; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgb(var(--p) / .05) 70%, rgb(var(--p) / .1) 97%, transparent);
    transform: translateY(-25vh);
    animation: roll 9s linear infinite;
}
@keyframes roll { to { transform: translateY(105vh); } }
@keyframes flicker {
    0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .82; } 43% { opacity: 1; }
    77% { opacity: 1; } 77.5% { opacity: .9; } 78% { opacity: 1; }
}

/* ---- the screen ---- */
.term {
    position: relative; z-index: 1;
    max-width: 1000px;
    margin: 20px auto;
    padding: 18px clamp(16px, 4vw, 40px) 22px;
    background: var(--screen);
    border: 2px solid var(--faint);
    border-radius: 18px;
    box-shadow: 0 0 0 6px rgb(0 0 0 / .55), 0 0 40px rgb(var(--p) / .08), inset 0 0 60px rgb(var(--p) / .05);
    animation: power-on .5s ease-out both;
}
@keyframes power-on {
    0% { transform: scale(.6, .004); filter: brightness(4); opacity: 0; }
    35% { transform: scale(1, .004); filter: brightness(4); opacity: 1; }
    100% { transform: none; filter: none; }
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.brand { display: block; line-height: 0; filter: drop-shadow(0 0 5px rgb(var(--p) / .55)); }
.brand:hover { background: none; }
.brand svg { display: block; width: clamp(260px, 46vw, 440px); height: auto; color: var(--fg); }
.brand .tile { fill: var(--screen); }
.brand .sweep { transform-origin: 32px 32px; animation: sweep 4s linear infinite; }
.brand .blip, .brand .blip-halo { animation: blip 4s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
/* The sweep line passes the blip at ~94% of a turn: it flares, then fades. */
@keyframes blip { 0% { opacity: 1; } 70%, 94% { opacity: .15; } 95%, 100% { opacity: 1; } }

.sys { margin: 0; font: 1.25rem/1.15 var(--display); }

/* Pip-Boy tabs: one rule along the top, the current tab lifted out of it. */
.tabs {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: 6px;
    margin: 16px 0 0; padding-top: 6px;
    background: var(--screen);
    border-bottom: 2px solid var(--fg);
    font: 1.55rem/1 var(--display);
    text-transform: uppercase;
}
.tabs a {
    padding: 6px 18px 4px; margin-bottom: -2px;
    text-decoration: none;
    border: 2px solid transparent; border-bottom: 0;
}
.tabs a:hover { background: var(--wash); color: var(--fg); }
.tabs a[aria-current] { color: var(--fg); text-shadow: var(--glow); border-color: var(--fg); background: var(--screen); }

.panel { padding: 26px 0 6px; scroll-margin-top: 56px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
h1 { font-size: clamp(2.3rem, 7vw, 3.7rem); margin: 4px 0 8px; }
h2 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin: 0 0 12px; }
h2::before { content: '> '; }
* + h2 { margin-top: 38px; }
h3 { font-size: 1.55rem; margin: 26px 0 6px; }
.panel p, .steps { max-width: 68ch; }
.panel p { color: var(--dim); margin: 0 0 12px; }
.lead { margin-bottom: 22px; }

@keyframes blink { 50% { opacity: 0; } }

/* ---- the prompt ---- */
.prompt-label { display: block; margin-bottom: 6px; font: 1.4rem/1.2 var(--display); color: var(--dim); text-transform: uppercase; }
.prompt-label::before { content: '> '; }
.prompt-row { display: flex; gap: 10px; }
.field {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 0 12px;
    background: rgb(0 0 0 / .3);
    border: 2px solid var(--fg);
    box-shadow: inset 0 0 18px rgb(var(--p) / .08);
}
.field:focus-within { box-shadow: 0 0 0 3px rgb(var(--p) / .25), inset 0 0 18px rgb(var(--p) / .12); }
.caret { font: 2rem/1 var(--display); }
#q {
    flex: 1; min-width: 0;
    padding: 8px 0;
    background: transparent; border: 0; outline: 0;
    color: var(--fg); caret-color: var(--fg); caret-shape: block;
    font: 2rem/1.2 var(--display);
    text-shadow: var(--glow);
}
#q::placeholder { color: var(--faint); text-shadow: none; }

.btn, .action {
    font: 1.8rem/1 var(--display); text-transform: uppercase;
    color: var(--fg); background: transparent;
    border: 2px solid var(--fg);
    padding: 8px 18px; min-height: 48px;
    cursor: pointer; text-shadow: var(--glow);
}
.btn:hover, .btn:focus-visible, .action:hover, .action:focus-visible {
    background: var(--fg); color: var(--screen); text-shadow: none; outline: 0;
    box-shadow: 0 0 16px rgb(var(--p) / .55);
}
.btn:active { transform: translateY(1px); }

/* Checkboxes drawn as [X] / [ ]; the real input stays focusable underneath. */
.groups { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 10px; }
.check { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 1.45rem/1 var(--display); text-transform: uppercase; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.check span::before { content: '[ ] '; white-space: pre; }
.check input:checked + span { color: var(--fg); text-shadow: var(--glow); }
.check input:checked + span::before { content: '[X] '; }
.check input:focus-visible + span { outline: 2px dashed var(--fg); outline-offset: 4px; }
.check:hover span { color: var(--fg); }
.check small { font-size: 1.1rem; color: var(--faint); }

.hint { min-height: 1.6em; margin: 4px 0 0; font: 1.35rem/1.2 var(--display); color: var(--fg); }
.hint:not(:empty)::before { content: '! '; animation: blink 1s steps(1) infinite; }

/* ---- results ---- */
.results { margin-top: 10px; padding-top: 14px; border-top: 2px dashed var(--faint); }
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; }
.progress { margin: 0; display: flex; flex-wrap: wrap; gap: 0 18px; font: 1.4rem/1.3 var(--display); text-transform: uppercase; }

.group-title { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; font-size: 1.3rem; }
.group-title::after { content: ''; flex: 1; border-top: 2px solid var(--faint); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { animation: type-in .3s steps(8) both; }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.row-main {
    width: 100%; min-height: 44px;
    display: flex; align-items: baseline; gap: 12px;
    padding: 4px 10px;
    background: none; border: 0;
    color: inherit; font: inherit; text-shadow: inherit; text-align: left;
    cursor: pointer;
}
.row-main:disabled { cursor: progress; }
.row-domain { font: 1.65rem/1.15 var(--display); overflow-wrap: anywhere; }
.row-main b { color: inherit; }
.row-dots { flex: 1; min-width: 16px; border-bottom: 2px dotted currentColor; opacity: .35; }
.row-status { flex: none; padding: 0 8px; font: 1.5rem/1.2 var(--display); text-transform: uppercase; white-space: nowrap; }
.is-target .row-main { box-shadow: inset 4px 0 0 var(--fg); }

.row[data-status="pending"] .row-main { color: var(--dim); }
.row[data-status="pending"] .row-status::after {
    content: '...'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom;
    animation: dots 1.2s steps(4) infinite;
}
@keyframes dots { to { width: 4ch; } }
.row[data-status="free"] .row-status {
    background: var(--fg); color: var(--screen); text-shadow: none;
    box-shadow: 0 0 14px rgb(var(--p) / .6);
    animation: blink 0.25s steps(1) 4;
}
.row[data-status="free"] .row-main:hover .row-status,
.row[data-status="free"] .row-main:focus-visible .row-status,
.row[data-status="free"] .row-main[aria-expanded="true"] .row-status { background: var(--screen); color: var(--fg); box-shadow: none; }
.row[data-status="maybe"] .row-status { border: 2px dashed currentColor; }
.row[data-status="taken"] .row-domain { text-decoration: line-through 2px rgb(var(--p) / .45); }
.row[data-status="taken"] .row-main:hover .row-domain,
.row[data-status="taken"] .row-main[aria-expanded="true"] .row-domain { text-decoration-color: currentColor; }
.row[data-status="error"] .row-status::before { content: '! '; }
/* Terminal selection: the highlighted line inverts. Outranks the status colours above. */
.row > .row-main:is(:hover:not(:disabled), :focus-visible, [aria-expanded="true"]) {
    background: var(--fg); color: var(--screen); text-shadow: none; outline: 0;
}

.row-details { margin: 0 0 10px 10px; padding: 10px 14px 12px; border-left: 2px solid var(--fg); background: var(--wash); }
.row-details p { margin: 0 0 8px; max-width: 70ch; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 18px; margin: 0 0 10px; }
.kv dt { color: var(--dim); text-transform: uppercase; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.raw { max-height: 320px; overflow: auto; margin: 0 0 10px; font: .88rem/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim); }
.action { display: inline-block; font-size: 1.35rem; min-height: 40px; padding: 6px 12px; text-decoration: none; }
.row-details .via { margin: 10px 0 0; font-size: .85rem; text-transform: uppercase; }
.busy::after { content: '...'; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: dots 1.2s steps(4) infinite; }

.only-free .row:not([data-status="free"], [data-status="maybe"]) { display: none; }
.only-free .group:not(:has(.row[data-status="free"], .row[data-status="maybe"])) { display: none; }
.none { display: none; margin: 16px 0 0; font: 1.4rem/1.2 var(--display); text-transform: uppercase; }
.only-free.done:not(.has-free) .none { display: block; }

/* ---- TLD index & info ---- */
.tld-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }
.tld-group h3 small { font-size: 1rem; color: var(--faint); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.chips li { padding: 0 8px; border: 1px solid var(--faint); font: 1.3rem/1.35 var(--display); }

.legend { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; align-items: baseline; margin: 0; max-width: 68ch; }
.legend dd { margin: 0; color: var(--dim); }
.tag { display: inline-block; padding: 0 8px; font: 1.4rem/1.2 var(--display); text-transform: uppercase; white-space: nowrap; }
.tag[data-status="free"] { background: var(--fg); color: var(--screen); text-shadow: none; }
.tag[data-status="maybe"] { border: 2px dashed currentColor; }
.tag[data-status="taken"] { color: var(--dim); text-decoration: line-through 2px rgb(var(--p) / .45); }

.steps { margin: 0 0 8px; padding: 0; list-style: none; counter-reset: step; color: var(--dim); }
.steps li { counter-increment: step; display: flex; gap: 12px; margin-bottom: 10px; }
.steps li::before { content: '0' counter(step); flex: none; font: 1.5rem/1 var(--display); color: var(--fg); }

/* ---- status bar ---- */
.status-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 22px;
    margin-top: 34px; padding-top: 10px;
    border-top: 2px solid var(--fg);
    font: 1.25rem/1.2 var(--display); text-transform: uppercase;
}
.phosphor { display: flex; gap: 6px; }
.phosphor button {
    min-height: 36px; padding: 2px 8px;
    font: inherit; text-transform: inherit; cursor: pointer;
    color: rgb(var(--p)); background: transparent; border: 1px solid rgb(var(--p) / .4);
    text-shadow: 0 0 6px rgb(var(--p) / .5);
}
/* Each swatch glows in its own colour, whatever the screen is set to. */
.phosphor [data-phosphor-set="green"] { --p: 46 255 132; }
.phosphor [data-phosphor-set="amber"] { --p: 255 182 66; }
.phosphor [data-phosphor-set="blue"] { --p: 105 205 255; }
.phosphor [data-phosphor-set="white"] { --p: 222 234 250; }
.phosphor button[aria-pressed="true"], .phosphor button:hover { background: rgb(var(--p)); color: var(--bg); text-shadow: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .term { margin: 0; border: 0; border-radius: 0; box-shadow: none; min-height: 100dvh; padding-top: 14px; }
    .brand svg { width: min(100%, 340px); }
    .tabs { font-size: 1.35rem; }
    .tabs a { padding: 6px 12px 4px; }
    .prompt-row { flex-direction: column; }
    .btn { width: 100%; }
    #q, .caret { font-size: 1.75rem; }
    .row-main { padding: 4px 6px; gap: 8px; }
    .row-domain { font-size: 1.4rem; }
    .row-status { font-size: 1.3rem; padding: 0 6px; }
    .row-details { margin-left: 4px; padding: 10px; }
    .kv { grid-template-columns: 1fr; gap: 0; }
    .kv dd { margin-bottom: 6px; }
    .legend { grid-template-columns: 1fr; gap: 4px; }
    .legend dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}