/* Wispdeck admin UI — design system.
   Light theme is the default; dark theme is applied via html[data-theme="dark"]
   (set by /assets/theme.js) with a prefers-color-scheme fallback when JS is off.
   The CSP forbids inline styles, so dynamic dimensions (chart bars) use the
   bucketed .ch-* / .sh-* height classes near the end of this file. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root {
  --accbg: #3f6b4f;
  --acc: var(--accbg);
  --acc-contrast: #ffffff;
  --bg: #faf9f6;
  --panel: #f5f3ee;
  --card: #ffffff;
  --line: #e6e3da;
  --line2: #dcd8cc;
  --ink: #1c1b18;
  --mut: #6d685c;
  --fnt: #a29b8a;
  --amber: #b0743c;
  --rowh: #f5f3ee;
  --chip: #e9e6dc;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --acc: color-mix(in oklab, var(--accbg), #f5f3ee 45%);
  --bg: #1a1915;
  --panel: #201f19;
  --card: #22211b;
  --line: #32302a;
  --line2: #3e3c33;
  --ink: #e9e6dc;
  --mut: #a8a294;
  --fnt: #6f6a5c;
  --amber: #cf9459;
  --rowh: #23221c;
  --chip: #2c2a22;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --acc: color-mix(in oklab, var(--accbg), #f5f3ee 45%);
    --bg: #1a1915;
    --panel: #201f19;
    --card: #22211b;
    --line: #32302a;
    --line2: #3e3c33;
    --ink: #e9e6dc;
    --mut: #a8a294;
    --fnt: #6f6a5c;
    --amber: #cf9459;
    --rowh: #23221c;
    --chip: #2c2a22;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

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

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

code { font-family: var(--mono); }

.hidden { display: none !important; }

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

.mono { font-family: var(--mono); }
.subtle { color: var(--mut); }
.faint { color: var(--fnt); }

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

input, select, textarea, button { font: inherit; color: inherit; }
button { white-space: nowrap; }

input[type="text"], input[type="password"], input[type="url"], input[type="search"],
input[type="email"], input[type="datetime-local"], input:not([type]),
select, textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13.5px;
  outline: none;
}

.on-card input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.on-card select, .on-card textarea { background: var(--bg); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--acc);
}

input::placeholder, textarea::placeholder { color: var(--fnt); }

textarea { resize: vertical; }

label { display: block; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mut); }
.field-label { font-size: 12px; color: var(--mut); display: block; }
.optional { color: var(--fnt); font-size: 11px; }
.helper { margin: 0; font-size: 11.5px; color: var(--fnt); }
.helper.validation-hint { color: var(--amber); }

.input-affix {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 6px;
  overflow: hidden;
}
.on-card .input-affix { background: var(--bg); }
.on-card .input-affix > input { background: none; }
.input-affix > span {
  padding: 10px 4px 10px 12px;
  font: 13px var(--mono);
  color: var(--fnt);
  white-space: nowrap;
}
.input-affix > span.suffix { padding: 10px 12px 10px 4px; }
.input-affix > input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 10px 12px 10px 2px;
  font: 13px var(--mono);
}
.input-affix > input.affix-leads { padding: 10px 2px 10px 12px; }
.input-affix:focus-within { border-color: var(--acc); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--accbg);
  color: var(--acc-contrast);
  text-decoration: none;
}
a.btn:hover { text-decoration: none; }
.btn:hover { filter: brightness(1.08); }

.btn.ghost {
  background: none;
  border: 1px solid var(--line2);
  color: var(--ink);
  font-weight: 500;
}
.btn.ghost:hover { filter: none; background: var(--rowh); }

.btn.quiet {
  background: none;
  border: 1px solid var(--line2);
  color: var(--mut);
  font-weight: 500;
}
.btn.quiet:hover { filter: none; color: var(--ink); }

.btn.danger {
  background: none;
  border: 1px solid var(--line);
  color: var(--amber);
  font-weight: 500;
}
.btn.danger:hover { filter: none; border-color: var(--amber); }

.btn.compact { padding: 6px 12px; font-size: 12px; }
.btn.copied { color: var(--acc); border-color: var(--acc); }
.btn:disabled { opacity: 0.55; cursor: default; }

.text-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--mut);
  font-size: 12.5px;
  cursor: pointer;
}
.text-button:hover { color: var(--ink); }

/* ---------- animations ---------- */

@keyframes wd-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes wd-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

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

/* ---------- app shell ---------- */

.shell-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 13px 28px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 22px;
  height: 22px;
  background: var(--ink);
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--bg);
  font: 600 12px var(--mono);
}
.brand-note { font: 11px var(--mono); color: var(--fnt); font-weight: 400; margin-left: 2px; }

.nav-tabs { display: flex; gap: 4px; font-size: 13px; margin-left: 8px; }
.nav-tabs a {
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--mut);
  font-weight: 500;
}
.nav-tabs a:hover { text-decoration: none; color: var(--ink); }
.nav-tabs a[aria-current="page"] { background: var(--chip); color: var(--ink); }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mut);
  padding: 4px;
  font-size: 14px;
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink); }
.no-js .theme-toggle, .no-js [data-theme-toggle] { display: none; }
.theme-icon-dark, :root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }

.user-chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line2);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--mut);
  font-weight: 600;
  text-transform: uppercase;
}
a.user-chip:hover { text-decoration: none; color: var(--ink); }

/* page containers */

.page {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: 22px 28px 60px;
  animation: wd-fade 0.25s ease;
}
.page.w-list { max-width: 1020px; }
.page.w-detail { max-width: 980px; }
.page.w-mid { max-width: 760px; }
.page.w-narrow { max-width: 560px; }

.backlink { font-size: 12.5px; color: var(--fnt); }
.backlink:hover { color: var(--mut); text-decoration: none; }

.page-intro { margin: 14px 0 18px; }
.page-intro h1 { font-size: 19px; }
.page-intro p { margin: 4px 0 0; font-size: 12.5px; color: var(--mut); }

/* ---------- banners / notices ---------- */

.error {
  margin: 0;
  font-size: 12.5px;
  color: var(--amber);
}

.notice {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--mut);
  margin: 0 0 14px;
}
.notice a { white-space: nowrap; }

.confirm-dialog {
  width: min(460px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.28);
}
.confirm-dialog::backdrop {
  background: rgb(9 12 14 / 0.68);
  backdrop-filter: blur(2px);
}
.confirm-dialog-body { padding: 24px; }
.confirm-dialog h2 { margin: 4px 0 10px; font-size: 20px; }
.confirm-dialog p { margin: 0; color: var(--mut); font-size: 13px; line-height: 1.55; }
.confirm-kicker {
  color: var(--amber);
  font: 600 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.success-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 16px;
  margin-bottom: 14px;
  animation: wd-fade 0.25s ease;
  font-size: 13px;
}
.success-banner .banner-url { font: 500 14px var(--mono); color: var(--acc); }
.success-banner .success-actions { margin-left: auto; display: flex; gap: 8px; }

.global-update-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 20px;
  border-bottom: 1px solid color-mix(in oklab, var(--acc), var(--line) 65%);
  background: color-mix(in oklab, var(--acc), var(--bg) 92%);
  color: var(--mut);
  font-size: 12.5px;
}
.global-update-banner strong { color: var(--ink); }
.global-update-banner a { white-space: nowrap; }

/* ---------- landing ---------- */

.landing-header { border-bottom: none; padding: 18px 32px; }
.landing-header .nav-links { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; }
.landing-header .nav-links a { color: var(--mut); }
.landing-header .nav-links a.btn { color: var(--acc-contrast); }

.landing-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 80px;
}
.landing-hero { width: 100%; max-width: 640px; }
.landing-eyebrow { font: 12px var(--mono); color: var(--fnt); margin: 0 0 14px; }
.landing-hero h1 {
  margin: 0;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.landing-hero .lede {
  margin: 16px 0 28px;
  font-size: 16px;
  color: var(--mut);
  max-width: 460px;
}
.landing-form { display: flex; gap: 10px; }
.landing-form input {
  flex: 1;
  padding: 13px 16px;
  font-size: 14px;
}
.landing-form .btn { padding: 13px 22px; font-size: 14px; }

.feature-strip {
  display: flex;
  gap: 26px;
  margin-top: 44px;
  font-size: 13px;
  color: var(--mut);
  flex-wrap: wrap;
}
.feature-strip .k { font-family: var(--mono); color: var(--acc); }
.feature-strip .k.amber { color: var(--amber); }

.landing-footer {
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  font: 12px var(--mono);
  color: var(--fnt);
}
.landing-footer a { color: var(--fnt); }

/* ---------- auth pages ---------- */

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-box { width: 380px; max-width: 100%; animation: wd-fade 0.25s ease; }
.auth-box > .brand { margin-bottom: 22px; }
.auth-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-card h1 { font-size: 17px; }
.auth-card .auth-sub { font-size: 12.5px; color: var(--mut); margin: 3px 0 0; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.auth-card .btn { padding: 11px; font-size: 14px; }
.auth-foot { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--fnt); }
.auth-foot a { color: var(--fnt); }

.auth-card details { border-top: 1px solid var(--line); padding-top: 12px; }
.auth-card summary { cursor: pointer; font-size: 12.5px; color: var(--mut); }
.auth-card details form { margin-top: 12px; }

.onboarding-box { width: 500px; }
.onboarding-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.onboarding-kicker {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--acc);
  font: 600 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
}
.onboarding-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--fnt);
  font-size: 10.5px;
}
.onboarding-steps li span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--line2);
  border-radius: 50%;
  font: 10px var(--mono);
}
.onboarding-steps li.current { color: var(--ink); }
.onboarding-steps li.current span { border-color: var(--acc); background: var(--acc); color: var(--acc-text); }
.onboarding-divider { display: flex; align-items: center; gap: 10px; color: var(--fnt); font-size: 10.5px; }
.onboarding-divider::before, .onboarding-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.setup-code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font: 600 20px var(--mono);
}
.onboarding-security { margin: 2px 0 0; color: var(--fnt); font-size: 11px; line-height: 1.45; }

/* ---------- dashboard ---------- */

.bar { display: flex; gap: 10px; }
.bar input { flex: 1; padding: 11px 14px; font-size: 13.5px; }
.bar .btn { flex: none; }

.options-panel > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--mut);
}
.options-panel > summary::-webkit-details-marker { display: none; }
.options-panel > summary:hover { color: var(--ink); }
.options-panel > summary::after { content: "▾"; font-size: 10px; color: var(--fnt); }
.options-panel[open] > summary::after { content: "▴"; }

.options-body {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  align-items: center;
  animation: wd-fade 0.2s ease;
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 10px;
}
.options-body label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mut); }
.options-body input, .options-body .input-affix { width: auto; background: var(--card); }
.options-body .input-affix input { width: 130px; padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; }
.options-body .input-affix > span { padding-top: 7px; padding-bottom: 7px; font-size: 12.5px; }
.options-body input[type="datetime-local"] { padding: 7px 10px; font-size: 12.5px; }
.options-body input[name="title"] { padding: 7px 10px; font-size: 12.5px; width: 180px; }

.stat-strip {
  display: flex;
  gap: 28px;
  padding: 20px 2px 14px;
  font-size: 12px;
  color: var(--mut);
  align-items: baseline;
  flex-wrap: wrap;
}
.stat-strip > div { display: flex; align-items: baseline; gap: 6px; }
.stat-strip .n { font: 600 19px var(--mono); color: var(--ink); }
.stat-strip .n.up { color: var(--acc); }
.stat-strip .filter { margin-left: auto; }
.stat-strip .filter input { width: 170px; padding: 7px 12px; font-size: 12.5px; border-color: var(--line); }

.chip-row { display: flex; gap: 8px; padding: 0 2px 12px; }
.chip {
  background: none;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 13px;
  font-size: 12px;
  cursor: pointer;
  color: var(--mut);
  font-weight: 500;
}
.chip[aria-pressed="true"] {
  background: var(--chip);
  border-color: var(--chip);
  color: var(--ink);
}
.no-js .chip-row { display: none; }

/* unified table */

.table-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}

.thead, .trow {
  display: grid;
  grid-template-columns: 52px 190px 1fr 78px 80px 130px 60px;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
}
.thead {
  padding: 9px 18px;
  font-size: 11px;
  color: var(--fnt);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--panel);
}

.trow {
  position: relative;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: inherit;
}
a.trow:hover { background: var(--rowh); text-decoration: none; }
.trow:has(.row-link:hover) { background: var(--rowh); }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:hover { text-decoration: none; }

.badge {
  font-size: 10px;
  color: var(--fnt);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 0;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.badge.site { color: var(--mut); border-color: var(--line2); }

.addr {
  font: 500 13px var(--mono);
  color: var(--acc);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dest {
  color: var(--mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dest .row-owner { color: var(--fnt); font-size: 11.5px; }
.dest .row-owner strong { color: var(--mut); font-weight: 500; }

.spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  padding: 0 2px;
  border-bottom: 2px solid var(--line);
}
.spark span { width: 6px; background: var(--line2); display: inline-block; border-radius: 2px 2px 0 0; }
.spark span.hot { background: var(--acc); }

.num { font: 13px var(--mono); }
.date { font-size: 12px; color: var(--fnt); }
.date.warn { color: var(--amber); }

.trow .btn {
  justify-self: end;
  width: 56px;
  padding: 4px 0;
  font-size: 11px;
  position: relative;
  z-index: 1;
  border-color: transparent;
  color: var(--fnt);
}
.trow .btn:hover { border-color: var(--line2); color: var(--ink); }
.trow:hover .btn, .trow:has(.row-link:hover) .btn { border-color: var(--line); }

.table-empty {
  padding: 32px;
  text-align: center;
  font-size: 13px;
  color: var(--fnt);
  border-top: 1px solid var(--line);
}

/* ---------- detail pages ---------- */

.detail-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 14px 0 4px;
  flex-wrap: wrap;
}
.detail-title { font: 600 26px var(--mono); color: var(--acc); letter-spacing: -0.01em; }
.detail-head .spacer, .row-spacer { margin-left: auto; }
.detail-head form { display: inline; margin: 0; }
.detail-dest {
  font-size: 13px;
  color: var(--mut);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-sub { font-size: 13px; color: var(--mut); }

.pill {
  font-size: 11px;
  background: var(--chip);
  border-radius: 99px;
  padding: 2px 10px;
  color: var(--mut);
  white-space: nowrap;
}
.pill.live { color: var(--acc); }
.pill.warn { color: var(--amber); }
.pill.pulse { animation: wd-pulse 1.4s ease infinite; }

.detail-stats {
  display: flex;
  gap: 28px;
  padding: 22px 2px 18px;
  font-size: 12px;
  color: var(--mut);
  flex-wrap: wrap;
  align-items: baseline;
}
.detail-stats > div { display: flex; align-items: baseline; gap: 6px; }
.detail-stats .n { font: 600 19px var(--mono); color: var(--ink); }
.detail-stats .v { color: var(--ink); }
.detail-stats .v.warn { color: var(--amber); }

.panel-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 18px 20px;
}
.panel-card + .panel-card, .panel-stack > * + * { margin-top: 16px; }
.card-label {
  font-size: 11px;
  color: var(--fnt);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}
.card-title { font-size: 13.5px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--mut); margin: 2px 0 0; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

/* chart */

.chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
}
.chart span {
  flex: 1;
  min-height: 2px;
  background: color-mix(in oklab, var(--accbg), var(--card) 55%);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  animation: wd-bar 0.4s ease;
}
.chart span:last-child { background: var(--accbg); }
.chart span:hover { background: var(--amber); }
.chart-range {
  display: flex;
  justify-content: space-between;
  font: 10.5px var(--mono);
  color: var(--fnt);
  margin-top: 8px;
}

/* releases */

.release-row {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  align-items: center;
  flex-wrap: wrap;
}
.release-row:first-of-type { border-top: none; }
.rel-v {
  font: 600 11.5px var(--mono);
  color: var(--mut);
  background: var(--chip);
  border-radius: 5px;
  padding: 3px 9px;
  flex: none;
}
.rel-v.current { color: var(--acc); }
.release-row .msg {
  color: var(--mut);
  flex: 1;
  min-width: 160px;
}
.release-row .when { color: var(--fnt); font-size: 11.5px; }
.release-row form { margin: 0; display: inline; }
.release-action {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--fnt);
  cursor: pointer;
}
.release-action:hover { color: var(--acc); border-color: var(--line); }
.release-action.primary {
  color: var(--acc);
  font-weight: 600;
  border-color: var(--line2);
}
.release-action.primary:hover { border-color: var(--acc); }
.danger-text { color: var(--amber) !important; }

.danger-zone {
  border-color: color-mix(in oklab, var(--amber), var(--line) 70%);
  padding: 0;
}
.danger-zone > summary, .collection-danger > summary {
  cursor: pointer;
  color: var(--amber);
  font-size: 12.5px;
  padding: 14px 18px;
}
.danger-zone > .danger-content { padding: 0 18px 18px; }
.danger-zone .form-stack, .collection-danger .form-stack { gap: 10px; }
.danger-zone input, .collection-danger input { margin-top: 6px; }

/* Wispist data console */

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  padding: 3px;
  gap: 3px;
}
.segmented a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-radius: 5px;
  padding: 7px 12px;
  color: var(--mut);
  font-size: 12.5px;
}
.segmented a span { color: var(--fnt); font-size: 11px; }
.segmented a:hover { text-decoration: none; color: var(--ink); }
.segmented a[aria-current="page"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--ink), transparent 90%);
}
.data-modes { margin-bottom: 16px; }

.data-console {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.data-collections { padding: 14px; }
.data-collections .card-label { padding: 0 4px; }
.data-collections nav { display: flex; flex-direction: column; gap: 3px; }
.data-collections nav a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 6px;
  padding: 9px 10px;
  color: var(--mut);
}
.data-collections nav a:hover { background: var(--rowh); text-decoration: none; color: var(--ink); }
.data-collections nav a[aria-current="page"] { background: var(--chip); color: var(--ink); }
.collection-name { font: 500 12.5px var(--mono); overflow-wrap: anywhere; }
.collection-meta { color: var(--fnt); font-size: 10.5px; }
.compact-empty { padding: 24px 12px; }

.data-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
}
.data-section-head .card-label { margin-bottom: 2px; }
.data-section-head h2 { font: 600 17px var(--mono); }
.document-list { border-top: 1px solid var(--line); }
.document-card { border-bottom: 1px solid var(--line); }
.document-card > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  cursor: pointer;
  padding: 12px 2px;
  list-style: none;
}
.document-card > summary::-webkit-details-marker { display: none; }
.document-card > summary::before { content: "›"; color: var(--fnt); }
.document-card[open] > summary::before { content: "⌄"; }
.document-id { font: 500 12.5px var(--mono); overflow-wrap: anywhere; }
.document-time { margin-left: auto; color: var(--fnt); font-size: 11px; white-space: nowrap; }
.document-body {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  padding: 14px;
  margin: 0 0 14px 18px;
}
.document-body label { color: var(--mut); font-size: 11.5px; }
.json-editor {
  margin-top: 6px;
  min-height: 180px;
  background: var(--card);
  font: 12px/1.55 var(--mono);
  tab-size: 2;
}
.revision {
  margin-right: auto;
  color: var(--fnt);
  font: 10.5px var(--mono);
  overflow-wrap: anywhere;
}
.document-delete { margin-top: 12px; }
.data-pagination { display: flex; justify-content: space-between; margin-top: 16px; }
.collection-danger { border-top: 1px solid var(--line); margin-top: 18px; }
.collection-danger > summary { padding-left: 2px; }
.collection-danger > .danger-content { padding: 0 2px 2px; }

/* toggle / settings rows */

.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.toggle-row form { margin: 0 0 0 auto; }
.panel-card .toggle-row + .toggle-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.upload-drop {
  position: relative;
  display: block;
  background: var(--bg);
  border: 1px dashed var(--line2);
  border-radius: 6px;
  padding: 26px 18px;
  font-size: 12.5px;
  color: var(--fnt);
  text-align: center;
  cursor: pointer;
}
.upload-drop:hover, .upload-drop:focus-within { color: var(--ink); border-color: var(--fnt); }
.upload-drop.has-file {
  color: var(--acc);
  border-style: solid;
  border-color: color-mix(in oklab, var(--accbg), var(--line2) 40%);
}
.upload-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
}
.no-js .upload-drop input[type="file"] {
  position: static;
  opacity: 1;
  height: auto;
  margin-top: 10px;
  color: var(--mut);
  font-size: 12px;
  background: none;
}

.kv { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 12.5px; }
.kv > div { display: flex; gap: 10px; }
.kv dt { color: var(--fnt); min-width: 110px; margin: 0; }
.kv dd { margin: 0; color: var(--mut); font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.limit-grid { margin-top: 14px; }

/* ---------- link form (destinations / modes) ---------- */

.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-stack form { display: flex; flex-direction: column; gap: 16px; margin: 0; }

.destinations-editor { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.destination-rows { display: flex; flex-direction: column; gap: 10px; }
.destination-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.add-destination {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--line2);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--mut);
}
.add-destination:hover:not(:disabled) { color: var(--ink); border-color: var(--fnt); }

.mode-options { display: flex; gap: 8px; flex-wrap: wrap; }
.mode-option {
  flex: 1;
  min-width: 150px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
}
.mode-option:has(input:checked) { background: var(--chip); border-color: var(--line2); }
.mode-option input { position: absolute; opacity: 0; }
.mode-title { font-size: 12.5px; font-weight: 600; }
.mode-copy { font-size: 11.5px; color: var(--mut); }

.advanced-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.advanced-grid .full-width { grid-column: 1 / -1; }

.progressive-panel {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.progressive-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
}
.progressive-panel > summary::-webkit-details-marker { display: none; }
.progressive-panel > summary strong { font-size: 12.5px; font-weight: 600; }
.progressive-panel > summary small { display: block; color: var(--fnt); font-size: 11.5px; }
.summary-action { color: var(--acc); font-size: 12px; flex: none; }
.progressive-panel .when-open, .progressive-panel[open] .when-closed { display: none; }
.progressive-panel[open] .when-open { display: inline; }
.progressive-content { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; }

.danger-panel { border-color: color-mix(in oklab, var(--amber), var(--line) 60%); background: none; }
.danger-panel > summary { color: var(--amber); }
.danger-content { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; color: var(--mut); }
.danger-content p { margin: 0; }
.confirmation { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mut); }
.confirmation input { width: auto; }

.save-row { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- settings & records ---------- */

.settings-stack { display: flex; flex-direction: column; gap: 22px; }

.settings-form { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.settings-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.compact-notice { margin: 14px 0 0; }

.accent-fieldset { margin: 0; padding: 0; border: 0; }
.accent-fieldset legend { margin-bottom: 8px; font-size: 12px; color: var(--mut); }
.accent-options { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-option {
  display: flex;
  position: relative;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line2);
  border-radius: 6px;
  color: var(--mut);
  font-size: 12px;
  cursor: pointer;
}
.accent-option:has(input:checked) { border-color: var(--acc); color: var(--ink); background: var(--panel); }
.accent-option input { position: absolute; opacity: 0; pointer-events: none; }
.accent-option:focus-within { outline: 2px solid var(--acc); outline-offset: 2px; }
.accent-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--swatch); }
.accent-forest { --swatch: #3f6b4f; }
.accent-ocean { --swatch: #315f8c; }
.accent-teal { --swatch: #27736b; }
.accent-violet { --swatch: #684f8c; }
.accent-rose { --swatch: #8c455c; }
.accent-ember { --swatch: #94532f; }
.accent-slate { --swatch: #485363; }

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.radio-option input { width: auto; margin-top: 3px; }
.radio-option span { display: flex; flex-direction: column; gap: 2px; }
.radio-option small { color: var(--fnt); font-size: 11.5px; }

.card-rows { display: flex; flex-direction: column; }
.card-rows > * {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  flex-wrap: wrap;
}
.card-rows > *:first-child { border-top: none; padding-top: 4px; }
.card-rows .mono-cell { font: 500 13px var(--mono); }
.card-rows .row-note { font-size: 11.5px; color: var(--fnt); margin-left: auto; }

.records { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.records > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.records > li:first-child { border-top: none; }
.records form { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.records .record-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.records .subtle { font-size: 12px; }

.compact-records > li { flex-direction: row; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.codes {
  columns: 2;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 14px;
}
.codes code { font-size: 13px; }

.setup-secret {
  width: 100%;
  font: 12.5px var(--mono);
  background: var(--chip);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-wrap: anywhere;
  display: block;
}
input.setup-secret { font: 12.5px var(--mono); }

.qr-code { border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.setup-steps { margin: 0; padding-left: 20px; color: var(--mut); font-size: 13px; }

.audit-panel { margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.audit-panel > summary {
  display: flex;
  justify-content: space-between;
  padding: 12px 18px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  color: var(--mut);
}
.audit-panel > summary::-webkit-details-marker { display: none; }
.audit-panel .records { padding: 0 18px 12px; }

/* ---------- empty states ---------- */

.empty-state {
  border: 1px dashed var(--line2);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--mut);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.empty-state .empty-mark { font-size: 20px; color: var(--fnt); }
.empty-state p { margin: 0; color: var(--fnt); }

/* ---------- public link pages ---------- */

.public-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.public-card {
  width: 480px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  animation: wd-fade 0.25s ease;
}
.public-card h1 { font-size: 17px; }
.public-card .public-sub { font: 12px var(--mono); color: var(--fnt); margin: 4px 0 0; }
.public-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.public-links li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.public-links li:first-child { border-top: none; padding-top: 0; }
.public-links a { font-weight: 500; }
.public-links .subtle { font-size: 11.5px; color: var(--fnt); overflow-wrap: anywhere; }
.public-card .btn { margin-top: 16px; }

/* ---------- footer ---------- */

.app-footer {
  padding: 16px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 18px;
  align-items: center;
  font: 12px var(--mono);
  color: var(--fnt);
}
.app-footer form { margin: 0 0 0 auto; }

/* ---------- chart height buckets ----------
   .ch-N sets an exact bar height in px (step 4, 2px floor).
   .sh-N sets sparkline bar heights (px). Assigned server-side. */

.ch-2 { height: 2px; } .ch-4 { height: 4px; } .ch-8 { height: 8px; }
.ch-12 { height: 12px; } .ch-16 { height: 16px; } .ch-20 { height: 20px; }
.ch-24 { height: 24px; } .ch-28 { height: 28px; } .ch-32 { height: 32px; }
.ch-36 { height: 36px; } .ch-40 { height: 40px; } .ch-44 { height: 44px; }
.ch-48 { height: 48px; } .ch-52 { height: 52px; } .ch-56 { height: 56px; }
.ch-60 { height: 60px; } .ch-64 { height: 64px; } .ch-68 { height: 68px; }
.ch-72 { height: 72px; } .ch-76 { height: 76px; } .ch-80 { height: 80px; }
.ch-84 { height: 84px; } .ch-88 { height: 88px; } .ch-92 { height: 92px; }
.ch-96 { height: 96px; } .ch-100 { height: 100px; } .ch-104 { height: 104px; }
.ch-108 { height: 108px; } .ch-112 { height: 112px; } .ch-116 { height: 116px; }
.ch-120 { height: 120px; }

.sh-3 { height: 3px; } .sh-4 { height: 4px; } .sh-5 { height: 5px; }
.sh-6 { height: 6px; } .sh-7 { height: 7px; } .sh-8 { height: 8px; }
.sh-9 { height: 9px; } .sh-10 { height: 10px; } .sh-11 { height: 11px; }
.sh-12 { height: 12px; } .sh-13 { height: 13px; } .sh-14 { height: 14px; }
.sh-15 { height: 15px; }

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

/* Mobile Safari zooms focused controls whose computed text size is below
   16px. Keep the compact desktop scale, but use the platform-safe size on
   touch-first devices without disabling user zoom in the viewport. */
@media (any-pointer: coarse) {
  input[type="text"],
  input[type="password"],
  input[type="url"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="datetime-local"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px;
  }

  input.setup-code-input { font-size: 20px; }

  button,
  .btn,
  .chip,
  .release-action,
  .add-destination,
  details > summary {
    min-height: 44px;
  }

  .theme-toggle,
  .user-chip {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 900px) {
  .thead, .trow { grid-template-columns: 44px 150px 1fr 70px 60px; }
  .thead > :nth-child(4), .trow > :nth-child(4),
  .thead > :nth-child(6), .trow > :nth-child(6) { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .advanced-grid { grid-template-columns: 1fr; }
  .data-console { grid-template-columns: 1fr; }
  .data-collections nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .page { padding: 18px 16px 48px; }
  .shell-header { gap: 8px 12px; padding: 8px 16px; flex-wrap: wrap; }
  .shell-header .brand { min-width: 0; }
  .nav-tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 6px;
  }
  .nav-tabs a {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
  }
  .header-tools { gap: 2px; }

  .landing-header { padding: 10px 16px; }
  .landing-header .brand-note { display: none; }
  .landing-header .nav-links { gap: 8px; }
  .landing-main { justify-content: flex-start; padding: 48px 16px 64px; }
  .landing-hero h1 { font-size: 34px; }
  .landing-form { flex-direction: column; }
  .landing-form .btn { width: 100%; }
  .feature-strip { gap: 14px 20px; margin-top: 34px; }
  .landing-footer { padding: 16px; flex-wrap: wrap; }

  .auth-main { padding: 16px; }
  .auth-card { padding: 22px 18px; }
  .onboarding-brand-row { margin-bottom: 16px; }

  .bar { flex-wrap: wrap; }
  .bar input { min-width: 100%; }
  .bar .btn {
    flex: 1 1 calc(50% - 5px);
    min-height: 44px;
  }
  .options-panel > summary { min-height: 44px; margin-top: 4px; }
  .options-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .options-body label {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .options-body input,
  .options-body .input-affix,
  .options-body .input-affix input,
  .options-body input[name="title"] {
    width: 100%;
  }

  .success-banner .banner-url {
    width: 100%;
    overflow-wrap: anywhere;
  }
  .success-banner .success-actions {
    width: 100%;
    margin-left: 0;
  }
  .success-banner .success-actions > * { flex: 1; }

  .chip-row {
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 12px;
    scrollbar-width: none;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  .thead, .trow {
    grid-template-columns: 40px minmax(0, 1fr) 52px;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .thead > :nth-child(3), .trow > :nth-child(3),
  .thead > :nth-child(5), .trow > :nth-child(5) { display: none; }
  .trow .btn { width: 52px; min-height: 40px; }

  .destination-row { grid-template-columns: 1fr; }
  .destination-row .btn { width: 100%; }
  .stat-strip { gap: 18px; }
  .stat-strip .filter { margin-left: 0; width: 100%; }
  .stat-strip .filter input { width: 100%; }

  .detail-head { align-items: center; gap: 8px; }
  .detail-title {
    width: 100%;
    font-size: 20px;
    overflow-wrap: anywhere;
  }
  .detail-head .btn { flex: 1 1 auto; min-height: 40px; }
  .detail-head form {
    flex: 1 1 100%;
    display: flex;
  }
  .detail-head form .btn { width: 100%; }
  .detail-dest { width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .detail-stats { gap: 14px 20px; padding-top: 18px; }

  .panel-card { padding: 16px; }
  .confirm-dialog-body { padding: 20px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
  .release-row { align-items: flex-start; gap: 8px; }
  .release-row .msg { flex-basis: calc(100% - 60px); min-width: 0; }
  .release-action { min-height: 40px; }

  .toggle-row { align-items: flex-start; }
  .toggle-row form { width: 100%; margin-left: 0; }
  .toggle-row form .btn { width: 100%; }

  .kv > div { flex-direction: column; gap: 2px; }
  .kv dt { min-width: 0; }

  .save-row { flex-direction: column; }
  .save-row .btn { width: 100%; }
  .progressive-panel > summary { min-height: 44px; }
  .progressive-panel > summary small { margin-top: 2px; }

  .records form { width: 100%; align-items: stretch; }
  .records form select { flex: 1 1 auto; min-width: 0; }
  .records form .btn { min-height: 44px; }

  .codes { columns: 1; }
  .qr-code { max-width: 100%; height: auto; }

  .onboarding-steps li { flex-direction: column; justify-content: flex-start; text-align: center; }

  .segmented { display: flex; width: 100%; }
  .segmented a { flex: 1; flex-direction: column; gap: 0; text-align: center; }
  .data-collections nav { grid-template-columns: 1fr; }
  .data-section-head { flex-direction: column; }
  .document-card > summary { min-height: 44px; }
  .document-time { display: none; }
  .document-body { margin-left: 0; padding: 12px; }

  .public-main { padding: 16px; }
  .public-card { padding: 22px 18px; }

  .app-footer { padding: 16px; flex-wrap: wrap; }
}