/* Server-rendered adapters to the console design. No inline presentation. */
:root { --bg: var(--board); --muted: var(--soft); --accent: var(--blue); --field: var(--panel); --hover: var(--wash); }
button, .button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.35rem; padding:.4rem .95rem; border:1.5px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--board); font-weight:600; font-size:.875rem; text-decoration:none; cursor:pointer; }
button:hover, .button:hover { background:var(--blue); border-color:var(--blue); color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.quiet, .button.quiet { background:var(--panel); color:var(--ink); }
button.quiet:hover, .button.quiet:hover { background:var(--wash); }
.icon-btn, .jump { color:var(--ink); }
label { display:block; color:var(--soft); font-size:.8125rem; font-weight:600; margin:.75rem 0; }
label input:not([type=checkbox]):not([type=radio]), label select, label textarea { display:block; margin-top:.35rem; }
input, select, textarea { caret-color:var(--blue); max-width:100%; }
input[type=checkbox], input[type=radio] { accent-color:var(--blue); margin:0 .4rem 0 0; }
input[type=radio] { width:1rem; height:1rem; }
fieldset { margin:.8rem 0; }
fieldset label { display:inline-flex; align-items:center; gap:.3rem; margin:.4rem .7rem .4rem 0; }
fieldset:has(.choices) label, .choices label { margin:0; }
fieldset legend { float:none; }
main > .panel, main > .table-scroll, main > .row { margin-bottom:1.25rem; }
.panel:not(.board):not(.console-panel) { padding:1.15rem; }
.panel h2 { margin-bottom:.8rem; }
.panel p, .panel dl, .panel details { margin-bottom:.8rem; }
.panel > :last-child { margin-bottom:0; }
.panel p { max-width:75ch; }
.panel > header h2 { margin:0; }
h1,h2,h3,h4 { overflow-wrap:anywhere; }
h3,h4 { margin:.75rem 0 .4rem; }
.muted, .lede { color:var(--soft); }
.muted { font-size:.8125rem; }
.lede { margin:0 0 1.25rem; }
.eyebrow { display:none; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:.8rem 0; }
.filters { display:flex; flex-wrap:wrap; gap:.6rem; align-items:end; margin-bottom:1rem; }
.filters label { flex:1; min-width:8rem; margin:0; }
.filters button { margin-bottom:0; }
.table-scroll { overflow:auto; border:1.5px solid var(--ink); border-radius:14px; background:var(--panel); }
.table-scroll table { font-size:.875rem; }
.table-scroll th { border-top:0; }
td a { text-decoration:underline; }
.empty { text-align:center; padding:2rem 1rem; color:var(--soft); white-space:normal; }
.empty .panel { border:0; background:transparent; text-align:left; max-width:32rem; margin:auto; }
pre { overflow:auto; max-height:36rem; white-space:pre-wrap; overflow-wrap:anywhere; padding:.8rem; border:1px solid var(--line); border-radius:8px; background:var(--board); font:.8rem/1.6 var(--mono); margin:.6rem 0; }
summary { cursor:pointer; padding:.4rem 0; font-weight:600; }
hr { border:0; border-top:1px solid var(--line); margin:1rem 0; }
.facts { font-size:.875rem; }
.facts dt { overflow-wrap:anywhere; }
.facts dd { text-align:right; }
.notice { padding:.8rem; border:1px solid var(--ink); border-radius:10px; background:var(--wash); }
.notice a { font-weight:600; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; }
.metric { padding:1.1rem; border:1.5px solid var(--ink); border-radius:14px; background:var(--panel); }
.metric p { color:var(--soft); font-size:.8125rem; margin-bottom:.4rem; }
.metric strong { font-size:1.75rem; line-height:1.2; letter-spacing:-.025em; }
.cards, .type-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; }
.cards .panel { margin:0; }
.type-card { display:grid; align-content:start; gap:.35rem; padding:1rem; border:1.5px solid var(--ink); border-radius:14px; background:var(--panel); text-decoration:none; }
.type-card span { color:var(--soft); font-size:.8125rem; }
.type-card[aria-current=page] { color:var(--board); background:var(--ink); }
.type-card[aria-current=page] span { color:inherit; }
.type-card:hover { border-color:var(--blue); }
.machine-layout { display:grid; grid-template-columns:minmax(0,1fr) 21.5rem; gap:1.25rem; align-items:start; }
#machine-form > .panel { margin-bottom:1.25rem; }
.price-panel { position:sticky; top:4.75rem; padding:1.15rem; border:1.5px solid var(--ink); border-radius:14px; background:var(--panel); }
.price-panel dt { color:var(--soft); font-size:.8125rem; }
.price-panel dd { font-family:var(--mono); margin:.2rem 0 .8rem; }
.price { display:block; font-size:2.25rem; font-weight:700; letter-spacing:-.03em; }
.choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.5rem; }
.choices label { display:flex; padding:.7rem; border:1.5px solid var(--ink); border-radius:10px; }
.choices label:has(input:checked) { background:var(--ink); color:var(--board); }
.command-tabs { padding:.8rem 0; }
.command-tabs > input { position:absolute; opacity:0; width:1px; }
.command-tabs > label { display:inline-flex; border:1.5px solid var(--ink); border-radius:999px; padding:.4rem .6rem; }
.command-tabs > input:checked + label { background:var(--ink); color:var(--board); }
.command-tabs > input:focus-visible + label { outline:3px solid var(--blue); outline-offset:3px; }
.command-tabs .cli-choice { display:none; }
.command-tabs:has(#cli-choice:checked) .cli-choice { display:block; }
.command-tabs:has(#cli-choice:checked) .console-choice { display:none; }
.steps { display:flex; flex-wrap:wrap; gap:1rem; padding:1rem; border:1.5px solid var(--ink); border-radius:14px; margin-bottom:1.25rem; }
.steps li { display:list-item; list-style:decimal inside; }
.desktop-frame, iframe { display:block; max-width:100%; border:1.5px solid var(--ink); border-radius:10px; background:var(--board); }
.credential-account { padding:.8rem 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.org-picker .filters { display:grid; padding:.5rem; }
.org-picker .org { list-style:none; }
.mobile-nav { margin:0; }
.mobile-nav > summary { display:none; }
.rail .me a { display:flex; }
.rail .me svg { width:1.25rem; height:1.25rem; }
.rail-foot form { margin:0; }
.bar .crumbs { overflow:hidden; }
.bar .crumbs span { overflow:hidden; text-overflow:ellipsis; }
.entry main.standalone, .entry main.signin { margin:0; width:100%; max-width:none; display:flex; flex-direction:column; align-items:stretch; justify-content:center; overflow-wrap:anywhere; }
.entry main > * { width:100%; max-width:28rem; margin-left:auto; margin-right:auto; }
.entry main h1 { margin-bottom:1rem; }
.entry main p { margin-bottom:1rem; }
.entry main form button { width:100%; }
.entry-art { width:min(100%,22rem); aspect-ratio:1.4; background:var(--blue); mask:var(--ring) 0 0 / 22px 22px; }
.entry .wordmark { margin-bottom:2rem; }
.entry .signin form { margin:.4rem auto; }
.board .surface { margin-top:0; }
.surface a.machine-bead { position:relative; flex:none; display:block; width:var(--cell); height:var(--cell); border-radius:50%; }
.surface a.machine-bead::before { content:""; position:absolute; inset:0; background:var(--tone,var(--peg)); mask:var(--ring); }
.surface a.machine-bead span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.surface a.machine-bead:hover { outline:2px solid var(--ink); outline-offset:2px; }
.surface[data-size=small] { --cell:18px; }
.surface[data-size=medium] { --cell:28px; }
.surface[data-size=large] { --cell:38px; }
.surface[data-size=fit] { --cell:24px; }
.board .toolbar label { margin:0; }
.board .surface section > div { max-width:none; }
.board-empty { padding:2rem; }
.machine-table .type { white-space:normal; min-width:9rem; }
.kind-note { color:var(--soft); font-size:.8125rem; }
.confirm-fields { display:none; }
.palette > button { margin:.5rem; }
.palette form button { margin:.5rem; }
@media(max-width:68rem) { .machine-layout { grid-template-columns:minmax(0,1fr); } .price-panel { position:static; } .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:56rem) {
  .rail { position:static; width:auto; height:auto; max-height:none; transform:none; visibility:visible; border-right:0; border-bottom:1.5px solid var(--ink); padding:1rem; }
  .rail .wordmark, .rail > .btn, .rail > .org-picker, .rail-foot { display:none; }
  .mobile-nav > summary { display:list-item; }
  .mobile-nav:not([open]) nav { display:none; }
  .rail nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail nav div:last-child { display:grid; }
  .bar .menu-btn { display:none; }
  .bar .crumbs { font-size:.8125rem; }
  .cards, .type-cards { grid-template-columns:minmax(0,1fr); }
  .entry main.standalone, .entry main.signin { justify-content:start; }
  .entry-art { display:none; }
  .entry .wordmark { margin:0; }
  .facts { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
  .metrics { gap:.6rem; }
  .metric strong { font-size:1.3rem; }
}
@media(max-width:56rem) {
  .rail-foot { display:flex; flex-wrap:wrap; align-items:center; margin:0; gap:.6rem; }
  .rail-foot .wallet { display:none; }
  .rail-foot .me { flex:1; min-width:0; }
  .rail { gap:.5rem; }
}
.destructive { max-width:26rem; }
.destructive > summary { color:var(--danger-text); }
.destructive form { padding:.7rem; border:1px solid var(--danger-text); border-radius:10px; }
.event-checks { display:grid; gap:.25rem; }
.event-checks label { display:flex; margin:.15rem 0; font-family:var(--mono); font-size:.72rem; overflow-wrap:anywhere; }
.event-checks input { flex:none; }
.console-panel .destructive summary { padding:.2rem 0; font-size:.8125rem; }
.console-panel .destructive[open] { white-space:normal; min-width:12rem; }
.stack > .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rail .org-picker { min-width:0; }
.toolbar { flex-wrap:wrap; }

.art-wordmark { --cols:25; --rows:7; }
.art-base, .art-agents, .art-computer, .art-swarm, .art-snapshot, .art-temporary, .art-persistent { width:7rem; height:4.5rem; }
.type-card[aria-current=page] .art .hole { stroke:var(--ink); }
.entry-board .art-wordmark { max-width:100%; height:auto; }
.entry-board .art-wordmark .hole { stroke:var(--board); }
.rail .i { width:1.15rem; height:1.15rem; }
.table-scroll td.empty { display:table-cell; }
.htmx-request { cursor:progress; }
#price-box.htmx-swapping { opacity:.7; }
button:active, .btn:active { background:var(--wash); color:var(--ink); }
button:disabled:hover { background:var(--ink); color:var(--board); border-color:var(--ink); }
.chart-plot { position:relative; }
.chart-baseline { display:block; width:100%; height:auto; overflow:visible; }
.chart-baseline text { fill:var(--soft); font:10px var(--mono); }
.chart-fill { fill:var(--blue); }
.chart-grid { stroke:var(--line); stroke-dasharray:2 4; }
.chart-line { fill:none; stroke:var(--blue); stroke-width:1.5; }
.chart-canvas,.chart-bloom { position:absolute; left:7.258%; top:9.524%; width:88.71%; height:71.43%; image-rendering:pixelated; pointer-events:none; }
.chart-bloom { filter:blur(3px) brightness(1.35) saturate(1.4); opacity:.7; mix-blend-mode:plus-lighter; image-rendering:auto; }
.chart-plot.enhanced .chart-baseline path,.chart-plot.enhanced .chart-baseline rect { visibility:hidden; }
.activity-list { display:grid; gap:.8rem; padding:0; list-style:none; }
.activity-list li { overflow-wrap:anywhere; border-top:1px solid var(--line); padding-top:.7rem; font-size:.8125rem; }
.chart-fill.series-0 { fill:rgb(40,210,110); }
.chart-fill.series-1 { fill:rgb(53,143,243); }
.chart-fill.series-2 { fill:rgb(255,150,50); }
.chart-line.series-0 { stroke:rgb(40,210,110); }
.chart-line.series-1 { stroke:rgb(53,143,243); }
.chart-line.series-2 { stroke:rgb(255,150,50); }
.chart-legend[aria-pressed=false] { opacity:.5; text-decoration:line-through; }
/* Keep intrinsic table/SVG width inside its column; each table owns scrolling. */
.stack { grid-template-columns:minmax(0,1fr); }
.image-choices,.size-choices { border:0; padding:0; margin:1.2rem 0; }
.image-choices > legend,.size-choices > legend { font-weight:700; color:var(--ink); margin-bottom:.7rem; }
.legend-note { margin-left:.5rem; font-weight:400; color:var(--soft); font-size:.8125rem; }
.tiles label { margin:0; }
.tile .art { max-width:100%; }
.resource-beads { display:flex; flex-wrap:wrap; align-content:start; gap:3px; min-height:2rem; }
.resource-beads .bead { flex:none; width:8px; height:8px; }
.creation-types [aria-current=page] { background:var(--ink); color:var(--board); }
.price-panel > button { width:100%; margin-bottom:1rem; }
.machine-detail { margin-top:1.25rem; }
.machine-heading { margin-top:-.5rem; }
.machine-controls { margin-bottom:1.25rem; }
.machine-controls h2 { font-size:.875rem; }
.machine-controls .row { margin:0; }
.machine-detail > .stack { min-width:0; }
/* Console parity: the design owns panel rhythm, bead charts and dollar forms. */
.billing-layout,.overview-layout { align-items:start; }
.console-panel .body.stack { gap:.9rem; }
.console-panel .body p { margin:0; }
.console-panel .fig small { font:400 .875rem var(--sans); color:var(--soft); }
.console-panel .topup { gap:.7rem; }
.console-panel .topup .chips { margin:0; }
.chips label { margin:0; }
.chips legend:not(.sr-only) { width:100%; margin:0 0 .35rem; }
.chips input[type=radio] { width:1px; height:1px; margin:0; }
.chips { align-items:center; }
.topup .chips { gap:.35rem; }
.topup .chips span { padding:.3rem .7rem; }
.wide { width:100%; }
.consent { display:flex; gap:.5rem; align-items:start; margin:0; font-size:.8125rem; font-weight:400; }
.consent input { flex:none; margin-top:.15rem; }
.sentence { display:flex; flex-wrap:wrap; gap:.35rem .5rem; }
.sentence label { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; color:var(--ink); font-size:.9375rem; font-weight:400; margin:0; }
.sentence label input[type=text] { display:inline-block; width:5.3rem; margin:0; }
.refill .state { margin:0; }
.refill .body > form > .consent { margin:.85rem 0; }
.refill .body > form > .muted { margin-bottom:.75rem; }
.dot-bar { display:inline-flex; flex-wrap:wrap; gap:2px; max-width:12rem; vertical-align:middle; }
.dot-bar .bead { width:9px; height:9px; flex:none; }
.wallet .dot-bar { display:flex; margin-top:.45rem; }
.chart-empty { padding:.5rem 0; color:var(--soft); }
.chart-empty p { margin:0; }
.bead-chart .axis { display:flex; justify-content:space-between; gap:.5rem; margin:.5rem 0; color:var(--soft); font-size:.75rem; }
.bead-chart .chart-data { margin-top:.5rem; font-size:.75rem; color:var(--soft); }
.bead-chart .chart-data summary { font-weight:400; }
.spend-dot { fill:var(--yellow); }
.dot-hole { fill:var(--panel); }
.dot-canvas,.dot-bloom { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }
.dot-bloom { opacity:.22; filter:blur(2px); mix-blend-mode:plus-lighter; }
.enhanced-dots .spend-dot,.enhanced-dots .dot-hole { visibility:hidden; }
.usage-details { color:var(--soft); }
.usage-details > .stack { margin-top:.75rem; }
.empty.compact { padding:.9rem 1.15rem; text-align:left; }
.events time { max-width:8rem; white-space:normal; font-size:.75rem; }
.overview-layout .scroll td { font-size:.8125rem; }
.overview-layout .scroll .state { font-size:0; }
.overview-layout .scroll .state .bead { width:9px; height:9px; }
@media(max-width:56rem) { .billing-layout,.overview-layout { grid-template-columns:minmax(0,1fr); } .bead-chart .axis { font-size:.65rem; } }

.topup .pay-amount { display:none; }
.topup:has(input[name=amount][value="10"]:checked) .pay-10,
.topup:has(input[name=amount][value="25"]:checked) .pay-25,
.topup:has(input[name=amount][value="50"]:checked) .pay-50,
.topup:has(input[name=amount][value="100"]:checked) .pay-100 { display:inline; }

/* Keep advanced setup in native disclosures; primary pages follow the design grid. */
.entry main.standalone, .entry main.signin { display:grid; align-content:center; justify-content:stretch; gap:1.1rem; }
.entry main.standalone > *, .entry main.signin > * { margin-top:0; margin-bottom:0; }
.entry main .filters { display:grid; gap:.75rem; }
.entry main .filters label { width:100%; }
.creation-form.panel { padding:0; }
.creation-form > .part { padding:1.15rem; margin:0; border-top:1px solid var(--line); }
.creation-form > .first { border-top:0; }
.creation-form .image-choices { margin:0 0 1.2rem; }
.creation-form .size-choices { margin:0; }
.creation-form .part > h2 { font-size:.9375rem; }
.creation-form .creation-advanced { margin:0; }
.creation-advanced > section { margin-top:1.25rem; }
.price-panel > button { margin-top:1rem; margin-bottom:.6rem; }
.price-panel #price-box > h2 { font-size:.9375rem; }
.sentence label input[type=text] { width:5.3rem; }
.refill .body > form > .muted { font-size:.75rem; }
.bead-chart { display:block; }
.bead-chart .chart-empty { background:none; border:0; padding:.6rem 0; }
.bead-chart details { background:none; border:0; padding:0; }
.agent-settings { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; align-items:center; }
.agent-settings .inline { grid-template-columns:repeat(2,minmax(0,1fr)) auto; }
.agent-settings label { margin:0; }
.agent-settings input, .agent-settings select { min-height:2rem; }
.agent-row { padding:1rem 1.15rem; border-top:1px solid var(--line); }
.agent-row h3 { margin:0 0 .5rem; font-size:.9375rem; }
.agent-row .row { margin:0; }
.credential-profile { margin-bottom:1rem; }
.credential-profile > h3 { margin:0; }
.credential-profile .profile-actions { margin-top:.65rem; }
.machine-heading { justify-content:space-between; }
.machine-heading .row { margin:0; }
.machine-heading .machine-actions { margin-left:auto; }
.machine-facts { font-size:.8125rem; }
.machine-detail .console-panel .facts { margin:0; }
@media(max-width:56rem) { .entry main.standalone, .entry main.signin { align-content:start; } .agent-settings { grid-template-columns:minmax(0,1fr); } .agent-settings .inline { grid-template-columns:minmax(0,1fr); } }

.onboarding-steps { counter-reset:step; display:grid; gap:1.2rem; margin-bottom:.5rem; }
.onboarding-steps li { counter-increment:step; padding-left:2.3rem; position:relative; }
.onboarding-steps li::before { content:counter(step); position:absolute; left:0; top:.3rem; width:1.6rem; height:1.6rem; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; }
.onboarding-steps li:first-child::before { content:""; background:var(--green); border-color:var(--green); mask:var(--ring); }
.onboarding-steps h3 { margin:0 0 .35rem; font-size:.9375rem; }
.onboarding-steps h3 .bead { display:none; }
.onboarding-board { height:6rem; margin-top:.8rem; }
.panel .table-scroll { border:0; border-radius:0 0 14px 14px; }
.machine-heading { margin-bottom:1rem; }
.machine-facts h3 { display:none; }
.machine-detail .split h2 { font-size:.8125rem; color:var(--soft); margin:0; }
.machine-detail .split .fig { font-size:1.8rem; }
.machine-detail .split details { margin:0; }

.desktop-empty { aspect-ratio:16/9; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.6rem; padding:1rem; margin:1rem 0; background:var(--board); border:1px solid var(--line); border-radius:6px; text-align:center; }
.desktop-empty > .bead { width:2rem; height:2rem; }
.desktop-empty p { margin:0; }

.permission-options { display:grid; gap:.45rem; }
.permission-options > label { display:flex; align-items:start; padding:.65rem; margin:0; border:1px solid var(--ink); border-radius:8px; font-weight:400; }
.permission-options > label:has(input:checked) { background:var(--ink); color:var(--board); }
.permission-options small { display:block; font-size:.75rem; }
.permission-options input { flex:none; margin-top:.15rem; }
.machine-index > .body { padding-bottom:0; }
.machine-index .toolbar { padding:.6rem 1.15rem; }
.machine-index .machine-list > .table-scroll { border:0; border-radius:0; }
.machine-index nav { padding:0 1.15rem; }

.machine-facts > [sse-swap] > h2 { display:none; }
.bead-chart.sparkline .chart-plot { min-height:5rem; }
.bead-chart.sparkline .chart-baseline { height:5rem; }
.bead-chart.sparkline .dot-canvas, .bead-chart.sparkline .dot-bloom { height:5rem; }
.bead-chart.sparkline .axis { font-size:.65rem; }

/* Balance beads use the chart's ring size while keeping the small card legible. */
.sentence label input[type=text] { font-size:.8125rem; padding-left:.3rem; padding-right:.3rem; }

.dot-bar { flex-wrap:nowrap; max-width:none; }
.wallet .dot-bar { flex-wrap:wrap; }
.board .toolbar { align-items:center; }
.board .board-find { flex:1; min-width:10rem; }
.board .toolbar label:not(.board-find) { display:flex; align-items:center; gap:.4rem; font-size:.8125rem; }
.board .toolbar label select { width:auto; margin:0; }
@media(max-width:56rem) {
  .frame { grid-template-rows:auto 1fr; }
  .rail:has(.mobile-nav:not([open])) { overflow:visible; padding:0; border:0; background:none; }
  .rail:has(.mobile-nav:not([open])) .rail-foot { display:none; }
  .mobile-nav:not([open]) > summary { position:absolute; top:.65rem; left:1rem; z-index:8; list-style:none; padding:.35rem; }
  .mobile-nav:not([open]) > summary span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .mobile-nav:not([open]) > summary::-webkit-details-marker { display:none; }
  .bar { padding-left:3.5rem; }
  .board .toolbar { gap:.6rem; }
  .board .board-find { flex-basis:100%; }
  .board .toolbar label:not(.board-find) { display:inline-flex; }
}

.creation-form > [data-estimate-refresh] { display:none; }
.receipt-facts { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem 1rem; border-top:1px solid var(--line); padding-top:1rem; margin:1rem 0; }
.price-panel .receipt-facts dd { margin:0; text-align:right; font-size:.8125rem; }
.price-panel .receipt-cli { padding-top:.6rem; border-top:1px solid var(--line); }