@import url("tokens.css");
/* lathe — one stylesheet for the customer portal and the admin panel.
   No inline styles anywhere (the CSP forbids them); everything is a class here. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }   /* iOS zooms the page out if anything is wider than the viewport at first layout; nothing may widen it */
/* Sideways overflow, the root of every "the page scrolls to the right on a phone" bug: html and body both clip it (iOS
   ignores one without the other), body is positioned so the clip holds, and long unbreakable tokens (URLs, hostnames,
   ids) wrap anywhere by default, so no flex or grid item can grow past the viewport on their account. Anything that
   must stay on one line (badges, tabs, table cells) is scrolled or ellipsised locally, never by the document. */
body { position: relative; overflow-x: clip; }
.container { min-width: 0; max-width: 100%; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  font: 400 clamp(15px, .95rem + .1vw, 16px)/1.55 var(--font); color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1; width: 100%; }
h1, h2, h3 { font-family: var(--font-ui); line-height: 1.2; letter-spacing: var(--ui-track); margin: 0 0 var(--s-3); font-weight: var(--ui-weight); text-wrap: balance; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--s-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
ul { padding-left: 1.2em; margin: 0 0 var(--s-3); }
li { margin: 2px 0; }
code, pre, kbd { font-family: var(--mono); font-size: .875em; }
code { background: var(--card-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; word-break: break-all; }
pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
pre code { background: none; border: 0; padding: 0; font-size: .85rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
strong { font-weight: 600; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
.danger-text { color: var(--danger); }
.ok-text { color: var(--ok); }
.mono { font-family: var(--mono); font-size: .9em; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
.engine-row .label { display: flex; align-items: center; gap: 8px; }
.engine-row input[type="checkbox"] { width: 16px; height: 16px; }
.code-input { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .25em; text-align: center; }
.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; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

.container { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 720px) { .container { padding: 0 var(--s-5); } }
.narrow { max-width: var(--w-narrow); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: var(--r-s); box-shadow: var(--shadow-2); }
.skip:focus { left: 8px; }

/* ---------- header / nav ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: var(--s-4); min-height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-family: var(--font-ui); font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }
.brand .mark-bg { fill: currentColor; opacity: .1; }
.brand .mark-l { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.brand .mark-cur { fill: var(--accent); }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.brand-tag { font-family: var(--font-ui); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: var(--r-pill); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a:not(.btn), .nav button.link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: var(--r-s); color: var(--fg-2); font: inherit; font-family: var(--font-ui); font-size: .92rem; font-weight: 500; background: none; border: 0; cursor: pointer; transition: background var(--t), color var(--t); }
.nav a, .nav button.link, .theme > summary { white-space: nowrap; }
.site-admin .nav a, .site-admin .nav button.link, .site-admin .theme > summary { padding-inline: 8px; font-size: .88rem; }
.nav a:not(.btn):hover, .nav button.link:hover { background: var(--card-2); color: var(--fg); text-decoration: none; }
.nav .btn { margin-left: 6px; }
.nav a[aria-current="page"] { color: var(--fg); background: var(--card-2); }
.nav .sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.nav form { display: contents; }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform var(--t), opacity var(--t); content: ""; }
.nav-toggle span { top: 19px; }
.nav-toggle span::before { left: 0; top: -6px; }
.nav-toggle span::after { left: 0; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 719px) {
  .js .nav-toggle { display: block; }
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s-2) var(--s-4) var(--s-4); background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .js .nav.open { display: flex; }
  .js .nav a:not(.btn), .js .nav button.link { padding: 11px 12px; font-size: 1rem; }
  .js .nav .sep { width: auto; height: 1px; margin: 6px 0; }
  .js .nav .btn { width: 100%; justify-content: center; margin: 6px 0 0; }
}
/* the admin nav has more entries: collapse it into the menu below 980px, not just below 720px */
@media (min-width: 720px) and (max-width: 979px) {
  .js .site-admin .nav-toggle { display: block; }
  .js .site-admin .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s-2) var(--s-4) var(--s-4); background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .js .site-admin .nav.open { display: flex; }
  .js .site-admin .nav .sep { width: auto; height: 1px; margin: 6px 0; }
  .js .site-admin .nav .theme { width: 100%; }
  .js .site-admin .nav .theme .menu { position: static; box-shadow: none; border: 0; padding: 0 0 var(--s-2) var(--s-3); min-width: 0; }
}
.banner { background: var(--warn-soft); color: var(--warn); text-align: center; padding: 7px var(--s-4); font-size: .85rem; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); margin-top: var(--s-8); padding: var(--s-5) 0 var(--s-6); font-size: .85rem; color: var(--muted); }
.foot .container { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--fg); }
.foot .grow { flex: 1; }

/* ---------- page structure ---------- */
.page { padding-block: var(--s-6) var(--s-5); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-5); }
.page-head h1 { margin: 0; }
.page-head .lead { width: 100%; color: var(--muted); margin: 0; max-width: 60ch; overflow-wrap: anywhere; }   /* a hostname must wrap on a phone, not push the page sideways */
.page-head .actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.page-head .title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.section { margin: var(--s-5) 0; }
.stack > * + * { margin-top: var(--s-4); }
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid > * { min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.engine-line { flex-wrap: nowrap; align-items: flex-start; }                     /* the budget sits at the right on every engine's first line, never wrapping under one and not another */
.engine-line > span:first-child { flex: 1 1 auto; min-width: 0; }
.engine-line > .mono { flex: none; white-space: nowrap; }
.stack-sm > * + * { margin-top: var(--s-2); }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); box-shadow: var(--shadow); }
.card + .card { margin-top: var(--s-4); }
.grid > .card + .card, .features > .card + .card, .pricing > .card + .card, .stats > .stat + .stat { margin-top: 0; }   /* siblings in a grid start level */
.card > h2:first-child, .card-head { margin-bottom: var(--s-3); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.card-head .sub { color: var(--muted); font-size: .9rem; margin: 0; width: 100%; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head, .card.flush > p { padding: var(--s-4) var(--s-5) 0; }
.card.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.card.danger h2 { color: var(--danger); }
.card.soft { background: var(--card-2); box-shadow: none; }
@media (max-width: 719px) { .card { padding: var(--s-4); border-radius: var(--r-s); } .card.flush > .card-head, .card.flush > p { padding: var(--s-4) var(--s-4) 0; } }

/* ---------- alerts / flash / empty ---------- */
.alert { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); border: 1px solid var(--line); background: var(--card-2); margin: 0 0 var(--s-4); }
.alert p { margin: 0; }
.alert.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.alert.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); }
.alert.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.alert.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-2); }
.alert a { color: inherit; text-decoration: underline; }
.alert code { background: color-mix(in srgb, currentColor 8%, transparent); border-color: color-mix(in srgb, currentColor 20%, transparent); color: inherit; }
/* the flash is a toast: fixed at the bottom so it is seen wherever the page is scrolled to (an action returns to
   where it was taken), fades after a while, a click dismisses it */
.flash { position: fixed; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; max-width: min(92vw, 600px); padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); box-shadow: var(--shadow-2); margin: 0; font-weight: 500; cursor: pointer; animation: toast-in var(--t) both, toast-out .5s ease 9s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
.flash.error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  animation: toast-in var(--t) both; }   /* no fade: a failure stays until it is read */
@media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
.empty { text-align: center; padding: var(--s-7) var(--s-4); color: var(--muted); }
.empty h2 { color: var(--fg); }
.empty .btn { margin-top: var(--s-3); }
.empty svg { width: 40px; height: 40px; color: var(--line-2); margin-bottom: var(--s-3); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; min-height: 40px; border-radius: var(--r-s); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-family: var(--font-ui); font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t), border-color var(--t), transform var(--t), box-shadow var(--t); }
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--card); color: var(--fg); border-color: var(--line-2); }
.btn.secondary:hover { background: var(--card-2); border-color: var(--line-2); }
.btn.ghost { background: transparent; color: var(--fg-2); border-color: transparent; }
.btn.ghost:hover { background: var(--card-2); }
.btn.danger { background: var(--card); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.sm { padding: 5px 10px; min-height: 30px; font-size: .85rem; font-weight: 500; }
.btn.lg { padding: 12px 22px; min-height: 48px; font-size: 1.05rem; }
.btn.block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn svg { width: 16px; height: 16px; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: var(--s-4); }
.field .label, label.field > span:first-child { display: block; font-family: var(--font-ui); font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.field .hint { display: block; color: var(--muted); font-size: .85rem; margin-top: 6px; }
.field .error { display: block; color: var(--danger); font-size: .85rem; margin-top: 6px; font-weight: 500; }
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; padding: 9px 12px; min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--card); color: var(--fg); font: inherit; transition: border-color var(--t), box-shadow var(--t);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[aria-invalid="true"] { border-color: var(--danger); }
input::placeholder { color: var(--muted); opacity: .8; }
input[disabled], select[disabled] { opacity: .55; cursor: not-allowed; }
select { max-width: 100%; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.input-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.input-row > input, .input-row > select { flex: 1 1 220px; width: auto; min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .input-row > select, .input-row > input[type="text"] { flex-basis: 100%; } .input-row > .btn { flex: 1 1 auto; } }   /* on a phone the field takes the line and the button follows, instead of a truncated field beside it */
.card form.section-sm { margin-top: var(--s-4); }
progress { margin: 6px 0 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--accent); }
form.inline { display: inline; }
.form-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-4); }

/* choice cards (radio) */
/* a fieldset only for the accessible group name: no browser border, padding or min-width around the cards */
.choices { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border: 0; padding: 0; margin: 0; min-width: 0; }
.choice { position: relative; display: block; padding: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r); background: var(--card); cursor: pointer; transition: border-color var(--t), box-shadow var(--t); }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.choice .name { font-family: var(--font-ui); font-weight: var(--ui-weight); font-size: 1.02rem; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.choice .price { font-weight: 600; color: var(--fg); }
.choice .price small { color: var(--muted); font-weight: 400; }
.choice .spec { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.choice::after { content: ""; position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); transition: all var(--t); }
.choice:has(input:checked)::after { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }
.choice .name { padding-right: 24px; }
.choice:has(input[type="checkbox"])::after { border-radius: 4px; }                                   /* a checkbox card: square, ticked */
.choice:has(input[type="checkbox"]:checked)::after { background: var(--accent); }
.choice:has(input[type="checkbox"]:checked)::before { content: ""; position: absolute; top: 16px; right: 19px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); z-index: 1; }
.choices.places { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-bottom: var(--s-4); }
.choice.compact { padding: var(--s-3) var(--s-4); }
.choice.compact .name { font-size: .98rem; }
.choice.compact .price { font-size: .8rem; font-weight: 500; color: var(--muted); }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: .76rem; font-weight: 600; letter-spacing: .01em; background: var(--card-2); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap; vertical-align: middle; text-transform: lowercase; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.ok, .badge.running, .badge.active, .badge.paid, .badge.done { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.badge.busy, .badge.pending, .badge.queued, .badge.past_due, .badge.provisioning { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.badge.busy::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.badge.error, .badge.failed, .badge.suspended, .badge.danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.badge.neutral::before, .badge.cancelled::before, .badge.deleted::before { opacity: .4; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-family: var(--font-ui); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--card-2) 60%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.actions { text-align: right; white-space: nowrap; }
td.actions > form, td.actions > a, td.actions > .btn { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 0 0 8px; }   /* several actions in one cell sit on one line */
td.actions > form.inline { margin-right: 0; }
td .badge { vertical-align: baseline; }
.card.flush table th:first-child, .card.flush table td:first-child { padding-left: var(--s-5); }
.card.flush table th:last-child, .card.flush table td:last-child { padding-right: var(--s-5); }
@media (max-width: 719px) {
  .card.flush table th:first-child, .card.flush table td:first-child { padding-left: var(--s-4); }
  .card.flush table th:last-child, .card.flush table td:last-child { padding-right: var(--s-4); }
  table.stack thead { display: none; }
  table.stack tr { display: block; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 4px 0 !important; border: 0; }
  table.stack td::before { content: attr(data-th); color: var(--muted); font-family: var(--font-ui); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; flex: 0 0 auto; }
  table.stack td.actions { justify-content: flex-end; padding-top: var(--s-2) !important; }
  table.stack td.actions::before { content: none; }
  table.stack td.num { text-align: right; }
  table.stack td.full { display: block; }
  table.stack td:empty { display: none; }
  table.stack td.full::before { display: block; margin-bottom: 2px; }
}

/* ---------- key/value & stats ---------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s-4); margin: 0; font-size: .95rem; }
.kv dt { color: var(--muted); font-family: var(--font-ui); font-size: .92em; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; } }
.stats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.stats > .stat { min-width: 0; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); box-shadow: var(--shadow); }
.stat .n { font-family: var(--font-ui); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: .85rem; margin-top: 4px; }
.stat.warn .n { color: var(--warn); }
.stat.danger .n { color: var(--danger); }
.stat a { color: inherit; }

/* ---------- code blocks with copy ---------- */
.code { position: relative; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 44px 12px 14px; margin: 0 0 var(--s-3); }
.code pre { font-size: .85rem; line-height: 1.5; }
.code .copy { position: absolute; top: 6px; right: 6px; display: none; }
.js .code .copy { display: inline-flex; }
.copy { align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: all var(--t); }
.copy:hover { background: var(--card); border-color: var(--line-2); color: var(--fg); }
.copy svg { width: 16px; height: 16px; }
.copy.done { color: var(--ok); }
.code .reveal { position: absolute; top: 6px; right: 40px; display: none; }
.js .code .reveal { display: inline-flex; }
.reveal { align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: all var(--t); }
.reveal:hover { background: var(--card); border-color: var(--line-2); color: var(--fg); }
.reveal[aria-pressed="true"] { color: var(--accent); }
.reveal svg { width: 16px; height: 16px; }
.code { padding-right: 80px; }

/* ---------- monitoring: stat tiles + single-series sparklines (2px line, no legend, text in text tokens) ---------- */
.mon .tiles { margin-bottom: var(--s-4); }
.mon .tiles .stat { padding: var(--s-3) var(--s-4); }
.mon .tiles .stat .n { font-size: 1.35rem; }
.mon .tiles .stat .l { font-size: .8rem; }
.sparks { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.spark-fig { margin: 0; position: relative; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card-2); }
.spark-fig figcaption { display: flex; justify-content: space-between; gap: var(--s-2); font-family: var(--font-ui); font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.spark { display: block; width: 100%; height: 44px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-tip { position: absolute; top: 6px; right: var(--s-3); font: 500 .78rem/1.4 var(--mono); color: var(--fg); background: var(--card); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 8px; pointer-events: none; }
.spark-data { margin-top: var(--s-4); }
.spark-data summary { cursor: pointer; }
.spark-data table { margin-top: var(--s-2); font-size: .85rem; }
.code-label { overflow-wrap: normal; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); font-family: var(--font-ui); font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.code-label .muted { font-weight: 400; }

/* ---------- tabs ---------- */
.tabs { margin-top: var(--s-4); }
.tablist { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }   /* wraps on narrow screens rather than scrolling sideways */
.tablist [role="tab"] { padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-family: var(--font-ui); font-size: .9rem; font-weight: 500; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tablist [role="tab"]:hover { color: var(--fg); }
.tablist [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.js [role="tabpanel"][hidden] { display: none; }
html:not(.js) .tablist { display: none; }
html:not(.js) [role="tabpanel"] + [role="tabpanel"] { margin-top: var(--s-3); }
html:not(.js) [role="tabpanel"] > h3 { display: block; }
.js [role="tabpanel"] > h3 { display: none; }

/* ---------- progress ---------- */
progress { width: 100%; height: 8px; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--card-2); }
progress::-webkit-progress-bar { background: var(--card-2); border-radius: var(--r-pill); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--r-pill); }
progress::-moz-progress-bar { background: var(--accent); border-radius: var(--r-pill); }
progress.warn::-webkit-progress-value { background: var(--warn); }
progress.warn::-moz-progress-bar { background: var(--warn); }
progress.danger::-webkit-progress-value { background: var(--danger); }
progress.danger::-moz-progress-bar { background: var(--danger); }

/* ---------- dialog ---------- */
dialog.dialog { border: 1px solid var(--line); border-radius: var(--r); padding: 0; background: var(--card); color: var(--fg); width: min(92vw, 440px); box-shadow: var(--shadow-2); }
dialog.dialog::backdrop { background: rgba(10, 12, 18, .5); backdrop-filter: blur(2px); }
.dialog-in { padding: var(--s-5); }
.dialog-in h2 { margin-bottom: var(--s-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 479px) { .dialog-actions { flex-direction: column-reverse; } .dialog-actions .btn { width: 100%; } }

/* ---------- lists of instances ---------- */
.list { display: flex; flex-direction: column; }
.list-item { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); color: inherit; transition: background var(--t); }
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--card-2); text-decoration: none; }
.list-item .title { font-weight: 600; font-family: var(--mono); font-size: .95rem; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.list-item .meta { color: var(--muted); font-size: .88rem; display: flex; flex-wrap: wrap; gap: 4px var(--s-3); }
.list-item .title, .list-item .meta { grid-column: 1; }   /* explicit: an item with a fixed row is auto-placed first and would take column 1 */
.list-item .chev { color: var(--muted); grid-column: 2; grid-row: 1 / span 2; }
.list-item .chev svg { width: 18px; height: 18px; }

/* instance names and tags */
.sans { font-family: var(--font); }
.section-sm { margin: 0 0 var(--s-4); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { display: inline-block; font: 600 .74rem/1.5 var(--mono); padding: 1px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
a.tag:hover { text-decoration: none; border-color: var(--accent); }
button.tag { cursor: pointer; }
button.tag:hover { border-color: var(--accent); }
.tag.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.list-item .meta .tags { gap: 4px; }
.page-head .tags { margin-top: var(--s-2); }
td .tags { flex-wrap: nowrap; }
@media (max-width: 719px) { .list-item { padding: var(--s-3) var(--s-4); } }

/* ---------- landing ----------
   Spec-sheet layout: hairlines instead of cards, numbered sections, one accent used for data and links, tabular
   figures in every column of numbers. Everything is a class (CSP). Chart marks: accent for Lathe, muted for the rest. */
.lp-lbl { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-3); }
.lp-note { color: var(--muted); font-size: .88rem; margin: var(--s-4) 0 0; max-width: 68ch; }
.lp-sub { color: var(--fg-2); font-size: 1.05rem; margin: var(--s-3) 0 0; max-width: 62ch; }
.lp-link { color: var(--fg-2); font-family: var(--font-ui); font-size: .95rem; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.lp-link:hover { color: var(--fg); border-color: var(--fg); text-decoration: none; }

.lp-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--s-7); align-items: start; padding-block: var(--s-8); }
.lp-hero h1 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem); letter-spacing: -.035em; line-height: 1.08; margin: 0 0 var(--s-5); max-width: 16ch; }
.lp-hero h1 em { font-style: normal; color: var(--muted); }
.lp-hero .lead { color: var(--fg-2); font-size: clamp(1.02rem, .95rem + .4vw, 1.15rem); max-width: 52ch; margin: 0 0 var(--s-6); text-wrap: pretty; }
.lp-hero .cta, .lp-first .cta { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.lp-hero-note { margin-top: var(--s-4); font-size: .88rem; }
.lp-fig { padding: var(--s-5); }
.lp-num { font-family: var(--font-ui); font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 0 0 var(--s-2); }
.lp-num span { font-family: var(--font); font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: var(--s-2); }
.lp-dl { margin: var(--s-4) 0 0; border-top: 1px solid var(--line); }
.lp-dl > div { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--line); align-items: baseline; font-size: .92rem; }
.lp-dl dt { font-family: var(--font-ui); font-weight: 500; }
.lp-dl dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-dl dd.n { color: var(--fg); font-weight: 600; min-width: 3.5em; text-align: right; }
.lp-fine { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: var(--s-3) 0 0; }

.lp-sec { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.lp-sec.lp-alt { background: var(--card-2); }
.lp-head { margin-bottom: var(--s-6); }
.lp-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.03em; margin: 0; max-width: 22ch; }
.lp-head .lp-lbl { margin-bottom: var(--s-3); }
.lp-traffic { min-width: 520px; }

.lp-table { min-width: 600px; font-size: .95rem; }
.lp-plans.stack { min-width: 0; }
.lp-table th, .lp-table td { padding: 14px 16px; }
.lp-table thead th { border-bottom-color: var(--line-2); }
.lp-table tbody th { font-family: var(--font-ui); font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.lp-table th:first-child, .lp-table td:first-child { padding-left: 0; }
.lp-table th:last-child, .lp-table td:last-child { padding-right: 0; }
.lp-table tbody tr:hover td { background: none; }
.lp-plans .lp-price { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 700; }
.lp-plans td.actions a { font-family: var(--font-ui); font-weight: 500; font-size: .9rem; }

.lp-spec { margin: 0; border-top: 1px solid var(--line-2); }
.lp-spec > div { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: var(--s-7); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.lp-spec dt { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.lp-spec dd { margin: 0; color: var(--fg-2); max-width: 68ch; }
.lp-conn { margin-top: var(--s-7); border-top: 1px solid var(--line-2); padding-top: var(--s-5); }
.lp-conn .code { margin: 0; background: var(--card); }
.lp-conn .code pre { white-space: pre; overflow-x: auto; }

.lp-two > div { grid-template-columns: minmax(200px, 300px) 1fr; }
.lp-faq { max-width: 800px; }
.lp-faq details { border-bottom: 1px solid var(--line); }
.lp-faq details:first-of-type { border-top: 1px solid var(--line-2); }
.lp-faq summary { cursor: pointer; list-style: none; padding: var(--s-4) 40px var(--s-4) 0; position: relative; font-family: var(--font-ui); font-weight: 500; font-size: 1.02rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ""; position: absolute; right: 6px; top: 24px; width: 9px; height: 9px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--t); }
.lp-faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.lp-faq details p { color: var(--fg-2); padding: 0 48px var(--s-4) 0; margin: 0; }

.lp-cta { background: var(--fg); color: var(--bg); padding-block: var(--s-8); text-align: center; }
.lp-cta h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); letter-spacing: -.03em; margin: 0 auto var(--s-3); max-width: 22ch; color: inherit; }
.lp-cta p { color: color-mix(in srgb, var(--bg) 70%, var(--fg)); margin: 0 0 var(--s-6); }
.lp-cta .btn { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.lp-cta .btn:hover { background: var(--card-2); border-color: var(--card-2); }
:root[data-mode="dark"] .lp-cta { background: var(--card-2); color: var(--fg); border-top: 1px solid var(--line); }
:root[data-mode="dark"] .lp-cta p { color: var(--muted); }
:root[data-mode="dark"] .lp-cta .btn { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
:root[data-mode="dark"] .lp-cta .btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.lp-cta + .foot { margin-top: 0; }

@media (max-width: 959px) {
  .lp-hero { grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
  .lp-spec > div, .lp-two > div { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }
}
@media (max-width: 719px) {
  .lp-sec { padding-block: var(--s-7); }
  .lp-table th, .lp-table td { padding: 12px 10px; font-size: .9rem; }
  .lp-sec .table-wrap { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .lp-hero .cta { gap: var(--s-4); }
}

/* Human | Agent switch (nav) and the agent page */
.nav .switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin-right: 4px; border: 1px solid var(--line-2); border-radius: var(--r-pill); }
.nav .switch a { padding: 3px 10px; border-radius: calc(var(--r-pill) - 2px); font-size: .78rem; font-weight: 600; color: var(--muted); }
.nav .switch a:hover { background: transparent; color: var(--fg); }
.nav .switch a[aria-current="true"], .nav .switch a[aria-current="true"]:hover { background: var(--fg); color: var(--bg); }
.agent-doc { margin: 0; padding: var(--s-5) 80px var(--s-5) var(--s-5); background: var(--card); }
.agent-doc pre { white-space: pre-wrap; font-size: .82rem; line-height: 1.6; color: var(--fg-2); }
@media (max-width: 719px) { .js .nav .switch { align-self: flex-start; margin: 4px 0 8px 12px; } .agent-doc { padding: var(--s-4) 80px var(--s-4) var(--s-4); } .agent-doc pre { font-size: .78rem; } }

/* ---------- auth ---------- */
.auth { min-height: calc(100dvh - 58px - 120px); display: grid; place-items: center; padding-block: var(--s-6); }
.auth .card { width: min(100%, 420px); padding: var(--s-6); }
.auth h1 { font-size: 1.5rem; }
.auth .brand { margin-bottom: var(--s-4); }

/* ---------- prose (legal) ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s-5); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--fg-2); }

/* ---------- misc ---------- */
.pending-hero { text-align: center; padding: var(--s-7) var(--s-4); }
.pending-hero .spinner { width: 44px; height: 44px; margin: 0 auto var(--s-4); border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.steps { list-style: none; padding: 0; margin: var(--s-4) auto 0; max-width: 360px; text-align: left; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.steps li { display: flex; gap: 10px; align-items: center; }
.steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; }
.steps li.done { color: var(--fg-2); }
.steps li.done::before { background: var(--ok); }
.steps li.now { color: var(--fg); font-weight: 500; }
.dialog-in h2 { font-family: var(--font-ui); }
.steps li.now::before { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
.filters { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.filters input[type="search"] { flex: 1 1 200px; width: auto; }
.pill-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.pill-nav a { padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--fg-2); font-family: var(--font-ui); font-size: .86rem; font-weight: 500; }
.pill-nav a:hover { background: var(--card-2); text-decoration: none; }
.pill-nav a[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.truncate { max-width: min(420px, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.err-page { text-align: center; padding-block: var(--s-8); }
.err-page .code { display: inline-block; padding: 4px 12px; margin-bottom: var(--s-4); font-family: var(--mono); color: var(--muted); }

/* ---------- embedded SQL console: pgweb's fixed-position layout lives inside this box; the transform makes it
   the containing block for its position: fixed children, so it sits under our header instead of over it ---------- */
.pgweb-host { position: relative; height: calc(100dvh - 58px); transform: translateZ(0); overflow: hidden; background: var(--card); }

/* ---------- theme switcher (details/summary works without JS; app.js makes it instant) ---------- */
.theme { position: relative; }
.theme > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--r-s); color: var(--fg-2); font-family: var(--font-ui); font-size: .9rem; font-weight: 500; }
.theme > summary::-webkit-details-marker { display: none; }
.theme > summary:hover, .theme[open] > summary { background: var(--card-2); color: var(--fg); }
.theme > summary svg { width: 16px; height: 16px; }
.theme .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: var(--s-2); z-index: 30; }
.theme .menu .menu-head { margin: 6px 8px 4px; font: 600 .7rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.theme .menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 7px 8px; border-radius: var(--r-s); color: var(--fg); font-size: .9rem; }
.theme .menu a:hover { background: var(--card-2); text-decoration: none; }
.theme .menu a[aria-current="true"]::after { content: "\2713"; color: var(--accent); font-weight: 700; }
.theme .menu a .lbl { display: inline-flex; align-items: center; gap: 10px; }
.theme .menu .sw { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--line-2); flex: 0 0 auto; }
.sw-classic { background: linear-gradient(135deg, #ffffff 50%, #3355d8 50%); }
.sw-dev { background: linear-gradient(135deg, #0b0c0f 50%, #7f92ff 50%); }
.sw-terminal { background: linear-gradient(135deg, #090c09 50%, #3ddc84 50%); }
.sw-paper { background: linear-gradient(135deg, #fbfaf8 50%, #0b0b0b 50%); }
.theme .menu .desc { display: block; color: var(--muted); font-size: .78rem; }
@media (max-width: 719px) {
  .js .nav .theme { width: 100%; }
  .js .nav .theme .menu { position: static; box-shadow: none; border: 0; padding: 0 0 var(--s-2) var(--s-3); min-width: 0; }
}

/* ---------- per-theme touches ---------- */
@keyframes blink { 50% { opacity: 0; } }
:root[data-theme="dev"] .brand .cur, :root[data-theme="terminal"] .brand .cur { animation: blink 1.1s steps(1) infinite; transform-origin: center; }
:root[data-theme="dev"] .card, :root[data-theme="dev"] .stat, :root[data-theme="terminal"] .card, :root[data-theme="terminal"] .stat { box-shadow: none; }
:root[data-theme="dev"] h1 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); }
:root[data-theme="dev"] .btn, :root[data-theme="terminal"] .btn { font-size: .9rem; }
:root[data-theme="dev"] .btn.lg, :root[data-theme="terminal"] .btn.lg { font-size: 1rem; }
:root[data-theme="dev"] code, :root[data-theme="terminal"] code { border-radius: var(--r-s); }
:root[data-theme="terminal"] body { font-size: 15px; }
:root[data-theme="terminal"] .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
:root[data-theme="terminal"] h1 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); }
:root[data-theme="terminal"] .page-head h1::before, :root[data-theme="terminal"] .lp-hero h1::before, :root[data-theme="terminal"] .auth h1::before { content: "> "; color: var(--accent); }
:root[data-theme="terminal"] .badge::before, :root[data-theme="terminal"] .steps li::before { border-radius: 0; }
:root[data-theme="terminal"] .badge { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
:root[data-theme="terminal"] .btn { text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
:root[data-theme="terminal"] .btn:not(.secondary):not(.ghost):not(.danger) { box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
:root[data-theme="terminal"] .btn:not(.secondary):not(.ghost):not(.danger):active { box-shadow: none; transform: translate(2px, 2px); }
:root[data-theme="terminal"] ::selection { background: var(--accent); color: var(--on-accent); }
/* paper: black (ink) buttons, hairline cards, an opaque bar; links keep the blue */
:root[data-theme="paper"] .btn:not(.secondary):not(.ghost):not(.danger) { background: var(--fg); border-color: var(--fg); color: var(--bg); }
:root[data-theme="paper"] .btn:not(.secondary):not(.ghost):not(.danger):hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); border-color: color-mix(in srgb, var(--fg) 86%, var(--bg)); }
:root[data-theme="paper"] .card, :root[data-theme="paper"] .stat { box-shadow: none; }
:root[data-theme="paper"] .top { background: color-mix(in srgb, var(--bg) 97%, transparent); }
:root[data-theme="paper"] .tag.on, :root[data-theme="paper"] .pill-nav a[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
:root[data-theme="paper"][data-mode="dark"] .lp-cta .btn { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* instance page: the machine, then one section per engine */
.chip { display: inline-block; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); margin-left: 6px; vertical-align: middle; }
.engine-sec { margin-top: var(--s-6); }
.engine-sec > .card-head { align-items: baseline; }
.engine-sec .eyebrow { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.engine-sec .card-head h2 { font-size: 1.35rem; }
.engine-sec .facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--muted); font-size: .9rem; margin: 0; }
.engine-sec .facts .mono { color: var(--fg); }
.engine-sec .grid { margin-top: var(--s-4); }
.stats.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }

/* the instance page's primary tabs: Overview, one per engine, Backups, Settings */
.tabs.primary { margin-top: 0; }
.tabs.primary > .tablist { gap: 0; margin-bottom: var(--s-4); flex-wrap: wrap; position: relative; }   /* tabs that do not fit move into "More" (app.js); until the script has run they wrap, so the strip never widens the page (iOS lays the page out at the first width it sees) */
.tabs.primary > .tablist [role="tab"] { padding: 10px 14px; font-size: .95rem; }
.tabs.primary > .tablist [role="tab"] .muted { font-weight: 400; margin-left: 4px; }
.page-head .facts, .about .facts { width: 100%; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.page-head .facts .chip, .about .facts .chip { margin: 0; text-decoration: none; }
.tabs.primary [role="tabpanel"] > .card + .card, .tabs.primary [role="tabpanel"] > .grid + .card, .tabs.primary [role="tabpanel"] > .card + .grid { margin-top: var(--s-4); }

/* engine budgets: a stacked bar, a slider and a number per engine */
.budget-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--line); }
.budget-bar .seg { display: block; height: 100%; width: 0; transition: width var(--t); }
.seg-postgres .swatch, .budget-bar .seg-postgres { background: var(--accent); }
.seg-redis .swatch, .budget-bar .seg-redis { background: #d64545; }
.seg-couchdb .swatch, .budget-bar .seg-couchdb { background: #d9822b; }
.seg-nats .swatch, .budget-bar .seg-nats { background: #2f9e6f; }
.engine-row .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 2px; opacity: .9; }
.engine-row .slider-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center; margin-top: 6px; }
.engine-row .slider-row .input-row input[type="number"] { width: 6.5em; }
.engine-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.engine-row input[type="range"]:disabled, .engine-row input[type="number"]:disabled { opacity: .45; }
.engine-row:has(input[type="checkbox"]:not(:checked)) .swatch { opacity: .3; }
form.budget.over [data-budget-note] { color: var(--danger); font-weight: 600; }
form.budget.over .budget-bar { outline: 2px solid var(--danger); outline-offset: 1px; }

/* monitoring tab: range switcher and larger charts with axes */
.range { display: inline-flex; gap: 2px; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; }
.range a { padding: 4px 12px; border-radius: 999px; font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.range a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.charts { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.chart-fig { margin: 0; position: relative; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card-2); }
.chart-fig figcaption { display: flex; justify-content: space-between; gap: var(--s-2); font-family: var(--font-ui); font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.chart-fig figcaption .muted { font-weight: 500; }
.chart-wrap { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: stretch; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font: 500 .72rem/1 var(--mono); color: var(--muted); text-align: right; padding: 2px 0; }
.chart { display: block; width: 100%; height: 160px; overflow: visible; }
.chart line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-x { display: flex; justify-content: space-between; font: 500 .72rem/1 var(--mono); color: var(--muted); margin-top: 4px; }
.chart-fig .spark-tip { top: var(--s-3); }
.mon-sec { margin-top: var(--s-5); }
.mon-sec h3 { margin: 0 0 var(--s-3); }

/* vertical rhythm on the instance page: a block that follows tiles, sparklines or charts gets room */
.tiles + .sparks, .tiles + .charts, .tiles + .grid, .tiles + p, .tiles + .stack, .tiles + details,
.sparks + .grid, .sparks + p, .sparks + details, .sparks + .stack, .charts + details, .charts + p,
.stats + .sparks, .code + .tiles, p + .tiles, .tabs + .tiles, .tabs + p { margin-top: var(--s-4); }
.engine-sec .grid.section-sm { margin-top: var(--s-5); margin-bottom: 0; }
.engine-sec h3 { margin: 0 0 var(--s-2); }
.mon-sec .stats + .charts { margin-top: var(--s-4); }
.tiles + .muted.small { margin-top: var(--s-3); }

/* opening a tab by hash scrolls the panel under the sticky header: leave room for it */
[role="tabpanel"], .card[id], .page-head { scroll-margin-top: 80px; }
/* on a phone the tile grid is two columns; a lone last tile takes the whole row */
@media (max-width: 640px) {
  .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .engine-row .label { flex-wrap: wrap; }
  .engine-row .label > .muted { flex-basis: 100%; padding-left: 26px; margin-top: -2px; }
}
.card.flush > .card-head + p { padding-top: 0; }                /* an empty state right under the heading: no double gap */
.card.flush > p:last-child { padding-bottom: var(--s-4); }

/* engine consoles and management */
.console-out { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-3); min-height: 120px; max-height: 320px; overflow: auto; font: .82rem/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; margin: 0; }
table.keys td, table.keys th { font-size: .85rem; }
table.keys td:first-child { font-family: var(--mono); cursor: pointer; color: var(--accent); word-break: break-all; }
table.keys tr.open td:first-child { font-weight: 600; }
table.keys .value { font: .78rem/1.4 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--muted); max-height: 160px; overflow: auto; margin: 0; }
.extensions .installed .tag { cursor: default; }
.extensions form.inline { display: inline; }
.engine-sec h3.section-sm { margin-top: var(--s-5); margin-bottom: var(--s-3); }
.engine-sec .grid.section-sm h3.section-sm { margin-top: var(--s-4); }

/* ---- instance header: "Instances / name ▾ · status", the tab strip right under it (a repository-style header) */
.inst-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) 6px; margin: 0 0 var(--s-3); min-width: 0; }
.inst-head .crumb { color: var(--muted); font-size: 1.05rem; }
.inst-head .crumb:hover { color: var(--fg); text-decoration: none; }
.inst-head .slash { color: var(--muted); font-size: 1.25rem; }
.inst-head .switch { position: relative; min-width: 0; }   /* no percentage max-width here: it resolves against an intrinsic width and squeezes the name */
.inst-head .switch > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 8px; margin-left: -4px; border-radius: var(--r-s); }
.inst-head .switch > summary::-webkit-details-marker { display: none; }
.inst-head .switch > summary:hover, .inst-head .switch[open] > summary { background: var(--card-2); }
.inst-head .switch > summary svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.inst-head h1 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); line-height: 1.25; overflow-wrap: anywhere; text-wrap: wrap; }   /* balanced wrapping would break a short name in two inside a shrink-to-fit summary */
.inst-head .id { margin-left: 2px; }
.inst-head .menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 300px; max-width: min(380px, calc(100vw - 2 * var(--s-4))); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: var(--s-2); z-index: 30; }
.inst-head .menu .menu-head { margin: 6px 8px 4px; font: 600 .7rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.inst-head .menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 7px 8px; border-radius: var(--r-s); color: var(--fg); font-size: .92rem; }
.inst-head .menu a > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.inst-head .menu a:hover { background: var(--card-2); text-decoration: none; }
.inst-head .menu a[aria-current] { font-weight: 600; }
.inst-head .menu a.new { border-top: 1px solid var(--line); border-radius: 0 0 var(--r-s) var(--r-s); margin-top: 4px; padding-top: 9px; color: var(--accent); font-weight: 500; }
.inst-head .menu a.new::before { content: "+"; font-weight: 600; margin-right: 6px; }
.inst-head .menu a.new:hover { background: var(--accent-soft); }
html:not(.js) .inst-head .switch > summary { pointer-events: none; }
@media (max-width: 640px) { .inst-head { position: relative; } .inst-head .switch { position: static; } .inst-head .menu { left: 0; right: 0; min-width: 0; max-width: none; } }   /* the menu spans the header on a phone instead of running off the edge */

.tabs.primary > .tablist > .more { margin-left: auto; position: relative; flex: none; }
.tabs.primary > .tablist > .more > summary { list-style: none; display: inline-flex; align-items: center; gap: 2px; padding: 10px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font-ui); font-size: .95rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.tabs.primary > .tablist > .more > summary::-webkit-details-marker { display: none; }
.tabs.primary > .tablist > .more > summary:hover, .tabs.primary > .tablist > .more[open] > summary { color: var(--fg); }
.tabs.primary > .tablist > .more > summary svg { width: 14px; height: 14px; }
.tabs.primary > .tablist > .more > .menu { position: absolute; right: 0; top: calc(100% + 2px); min-width: 180px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); padding: var(--s-2); z-index: 30; }
.tabs.primary > .tablist > .more > .menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--fg); font: inherit; font-family: var(--font-ui); font-size: .92rem; font-weight: 500; cursor: pointer; }
.tabs.primary > .tablist > .more > .menu button:hover { background: var(--card-2); }
.tabs.primary > .tablist > .more > .menu button[hidden] { display: none; }
.tabs.primary > .tablist > [role="tab"] .count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-size: .74rem; font-weight: 600; line-height: 1.5; color: var(--muted); text-align: center; }
.tabs.primary > .tablist > [role="tab"][aria-selected="true"] .count { color: var(--fg-2); }
.tabs.primary > .alert { margin-top: 0; }

/* the About strip at the top of Overview: plan, place, network, age, hostname, the engines, tags */
.about { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.about .facts-line { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; color: var(--muted); font-size: .92rem; }
.about .facts-line > span { display: inline-flex; align-items: center; gap: 6px; }
.about .facts-line svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.about .facts-line a { color: var(--fg-2); }
.about .host { margin: var(--s-2) 0 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; }
.about .host .mono { color: var(--fg); }
.about .facts { margin-top: var(--s-3); }
.about .tags { margin-top: var(--s-2); }
.field.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.field.inline .label { margin: 0; white-space: nowrap; }
.field.inline select { width: auto; min-width: 140px; min-height: 36px; padding-block: 6px; }
form.inline { display: inline-block; margin-right: 6px; }

/* the activity log: time and type stay whole, the payload takes what is left and is cut with an ellipsis */
table.activity td.payload { max-width: 0; width: 100%; }
table.activity td.payload code { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; overflow-wrap: normal; }

/* ---- landing: the three-option frame and the value pillars */
.lp-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.lp-three > div { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.lp-three > div.us { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lp-three h3 { font-size: 1.05rem; margin: 0 0 var(--s-2); letter-spacing: -.01em; }
.lp-three .lp-lbl { margin-bottom: var(--s-2); }
.lp-three p { margin: 0; color: var(--fg-2); font-size: .95rem; }
.lp-three ul { margin: var(--s-3) 0 0; padding-left: 1.1em; color: var(--fg-2); font-size: .92rem; }
.lp-three li + li { margin-top: 4px; }
.lp-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-4); margin: 0 0 var(--s-7); }
.lp-pillars > div { padding: var(--s-4) var(--s-5); border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--r) var(--r) 0; }
.lp-pillars .n { font-family: var(--font-ui); font-weight: 700; color: var(--accent); font-size: .8rem; letter-spacing: .08em; margin: 0 0 4px; }
.lp-pillars h3 { font-size: 1.05rem; margin: 0 0 6px; letter-spacing: -.01em; }
.lp-pillars p { margin: 0; color: var(--fg-2); font-size: .92rem; }
.lp-not { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-5); }
.lp-not h3 { font-size: 1rem; margin: 0 0 var(--s-2); }
.lp-not ul { margin: 0; padding-left: 1.1em; color: var(--fg-2); }
@media (max-width: 860px) { .lp-three { grid-template-columns: 1fr; } .lp-not { grid-template-columns: 1fr; } }

/* ---- status page: one word, one colour, no ambiguity */
.st-head { display: flex; align-items: baseline; gap: var(--s-3); }
.st-head .st-dot { position: relative; top: -.15em; }
.st-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); flex: none; }
.st-ok .st-dot, .st-badge.st-ok .st-dot { background: #1a9c5b; }
.st-degraded .st-dot, .st-badge.st-degraded .st-dot { background: #c8891a; }
.st-down .st-dot, .st-badge.st-down .st-dot, .st-maintenance .st-dot { background: #c4442e; }
.st-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.st-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.st-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-4); align-items: baseline;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.st-name { font-family: var(--font-ui); font-weight: 600; font-size: 1rem; color: var(--fg); }
.st-detail { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }
@media (min-width: 720px) {   /* room for three columns: name, detail, state */
  .st-list li { grid-template-columns: minmax(200px, 18rem) 1fr auto; align-items: center; }
  .st-detail { grid-column: 2; }
}
.st-open { margin-bottom: var(--s-6); display: grid; gap: var(--s-4); }
.st-inc { border-left: 3px solid var(--muted); }
.st-inc.st-degraded { border-left-color: #c8891a; }
.st-inc.st-down { border-left-color: #c4442e; }
.st-inc.st-maintenance { border-left-color: var(--accent); }
.st-inc h2 { font-size: 1.05rem; margin-bottom: var(--s-2); }

.copy, .reveal { min-width: 40px; min-height: 40px; }   /* a phone needs something to hit */
.foot a { display: inline-block; padding: 6px 0; }