@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --canvas: #F4F1EA;
  --surface: #FFFFFF;
  --surface-wash: #FDF6DC;
  --ink: #1A1A1A;
  --ink-2: #6B6862;
  --ink-3: #8C887F;
  --hairline: #E5E1D8;
  --on-dark: #FFFFFF;
  --on-dark-2: #A8A49C;
  --accent: #F5D14E;
  --accent-strong: #EFC22E;
  --accent-wash: #FDF6DC;
  --on-accent: #1A1A1A;
  --ok: #2B7455;
  --ok-wash: #E6F2EC;
  --warn-ink: #7A5A00;
  --danger: #B3392C;
  --danger-wash: #FBE7E4;
  --focus: #1D4ED8;
  --surface-warm: linear-gradient(135deg, #FBF3D0 0%, #F7E9A8 100%);
  --panel-warm: linear-gradient(180deg, #F7E9A8 0%, #FDF6DC 70%);
  --r-pill: 999px;
  --r-card: 28px;
  --r-inner: 20px;
  --r-tile: 14px;
  --r-media: 24px;
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.04), 0 12px 32px rgba(26, 26, 26, 0.06);
  --shadow-float: 0 2px 6px rgba(26, 26, 26, 0.06), 0 20px 48px rgba(26, 26, 26, 0.10);
  --shadow-dark: 0 8px 28px rgba(0, 0, 0, 0.28);
  --tap: 2.75rem;
  --sheet-seo: 44rem;
  --sheet-admin: 68rem;
  --sheet-gate: 24rem;
  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-fill-hover: rgba(255, 255, 255, 0.74);
  --glass-fill-dense: rgba(255, 255, 255, 0.78);
  --glass-fill-ink: rgba(26, 26, 26, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-specular: rgba(255, 255, 255, 0.85);
  --glass-blur: 24px;
  --glass-saturate: 180%;
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(26, 26, 26, 0.05), 0 1px 2px rgba(26, 26, 26, 0.04), 0 12px 32px rgba(26, 26, 26, 0.08);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(26, 26, 26, 0.04), 0 16px 40px rgba(26, 26, 26, 0.07);
  --backdrop-blobs: radial-gradient(60% 50% at 12% 8%, rgba(245, 209, 78, 0.38) 0%, rgba(245, 209, 78, 0) 70%), radial-gradient(55% 45% at 92% 18%, rgba(247, 233, 168, 0.7) 0%, rgba(247, 233, 168, 0) 70%), radial-gradient(70% 60% at 80% 100%, rgba(245, 209, 78, 0.22) 0%, rgba(245, 209, 78, 0) 70%);
  --asset-wallpaper: url("/static/glass/wallpaper.webp");
  --asset-login-hero: url("/static/glass/login-hero.webp");
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --t-display-xl-size: 3.5rem;
  --t-display-xl-weight: 300;
  --t-display-xl-tracking: -0.02em;
  --t-display-xl-leading: 1.05;
  --t-display-l-size: 2.5rem;
  --t-display-l-weight: 300;
  --t-display-l-tracking: -0.02em;
  --t-display-l-leading: 1.1;
  --t-h1-size: 1.5rem;
  --t-h1-weight: 600;
  --t-h1-tracking: -0.01em;
  --t-h1-leading: 1.2;
  --t-h2-size: 1.125rem;
  --t-h2-weight: 600;
  --t-h2-tracking: 0;
  --t-h2-leading: 1.3;
  --t-body-size: 0.9375rem;
  --t-body-weight: 400;
  --t-body-tracking: 0;
  --t-body-leading: 1.55;
  --t-label-size: 0.75rem;
  --t-label-weight: 500;
  --t-label-tracking: 0.02em;
  --t-label-leading: 1.4;
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.1rem;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 600;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-leading);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-wash); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-tile); }

/* ------------------------------------------------------------ liquid glass */

/*
 * The backdrop: warm brand-coloured light, with the generated wallpaper over
 * it. A fixed layer rather than background-attachment: fixed, which repaints
 * on every scroll on phones.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--asset-wallpaper) center / cover no-repeat, var(--backdrop-blobs), var(--canvas);
}
body.gate::before {
  background: var(--asset-login-hero) center / cover no-repeat, var(--backdrop-blobs), var(--canvas);
}

/*
 * Glass is chrome, not content. Floating controls get this; cards, forms and
 * tables stay solid so long text reads.
 */
.glass, .glass--dense, .glass--ink {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.glass--dense { background: var(--glass-fill-dense); }
.glass--ink {
  background: var(--glass-fill-ink);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--on-dark);
}
/* Light catches the edge on hover; a press sinks slightly. */
.glass-press {
  transition: background var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
.glass-press:hover { background: var(--glass-fill-hover); }
.glass-press:active { transform: scale(0.97); }

/* A solid card keeps its fill and gains the glass rim. */
.glass-rim {
  border-color: var(--glass-edge);
  box-shadow: var(--glass-rim);
}

/* A bar content scrolls under — the scrolling-under is what sells glass. */
.glass-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass-fill-dense);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 -1px 0 rgba(26, 26, 26, 0.05);
}

/*
 * Fallbacks swap the material, not every rule that uses it: the glass
 * variables turn solid, so each glass surface becomes the plain card it was.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill: var(--surface);
    --glass-fill-hover: var(--surface);
    --glass-fill-dense: var(--surface);
    --glass-fill-ink: var(--ink);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-fill: var(--surface);
    --glass-fill-hover: var(--surface);
    --glass-fill-dense: var(--surface);
    --glass-fill-ink: var(--ink);
    --glass-blur: 0px;
    --glass-saturate: 100%;
  }
  body::before, body.gate::before { background: var(--canvas); }
}
@media (prefers-contrast: more) {
  :root {
    --glass-fill: var(--surface);
    --glass-fill-hover: var(--surface);
    --glass-fill-dense: var(--surface);
    --glass-fill-ink: var(--ink);
    --glass-edge: var(--ink-2);
    --glass-blur: 0px;
    --glass-saturate: 100%;
  }
  body::before, body.gate::before { background: var(--canvas); }
}

/* ---------------------------------------------------------------- masthead */

.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass-fill-dense);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-edge);
}
/* The login gate has nothing to scroll under a bar; its masthead floats. */
body.gate .mast {
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mark {
  display: inline-flex;
  align-items: center;
  /* A 23px-tall text link is under the 44px minimum target on a phone. */
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mast form { margin: 0; }
.mast button {
  min-height: var(--tap);
  padding: 0 1.1rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glass-shadow);
  transition: background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.mast button:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }

/* ------------------------------------------------------------------ navrail */

.admin-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0.75rem auto 1.25rem;
  padding: 0.3rem;
  width: max-content;
  max-width: calc(100% - 3rem);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  box-shadow: var(--glass-shadow);
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1.1rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-body-size);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.admin-nav a:hover { color: var(--ink); background: var(--glass-fill-hover); }
.admin-nav a[aria-current="page"] {
  background: var(--glass-fill-ink);
  color: var(--on-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* -------------------------------------------------- account + icon cluster */

.cluster { display: flex; align-items: center; gap: 0.6rem; }
.account {
  display: inline-flex;
  align-items: center;
  max-width: 14rem;
  min-height: var(--tap);
  padding: 0 1rem;
  border-radius: var(--r-pill);
  background: var(--glass-fill-dense);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  color: var(--ink-2);
  font-size: var(--t-label-size);
  font-weight: 600;
  letter-spacing: var(--t-label-tracking);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ stat counters */

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 auto 1.75rem;
  padding: 0 1.5rem;
  width: min(100% - 3rem, var(--sheet-admin));
}
.stat {
  flex: 1 1 7rem;
  min-width: 0;
  padding: 0 1.25rem;
  border-left: 1px solid var(--hairline);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__value {
  margin: 0;
  font-size: var(--t-display-xl-size);
  font-weight: var(--t-display-xl-weight);
  letter-spacing: var(--t-display-xl-tracking);
  line-height: var(--t-display-xl-leading);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__label {
  margin-top: 0.15rem;
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------- chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0 1rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: var(--glass-fill-dense);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-label-size);
  font-weight: 600;
  letter-spacing: var(--t-label-tracking);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}
.chip:hover { background: var(--surface); color: var(--ink); }
/* A count is essential information at 12px, which is not "large text", so it
   takes the AA-passing secondary ink rather than the tertiary one. */
.chip__count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chip[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.chip[aria-current] .chip__count { color: var(--on-accent); }

/* -------------------------------------------------------------- accordion */

.accordion {
  margin: 0 0 0.6rem;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  overflow: hidden;
}
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--tap);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__meta {
  margin-left: auto;
  padding-right: 0.5rem;
  color: var(--ink-2);
  font-size: var(--t-label-size);
  font-weight: 500;
  letter-spacing: var(--t-label-tracking);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accordion__summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform var(--motion-base) var(--motion-ease);
}
.accordion[open] > .accordion__summary::after { transform: rotate(-135deg); }
.accordion[open] > .accordion__summary { background: var(--surface); }
.accordion__body { padding: 1rem 1.1rem 1.2rem; background: var(--surface); }

/* ------------------------------------------------------------- wash panel */

/* The settling variant, because these panels hold whole forms. A page-tall
   diagonal gradient reads as wallpaper rather than a focal point. */
.wash {
  margin: 0 0 1.75rem;
  padding: 1.5rem 1.4rem;
  background: var(--panel-warm);
  border-radius: var(--r-card);
}
.wash > :last-child { margin-bottom: 0; }
.wash .accordion { background: transparent; border-color: rgba(26, 26, 26, 0.12); }
.wash .accordion[open] > .accordion__summary,
.wash .accordion__body { background: transparent; }
/* On the wash, canvas-coloured fields read as disabled. Give them the raised
   surface so they still look like something you type into. */
.wash input:not([type="checkbox"]):not([type="radio"]),
.wash select,
.wash textarea { background: var(--surface); }

/* ----------------------------------------------------------- empty state */

.empty {
  padding: 1.5rem 1.3rem;
  background: var(--canvas);
  border: 1px dashed var(--hairline);
  border-radius: var(--r-inner);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- step rail */

.steps {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: var(--sheet-seo);
}
.steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding-top: 0.65rem;
  border-top: 2px solid var(--hairline);
  color: var(--ink-2);
  font-size: var(--t-label-size);
  font-weight: 600;
  letter-spacing: var(--t-label-tracking);
}
.steps .num {
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: var(--t-label-size);
  flex: none;
}
.steps .now { border-top-color: var(--ink); color: var(--ink); }
.steps .now .num { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.steps .done { border-top-color: var(--accent); }
.steps .done .num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps span.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------------- sheet */

.sheet {
  width: min(100% - 3rem, var(--sheet-seo));
  margin: 1.5rem auto 4rem;
  padding: 2rem 1.9rem 2.25rem;
  background: var(--surface);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-card);
  box-shadow: var(--glass-rim);
}
body.admin .sheet { width: min(100% - 3rem, var(--sheet-admin)); }
/* Masthead pinned to the top, the card centred in what is left — rather than
   centring the whole column and leaving the wordmark floating mid-page. */
body.gate { display: grid; grid-template-rows: auto 1fr; }
body.gate .sheet {
  align-self: center;
  width: min(100% - 3rem, var(--sheet-gate));
  margin-block: 2rem;
  box-shadow: var(--shadow-float);
}

/* -------------------------------------------------------------------- forms */

:where(body.gate, body.seo, body.admin) form p { margin: 0 0 1.15rem; }
:where(body.gate, body.seo, body.admin) label {
  font-weight: 600;
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-tracking);
  color: var(--ink-2);
  text-transform: uppercase;
}
:where(body.gate, body.seo, body.admin) input, :where(body.gate, body.seo, body.admin) select, :where(body.gate, body.seo, body.admin) textarea, :where(body.gate, body.seo, body.admin) button {
  font: inherit;
  color: var(--ink);
}
:where(body.gate, body.seo, body.admin) input:not([type="checkbox"]):not([type="radio"]),
:where(body.gate, body.seo, body.admin) select, :where(body.gate, body.seo, body.admin) textarea {
  display: block;
  width: 100%;
  /* A full-width field on the admin sheet is about 1000px. Nothing typed here
     is that long, and a 1000px box for a port number reads as a mistake. */
  max-width: 34rem;
  margin-top: 0.45rem;
  min-height: var(--tap);
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-tile);
  background: var(--canvas);
  font-size: var(--t-body-size);
  text-transform: none;
  letter-spacing: normal;
  transition: border-color var(--motion-fast) var(--motion-ease),
    background var(--motion-fast) var(--motion-ease);
}
:where(body.gate, body.seo, body.admin) input:not([type="checkbox"]):not([type="radio"]):hover,
:where(body.gate, body.seo, body.admin) select:hover, :where(body.gate, body.seo, body.admin) textarea:hover { background: var(--surface); }
:where(body.gate, body.seo, body.admin) textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
/* The label is the real hit area for a checkbox, so it carries the minimum
   target height rather than the 20px box inside it. */
:where(body.gate, body.seo, body.admin) label:has(> input[type="checkbox"]),
:where(body.gate, body.seo, body.admin) label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
:where(body.gate, body.seo, body.admin) input[type="checkbox"], :where(body.gate, body.seo, body.admin) input[type="radio"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.55rem;
  vertical-align: middle;
  accent-color: var(--ink);
}
:where(body.gate, body.seo, body.admin) input:focus-visible,
:where(body.gate, body.seo, body.admin) select:focus-visible,
:where(body.gate, body.seo, body.admin) textarea:focus-visible {
  border-color: var(--focus);
  background: var(--surface);
  outline-offset: 0;
}

/* ------------------------------------------------------------------ buttons */

:where(body.gate, body.seo, body.admin) button, :where(body.gate, body.seo, body.admin) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: var(--t-body-size);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
:where(body.gate, body.seo, body.admin) button:hover, :where(body.gate, body.seo, body.admin) .btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
}
:where(body.gate, body.seo, body.admin) button:active, :where(body.gate, body.seo, body.admin) .btn:active { transform: translateY(1px); }
.mast button {
  border-color: var(--glass-edge);
  background: var(--glass-fill);
  color: var(--ink-2);
  font-weight: 600;
}
.mast button:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* ------------------------------------------------------------------- pieces */

img { max-width: 100%; height: auto; display: block; }
:where(body.gate, body.seo, body.admin) img {
  border-radius: var(--r-media);
  border: 1px solid var(--hairline);
}
:where(body.gate, body.seo, body.admin) ul { padding-left: 1.1rem; }
:where(body.gate, body.seo, body.admin) li { margin: 0.5rem 0; }
:where(body.gate, body.seo, body.admin) li form { margin-top: 0.5rem; }
:where(body.gate, body.seo, body.admin) table { width: 100%; border-collapse: collapse; font-size: var(--t-body-size); }
:where(body.gate, body.seo, body.admin) th, :where(body.gate, body.seo, body.admin) td {
  text-align: left;
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--hairline);
}
:where(body.gate, body.seo, body.admin) th {
  font-size: var(--t-label-size);
  font-weight: 600;
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  color: var(--ink-2);
}
:where(body.gate, body.seo, body.admin) pre {
  overflow: auto;
  padding: 1rem 1.1rem;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-inner);
  box-shadow: var(--shadow-dark);
  font-family: var(--mono);
  font-size: var(--t-label-size);
}

.note {
  padding: 0.9rem 1.05rem;
  background: var(--accent-wash);
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  color: var(--warn-ink);
}

/* ------------------------------------------------------------------- status */

[data-error] {
  font-weight: 600;
  font-size: var(--t-h2-size);
  color: var(--danger);
  background: var(--danger-wash);
  padding: 0.9rem 1.05rem;
  border-radius: var(--r-inner);
}
[data-error="LIVE"] { color: var(--ok); background: var(--ok-wash); }
[data-error="DRAFT"] {
  color: var(--ink-2);
  background: var(--canvas);
}
[data-error="PROCESSING"],
[data-error="WAITING_DNS"] { color: var(--warn-ink); background: var(--accent-wash); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 40rem) {
  .mast { padding-inline: 1rem; }
  /* body.admin .sheet and body.gate .sheet are (0,2,0) and a media query adds
     no specificity, so overriding the bare .sheet here left the admin and
     login sheets at 100% minus 3rem while this block zeroed their margin —
     a sheet flush to the left edge with a dead strip on the right.
     The login screen is the first thing every operator sees. */
  .sheet,
  body.admin .sheet,
  body.gate .sheet {
    width: 100%;
    margin: 0 0 3rem;
    padding: 1.5rem 1.15rem 1.75rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  /* The rail scrolled about 124px past the viewport with no arrow, fade or
     scrollbar, which hid Antrean and Halaman entirely. Wrapping shows every
     section instead of hiding the failure queue behind an invisible gesture. */
  .accordion__summary { flex-wrap: wrap; }
  .accordion__meta { margin-left: 0; white-space: normal; overflow: visible; }
  .admin-nav {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    width: auto;
    max-width: calc(100% - 2rem);
    border-radius: var(--r-card);
  }
  .stats { width: 100%; padding-inline: 1rem; }
  .stat { flex-basis: 45%; padding-inline: 0.9rem; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat__value { font-size: var(--t-display-l-size); }
  .account { display: none; }
  .steps { padding-inline: 1rem; }
  .steps span.label { display: none; }
  .steps .now span.label { display: inline; }
  body.seo .sheet button,
  body.seo .sheet .btn { width: 100%; }
}

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