/* ---------------------------------------------------------------------------
   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; }
}

@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);
}
.checking-paused { border-left: 4px solid #d9a400; }
/* a live check waits for a real hand on the page (lib/people.php) */
.checking-person { border-left: 4px solid var(--line); color: var(--muted); }
/* the bot check (lib/humancheck.php): the ALTCHA checkbox where the spinner would be */
.checking-human { flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; }
.checking-human .hc-lead { font-weight: 600; }
.hc-slot, .hc-inline { min-width: 260px; }
.hc-inline { margin-top: 8px; }
.hc-note { margin: 6px 0 0; font-size: 13px; color: #b42318; }
.hc-note:empty { display: none; }
/* the bot check's popup (assets/humancheck.js, lib/botcheck.php): the screen goes dark, one box in the middle */
.bc-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6, 12, 22, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.bc-box {
  background: var(--panel); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  width: min(460px, 100%); padding: 26px 24px 14px; text-align: center; outline: none;
}
.bc-text { margin: 0 0 18px; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--heading); }
.bc-slot { display: flex; flex-direction: column; align-items: center; min-height: 64px; }
.bc-slot altcha-widget { width: 100%; max-width: 300px; text-align: left; }
.bc-close {
  margin-top: 12px; background: none; border: 0; padding: 6px 10px;
  font: inherit; font-size: 14px; color: var(--faint); cursor: pointer; text-decoration: underline;
}
.bc-close:hover { color: var(--ink); }
html.bc-open { overflow: hidden; }
altcha-widget { --altcha-max-width: 320px; }
.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; }
/* a full-width row (a name's nameservers): the cells after it swap sides */
.facts > div.wide { grid-column: 1 / -1; border-right: 0; }
.facts > div.wide ~ div:nth-child(odd) { border-right: 0; }
.facts > div.wide ~ div:nth-child(even) { border-right: 1px solid var(--line-soft); }
.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), .facts > div.wide ~ div:nth-child(even) { 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; }

/* ---- admin header: server load readout -------------------------------- */
.srv-load {
  flex: 0 0 auto; font: 12.5px/1 var(--mono); color: var(--faint);
  padding: 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.srv-load.busy { color: var(--redemption); }
.srv-load.hot  { color: var(--pending); font-weight: 600; }
@media (max-width: 640px) { .srv-load { display: none; } }

/* ---- 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;
}
/* homepage: the numbers under the search, and the "dropping next" proof */
.stats { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.stats li { flex: 1 1 150px; max-width: 220px; display: flex; }
.stats a, .stats div {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel);
  box-shadow: var(--shadow); text-decoration: none; color: inherit;
}
.stats a:hover { border-color: var(--blue); }
.stats b { font: 700 26px/1 var(--sans); letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.stats span { font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.3; }
.trust-line { margin: 4px 0 0; font-size: 13px; color: var(--faint); }
.next-drops { border-top: 1px solid var(--line); background: var(--tint); }
.next-drops-inner { max-width: min(1200px, 100%); margin: 0 auto; padding: 30px 20px 36px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.sec-head .eyebrow { margin: 0; }
.sec-link { font-size: 14px; color: var(--blue); text-decoration: none; white-space: nowrap; }
.sec-link:hover { text-decoration: underline; }
.drops-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.drops-table td.n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drops-table th.hide-sm, .drops-table td.hide-sm { width: 90px; }
.drops-table th.t, .drops-table td.t { width: 200px; }
.drops-table th.c, .drops-table td.c { width: 120px; }
.drops-table th, .drops-table td { padding: 10px 14px; text-align: left; font-size: 14px; border-top: 1px solid var(--line-soft); }
.drops-table th { border-top: 0; font: 500 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: var(--tint); }
.drops-table td.n a { font-family: var(--mono); font-size: 14px; color: var(--heading); text-decoration: none; }
.drops-table td.n a:hover { color: var(--blue); }
.drops-table td.t { color: var(--muted); white-space: nowrap; }
.drops-table td.c { font-family: var(--mono); color: var(--pending); white-space: nowrap; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.door { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); text-decoration: none; color: inherit; }
.door b { font-size: 15px; color: var(--heading); }
.door span { font-size: 13px; color: var(--muted); }
.door:hover { border-color: var(--blue); }
@media (max-width: 700px) {
  .stats li { flex-basis: calc(50% - 6px); max-width: none; }
  .stats b { font-size: 22px; }
  .doors { grid-template-columns: 1fr; }
  .drops-table .hide-sm { display: none; }
  .drops-table th, .drops-table td { padding: 9px 8px; font-size: 13px; }
  .drops-table th.t, .drops-table td.t { width: 118px; }
  .drops-table th.c, .drops-table td.c { width: 88px; }
  .drops-table td.n a { font-size: 13px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.home-lifecycle { grid-column: 1 / -1; margin-bottom: 0; padding: 22px 12px 18px; min-width: 0; max-width: 100%; box-sizing: border-box; }
.legend-inner > * { min-width: 0; }
/* 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 */
/* the pause box is gone, so speed + stop + save fit on one line again */
.limits-row { gap: 10px 12px; align-items: center; flex-wrap: wrap; max-width: 430px; }
.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); }

/* ---- /v2/botcheck (templates/v2/botcheck.php) ---------------------------- */
.bc-page { display: flex; flex-direction: column; gap: 16px; }
.bc-intro { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 1500px; }
.bc-intro b { color: var(--ink); }
.bc-page .eyebrow { margin: 4px 0 -6px; }
.bc-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 16px; }
.bc-count h2, .bc-settings h2, .bc-list h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 16px; }
.bc-total { font: 600 22px/1 var(--mono); color: var(--heading); font-variant-numeric: tabular-nums; }
.bc-count table { width: 100%; border-collapse: collapse; }
.bc-count td { padding: 3px 0; font-size: 14px; border: 0; }
.bc-count td.r { width: 72px; padding-right: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.bc-count tr.faint td { color: var(--faint); }
.bc-foot { margin: 8px 0 0; font-size: 12.5px; }
.bc-always ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.bc-always li + li { margin-top: 4px; }
.bc-cols { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bc-row { display: grid; grid-template-columns: 220px 300px minmax(0, 1fr); gap: 6px 24px; align-items: center;
          padding: 11px 0; border-top: 1px solid var(--line-soft); }
.bc-l label { font: 600 14.5px/1.3 var(--sans); color: var(--heading); }
.bc-l .pill { margin-left: 6px; }
.bc-h { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.bc-row.has-error .bc-num, .bc-list.has-error textarea { border-color: #D93A3A; }
.bc-sub { margin: 14px 0 0; padding-top: 4px; font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.bc-num { width: 96px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ground);
          color: var(--ink); font: 500 15px var(--mono); }
.bc-num:focus, .bc-list textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.bc-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 14.5px; cursor: pointer; }
.bc-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 600 14px var(--sans); user-select: none; }
.bc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bc-knob { position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--line); transition: background .15s; flex: none; }
.bc-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
                  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.bc-switch input:checked + .bc-knob { background: var(--dropped); }
.bc-switch input:checked + .bc-knob::after { transform: translateX(20px); }
.bc-switch input:focus-visible + .bc-knob { box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.bc-switch .bc-sw-on { display: none; color: var(--dropped); }
.bc-switch .bc-sw-off { color: var(--faint); }
.bc-switch input:checked ~ .bc-sw-on { display: inline; }
.bc-switch input:checked ~ .bc-sw-off { display: none; }
.bc-actions { display: flex; align-items: center; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.bc-list textarea { width: 100%; box-sizing: border-box; min-height: 420px; padding: 10px 12px; border: 1px solid var(--line);
                    border-radius: var(--radius); background: var(--ground); color: var(--ink); font: 13.5px/1.55 var(--mono); resize: vertical; }
.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 (1540, not
   1340, since the server-load readout took ~160px of the header) */
@media (max-width: 1540px) {
  .masthead-wide .admin-nav { gap: 1px; }
  .masthead-wide .admin-nav a { padding: 8px 8px; font-size: 12.5px; }
  .masthead-wide .hsearch input { width: 132px; }
}

/* ---------------------------------------------------------------------------
   "Show the rest" — a long table cut to its first rows until asked.
   --------------------------------------------------------------------------- */
.more-row td { padding: 0 !important; border: 0 !important; }
.more-btn {
  display: block; width: 100%; padding: 11px 14px; margin: 0;
  font: 600 13.5px/1 var(--sans); color: var(--blue); text-align: center;
  background: var(--tint); border: 1px dashed var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.more-btn:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--tint)); }

/* ---------------------------------------------------------------------------
   TLD filter chips (/short-names). Small, quiet, and wrapping — the length
   strip above them is the primary choice; this is the second cut.
   --------------------------------------------------------------------------- */
/* A length we hold nothing at: shown for shape, not offered as a click. */
.day-strip .day.off { opacity: .45; cursor: default; }
.day-strip .day.off:hover { border-color: var(--line); }

.tld-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -14px 0 24px; }
.tldchip {
  display: inline-block; padding: 5px 9px;
  font: 500 13px/1 var(--sans); color: var(--ink); text-decoration: none;
  background: var(--card, #fff); border: 1px solid var(--line); border-radius: 999px;
  white-space: nowrap;
}
.tldchip[hidden] { display: none; }   /* inline-block otherwise beats the attribute */
.tldchip:hover { border-color: var(--blue); color: var(--blue); }
.tldchip.on { border-color: var(--blue); background: var(--tint); color: var(--blue); font-weight: 600; }
.tldchip.on .faint { color: inherit; opacity: .7; }
.tldchip-more { cursor: pointer; color: var(--blue); border-style: dashed; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Plain prose pages (/how-it-works, /api)
   --------------------------------------------------------------------------- */
.prose h2 { margin: 30px 0 10px; font: 600 19px/1.3 var(--sans); color: var(--heading); }
.prose h3 { margin: 22px 0 8px; font: 600 15.5px/1.3 var(--sans); color: var(--heading); }
.prose p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin: 0 0 7px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--tint); padding: 1px 5px; border-radius: 4px; }
.prose a { color: var(--blue); }
.prose .lede { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }
/* the Data page: a command to copy, and two-column reference tables that wrap on a phone */
.prose pre { margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; font: 400 13px/1.6 var(--mono); color: var(--ink);
             background: var(--tint); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose table.obs { margin: 0 0 14px; }
table.obs.cols th:nth-child(1), table.obs.cols td:nth-child(1) { width: 200px; }
table.obs.cols th:nth-child(2), table.obs.cols td:nth-child(2) { width: auto; }
@media (max-width: 560px) {
  /* on a phone each row stacks: the address or column name, then what it means */
  table.obs.cols { min-width: 0; }
  table.obs.cols, table.obs.cols tbody, table.obs.cols tr, table.obs.cols td { display: block; width: auto; }
  table.obs.cols thead { display: none; }
  table.obs.cols tr { border-top: 1px solid var(--line-soft); padding: 8px 0 10px; }
  table.obs.cols td { border: 0; padding: 2px 4px; white-space: normal; word-break: break-word; }
  table.obs.cols td:first-child { font-weight: 600; }
}

.life { display: grid; gap: 10px; margin: 0 0 20px; }
.life-step { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: baseline;
             padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); }
.life-when { font: 600 12.5px/1.3 var(--sans); color: var(--faint); letter-spacing: .02em; }
.life-what { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.life-what b { color: var(--heading); }
@media (max-width: 640px) { .life-step { grid-template-columns: 1fr; gap: 4px; } }
/* Estimated days read as outline rather than fill: the shape says "not confirmed"
   before the ~ does. */
.cal-cell.est { background: var(--panel); border-style: dashed; border-color: color-mix(in srgb, var(--pending) 40%, var(--line)); }
.cal-cell.est .cal-n { color: var(--muted); font-weight: 500; }
.cal-swatch.est { background: var(--panel); border-style: dashed; border-color: color-mix(in srgb, var(--pending) 40%, var(--line)); }

/* ---------------------------------------------------------------------------
   The header menu.

   Five items, four of which open a panel that runs the full width of the page
   — the pattern whois.com uses, in our own colours. The panel is positioned
   against the masthead rather than the item, so the white band reaches both
   edges of the window while its contents stay on the same 1200px measure as
   everything else. Below 861px the bar collapses to a burger and the same
   markup becomes a list.
   --------------------------------------------------------------------------- */
.masthead { position: relative; z-index: 40; }

.site-nav { flex: 1 1 auto; margin-left: 14px; min-width: 0; }
.nav-top { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-item { position: static; }

.masthead .nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 11px; margin: 0; border: 0; background: none;
  font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none;
  white-space: nowrap; cursor: pointer; border-radius: 6px;
  position: relative;
}
.masthead .nav-link:hover { color: var(--blue); background: var(--tint); }
.masthead .nav-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* No arrows on the bar. The panel opening is the signal that there was more
   there, and a row of carets makes five words look like a form.
   The blue bar is a pointer, not a location: it marks the word being hovered
   and the word whose panel is open, and nothing else. A permanent bar under
   "the section you are in" competes with it and leaves two bars on the screen
   at once. */
.nav-item.open > .nav-link::after,
.masthead .nav-link:hover::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -13px;
  height: 3px; background: var(--blue); border-radius: 2px 2px 0 0;
}
.nav-item.open > .nav-link { color: var(--blue); }
.masthead .nav-link:hover { background: none; }

.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(16, 36, 64, .10);
}
.nav-panel[hidden] { display: none; }
.nav-panel-inner {
  max-width: min(1200px, 100%); margin: 0 auto; padding: 22px 20px 24px;
  /* Cards keep a readable width and stay left-aligned rather than being
     stretched across the whole measure — two links spread to the far edges of
     a 1200px bar read as two unrelated things. */
  display: grid; grid-template-columns: repeat(3, minmax(250px, 300px));
  justify-content: start; gap: 4px 24px;
}
@media (max-width: 1000px) { .nav-panel-inner { grid-template-columns: repeat(2, minmax(250px, 300px)); } }
.masthead .nav-card {
  display: block; padding: 11px 12px; border-radius: var(--radius);
  text-decoration: none; background: none;
}
.masthead .nav-card:hover { background: var(--tint); }
.nav-card-t { display: block; font: 600 14.5px/1.3 var(--sans); color: var(--blue); }
.masthead .nav-card:hover .nav-card-t { color: var(--blue-hover); }
.nav-card-b { display: block; margin-top: 3px; font: 400 13px/1.45 var(--sans); color: var(--faint); }

/* The burger. Hidden on a wide screen; it is the whole menu on a narrow one. */
.nav-burger {
  display: none; width: 40px; height: 36px; padding: 9px 8px; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.nav-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-burger span + span { margin-top: 4px; }
.nav-burger[aria-expanded="true"] { border-color: var(--blue); }
.nav-burger[aria-expanded="true"] span { background: var(--blue); }

@media (max-width: 860px) {
  .nav-burger { display: block; order: 2; }
  .hsearch { order: 3; }
  .btn-login, .masthead-inner .btn-outline { order: 4; }
  .masthead-inner .btn-icon { order: 4; }          /* the dark-mode switch stays beside sign-in on phones */
  /* `.masthead .site-nav`, not `.site-nav`: the desktop rule `.masthead nav { display: flex }`
     outranked the bare class, so on phones the menu never folded behind the burger. */
  .masthead .site-nav { display: none; order: 5; width: 100%; margin: 0; }
  .masthead .site-nav.open { display: block; }
  .nav-top { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line-soft); }
  .nav-item { border-bottom: 1px solid var(--line-soft); }
  .masthead .nav-link { width: 100%; justify-content: space-between; padding: 13px 4px; border-radius: 0; font-size: 15px; }
  .masthead .nav-link:hover { background: none; }
  .masthead .nav-item.has-panel > .nav-link::before {
    content: ""; order: 2; width: 8px; height: 8px; margin-right: 4px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); opacity: .5;
  }
  .masthead .nav-item.open > .nav-link::before { transform: rotate(225deg) translate(-2px, -2px); opacity: .9; }
  .masthead .nav-link:hover::after { display: none; }
  .nav-item.on > .nav-link::after, .nav-item.open > .nav-link::after { display: none; }
  .nav-item.on > .nav-link { color: var(--blue); }
  /* In the list the panel is not a panel: it is the sub-list, opened in place. */
  .nav-panel { position: static; box-shadow: none; border: 0; background: var(--tint); }
  .nav-panel-inner { display: block; padding: 4px 4px 10px; }
  .masthead .nav-card { padding: 9px 10px; }
  .nav-card-b { display: none; }
}

/* ---------------------------------------------------------------------------
   Contact form (/contact)
   --------------------------------------------------------------------------- */
.contact .prose { margin-bottom: 26px; }
.notice { display: block; padding: 14px 16px; line-height: 1.55; }
.contact-again { margin-top: 18px; font-size: 14.5px; }
.contact-form { max-width: 720px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-field { margin-bottom: 16px; }
.f-field label { display: block; margin-bottom: 6px; font: 600 13.5px/1 var(--sans); color: var(--heading); }
.f-field input, .f-field textarea {
  width: 100%; padding: 10px 12px; font: 400 15px/1.5 var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius);
}
.f-field textarea { resize: vertical; min-height: 140px; }
.f-field input:focus, .f-field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
}
.f-field.bad input, .f-field.bad textarea { border-color: var(--pending); }
.f-err { margin: 6px 0 0; font-size: 13px; color: var(--pending); }
.f-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.f-actions .btn-primary { height: 42px; padding: 0 22px; }
.f-actions .f-note { margin: 0; max-width: 46ch; font-size: 12.5px; line-height: 1.5; }
/* The field that is not there. Off-screen rather than display:none — some bots
   skip what is not rendered, and the point is that they fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 620px) { .f-row { grid-template-columns: 1fr; gap: 0; } }

/* Extension finder on /tlds */
.tld-filter { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.tld-filter input {
  flex: 0 1 340px; padding: 9px 12px; font: 400 14.5px/1 var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius);
}
.tld-filter input:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.tld-count { font-size: 13px; }
/* an internationalised extension: its ASCII form, small, beside the one people read */
.tld-ascii { font-size: 12px; margin-left: 4px; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   /v2/content — menu, look, page text, inbox
   --------------------------------------------------------------------------- */
.panel-note { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 88ch; }
.panel-note code { font: 500 12.5px var(--mono); background: var(--tint); padding: 1px 5px; border-radius: 4px; }
.form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; }
.inline-form.mt { margin-top: 14px; }

.menu-table { width: 100%; }
.menu-table th.c, .menu-table td.c { text-align: center; }
.menu-table input[type=text] {
  width: 100%; padding: 6px 8px; font: 400 13.5px/1.3 var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px;
}
.menu-table input.b { font-weight: 700; }
.menu-table input.mono.b { font: 700 14px/1.3 var(--sans); }
.menu-table input.num { width: 64px; padding: 6px 6px; text-align: right; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); }
.menu-table input:focus { outline: none; border-color: var(--blue); }
.menu-group { border-bottom: 2px solid var(--line); }
.menu-top td { background: var(--tint); }
.menu-in { display: inline-block; width: 18px; }
.menu-new input::placeholder { color: var(--faint); font-style: italic; }

.theme-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-choice {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; cursor: pointer;
  font-size: 13.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; background: var(--ground);
  white-space: nowrap;
}
.theme-choice.on { border-color: var(--blue); background: var(--tint); color: var(--blue); font-weight: 600; }
.theme-choice input { margin: 0; }
.swatch { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

.page-edit { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.page-edit > summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
.page-edit > summary .pill { margin-left: 8px; }
.page-form { margin-top: 12px; }
.page-form textarea { font: 400 13.5px/1.6 var(--mono); }
.rev-head { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.rev-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.rev-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-top: 1px solid var(--line-soft); }

.box-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.box-tab { padding: 7px 12px; font-size: 13.5px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; }
.box-tab.on { border-color: var(--blue); background: var(--tint); color: var(--blue); font-weight: 600; }
.box-tabs .inline-form { margin-left: auto; }

.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.msg.is-new { border-left: 3px solid var(--blue); }
.msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.msg-from { margin: 4px 0 10px; font-size: 13px; }
.msg-body { margin: 0 0 12px; font: 400 13.5px/1.6 var(--sans); white-space: pre-wrap; word-break: break-word;
  background: var(--tint); border-radius: var(--radius); padding: 12px 14px; max-height: 340px; overflow: auto; }
.msg-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .menu-table thead { display: none; }
  .menu-table td { display: block; padding: 4px 8px !important; }
  .menu-table td.c { text-align: left; }
}
.row-link { font-size: 12.5px; color: var(--faint); text-decoration: none; white-space: nowrap; }
.row-link:hover { color: var(--blue); text-decoration: underline; }

/* With JavaScript off nothing removes the hidden attribute, so the panels are
   opened by hover alone. Scoped to .no-js so that when the script does run it
   is the script that decides — the small delay before a panel opens is the
   difference between a menu and a flicker. */
.no-js .nav-item.has-panel:hover .nav-panel[hidden],
.no-js .nav-item.has-panel:focus-within .nav-panel[hidden] { display: block; }
.no-js .nav-burger { display: none; }
@media (max-width: 860px) { .no-js .masthead .site-nav { display: block; } }
/* The admin bar has its own nav; the burger belongs to the public one. */
.masthead-wide .nav-burger { display: none; }

/* ---------------------------------------------------------------------------
   Live check feed (/v2/limits) — every check as it lands.
   --------------------------------------------------------------------------- */
.live-panel .panel-head { align-items: center; }
.live-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.live {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--tint); padding: 6px 2px; font: 400 12.5px/1.5 var(--mono);
}
.live-empty { margin: 8px 12px; font-family: var(--sans); }
.live-row {
  /* time · name · who answers for it · status · what they said · how long.
     The two text columns share the leftover width instead of holding fixed
     sizes: at a fixed 150px "rate limited: Number of requests exceeded" read as
     "rate limited: Numb…", which is the half of the line worth reading. */
  display: grid;
  grid-template-columns: 78px minmax(0,1.1fr) minmax(90px,0.8fr) 38px minmax(0,1.6fr) minmax(0,0.5fr) 58px;
  gap: 10px; padding: 2px 16px 2px 10px; white-space: nowrap;
}
/* the node that answered gets its own column so a 16-char node id never
   pushes the row wider than the panel (that was a horizontal scrollbar) */
.live-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.live-r { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.live-row:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.live-t { color: var(--faint); }
.live-n { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.live-n:hover { color: var(--blue); text-decoration: underline; }
.live-s { text-align: right; color: var(--muted); }
.live-w, .live-r, .live-n { min-width: 0; }
.live-w { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.live-ms { text-align: right; font-size: 11.5px; }
.live-row.live-bad .live-s, .live-row.live-bad .live-w { color: var(--pending); }
.live-row.live-refused { background: var(--pending-bg); }
.live-row.live-refused .live-s, .live-row.live-refused .live-w { color: var(--pending); font-weight: 600; }
@media (max-width: 860px) {
  .live-row { grid-template-columns: 70px minmax(0,1fr) 38px; }
  .live-w, .live-ms, .live-r, .live-who { display: none; }
}

/* What a platform was refusing us at, shown in the State cell rather than behind
   a hover: the speed we were actually sending when they said no. */
.blk { font-size: 12px; color: var(--pending); white-space: nowrap; }
.blk b { font-weight: 600; }

/* The star marks a registry operator we can name: every TLD under it draws on
   one allowance, so the row is one decision rather than several. */
.opstar { color: #E0A93A; font-size: 12px; }

/* A headline tile with nothing to say — hidden rather than showing a zero that
   reads as a problem solved when it is only a number that does not apply. */
.tile-off { display: none; }

/* Limits: edge nodes */
.scope-note { margin-bottom: 14px; }
.edge-tbl td.num, .edge-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.edge-panel p.faint { margin: 8px 0 0; font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   /v2/limits — the board. Two series everywhere: this server (blue) and the
   matrix of edge nodes (teal). Status colours are the site's own and are never
   reused for a series.
   --------------------------------------------------------------------------- */
:root { --srv: #2563EB; --edge: #0D9488; --ref403: #D97706; --ref429: #DC2626; --self: #4D9A06; }
:root[data-theme="dark"] { --srv: #5B8DEF; --edge: #22A99A; --ref403: #F5A524; --ref429: #F87171; --self: #A3E635; }
.board-inner { gap: 14px; }
.board-head { align-items: flex-start; }
.board-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scope-l { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.scope-sel { padding: 6px 8px; font: 500 13px var(--sans); border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); }
.btn-big { padding: 8px 16px; font: 600 13.5px var(--sans); border-radius: 7px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); cursor: pointer; }
.btn-big.danger { color: var(--pending); border-color: color-mix(in srgb, var(--pending) 55%, transparent); }
.btn-big.danger:hover { background: var(--pending); color: #fff; }
.btn-big.go { color: var(--dropped); border-color: color-mix(in srgb, var(--dropped) 55%, transparent); }
.btn-big.go:hover { background: var(--dropped); color: #fff; }
.btn-small.go { color: var(--dropped); border-color: color-mix(in srgb, var(--dropped) 55%, transparent); }
.btn-small.go:hover { background: var(--dropped); color: #fff; border-color: var(--dropped); }

.tiles-board { grid-template-columns: repeat(8, minmax(0, 1fr)) minmax(230px, 2fr) minmax(230px, 2fr); gap: 10px; }
.tiles-board .tile { padding: 12px 12px 10px; min-width: 0; }
.tiles-board .tile-n { font-size: 22px; white-space: nowrap; }
.tiles-board .tile-l { font-size: 10.5px; line-height: 1.35; }
.tiles-board .tile-l .faint { text-transform: none; letter-spacing: 0; }
.tile-u { font: 500 12px var(--sans); color: var(--faint); margin-left: 2px; }
.tile.t-owed { border-top-color: var(--heading); }
.tile.t-rate { border-top-color: var(--srv); }
.tile.t-spark { border-top-color: var(--edge); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; margin-right: 3px; }
.sw-srv { background: var(--srv); } .sw-edge { background: var(--edge); }
.sw-403 { background: var(--ref403); } .sw-429 { background: var(--ref429); }
.tile.t-spark-ref { border-top-color: var(--ref429); }
.spark-403 { fill: var(--ref403); } .spark-429 { fill: var(--ref429); }
.spark { display: block; width: 100%; height: 56px; overflow: visible; }
.spark-base { stroke: var(--line); stroke-width: 1; }
.spark-srv, .spark-edge { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-srv { stroke: var(--srv); } .spark-edge { stroke: var(--edge); }
@media (max-width: 1400px) { .tiles-board { grid-template-columns: repeat(8, minmax(0, 1fr)); } .tile.t-spark { grid-column: span 4; } }
@media (max-width: 1100px) { .tiles-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tile.t-spark { grid-column: span 2; } }
@media (max-width: 640px)  { .tiles-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.board-mid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 14px; align-items: stretch; }
.board-mid .live { max-height: 232px; }
.matrix-panel .panel-head { margin-bottom: 6px; }
.mat-empty { margin: 6px 0; font-size: 13px; }
.mat-empty code { font: 500 12.5px var(--mono); background: var(--tint); padding: 1px 5px; border-radius: 4px; }
.mat-note { margin: 10px 0 0; font-size: 12px; }
.nodes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }   /* one row; scrolls sideways past five */
.node { flex: 0 0 190px; }
.nd-sort-wrap { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.nd-sort { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--ink); }
.node { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; background: var(--ground); border-left: 3px solid var(--line); }
.node.on { border-left-color: var(--edge); }
.node header { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 6px; }
.node header b { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--heading);
                 max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* proxy_node_10 fits beside ✕ ⏻ */
.nd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); align-self: center; }
.node.on .nd-dot { background: var(--edge); }
/* the ⏻ in the card's top-right corner: green when the node is taking names, grey when paused */
.node { position: relative; }
.node header { padding-right: 50px; }   /* room for ✕ and ⏻ */
.nd-power-form { position: absolute; top: 7px; right: 8px; }
.nd-forget-form { position: absolute; top: 7px; right: 32px; }
.nd-forget { border: 1px solid var(--line); background: var(--panel); color: var(--faint); border-radius: 50%; width: 20px; height: 20px;
             font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.nd-forget:hover { color: var(--pending); border-color: var(--pending); }
.nd-power { border: 1px solid var(--line); background: var(--panel); color: var(--edge); border-radius: 50%; width: 20px; height: 20px;
            font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.nd-power:hover { border-color: var(--edge); }
.nd-paused-tag { display: none; font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); width: 100%; }
.node.paused { opacity: .55; border-left-color: var(--line); }
.node.paused .nd-power { color: var(--faint); }
.node.paused .nd-power:hover { color: var(--edge); border-color: var(--edge); }
.node.paused .nd-dot { background: var(--line); }
.node.paused .nd-paused-tag { display: block; }
.nd-seen, .nd-ip { font-size: 11.5px; }
.nd-nums { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }   /* fixed 2×2: now·24h / sent·received, whatever the numbers’ width */
.nd-nums dt { font: 500 9.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nd-nums dd { margin: 3px 0 0; font: 500 13px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nd-why { margin: 6px 0 0; font-size: 12px; }
@media (max-width: 900px) { .board-mid { grid-template-columns: 1fr; } }

.backends .panel-head { margin-bottom: 10px; }
.backends h2 .faint { font-weight: 400; font-size: 13px; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 10px; }
.bk { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow);
      padding: 11px 13px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; border-top: 3px solid var(--line); }
.bk.st-running { border-top-color: var(--dropped); }
.bk.st-refused { border-top-color: #F2B807; }
.bk.st-paused  { border-top-color: #E8730C; }
.bk.st-blocked { border-top-color: #D93A3A; }
.bk.st-stopped { border-top-color: #6B7A8B; }
.bk.st-idle    { border-top-color: var(--line); }
.bk-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.st-running .bk-dot { background: var(--dropped); } .st-refused .bk-dot { background: #F2B807; }
.st-blocked .bk-dot { background: #D93A3A; } .st-paused .bk-dot { background: #E8730C; } .st-stopped .bk-dot { background: #6B7A8B; }
.bk-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bk-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bk-name { font: 600 14.5px/1.25 var(--sans); color: var(--heading); overflow-wrap: anywhere; }
.bk-hosts { font-size: 11.5px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-rename { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 0 2px; }
.bk-rename:hover { color: var(--blue); }
.bk-state { flex: none; white-space: nowrap; }
.bk-why { margin: 0; font-size: 12.5px; color: var(--muted); }
.bk-why .blk b { color: var(--pending); }
.bk-hold { display: block; margin-top: 2px; }   /* one hold per line: six nodes in a row is a list, not a sentence */
.bk-tlds { display: flex; flex-wrap: wrap; gap: 4px; }
.tc { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 6px; border-radius: 999px; font: 500 12px var(--mono); text-decoration: none;
      border: 1px solid var(--line); color: var(--ink); background: var(--ground); white-space: nowrap; }
.tc::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.tc i { font: 500 10.5px var(--sans); color: var(--faint); font-style: normal; }
.tc:hover { border-color: var(--blue); color: var(--blue); }
.tc-running::before { background: var(--dropped); }
.tc-refused::before { background: #F2B807; }
.tc-paused::before  { background: #E8730C; }
.tc-blocked { border-color: color-mix(in srgb, #D93A3A 45%, transparent); background: color-mix(in srgb, #D93A3A 7%, transparent); } .tc-blocked::before { background: #D93A3A; }
.tc-stopped { color: var(--faint); text-decoration: line-through; } .tc-stopped::before { background: #6B7A8B; }
.bk-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; margin: 0; }
.bk-nums-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bk-nums dt { font: 500 9.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.bk-nums dd { margin: 3px 0 0; font: 500 12.5px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-nums dd b { font-weight: 600; color: var(--heading); }
.bk-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.bk-act .ctl-l { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.bk-act select { padding: 4px 6px; font: 500 12.5px var(--sans); border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); }
.bk-btns { margin-left: auto; display: inline-flex; gap: 5px; flex-wrap: wrap; }
.bk-clear[hidden] { display: none; }   /* the CLEAR form: inline otherwise beats the attribute */
.bk-over { outline: 2px solid color-mix(in srgb, #F2B807 60%, transparent); }
.quiet { margin-top: 12px; }
.quiet h3 { margin: 0 0 8px; font: 600 13.5px var(--sans); color: var(--heading); }
.quiet h3 .faint { font-weight: 400; }
.quiet-tlds { max-height: none; }
.tldbox, .namebox { max-width: 560px; }
.tld-facts { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
.tld-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tld-form .ctl-l { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.tld-form select, .namebox input[type=text] { padding: 5px 8px; font: 500 13px var(--sans); border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); }
.namebox input[type=text] { width: 100%; }
.tld-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }

/* sparkline hover */
.spark-wrap { position: relative; }
.spark-x { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--faint); opacity: .6; pointer-events: none; }
.spark-tip { position: absolute; top: -6px; z-index: 5; pointer-events: none; white-space: nowrap; padding: 6px 9px; border-radius: 6px;
             border: 1px solid var(--line); background: var(--panel); box-shadow: var(--shadow); font: 500 11.5px/1.5 var(--mono); color: var(--ink); text-transform: none; letter-spacing: 0; }
.spark-tip b { color: var(--heading); font-weight: 600; }
.live-who { font-weight: 600; color: var(--edge); font-style: normal; }
.bk-node { color: var(--edge); }   /* node names on a backend card, same teal as the live feed */
.live-row.live-edge { border-left: 2px solid var(--edge); }
/* this server's own checks: lime, bar and label, so they never read as a node's turquoise */
/* 2px border like a node row so the columns still line up, thickened by an inset shadow */
.live-row.live-self-row { border-left: 2px solid var(--self); box-shadow: inset 2px 0 0 var(--self); }
.live-row.live-self-row:not(.live-refused) { background: color-mix(in srgb, var(--self) 8%, transparent); }
.live-who.live-self { color: var(--self); font-weight: 700; }

.bk-tog { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; border: 0; background: none; padding: 0;
          font: 500 12.5px var(--sans); color: var(--muted); cursor: pointer;
          margin-top: auto; }   /* everything from the TLD toggle down sits on the card's bottom edge; the refusal/holding lines are the part that grows */
.bk-tog:hover { color: var(--blue); }
.bk-caret { font-size: 11px; width: 10px; display: inline-block; }

.bk-tlds[hidden] { display: none; }

.spark polyline, .spark line { vector-effect: non-scaling-stroke; }   /* stretched drawing, even strokes */
.spark-pt { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
            border: 1.5px solid var(--panel); box-sizing: content-box; pointer-events: none; }
.spark-pt[hidden] { display: none; }
.spark-pt-srv { background: var(--srv); } .spark-pt-edge { background: var(--edge); }
.spark-tip { top: auto; bottom: 100%; margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   Drop list (/drop-list) — every confirmed release in one sortable table.
   Two-colour rows and two-colour columns, so a row can be followed across and
   a column read down without losing the place.
   --------------------------------------------------------------------------- */
.dl-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.dl-strip a { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.dl-strip a b { font-variant-numeric: tabular-nums; color: var(--heading); }
.dl-strip a:hover { border-color: var(--blue); }
.dl-strip a.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--panel)); }
.dl-strip .faint { align-self: center; }
.dl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.dl-bar a { color: var(--blue); text-decoration: none; }
.dl-bar a:hover { text-decoration: underline; }
table.droplist { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
table.droplist th { text-align: left; padding: 10px 12px; font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: var(--tint); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.droplist th a { color: inherit; text-decoration: none; }
table.droplist th a:hover, table.droplist th.on a { color: var(--blue); }
table.droplist th .dir { font-size: 10px; margin-left: 3px; }
table.droplist td { padding: 8px 12px; border-top: 1px solid var(--line-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.droplist td.n a { font-family: var(--mono); color: var(--heading); text-decoration: none; }
table.droplist td.n a:hover { color: var(--blue); }
.page table.droplist a { border-bottom: 0; }
.page table.droplist th a { color: inherit; }
.page table.droplist th.on a, .page table.droplist th a:hover { color: var(--blue); }
table.droplist { margin-bottom: 16px; }
table.droplist td.c { font-family: var(--mono); color: var(--pending); }
table.droplist td.r, table.droplist th.r { text-align: right; }
table.droplist tbody tr:nth-child(even) td { background-color: rgba(37, 99, 235, .045); }
table.droplist td:nth-child(even), table.droplist th:nth-child(even) { box-shadow: inset 0 0 0 999px rgba(16, 36, 64, .035); }
table.droplist th.tld, table.droplist td.tld { width: 90px; }
table.droplist th.len, table.droplist td.len { width: 70px; }
table.droplist th.t, table.droplist td.t { width: 215px; }
table.droplist th.c, table.droplist td.c { width: 120px; }
.dl-pages { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.dl-pages a { color: var(--blue); text-decoration: none; }
.dl-pages a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  table.droplist th, table.droplist td { padding: 8px 8px; font-size: 13px; }
  table.droplist .len { display: none; }
  table.droplist th.tld, table.droplist td.tld { width: 62px; }
  table.droplist th.t, table.droplist td.t { width: 128px; }
  table.droplist th.c, table.droplist td.c { width: 84px; }
}

/* ---- One, Two, and Three Syllable Names (/syllables) ---------------- */
.syl-intro { max-width: 760px; margin: -6px 0 18px; }
.syl-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.syl-search input[type=search] {
  flex: 1 1 220px; max-width: 360px; padding: 8px 12px; font: 500 14px/1.3 var(--mono); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.syl-search input[type=search]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.syl-search .btn-outline { padding: 8px 16px; }
.syl-clear { font-size: 13.5px; color: var(--muted); }
.syl-words { margin-left: 8px; font: 500 12.5px/1 var(--sans); color: var(--faint); letter-spacing: .02em; }
table.droplist.syl th.r, table.droplist.syl td.r { width: 86px; }
table.droplist.syl th.st, table.droplist.syl td.st { width: 150px; }
@media (max-width: 700px) {
  /* a phone keeps the name, the extension and the release; the count, the stage pill and the countdown go */
  table.droplist.syl .r, table.droplist.syl .st, table.droplist.syl .c, table.droplist.syl .syl-words { display: none; }
  table.droplist.syl th.t, table.droplist.syl td.t { width: 150px; }
}

/* ---- /v2/status: services, the jobs inside the worker, the journal ---- */
.svc-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.bk.svc .bk-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk.svc .bk-nums dd a { color: var(--blue); text-decoration: none; }
.bk.svc .bk-nums dd a:hover { text-decoration: underline; }
.svc-tail { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ground); border: 1px solid var(--line-soft);
  font: 11px/1.5 var(--mono); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 96px; overflow: hidden; }
.svc-tail span { display: block; }
.jl-warn { color: #8A6400; }
.jl-error { color: #B42B2B; font-weight: 600; }
:root[data-theme="dark"] .jl-warn { color: #F2B807; }
:root[data-theme="dark"] .jl-error { color: #FF7B7B; }
.svc-jobs { display: flex; flex-direction: column; gap: 8px; }
.svc-job { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); background: var(--panel);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svc-job.h-ok { border-left-color: var(--dropped); }
.svc-job.h-warn { border-left-color: #F2B807; }
.svc-job.h-bad { border-left-color: #D93A3A; }
.svc-job.h-off { border-left-color: var(--line); opacity: .8; }
.svc-job-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.svc-job-name { font: 600 14px/1.3 var(--sans); color: var(--heading); }
.svc-job-sum { font-size: 13px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.svc-job-link { margin-left: auto; font-size: 12px; text-decoration: none; }
.svc-job-link:hover { color: var(--blue); }
.svc-facts { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.svc-facts dd { white-space: normal; overflow-wrap: anywhere; }
.svc-job-err { margin: 0; font-size: 12.5px; color: var(--pending); }
.svc-jbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.svc-jbar .ctl-l { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.svc-jbar select, .svc-jbar input[type="text"] { padding: 4px 6px; font: 500 12.5px var(--sans); border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); text-transform: none; letter-spacing: 0; }
.svc-journal { max-height: 520px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.svc-journal span { display: block; }
.svc-host { margin: 0; }
.svc-log td { white-space: nowrap; }
@media (max-width: 700px) {
  .svc-grid { grid-template-columns: 1fr; }
  .bk.svc .bk-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-log td { white-space: normal; }
}

/* ---- /v2 "screen" pages (dashboard, traffic): the layout fills the window
   and every table scrolls inside its own panel. Built for a 16:9 desktop;
   on a short window the rows keep a minimum height and the page scrolls. ---- */
main.admin.screen { flex: 1 1 auto; padding: 14px 20px; display: flex; flex-direction: column; }   /* min-height stays auto: a short window grows the page instead of spilling over the footer */
.screen-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.screen-grid > * { flex: 0 0 auto; }
.screen .admin-head { margin: 0; }
.screen-grid > .fill { flex: 1 1 0; min-height: 300px; display: grid; gap: 14px; }
.screen-grid > .fill.tall { flex-grow: 1.4; min-height: 360px; }
.screen-grid > .fill.live-row { flex-grow: 1.2; }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cols-6 .span-2 { grid-column: span 2; }
.cols-6 .span-3 { grid-column: span 3; }
.fill > .panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.fill > .panel > h2, .fill > .panel > .panel-sub, .fill > .panel > .panel-head { flex: 0 0 auto; }
.panel .pb { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pb thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); box-shadow: 0 1px 0 var(--line-soft); }
.pb table { margin-bottom: 0; }
.tiles-strip { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.tiles-strip .tile { padding: 10px 12px; gap: 3px; }
.tiles-strip .tile-n { font-size: 22px; }
.tiles-strip .tile-n.small { font-size: 15px; line-height: 22px; }
.tiles-strip .tile-l { font-size: 10.5px; }
.tiles-strip .tile-sep { box-shadow: var(--shadow), -8px 0 0 -6px var(--line); }
.strip-note { margin: 6px 0 0; }
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex: 1 1 auto; min-height: 0; }
.twin-col { display: flex; flex-direction: column; min-height: 0; }
.twin-col .eyebrow { flex: 0 0 auto; margin: 0 0 6px; }
.pager-inline { margin-left: 10px; display: inline-flex; gap: 6px; vertical-align: middle; }
.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-row > details { margin: 0; }
.chart-panel .bars { height: 150px; margin-bottom: 6px; }
.blocking h3 { margin: 14px 0 6px; font: 600 13px/1.3 var(--sans); color: var(--heading); }
.blocking .pb > h3:first-child { margin-top: 0; }
.blocking .pb > table { margin-bottom: 6px; }
.dash-grid > .fill.cols-4 { grid-template-columns: 0.8fr 1.4fr 1.2fr 1.2fr; }
.screen-grid > .fill.live-row { flex-grow: 1.6; }

/* A line the operator added on /v2/content → Wording (lib/wording.php). It
   takes the look of the text around it: no margins of its own on the result
   page and the hero (they space their blocks with gap), a paragraph's on the
   plain pages, the full width in the grid under "How a .com drops". */
.wm-extra { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: 70ch; }
.wm-extra a { color: var(--blue); }
.hero .wm-extra { margin-inline: auto; font-size: 17px; color: var(--muted); }
.page .wm-extra { margin: 0 0 16px; }
.legend-inner > .wm-extra { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   /v2/content → Wording (lib/wording.php): one row per line — what it is and
   where it shows on the left, the words on the right.
   --------------------------------------------------------------------------- */
.wd [hidden] { display: none !important; }
.wd-pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13.5px; }
.wd-pick label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--heading); }
.wd-pick select {
  min-width: 300px; padding: 8px 10px; font: 500 14px var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px;
}
.wd-pick select:focus { outline: none; border-color: var(--focus); }
.wd-long-note .pill { margin-left: 6px; }
.wd-row { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 8px 28px; padding: 16px 0 16px 10px; border-top: 1px solid var(--line-soft); }
.wd-row.is-dirty { box-shadow: inset 3px 0 0 #E0A800; }
.wd-label label { display: block; font: 600 14.5px/1.3 var(--sans); color: var(--heading); }
.wd-where { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.wd-tags { margin: 8px 0 0; display: flex; gap: 6px; flex-wrap: wrap; }
.wd-when { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); }
.wd-field { min-width: 0; display: grid; grid-template-columns: minmax(0, 1000px) auto; gap: 0 12px; align-items: start; justify-content: start; }
.wd-btns { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 128px; }
.wd-btns:empty { display: none; }
.wd-under { grid-column: 1; min-width: 0; }
.wd-vars { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.wd-field input, .wd-field textarea {
  width: 100%; max-width: 1000px; padding: 9px 12px; font: 400 14.5px/1.5 var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); resize: vertical;
}
.wd-field input:focus, .wd-field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.wd-field input::placeholder, .wd-field textarea::placeholder { color: var(--faint); font-style: italic; }
.wd-row.is-dirty input, .wd-row.is-dirty textarea { border-color: #E0A800; }
.wd-row.has-error input, .wd-row.has-error textarea { border-color: #D93A3A; }
.wd-var { padding: 4px 7px; font: 500 12.5px/1 var(--mono); color: var(--blue); background: var(--tint); border: 1px dashed color-mix(in srgb, var(--blue) 45%, transparent); border-radius: 5px; cursor: pointer; }
.wd-var:hover { border-style: solid; }
.wd-preview, .wd-default { margin: 8px 0 0; max-width: 1000px; font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.wd-default { color: var(--muted); }
.wd-preview a { color: var(--blue); }
.wd-preview code { font: 500 12.5px var(--mono); }
.wd-cap { display: inline-block; margin-right: 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.wd-ph { color: var(--blue); text-decoration: underline dotted; text-underline-offset: 3px; }
.wd-hist { margin-top: 8px; max-width: 1000px; font-size: 13px; }
.wd-hist summary { cursor: pointer; color: var(--muted); }
.wd-hist ul { list-style: none; margin: 6px 0 0; padding: 0; }
.wd-hist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.wd-hist-t { overflow-wrap: anywhere; color: var(--ink); }
.wd-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 0; padding: 12px 0 2px; background: var(--panel); border-top: 1px solid var(--line); }
.wd-dirty { font-weight: 600; color: #8A6400; }
:root[data-theme="dark"] .wd-dirty { color: #F2B807; }

/* ---------------------------------------------------------------------------
   /v2/content → robots.txt (lib/robots.php): the bots by company, a choice per
   bot, and the file before and after.
   --------------------------------------------------------------------------- */
.rb-status { margin: 0 0 14px; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rb-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; font-size: 13px; }
.rb-cap { margin: 0 4px 0 0; font: 600 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.rb-preset.rb-recommended { border-width: 2px; }
.rb-rec { margin: 0 0 12px; font-size: 13px; max-width: 110ch; }
.rb-table { width: 100%; font-size: 13px; table-layout: auto; }
.panel .rb-table td { vertical-align: middle; }
.rb-table th:nth-child(1) { width: 250px; }
.rb-table th:nth-child(3) { width: 130px; }
.rb-table th:nth-child(4) { width: 100px; }
.rb-table th:nth-child(5), .rb-table th:nth-child(6) { width: 90px; }
.rb-table th:nth-child(7), .rb-choice { width: 1%; }
.rb-ok { color: var(--dropped); font-weight: 600; }
.rb-co-row th { padding: 16px 0 6px !important; font: 700 12px/1 var(--sans) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--heading) !important; }
.rb-tok code { display: block; font: 600 13px var(--mono); color: var(--heading); }
.rb-kind { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.rb-kind.k-search { color: var(--dropped); }
.rb-kind.k-ai-search, .rb-kind.k-fetch { color: var(--blue); }
.rb-kind.k-training, .rb-kind.k-switch { color: #8A6400; }
:root[data-theme="dark"] .rb-kind.k-training, :root[data-theme="dark"] .rb-kind.k-switch { color: #F2B807; }
.rb-kind.k-seo, .rb-kind.k-data { color: var(--pending); }
.rb-kind.k-old { color: var(--faint); font-style: italic; }
.rb-what { line-height: 1.45; color: var(--ink); }
.rb-warn { color: var(--pending); font-weight: 600; }
.rb-choice { white-space: nowrap; }
.rb-opt { display: inline-flex; align-items: center; gap: 4px; margin: 2px 1px; padding: 5px 9px; font-size: 12.5px; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.rb-opt input[type=radio] { margin: 0; }
.rb-opt.on { color: var(--blue); background: var(--tint); border-color: var(--blue); font-weight: 600; }
.rb-opt.off { opacity: .4; cursor: not-allowed; }
.rb-delay { width: 44px; padding: 2px 4px; font: 500 12px var(--mono); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 5px; }
.rb-tok input[type=text] { width: 100%; max-width: 230px; padding: 6px 8px; font: 500 13px var(--mono); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 6px; }
.rb-tok input[type=text]::placeholder { color: var(--faint); font-style: italic; }
.rb-extra { margin: 18px 0 0; }
.rb-extra label { display: block; margin-bottom: 6px; font: 600 13.5px var(--sans); color: var(--heading); }
.rb-extra textarea { width: 100%; max-width: 1000px; padding: 9px 12px; font: 400 13px/1.5 var(--mono); color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
.rb-problems { margin: 12px 0 0; padding-left: 18px; font-size: 13px; font-weight: 600; color: var(--pending); }
.rb-files { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.rb-pre { margin: 6px 0 0; padding: 12px 14px; max-height: 560px; overflow: auto; white-space: pre-wrap; font: 400 12.5px/1.5 var(--mono); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); }
.rb-add { background: color-mix(in srgb, #12A150 18%, transparent); }
.rb-changes { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.rb-changes li.rb-bad { color: var(--pending); font-weight: 600; }
.rb-hist li { align-items: flex-start; }
.rb-hist details { min-width: 0; flex: 1 1 auto; }
.rb-hist summary { cursor: pointer; }

/* ---------------------------------------------------------------------------
   /v2/traffic — people only (lib/people.php), laid out after OpenPanel:
   tiles that pick the chart's number, one line chart, then boxes. 4K screen.
   --------------------------------------------------------------------------- */
.pp .admin-head { align-items: center; }
.pp-online { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: 600 12.5px/1 var(--sans); color: var(--muted); }
.pp-online b { color: var(--heading); font: 600 14px/1 var(--mono); }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: #12A150; display: inline-block; box-shadow: 0 0 0 3px color-mix(in srgb, #12A150 22%, transparent); }

.pp-tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 2.1fr); gap: 10px; }
.pp-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; padding: 10px 14px 6px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); font: inherit; color: inherit; cursor: pointer; }
.pp-tile:hover { border-top-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.pp-tile.on { border-top-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--panel)); }
.pp-tl { font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-tn { font: 600 26px/1.05 var(--mono); color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-tc { font: 600 12px/1 var(--mono); color: var(--faint); min-height: 12px; white-space: nowrap; }
.pp-tc.good { color: #0F7A45; }
.pp-tc.bad  { color: #C2410C; }
:root[data-theme="dark"] .pp-tc.good { color: #4FC98A; }
:root[data-theme="dark"] .pp-tc.bad  { color: #F08256; }
.pp-spark { width: 100%; height: 24px; display: block; }
.pp-sp { fill: none; stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .8; }
.pp-live { cursor: default; }
.pp-l30 { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 3px; min-height: 50px; padding-top: 4px; }
.pp-l30 i { flex: 1 1 0; background: var(--blue); border-radius: 2px 2px 0 0; opacity: .85; }
.pp-l30 i.z { height: 2px !important; background: var(--line); opacity: 1; }
.pp-partial { margin: -6px 0 0; font-size: 12.5px; }

.pp-chart-panel { padding-bottom: 10px; }
.pp-chart { position: relative; height: 236px; }
.pp-svg { display: block; }
.pp-grid { stroke: var(--line); stroke-dasharray: 3 4; opacity: .8; }
.pp-ax { font: 500 11px var(--mono); fill: var(--faint); }
.pp-line { fill: none; stroke: var(--blue); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pp-line-part { stroke-dasharray: 2 5; }
.pp-line-prev { fill: none; stroke: var(--faint); stroke-width: 1.5; opacity: .5; stroke-linejoin: round; }
.pp-line-est { fill: none; stroke: #B45309; stroke-width: 1.75; stroke-dasharray: 6 5; opacity: .85; stroke-linejoin: round; }
:root[data-theme="dark"] .pp-line-est { stroke: #E0A45C; }
.pp-pt { fill: var(--panel); stroke: var(--blue); stroke-width: 2; }
.pp-hot { fill: var(--blue); stroke: var(--panel); stroke-width: 2; }
.pp-guide { stroke: var(--muted); stroke-width: 1; opacity: .45; }
.pp-since { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .65; }
.pp-since-t { font-family: var(--sans); font-size: 11px; }
.pp-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 180px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(16,36,64,.18); font-size: 12.5px; line-height: 1.65; color: var(--ink); white-space: nowrap; }
.pp-tip b { color: var(--heading); }
.pp-key { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid var(--blue); vertical-align: middle; margin: 0 2px 0 10px; }
.pp-tip .pp-key { margin-left: 0; }
.pp-key-prev { border-top: 2px solid color-mix(in srgb, var(--faint) 55%, transparent); }
.pp-key-est { border-top: 2px dashed #B45309; }
:root[data-theme="dark"] .pp-key-est { border-top-color: #E0A45C; }
.pp-def { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }

.screen-grid > .fill.pp-row { grid-template-columns: 1.15fr 1fr .9fr .9fr; }
.screen-grid > .fill.pp-row2 { grid-template-columns: .8fr .9fr 1.5fr 1fr; }
.pp-t td, .pp-t th { padding-right: 10px; }
.pp-t tbody tr { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent) var(--w, 0%), transparent var(--w, 0%)); }
.pp-t tr.pp-g td { font-weight: 600; }
.pp-t tr.pp-h td:first-child { padding-left: 18px; }
.pp-t td.ellip { max-width: 320px; }
.pp-mini { margin-bottom: 14px; }
.pill-direct { background: var(--line-soft); color: var(--muted); }
.pill-campaign { background: #FFF5E8; color: #B45309; }
:root[data-theme="dark"] .pill-campaign { background: #2A2013; color: #E0A45C; }
.pp-visits { list-style: none; margin: 0; padding: 0; }
.pp-v { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pp-v:first-child { border-top: 0; padding-top: 2px; }
.pp-vhead { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.pp-vt { min-width: 70px; color: var(--muted); font: 500 12px var(--mono); display: inline-flex; align-items: center; gap: 6px; }
.pp-v.live .pp-vt { color: #0F7A45; font-weight: 600; }
:root[data-theme="dark"] .pp-v.live .pp-vt { color: #4FC98A; }
.pp-vn { margin-left: auto; font: 500 12px var(--mono); color: var(--muted); }
.pp-vpath { margin-top: 3px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-v .pill { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.pp-bots-big { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.pp-bots-big b { font: 600 22px/1 var(--mono); color: var(--heading); margin-right: 4px; }
.pp-bt td { padding: 8px 10px 8px 0; }
.pp-bt td:nth-child(2) { font: 600 13.5px var(--mono); }
.pp-bt td.ellip { max-width: 240px; }
.pp-note { margin: 10px 0 0; font-size: 12.5px; }
.pp-empty { margin: 6px 0; }

/* The live feed on /v2/limits: a visitor's lookup — the check their page was
   waiting for — carries a "visitor" tag on its name, whichever node answered
   it. The tag only: no row highlight (Jason, 29 Sep — the tag is enough). */
:root { --visitor: #1E40AF; }
:root[data-theme="dark"] { --visitor: #3B6FE0; }
.live-vtag { display: inline-block; margin-right: 7px; padding: 0 5px; border-radius: 4px; font: 700 10px/16px var(--sans); letter-spacing: .04em;
             text-transform: uppercase; vertical-align: 1px; background: var(--visitor); color: #fff; }
.live-legend { display: inline-flex; align-items: center; margin-left: auto; margin-right: 14px; font-size: 12px; color: var(--muted); }
/* The board is a page of its own height: start it at the top (the site-wide
   main rule centres short pages, which left a band of nothing above it). */
main.admin.board { justify-content: flex-start; }
/* The answered and refused tiles: the total's name, then who did it on a line of its own.
   Each half keeps its dot, so a narrow tile breaks between them, never before a "·". */
.tile-split { display: block; margin-top: 3px; }
.tile-split > span { white-space: nowrap; }

/* A visitor node (a visitor-pool proxy) in the "who" column: visitor blue, not a node's teal —
   it only answers visitors, and it has no card under Matrix. */
.live-who.live-pool { color: var(--visitor); }
:root[data-theme="dark"] .live-who.live-pool { color: #9DB8FF; }

/* Config → Confirm departures: what each named registry or TLD matches today. */
.cfg-matches { display: flex; flex-direction: column; gap: 2px; }
.cfg-match code { font-size: 12px; }

/* Content → Look and feel → Site icon (35) */
.icon-panel { margin-top: 16px; }
.icon-panel h2 { margin: 0 0 8px; font-size: 16px; }
.icon-cur { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 8px; }
.icon-cur img { flex: 0 0 auto; image-rendering: auto; }
.icon-cur .icon-small { image-rendering: pixelated; }
.icon-none { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 10px; border: 1px dashed var(--line); background: var(--line-soft); }
.icon-meta { font-size: 13px; line-height: 1.5; color: var(--muted); }
.icon-meta b { color: var(--ink); }
.icon-cur .inline-form { margin-left: auto; }
.icon-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.icon-choose { display: inline-flex; align-items: center; padding: 8px 12px; }
.icon-choose input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.icon-choose:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon-preview { margin-top: 14px; }
.icon-sizes { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.icon-size { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); }
.icon-size canvas { background: repeating-conic-gradient(var(--line-soft) 0 25%, transparent 0 50%) 0 0 / 8px 8px; border-radius: 3px; }
.icon-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.icon-msg.bad { color: var(--pending); }

/* ---- /v2/members (deploy 52) -------------------------------------------- */
/* The page starts at the top: the site-wide main rule centres short pages, which
   left a band of nothing above the heading (as main.admin.board does for Limits). */
main.admin.admin-top { justify-content: flex-start; }
/* One row per account, every cell centred top to bottom: a cell of two lines (a
   date and its address) and a cell holding a button line up through the middle. */
.panel table.mem-table td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.mem-table td.mem-manage { text-align: right; padding-right: 0; }
.mem-table tr.mem-edit td { border-top: 0; padding: 0 0 14px; }
.mem-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 12px 14px;
             border: 1px solid var(--line); border-radius: var(--radius); background: var(--tint); white-space: normal; }
.mem-tool { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.mem-tool label { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mem-tool input, .mem-find input {
  height: 30px; box-sizing: border-box; padding: 0 9px; font: 400 13.5px var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px;
}
.mem-tool input[type=email] { width: 300px; }
.mem-tool input[type=text] { width: 210px; }
.mem-find input { width: 220px; }
.mem-tool input:focus, .mem-find input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.mem-tool .btn-small, .mem-find .btn-small, .mem-manage .btn-small { height: 30px; }
.mem-delete { margin-left: auto; }
/* the New accounts switch */
.mem-switch form { display: flex; align-items: center; gap: 16px; margin: 0; }
.mem-switch .bc-switch { flex: none; min-width: 112px; }
.mem-switch-text { font-size: 14px; line-height: 1.5; color: var(--muted); }
.mem-switch-text b { color: var(--heading); }
.mem-switch.is-closed { border-color: color-mix(in srgb, var(--pending) 45%, var(--line)); }
.mem-switch.is-closed .bc-sw-off { color: var(--pending); }

/* ---- the lookups booked, 30 days (58): one row per kind, one column per day, page-wide above the zone files.
   The All row's cells are tinted by how full the day is against the busiest of the 30. */
.sched-panel { overflow-x: auto; }
.panel table.sched { table-layout: fixed; width: 100%; min-width: 1500px; font-size: 13px; font-variant-numeric: tabular-nums; }
.panel table.sched th, .panel table.sched td { padding: 6px 5px; white-space: nowrap; }
.panel table.sched thead th { font: 600 12px/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); vertical-align: bottom; }
.panel table.sched thead th span { display: block; font: 600 10.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.panel table.sched thead th.we span { color: var(--muted); }
.panel table.sched .sched-l { width: 150px; padding-left: 0; text-align: left; }
.panel table.sched tbody th.sched-l { font: 600 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--heading); padding-top: 7px; border-top: 1px solid var(--line-soft); }
.panel table.sched tbody th.sched-l .faint { font-weight: 400; }
.panel table.sched .sched-t { width: 92px; padding-left: 12px; font-weight: 600; border-left: 1px solid var(--line); }
.panel table.sched tr.sched-all td { font-weight: 600; color: var(--heading); background: color-mix(in srgb, var(--blue) calc(var(--h, 0) * 26%), transparent); }
.panel table.sched tr.sched-all td.sched-t { background: none; }
.panel table.sched td.faint { color: var(--faint); font-weight: 400; }
.sched-panel .panel-head .faint { font-size: 13px; }

/* ---- the members' list: a member's Gravatar picture beside the name (62) */
.mem-av { width: 22px; height: 22px; margin-right: 8px; vertical-align: -6px; border-radius: 50%; object-fit: cover; }

/* /v2/cron (92): every scheduled job, one row each; the Daily 10's ten; the system's crontab */
.cron-table td.cron-what, .cron-table td.cron-result, .cron-picks-table td.cron-why, .cron-runs-table td.cron-why { white-space: normal; max-width: 420px; }
.cron-table td.cron-job { white-space: nowrap; }
.cron-table td.cron-job .pill { margin-right: 6px; }
.cron-table td.cron-sched { max-width: 220px; white-space: normal; color: var(--muted); }
.cron-picks { margin-top: 18px; }
.cron-picks h3 { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; font: 600 14px/1.3 var(--sans); }
.cron-picks-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 6px; font-size: 13px; }
.cron-picks-bar .inline-form { display: inline-flex; align-items: baseline; gap: 10px; }
.cron-picks-table tr.pulled td { color: var(--faint); text-decoration: line-through; }
.cron-picks-table tr.pulled td.r, .cron-picks-table tr.pulled td:nth-child(2) { text-decoration: none; }
.cron-sys-table code { font-size: 12px; }

/* ---- /v2/sales (deploy 98): the names for sale, their offers, the Escrow.com account ---- */
.sales-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 20px; align-items: end; }
.sales-grid label, .sales-add label, .sales-add-row label, .sales-filter label { display: flex; flex-direction: column; gap: 5px; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.sales-grid input, .sales-add textarea, .sales-add-row input, .sales-table input, .sales-table select, .sales-filter select {
  box-sizing: border-box; padding: 0 9px; font: 400 13.5px var(--sans); color: var(--ink); background: var(--ground);
  border: 1px solid var(--line); border-radius: 6px; height: 30px; letter-spacing: 0; text-transform: none;
}
.sales-grid input { width: 100%; }
.sales-add textarea { height: auto; min-height: 72px; padding: 7px 9px; width: 100%; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
.sales-grid input:focus, .sales-add textarea:focus, .sales-add-row input:focus, .sales-table input:focus, .sales-table select:focus, .sales-filter select:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}
.sales-switch { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; font-size: 13px; }
.sales-switch .bc-switch { min-width: 112px; }
.sales-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sales-actions .btn-small[disabled] { opacity: .5; cursor: default; }
.sales-add { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.sales-add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; font-size: 13px; }
.sales-add-row input[type=text] { width: 90px; }
.sales-add-row input[type=date] { width: 150px; }
.sales-add-row .btn-small { height: 30px; }
.sales-add-row .faint { flex: 1 1 320px; font-size: 12.5px; line-height: 1.45; }
.panel table.sales-table td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.sales-table input.num { width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.sales-table input.note { width: 220px; }
.sales-table input[type=date] { width: 140px; }
.sales-table select { padding-right: 4px; }
.sales-table .mem-manage { white-space: nowrap; }
.sales-table .mem-manage .btn-small { height: 30px; }
.sales-offers td:nth-child(9) { white-space: normal; }
.sales-offers td:nth-child(9) select { margin-bottom: 4px; }
.sales-msg { margin-top: 4px; max-width: 320px; white-space: normal; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sales-filter { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.sales-sort { color: inherit; text-decoration: none; }
.sales-sort:hover { color: var(--blue); text-decoration: none; }
.sales-sort.on { color: var(--heading); }
.sales-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.sales-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.sales-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 14px; margin: 0 0 12px; }
#offers .sales-bar { justify-content: space-between; align-items: flex-end; }
.sales-bar .btn-small { height: 30px; }
.sales-escrow .eyebrow, #listings .eyebrow, #offers .eyebrow { margin: 0 0 10px; }