/* sm-interop.css: lets the shared design system (all of it in @layer sm.*) work next to the Portal's old unlayered stylesheets, until those are deleted.
   site.css has `* { margin: 0; padding: 0 }`, `a { color }`, `button { font }` and heading rules outside any layer, which beat every layered design-system rule. Those rules
   (site.css, and the old text-field look in ds-auth.css) now skip elements that carry an sm- or smp- class, so the design system's layered rules apply directly. They used to
   be undone here with revert-layer; it resolved to 0 for padding in some Safari builds (buttons and inputs with no side padding), so nothing here depends on it for margin or
   padding. A Portal class on the same element still wins by order. Delete this file with the last ds-* stylesheet. */

/* The design system's reset layer styles every form control (font, colour, line height). Controls the Portal styles itself keep their own rules; for the rest (no Portal rule, no sm- class)
   `revert` gives the browser's own look back, as before the design system loaded. The selector has specificity 0, so any Portal rule on the same control still wins. */
:where(input, select, textarea, button):where(:not([class^="sm-"]):not([class*=" sm-"]):not([class^="smp-"]):not([class*=" smp-"])) { font: revert; color: revert; line-height: revert; letter-spacing: revert; }

/* The design system's html defaults change page behaviour for every old page (a reserved scrollbar gutter narrows short pages and re-wraps text; smooth scrolling and scroll padding change anchor jumps).
   Put the browser defaults back until the old stylesheets are deleted; a Portal rule on html (same specificity, loaded later) still wins. */
html { scrollbar-gutter: auto; scroll-behavior: auto; scroll-padding-block-start: auto; font-feature-settings: normal; accent-color: auto; tab-size: 8; }
/* thin scrollbars everywhere narrow the page and every scroll area: browser default again */
* { scrollbar-width: auto; scrollbar-color: auto; }

/* The design system's reset makes every svg display:block and max-width:100%. Inline svgs the Portal draws itself keep the browser's own display and width rules (specificity 0: a Portal rule still wins). */
:where(svg):where(:not([class^="sm-"]):not([class*=" sm-"]):not([class^="smp-"]):not([class*=" smp-"])) { display: revert; max-inline-size: revert; max-width: revert; }

/* Bare buttons keep the browser's background (the reset makes it transparent); strong/b keep `bolder`. Specificity 0 again. */
:where(button):where(:not([class^="sm-"]):not([class*=" sm-"]):not([class^="smp-"]):not([class*=" smp-"])) { background-color: revert; }
:where(strong, b):where(:not([class^="sm-"]):not([class*=" sm-"]):not([class^="smp-"]):not([class*=" smp-"])) { font-weight: revert; }

/* The app bar's logo: the Portal's unlayered `img` rules beat the design system's layered light/dark switch, so all three images showed. Which one shows is decided here:
   the light lockup, the white lockup in dark mode, and on phones the square mark alone. */
.smp-appbar__brand > img { display: none; }
.smp-appbar__brand > .sm-logo__light { display: block; }
html[data-theme="dark"] .smp-appbar__brand > .sm-logo__light { display: none; }
html[data-theme="dark"] .smp-appbar__brand > .sm-logo__dark { display: block; }
@media (max-width: 768px) {
  html[data-theme] .smp-appbar__brand > img:is(.sm-logo__light, .sm-logo__dark) { display: none; }
  html[data-theme] .smp-appbar__brand > img.smp-appbar__mark { display: block; }
}

/* Account menu rows: site.css gives bare buttons a lighter weight than links; every row is one weight. */
.smp-usermenu__panel :is(a, button).sm-menu__item { font-family: inherit; font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-medium); line-height: inherit; }

/* Colour bridge: the old --ds-* colour tokens (ds-tokens.css, loaded just before this file) take their values from the design system's semantic tokens, so every page still written
   with ds-* rules wears the shared palette (docs/foundations/color: navy-slate neutrals, SciMynd Blue for action, fixed status colours), in light and dark, without a markup change.
   The --sm-* tokens switch with data-theme (sm-portal.js keeps it in step with data-ds-theme). Same selectors as ds-tokens.css, so this later file wins. Delete a line here
   when the last rule using that --ds-* token is gone. */
:root, :root[data-ds-theme="dark"], .ds-dark {
  --ds-brand-600: var(--sm-primary); --ds-brand-700: var(--sm-text-brand); --ds-brand-500: var(--sm-primary); --ds-brand-400: var(--sm-text-link);
  --ds-accent-cyan: var(--sm-accent); --ds-brand-tint: var(--sm-primary-subtle); --ds-on-brand: var(--sm-on-primary);
  --ds-bg: var(--sm-bg-app); --ds-bg-soft: var(--sm-bg-subtle); --ds-surface: var(--sm-surface); --ds-surface-2: var(--sm-surface-sunken);
  --ds-text: var(--sm-text); --ds-text-body: var(--sm-text-secondary); --ds-text-muted: var(--sm-text-muted); --ds-text-faint: var(--sm-text-muted);
  --ds-border: var(--sm-border-subtle); --ds-border-strong: var(--sm-border); --ds-focus: var(--sm-focus-ring);
  --ds-success: var(--sm-success); --ds-success-ink: var(--sm-success-text); --ds-success-bg: var(--sm-success-subtle);
  --ds-warning: var(--sm-warning); --ds-warning-ink: var(--sm-warning-text); --ds-warning-bg: var(--sm-warning-subtle);
  --ds-danger: var(--sm-danger); --ds-danger-ink: var(--sm-danger-text); --ds-danger-bg: var(--sm-danger-subtle);
  --ds-info: var(--sm-info); --ds-info-ink: var(--sm-info-text); --ds-info-bg: var(--sm-info-subtle);
  --ds-sh-1: var(--sm-shadow-sm); --ds-sh-2: var(--sm-shadow-md); --ds-sh-3: var(--sm-shadow-xl);
}
/* Buttons keep the design system's fill and hover (white text on SciMynd Blue), not the old kit's light-blue-on-dark. */
html body.app-shell { --app-btn-fill: var(--sm-primary); --app-btn-fill-hover: var(--sm-primary-hover); --app-btn-line: var(--sm-primary-border); }


/* An icon-only button is a square: the revert above hands it the plain button's side padding, which squeezed the icon to a dot (dialog close, row menu). */
.sm-btn.sm-btn--icon, .ds-admin .sm-btn.sm-btn--icon.sm-btn, .ds-ref .sm-btn.sm-btn--icon.sm-btn { padding: 0; justify-content: center; }

/* site.css has an unlayered `:focus-visible { outline: 3px solid }` that beat the design system's `.sm-input:focus { outline: none }`, so a focused field wore two rings (that outline plus the design system's border and soft ring). The field keeps the design system's one indicator: the focus-coloured border and ring. */
.sm-input:focus, .sm-input:focus-visible { outline: none; }
/* ...and console.css draws its own 2px outline on every focused control inside the consoles' .portal-content (specificity 0,3,2), so there a field still wore two rings
   (checked by computed style: outline 2px plus the design system's ring). The same rule one step stronger (0,4,1); every other control keeps that outline. */
:is(body.admin, .org-console, .account-console) .portal-content .sm-input:is(:focus, :focus-visible) { outline: none; }

/* One focus indicator for every text field in the portal: the design system's own (.sm-input: the focus-coloured border plus its soft ring), no outline, radius untouched.
   The older field systems each drew something different -- .form-input a border and a tint halo (account.css, console.css), .ds-field__control a border and an inset line
   (ds-components.css), the marketing .field a bare border (site.css). They now match .sm-input. An invalid field keeps its error border. The repeated :is(:focus, :focus-visible)
   and the html body prefix are only there to out-rank the consoles' own `.portal-content ...:is(:focus, :focus-visible)` rules (0,4,1) without !important. */
html body :is(.form-input, .ds-field__control, .field input:not([type=checkbox], [type=radio], [type=range], [type=file]), .field select, .field textarea):not([aria-invalid=true], .input-validation-error, .is-invalid):is(:focus, :focus-visible):is(:focus, :focus-visible):is(:focus, :focus-visible) {
  outline: none;
  border-color: var(--sm-focus-ring);
  box-shadow: 0 0 0 var(--sm-focus-width) color-mix(in oklab, var(--sm-focus-ring) 35%, transparent);
}

/* The admin stylesheets give every direct <section> of the page a top margin; the overview's grids are spaced by the page's own gap (the design system's dashboard template stacks its sections with one gap). */
.portal-content.ds-admin > section.smp-overview, .portal-content.ds-admin > section.smp-metrics { margin-top: 0; }

/* The overview's cards sit the same distance apart sideways and down: the page's own gap (28px) is set to the grids' 24px on this page. */
.portal-content.ds-admin:has(> .smp-overview), .portal-content.ds-admin:has(> .smp-page-head) { gap: var(--sm-space-6); }
.portal-content.ds-admin > :is(.smp-page-head, .smp-views, .smp-list, .smp-overview, .smp-metrics, .smp-sections, .sm-alert) { margin-block: 0; }

/* All dialogs are strictly centered on screen; ensure .ds-admin > * + * or other combinators never add a top margin */
:is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog,
.ds-admin > dialog.sm-dialog,
.ds-admin > dialog.ds-sheet,
.ds-admin > dialog.ui-dialog {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
}

/* Plan workspace (every /admin/plans/{id} page): the head is a page head (name left, Change menu in the right corner), the facts a quiet line, the tabs the design system's. */
.ds-admin .pw-head { position: static; margin: 0; padding: var(--sm-space-4) 0 0; background: none; border: 0; border-bottom: 1px solid var(--sm-border-subtle); border-radius: 0; box-shadow: none; display: grid; gap: var(--sm-space-3); }
.ds-admin .pw-head .smp-page-head__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sm-space-3) var(--sm-space-4); }
.ds-admin .pw-head__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sm-space-1) var(--sm-space-3); min-width: 0; flex: 1 1 12rem; }
.ds-admin .pw-head__name { font-size: var(--sm-font-size-2xl); font-weight: var(--sm-font-weight-bold); line-height: 1.2; color: var(--sm-text); text-decoration: none; overflow-wrap: anywhere; }
.ds-admin .pw-head__code { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
.ds-admin .pw-head .smp-page-head__actions { margin-inline-start: auto; }
.ds-admin .pw-head__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-4); font-size: var(--sm-font-size-sm); color: var(--sm-text); }
.ds-admin .pw-head__k { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--sm-text-secondary); }
.ds-admin .pw-head__muted { color: var(--sm-text-muted); }
.ds-admin .pw-head .pw-tabs { margin: 0; padding: 0; overflow-x: auto; }
.ds-admin .pw-lead { margin: 0; font-size: var(--sm-font-size-md); color: var(--sm-text-secondary); }
.ds-admin .pw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sm-space-4); margin: 0; }
.ds-admin .pw-tile { display: grid; gap: var(--sm-space-1); align-content: start; padding: var(--sm-space-4) var(--sm-space-5); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); box-shadow: none; }
.ds-admin .pw-tile__k { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--sm-text-secondary); }
.ds-admin .pw-tile__v { font-size: var(--sm-font-size-xl); font-weight: var(--sm-font-weight-semibold); line-height: 1.25; color: var(--sm-text); }
.ds-admin .pw-tile__sub { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
@media (max-width: 900px) { .ds-admin .pw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ds-admin .pw-tiles { grid-template-columns: minmax(0, 1fr); } }
.ds-admin:has(> .pw-head) { display: grid; gap: var(--sm-space-5); align-content: start; }
.ds-admin > .pw-head + .sm-alert, .ds-admin > .pw-head ~ .pw-saved { margin: 0; }
/* Plan cards (plans list, narrow): the row-hover tint must not paint every cell as a block. */
.smp-plans .smp-table--cards :is(td, th) { background: transparent; }
.smp-plans .smp-list__head { flex-wrap: wrap; }
.ds-admin .sm-table caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Card tables (phones): each row is a card, so the row-hover tint must not paint every cell as a lighter block inside it. */
@media (max-width: 640px) { .smp-table--cards :is(tr, tr:hover) > :is(td, th) { background: transparent; } }
/* site.css colours every link (`a { color }` and `a:hover`, unlayered; 3.6:1 on a dark card): text links on the auth pages and the status cards take the design system's link colour instead. */
:is(.auth.smp-auth :is(.auth-forgot, .auth-alt), .smp-status) a:not([class]):is(:link, :visited, :hover, :focus-visible, :active) { color: revert-layer; }
/* The eye button site.js adds to a password field is 36px (site.css .pw-toggle): the 44px tap floor on the design-system pages. */
:is(.smp-auth, .smp-status) .sm-field .pw-box .pw-toggle { inline-size: var(--smp-tap); block-size: var(--smp-tap); right: 0; }
/* Org console: every section and card heading is the design system's card title, left-aligned, one look on every page (owner feedback 2026-10-29: "ROLE" and
   "FEATURES" were small uppercase and centred while other cards were not). The legacy ds-setlabel / ds-ref-card__title / feat-group-title / uc-title rules (unlayered,
   up to five classes deep) set their own size, case and spacing on the same h2; the doubled class outranks them and takes sm-card__title back. Delete with those sheets. */
.ds-org-page.org-console .portal-content h2.sm-card__title.sm-card__title { font: revert-layer; letter-spacing: revert-layer; text-transform: revert-layer; color: revert-layer; text-align: start; align-self: stretch; }

/* A card title inside a row-style header (group summary with a count pill and chevron) is centred on the row, not stretched to the full height, so its text lines up with the pill. */
.ds-org-page.org-console .portal-content :is(.oa-grp__head, .feat-group-head) > h2.sm-card__title.sm-card__title { align-self: center; }
/* Org console, owner alignment feedback 2026-10-29. A field next to buttons in one row (find-a-feature toolbar, usage dates) keeps the 16px bottom margin
   ds-field gives a stacked form, which drops the buttons 16px below the input: no margin there, so input and buttons share a baseline. */
.ds-org-page.org-console .portal-content :is(.oa-toolbar, .os-dates) > .sm-field { margin-block-end: 0; }
/* Member page: the seat actions ("Give this seat to someone else", "Take the seat back") wrap inside the row instead of running past it at 375px. */
.ds-org-page.org-console .portal-content .op-setrow-act { flex: 1 1 auto; min-inline-size: 0; flex-wrap: wrap; }
.ds-org-page.org-console .portal-content .op-setrow-act > .sm-btn { max-inline-size: 100%; white-space: normal; }
/* Org filter chips and small text links: the 44px tap floor; a count badge at least 12px. */
.ds-org-page.org-console .portal-content :is(.ds-ref-filters > :is(a, button), .sm-chip, .ds-pick__link) { min-block-size: var(--smp-tap); }
.ds-org-page.org-console .portal-content .oa-feats--org .oa-bar nav.ds-ref-filters button { min-height: var(--smp-tap); }
.ds-org-page.org-console .portal-content .ds-pick__link { display: inline-flex; align-items: center; }
.ds-org-page .sm-count { font-size: var(--sm-font-size-xs); }
.ds-org-page.org-console .portal-content .sm-field .pw-box .pw-toggle { inline-size: var(--smp-tap); block-size: var(--smp-tap); right: 0; }
/* Text-styled controls on a dark card ("More filters", "Select group") take the design system's link colour (3.6:1 before). */
.ds-org-page.org-console .portal-content :is(details > summary.ds-ref-more, .ds-ref-filterbar details > summary, .ds-pick__link, .op-seats__link) { color: var(--sm-text-link); }
/* Plain text links inside Org pages: site.css colours every link (unlayered, 3.6:1 on a dark card); they take the design system's link colour, as on the auth pages. */
.ds-org-page.org-console .portal-content a:not([class]):is(:link, :visited, :hover, :focus-visible, :active) { color: var(--sm-text-link); }
/* The auto top-up panel's figure labels (sm-kv, 11px in the design system) read at the 12px floor on the Org page. */
.ds-org-page .sm-kv__label { font-size: var(--sm-font-size-xs); }
/* Org cards: the legacy card head and filter bar pad 20px inside the design system card's own padding, so list cards ("Credit pools", "Who holds a seat")
   started their heading 20px further in than the other cards. Inside an sm-card they take the card's padding only: every heading on one inset. */
.ds-org-page.org-console .portal-content .sm-card.ds-ref-card > :is(.ds-ref-card__head, .ds-ref-filterbar) { padding-inline: 0; }
.ds-org-page.org-console .portal-content .sm-card.ds-ref-card > .ds-ref-card__head:first-child { padding-block-start: 0; }

/* One focus ring in a dialog: site.css has an unlayered `:focus-visible { outline: 3px; offset: 3px }` that drew a thick ring (and with the design system's own, a double one) on the close button, links and
   buttons. Inside a dialog buttons and links wear exactly the design system's ring: 2px, offset 2px. Fields keep their own border ring. */
.sm-dialog :is(button, a, summary, [tabindex]):focus-visible { outline: var(--sm-focus-width, 2px) solid var(--sm-focus-ring); outline-offset: var(--sm-focus-offset, 2px); box-shadow: none; }
/* The title takes focus when a dialog opens with no field to type in (ds-admin.js); it is not a control, so no ring on it. */
.sm-dialog__title:focus, .sm-dialog__title:focus-visible { outline: none; }
/* admin.css gives every fieldset in the console a bottom margin (unlayered, so it beats the layered portal rules): inside a dialog's form the 16px grid gap alone spaces the blocks. */
.sm-dialog .sm-dialog__body > form > :not(.smp-actions--end) { margin-block: 0; }
/* The console's older rules (op-*, ds-field, hints) set their own margins on a dialog's blocks and on the description; unlayered, they beat the layered portal rules. One 8px under the title, one 16px between blocks. */
.sm-dialog .sm-dialog__description { margin: var(--sm-space-2) 0 0; }
.sm-dialog .sm-dialog__body > :not(.smp-actions--end) { margin-block: 0; }
.sm-dialog .sm-dialog__body > :is(ul, table, .sm-table-wrap, .sm-field, .ds-field) + :is(.sm-field__hint, .ds-field__hint) { margin-block-start: calc(-1 * var(--sm-space-2)); }
/* A form that wraps a dialog's header, body and footer must not space them (ds-ref-form / smp-form carry a 16px gap): the header's own spacing and the body's padding do. */
.sm-dialog > form { gap: 0; row-gap: 0; }

/* Choice card fieldsets in dialogs/admin never carry boxed borders or etched legends from legacy admin.css */
.portal-content fieldset:is(.smp-choices, .sm-fieldset, .org-choices),
fieldset:is(.smp-choices, .sm-fieldset, .org-choices) {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.portal-content fieldset:is(.smp-choices, .sm-fieldset, .org-choices) > legend,
fieldset:is(.smp-choices, .sm-fieldset, .org-choices) > legend {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 var(--sm-space-2, 8px) !important;
  font-size: var(--sm-font-size-sm, 14px) !important;
  font-weight: var(--sm-font-weight-semibold, 600) !important;
  color: var(--sm-text, inherit) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}


/* [SPEC-UI-06] One page column and one gap for every console page. The legacy shells set 16, 20, 24 and 28px gaps and three max widths (admin.css, console.css, ds-org.css,
   ds-admin.css); this wins over all of them by specificity. The overview page (.ds-ov) keeps its own tiles and width. */
body .portal-content.portal-content:not(.ds-ov) { gap: var(--smp-page-gap); max-width: var(--smp-page-max); margin-inline: auto; }