/* Console components. Semantic tokens only (tokens.css) — no raw colors and no palette
   tokens here; a component that needs a new colour gets a new semantic token. */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/static/fonts/poppins-400-43751174b6b810eb169101a20d8c26f8.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/static/fonts/poppins-500-792477d09826b11d1e5a611162c9797a.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/static/fonts/poppins-600-b550bca8934bd86812d1f5e28c9cc1de.woff2") format("woff2"); }
/* 700 is the prototype's own latin subset, from the same bundle as the three above, which are byte-identical to its
   400/500/600 ("Feeds click-through", 2026-09-29): without it every 700 line — the Feeds overlines, the monogram letters —
   was the browser's bold synthesised from 600, a shade narrower than the prototype's. */
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/static/fonts/poppins-700-0bd523f6049956faaf43c254a719d06a.woff2") format("woff2"); }

[x-cloak] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 14px/1.5 var(--font); color: var(--ink); background: var(--chrome-bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.icon { flex: none; }

/* ---- buttons ---- */
.button { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.button.primary { border: 0; background: var(--grad-primary); color: var(--accent-fg); }
.button.pill { border-radius: var(--radius-pill); background: var(--chrome-button-bg); border-color: var(--chrome-button-line); color: var(--chrome-fg); font-weight: 400; padding: .5rem 1.3rem; }
.button.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--chrome-fg-faint); cursor: pointer; }
.icon-button:hover { background: var(--glass-hover); color: var(--chrome-fg); }

/* ---- auth (sign-in): the glass card outside the console chrome. Dark-only surface — it does not follow the person's appearance. ---- */
/* Pre-auth surface: it does not follow the person's mode, because at this point nobody has chosen
   one. Its color-scheme is load-bearing rather than cosmetic — it pins which branch of every
   light-dark() token inside the subtree resolves: dark, which is what keeps the glass card readable
   on the gradient. (The public landing card that shared this note was retired 2026-09-28.) */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--auth-bg-gradient); color: var(--auth-fg); color-scheme: dark; }
.auth-card { width: var(--auth-signin-card-w); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--auth-signin-gap); padding: var(--auth-signin-gap) var(--auth-signin-pad-x) 0; border-radius: var(--auth-card-radius); background: var(--auth-card-bg); backdrop-filter: blur(var(--auth-card-blur)); -webkit-backdrop-filter: blur(var(--auth-card-blur)); }
.auth-brand { display: block; width: var(--auth-signin-brand); height: var(--auth-signin-brand); }
.auth-head { display: flex; flex-direction: column; gap: .25rem; text-align: center; }
.auth-title { font-size: var(--auth-signin-title); line-height: 1.3; font-weight: 600; color: var(--auth-fg); }
.auth-sub { font-size: var(--auth-text); font-weight: 400; color: var(--auth-fg-muted); }

.auth-form { align-self: stretch; display: flex; flex-direction: column; gap: var(--auth-gap-sm); text-align: left; }
/* A labelled field on the glass card: the invite's optional "Your name" on /invite/accept (invite/accept.jte, #35).
   Its height matches the card's Join button (.auth-actions). */
.auth-field { display: flex; flex-direction: column; gap: var(--auth-label-gap); }
.auth-field label { font-size: var(--auth-text); font-weight: 500; color: var(--auth-fg); }
.auth-field input { width: 100%; height: var(--auth-signin-field-h); padding: 0 var(--auth-field-pad-x); border: 0; border-radius: var(--radius-sm); background: var(--auth-field-bg); color: var(--auth-fg); caret-color: var(--auth-fg); font: inherit; }
.auth-field input::placeholder { color: var(--auth-fg-placeholder); }
.auth-field input:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: var(--auth-fg); }
/* A refused invitee name (#35, ADR-0001 rule 4): the mark is an inset ring rather than a border, because this
   field is drawn borderless and a border would move the row. The message under it drops its own margin —
   .auth-field's column gap already sets it off from the input. */
.auth-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
.auth-field .field-error { margin-top: 0; }

.auth-footer { align-self: stretch; display: flex; justify-content: center; align-items: center; gap: .35rem; padding: var(--auth-signin-foot-pad) 0; border-top: 1px solid var(--auth-line); font-size: var(--auth-text); font-weight: 500; color: var(--auth-fg-muted); }
.auth-footer-link { color: var(--auth-fg); text-decoration: none; }
.auth-footer-link[href]:hover { text-decoration: underline; }

@media (max-width: 440px) { .auth-card { padding: var(--auth-signin-gap) 20px 0; } }

/* A saturated button on either auth surface wears the flow's own gradient (proto 1006), not the
   console accent: this surface is theme-independent, so the button must be too. */
.auth .button.primary { background: var(--auth-primary); }

/* "Check your inbox" (signup/inbox.jte; "Sign-up by magic link", 2026-10-01): the prototype's verify screen as
   the sign-in card's middle (proto 1323-1335). The address in the sub-line is the prototype's white 600 and wraps
   anywhere, because it is whatever the person typed. The body is left-aligned like the prototype's: the Back row
   (13px #9aa3bb, a 15px arrow, 14px above the content) and then the instruction and the quiet line in the slot
   the code boxes and the resend line hold there (12.5px #8b93aa). The Back row is a submit button with its
   chrome taken off, a block-level flex box so its form adds no line-box gap under it; its 24px floor is the
   WCAG 2.2 target size (2.5.8), the same in both densities. */
.auth-sub-address { font-weight: 600; color: var(--auth-fg); overflow-wrap: anywhere; }
.auth-body { align-self: stretch; display: flex; flex-direction: column; gap: var(--auth-gap-sm); text-align: left; }
.auth-back { display: flex; width: fit-content; align-items: center; gap: .5rem; min-height: 24px; padding: 0; border: 0; background: none; color: var(--auth-ink-quiet); font: inherit; font-size: var(--auth-text-quiet); cursor: pointer; }
.auth-back .icon { width: 15px; height: 15px; stroke-width: 2; }
.auth-back:hover { color: var(--auth-fg); }
.auth-back:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; border-radius: var(--radius-sm); }
.auth-instruction { font-size: var(--auth-text); line-height: 1.5; color: var(--auth-fg); }
.auth-instruction strong { font-weight: 600; }
.auth-aside { font-size: var(--auth-text-xs); line-height: 1.5; color: var(--auth-ink-faint); }

/* What a team invite is for (invite/accept.jte; "Team invite", 2026-10-06): the organisation, the address and the
   role as label/value pairs on the card's tile ground, the values in the card's full ink and wrapping anywhere,
   because the address is whatever the inviter typed. */
.auth-facts { align-self: stretch; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--auth-gap-sm) var(--auth-control-pad); margin: 0; padding: var(--auth-tile-pad) var(--auth-control-pad); border-radius: var(--radius-sm); background: var(--auth-tile-bg); font-size: var(--auth-text); line-height: 1.5; text-align: left; }
.auth-facts dt { color: var(--auth-fg-muted); }
.auth-facts dd { margin: 0; font-weight: 600; color: var(--auth-fg); overflow-wrap: anywhere; }

/* A card that ends on neither hairline line (.auth-footer, .auth-code) carries its own bottom inset — the
   one-action card for a sign-up partner-v5 cannot place (signup/unidentified.jte) — so its button does not sit
   on the edge. */
.auth-card:not(:has(> .auth-footer, > .auth-code)) { padding-bottom: var(--auth-signin-gap); }

/* The two cards that are not sign-in ("Sign-out and root, 2026-09-28"): the sign-out question and the error
   page. Both are sign-in's card with a different middle, so all they add is the row their actions stand in and
   the quiet line the error page ends on. The row's controls take sign-in's field height, so a card's buttons
   line up with its fields; the x-inset is the auth control inset (--auth-control-pad), so it moves with the density. */
.auth-actions { align-self: stretch; display: flex; gap: var(--auth-gap-sm); }
.auth-actions .button { flex: 1; justify-content: center; height: var(--auth-signin-field-h); padding: 0 var(--auth-control-pad); border-radius: var(--radius-sm); font-size: var(--auth-text); }
.auth-actions .button:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
/* The status line: the fact to quote to support, kept quiet. It carries the card's bottom inset and its
   hairline, the way .auth-footer does on the other two cards, and wraps anywhere because the path in it is
   whatever the visitor typed. */
.auth-code { align-self: stretch; padding-block: var(--auth-gap-sm); border-top: 1px solid var(--auth-line); text-align: center; font-size: var(--auth-text-xs); line-height: 1.5; color: var(--auth-fg-muted); overflow-wrap: anywhere; }

/* ---- sign-up: the two-pane flow (decision "Sign-up click-through", 2026-09-25; proto 969-1228) ----
 * The rail on the left holds one step's form; the preview on the right is the org and the workspace
 * being described, and it is the only thing on the page that updates without a round trip
 * (static/js/console.js, `signupPreview`). Every colour here is an --auth-* token, and every size that
 * moves between the two densities is one too (tokens.css section 5). What is still written as a number
 * below is a size that does not move: a radius, a border, an icon's box, a length at the 12px floor of
 * the auth type ladder, or a constant like the field's 16px inset and the skeletons' widths.
 *
 * Both panes render their state server-side; Alpine toggles the SAME branches with :hidden, so the
 * first paint is already right and a browser without JS keeps the server's answer. That is what this
 * one !important protects: `hidden` has to beat the display: flex/grid of the branch it hides. */
.auth-split [hidden] { display: none !important; }

/* The prototype leaves line-height at the font's own "normal" on nearly everything in the flow, and sets it only
   where a paragraph wraps (the subtitle, the terms, the help lines, a role's description); the boxes it draws are
   those line boxes plus its paddings, so the flow does the same and sets a ratio only where the prototype does
   ("Six-step sign-up", 2026-10-07, measured at 1920). */
.auth-split { display: flex; align-items: stretch; padding: 0; background: var(--auth-split-bg); line-height: normal; }
/* a workspace type's own colour — a chosen card's edge — and the ground its orb's tile sits on (proto 1199,
   1208); violet until a type is chosen, so the preview has a colour on steps 1-3 */
.auth-split { --auth-mark-1: var(--auth-social); --auth-mark-soft: var(--auth-social-soft); }
.auth-split .is-skills { --auth-mark-1: var(--auth-skills); --auth-mark-soft: var(--auth-skills-soft); }
.auth-split .is-social { --auth-mark-1: var(--auth-social); --auth-mark-soft: var(--auth-social-soft); }
/* the prototype's Skills and Social orbs (signup/orb.jte, steps/workspace.jte; proto 1201, 1351, 1372) */
.signup-orb { display: block; flex: none; object-fit: contain; }
.signup-orb-card { width: var(--auth-orb-card); height: var(--auth-orb-card); }
.signup-orb-tile { width: var(--auth-orb-tile); height: var(--auth-orb-tile); }
.signup-orb-pill { width: var(--auth-orb-pill); height: var(--auth-orb-pill); }

/* the rail is its own scroller: the page never scrolls, so a long step (step 1 has the two SSO
   tiles under the divider) scrolls inside the column and the preview stays put */
.signup-rail { flex: none; width: var(--auth-rail-w); max-width: 100%; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: var(--auth-rail-pad) var(--auth-rail-pad) calc(var(--auth-rail-pad) - 6px); background: var(--auth-rail-bg); border-right: 1px solid var(--auth-rail-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left; }
.signup-brand { display: block; flex: none; width: var(--auth-brand); height: var(--auth-brand); margin-bottom: var(--auth-rail-pad); }
.signup-title { font-size: var(--auth-title); font-weight: 600; letter-spacing: .2px; margin-bottom: 6px; }
.signup-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.signup-sub { max-width: 300px; font-size: var(--auth-text-sm); line-height: 1.5; color: var(--auth-ink-quiet); }
.signup-counter { flex: none; padding-bottom: 2px; font-size: var(--auth-text-xs); white-space: nowrap; color: var(--auth-ink-faint); }
/* the bar is a sixth per step, rounded as the prototype rounds it (proto 1066, 27970: round(N / 6 * 100)%). The
   width is a class rather than an inline style so the six widths stay in the stylesheet; the step's own percentage
   is on the progressbar as aria-valuenow. */
.signup-progress { flex: none; height: 3px; margin: 10px 0 var(--auth-progress-gap); border-radius: 2px; background: var(--auth-progress-track); overflow: hidden; }
.signup-progress-fill { display: block; height: 100%; border-radius: 2px; background: var(--auth-progress); }
.signup-progress-fill.is-step-1 { width: 17%; }
.signup-progress-fill.is-step-2 { width: 33%; }
.signup-progress-fill.is-step-3 { width: 50%; }
.signup-progress-fill.is-step-4 { width: 67%; }
.signup-progress-fill.is-step-5 { width: 83%; }
.signup-progress-fill.is-step-6 { width: 100%; }

/* ---- the step's form ---- */
.signup-form { display: flex; flex-direction: column; gap: var(--auth-gap); }
.signup-field { display: flex; flex-direction: column; }
.signup-field > label { margin-bottom: 10px; font-size: var(--auth-text); font-weight: 500; color: var(--auth-fg); }
.signup-required { color: var(--auth-ink-quiet); }
.signup-input { position: relative; display: flex; align-items: center; }
.signup-field input, .signup-select { width: 100%; height: var(--auth-field-h); padding: 0 16px; border: 1px solid var(--auth-rail-field-line); border-radius: var(--radius); background: var(--auth-rail-field-bg); color: var(--auth-fg); caret-color: var(--auth-fg); font: inherit; font-size: var(--auth-text); }
.signup-input input, .signup-select { padding-right: 46px; }
.signup-field input::placeholder { color: var(--auth-ink-help); }
.signup-field input:focus-visible, .signup-select:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.signup-field input:-webkit-autofill { -webkit-text-fill-color: var(--auth-fg); }
.signup-field input[aria-invalid="true"], .signup-select[aria-invalid="true"] { border-color: var(--danger); }
/* the end adornment: the envelope, the lock, the select's chevron (proto 1001, 1044, 1083) */
.signup-input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--auth-icon); pointer-events: none; }
.signup-input-icon .icon { width: 18px; height: 18px; }
/* --danger resolves to its dark branch here (.auth sets color-scheme: dark), which is the lifted red */
.field-error { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--danger); }
/* A refusal that carries its own way out — the company-domain one, which links to sign-in (steps/email.jte).
   The link is set in the page's own ink rather than the error's, so it reads as the thing to press. */
.field-error a { color: var(--auth-fg); text-decoration: underline; }
/* The step's form-level notice (signup/notice.jte): the console notice recast on the dark rail. Only the ground
   and the text change — the amber left edge .notice-warn draws is already the dark branch of --warn here. */
.signup-form > .notice { padding: var(--auth-tile-pad) var(--auth-control-pad); background: var(--auth-tile-bg); }
.signup-form > .notice .notice-text { font-size: var(--auth-text-quiet); line-height: 1.5; color: var(--auth-fg); }
.signup-terms { margin: var(--auth-terms-top) 0 var(--auth-terms-bottom); font-size: 12px; line-height: 1.5; color: var(--auth-ink-help); }
/* step 1 spaces its three rows itself — the field, the terms 16px under it and Continue 22px under those (proto
   1078-1079) — and its Continue is the flow's one larger button (proto 1079: 15px type, 15px inset) */
.signup-email { gap: 0; }
.signup-email .signup-next { padding: var(--auth-continue-pad); font-size: var(--auth-text-continue); }
.signup-terms a { color: var(--auth-fg); text-decoration: underline; }
/* the select and the handle's box are a step taller than a text field: the prototype sets its own font on both,
   whose line box is taller than the one its plain inputs fall back to (proto 1185, 1217) */
.signup-select { height: var(--auth-select-h); appearance: none; cursor: pointer; font-family: var(--font); }
/* a required select still on its placeholder is :invalid — which is exactly "nothing chosen yet",
   so the placeholder ink needs no JS (proto 1077: a quieter colour until a country is picked) */
.signup-select:invalid { color: var(--auth-ink-help); }
.signup-select option { color: var(--auth-fg); background: var(--auth-option-bg); }
.signup-select option[value=""] { color: var(--auth-ink-help); }

/* the primary button: full width in step 1's form, half the bottom nav from step 2 on */
.signup-next { flex: none; justify-content: center; padding: var(--auth-control-pad); border-radius: var(--radius); font-size: var(--auth-text-md); font-weight: 500; color: var(--auth-fg); }
/* "Single sign-on" between the form and the tiles ("Six-step sign-up", 2026-10-07; proto 1081-1085): a small
   uppercase label between two hairlines that fade into it. It is a sibling of the form in the rail, not an item in
   its flow, so it carries its own space above and below. */
.signup-or { display: flex; align-items: center; gap: var(--auth-gap-sm); margin: var(--auth-or-gap-top) 0 var(--auth-or-gap-bottom); font-size: var(--auth-text-eyebrow); font-weight: 500; letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; color: var(--auth-divider-ink); }
.signup-or::before, .signup-or::after { content: ""; flex: 1; height: 1px; }
.signup-or::before { background: linear-gradient(90deg, transparent, var(--auth-divider-line)); }
.signup-or::after { background: linear-gradient(90deg, var(--auth-divider-line), transparent); }

/* The two SSO tiles: inert until the flows exist, so they are plain list items rather than buttons, each
   naming itself "Coming soon" to a screen reader (the house pattern in account/settings/account.jte).
   A sighted reader is told the same by the default cursor and the tile's title. Nothing is dimmed —
   the prototype draws both tiles at full strength (proto 1015-1029), and an opacity here would read as
   a disabled control, which is the impression the markup deliberately avoids. */
.signup-sso { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--auth-gap-sm); }
.signup-tile { display: flex; align-items: center; gap: var(--auth-gap-sm); padding: var(--auth-tile-pad) var(--auth-control-pad); border: 1px solid var(--auth-rail-tile-line); border-radius: var(--auth-tile-radius); background: var(--auth-rail-tile-bg); cursor: default; }
.signup-tile-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--auth-rail-tile-icon-bg); }
.signup-tile-icon img { display: block; width: 20px; height: 20px; }
.signup-tile-text { display: flex; flex-direction: column; min-width: 0; }
.signup-tile-title { display: block; font-size: var(--auth-text-md); font-weight: 500; color: var(--auth-fg); }
.signup-tile-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--auth-ink-faint); }

/* ---- steps 2 and 3: the picture row ("Six-step sign-up", 2026-10-07; proto 1113-1127, 1155-1171) ----
 * A 76px picture — the person's circle, the organisation's rounded tile — beside its title, the upload control
 * (and Remove, or the bin, once there is something to remove), the rule line and a refused file's sentence. The
 * file input is inside the control's label and only visually hidden, so it keeps its focus and its name; the row is
 * outside the step's form, so it carries the form's gap below it itself. */
.signup-picture { display: flex; align-items: center; gap: var(--auth-gap-md); margin-bottom: var(--auth-gap); }
.signup-picture-frame { flex: none; display: flex; width: var(--auth-picture); height: var(--auth-picture); overflow: hidden; border-radius: 50%; background: var(--auth-rail-field-bg); }
.signup-picture-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.signup-logo-tile { flex: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--auth-picture); height: var(--auth-picture); overflow: hidden; border: 1px solid var(--auth-rail-field-line); border-radius: var(--auth-logo-radius); background: var(--auth-rail-field-bg); }
.signup-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.signup-logo-empty { display: flex; color: var(--auth-ink-faint); }
.signup-logo-empty .signup-glyph { width: var(--auth-picture-glyph); height: var(--auth-picture-glyph); }
.signup-picture-text { min-width: 0; }
.signup-picture-title { font-size: var(--auth-text-picture); font-weight: 600; }
.signup-picture-actions { display: flex; align-items: center; gap: var(--auth-picture-gap-sm); margin-top: var(--auth-picture-gap); }
.signup-upload { display: inline-flex; align-items: center; gap: var(--auth-picture-gap-sm); padding: var(--auth-upload-pad-y) var(--auth-upload-pad-x); border: 1px solid var(--auth-control-line); border-radius: var(--auth-control-radius); background: var(--auth-control-bg); color: var(--auth-fg); font: inherit; font-size: var(--auth-text-sm); font-weight: 500; cursor: pointer; }
.signup-upload:hover { background: var(--auth-control-hover); }
.signup-upload:focus-visible, .signup-upload:has(:focus-visible) { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.signup-upload .signup-glyph { width: var(--auth-glyph); height: var(--auth-glyph); }
/* the logo's bin: a square of the control's height, the danger ink, a red wash under the pointer (proto 1166) */
.signup-upload-bin { justify-content: center; box-sizing: border-box; width: var(--auth-upload-bin); height: var(--auth-upload-bin); padding: 0; color: var(--auth-danger-ink); }
.signup-upload-bin:hover { background: var(--auth-danger-hover); }
.signup-picture-help { margin-top: var(--auth-picture-gap-sm); font-size: var(--auth-text-help); color: var(--auth-ink-help); }
.signup-picture-error { margin-top: var(--auth-picture-error-gap); font-size: var(--auth-text-help); line-height: normal; color: var(--auth-danger-ink); }
.signup-picture-error.signup-logo-error { margin-top: var(--auth-logo-error-gap); }

/* ---- step 4: the type cards and the handle (proto 1193-1220) ---- */
.signup-types { display: flex; flex-direction: column; gap: var(--auth-gap-md); margin: 0; padding: 0; border: 0; }
.type-card { position: relative; display: block; padding: var(--auth-card-pad); border: 1.5px solid var(--auth-rail-tile-line); border-radius: var(--radius-lg); background: var(--auth-card-idle-bg); cursor: pointer; }
.type-card:focus-within { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
/* :has(:checked) is the whole of the card's selected state — the radio itself is only visually hidden, so the
   browser keeps the arrow keys, the name grouping and the required check. The chosen card takes its type's own
   edge and wash (proto 28036-28040). */
.type-card:has(:checked) { border-color: var(--auth-mark-1); }
.type-card.is-skills:has(:checked) { background: var(--auth-skills-card); }
.type-card.is-social:has(:checked) { background: var(--auth-social-card); }
.type-card-tile { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: var(--radius); background: var(--auth-mark-soft); }
.type-card-title { display: block; font-size: var(--auth-text-lg); font-weight: 600; color: var(--auth-fg); }
.type-card-sub { display: block; margin-top: 3px; font-size: var(--auth-text-xs); color: var(--auth-ink-quiet); }
.type-card-radio { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--auth-radio-off); border-radius: 50%; }
.type-card-radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--auth-radio-dot); opacity: 0; }
.type-card:has(:checked) .type-card-radio { border-color: var(--auth-radio-on); }
.type-card:has(:checked) .type-card-radio::after { opacity: 1; }
/* The handle's box holds the address it completes as a muted prefix, then the field itself, borderless inside it
   (proto 1214-1218). The box is what a person sees as the field, so it carries the focus ring and the refusal. */
.signup-prefixed { display: flex; align-items: center; padding: 0 var(--auth-field-pad-x); border: 1px solid var(--auth-rail-field-line); border-radius: var(--radius); background: var(--auth-rail-field-bg); cursor: text; }
.signup-prefixed:has(input:focus-visible) { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.signup-prefixed:has([aria-invalid="true"]) { border-color: var(--danger); }
.signup-prefix { flex: none; font-size: var(--auth-text); color: var(--auth-ink-faint); white-space: nowrap; }
.signup-field .signup-prefixed input { flex: 1; min-width: 0; height: calc(var(--auth-select-h) - 2px); padding: 0; border: 0; border-radius: 0; background: transparent; }
.signup-field .signup-prefixed input:focus-visible { outline: none; }

/* ---- step 5: invite your team (proto 1229-1271) ----
 * One box per row: the address and the role menu's button side by side on the field's ground, edged red when the
 * server refused the row. The open row stacks over the rows below it, so its menu does too. */
.signup-team, .signup-source { gap: 0; }
.signup-workspace { gap: var(--auth-gap-md); }
.signup-invites { margin: 0; padding: 0; border: 0; min-width: 0; }
.signup-invites-label { margin-bottom: var(--auth-row-gap); padding: 0; font-size: var(--auth-text); font-weight: 500; color: var(--auth-fg); }
.signup-invite-rows { display: flex; flex-direction: column; gap: var(--auth-row-gap); }
.signup-invite-row { position: relative; z-index: 1; }
.signup-invite-row.is-open { z-index: 3; }
.signup-invite-box { position: relative; display: flex; align-items: center; border: 1px solid var(--auth-rail-field-line); border-radius: var(--radius); background: var(--auth-rail-field-bg); }
.signup-invite-box:has([aria-invalid="true"]) { border-color: var(--auth-row-invalid); }
.signup-invite-box:has(.signup-invite-email:focus-visible) { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.signup-invite-email { flex: 1; min-width: 0; height: var(--auth-invite-h); padding: 0 var(--auth-picture-gap-sm) 0 var(--auth-field-pad-x); border: 0; background: transparent; color: var(--auth-fg); caret-color: var(--auth-fg); font: inherit; font-size: var(--auth-text); outline: none; }
.signup-invite-email::placeholder { color: var(--auth-ink-help); }
.signup-role-toggle { flex: none; display: flex; align-items: center; gap: var(--auth-role-gap); padding: var(--auth-upload-pad-y) var(--auth-control-pad) var(--auth-upload-pad-y) var(--auth-invite-gap); border: 0; border-radius: var(--auth-control-radius); background: none; color: var(--auth-ink-strip); font: inherit; font-size: var(--auth-text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; }
.signup-role-toggle:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: -2px; }
.signup-role-toggle .signup-glyph { width: var(--auth-glyph-sm); height: var(--auth-glyph-sm); color: var(--auth-ink-quiet); }
.signup-role-menu { position: absolute; top: calc(100% + var(--auth-menu-offset)); right: 0; z-index: 2; width: var(--auth-role-menu-w); max-width: calc(100vw - 2 * var(--auth-rail-pad)); padding: var(--auth-menu-pad); border: 1px solid var(--auth-role-pill-line); border-radius: var(--auth-tile-radius); background: var(--auth-option-bg); box-shadow: var(--auth-menu-shadow); }
.signup-role-option { display: flex; align-items: flex-start; gap: var(--auth-invite-gap); width: 100%; padding: var(--auth-option-pad-y) var(--auth-option-pad-x); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--auth-fg); font: inherit; text-align: left; cursor: pointer; }
.signup-role-option[aria-checked="true"] { background: var(--auth-menu-on); }
.signup-role-option:hover, .signup-role-option:focus-visible { background: var(--auth-menu-hover); outline: none; }
.signup-role-option:focus-visible { box-shadow: inset 0 0 0 2px var(--auth-fg-muted); }
.signup-role-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.signup-role-option-label { font-size: var(--auth-text-sm); font-weight: 500; }
.signup-role-option-desc { margin-top: var(--auth-desc-gap); font-size: var(--auth-text-help); line-height: 1.45; color: var(--auth-ink-faint); }
.signup-role-option-check { flex: none; display: flex; margin-top: var(--auth-check-nudge); color: var(--auth-menu-check); visibility: hidden; }
.signup-role-option[aria-checked="true"] .signup-role-option-check { visibility: visible; }
.signup-role-option-check .signup-glyph { width: var(--auth-glyph-sm); height: var(--auth-glyph-sm); }
.signup-add-row { margin-top: var(--auth-gap-sm); }
.signup-add { display: inline-flex; align-items: center; gap: var(--auth-picture-gap-sm); padding: var(--auth-add-pad-y) var(--auth-add-pad-x); border: 1px dashed var(--auth-add-line); border-radius: var(--radius-sm); background: none; color: var(--auth-ink-soft); font: inherit; font-size: var(--auth-text-sm); cursor: pointer; }
.signup-add:hover { background: var(--auth-control-bg); }
.signup-add:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.signup-add .signup-glyph { width: var(--auth-glyph-md); height: var(--auth-glyph-md); color: var(--auth-icon); }
.signup-team-error { margin-top: var(--auth-gap-sm); font-size: var(--auth-text-xs); line-height: normal; color: var(--auth-step-error); }
.signup-team-help { margin-top: var(--auth-team-help-gap); font-size: var(--auth-text-help); line-height: 1.55; color: var(--auth-ink-help); }

/* ---- step 6: where you heard about us (proto 1273-1291) ---- */
.signup-chips { display: flex; flex-wrap: wrap; gap: var(--auth-chip-gap); }
.signup-chip { display: flex; align-items: center; gap: var(--auth-chip-icon-gap); padding: var(--auth-add-pad-y) var(--auth-chip-pad-x); border: 1px solid var(--auth-rail-field-line); border-radius: var(--auth-control-radius); background: var(--auth-rail-tile-bg); color: var(--auth-ink-strip); font: inherit; font-size: var(--auth-text-quiet); font-weight: 500; cursor: pointer; }
.signup-chip:hover { background: var(--auth-chip-hover); }
.signup-chip:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; }
.signup-chip[aria-pressed="true"] { border-color: var(--auth-chip-on-line); background: var(--auth-chip-on-bg); color: var(--auth-fg); }
.signup-chip .signup-glyph, .signup-chip-orb { flex: none; display: block; width: var(--auth-glyph-md); height: var(--auth-glyph-md); }
.signup-chip .signup-glyph { color: var(--auth-icon); }
.signup-chip[aria-pressed="true"] .signup-glyph { color: var(--auth-fg); }
.signup-chip-orb { object-fit: contain; }
.signup-other { margin-top: var(--auth-or-gap); }

/* ---- the rail's foot ---- */
.signup-spacer { flex: 1 1 auto; min-height: 24px; }
.signup-nav { flex: none; display: flex; gap: var(--auth-gap-sm); margin-bottom: var(--auth-nav-gap); }
/* a 1px clear edge, so the forward button is Back's height whether or not Back stands beside it (proto 1295-1296) */
.signup-nav .signup-next { flex: 1; border: 1px solid transparent; }
.auth-ghost { flex: none; justify-content: center; padding: var(--auth-control-pad) var(--auth-ghost-pad-x); border: 1px solid var(--auth-ghost-line); border-radius: var(--radius); background: var(--auth-ghost-bg); color: var(--auth-fg); font-size: var(--auth-text-md); font-weight: 500; }
.auth-ghost:hover { background: var(--auth-rail-field-bg); }
/* Skip for now: the optional steps' quiet line under the nav, pulled up into the nav's own space below it
   (proto 1302-1304: margin -6px 0 20px) — a text button, so the forward button stays the step's one action */
.signup-skip-row { flex: none; margin: calc(-1 * var(--auth-skip-lift)) 0 var(--auth-skip-gap); text-align: center; }
.signup-skip { padding: 0; border: 0; background: none; color: var(--auth-ink-quiet); font: inherit; font-size: var(--auth-text-sm); cursor: pointer; }
.signup-skip:hover { color: var(--auth-fg); }
.signup-skip:focus-visible { outline: 2px solid var(--auth-fg-muted); outline-offset: 2px; border-radius: var(--radius-sm); }
.signup-foot { flex: none; text-align: center; font-size: var(--auth-text-sm); color: var(--auth-ink-quiet); }
.signup-foot a { color: var(--auth-fg); font-weight: 600; text-decoration: none; }
.signup-foot a:hover { text-decoration: underline; }

/* ---- the preview pane ---- */
.signup-preview { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; padding: var(--auth-preview-inset); }
.signup-stack { width: var(--auth-preview-w); max-width: 100%; }
/* The stack sits above centre, as the prototype places it (proto 1137: margin-top -120px) — but only
   where there is room for it. On a short viewport the lift pulls the org card up under the top edge,
   so below 760px of height the stack simply stays centred. */
@media (min-height: 760px) { .signup-stack { margin-top: calc(-1 * var(--auth-preview-lift)); } }
.signup-card-top { padding: var(--auth-preview-pad); border-radius: var(--radius-lg) var(--radius-lg) 4px 4px; background: var(--auth-preview-bg); }
.signup-card-bottom { border-radius: 4px 4px var(--radius-lg) var(--radius-lg); background: var(--auth-preview-bg); overflow: hidden; }
.signup-org { display: flex; align-items: center; gap: var(--auth-gap-md); }
.signup-org-tile { flex: none; display: grid; place-items: center; width: var(--auth-preview-avatar); height: var(--auth-preview-avatar); border-radius: 12px; overflow: hidden; background: var(--auth-org-tile); font-family: var(--font-serif); font-size: var(--auth-preview-initial); font-weight: 700; line-height: 1; color: var(--auth-fg); }
.signup-org-logo { width: 100%; height: 100%; object-fit: contain; }
.signup-org-text { min-width: 0; }
.signup-org-name { font-size: var(--auth-preview-title); font-weight: 600; overflow-wrap: anywhere; }
.signup-org-country { margin-top: 4px; font-size: var(--auth-text-quiet); color: var(--auth-ink-quiet); }
.signup-connector { display: flex; flex-direction: column; align-items: center; }
.signup-connector-line { width: 1px; height: 44px; border-left: 1px dashed var(--auth-dashed); }
.signup-connector-dot { width: 9px; height: 9px; margin: -26px 0 17px; border-radius: 50%; background: var(--auth-dot); }
.signup-ws { display: flex; align-items: center; gap: var(--auth-gap-md); padding: var(--auth-preview-pad); }
.signup-ws-tile { flex: none; display: grid; place-items: center; width: var(--auth-ws-tile); height: var(--auth-ws-tile); border-radius: 12px; background: var(--auth-skel-tile); }
.signup-ws-text { min-width: 0; }
.signup-ws-name { font-size: var(--auth-preview-name); font-weight: 600; overflow-wrap: anywhere; }
.signup-ws-url { margin-top: 4px; font-size: var(--auth-text-quiet); color: var(--auth-ink-quiet); overflow-wrap: anywhere; }
.signup-strip { display: flex; align-items: center; gap: 16px; padding: 14px var(--auth-preview-pad); border-top: 1px solid var(--auth-strip-line); background: var(--auth-strip-bg); }
.signup-type-pill { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: var(--radius-pill); background: var(--auth-pill-bg); font-size: var(--auth-text-quiet); color: var(--auth-ink-strip); }
.signup-strip-divider { flex: none; width: 1px; height: 26px; background: var(--auth-strip-divider); }
.signup-identity { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* the person's picture in the strip (proto 1381): the palette avatar, or the one picked on the account step */
.signup-avatar { flex: none; display: grid; place-items: center; width: var(--auth-strip-avatar); height: var(--auth-strip-avatar); overflow: hidden; border-radius: var(--auth-control-radius); background: var(--auth-role-pill-bg); }
.signup-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.signup-avatar-empty { background: var(--auth-skel-tile); color: var(--auth-icon); }
.signup-avatar-empty .icon { width: 16px; height: 16px; }
.signup-person { font-size: var(--auth-text); color: var(--auth-ink-strip); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.signup-role-badge { flex: none; padding: 6px 14px; border: 1px solid var(--auth-role-pill-line); border-radius: var(--radius-pill); background: var(--auth-role-pill-bg); font-size: var(--auth-text-xs); color: var(--auth-ink-strip); }

/* a card still waiting for what has not been typed yet (proto 1152-1158, 1186-1191) */
.signup-skel { display: block; height: 12px; border-radius: 6px; background: var(--auth-skel-soft); }
.signup-skel-strong { background: var(--auth-skel-strong); }
.signup-skel-lines { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.signup-skel-name { width: 180px; max-width: 100%; }
.signup-skel-line { width: 240px; max-width: 100%; }
.signup-skel-country { width: 150px; max-width: 100%; height: 11px; margin-top: 8px; }
.signup-skel-ws-name { width: 130px; max-width: 100%; }
.signup-skel-ws-line { width: 230px; max-width: 100%; }
.signup-skel-tile { flex: none; display: grid; place-items: center; width: var(--auth-preview-avatar); height: var(--auth-preview-avatar); border-radius: 12px; background: var(--auth-skel-tile); }
.signup-skel-tile-sm { width: var(--auth-ws-tile); height: var(--auth-ws-tile); }
.signup-skel-disc { width: 36px; height: 36px; border-radius: 50%; background: var(--auth-skel-strong); }
.signup-skel-disc-sm { width: 32px; height: 32px; }
.signup-skel-pill { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); background: var(--auth-pill-bg); }
.signup-skel-pill-disc { width: 20px; height: 20px; border-radius: 50%; background: var(--auth-skel-strong); }
.signup-skel-pill-bar { width: 56px; height: 10px; border-radius: 5px; background: var(--auth-skel-strong); }
.signup-skel-role { width: 64px; flex: none; background: var(--auth-skel-strong); }

/* The team card under the workspace on the two optional steps (proto 1393-1432): who is about to be invited, or
   who was. Each row's tile takes the next of the prototype's six pastel grounds, in the card's dark ink. */
.signup-team-card { margin-top: var(--auth-gap-sm); padding: var(--auth-team-pad-top) var(--auth-preview-pad) var(--auth-team-pad-bottom); border-radius: var(--radius-lg); background: var(--auth-preview-bg); }
.signup-team-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--auth-team-head-gap); }
.signup-team-title { font-size: var(--auth-text-quiet); font-weight: 600; color: var(--auth-ink-strip); }
.signup-team-count { font-size: var(--auth-text-help); color: var(--auth-ink-faint); }
.signup-team-row { display: flex; align-items: center; gap: var(--auth-invite-gap); padding: var(--auth-option-pad-y) 0; border-top: 1px solid var(--auth-strip-line); }
.signup-team-avatar { flex: none; display: grid; place-items: center; width: var(--auth-team-avatar); height: var(--auth-team-avatar); border-radius: var(--radius-sm); font-size: var(--auth-text-eyebrow); font-weight: 600; color: var(--auth-avatar-fg); }
.signup-team-avatar.tone-0 { background: var(--auth-team-tone-0); }
.signup-team-avatar.tone-1 { background: var(--auth-team-tone-1); }
.signup-team-avatar.tone-2 { background: var(--auth-team-tone-2); }
.signup-team-avatar.tone-3 { background: var(--auth-team-tone-3); }
.signup-team-avatar.tone-4 { background: var(--auth-team-tone-4); }
.signup-team-avatar.tone-5 { background: var(--auth-team-tone-5); }
.signup-team-avatar.is-skeleton { background: var(--auth-skel-tile); }
.signup-team-email { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--auth-text-quiet); color: var(--auth-ink-strip); }
.signup-team-pending { flex: none; font-size: var(--auth-text-tiny); color: var(--auth-ink-faint); }
.signup-team-role { flex: none; padding: var(--auth-team-pill-pad-y) var(--auth-team-pill-pad-x); border: 1px solid var(--auth-role-pill-line); border-radius: var(--radius-pill); background: var(--auth-role-pill-bg); font-size: var(--auth-text-tiny); color: var(--auth-ink-strip); }
.signup-team-more { padding: var(--auth-team-more-pad-top) 0 var(--auth-team-more-pad-bottom); border-top: 1px solid var(--auth-strip-line); font-size: var(--auth-text-help); color: var(--auth-ink-faint); }
.signup-team-fill { flex: 1; }
.signup-skel-team-long { width: var(--auth-skel-team-long); height: var(--auth-skel-team-bar); background: var(--auth-skel-soft); }
.signup-skel-team-short { width: var(--auth-skel-team-short); height: var(--auth-skel-team-bar); background: var(--auth-skel-faint); }
.signup-skel-team-pill { flex: none; width: var(--auth-skel-team-pill-w); height: var(--auth-skel-team-pill-h); border-radius: var(--radius-pill); background: var(--auth-role-pill-bg); }

/* One pane below a laptop's width: the preview is the flow's reassurance, not its content, and the
   rail is the only thing you can act on. It stays in the DOM — the step's response swaps it
   out-of-band, and an element that is display:none is still a swap target. */
@media (max-width: 1100px) {
  .signup-preview { display: none; }
  .signup-rail { width: 100%; border-right: 0; }
}

/* ---- frame ----
 * The App shell's geometry is the prototype's (proto 1498-1769). Two things follow from it and
 * shape everything below: the chrome is ONE gradient the sidebar and the top bar sit on with no
 * background of their own, and the panel — not the stage — is the scroll container (the
 * prototype's content shell is overflow:hidden and its pane scrolls, proto 1764/3353). The second
 * is why the top bar needs neither a fixed height nor a background: nothing ever passes under it,
 * and the panel's height is simply the space that is left. The prototype's min-width:1240px is NOT
 * adopted — the console keeps its 820px stacking breakpoint (decision, 2026-09-23). Its
 * rail-under-1100px script is adopted only as a DEFAULT, in JS and in the 821-1280px band: a narrow
 * viewport that has never been told otherwise starts on the rail — but never a stacked one, where
 * there is no collapse button — and an explicit choice always wins
 * (static/js/console.js, "Density", 2026-09-23). Everything else about the shell's proportions at
 * that width is the density layer in tokens.css, not a breakpoint here. */
.console { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); height: 100vh; background: var(--chrome-grad); color: var(--chrome-fg); transition: grid-template-columns .18s ease; }
.console.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
/* The rail slides: the prototype animates the sidebar's width over .18s ease while its contents switch at once
 * (proto 1509 `transition: width 0.18s ease`). Here the width is the grid's first track, which animates the same way.
 * People who ask for reduced motion get the instant switch. */
@media (prefers-reduced-motion: reduce) { .console, .nav-entry { transition: none; } }
/* …but not on the first paint. The server renders the sidebar expanded; a viewport that defaults to
 * the rail gets `is-collapsed` from Alpine after load, which would animate the sidebar shut on every
 * single load. The shell adds `is-ready` a frame after that first class is applied (static/js/console.js,
 * `shell`), and only then does the track transition. */
.console:not(.is-ready) { transition: none; }
/* The sidebar is its own viewport: the ladder pinned at the top, the nav scrolling in the middle,
 * the person card pinned at the bottom (2026-09-11). No background and no right border — it is the
 * chrome gradient (proto 1509 · 990). overflow stays visible so the ladder and person-card menus can
 * leave it; the nav does its own scrolling. Its ink is the chrome's running text ink, which is what
 * anything inside it that names no ink of its own inherits (proto 1509: color var(--chrome-ink)). */
.sidebar { display: flex; flex-direction: column; padding: 12px 10px; min-width: 0; height: 100vh; overflow: visible; color: var(--chrome-fg-text); }
.sidebar-top { display: flex; align-items: flex-start; flex: none; margin-bottom: 8px; }  /* proto 1511 */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* Top bar: no height of its own, no background, no border — the padding is the height (proto 1701). */
.stage-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: var(--bar-pad-top) 24px var(--bar-pad-bottom) 10px; }
/* The title line sets the bar's height: 18px at Poppins' normal line height = 27px, so the bar is 14 + 27 + 12 = 53px like the
   prototype's console panes (proto 1701/1708), and 12 + 27 + 10 = 49px compact. Only the task-view back arrow (32px) may grow
   it, as in the prototype (proto 1704). */
.stage-title { font-size: 18px; line-height: 27px; font-weight: 600; color: var(--chrome-fg); }
/* Actions never grow the bar: the cluster is the title line tall and its pills centre on it, overhanging into the padding
   (proto 1712-1714: tab pills 13px, padding 7px 16px, radius 999). */
.stage-actions { display: flex; gap: .5rem; align-items: center; height: 27px; }
.stage-actions .button.pill { font-size: 13px; line-height: 1.5; padding: 7px 16px; }
/* Two elements, as the prototype draws them: .panel is the rounded shell (proto 1764 — radius 18,
 * margin 0 10px 10px 0, overflow hidden so the corners clip whatever is inside, scrollbar included)
 * and .pane is the scroller inside it (proto 3353 — wash, padding 24px 28px · compact 20px 24px,
 * its own scrollbar).
 * One element could not do both: a scroll container paints its scrollbar over its own rounded
 * corners, which squared the panel's right edge (fixed 2026-09-23). The single grid track caps the
 * content column at 1180px (proto 3354) while the wash still spans the full width. */
.panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; margin: 0 10px 10px 0; border-radius: 18px; background: var(--wash-grad-2); color: var(--ink); }
/* Every row is sized by what stands in it (minmax(min-content, auto)), not by the pane's own height: the
   pane is a flex item with a definite height, and auto tracks inside one are fitted to that height — so a
   page taller than the pane had its rows squeezed, and a list card, which clips its rows to its radius
   (overflow: hidden below), swallowed its last rows instead of the pane scrolling. The auto ceiling keeps
   the one row that must fill the pane able to (the settings task view, which stretches). Measured
   2026-09-28 on the organisation's page, whose three list cards are the pane's own children. */
.pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: min(100%, 1180px); grid-auto-rows: minmax(min-content, auto); justify-content: start; align-content: start; padding: var(--pane-pad-y) var(--pane-pad-x); }
/* Scrollbars follow the prototype (proto 933: --sb-thumb = white at 16%, --sb-track transparent; applied at 992-996): a thin
 * translucent thumb and no track, so the nav rail and the pane never show a stock white gutter. */
.nav, .settings-nav { scrollbar-width: thin; scrollbar-color: var(--glass-line-2) transparent; }
.pane, .settings-pane { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }


/* ---- context ladder (proto 1511-1534 · 25760-25770): Blinklink › Partner › organisation › workspace ---- */
/* Rows ellipsize their name rather than widen the card: every grid track and flex item here is allowed to shrink (2026-09-11). */
.ladder { position: relative; flex: 1; min-width: 0; }
.ladder-path { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--ladder-pad); border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-1); }   /* proto 1512 · 26831 */
/* A row stretches its three parts to its own height (proto 1514: align-items stretch): the rail column,
 * whose two spine segments must reach the row's edges to join the rows above and below, the text, and
 * the switch. */
.rung { display: flex; align-items: stretch; gap: 7px; min-width: 0; min-height: 30px; padding: 0 6px 0 4px; border-radius: 9px; border: 1px solid transparent; --rung: var(--flavor); --rung-soft: var(--flavor-soft); }   /* proto 1514 · 25762-25765 */
.rung-platform { --rung: var(--platform); --rung-soft: var(--platform-soft); }
.rung-msp { --rung: var(--msp); --rung-soft: var(--msp-soft); }
.rung-org { --rung: var(--org); --rung-soft: var(--org-soft); }
.rung-skills { --rung: var(--skills); --rung-soft: var(--skills-soft); }
.rung-social { --rung: var(--social); --rung-soft: var(--social-soft); }
/* Where you stand: the level's own colour at the prototype's two alphas (proto 25768 — fill
 * rgba(level,0.16) inside a rgba(level,0.42) hairline). */
.rung.is-lit { min-height: var(--rung-lit-h); background: color-mix(in srgb, var(--rung) 16%, transparent); border-color: color-mix(in srgb, var(--rung) 42%, transparent); }
.rung-link { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 7px; border-radius: 9px; color: var(--chrome-fg); text-decoration: none; }
/* Only a row that goes somewhere, and not the one you stand on, lights up under the pointer — the whole
 * row, switch included (proto 25770: hover only when clickable && !cur). A context-only rung is a <span>
 * ("Org as a stop", 2026-09-28 — ladder.jte). */
.rung:not(.is-lit):has(> a.rung-link:hover) { background: var(--glass-hover); }
/* The rail column: 14px for a dot, the tile's own width where you stand (proto 1515 · 25763). The path's
 * spine is drawn per row, as the prototype draws it (proto 1516/1520 · 25766): a segment above the mark
 * and one below, each taking half of what the mark leaves, none above the first row and none below the
 * last. Drawn this way the spine stops at the tile's edge rather than running behind it, which matters
 * now that the tile's ground is translucent. */
.rung-rail { flex: none; display: flex; flex-direction: column; align-items: center; width: 14px; }
.rung.is-lit .rung-rail { width: 30px; }
.rung-rail::before, .rung-rail::after { content: ""; flex: 1; width: 1px; background: var(--glass-line-2); }
.rung:first-child .rung-rail::before, .rung:last-child .rung-rail::after { background: transparent; }
.rung-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--rung); }   /* proto 1517 */
/* The face of where you stand (decision 6, "Sidebar to the prototype", 2026-09-29; proto 1519 · 22333-22338 orbGround and levelTile):
 * a 30px tile on the level's orb ground — its colour at 34% into 10% — closed by a hairline of the same
 * colour at half alpha. The platform's tile holds the gold orb; a Partner, an organisation and a workspace
 * keep their monogram (or the workspace glyph) on that ground until tenant logos exist. */
.rung-tile { flex: none; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--rung) 50%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--rung) 34%, transparent), color-mix(in srgb, var(--rung) 10%, transparent)); color: var(--accent-fg); font-size: 12px; font-weight: 700; line-height: normal; }
.rung-tile .icon { width: 16px; height: 16px; }
/* the orb fills the tile inside its hairline (proto 22328: width/height 100%, object-fit cover) */
.rung-orb { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The text sits centred in the row with the prototype's inset (proto 1523: padding 4px 0, 6px where you stand). */
.rung-text { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; align-self: center; min-width: 0; flex: 1; padding: 4px 0; line-height: 1.25; }   /* proto 1523-1528 */
.rung-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--chrome-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* proto 1525 · 25769 */
/* Level labels are the muted chrome ink on every row, lit or not (proto 1526/1528: var(--chrome-muted)); the level colour lives in the tile and the dot, never the text. */
.rung-level { flex: none; font-size: 9px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--chrome-fg-soft); white-space: nowrap; }
/* Stacked, not side by side: no gap — the level label's 2px margin is the only spacing — and the label on the
 * font's own line box, as the prototype leaves it (proto 1526). The inset is --rung-lit-pad-y (tokens.css). */
/* One full-width track: the flex row's space-between would otherwise also size a grid's column to its content,
 * and the name could never ellipsize (proto 1524: the text block is flex:1, 179px at 1920). */
.rung.is-lit .rung-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--rung-lit-pad-y) 0; }
.rung.is-lit .rung-name { font-size: var(--chrome-text-body); font-weight: 600; color: var(--chrome-fg); }
.rung.is-lit .rung-level { margin-top: 2px; font-size: 9.5px; line-height: normal; }
.rung-switch { display: inline-grid; place-items: center; flex: none; align-self: center; margin-left: 1px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--chrome-fg-soft); cursor: pointer; }  /* proto 1530 */
.rung-switch .icon { width: 12px; height: 12px; }
/* the 1px margin above makes the switch sit 8px after the text, the prototype's gap inside the text
   wrapper the switch belongs to there (proto 1523), where here it follows the row's own 7px gap */
.rung-switch:hover, .rung-switch[aria-expanded="true"] { background: var(--glass-hover); color: var(--chrome-fg); }
.ladder-menu { left: 0; top: calc(100% + 6px); width: max(100%, 280px); max-height: 60vh; overflow: auto; }
.menu-search { display: flex; align-items: center; gap: .4rem; margin: .15rem .15rem .35rem; padding: .35rem .5rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.menu-search-icon { color: var(--muted); display: inline-flex; }
.menu-search-input { flex: 1; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; outline: none; min-width: 0; }
.tile { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); flex: none; background: var(--flavor-soft); color: var(--flavor); }
.tile-lg { width: 48px; height: 48px; }
.tile-md { width: 30px; height: 30px; }
.tile-quiet { background: var(--surface-2); color: var(--accent); }
.tile-skills { --flavor: var(--skills); --flavor-soft: var(--skills-soft); }
.tile-social { --flavor: var(--social); --flavor-soft: var(--social-soft); }
.tile-feed { --flavor: var(--feed); --flavor-soft: var(--feed-soft); }
/* An org's derived ground is named once here, as --org-ground, so the Partners screens' org face (.face below) reads
   the same colour; this rule is the one place console.css may mix the inline hue (StylesheetHygieneTests). */
.tile-org { --org-ground: hsl(var(--org-hue, 260) 55% 42%); background: var(--org-ground); color: var(--accent-fg); font-weight: 600; font-size: 14px; }
.tile-msp { background: var(--msp); color: var(--accent-fg); }
/* The platform's own tile: the level's gold, as the ladder's top rung wears it (proto 22336) — the
   soft ground and the hairline of the same gold that closes it (proto 22336: the gold at 0.5). The monogram is the gold's
   text ink rather than the level colour itself, which is under 4.5:1 on that ground (tokens.css --platform-ink-soft). */
.tile-platform { --flavor: var(--platform); --flavor-soft: var(--platform-soft); border: 1px solid var(--platform-line); color: var(--platform-ink-soft); }

/* ---- menus (picker, user card) ---- */
.menu { position: absolute; z-index: 20; min-width: 240px; padding: .35rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); }
.picker-menu { left: 0; top: calc(100% + 6px); width: max(100%, 260px); }
.menu-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .5rem; border-radius: var(--radius); text-decoration: none; color: inherit; font: inherit; background: transparent; border: 0; text-align: left; cursor: pointer; }
.menu-row:hover { background: var(--surface-2); }
.menu-row.is-current { background: var(--surface-2); }
.menu-text { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.menu-title { font-size: 14px; font-weight: 600; }
.menu-title-accent { color: var(--accent); }
.menu-sub { font-size: 11.5px; color: var(--muted); }
.menu-check { color: var(--ok); display: inline-flex; }
.menu-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--ink-2); }
.menu-divider { height: 1px; background: var(--line); margin: .3rem .25rem; }
.menu-empty, .menu-meta { padding: .5rem .6rem; font-size: 12.5px; color: var(--muted); }

/* ---- nav (proto 1559-1582 · 34584-34619) ----
 * The scroll region bleeds 4px either side so a row's fill reaches the sidebar's padding while the
 * scrollbar stays inside it (proto 1559). Group spacing is the header's own margin and rule, and
 * row spacing the row's margin — no gap, because a folded group must not leave one behind. */
.nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px 8px; }
/* The group header is also the fold control (proto 1563-1570 · 34594-34602): the level's own ink,
 * the label ellipsising and the chevron pinned to the right. The rule and the 6px above it are
 * positional — they separate this group from the one before it, so they stay put whether either is
 * folded. The prototype draws a div; this is a button, which is why the reset comes first. */
/* Its line box is the font's own, as the prototype leaves it (proto 1564: no line-height). */
.nav-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 2px; padding: 12px var(--nav-row-pad-x) 6px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; line-height: normal; letter-spacing: .5px; text-transform: uppercase; text-align: left; color: var(--flavor-section); cursor: pointer; user-select: none; }
.nav-group-head:hover { color: var(--chrome-fg); }
.nav-group + .nav-group .nav-group-head { margin-top: 6px; border-top: 1px solid var(--glass-line); }
.nav-group-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-group-head .icon { flex: none; width: 10px; height: 10px; opacity: .75; stroke-width: 2.8; transform: rotate(0deg); transition: transform .15s ease; }   /* proto 1568 */
.nav-group.is-folded .nav-group-head .icon { transform: rotate(-90deg); }
/* The peek rule (proto 34603-34605): a folded group keeps showing the row you are on and drops the
 * rest. No count hint, and the rows themselves do not animate — only the chevron turns. */
.console:not(.is-collapsed) .nav-group.is-folded .nav-entry:not(.is-active) { display: none; }
/* A row's ground eases in and out (proto 1574: transition background .15s, border-color .15s); reduced motion drops it (frame). */
.nav-entry { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; padding: var(--nav-row-pad-y) var(--nav-row-pad-x); border-radius: var(--radius); border: 1px solid transparent; color: var(--chrome-fg-muted); font-size: var(--chrome-text-body); line-height: 20px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }   /* proto 1574 · 22379 */
/* The icon sits in a box of its own: 20px in the sidebar, the rail's 36px tile when collapsed (proto 1576 · 34617). */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border: 1px solid transparent; border-radius: var(--radius); color: var(--chrome-fg-faint); }
/* The glyph is 20px wide and may shrink to its bordered box's content, as the prototype's does (proto 1576):
 * 18px in the sidebar's 20px box, its full 20px in the rail's 36px one. */
.nav-icon .icon { flex: 0 1 auto; min-width: 0; width: 20px; height: 20px; }
/* Hover is the ground alone: the label keeps its ink (proto 1574 style-hover: background var(--glass)), on
 * the row you stand on too, as the prototype's hover replaces that row's ground as well. */
.nav-entry:hover { background: var(--glass); }
/* A boosted link's page is on its way (console #42): the pointer says so until it is swapped in. */
html:has(a[hx-boost].htmx-request) { cursor: progress; }
/* Selection is the row itself: a quiet fill in the level's colour, a hairline, and a soft drop of
 * the same colour under it — no bar (proto 22381-22384). */
.nav-entry.is-active { background: color-mix(in srgb, var(--flavor) 14%, transparent); border-color: color-mix(in srgb, var(--flavor) 28%, transparent); box-shadow: 0 10px 26px -16px var(--flavor); color: var(--chrome-fg); font-weight: 600; }
.nav-entry.is-active .nav-icon { color: var(--flavor); }
.nav-entry.is-active:hover { background: var(--glass); }   /* proto 1574: the hover ground replaces the lit one */
/* A screen still to come (D165) is drawn like any row at rest and takes the same hover (decision 5, "Sidebar to
 * the prototype", 2026-09-29: the prototype has no pending look). It stays a <span> that goes nowhere —
 * aria-disabled and "Coming soon" say so (sidebar.jte) — so the pointer does not promise a click. */
.nav-entry.is-pending { cursor: default; }

/* ---- person card (proto 1657-1694 · 26835-26836) ----
 * It is pinned to the bottom by the nav above it taking the free height, not by a margin. */
.usercard { position: relative; flex: none; margin-top: 10px; }   /* proto 26835 */
.usercard-row { display: flex; align-items: center; gap: 10px; padding: var(--usercard-pad); border: 1px solid var(--glass-line); border-radius: 12px; background: var(--glass-1); }
.usercard-row:hover { background: var(--glass-hover); }
.usercard-button { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: var(--chrome-fg); font: inherit; text-align: left; cursor: pointer; }
/* The sidebar toggle on the card's right edge (proto 1690-1691): the prototype's muted chrome ink, no inset,
 * and the sidebar's own font rather than the button's UA default. */
.usercard-row .collapse { flex: none; width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm); color: var(--chrome-fg-soft); font: inherit; }
.usercard-row .collapse .icon { width: 17px; height: 17px; }
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--avatar-bg); color: var(--avatar-fg); font-size: 14px; font-weight: 700; flex: none; }
/* The three lines (proto 1685-1688): the name on the font's own line box, as the prototype leaves it; the role
 * and the tenant at 1.25, the role 1px under the name, and the tenant in the chrome's running ink.
 * The name wraps rather than clips, as the prototype's does (proto 1855 sets no nowrap): the card is the one
 * place the whole name is read, and the box is 92px at 1440 (final UI pass, 2026-10-06). */
.usercard-text { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.usercard-name { font-size: 14px; font-weight: 600; line-height: normal; color: var(--chrome-fg); overflow-wrap: anywhere; }
.usercard-role { margin-top: 1px; font-size: 11.5px; color: var(--chrome-fg-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usercard-tenant { font-size: 11.5px; color: var(--chrome-fg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usercard-menu { left: 0; right: 0; bottom: calc(100% + 6px); max-height: 70vh; overflow: auto; }
.menu-row-danger .menu-title, .menu-row-danger .menu-icon { color: var(--danger); }
.tile-level { --rung: var(--flavor); --rung-soft: var(--flavor-soft); background: var(--rung-soft); color: var(--rung); font-weight: 600; font-size: 14px; }
.rung-row .tile-level { background: var(--rung-soft); color: var(--rung); }
/* the platform row's monogram in the person menu: the gold's text ink, for the reason .tile-platform gives */
.rung-row.rung-platform .tile-level { color: var(--platform-ink-soft); }
/* A rung with nowhere to go is drawn as a span ("Org as a stop", 2026-09-28, usercard.jte), so it takes
   neither the pointer nor the hover ground the rows around it wear — the same scoping ladder.jte gets
   from a.rung-link:hover above. The row you stand on keeps its ground, hovered or not. */
span.menu-row.rung-row { cursor: default; }
span.menu-row.rung-row:not(.is-current):hover { background: transparent; }

/* ---- the sidebar toggle in the rail (decision 4, "Sidebar to the prototype", 2026-09-29; proto 1649-1656) ----
 * Expanded, the toggle sits on the person card (above). In the rail it moves out of the card into a block of
 * its own above it: a hairline across the sidebar's padding, then a full-width button. Two buttons rather
 * than one moved by CSS, because the card is a frame the rail's button must stand outside of; each is only
 * ever drawn in its own state, so its name is the one thing it does (sidebar.jte, usercard.jte). */
.rail-toggle { display: none; flex: none; margin: 0 calc(-1 * var(--rail-toggle-bleed)); padding: var(--rail-toggle-pad-top) var(--rail-toggle-bleed) 0; border-top: 1px solid var(--glass-line); }   /* proto 1651 */
.rail-toggle-button { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--rail-toggle-pad-y) 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--chrome-fg-soft); font: inherit; cursor: pointer; }   /* proto 1652 */
.rail-toggle-button:hover { background: var(--glass); color: var(--chrome-fg); }
.rail-toggle-button .icon { width: var(--rail-toggle-icon); height: var(--rail-toggle-icon); }   /* proto 1653 */
/* The keyboard's ring on the chrome's own controls ("Sidebar to the prototype", 2026-09-29; the prototype has none,
   its rows being divs): --chrome-ring, inset so a row's ring stays inside the nav's scroll clip. */
.rail-toggle-button:focus-visible, .nav-entry:focus-visible, .usercard-row .collapse:focus-visible { outline: 2px solid var(--chrome-ring); outline-offset: -2px; }

/* ---- collapsed sidebar: the prototype's 64px rail (proto 1509 · 25762-25768 · 26830-26836 · 34596-34617) ----
 * Everything that carries text or a frame goes; what is left is a column of 36px tiles. */
/* Every label leaves the screen but stays in the accessibility tree (the .sr-only pattern above):
 * display:none here would strip a nav link, a rung and the person card of their accessible name.
 * The ones that do go are the switcher button, which has no room in the rail and no behaviour there,
 * and the group header (next rule). */
.is-collapsed .nav-label, .is-collapsed .rung-text, .is-collapsed .usercard-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-collapsed .rung-switch { display: none; }
/* The rail draws no group headers (proto 34596 `headerOn: !railNow`) — a hairline stands between
 * groups instead (proto 1562). display:none rather than the .sr-only pattern above: the header is a
 * fold button, and folding has no meaning here — the rail always shows every row — so leaving it
 * reachable by keyboard would offer a control that does nothing visible. Nothing is lost with it:
 * each row keeps its own name, and the group label names a section, not a row. */
.is-collapsed .nav-group-head { display: none; }
.is-collapsed .nav-group + .nav-group::before { content: ""; display: block; height: 1px; margin: 7px 8px 6px; background: var(--glass-line); }   /* proto 1562 */
/* stretch, or the column axis leaves the ladder card at its content width and the dots off-centre */
.is-collapsed .sidebar-top { flex-direction: column; align-items: stretch; }
/* The card loses its frame but keeps its 1px border box, and the path keeps its spine (proto 26831 ·
 * 25766): a row is 30px, or 42px where you stand, and the card around one lit row is 44px square. */
.is-collapsed .ladder-path { padding: 0; border-color: transparent; background: transparent; }
.is-collapsed .rung, .is-collapsed .rung.is-lit { justify-content: center; padding: 0; background: transparent; border-color: transparent; }   /* proto 25762 · 25768 */
.is-collapsed .rung.is-lit { min-height: 42px; }   /* proto 25765 */
.is-collapsed .rung-link { flex: none; justify-content: center; }
.is-collapsed .rung.is-lit .rung-rail { width: 36px; }   /* proto 25763 */
.is-collapsed .rung-tile { width: 36px; height: 36px; font-size: 14px; }   /* proto 25763: a 36px tile, its orb 34px inside the hairline */
.is-collapsed .rung-tile .icon { width: 18px; height: 18px; }
.is-collapsed .nav-entry { justify-content: center; padding: 2px 0; background: transparent; border-color: transparent; box-shadow: none; }   /* proto 34607-34616 */
.is-collapsed .nav-entry:hover { background: var(--glass); }   /* proto 1574 */
.is-collapsed .nav-icon { width: 36px; height: 36px; }   /* proto 34617 */
.is-collapsed .nav-entry.is-active .nav-icon { background: color-mix(in srgb, var(--flavor) 16%, transparent); border-color: color-mix(in srgb, var(--flavor) 32%, transparent); box-shadow: 0 10px 26px -16px var(--flavor); }   /* proto 22385-22386 · 34617 */
.is-collapsed .rail-toggle { display: block; }
.is-collapsed .usercard { margin-top: 6px; }   /* proto 26835 */
.is-collapsed .usercard-row { justify-content: center; padding: 4px; }   /* proto 26836 */
.is-collapsed .usercard-row .collapse { display: none; }
.is-collapsed .usercard-button { justify-content: center; }
.is-collapsed .avatar { width: 34px; height: 34px; }   /* proto 26836 */

/* ---- empty state ---- */
.empty { display: grid; gap: .6rem; justify-items: start; max-width: 520px; padding: 2rem; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty-title { font-size: 1.1rem; font-weight: 600; }
.empty-text { color: var(--ink-2); }
.empty .button { margin-top: .5rem; }

/* Under 820px the shell stacks: the sidebar becomes a band above the stage and the page scrolls,
 * so the panel gives its scrollbar back and grows with its content. The prototype has no such
 * breakpoint (it pins a 1240px minimum) — this is the console's own (decision, 2026-09-23). */
@media (max-width: 820px) {
  .console, .console.is-collapsed { grid-template-columns: 1fr; height: auto; }
  .sidebar { border-bottom: 1px solid var(--glass-line); height: auto; }
  .stage { overflow: visible; }
  .collapse, .rail-toggle, .is-collapsed .rail-toggle { display: none; }
  .panel { flex: 1 0 auto; overflow: visible; margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .pane { overflow: visible; }
}

/* ---- component set (#43 box 4): cards, forms, tables, chips, toasts, notices ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.1rem 1.25rem 1.25rem; }
.card + .card, .form > .card + .card, .card + .empty { margin-top: 1rem; }
.card-md { max-width: 720px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.card-title { font-size: 15px; font-weight: 600; }
.card-sub { font-size: 12.5px; color: var(--ink-2); margin-top: .1rem; }
.form-row { display: flex; gap: .6rem; align-items: center; }
.form-row .input { flex: 1; }
select.input { appearance: auto; padding-right: 2rem; }
.field { display: grid; gap: .35rem; }
.label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.hint { font-size: 12px; color: var(--muted); }
.hint-danger { color: var(--danger); }
.hint code, .notice code { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: .15rem .4rem; border-radius: 6px; }
.input { width: 100%; padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--danger); }

/* table (proto 3366-3397) — the pane's list rows.
 * The header is sentence case in the prototype's own ink, not the small-caps muted label the
 * console drew before; the body is --ink-body over a divider quieter than the card's hairline.
 * Cell padding is measured from the CARD's edge, so the prototype's 12px 18px / 11px 18px (compact
 * 10px 16px / 9px 16px) sit on
 * the cell only in the list card, which has no padding of its own (.card-table below); a table
 * inside a padded card (the overview) keeps that card's inset instead.
 * line-height is pinned at 1.35 rather than the body's 1.5: with 11px of padding either side that
 * is the prototype's ~40px row. */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.table td { font-size: 13px; line-height: 1.35; color: var(--ink-body); padding: .65rem .6rem; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-title { display: flex; align-items: center; gap: .5rem; font-size: var(--text-body); font-weight: 600; color: var(--ink); }   /* proto 3374 */
/* a cell that carries a secondary value of its own (proto 3389 "Managed by") */
.cell-sub { font-size: 12.5px; color: var(--ink-2); }
/* the handle under a name, in the same cell (proto 3375) */
.cell-stack .cell-sub { font-size: 11.5px; color: var(--muted); }

/* switch */
.switch { position: relative; display: inline-flex; width: 36px; height: 20px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch-track { flex: 1; border-radius: var(--radius-pill); background: var(--line-strong); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--knob-fg); box-shadow: var(--shadow-knob); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* chips: a wrapping row of small links (dev/view-as's roles) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* notice */
.notice { border: 1px solid var(--line-strong); border-left: 4px solid var(--info); border-radius: var(--radius); padding: .75rem 1rem; background: var(--surface); }
.notice-danger { border-left-color: var(--danger); }
.notice-warn { border-left-color: var(--warn); }
.notice-title { font-weight: 600; font-size: var(--text-body); }
.notice-text { font-size: 12.5px; color: var(--ink-2); }

/* toasts */
/* One toast at a time, centred on the viewport: a new one replaces the last (console/ui/toast.jte; the prototype's
 * csToast, decoded 23902-23906; #25). From 1280px it sits bottom-centre, as the prototype's .toast (decoded 1668-1673:
 * left 50%, bottom 28px, translateX(-50%)). Below 1280px — the width under which the sidebar defaults to the rail
 * (static/js/console.js, railByDefault) — it sits top-centre instead, console-authored: there a right panel and a
 * toast of up to 420px no longer fit side by side, so a bottom toast would cover the panel's sticky footer (.upl-foot's
 * Approve). The top bar is in the stage's flow, not fixed, so the top offset is the same density step as
 * the bottom one. z 100 tops the console's own scale (its highest layer is 60, .modal.fd-about and .fd-switcher-menu),
 * so the toast paints over any open panel or dialog. The region is as wide as its toast, never wider than the
 * viewport less a --fd-space-16 gutter each side. */
.toasts { position: fixed; left: 50%; bottom: var(--fd-space-28); z-index: 100; display: grid; width: max-content; max-width: calc(100vw - 2 * var(--fd-space-16)); transform: translateX(-50%); pointer-events: none; }
@media (max-width: 1279px) { .toasts { top: var(--fd-space-28); bottom: auto; } }
.toast { display: flex; align-items: center; gap: .6rem; min-width: min(260px, 100%); max-width: 420px; padding: .65rem .8rem; border-radius: var(--radius); background: var(--toast-bg); color: var(--toast-fg); font-size: 13px; box-shadow: var(--shadow-menu); pointer-events: auto; }
.toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.toast-danger .toast-dot { background: var(--danger); }
/* A neutral toast — a DNS record not found yet ("Email domains", 2026-10-14): nothing went wrong, so the info tone. */
.toast-info .toast-dot { background: var(--info); }
.toast-text { flex: 1; }
.toast-close { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--chrome-fg-muted); cursor: pointer; }
.toast-close:hover { background: var(--toast-hover); color: var(--toast-fg); }

/* ---- organizations (Blinklink Admin Access slice 2): directory, org page ---- */
/* The page head: crumb, title, lede on the left, the scope chip and any action on the right
 * (proto 3204-3227). The 4px under the crumb belongs to the title, not to the crumb row, so a head
 * with no crumb (the org page) still starts flush. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
/* the separator is the chevron the prototype draws, at its size and weight (proto 3208) */
.crumb-sep { display: inline-flex; }
.crumb-sep .icon { width: 11px; height: 11px; stroke-width: 2; }
.crumb-here { font-weight: 500; color: var(--ink-quiet); }
.page-title { font-size: var(--text-title); font-weight: 600; color: var(--ink); }
.crumbs + .page-title { margin-top: 4px; }
.page-lede { margin-top: 4px; max-width: 680px; font-size: var(--text-lede); font-weight: 400; line-height: 1.6; color: var(--ink-2); }
/* the scope chip (proto 3220-3221): which slice of the platform this page is answering for */
.scope-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.scope-platform { background: var(--platform-wash); color: var(--platform-ink); }
.scope-msp { background: var(--msp-wash); color: var(--msp-ink); --platform: var(--msp); }
.scope-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--platform); }
.toolbar { display: flex; align-items: center; gap: var(--toolbar-gap-y) var(--toolbar-gap-x); margin-bottom: 1rem; }
.toolbar-spacer { flex: 1; }
/* the toolbar's controls (proto 3272-3281): a search field and the filters beside it */
.search { position: relative; display: flex; align-items: center; flex: 0 1 var(--search-w); min-width: var(--search-min-w); }
.search-icon { position: absolute; left: 13px; color: var(--muted); display: inline-flex; pointer-events: none; }
.search-icon .icon { width: 15px; height: 15px; }
.search-input { padding: 10px 14px 10px 36px; border-radius: 10px; border-color: var(--line-2); font-size: 13px; }
.search-input::placeholder { color: var(--placeholder-fg); }
/* The select is written on select.select, not .select, because the form sheet's select.input sets a
   right padding for a drawn arrow; here the arrow is Chrome's own and sits inside the prototype's even
   12px inset (proto 3266), which is what keeps the control at its 164px rather than 184px. */
select.select { width: auto; padding: var(--select-pad-y) var(--select-pad-x); border-radius: 10px; border-color: var(--line-2); font-size: 12.5px; font-weight: 500; }
/* A filter select ("Team UI-only round", 2026-10-02; prototype sel(), 25402-25406): on its first option, the neutral one, it wears the body
   ink; once it leaves it, it reads as active — the ring edge, the deep accent ink and the second accent
   fill. It is read from the option the browser holds as checked, so it follows the person's choice with no
   script and survives the htmx swap below the toolbar, which never redraws the select itself. */
select.select-filter { color: var(--ink-body); }
select.select-filter:has(option:not(:first-child):checked) { border-color: var(--ring); background-color: var(--accent-soft-2); color: var(--fd-accent-deep); }
/* The list card carries no padding of its own: its rows run edge to edge and the cells hold the
 * prototype's 18px inset (proto 3365-3370). Everything the card holds takes that same inset from
 * --cell-pad-x, so a notice, an empty state and the count below stay in the cells' column at either
 * density. overflow clips the first and last row to the radius. */
.card-table { padding: 0; overflow: hidden; }
.card-table > .notice { margin: 14px var(--cell-pad-x); }
.card-table .table th { padding: var(--th-pad-y) var(--cell-pad-x); }
.card-table .table td { padding: var(--cell-pad-y) var(--cell-pad-x); }
.table-empty { padding: 34px var(--cell-pad-x); text-align: center; font-size: 13px; color: var(--muted); }   /* proto 3394 */
/* the count under a list (proto 3397). It stays inside the card because the filter swaps the card,
 * and the card is what carries the count; the prototype sets it outside. */
.table-foot { padding: 10px var(--cell-pad-x); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--hover-2); }
.cell-link { color: inherit; text-decoration: none; }
.cell-stack { display: grid; line-height: 1.3; }
/* the row's monogram tile: a serif initial on the tenant's own colour (proto 3372) */
.table .cell-title .tile-org { width: 34px; height: 34px; border-radius: 9px; font-family: var(--font-serif); font-size: 16px; font-weight: 700; }
.col-open { width: 48px; text-align: right; }
.col-actions { width: 1%; white-space: nowrap; text-align: right; }
/* the chevron that ends a row (proto 3390) — 14px in the row's own ink, in a 28px hit target */
.row-open { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--ink-2); }
.row-open .icon { width: 14px; height: 14px; }
.row-open:hover { background: var(--surface-2); color: var(--ink); }
/* Status and type pills (proto 3388). The base is the prototype's neutral tone (proto 24396 gray =
 * --neutral #5b5570 on --fill-2), which is what Archived, Deactivated and any status the platform
 * adds later wear — so there is no rule of their own. The rest follow proto 24566: Active green,
 * Pending and Provisioning blue, Suspended (the prototype's At Risk) red. */
.status, .type { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 400; background: var(--surface-2); color: var(--ink-quiet); }
/* A Partner's chip arrives as a tone rather than a status key (PartnersDirectory.Row: Active green, Suspended red,
 * anything else blue — prototype 25571), so the three tones name the same pairs. */
.status-active, .status.tone-green { background: var(--ok-soft); color: var(--ok); }
.status-pending, .status-provisioning, .status.tone-blue { background: var(--info-soft); color: var(--info); }
.status-suspended, .status-disabled, .status-revoked, .status.tone-red { background: var(--danger-soft); color: var(--danger); }
.type-skills { background: var(--skills-wash); color: var(--skills); }
.type-social { background: var(--social-wash); color: var(--social); }
.type-feed { background: var(--feed-wash); color: var(--feed); }
/* The handle pill beside an organisation's name (proto 3375). The prototype names the scope there —
   the console names the org's handle, which is the one fact partner-v2 sends — at the prototype's own
   size and weight. Its 6px gap and 6px dot are below this layer's floor and stay literal. */
.chip-quiet { display: inline-flex; align-items: center; gap: 6px; padding: var(--org-chip-pad-y) var(--org-chip-pad-x); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--text-note); font-weight: 600; line-height: normal; }
.chip-quiet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* The way back out of a detail page (proto 3202/3232). It is a direct child of the pane's single-column
   grid, so it says where it starts: stretched, the link would be a 1180px-wide click target for one word.
   Its line box is the font's own, as the prototype leaves it; its 13px arrow is an icon box and its 6px
   gap is below this layer's floor, so both stay literal. The prototype sets it inline in the pane's 16px line, which
   seats it --back-lift below the pane's top edge ("Partners click-through", 2026-10-03: measured on the Partner and
   org pages); a grid item has no line box, so the step is a margin. */
.back { display: inline-flex; justify-self: start; align-items: center; gap: 6px; margin: var(--back-lift) 0 var(--back-space); color: var(--accent); text-decoration: none; font-size: var(--text-xs); font-weight: 500; line-height: normal; }
.back .icon { width: 13px; height: 13px; }
/* The stat grid every admin pane opens with (proto 3241). Four equal columns, as the prototype draws
   them, and four across on every laptop the prototype lays out for (its 1240px floor leaves a 229px card
   with the sidebar open). They fall to two only under 1100px, where a card would drop below 200px with
   the sidebar open (final UI pass, 2026-10-06; was 1320px, which folded the row at 1280). The breakpoint
   is on the viewport because a media query cannot see the pane. The grid carries no space above it —
   the page head's own margin is the whole gap between the intro and the cards. */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tiles-gap); margin: 0 0 var(--tiles-space-below); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
/* stat tiles (proto 3255-3260): a label, the number, and the line that qualifies it */
.stat { display: grid; padding: var(--card-pad-y) var(--card-pad-x); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.stat-label { font-size: 12px; color: var(--ink-2); }
/* the number keeps the font's own line box, not the page's 1.5 rhythm: at 23px that is the 34px the
   prototype leaves it (proto 3258), and it is what makes the card 109px rather than 101px tall */
.stat-value { margin-top: 6px; font-size: 23px; font-weight: 600; line-height: normal; color: var(--ink); }
.stat-sub { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.section-title { margin: 0 0 10px; font-size: 15.5px; font-weight: 600; color: var(--ink); }   /* proto 3282/3411 */
/* Buttons on a pane page (proto 3363 primary · 3349 quiet). Scoped to the console's own pages:
 * the settings task view keeps the scale it was designed at (Account Settings, 2026-09-22), the
 * pre-auth surfaces are not a pane at all, and .button.pill — the top bar's tab and a row's "Open"
 * action — keeps its own shape below. */
/* The Feeds screens ("Feeds click-through", 2026-09-29), the Conversions screens ("Conversions click-through",
 * 2026-09-30) and the Uploads queue ("Uploads click-through", 2026-09-30; its form is a .cv-task) are drawn to their own
 * prototype sizes, so they are left out with the settings task view. */
.pane:not(:has(> .settings, > .feeds, > .feed-task, > .fd-editor-form > .feed-task, > .conversions, > .cv-task, > .uploads, > .assets)) .button.primary { gap: 7px; padding: 9px 18px; border-radius: 9px; font-size: 13px; font-weight: 500; }
/* .danger keeps its own white-on-red (Revoke read grey, 2026-10-12); :not(.pill, .danger) holds the five class units.
   .is-danger shares the quiet button's shape and hover but keeps its own red text (.button.is-danger below; "Org archive
   and rename", 2026-10-14), so the colour is set apart — :not(.pill, .danger, .is-danger) is still one class unit. */
.pane:not(:has(> .settings, > .feeds, > .feed-task, > .fd-editor-form > .feed-task, > .conversions, > .cv-task, > .uploads, > .assets)) .button:not(.primary):not(.pill, .danger) { padding: 9px 16px; border-radius: 9px; border-color: var(--line-2); font-size: 13px; font-weight: 500; }
.pane:not(:has(> .settings, > .feeds, > .feed-task, > .fd-editor-form > .feed-task, > .conversions, > .cv-task, > .uploads, > .assets)) .button:not(.primary):not(.pill, .danger, .is-danger) { color: var(--ink-quiet); }
.pane:not(:has(> .settings, > .feeds, > .feed-task, > .fd-editor-form > .feed-task, > .conversions, > .cv-task, > .uploads, > .assets)) .button:not(.primary):not(.pill, .danger):hover { border-color: var(--ring); }
.button.pill.pill-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 500; }
.button.pill.pill-accent:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 30%); color: var(--accent-fg); }

/* ---- account settings (2026-09-22): a task view inside the shell — sub-nav | pane.
 * A light-stage surface on the stage tokens; the panel goes edge-to-edge for it, so the
 * sub-nav's hairline runs the full height the way the prototype draws it.
 * Prototype geometry: nav 280px / padding 22px 16px 16px, rows 10px 13px radius 10,
 * pane padding 28px 40px with an 820px column (620px for Appearance). ---- */
.pane:has(> .settings) { padding: 0; background: var(--surface); overflow: hidden; grid-template-columns: 100%; align-content: stretch; }
/* It fills the pane by being the pane's only (stretched) grid row — not by a viewport
 * calculation, which would have to track the top bar's height now that the bar has none. */
.settings { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
.settings-nav { display: flex; flex-direction: column; min-width: 0; padding: 22px 16px 16px; border-right: 1px solid var(--line); overflow-y: auto; }
.settings-pane { min-width: 0; padding: 28px 40px; overflow-y: auto; }
.settings-body { max-width: 820px; }
.stage-back { flex: none; width: auto; height: auto; padding: 6px; color: var(--chrome-fg); }   /* proto 1692 */
.stage-back .icon { width: 20px; height: 20px; }
.stage-title { margin-right: auto; }

/* sub-nav rows */
.settings-nav-row { display: flex; align-items: center; gap: 11px; margin-bottom: 3px; padding: 10px 13px; border: 1px solid transparent; border-radius: var(--radius); color: var(--ink-2); font-size: 14px; text-decoration: none; }
.settings-nav-row:hover { background: var(--surface-2); }
.settings-nav-row .icon { color: var(--muted); width: 18px; height: 18px; }
.settings-nav-row.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
.settings-nav-row.is-active .icon { color: var(--accent); }
.settings-nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-nav-divider { height: 1px; margin: 10px 0; background: var(--line); }
.settings-nav-spacer { flex: 1; min-height: 24px; }

/* sub-nav footer: a signature, three decorative chips and the build — none of it is a control */
.settings-powered { text-align: center; font-size: 13px; color: var(--ink-2); }
.settings-powered strong { font-weight: 600; color: var(--accent); }
.settings-socials { display: flex; justify-content: center; gap: 10px; margin: 12px 0; }
.social-chip { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--accent-fg); font-size: 11px; font-weight: 700; }
.social-chip .icon { width: 13px; height: 13px; }
.social-instagram { background: var(--social-instagram); }
.social-x { background: var(--social-x); }
.social-linkedin { background: var(--social-linkedin); }
.settings-version { align-self: center; display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }

/* pane headings and rows */
.settings-heading { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 20px; }
.settings-stack { display: flex; flex-direction: column; gap: 18px; }
.settings-group-title { padding-top: 20px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--ink); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-row-top { align-items: flex-start; }
.settings-row-ruled { padding-top: 20px; border-top: 1px solid var(--line); }
.settings-row-text { max-width: 560px; }
.settings-row-identity { gap: 14px; }
.settings-row-title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.settings-row-help { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
/* the support-access window's state under its help (W4) */
.settings-row-state { font-weight: 600; color: var(--ink); }
.settings-caption { font-size: 12.5px; color: var(--muted); }
.settings-value { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.settings-identity-text { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.settings-monogram { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--monogram-bg); color: var(--monogram-fg); font-family: var(--font-serif); font-size: 28px; font-weight: 700; }
.settings-initials { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--avatar-bg); color: var(--avatar-fg); font-size: 16px; font-weight: 600; }
.settings-row-danger .settings-row-title { color: var(--danger); }
.settings-row-danger .icon { color: var(--muted); }

/* the accent chip button (Edit Profile / Update / Enable) — softer than .button.pill, squarer than a pill.
 * Named accent-chip: the chip-* families (chip-quiet, chip-role, chip-model) are unrelated status labels. */
.button.accent-chip { padding: 9px 20px; border: 0; border-radius: 9px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 500; }
.button.accent-outline { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface); color: var(--accent); border-radius: var(--radius); padding: 12px 24px; }
.button.primary.settings-save { border-radius: var(--radius); padding: 12px 28px; }
/* Inert controls look inert (Account Settings, 2026-09-22): a control that cannot be used carries the
 * same affordance as .button.is-disabled, whatever colours its own rule sets. */
.button[disabled],
.switch[role="switch"][disabled],
.settings-avatar-badge[disabled] { opacity: .55; cursor: default; }
.settings-actions { display: flex; gap: 14px; margin-top: 8px; }

/* a standalone switch (button[role=switch]) — the label/checkbox .switch above stays for forms */
.switch[role="switch"] { position: relative; flex: none; width: 42px; height: 23px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--line-strong); }
.switch[role="switch"]::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--knob-fg); box-shadow: var(--shadow-knob); }
.switch[role="switch"][aria-checked="true"] { background: var(--accent); }
.switch[role="switch"][aria-checked="true"]::after { left: 21.5px; }

/* My Profile */
.settings-avatar { position: relative; width: 120px; height: 120px; margin-bottom: 24px; }
.settings-avatar-frame { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 16px; background: var(--placeholder-bg); color: var(--placeholder-fg); }
.settings-avatar-frame .icon { width: 40px; height: 40px; }
.settings-avatar-badge { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--surface); border-radius: 50%; background: var(--gradient-badge); color: var(--accent-fg); padding: 0; }
.settings-avatar-badge .icon { width: 15px; height: 15px; }
.settings-fields { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; border: 0; }
/* The fields are the .field / .label / .input component set; only the settings size and fill differ. */
.settings-fields .field { gap: 8px; }
.settings-fields .label { font-size: 14px; }
.settings-fields .input { padding: 13px 16px; border-color: var(--line); background: var(--surface-2); font-size: 14px; }
.settings-fields .input[readonly] { color: var(--ink-2); }
.settings-block-ruled { padding-top: 18px; border-top: 1px solid var(--line); }
.settings-block-ruled .label { display: block; margin-bottom: 12px; }
.settings-2fa { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.settings-2fa-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.settings-2fa-icon .icon { width: 19px; height: 19px; }
.settings-2fa-text { flex: 1; min-width: 0; }
.settings-2fa-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.settings-2fa-note { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.pill-hot { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--hot-soft); color: var(--hot); font-size: 11px; font-weight: 600; }
.settings-enforced { display: flex; align-items: center; gap: 7px; flex: none; color: var(--ok); font-size: 12.5px; font-weight: 600; }
.settings-enforced .icon { width: 15px; height: 15px; }

/* Appearance */
.settings-appearance { max-width: 620px; margin: 0; }
.settings-appearance-card { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.settings-appearance-title { font-size: 19px; font-weight: 600; color: var(--ink); }
.settings-appearance-sub { margin: 6px 0 22px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.settings-subhead { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.settings-block-space { margin-top: 18px; }
.settings-help { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.settings-rule { height: 1px; margin: 20px 0 18px; background: var(--line); }
.segmented { display: flex; max-width: 340px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segment { flex: 1; padding: 9px 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 12.5px; font-weight: 500; text-align: center; cursor: pointer; }
.segment:not([aria-pressed="true"]):hover { background: var(--surface-2); color: var(--ink); }
.segment[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.theme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-chip { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 14px 6px 8px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12.5px; white-space: nowrap; }
.theme-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.theme-chip:not([aria-pressed="true"]):hover { border-color: var(--line-strong); color: var(--ink); }
.segment:focus-visible, .theme-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The Appearance swatch: each chip carries its own data-light-theme / data-dark-theme, which
   re-scopes that theme's inputs onto the chip (tokens.css) — so the dot is painted in the theme
   it offers rather than the one in force. Light halves: --chrome-bg-fixed (the brand chrome as a
   constant, so a light swatch does not repaint when the dark theme changes) against the theme's
   canvas. Dark halves: the ramp's canvas against its card. */
.theme-dot { width: 16px; height: 16px; flex: none; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 50%; background: linear-gradient(135deg, var(--chrome-bg-fixed) 50%, var(--paper-canvas) 50%); }
.theme-chips-dark .theme-dot { background: linear-gradient(135deg, var(--ramp-0) 50%, var(--ramp-3) 50%); }
.settings-footnote { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* Policies */
.settings-links { display: flex; flex-direction: column; gap: 12px; }
.settings-link-row { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; }
.settings-link-row .settings-link-icon { color: var(--accent); }
.settings-link-row .settings-link-icon .icon { width: 18px; height: 18px; }
.settings-link-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.settings-link-row > .icon:last-child { color: var(--muted); width: 14px; height: 14px; }

/* Narrow: the sub-nav becomes a scrollable strip above the pane, each column scrolling with the page.
   The breakpoint is the shell's (820px above), so the chrome and this view fold at the same width. */
@media (max-width: 820px) {
  .pane:has(> .settings) { overflow: visible; }
  .settings { display: block; }
  .settings-nav { flex-direction: row; align-items: center; gap: 6px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: visible; }
  .settings-nav-rows { display: flex; gap: 6px; }
  .settings-nav-row { margin-bottom: 0; white-space: nowrap; }
  .settings-nav-divider, .settings-nav-spacer, .settings-powered, .settings-socials, .settings-version { display: none; }
  .settings-pane { padding: 20px 16px 28px; overflow: visible; }
}
@media (max-width: 560px) {
  .settings-row, .settings-actions, .settings-2fa { flex-wrap: wrap; }
  .settings-row { align-items: flex-start; gap: 12px; }
  .settings-appearance-card { padding: 16px; }
  .segmented { max-width: none; }
}

/* ---- team ("Blinklink Team", 2026-09-25; proto 3282-3306) ----
 * The page is the house head + .tiles + toolbar, then two sections of rows. A row is a list item
 * rather than a table row: it carries one block of content and a cluster of state at its end, and
 * nothing in it lines up with the row above — a table would promise a grid that is not there. */
.page-title-row { display: flex; align-items: center; gap: var(--team-title-gap); }
.crumbs + .page-title-row { margin-top: var(--team-gap-xs); }
/* The head tile (proto 3210): .tile grown to the prototype's 40px box, carrying the level's monogram
   in the level's own colour — the platform's gold through .tile-platform, a Partner's sky through
   .tile-msp (both above). The box is an icon box and stays literal; the letter in it moves with the
   density (--team-tile-text). */
.head-tile { flex: none; width: 40px; height: 40px; border-radius: 11px; font-family: var(--font-serif); font-size: var(--team-tile-text); font-weight: 700; }
/* the heading and the section's own action on one line (proto 3284-3288) */
.team-section { margin-bottom: var(--team-section-gap); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--team-head-gap); }
.section-head .section-title { margin: 0; }
/* The action beside a section heading (proto 3287) is quieter than the "Open" pill a row carries: the
   second accent fill, no border, and the prototype's own weight and line box rather than the page's
   1.5 rhythm — which is what puts it at 65.5x32. The heading is centred in that height, so this rule
   also sets the space from the toolbar down to the heading and on to the card. Hover lifts it one step,
   onto --accent-soft, instead of inverting it the way a row's pill does. */
.section-head .button.pill.pill-accent { padding: var(--section-pill-pad-y) var(--section-pill-pad-x); border: 0; background: var(--accent-soft-2); font-size: var(--text-xs); font-weight: 400; line-height: normal; }
.section-head .button.pill.pill-accent:hover { background: var(--accent-soft); color: var(--accent); }
/* the empty state is the whole of the sections it replaces, so it carries their space below it */
.card.table-empty { margin-bottom: var(--team-section-gap); }
.member-list, .role-list { margin: 0; padding: 0; list-style: none; }
.member-row { display: flex; align-items: center; gap: var(--team-row-gap); padding: var(--team-row-pad-y) var(--team-row-pad-x); border-bottom: 1px solid var(--divider); }
/* a role's name over its description, and the matrix row's second-factor rule as a quiet badge at the row's end (W6b) */
.role-row { display: flex; align-items: center; gap: var(--team-row-gap); padding: var(--team-row-pad-y) var(--team-row-pad-x); border-bottom: 1px solid var(--divider); }
.role-text { display: grid; flex: 1; min-width: 0; }
/* both are the prototype's generic row, which lifts onto the second hover ground under the pointer
   ("Team UI-only round", 2026-10-02; proto 3446) */
.member-row:hover, .role-row:hover { background: var(--hover-2); }
.member-row:last-child, .role-row:last-child { border-bottom: 0; }
/* The avatar's tone is the person's position in the list, cycled through the pool (tokens.css
   --avatar-tone-*); tone 0 is the accent itself. An invited row is the muted ink under an "@",
   because it names nobody yet (proto 24725). */
.member-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--accent-fg); font-size: var(--team-avatar-text); font-weight: 600; }
.member-avatar.tone-1 { background: var(--avatar-tone-1); }
.member-avatar.tone-2 { background: var(--avatar-tone-2); }
.member-avatar.tone-3 { background: var(--avatar-tone-3); }
.member-avatar.tone-4 { background: var(--avatar-tone-4); }
.member-avatar.tone-invited { background: var(--muted); }
.member-text { display: grid; flex: 1; min-width: 0; }
.member-name { font-size: var(--text-body); font-weight: 600; color: var(--ink); }
.member-sub { margin-top: 2px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
/* the state at the row's end (proto 3299-3303): right-aligned, each item unbroken, wrapping as a
   group when the row runs out of width */
.member-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--team-row-gap); margin-left: auto; }
.member-status { font-size: var(--team-status); color: var(--ink-2); white-space: nowrap; }
.member-badge { display: inline-flex; align-items: center; gap: var(--team-badge-gap); font-size: 12px; font-weight: 600; white-space: nowrap; }
.member-badge .icon { width: 13px; height: 13px; stroke-width: 1.7; }
/* Pending is the rust "hot" tone, not amber: it asks for an action, it does not report a fault
   (proto 24411, and the decision of 2026-09-25). */
.badge-ok { color: var(--ok); }
.badge-hot { color: var(--hot); }
/* the second factor not reported yet: the dash in the quiet ink, neither covered nor missing ("Team members list",
   2026-10-05) */
.badge-muted { color: var(--muted); }
/* the signed-in person's own row says so after the name (proto 27383 "You"), in the sub-line's voice */
.member-you { margin-left: var(--team-gap-xs); font-size: var(--text-note); font-weight: 500; color: var(--muted); }
/* the org's Owner — its customer's first admin, never its creator (D160) — after the name, in the accent's voice */
.member-owner { margin-left: var(--team-gap-xs); font-size: var(--text-note); font-weight: 600; color: var(--accent); }
/* The roster's state cluster never wraps (proto 3719: every item is nowrap and the title column gives way): the name
   and the sub-line clip with an ellipsis instead, their whole in a title. A row's Resend / Revoke is its own form, so
   the form is an inline box in the cluster and not a block that would break the line (W6b, 2026-10-06). */
.team-roster .member-meta { flex: none; flex-wrap: nowrap; }
.row-command { display: inline-flex; margin: 0; }
.chip-role { display: inline-flex; align-items: center; padding: var(--team-chip-pad-y) var(--team-chip-pad-x); border-radius: var(--radius-pill); font-size: 12px; white-space: nowrap; }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-hot { background: var(--hot-soft); color: var(--hot); }
.chip-neutral { background: var(--surface-2); color: var(--ink-quiet); }
/* The member's authority — the platform tier their organisation carries — beside the role chip ("Team members list",
   2026-10-05): outlined on no fill and in the quiet ink, so it never reads as a second role. */
.chip-authority { display: inline-flex; align-items: center; padding: var(--team-authority-pad-y) var(--team-authority-pad-x); border: 1px solid var(--line-2); border-radius: var(--radius-pill); font-size: var(--team-authority-text); color: var(--ink-quiet); white-space: nowrap; }
.role-name { font-size: var(--text-body); font-weight: 600; color: var(--ink); }
.role-desc { margin-top: 2px; font-size: 12px; color: var(--muted); }
/* what the page says about itself, under everything (proto 3307) */
.page-note { margin-top: var(--team-gap-xs); max-width: 680px; font-size: var(--text-note); line-height: 1.6; color: var(--muted); }
/* The Clear link stands with the rows rather than in the toolbar above them, because the toolbar is
   outside the region htmx swaps and a link drawn there would outlive the filter it clears. */
.sections-note { display: flex; justify-content: flex-end; margin-bottom: var(--team-head-gap); }
/* Text rather than a button, so the reset comes first: whichever element carries it — a row's Edit
   and a dialog's destructive <button>, the Clear <a>, the inert <span> of an action that is still
   coming — reads as one line of accent text (proto 3278 · 3303 · 3769). */
.link-action, .link-danger { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--team-action); white-space: nowrap; text-decoration: none; cursor: pointer; }
.link-danger { font-size: var(--modal-label); font-weight: 600; color: var(--danger); }
.link-action:hover, .link-danger:hover { text-decoration: underline; }
.link-action:focus-visible, .link-danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.link-action.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
/* An invitation's two actions ("Team invite", 2026-10-06): Resend is a one-button form that must sit in the row's
   cluster as the button alone, and Revoke wears the danger ink because it withdraws the link. */
.member-action { display: contents; }
.link-action.is-danger { color: var(--danger); }
/* My Team in Account Settings (D205, D209; prototype acctIsTeam, 3293-3331): a head over one table, Name · Email ·
   Role · 2FA · Status · ⋯. The avatar (32px) and the icon buttons (28px) are boxes, which keep their size; only their
   letters and the spacing move with density (tokens.css). */
.my-team { max-width: 1040px; }
.my-team-head { display: flex; align-items: center; justify-content: space-between; gap: var(--my-team-actions-gap); margin-bottom: var(--my-team-head-gap); }
.my-team-title { margin-bottom: 0; }
.my-team-count { margin-top: var(--my-team-count-gap); font-size: var(--text-xs); color: var(--muted); }
.my-team-actions { display: flex; align-items: center; gap: var(--my-team-actions-gap); }
.my-team-actions .icon, .my-team-role-button .icon { width: 14px; height: 14px; }
.my-team-roles { display: inline-flex; align-items: center; gap: var(--my-team-cell-gap); }
.my-team-actions .button { display: inline-flex; align-items: center; gap: var(--my-team-button-gap); }
.my-team-table { table-layout: fixed; }
.my-team-table th:nth-child(1) { width: 24%; }
.my-team-table th:nth-child(2) { width: 28%; }
.my-team-table th:nth-child(3) { width: 16%; }
.my-team-table th:nth-child(4) { width: 8%; }
.my-team-table th:nth-child(5) { width: 18%; }
.my-team-table th:nth-child(6) { width: 46px; }
.my-team-person { display: flex; align-items: center; gap: var(--my-team-person-gap); min-width: 0; }
.my-team-person .member-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: var(--my-team-avatar-text); }
.my-team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.my-team-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-quiet); }
.my-team-role { display: inline-flex; align-items: center; gap: var(--my-team-cell-gap); flex-wrap: wrap; }
.my-team-status { display: inline-flex; align-items: center; gap: var(--my-team-cell-gap); white-space: nowrap; }
.my-team-role-button { display: inline-flex; align-items: center; gap: var(--my-team-chip-gap); margin-left: calc(-1 * var(--my-team-chip-pad-x)); padding: var(--my-team-chip-pad-y) var(--my-team-chip-pad-x); border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.my-team-role-button:hover { background: var(--surface-2); }
.my-team-role-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.my-team-owner { padding: var(--my-team-owner-pad-y) var(--my-team-owner-pad-x); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--my-team-owner-text); font-weight: 700; letter-spacing: .4px; }
.my-team-menu { text-align: center; }
.my-team .icon-button { width: 28px; height: 28px; }
.my-team-remove { color: var(--danger); }
.my-team-remove:hover { background: var(--danger-soft); color: var(--danger); }
.my-team-remove:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
/* a stat's two lines each take a tone from the page (TeamPage.Stat): the defaults are the base rule
   above, so only a line that departs from them carries a class */
.stat .tone-ink { color: var(--ink); }
.stat .tone-muted { color: var(--muted); }
.stat .tone-hot { color: var(--hot); }
.stat .tone-ok { color: var(--ok); }

/* ---- modal (proto 3613-3636 · 3757-3777) ----
 * A centred dialog on a scrim, above the page (z 40) and below the toast region (z 100, #25). Opening, Escape,
 * the scrim, the X and where the focus goes are the `modal` component (static/js/console.js). */
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--modal-inset); background: var(--scrim); }
.modal-dialog { width: var(--modal-w); max-width: 94vw; max-height: 92vh; overflow-y: auto; padding: var(--modal-pad-y) var(--modal-pad-x); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-menu); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.modal-title { font-size: var(--modal-title); font-weight: 600; color: var(--ink); }
.modal-sub { margin-top: var(--modal-sub-gap); font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.modal-close { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); cursor: pointer; }
.modal-close:hover { background: var(--surface-2); color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-close .icon { width: 16px; height: 16px; stroke-width: 2; }
.modal-text { margin-top: var(--modal-field-gap); font-size: var(--modal-text); line-height: 1.6; color: var(--ink-2); }
/* .modal-field is a <label> for the text field and a <fieldset> for the radio group; the reset is
   for the second, which the browser gives a border and an inset of its own */
.modal-field { display: block; margin: 0; padding: 0; border: 0; margin-top: var(--modal-field-gap); }
.modal-label { display: block; margin-bottom: var(--modal-label-gap); padding: 0; font-size: var(--modal-label); font-weight: 600; color: var(--ink); }
.modal-input { box-sizing: border-box; width: 100%; padding: var(--modal-input-pad-y) var(--modal-input-pad-x); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--modal-text); }
.modal-input::placeholder { color: var(--placeholder-fg); }
.modal-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* A refused field and the notice above a dialog's fields (the Invite form, "Team invite", 2026-10-06): the field's
   edge turns the danger ink, its sentence sits a label's step under it, and the notice keeps a field's step from
   the head. */
.modal-input[aria-invalid="true"] { border-color: var(--danger); }
.modal-field .field-error { margin-top: var(--modal-label-gap); }
.modal-form > .notice { margin-top: var(--modal-field-gap); }
/* a role the server fixes is shown checked and cannot be changed, so it does not invite a click */
.role-chip:has(:disabled) { cursor: default; }
/* the address a confirmation is about, in the dialog's full ink, wrapping anywhere because it is typed */
.modal-text strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.role-chips { display: flex; flex-wrap: wrap; gap: var(--modal-gap); }
/* The chip is the label and the radio inside it only leaves the screen (the .sr-only pattern), so
   the group keeps its name, its keyboard behaviour and its form value; :has(:checked) is the whole
   of the selected state and :has(:focus-visible) the whole of the focus ring (proto 3624-3628).
   The chip is positioned so that the radio, which is absolute, anchors to the chip a person is
   pointing at rather than to the fixed dialog around it. */
.role-chip { position: relative; display: inline-flex; align-items: center; padding: var(--modal-chip-pad-y) var(--modal-chip-pad-x); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink-quiet); font-size: 12px; font-weight: 600; cursor: pointer; }
.role-chip input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.role-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.role-chip:has(:checked) { border-color: var(--ring); background: var(--accent-soft); color: var(--accent); }
.role-chip:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-foot { display: flex; align-items: center; gap: var(--modal-gap); margin-top: var(--modal-foot-gap); }
.modal-foot .link-danger { margin-right: var(--modal-foot-split); }
/* The pane's button scale is for the page, not for a dialog inside it. These two selectors are
   deliberately written to the same weight as the .pane rules they answer (above), so the dialog's
   own scale wins on document order rather than on !important. */
.modal .modal-foot .button.primary, .modal .modal-foot .button.danger { flex: 1.4; justify-content: center; padding: var(--modal-button-pad); border-radius: 9px; font-size: var(--modal-text); font-weight: 500; }
.modal .modal-foot .button:not(.primary):not(.pill):not(.danger) { flex: 1; justify-content: center; padding: var(--modal-button-pad); border: 0; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); font-size: var(--modal-text); font-weight: 500; }
.button.danger { border: 0; background: var(--danger); color: var(--accent-fg); }
/* a head button whose command destroys, the org's and a Partner's Archive — quiet until its question asks ("Org archive and
   rename", 2026-10-14); its hover border is the pane's ring, its focus ring the danger colour, so focus reads as the red it
   leads to */
.button.is-danger { color: var(--danger); }
.button.is-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
/* Nothing behind an open dialog scrolls (the `modal` component puts the class on <body>). The pane
   is named too because it, not the document, is the console's scroller (.pane above); the dialog
   itself is fixed, so an ancestor's hidden overflow never clips it. */
body.is-modal-open { overflow: hidden; }
body.is-modal-open .pane { overflow: hidden; }

/* ---- Partners ("Partners click-through", 2026-10-03; proto 3351-3468, dialogs 3791-3830 · 3985-4018) ----
 * The directory, a Partner's page and the Partner console's Overview are the generic admin pane, which the Team page
 * already draws: .page-head, .tiles, .toolbar, .team-section with .section-head, and the generic row as .member-row.
 * What they add is below — the face a Partner or an org wears, the row's quiet second action, the head's button
 * group, and the two Partner dialogs. Every size is a density token (tokens.css, Partners). */

/* The face (console/organizations/face.jte; prototype levelTile 22335 and the row avatar 3448): a logo where one is
   known, else the initial on the node's identity colour (--face, set inline from the profile), else on the level's
   own — the sky every Partner is drawn in (.face-msp), or an org's derived hue, which an org face reads as
   --org-ground by carrying .tile-org (face.jte). The box is the context's: a row's .member-avatar,
   the head's .head-tile, the dialog's preview. Written after both so its ground wins at equal weight, and its initial
   is the body sans the prototype sets every level tile in, not the serif of the Team page's head monogram. */
.face { display: grid; place-items: center; overflow: hidden; background: var(--face, var(--org-ground)); color: var(--accent-fg); font-family: var(--font); }
.face-msp { --face: var(--msp); }
.face.has-logo { background: var(--surface-2); }
.face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-preview { flex: none; width: var(--partner-logo-box); height: var(--partner-logo-box); border-radius: var(--partner-logo-radius); font-size: var(--partner-logo-text); font-weight: 700; }

/* the scope chip and the head's two buttons, on one line at the head's right (proto 3376-3381) */
.page-head-actions { display: flex; flex: none; align-items: center; gap: var(--partner-head-gap); }
.page-head-actions .button { line-height: normal; }
/* a notice above the tiles (the Overview whose workspace counts did not load) keeps the tiles' own gap from them */
.notice + .tiles { margin-top: var(--tiles-gap); }
/* the directory's notice that some figures did not load stands above the rows it qualifies, a heading's step from them */
.sections-notice { margin-bottom: var(--team-head-gap); }
/* The prototype's head actions share one inset and a 1px edge, the primary's transparent (adminActions 26867), so
   "Open Partner console" stands as tall as Edit Partner and as narrow as the pane's quiet button. Written to the
   pane rule's weight so it wins on order. */
.pane .page-head-actions .button.primary { padding-inline: var(--partner-head-button-pad-x); border: 1px solid transparent; }
/* A row's chip is the house status pill at the generic row's inset (proto 3462: 4px 13px), which the Team page's
   role chip already names. */
.member-meta .status { padding: var(--team-chip-pad-y) var(--team-chip-pad-x); }
/* A row's second action (proto 3463, "Open console"): quieter than its accent action — the row's own ink, a
   step smaller, darkening under the pointer. */
.link-quiet { color: var(--ink-quiet); font-size: var(--team-status); font-weight: 500; text-decoration: none; white-space: nowrap; }
.link-quiet:hover { color: var(--ink); }
.link-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-xs); }
/* a link-action that is not a link at all, the dialog's inert Remove (proto 4009) */
.link-action.link-muted { color: var(--muted); }

/* The two Partner dialogs: the prototype's 460px column, a 14px step above every label after the first (the
   first keeps the house 16px under the head), and the Country select's tighter inset. Country and Domain share a
   line through the Manage dialog's .modal-columns, whose 12px gap is the prototype's here too (proto 3802). */
.modal-partner .modal-dialog { width: var(--partner-modal-w); }
/* Edit Org: the Partner dialogs' fields in the prototype's wider column ("Org archive and rename", 2026-10-14) */
.modal-org .modal-dialog { width: var(--org-modal-w); }
.modal-partner .modal-field { margin-top: var(--partner-field-gap); }
.modal-partner .modal-form > .modal-field:first-child { margin-top: var(--modal-field-gap); }
select.modal-input { padding: var(--partner-select-pad-y) var(--partner-select-pad-x); cursor: pointer; }
/* the quieter half of a label, "(invited as Partner Admin)" (proto 3818) */
.modal-label-note { font-weight: 400; color: var(--muted); }
/* the logo row: the preview, then Upload logo and Remove (proto 4006-4010), at the label step and weight */
.partner-logo { display: flex; align-items: center; gap: var(--partner-logo-gap); }
.partner-logo .link-action { font-size: var(--modal-label); font-weight: 600; }
.partner-logo .link-muted { font-weight: 400; }
.modal-partner .role-chips { gap: var(--partner-chip-gap); }
/* Suspended, chosen, is the danger pair (proto 25581 mspStatusChips): it closes the console. It differs from the
   Manage dialog's .tone-danger by its visible danger edge, which the prototype draws here and not there. Keyed on the
   Suspended input itself, so it follows the status on record and the person's click alike, with no script. */
.modal-partner .role-chip:has(input[value="SUSPENDED"]:checked) { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

/* ---- workspaces directory ("Workspaces directory", 2026-09-25; proto 3480-3536) ----
 * One toolbar, one card of nine columns, and a strip under it.
 *
 * The table is a real table — every cell belongs to a column the whole list shares, which is what a table
 * is for — but its rows are laid out with grid, so the prototype's fr proportions and its fixed actions
 * column hold at any pane width, which neither a percentage colgroup nor a fixed layout can do with one
 * column measured in pixels. Changing the display of a table element drops its implicit ARIA role in
 * Chrome and Safari, so the template states every role explicitly; nothing here leans on the browser's
 * own table semantics.
 *
 * The class is .table-wsdir rather than the house .table: the cell padding of a house table is the row's
 * padding here, and a nine-column grid has nothing else to inherit from it. */
.toolbar-wsdir { margin-bottom: var(--wsdir-toolbar-space); --search-w: var(--wsdir-search-w); }
.table-wsdir { display: block; width: 100%; }
.table-wsdir thead, .table-wsdir tbody { display: block; }
.table-wsdir tr { display: grid; grid-template-columns: 1.7fr 1.3fr .8fr minmax(var(--wsdir-plan-min), .9fr) 1.5fr .8fr minmax(var(--wsdir-status-min), .9fr) minmax(var(--wsdir-last-min), .9fr) var(--wsdir-actions-w); align-items: center; gap: var(--wsdir-col-gap); padding: var(--wsdir-row-pad-y) var(--cell-pad-x); border-bottom: 1px solid var(--divider); font-size: var(--wsdir-text); line-height: normal; color: var(--ink-body); }
.table-wsdir thead tr { padding: var(--wsdir-head-pad-y) var(--cell-pad-x); border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.table-wsdir tbody tr:last-child { border-bottom: 0; }
/* the cells carry no box of their own: the row's padding and gap are the whole of the grid */
.table-wsdir th, .table-wsdir td { min-width: 0; padding: 0; border: 0; text-align: left; font: inherit; }
/* 7 · Status (W3b, 2026-10-06): the pills stack in this narrow column, and a pill wider than the track — Suspended at
   1280 with the sidebar open — clips with an ellipsis rather than running into Last active; its title carries the word.
   Each row is its own grid, so the track cannot floor at the pill's width without the rows' columns drifting apart. */
.table-wsdir .chip-group { display: grid; justify-items: start; }
.table-wsdir .chip-group .status { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-wsdir tr.row-link:hover { background: var(--hover-2); }
/* 1 · Workspace: the type's tile and the handle, which ellipsises rather than widening the column */
.wsdir-ws { display: flex; align-items: center; gap: var(--wsdir-cell-gap); min-width: 0; }
.wsdir-handle { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-body); font-weight: 600; color: var(--ink); }
/* the 30px tile at the small radius (proto 24630); .tile-md above is the same box at the house radius */
.tile-sm { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.tile-sm .icon { width: 16px; height: 16px; }
/* 2 · Organization: the tenant's monogram and its name, the link a keyboard reaches the row's org by */
.wsdir-org { display: flex; align-items: center; gap: var(--wsdir-org-gap); min-width: 0; color: inherit; text-decoration: none; }
.wsdir-org-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsdir-org:hover .wsdir-org-name { text-decoration: underline; }
/* the small monogram (proto 24631): the only serif in the row, as on every org tile the console draws */
.tile-xs { width: 22px; height: 22px; border-radius: 6px; font-family: var(--font-serif); font-size: 11px; font-weight: 700; }
/* 3 · Type, and 7 · Status: the house pills at the sizes this table draws them (proto 24632 · 24635).
   The line box is pinned to the font's own content box (Poppins is 1.4em from ascent to descent), because
   that is the box the prototype's inline pill draws and it is what makes both 22px and 25px tall here. */
.table-wsdir .type, .table-wsdir .status { line-height: 1.4; }
.table-wsdir .type { padding: var(--wsdir-type-pad-y) var(--wsdir-type-pad-x); font-size: var(--text-note); font-weight: 600; }
/* 4 · Plan and billing: the plan, and under it the model chip in the model's own tone (proto 24633) */
.wsdir-plan { display: grid; }
.chip-model { display: inline-flex; align-items: center; padding: var(--wsdir-model-pad-y) var(--wsdir-model-pad-x); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-quiet); font-size: var(--wsdir-model-text); font-weight: 600; white-space: nowrap; }
.wsdir-plan .chip-model { justify-self: start; margin-top: var(--wsdir-model-gap); }
.model-seats { background: var(--model-seats-soft); color: var(--model-seats); }
.model-audience { background: var(--model-audience-soft); color: var(--model-audience); }
.model-ecosystem { background: var(--model-ecosystem-soft); color: var(--model-ecosystem); }
/* 5 · Usage: what is metered, how full the plan is, and what is metered alongside it (proto 24634).
   The headline turns red at 90% of the cap, where the bar does. */
.wsdir-usage { display: grid; }
.wsdir-usage-line { font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.wsdir-usage-line.is-over { color: var(--danger); }
.wsdir-usage-sub { font-size: var(--wsdir-usage-sub); color: var(--muted); }
/* The bar is decoration — the two lines around it already say the number — so the template hides it from
   assistive technology. Its fill and its tone are custom properties with a default here, set per row by
   the template: the row is the only place that knows them, and neither is a colour of its own. */
.meter { --meter-pct: 0; --meter-tone: var(--accent); width: 100%; max-width: var(--meter-w); height: var(--meter-h); margin: var(--meter-space-above) 0 var(--meter-space-below); border-radius: 2px; background: var(--line-strong); overflow: hidden; }
/* a block, not an inline span: an inline box takes no width or height, so the bar stayed an empty track (W3b/W4 review) */
.meter-fill { display: block; width: calc(var(--meter-pct) * 1%); height: 100%; background: var(--meter-tone); }
.meter-bad { --meter-tone: var(--danger); }
.meter-hot { --meter-tone: var(--hot); }
.meter-seats { --meter-tone: var(--model-seats); }
.meter-audience { --meter-tone: var(--model-audience); }
.meter-ecosystem { --meter-tone: var(--model-ecosystem); }
/* 8 · Last active: a literal from the meter, in the quiet ink (proto 24636). One line: the track floors at the
   meter's longest literal (--wsdir-last-min) and anything longer clips with its title (final UI pass, 2026-10-06). */
.wsdir-last { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-2); }
/* 9 · the two actions, held at the row's end (proto 3520-3523). They stretch to each other rather than
   sitting at their own heights, which is what makes the pair read as one control at the row's end. */
.wsdir-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: var(--wsdir-actions-gap); }
/* A row's Activate · Suspend · Archive ("Workspace actions", 2026-10-14): a line of text commands of its own under the
   Open pill, at the row's end, so the fixed actions column holds them without widening the table. */
.wsdir-commands { display: flex; flex-basis: 100%; align-items: center; justify-content: flex-end; gap: var(--wsdir-actions-gap); }
.wsdir-commands .link-action, .wsdir-commands .link-quiet { font-size: var(--text-note); }
/* The pane's quiet-button scale is a page action's, not a row's. This selector names the pane and the
   table deliberately: it has to out-specify .pane:not(:has(> .settings)) .button:not(.primary):not(.pill)
   above, which is five class units, and document order then settles it. */
.pane:not(:has(> .settings)) .table-wsdir .button.ghost-sm { padding: var(--wsdir-ghost-pad-y) var(--wsdir-ghost-pad-x); border-radius: 9px; font-size: 12px; font-weight: 600; }
/* the accent pill that steps into the workspace: the quieter of the two accent fills, lifting one step
   on hover rather than inverting (proto 3522) */
.table-wsdir .button.pill.pill-accent { gap: var(--wsdir-open-gap); padding: var(--wsdir-open-pad-y) var(--wsdir-open-pad-x); border: 0; border-radius: 9px; background: var(--accent-soft-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.table-wsdir .button.pill.pill-accent:hover { background: var(--accent-soft); color: var(--accent); }
.table-wsdir .button.pill.pill-accent .icon { width: 12px; height: 12px; }
/* The strip under the card (proto 3531-3536): what the table is showing on the left, what the billing
   models mean on the right. It is a .table-foot for its type and its ink, but it stands outside the card
   the way the prototype draws it, so it carries neither the card's inset nor the rule above it. */
.wsdir-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wsdir-foot-gap-y) var(--wsdir-foot-gap-x); margin-top: var(--wsdir-foot-space); padding: 0; border-top: 0; }
.wsdir-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wsdir-foot-gap-y) var(--wsdir-foot-gap-x); color: var(--ink-2); }
.wsdir-legend-item { display: inline-flex; align-items: center; gap: var(--wsdir-legend-gap); }
/* Two fields side by side in a dialog (proto 3731-3754), which stack when the dialog runs out of width —
   Create Org and New Partner pair a dialog's short fields this way (W3c). */
.modal-columns { display: flex; flex-wrap: wrap; gap: var(--modal-col-gap); }
.modal-col { flex: 1 1 0; min-width: 0; }
/* a note under a dialog's chips: what the chosen option means (proto 19810-19812) */
.modal-note { margin-top: var(--modal-field-gap); font-size: var(--text-note); line-height: 1.55; color: var(--ink-2); }

/* ---- Create Org and New Partner (W3c, 2026-10-06; proto 3962-4086) ----
 * The house dialog at the prototype's 500px, its fields the house modal fields; the "First workspace" part opens on a
 * divider and an uppercase label, and a refusal or a hint sits under its field as a block line. The same form stands on
 * the task page a browser without JavaScript opens, in the dialog's column. */
.modal-onboard .modal-dialog { width: var(--onboard-modal-w); }
.onboard-form .field-error { display: block; margin-top: var(--onboard-hint-gap); font-size: var(--text-note); }
.onboard-form > .field-error { margin-top: var(--modal-field-gap); }
.onboard-hint { display: block; margin-top: var(--onboard-hint-gap); font-size: var(--text-note); line-height: 1.5; color: var(--muted); }
.onboard-label-quiet { font-weight: 400; color: var(--muted); }
.onboard-section { margin-top: var(--onboard-section-gap); padding-top: var(--onboard-section-pad); border-top: 1px solid var(--divider); }
.onboard-section-label { font-size: var(--onboard-section-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.onboard-pinned { font-size: var(--modal-text); color: var(--ink); }
.onboard-page { max-width: var(--onboard-modal-w); }
.onboard-page .modal-foot .button { flex: 1; justify-content: center; padding: var(--modal-button-pad); }
/* The paired columns' shares (final UI pass, 2026-10-06): the workspace handle's column is the wider so its hint stays one
   line, which is what keeps Create Org inside a 1280×800 viewport with two refusals showing; the Partner type's column is
   the wider so "Managed Service Provider" reads whole in its select. */
.onboard-col-handle { flex-grow: 1.5; }
.onboard-col-type { flex-grow: 1.2; }
.onboarded { margin-bottom: var(--onboard-notice-gap); }

/* ---- organisation page ("Org as a stop", 2026-09-28; proto 3367-3387 · 3537-3607) ----
 * An org is a page in the Orgs directory, not a level with a sidebar of its own, so its sub-pages are a
 * tab strip on the page (proto 24522-24524). The page is: the way back, an identity card, the tabs, and
 * then the Overview — the house stat grid and two sections of cards.
 *
 * The workspace table is the workspaces directory's row at this page's proportions: it carries
 * .table-wsdir for everything a row is made of and only its grid differs, because the org is the page
 * and so has no Organization column. */
.org-head { display: flex; align-items: center; gap: var(--org-head-gap); margin-bottom: var(--org-head-space); padding: var(--org-head-pad-y) var(--org-head-pad-x); border-radius: 16px; }
/* the org's monogram (proto 3370): a 52px icon box — literal, like every tile — carrying the serif
   initial the console draws an organisation with everywhere else */
.org-head-tile { width: 52px; height: 52px; border-radius: 13px; font-family: var(--font-serif); font-size: var(--org-tile-text); font-weight: 700; }
.org-head-text { flex: 1; min-width: 0; }
.org-head-title { display: flex; align-items: center; gap: var(--org-head-title-gap); flex-wrap: wrap; }
/* the name is the card's heading, one step under the stage's page title (proto 3373) */
.org-name { font-size: var(--org-name); font-weight: 600; color: var(--ink); }
/* what the org is, in one line that ellipsises rather than wrapping the card open (proto 3377) */
.org-head-meta { margin-top: var(--org-head-meta-gap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); line-height: normal; color: var(--ink-2); }
/* the stat grid is the house one at this page's own rhythm, which is one step tighter (proto 3538) */
.org-tiles { margin-bottom: var(--org-section-space); }
.org-section { margin-bottom: var(--org-section-space); }
/* Workspaces: the directory's row without its Organization column (proto 3548). The actions column is the
   same fixed width, so the two tables end in the same place. */
.table-orgws tr { grid-template-columns: 1.8fr .8fr 1fr 1.5fr .8fr 1fr 1fr var(--wsdir-actions-w); }
/* Where only built features are drawn and nothing meters the workspaces (D199): no Plan · Billing, Usage, MRR or Last active. */
.table-wsdir.is-unmetered tr { grid-template-columns: 1.7fr 1.3fr .8fr minmax(var(--wsdir-status-min), .9fr) var(--wsdir-actions-w); }
.table-orgws.is-unmetered tr { grid-template-columns: 1.8fr .8fr 1fr var(--wsdir-actions-w); }
/* a row with no pages here says where it lives instead of offering a door (the embed plane's Feed) */
.wsdir-actions .cell-sub { align-self: center; text-align: right; }
/* Admins (proto 3583): the org's ORG_ADMIN members from partner-v5's list — name, e-mail, 2FA, status. */
.table-orgadmins tr { grid-template-columns: 1.8fr 2.2fr 1fr 1fr; }

/* ---- the Partners page (W3b, 2026-10-06; prototype sysPanes['sys-msp'] over the shared section row sr(), 3711-3727) ----
 * The Providers list is the Team page's row — the house member-* classes carry it — and only what a Partner row
 * adds is here: the Partner's own tile, two lines that clip instead of wrapping, and the quieter of its two actions. */
.member-tile { width: 34px; height: 34px; border-radius: 9px; font-family: var(--font-serif); font-size: var(--team-tile-text); font-weight: 700; }
/* a long name or domain ellipsises rather than widening the row; the title attribute carries the whole */
.member-text.is-clipped .member-name, .member-text.is-clipped .member-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
a.member-name:hover { text-decoration: underline; }
/* "Open console" (proto 3725): the third ink at the row's small step, lifting to the full ink on hover; "Open"
   beside it is the accent .link-action */
.link-quiet { padding: 0; border: 0; background: none; color: var(--ink-quiet); font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; }
.link-quiet:hover { color: var(--ink); }
.link-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* A cell's status pills side by side — partner-v5's lifecycle, then a standing (W3a) — wrapping only when the
   column runs out. The prototype draws one pill; the console states both, so they share a line where they fit. */
.chip-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--chip-group-gap); }

/* ---- the Orgs directory (W3b, 2026-10-06; prototype adminOrgDir 3787-3814) ----
 * A real table laid out with grid, as the workspaces directory is, so the prototype's seven proportions
 * (2.2fr 1.4fr 1.1fr .8fr .9fr 1.4fr 40px) hold at any pane width and nothing can push the card wider than the pane:
 * every text cell clips with an ellipsis and carries its whole in a title. The cells have no box of their own —
 * the row's inset and gap are the whole of the grid. */
.table-orgdir { display: block; width: 100%; }
.table-orgdir thead, .table-orgdir tbody { display: block; }
.table-orgdir tr { display: grid; grid-template-columns: 2.2fr 1.4fr 1.1fr .8fr .9fr 1.4fr var(--orgdir-open-w); align-items: center; gap: var(--orgdir-col-gap); padding: var(--cell-pad-y) var(--cell-pad-x); border-bottom: 1px solid var(--divider); font-size: var(--orgdir-text); line-height: normal; color: var(--ink-body); }
/* Where only built features are drawn and nothing meters the workspaces (D199): no Usage or MRR. */
.table-orgdir.is-unmetered tr { grid-template-columns: 2.2fr 1.4fr .9fr 1.4fr var(--orgdir-open-w); }
.table-orgdir thead tr { padding: var(--th-pad-y) var(--cell-pad-x); border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.table-orgdir tbody tr:last-child { border-bottom: 0; }
.table-orgdir th, .table-orgdir td { min-width: 0; padding: 0; border: 0; text-align: left; font: inherit; }
.table-orgdir tr.row-link:hover { background: var(--hover-2); }
/* 1 · Organization: the monogram tile (34px at the small radius, proto 3792), the name over country · domain */
.orgdir-org { display: flex; align-items: center; gap: var(--orgdir-cell-gap); min-width: 0; }
.orgdir-tile { width: 34px; height: 34px; border-radius: 9px; font-family: var(--font-serif); font-size: var(--team-tile-text); font-weight: 700; }
.orgdir-text { display: grid; min-width: 0; }
.orgdir-name, .orgdir-sub, .orgdir-owner, .orgdir-count { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgdir-name { font-size: var(--text-body); font-weight: 600; color: var(--ink); }
.orgdir-sub { font-size: var(--text-note); color: var(--muted); }
.orgdir-org:hover .orgdir-name { text-decoration: underline; }
/* 2 · Workspaces: one 8px dot per workspace in its flavor's colour, then the count (proto 3800-3802) */
.orgdir-ws { display: flex; align-items: center; gap: var(--orgdir-ws-gap); min-width: 0; }
.orgdir-dots { display: flex; flex: none; gap: var(--orgdir-dots-gap); }
.orgdir-count { font-size: var(--text-xs); color: var(--ink-2); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.dot-skills { background: var(--skills); }
.dot-social { background: var(--social); }
.dot-feed { background: var(--feed); }
.dot-seats { background: var(--model-seats); }
.dot-audience { background: var(--model-audience); }
.dot-ecosystem { background: var(--model-ecosystem); }
/* 3 · Usage: one line per billing model, a 6px dot in the model's colour before the figure (proto 3804-3808) */
.orgdir-usage { display: grid; gap: var(--orgdir-usage-gap); min-width: 0; }
.orgdir-meter { display: flex; align-items: center; gap: var(--orgdir-meter-gap); min-width: 0; font-size: var(--orgdir-usage-text); color: var(--ink-2); white-space: nowrap; }
.orgdir-meter .dot { flex: none; width: 6px; height: 6px; }
.orgdir-meter-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* a cell with nothing behind it — no meter wired, or none billable — reads the dash in the quiet ink */
.orgdir-dash { font-size: var(--text-xs); color: var(--ink-2); }
/* 6 · Managed by: the Partner, or Blinklink · the account manager, in the fourth ink (proto 3812) */
.orgdir-owner { display: block; font-size: var(--text-xs); color: var(--ink-quiet); }
/* 7 · the chevron that ends the row sits at the row's end (proto 3813) */
.orgdir-open { justify-self: end; }
/* the count under the card (proto 3817): outside it, with no rule above, at the page's note step */
.card-table + .table-foot { margin-top: var(--orgdir-foot-space); padding: 0; border-top: 0; }

/* ---- feeds ("Feeds click-through", 2026-09-29; prototype viewFeeds 1766-2415, create-feed 14570-14641,
 * customize-feed 15038-15462, feed-settings 15640-15810) ----
 * The Feeds page and its three task views (the console/feeds templates), drawn to the prototype at 1920: every structural
 * size the prototype scales with the viewport is a calc(N * var(--u)) token, every spacing, control and type step
 * that moves is a --fd-* density token (tokens.css section 5), and colours are the --fd-* / --feed-tone-* /
 * --mock-* tokens (section 4). What stays literal is the density layer's exempt class: type at or under its
 * 12px floor, radii, 1px rules, icon boxes (a tile, a dot, a glyph), and the drawings — the feed thumbnail, the
 * module tiles' vignettes and the editor's browser and phone mocks, which are pictures at the prototype's own
 * geometry rather than furniture.
 *
 * The list page and the task views each fill the pane edge to edge, as the settings task view does (the prototype's
 * content shell holds them with no padding of its own): the pane gives up its inset and its scroll, and the one grid
 * row is pinned to the pane's height so each column scrolls on its own. The Conversions page and its form share this
 * structure ("Conversions click-through", 2026-09-30), and so do the Uploads queue and its form, which is drawn as a
 * .cv-task ("Uploads click-through", 2026-09-30), and the Assets library ("Assets click-through", 2026-09-30), so their
 * roots are named in these rules too. */
.pane:has(> .feeds), .pane:has(> .feed-task, > .fd-editor-form > .feed-task), .pane:has(> .conversions), .pane:has(> .cv-task), .pane:has(> .uploads), .pane:has(> .assets) { padding: 0; overflow: hidden; grid-template-columns: 100%; grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.pane:has(> .feed-task, > .fd-editor-form > .feed-task), .pane:has(> .cv-task) { background: var(--surface); }
/* The prototype sets its type on the font's own line box (its body has no line-height, so every line is Poppins'
   "normal", about 1.4 — proto 867), not the console's 1.5 rhythm; the Feeds screens take that box so a card, a row
   and a heading are the prototype's height. A line that names its own leading (a blurb, a note) keeps it. */
.feeds, .feed-task, .conversions, .cv-task, .uploads, .assets { display: flex; min-width: 0; min-height: 0; line-height: normal; }
.feeds-list, .feeds-panel-body, .fd-create-main, .fd-create-preview, .fd-rail, .fd-canvas, .fd-settings-panel, .fd-fs-rail, .fd-fs-pane,
.cv-panel-body, .cv-form-main, .cv-preview, .cv-dialog, .upl-list, .upl-panel-body, .upl-mgr-scroll, .as-list, .as-ed-rail, .as-ed-list { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* shared pieces: glyphs, dots, chips, the URL line */
.fd-glyph { flex: none; width: 16px; height: 16px; }
.fd-mark-2 { stroke: var(--fd-flavor-2); }
.fd-mark-dot { fill: var(--flavor); }
.fd-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fd-dim); }
.fd-dot.tone-ok { background: var(--ok); }
.fd-dot.tone-warn { background: var(--fd-dot-warn); }
.fd-dot.tone-bad { background: var(--danger); }
.fd-dot.tone-muted { background: var(--ink-2); }
.fd-dot.tone-dim { background: var(--fd-dim); }
.fd-dot-lg { width: 7px; height: 7px; }
.fd-chip { display: inline-flex; align-items: center; flex: none; border-radius: var(--radius-pill); white-space: nowrap; line-height: normal; }
.fd-chip.tone-ok { background: var(--ok-soft); color: var(--ok); }
.fd-chip.tone-warn { background: var(--warn-soft); color: var(--warn); }
.fd-chip.tone-bad { background: var(--danger-soft); color: var(--danger); }
.fd-chip.tone-muted { background: var(--surface-2); color: var(--ink-2); }
.fd-chip.tone-dim { background: var(--surface-2); color: var(--muted); }
/* the chip on a page group and the platform's domain (proto 1813 · 1864), on a card (1892), and in a panel or rail row (2356 · 2371 · 15650) */
.fd-chip-group { padding: var(--fd-space-3) var(--fd-space-10); font-size: 11.5px; }
.fd-chip-card { padding: var(--fd-space-3) var(--fd-space-8); font-size: 9.5px; font-weight: 600; }
.fd-chip-status { padding: var(--fd-space-3) var(--fd-space-9); font-size: 10px; font-weight: 600; }
.fd-chip-connect { padding: var(--fd-space-3) var(--fd-space-10); font-size: 11px; font-weight: 600; }
/* a feed's page URL behind its state dot (proto 1878-1881); the dot's title says what the state means */
.fd-url { display: flex; align-items: center; gap: var(--fd-space-5); min-width: 0; margin-top: var(--fd-space-6); }
.fd-url-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }
/* the page pill beside a group's name (proto 1865) and in the editor's toolbar (15073) */
.fd-url-pill { display: inline-flex; align-items: center; gap: var(--fd-space-6); min-width: 0; padding: var(--fd-space-4) var(--fd-space-11); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-quiet); white-space: nowrap; }
.fd-url-pill .fd-glyph { width: 12px; height: 12px; color: var(--fd-icon); }
.fd-url-pill-fill { padding: var(--fd-space-6) var(--fd-space-12); border: 0; background: var(--surface-2); font-size: 11px; }
/* the section heading a panel block starts with (proto 1986) and the smaller one under it (2004) */
.fd-overline { margin-bottom: var(--fd-space-10); font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.fd-overline-sub { margin-bottom: var(--fd-space-8); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--fd-dim); }
.is-inert { cursor: default; }
/* a quiet text button: Discard, Cancel */
.fd-link-quiet { padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fd-text-13-5); font-weight: 500; cursor: pointer; }
.fd-link-quiet:hover { color: var(--ink); }
.fd-card:focus-visible, .fd-configure:focus-visible, .fd-platform-head:focus-visible, .fd-module:focus-visible, .fd-close:focus-visible, .fd-platform-card:focus-visible, .fd-option:focus-visible, .fd-manage:focus-visible,
.fd-quick-row:focus-visible, .fd-foot-button:focus-visible, .fd-continue:focus-visible, .fd-combo-toggle:focus-visible, .fd-switcher-button:focus-visible, .fd-switcher-row:focus-visible, .fd-rail-row:focus-visible,
.fd-stepper-button:focus-visible, .fd-fs-row:focus-visible, .fd-link-quiet:focus-visible, .fd-danger-button:focus-visible, .fd-seg-button:focus-visible, .fd-copy:focus-visible, .feeds-panel-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-no-matches { font-size: var(--text-body); color: var(--ink-2); }
/* the notice a page without feeds shows: it states the state and stops ("Console polish", 2026-10-20) */
.fd-outage { max-width: var(--fd-form-w); }

/* the feed's thumbnail (feedFrame 22467-22480): a drawing, so its geometry is the prototype's own */
.fd-thumb { position: relative; display: block; flex: none; width: 34px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--fd-frame-ground); box-shadow: var(--fd-shadow-frame); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease; }
.fd-thumb.tone-green { --fd-tone: var(--feed-tone-green); }
.fd-thumb.tone-blue { --fd-tone: var(--feed-tone-blue); }
.fd-thumb.tone-teal { --fd-tone: var(--feed-tone-teal); }
.fd-thumb.tone-violet { --fd-tone: var(--feed-tone-violet); }
.fd-thumb.tone-pink { --fd-tone: var(--feed-tone-pink); }
.fd-thumb.tone-orange { --fd-tone: var(--feed-tone-orange); }
.fd-thumb.tone-indigo { --fd-tone: var(--feed-tone-indigo); }
.fd-thumb.tone-red { --fd-tone: var(--feed-tone-red); }
.fd-thumb.frame-live { background: var(--fd-tone); }
.fd-thumb-gloss { position: absolute; inset: 0; background: var(--fd-frame-gloss); }
.fd-thumb-play { position: absolute; inset: 0 0 0 5%; margin: auto; width: 38%; height: 38%; color: var(--fd-tone); opacity: .62; filter: drop-shadow(0 1px 1.5px var(--fd-play-shadow)); }
.frame-live .fd-thumb-play { color: var(--fd-play-light); opacity: .98; }
.frame-off .fd-thumb-play { color: var(--fd-dim); opacity: 1; }
.fd-thumb-shimmer { position: absolute; top: -8px; bottom: -8px; left: 0; width: 60%; background: var(--fd-frame-shimmer); animation: fd-shimmer 2.1s ease-in-out infinite; }
.fd-thumb-dot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--fd-dot-warn); box-shadow: 0 0 0 1.5px var(--surface); animation: fd-pulse 1.1s ease-in-out infinite alternate; }
.frame-error .fd-thumb-dot { background: var(--danger); animation-duration: .7s; }
.fd-thumb-panel { width: 32px; height: 46px; border-radius: 7px; }
.fd-thumb-switcher { width: 24px; height: 34px; border-radius: 6px; }

/* ---- the list (proto 1766-1961) ---- */
.feeds-list, .cv-list, .upl-list, .as-list { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: var(--pane-pad-y) var(--pane-pad-x); }
.feeds-head, .cv-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-12); margin-bottom: var(--fd-space-24); }
.fd-search { position: relative; flex: 0 1 var(--fd-search-w); min-width: var(--search-min-w); }
.fd-search-icon { position: absolute; top: 50%; left: var(--fd-space-14); width: 18px; height: 18px; transform: translateY(-50%); color: var(--fd-icon); pointer-events: none; }
.fd-search-input { width: 100%; padding: var(--fd-search-pad-y) var(--fd-space-16) var(--fd-search-pad-y) var(--fd-search-inset); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fd-text-13-5); box-shadow: var(--fd-shadow-search); }
.fd-search-input::placeholder { color: var(--fd-placeholder); }
.fd-search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
/* Configure (proto 1785): the page's one primary, a step larger and rounder than the house pane button */
.button.primary.fd-configure, .button.primary.cv-create { gap: var(--fd-space-9); padding: var(--fd-space-12) var(--fd-space-22); border-radius: 12px; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; box-shadow: var(--fd-shadow-cta); }
.fd-configure .fd-glyph, .cv-create .cv-glyph { color: var(--accent-fg); }
.button.primary.fd-configure-lg { margin-top: var(--fd-space-18); padding: var(--fd-space-13) var(--fd-space-26); font-size: var(--fd-text-14-5); }
.fd-configure-lg .fd-glyph { width: 17px; height: 17px; }

/* the empty state (proto 1793-1805) */
.fd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fd-space-6); text-align: center; }
.fd-empty-mark { display: grid; place-items: center; width: 120px; height: 120px; margin-bottom: var(--fd-space-14); border-radius: 50%; background: var(--fd-flavor-soft); color: var(--flavor); }
.fd-empty-mark .fd-glyph { width: 64px; height: 64px; stroke-width: 1.8; }
.fd-empty-title { font-size: var(--fd-text-22); font-weight: 600; color: var(--ink); }
.fd-empty-text { font-size: var(--fd-text-15); color: var(--ink-2); }

/* the populated page: the platform, then a section per page (proto 1808-1896) */
.feeds-body { display: flex; flex-direction: column; gap: var(--fd-space-26); }
.fd-section-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fd-space-10); margin-bottom: var(--fd-space-14); }
.fd-section-title { font-size: var(--fd-text-16); font-weight: 600; color: var(--ink); }
.fd-section-globe { color: var(--fd-icon); }
.fd-platform { max-width: var(--fd-platform-w); padding: var(--fd-space-20); border: 1px solid var(--line); border-radius: 16px; background: var(--fd-surface-glass); box-shadow: var(--fd-shadow-platform); }
.fd-platform-head { display: flex; align-items: center; gap: var(--fd-space-14); margin-bottom: var(--fd-space-18); border-radius: 12px; color: inherit; text-decoration: none; }
.fd-platform-mark { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--fd-flavor-soft); color: var(--flavor); }
.fd-platform-mark .fd-glyph { width: 28px; height: 28px; }
.fd-platform-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-platform-title { font-size: var(--fd-text-17); font-weight: 600; color: var(--ink); }
.fd-platform-tagline { margin-top: var(--fd-space-2); font-size: var(--fd-text-13); color: var(--ink-2); }
/* the prototype's tile is 146 wide (1828) and its card holds two; with all four modules on they share the card's
   width, never wider than the prototype's tile, rather than wrapping a lone tile onto a second row */
.fd-modules { display: flex; gap: var(--fd-space-14); margin: 0; padding: 0; list-style: none; }
.fd-modules > li { flex: 0 1 var(--fd-module-w); min-width: 0; }
.fd-module { display: block; border-radius: 10px; color: inherit; text-decoration: none; }
.fd-module-art { position: relative; display: block; height: var(--fd-module-h); margin-bottom: var(--fd-space-9); overflow: hidden; border-radius: 10px; background: var(--fd-tile-dark); }
.fd-module-meta { display: block; font-size: var(--fd-text-12-5); color: var(--ink-2); }
.fd-module-title { display: block; margin-top: var(--fd-space-2); font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
/* the tile's Live / Off pill and its Web dot (proto 1831-1841): part of the picture, at its geometry */
.fd-module-status { position: absolute; top: 7px; right: 8px; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--fd-vig-line); border-radius: var(--radius-pill); background: var(--fd-vig-pill-bg); backdrop-filter: blur(4px); color: var(--fd-vig-label); font-size: 8.5px; font-weight: 700; letter-spacing: .6px; line-height: normal; text-transform: uppercase; }
.fd-module-status-dot { width: 5.5px; height: 5.5px; border-radius: 50%; background: var(--fd-vig-off); }
.fd-module-status.is-live .fd-module-status-dot { background: var(--fd-vig-live); animation: fd-pulse 1.2s ease-in-out infinite alternate; }
.fd-module-os { position: absolute; left: 7px; bottom: 7px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--fd-vig-line); border-radius: 7px; background: var(--fd-vig-pill-bg); backdrop-filter: blur(4px); }
.fd-module-os .fd-glyph { width: 11px; height: 11px; color: var(--fd-vig-os-off); }
.fd-module-os .fd-glyph.is-live { color: var(--fd-vig-live); }

/* the vignettes (vigLms · vigFeed, 22439-22446) */
.fd-vig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fd-vig-ring { width: 52px; height: 52px; transform: rotate(-90deg); }
.fd-vig-ring-track { stroke: var(--fd-vig-ring-track); }
.fd-vig-ring-fill { stroke: var(--fd-vig-gold); animation: fd-ring 3.6s ease-in-out infinite; }
.fd-vig-cap { position: absolute; width: 20px; height: 20px; color: var(--fd-vig-gold); }
.fd-vig-col { position: absolute; top: -20px; bottom: -20px; overflow: hidden; }
.fd-vig-col-side-a { left: 28px; width: 22px; opacity: .35; }
.fd-vig-col-middle { left: 60px; width: 26px; opacity: .95; }
.fd-vig-col-side-b { left: 96px; width: 22px; opacity: .35; }
.fd-vig-belt { display: flex; flex-direction: column; gap: 6px; animation: fd-conveyor 3.4s linear infinite -1s; }
.fd-vig-col-middle .fd-vig-belt { animation-duration: 2.6s; animation-delay: 0s; }
.fd-vig-col-side-b .fd-vig-belt { animation-duration: 3.9s; animation-delay: -2s; }
.fd-vig-card { display: grid; place-items: center; flex: none; height: 32px; border: 1px solid var(--fd-vig-card-line); border-radius: 6px; background: var(--fd-vig-card); }
.fd-vig-col-middle .fd-vig-card { background: var(--fd-vig-card-lit); }
.fd-vig-card svg { width: 8px; height: 8px; fill: var(--fd-vig-card-play); }

/* a feed card (proto 1872-1896) */
.fd-cards { display: flex; flex-wrap: wrap; gap: var(--fd-space-16); margin: 0; padding: 0; list-style: none; }
.fd-card { display: flex; align-items: center; gap: var(--fd-space-13); width: var(--fd-card-w); max-width: 100%; padding: var(--fd-space-12) var(--fd-space-16); border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--fd-shadow-card); color: inherit; text-decoration: none; }
.fd-card:hover, .fd-card.is-selected { border-color: var(--ring); }
.fd-card:hover .fd-thumb { transform: scale(1.08) rotate(-3deg); box-shadow: 0 8px 18px -5px color-mix(in srgb, var(--fd-tone) 50%, transparent); }
.fd-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-card-title { font-size: var(--fd-text-14-5); font-weight: 600; color: var(--ink); }
.fd-card-meta { margin-top: 1px; font-size: 11.5px; color: var(--muted); }
.fd-sep { opacity: .6; }
.fd-card-end { display: flex; align-items: center; flex: none; gap: var(--fd-space-8); }
.fd-signal { width: 18px; height: 18px; color: var(--ink-2); opacity: .45; }
.fd-signal.is-live { color: var(--fd-signal-on); opacity: 1; }

/* ---- the right panel (proto 1965-2413) ---- */
.feeds-panel { display: flex; flex-direction: column; flex: none; width: var(--fd-panel-w); min-height: 0; border-left: 1px solid var(--line); background: var(--surface); }
.feeds-panel-closed { display: none; }
.feeds-panel-head { display: flex; align-items: center; gap: var(--fd-space-9); padding: var(--fd-space-18) var(--fd-space-22) var(--fd-space-12); }
.feeds-panel-title { flex: 1; min-width: 0; font-size: var(--fd-text-16-5); font-weight: 600; color: var(--ink); white-space: nowrap; }
/* the × sits on a text baseline in the page's 16px line box, as the prototype's does (1979: an inline svg in a padded
   block that sets no size of its own), which is what makes the head its 63px */
.fd-close { display: block; padding: var(--fd-space-4); border-radius: 6px; color: var(--ink); font-size: var(--fd-text-16); }
.fd-close .fd-glyph { display: inline-block; width: 18px; height: 18px; vertical-align: baseline; }
.fd-close:hover { background: var(--surface-2); }
.feeds-panel-body { display: flex; flex-direction: column; flex: 1; gap: var(--fd-space-18); min-height: 0; overflow-y: auto; padding: var(--fd-space-4) var(--fd-space-22) var(--fd-space-22); }
.feeds-panel-body > .fd-overline { margin: var(--fd-space-2) 0 0; }
.feeds-panel-foot { display: flex; flex: none; gap: var(--fd-space-12); padding: var(--fd-space-12) var(--fd-space-22) var(--fd-space-16); border-top: 1px solid var(--divider); background: var(--surface); }
.button.fd-foot-button { flex: 1; justify-content: center; padding: var(--fd-space-12); border-radius: 10px; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; }
.button.fd-foot-secondary { border-color: var(--ring); background: var(--surface); color: var(--accent); }
.button.fd-foot-secondary:hover { background: var(--accent-soft-2); }

/* Configure: the platform card and the funnel's options (proto 1984-2070) */
.fd-platform-card { display: flex; align-items: flex-start; gap: var(--fd-space-14); padding: var(--fd-space-20) var(--fd-space-18); border-radius: 12px; background: var(--fd-platform-card); color: var(--accent-fg); text-decoration: none; }
.fd-platform-card-mark { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--fd-on-dark-glass); color: var(--flavor); }
.fd-platform-card-mark .fd-glyph { width: 22px; height: 22px; }
.fd-platform-card-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.fd-platform-card-title { font-size: var(--fd-text-16); font-weight: 600; }
.fd-platform-card-desc { margin-top: var(--fd-space-4); font-size: var(--fd-text-12-5); line-height: 1.5; color: var(--fd-on-dark-soft); }
.fd-platform-card-pill { display: inline-flex; align-items: center; gap: var(--fd-space-6); margin-top: var(--fd-space-11); padding: var(--fd-space-4) var(--fd-space-11); border: 1px solid var(--fd-on-dark-line); border-radius: var(--radius-pill); background: var(--fd-on-dark-glass); color: var(--fd-on-dark-label); font-size: 10.5px; font-weight: 600; line-height: normal; }
.fd-platform-card-chevron { width: 15px; height: 15px; margin-top: 3px; color: var(--fd-on-dark-faint); }
.fd-options, .fd-funnel-later { display: flex; flex-direction: column; gap: var(--fd-space-10); }
.fd-funnel-later { gap: var(--fd-space-8); }
.fd-funnel-later .fd-overline-sub { margin-bottom: 0; }
.fd-funnel-later .fd-overline-sub:not(:first-child) { margin-top: var(--fd-space-4); }
.fd-option { display: flex; align-items: flex-start; gap: var(--fd-space-14); padding: var(--fd-space-18); border: 1px solid var(--line-2); border-radius: 12px; color: inherit; text-decoration: none; }
a.fd-option:hover { border-color: var(--ring); background: var(--fd-hover); }
.fd-option-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--info-soft); color: var(--info); }
.fd-option-tile .fd-glyph { width: 20px; height: 20px; }
.fd-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-option-title { font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
.fd-option-blurb { margin-top: var(--fd-space-4); font-size: var(--fd-text-12-5); line-height: 1.5; color: var(--ink-2); }
.fd-option-chevron { width: 14px; height: 14px; margin-top: 3px; color: var(--fd-dim); }
.fd-option-sm { gap: var(--fd-space-12); padding: var(--fd-space-14) var(--fd-space-16); }
.fd-option-sm .fd-option-tile { width: 32px; height: 32px; background: var(--fd-funnel-soft); color: var(--fd-funnel); }
.fd-option-sm .fd-option-tile .fd-glyph { width: 16px; height: 16px; }
.fd-option-sm .fd-option-title { display: flex; align-items: center; gap: var(--fd-space-7); font-size: var(--fd-text-13-5); }
.fd-option-sm .fd-option-blurb { margin-top: var(--fd-space-2); font-size: 11.5px; }
.fd-cms { padding: var(--fd-space-2) var(--fd-space-8); border-radius: var(--radius-pill); background: var(--fd-funnel-soft); color: var(--fd-funnel); font-size: 9.5px; font-weight: 700; letter-spacing: .5px; line-height: normal; }
.fd-funnel-search { --fd-funnel: var(--fd-funnel-search); --fd-funnel-soft: var(--fd-funnel-search-soft); }
.fd-funnel-product { --fd-funnel: var(--fd-funnel-product); --fd-funnel-soft: var(--fd-funnel-product-soft); }
.fd-funnel-article { --fd-funnel: var(--fd-funnel-article); --fd-funnel-soft: var(--fd-funnel-article-soft); }
.fd-funnel-related { --fd-funnel: var(--fd-funnel-related); --fd-funnel-soft: var(--fd-funnel-related-soft); }

/* Feed Details (proto 2342-2378) */
.fd-identity { display: flex; align-items: center; gap: var(--fd-space-12); padding: var(--fd-space-14) var(--fd-space-16); border: 1px solid var(--line); border-radius: 12px; }
.fd-identity-text { flex: 1; min-width: 0; }
.fd-identity-meta { font-size: var(--fd-text-12-5); color: var(--ink-2); }
.fd-identity-title { margin-top: 1px; font-size: var(--fd-text-14-5); font-weight: 600; color: var(--ink); }
.fd-identity .fd-url { margin-top: var(--fd-space-4); }
.fd-status-row { display: flex; align-items: center; gap: var(--fd-space-9); margin-top: var(--fd-space-10); padding: var(--fd-space-12) var(--fd-space-15); border: 1px solid var(--line); border-radius: 12px; }
.fd-status-label { font-size: var(--fd-text-13); font-weight: 600; color: var(--ink); white-space: nowrap; }
.fd-status-uptime { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: 11.5px; color: var(--muted); }
.fd-manage { border-radius: 4px; color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fd-manage:hover { text-decoration: underline; }
.fd-status-chevron { width: 14px; height: 14px; color: var(--ink-2); }
.fd-quick { display: flex; flex-direction: column; gap: var(--fd-space-8); margin: 0; padding: 0; list-style: none; }
.fd-quick-row { display: flex; align-items: center; gap: var(--fd-space-11); padding: var(--fd-space-11) var(--fd-space-13); border: 1px solid var(--line); border-radius: 11px; color: inherit; text-decoration: none; }
.fd-quick-row:hover { border-color: var(--ring); background: var(--fd-hover); }
.fd-quick-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); }
.fd-quick-icon .fd-glyph { width: 17px; height: 17px; }
.fd-quick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-quick-label { font-size: var(--fd-text-12-5); font-weight: 600; color: var(--ink); }
.fd-quick-sub { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--ink-2); }
.fd-quick-chevron { width: 13px; height: 13px; color: var(--fd-dim); }

/* ---- Create Feed, step 1 (proto 14570-14641) ---- */
.fd-create-main { display: flex; flex-direction: column; flex: 1.15; min-width: 0; overflow-y: auto; padding: var(--fd-space-36) var(--fd-create-pad-x) var(--fd-space-28); border-right: 1px solid var(--line); }
.fd-create-form { display: flex; flex-direction: column; flex: 1; gap: var(--fd-space-22); width: 100%; max-width: var(--fd-form-w); margin: 0 auto; }
.fd-create-actions { display: flex; justify-content: flex-end; margin-top: auto; }
.button.primary.fd-continue { padding: var(--fd-space-13) var(--fd-space-60); border-radius: 10px; background: var(--fd-grad-cta); font-size: var(--fd-text-14-5); font-weight: 500; line-height: normal; }
/* the company the feed is made for (proto 14575-14582; Feed Settings 15662-15669) — inert */
.fd-company { display: flex; align-items: center; gap: var(--fd-space-14); padding: var(--fd-space-14) var(--fd-space-18); border-radius: 14px; background: var(--fd-flavor-soft); }
.fd-company-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--monogram-bg); color: var(--monogram-fg); font-family: var(--font-serif); font-size: var(--fd-text-24); font-weight: 700; }
.fd-company-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-company-caption { font-size: var(--fd-text-12-5); color: var(--ink-2); }
.fd-company-name { font-size: var(--fd-text-17); font-weight: 600; color: var(--ink); }
.fd-company-chevron { color: var(--ink-2); }
.fd-company-lg { gap: var(--fd-space-16); margin-bottom: var(--fd-space-26); padding: var(--fd-space-16) var(--fd-space-20); }
.fd-company-lg .fd-company-mark { width: 56px; height: 56px; border-radius: 11px; font-size: var(--fd-text-26); }
.fd-company-lg .fd-company-caption { font-size: var(--fd-text-13); }
.fd-company-lg .fd-company-name { font-size: var(--fd-text-21); }
.fd-company-lg .fd-company-chevron { width: 18px; height: 18px; }
/* a field: its label, the control, and the refusal or the help under it */
.fd-field { position: relative; display: flex; flex-direction: column; }
/* a textarea's field is a block, as the prototype's is (14587 · 15677): the textarea stays inline and keeps the line
   descent under it — on the 16px strut of the prototype's field, which names no size of its own — which is the
   prototype's spacing to the next field */
.fd-field:has(> textarea) { display: block; font-size: var(--fd-text-16); }
.fd-label { display: block; margin-bottom: var(--fd-space-9); font-size: var(--fd-text-14); font-weight: 500; color: var(--ink); }
.fd-label-strong { font-weight: 600; }
.fd-label-quiet { font-size: var(--fd-text-12-5); font-weight: 400; color: var(--muted); }
.fd-input { width: 100%; padding: var(--fd-space-14) var(--fd-space-16); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fd-text-14); }
/* the prototype's bare placeholder ink (869) on every Feeds field and the Customize switcher's search — measured on the
   prototype at 1920 ("Conversions click-through" QA, 2026-09-30) */
.fd-input::placeholder, .fd-switcher-search input::placeholder { color: var(--fd-placeholder); }
.fd-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.fd-input[aria-invalid="true"] { border-color: var(--danger); }
.fd-input-lg { font-size: var(--fd-text-14-5); }
.fd-textarea { resize: vertical; }
.fd-input-lg.fd-textarea { line-height: 1.6; }
/* Feed Settings' Page field is set at its form's 14.5px (15684), and every label there is 600 (15674-15682) */
.fd-fs-form .fd-combo-input { font-size: var(--fd-text-14-5); }
.fd-fs-form .fd-label { font-weight: 600; }
.fd-hint { margin-top: var(--fd-space-7); font-size: 12px; line-height: 1.55; color: var(--muted); }
/* the Page combobox (proto 14592-14614): the field, its chevron, and the site's pages under it */
.fd-combo { position: relative; }
.fd-combo-input { padding-right: var(--fd-space-42); }
/* With JavaScript the Page field only picks, so it reads as a control; a new page is a line under it (2026-10-19). */
.fd-combo-input[readonly] { cursor: pointer; }
.fd-page-new-url { color: var(--ink-2); }
.fd-page-new .fd-link-quiet { font-size: inherit; color: var(--accent); }
/* Create Feed's single-line fields are the prototype's 46px and 48px boxes (14585 · 14593); its title field falls back
   to the system font there — a bug not copied — so Poppins keeps the box by a tighter inset */
.fd-create input.fd-input:not(.fd-combo-input) { padding-top: var(--fd-create-input-pad-y); padding-bottom: var(--fd-create-input-pad-y); }
.fd-create .fd-combo-input { padding-top: var(--fd-space-13); padding-bottom: var(--fd-space-13); }
.fd-combo-toggle { position: absolute; top: 0; right: 0; bottom: 0; display: grid; place-items: center; width: var(--fd-space-44); padding: 0; border: 0; border-radius: 0 10px 10px 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.fd-combo-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; gap: var(--fd-space-2); margin-top: var(--fd-space-6); padding: var(--fd-space-8); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--fd-shadow-list); }
.fd-combo-option { display: flex; flex-direction: column; padding: var(--fd-space-10) var(--fd-space-12); border-radius: 9px; cursor: pointer; }
.fd-combo-option:hover, .fd-combo-option.is-active { background: var(--accent-soft-2); }
.fd-combo-name { font-size: var(--fd-text-14); font-weight: 500; color: var(--ink); }
.fd-combo-url { margin-top: 1px; font-size: 12px; color: var(--muted); }
.fd-combo-add { display: flex; align-items: center; justify-content: center; gap: var(--fd-space-8); margin-top: var(--fd-space-4); padding: var(--fd-space-11); border-radius: 9px; background: var(--accent-soft-2); color: var(--accent); font-size: var(--fd-text-13-5); font-weight: 500; }
.fd-combo-add .fd-glyph { width: 14px; height: 14px; }
.fd-combo-add:not(.is-inert) { cursor: pointer; }
.fd-combo-add:not(.is-inert):hover, .fd-combo-add.is-active { background: var(--accent-soft); }
/* the Component Preview column */
.fd-create-preview { flex: 1; min-width: 0; overflow-y: auto; padding: var(--fd-space-32) var(--fd-preview-pad-x); }
.fd-preview-heading { margin-bottom: var(--fd-space-16); font-size: var(--fd-text-16); font-weight: 600; color: var(--ink); }
.fd-draft-card { display: flex; align-items: center; gap: var(--fd-space-14); margin-bottom: var(--fd-space-22); padding: var(--fd-space-18) var(--fd-space-20); border-radius: 14px; background: var(--fd-ok-wash); }
.fd-draft-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--fd-ok-wash-2); color: var(--fd-ok-deep); }
.fd-draft-icon .fd-glyph { width: 24px; height: 24px; }
.fd-draft-text { display: flex; flex-direction: column; min-width: 0; }
.fd-draft-meta { font-size: var(--fd-text-13); color: var(--ink-2); }
.fd-draft-title { margin-top: 1px; overflow-wrap: anywhere; font-size: var(--fd-text-20); font-weight: 600; color: var(--ink); }
.fd-promo { padding: var(--fd-space-28); border-radius: 16px; background: var(--fd-promo-wash); }
.fd-promo-title { font-size: var(--fd-text-22); font-weight: 600; line-height: 1.3; color: var(--ink); }
.fd-promo-link { display: inline-flex; align-items: center; gap: var(--fd-space-8); margin: var(--fd-space-10) 0 var(--fd-space-20); font-size: var(--fd-text-14); color: var(--ink); }
.fd-promo-art { display: grid; place-items: center; height: var(--fd-promo-art-h); border-radius: 12px; background: var(--fd-tile-dark-2); }
.fd-promo-art .fd-glyph { width: 60px; height: 60px; stroke-width: 1.4; color: var(--fd-promo-mark); opacity: .5; }
.fd-promo-art .fd-mark-2 { stroke: var(--fd-promo-mark); }
.fd-promo-art .fd-mark-dot { display: none; }

/* ---- the Customize editor (proto 15038-15462) ---- */
.fd-editor { flex-direction: column; }
/* The editor's form only groups its controls for Create Feed's POST ("Feeds on embed", step 3); it draws no box. The pane
   rules name `.fd-editor-form > .feed-task` too, or the editor loses its full-height columns (2026-10-19). */
.fd-editor-form { display: contents; }
/* An Offline feed's reason, under Feed Details' status row (D197). */
.fd-status-reason { margin: calc(var(--fd-space-8) * -1) 0 var(--fd-space-12); color: var(--muted); font-size: var(--fd-text-13-5); }
.fd-editor-notice { margin-bottom: var(--fd-space-12); }
.fd-toolbar { display: flex; align-items: center; flex: none; gap: var(--fd-space-16); padding: var(--fd-space-12) var(--fd-space-24); border-bottom: 1px solid var(--line); background: var(--surface); }
.fd-toolbar-start { display: flex; align-items: center; flex: 1; gap: var(--fd-space-8); min-width: 0; }
.fd-toolbar-end { display: flex; justify-content: flex-end; flex: 1; }
.button.primary.fd-toolbar-primary { padding: var(--fd-space-10) var(--fd-space-26); border-radius: 8px; font-size: var(--fd-text-13-5); font-weight: 600; line-height: normal; box-shadow: var(--fd-shadow-primary); }
/* the feed switcher (15044-15073, rows 29258-29266) */
.fd-switcher { position: relative; min-width: 0; }
.fd-switcher-button { display: flex; align-items: center; gap: var(--fd-space-10); max-width: var(--fd-switcher-w); padding: var(--fd-space-8) var(--fd-space-12); border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fd-switcher-button:hover { border-color: var(--ring); }
.fd-switcher-text { display: flex; flex-direction: column; min-width: 0; }
.fd-switcher-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.fd-switcher-meta { white-space: nowrap; font-size: 10.5px; color: var(--muted); }
.fd-switcher-chevron { width: 12px; height: 12px; color: var(--muted); }
.fd-switcher-menu { position: absolute; top: calc(100% + var(--fd-space-6)); left: 0; z-index: 60; width: var(--fd-switcher-menu-w); padding: var(--fd-space-10); border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); box-shadow: var(--fd-shadow-popover); }
.fd-switcher-search { display: flex; align-items: center; gap: var(--fd-space-8); margin-bottom: var(--fd-space-8); padding: var(--fd-space-8) var(--fd-space-11); border: 1px solid var(--line); border-radius: 8px; }
.fd-switcher-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-switcher-search .fd-glyph { width: 13px; height: 13px; color: var(--muted); }
.fd-switcher-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fd-text-12-5); }
.fd-switcher-list { display: flex; flex-direction: column; gap: var(--fd-space-3); max-height: var(--fd-switcher-list-h); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.fd-switcher-row { display: flex; align-items: center; gap: var(--fd-space-10); padding: var(--fd-space-8) var(--fd-space-10); border-radius: 8px; color: inherit; text-decoration: none; }
.fd-switcher-row:hover { background: var(--surface-2); }
.fd-switcher-row.is-active { background: var(--accent-soft-2); }
.fd-switcher-row .fd-dot { width: 7px; height: 7px; }
.fd-switcher-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-switcher-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-12-5); font-weight: 600; color: var(--ink); }
.fd-switcher-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); }
/* A segmented control made of native radios (the editor's rows, 15145-15154; the toolbar's canvas, 15078-15091):
   the input covers its option, invisible, so a click, the arrow keys and a screen reader all work as a radio group
   does, and the label paints the choice. */
.fd-seg { display: flex; overflow: hidden; border: 1px solid var(--line-2); border-radius: 7px; }
.fd-seg-option { position: relative; display: flex; flex: 1; }
.fd-seg-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fd-seg-option span { display: flex; align-items: center; justify-content: center; flex: 1; gap: var(--fd-space-8); padding: var(--fd-space-8) var(--fd-space-4); background: var(--surface); color: var(--ink-quiet); font-size: 11.5px; font-weight: 400; text-align: center; white-space: nowrap; }
.fd-seg-option input:checked + span { background: var(--accent-soft-2); color: var(--accent); font-weight: 500; }
.fd-seg-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.fd-seg-target { border-radius: 8px; }
.fd-seg-target .fd-seg-option { flex: none; }
.fd-seg-target .fd-seg-option + .fd-seg-option span { border-left: 1px solid var(--line-2); }
.fd-seg-target .fd-seg-option span { padding: var(--fd-space-9) var(--fd-space-20); font-size: var(--fd-text-13); font-weight: 500; }
.fd-seg-target .fd-seg-option:first-child span { padding-inline: var(--fd-space-26); }
.fd-seg-target .fd-glyph { width: 15px; height: 15px; }
.fd-editor-body { display: flex; flex: 1; min-height: 0; }
/* the section rail (15100-15136) */
.fd-rail { flex: none; width: var(--fd-rail-w); overflow-y: auto; padding: var(--fd-space-14) var(--fd-rail-pad-x); border-right: 1px solid var(--line); background: var(--fd-rail-bg); }
.fd-rail-group { margin: var(--fd-space-16) var(--fd-space-8) var(--fd-space-8); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.fd-rail-row { display: flex; align-items: center; gap: var(--fd-space-12); margin-bottom: var(--fd-space-4); padding: var(--fd-space-11) var(--fd-space-12); border: 1px solid transparent; border-radius: 8px; color: inherit; text-decoration: none; }
.fd-rail-row:hover { background: var(--surface-2); }
.fd-rail-row.is-active { border-color: var(--ring); background: var(--surface); }
.fd-rail-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); }
.fd-rail-icon-layout { color: var(--fd-rail-layout); }
.fd-rail-icon-grid { color: var(--fd-rail-grid); }
.fd-rail-icon-playback { color: var(--fd-rail-playback); }
.fd-rail-icon-menu { color: var(--fd-rail-menu); }
.fd-rail-icon-share { color: var(--fd-rail-share); }
.fd-rail-icon-personalization { color: var(--fd-rail-personalization); }
.fd-rail-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-13-5); font-weight: 500; color: var(--ink); }
.fd-rail-sub { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
/* the Referrer's two notes (15118-15135) */
.fd-note { margin: var(--fd-space-14) var(--fd-space-4) 0; padding: var(--fd-space-12) var(--fd-space-13); border: 1px solid var(--fd-note-line); border-radius: 11px; background: var(--fd-note-bg); }
.fd-note + .fd-note { margin-top: var(--fd-space-8); }
.fd-note-title { display: flex; align-items: center; gap: var(--fd-space-7); margin-bottom: var(--fd-space-5); font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--fd-accent-deep); }
.fd-note-title .fd-glyph { width: 13px; height: 13px; color: var(--accent); }
.fd-note-text { font-size: 11px; line-height: 1.6; color: var(--ink-2); }
.fd-note-warn { border-color: var(--fd-warn-note-line); background: var(--fd-warn-note-bg); }
.fd-note-warn .fd-note-title, .fd-note-warn .fd-note-title .fd-glyph { color: var(--warn); }
.fd-note-warn .fd-note-text { color: var(--fd-warn-ink); }
/* the settings column (15139-15353) */
.fd-settings-panel { order: 3; flex: none; width: var(--fd-settings-w); overflow-y: auto; padding: var(--fd-space-20) var(--fd-space-20) var(--fd-space-30); border-left: 1px solid var(--line); background: var(--surface); }
.fd-set[hidden] { display: none; }
.fd-set-title { margin-bottom: var(--fd-space-6); font-size: var(--fd-text-15-5); font-weight: 600; color: var(--ink); }
.fd-set-title:not(:has(+ .fd-set-lede)) { margin-bottom: var(--fd-space-16); }
.fd-set-lede { margin-bottom: var(--fd-space-16); font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
.fd-set-row { min-width: 0; margin: 0 0 var(--fd-space-14); padding: 0; border: 0; }
.fd-set-label { display: block; margin-bottom: var(--fd-space-7); padding: 0; font-size: var(--fd-text-12-5); font-weight: 600; color: var(--ink); }
.fd-set-help { margin-top: var(--fd-space-6); font-size: 11px; line-height: 1.55; color: var(--muted); }
.fd-stepper { display: flex; align-items: center; padding: var(--fd-space-4) var(--fd-space-5) var(--fd-space-4) var(--fd-space-12); border: 1px solid var(--line-2); border-radius: 7px; }
.fd-stepper-value { flex: 1; font-size: var(--fd-text-12-5); color: var(--ink); }
.fd-stepper-button { display: grid; place-items: center; width: var(--fd-control-28); height: var(--fd-control-28); padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; }
.fd-stepper-button:hover:not(:disabled) { background: var(--accent-soft-2); }
.fd-stepper-button:disabled { opacity: .4; cursor: default; }
.fd-stepper-button .fd-glyph { width: 13px; height: 13px; }
.fd-reasons { display: flex; flex-wrap: wrap; gap: var(--fd-space-5); }
.fd-reason { position: relative; display: inline-flex; }
.fd-reason input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fd-reason span { padding: var(--fd-space-4) var(--fd-space-10); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-quiet); font-size: 10.5px; font-weight: 500; }
.fd-reason input:checked + span { border-color: var(--ring); background: var(--accent-soft); color: var(--fd-accent-deep); }
.fd-reason input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-toggles { display: flex; flex-direction: column; gap: var(--fd-space-8); }
.fd-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-12); cursor: pointer; }
.fd-toggle .fd-set-label { margin: 0; }
.fd-toggle-sub { margin-left: var(--fd-space-14); }
.fd-toggle-text { font-size: 12px; color: var(--ink-body); }
/* Updates recommendations belongs to Not Interested: it is there only while Not Interested is on (15211-15216) */
.fd-toggles:has(input[name="fd-not-interested"]:not(:checked)) .fd-toggle-sub { display: none; }
.fd-textarea-sm { margin-bottom: 0; padding: var(--fd-space-9) var(--fd-space-11); border-radius: 8px; font-size: 12px; }
.fd-channels { display: flex; flex-direction: column; gap: var(--fd-space-5); margin: 0; padding: 0; list-style: none; }
.fd-channel { position: relative; display: flex; align-items: center; gap: var(--fd-space-9); padding: var(--fd-space-7) var(--fd-space-10); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.fd-channel:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-channel-hide { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fd-channel-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.fd-channel-email { background: var(--fd-channel-email); }
.fd-channel-linkedin { background: var(--fd-channel-linkedin); }
.fd-channel-facebook { background: var(--fd-channel-facebook); }
.fd-channel-whatsapp { background: var(--fd-channel-whatsapp); }
.fd-channel-x { background: var(--fd-channel-x); }
.fd-channel-reddit { background: var(--fd-channel-reddit); }
.fd-channel-teams { background: var(--fd-channel-teams); }
.fd-channel-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--ink); }
.fd-channel .fd-glyph { width: 13px; height: 13px; color: var(--ink-2); }
.fd-channel-hidden { display: none; }
.fd-channel:has(.fd-channel-hide:checked) .fd-channel-name { color: var(--fd-dim); }
.fd-channel:has(.fd-channel-hide:checked) .fd-channel-shown { display: none; }
.fd-channel:has(.fd-channel-hide:checked) .fd-channel-hidden { display: block; color: var(--fd-dim); }
.fd-personalization { display: flex; flex-direction: column; gap: var(--fd-space-8); }
.fd-radio-card { position: relative; display: flex; align-items: flex-start; gap: var(--fd-space-10); padding: var(--fd-space-11) var(--fd-space-13); border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }
.fd-radio-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fd-radio-card:has(input:checked) { border: 1.5px solid var(--ring); background: var(--accent-soft-2); }
.fd-radio-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-radio-mark { display: grid; place-items: center; flex: none; width: 17px; height: 17px; margin-top: 1px; border: 2px solid var(--accent); border-radius: 50%; }
.fd-radio-card:has(input:checked) .fd-radio-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-badge); }
.fd-radio-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-radio-title { font-size: var(--fd-text-12-5); font-weight: 600; color: var(--ink); }
.fd-radio-card:has(input:checked) .fd-radio-title { color: var(--accent); }
.fd-radio-sub { margin-top: var(--fd-space-2); font-size: 11px; line-height: 1.5; color: var(--ink-2); }
/* what Generative opens (15268-15289): shown while Generative is the choice */
.fd-unlocks { display: none; margin-top: var(--fd-space-2); padding: var(--fd-space-12) var(--fd-space-13); border: 1px solid var(--fd-accent-line); border-radius: 11px; background: var(--fd-accent-wash); }
.fd-personalization:has(input[value="GENERATIVE"]:checked) .fd-unlocks { display: block; }
.fd-unlocks-title { margin-bottom: var(--fd-space-8); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--fd-muted-2); }
.fd-unlock { display: flex; align-items: center; gap: var(--fd-space-9); margin-bottom: var(--fd-space-6); padding: var(--fd-space-9) var(--fd-space-11); border: 1px solid var(--fd-accent-line); border-radius: 9px; background: var(--surface); }
.fd-unlock-icon { width: 14px; height: 14px; color: var(--accent); }
.fd-unlock-icon.is-violet { color: var(--fd-rail-personalization); }
.fd-unlock-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-unlock-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.fd-unlock-sub { margin-top: 1px; font-size: 10.5px; color: var(--muted); }
.fd-unlock-chevron { width: 11px; height: 11px; color: var(--muted); }
.fd-unlocks-note { margin-top: var(--fd-space-8); font-size: 10.5px; line-height: 1.55; color: var(--muted); }
/* The canvas and its two mocks (15355-15453): a picture of the marketer's own page, in the site's colours in both
   modes, at the prototype's geometry. The controls above repaint it — the classes on .fd-canvas are feedEditor's. */
.fd-canvas { order: 2; flex: 1; min-width: 0; overflow-y: auto; padding: var(--fd-space-32) var(--fd-canvas-pad-x); background: var(--fd-canvas); }
.fd-browser { overflow: hidden; border: 1.5px solid var(--mock-frame); border-radius: 12px; box-shadow: var(--fd-shadow-mock); }
.fd-browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--mock-bar); }
.fd-browser-dot { width: 9px; height: 9px; border-radius: 50%; }
.fd-browser-dot.is-close { background: var(--mock-close); }
.fd-browser-dot.is-min { background: var(--mock-min); }
.fd-browser-dot.is-max { background: var(--mock-max); }
.fd-browser-address { flex: 1; height: 10px; margin: 0 30px; border-radius: 5px; background: var(--mock-address); }
.fd-mock-page { padding: 18px 20px 24px; background: var(--mock-page); }
.fd-mock-site { margin-bottom: 16px; font-family: var(--font-serif); font-size: 17px; text-align: center; color: var(--mock-ink); }
.fd-mock-heading { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--mock-ink); }
.fd-mock-strip { position: relative; display: flex; gap: 9px; width: fit-content; max-width: 100%; overflow: hidden; }
.fd-mock-tile { position: relative; display: grid; place-items: center; flex: none; width: 86px; height: 130px; border-radius: 8px; transition: transform .2s ease; }
.fd-mock-tile-1 { background: var(--mock-tile-1); }
.fd-mock-tile-2 { background: var(--mock-tile-2); }
.fd-mock-tile-3 { background: var(--mock-tile-3); }
.fd-mock-tile-4 { background: var(--mock-tile-4); }
.fd-mock-tile-5 { background: var(--mock-tile-5); }
.fd-mock-captions { display: flex; gap: 9px; margin-top: 8px; }
.fd-mock-caption { width: 86px; height: 8px; border-radius: 4px; background: var(--mock-caption); }
.fd-mock-arrow { position: absolute; top: 50%; z-index: 1; display: none; place-items: center; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--mock-page); box-shadow: var(--fd-shadow-mock); color: var(--mock-ink); }
.fd-mock-arrow.is-prev { left: 4px; }
.fd-mock-arrow.is-prev .fd-glyph { transform: rotate(180deg); }
.fd-mock-arrow.is-next { right: 4px; }
.fd-mock-arrow .fd-glyph { width: 14px; height: 14px; }
.arrows-fixed .fd-mock-arrow, .arrows-on_hover .fd-mock-strip:hover .fd-mock-arrow { display: grid; }
.is-3d .fd-mock-strip { perspective: 600px; }
.is-3d .fd-mock-tile-1, .is-3d .fd-mock-tile-2, .is-3d .fd-phone-tile-1 { transform: rotateY(24deg) scale(.94); }
.is-3d .fd-mock-tile-3 { transform: scale(1.06); }
.is-3d .fd-mock-tile-4, .is-3d .fd-mock-tile-5, .is-3d .fd-phone-tile-3 { transform: rotateY(-24deg) scale(.94); }
.is-snap .fd-mock-strip { scroll-snap-type: x mandatory; }
.fd-phone { width: 290px; margin: 0 auto; overflow: hidden; border: 2px solid var(--mock-ink); border-radius: 28px; background: var(--mock-page); box-shadow: var(--fd-shadow-mock); }
.fd-phone-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 4px; color: var(--mock-ink); font-size: 12px; font-weight: 600; }
.fd-phone-signal { display: flex; align-items: center; gap: 4px; }
.fd-phone-signal span { width: 14px; height: 8px; border-radius: 2px; background: var(--mock-ink); }
.fd-phone-signal span + span { width: 16px; border: 1px solid var(--mock-ink); background: transparent; }
.fd-phone-site { padding: 8px 0 14px; border-bottom: 1px solid var(--mock-rule); font-family: var(--font-serif); font-size: 15px; text-align: center; color: var(--mock-ink); }
.fd-phone-page { padding: 16px 14px 22px; }
.fd-phone-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fd-phone-head .fd-mock-heading { margin: 0; font-size: 13px; }
.fd-phone-arrows { display: flex; gap: 6px; }
.fd-phone-arrows span { width: 20px; height: 20px; border: 1px solid var(--mock-control); border-radius: 50%; }
.arrows-hide .fd-phone-arrows { visibility: hidden; }
.fd-phone-strip { gap: 10px; }
.fd-phone-strip .fd-mock-tile { width: 118px; height: 180px; border-radius: 10px; }
.fd-phone-tile-1 { background: var(--mock-phone-tile-1); }
.fd-phone-tile-2 { background: var(--mock-phone-tile-2); }
.fd-phone-strip .fd-phone-tile-3 { width: 20px; background: var(--mock-phone-tile-3); }
.fd-phone-page .fd-mock-captions { gap: 10px; }
.fd-phone-caption { width: 118px; }
.fd-phone-chrome { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 8px; background: var(--mock-bar); }
.fd-phone-address { height: 9px; border-radius: 5px; background: var(--mock-address); }
.fd-phone-nav { display: flex; gap: 22px; padding: 2px 4px; color: var(--mock-caption); }
.fd-phone-nav .is-quiet { display: inline-flex; opacity: .4; }
.fd-phone-home { width: 110px; height: 4px; margin: 4px auto 0; border-radius: 2px; background: var(--mock-caption); }

/* ---- Feed Settings (proto 15640-15810) ---- */
.fd-fs-rail { flex: none; width: var(--fd-fs-rail-w); overflow-y: auto; padding: var(--fd-space-26) var(--fd-fs-rail-pad-x); border-right: 1px solid var(--line); background: var(--fd-rail-bg); }
.fd-fs-rail-title { margin-bottom: var(--fd-space-12); font-size: var(--fd-text-15-5); font-weight: 600; color: var(--ink); }
.fd-fs-rail-group { margin: var(--fd-space-24) 0 var(--fd-space-12); padding-top: var(--fd-space-20); border-top: 1px solid var(--line); font-size: var(--fd-text-15-5); font-weight: 600; color: var(--ink); }
.fd-fs-row { display: flex; align-items: center; gap: var(--fd-space-11); margin-bottom: var(--fd-space-4); padding: var(--fd-space-11) var(--fd-space-14); border: 1px solid transparent; border-radius: 10px; color: var(--ink-quiet); font-size: var(--fd-text-14); text-decoration: none; }
.fd-fs-row:hover { background: var(--surface-2); }
.fd-fs-row.is-active { border-color: var(--ring); background: var(--accent-soft-2); color: var(--accent); }
.fd-fs-row-icon { width: 17px; height: 17px; color: var(--ink-2); }
.fd-fs-row-label { flex: 1; }
/* the rail's chip is a pixel narrower each side than a panel row's (15650: 3px 8px) */
.fd-fs-row .fd-chip-status { padding-inline: var(--fd-space-8); }
.fd-fs-pane { flex: 1; min-width: 0; overflow-y: auto; padding: var(--fd-space-30) var(--fd-fs-pad-x); }
.fd-fs-body { max-width: var(--fd-form-w); }
.fd-fs-title { margin-bottom: var(--fd-space-6); font-size: var(--fd-text-20); font-weight: 600; color: var(--ink); }
.fd-fs-lede { margin-bottom: var(--fd-space-22); font-size: var(--fd-text-13); line-height: 1.6; color: var(--ink-2); }
.fd-fs-note { font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.fd-fs-form { display: flex; flex-direction: column; gap: var(--fd-space-20); }
.fd-input-title { font-size: var(--fd-text-15); }
.fd-fs-actions { display: flex; align-items: center; gap: var(--fd-space-12); padding-top: var(--fd-space-6); }
/* Save Changes (15689-15694): the prototype's quiet grey until a field changes, its gradient after — inert either
   way, so it keeps the inert fade once it takes the gradient */
.button.primary.fd-fs-save { padding: var(--fd-space-13) var(--fd-space-30); border-radius: 10px; font-size: var(--fd-text-14); font-weight: 600; line-height: normal; }
.button.primary.fd-fs-save[disabled] { opacity: 1; background: var(--fd-save-idle); color: var(--muted); }
.button.primary.fd-fs-save[disabled].is-dirty { opacity: .55; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-fg); }
.fd-card-box { padding: var(--fd-space-16) var(--fd-space-18); border: 1px solid var(--line); border-radius: 12px; }
.fd-box-title { font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.fd-fs-label { margin-bottom: var(--fd-space-8); }
/* the deactivated banner (15702-15708) */
/* Status's Offline notice keeps the banner's gap above the Uptime card (2026-10-19). */
.fd-fs-body > .notice { margin-bottom: var(--fd-space-22); }
.fd-banner-bad { margin-bottom: var(--fd-space-22); padding: var(--fd-space-14) var(--fd-space-16); border: 1px solid var(--fd-bad-line); border-radius: 11px; background: var(--fd-bad-wash); }
.fd-banner-text { display: flex; gap: var(--fd-space-10); margin-bottom: var(--fd-space-10); font-size: var(--fd-text-12-5); line-height: 1.65; color: var(--fd-bad-ink-deep); }
.fd-banner-text .fd-glyph { margin-top: 1px; color: var(--danger); }
.fd-banner-text strong { font-weight: 700; }
.button.primary.fd-banner-button { padding: var(--fd-space-10) var(--fd-space-20); border-radius: 8px; font-size: var(--fd-text-12-5); font-weight: 600; line-height: normal; }
/* the uptime card (15710-15718) */
.fd-uptime { margin-bottom: var(--fd-space-22); }
.fd-uptime-head { display: flex; align-items: center; gap: var(--fd-space-10); margin-bottom: var(--fd-space-12); }
.fd-uptime-figure { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.fd-uptime-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.fd-uptime-bar { --bar-pct: 100; flex: 1; height: calc(var(--bar-pct) * 1%); border-radius: 2px; background: var(--fd-bar-ok); opacity: .8; }
.fd-uptime-bar.tone-warn { background: var(--fd-bar-warn); opacity: 1; }
.fd-uptime-bar.tone-bad { background: var(--fd-bar-bad); opacity: 1; }
.fd-uptime-bar.tone-dim { background: var(--fd-bar-none); opacity: 1; }
.fd-uptime-scale { display: flex; justify-content: space-between; margin-top: var(--fd-space-6); font-size: 10px; color: var(--fd-dim); }
/* On | Off and the tabs (15724-15728 · 15788-15792): buttons, not radios — the one is inert, the other is a tab list */
.fd-seg-mode { max-width: var(--fd-seg-mode-w); margin-bottom: var(--fd-space-18); border-radius: 9px; }
.fd-seg-button { flex: 1; padding: var(--fd-space-9) 0; border: 0; background: var(--surface); color: var(--ink-quiet); font: inherit; font-size: var(--fd-text-12-5); font-weight: 600; cursor: pointer; }
.fd-seg-button[disabled] { cursor: default; }
.fd-seg-button.is-on { background: var(--ok-soft); color: var(--ok); }
.fd-seg-button.is-off { background: var(--surface-2); color: var(--ink-body); }
.fd-seg-tabs { max-width: var(--fd-seg-tabs-w); margin-bottom: var(--fd-space-10); border-radius: 8px; }
.fd-seg-tabs .fd-seg-button { padding: var(--fd-space-8) 0; font-size: 12px; font-weight: 500; }
.fd-seg-tabs .fd-seg-button.is-selected { background: var(--accent-soft); color: var(--fd-accent-deep); font-weight: 600; }
.fd-seg-button:focus-visible { outline-offset: -2px; }
/* the Platforms card (15729-15739) */
.fd-platforms { display: flex; flex-direction: column; gap: var(--fd-space-8); margin: 0 0 var(--fd-space-22); padding: 0; list-style: none; }
.fd-platform-row { display: flex; align-items: center; gap: var(--fd-space-11); padding: var(--fd-space-11) var(--fd-space-14); border: 1px solid var(--line); border-radius: 11px; }
.fd-platform-name { width: var(--fd-platform-name-w); font-size: var(--fd-text-13); font-weight: 600; color: var(--ink); }
.fd-platform-uptime { flex: 1; font-size: 11.5px; color: var(--muted); }
.switch[role="switch"].fd-switch-ok { width: var(--fd-switch-w); height: var(--fd-switch-h); }
.switch[role="switch"].fd-switch-ok::after { top: var(--fd-space-2); left: var(--fd-space-2); width: var(--fd-switch-knob); height: var(--fd-switch-knob); }
.switch[role="switch"].fd-switch-ok[aria-checked="true"] { background: var(--ok); }
.switch[role="switch"].fd-switch-ok[aria-checked="true"]::after { left: calc(var(--fd-switch-w) - var(--fd-switch-knob) - var(--fd-space-2)); }
/* the danger zone (15740-15749) */
.fd-danger { padding: var(--fd-space-13) var(--fd-space-15); border: 1px solid var(--fd-bad-line); border-radius: 11px; background: var(--fd-bad-wash-soft); }
.fd-danger-title { margin-bottom: var(--fd-space-3); font-size: var(--fd-text-12-5); font-weight: 700; color: var(--fd-bad-ink); }
.fd-danger-text { margin-bottom: var(--fd-space-10); font-size: 11.5px; line-height: 1.6; color: var(--fd-bad-ink-muted); }
.fd-danger-actions { display: flex; align-items: center; gap: var(--fd-space-10); }
.fd-danger-button { padding: var(--fd-space-9) var(--fd-space-16); border: 1px solid var(--danger); border-radius: 8px; background: var(--surface); color: var(--danger); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.fd-danger-button[disabled] { opacity: .55; cursor: default; }
.fd-danger-actions .fd-link-quiet { font-size: 12px; font-weight: 400; }
/* Web: the three steps and the Connect Feed card (15754-15810) */
.fd-steps { display: flex; align-items: center; gap: var(--fd-space-14); margin: 0 0 var(--fd-space-16); list-style: none; }
.fd-step { display: flex; align-items: flex-start; flex: 1; gap: var(--fd-space-10); }
.fd-step > span:last-child { display: flex; flex-direction: column; }
.fd-step-number { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--fd-accent-deep); font-size: 11px; font-weight: 700; }
.fd-step-title { font-size: var(--fd-text-12-5); font-weight: 600; color: var(--ink); }
.fd-step-sub { margin-top: var(--fd-space-2); font-size: 11px; line-height: 1.45; color: var(--muted); }
.fd-step-arrow { display: flex; flex: none; color: var(--line-strong); }
.fd-step-arrow .fd-glyph { width: 13px; height: 13px; }
.fd-connect-head { display: flex; align-items: center; gap: var(--fd-space-9); margin-bottom: var(--fd-space-4); }
.fd-connect-title { flex: 1; font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
.fd-recheck { display: grid; place-items: center; width: var(--fd-control-26); height: var(--fd-control-26); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); }
.fd-recheck[disabled] { opacity: .55; cursor: default; }
.fd-recheck .fd-glyph { width: 13px; height: 13px; }
.fd-connect-lede { margin-bottom: var(--fd-space-12); font-size: var(--fd-text-12-5); line-height: 1.55; color: var(--ink-2); }
/* "Feeds on embed", step 6: when the feed last rendered on its page (secondary to its health, D197), and Advanced. */
.fd-connect-seen { margin-top: calc(var(--fd-space-4) * -1); color: var(--muted); font-size: var(--fd-text-13-5); }
.fd-advanced { margin-top: var(--fd-space-12); border-top: 1px solid var(--line); padding-top: var(--fd-space-10); display: grid; gap: var(--fd-space-8); }
.fd-advanced-summary { cursor: pointer; color: var(--muted); font-size: var(--fd-text-13-5); font-weight: 600; }
.fd-advanced-title { margin-top: var(--fd-space-8); font-weight: 600; font-size: var(--fd-text-13-5); color: var(--ink); }
/* Manage Whitelist's changes are forms ("Feeds on embed", step 7); they keep the row's layout. */
.fd-wl-decide, .fd-wl-inline-form { display: contents; }
.fd-snippet { position: relative; }
.fd-snippet-code { margin: 0; padding: var(--fd-space-16) var(--fd-snippet-pad-end) var(--fd-space-16) var(--fd-space-16); border-radius: 10px; background: var(--fd-snippet-bg); color: var(--fd-snippet-ink); font-family: var(--font-mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; word-break: break-all; }
.fd-snippet-code code { font: inherit; }
.fd-copy { position: absolute; top: var(--fd-space-10); right: var(--fd-space-10); display: flex; align-items: center; gap: var(--fd-space-6); padding: var(--fd-space-5) var(--fd-space-11); border: 1px solid var(--fd-on-dark-line); border-radius: 7px; background: var(--fd-on-dark-glass); color: var(--fd-on-dark-label); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.fd-copy:hover { background: var(--fd-on-dark-line); }
.fd-copy .fd-glyph { width: 11px; height: 11px; }
.fd-snippet-note { margin-top: var(--fd-space-8); font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.fd-connect-foot { margin-top: var(--fd-space-14); padding-top: var(--fd-space-11); border-top: 1px solid var(--divider); font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.fd-connect-foot strong { font-weight: 600; color: var(--ink-2); }

/* ---- round 2: "Feeds as the workspace's home" (2026-09-29) — the header's Whitelist chip, the Platform panel, What is
 * it?, Configure Platform and Manage Whitelist (prototype 1770-1790 · 1965-2405 · 16558-16595 · 14527-14568 ·
 * 15465-15612). Same rules as the block above: density ladder for what moves, the picture/icon exemption for the
 * rest, colours from tokens. ---- */
.feeds-actions { display: flex; align-items: center; gap: var(--fd-space-12); }
/* "Whitelist (N)" (1782-1784): accent on the accent chip, no border and no hover of its own in the prototype */
.fd-wl-open { padding: var(--fd-space-10) var(--fd-space-18); border-radius: 10px; background: var(--fd-accent-chip); color: var(--accent); font-size: var(--fd-text-13-5); text-decoration: none; white-space: nowrap; }
.fd-wl-open-count { opacity: .75; }
.fd-wl-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the Platform panel's head (1967-1980): the mark tile, the title, the decorative plan chip and pencil, the × pushed right */
.fd-close { margin-left: auto; }
.fd-panel-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--fd-flavor-soft); color: var(--flavor); }
.fd-panel-mark .fd-glyph { width: 19px; height: 19px; }
.feeds-panel-title.fd-panel-title-inline { flex: 0 1 auto; }
.fd-plan-chip { flex: none; padding: var(--fd-space-2) var(--fd-space-9); border-radius: var(--radius-pill); background: var(--fd-accent-chip); color: var(--accent); font-size: 11px; white-space: nowrap; }
.fd-plan-pencil { width: 14px; height: 14px; color: var(--ink-2); }
/* the tabs (2074-2081): a five-column grid — two columns stay empty while Rewards and Recruitment are flagged off */
.fd-ptabs { display: grid; flex: none; grid-template-columns: repeat(5, 1fr); gap: var(--fd-space-4); padding: var(--fd-space-4); border: 1px solid var(--line); border-radius: 12px; background: var(--fd-hover); }
.fd-ptab { display: flex; flex-direction: column; align-items: center; gap: var(--fd-space-5); padding: var(--fd-space-8) var(--fd-space-2) var(--fd-space-6); border-radius: 9px; color: var(--muted); text-align: center; text-decoration: none; }
.fd-ptab .fd-glyph { width: 17px; height: 17px; }
.fd-ptab-label { font-size: 10px; font-weight: 500; line-height: 1.25; color: var(--ink-2); }
.fd-ptab.is-selected { background: var(--fd-accent-chip); color: var(--accent); }
.fd-ptab.is-selected .fd-ptab-label { font-weight: 600; color: var(--accent); }
.fd-ptab:focus-visible, .fd-hero:focus-visible, .fd-module-row:focus-visible, .fd-about-close:focus-visible, .fd-about-ok:focus-visible,
.fd-wl-close:focus-visible, .fd-wl-tab:focus-visible, .fd-wl-chip:focus-visible, .fd-wl-kebab:focus-visible, .fd-wl-quiet:focus-visible, .fd-wl-revoke:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-ptab-panel { display: flex; flex-direction: column; flex: 1; gap: var(--fd-space-10); min-height: 0; }
.fd-overline.fd-overline-tight { margin: var(--fd-space-5) 0 calc(-1 * var(--fd-space-2)); }
/* the status cards (2084-2089 · 2170-2179 · 2211-2216) */
.fd-pcard { display: flex; align-items: center; flex: none; gap: var(--fd-space-10); padding: var(--fd-space-12) var(--fd-space-15); border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.fd-pcard-title { font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); white-space: nowrap; }
.fd-chip-pstatus { padding: var(--fd-space-2-5) var(--fd-space-9); font-size: 10.5px; }
.fd-pcard-spacer { flex: 1; }
.fd-pcard-figure { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.fd-pcard-link { color: var(--accent); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fd-pcard-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-pcard-line { display: flex; align-items: center; gap: var(--fd-space-8); }
.fd-pcard-sub { margin-top: var(--fd-space-2); font-size: 11.5px; color: var(--ink-2); }
.switch[role="switch"].fd-switch-module { flex: none; width: var(--fd-mswitch-w); height: var(--fd-mswitch-h); }
.switch[role="switch"].fd-switch-module::after { top: var(--fd-space-2); left: var(--fd-space-2); width: var(--fd-mswitch-knob); height: var(--fd-mswitch-knob); }
.switch[role="switch"].fd-switch-module[aria-checked="true"] { background: var(--ok); }
.switch[role="switch"].fd-switch-module[aria-checked="true"]::after { left: var(--fd-mswitch-on); }
/* the Modules list (2091-2116) */
.fd-module-row { display: flex; align-items: center; flex: none; gap: var(--fd-space-11); padding: var(--fd-space-14); border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: inherit; text-decoration: none; }
a.fd-module-row:hover { border-color: var(--ring); }
.fd-module-row-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft-2); color: var(--accent); }
.fd-module-row-tile .fd-glyph { width: 17px; height: 17px; }
.fd-module-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-module-row-name { font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.fd-module-row-sub { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink-2); }
.fd-module-row.state-off .fd-module-row-tile { background: var(--surface-2); color: var(--muted); }
.fd-module-row.state-off .fd-module-row-name { color: var(--ink-2); }
.fd-module-row.state-locked { border-color: var(--fd-locked-line); background: var(--fd-locked-wash); }
.fd-module-row.state-locked .fd-module-row-tile { background: var(--fd-locked-tile); color: var(--fd-locked-ink); }
.fd-module-state { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; }
.fd-module-state.is-live { background: var(--fd-ok-grad); box-shadow: 0 0 0 4px var(--fd-ok-ring), 0 5px 12px -3px var(--fd-ok-glow); color: var(--accent-fg); }
.fd-module-state.is-live .fd-glyph { width: 14px; height: 14px; }
.fd-module-state.is-off { background: var(--fd-off-disc); box-shadow: 0 0 0 4px var(--fd-off-ring); color: var(--muted); }
.fd-module-state.is-off .fd-glyph { width: 12px; height: 12px; }
.fd-upgrade { flex: none; padding: var(--fd-space-5) var(--fd-space-14); border: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: var(--fd-shadow-upgrade); color: var(--accent-fg); font: inherit; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.fd-upgrade[disabled] { opacity: .55; cursor: default; }
.fd-locked-note { flex: none; margin-top: calc(-1 * var(--fd-space-4)); font-size: 11px; line-height: 1.5; color: var(--fd-locked-ink); }
.fd-more-soon { display: flex; align-items: center; justify-content: center; flex: none; padding: var(--fd-space-10) var(--fd-space-14); border: 1px dashed var(--line-strong); border-radius: 13px; color: var(--muted); font-size: 11.5px; }
/* quick access (2118-2151 · 2181-2192 · 2218-2235) */
.fd-qa { flex: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); list-style: none; }
.fd-qa-row { display: flex; align-items: center; gap: var(--fd-space-11); padding: var(--fd-space-12) var(--fd-space-15); }
.fd-qa-row + .fd-qa-row { border-top: 1px solid var(--divider); }
.fd-qa-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); }
.fd-qa-icon .fd-glyph { width: 15px; height: 15px; }
.fd-qa-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-qa-title { font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.fd-qa-sub { display: flex; align-items: center; gap: var(--fd-space-6); min-width: 0; margin-top: var(--fd-space-2); font-size: 11.5px; color: var(--ink-2); }
.fd-qa-sub-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-qa-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fd-signal-on); box-shadow: 0 0 0 2.5px var(--ok-soft); }
.fd-qa-chevron { width: 13px; height: 13px; color: var(--muted); }
/* the Feed tab's rows are a step tighter and each carries its rule, the last one too (2183) */
.fd-qa.is-compact .fd-qa-row { padding: var(--fd-space-10) var(--fd-space-15); border-top: 0; border-bottom: 1px solid var(--divider); }
.fd-qa.is-compact .fd-qa-title { font-size: var(--fd-text-13); }
.fd-qa.is-compact .fd-qa-sub { margin-top: 1px; font-size: 11px; }
/* the module hero (2158-2168 · 2199-2209): a dark picture with the play disc and "What is it?", then the name and figure */
.fd-hero { display: block; flex: none; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fd-hero-art { position: relative; display: flex; align-items: center; justify-content: center; height: 104px; background: var(--fd-tile-dark); }
.fd-hero-mark { width: 38px; height: 38px; opacity: .55; }
.fd-hero-feed .fd-hero-mark { color: var(--fd-promo-mark); stroke-width: 1.6; }
.fd-hero-feed .fd-hero-mark .fd-mark-2 { stroke: var(--fd-promo-mark); }
.fd-hero-feed .fd-hero-mark .fd-mark-dot { display: none; }
.fd-hero-lms .fd-hero-mark { color: var(--fd-hero-lms); }
.fd-hero-lms .fd-hero-mark path { stroke-width: 1.3; }
.fd-hero-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--fd-hero-disc-line); border-radius: 50%; background: var(--fd-hero-disc); backdrop-filter: blur(2px); color: var(--accent-fg); }
.fd-hero-play .fd-glyph { width: 14px; height: 14px; }
.fd-hero-badge { position: absolute; top: var(--fd-space-9); right: var(--fd-space-9); padding: var(--fd-space-2-5) var(--fd-space-9); border-radius: var(--radius-pill); background: var(--fd-hero-badge); color: var(--accent-fg); font-size: 10px; line-height: normal; }
.fd-hero-foot { display: flex; align-items: center; gap: var(--fd-space-8); padding: var(--fd-space-10) var(--fd-space-15); }
.fd-hero-name { flex: 1; font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); white-space: nowrap; }
.fd-hero-figure { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
/* the Platform tab's footer is a pixel rounder and tighter than Feed Details' (2386-2389) */
.feeds-panel:has(.fd-ptabs) .feeds-panel-foot { gap: var(--fd-space-10); }
.feeds-panel:has(.fd-ptabs) .button.fd-foot-button { border-radius: 11px; }

/* What is it? (16558-16595) — the `modal` component's dialog in the prototype's split */
.modal.fd-about { z-index: 60; padding: 4vh 4vw; background: var(--fd-scrim-about); backdrop-filter: blur(6px); }
.fd-about-dialog { display: flex; width: min(var(--fd-about-w), 94vw); max-height: 88vh; overflow: hidden; border-radius: 22px; background: var(--surface); box-shadow: var(--fd-shadow-about); color: var(--ink); }
.fd-about-art { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: var(--fd-about-art-w); background: var(--fd-about-art); }
.fd-about-glyph { width: 64px; height: 64px; color: var(--fd-about-glyph); opacity: .3; }
.fd-about-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 58px; height: 58px; border: 1.5px solid var(--fd-about-disc-line); border-radius: 50%; background: var(--fd-hero-disc); backdrop-filter: blur(3px); color: var(--accent-fg); }
.fd-about-play .fd-glyph { width: 20px; height: 20px; }
.fd-about-caption { position: absolute; left: var(--fd-space-16); right: var(--fd-space-16); bottom: var(--fd-space-14); display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-8); color: var(--fd-about-caption); font-size: 12px; font-weight: 500; }
.fd-about-duration { padding: var(--fd-space-3) var(--fd-space-9); border-radius: var(--radius-pill); background: var(--fd-hero-disc); color: var(--fd-about-duration); font-size: 10.5px; font-weight: 400; white-space: nowrap; }
.fd-about-body { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-y: auto; padding: var(--fd-space-24) var(--fd-space-26); }
.fd-about-chips { display: flex; align-items: center; gap: var(--fd-space-8); }
.fd-about-category { padding: var(--fd-space-3) var(--fd-space-10); border-radius: var(--radius-pill); background: var(--accent-soft-2); color: var(--accent); font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; }
.fd-about-plan { padding: var(--fd-space-3) var(--fd-space-10); border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 500; white-space: nowrap; }
.fd-about-plan.tone-ok { background: var(--ok-soft); color: var(--ok); }
.fd-about-plan.tone-warn { background: var(--warn-soft); color: var(--warn); }
/* the × sits on a 16px text line in a padded block, as the prototype's does (16576), which is what makes the row 33px */
.fd-about-close { display: block; margin-left: auto; padding: var(--fd-space-4); border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: var(--fd-text-16); line-height: normal; cursor: pointer; }
.fd-about-close .fd-glyph { display: inline-block; width: 17px; height: 17px; vertical-align: baseline; }
.fd-about-name { margin-top: var(--fd-space-12); font-size: var(--fd-text-21); font-weight: 600; letter-spacing: -.2px; color: var(--ink); }
.fd-about-text { margin-top: var(--fd-space-10); font-size: var(--fd-text-13); line-height: 1.7; color: var(--ink-quiet); text-wrap: pretty; }
.fd-about-rule { flex: none; height: 1px; margin: var(--fd-space-16) 0 var(--fd-space-4); background: var(--line); }
.fd-about-points { margin: 0; padding: 0; list-style: none; }
.fd-about-points li { display: flex; align-items: flex-start; gap: var(--fd-space-10); margin-top: var(--fd-space-11); font-size: var(--fd-text-12-5); line-height: 1.55; color: var(--ink-body); }
.fd-about-check { width: 15px; height: 15px; margin-top: var(--fd-space-2); color: var(--accent); }
.fd-about-check .fd-check-disc { fill: var(--accent-soft-2); }
.fd-about-spacer { flex: 1; min-height: var(--fd-space-20); }
.fd-about-button { width: 100%; padding: var(--fd-space-13); border: 0; border-radius: 11px; font: inherit; font-size: var(--fd-text-14); font-weight: 500; cursor: pointer; }
.fd-about-ok { background: var(--accent-soft-2); color: var(--accent); }

/* Configure Platform (14527-14568): Create Feed's split, its own preview card and a taller placeholder */
.fd-setup-card { display: flex; align-items: center; gap: var(--fd-space-14); margin-bottom: var(--fd-space-22); padding: var(--fd-space-18) var(--fd-space-20); border-radius: 14px; background: var(--fd-flavor-soft); }
.fd-setup-mark { width: 34px; height: 34px; stroke-width: 1.8; color: var(--flavor); }
.fd-setup-name { font-size: var(--fd-text-17); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fd-setup-line { margin-top: var(--fd-space-2); font-size: var(--fd-text-13); color: var(--ink-2); }
.fd-promo-title.fd-setup-promo-title { line-height: normal; }
.fd-promo-art.fd-setup-art { height: var(--fd-setup-art-h); }

/* Manage Whitelist (15465-15612) */
.modal.fd-wl-scrim { z-index: 50; padding: 0; background: var(--fd-scrim-wl); }
.fd-wl { display: flex; flex-direction: column; width: var(--fd-wl-w); max-width: 94vw; height: min(var(--fd-wl-h), 84vh); padding: var(--fd-space-20) var(--fd-space-22); border-radius: 16px; background: var(--surface); box-shadow: var(--fd-shadow-wl); color: var(--ink); }
.fd-wl-head { display: flex; align-items: flex-start; flex: none; margin-bottom: var(--fd-space-4); }
.fd-wl-heading { flex: 1; }
.fd-wl-title { font-size: var(--fd-text-17); font-weight: 600; color: var(--ink); }
.fd-wl-sub { margin-top: var(--fd-space-2); font-size: 12px; color: var(--ink-2); }
.fd-wl-close { display: flex; padding: var(--fd-space-4); border-radius: 6px; color: var(--ink-2); }
.fd-wl-close .fd-glyph { width: 14px; height: 14px; }
.fd-wl-tabs { display: flex; flex: none; gap: var(--fd-space-22); margin-bottom: var(--fd-space-14); border-bottom: 1px solid var(--line); }
.fd-wl-tab { display: flex; align-items: center; gap: var(--fd-space-7); padding: var(--fd-space-11) var(--fd-space-2) var(--fd-space-9); color: var(--ink-2); text-decoration: none; }
.fd-wl-tab-label { font-size: var(--fd-text-13-5); font-weight: 500; }
.fd-wl-tab.is-selected .fd-wl-tab-label { margin-bottom: calc(-1 * var(--fd-space-10)); padding-bottom: var(--fd-space-9); border-bottom: 2px solid var(--accent); color: var(--accent); font-weight: 600; }
.fd-wl-badge { padding: var(--fd-space-2) var(--fd-space-7); border-radius: var(--radius-pill); background: var(--warn-soft); color: var(--warn); font-size: 9.5px; font-weight: 700; }
.fd-wl-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fd-wl-toolbar { display: flex; align-items: center; flex: none; gap: var(--fd-space-8); margin-bottom: var(--fd-space-14); }
.fd-wl-search { display: flex; align-items: center; flex: 1; gap: var(--fd-space-8); padding: var(--fd-space-9) var(--fd-space-12); border: 1px solid var(--line); border-radius: 9px; background: var(--fd-hover); }
.fd-wl-search:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-wl-search .fd-glyph { width: 13px; height: 13px; color: var(--muted); }
.fd-wl-search input[type="search"] { flex: 1; min-width: 0; padding: 1px 2px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fd-text-12-5); }
.fd-wl-search input::placeholder, .fd-wl-add-input::placeholder { color: var(--fd-placeholder); }
.fd-wl-chips { display: flex; gap: var(--fd-space-8); }
.fd-wl-chip { padding: var(--fd-space-6) var(--fd-space-13); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-quiet); font-size: 11.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.fd-wl-chip.is-selected { border-color: var(--fd-chip-dark); background: var(--fd-chip-dark); color: var(--fd-chip-dark-fg); }
/* the prototype's list scrolls on the browser's own scrollbar (15496 names none), so this one does too */
.fd-wl-scroll { flex: 1; min-height: var(--fd-wl-scroll-min); overflow-y: auto; }
.fd-wl-section-head { display: flex; align-items: center; margin-bottom: var(--fd-space-10); }
.fd-wl-section-title { flex: 1; font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
.fd-wl-section-title-solo { margin-bottom: var(--fd-space-10); }
.fd-wl-sync { display: flex; align-items: center; gap: var(--fd-space-7); padding: var(--fd-space-8) var(--fd-space-15); border: 0; border-radius: 9px; background: var(--fd-grad-cta); color: var(--accent-fg); font: inherit; font-size: 11.5px; font-weight: 600; }
.fd-wl-sync .fd-glyph { width: 12px; height: 12px; stroke-width: 2; }
.fd-wl-rows { display: flex; flex-direction: column; gap: var(--fd-space-7); margin: 0; padding: 0; list-style: none; }
.fd-wl-rows-requests { margin-bottom: var(--fd-space-18); }
.fd-wl-rows-listed { gap: var(--fd-space-6); }
.fd-wl-row { position: relative; display: flex; align-items: center; gap: var(--fd-space-11); padding: var(--fd-space-10) var(--fd-space-12); border: 1px solid var(--line); border-radius: 11px; }
.fd-wl-globe { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--fd-globe-tile); color: var(--fd-icon); }
.fd-wl-globe .fd-glyph { width: 16px; height: 16px; }
.fd-wl-globe-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); background: var(--fd-dot-warn); }
.fd-wl-globe-dot.tone-ok { background: var(--fd-signal-on); }
.fd-wl-globe-dot.tone-bad { background: var(--danger); }
.fd-wl-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fd-wl-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-13); font-weight: 600; color: var(--ink); }
.fd-wl-row-meta { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--muted); }
.fd-wl-mono { font-family: var(--font-mono); }
.fd-wl-action { flex: none; padding: var(--fd-space-7) var(--fd-space-14); border: 0; border-radius: 8px; font: inherit; font-size: 11.5px; font-weight: 600; }
.fd-wl-action.is-bad { background: var(--danger-soft); color: var(--danger); }
.fd-wl-action.is-accent { background: var(--accent-soft); color: var(--accent); }
/* ⋮ and × sit on a 16px text line in a padded block, as the prototype's do (15520 · 15559), which is what sets the
   glyph's height in the row */
.fd-wl-kebab, .fd-wl-revoke { display: block; flex: none; padding: var(--fd-space-4); border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fd-text-16); line-height: normal; cursor: pointer; }
.fd-wl-kebab .fd-glyph, .fd-wl-revoke .fd-glyph { display: inline-block; vertical-align: baseline; }
.fd-wl-kebab .fd-glyph { width: 14px; height: 14px; }
.fd-wl-revoke .fd-glyph { width: 12px; height: 12px; }
/* the disclosure hangs from the row at the foot of its 34px globe tile (15522: top 44 = the row's 10px inset + the tile),
   so it follows the row's inset under Compact */
.fd-wl-menu { position: absolute; top: calc(var(--fd-space-10) + 34px); right: var(--fd-space-8); z-index: 20; width: var(--fd-wl-menu-w); padding: var(--fd-space-6); border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: var(--fd-shadow-row-menu); }
.fd-wl-menu-row { display: flex; align-items: center; gap: var(--fd-space-9); width: 100%; padding: var(--fd-space-8) var(--fd-space-10); border: 0; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; text-align: left; }
.fd-wl-menu-row .fd-glyph { width: 13px; height: 13px; color: var(--ink-2); }
.fd-wl-menu-row.is-bad, .fd-wl-menu-row.is-bad .fd-glyph { color: var(--danger); }
.fd-wl-empty { margin-bottom: var(--fd-space-18); padding: var(--fd-space-10) var(--fd-space-2); font-size: 12px; color: var(--muted); }
.fd-wl-feeds { flex: none; font-size: 11.5px; color: var(--ink-2); }
.fd-wl-auto { flex: none; padding: var(--fd-space-3) var(--fd-space-10); border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); font-size: 10px; font-weight: 600; }
.fd-wl-confirm-inline { display: flex; align-items: center; flex: none; gap: var(--fd-space-6); }
.fd-wl-quiet { flex: none; padding: var(--fd-space-6) var(--fd-space-11); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.fd-wl-danger { flex: none; padding: var(--fd-space-6) var(--fd-space-11); border: 0; border-radius: 8px; background: var(--danger); color: var(--accent-fg); font: inherit; font-size: 11px; font-weight: 600; }
.fd-wl-remove { padding-inline: var(--fd-space-12); }
.fd-wl-remove:hover { border-color: var(--fd-bad-line); color: var(--danger); }
.fd-wl-foot { margin-top: var(--fd-space-10); font-size: 11px; line-height: 1.6; color: var(--muted); }
.fd-wl-foot-listed { margin-top: 0; }
.fd-wl-add { display: flex; flex: none; gap: var(--fd-space-8); margin-bottom: var(--fd-space-14); }
.fd-wl-add-input { flex: 1; min-width: 0; padding: var(--fd-space-10) var(--fd-space-13); border: 1px solid var(--line); border-radius: 9px; background: var(--fd-hover); color: var(--ink); font: inherit; font-size: var(--fd-text-12-5); }
.fd-wl-add-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.fd-wl-add-button { padding: var(--fd-space-10) var(--fd-space-20); border: 0; border-radius: 9px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: var(--accent-fg); font: inherit; font-size: 12px; font-weight: 600; }
.fd-wl-group { margin-bottom: var(--fd-space-16); }
.fd-wl-origin { margin-bottom: var(--fd-space-7); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.fd-wl-listed { padding: var(--fd-space-10) var(--fd-space-12); border: 1px solid var(--line); border-radius: 11px; }
.fd-wl-row-line { display: flex; align-items: center; gap: var(--fd-space-11); }
.fd-wl-confirm { margin-top: var(--fd-space-9); padding: var(--fd-space-10) var(--fd-space-12); border: 1px solid var(--fd-bad-line-soft); border-radius: 9px; background: var(--fd-bad-wash-soft); }
.fd-wl-confirm-text { margin-bottom: var(--fd-space-9); font-size: 11.5px; line-height: 1.6; color: var(--fd-bad-ink-soft); }
.fd-wl-confirm-actions { display: flex; gap: var(--fd-space-7); }
.fd-wl-confirm-actions .fd-wl-quiet, .fd-wl-confirm-actions .fd-wl-danger { padding: var(--fd-space-7) var(--fd-space-14); font-size: 11.5px; }
.fd-wl-sync[disabled], .fd-wl-action[disabled], .fd-wl-danger[disabled], .fd-wl-menu-row[disabled], .fd-wl-add-button[disabled] { opacity: .55; cursor: default; }

/* ---- conversions ("Conversions click-through", 2026-09-30; prototype viewConversions 2417-2546, add-conversion
 * 2548-2799) ----
 * The Conversions page and its task view (the console/conversions templates), drawn to the prototype at 1920 on the Feeds
 * screens' terms: the Feeds density ladder (--fd-space-N, --fd-text-N) for every spacing and type step that moves, the
 * --cv-* tokens for the widths and boxes of their own, calc(N * var(--u)) where the prototype writes against its unit
 * (tokens.css section 5). What stays literal is the same exempt class: type at or under the 12px floor, radii, 1px and
 * 1.5px rules, icon boxes (a tile, a swatch, a glyph) and the pictures — the preview's phone and the dialog's placeholder
 * phone. The structure the Feeds rules above already draw — the pane edge to edge, the font's own line box, the list
 * column, the right panel's frame and title, the ×, the search pill, the page's one primary and the 820px fold — is those
 * rules, which name these roots and classes too.
 *
 * A CTA's colours are the customer's: a template sets them as custom properties on the element that carries .cv-design,
 * and everything inside reads them; .cv-design declares what it reads before one is set. */
.cv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cv-design { --cv-left: var(--cv-default-bar); --cv-right: var(--cv-left); --cv-ink: var(--cv-default-ink); --cv-icon-ink: var(--cv-ink); }
.cv-icon { display: block; flex: none; width: 15px; height: 15px; }
.cv-glyph { display: block; flex: none; width: 16px; height: 16px; }
.cv-create .cv-glyph, .upl-upload .cv-glyph, .upl-empty .fd-configure .cv-glyph { width: 15px; height: 15px; }
.fd-search.cv-search { flex-basis: var(--cv-search-w); }

/* the bar (2442 · 2522): the CTA's two stops, its ink and its glyph in the icon's own colour; the console's two neutrals
   take its ink, and on dark paper the hue over the card (convNeutral · TH.tint, 25924 · 21104) */
.cv-bar { display: flex; align-items: center; gap: var(--fd-space-9); width: 100%; min-width: 0; padding: var(--fd-space-13) var(--fd-space-16); border-radius: 10px; background: linear-gradient(90deg, var(--cv-left), var(--cv-right)); color: var(--cv-ink); font-size: var(--fd-text-14); font-weight: 600; }
.cv-bar-card { box-shadow: var(--cv-shadow-bar); }
.cv-bar-icon { display: flex; flex-shrink: 0; color: var(--cv-icon-ink); }
.cv-bar-icon[hidden] { display: none; }
.cv-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-bar.is-neutral { background: light-dark(var(--cv-left), color-mix(in srgb, var(--cv-left) 18%, var(--surface))); color: var(--ink); }
.cv-bar.is-neutral .cv-bar-icon { color: var(--ink); }

/* the grid and a card (2438-2451): the preview well washed with the bar's first colour (convWashOf: 13%, 22% on dark
   paper), then the kind line and the name; the open card's edge is the accent at 2px */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cv-card-min), 1fr)); gap: var(--cv-grid-gap); align-content: start; margin: 0; padding: 0; list-style: none; }
.cv-grid > li { min-width: 0; }
.cv-card { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--fd-shadow-card); color: inherit; text-decoration: none; }
.cv-card.is-selected { border-width: 2px; border-color: var(--accent); }
.cv-card:hover { border-color: var(--ring); }
.cv-well { display: flex; align-items: center; min-height: var(--cv-well-h); padding: var(--fd-space-24) var(--fd-space-18); background: light-dark(color-mix(in srgb, var(--cv-left) 13%, transparent), color-mix(in srgb, var(--cv-left) 22%, transparent)); }
.cv-card-foot { display: block; padding: var(--fd-space-12) var(--fd-space-16); border-top: 1px solid var(--line); }
.cv-kind { display: block; font-size: 12px; color: var(--muted); }
.cv-name { display: block; margin-top: var(--fd-space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
/* an empty library (the React app's EmptyState words; the prototype has none): centred in the list column */
.cv-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fd-space-6); text-align: center; }
.cv-empty-title { font-size: var(--fd-text-20); font-weight: 600; color: var(--ink); }
.cv-empty-text { font-size: var(--fd-text-14); color: var(--ink-2); }

/* the right panel (2457-2544): the Feeds panel's frame and title, its own head and body insets */
.cv-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-9); padding: var(--fd-space-20) var(--fd-space-22) var(--fd-space-14); }
.cv-panel-head.is-ruled { border-bottom: 1px solid var(--line); }
.fd-close.cv-close-quiet { color: var(--ink-2); }
.cv-panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
/* Create Conversion (2463-2481) */
.cv-create-body { gap: var(--fd-space-14); padding: var(--fd-space-4) var(--fd-space-22) var(--fd-space-22); }
.cv-group, .cv-options { display: flex; flex-direction: column; gap: var(--fd-space-14); }
.cv-options { margin: 0; padding: 0; list-style: none; }
.cv-group-label { margin-top: var(--fd-space-4); font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
.cv-option { display: flex; align-items: center; gap: var(--fd-space-13); padding: var(--fd-space-15) var(--fd-space-16); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.cv-option:hover { border-color: var(--ring); background: var(--fd-hover); }
.cv-option-tile { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; }
.cv-option-tile .cv-icon { width: 17px; height: 17px; }
.cv-option-tile.tone-accent { background: var(--fd-accent-chip); color: var(--accent); }
.cv-option-tile.tone-ok { background: var(--cv-ok-tile); color: var(--ok); }
.cv-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cv-option-title { font-size: var(--fd-text-14-5); font-weight: 600; color: var(--ink); }
.cv-option-desc { margin-top: var(--fd-space-2); font-size: 12px; color: var(--ink-2); }
/* Conversion Details (2492-2524) */
.cv-details-body { gap: var(--fd-space-20); padding: var(--fd-space-20) var(--fd-space-22); }
.cv-fact { margin: 0; }
.cv-fact-pair { display: flex; gap: var(--fd-space-26); }
.cv-fact-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.cv-fact-value { margin: var(--fd-space-5) 0 0; font-size: var(--fd-text-14); color: var(--ink-body); }
.cv-fact-label-design { margin-bottom: var(--fd-space-9); }
.cv-fact-label-design + .cv-fact-value { margin-top: 0; }
.cv-fact-title { font-size: var(--fd-text-15); color: var(--ink); }
.cv-fact-text { line-height: 1.55; }
.cv-fact-text.is-placeholder { color: var(--muted); }
.cv-fact-destination { font-size: var(--fd-text-13-5); line-height: 1.5; color: var(--accent); word-break: break-all; }
.cv-fact-dynamic { font-size: var(--fd-text-13-5); line-height: 1.5; color: var(--ink-2); }
/* its footer (2528-2541): Delete and Edit Conversion, or Delete's question with Keep it and the inert Delete */
.cv-panel-foot { flex: none; padding: var(--fd-space-16) var(--fd-space-22); border-top: 1px solid var(--line); }
/* the row is a <form> where Delete's final step posts ("Conversions on content-v5", 2026-10-13): no margin of its own */
.cv-foot-actions { display: flex; gap: var(--fd-space-12); margin: 0; }
/* The outlined two (Delete, Keep it) carry a 1px edge and the filled two none, so in the row they stretch to the
   outlined one's height with their label on the same line from the top, as the prototype's blocks do (2530-2539). */
.cv-foot-button, .button.cv-foot-button { flex: 1; display: inline-flex; align-items: flex-start; justify-content: center; padding: var(--fd-space-11) 0; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; text-decoration: none; cursor: pointer; }
.button.primary.cv-foot-button { background: var(--grad-primary); }
.cv-delete { border: 1px solid var(--danger); color: var(--danger); }
.cv-delete:hover { background: var(--danger-soft); }
.cv-keep { border: 1px solid var(--line-2); color: var(--ink-quiet); }
.cv-delete-final { background: var(--danger); color: var(--accent-fg); }
.cv-delete-final[disabled] { opacity: .55; cursor: default; }
.cv-confirm-text { margin-bottom: var(--fd-space-11); font-size: var(--fd-text-13); line-height: 1.5; color: var(--ink-body); }

/* ---- the add/edit form (2548-2668) ---- */
.cv-form-main { display: flex; flex-direction: column; flex: 1.05; min-width: 0; overflow-y: auto; padding: var(--fd-space-30) var(--cv-form-pad-x) var(--fd-space-28); border-right: 1px solid var(--line); }
.cv-form { display: flex; flex-direction: column; gap: var(--fd-space-16); width: 100%; max-width: var(--cv-form-w); margin: 0 auto; }
.cv-form-heading { margin-bottom: var(--fd-space-4); font-size: var(--fd-text-17); font-weight: 600; color: var(--ink); }
/* a section (2556 · 2610): its header is a real button in a heading — the prototype's is a div, a bug not copied */
.cv-section { padding: var(--fd-space-18) var(--fd-space-20); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--cv-shadow-section); }
.cv-section-heading { margin: 0; font: inherit; }
.cv-section-head { display: flex; align-items: center; gap: var(--fd-space-13); width: 100%; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cv-section-tile { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--cv-ok-tile); color: var(--ok); }
.cv-section-tile .cv-glyph, .cv-section-tile .upl-glyph { width: 20px; height: 20px; }
.cv-section-title { font-size: var(--fd-text-15-5); font-weight: 600; color: var(--ink); }
.cv-section-body { display: flex; flex-direction: column; gap: var(--fd-space-16); margin-top: var(--fd-space-16); }
.cv-design-body { display: block; }
/* a field (2565-2599) */
.cv-label { display: block; margin-bottom: var(--fd-space-8); font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
.cv-label-quiet { font-size: var(--fd-text-12-5); font-weight: 400; color: var(--muted); }
.cv-input { width: 100%; padding: var(--fd-space-13) var(--fd-space-16); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fd-text-14); }
.cv-input-system { padding-top: var(--cv-system-pad-y); padding-bottom: var(--cv-system-pad-y); }
.cv-input::placeholder { color: var(--fd-placeholder); }
.cv-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cv-input[aria-invalid="true"] { border-color: var(--danger); }
/* the textarea stays inline in its field, as the prototype's does (2571), so the field keeps the line descent under it on
   the 16px strut of a block that names no size of its own — the prototype's spacing to the next field */
.cv-field-area { font-size: var(--fd-text-16); }
.cv-textarea { resize: vertical; }
.cv-dynamic { padding: var(--fd-space-14) var(--fd-space-16); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font-size: var(--fd-text-13); line-height: 1.6; color: var(--ink-quiet); }
.cv-dynamic-lead { font-weight: 600; color: var(--ink); }
/* a Fixed Document's file or its drop zone (2581-2591), both inert */
.cv-doc { display: flex; align-items: center; gap: var(--fd-space-12); padding: var(--fd-space-13) var(--fd-space-16); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.cv-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-14); color: var(--ink); }
.cv-doc-remove { flex: none; padding: 0; border: 0; background: transparent; color: var(--danger); font: inherit; font-size: var(--fd-text-13); font-weight: 500; }
.cv-doc-remove[disabled] { opacity: .55; cursor: default; }
.cv-drop { padding: var(--fd-space-26) var(--fd-space-18); border: 1.5px dashed var(--ring); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.cv-drop-title { font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
.cv-drop-hint { margin-top: var(--fd-space-5); font-size: 12px; color: var(--ink-2); }
/* Next, and Previous with the inert submit (2603-2636) */
.cv-actions { display: flex; justify-content: space-between; }
.cv-actions-end { justify-content: flex-end; }
.button.primary.cv-next, .button.primary.cv-submit { padding: var(--fd-space-12) var(--fd-space-44); border-radius: 10px; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; }
.button.primary.cv-submit { padding-inline: var(--fd-space-40); }
.cv-previous { padding: var(--fd-space-12) var(--fd-space-30); border: 1px solid var(--ring); border-radius: 10px; background: var(--surface); color: var(--accent); font: inherit; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; cursor: pointer; }
.cv-previous:hover { background: var(--accent-soft-2); }
/* the bar picker beside the button's text (2619-2629) */
.cv-design-row { display: flex; gap: var(--fd-space-14); }
.cv-swatch-button { display: flex; align-items: center; flex: none; gap: var(--fd-space-8); padding: var(--fd-space-8) var(--fd-space-12); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; }
.cv-swatch { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--cv-edge); }
.cv-swatch.is-chosen { background: linear-gradient(90deg, var(--cv-left), var(--cv-right)); }
.cv-swatch-icon { display: flex; color: var(--cv-icon-ink); }
.cv-swatch-icon[hidden] { display: none; }
.cv-swatch-chevron { width: 15px; height: 15px; color: var(--ink-2); }

/* the Preview (2642-2667): the phone and its bar are a picture of the customer's clip, at the prototype's geometry */
.cv-preview { flex: 1; min-width: 0; overflow-y: auto; padding: var(--fd-space-30) var(--fd-preview-pad-x); }
.cv-preview-heading { margin-bottom: var(--fd-space-18); font-size: var(--fd-text-16); font-weight: 600; color: var(--ink); }
.cv-preview-column { width: 280px; max-width: 100%; margin: 0 auto; }
.cv-phone { position: relative; height: 460px; overflow: hidden; border-radius: 16px; background: var(--cv-phone); }
.cv-phone-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 8px; background: linear-gradient(90deg, var(--cv-left), var(--cv-right)); color: var(--cv-ink); font-size: 13px; font-weight: 500; }
.cv-phone-bar-icon { display: flex; color: var(--cv-icon-ink); }
.cv-phone-bar-icon .cv-icon { width: 14px; height: 14px; }
.cv-phone-bar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-phone-bar-chevron { width: 13px; height: 13px; }
.cv-skeleton { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: var(--cv-skeleton); }
.cv-skeleton-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--cv-skeleton-ink); }
.cv-skeleton-line { flex: none; width: 80px; height: 8px; border-radius: 4px; background: var(--cv-skeleton-ink); }
.cv-skeleton-space { flex: 1; }
.cv-skeleton-chevron { width: 13px; height: 13px; color: var(--cv-skeleton-ink); }
.cv-phone-bar[hidden], .cv-skeleton[hidden], .cv-phone-bar-icon[hidden] { display: none; }
.cv-preview-text { margin-top: var(--fd-space-20); }
.cv-preview-title { overflow-wrap: anywhere; font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
.cv-preview-description { margin-top: var(--fd-space-8); overflow-wrap: anywhere; font-size: var(--fd-text-12-5); line-height: 1.6; color: var(--ink-2); }

/* ---- the Conversion Icon dialog (2671-2798): the house scrim, the prototype's box ---- */
.cv-dialog { width: var(--cv-dialog-w); max-width: 92vw; max-height: 86vh; overflow-y: auto; padding: var(--fd-space-22) var(--fd-space-26); border-radius: 16px; background: var(--surface); color: var(--ink); }
.cv-dialog-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--fd-space-14); border-bottom: 1px solid var(--line); }
.cv-dialog-title { font-size: var(--fd-text-17); font-weight: 600; color: var(--ink); }
.cv-dialog-close { border: 0; background: transparent; font-family: inherit; line-height: normal; cursor: pointer; }
.cv-dialog-body { display: flex; gap: var(--fd-space-30); padding-top: var(--fd-space-18); }
/* the two columns share the row by their flex (1.1 : 1) and by their content, as the prototype's do (2679 · 2726): the
   colour fields' inputs give the bar being made its room, so neither column clamps its minimum */
.cv-dialog-bars { flex: 1.1; }
.cv-dialog-heading { font-size: var(--fd-text-14-5); font-weight: 600; color: var(--ink); }
.cv-dialog-bars > .cv-dialog-heading, .cv-dialog-custom > .cv-dialog-heading { margin-bottom: var(--fd-space-12); }
/* My Bars and Custom Bars (2681-2724): a picked tile wears the accent's second step */
.cv-presets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fd-space-12); }
.cv-presets-mine { margin-bottom: var(--fd-space-20); }
.cv-preset { display: block; min-width: 0; padding: var(--fd-space-8); border: 1.5px solid var(--line); border-radius: 12px; background: transparent; font: inherit; cursor: pointer; }
.cv-preset.is-picked { border-color: var(--cv-picked); }
.cv-preset-bar { display: flex; align-items: center; gap: var(--fd-space-8); height: var(--cv-preset-h); padding: 0 var(--fd-space-12); border-radius: 7px; background: linear-gradient(90deg, var(--cv-left), var(--cv-right)); color: var(--cv-ink); font-size: var(--fd-text-13); font-weight: 500; }
.cv-preset-bar .cv-icon { width: 14px; height: 14px; color: var(--cv-icon-ink); }
.cv-preset-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dialog-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fd-space-12); }
/* Select Icon and its popover (2694-2712) */
.cv-picker { position: relative; }
.cv-picker-toggle { display: flex; align-items: center; gap: var(--fd-space-8); padding: var(--fd-space-8) var(--fd-space-14); border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink-quiet); font: inherit; font-size: var(--fd-text-13); line-height: normal; cursor: pointer; }
.cv-picker-toggle:hover { border-color: var(--ring); }
.cv-picker-chevron { width: 13px; height: 13px; color: var(--ink-2); }
.cv-picker-menu { position: absolute; top: 100%; right: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--fd-space-7); width: var(--cv-picker-w); margin-top: var(--fd-space-6); padding: var(--fd-space-10); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--cv-shadow-picker); }
.cv-picker-tile { display: flex; align-items: center; justify-content: center; height: var(--cv-picker-tile-h); padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-body); cursor: pointer; }
.cv-picker-tile:hover { border-color: var(--ring); }
.cv-picker-tile.is-current { border-color: var(--accent); background: var(--accent-soft); }
.cv-picker-tile .cv-icon { width: 16px; height: 16px; }
.cv-upload { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: var(--fd-space-7); margin-top: var(--fd-space-3); padding: var(--fd-space-10) var(--fd-space-12); border: 1.5px dashed var(--ring); border-radius: 9px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: var(--fd-text-12-5); font-weight: 500; line-height: normal; }
.cv-upload .cv-glyph { width: 13px; height: 13px; }
.cv-upload[disabled] { opacity: .55; cursor: default; }
/* the right column (2726-2797): the placeholder until a bar is picked, then the bar being made */
.cv-dialog-side { flex: 1; padding-left: var(--fd-space-30); border-left: 1px solid var(--line); }
.cv-dialog-empty { display: flex; flex-direction: column; align-items: center; padding-top: var(--fd-space-8); }
.cv-dialog-empty[hidden], .cv-dialog-custom[hidden] { display: none; }
.cv-dialog-phone { position: relative; display: block; width: 200px; height: 300px; margin-bottom: var(--fd-space-20); border-radius: 14px; background: var(--cv-dialog-well); }
.cv-skeleton-sm { left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; }
.cv-skeleton-sm .cv-skeleton-dot { width: 13px; height: 13px; }
.cv-skeleton-sm .cv-skeleton-line { width: 64px; height: 7px; }
.cv-skeleton-sm .cv-skeleton-chevron { width: 12px; height: 12px; }
.cv-dialog-empty-title { font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
.cv-dialog-empty-text { margin-top: var(--fd-space-6); font-size: var(--fd-text-13); text-align: center; color: var(--ink-2); }
.cv-dialog-well { margin-bottom: var(--fd-space-18); padding: var(--fd-space-20) var(--fd-space-18); border-radius: 12px; background: var(--cv-dialog-well); }
/* Show icon (2737-2742): the house label-and-checkbox switch in the Feeds module switch's 38 × 21 box, the primary fill when on */
.cv-show-icon { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fd-space-16); cursor: pointer; }
.cv-show-icon-label { font-size: var(--fd-text-13-5); color: var(--ink-body); }
.switch.cv-switch { width: var(--fd-mswitch-w); height: var(--fd-mswitch-h); }
.cv-switch .switch-track { background: var(--cv-edge); }
.cv-switch input:checked + .switch-track { background: var(--grad-primary); }
/* the knob is centred in the track's height, and travels the Feeds module switch's own run when on (2740: left 3 → 19) */
.cv-switch .switch-track::after { top: calc((var(--fd-mswitch-h) - var(--cv-switch-knob)) / 2); left: calc((var(--fd-mswitch-h) - var(--cv-switch-knob)) / 2); width: var(--cv-switch-knob); height: var(--cv-switch-knob); background: var(--cv-knob); box-shadow: none; }
.cv-switch input:checked + .switch-track::after { transform: translateX(var(--fd-mswitch-on)); }
/* the four colours (2743-2780) */
.cv-colors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fd-space-14); }
.cv-color-label { display: block; margin-bottom: var(--fd-space-7); font-size: var(--fd-text-12-5); font-weight: 600; color: var(--ink); }
.cv-color-box { display: flex; align-items: center; gap: var(--fd-space-10); padding: var(--fd-space-9) var(--fd-space-11); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.cv-color-box:has(.cv-color-text:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cv-color-box:has(.cv-color-text[aria-invalid="true"]) { border-color: var(--danger); }
/* the hex keeps the browser's own inset, as the prototype's does (2748 names none): that inset is part of the width the
   field asks for, and so of how the dialog's two columns share the row */
.cv-color-text { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fd-text-13); text-transform: uppercase; }
.cv-color-swatch { flex: none; width: var(--fd-control-26); height: var(--fd-control-26); padding: 0; border: 1px solid var(--line-2); border-radius: 7px; background: none; cursor: pointer; }
.cv-color .field-error { margin-top: var(--fd-space-6); }
.cv-note { margin-top: var(--fd-space-14); font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.cv-note-lead { font-weight: 600; color: var(--ink); }
.button.primary.cv-use { justify-content: center; width: 100%; margin-top: var(--fd-space-18); padding: var(--fd-space-13) 0; border-radius: 10px; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; }

/* every control on these screens shows where the keyboard is */
.cv-card:focus-visible, .cv-option:focus-visible, .cv-foot-button:focus-visible, .cv-section-head:focus-visible, .cv-previous:focus-visible,
.cv-swatch-button:focus-visible, .cv-preset:focus-visible, .cv-picker-toggle:focus-visible, .cv-picker-tile:focus-visible,
.cv-color-swatch:focus-visible, .cv-dialog-close:focus-visible, .cv-use:focus-visible, .cv-create:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- uploads ("Uploads click-through", 2026-09-30; prototype NAV VIEW: UPLOADS 7364-7818, TASK: SINGLE ASSET UPLOAD
 * 8064-8354) ----
 * The Uploads queue, its panels and dialogs, and Single Asset Upload (the console/uploads templates), drawn to the
 * prototype at 1920 on the Feeds and Conversions screens' terms: the Feeds density ladder (--fd-space-N, --fd-text-N) for
 * every spacing and type step that moves, the --upl-* tokens for the widths and boxes of their own, calc(N * var(--u))
 * where the prototype writes against its unit (tokens.css section 5). What stays literal is the same exempt class: type
 * at or under the 12px floor, radii, 1px and 1.5px rules, icon boxes (a tile, a swatch, a glyph) and the pictures — a
 * tile and the clip box with the tick box and the play disc drawn on them, the preview's phone with its skeletons, and
 * Manage Category's swatches. The structure the Feeds and Conversions rules above already draw — the pane edge to edge,
 * the font's own line box, the list column, the right panel's frame, head and title, the ×, the search pill, the page's
 * one primary, the form's sections, fields, Next and Previous, the preview's column and the 820px fold — is those rules,
 * which name these roots and classes too. */
.upl-glyph { display: block; flex: none; width: 16px; height: 16px; }

/* the top bar's pile pill (1712-1716): chrome, so --dc-chrome; it is the one top-bar action that sets the bar's height,
   as the prototype's does (the queue's bar is 68px there, 14 + 42 + 12) */
.stage-actions:has(> .upl-tabs) { height: auto; }
.upl-tabs { display: flex; align-items: center; gap: var(--upl-pill-gap); margin-right: var(--upl-pill-end); padding: var(--upl-pill-inset); border: 1px solid var(--upl-pill-line); border-radius: var(--radius-pill); background: var(--upl-pill-bg); }
.upl-tab { padding: var(--upl-tab-pad-y) var(--upl-tab-pad-x); border-radius: var(--radius-pill); color: var(--upl-pill-ink); font-size: var(--upl-tab-text); font-weight: 500; line-height: normal; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.upl-tab:hover { color: var(--chrome-fg); }
.upl-tab.is-current { background: var(--grad-primary); box-shadow: var(--upl-pill-glow); color: var(--accent-fg); font-weight: 600; }
.upl-tab:focus-visible { outline: 2px solid var(--chrome-ring); outline-offset: 2px; }

/* the toolbar (7368-7415): the search is the Feeds pill; Reported's chips, the rule, Select and Upload on the right */
.upl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-14); margin-bottom: var(--fd-space-24); }
.upl-toolbar-actions { display: flex; align-items: center; flex: none; gap: var(--fd-space-12); }
.upl-filters { display: flex; align-items: center; gap: var(--fd-space-6); }
.upl-chip { padding: var(--fd-space-6) var(--fd-space-13); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-quiet); font-size: 12px; font-weight: 500; line-height: normal; text-decoration: none; white-space: nowrap; }
.upl-chip.is-on { border-color: var(--ring); background: var(--fd-accent-chip); color: var(--fd-accent-deep); }
.upl-toolbar-rule { width: 1px; height: var(--fd-space-20); margin: 0 var(--fd-space-2); background: var(--line); }
.upl-select { display: flex; align-items: center; flex: none; gap: var(--fd-space-8); padding: var(--fd-space-9) var(--fd-space-14); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-body); font-size: var(--fd-text-12-5); font-weight: 500; line-height: normal; text-decoration: none; white-space: nowrap; }
.upl-select:hover { border-color: var(--ring); }
.upl-select.is-on { border-color: var(--ring); background: var(--accent-soft); color: var(--fd-accent-deep); }
.upl-select .upl-glyph { width: 14px; height: 14px; }

/* the grid (7442-7530): auto-fill columns of 185u, 300u tiles, 16u apart */
.upl-grid-region { display: flex; flex-direction: column; flex: 1; }
.upl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--upl-tile-min), 1fr)); gap: var(--cv-grid-gap); margin: 0; padding: 0; list-style: none; }
.upl-grid > li { min-width: 0; }
.upl-tile { position: relative; display: block; height: var(--upl-tile-h); overflow: hidden; border-radius: 12px; background: var(--upl-tile-ground); box-shadow: var(--upl-shadow-tile); color: var(--upl-on-picture); text-decoration: none; transition: box-shadow 160ms ease, transform 160ms ease; }
.upl-tile.is-current { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--upl-ring), var(--upl-ring-glow); transform: translateY(-3px); }
.upl-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.upl-scrim { position: absolute; inset: 0; background: var(--upl-scrim); }
.upl-tile-title { position: absolute; left: var(--fd-space-13); right: var(--fd-space-13); bottom: var(--fd-space-12); font-size: var(--fd-text-13); font-weight: 600; line-height: 1.45; text-shadow: var(--upl-picture-shadow); }
.upl-tick { position: absolute; top: var(--fd-space-9); right: var(--fd-space-9); display: grid; place-items: center; width: 21px; height: 21px; border: 2px solid var(--surface); border-radius: 6px; background: var(--upl-tick-off); color: var(--upl-on-picture); }
.upl-tick.is-checked { background: var(--gradient-badge); }
.upl-tick .upl-glyph { width: 12px; height: 12px; }
/* the empty queue (7427-7441), and a pile with nothing in it in the same words' place */
.upl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: var(--fd-space-8); text-align: center; }
.upl-empty-disc { display: grid; place-items: center; width: 150px; height: 150px; margin-bottom: var(--fd-space-16); border-radius: 50%; background: var(--upl-empty-disc); color: var(--upl-empty-glyph); }
.upl-empty-disc .upl-glyph { width: 66px; height: 66px; }
.upl-empty-title { font-size: var(--fd-text-19); font-weight: 600; color: var(--ink); }
.upl-empty-text { max-width: var(--upl-empty-w); font-size: var(--fd-text-14); line-height: 1.6; color: var(--ink-2); }
.upl-empty .button.primary.fd-configure-lg { margin-top: var(--fd-space-16); }
.upl-inline-form { display: inline; }
/* the pager (7517-7528) */
.upl-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--fd-space-7); margin-top: var(--fd-space-20); }
.upl-page { display: grid; place-items: center; min-width: var(--upl-control-32); height: var(--upl-control-32); padding: 0 var(--fd-space-4); border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--ink-quiet); font-size: var(--fd-text-13); text-decoration: none; }
.upl-page.is-current { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
.upl-page-step { border-radius: 50%; color: var(--ink-2); }
.upl-page-step .upl-glyph { width: 13px; height: 13px; }

/* the right panel (7532-7780): the Feeds panel's frame, the Conversions panel's head, its own body */
.upl-panel-heading { display: flex; align-items: center; gap: var(--fd-space-12); min-width: 0; }
.upl-walk { display: flex; align-items: center; gap: var(--fd-space-6); }
.upl-walk-step { display: block; border-radius: 50%; color: var(--ink-2); }
.upl-walk-step .upl-glyph-disc { stroke: var(--upl-disc); }
.upl-walk-label { font-size: var(--fd-text-13); color: var(--ink-2); }
.upl-panel-body { display: flex; flex-direction: column; flex: 1; gap: var(--fd-space-16); min-height: 0; overflow-y: auto; padding: var(--fd-space-4) var(--fd-space-22) 0; }
/* the Upload panel's cards (7550-7591) */
.upl-options { display: flex; flex-direction: column; gap: var(--fd-space-16); margin: 0; padding: 0; list-style: none; }
.upl-option { display: flex; align-items: center; gap: var(--fd-space-14); padding: var(--fd-space-16); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
a.upl-option:hover { border-color: var(--ring); background: var(--fd-hover); }
.upl-option-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; }
.upl-option-tile .upl-glyph { width: 20px; height: 20px; }
.upl-option-tile .fd-glyph { width: 22px; height: 22px; }
.upl-option-tile.tone-accent { background: var(--fd-accent-chip); color: var(--accent); }
.upl-option-tile.tone-ok { background: var(--cv-ok-tile); color: var(--ok); }
.upl-option-tile.tone-bad { background: var(--upl-bad-bg); color: var(--upl-bad-glyph); }
.upl-option-tile.tone-workspace { background: var(--fd-flavor-soft); color: var(--flavor); }
.upl-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.upl-option-title { display: flex; align-items: center; gap: var(--fd-space-8); font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
.upl-option-desc { margin-top: var(--fd-space-2); font-size: var(--fd-text-12-5); color: var(--ink-2); }
.upl-soon { padding: var(--fd-space-2) var(--fd-space-9); border-radius: var(--radius-pill); background: var(--fd-accent-chip); color: var(--accent); font-size: 11px; font-weight: 400; }
.upl-services { margin-top: var(--fd-space-6); font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); }
/* the icon bar (7596-7601) */
.upl-iconbar { display: flex; flex: none; gap: var(--fd-space-12); }
.upl-icon { display: grid; place-items: center; flex: none; width: var(--upl-control-34); height: var(--upl-control-34); padding: 0; border: 0; border-radius: 9px; font: inherit; }
.upl-icon-edit { background: var(--upl-warn-bg); color: var(--upl-warn-ink); }
.upl-icon-sound { background: var(--surface-2); color: var(--fd-icon); }
.upl-icon-bin { background: var(--upl-bad-bg); color: var(--upl-bad-glyph); }
/* the clip box (7671-7683): a picture — 38vh tall at the clip's ratio when portrait, full width when landscape */
.upl-clip { display: flex; flex: none; justify-content: center; width: 100%; }
/* --upl-ratio is the clip's own, set by the template; the default is the prototype's 1080×1920 (dmAspect) */
.upl-vbox { --upl-ratio: 1080 / 1920; position: relative; width: 100%; max-width: 100%; aspect-ratio: var(--upl-ratio); overflow: hidden; border-radius: 12px; background: var(--upl-tile-ground); }
.upl-vbox.is-portrait { width: auto; height: 38vh; }
.upl-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--upl-play-line); border-radius: 50%; background: var(--upl-play-disc); box-shadow: var(--upl-play-shadow); color: var(--upl-on-picture); transform: translate(-50%, -50%); }
.upl-play .upl-glyph { width: 19px; height: 19px; }
/* the clip's words (7684-7690) */
.upl-facts-title { font-size: var(--fd-text-15); font-weight: 600; line-height: 1.45; color: var(--ink); }
.upl-facts-meta { margin-top: var(--fd-space-7); font-size: 12px; color: var(--muted); }
.upl-facts-text { margin-top: var(--fd-space-8); font-size: var(--fd-text-12-5); line-height: 1.6; color: var(--ink-2); }
/* Properties (7711-7722): the CTA in its own design, drawn as the prototype's pill */
.upl-props { padding-top: var(--fd-space-14); border-top: 1px solid var(--line); }
.upl-props-head { display: flex; align-items: center; justify-content: space-between; }
.upl-props-label { font-size: var(--fd-text-13); font-weight: 400; color: var(--ink-2); }
.upl-props-globe { width: 15px; height: 15px; color: var(--fd-icon); }
.upl-props-heading { margin-top: var(--fd-space-8); font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
.cv-bar.upl-cta { display: inline-flex; gap: var(--fd-space-8); width: auto; max-width: 100%; margin-top: var(--fd-space-8); padding: var(--fd-space-8) var(--fd-space-18); border-radius: var(--radius-pill); font-size: var(--fd-text-13); font-weight: 400; }
.upl-cta .cv-icon { width: 14px; height: 14px; }
.upl-props-url { margin-top: var(--fd-space-7); font-family: var(--font-mono); font-size: 11px; color: var(--muted); word-break: break-all; }
/* the clip's tags by category (7723-7732), and the Preview's (8318-8346) */
.upl-tags-label { margin-bottom: var(--fd-space-8); font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
.upl-tag-list { display: flex; flex-wrap: wrap; gap: var(--fd-space-8); margin: 0; padding: 0; list-style: none; }
.upl-tag { padding: var(--fd-space-6) var(--fd-space-15); border-radius: var(--radius-pill); background: var(--upl-tag); color: var(--ink-body); font-size: var(--fd-text-12-5); }
.upl-tag-sm { padding: var(--fd-space-5) var(--fd-space-13); font-size: 12px; }
.upl-tag[hidden], .upl-preview-group[hidden] { display: none; }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="yellow"] { --upl-tag: var(--upl-tag-yellow); }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="teal"] { --upl-tag: var(--upl-tag-teal); }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="blue"] { --upl-tag: var(--upl-tag-blue); }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="peach"] { --upl-tag: var(--upl-tag-peach); }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="pink"] { --upl-tag: var(--upl-tag-pink); }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="green"] { --upl-tag: var(--upl-tag-green); }
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .upl-mgr-colour, .as-tag)[data-tone="lavender"] { --upl-tag: var(--upl-tag-lavender); }
/* a tag in a colour of its own — content v5's stored colour when it is none of the seven ("Tags on content-v5",
   2026-10-13): the template sets it inline as --upl-tag-own (TagChip.style), which wins over the default declared here
   (the .cv-design pattern), and dark paper takes it mixed into the surface, as a neutral CTA bar does (.cv-bar.is-neutral) */
:is(.upl-tag, .upl-tagchip, .upl-mgr-row, .as-tag)[data-tone="own"] { --upl-tag-own: var(--pastel-yellow); --upl-tag: light-dark(var(--upl-tag-own), color-mix(in srgb, var(--upl-tag-own) 22%, var(--surface))); }
.upl-spacer { flex: 1; }
/* the Reported and Revision cards (7734-7760) */
.upl-card { flex: none; padding: var(--fd-space-13) var(--fd-space-15); border: 1px solid; border-radius: 12px; }
.upl-card-report { border-color: var(--upl-bad-line); background: var(--upl-bad-wash); }
.upl-card-revision { border-color: var(--upl-warn-line); background: var(--upl-warn-bg); }
.upl-card-head { display: flex; align-items: center; gap: var(--fd-space-8); }
.upl-card-heading { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--danger); }
.upl-card-revision .upl-card-heading { margin-bottom: var(--fd-space-8); color: var(--upl-warn-ink); }
.upl-card-chip { padding: var(--fd-space-3) var(--fd-space-9); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-body); font-size: 10.5px; font-weight: 600; }
.upl-card-reason { margin-top: var(--fd-space-8); font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.upl-card-other { margin-top: var(--fd-space-3); font-size: var(--fd-text-12-5); color: var(--ink-body); }
.upl-card-meta { margin-top: var(--fd-space-7); font-size: 11px; color: var(--muted); }
.upl-card-reasons { display: flex; flex-wrap: wrap; gap: var(--fd-space-6); margin: 0; padding: 0; list-style: none; }
.upl-card-reason-chip { padding: var(--fd-space-4) var(--fd-space-11); border: 1px solid var(--upl-warn-line); border-radius: var(--radius-pill); background: var(--surface); color: var(--upl-warn-ink); font-size: 11.5px; font-weight: 500; }
.upl-card-note { margin-top: var(--fd-space-9); font-size: var(--fd-text-12-5); line-height: 1.6; color: var(--ink-body); }
/* the sticky footer (7767-7779): Request revision, then the pile's actions — the affirmative one the wider (modBtn 23673-23683) */
.upl-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex: none; gap: var(--fd-space-12); margin-top: auto; padding: var(--fd-space-12) 0 var(--fd-space-22); border-top: 1px solid var(--line); background: var(--surface); }
.upl-revise { display: grid; place-items: center; flex: 0 0 var(--upl-control-46); width: var(--upl-control-46); height: var(--upl-control-46); border: 1px solid var(--upl-warn-line); border-radius: 10px; background: var(--upl-warn-bg); color: var(--upl-warn-ink); }
.upl-revise .upl-glyph { width: 19px; height: 19px; }
.upl-act { display: flex; align-items: center; justify-content: center; flex: 1; padding: var(--fd-space-12); border: 0; border-radius: 10px; font: inherit; font-size: var(--fd-text-14); font-weight: 500; line-height: normal; text-align: center; text-decoration: none; cursor: pointer; }
.upl-act.is-wide { flex: 1.6; }
.upl-act-approve { background: var(--upl-approve); color: var(--accent-fg); }
.upl-act-primary { background: var(--grad-primary); color: var(--accent-fg); }
.upl-act-outline { border: 1px solid var(--ring); background: var(--surface); color: var(--accent); }
.upl-act-danger { background: var(--danger); color: var(--accent-fg); }
.upl-act-quiet { border: 1px solid var(--upl-bad-line); background: var(--surface); color: var(--fd-bad-ink); }

/* the dialogs over the review panel (7781-7815): the revision's scrim blurs the page, the confirm's does not */
.modal.upl-scrim-dialog { z-index: 50; padding: var(--fd-space-24); background: var(--upl-scrim-dialog); backdrop-filter: blur(6px); }
.modal.upl-scrim-confirm { z-index: 50; padding: var(--fd-space-24); background: var(--upl-scrim-confirm); }
/* the box keeps the prototype's 16px line (it names no size, 7784): the note is inline, as the prototype's is, and the line
   descent under it is part of the gap to the buttons */
.upl-dialog { width: var(--upl-revise-w); max-width: 92vw; padding: var(--fd-space-20) var(--fd-space-22); border-radius: 14px; font-size: var(--fd-text-16); background: var(--surface); box-shadow: var(--upl-shadow-dialog); color: var(--ink); }
.upl-dialog-confirm { width: var(--upl-confirm-w); }
.upl-dialog-title { font-size: var(--fd-text-15-5); font-weight: 600; color: var(--ink); }
.upl-dialog-confirm .upl-dialog-title { font-size: var(--fd-text-15); }
.upl-dialog-line { margin-top: var(--fd-space-5); font-size: var(--fd-text-12-5); line-height: 1.6; color: var(--upl-line-ink); }
.upl-dialog-confirm .upl-dialog-line { margin-top: var(--fd-space-6); }
.upl-reasons { display: flex; flex-wrap: wrap; gap: var(--fd-space-7); margin-top: var(--fd-space-14); }
.upl-reason { padding: var(--fd-space-6) var(--fd-space-13); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-quiet); font: inherit; font-size: 12px; font-weight: 500; line-height: normal; cursor: pointer; }
.upl-reason.is-on { border-color: var(--ring); background: var(--fd-accent-chip); color: var(--fd-accent-deep); }
.upl-note { width: 100%; margin-top: var(--fd-space-13); padding: var(--fd-space-11) var(--fd-space-13); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fd-text-13); resize: vertical; }
.upl-note::placeholder { color: var(--fd-placeholder); }
.upl-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.upl-dialog-actions { display: flex; justify-content: flex-end; gap: var(--fd-space-9); margin-top: var(--fd-space-15); }
.upl-dialog-cancel, .upl-dialog-send, .upl-dialog-danger { padding: var(--fd-space-10) var(--fd-space-22); border: 0; border-radius: 9px; font: inherit; font-size: var(--fd-text-13); font-weight: 500; line-height: normal; text-decoration: none; }
.upl-dialog-cancel { padding-inline: var(--fd-space-20); background: var(--upl-cancel-bg); color: var(--ink-body); cursor: pointer; }
.upl-dialog-send { background: var(--upl-dim); color: var(--accent-fg); }
.upl-dialog-danger { background: var(--danger); color: var(--accent-fg); }
/* Inert controls look inert, the house way (Account Settings, 2026-09-22; the Feeds and Conversions screens' own): every
   decision here is inert, so its button is dimmed — Send back keeps the prototype's two states under it, the quiet
   ground until a reason or a note, then the primary fill dimmed, as Feed Settings' Save Changes does */
.upl-icon-sound[disabled], .upl-act[disabled], .upl-dialog-danger[disabled], .upl-mgr-remove[disabled] { opacity: .55; cursor: default; }
.upl-dialog-send[disabled] { cursor: default; }

/* ---- uploads on content v5 ("Uploads on content-v5", 2026-10-07) ---- */
/* A clip not ready to play says so where its poster would be: centred on a tile's dark ground, top-left in the panel's
   box (the play disc holds the centre there); a failed one in the danger ink. */
.upl-tile-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: var(--fd-space-5) var(--fd-space-12); border: 1px solid var(--upl-pill-line); border-radius: var(--radius-pill); background: var(--upl-play-disc); color: var(--upl-on-picture); font-size: var(--fd-text-12-5); font-weight: 500; line-height: normal; white-space: nowrap; }
.upl-tile-status.is-failed { border-color: var(--upl-failed-ink); color: var(--upl-failed-ink); }
.upl-vbox .upl-tile-status { left: var(--fd-space-12); top: var(--fd-space-12); transform: none; }
/* where processing stands, under the facts, in the warn ink of a thing still to happen */
.upl-facts-processing { margin-top: var(--fd-space-8); font-size: var(--fd-text-12-5); font-weight: 500; color: var(--upl-warn-ink); }
/* the CTA's own name above its button */
.upl-props-name { margin-top: var(--fd-space-6); font-size: var(--fd-text-13); color: var(--ink-2); }
/* a footer decision that posts: the form takes the button's place in the row, the button fills it */
.upl-act-form { display: flex; flex: 1; min-width: 0; margin: 0; }
.upl-act-form.is-wide { flex: 1.6; }
.upl-act-form > .upl-act { flex: 1; }
.upl-act-form > .upl-act:not([disabled]) { cursor: pointer; }
/* the dialogs' forms add no box of their own; Send back, posting, wears the prototype's ready fill */
.upl-dialog-form { display: block; margin: 0; }
.upl-dialog-form > .notice { margin-top: var(--fd-space-13); }
.upl-dialog-form .field-error { margin-top: var(--fd-space-6); }
.upl-dialog-form .upl-note[aria-invalid="true"] { border-color: var(--danger); }
.upl-dialog-send:not([disabled]) { cursor: pointer; }
.upl-dialog-send.is-ready:not([disabled]) { background: var(--grad-primary); }
.upl-dialog-danger:not([disabled]) { cursor: pointer; }
.upl-dialog-send[disabled].is-ready { opacity: .55; background: var(--grad-primary); }

/* ---- Single Asset Upload (8064-8354): the Conversions form's frame, sections, fields and actions ---- */
/* the drop zone (8088-8093) and the attached file (8094-8101) */
/* a visually hidden input is placed against its own label (position: relative), so it never overflows a scroller */
.upl-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--fd-space-12); padding: var(--fd-space-22); border: 1.5px dashed var(--ring); border-radius: 12px; background: var(--upl-drop-bg); cursor: pointer; }
.upl-drop.is-over, .upl-drop:hover { background: var(--accent-soft-2); }
.upl-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.upl-drop .upl-glyph { width: 26px; height: 26px; }
.upl-glyph-drop-ground { fill: var(--upl-drop-art); opacity: .7; }
.upl-glyph-drop-ink { fill: var(--upl-drop-ink); }
.upl-glyph-drop-line { stroke: var(--upl-drop-ink); }
.upl-drop-text { font-size: var(--fd-text-14); color: var(--ink-quiet); }
.upl-drop-browse { color: var(--accent); font-weight: 600; }
.upl-file { display: flex; align-items: center; gap: var(--fd-space-14); }
.upl-file-thumb { position: relative; flex: none; width: 46px; height: 60px; overflow: hidden; border-radius: 8px; background: var(--upl-phone-file); }
.upl-file-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.upl-file-meta { font-size: var(--fd-text-12-5); color: var(--ink-2); overflow-wrap: anywhere; }
.upl-file-title { margin-top: var(--fd-space-2); font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.upl-file-remove { display: grid; place-items: center; flex: none; width: var(--upl-control-24); height: var(--upl-control-24); padding: 0; border: 0; border-radius: 50%; background: var(--upl-bad-glyph); color: var(--accent-fg); cursor: pointer; }
.upl-file-remove .upl-glyph { width: 11px; height: 11px; }
.cv-section-body > .upl-file-error { margin-top: calc(-1 * var(--fd-space-8)); }
/* Tags (8127-8158): the helper, and a chip row per category that scrolls sideways with a fade at its end */
.cv-section-body.upl-tags-body { gap: var(--fd-space-14); }
.upl-tags-help { font-size: 12px; line-height: 1.5; color: var(--muted); }
.upl-tags-count { font-weight: 500; color: var(--ink-quiet); }
.upl-tagrow { min-width: 0; }
.upl-tagrow-head { display: flex; align-items: center; gap: var(--fd-space-5); margin-bottom: var(--fd-space-8); }
.upl-tagrow-label { margin: 0; font-size: 10px; line-height: 1.6; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.upl-tagrow-manage { display: grid; place-items: center; width: var(--upl-control-18); height: var(--upl-control-18); padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
.upl-tagrow-manage:hover { background: var(--hover-2); }
.upl-tagrow-manage .upl-glyph { width: 12px; height: 12px; }
.upl-tagrow-frame { position: relative; min-width: 0; }
.upl-tagrow-chips { display: flex; gap: var(--fd-space-6); overflow-x: auto; padding-bottom: var(--fd-space-6); scrollbar-width: thin; }
.upl-tagrow-edge { position: absolute; top: 0; right: 0; bottom: var(--fd-space-6); display: flex; align-items: center; justify-content: flex-end; width: var(--upl-fade-w); background: var(--upl-fade); color: var(--muted); pointer-events: none; }
.upl-tagrow-edge .upl-glyph { width: 13px; height: 13px; }
.upl-tagrow-frame.is-at-end .upl-tagrow-edge { display: none; }
.upl-tagchip { position: relative; display: flex; align-items: center; flex: none; gap: var(--fd-space-6); padding: var(--fd-space-6) var(--fd-space-13); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-quiet); font-size: 12px; font-weight: 500; line-height: normal; white-space: nowrap; cursor: pointer; }
.upl-tagchip:has(:checked) { border-color: var(--upl-tag-edge); background: var(--upl-tag); color: var(--ink); }
.upl-tagchip:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.upl-tagchip-check { display: none; width: 10px; height: 10px; margin-left: -2px; color: var(--ink); }
.upl-tagchip-dot { flex: none; width: 7px; height: 7px; margin-left: -2px; border-radius: 50%; background: var(--upl-tag); }
.upl-tagchip:has(:checked) .upl-tagchip-check { display: block; }
.upl-tagchip:has(:checked) .upl-tagchip-dot { display: none; }
/* Conversion (8225-8261): the picker's face and menu, a CTA drawn as the chip the prototype draws, the link card */
.upl-cta { position: relative; }
.upl-cta-picker { position: relative; }
.upl-cta-face { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--fd-space-11) var(--fd-space-16); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.upl-cta-face-text { display: flex; flex: 1; min-width: 0; margin-right: var(--fd-space-12); }
.upl-cta-select { font-size: var(--fd-text-14); color: var(--muted); }
.upl-cta-face-bar { display: flex; flex: 1; min-width: 0; }
.upl-cta-select[hidden], .upl-cta-face-bar[hidden], .upl-cta-card[hidden], .upl-cta-destination[hidden], .upl-phone-cta[hidden], .upl-phone-skeleton[hidden], .upl-preview-chips[hidden] { display: none; }
.upl-cta-chevron { width: 16px; height: 16px; color: var(--ink-2); }
.cv-bar.upl-cta-chip { justify-content: center; flex: 1; padding: var(--fd-space-9) var(--fd-space-12); border-radius: 8px; font-size: var(--fd-text-13); font-weight: 500; }
.upl-cta-chip .cv-icon { width: 14px; height: 14px; }
/* the menu lists the whole library, where the prototype's has four rows, so it scrolls past its own height rather than
   running down the page (console-authored) */
.upl-cta-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; max-height: var(--upl-cta-menu-h); overflow-y: auto; margin-top: var(--fd-space-6); padding: var(--fd-space-10); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--fd-shadow-list); }
.upl-cta-none, .upl-cta-option { position: relative; display: flex; align-items: center; padding: var(--fd-space-10) var(--fd-space-12); border-radius: 9px; cursor: pointer; }
.upl-cta-none { font-size: var(--fd-text-14); font-weight: 500; color: var(--ink); }
.upl-cta-option { gap: var(--fd-space-14); border-top: 1px solid var(--divider); }
/* only the pointer lights a row, as the prototype's does (8238 · 8241 style-hover); the chosen CTA shows on the face */
.upl-cta-none:hover, .upl-cta-option:hover { background: var(--accent-soft-2); }
.upl-cta-none:has(:focus-visible), .upl-cta-option:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.upl-cta-option-text { display: flex; flex-direction: column; flex: none; width: var(--upl-cta-kind-w); min-width: 0; }
.upl-cta-option-kind { font-size: 11.5px; color: var(--muted); }
.upl-cta-option-name { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-14); font-weight: 500; color: var(--ink); }
.upl-cta-card { display: flex; gap: var(--fd-space-13); margin-top: var(--fd-space-14); padding: var(--fd-space-13) var(--fd-space-15); border: 1px solid var(--line); border-radius: 12px; }
.upl-cta-card-thumb { flex: none; width: 56px; height: 56px; border-radius: 9px; background: var(--upl-link-thumb); }
.upl-cta-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.upl-cta-card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.upl-cta-card-desc { margin-top: var(--fd-space-3); font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.upl-cta-card-url { margin-top: var(--fd-space-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--accent); }
.upl-cta-destination { margin-top: var(--fd-space-14); }
.upl-cta-unavailable { font-size: var(--fd-text-13); line-height: 1.5; color: var(--ink-2); }

/* ---- the upload form on content v5 ("Upload form on content-v5", 2026-10-08) ---- */
/* The live form switches its sections, its file area and its progress in the page with `hidden`; the form's own display
   rules would otherwise draw what is hidden. */
.cv-task [hidden] { display: none !important; }
/* the refusal no field explains, above the sections */
.upl-form-notice { margin-bottom: var(--fd-space-14); }
/* an edited clip's file: Choose a new video stands where the sample form's Remove stands */
.upl-file-replace { flex: none; padding: var(--fd-space-7) var(--fd-space-14); font-size: var(--fd-text-13); }
.upl-file-remove:disabled, .upl-file-replace:disabled { opacity: .55; cursor: default; }
/* Manage Category is inert here */
/* a tag of the person's own: the field and Add on one row, the new chips under it in the rows' own chip */
.upl-newtag { margin-top: var(--fd-space-16); }
.upl-newtag-row { display: flex; gap: var(--fd-space-8); }
.upl-newtag-row .cv-input { flex: 1; min-width: 0; }
.upl-newtag-add { flex: none; padding: var(--fd-space-8) var(--fd-space-16); font-size: var(--fd-text-13); }
.upl-newtags { margin-top: var(--fd-space-10); flex-wrap: wrap; overflow: visible; }
/* Add / Update's block: where the upload stands, the unchanged line, then the actions */
.upl-send { display: flex; flex-direction: column; gap: var(--fd-space-12); }
.upl-progress { display: flex; flex-direction: column; gap: var(--fd-space-8); }
.upl-progress-track { --upl-progress: 0%; height: var(--fd-space-6); overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-2); }
.upl-progress-fill { display: block; width: var(--upl-progress); height: 100%; border-radius: inherit; background: var(--grad-primary); transition: width .2s ease; }
@media (prefers-reduced-motion: reduce) { .upl-progress-fill { transition: none; } }
.upl-progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fd-space-12); }
.upl-progress-line { font-size: var(--fd-text-13); color: var(--ink-2); }
.upl-unchanged { font-size: var(--fd-text-13); color: var(--ink-2); text-align: right; }
.upl-finish:disabled { opacity: .55; cursor: default; }

/* The status screen (statuspage.jte, status.jte): the clip's title, where it stands in the tone it is named with — ok,
   warn or bad — and the way on. */
.upl-status { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fd-space-10); max-width: var(--upl-status-w); padding: var(--fd-space-22) var(--fd-space-24); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.upl-status .upl-facts-processing { margin-top: 0; font-size: var(--fd-text-14); }
.upl-facts-processing[data-tone="ok"] { color: var(--ok); }
.upl-facts-processing[data-tone="warn"] { color: var(--upl-warn-ink); }
.upl-facts-processing[data-tone="bad"] { color: var(--danger); }
/* the polled region inside the unswapped live wrapper: the line, then — once processing failed — the way to a new video */
.upl-status-region { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fd-space-10); }
.upl-status-actions { display: flex; flex-wrap: wrap; gap: var(--fd-space-10); margin-top: var(--fd-space-6); }
.button.primary.upl-finish { padding-inline: var(--fd-space-52); }
/* the Preview (8274-8351): the phone is a picture of the customer's clip, at the prototype's geometry */
.upl-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fd-space-18); }
.upl-preview-head .cv-preview-heading { margin-bottom: 0; }
.upl-vertical { display: flex; align-items: center; gap: var(--fd-space-7); font-size: var(--fd-text-13-5); color: var(--ink); }
.upl-vertical .upl-glyph { width: 15px; height: 15px; }
.upl-phone { position: relative; height: 460px; overflow: hidden; border-radius: 16px; background: var(--cv-phone); }
.upl-phone.has-file { background: var(--upl-phone-file); }
.upl-phone-headline { position: absolute; top: 60px; left: 16px; right: 16px; overflow-wrap: anywhere; text-align: center; color: var(--upl-on-picture); font-size: 15px; font-weight: 600; line-height: 1.5; text-shadow: var(--upl-picture-shadow); }
.upl-phone-cta { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; }
.cv-bar.upl-phone-bar { flex: 1; gap: 8px; padding: 8px 32px 8px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 400; }
.upl-phone-bar .cv-icon { width: 13px; height: 13px; }
.upl-phone-bar-chevron { position: absolute; top: 50%; right: 14px; width: 12px; height: 12px; color: var(--cv-ink); transform: translateY(-50%); }
.upl-phone-skeleton { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--upl-phone-skeleton); }
.upl-phone-skeleton-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--upl-phone-mark); }
.upl-phone-skeleton-line { flex: 1; max-width: 90px; height: 8px; border-radius: 4px; background: var(--upl-phone-mark); }
.upl-phone-skeleton-space { flex: 1; }
.upl-phone-skeleton-chevron { width: 13px; height: 13px; color: var(--upl-phone-mark-2); }
.upl-preview-lines { display: flex; flex-direction: column; gap: var(--fd-space-10); margin-top: var(--fd-space-22); }
.upl-preview-line { width: 100%; height: 10px; border-radius: 5px; background: var(--upl-skeleton); }
.upl-preview-line.is-strong { width: 60%; height: 12px; border-radius: 6px; background: var(--upl-skeleton-strong); }
.upl-preview-line.is-short { width: 45%; }
.upl-preview-text { margin-top: var(--fd-space-20); }
.upl-preview-title { overflow-wrap: anywhere; font-size: var(--fd-text-15); font-weight: 600; line-height: 1.45; color: var(--ink); }
.upl-preview-description { margin-top: var(--fd-space-8); overflow-wrap: anywhere; font-size: var(--fd-text-12-5); line-height: 1.6; color: var(--ink-2); }
.upl-preview-tags { display: flex; flex-direction: column; gap: var(--fd-space-14); margin-top: var(--fd-space-18); }
.upl-preview-tags.has-file { margin-top: var(--fd-space-16); }
.upl-preview-chips { display: flex; flex-wrap: wrap; gap: var(--fd-space-9); }
.upl-preview-chip { width: var(--upl-skel-chip-58); height: 26px; border-radius: var(--radius-pill); background: var(--upl-skeleton); }
/* the nine chips' widths, in the prototype's order (uploadTagPlaceholders 23876: 58 44 58 64 58 50 64 52 46) */
.upl-preview-chip:nth-child(2) { width: var(--upl-skel-chip-44); }
.upl-preview-chip:nth-child(4), .upl-preview-chip:nth-child(7) { width: var(--upl-skel-chip-64); }
.upl-preview-chip:nth-child(6) { width: var(--upl-skel-chip-50); }
.upl-preview-chip:nth-child(8) { width: var(--upl-skel-chip-52); }
.upl-preview-chip:nth-child(9) { width: var(--upl-skel-chip-46); }
.upl-preview-group-label { margin-bottom: var(--fd-space-8); font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
/* Manage Category (8163-8212) */
.upl-mgr { display: flex; flex-direction: column; width: var(--upl-mgr-w); max-width: 94vw; height: min(var(--upl-mgr-h), 90vh); overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--upl-shadow-mgr); color: var(--ink); }
.upl-mgr-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: var(--fd-space-22) var(--fd-space-28) var(--fd-space-16); border-bottom: 1px solid var(--line); }
.upl-mgr-title { font-size: var(--fd-text-16-5); font-weight: 600; color: var(--ink); }
.upl-mgr-close { display: grid; place-items: center; width: var(--upl-control-32); height: var(--upl-control-32); padding: 0; border: 0; border-radius: 9px; background: var(--surface-2); color: var(--ink-body); cursor: pointer; }
.upl-mgr-close .fd-glyph { width: 14px; height: 14px; }
.upl-mgr-top { flex: none; padding: var(--fd-space-18) var(--fd-space-28) 0; }
.upl-mgr-label { display: block; margin-bottom: var(--fd-space-8); font-size: var(--fd-text-13-5); font-weight: 600; color: var(--ink); }
.upl-mgr-tags-label { margin: var(--fd-space-18) 0 0; }
.upl-mgr-quiet { font-size: 12px; font-weight: 400; color: var(--muted); }
.upl-mgr-input { display: block; }
.upl-mgr-input, .upl-mgr-textarea { width: 100%; padding: var(--fd-space-12) var(--fd-space-14); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fd-text-13-5); }
.upl-mgr-textarea { background: var(--surface); font-size: var(--fd-text-13); line-height: 1.55; resize: vertical; }
.upl-mgr-input:focus-visible, .upl-mgr-textarea:focus-visible, .upl-mgr-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.upl-mgr-textarea::placeholder, .upl-mgr-name::placeholder { color: var(--fd-placeholder); }
.upl-mgr-scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding: var(--fd-space-10) var(--fd-space-28) var(--fd-space-14); }
.upl-mgr-list { margin: 0; padding: 0; list-style: none; }
/* the 2px top edge is where a dragged tag will land (borderTop 23858): transparent until a tag is dragged over */
.upl-mgr-row { display: flex; align-items: center; gap: var(--fd-space-12); padding: var(--fd-space-5) 0; border-top: 2px solid transparent; }
.upl-mgr-swatch-wrap { position: relative; flex: none; }
.upl-mgr-swatch { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--upl-tag); color: var(--upl-swatch-ink); cursor: pointer; }
.upl-mgr-swatch .upl-glyph { width: 11px; height: 11px; }
/* it hangs 4px under the swatch (8184: top 34 under the 30px swatch) */
.upl-mgr-palette { position: absolute; top: calc(100% + var(--fd-space-4)); left: 0; z-index: 20; display: flex; gap: var(--fd-space-6); padding: var(--fd-space-8); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--upl-shadow-palette); }
.upl-mgr-colour { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--upl-tag); cursor: pointer; transition: transform .12s ease; }
.upl-mgr-colour:hover, .upl-mgr-colour[aria-pressed="true"] { transform: scale(1.15); }
.upl-mgr-name { flex: 1; min-width: 0; padding: var(--fd-space-10) var(--fd-space-13); border: 1px solid transparent; border-radius: 9px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fd-text-13); }
.upl-mgr-name:focus { background: var(--surface); }
/* Move up / Move down: the × row's quiet 28px buttons, in the console's arrow glyphs (console/icon.jte) */
.upl-mgr-drop { display: grid; place-items: center; flex: none; width: var(--fd-control-28); height: var(--fd-control-28); padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); cursor: pointer; }
.upl-mgr-drop:hover { background: var(--surface-2); }
.upl-mgr-drop .fd-glyph { width: 14px; height: 14px; }
.upl-mgr-add { display: inline-flex; align-items: center; align-self: flex-start; flex: none; gap: var(--fd-space-6); margin-top: var(--fd-space-12); padding: var(--fd-space-4) 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: var(--fd-text-12-5); font-weight: 600; cursor: pointer; }
.upl-mgr-add .cv-glyph { width: 11px; height: 11px; }
/* the footer keeps the prototype's 16px line (8202 names no size): its description is inline, as the prototype's is,
   and the line descent under it is part of the footer's height */
.upl-mgr-foot { flex: none; font-size: var(--fd-text-16); padding: var(--fd-space-18) var(--fd-space-28) var(--fd-space-20); border-top: 1px solid var(--line); background: var(--upl-foot-bg); }
.upl-mgr-actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--fd-space-16); }
.upl-mgr-remove { padding: var(--fd-space-11) var(--fd-space-24); border: 1.5px solid var(--upl-bad-line-2); border-radius: 10px; background: var(--surface); color: var(--upl-bad-glyph); font: inherit; font-size: var(--fd-text-13-5); font-weight: 600; line-height: normal; }
.button.primary.upl-mgr-save { padding: var(--fd-space-11) var(--fd-space-32); border-radius: 10px; font-size: var(--fd-text-13-5); font-weight: 600; line-height: normal; }

/* the form's chip rows and the preview's tag groups are redrawn as one region each (uploads/tagrows.jte, previewtags.jte;
   "Tags on content-v5", 2026-10-13); the wrappers take no box, so the rows and groups keep their section's gaps */
.upl-tagrows, .upl-preview-groups { display: contents; }
.upl-tagrow-manage { text-decoration: none; }
/* Manage tags — the Tags page from the form and the review panel ("Tags on content-v5"; console-authored) */
.link-action.upl-tags-manage { align-self: flex-start; font-size: var(--fd-text-13); }
/* every control on these screens shows where the keyboard is */
.upl-chip:focus-visible, .upl-select:focus-visible, .upl-tile:focus-visible, .upl-page:focus-visible, .upl-walk-step:focus-visible,
.upl-option:focus-visible, .upl-icon:focus-visible, .upl-revise:focus-visible, .upl-act:focus-visible, .upl-reason:focus-visible,
.upl-dialog-cancel:focus-visible, .upl-file-remove:focus-visible, .upl-tagrow-manage:focus-visible, .upl-cta-face:focus-visible,
.upl-mgr-close:focus-visible, .upl-mgr-swatch:focus-visible, .upl-mgr-colour:focus-visible, .upl-mgr-drop:focus-visible,
.upl-mgr-add:focus-visible, .upl-dialog-send:focus-visible, .upl-dialog-danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the lit tile keeps its ring under the keyboard's */
.upl-tile.is-current:focus-visible { outline-offset: 5px; }

/* ---- assets ("Assets click-through", 2026-09-30; prototype NAV VIEW: ASSETS 5409-5643, the shared playlist editor
 * 7111-7360) ----
 * The Assets library, its right panels and the playlist editor (the console/assets templates), drawn to the prototype at
 * 1920 on the Feeds, Conversions and Uploads screens' terms: the Feeds density ladder (--fd-space-N, --fd-text-N) for
 * every spacing and type step that moves, the --as-* tokens for the widths of their own, calc(N * var(--u)) where the
 * prototype writes against its unit (tokens.css section 5). The grid, a tile, the pager, the empty library, the panel's
 * frame and head, the icon bar, the clip box, the clip's words, Properties, the tags and the footer's buttons are the
 * Uploads pieces as they are (the library is the Uploads grid, Asset Details the review panel without moderation), and
 * the roots are named in the shared structure rules above. What stays literal is the same exempt class: type at or
 * under the 12px floor, radii, 1px and 1.5px rules, icon boxes and the pictures — Manage Content's feed frames, the
 * editor's thumbnails, its head frame and its colour swatches — and the offsets that seat a badge or a glyph on them:
 * the pin badge's -5px over a thumbnail's corner (7305) and the -2px a tag chip's tick and dot lean into its inset
 * (7208 · 7210). */
.as-glyph { display: block; flex: none; width: 16px; height: 16px; }

/* the header (5413-5446): the search is the Feeds pill with room for its × (5416), which clears it (5417-5421) */
/* this pill names Poppins (5416), where the Feeds and Uploads pills draw in the fallback font (1773 · 7371), so it keeps
   the prototype's 11px insets and its 44px box */
.as-search .fd-search-input { padding-top: var(--fd-space-11); padding-bottom: var(--fd-space-11); padding-right: var(--fd-space-40); }
.as-search .fd-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.as-search-clear { position: absolute; top: 50%; right: var(--fd-space-10); display: grid; place-items: center; width: var(--upl-control-24); height: var(--upl-control-24); border-radius: 50%; color: var(--fd-icon); transform: translateY(-50%); }
.as-search-clear:hover { background: var(--as-clear-hover); }
.as-search-clear .fd-glyph { width: 13px; height: 13px; }
/* a search that finds nothing (5472-5480) */
.as-no-matches { display: flex; flex-direction: column; align-items: center; gap: var(--fd-space-8); padding: var(--fd-space-52) var(--fd-space-20); text-align: center; }
.as-no-matches-disc { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.as-no-matches-disc .fd-glyph { width: 24px; height: 24px; }
.as-no-matches-line { font-size: var(--fd-text-14); font-weight: 600; color: var(--ink); }
.as-no-matches-clear { border-radius: 4px; color: var(--accent); font-size: var(--fd-text-12-5); font-weight: 600; text-decoration: none; }
.as-no-matches-clear:hover { text-decoration: underline; }
/* the pager's arrows are words, as the prototype's are (5492 · 5499) */
.upl-page.as-page-word { padding: 0 var(--fd-space-10); font-size: 12px; }

/* the right panel (5503-5516): the Feeds panel's frame and the Conversions panel's head, its body 16 apart. Each kind of
   panel is its own element inside the region, which draws no box of its own */
.as-panel-region { display: contents; }
/* the body is the positioned box of what it holds, so a visually hidden label inside it (.sr-only is absolute) stays
   inside its scroller instead of growing the document at a short viewport */
.feeds-panel-body.as-panel-body { position: relative; gap: var(--fd-space-16); }
/* Asset Details (5518-5608): the document and the ticked circle on the accent's quiet ground, the bin in the danger ink;
   the clip box is 42vh tall when portrait (27638), where the review panel's is 38vh */
.as-icon-accent { background: var(--accent-soft-2); color: var(--accent); }
.upl-icon.as-icon[disabled] { opacity: .55; cursor: default; }
/* the visibility tick is a statement, not a control ("Console polish", 2026-10-20): nothing about it invites a press */
.as-icon-indicator { cursor: default; user-select: none; }
.upl-vbox.as-vbox.is-portrait { height: 42vh; }
.as-foot { display: flex; flex: none; gap: var(--fd-space-12); }
/* Manage Content (5611-5643): the feed cards, the platform's first, the lit one, and the note */
.as-feeds { display: flex; flex-direction: column; gap: var(--fd-space-16); margin: 0; padding: 0; list-style: none; }
/* the prototype draws no lit tile on the library (5449): the clip Asset Details shows is aria-current only */
.assets .upl-tile.is-current { box-shadow: var(--upl-shadow-tile); transform: none; }
.assets .upl-tile.is-current:focus-visible { outline-offset: 2px; }
.as-feed { display: flex; align-items: center; gap: var(--fd-space-13); padding: var(--fd-space-14) var(--fd-space-16); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
a.as-feed:hover { border-color: var(--ring); }
a.as-feed:hover .fd-thumb { transform: scale(1.08) rotate(-3deg); }
.as-feed.is-selected { border-color: var(--ring); background: var(--as-selected-bg); }
.as-feed.is-platform { border-color: var(--as-platform-line); background: var(--as-platform-bg); }
.fd-thumb-manage { width: 30px; height: 44px; border-radius: 7px; box-shadow: var(--as-shadow-frame); }
.as-platform-frame { display: grid; place-items: center; flex: none; width: 30px; height: 44px; overflow: hidden; border-radius: 7px; box-shadow: var(--as-shadow-frame); color: var(--upl-on-picture); }
.as-platform-frame.is-skills { background: var(--as-platform-skills); }
.as-platform-frame.is-social { background: var(--as-platform-social); }
.as-platform-frame .fd-glyph { width: 17px; height: 17px; }
.as-feed-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.as-feed-meta { font-size: var(--fd-text-12-5); color: var(--ink-2); }
.as-feed-name { margin-top: var(--fd-space-1); font-size: var(--fd-text-14-5); font-weight: 600; color: var(--ink); }
.fd-url.as-feed-url { margin-top: var(--fd-space-4); }
.as-feed-info { display: flex; align-items: center; gap: var(--fd-space-6); margin-top: var(--fd-space-4); font-size: 11px; font-weight: 500; color: var(--accent); }
/* a feed whose playlist was removed plays nothing — a state, not a count (ManagePanel.PLAYLIST_REMOVED) */
.as-feed-info.is-removed { color: var(--muted); }
.as-live { display: inline-flex; align-items: center; flex: none; gap: var(--fd-space-3); padding: var(--fd-space-1) var(--fd-space-7); border: 1px solid var(--as-live-line); border-radius: var(--radius-pill); background: var(--as-live-bg); color: var(--ok); font-size: 8.5px; font-weight: 700; letter-spacing: .7px; line-height: normal; text-transform: uppercase; }
.as-live-dot { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--ok); }
.as-live-lg { gap: var(--fd-space-4); padding: var(--fd-space-2) var(--fd-space-8); font-size: 9px; letter-spacing: .8px; }
.as-live-lg .as-live-dot { width: 5px; height: 5px; }
.as-panel-line { font-size: var(--fd-text-12-5); line-height: 1.5; color: var(--ink-2); }
/* Add to Feed's chooser (dialog.jte, FeedChooser; "Feed playlists on content-v5", slice C, 2026-10-20): Manage Content's
   feed cards in the confirm dialogs' box, wider for the Add beside each; the list scrolls inside the dialog, so Cancel
   stays in view however many feeds the workspace holds */
.upl-dialog.as-chooser { width: var(--as-chooser-w); }
.as-chooser-notice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fd-space-6); margin-top: var(--fd-space-13); font-size: var(--fd-text-12-5); line-height: 1.5; }
.as-chooser-state { margin-top: var(--fd-space-13); }
.as-feeds.as-chooser-feeds { gap: var(--fd-space-8); max-height: 52vh; margin-top: var(--fd-space-13); overflow-y: auto; overscroll-behavior: contain; }
.as-chooser-reason { margin-top: var(--fd-space-4); font-size: var(--fd-text-12-5); line-height: 1.5; color: var(--ink-2); }
.link-action.as-chooser-editor { align-self: flex-start; margin-top: var(--fd-space-4); font-size: var(--fd-text-12-5); }
.as-lms-note { display: flex; gap: var(--fd-space-8); padding: var(--fd-space-11) var(--fd-space-13); border: 1px dashed var(--as-note-line); border-radius: 11px; background: var(--hover-2); color: var(--upl-line-ink); font-size: 11px; line-height: 1.6; }
.as-lms-note .as-glyph { width: 14px; height: 14px; margin-top: var(--fd-space-1); color: var(--muted); }

/* the playlist editor (7113-7355): the Uploads dialogs' blurred scrim, its own box */
.modal.as-scrim { padding: var(--fd-space-28); background: var(--upl-scrim-dialog); backdrop-filter: blur(6px); }
.as-editor { display: flex; flex-direction: column; width: 100%; max-width: var(--as-editor-w); height: min(var(--as-editor-h), 92vh); overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--upl-shadow-mgr); color: var(--ink); }
.as-editor:focus { outline: none; }
.as-overline { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
/* the head (7116-7162): the Icon button and its menu, the name and its count, the × */
.as-ed-head { display: flex; align-items: center; flex: none; gap: var(--fd-space-16); padding: var(--fd-space-18) var(--fd-space-26); border-bottom: 1px solid var(--line); }
.as-ed-icon { position: relative; flex: none; }
.as-ed-icon-button { display: flex; align-items: center; gap: var(--fd-space-8); padding: var(--fd-space-6) var(--fd-space-10) var(--fd-space-6) var(--fd-space-6); border: 1px solid var(--as-edge); border-radius: 9px; background: var(--surface); color: var(--accent); font: inherit; cursor: pointer; }
.as-ed-icon-button:hover { border-color: var(--cv-picked); background: var(--as-hover); }
.as-ed-icon-label { font-size: 10.5px; font-weight: 600; line-height: normal; }
.as-ed-icon-button .upl-glyph { width: 11px; height: 11px; }
/* the head's frame is the feed's colour, plain (feedFrame 'plain', 29165): a picture at the prototype's 24×34 */
.fd-thumb.frame-plain { background: var(--fd-tone); box-shadow: var(--as-shadow-head-frame); }
.frame-plain .fd-thumb-play { color: var(--fd-play-light); opacity: .98; }
.as-ed-icons { position: absolute; top: 100%; left: 0; z-index: 20; width: var(--as-icons-w); padding: var(--fd-space-12); border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); box-shadow: var(--as-shadow-icons); }
.as-ed-icons-title { margin-bottom: var(--fd-space-9); }
.as-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--fd-space-6); margin-bottom: var(--fd-space-10); }
.as-swatch { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 7px; background: var(--fd-tone); cursor: pointer; }
.as-swatch[aria-pressed="true"] { border-color: var(--ink); }
/* the twelve colours (feedIconColors, 24005), for a swatch and for the frame once one is picked */
:is(.as-frame, .as-swatch)[data-color="blue"] { --fd-tone: var(--feed-tone-blue); }
:is(.as-frame, .as-swatch)[data-color="violet"] { --fd-tone: var(--feed-tone-violet); }
:is(.as-frame, .as-swatch)[data-color="pink"] { --fd-tone: var(--feed-tone-pink); }
:is(.as-frame, .as-swatch)[data-color="orange"] { --fd-tone: var(--feed-tone-orange); }
:is(.as-frame, .as-swatch)[data-color="amber"] { --fd-tone: var(--as-color-amber); }
:is(.as-frame, .as-swatch)[data-color="green"] { --fd-tone: var(--as-color-green); }
:is(.as-frame, .as-swatch)[data-color="teal"] { --fd-tone: var(--feed-tone-teal); }
:is(.as-frame, .as-swatch)[data-color="cyan"] { --fd-tone: var(--as-color-cyan); }
:is(.as-frame, .as-swatch)[data-color="indigo"] { --fd-tone: var(--feed-tone-indigo); }
:is(.as-frame, .as-swatch)[data-color="red"] { --fd-tone: var(--feed-tone-red); }
:is(.as-frame, .as-swatch)[data-color="lime"] { --fd-tone: var(--as-color-lime); }
:is(.as-frame, .as-swatch)[data-color="purple"] { --fd-tone: var(--as-color-purple); }
.as-ed-upload { display: flex; align-items: center; justify-content: center; gap: var(--fd-space-8); width: 100%; padding: var(--fd-space-9); border: 1.5px dashed var(--as-edge); border-radius: 7px; background: transparent; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 600; line-height: normal; }
.as-ed-upload .as-glyph { width: 13px; height: 13px; }
.as-ed-upload[disabled] { opacity: .55; cursor: default; }
.as-ed-title { flex: 1; min-width: 0; }
.as-ed-name { width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: var(--fd-text-17); font-weight: 600; line-height: normal; }
.as-ed-name:focus { outline: none; }
.as-ed-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.as-ed-count { margin-top: var(--fd-space-1); font-size: 11.5px; color: var(--muted); }
.as-ed-close { display: grid; place-items: center; flex: none; width: var(--upl-control-32); height: var(--upl-control-32); border-radius: 8px; background: var(--surface-2); color: var(--ink-body); }
.as-ed-close .fd-glyph { width: 14px; height: 14px; }
.as-ed-body { display: flex; flex: 1; min-height: 0; }
/* the left rail (7165-7228): the three sources */
/* the rail keeps the prototype's 16px line (it names no size, 7165): every line in it names its own, and the prompt box's
   line takes its descent from it */
.as-ed-rail { flex: none; width: var(--as-rail-w); overflow-y: auto; font-size: var(--fd-text-16); padding: var(--fd-space-20) var(--as-rail-pad-x) var(--fd-space-26); border-right: 1px solid var(--line); }
.as-ed-lede { margin: var(--fd-space-4) 0 var(--fd-space-16); font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.as-source { padding-bottom: var(--fd-space-16); }
.as-source.is-ruled { padding-top: var(--fd-space-14); border-top: 1px solid var(--line); }
.as-source.is-last { padding-bottom: 0; }
.as-source-head { display: flex; align-items: center; gap: var(--fd-space-8); }
.as-source-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.as-source-dot.is-prompt { background: var(--fd-accent-deep); }
.as-source-dot.is-tag { background: var(--as-tag-ink); }
.as-source-dot.is-manual { background: var(--ink-quiet); }
.as-source-label { font-size: var(--fd-text-13); font-weight: 600; color: var(--ink); }
.as-source-end { display: flex; align-items: center; gap: var(--fd-space-8); margin-left: auto; }
.as-source-count { font-size: 10px; color: var(--muted); }
.as-reset { display: flex; align-items: center; gap: var(--fd-space-4); padding: var(--fd-space-2-5) var(--fd-space-7); border: 1px solid var(--as-reset-line); border-radius: 5px; background: var(--as-reset-bg); color: var(--as-reset-ink); font: inherit; font-size: 9.5px; font-weight: 600; line-height: normal; cursor: pointer; }
.as-reset:hover { background: var(--as-reset-bg-hover); }
.as-reset .upl-glyph { width: 9px; height: 9px; }
.as-reset .upl-glyph path { stroke-width: 2.2; }
/* the prompt box is inline, as the prototype's is (7192), so the line's descent under it is part of the gap to its helper */
.as-prompt { width: 100%; margin-top: var(--fd-space-8); padding: var(--fd-space-9) var(--fd-space-11); border: 1px solid var(--line-2); border-radius: 6px; background: var(--hover-2); color: var(--ink); font: inherit; font-size: var(--fd-text-12-5); line-height: 1.5; resize: none; }
.as-prompt::placeholder { color: var(--fd-placeholder); }
.as-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.as-help { margin-top: var(--fd-space-6); font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.as-help-accent { color: var(--fd-accent-deep); font-weight: 600; }
.as-help-tags { margin-top: var(--fd-space-8); }
.as-help-hand { margin-top: var(--fd-space-5); }
.as-help-hand strong { color: var(--ink); font-weight: 600; }
.as-tag-group { margin: var(--fd-space-10) 0 var(--fd-space-6); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
/* a category's chips scroll sideways, as the prototype's do (7204) */
.as-tag-row { display: flex; gap: var(--fd-space-6); overflow-x: auto; padding-bottom: var(--fd-space-5); scrollbar-width: thin; }
.as-tag { display: flex; align-items: center; flex: none; gap: var(--fd-space-6); padding: var(--fd-space-5) var(--fd-space-12); border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-quiet); font: inherit; font-size: 11.5px; font-weight: 500; line-height: normal; white-space: nowrap; cursor: pointer; }
.as-tag.is-on { border-color: var(--upl-tag-edge); background: var(--upl-tag); color: var(--ink); }
.as-tag-dot { flex: none; width: 7px; height: 7px; margin-left: -2px; border-radius: 50%; background: var(--upl-tag); }
.as-tag-tick { display: none; margin-left: -2px; color: var(--ink); }
.as-tag-tick .upl-glyph { width: 10px; height: 10px; }
.as-tag.is-on .as-tag-tick { display: block; }
.as-tag.is-on .as-tag-dot { display: none; }
.as-tag-count { font-weight: 400; opacity: .6; }
/* the right column (7231-7356): the search, the results, the playlist and the footer */
.as-ed-main { display: flex; flex-direction: column; flex: 1; min-width: 0; background: var(--hover-2); }
.as-ed-search { flex: none; padding: var(--fd-space-16) var(--fd-space-22) var(--fd-space-12); }
.as-ed-field { display: flex; align-items: center; gap: var(--fd-space-8); padding: var(--fd-space-9) var(--fd-space-13); border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }
.as-ed-field:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.as-ed-field-icon { width: 14px; height: 14px; color: var(--muted); }
/* the field keeps the browser's own inset, as the prototype's does (7235) */
.as-ed-input { flex: 1; min-width: 0; padding: var(--fd-space-1) var(--fd-space-2); border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fd-text-12-5); }
.as-ed-input:focus { outline: none; }
.as-ed-input::placeholder { color: var(--fd-placeholder); }
.as-ed-list { flex: 1; overflow-y: auto; padding: 0 var(--fd-space-22) var(--fd-space-20); }
/* Read-only (D199; editor.jte): no library search above the list, so the list keeps the search's top inset itself. */
.as-ed-list.is-read-only { padding-top: var(--fd-space-16); }
.as-results-head { display: flex; align-items: baseline; gap: var(--fd-space-8); margin: var(--fd-space-4) 0 var(--fd-space-8); }
.as-results-meta { margin-left: auto; font-size: 10px; color: var(--muted); }
.as-note { padding: var(--fd-space-2) var(--fd-space-2) 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.as-none { padding: var(--fd-space-10) var(--fd-space-2); font-size: 12px; color: var(--muted); }
.as-rule { height: 1px; margin: var(--fd-space-12) 0; background: var(--line); }
.as-playlist { margin: var(--fd-space-4) 0 var(--fd-space-10); }
.as-playlist-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fd-space-4) var(--fd-space-8); }
.as-playlist-title { white-space: nowrap; }
/* Pin to position is a legend for the pin, not a button (7277-7280) */
.as-legend { display: flex; align-items: center; gap: var(--fd-space-5); margin-left: auto; color: var(--fd-accent-deep); font-size: 10px; font-weight: 600; white-space: nowrap; }
.as-legend .as-glyph { width: 10px; height: 10px; }
.as-subline { margin-top: var(--fd-space-3); font-size: 10.5px; line-height: 1.5; color: var(--muted); }
/* a playlist web-embed has not swapped in yet ("Feed playlists on content-v5", 2026-10-19; PlaylistEditor.SWAP_PENDING):
   the Feeds warn note's tint and ink (.fd-note-warn), on one line under the subline */
.as-swap { display: flex; align-items: center; gap: var(--fd-space-6); margin-top: var(--fd-space-6); padding: var(--fd-space-6) var(--fd-space-10); border: 1px solid var(--fd-warn-note-line); border-radius: 8px; background: var(--fd-warn-note-bg); color: var(--fd-warn-ink); font-size: 11px; line-height: 1.5; }
.as-swap-glyph { flex: none; width: 12px; height: 12px; color: var(--warn); }
.as-empty { padding: var(--fd-space-22) var(--fd-space-16); border: 1.5px dashed var(--as-edge); border-radius: 9px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }
.as-zone { margin: var(--fd-space-12) 0 var(--fd-space-6); color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.as-zone.is-pinned { margin: var(--fd-space-2) 0 var(--fd-space-6); color: var(--fd-accent-deep); }
.as-pool-hint { padding: var(--fd-space-8) 0 var(--fd-space-2); text-align: center; color: var(--muted); font-size: 10.5px; }
/* a row (7298): its top edge is the drop line, clear until a dragged row is over it */
.as-rows { margin: 0; padding: 0; list-style: none; }
.as-row { display: flex; align-items: center; gap: var(--fd-space-10); margin-bottom: var(--fd-space-6); padding: var(--fd-space-9) var(--fd-space-12); border: 1px solid var(--line); border-top: 2px solid transparent; border-radius: 8px; background: var(--surface); transition: opacity .5s; }
.as-row.is-removing { opacity: .45; }
.as-row.is-dimmed { opacity: .32; }
.as-row.is-over { border-top-color: var(--cv-picked); }
.as-row.as-result { gap: var(--fd-space-12); border-top: 1px solid var(--line); }
.as-row-grip { flex: none; color: var(--cv-edge); cursor: grab; }
.as-row-grip .upl-glyph { width: 13px; height: 13px; }
.as-row-num { flex: none; width: 18px; color: var(--muted); font-size: 10.5px; }
.as-row-thumb { position: relative; flex: none; width: 42px; height: 30px; border-radius: 5px; background: var(--upl-tile-ground); }
.as-row-poster { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.as-row-pin { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--surface); border-radius: 50%; background: var(--accent); color: var(--accent-fg); }
.as-row-pin .as-glyph { width: 8px; height: 8px; }
.as-row-pin .as-glyph path { stroke-width: 2.4; }
/* Open in Assets (7309-7314): shown after the prototype's 3s hover (22886), at once to the keyboard */
.as-tip { position: absolute; bottom: var(--fd-space-36); left: calc(-1 * var(--fd-space-10)); z-index: 40; display: flex; align-items: center; gap: var(--fd-space-6); padding: var(--fd-space-7) var(--fd-space-11); border-radius: 7px; background: var(--as-tip-bg); box-shadow: var(--as-shadow-tip); color: var(--accent-fg); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, visibility .15s; }
.as-tip .as-glyph { width: 11px; height: 11px; }
.as-row-thumb:hover .as-tip { opacity: 1; visibility: visible; transition-delay: 3s; }
.as-row-thumb:focus-visible .as-tip { opacity: 1; visibility: visible; transition-delay: 0s; }
.as-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.as-row-title { overflow: hidden; color: var(--ink); font-size: var(--fd-text-12-5); text-overflow: ellipsis; white-space: nowrap; }
.as-row-dur { margin-top: var(--fd-space-1); color: var(--muted); font-size: 10px; }
/* where a row came from (csOriginChip, 22823-22825) */
.as-origin { flex: none; padding: var(--fd-space-3) var(--fd-space-9); border-radius: 4px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.as-origin[data-origin="prompt"] { background: var(--accent-soft); color: var(--fd-accent-deep); }
.as-origin[data-origin="manual"] { background: var(--as-quiet-fill); color: var(--ink-quiet); }
.as-origin[data-origin="tag"] { background: var(--as-tag-bg); color: var(--as-tag-ink); }
.as-added { flex: none; padding: var(--fd-space-6) var(--fd-space-14); border: 0; border-radius: 6px; background: var(--as-quiet-fill); color: var(--ink-quiet); font: inherit; font-size: 11.5px; font-weight: 600; line-height: normal; cursor: pointer; }
.as-added.is-add { background: var(--grad-primary); color: var(--accent-fg); }
.as-added.as-result-add { padding-inline: var(--fd-space-16); }
.as-row-menu-wrap { position: relative; flex: none; }
.as-row-more { display: grid; place-items: center; width: var(--fd-control-26); height: var(--fd-control-26); padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; }
.as-row-more:hover { background: var(--surface-2); }
.as-row-more[disabled] { cursor: default; }
.as-row-more .fd-glyph { width: 14px; height: 14px; }
.as-row-menu { position: absolute; top: calc(100% + var(--fd-space-4)); right: 0; z-index: 30; display: flex; flex-direction: column; width: var(--as-menu-w); padding: var(--fd-space-5); border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); box-shadow: var(--as-shadow-menu); }
.as-row-menu-item { display: flex; align-items: center; gap: var(--fd-space-9); padding: var(--fd-space-8) var(--fd-space-10); border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 12px; font-weight: 500; line-height: normal; text-align: left; cursor: pointer; }
.as-row-menu-item:hover { background: var(--accent-soft-2); }
.as-row-menu-item :is(.as-glyph, .upl-glyph, .icon) { flex: none; width: 13px; height: 13px; color: var(--ink-quiet); }
.as-row-menu-item[disabled] { opacity: .45; cursor: default; }
.as-row-menu-item[disabled]:hover { background: transparent; }
.as-row-menu-item .as-glyph path { stroke-width: 1.8; }
.as-row-menu-item.is-danger { color: var(--as-remove-ink); }
.as-row-menu-item.is-danger:hover { background: var(--as-remove-hover); }
.as-row-menu-item.is-danger .upl-glyph { color: var(--as-remove-ink); }
.as-ed-foot { display: flex; align-items: center; justify-content: space-between; flex: none; gap: var(--fd-space-14); padding: var(--fd-space-13) var(--fd-space-22); border-top: 1px solid var(--line); background: var(--surface); }
.as-ed-foot-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
/* Read-only: Done alone, at the end the footer keeps it at beside the note. */
.as-ed-foot.is-read-only { justify-content: flex-end; }
.as-done { flex: none; padding: var(--fd-space-10) var(--fd-space-26); border-radius: 7px; background: var(--grad-primary); color: var(--accent-fg); font-size: var(--fd-text-13); font-weight: 600; line-height: normal; text-decoration: none; }
/* Where the editor writes the playlist on content v5 ("Feed playlists on content-v5", slice B, 2026-10-20; writer.jte):
   every control is a form, which leaves the layout to the control it holds; Done is a button; the ⋮ is a <details>
   disclosure, its marker hidden; the line saying why a change was not made sits under the head; the discard question
   covers the editor, which is inert behind it. The Prompt source and the Icon button are drawn disabled where unbuilt
   features are (Coming soon, D165). */
.as-ed-form { display: contents; }
button.as-done { border: 0; font-family: inherit; cursor: pointer; }
summary.as-row-more { list-style: none; }
summary.as-row-more::-webkit-details-marker { display: none; }
.as-ed-notice { flex: none; margin: var(--fd-space-12) var(--fd-space-26) 0; font-size: var(--fd-text-12-5); line-height: 1.5; }
.as-added.is-static { cursor: default; }
.as-ed-icon-button[disabled], .as-prompt[disabled] { opacity: .55; cursor: default; }
.as-ed-icon-button[disabled]:hover { border-color: var(--as-edge); background: var(--surface); }
.as-discard { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--fd-space-28); background: var(--upl-scrim-dialog); }

/* every control on these screens shows where the keyboard is */
.as-search-clear:focus-visible, .as-no-matches-clear:focus-visible, .as-feed:focus-visible, .as-ed-icon-button:focus-visible, .as-swatch:focus-visible,
.as-ed-close:focus-visible, .as-reset:focus-visible, .as-tag:focus-visible, .as-row-thumb:focus-visible, .as-added:focus-visible, .as-row-more:focus-visible,
.as-row-menu-item:focus-visible, .as-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the motion (proto 720-728) */
@keyframes fd-pulse { from { opacity: 1; } to { opacity: .35; } }
@keyframes fd-shimmer { 0% { transform: translateX(-140%) skewX(-18deg); } 60% { transform: translateX(260%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes fd-conveyor { to { transform: translateY(-38px); } }
@keyframes fd-ring { 0% { stroke-dashoffset: 100; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 95% { opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
/* People who ask for less motion get the pictures standing still (the shell's own rule, frame above). */
@media (prefers-reduced-motion: reduce) {
  .fd-thumb, .fd-thumb *, .fd-vig *, .fd-module-status-dot, .fd-mock-tile { animation: none; transition: none; }
  .fd-card:hover .fd-thumb, a.as-feed:hover .fd-thumb { transform: none; }
  .as-row { transition: none; }
  .fd-vig-ring-fill { stroke-dashoffset: 0; }
}

/* Narrow: the shell's 820px stacking breakpoint — the panel and every rail fold under what they sit beside, and the
   page scrolls as one, as the settings task view does (the Uploads queue and its form too). */
@media (max-width: 820px) {
  .pane:has(> .feeds), .pane:has(> .feed-task, > .fd-editor-form > .feed-task), .pane:has(> .conversions), .pane:has(> .cv-task), .pane:has(> .uploads), .pane:has(> .assets) { overflow: visible; }
  .feeds, .feed-task, .fd-editor-body, .conversions, .cv-task, .cv-dialog-body, .uploads, .assets { flex-direction: column; }
  .feeds-list, .feeds-panel-body, .fd-create-main, .fd-create-preview, .fd-rail, .fd-canvas, .fd-settings-panel, .fd-fs-rail, .fd-fs-pane,
  .cv-panel-body, .cv-form-main, .cv-preview, .upl-list, .upl-panel-body, .as-list { overflow: visible; }
  .feeds-panel, .fd-rail, .fd-settings-panel, .fd-fs-rail { width: auto; border: 0; border-top: 1px solid var(--line); }
  .fd-create-main, .cv-form-main { border-right: 0; }
  .cv-dialog-side { padding-left: 0; border-left: 0; }
  .fd-toolbar { flex-wrap: wrap; }
  .fd-steps { flex-direction: column; align-items: stretch; }
  .fd-step-arrow { display: none; }
}

/* ---- The local rig's view-as menu (W5, 2026-10-06): dev tooling on the directory's card table; role links are
   quiet chips, the persona viewed as now filled. ---- */
.viewas .table { table-layout: fixed; }
.viewas .table th:first-child { width: 34%; }
.viewas .card-table + .section-title { margin-top: var(--pane-pad-y); }
.viewas .chip-quiet { text-decoration: none; }
.viewas .chip-quiet:hover, .viewas .chip-quiet[aria-current="true"] { background: var(--accent); color: var(--accent-fg); }

/* ---- Email domains ("Email domains", 2026-10-14): one section on the org page, the Partner page and Account Settings.
   The claims as a ruled list, a pending one's TXT record in the prototype's Custom Domain table (decoded 17026-17038:
   a hairline box, Name · Type · Value, the value widest), then Add domain. Sizes from the --domains-* density tokens. ---- */
.domains { margin-bottom: var(--org-section-space); }
.domains-card { display: grid; gap: var(--domains-gap); }
.domains-intro { margin: 0; max-width: 72ch; font-size: var(--domains-text); line-height: 1.6; color: var(--ink-2); }
.domains-empty { margin: 0; font-size: var(--domains-text); color: var(--muted); }
.domains-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.domains-row { display: grid; gap: var(--domains-row-gap); padding: var(--domains-row-pad-y) 0; border-bottom: 1px solid var(--divider); }
.domains-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--domains-row-gap); }
.domains-name { font-size: var(--domains-text); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.domains-when { font-size: var(--text-note); color: var(--muted); }
.domains-verify { margin-left: auto; }
.domains-help, .domains-note { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--ink-2); }
.domains-row .field-error { margin-top: 0; }
.domains-dns { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.domains-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--domains-text); color: var(--ink-body); }
.domains-table th { padding: var(--domains-cell-pad-y) var(--domains-cell-pad-x); border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; color: var(--ink); }
.domains-table td { padding: var(--domains-cell-pad-y) var(--domains-cell-pad-x); vertical-align: middle; }
.domains-table th:first-child { width: 36%; }
.domains-table th:nth-child(2) { width: 12%; }
.domains-code { font-family: var(--font-mono); font-size: var(--text-xs); overflow-wrap: anywhere; }
.domains-value { display: flex; align-items: center; gap: var(--domains-row-gap); }
.domains-value .domains-code { flex: 1; min-width: 0; }
.domains-copy { flex: none; display: inline-flex; align-items: center; gap: var(--domains-label-gap); padding: var(--domains-copy-pad-y) var(--domains-copy-pad-x); font-size: var(--text-xs); }
.domains-copy .icon { width: 12px; height: 12px; }   /* the icon box the directory's row buttons use (.table-wsdir .button.pill.pill-accent .icon) */
.domains-add { display: grid; gap: var(--domains-label-gap); }
.domains-add .field-error { margin-top: 0; }
.domains-label { font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.domains-add-row { display: flex; gap: var(--domains-row-gap); }
.domains-add-row .input { flex: 1; min-width: 0; }

/* ---- tags ("Tags on content-v5", 2026-10-13; console/tags) ----
 * The Tags page and its dialogs. The prototype has no Tags page: the head, the intro and the cards are console-authored,
 * drawn with the console's pieces — the .card's frame, the Uploads screens' chips (.upl-tag) and dialogs (.upl-mgr,
 * .upl-dialog) — on the Feeds density ladder (--fd-space-N, --fd-text-N) for every spacing and type step that moves.
 * What stays literal is the exempt class: type at or under the 12px floor, radii, 1px rules and icon boxes. */
.tags { display: flex; flex-direction: column; gap: var(--fd-space-18); }
.tags-head { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-16); flex-wrap: wrap; }
.tags-intro { margin: 0; max-width: var(--fd-form-w); font-size: var(--fd-text-13-5); line-height: 1.6; color: var(--ink-2); }
.tags-add { display: inline-flex; align-items: center; gap: var(--fd-space-8); text-decoration: none; }
.tags-add .cv-glyph { width: 15px; height: 15px; }
.tags-list { display: flex; flex-direction: column; gap: var(--fd-space-14); }
.tags-card { padding: var(--fd-space-16) var(--fd-space-20) var(--fd-space-18); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.tags-card-head { display: flex; align-items: flex-start; gap: var(--fd-space-12); margin-bottom: var(--fd-space-12); }
.tags-card-titles { flex: 1; min-width: 0; }
.tags-card-title { margin: 0; font-size: var(--fd-text-15); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tags-card-description { margin: var(--fd-space-4) 0 0; font-size: var(--fd-text-13); line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.tags-card-count { flex: none; padding-top: var(--fd-space-2); font-size: 12px; color: var(--muted); white-space: nowrap; }
.tags-card-manage { flex: none; text-decoration: none; }
.tags-card-empty { margin: 0; font-size: var(--fd-text-13); color: var(--muted); }
.tags-chip { display: inline-flex; align-items: center; gap: var(--fd-space-6); }
.tags-chip-name { overflow-wrap: anywhere; }
.tags-chip-count { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.tags-chip-delete { display: grid; place-items: center; width: 18px; height: 18px; margin-right: calc(-1 * var(--fd-space-6)); border-radius: 50%; color: var(--ink-2); text-decoration: none; }
.tags-chip-delete:hover { background: var(--upl-tag-edge); color: var(--ink); }
.tags-chip-delete .fd-glyph { width: 10px; height: 10px; }
.tags-chip-delete:focus-visible, .tags-card-manage:focus-visible, .tags-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Manage Category over the page or the upload form: the form takes no box, so the dialog's head, body and foot keep
   their column; a listed tag's name is text — content v5 has no tag rename — and a new tag's line or offer runs under it */
.tags-mgr-form { display: contents; }
.tags-mgr-fixed { display: flex; align-items: center; cursor: default; overflow-wrap: anywhere; }
.tags-mgr-notice { margin-bottom: var(--fd-space-12); }
.tags-mgr-new { flex-wrap: wrap; }
.tags-mgr-note { flex-basis: 100%; margin: 0; padding-left: calc(30px + var(--fd-space-12)); }
.tags-mgr-offer { display: flex; flex-direction: column; gap: var(--fd-space-4); }
.tags-mgr-offer-line { margin: 0; font-size: 12px; color: var(--ink-2); }
.tags-mgr-move { display: inline-flex; align-items: center; gap: var(--fd-space-6); font-size: 12px; color: var(--ink); cursor: pointer; }
a.upl-mgr-close, a.upl-mgr-remove { text-decoration: none; }
a.upl-mgr-remove { display: inline-block; }
.tags-add-label { margin-top: var(--fd-space-14); }
.tags-add-form .upl-mgr-input, .tags-add-form .upl-mgr-textarea { margin: 0; }

/* Go live (D224, D226; console/golive): the step after org setup on the auth surface — its rail's body, its steps and
   the preview card's status chip — and the not-live banner the frame draws across the top of a PENDING or SUSPENDED
   workspace. Console-authored: the prototype has no go-live step. */
.signup-progress-fill.gl-progress-full { width: 100%; }
.gl-body { display: flex; flex-direction: column; gap: var(--fd-space-12); margin-top: var(--fd-space-20); }
.gl-text { margin: 0; font-size: var(--auth-text-sm); line-height: 1.55; color: var(--auth-ink-soft); }
.gl-quiet { color: var(--auth-ink-help); }
.gl-address { margin: 0; padding: var(--auth-tile-pad) var(--auth-control-pad); border: 1px solid var(--auth-line); border-radius: var(--auth-control-radius); font-family: var(--font-mono); font-size: var(--fd-text-13); color: var(--auth-fg); overflow-wrap: anywhere; }
.gl-tile { padding: var(--auth-tile-pad) var(--auth-control-pad); border-radius: var(--auth-control-radius); background: var(--auth-tile-bg); }
.gl-tile .gl-text { font-size: var(--auth-text-quiet); }
.gl-notice { margin: 0; }
.gl-steps { display: flex; flex-direction: column; gap: var(--fd-space-14); margin: 0; padding: 0; list-style: none; }
.gl-step { display: flex; align-items: flex-start; gap: var(--fd-space-12); }
.gl-step-mark { flex: none; width: var(--fd-space-20); height: var(--fd-space-20); margin-top: var(--fd-space-1); border: 2px solid var(--auth-line); border-radius: 50%; }
.gl-step[data-state="done"] .gl-step-mark { border-color: var(--ok); background: radial-gradient(circle, var(--ok) 45%, transparent 48%); }
.gl-step[data-state="working"] .gl-step-mark { border-color: var(--accent); border-right-color: transparent; animation: gl-spin 900ms linear infinite; }
.gl-step-body { display: flex; flex-direction: column; gap: var(--fd-space-2); }
.gl-step-label { font-size: var(--fd-text-14); font-weight: 500; color: var(--auth-fg); }
.gl-step[data-state="waiting"] .gl-step-label { color: var(--auth-ink-help); }
.gl-step-detail { font-size: var(--fd-text-12-5); color: var(--auth-ink-help); overflow-wrap: anywhere; }
.gl-chip { flex: none; margin-left: auto; padding: var(--fd-space-3) var(--fd-space-10); border-radius: 999px; border: 1px solid var(--auth-line); font-size: var(--fd-text-12-5); font-weight: 500; color: var(--auth-ink-soft); white-space: nowrap; }
.gl-chip[data-tone="working"] { border-color: var(--accent); color: var(--auth-fg); animation: fd-pulse 1s ease-in-out infinite alternate; }
.gl-chip[data-tone="live"] { border-color: var(--ok); color: var(--ok); }
.gl-chip[data-tone="paused"] { border-color: var(--warn); color: var(--warn); }
.signup-avatar.gl-avatar { font-size: var(--fd-text-12-5); font-weight: 600; color: var(--auth-fg); }
.gl-banner { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: var(--fd-space-12); margin: 0; padding: var(--fd-space-6) var(--fd-space-10) var(--fd-space-6) var(--fd-space-16); border-bottom: 1px solid var(--glass-line); background: var(--glass-1); color: var(--chrome-fg); }
.gl-banner-text { flex: 1; min-width: 0; margin: 0; font-size: var(--fd-text-13-5); color: var(--chrome-fg-soft); }
.gl-banner-text strong { color: var(--chrome-fg); font-weight: 600; }
.gl-banner[data-tone="paused"] .gl-banner-text strong { color: var(--warn); }
.gl-banner-quiet { flex: none; font-size: var(--fd-text-13); color: var(--chrome-fg-soft); }
.button.primary.gl-banner-action { flex: none; padding: var(--fd-space-8) var(--fd-space-18); font-size: var(--fd-text-13-5); }
.icon-button.gl-banner-close { flex: none; width: 28px; height: 28px; padding: 0; border-radius: var(--radius-sm); color: var(--chrome-fg-soft); }
.icon-button.gl-banner-close .icon { width: 16px; height: 16px; }
/* with the banner the console has two rows: the banner across both columns, then the sidebar and the stage */
.console.has-banner { grid-template-rows: auto minmax(0, 1fr); }
.console.has-banner > .sidebar { grid-row: 2; grid-column: 1; height: auto; min-height: 0; }
.console.has-banner > .stage { grid-row: 2; grid-column: 2; }
@keyframes gl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gl-step[data-state="working"] .gl-step-mark { animation: none; border-right-color: var(--accent); border-style: dashed; } .gl-chip[data-tone="working"] { animation: none; } }