/* Client screens ported from the design prototype docs/prototypes/saas-v2/client.html.
   Source of each rule: the bundled template (T: lines of the decoded `__bundler/template`, see
   docs/test-slice/SESSION_UI_PLAN.md) and its runtime overlay (PROTO: lines of client.html). The prototype
   writes its layout as inline styles; CSP forbids those here, so every inline block became a class with the
   same values. Deviations are deliberate and listed in the header of each block:
   - 14/13 rule (PROTO:412-449): product copy and controls never render below 14 px, compact metadata never below 13 px.
   - hard-coded warning/critical/ok colours (#fdf4e6, #8a5a12, #c8811b, #d0402e, #1f8a4c) use the semantic tokens so dark mode works.
   - the login layout, app bar, slot grid and tables collapse at 1180/820/600 px exactly like the overlay's container queries.
   - no outlines (owner decision 2026-10-15, tokens.css header): boxes that were stroked keep their size with a transparent
     border and are told apart by fill: cards and bars use --color-surface, boxes nested in a card use --color-fill, and a
     selected item is marked by the accent tint instead of an accent stroke. Hairlines between rows stay (--color-divider). */

/* ── Page shell (T:654 shell, PROTO:334-337) ─────────────────────────────────────────────── */
html { background: var(--color-bg); }
body.client-body { background: var(--color-bg); }
.client-app { min-height: 100vh; background: var(--color-bg); color: var(--color-text); }
.screen { padding: 30px 34px 52px; min-height: calc(100dvh - 50px); }
.screen-detail { padding-top: 24px; }
.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--color-divider); }
.screen-head h1 { margin: 0 0 6px; font-size: 36px; }
.screen-head p, .screen-sub { margin: 0; color: var(--color-neutral-700); font-size: 13px; }
.screen-head .screen-note { margin: 5px 0 0; color: var(--color-neutral-600); font-size: 13px; }
.screen-head .screen-note:empty { display: none; }
.screen-head-actions { display: flex; gap: 8px; flex: none; }
.screen-head.is-plain { display: block; }
.screen-head.is-plain p { max-width: 720px; text-wrap: pretty; }
.card-20 { padding: 20px; gap: 12px; }
.card-20 > h2 { margin: 0 0 4px; font-size: 21px; }
.card-20 > h2 + p, .card-lead { margin: 0 0 2px; color: var(--color-neutral-700); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.card-20 > h3 { margin: 0; font-size: 19px; }
.card-20 .perm-row + .perm-row, .card-20 .list-row + .list-row, .card-20 .kv-row + .kv-row { margin-top: -12px; }
.stack-22 { display: flex; flex-direction: column; gap: 22px; }
.foot-note { margin: 14px 0 0; max-width: 820px; color: var(--color-neutral-600); font-size: 13px; text-wrap: pretty; }
.note-accent { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 13px; line-height: 1.6; }
.note-neutral { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-neutral-100); color: var(--color-neutral-700); font-size: 13px; line-height: 1.6; }
.note-warn { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-warn-100); color: var(--color-warn); font-size: 13px; line-height: 1.6; }
@supports (corner-shape: superellipse(2)) { .note-accent, .note-neutral, .note-warn, .screen-banner, .slot-add, .slot-empty, .thumb, .display-map, .stage-row, .faq-sign, .bind-target, .grant-step-n, .login-note, .billing-tabs, .billing-tab, .state-pill { corner-shape: var(--squircle); } }

/* Flat tinted placeholder panels (T:641-645 .stripe). */
.thumb { display: block; flex: none; border-radius: 6px; background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.thumb-slot { width: 44px; height: 31px; }
.thumb-row { width: 38px; height: 27px; }
.thumb-detail { width: 66px; height: 48px; }
.thumb-bind { width: 40px; height: 29px; }
.onDark .thumb, .onDark .stripe { background: rgba(255, 255, 255, 0.07); }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.dot { display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot-7 { width: 7px; height: 7px; }
.dot.is-blip { animation: blip 2.2s ease-in-out infinite; }
.tone-ok { color: var(--color-ok); }
.tone-warn { color: var(--color-warn); }
.tone-crit { color: var(--color-crit); }
.tone-muted { color: var(--color-neutral-600); }
.tone-accent { color: var(--color-accent-700); }
.tone-text { color: var(--color-text); }

/* ── App bar (T:750-766, class `client-appbar` PROTO:903) ─────────────────────────────── */
.client-appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: var(--color-surface); border-bottom: 1px solid transparent; }
.appbar-brand { display: flex; align-items: center; gap: 8px; margin-right: 6px; padding: 13px 0; color: var(--color-text); font-size: 16px; font-weight: 600; text-decoration: none; }
/* Closed beta label next to the word mark (owner decision 2026-10-16). */
.beta-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: var(--pill); background: var(--color-accent-100); color: var(--color-accent-700); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; }
.beta-note { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-accent-100); color: var(--color-accent-800); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.login-modal .beta-note { margin: 0; }
@supports (corner-shape: superellipse(2)) { .beta-note { corner-shape: var(--squircle); } }
.brand-square { display: block; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--color-accent); }
@supports (corner-shape: superellipse(2)) { .brand-square { corner-shape: var(--squircle); } }
.appbar-tabs { display: flex; gap: 0; }
.appbar-tab { border: 0; border-radius: 8px 8px 0 0; padding: 15px 14px; background: none; color: var(--color-neutral-600); font-size: 14px; font-weight: 600; box-shadow: inset 0 -2px 0 transparent; cursor: pointer; white-space: nowrap; }
/* Hover only where a pointer can hover: a tapped tab must not keep the accent after a route change (sticky touch hover). */
@media (hover: hover) { .appbar-tab:not(.is-active):hover { color: var(--color-accent); } }
.appbar-tab.is-active { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-accent); }
.appbar-account { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.appbar-identity { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--color-neutral-700); font-size: 13px; }
.appbar-identity > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-ring { display: block; flex: none; width: 24px; height: 24px; border: 1px solid transparent; border-radius: 12px; background: var(--color-accent-200); }
@supports (corner-shape: superellipse(2)) { .identity-ring { corner-shape: var(--squircle); } }
.appbar-account .btn { font-size: 14px; padding: 7px 12px; }
.appbar-account .btn-icon { padding: 7px; font-size: 15px; }

/* Projection banners (PROTO:1974-1990 .projection-banner, .operation-card). */
.screen-banner { display: flex; align-items: center; gap: 12px; margin: 12px 34px 0; padding: 13px 15px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--color-warn-100); color: var(--color-text); }
.screen-banner.is-stale { background: var(--color-grouped); }
.screen-banner strong { display: block; font-size: 14px; }
.screen-banner p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; }

/* ── Login (T:678-746, PROTO:900-902 login-layout / login-primary / login-secondary) ───── */
.login-layout { display: grid; grid-template-columns: 1.04fr 1fr; min-height: 100dvh; }
.login-primary { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 64px 60px; }
.login-brand { display: flex; align-items: center; gap: 9px; color: var(--color-text); font-size: 19px; font-weight: 600; text-decoration: none; }
.login-copy { max-width: 432px; }
.login-kicker { margin: 0 0 12px; color: var(--color-accent); font-size: 14px; font-weight: 500; }
.login-copy h1 { margin: 0 0 16px; font-size: 52px; white-space: pre-line; text-wrap: pretty; }
.login-copy > p { margin: 0 0 34px; color: var(--color-neutral-700); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.provider-list { display: flex; flex-direction: column; gap: 9px; }
.login-note { display: flex; gap: 10px; margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--color-surface); }
.login-note svg { flex: none; margin-top: 2px; }
.login-note p { margin: 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.login-message { min-height: 22px; margin: 12px 0 0; color: var(--color-crit); font-size: 14px; font-weight: 500; }
.login-message[data-tone="info"] { color: var(--color-neutral-700); }
/* Guest entry and login modal (owner decision 2026-10-15; js/guest-mode.js). */
.login-guest { display: grid; gap: 9px; margin-top: 4px; }
/* Same height as the provider buttons above it (styles.css), so the three options read as one column. */
.login-guest-button { justify-content: center; gap: 10px; height: 44px; margin: 0; padding: 0 16px; font-size: 14px; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--color-neutral-600); font-size: 13px; }
.login-or::before, .login-or::after { flex: 1; height: 1px; background: var(--color-divider); content: ""; }
.glyph-guest { position: relative; display: block; flex: none; width: 16px; height: 16px; }
.glyph-guest::before, .glyph-guest::after { position: absolute; left: 50%; background: var(--color-neutral-600); content: ""; transform: translateX(-50%); }
.glyph-guest::before { top: 0; width: 7px; height: 7px; border-radius: 50%; }
.glyph-guest::after { bottom: 0; width: 14px; height: 7px; border-radius: 7px 7px 2px 2px; }
#attention-banner[hidden] + .slot-grid { margin-top: 20px; }
.login-guest-note { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.login-modal .provider-list { margin-top: 2px; }
.login-modal .login-message { min-height: 0; margin: 0; }
.login-modal-note { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.appbar-guest { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.appbar-guest .btn { padding: 7px 14px; font-size: 14px; }
.screen-banner.is-guest { background: var(--color-surface); color: var(--color-text); }
.screen-banner.is-guest > div { flex: 1; min-width: 0; }
.screen-banner.is-guest .btn { flex: none; }
.login-language { display: flex; align-items: center; gap: 14px; }
.login-language > span { color: var(--color-neutral-500); font-size: 13px; letter-spacing: 0.1em; }
.login-secondary { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 64px 56px; background: var(--color-surface); color: var(--color-text); }
.product-shot { position: relative; display: flex; align-items: center; justify-content: center; height: 334px; border-radius: 16px; background: var(--color-fill); }
.product-shot span { color: var(--color-neutral-600); font-size: 13px; }
.product-shot .device-scene { position: absolute; inset: 24px; width: auto; height: auto; }
.product-shot .device-screen { inset: 10px 40px 60px; }
.product-shot .device-base { bottom: 40px; }
.product-shot .connection-line { bottom: 14px; }
.login-facts { display: flex; flex-direction: column; }
.login-fact { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.login-fact span:first-child { min-width: 26px; color: var(--color-neutral-600); font-family: var(--font-mono); font-size: 13px; }
.login-fact span:last-child { color: var(--color-neutral-700); font-size: 14px; line-height: 1.5; }

/* ── Slots (T:769-884) ──────────────────────────────────────────────────────────────── */
.attention-banner { display: flex; align-items: center; gap: 13px; margin: 18px 0 20px; padding: 13px 16px; border-radius: var(--radius-md); background: var(--color-warn-100); color: var(--color-warn); }
.attention-banner strong { font-size: 14px; font-weight: 600; }
.attention-banner span:not(.dot) { font-size: 13px; }
.attention-banner .text-link { margin-left: auto; color: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; }
.slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.slot-card { position: relative; min-height: 248px; padding: 15px; gap: 13px; }
.slot-card-head { display: flex; align-items: center; gap: 9px; }
.slot-id { color: var(--color-accent-700); font-size: 13px; letter-spacing: 0.04em; }
.tag-tier-basic { background: var(--color-fill); box-shadow: none; color: var(--color-neutral-700); }
.slot-lock { display: flex; align-items: center; gap: 6px; margin-left: auto; cursor: help; font-size: 13px; }
.slot-lock.is-open { color: var(--color-accent-700); }
.slot-lock.is-closed { color: var(--color-neutral-600); }
.slot-host { display: flex; align-items: flex-start; gap: 12px; }
.slot-host > div { min-width: 0; }
.slot-host-name { margin-bottom: 3px; font-size: 19px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.slot-host-os { color: var(--color-neutral-600); font-size: 13px; }
.slot-status { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; }
.slot-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-fill); text-align: center; }
.slot-empty strong { color: var(--color-neutral-700); font-size: 15px; font-weight: 600; }
.slot-empty span { color: var(--color-neutral-600); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.slot-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-divider); }
.slot-meta { color: var(--color-neutral-600); font-size: 13px; line-height: 1.3; }
.slot-actions { display: flex; flex: none; align-items: center; gap: 7px; margin-left: auto; justify-content: flex-end; }
.slot-meta { flex: 1 1 auto; min-width: 0; }
.slot-actions .btn { font-size: 14px; white-space: nowrap; }
.slot-notice { margin: 6px -15px -15px; padding: 11px 15px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: var(--color-warn-100); color: var(--color-warn); font-size: 13px; line-height: 1.5; }
.slot-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 248px; padding: 20px; border: 1.5px solid transparent; border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-text); text-align: center; cursor: pointer; transition: background-color 150ms ease; }
.slot-add:hover:not(:disabled) { background: var(--color-accent-100); }
.slot-add:disabled { cursor: not-allowed; }
.slot-add-plus { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-size: 22px; font-weight: 600; line-height: 1; }
.slot-add:disabled .slot-add-plus { background: var(--color-neutral-400); }
.slot-add strong { font-size: 17px; font-weight: 600; }
.slot-add span:last-child { max-width: 230px; color: var(--color-neutral-600); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 44px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); }
.section-head h2 { margin: 0 0 5px; font-size: 24px; }
.section-head p { margin: 0; max-width: 760px; color: var(--color-neutral-700); font-size: 13px; text-wrap: pretty; }
.section-head > span { flex: none; color: var(--color-neutral-600); font-size: 13px; }

/* ── Tables (T:567-592 .table + host cells T:849-881, T:983-1024) ─────────────────────── */
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table .cell-host { display: flex; align-items: center; gap: 12px; }
.table .cell-host > div { min-width: 0; }
.table .cell-name { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--color-text); }
.table .cell-name.is-revoked { color: var(--color-neutral-600); }
.table .cell-sub { color: var(--color-neutral-600); font-size: 13px; }
.table .cell-state, .trouble-state .cell-state { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.table .cell-note { max-width: 360px; color: var(--color-neutral-700); font-size: 13px; }
.table .cell-slot { color: var(--color-accent-700); font-size: 13px; font-weight: 600; }
.table .cell-muted { color: var(--color-neutral-600); font-size: 13px; }
.table .cell-plain { color: var(--color-neutral-700); font-size: 13px; }
.table .cell-strong { font-size: 15px; font-weight: 600; color: var(--color-text); }
.table td.is-right { text-align: right; }
.table .btn { font-size: 14px; white-space: nowrap; }
.table tbody td { color: var(--color-text); }
.table-empty { padding: 18px 12px; color: var(--color-neutral-600); font-size: 14px; }
.hosts-table { margin-top: 16px; }

/* ── Host detail (PROTO:2009-2114, T:910-968) ─────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 0; list-style: none; color: var(--color-neutral-600); font-size: 13px; flex-wrap: wrap; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.breadcrumb li + li::before { content: "/"; }
.breadcrumb .text-link, .breadcrumb .text-button { min-height: 0; padding: 0; color: var(--color-accent); font-size: 14px; font-weight: 400; }
.breadcrumb .text-link:hover { text-decoration: underline; }
.breadcrumb .is-caps { letter-spacing: 0.08em; }
.breadcrumb .is-current { color: var(--color-text); }
.text-link { border: 0; background: none; padding: 0; color: var(--color-accent); font-size: 14px; cursor: pointer; text-decoration: none; }
.text-link:hover { text-decoration: underline; color: var(--color-accent-700); }
.host-detail-header { flex-direction: row; align-items: flex-start; gap: 18px; padding: 20px; margin-bottom: 22px; }
.host-detail-body { flex: 1; min-width: 0; }
.host-detail-title { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; flex-wrap: wrap; }
.host-detail-title h1 { margin: 0; font-size: 32px; overflow-wrap: anywhere; }
.host-detail-lock { display: flex; align-items: center; gap: 6px; color: var(--color-accent-700); font-size: 13px; }
.host-detail-meta { color: var(--color-neutral-600); font-size: 13px; overflow-wrap: anywhere; }
.host-detail-blocked { margin-top: 5px; color: var(--color-warn); font-size: 13px; }
.host-detail-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.state-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pill); background: var(--color-warn-100); color: var(--color-warn); font-size: 13px; font-weight: 600; white-space: nowrap; }
.state-pill.is-ok { background: var(--color-ok-100); color: var(--color-ok); }
.state-pill.is-crit { background: var(--color-crit-100); color: var(--color-crit); }
.state-pill.is-muted { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.state-pill.is-info { background: var(--color-accent-100); color: var(--color-accent-700); }
.detail-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 22px; }
.perm-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.perm-mark { display: flex; flex: none; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; font-size: 13px; font-weight: 600; }
.perm-mark.is-granted { background: var(--color-ok); color: #ffffff; }
.perm-mark.is-need { background: var(--color-warn); color: #ffffff; }
.perm-mark.is-off { background: var(--color-neutral-300); color: var(--color-neutral-600); }
.perm-body { flex: 1; min-width: 0; }
.perm-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perm-name > span:first-child { font-size: 15px; font-weight: 600; line-height: 1.2; }
.perm-why { color: var(--color-neutral-600); font-size: 13px; line-height: 1.5; }
.perm-row .btn { font-size: 14px; white-space: nowrap; }
.button-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.list-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--color-divider); }
.list-row > div:first-of-type { flex: 1; min-width: 0; }
.list-row-title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.list-row-meta { color: var(--color-neutral-600); font-size: 13px; overflow-wrap: anywhere; }
.list-row .btn { font-size: 14px; white-space: nowrap; }
.policy-note { margin: 0; color: var(--color-neutral-700); font-size: 13px; line-height: 1.6; }
.tag-solid { background: var(--color-accent); color: var(--color-on-accent); }

/* ── Troubleshooting (T:1220-1268) ───────────────────────────────────────────────────── */
.screen-title { margin: 0 0 5px; font-size: 36px; }
.trouble-sub { max-width: 780px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--color-divider); text-wrap: pretty; }
.trouble-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: start; }
.trouble-state { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: var(--color-fill); }
.faq-card { padding: 8px 20px 14px; gap: 0; }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-q { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 0; border: 0; background: none; color: var(--color-text); cursor: pointer; text-align: left; }
.faq-q:hover { color: var(--color-accent-700); }
.faq-sign { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid transparent; border-radius: 12px; background: var(--color-fill); color: var(--color-accent-700); font-size: 14px; font-weight: 600; line-height: 1; }
.faq-item.is-open .faq-sign { background: var(--color-accent); color: var(--color-on-accent); }
.faq-q > span:nth-child(2) { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.25; }
.faq-tag { color: var(--color-neutral-600); font-size: 13px; }
.faq-item.is-open .faq-tag { color: var(--color-accent-700); }
.faq-a { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px 34px; }
.faq-a p { margin: 0; max-width: 640px; color: var(--color-neutral-700); font-size: 13px; line-height: 1.7; text-wrap: pretty; }
.faq-a .btn { align-self: flex-start; font-size: 14px; }
.stage-row { display: flex; gap: 12px; margin-bottom: 8px; padding: 11px 13px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-fill); }
.stage-row.is-active { background: var(--color-accent-100); }
.stage-k { padding-top: 2px; color: var(--color-neutral-600); font-size: 13px; letter-spacing: 0.1em; }
.stage-row.is-active .stage-k, .stage-row.is-active .stage-note { color: var(--color-accent-700); }
.stage-name { margin-bottom: 2px; font-size: 15px; font-weight: 600; line-height: 1.2; }
.stage-row.is-active .stage-name { color: var(--color-accent-800); }
.stage-note { color: var(--color-neutral-600); font-size: 13px; line-height: 1.5; text-wrap: pretty; }

/* ── Displays (T:1269-1338, PROTO:2143-2156) ──────────────────────────────────────────── */
.budget-card { position: relative; min-width: 330px; padding: 13px 15px; gap: 0; }
.budget-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.budget-label { color: var(--color-neutral-700); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.budget-value { color: var(--color-accent-700); font-size: 13px; font-variant-numeric: tabular-nums; }
.budget-bar { height: 5px; overflow: hidden; background: var(--color-neutral-300); }
.budget-bar > span { display: block; height: 100%; background: var(--color-accent); transition: width 150ms ease; }
.budget-bar.is-over > span { background: var(--color-crit); }
.budget-note { margin-top: 7px; color: var(--color-neutral-600); font-size: 13px; }
.displays-section { margin: 22px 0; padding: 20px; gap: 0; }
.displays-section h2 { margin: 0 0 3px; font-size: 21px; }
.displays-section > p { margin: 0 0 16px; color: var(--color-neutral-700); font-size: 13px; }
.display-map { position: relative; display: flex; min-height: 230px; padding: 14px; gap: 12px; align-items: flex-end; justify-content: center; flex-wrap: wrap; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-fill); }
.display-map-item { display: flex; min-width: 150px; padding: 8px; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 18px; border: 1px solid transparent; background: var(--color-bg); color: var(--color-text); text-align: left; }
.display-map-item.is-virtual { border: 2px solid transparent; background: var(--color-accent-100); color: var(--color-accent-800); }
.display-map-item strong { font-size: 13px; font-weight: 600; }
.display-map-item small { color: var(--color-neutral-600); font-size: 13px; }
.display-map-item.is-virtual small { color: var(--color-accent-700); }
.display-map-empty { align-self: center; margin: 0; color: var(--color-neutral-600); font-size: 13px; }
.display-controls { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.display-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.display-option { position: relative; padding: 15px; gap: 12px; text-align: left; transition: background-color 150ms ease; }
.display-option.is-selected { background: var(--color-accent-100); }
.display-option.is-disabled { opacity: 0.6; }
.display-option-preview { position: relative; display: flex; height: 132px; padding: 9px; align-items: flex-end; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-fill); }
.display-option-preview .preview-frame { position: absolute; inset: 14px; margin: auto; border: 1px solid transparent; border-radius: 4px; background: var(--color-bg); }
.display-option-preview .preview-frame.is-portrait { width: 34%; height: 78%; }
.display-option-preview .preview-frame.is-landscape { width: 78%; height: 56%; }
.display-option-preview .preview-frame.is-main { background: var(--color-accent-100); }
.display-option-preview small { position: relative; color: var(--color-accent-700); font-size: 13px; }
.display-option-preview .tag { position: relative; }
.display-option-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.display-option-title strong { font-size: 18px; font-weight: 600; line-height: 1.2; }
.display-specs { display: flex; flex-direction: column; margin: 0; }
.display-specs > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.display-specs dt { margin: 0; color: var(--color-neutral-600); }
.display-specs dd { margin: 0; color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; }
.display-option .btn { margin-top: auto; font-size: 14px; }
.display-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.display-custom .field input, .display-custom .field select { height: 36px; }
.displays-foot { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-divider); }
.displays-foot p { max-width: 720px; margin: 0; color: var(--color-neutral-700); font-size: 13px; text-wrap: pretty; }
.displays-foot .btn { margin-left: auto; padding: 11px 20px; font-size: 14px; }
.displays-note { margin: 0; color: var(--color-neutral-600); font-size: 13px; }
.displays-note[data-tone="warning"] { color: var(--color-warn); }
.display-map + .displays-note { margin-top: 10px; }
.displays-message { min-height: 22px; margin: 10px 0 0; color: var(--color-crit); font-size: 14px; font-weight: 500; }
.displays-message[data-tone="info"] { color: var(--color-neutral-700); }
.options-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 14px; }
.options-head h2 { margin: 0 0 3px; font-size: 21px; }
.options-head p { margin: 0; color: var(--color-neutral-700); font-size: 13px; }

/* ── Billing (T:1029-1219) — display only; purchase commands have no backend ─────────── */
.billing-tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 20px 0 0; padding: 3px; border-radius: var(--radius-md); background: var(--color-fill); overflow-x: auto; }
.billing-tab { border: 0; border-radius: 9px; padding: 8px 18px; background: transparent; color: var(--color-neutral-700); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.billing-tab.is-active { background: var(--color-selected); color: var(--color-text); box-shadow: var(--shadow-sm); }
.billing-pane { margin-top: 22px; }
.billing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.billing-head h2 { margin: 0 0 5px; font-size: 24px; }
.billing-head p { margin: 0; max-width: 660px; color: var(--color-neutral-700); font-size: 13px; line-height: 1.65; text-wrap: pretty; }
.billing-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.billing-head-side .seg[disabled] { opacity: 0.6; }
.billing-head-side .seg-opt { cursor: default; }
.billing-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; align-items: start; }
.billing-grid-2 { grid-template-columns: 1.3fr 1fr; margin-top: 22px; }
.billing-grid-3 { grid-template-columns: 1fr 1.35fr; }
.qty-card { padding: 22px; gap: 16px; }
.qty-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qty-row .btn-step { width: 42px; padding: 8px 0; justify-content: center; font-size: 18px; }
.qty-value { min-width: 96px; text-align: center; }
.qty-value strong { display: block; font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.qty-value span { display: block; margin-top: 4px; color: var(--color-neutral-600); font-size: 13px; }
.qty-total { margin-left: auto; text-align: right; }
.qty-total strong { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.qty-total.is-unavailable strong { font-size: 19px; color: var(--color-neutral-700); }
.qty-total span { color: var(--color-neutral-600); font-size: 13px; }
.fact-list { display: flex; flex-direction: column; }
.fact-row { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-divider); color: var(--color-neutral-700); font-size: 13px; line-height: 1.55; }
.fact-row > span:first-child { flex: none; font-weight: 600; }
.fine-print { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.kv-row > span:first-child { color: var(--color-neutral-700); }
.kv-row > span:last-child { font-weight: 600; text-align: right; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.plan-card { padding: 22px; gap: 14px; }
.plan-card.is-featured { background: var(--color-accent-100); box-shadow: var(--shadow-md); }
.plan-head { display: flex; align-items: center; gap: 9px; }
.plan-owned { color: var(--color-neutral-600); font-size: 13px; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price strong { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; }
.plan-price.is-unavailable strong { font-size: 19px; color: var(--color-neutral-700); }
.plan-price span { color: var(--color-neutral-600); font-size: 13px; }
.plan-save { color: var(--color-neutral-600); font-size: 13px; }
.plan-card .fact-row { padding: 8px 0; }
.plan-card .btn-block { margin-top: 4px; font-size: 14px; }
.tag-tier-plus { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-tier-pro { background: var(--color-accent); color: var(--color-on-accent); }
.method-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.method-card-head h3 { margin: 0; font-size: 19px; }
.method-card-head .btn { margin-left: auto; font-size: 14px; }
.invoice-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.invoice-head h3 { margin: 0; font-size: 19px; }
.invoice-head span { color: var(--color-neutral-600); font-size: 13px; }
.empty-rows { padding: 14px 0 4px; border-top: 1px solid var(--color-divider); color: var(--color-neutral-600); font-size: 13px; line-height: 1.6; }

/* ── Settings (T:1442-1492) ───────────────────────────────────────────────────────────── */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.settings-grid .span-2 { grid-column: 1 / -1; }
.settings-seg .seg-opt { padding: 9px 18px; }
.settings-note { margin: 2px 0 0; color: var(--color-neutral-600); font-size: 13px; }
.settings-form { display: grid; gap: 14px; justify-items: start; }
.settings-form .form-message { min-height: 0; margin: 0; }
.settings-form .btn-block { justify-self: stretch; }
.settings-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.settings-controls .form-message { flex: 1 1 100%; min-height: 0; margin: 0; }
/* Shown only where .appbar-account (and its #client-sign-out) is hidden; see the ≤600px query. */
.settings-sign-out { display: none; }
.settings-sign-out .settings-controls { justify-content: space-between; }
/* Settings → sign-in providers: the providers' own logos (js/provider-buttons.js), Apple's in the text colour. */
.identity-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--color-text); }
.identity-icon .provider-logo-google { width: 18px; height: 18px; }
.identity-icon .provider-logo-apple { width: 14px; height: 18px; margin-top: -2px; }
.identity-icon.is-pair { width: auto; gap: 6px; }
.settings-grid .status-pill { align-self: flex-start; }

/* ── Dialogs (T:1526-1640) ─────────────────────────────────────────────────────────────── */
.dialog { width: min(520px, 100%); max-height: calc(100dvh - 64px); }
.dialog.is-wide { width: min(560px, 100%); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-title { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -0.021em; overflow-wrap: anywhere; }
.dialog-body { margin: 0; color: var(--color-neutral-700); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.dialog-list { display: flex; flex-direction: column; }
.dialog-list-row { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid var(--color-divider); color: var(--color-neutral-700); font-size: 13px; line-height: 1.6; }
.dialog-list-row > span:first-child { flex: none; color: var(--color-accent); }
.dialog .note-accent { margin-top: 0; }
.dialog-message { min-height: 22px; margin: 0; color: var(--color-crit); font-size: 14px; font-weight: 500; }
.dialog-message[data-tone="info"] { color: var(--color-neutral-700); }
.dialog-message[data-tone="warning"] { color: var(--color-warn); }
.dialog-message .btn { margin: 4px 4px 0 0; font-size: 14px; }
.bind-targets { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.bind-targets legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bind-target { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-fill); color: var(--color-text); cursor: pointer; text-align: left; transition: background-color 150ms ease; }
.bind-target:hover { background: var(--color-fill-strong); }
.bind-target.is-selected { background: var(--color-accent-100); }
.bind-target.is-blocked { cursor: not-allowed; opacity: 0.7; }
.bind-target input { position: absolute; opacity: 0; pointer-events: none; }
.bind-target:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.bind-target-copy { flex: 1; min-width: 0; }
.bind-target-copy strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.bind-target-copy small { display: block; color: var(--color-neutral-600); font-size: 13px; }
.bind-target-note { max-width: 190px; font-size: 13px; text-align: right; }
.bind-target-icon { display: flex; flex: none; }
.grant-step { display: flex; gap: 13px; padding: 11px 0; border-top: 1px solid var(--color-divider); }
.grant-step-n { display: flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid transparent; border-radius: 12px; background: var(--color-accent-100); color: var(--color-accent-800); font-size: 13px; font-weight: 600; }
.grant-step span:last-child { color: var(--color-neutral-700); font-size: 13px; line-height: 1.6; text-wrap: pretty; }
.enroll-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.enroll-facts > div { min-width: 0; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--color-fill); }
.enroll-facts dt { color: var(--color-neutral-600); font-size: 13px; font-weight: 500; }
.enroll-facts dd { margin: 4px 0 0; color: var(--color-text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* ── Mobile fixed action bar (PROTO:800-820 session footer: navy, safe-area) ─────────── */
.mobile-connect-bar { display: none; }

/* ── Responsive: the overlay's container queries (PROTO:689-760) as media queries ──────── */
@media (max-width: 1180px) {
  .slot-grid, .display-options, .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid, .trouble-grid, .billing-grid, .billing-grid-2, .billing-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .login-layout { grid-template-columns: 1fr; min-height: 0; }
  .login-primary { min-height: 700px; padding: 44px 40px; gap: 44px; }
  .login-secondary { padding: 44px 40px; }
  .slot-grid, .display-options, .plan-grid, .settings-grid { grid-template-columns: 1fr; }
  .settings-grid .span-2 { grid-column: auto; }
  .client-appbar { flex-wrap: wrap; gap: 0 14px; padding: 0 16px; }
  .appbar-tabs { order: 3; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .screen-head, .section-head, .billing-head, .options-head { flex-wrap: wrap; }
  .budget-card { min-width: 0; width: 100%; }
  .table-scroll .table { min-width: 700px; }
  .screen-banner { margin: 10px 16px 0; }
}

@media (max-width: 600px) {
  .screen { padding: 24px 16px 38px; }
  .screen-head h1, .screen-title { font-size: clamp(28px, 10vw, 38px); }
  .login-copy h1 { font-size: clamp(38px, 13vw, 52px); }
  .section-head h2, .billing-head h2 { font-size: clamp(19px, 6vw, 25px); }
  .host-detail-title h1 { font-size: 28px; }
  .login-primary { min-height: auto; padding: 32px 20px 38px; gap: 48px; }
  .login-secondary { padding: 34px 20px; gap: 22px; }
  .client-appbar { padding: 0 12px; }
  .appbar-brand { margin-right: auto; }
  .appbar-account { display: none; }
  /* The guest banner already says "guest"; dropping the tag keeps the brand, Closed beta and Sign in on one row. */
  .appbar-guest > .tag { display: none; }
  .appbar-brand { gap: 6px; }
  .settings-sign-out { display: flex; }
  .settings-sign-out .btn { flex: 1 1 auto; }
  .card, .card-20, .slot-card, .qty-card, .plan-card { padding: 16px; }
  .btn { min-height: 42px; white-space: normal; }
  .seg { max-width: 100%; overflow-x: auto; }
  .host-detail-header { flex-wrap: wrap; }
  .host-detail-body { flex: 1 1 calc(100% - 84px); }
  .host-detail-side { flex: 1 0 100%; align-items: flex-start; padding-left: 84px; }
  .display-map { flex-direction: column; align-items: stretch; height: auto; padding: 10px; gap: 10px; }
  .display-map-item { min-width: 0; min-height: 72px; }
  .display-custom { grid-template-columns: 1fr; }
  .displays-foot { align-items: stretch; flex-direction: column; }
  .displays-foot .btn { margin-left: 0; }
  .attention-banner { flex-wrap: wrap; }
  .attention-banner .text-link { margin-left: 0; }
  .slot-foot { flex-wrap: wrap; }
  .slot-actions { width: 100%; margin-left: 0; }
  .slot-actions .btn { flex: 1 1 auto; }
  .screen-banner { margin: 10px 12px 0; flex-wrap: wrap; }
  .dialog, .dialog.is-wide { width: 100%; max-height: calc(100dvh - 20px); padding: 18px; }
  .dialog-actions { align-items: stretch; }
  .dialog-actions .btn { flex: 1 1 auto; }
  .bind-target { flex-wrap: wrap; }
  .bind-target-note { max-width: none; text-align: left; }
  .enroll-facts { grid-template-columns: 1fr; }
  .mobile-connect-bar {
    position: fixed; z-index: 120; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 62px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    border-top: 0; background: var(--color-surface); color: var(--color-text);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
  }
  .mobile-connect-bar[hidden] { display: none; }
  .mobile-connect-copy { display: grid; min-width: 0; gap: 1px; }
  .mobile-connect-copy strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-connect-copy small { color: var(--color-neutral-600); font-size: 13px; }
  .mobile-connect-bar .btn { flex: none; min-height: 44px; padding: 8px 14px; border: 2px solid transparent; background: var(--color-accent); color: var(--color-on-accent); font-size: 14px; font-weight: 700; }
  .mobile-connect-bar .btn:disabled { opacity: 0.55; }
  body:has(.mobile-connect-bar:not([hidden])) .screen { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (forced-colors: active) {
  .state-pill, .slot-add, .bind-target, .display-option, .stage-row, .perm-mark, .dot { border: 1px solid CanvasText; forced-color-adjust: none; }
  .display-option.is-selected, .bind-target.is-selected, .stage-row.is-active { outline: 2px solid Highlight; }
}

/* Request-bound Host readiness (SPEC §14.4): an explicit loading state that appears only after 150 ms, and a no-answer state with
   Retry, worded apart from offline. Same dot/label rhythm as .cell-state. */
@keyframes readiness-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes readiness-spin { to { transform: rotate(360deg); } }
.readiness-loading { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); animation: readiness-appear 120ms ease-out 150ms both; }
.readiness-spinner { display: block; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: readiness-spin 0.9s linear infinite; }
.readiness-no-response { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 13px; }
.btn.btn-small { padding: 4px 12px; font-size: 14px; min-height: 0; }
[aria-busy="true"].btn { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .readiness-spinner { animation: none; border-right-color: currentColor; opacity: 0.5; } .readiness-loading { animation: none; } }
/* Trademark notice (legal/07-site-notices.md §1): quiet last line, 13 px like other metadata (prototype 14/13 rule). */
.site-footer { padding-top: 16px; border-top: 1px solid var(--color-divider); }
#client-main > .site-footer { margin: 0 34px; padding-bottom: 28px; }
@media (max-width: 600px) { #client-main > .site-footer { margin: 0 16px; } }
.site-footer p { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.55; text-wrap: pretty; }
.login-primary .site-footer { margin: -16px 0 0; }