/* ============================================================
   le dns — control plane UI
   Design tokens lifted from site/assets/css/main.css so customer
   dashboards feel like the marketing site. Scope is deliberately
   smaller: tokens, forms, tables, cards, badges, tabs, copy-code.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg:        #0a0a0a;
  --bg-card:   #111111;
  --bg-code:   #1a1a1a;
  --text:      #e0e0e0;
  --text-dim:  #888888;
  --accent:    #00ff88;
  --accent-dim:#00cc6a;
  --blue:      #0070f3;
  --purple:    #8b5cf6;
  --blue-text: #5ca7ff;
  --purple-text: #a78bfa;
  --border:    #222222;
  --err:       #ff4d6d;
  --danger-button-bg: #c51f3f;
  --warn:      #ffbb33;
  --glow:      rgba(0, 255, 136, 0.15);
  --info:      #5ca7ff;
  --surface-raised: #151515;
  --focus-ring: rgba(0, 255, 136, 0.42);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-glow: 0 10px 30px rgba(0, 255, 136, 0.12);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --portal-logo-height: 36px;
  --header-padding-block: 1rem;
  --header-padding-inline: 2rem;
  --header-border-width: 1px;
  --sticky-header-offset: calc(
    var(--portal-logo-height) + var(--header-padding-block) +
    var(--header-padding-block) + var(--header-border-width)
  );
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Admin tables deliberately scroll inside labelled table regions. Chromium's
 * root scroll metrics can otherwise expose a second, unusable page-level
 * scrollbar for clipped table cells. Keep that overflow local to the region. */
html:has([data-admin-page]) { overflow-x: clip; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  /* Sticky footer: main flexes, footer hugs the viewport bottom on
   * short pages instead of leaving a dead black band below it. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* ── Header (shares the protected site's visual language) ─── */
header {
  container-type: inline-size;
  border-bottom: 1px solid var(--border);
  padding: var(--header-padding-block) var(--header-padding-inline);
  position: sticky;
  top: 0;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  height: var(--portal-logo-height);
  width: auto;
}
.logo span { color: var(--text-dim); }

.brand {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
}
.brand span { color: var(--text-dim); }

nav { display: flex; gap: 2rem; align-items: center; }
.nav-toggle {
  display: none;
  background: var(--bg-code);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font: 600 0.8rem var(--font-mono);
}
nav .nav-logout {
  display: inline-flex;
  margin: 0;
  gap: 0;
}
nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}
nav a:hover { color: var(--accent); }
nav a.active { color: var(--accent); }

/* ── Main content ───────────────────────────────────────────── */
/* Let the app panel use most of the viewport on laptops + small
 * desktops; cap at 1700px for 4K+ displays so line lengths stay
 * comfortable. 5vw side padding on mid/small screens keeps things
 * from hugging the window edge. */
main {
  max-width: 1700px;
  margin: 0 auto;
  padding: 2.5rem 5vw;
}
@media (min-width: 1400px) {
  main { padding: 2.5rem 3rem; }
}
h1 {
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
h2 {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--accent);
  margin: 2rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Keep the terminal prompt visual decorative. The empty alternative prevents
 * generated punctuation from polluting screen-reader heading names. */
h2::before { content: '>' / ''; opacity: 0.5; }
h3 { font-size: 1.1rem; color: var(--text); margin: 1.25rem 0 0.75rem; }
p  { color: var(--text-dim); margin-bottom: 1rem; }
p strong { color: var(--text); }
.subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 2rem; }
.muted { color: var(--text-dim); font-size: 0.875rem; }
.page-header { margin-bottom: var(--space-8); }
.page-header h1 { overflow-wrap: anywhere; }
.page-kicker {
  margin-bottom: var(--space-2);
  color: var(--text-dim);
  font: 600 0.75rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-shell { max-width: 540px; margin: 2rem auto 4rem; }
.auth-card { padding: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow-sm); }
.auth-card form { gap: 1rem; }
.auth-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 1rem; }
.portal-intro { max-width: 780px; margin: 2.5rem auto 4rem; text-align: center; }
.portal-intro .subtitle { max-width: 650px; margin-inline: auto; }
.portal-actions { justify-content: center; }
.actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.field-wide { max-width: 420px; }
.field-code { max-width: 220px; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.align-end { align-self: flex-end; }
.indent-help { margin-left: 1.7rem; }
.unbulleted { list-style: none; margin-left: 0; }
.screen-reader-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 255, 136, 0.25); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}
.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.secondary:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn.danger { background: var(--danger-button-bg); color: #fff; }
.btn.danger:hover { box-shadow: 0 4px 12px rgba(255, 77, 109, 0.25); }

/* ── Forms ──────────────────────────────────────────────────── */
form { display: grid; gap: 0.75rem; }
label, .credential-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.credential-label { margin: var(--space-3) 0 var(--space-1); }
input[type=email], input[type=password], input[type=text], input[type=search],
input[type=datetime-local], input[type=number], select, textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.58; cursor: not-allowed; }
.link-button {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }
/* The .error class is used by both static form-field hints (small,
 * inline under an input) AND the global htmx error surface from
 * base.html (form-wide alert that the user can't miss). Give the
 * role=alert variant visual weight — the pre-fix version was a
 * 0.8rem red muted line at the top of the card that customers
 * reported as "no feedback". */
/* Nameserver list on the zone-detail Settings tab: one NS per line,
 * code-monospace, with a copy button pushed to the right. Vertical
 * list is deliberate — typing one NS at a time is the registrar UX
 * anyone setting this up is doing in parallel with another tab. */
.ns-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}
.ns-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--border);
}
.ns-list li:last-child { border-bottom: none; }
.ns-list li code { flex: 1; }

.error { color: var(--err); font-size: 0.8rem; }
.error[role="alert"] {
  font-size: 0.95rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--err);
  background: rgba(255, 77, 109, 0.08);
  border-radius: 0 4px 4px 0;
  font-weight: 500;
}
.status {
  margin: 0.75rem 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--info);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(92, 167, 255, 0.08);
  color: var(--text);
}
.status-success { border-left-color: var(--accent); background: rgba(0, 255, 136, 0.08); }
.status-warning { border-left-color: var(--warn); background: rgba(255, 187, 51, 0.08); }
.status-error { border-left-color: var(--err); background: rgba(255, 77, 109, 0.08); }
.loading-state { display: flex; align-items: center; gap: 0.7rem; color: var(--text-dim); }
.loading-state::before {
  content: '';
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: portal-spin 0.8s linear infinite;
}
@keyframes portal-spin { to { transform: rotate(360deg); } }
/* align-items: flex-start (not center) — fields in a row carry
 * label + control + helper text of different heights; centering
 * pushes labels off a shared baseline and looks broken. */
.row { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }

/* A form field: label on top, control, optional helper underneath.
 * Keeps every form on the same vertical rhythm. */
.field { display: grid; gap: 0.35rem; align-content: start; }
.field small, .field-help, .field-hint {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
}
.field-hint { margin: 0; }

/* Buttons inside grid forms stretch to the full column width by
 * default — a submit button as wide as the page reads as a banner,
 * not an action. Keep them content-sized. */
form .btn { justify-self: start; width: fit-content; }

/* Warning banner (one-time secrets, copy-now prompts). Token-based —
 * no per-template hex values. */
.banner-warn {
  border: 1px solid var(--warn);
  border-left-width: 3px;
  background: rgba(255, 187, 51, 0.08);
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1rem 0;
}
.banner-warn h3 { margin-top: 0; color: var(--warn); }
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  background: rgba(92, 167, 255, 0.06);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 1rem 0;
}
.callout-success { border-left-color: var(--accent); background: rgba(0,255,136,0.06); }
.callout-warning { border-left-color: var(--warn); background: rgba(255,187,51,0.06); }
.callout-danger { border-left-color: var(--err); background: rgba(255,77,109,0.06); }
.callout h2, .callout h3 { margin-top: 0; }

/* ── Tables ─────────────────────────────────────────────────── */
.table-scroll-region {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  /* Below ~640px the narrow columns overlap — let the browser
   * horizontal-scroll the table instead of squashing cells. The
   * wrapping is done at the block level via `display: block;
   * overflow-x: auto` inside the mobile breakpoint. */
}
caption { text-align: left; color: var(--text-dim); padding: 0 0 0.75rem; }
th, td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.875rem;
}
th {
  background: var(--bg-code);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 255, 255, 0.02); }
td.mono { font-family: var(--font-mono); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card-accent { border-color: var(--accent-dim); box-shadow: var(--shadow-glow); }
.card-danger { border-color: rgba(255, 77, 109, 0.45); }
.inset-card { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; }
/* h2 carries a 2rem top margin for in-flow sections; as the first
 * element of a card that reads as misaligned dead space. */
.card > h2:first-child { margin-top: 0; }
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.card-header h2, .card-header h3 { margin: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--border);
  margin-bottom: 1.5rem;
}
.plan-summary > div { background: var(--bg-card); padding: 1rem 1.15rem; }
.plan-summary dt { color: var(--text-dim); font: 600 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.plan-summary dd { margin-top: 0.3rem; color: var(--text); font-size: 1rem; }
.plan-summary dd strong { color: var(--accent); font-family: var(--font-mono); }
.pricing-header { max-width: 780px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.pricing-card {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
}
.pricing-card-highlight { border-color: var(--accent-dim); box-shadow: var(--shadow-glow); }
.pricing-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.pricing-card-header h2 { margin: 0; }
.pricing-price { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; margin: var(--space-6) 0; }
.pricing-price strong { color: var(--text); font: 700 1.7rem var(--font-mono); }
.pricing-price span { color: var(--text-dim); font-size: .8rem; }
.price-base { margin-top: -.5rem; font-size: .8rem; }
.price-estimator-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.price-estimator-fields > div { min-width: 0; }
.price-estimator-fields label { display: block; margin-bottom: var(--space-2); }
.price-estimator-fields input, .price-estimator-fields select { width: 100%; min-width: 0; }
#pricing-estimate-status { overflow-wrap: anywhere; }
@media (max-width: 640px) { .price-estimator-fields { grid-template-columns: 1fr; } }
.pricing-capacity { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.pricing-capacity div { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.pricing-capacity dt { color: var(--text-dim); font-size: .78rem; }
.pricing-capacity dd { color: var(--accent); font: 600 .8rem var(--font-mono); text-align: right; }
.feature-list { margin: 0; padding: 0; list-style: none; color: var(--text-dim); }
.feature-list li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-2); font-size: .86rem; }
.feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.pricing-actions { margin: var(--space-8) 0; }
.billing-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.billing-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.billing-address-grid [hidden] { display: none; }
#billing-hold-form[hidden] { display: none; }
@media (max-width: 600px) { .billing-address-grid { grid-template-columns: 1fr; } }
.billing-plan-option h3 { margin-top: 0; }
.billing-option-price strong { color: var(--accent); font: 700 1.2rem var(--font-mono); }

@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-plan-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── Badges / pills ─────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tag.ok      { border-color: var(--accent-dim); color: var(--accent); }
.tag.blue    { border-color: var(--blue);       color: var(--blue-text); }
.tag.purple  { border-color: var(--purple);     color: var(--purple-text); }
.tag.warn    { border-color: var(--warn);       color: var(--warn); }
.tag.danger  { border-color: var(--err);        color: var(--err); }
.tag.plan { vertical-align: middle; margin-left: .4rem; }

/* ── Tabs (used on zone_detail) ─────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 1.5rem 0 1rem;
}
.tabs a, .tabs button {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 0.75rem 1.25rem;
  border-bottom: 2px solid transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.active, .tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .9rem;
  letter-spacing: normal;
  text-transform: none;
}
.checkbox input { width: auto; margin-top: .25rem; accent-color: var(--accent); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
legend { padding: 0 var(--space-2); color: var(--text); font: 600 .8rem var(--font-mono); }
input[type="file"] { color: var(--text-dim); font: .85rem var(--font-mono); }
input[type="file"]::file-selector-button {
  margin-right: var(--space-3);
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-code);
  color: var(--text);
  cursor: pointer;
}
.backup-codes { columns: 2; list-style: none; margin-left: 0; }
.backup-codes li { margin-bottom: var(--space-2); }
.details-list {
  display: grid;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
}
.details-list > div { display: contents; }
.details-list dt {
  color: var(--text-dim);
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.details-list dd { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.break-all { overflow-wrap: anywhere; word-break: break-all; }

/* ── Zone detail: left sidebar layout ───────────────────────── */
.zone-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
  align-items: start;
  max-width: 100%;
}
/* Grid items default to min-width:auto, which is the intrinsic
 * minimum content size. On narrow viewports that means a wide
 * record-editor form forces .zone-main to 900+ px — overflowing
 * the viewport and trigging horizontal scroll. min-width:0 lets
 * the grid cell actually shrink to the column width. Same reason
 * we set it on .zone-sidebar (long tier-badge labels). */
.zone-layout > * {
  min-width: 0;
}
.zone-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid var(--border);
  padding-right: 1rem;
  position: sticky;
  top: calc(var(--sticky-header-offset) + var(--space-4));
  max-width: 100%;
}
.zone-main {
  min-width: 0;
  max-width: 100%;
}
.zone-layout.capability-pending [data-primary-only],
.zone-layout[data-zone-mode="secondary"] [data-primary-only],
.zone-layout[data-zone-mode="unknown"] [data-primary-only] {
  display: none;
}
.notice {
  border-left: 3px solid var(--accent);
  background: rgba(0, 255, 136, 0.06);
  padding: 0.75rem 0.95rem;
  margin: 0.75rem 0 1rem;
}
.mode-state:empty {
  display: none;
}
.zone-sidebar a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 0.55rem 0.85rem;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: all 0.12s;
  /* Full-width + flex row so the label hugs the left edge and the
   * tier badge sits at the far right via margin-left: auto. Without
   * width:100% the <a> shrinks to fit-content and both label and
   * badge glue together against the left edge. */
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  white-space: nowrap;
}
/* Push tier badges to the far right + breathing room from the label. */
.zone-sidebar a .tag {
  margin-left: auto;
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  letter-spacing: 0.02em;
}
.zone-sidebar a:hover {
  color: var(--text);
  text-decoration: none;
  background: var(--bg-code);
}
.zone-sidebar a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--bg-code);
}
.zone-main > section { margin-top: 0; }

@media (max-width: 800px) {
  .zone-layout {
    grid-template-columns: 1fr;
  }
  .zone-sidebar {
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 0.5rem;
    position: static;
  }
  .zone-sidebar a {
    border-left: none;
    border-bottom: 2px solid transparent;
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
  .zone-sidebar a.active {
    border-left: none;
    border-bottom-color: var(--accent);
  }
  /* The zone layout collapses at this breakpoint, before the global mobile
   * table rule applies. Keep intrinsically wide DNS record tables inside the
   * zone panel on tablets instead of creating page-level horizontal scroll. */
  .zone-main table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .zone-main table thead,
  .zone-main table tbody {
    display: table;
    width: 100%;
  }
}

/* Authenticated navigation has more entries than the public shell. Collapse
 * it before its measured desktop row exceeds the available tablet width. */
@media (max-width: 900px) {
  :root {
    --header-padding-block: 0.75rem;
    --header-padding-inline: 1rem;
  }
}
/* Container width also follows CSS zoom, unlike viewport media queries. */
@container (max-width: 868px) {
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
  }
  .nav-toggle { display: inline-flex; }
  nav {
    grid-column: 1 / -1;
    gap: 1rem;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0.75rem 0 0.25rem;
  }
  nav.open { display: flex; }
  nav a, nav .nav-logout, nav .nav-logout .btn { width: 100%; }
  nav a, nav .nav-logout .btn { padding: .45rem 0; text-align: left; }
  nav a, nav button {
    white-space: nowrap;
    font-size: 0.85rem;
  }
}

/* ── Mobile (< 640px) — phone + narrow tablet ───────────────── */
@media (max-width: 640px) {

  main {
    padding: 1.25rem 1rem;
  }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.1rem; }

  /* Tables: horizontal scroll rather than squash. The wrapping
   * <div> pattern is typical; since templates render raw <table>,
   * let the table itself scroll. `display: block` enables
   * overflow-x on the table element. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* tbody/thead need the matching treatment or rows will collapse. */
  table thead, table tbody { display: table; width: 100%; }

  /* Forms with `.row` wrappers — stack instead of side-by-side. */
  .row { flex-direction: column; align-items: stretch; }
  .row > div, .row > * { min-width: 0 !important; width: 100%; }

  /* Card padding looser at mobile is wasted space. */
  .card { padding: 1rem; }
  .credential-row {
    align-items: stretch;
    flex-direction: column;
  }

  /* Buttons that were full-width forms (login, register) stay so. */
  .btn { padding: 0.65rem 1rem; }
}

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

/* ── Code & pre (copy-to-clipboard friendly) ────────────────── */
code {
  font-family: var(--font-mono);
  background: var(--bg-code);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.875em;
}
pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  position: relative;
}
pre code { background: none; padding: 0; color: var(--text); }

/* ── Secret reveal (TSIG secrets, API keys) ─────────────────── */
.secret {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.secret .value {
  flex: 1;
  min-width: 0;
  color: var(--accent);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  user-select: all;
}
.secret .value.manual-copy { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.secret-value-wrap {
  display: block;
  width: 100%;
  padding: .75rem;
  overflow-wrap: anywhere;
  user-select: all;
}
.secret-actions { display: flex; flex: 0 0 auto; gap: var(--space-2); flex-wrap: wrap; }
.secret-actions .btn { padding: 0.4rem 0.65rem; }
.secret-status { margin: var(--space-2) 0 0; min-height: 1.4rem; }
.secret.cleared .value { color: var(--text-dim); }
.one-time-secret-stack { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.one-time-secret-group { min-width: 0; }
.field-label { margin-bottom: var(--space-2); font-weight: 600; }

.credential-list {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.credential-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-code);
}
.credential-row p {
  margin: 0.25rem 0 0;
}

/* ── Footer (verbatim from site/assets/css/main.css) ────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem;
  text-align: center;
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}
.footer-links {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
}
.footer-links a:hover { color: var(--accent); }
.copyright {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.made-with {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Legal links — last row of the single footer, separated by a thin
 * rule. Replaces the old second <footer> whose extra border + padding
 * produced a detached dead band at the bottom of every page. */
.legal-links {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
}
.legal-links a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.legal-links a:hover { color: var(--accent); text-decoration: underline; }

/* ── Utilities ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.spacer { flex: 1; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.flex { display: flex; gap: 0.75rem; align-items: center; }

/* Zone workspace primitives. Kept above the isolated admin block. */
.field-narrow { min-width: 80px; }
.field-compact { min-width: 100px; }
.field-medium { min-width: 140px; }
.field-wide { min-width: min(200px, 100%); }
.field-number { max-width: 90px; min-width: 72px; }
.small-copy { font-size: 0.85em; }
.zone-import-text {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.85em;
}
.zone-action-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.zone-code-wrap { overflow-wrap: anywhere; word-break: break-word; }
.is-gated { opacity: 0.48; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .details-list { grid-template-columns: 1fr; gap: var(--space-1); }
  .details-list dd { margin-bottom: var(--space-3); }
  .secret { align-items: stretch; flex-direction: column; }
  .secret-actions .btn { flex: 1; text-align: center; }
  .field-number { max-width: none; }
  .zone-action-group { align-items: stretch; flex-direction: column; }
}

/* ── Admin operations ─────────────────────────────────────────
 * The admin surface shares the public-site tokens above but uses a
 * denser, safety-first hierarchy: observe, confirm scope, then mutate.
 * Keep this block admin-prefixed so customer portal work stays isolated. */
.admin-page-heading {
  max-width: 900px;
  margin-bottom: var(--space-8);
}
.admin-page-heading .subtitle { margin-bottom: 0; }
.admin-eyebrow {
  margin-bottom: var(--space-2);
  color: var(--text-dim);
  font: 600 0.72rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-eyebrow a { color: var(--text-dim); }
.admin-eyebrow a:hover { color: var(--accent); }
.admin-safety-note,
.admin-danger-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0 0 var(--space-8);
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 187, 51, 0.45);
  border-left: 4px solid var(--warn);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(255, 187, 51, 0.07);
}
.admin-danger-note {
  border-color: rgba(255, 77, 109, 0.5);
  border-left-color: var(--err);
  background: rgba(255, 77, 109, 0.08);
}
.admin-safety-note h2,
.admin-danger-note h2 {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-size: 1rem;
}
.admin-safety-note h2::before,
.admin-danger-note h2::before { content: none; }
.admin-safety-note p,
.admin-danger-note p { max-width: 900px; margin: 0; }
.admin-section { margin: 0 0 3rem; }
.admin-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.admin-section-heading .admin-eyebrow { margin: 0 0 var(--space-1); }
.admin-section-heading h2 { margin: 0; }
.admin-card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.admin-nav-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
a.admin-nav-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
  text-decoration: none;
}
.admin-nav-card h3 { margin: var(--space-2) 0 var(--space-3); }
.admin-nav-card p { flex: 1; }
.admin-card-kicker {
  color: var(--text-dim);
  font: 600 0.68rem var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.admin-card-action { color: var(--accent); font: 600 0.8rem var(--font-mono); }
.admin-nav-card-danger { border-color: rgba(255, 77, 109, 0.42); }
a.admin-nav-card-danger:hover { border-color: var(--err); box-shadow: 0 10px 30px rgba(255, 77, 109, 0.1); }
.admin-nav-card-disabled { opacity: 0.72; }
.admin-list-header { gap: var(--space-4); }
.admin-list-header > div { min-width: 0; }
.admin-list-header p { margin: var(--space-1) 0 0; }
.admin-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}
.admin-filter { width: min(100%, 440px); }
[data-admin-page] { min-width: 0; max-width: 100%; }
[data-admin-page] > .card { min-width: 0; max-width: 100%; }
.admin-table-region {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: var(--radius-md);
  overscroll-behavior-inline: contain;
  contain: inline-size;
}
.admin-table-region table { min-width: 760px; margin-bottom: 0; }
.admin-table-region caption { padding-left: 1px; }
.admin-long-value {
  max-width: 24rem;
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 18rem;
}
.admin-compact-select { width: auto; min-width: 8.5rem; }
.btn.danger-outline {
  border: 1px solid rgba(255, 77, 109, 0.65);
  background: transparent;
  color: var(--err);
}
.btn.danger-outline:hover {
  border-color: var(--err);
  box-shadow: 0 4px 12px rgba(255, 77, 109, 0.18);
}
.admin-action-status {
  min-height: 1.6rem;
  margin: var(--space-4) 0 0;
  color: var(--text-dim);
}
.admin-action-status.ok { color: var(--accent); }
.admin-action-status.error { color: var(--err); }
.admin-audit-details { min-width: 14rem; }
.admin-audit-details summary { color: var(--accent); cursor: pointer; font-family: var(--font-mono); font-size: 0.78rem; }
.admin-audit-details code {
  display: block;
  max-width: 40rem;
  margin-top: var(--space-2);
  padding: var(--space-2);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.admin-error-hint {
  display: block;
  max-width: 22rem;
  margin-top: var(--space-2);
  color: var(--text-dim);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}
.admin-form-grid .field:nth-child(-n+3) { grid-column: span 2; }
.admin-form-grid .field:nth-child(n+4) { grid-column: span 3; }
.admin-confirmation {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 760px;
  margin: var(--space-2) 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}
.admin-confirmation input { flex: 0 0 auto; margin-top: 0.25rem; accent-color: var(--accent); }

@media (max-width: 900px) {
  .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-form-grid .field:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 640px) {
  .admin-safety-note,
  .admin-danger-note,
  .admin-section-heading,
  .admin-list-header { align-items: flex-start; flex-direction: column; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-nav-card { min-height: 0; }
  .admin-row-actions { min-width: 16rem; }
  /* The global mobile table rule makes a bare table its own scroller. Admin
   * tables already have a dedicated labelled region, so preserve native table
   * layout here and let that region contain the wide operational columns. */
  .admin-table-region table { display: table; width: 760px; overflow: visible; white-space: normal; }
  .admin-table-region table thead { display: table-header-group; width: auto; }
  .admin-table-region table tbody { display: table-row-group; width: auto; }
}

.admin-pagination { margin-top: var(--space-4); }
.admin-pagination-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}
.admin-pagination-summary {
  min-width: 11rem;
  color: var(--text-dim);
  font: 0.78rem var(--font-mono);
  text-align: center;
}
.admin-cell-detail {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-dim);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
.admin-cell-detail.warn { color: var(--warn); }
.admin-span-full { grid-column: 1 / -1 !important; }
.admin-secret-panel {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(255, 187, 51, 0.08);
}
.admin-secret-panel h3 { margin-top: 0; color: var(--warn); }
.admin-secret-panel .secret-value-wrap {
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  background: var(--bg-code);
  color: var(--accent);
  white-space: pre-wrap;
}
.admin-inline-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.admin-inline-field-heading label { margin: 0; }
.admin-confirmation-phrase {
  display: block;
  margin: var(--space-2) 0;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-code);
  color: var(--warn);
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-adoption-card {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: rgba(255, 255, 255, 0.018);
}
.admin-adoption-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.admin-adoption-heading h3 {
  margin: 0;
  overflow-wrap: anywhere;
}
.admin-adoption-blast-radius {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: 1px solid rgba(255, 77, 109, 0.45);
  background: rgba(255, 77, 109, 0.07);
  color: var(--text);
}
.admin-adoption-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: 0;
}
.admin-adoption-detail { min-width: 0; }
.admin-adoption-detail dt {
  color: var(--text-dim);
  font: 600 0.68rem var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-adoption-detail dd {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}
.admin-adoption-actions {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.admin-adoption-actions label { min-width: 0; }
.admin-adoption-actions .admin-adoption-blast-radius { grid-column: 1 / -1; margin: 0; }
.admin-anomaly-review {
  margin-top: var(--space-6);
  border-left: 4px solid var(--warn);
}
.admin-anomaly-review:focus { outline: none; }
.admin-anomaly-review .admin-adoption-details {
  margin: var(--space-4) 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.admin-anomaly-review .btn.danger { margin-top: var(--space-3); }

@media (max-width: 640px) {
  .admin-pagination-nav { align-items: stretch; flex-direction: column; }
  .admin-pagination-nav .btn { width: 100%; text-align: center; }
  .admin-pagination-summary { min-width: 0; order: -1; }
  .admin-inline-field-heading,
  .admin-adoption-heading { align-items: flex-start; flex-direction: column; }
  .admin-inline-field-heading .btn { width: 100%; }
  .admin-adoption-details,
  .admin-adoption-actions { grid-template-columns: 1fr; }
  .admin-adoption-actions .btn { width: 100%; }
}
.billing-contract-text { white-space: pre-wrap; overflow-wrap: anywhere; padding-block: 1rem; }
.billing-contract-consent { margin-top: 1rem; }
.billing-contract-consent label { display: flex; align-items: flex-start; gap: .65rem; margin-block: 1rem; font-family: inherit; font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: normal; line-height: 1.5; color: var(--text); }
.billing-contract-consent label[hidden] { display: none; }
.billing-contract-consent input[type="checkbox"] { flex: 0 0 auto; margin-top: .25rem; }
.billing-contract-consent .btn { white-space: normal; }

/* Author layout rules must never override the HTML hidden state. */
[hidden] { display: none !important; }