/* ---------------------------------------------------------------------------
   whoismanic — tokens
   Palette lifted from interserver.net: #2563EB primary, #073965 navy,
   #D9E1EF hairlines, cool blue-biased neutrals. Status colors are our own —
   they encode the three registry states, so they carry meaning, not decoration.
   Type: Arial for UI — the face czds.icann.org actually renders in (it asks
   for Source Sans Pro and never serves it, so every visitor falls through to
   Arial). No webfont to download, and Liberation Sans covers the Linux boxes
   that lack it with identical metrics. IBM Plex Mono for anything that is an
   identifier — domain names, statuses, countdowns. Registry output has
   always been monospace; keeping that is the one detail that says this tool
   knows what it is looking at.
--------------------------------------------------------------------------- */
:root {
  --blue:        #2563EB;
  --blue-hover:  #1D4FD7;
  --navy:        #073965;
  --heading:     #12263D;   /* near-black, biased navy — InterServer's headings
                               are navy; this keeps the character without the page
                               reading as blue */
  --ink:         #292F34;
  --muted:       #3D4A57;   /* secondary copy: 9:1 on white — was #5C6B7A, which read
                               as washed-out on a 4K display at normal zoom */
  --faint:       #5B6979;   /* labels, footnotes, asides: 5.6:1 on white — was #8A98A6 */

  --ground:      #FFFFFF;
  --tint:        #F4F8FF;
  --panel:       #FFFFFF;
  --line:        #DCE3EE;
  --line-soft:   #E8EEF8;
  --shadow:      0 1px 2px rgba(16,36,64,.04), 0 3px 10px rgba(16,36,64,.045);

  --redemption:  #B45309;
  --redemption-bg:#FFF5E8;
  --pending:     #C2410C;
  --pending-bg:  #FFF1EA;
  --dropped:     #0F7A45;
  --dropped-bg:  #ECFBF3;

  --focus:       #2563EB;
  --radius:      8px;
  --radius-lg:   12px;

  --sans: Arial, "Liberation Sans", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


:root { color-scheme: light; }

/* Dark palette — used only where <html data-theme="dark"> is set, which only
   the admin pages ever do. Public pages have no toggle and stay light. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --blue:#5B8DEF; --blue-hover:#77A2F5; --navy:#CFE0F5; --heading:#EAF1FA;
  --ink:#DCE4EF; --muted:#A9B6C5; --faint:#8593A3;
  --ground:#0C1420; --tint:#111C2B; --panel:#141F30; --line:#26374E; --line-soft:#1C2A3D;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.30);
  --redemption:#E0A45C; --redemption-bg:#2A2013;
  --pending:#F08256; --pending-bg:#2C1A13;
  --dropped:#4FC98A; --dropped-bg:#10281D;
  --focus:#5B8DEF;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------------------------------------------------------- header ------ */
.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.masthead-inner {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wordmark {
  font: 700 19px/1 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--blue); }

.masthead nav {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin-left: 12px;
}
.masthead nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.masthead nav a:hover { color: var(--blue); }

/* Outlined, not filled — the filled blue is reserved for Check, the one
   thing most visitors came to press. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 18px;
  font: 600 14px/1 var(--sans);
  color: var(--blue);
  background: transparent;
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-outline:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 40%, transparent);
  outline-offset: 2px;
}
.btn-outline svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ------------------------------------------------------------- hero ----- */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 20px 40px;
}

.hero {
  max-width: min(680px, 100%);
  margin: 0 auto;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

h1 {
  margin: 0;
  font: 600 clamp(28px, 4.4vw, 42px)/1.15 var(--sans);
  letter-spacing: -0.025em;
  color: var(--heading);
  text-wrap: balance;
}

.standfirst {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
  text-wrap: balance;
  max-width: 54ch;
  margin-inline: auto;
}

/* ----------------------------------------------------------- search ----- */
.search {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.search input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  font: 500 17px/1 var(--mono);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.search input::placeholder {
  color: var(--faint);
  font-family: var(--mono);
}
.search input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}

.search button {
  flex: 0 0 auto;
  height: 56px;
  padding: 0 26px;
  font: 700 14px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .14s ease;
}
.search button:hover { background: var(--blue-hover); }
.search button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent);
  outline-offset: 2px;
}

.hint {
  min-height: 20px;
  font-size: 13.5px;
  color: var(--faint);
  text-align: left;
}
.hint.error { color: var(--pending); }
.hint code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
}

/* ------------------------------------------------------ state legend ---- */
/* White ground, like interserver.net. Blue is reserved for things you can
   act on — the button, links, focus. The only fills on this page are the
   three status colours, and those carry meaning. */
.legend {
  border-top: 1px solid var(--line);
  background: var(--ground);
}
.legend-inner {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding-block: 34px 38px;
  padding-inline: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 30px;
}

@media (max-width: 760px) {
  .legend-inner { grid-template-columns: 1fr; gap: 20px; }
}

.eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* White cards on white, separated by a hairline and a whisper of shadow —
   the way interserver.net does it. The status colour lives in the heading
   only, so it reads as meaning rather than decoration. */
.state {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 20px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.state h2 {
  margin: 0;
  font: 600 13px/1 var(--mono);
  letter-spacing: .01em;
  color: var(--tag-color, var(--ink));
}
.state .clock {
  font: 500 12.5px/1 var(--mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.state p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.state.redemption { --tag-color: var(--redemption); }
.state.pending    { --tag-color: var(--pending); }
.state.dropped    { --tag-color: var(--dropped); }

/* ----------------------------------------------------------- footer ----- */
footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--ground);
}
.footer-inner {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  padding-block: 20px 26px;
  padding-inline: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: var(--faint);
}
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: var(--blue); }
.footer-note { font-family: var(--mono); font-size: 12px; }

@media (max-width: 880px) {
  .masthead-inner { flex-wrap: wrap; row-gap: 12px; }
  .masthead nav { order: 3; width: 100%; margin-left: 0; gap: 18px; }
  .masthead nav a { font-size: 14px; }
}

@media (max-width: 560px) {
  .search { flex-direction: column; }
  .search button { width: 100%; }
  main { padding-top: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Result page  (/lookup/<domain>)
   ========================================================================= */
.result-main {
  flex: 1 0 auto;
  padding: 40px 20px 48px;
}
.result {
  width: 100%;
  max-width: min(1200px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.crumb { margin: 0; font-size: 14px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--blue); }

.domain {
  margin: 0;
  font: 600 clamp(24px, 4vw, 36px)/1.15 var(--mono);
  letter-spacing: -0.01em;
  color: var(--heading);
  word-break: break-all;
}

.badge {
  align-self: flex-start;
  font: 600 12.5px/1 var(--mono);
  letter-spacing: .02em;
  padding: 7px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel);
}
.badge.pending    { color: var(--pending);    background: var(--pending-bg);    border-color: color-mix(in srgb, var(--pending) 30%, transparent); }
.badge.redemption { color: var(--redemption); background: var(--redemption-bg); border-color: color-mix(in srgb, var(--redemption) 30%, transparent); }
.badge.dropped    { color: var(--dropped);    background: var(--dropped-bg);    border-color: color-mix(in srgb, var(--dropped) 30%, transparent); }

.blurb { margin: 0; color: var(--muted); font-size: 17px; max-width: 70ch; }
.blurb code { font-family: var(--mono); font-size: 14px; color: var(--ink); }

.checking {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  font-size: 14.5px; color: var(--ink);
}
.spinner {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--line); border-top-color: var(--blue);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.drop {
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.drop .eyebrow { margin: 0; }
.drop-when { margin: 0; font: 600 20px/1.3 var(--sans); color: var(--heading); }
.countdown {
  margin: 0;
  font: 500 30px/1.1 var(--mono);
  color: var(--pending);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.countdown:empty { display: none; }
.confidence { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.conf-high   { color: var(--dropped); }
.conf-low    { color: var(--pending); }

.facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.facts > div {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
  min-height: 62px;                 /* even weight whether the cell holds data or "—" */
  justify-content: center;
}
.facts > div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.facts dt { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 0; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 14.5px; }
.faint { color: var(--faint); }

.cta {
  padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--tint);
}
.cta .eyebrow { margin: 0 0 6px; }
.cta p:last-child { margin: 0; font-size: 15px; }

.history .eyebrow { margin: 0 0 8px; }
/* registry history: fixed columns so content can't stretch the page, and a
   scroll area that shows ~4 rows before scrolling */
.history-scroll { max-height: 200px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.obs { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; }
table.obs th { text-align: left; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: 10px 12px 8px; position: sticky; top: 0; background: var(--ground); z-index: 1; }
table.obs td { padding: 8px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; word-break: break-word; }
table.obs th:nth-child(1), table.obs td:nth-child(1) { width: 170px; white-space: nowrap; }
table.obs th:nth-child(2), table.obs td:nth-child(2) { width: 260px; }

.search-again { margin-top: 10px; }

@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div:nth-child(odd) { border-right: 0; }
  .facts > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .facts > div:last-child { border-bottom: 0; }
}

/* =========================================================================
   Admin  (/v2)
   ========================================================================= */
.inline-form { display: inline; margin: 0; }
.btn-primary {
  height: 44px; padding: 0 22px;
  font: 700 14px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--blue); border: 1px solid var(--blue);
  border-radius: var(--radius); cursor: pointer;
}
.btn-primary:hover { background: var(--blue-hover); }
.btn-small {
  font: 600 12px/1 var(--sans); padding: 6px 10px;
  color: var(--blue); background: transparent; border: 1px solid var(--blue);
  border-radius: 6px; cursor: pointer;
}
.btn-small:hover { background: var(--blue); color: #fff; }
button.btn-outline { cursor: pointer; }

.admin-login { max-width: 380px; }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }
.login-form input {
  height: 44px; padding: 0 12px;
  font: 500 15px/1 var(--sans); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.login-form input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.login-form button { margin-top: 14px; }

.admin { flex: 1 0 auto; padding: 28px 20px 48px; }
.admin-inner { max-width: min(1200px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.admin h1 { margin: 0; font: 600 24px/1.2 var(--sans); color: var(--heading); }
.admin h2 { margin: 0 0 4px; font: 600 15px/1.3 var(--sans); color: var(--heading); }
.panel-sub { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.panel-sub code { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); gap: 12px; }
.tile {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.tile-n { font: 600 26px/1 var(--mono); color: var(--heading); font-variant-numeric: tabular-nums; }
.tile-l { font: 500 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }

.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

.panel {
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow); min-width: 0;
}
.panel table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.panel table.wide { white-space: nowrap; }   /* the panel itself scrolls sideways if it must */
.panel th { text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 0 12px 8px 0; }
.panel td { padding: 7px 12px 7px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.panel th.r, .panel td.r { text-align: right; font-variant-numeric: tabular-nums; }
.panel td.bad { color: var(--pending); font-weight: 600; }
.panel tr.bot td { color: var(--faint); }
.panel a { color: var(--blue); text-decoration: none; }
.panel a:hover { text-decoration: underline; }

/* ---- account widget + flash ------------------------------------------- */
.flash {
  margin: 0; padding: 11px 14px; border-radius: var(--radius);
  font-size: 14.5px; border: 1px solid var(--line); background: var(--panel);
}
.flash.ok  { color: var(--dropped); background: var(--dropped-bg); border-color: color-mix(in srgb, var(--dropped) 30%, transparent); }
.flash.err { color: var(--pending); background: var(--pending-bg); border-color: color-mix(in srgb, var(--pending) 30%, transparent); }

details.account > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 600 15px/1.3 var(--sans); color: var(--heading);
}
details.account > summary::-webkit-details-marker { display: none; }
details.account > summary::before {
  content: "▸"; display: inline-block; margin-right: 8px; color: var(--faint);
  transition: transform .12s ease;
}
details.account[open] > summary::before { transform: rotate(90deg); }
details.account > summary .mono { font-size: 12.5px; font-weight: 500; }

.account-form { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.account-grid > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.account-grid label { font: 600 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.account-grid label .faint { text-transform: none; letter-spacing: 0; font-weight: 500; }
.account-grid input {
  height: 40px; padding: 0 12px;
  font: 500 14.5px/1 var(--sans); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.account-grid input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.account-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.account-actions .btn-primary { height: 40px; }
@media (max-width: 640px) { .account-grid { grid-template-columns: 1fr; } }

/* ---- admin theme toggle button --------------------------------------- */
.btn-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.btn-icon:hover { color: var(--blue); border-color: var(--blue); }
.btn-icon svg { width: 18px; height: 18px; }
.btn-icon .i-moon { display: none; }
:root[data-theme="dark"] .btn-icon .i-sun  { display: none; }
:root[data-theme="dark"] .btn-icon .i-moon { display: inline; }

/* ---- danger zone ------------------------------------------------------ */
details.danger > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 600 15px/1.3 var(--sans); color: var(--pending);
}
details.danger > summary::-webkit-details-marker { display: none; }
details.danger > summary::before {
  content: "\25B8"; display: inline-block; margin-right: 8px; color: var(--faint);
  transition: transform .12s ease;
}
details.danger[open] > summary::before { transform: rotate(90deg); }
details.danger { border-color: color-mix(in srgb, var(--pending) 35%, var(--line)); }
.wipe-form { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.wipe-row { display: flex; flex-direction: column; gap: 9px; }
.wipe-opt { display: flex; align-items: baseline; gap: 9px; font-size: 14.5px; color: var(--ink); cursor: pointer; }
.wipe-opt input { margin: 0; flex: 0 0 auto; }
.wipe-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wipe-confirm input {
  height: 40px; padding: 0 12px; min-width: 220px;
  font: 500 14.5px/1 var(--sans); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.wipe-confirm input:focus { outline: none; border-color: var(--pending); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pending) 22%, transparent); }
.btn-danger {
  height: 40px; padding: 0 20px;
  font: 700 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--pending); border: 1px solid var(--pending);
  border-radius: var(--radius); cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.08); }

/* ---- top-talker ban buttons ------------------------------------------ */
.ban-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.ban-cell .inline-form { display: inline; }
.btn-small.danger { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 55%, transparent); }
.btn-small.danger:hover { background: var(--pending); color: #fff; border-color: var(--pending); }
.btn-small.on { background: var(--blue); color: #fff; }
.btn-small.on:hover { background: color-mix(in srgb, var(--blue) 80%, #000); }

/* ---- ip owner-lookup links ------------------------------------------- */
.ipcell a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line); }
.ipcell a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.ipcell .faint { border: 0; }

/* ---- result badge: solid traffic-light pills -------------------------- */
.badge {
  align-self: flex-start;
  display: inline-block;
  font: 700 13px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  color: #fff;
  background: #6B7A8B;                 /* neutral / checking */
  box-shadow: 0 1px 2px rgba(16,36,64,.18);
}
.badge.dropped    { background: #12A150; color: #fff; }       /* released — green  */
.badge.pending    { background: #F2B807; color: #3A2C00; }    /* pending — amber   */
.badge.redemption { background: #E8730C; color: #fff; }       /* redemption—orange */
.badge.registered { background: #D93A3A; color: #fff; }       /* registered — red  */
.badge.neutral    { background: #6B7A8B; }

/* ---- inline re-check button ------------------------------------------- */
.domain-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.domain-row .domain { margin: 0; }
.refresh {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; flex: 0 0 auto;
  color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.refresh:hover { color: var(--blue); border-color: var(--blue); }
.refresh:disabled { cursor: default; opacity: .7; }
.refresh svg { width: 16px; height: 16px; }
.refresh.spinning svg { animation: spin .8s linear infinite; }
.refresh-note { color: var(--faint); font-size: 12.5px; margin-left: 4px; }

/* ---- last-confirmed cell with inline refresh ------------------------- */
.facts dd#last-checked {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.facts dd#last-checked #lc-text { min-width: 0; }
.refresh-wrap { flex: 0 0 auto; width: 96px; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.refresh-cap { font: 600 9.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.refresh { flex: 0 0 auto; width: 30px; height: 30px; }
.refresh:disabled { opacity: .6; }
/* reserved slot under the icon — filled only on an early click, so nothing shifts */
.refresh-note { min-height: 12px; width: 100%; text-align: center;
  font: 600 9.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--pending); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Result page — v2 polish: lifecycle stepper, state colour, next-step buttons
   ========================================================================= */
/* one pair of colours per state: --lc is the fill (same as the badge),
   --lc-ink a darker cousin that stays readable as text on white */
.result.st-dropped    { --lc: #12A150; --lc-ink: #0F7A45; }
.result.st-pending    { --lc: #F2B807; --lc-ink: #8A6400; }
.result.st-redemption { --lc: #E8730C; --lc-ink: #A84E00; }
.result.st-registered { --lc: #D93A3A; --lc-ink: #B42B2B; }
.result.st-neutral    { --lc: #6B7A8B; --lc-ink: #3D4A57; }

/* name and badge on one line; badge drops under the name when it must */
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.head .domain { flex: 1 1 auto; min-width: 0; }
.head .badge { align-self: center; flex: 0 0 auto; }

/* ---- lifecycle stepper ---------------------------------------------- */
.lifecycle {
  list-style: none; margin: 0; padding: 18px 8px 14px;
  display: flex; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
}
.step {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 4px;
}
/* connector: runs from the previous dot to this one */
.step + .step::before {
  content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.step.done + .step::before, .step.done + .step.now::before { background: var(--muted); }
.step-dot {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--panel);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.step-dot svg { width: 12px; height: 12px; }
.step.done .step-dot { background: var(--muted); border-color: var(--muted); }
.step.now  .step-dot {
  background: var(--lc); border-color: var(--lc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lc) 22%, transparent);
}
.step-l { margin-top: 9px; font: 600 14px/1.2 var(--sans); color: var(--faint); }
.step-s { margin-top: 2px; font: 500 12.5px/1.2 var(--sans); color: var(--faint); }
.step.done .step-l { color: var(--muted); }
.step.now  .step-l { color: var(--lc-ink); }
.step.now  .step-s { color: var(--lc-ink); }

/* ---- hero card picks up the state colour ------------------------------ */
.drop { border-left: 4px solid var(--lc, var(--line)); }
.countdown { color: var(--lc-ink, var(--pending)); }

/* ---- record section ------------------------------------------------- */
.record .eyebrow { margin: 0 0 8px; }
.facts dd.chips { display: flex; flex-wrap: wrap; gap: 5px; }
/* Registry status codes: black and bold. They are the registry's own verdict on
   the name — the one thing on the page a visitor came to read — so they carry the
   same near-black as the headings, not the softer body ink. */
.chip {
  display: inline-block; padding: 4px 8px;
  font: 700 13px/1 var(--mono); color: var(--heading);
  background: #F5F7FA; border: 1px solid var(--line); border-radius: 5px;
  white-space: nowrap;
}
/* Nameservers are the thing this site knows that most whois pages don't show at
   all, so the live ones get the green and read as ours. The registry's own
   status codes beside them, and the historic nameservers below, stay neutral —
   the green marks what is true right now. */
.chip-ns {
  font-weight: 500;                 /* the bold belongs to the status codes */
  color: var(--dropped); background: var(--dropped-bg);
  border-color: color-mix(in srgb, var(--dropped) 32%, transparent);
}

/* ---- want it?: text left, buttons right ------------------------------ */
.cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 24px; flex-wrap: wrap;
  background: var(--panel); box-shadow: var(--shadow);
}
.cta-text { flex: 1 1 320px; min-width: 0; }
.cta-actions { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-fill {
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  font: 700 13.5px/1 var(--sans); letter-spacing: .03em;
  color: #fff; background: var(--blue); border: 1px solid var(--blue);
  border-radius: var(--radius); text-decoration: none; white-space: nowrap;
  transition: background .14s ease;
}
.btn-fill:hover { background: var(--blue-hover); }
.btn-fill:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 2px; }
.cta .btn-outline { padding: 10px 18px; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 560px) {
  .lifecycle { padding: 14px 4px 12px; }
  .step-l { font-size: 10.5px; }
  .step-s { display: none; }
  .cta-actions { width: 100%; }
  .cta-actions a { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 560px) {
  /* history table: let columns size themselves on narrow screens */
  .history-scroll { overflow-x: auto; }
  table.obs { table-layout: auto; min-width: 480px; }
  table.obs th:nth-child(1), table.obs td:nth-child(1) { width: auto; }
  table.obs th:nth-child(2), table.obs td:nth-child(2) { width: auto; white-space: nowrap; }
}

/* =========================================================================
   Home — trust line, lifecycle strip, four-state legend
   ========================================================================= */
.trust {
  list-style: none; margin: -2px 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
  font-size: 13.5px; color: var(--muted);
}
.trust li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #12A150; flex: 0 0 auto;
}
.home-lifecycle { grid-column: 1 / -1; margin-bottom: 0; padding: 22px 12px 18px; }
/* light connector line between dots, with a green arrow centred on each gap */
.home-lifecycle .step + .step::before { top: 11px; height: 2px; background: var(--line); right: calc(50% + 12px); width: calc(100% - 24px); opacity: 1; z-index: 0; }
.home-lifecycle .step + .step::after {
  content: ""; position: absolute; top: 7px; left: -5px;
  width: 10px; height: 10px;
  border-top: 3px solid #12A150; border-right: 3px solid #12A150;
  transform: rotate(45deg); z-index: 1;
}
.home-lifecycle .step-dot { width: 24px; height: 24px; }
.home-lifecycle .step-l { font-size: 13.5px; margin-top: 10px; }
.home-lifecycle .step-s { font-size: 11.5px; }
/* on the home strip every stop is "current" in its own colour */
.home-lifecycle .step-dot { border-color: var(--lc); background: var(--lc); }
.home-lifecycle .step-l   { color: var(--heading); }
.home-lifecycle .step-s   { color: var(--muted); }
.home-lifecycle .step + .step::before { background: var(--line); }
.home-lifecycle .lc-0 { --lc: #6B7A8B; }
.home-lifecycle .lc-1 { --lc: #D93A3A; }
.home-lifecycle .lc-2 { --lc: #E8730C; }
.home-lifecycle .lc-3 { --lc: #F2B807; }
.home-lifecycle .lc-4 { --lc: #12A150; }
.legend-inner { grid-template-columns: 1fr; padding-block: 30px 34px; }
.legend .badge { align-self: flex-start; font-size: 11.5px; padding: 8px 12px; }
@media (max-width: 900px) { .legend-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .legend-inner { grid-template-columns: 1fr; } }

/* =========================================================================
   Login — one centred card
   ========================================================================= */
.login-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 40px 20px 56px; }
.login-card {
  width: 100%; max-width: 400px;
  padding: 30px 28px 24px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(16,36,64,.04), 0 12px 32px rgba(16,36,64,.08);
  display: flex; flex-direction: column; gap: 18px;
}
.login-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.login-icon {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue); background: var(--tint); border: 1px solid var(--line-soft);
}
.login-icon svg { width: 20px; height: 20px; }
.login-card h1 { font: 600 22px/1.2 var(--sans); letter-spacing: -0.01em; }
.login-sub { margin: 0; font: 500 13px/1 var(--mono); color: var(--muted); }
.login-card .flash { font-size: 14px; }
.login-form label:first-of-type { margin-top: 0; }
.login-form input { height: 46px; }
.login-form button { height: 46px; margin-top: 12px; }
.login-note { margin: 0; text-align: center; font-size: 12.5px; color: var(--faint); }

/* =========================================================================
   Dashboard — header, coloured tiles, grouped sections
   ========================================================================= */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; }
.admin-meta { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
a.btn-small { display: inline-flex; align-items: center; text-decoration: none; padding: 8px 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot.ok   { background: #12A150; box-shadow: 0 0 0 3px rgba(18,161,80,.18); }
.dot.warn { background: #F2B807; box-shadow: 0 0 0 3px rgba(242,184,7,.22); }
.dot.bad  { background: #D93A3A; box-shadow: 0 0 0 3px rgba(217,58,58,.18); }

.admin .eyebrow { margin-bottom: -10px; }
.tile { border-top: 3px solid var(--line); }
.tile.st-pending    { border-top-color: #F2B807; }
.tile.st-redemption { border-top-color: #E8730C; }
.tile.st-dropped    { border-top-color: #12A150; }
.tile.st-registered { border-top-color: #D93A3A; }

.panel td.hot { color: var(--pending); font-weight: 600; }
.sdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: 1px; background: #6B7A8B; }
.sdot.pending { background: #F2B807; } .sdot.redemption { background: #E8730C; }
.sdot.dropped { background: #12A150; } .sdot.registered { background: #D93A3A; }
.panel td.ua { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* details summaries: arrow + title on the left, note on the right */
details.account > summary, details.danger > summary { justify-content: flex-start; }
details.account > summary .faint, details.danger > summary .faint { margin-left: auto; font-weight: 500; font-size: 13px; }

/* =========================================================================
   Admin — full-width layout, traffic page
   ========================================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-head .login-icon { margin-bottom: 0; }

/* the admin wants every pixel: no centred column */
.admin-inner { max-width: none; width: 100%; margin: 0; }
.masthead-wide .masthead-inner { max-width: none; }
.admin-nav { display: flex; gap: 4px; margin-left: auto; }
.admin-nav a {
  padding: 8px 12px; border-radius: 6px;
  font: 600 13.5px/1 var(--sans); color: var(--muted); text-decoration: none;
}
.admin-nav a:hover { color: var(--blue); background: var(--tint); }
.admin-nav a.on { color: var(--blue); background: var(--tint); }
.warn-text { color: var(--pending); }

/* time-window segmented control */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg a { padding: 8px 12px; font: 600 12.5px/1 var(--sans); color: var(--muted); text-decoration: none; border-right: 1px solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a:hover { color: var(--blue); }
.seg a.on { background: var(--blue); color: #fff; }

.tiles-many { grid-template-columns: repeat(auto-fill, minmax(128px, 200px)); }
.tiles-many .tile { padding: 12px 14px; }
.tiles-many .tile-n { font-size: 22px; }
.tiles-many .tile-l { font-size: 11px; }
.tiles-many .tile-l .faint { text-transform: none; letter-spacing: 0; }
.tile.st-neutral { border-top-color: #6B7A8B; }

.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-3 .span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 .span-2 { grid-column: span 2; } }
@media (max-width: 760px)  { .cols-3 { grid-template-columns: 1fr; } .cols-3 .span-2 { grid-column: auto; } }

.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel table.mt { margin-top: 16px; }
.panel table.zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--line-soft) 55%, transparent); }
.panel table.sortable thead th { cursor: pointer; user-select: none; }
.panel table.sortable thead th.sorted-asc::after  { content: ' ▲'; font-size: 9px; }
.panel table.sortable thead th.sorted-desc::after { content: ' ▼'; font-size: 9px; }
.zone-filter { width: 260px; padding: 7px 10px; font: 500 13px/1 var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.zone-filter:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
a.tile { text-decoration: none; }
.tile-n.small { font-size: 18px; line-height: 1.3; }
.panel td.ellip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the 24-hour / 7-day split inside one panel: a caption per table, tight to it */
.panel .eyebrow.top-win { margin: 16px 0 6px; }
/* page-through footer under a log table */
.pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; }
/* rate limits: the bulk bar, and the per-row rate/pause inputs */
.limits-bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.limits-bulk label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.limits-bulk select, .limits-bulk input {
  padding: 6px 9px; font: 500 13px/1 var(--mono); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.limits-row { display: flex; gap: 5px; align-items: center; }
/* each control carries its own label, because "0.75" on its own means nothing */
/* two rows of controls beat one row that pushes the table off the panel */
.limits-row { gap: 10px 14px; align-items: center; flex-wrap: wrap; max-width: 340px; }
.limits-row .ctl { display: inline-flex; align-items: center; gap: 5px; }
.limits-row .ctl-l { font: 600 10px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.limits-row .ctl-u { font-size: 11.5px; color: var(--muted); }
.limits-row .chk { gap: 4px; font-size: 12px; color: var(--muted); }
.limits-row .rate-range { width: 92px; padding: 0; accent-color: var(--blue); }
.limits-row .rate-out { font: 600 12px/1 var(--sans); color: var(--ink); white-space: nowrap; min-width: 108px; }
.probe { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.probe-sum { margin: 12px 0 4px; font-size: 13.5px; color: var(--ink); }
.errbox-body tr.chk-err td { color: var(--pending); }
.errbox-body .sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.errbox-body .sdot.dropped { background: var(--dropped); }
.errbox-body .sdot.pending { background: var(--pending); }
.probe .pill { font-size: 9.5px; }
.err-link { color: var(--pending); font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; }
.err-link:hover { color: var(--blue); }
/* what the registry actually said, on top of the page */
.errbox { width: min(880px, 92vw); max-height: 80vh; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.errbox::backdrop { background: rgba(8, 16, 28, .55); }
.errbox-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--panel); }
.errbox-head h2 { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--heading); }
.errbox-tools { display: flex; gap: 8px; flex: none; }
.row-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.errbox-body { padding: 4px 18px 18px; overflow: auto; max-height: calc(80vh - 56px); }
.errbox-body table { font-size: 13px; }
.errbox-body td { padding: 7px 10px 7px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.errbox-body th { text-align: left; font: 600 10.5px/1 var(--sans); letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); padding: 10px 10px 8px 0; }
.limits-bulk .chk { gap: 6px; }
.limits-row input[type=text], .limits-row input[type=number] {
  width: 58px; padding: 5px 7px; font: 500 12.5px/1 var(--mono); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.pager .faint { margin-left: auto; }
.panel .eyebrow.top-win:first-of-type { margin-top: 10px; }
.panel tr.hostile td { background: color-mix(in srgb, #D93A3A 6%, transparent); }
.panel td b { font-weight: 600; color: var(--ink); }

/* stacked bar chart, no library */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-top: 6px; }
.bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.bar-stack { display: flex; flex-direction: column; min-height: 2px; border-radius: 3px 3px 0 0; overflow: hidden; background: var(--line-soft); }
.bar-stack i { display: block; min-height: 1px; }
.sg-h { background: var(--blue); }  .sg-b { background: #9AA8B8; }  .sg-x { background: #D93A3A; }  .sg-o { background: #CBD5E1; }
.bar-l { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; font: 500 10px/1 var(--sans); color: var(--faint); text-align: center; white-space: nowrap; overflow: visible; }
.bars { margin-bottom: 18px; }
.bar:hover .bar-stack { filter: brightness(.92); }
.legend-inline { font-size: 12.5px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.sw-h { background: var(--blue); } .sw-b { background: #9AA8B8; } .sw-x { background: #D93A3A; } .sw-o { background: #CBD5E1; }
.legend-inline .sw:first-child { margin-left: 0; }

/* share bars inside tables */
.share { display: inline-block; width: 46px; height: 6px; margin-right: 6px; vertical-align: 2px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.share i { display: block; height: 100%; background: var(--blue); }

/* pills */
.pill { display: inline-block; padding: 3px 7px; border-radius: 5px; font: 600 10.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; background: var(--line-soft); color: var(--muted); }
.pill.k-ok      { background: #ECFBF3; color: #0F7A45; }
.pill.k-bad, .pill-bad { background: #FDECEC; color: #B42B2B; }
.pill.k-warn, .pill-warn { background: #FFF6DD; color: #8A6400; }
.pill.k-admin   { background: var(--tint); color: var(--blue); }
.pill-search { background: #ECFBF3; color: #0F7A45; }
.pill-social { background: #EEF2FF; color: #3B4FC4; }
.pill-ai     { background: #F3E8FF; color: #6D28D9; }
.pill-other  { background: var(--line-soft); color: var(--muted); }
:root[data-theme="dark"] .pill.k-ok, :root[data-theme="dark"] .pill-search { background: #10281D; color: #4FC98A; }
:root[data-theme="dark"] .pill.k-bad, :root[data-theme="dark"] .pill-bad { background: #2C1414; color: #F08080; }
:root[data-theme="dark"] .pill.k-warn, :root[data-theme="dark"] .pill-warn { background: #2A2013; color: #E0A45C; }
:root[data-theme="dark"] .pill-social { background: #1B2140; color: #9DB0FF; }
:root[data-theme="dark"] .pill-ai { background: #261B3A; color: #C4A5FF; }
:root[data-theme="dark"] .panel tr.hostile td { background: rgba(217,58,58,.10); }

/* ban tools */
.ban-tools { display: flex; gap: 18px; flex-wrap: wrap; }
.ban-tool { display: flex; align-items: flex-end; gap: 8px; flex: 1 1 260px; }
.ban-tool label { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); align-self: center; }
.ban-tool input {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px;
  font: 500 14px/1 var(--mono); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.ban-tool input:focus { outline: none; border-color: var(--pending); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pending) 22%, transparent); }
.cols-3 .panel td.ellip { max-width: 120px; }
.panel { overflow-x: auto; }
.panel td.r { white-space: nowrap; }

.flag { display: inline-block; width: 20px; height: 15px; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); margin-right: 3px; overflow: hidden; }

/* =========================================================================
   Static pages (about, how it works, …)
   ========================================================================= */
.page-main { flex: 1 0 auto; padding: 48px 20px 56px; }
.page { max-width: min(1200px, 100%); margin: 0 auto; }
/* plain reading pages (About, Privacy) keep a centred column: 880px is about
   a hundred characters a line at this size, as far as prose can stretch
   before the eye loses the line; the data pages below take the full frame */
.page:not(.page-wide):not(.page-full) { max-width: min(880px, 100%); }
.page .eyebrow { margin: 0 0 14px; }
.page h1 { font: 600 clamp(28px, 4vw, 40px)/1.15 var(--sans); letter-spacing: -0.02em; color: var(--heading); margin: 0 0 18px; text-wrap: balance; }
.page .lede { font-size: 19px; line-height: 1.55; color: var(--ink); margin: 0 0 36px; }
.page h2 { font: 600 20px/1.3 var(--sans); color: var(--heading); margin: 34px 0 10px; letter-spacing: -0.01em; }
.page p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.page em { font-style: italic; }
.page strong { font-weight: 600; color: var(--heading); }
.page a { color: var(--blue); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); }
.page a:hover { border-bottom-color: var(--blue); }
.page .search-again { margin-top: 40px; }

/* ---- deploy page ------------------------------------------------------ */
.console {
  margin: 0; padding: 12px 14px; max-height: 360px; overflow: auto;
  font: 500 12.5px/1.5 var(--mono); color: var(--ink);
  background: var(--tint); border: 1px solid var(--line-soft); border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-word;
}
.console.small { font-size: 12px; max-height: 260px; }
.deploy-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.deploy-form input[type=file] { flex: 1 1 260px; font: 500 13.5px/1 var(--sans); color: var(--ink); }
.deploy-form input[type=password], .deploy-inline input[type=password] {
  height: 36px; padding: 0 10px; width: 150px;
  font: 500 13.5px/1 var(--sans); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.deploy-form .btn-primary { height: 40px; }
.deploy-inline { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; }
.deploy-inline input[type=password] { width: 120px; height: 30px; font-size: 12.5px; }
:root[data-theme="dark"] .console { background: #0F1826; }

/* ---- header search box (domain or IP), every page ---------------------- */
.hsearch {
  display: inline-flex; align-items: stretch; flex: 0 0 auto; margin-left: auto;
  border: 2px solid var(--blue); border-radius: var(--radius); overflow: hidden;
  background: var(--panel);
  transition: box-shadow .14s ease;
}
.hsearch:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.hsearch input {
  width: 176px; height: 32px; padding: 0 11px;
  font: 500 13.5px/1 var(--mono); color: var(--ink);
  border: 0; background: transparent; outline: none;
}
.hsearch input::placeholder { color: var(--faint); }
.hsearch button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 11px;
  font: 700 12px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--blue); border: 0; cursor: pointer;
}
.hsearch button:hover { background: var(--blue-hover); }
.hsearch button svg { width: 14px; height: 14px; }
.masthead-inner .btn-outline { margin-left: 10px; }
.admin-nav { margin-left: 14px; }
/* sign-in is an icon: it is for the site's owner, not the visitor */
.btn-login {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: 2px;
  color: var(--blue); border: 1px solid var(--blue); border-radius: var(--radius);
  transition: background .14s ease, color .14s ease;
}
.btn-login:hover { background: var(--blue); color: #fff; }
.btn-login:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 40%, transparent); outline-offset: 2px; }
.btn-login svg { width: 17px; height: 17px; }
@media (max-width: 1120px) { .hsearch input { width: 150px; } .hsearch button span { display: none; } .masthead nav { gap: 16px; } }
@media (max-width: 900px) { .hsearch input { width: 140px; } }
@media (max-width: 880px) { .hsearch { order: 2; margin-left: auto; } .btn-login { order: 2; } }

/* ---- IP whois page ----------------------------------------------------- */
.page-wide { max-width: min(1200px, 100%); }
.ip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.ip-title { margin: 0; font: 600 clamp(22px, 3.2vw, 30px)/1.2 var(--sans); color: var(--heading); letter-spacing: -0.01em; }
.ip-title .mono { font-family: var(--sans); font-weight: 600; font-size: inherit; font-variant-numeric: tabular-nums; }
.ip-meta { margin: 0; font-size: 13px; color: var(--muted); }
.ip-meta a { color: var(--blue); text-decoration: none; border: 0; }
.ip-sum {
  margin: 0 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.ip-sum > div { padding: 10px 14px; border-right: 1px solid var(--line-soft); min-width: 0; }
.ip-sum > div:last-child { border-right: 0; }
.ip-sum dt { font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.ip-sum dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
pre.whois {
  margin: 0; padding: 16px 18px; overflow: auto;
  font: 400 13px/1.6 var(--mono); color: var(--ink);
  background: #FAFBFD; border: 1px solid var(--line); border-radius: var(--radius);
  white-space: pre; tab-size: 8;
}
.ip-foot { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; }

/* ---- Dropping today ---------------------------------------------------- */
.drops { max-width: min(1200px, 100%); }
.day-strip { display: flex; align-items: stretch; gap: 6px; margin: 4px 0 26px; overflow-x: auto; padding-bottom: 2px; }
.day-strip .day {
  flex: 1 1 0; min-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: var(--panel);
}
.day-strip .day:hover { border-color: var(--blue); }
.day-strip .day.on { border-color: var(--blue); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue); }
.day-strip .day.today .day-l { color: var(--blue); }
.day-strip .day-l { font: 600 12px/1 var(--sans); letter-spacing: .02em; }
.day-strip .day-n { font: 600 18px/1.1 var(--sans); color: var(--heading); font-variant-numeric: tabular-nums; }
.day-strip .day-arrow { flex: 0 0 auto; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); text-decoration: none; font-size: 20px; }
.day-strip .day-arrow:hover { color: var(--blue); border-color: var(--blue); }
.drops-sec { margin: 0 0 30px; }
.drops-sec .eyebrow { margin: 0 0 8px; }
.drops-sub { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.drops-sub b { color: var(--heading); font-weight: 600; }
.drops-empty { margin: 0; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; color: var(--muted); background: var(--tint); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.drops-empty em { font-style: normal; font-family: var(--mono); font-size: 13px; }
.history-scroll.tall { max-height: 520px; }
table.obs.drops-table { table-layout: auto; }
table.obs.drops-table th:nth-child(1), table.obs.drops-table td:nth-child(1) { width: auto; }
table.obs.drops-table th:nth-child(2), table.obs.drops-table td:nth-child(2) { width: auto; }
.drops-table td, .drops-table th { white-space: nowrap; }
.drops-table td.ellip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.drops-table a { color: var(--blue); text-decoration: none; border: 0; }
table.obs.ns-hist { table-layout: auto; }
table.obs.ns-hist th:nth-child(1), table.obs.ns-hist td:nth-child(1) { width: auto; }
table.obs.ns-hist th:nth-child(2), table.obs.ns-hist td:nth-child(2) { width: auto; }
.drops-table a:hover { text-decoration: underline; }
.drops-table .mini { font: 600 11.5px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
.drops-table .mini:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.pill.conf-high { background: var(--dropped-bg); color: var(--dropped); }
.pill.conf-medium { background: var(--redemption-bg); color: var(--redemption); }
.pill.conf-low, .pill.conf-none { background: var(--pending-bg); color: var(--pending); }
.zone-summary td.r { font-variant-numeric: tabular-nums; }
.zone-summary .pill { margin-left: 6px; }
.drops-sub a { color: var(--blue); text-decoration: none; }
.drops-sub a:hover { text-decoration: underline; }
.name-grid { column-width: 190px; column-gap: 18px; font: 500 13.5px/1.9 var(--mono); }
.name-grid a { display: block; color: var(--ink); text-decoration: none; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-grid a:hover { color: var(--blue); }
.ns-block .ns-hist td { white-space: nowrap; }
.ns-block .history-scroll { margin-top: 10px; }
.chip.mono { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
@media (max-width: 560px) { .day-strip .day { min-width: 58px; } .day-strip .day-arrow { display: none; } }

/* ---- Drop times (spreadsheet) ------------------------------------------ */
.page-full { max-width: min(1200px, 100%); }
/* On a desktop the sheet fits and nothing scrolls; on a phone the table
   scrolls inside this box instead of dragging the whole page sideways. */
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.sheet {
  width: 100%; border-collapse: collapse; margin: 6px 0 14px;
  font: 400 15px/1.4 var(--sans); color: var(--ink);
  border: 1px solid #C9CED6;
}
table.sheet th, table.sheet td { padding: 9px 12px; border-right: 1px solid #D9DDE3; vertical-align: top; }
table.sheet th:last-child, table.sheet td:last-child { border-right: 0; }
table.sheet thead th {
  text-align: left; font: 600 11.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: #1F2937; background: #C9CED6; cursor: pointer; user-select: none; white-space: nowrap;
  border-bottom: 1px solid #B4BAC4;
}
table.sheet thead th:hover { background: #BCC2CC; }
table.sheet thead th::after { content: ''; display: inline-block; width: 0; margin-left: 6px; opacity: .55; }
table.sheet thead th.sorted-asc::after  { content: '▲'; width: auto; font-size: 9px; }
table.sheet thead th.sorted-desc::after { content: '▼'; width: auto; font-size: 9px; }
table.sheet th.r, table.sheet td.r { text-align: right; }
table.sheet td.num { font-variant-numeric: tabular-nums; }
table.sheet td:nth-child(4), table.sheet td:nth-child(9) { white-space: nowrap; }   /* dates never break mid-value */
table.sheet td.mono { font-family: var(--mono); font-weight: 600; color: var(--heading); white-space: nowrap; }
table.sheet tbody tr.dt-row.odd  { background: #F3F4F6; }   /* light grey */
table.sheet tbody tr.dt-row.even { background: #E2E5EA; }   /* dark grey  */
table.sheet tbody tr.dt-row.has-note { cursor: pointer; }
table.sheet tbody tr.dt-row.has-note:hover { background: #D6E4FB; }
table.sheet tbody tr.dt-row.open { background: #D6E4FB; }
table.sheet .dt-caret { display: inline-block; font-size: 11px; color: var(--muted); margin-left: 4px; transition: transform .12s; }
table.sheet tr.open .dt-caret { transform: rotate(90deg); }
table.sheet tr.dt-note td { background: #FFFFFF; border-top: 1px solid #D9DDE3; border-bottom: 1px solid #C9CED6; padding: 12px 16px 12px 28px; }
table.sheet tr.dt-note p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; max-width: 100ch; }
table.sheet tr.dt-note p:last-child { margin-bottom: 0; font-size: 13px; }
table.sheet tr.dt-note a { color: var(--blue); }
table.sheet .pill { margin-left: 6px; vertical-align: 1px; }
.drop-times .ip-meta a { color: var(--blue); }
@media (max-width: 900px) {
  table.sheet { font-size: 13px; }
  table.sheet th, table.sheet td { padding: 7px 8px; }
  table.sheet th:nth-child(6), table.sheet td:nth-child(6),
  table.sheet th:nth-child(9), table.sheet td:nth-child(9) { display: none; }   /* UTC and reviewed columns */
}
@media (max-width: 600px) {
  table.sheet th:nth-child(2), table.sheet td:nth-child(2),
  table.sheet th:nth-child(8), table.sheet td:nth-child(8) { display: none; }   /* registry and next change */
}

/* ---- What's my IP ------------------------------------------------------ */
.hero.myip { max-width: min(1200px, 100%); gap: 16px; }
.myip-addr { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.myip-addr code {
  font: 600 clamp(34px, 6.5vw, 60px)/1.1 var(--sans); color: var(--heading);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  overflow-wrap: anywhere; user-select: all;
}
.myip-addr code.v6 { font-size: clamp(19px, 3.2vw, 32px); letter-spacing: -0.01em; }
.myip-copy { cursor: pointer; }
.myip-facts { text-align: left; margin: 6px 0 0; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--panel); }
.myip-facts > div { border-bottom: 1px solid var(--line-soft); }
.myip-facts > div:nth-child(3n) { border-right: 0; }
.myip-facts > div:nth-last-child(-n+3) { border-bottom: 0; }
.myip-facts dd { font-size: 16px; }
.myip-links { margin: 0; font-size: 14.5px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.myip-links a { color: var(--blue); text-decoration: none; }
.myip-links a:hover { text-decoration: underline; }
.myip-links .faint { font-size: 13px; }
.myip-links .faint a { color: inherit; text-decoration: underline; }
.faq { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 28px; }
.faq h3 { margin: 0 0 6px; font: 600 15px/1.3 var(--sans); color: var(--heading); }
.faq p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.faq code { font: 500 12.5px/1 var(--mono); color: var(--ink); background: var(--tint); padding: 3px 6px; border-radius: 4px; white-space: nowrap; }
@media (max-width: 900px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .faq { grid-template-columns: 1fr; }
  .myip-facts { grid-template-columns: 1fr 1fr; }
  .myip-facts > div:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .myip-facts > div:nth-child(2n) { border-right: 0; }
  .myip-facts > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .myip-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
}
.page .search-again { margin-top: 28px; }

/* ---- site config page --------------------------------------------------- */
.cfg-form { display: flex; flex-direction: column; gap: 22px; }
.cfg-form .eyebrow { margin-bottom: -10px; }
.cfg-row { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px 28px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.cfg-row:first-child { border-top: 0; padding-top: 4px; }
.cfg-label label { display: block; font: 600 14.5px/1.3 var(--sans); color: var(--heading); }
.cfg-tags { display: flex; gap: 6px; margin-top: 7px; }
.cfg-field input, .cfg-field textarea {
  width: 100%; max-width: 560px; padding: 9px 12px;
  font: 500 14px/1.4 var(--mono); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.cfg-field input.num { max-width: 180px; }
.cfg-field input:focus, .cfg-field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.cfg-row.has-error input, .cfg-row.has-error textarea { border-color: #D93A3A; }
.cfg-err { margin: 6px 0 0; font-size: 13px; color: #B42B2B; font-weight: 600; }
.cfg-help { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 720px; }
.cfg-help code { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.cfg-help a.cfg-reset { color: var(--blue); text-decoration: none; margin-left: 4px; }
.cfg-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) { .cfg-row { grid-template-columns: 1fr; } }
/* Admin pages carry their own nav and the wordmark still goes home, so the
   public links are redundant there — and with seven admin tabs they no
   longer fit at any width. Hide them unconditionally rather than at a
   breakpoint that the next tab would break again. */
.masthead-wide nav:not(.admin-nav) { display: none; }
/* seven tabs on a laptop: trim the padding before anything wraps */
@media (max-width: 1340px) {
  .masthead-wide .admin-nav { gap: 1px; }
  .masthead-wide .admin-nav a { padding: 8px 8px; font-size: 12.5px; }
  .masthead-wide .hsearch input { width: 132px; }
}