/* H5 components — twelve blocks from the UI inventory. Colours and sizes only via tokens.css. */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-body)/1.45 var(--font); }
a { color: var(--action-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: var(--fs-table); }
h1 { font-size: var(--fs-h1); font-weight: 600; margin: 0; }
h2 { font-size: var(--fs-h2); font-weight: 600; margin: 0; }
h3 { font-size: var(--fs-h3); font-weight: 600; margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-control); }

/* 1. Console shell */
/* 224px: at 200 the person's own email and role were cut to 'voroninr@gmail.c…' and '· A…'. */
.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.shell__nav { background: var(--surface); border-right: 1px solid var(--border); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); position: sticky; top: 0; height: 100vh; }
.shell__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-h3); padding: var(--sp-2) var(--sp-3) var(--sp-6); }
.shell__nav a { color: var(--muted); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-control); }
.shell__nav a[aria-current="page"] { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--action) 14%, transparent); }
.shell__nav a:hover { text-decoration: none; color: var(--text); }
.shell__section { margin: var(--sp-4) 0 var(--sp-1); padding: 0 var(--sp-3); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.shell__foot { margin-top: auto; display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-caption); color: var(--muted); }
.shell__who { display: grid; gap: 2px; min-width: 0; }
.shell__email { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell__org { overflow-wrap: anywhere; }
/* min-width 0: a grid column grows to its widest unbreakable content, and the audit table's ids
   pushed the whole page wider than the window between 600 and 1100px. */
.shell__main { padding: var(--sp-6) var(--sp-6) var(--sp-12); max-width: 1120px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.page-head__sub { color: var(--muted); font-size: var(--fs-caption); margin-top: var(--sp-1); }
.shell__links { display: flex; flex-direction: column; gap: var(--sp-1); }
.shell__bar { display: contents; }
.shell__here, .shell__menu-btn { display: none; }
.shell__menu { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-height: 0; }
/* A phone (D18: a member wakes a machine from a phone): a slim bar with the mark, the page you
   are on and a Menu button; the whole navigation, grouped as on a computer, opens as a panel
   under the bar, with the person and Sign out at its foot. Without JavaScript the panel stays
   open, so nothing is ever out of reach. */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .shell__nav { position: sticky; top: 0; z-index: 20; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: 0; gap: 0; }
  .shell__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); min-height: 52px; }
  .shell__brand { padding: 0; font-size: var(--fs-body); }
  .shell__here { display: block; flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: var(--sp-3); border-left: 1px solid var(--border); }
  .shell__menu-btn { display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
  .shell__menu-btn svg path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
  .shell__menu-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--action) 14%, var(--surface)); }
  .shell__menu { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--border); max-height: calc(100vh - 52px); overflow-y: auto; }
  .js .shell__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px color-mix(in srgb, var(--text) 18%, transparent); }
  .js .shell__nav[data-open] .shell__menu { display: flex; }
  .shell__nav a { padding: var(--sp-3); font-size: var(--fs-body); }
  .shell__section { margin: var(--sp-3) 0 var(--sp-1); }
  .shell__foot { margin-top: var(--sp-3); padding: var(--sp-3); }
  .shell__main { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
}

/* First run for an admin (My desktops with nothing yet) */
.setup { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); max-width: 640px; }
.setup__step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
.setup__step h2 { font-size: var(--fs-h3); }
.setup__step p { color: var(--muted); margin: var(--sp-1) 0 var(--sp-3); }
.setup__step .btn { margin-top: var(--sp-1); }
.setup__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--action); color: var(--on-action); font-weight: 700; }
.setup__step.is-done .setup__n { background: var(--good); }
.setup__step.is-done h2 { color: var(--muted); }
.setup__step.is-later { opacity: .6; }

/* 2. Member shell */
.member { max-width: 520px; margin: 0 auto; padding: var(--sp-4); }
.member__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0 var(--sp-6); }
.member__who { color: var(--muted); font-size: var(--fs-caption); }

/* 3. Table */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.table th { text-align: left; font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--fs-table); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num { text-align: right; font-family: var(--mono); }
.table .saving { color: var(--action-text); }
.table tr.row-link { cursor: pointer; }
.table tr.row-link:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.table__empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--muted); }

/* 4. Status pill */
.pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3) 0 var(--sp-2); height: 22px; border-radius: var(--r-pill); font-size: var(--fs-table); color: var(--text); background: color-mix(in srgb, var(--pill-tone) 16%, transparent); white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pill-tone); }
.pill--muted { --pill-tone: var(--muted); }
.pill--waking { --pill-tone: var(--waking); }
.pill--good { --pill-tone: var(--good); }
.pill--warn { --pill-tone: var(--warn); }
.pill--bad { --pill-tone: var(--bad); }
.pill--pulse::before { animation: pulse var(--pulse) ease-in-out infinite; }
.pill--struck { text-decoration: line-through; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* 5. Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-control); border: 1px solid transparent; font: inherit; font-weight: 600; cursor: pointer; color: var(--text); background: transparent; }
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--secondary { border-color: var(--border-control); }
.btn--danger { border-color: var(--bad); color: var(--bad); }
.btn--link { color: var(--muted); font-weight: 400; padding: 0; height: auto; }
.btn--sm { height: 28px; padding: 0 var(--sp-3); font-size: var(--fs-table); }
.btn--block { width: 100%; }
.btn[disabled], .btn.htmx-request { opacity: .6; cursor: progress; }

/* 6. Form field */
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field__label { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.field__label--plain { text-transform: none; letter-spacing: 0; }  /* it quotes a name to type exactly */
.field__input { height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg); color: var(--text); font: inherit; }
.field__error { color: var(--bad); font-size: var(--fs-caption); }
.field--error .field__input { border-color: var(--bad); }
.choice { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choice__card { border: 1px solid var(--border-control); border-radius: var(--r-card); padding: var(--sp-3); cursor: pointer; }
.choice__card:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, transparent); }

/* 7. Wizard steps */
.steps { display: flex; justify-content: space-between; list-style: none; margin: 0 0 var(--sp-8); padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--border); }
.steps li { position: relative; text-align: center; font-size: var(--fs-caption); color: var(--muted); flex: 1; }
.steps li::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; margin: 0 auto var(--sp-2); border: 1px solid var(--border-control); background: var(--bg); }
.steps li.is-done::before { background: var(--good); border-color: var(--good); }
.steps li.is-now { color: var(--text); font-weight: 600; }
.steps li.is-now::before { background: var(--action); border-color: var(--action); }

/* 8. Confirm dialog */
dialog.confirm { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-6); max-width: 440px; }
dialog.confirm::backdrop { background: color-mix(in srgb, var(--bg) 70%, transparent); }
dialog.confirm h2 { margin-bottom: var(--sp-3); }
dialog.confirm .actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }

/* 9. Banner */
.banner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); border: 1px solid var(--banner-tone); background: color-mix(in srgb, var(--banner-tone) 14%, transparent); margin-bottom: var(--sp-6); }
.banner--warn { --banner-tone: var(--warn); }
.banner--bad { --banner-tone: var(--bad); }
.banner--info { --banner-tone: var(--waking); }
.banner__title { font-weight: 600; }
.banner__text { font-size: var(--fs-caption); }
.banner > .btn { flex-shrink: 0; white-space: nowrap; }

/* 10. Card and proposal card */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
.card--proposal { border-color: var(--action); border-width: 1.5px; }
.card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-6); margin: var(--sp-4) 0; }
.card__k { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.card__v { font-size: var(--fs-table); }
.cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.stat__v { font-family: var(--mono); font-size: var(--fs-h2); margin: var(--sp-2) 0 var(--sp-1); }
.stat__s { color: var(--muted); font-size: var(--fs-caption); }

/* 11. Machine card (member page) */
.mcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.mcard__name { font-family: var(--mono); font-size: var(--fs-body); }
.mcard__state { display: flex; align-items: center; gap: var(--sp-2); }
.mcard__sub { color: var(--muted); font-size: var(--fs-caption); }
.mcard__act { grid-column: 2; grid-row: 1 / span 4; align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.mcard__act:empty { display: none; }
.mcard--quiet { opacity: .6; }
.progress { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
/* Waking has no honest percentage (AWS, the tunnel and the desktop each take their time), so the
   bar moves without claiming one. It used to read --progress, which nothing set: an empty bar. */
.progress__bar { height: 100%; width: 35%; background: var(--waking); border-radius: 3px; animation: progress-slide 1.6s ease-in-out infinite; }
@keyframes progress-slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .progress__bar { animation: none; width: 100%; opacity: .5; } }
.open-phone { display: none; }
@media (max-width: 480px) {
  .mcard { grid-template-columns: 1fr; }
  .mcard__act { grid-column: 1; grid-row: auto; width: 100%; }
  .mcard__act form, .mcard__act .btn { width: 100%; }
  .open-desktop { display: none; }
  .open-phone { display: inline-flex; }
}

/* 12. Empty state and code block */
.empty { text-align: center; color: var(--muted); padding: var(--sp-12) var(--sp-4); }
.empty .mark { opacity: .5; margin-bottom: var(--sp-3); }
.codebox { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--sp-2) var(--sp-3); font-family: var(--mono); font-size: var(--fs-table); overflow-wrap: anywhere; }
.mark { display: inline-block; width: 20px; height: 20px; }
.mark path, .mark circle { stroke: var(--action); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.mark circle { fill: var(--action); stroke: none; }

/* Facade card (sign-in, consent): same card, centred, 340 px */
.facade { max-width: 360px; margin: var(--sp-12) auto; padding: var(--sp-6); }
.member--center { min-height: 100vh; display: grid; place-items: center; padding-block: var(--sp-6); }
.member--center .facade { margin: 0 auto; width: 100%; }
.facade__sub { margin-bottom: var(--sp-4); }
.btn--google { gap: var(--sp-2); }
.btn--google img { background: var(--logo-chip); border-radius: var(--r-pill); padding: 2px; flex: none; }
.facade h2 { margin: var(--sp-4) 0 var(--sp-1); }
.facade__form { margin-top: var(--sp-6); }

/* 13. Public site (h5.pt) */
.site { max-width: 960px; margin: 0 auto; padding: var(--sp-4) var(--sp-6) var(--sp-12); }
.site__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) 0 var(--sp-8); }
.site__nav { display: flex; align-items: center; gap: var(--sp-6); }
.site__nav a:not(.btn) { color: var(--muted); }
.site__hero { padding: var(--sp-12) 0; max-width: 720px; }
.site__hero h1 { font-size: var(--fs-display); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.site__lead { color: var(--muted); font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-6); }
.site__cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.site__note { color: var(--muted); font-size: var(--fs-caption); }
.site__section { padding: var(--sp-8) 0; }
.site__section h2 { margin-bottom: var(--sp-6); }
.site__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.site__steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
.site__steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: var(--sp-6); height: var(--sp-6); border-radius: var(--r-pill); background: var(--action); color: var(--on-action); font-weight: 600; margin-bottom: var(--sp-3); }
.site__steps p, .site__grid p, .site__price p { color: var(--muted); margin: var(--sp-2) 0 0; }
.site__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); }
.site__shot { margin: 0 0 var(--sp-8); }
.site__shot img { display: block; width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--border); box-shadow: 0 18px 40px color-mix(in srgb, var(--text) 14%, transparent); }
.site__shot figcaption { color: var(--muted); font-size: var(--fs-caption); margin-top: var(--sp-3); text-align: center; }
.site__pricing { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.site__amount { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; }
.site__compare h3 { margin-bottom: var(--sp-3); }
.site__table { width: 100%; border-collapse: collapse; }
.site__table td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.site__table tr:first-child td { font-weight: 600; }
.site__table td.num { text-align: right; white-space: nowrap; }
.site__fine { color: var(--muted); font-size: var(--fs-caption); margin-top: var(--sp-3); }
.site__price .btn { margin-top: var(--sp-4); }
.site__foot { color: var(--muted); font-size: var(--fs-caption); border-top: 1px solid var(--border); padding-top: var(--sp-4); margin-top: var(--sp-8); }
@media (max-width: 600px) { .site { padding: var(--sp-4); } .site__nav a:not(.btn) { display: none; } .site__grid { grid-template-columns: 1fr; } .site__hero h1 { font-size: var(--fs-h1); } }

.facade__or { color: var(--muted); font-size: var(--fs-caption); text-align: center; margin: var(--sp-4) 0 0; }

/* 14. AWS accounts */
.accts { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-bottom: var(--sp-8); }
.acct { display: grid; gap: var(--sp-4); align-content: start; }
.acct__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.acct__id { font-family: var(--mono); font-size: var(--fs-h2); }
.acct__facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.acct__facts .card__k { white-space: nowrap; }
.acct__facts p { margin: 0; }
.acct form { justify-self: start; }
.connect { padding: var(--sp-6); margin-bottom: var(--sp-8); }
.connect__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-4); }
.connect .steps { margin-bottom: var(--sp-6); }
.connect__body { display: grid; gap: var(--sp-2); max-width: 520px; }
.connect__hint { color: var(--muted); font-size: var(--fs-caption); margin: 0; }
.connect__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.connect__row .field__input { max-width: 220px; }
.connect__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.connect__cols form { display: grid; gap: var(--sp-2); align-content: start; }
@media (max-width: 600px) { .connect__cols { grid-template-columns: 1fr; } }
.connect__list { margin: var(--sp-2) 0 var(--sp-4); padding-left: var(--sp-4); display: grid; gap: var(--sp-2); }
.connect__item + .connect__item { border-top: 1px solid var(--border); margin-top: var(--sp-6); padding-top: var(--sp-6); }
.connect__foot { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); }
.aws-info { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.aws-info .card__v { margin: var(--sp-1) 0 var(--sp-3); }

/* 15. Team */
.invite { margin-bottom: var(--sp-6); }
.invite__form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); }
.invite__field { display: grid; gap: var(--sp-1); }
.invite__field:first-child { flex: 1 1 280px; }
.invite .connect__hint { margin-top: var(--sp-3); }
.person { display: flex; align-items: center; gap: var(--sp-3); }
.person__avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--action) 18%, transparent); color: var(--text); font-weight: 600; font-size: var(--fs-caption); flex: none; }
.person__name { display: block; font-weight: 500; }
.person__email { display: block; color: var(--muted); font-size: var(--fs-caption); }
.person__you { color: var(--muted); font-weight: 400; }
.team__actions { display: flex; justify-content: end; align-items: center; gap: var(--sp-3); }
.confirm-inline { position: relative; }
.confirm-inline summary { list-style: none; cursor: pointer; }
.confirm-inline summary::-webkit-details-marker { display: none; }
.confirm-inline form { position: static; margin-top: var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-3); box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 12%, transparent); }

/* 16. Billing */
.billing-stats, .mstats, .budget-card { margin-bottom: var(--sp-4); }
.billing-stats .card p, .mstats .card p { margin: 0; }
.stat__v--good { color: var(--good); }
.billing-act { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); }
.billing-act .card__v { margin: 0; max-width: 560px; }
.billing-act__start { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }
.billing-act__start > div { flex: 1; }
.billing-act__qty { width: 96px; }
/* A phone: tables keep their cells on one line and scroll sideways (names are hostnames and
   break badly at every dash). */
@media (max-width: 600px) { .table { display: block; overflow-x: auto; white-space: nowrap; background: linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 28%, transparent), transparent) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 28%, transparent), transparent) right / 14px 100% no-repeat scroll, var(--surface); } .page-head { flex-direction: column; gap: var(--sp-3); } }
/* A phone: the explanation on its own line, then the number and the button side by side. */
@media (max-width: 600px) {
  .billing-act { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .billing-act__start { flex-wrap: wrap; }
  .billing-act__start > div { flex-basis: 100%; }
  .billing-act__start > .btn { flex: 1; }
}
.section-title { margin: 0 0 var(--sp-4); }
.stat__v--text { font-family: inherit; font-weight: 600; }

/* 17. Legal pages */
.legal { max-width: 720px; padding: var(--sp-8) 0; line-height: 1.6; }
.legal h1 { font-size: var(--fs-h1); margin: 0 0 var(--sp-2); }
.legal h2 { margin: var(--sp-8) 0 var(--sp-3); }
.legal__date { color: var(--muted); font-size: var(--fs-caption); }
.legal ul { padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }

/* 18. Audit log */
.audit-chain { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-caption); margin: 0 0 var(--sp-4); }
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.filters a { color: var(--muted); padding: var(--sp-1) var(--sp-3); border-radius: 999px; border: 1px solid var(--border); font-size: var(--fs-table); }
.filters a[aria-current="page"] { color: var(--text); border-color: var(--action); background: color-mix(in srgb, var(--action) 14%, transparent); }
.filters a:hover { text-decoration: none; color: var(--text); }
.audit__time { white-space: nowrap; }
.table.audit td { overflow-wrap: break-word; }
.audit__ip { white-space: nowrap; }
/* Not enough room for six columns: the address is in the CSV and the row's details. */
@media (max-width: 1100px) { .audit__ip { display: none; } }
/* A phone shows what a billing page is for (hours and money); the instance and state are on the
   machine page. */
@media (max-width: 600px) { .bill__tech { display: none; } .bill th, .bill td { padding-left: var(--sp-2); padding-right: var(--sp-2); } }

/* 19. New machine */
.back { padding-left: 0; margin-bottom: var(--sp-2); display: inline-block; }
.blocker { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.blocker .card__v { margin: 0; }
.newm { display: grid; gap: var(--sp-6); max-width: 880px; }
.newm__block { display: grid; gap: var(--sp-2); }
.newm__h { font-size: var(--fs-h3); margin: 0; }
.newm__name { max-width: 320px; }
.choice--3 { grid-template-columns: repeat(3, 1fr); }
/* A phone: three size cards squeezed each price onto five lines (dogfood, 390 px). */
@media (max-width: 600px) { .choice--3 { grid-template-columns: 1fr; } }
.choice__card { display: grid; gap: var(--sp-1); }
.choice__card input { position: absolute; opacity: 0; pointer-events: none; }
.choice__card:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.choice__title { font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); }
.choice__sub { color: var(--muted); font-size: var(--fs-caption); }
.people { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.people__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-card); cursor: pointer; background: var(--surface); }
.people__row:has(input:checked) { border-color: var(--action); }
/* The OAuth consent's scopes: a plain list of the same rows, no browser fieldset frame. */
.oauth__scopes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.newm__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.newm__foot .connect__hint { max-width: 520px; }
form.inline { display: inline; }

/* 20. Machine page */
.mname { display: flex; align-items: center; gap: var(--sp-3); }
.page-head__actions { display: flex; gap: var(--sp-3); align-items: center; }
.mgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4); align-items: start; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-6); margin: 0; font-size: var(--fs-table); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
/* In a narrow card the label goes above its value: side by side, warm-tern-wsp6.tailmap.app broke
   at its hyphen on every screen (seen on a phone and in the three-card desktop layout). */
.card:has(> .facts) { container-type: inline-size; }
@container (max-width: 420px) {
  .facts { grid-template-columns: 1fr; row-gap: 2px; }
  .facts dd { margin-bottom: var(--sp-2); }
}
.mpeople { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.mpeople__who { flex: 1; }
.runlog { white-space: pre-wrap; font-size: var(--fs-caption); max-height: 260px; overflow: auto; margin-bottom: var(--sp-6); }
.danger { margin-top: var(--sp-8); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.danger__summary { cursor: pointer; color: var(--bad); font-weight: 600; }
.danger__form { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); max-width: 640px; }

/* 21. Agents and MCP */
.mcp-switch { display: flex; align-items: center; gap: var(--sp-3); }
.token-once { margin-bottom: var(--sp-6); display: grid; gap: var(--sp-2); }
.token-once .codebox { white-space: pre-wrap; display: block; }
.agent-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-4); }
.agent-form__name { flex: 1 1 260px; }
.agent-form__scopes { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-table); }
tr.is-revoked td { color: var(--muted); }
.agents-recent { margin-top: var(--sp-8); }
.mcp-switch .btn { white-space: nowrap; }

/* 22. Cost */
.cost__now { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-1); flex-wrap: wrap; }
.cost__big { font-family: var(--mono); font-size: var(--fs-h1); }
.cost__unit { color: var(--muted); font-size: var(--fs-table); }
.cost__month { margin: var(--sp-4) 0 var(--sp-3); }
.choice__price { color: var(--good); font-size: var(--fs-caption); font-family: var(--mono); }
.mgrid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* 23. Member page header */
.member__nav { display: flex; align-items: center; gap: var(--sp-3); }
.member__sub { margin: 0 0 var(--sp-6); }
.shell__signout { padding: 0; font-size: inherit; color: inherit; }

/* 24. My desktops: cards in the shell */
.desktops { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.desktops .mcard { margin: 0; }

/* 27. Support (feat.support-agent) */
.support-new { margin-bottom: var(--sp-8); }
.support-form { display: grid; gap: var(--sp-2); }
.support-form__text { min-height: 96px; resize: vertical; font: inherit; padding: var(--sp-2) var(--sp-3); }
.support-form__row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.support-form__row .field__input { max-width: 260px; }
.support-form__row .btn { margin-left: auto; }
.chat { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-3); }
.chat__msg { max-width: 72ch; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); }
.chat__msg--user { justify-self: end; background: color-mix(in srgb, var(--action) 10%, var(--surface)); }
.chat__msg--operator { border-color: var(--good); }
.chat__who { display: block; font-size: var(--fs-caption); color: var(--muted); margin-bottom: var(--sp-1); }
.chat__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__reply { max-width: 72ch; }
/* A phone: a request's subject is prose, not a hostname, so it wraps and the status stays in view
   instead of behind a sideways scroll. */
@media (max-width: 600px) { .support-list td:first-child { white-space: normal; min-width: 55vw; } }

/* 25. Error page */
.errorpage__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.errorpage { display: grid; justify-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-12) var(--sp-4); max-width: 520px; margin: 0 auto; }
.errorpage__code { font-family: var(--mono); color: var(--muted); margin: 0; }

/* 28. New machine: the picker (feat.machine-picker, mockup v5: an engineer's form). Presets and the
   minimum on the left, the pick as a spec sheet on the right, the month as a formula. */
.pk { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--sp-8); max-width: 1160px; align-items: start; }
@media (max-width: 980px) { .pk { grid-template-columns: 1fr; } }
.pk__spec { display: grid; gap: var(--sp-6); }
.pk__h { font-size: var(--fs-caption); font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 var(--sp-2); }
.pk__chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pk__chip { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface); font-family: var(--mono); font-size: var(--fs-table); cursor: pointer; }
.pk__chip input { position: absolute; opacity: 0; pointer-events: none; }
.pk__chip span { color: var(--muted); }
.pk__chip b { font-family: var(--font); }  /* what it is for, in words; the size in mono */
.pk__chip:has(input:checked) { border-color: var(--action); background: color-mix(in srgb, var(--action) 14%, var(--surface)); }
.pk__chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.pk__rows { display: grid; gap: var(--sp-2); }
.pk__row3 { display: grid; grid-template-columns: 110px minmax(0, 1fr) 104px; gap: var(--sp-3); align-items: center; }
.pk__row3 > label { font-size: var(--fs-table); color: var(--muted); }
.pk__row3 input[type=range] { width: 100%; accent-color: var(--action); min-height: 32px; }
.pk__num { display: flex; align-items: center; gap: var(--sp-1); }
.pk__num input { width: 60px; height: 30px; padding: 0 var(--sp-2); border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface); color: var(--text); font-size: var(--fs-table); text-align: right; }
.pk__num span { font-family: var(--mono); font-size: var(--fs-caption); color: var(--muted); }
.pk__deltas { font-family: var(--mono); font-size: var(--fs-caption); color: var(--muted); padding-left: calc(110px + var(--sp-3)); margin-top: calc(-1 * var(--sp-1)); }
@media (max-width: 600px) { .pk__row3 { grid-template-columns: 1fr 104px; } .pk__row3 > label { grid-column: 1 / -1; } .pk__deltas { padding-left: 0; } }
.pk__deltas .up, .pk__dl .warn { color: var(--warn); }
.pk__deltas .down, .pk__dl .down { color: var(--good); }
.pk__setup .warn { color: var(--warn); }
.pk__busy::before { content: "\25CF"; margin-right: var(--sp-2); animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pk__busy::before { animation: none; } }
.pk__line { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.pk__seg { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--r-control); overflow: hidden; background: var(--surface); }
.pk__seg label { padding: 0 var(--sp-3); min-height: 32px; display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--fs-table); cursor: pointer; }
.pk__seg label + label { border-left: 1px solid var(--border-control); }
.pk__seg input { position: absolute; opacity: 0; pointer-events: none; }
.pk__seg label:has(input:checked) { background: color-mix(in srgb, var(--action) 18%, transparent); font-weight: 600; }
.pk__seg label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.pk .field__input { height: 32px; background: var(--surface); }
.pk__hint { color: var(--muted); font-size: var(--fs-caption); margin: var(--sp-2) 0 0; }
.pk__sheet { position: sticky; top: var(--sp-6); background: var(--surface); border: 1px solid var(--border-control); border-radius: var(--r-card); overflow: hidden; }
.pk.htmx-request .pk__sheet { opacity: .6; }
.pk.htmx-request .pk__sact .btn { pointer-events: none; }
.pk__shead { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.pk__type { font-family: var(--mono); font-size: var(--fs-h1); font-weight: 600; }
.pk__type--words { font-family: inherit; }  /* a sentence, not an instance type */
.pk__sbody { padding: var(--sp-4); }
.pk__dl { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; padding: var(--sp-3) var(--sp-4); font-family: var(--mono); font-size: var(--fs-table); }
.pk__dl dt { color: var(--muted); } .pk__dl dd { margin: 0; }
.pk__dl--form { padding: 0; align-items: center; }
.pk__month { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); font-family: var(--mono); }
.pk__total { font-size: var(--fs-h2); font-weight: 600; }
.pk__formula { color: var(--muted); font-size: var(--fs-caption); margin-top: var(--sp-1); }
.pk__hours { width: 56px; height: 26px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--bg); color: var(--text); font-size: var(--fs-caption); }
.pk__sact { padding: var(--sp-4); border-top: 1px solid var(--border); display: grid; gap: var(--sp-2); }
.pk__note { font-size: var(--fs-table); border-left: 2px solid var(--warn); padding-left: var(--sp-3); margin: 0; }
.pk__people { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-family: var(--font); }
.pk__lock { font-size: var(--fs-caption); color: var(--action-text); }
.pk__numnote { font-size: var(--fs-caption); color: var(--warn); white-space: nowrap; }
.pk__sheet abbr { text-decoration: underline dotted; cursor: help; }
/* feat.picker-durability: how long it must run without a reclaim, presets or the slider; on the
   sheet, the cheaper zone skipped and why. */
.pk__durhead { justify-content: space-between; }
.pk__durhead .pk__h { margin: 0; }
.pk__mode label { font-family: var(--font); font-size: var(--fs-caption); min-height: 28px; }
.pk__durs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 600px) { .pk__durs { grid-template-columns: 1fr; } }
.pk__durpick { display: grid; gap: 4px; align-content: start; text-align: left; padding: var(--sp-3); border: 1px solid var(--border-control); border-radius: var(--r-card); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.pk__durpick b { font-size: var(--fs-table); }
.pk__durpick span { font-size: var(--fs-caption); color: var(--muted); }
.pk__durpick.on { border: 1.5px solid var(--action); background: color-mix(in srgb, var(--action) 10%, var(--surface)); }
.pk__durpick:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pk__dslider { display: grid; gap: 2px; margin-top: var(--sp-2); }
.pk__dslider input[type=range] { width: 100%; accent-color: var(--action); min-height: 28px; }
.pk__ticks { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 11px; text-align: center; }
.pk__ticks--words { color: var(--muted); }
.pk__ticks--hours { font-family: var(--mono); }
.pk__ticks .cur { font-weight: 600; }
.pk__dslider .pk__deltas { padding-left: 0; margin-top: var(--sp-1); }
.pk__what { margin: 0; padding: var(--sp-3) var(--sp-4) 0; color: var(--muted); }
.pk__more { padding: 0 var(--sp-4) var(--sp-3); }
.pk__more summary { cursor: pointer; color: var(--muted); font-size: var(--fs-table); }
.pk__more .pk__dl { padding: var(--sp-3) 0; }
.pk__more .pk__hint { margin: var(--sp-2) 0 0; }
/* The capacity chosen at confirm decides which month and badge the sheet shows: spot unless the
   on-demand radio is checked (no request: the confirm step's own fields never post). */
.pk__od { display: none; }
.pk:has(input[name=capacity][value=ondemand]:checked) .pk__od { display: revert; }
.pk:has(input[name=capacity][value=ondemand]:checked) .pk__spot { display: none; }
.more summary { cursor: pointer; color: var(--muted); font-size: var(--fs-table); margin-top: var(--sp-2); }
.more .facts { margin-top: var(--sp-2); }
.pk__bar { display: none; }
@media (max-width: 980px) { .pk__bar { display: flex; justify-content: space-between; position: sticky; bottom: 0; z-index: 2; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); font-family: var(--mono); color: inherit; text-decoration: none; box-shadow: 0 -4px 12px color-mix(in srgb, var(--text) 8%, transparent); } }
.next { display: grid; gap: var(--sp-2); justify-items: start; margin-bottom: var(--sp-6); }
.next .card__k, .next__text { margin: 0; }
.next__text { max-width: 640px; }
.guides { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.guide summary { cursor: pointer; font-weight: 600; }
.guide p { margin: var(--sp-2) 0 0; color: var(--muted); max-width: 720px; }
.handover .connect__row .field__input { max-width: none; flex: 1; min-width: 0; }

/* feat.offboard: the left page, its cards apart. */
.left { display: grid; gap: var(--sp-4); }

/* Tables that become cards on a phone: the first cell heads the card, every other cell reads
   "label  value" from its data-label; actions sit last, full width. */
.nowrap { white-space: nowrap; }
.table.installed { table-layout: auto; }
.card .table { width: 100%; }
@media (max-width: 600px) {
  .table.table--stack { display: block; background: none; border: 0; white-space: normal; overflow: visible; }
  .table--stack thead { display: none; }
  .table--stack tbody, .table--stack tr { display: block; }
  .table--stack tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border: 0; text-align: right; }
  .table--stack td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  .table--stack td.stack__head { display: block; text-align: left; padding-bottom: var(--sp-2); font-weight: 600; }
  .table--stack td.stack__actions { display: block; text-align: left; padding-top: var(--sp-2); }
  .table--stack td.audit__ip { display: none; }
}
.mgrid__wide { grid-column: 1 / -1; }
.mtech { margin-top: var(--sp-4); }
/* The picker's custom size, folded behind a summary that reads like its other headings. */
.pk__custom > summary { cursor: pointer; list-style: none; }
.pk__custom > summary::-webkit-details-marker { display: none; }
.pk__custom > summary::before { content: "▸ "; }
.pk__custom[open] > summary::before { content: "▾ "; }