/* Mock-only adapters for the provider shell prototype (AGG-1068).
   Everything shared is served from the SPA's own files next to this one: cabinet-fonts.css
   (web/src/styles/fonts.css), tailwind-preflight.css (the Tailwind v4 reset the SPA's base layer
   starts with) and cabinet-theme.css (web/src/styles/theme.css). This file holds only what a static
   page cannot take from those files as they are:
     1. the SPA base layer that theme.css expresses through Tailwind (@apply, theme variables);
     2. the Tailwind utility classes the cabinet markup uses, with Tailwind's own values;
     3. class mirrors of CabinetUI.tsx primitives whose styles live inline in React;
     4. mock-only chrome copied from Layout.tsx (toast) and ChatPanel.tsx (the assistant panel).
   Every block names its source. No values of its own. */

/* ── 1. Base layer (web/src/styles/tailwind.css @theme, theme.css @layer base) ── */
:root {
  /* Tailwind v4 type scale used by theme.css's h1–h4, label, button and input base rules. */
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  /* tailwind.css: the Hub's optical weights behind font-semibold / font-bold. */
  --font-weight-semibold: 510;
  --font-weight-bold: 590;
}
@layer base {
  /* theme.css: `* { @apply border-border outline-ring/50; }` */
  *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--border); outline-color: color-mix(in oklab, var(--ring) 50%, transparent); }
  /* theme.css: `body { @apply bg-background text-foreground; }` */
  body { background-color: var(--background); color: var(--foreground); }
}

/* ── 2. Tailwind utilities used by the cabinet markup (Tailwind v4 values, --spacing: 0.25rem) ── */
@layer utilities {
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed { position: fixed; }
  .inset-0 { inset: 0; }
  .z-40 { z-index: 40; }
  .z-50 { z-index: 50; }
  .flex { display: flex; }
  .grid { display: grid; }
  .hidden { display: none; }
  .flex-1 { flex: 1 1 0%; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-col { flex-direction: column; }
  .items-center { align-items: center; }
  .items-start { align-items: flex-start; }
  .justify-between { justify-content: space-between; }
  .justify-center { justify-content: center; }
  .shrink-0 { flex-shrink: 0; }
  .min-w-0 { min-width: 0; }
  .w-full { width: 100%; }
  .mx-auto { margin-inline: auto; }
  .mb-3 { margin-bottom: 0.75rem; }
  .gap-1 { gap: 0.25rem; }
  .gap-2 { gap: 0.5rem; }
  .gap-3 { gap: 0.75rem; }
  .gap-4 { gap: 1rem; }
  .gap-5 { gap: 1.25rem; }
  .px-6 { padding-inline: 1.5rem; }
  .py-3 { padding-block: 0.75rem; }
  .py-4 { padding-block: 1rem; }
  .space-y-8 > :where(:not(:last-child)) { margin-block-end: 2rem; }
  .space-y-2 > :where(:not(:last-child)) { margin-block-end: 0.5rem; }
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rounded-lg { border-radius: var(--radius); }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .overflow-hidden { overflow: hidden; }
  .cursor-pointer { cursor: pointer; }
  .text-center { text-align: center; }
  .contents { display: contents; }
  /* CabinetUI.tsx CabinetModal: `fixed inset-0 z-[70] flex items-end justify-center p-0 sm:items-center sm:p-6` */
  .z-\[70\] { z-index: 70; }
  .items-end { align-items: flex-end; }
  .p-0 { padding: 0; }
  /* CabinetModal dialog box: `relative flex max-h-[100dvh] w-full flex-col overflow-hidden sm:max-h-[88vh]` */
  .max-h-\[100dvh\] { max-height: 100dvh; }
  /* CabinetModal header: `flex items-start justify-between gap-3 px-6 pb-3 pt-5` */
  .pb-3 { padding-bottom: 0.75rem; }
  .pt-5 { padding-top: 1.25rem; }
  /* CabinetModal scroll area: `min-h-0 flex-1 overflow-y-auto` */
  .min-h-0 { min-height: 0px; }
  .overflow-y-auto { overflow-y: auto; }
  /* ConnectWalletModal.tsx content: `px-6 pb-5`, status line `mb-3 text-xs` (--text-xs: 0.75rem) */
  .pb-5 { padding-bottom: 1.25rem; }
  .text-xs { font-size: var(--text-xs); line-height: calc(1 / 0.75); }
  .inline-flex { display: inline-flex; }
  @media (min-width: 40rem) {
    .sm\:hidden { display: none; }
    .sm\:inline-flex { display: inline-flex; }
    .sm\:items-center { align-items: center; }
    .sm\:p-6 { padding: 1.5rem; }
    .sm\:max-h-\[88vh\] { max-height: 88vh; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 48rem) {
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .lg\:hidden { display: none; }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:flex-row { flex-direction: row; }
    .lg\:items-start { align-items: flex-start; }
    .lg\:justify-between { justify-content: space-between; }
  }
  @media (min-width: 80rem) {
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

/* ── 3. CabinetUI.tsx mirrors — inline React styles as classes. Values are the constants' own. ── */
/* cabinetCardStyle (CabinetCard) */
.cabinet-card { background-color: var(--cabinet-card-bg); border: 1px solid var(--cabinet-card-border); border-radius: 8px; padding: 20px; box-shadow: var(--cabinet-shadow-sm); }
/* cabinetInputStyle */
.cabinet-input { width: 100%; min-width: 0; background-color: var(--cabinet-input-bg); border: 1px solid var(--cabinet-input-border); border-radius: 8px; padding: 7px 12px; min-height: 36px; line-height: 20px; color: var(--cabinet-text); font-size: var(--cabinet-field-font-size, 14px); outline: none; font-family: inherit; }
/* cabinetLabelStyle */
.cabinet-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 510; color: var(--cabinet-text-secondary); }
/* CabinetSectionLabel */
.cabinet-section-label { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--cabinet-text-tertiary); font-weight: 590; text-transform: uppercase; }
/* CabinetCardHeader: `flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between`, marginBottom 20 */
.cabinet-card-header { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 20px; }
@media (min-width: 64rem) { .cabinet-card-header { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.cabinet-card-header__body { min-width: 0; }
.cabinet-card-header__eyebrow { margin-bottom: 8px; }
.cabinet-card-header__title { margin: 0; font-size: 20px; font-weight: 590; letter-spacing: -0.012em; line-height: 28px; color: var(--cabinet-text); }
.cabinet-card-header__text { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--cabinet-text-tertiary); }
.cabinet-card-header__actions { flex-shrink: 0; }
/* CabinetMetricCard (a CabinetCard; the icon is 15px in the accent unless the caller tints it) */
.cabinet-metric__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: var(--cabinet-accent); }
.cabinet-metric__label { font-size: 13px; color: var(--cabinet-text-tertiary); }
.cabinet-metric__value { margin: 0 0 6px; font-size: 28px; font-weight: 590; line-height: 32px; letter-spacing: -0.02em; color: var(--cabinet-text); }
.cabinet-metric__detail { margin: 0; font-size: 12px; color: var(--cabinet-text-tertiary); }
/* CabinetNoticeCard (a CabinetCard at the compact 16px padding, `flex items-start gap-3`, icon 18px) */
.cabinet-notice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 16px; }
.cabinet-notice > svg { flex-shrink: 0; margin-top: 2px; }
.cabinet-notice__body { min-width: 0; }
.cabinet-notice__title { margin: 0 0 4px; font-size: 13px; font-weight: 590; }
.cabinet-notice__text { margin: 0; font-size: 13px; line-height: 20px; color: var(--cabinet-text-secondary); }
.cabinet-notice__children { margin-top: 10px; }
.cabinet-notice--accent { color: var(--cabinet-accent-text); border-color: var(--cabinet-accent-subtle); background-color: var(--cabinet-accent-subtle); }
.cabinet-notice--blue { color: var(--cabinet-info-text); border-color: var(--cabinet-info-subtle); background-color: var(--cabinet-info-subtle); }
.cabinet-notice--warning { color: var(--cabinet-warning-text); border-color: var(--cabinet-warning-subtle); background-color: var(--cabinet-warning-subtle); }
.cabinet-notice--success { color: var(--cabinet-success-text); border-color: var(--cabinet-success-subtle); background-color: var(--cabinet-success-subtle); }
.cabinet-notice--neutral { color: var(--cabinet-text); }
.cabinet-notice--neutral .cabinet-notice__text { color: var(--cabinet-text-tertiary); }
/* CabinetTableShell (a CabinetCard with no padding; the head row is `px-5 py-3.5`) */
.cabinet-table-shell { padding: 0; overflow: hidden; }
.cabinet-table-shell.is-overflow { overflow: visible; }
.cabinet-table-shell__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid var(--cabinet-card-border); }
.cabinet-table-shell__title { margin: 0; font-size: 15px; font-weight: 510; color: var(--cabinet-text); }
.cabinet-table-shell__text { margin: 4px 0 0; font-size: 13px; color: var(--cabinet-text-tertiary); }
.cabinet-table-shell__actions { flex-shrink: 0; }
/* The page tabs of MembersPage.tsx (`flex gap-1`, 2px accent underline) */
.cabinet-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--cabinet-card-border); }
.cabinet-tabs__tab { padding: 10px 20px; font-size: 13px; font-weight: 510; border: 0; border-bottom: 2px solid transparent; background-color: transparent; color: var(--cabinet-text-tertiary); cursor: pointer; }
.cabinet-tabs__tab[aria-selected="true"] { border-bottom-color: var(--cabinet-accent); color: var(--cabinet-text); }
/* MemberAvatar / MemberRoleBadge (app/components/members/MemberRoleBadge.tsx) with lib/roles.ts colours */
.member-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px; font-size: 12px; font-weight: 590; color: var(--member-role-color); background-color: var(--member-role-bg); border: 1px solid var(--member-role-border); }
.member-role { font-size: 10px; font-weight: 590; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 4px; white-space: nowrap; color: var(--member-role-color); background-color: var(--member-role-bg); border: 1px solid var(--member-role-border); }
.is-role-owner { --member-role-color: var(--cabinet-warning); --member-role-bg: var(--cabinet-warning-subtle); --member-role-border: var(--cabinet-warning-subtle); }
.is-role-admin { --member-role-color: #00DD59; --member-role-bg: rgba(0,221,89,0.1); --member-role-border: rgba(0,221,89,0.25); }
.is-role-engineer { --member-role-color: #2563EB; --member-role-bg: rgba(37,99,235,0.1); --member-role-border: rgba(37,99,235,0.25); }
.is-role-member { --member-role-color: var(--cabinet-text-tertiary); --member-role-bg: var(--cabinet-input-bg); --member-role-border: var(--cabinet-input-border); }
.is-role-viewer { --member-role-color: var(--cabinet-text-placeholder); --member-role-bg: var(--cabinet-card-bg); --member-role-border: var(--cabinet-card-border); }

/* CabinetModal (CabinetUI.tsx ~497-585): CABINET_CARD_BORDER, CABINET_RADIUS_LG = 12; the box's maxWidth is the caller's prop and stays inline. */
/* CabinetModal overlay button (inline backgroundColor + border) */
.cabinet-modal__overlay { background-color: var(--cabinet-modal-overlay); border: none; }
/* CabinetModal dialog box */
.cabinet-modal__box { background-color: var(--cabinet-modal-bg); border: 0.5px solid var(--cabinet-card-border); border-radius: 12px; box-shadow: var(--cabinet-shadow-modal); }
/* CabinetModal title and description */
.cabinet-modal__title { margin: 0; font-size: 14px; font-weight: 550; line-height: 20px; color: var(--cabinet-text-strong); }
.cabinet-modal__text { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-tertiary); }
/* An icon button inside an inbox row (the analytics request list): the row's own hover is --cabinet-row-hover, the
   same token .cabinet-icon-btn:hover uses in theme.css, so the button's circle vanishes on a lit row. It takes the
   selected-row tone instead. Proposed for theme.css. */
.cabinet-inbox__row .cabinet-icon-btn:hover { background: var(--cabinet-nav-active); }

/* CabinetModal close: a .cabinet-icon-btn with the header's optical offsets */
.cabinet-modal__close { flex-shrink: 0; margin-top: -4px; margin-right: -6px; }

/* Ask Mia modal (no SPA counterpart yet): the field on the ActivityThread composer's textarea
   (theme.css .cabinet-activity__composer textarea, focus rules included), the foot rule on the
   CabinetTableShell head's hairline. */
.ask__text { box-sizing: border-box; min-height: 52px; max-height: 320px; padding: 0; border: 0; background: transparent; color: var(--cabinet-text); font: inherit; font-size: 13px; line-height: 20px; resize: none; }
.cabinet-navy .ask__text:focus, .cabinet-navy .ask__text:focus-visible { outline: none; box-shadow: none; }  /* over theme.css .cabinet-navy textarea:focus */
.ask__text::placeholder { color: var(--cabinet-text-tertiary); }
.cabinet-modal__foot { border-top: 0.5px solid var(--cabinet-card-border); }

/* ── Proposed for theme.css (founder, 2026-09-22): on a phone the Usage rows keep their control on the
   right and a settlement keeps its date beside the month; the SPA's own max-width: 640px rules drop them
   to a line of their own, which reads as belonging to the next row. To be applied to the operator too. ── */
@media (max-width: 640px) {
  .cabinet-navy .usage-row { flex-wrap: nowrap; }
  .cabinet-navy .usage-row__control { flex-basis: auto; padding-left: 0; }
  .cabinet-navy .usage-lot { grid-template-columns: minmax(0, 1fr) auto; padding-block: 8px; row-gap: 2px; }
  .cabinet-navy .usage-lot__expiry { grid-column: 2; grid-row: 1; text-align: right; }
  .cabinet-navy .usage-lot__left { grid-column: 1 / -1; grid-row: 2; }
}
/* Proposed for theme.css (founder, 2026-09-22): the phone bar stays at the top while the page scrolls, and the
   navigation opens full-width under it (below the bar and its workspace menu, under every overlay). */
@media (max-width: 1023px) {
  .cabinet-navy .cabinet-mobile-bar { position: sticky; top: 0; z-index: 30; }
  /* Above the page's sticky header (20) and the support dock (25), below the bar (30) and the search (45). */
  .cabinet-navy .cabinet-drawer { top: 48px; right: 0; z-index: 28; width: auto; border-right: 0; }
  /* The page header sticks under the bar instead of vanishing behind it. */
  .cabinet-navy .cabinet-page__sticky { top: 48px; }
}

/* Proposed for theme.css (KYB, 2026-09-22): a Usage row that edits a paragraph (the relationship purpose, the
   source of funds) keeps the input's box and grows with the text. */
textarea.usage-input { height: auto; min-height: 64px; padding: 6px 10px; line-height: 18px; resize: vertical; }

/* Proposed for theme.css (KYB, founder 2026-09-22): the Required badge on a Usage row takes the warning tone of
   .cabinet-status--warning so what gates submission stands out. */
.usage-row__badge.is-warning { color: var(--cabinet-warning-text); background: var(--cabinet-warning-subtle); }

/* linear.app/settings/api's settings group (founder, 2026-09-22, the API page): the section's title and lead stand free,
   the rows sit in one elevated card with air; the lead carries a "Docs ↗" link. Proposed for theme.css. */
.settings-page { gap: 40px; }
.settings-page .usage-section { gap: 14px; }
.settings-group { padding: 4px 20px; border-radius: 12px; background: var(--cabinet-elevated); border: 0.5px solid var(--cabinet-card-border); }
.settings-group .usage-row { min-height: 68px; gap: 14px; }
.settings-group .usage-row__name { font-size: 14px; line-height: 20px; }
.settings-group .usage-row__meta { font-size: 13px; line-height: 18px; white-space: normal; }
.settings-group .usage-row__icon { background: var(--cabinet-input-bg); }
.settings-group .usage-row.is-block { display: block; padding: 14px 0 16px; }
.settings-group .usage-row.is-block .usage-section__caption { margin-top: 16px; }
.usage-section__docs { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; color: var(--cabinet-text-strong); text-decoration: none; }
.usage-section__docs:hover { text-decoration: underline; }

/* Proposed for theme.css (founder, 2026-09-23, the Studios and Titles search): a search in a group's head sits where the
   period switch does; the controls after it (a switch, All on / All off) follow it; on a phone the search drops to its
   own full line under the title and those controls. */
.usage-section__head { flex-wrap: wrap; }
.usage-section__head .usage-input { margin-left: auto; }
.usage-section__head .usage-input ~ * { margin-left: 0; }
/* Without a visible title (a studio's Titles, founder 2026-09-23) the search takes the title's place, edge to the sort. */
.usage-section__head .sr-only + .usage-input { margin-left: 0; flex-grow: 1; width: auto; }
.usage-section__head > .cabinet-icon-btn { margin-left: auto; }
/* Several glyphs in a head sit together at the right (the Description group's wand and pencil, 2026-09-24). */
.usage-section__head > .cabinet-icon-btn ~ .cabinet-icon-btn { margin-left: 4px; }
@media (max-width: 640px) {
  .usage-section__head .usage-input { flex-basis: 100%; width: 100%; order: 9; }
  .usage-section__head .usage-input + * { margin-left: auto; }
}

/* Proposed for theme.css (2026-09-23, a title's RTP row on a phone): a row whose control carries a segmented switch (the
   RTP variants) has no room beside its body at 390px, so that control drops under the body as theme.css lays it out; the
   other rows keep their control on the right (founder, 2026-09-22). */
@media (max-width: 640px) {
  .cabinet-navy .usage-row:has(.usage-row__control .purchase__segmented) { flex-wrap: wrap; }
  .cabinet-navy .usage-row__control:has(.purchase__segmented) { flex-basis: 100%; padding-left: 44px; }
}

/* Proposed for theme.css (founder, 2026-09-23, a studio's page): the hero carries the studio's mark, its initials until a
   logo exists, at the glyph's size. */
.cabinet-hero__mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--cabinet-elevated); border: 0.5px solid var(--cabinet-card-border); color: var(--cabinet-text-strong); font-size: 22px; font-weight: 590; letter-spacing: .02em; }

/* Proposed for theme.css (founder, 2026-09-23, a studio's titles): a row may be the link to its own page. The whole row
   answers a click except its controls (the script), its name stays a real link for the keyboard, and the row lights on
   hover out to the card's edge. */
.usage-row__name a { color: inherit; text-decoration: none; }
.settings-group .usage-row[data-href] { cursor: pointer; }
.settings-group .usage-row[data-href]:hover { background: var(--cabinet-row-hover); margin-inline: -20px; padding-inline: 20px; }
/* Proposed for theme.css (founder, 2026-09-23): the header of a page under Game providers is the path to it, every level
   but the last a link. */
.cabinet-crumbs { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cabinet-crumbs a { color: var(--cabinet-text-tertiary); text-decoration: none; }
.cabinet-crumbs a:hover { color: var(--cabinet-text); }
.cabinet-crumbs__sep { display: inline-flex; color: var(--cabinet-text-tertiary); }
.cabinet-crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Proposed for theme.css (founder, 2026-09-23, a studio's page): the lobby switch sits in the hero under the constant line,
   its label beside it. */

/* Proposed for theme.css (founder, 2026-09-23, a studio's page): the hero as X lays a profile out: the cover from the
   studio's materials, the round avatar over its lower edge, the controls on the right at the avatar's level, the name
   and the line under it. */
.cabinet-profile { position: relative; margin: 0; }
.cabinet-profile__cover { position: relative; height: auto; aspect-ratio: 3 / 1; border-radius: 12px; overflow: hidden; background: var(--cabinet-card-bg) center / cover no-repeat; }
.cabinet-profile__cover.is-brand { background: radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--cabinet-accent) 30%, transparent), transparent 62%), linear-gradient(160deg, #142219 0%, #0b0c0d 100%); }
.cabinet-profile__row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -48px; padding: 0 12px; }
.cabinet-profile__avatar { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--cabinet-elevated); border: 4px solid var(--cabinet-panel-bg); box-shadow: 0 0 0 0.5px var(--cabinet-card-border); font-size: 28px; font-weight: 590; letter-spacing: .02em; color: var(--cabinet-text-strong); }
.cabinet-profile__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 10px; }
/* The glyphs (the gear, the message) are one group: on a phone the row wraps between the switch and the group, never
   inside it; the avatar keeps its size. */
.cabinet-profile__glyphs { display: inline-flex; align-items: center; gap: 8px; }
.cabinet-profile__avatar, .cabinet-profile__avatar-wrap { flex-shrink: 0; }
/* The studio's socials (founder, 2026-09-24): glyphs on the release banner's dark plate at the cover's bottom right. The
   plate sits above the avatar row (z-index 1), which overlaps the cover's last 48px and would take the clicks. */
.cabinet-profile__socials { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9999px; background: rgba(9, 9, 10, 0.72); backdrop-filter: blur(6px); }
.cabinet-profile__socials .cabinet-icon-btn { color: #f7f8f8; }
/* Links, not buttons (founder, 2026-09-24): the glyph takes the accent on hover, as a link lights up. */
.cabinet-profile__socials .cabinet-icon-btn:hover { color: var(--cabinet-accent); }
.cabinet-profile__socials .cabinet-icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.cabinet-profile__switch { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--cabinet-text-secondary); cursor: pointer; }
.cabinet-profile__name { margin: 10px 0 0; font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; color: var(--cabinet-text-strong); }
.cabinet-profile__line { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--cabinet-text-secondary); }
@media (max-width: 640px) { .cabinet-profile__cover { height: auto; } }
/* The company's own profile (founder, 2026-09-23): the cover and the logo carry their upload glyph, a chosen logo fills
   the avatar. */
.cabinet-profile__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; }
.cabinet-profile__avatar img.is-word { object-fit: contain; padding: 14px; box-sizing: border-box; }
.cabinet-studio-mark img { background: #fff; object-fit: cover; }
.cabinet-studio-mark img.is-word { object-fit: contain; padding: 1px; box-sizing: border-box; }
.usage-row__icon.cabinet-studio-avatar { background: #fff; overflow: hidden; }
.usage-row__icon.cabinet-studio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.usage-row__icon.cabinet-studio-avatar img.is-word { object-fit: contain; padding: 3px; box-sizing: border-box; }
.cabinet-profile__avatar-wrap { position: relative; display: inline-block; }
.cabinet-profile__upload { position: absolute; cursor: pointer; background: rgba(0, 0, 0, 0.55); color: #fff; }
/* On hover the plate takes the accent (founder, 2026-09-24: an effect, not a shade); the title says what it changes. */
.cabinet-profile__upload:hover { background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); }
.cabinet-profile__cover .cabinet-profile__upload { top: 12px; right: 12px; }
.cabinet-profile__avatar-wrap .cabinet-profile__upload { right: 0; bottom: 6px; }

/* Proposed for theme.css (founder, 2026-09-23, a title's page): the release letter's banner as the page's hero, with the
   key art the letter in Inbox carries; it sits in the page's column, so no letter margins. */
.usage-page > .cabinet-hero--art { margin: 0; }
.cabinet-hero--art.cabinet-release__hero { height: auto; aspect-ratio: 21 / 9; background-position: center; }
@media (max-width: 1023px) {
  .cabinet-hero--art.cabinet-release__hero { height: auto; }
}
.cabinet-hero--art .cabinet-release__name { margin: 0; }
.cabinet-hero--art .cabinet-release__headline { margin: 6px 0 0; }
.cabinet-release__hero-btn svg { margin-left: 4px; }
/* Try demo (founder, 2026-09-24): the accent pill at the banner's bottom right, the name and its line keep the left and
   wrap before it; the lobby pill stays top left. */
.cabinet-hero--art .cabinet-release__hero-text { flex: 1 1 auto; min-width: 0; }
.cabinet-hero--art .cabinet-release__hero-cta { position: relative; z-index: 1; flex-shrink: 0; margin: 0 28px 24px 0; }
.cabinet-release__hero-btn.is-primary { background: var(--cabinet-accent); color: var(--cabinet-text-on-accent); backdrop-filter: none; }
.cabinet-release__hero-btn.is-primary:hover { background: var(--cabinet-accent-hover); }

/* Proposed for theme.css (founder, 2026-09-23, a title's Thumbnails): an album of tiles, each preview at its own ratio at
   one height, the size under it; the tile is the download, its glyph shows on hover. */
.thumb-grid { list-style: none; margin: 0; padding: 12px 0 8px; display: flex; flex-wrap: wrap; gap: 16px 12px; }
.thumb { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.thumb__tile { position: relative; display: block; width: 100%; height: 112px; padding: 0; border: 0.5px solid var(--cabinet-card-border); border-radius: 8px; overflow: hidden; background: var(--cabinet-input-bg); cursor: pointer; }
.thumb__img { display: block; width: 100%; height: 112px; object-fit: cover; }
.thumb__img.is-plain { display: grid; place-items: center; font-size: 11px; color: var(--cabinet-text-tertiary); }
.thumb__dl { position: absolute; right: 6px; bottom: 6px; display: inline-flex; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; opacity: 0; transition: opacity .15s ease; }
.thumb__tile:hover .thumb__dl, .thumb__tile:focus-visible .thumb__dl { opacity: 1; }
.thumb__tile:focus-visible { outline: none; box-shadow: var(--cabinet-focus-ring); }
.thumb__cap { display: flex; flex-direction: column; font-size: 12px; line-height: 16px; color: var(--cabinet-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.thumb__cap small { font-size: 11px; color: var(--cabinet-text-tertiary); }

.usage-row__chevron { display: inline-flex; margin-left: 4px; color: var(--cabinet-text-tertiary); transition: transform .15s ease, color .15s ease; }
.usage-row[data-href]:hover .usage-row__chevron { transform: translateX(3px); color: var(--cabinet-text); }

/* Proposed for theme.css (founder, 2026-09-23): while the studio is off for the lobby its titles' rows stay in place with
   their own state, grey and inert (the wallet option's aria-disabled tone); the switch's own :disabled look is theme.css's. */
.usage-row[aria-disabled="true"] .usage-row__icon, .usage-row[aria-disabled="true"] .usage-row__body { opacity: .5; }
.purchase__segmented button:disabled { opacity: .55; cursor: not-allowed; }
/* theme.css on main (#551): the authenticator code a wallet change asks for when the organization's wallet second factor is on. */
.wallet-connect__code { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.wallet-connect__code .wallet-connect__name { margin-right: auto; }
.wallet-connect__code .usage-input { text-align: left; }

/* Proposed for theme.css (founder, 2026-09-22, the Team invite): a Usage input's focus is a lit border, not the accent
   glow; a select on the Usage anatomy is the same box as the input, text left, with its own chevron. */
.cabinet-navy .usage-input:focus, .cabinet-navy .usage-input:focus-visible { outline: none; box-shadow: none; border-color: var(--cabinet-text-tertiary); }  /* over theme.css .cabinet-navy input:focus */
select.usage-input { width: auto; min-width: 128px; padding: 0 28px 0 10px; text-align: left; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; cursor: pointer; }

/* StepApiConfig.tsx's drop zone (role=button, a tinted tile with the upload glyph, a title, a hint) at the size of a
   CabinetModal field: one row instead of the wizard's 40px block. The lit state while a file hovers is theme.css's
   .is-file-drop-target. Proposed for theme.css with the KYB page. */
.kyb-drop { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px dashed var(--cabinet-input-border); border-radius: 8px; background: var(--cabinet-input-bg); cursor: pointer; transition: background-color 0.2s; }
.kyb-drop:hover { background: var(--cabinet-elevated-hover); }
.kyb-drop:focus-visible { outline: none; box-shadow: var(--cabinet-input-focus); }
.kyb-drop__tile { flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 221, 89, 0.08); color: var(--cabinet-accent); display: inline-flex; align-items: center; justify-content: center; }
.kyb-drop__title { display: block; font-size: 13px; font-weight: 510; line-height: 18px; color: var(--cabinet-text); }
.kyb-drop__size { font-weight: 400; color: var(--cabinet-text-tertiary); }
.kyb-drop__hint { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--cabinet-text-tertiary); }

/* ── 4. Mock-only chrome ── */
/* The cabinet toast (Layout.tsx, the setup-locked toast): `fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-5 py-3` */
.toast { position: fixed; bottom: 4.25rem; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 0.75rem; max-width: 420px; padding: 0.75rem 1.25rem; background-color: var(--cabinet-card-bg); border: 0.5px solid var(--cabinet-card-border); border-radius: 8px; box-shadow: var(--cabinet-shadow-modal); font-size: 13px; color: var(--cabinet-text-secondary); }

/* Mock-only scenario bar. Not a cabinet control: it jumps the fixture the way /api/mock/pulse and /api/mock/usage do for the operator SPA. */
#panel.cabinet-panel { padding-bottom: 64px; }
.mock-scenarios {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  overflow-x: auto;
  background: #101214;
  border-top: 0.5px solid var(--cabinet-card-border);
  color: var(--cabinet-text-secondary);
  font-size: 12px;
  line-height: 16px;
}
.mock-scenarios__toggle,
.mock-scenarios__chip {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 10px;
  border: 0.5px solid var(--cabinet-card-border);
  border-radius: 999px;
  background: transparent;
  color: var(--cabinet-text-secondary);
  font: inherit;
  cursor: pointer;
}
.mock-scenarios__toggle { color: var(--cabinet-text); }
.mock-scenarios__chip.is-active {
  background: var(--cabinet-accent);
  border-color: var(--cabinet-accent);
  color: #08210f;
}
.mock-scenarios__role,
.mock-scenarios__label {
  flex: 0 0 auto;
  color: var(--cabinet-text-tertiary);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mock-scenarios__group { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mock-scenarios.is-collapsed { min-height: 32px; }

/* OrganizationPage.tsx ships this rule inline: the widget grid stacks under 1024px, and a linked card lights its border. */
@media (max-width: 1023px) { .org-widget-grid > * { grid-column: 1 / -1 !important; } }
.hover-card-accent:hover > div { border-color: var(--cabinet-accent); }

/* Proposed for theme.css (founder, 2026-09-24): the AGGREGATOR.GG wordmark as the kicker of the welcome letters, drawn in
   the hero's text colour at the kicker's height. */
.cabinet-release__wordmark { display: inline-block; height: 12px; aspect-ratio: 1359 / 117; line-height: 0; color: var(--cabinet-on-image); }
.cabinet-release__wordmark svg { display: block; width: 100%; height: 100%; }

/* Mock chrome: the pre-auth screens and the welcome flow take the whole window, over the cabinet shell, and scroll on
   their own (the shell's body does not). */
#onboarding { position: fixed; inset: 0; z-index: 40; overflow: auto; background: #08090a; }
#onboarding[hidden] { display: none; }
/* The screens fill the space above the strip, not the viewport. */
#onboarding .auth-page, #onboarding .welcome-page { min-height: 100%; }
/* Pulse's Steps rail on the Telegram screen (founder, 2026-09-24): the rows are lines, not buttons, on the auth page's
   own type; the theme's colours come from html.dark. */
#onboarding .pulse-issue__steps { margin: 0; }
#onboarding .pulse-issue__step { font-size: 14px; }
#onboarding .pulse-issue__step strong { font-weight: 510; color: inherit; }
/* auth.css lays the segmented switch out for the four roles; a three-way one shares the bar evenly too. */
.auth-segment--three { grid-template-columns: repeat(3, 1fr); }
/* welcome.css folds .welcome-cards--two to one column on a phone but never declares the two columns: here they are. */
.welcome-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The welcome pack as the reward card on the updates screen (founder, 2026-09-24): the mark in the corner, the number,
   three lines of what it is. */
/* The card wears the welcome letter's brand hero (founder, 2026-09-24): its gradient and the faint mark in the corner. */
.welcome-reward { position: relative; overflow: hidden; padding: 24px; background: radial-gradient(90% 120% at 15% 0%, rgba(0, 221, 89, 0.3), transparent 62%), linear-gradient(160deg, #142219 0%, #0b0c0d 100%); border-color: rgba(0, 221, 89, 0.35); }
.welcome-reward__mark { position: absolute; top: 16px; right: 16px; line-height: 0; color: rgba(255, 255, 255, 0.07); pointer-events: none; }
.welcome-reward > :not(.welcome-reward__mark) { position: relative; }
/* A re-render of the same screen keeps the stage still; the rise plays once per screen. */
.welcome-stage-inner.is-still .welcome-panel { animation: none; }
.welcome-reward .welcome-big { margin-top: 4px; }
.welcome-reward__lines { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0, 221, 89, 0.22); }
.welcome-reward .welcome-check { padding: 5px 0; color: #d0d6e0; }
/* The eight sources fill the switch's four columns twice; on a phone two columns, four rows. */
@media (max-width: 480px) { #onboarding .auth-segment--wrap { grid-template-columns: repeat(2, 1fr); } }

/* The operator's wizard as staging runs it (2026-09-24). The mock has no game to frame, so the cover's art stands at the
   frame's size; a cover's hover word comes from data-hover, since data-action is the click delegate's; a cover the search
   hides stays hidden under the theme's display rule, as does the grid when nothing matches. */
.pulse-wizard__frame { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; }
.pulse-wizard__frame .pulse-wizard__tile-name { font-size: 22px; line-height: 26px; }
.pulse-wizard__tile-art[data-hover]::after { content: attr(data-hover); }
.pulse-wizard__tile[hidden], .pulse-wizard__tiles[hidden] { display: none; }

/* Licences and settings stay visible on a studio card, but this preview does not open those pages. */
.cabinet-profile__glyphs .cabinet-icon-btn:disabled { cursor: default; opacity: 1; }
.cabinet-profile__glyphs .cabinet-icon-btn:disabled:hover { background: transparent; }

/* The Profile's hero carries the person's avatar with its upload glyph, as Company's does (founder, 2026-09-24): the glyph's
   box takes the avatar's size and keeps still. */
.cabinet-hero[data-testid="profile-welcome"] .cabinet-hero__glyph { width: auto; height: auto; animation: none; filter: none; }

/* The studio's catalogue in the settings anatomy (founder, 2026-09-24): a title's art as its row's glyph, a variant off
   for operators dims its row, the two Play pills side by side at the banner's bottom right, the game in place under the
   banner, the press release form as a block row. */
.cat-row__art { overflow: hidden; border-radius: 8px; }
.cat-row__art img { width: 100%; height: 100%; object-fit: cover; }
.cabinet-hero--art .cabinet-release__hero-ctas { position: relative; z-index: 1; display: inline-flex; gap: 8px; flex-shrink: 0; margin: 0 28px 24px 0; }
.cabinet-hero--art .cabinet-release__hero-ctas .cabinet-release__hero-cta { margin: 0; }
@media (max-width: 640px) { .cabinet-hero--art .cabinet-release__hero-ctas { margin: 0 16px 16px 0; } }

/* A title's banner on a phone (2026-09-24): the name and its line take the room they need under the pill, the Play
   pills wrap under them; the game bar's New tab stays on one line. */
@media (max-width: 640px) {
  .cabinet-hero--art { flex-wrap: wrap; height: auto; min-height: 220px; padding-top: 56px; }
  .cabinet-hero--art .cabinet-release__hero-ctas { margin: 0 16px 16px auto; }
  .pulse-wizard__game-bar .pulse-wizard__textbtn { white-space: nowrap; }
}

/* The Profile's hero edits the name in place (founder, 2026-09-24): the pencil beside it, the field with Save and Cancel where the name was. */
.me-hero__edit { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.me-hero__edit .cabinet-icon-btn { width: 24px; height: 24px; }
.me-hero__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.me-hero__form .usage-input { width: min(220px, 100%); text-align: center; font-size: 16px; font-weight: 600; }

/* The Profile's last card is the way out (founder, 2026-09-24, Linear's Leave workspace): the card outlined in red, the
   action in red, lighting up on hover. */
.me-danger .usage-rows.settings-group { border: 1px solid color-mix(in srgb, var(--cabinet-error) 45%, transparent); }
.cabinet-navy .cabinet-btn.me-danger__btn { color: var(--cabinet-error-text); }
.cabinet-navy .cabinet-btn.me-danger__btn:hover { background: var(--cabinet-error-subtle); color: var(--cabinet-error-text); }

/* A title's cover uploads from its banner (founder, 2026-09-24): the glyph sits in the banner's top row, at its right. */
.cabinet-release__hero-top .cat-cover__upload { position: static; margin-left: auto; }

/* A form as a block row on a title's page (the certificate to add). */
.cat-form { display: grid; gap: 8px; width: 100%; }

/* Volatility in flames (founder, 2026-09-24): five, the lit ones amber. */
.cat-flames { display: inline-flex; gap: 1px; margin-right: 8px; vertical-align: -2px; color: var(--cabinet-text-placeholder); }
.cat-flames .is-on { color: var(--cabinet-warning-text); }

/* The studio's own upload in an album (founder, 2026-09-24): Remove at the tile's top right. */
.thumb { position: relative; }
.thumb__rm { position: absolute; top: 6px; right: 6px; display: inline-flex; padding: 4px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.6); color: #ffffff; cursor: pointer; }
.thumb__rm:hover { background: var(--cabinet-error); }

/* The Description group (founder, 2026-09-24: in the anatomy, the title with the wand and the pencil in its head, the
   words on the card); the editor takes the row. */
.cat-desc__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--cabinet-text-secondary); white-space: pre-line; }
.cat-desc__text.is-empty { color: var(--cabinet-text-tertiary); }
.cat-desc__form { display: grid; gap: 8px; }
.cat-desc__form .usage-input { width: 100%; max-width: none; min-height: 76px; resize: none; overflow: hidden; field-sizing: content; }

/* GameLaunchModal.tsx over the page (founder, 2026-09-24: Play demo opens a dialog of its own, the content stays put). The
   SPA styles the dialog inline; these are its values: the backdrop, the bar with the name and the round close, the game
   filling the rest. */
.game-launch-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); }
.game-launch-modal-inner { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
.game-launch-modal__bar { display: flex; align-items: center; justify-content: space-between; height: 48px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--cabinet-card-border); background: rgba(0, 0, 0, 0.6); }
.game-launch-modal__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 590; color: #ffffff; }
.game-launch-modal__close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin-left: 12px; border: 1px solid var(--cabinet-input-border); border-radius: 50%; background: var(--cabinet-input-bg); color: var(--cabinet-text-secondary); cursor: pointer; transition: background-color 150ms, color 150ms; }
.game-launch-modal__close:hover { background: var(--cabinet-row-hover); color: #ffffff; }
.game-launch-modal__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.game-launch-modal__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.game-launch-modal__fallback { position: absolute; inset: 0; display: grid; place-items: end center; }
.game-launch-modal__fallback p { margin: 0 0 28px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 13px; }
.game-launch-modal__stage .pulse-wizard__tile-name { font-size: 22px; line-height: 26px; }