/* sm-portal.css: the Portal-owned layer of the shared design system (@layer sm.portal, after sm.utilities). Loaded with the design system's CSS while
   the layouts include the design system. It holds only what the Portal needs and the design system does not have yet; class names start smp- (not sm-), so the
   design-system linter keeps flagging a made-up sm- class. Tokens are --sm-* only (no hex, no raw colour); Portal floors: text >= 12px (--sm-font-size-xs),
   controls and tap targets 44px (--smp-tap), 375px wide, light and dark (the tokens switch with data-theme).
   Gaps and where they should end up (listed in SPEC.md): entity page head, sticky save bar, card table on phones, styled select
   list, opened-row details band, admin shell (grouped sidebar + context switcher), settings rows. Each is a candidate to move into the design system
   itself; when one lands there, delete it here and rename the markup. */

@layer sm.portal {
  /* The page rhythm [SPEC-UI-06]: one set of layout tokens for every console page (Admin, Org, Account). Spacing is the design system's 4px scale
     (--sm-space-*), the gutter and container widths are its layout tokens; the shells (console.css, account.css) and the lists, cards and forms below read these. */
  :root {
    --smp-tap: 2.75rem;
    --smp-page-max: var(--sm-container-2xl);     /* the content column never grows past 90rem */
    --smp-page-pad-top: var(--sm-space-8);
    --smp-page-pad-bottom: var(--sm-space-14);
    --smp-page-gap: var(--sm-space-6);           /* between the regions of a page: head, notices, lists, cards */
    --smp-section-gap: var(--sm-space-4);        /* inside a region: a list head, its filter bar, its table */
    --smp-card-pad: var(--sm-space-5);           /* inside a card or panel */
    --smp-form-gap: var(--sm-space-4);           /* between the rows of a form */
  }

  /* ---------------------------------------------------------- floors: the design system's small controls are 32-40px; the Portal's are 44px */
  .sm-btn, .sm-input, .sm-btn--sm { min-block-size: var(--smp-tap); }
  .sm-btn--icon { min-inline-size: var(--smp-tap); }
  .sm-check, .sm-switch { min-block-size: var(--smp-tap); align-items: center; }
  .sm-count { font-size: var(--sm-font-size-xs); }
  .smp-list .sm-tabs--pills .sm-tabs__tab { min-block-size: var(--smp-tap); }

  /* ---------------------------------------------------------- entity page head */
  .smp-page-head { display: grid; gap: var(--sm-space-2); padding-block: 0 var(--sm-space-4); border-bottom: 1px solid var(--sm-border-subtle); margin-bottom: 0; }
  .smp-page-head__top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sm-space-3) var(--sm-space-4); }
  .smp-page-head__title { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: var(--sm-font-size-2xl); font-weight: var(--sm-font-weight-bold); line-height: 1.2; color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-page-head__sub { margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-page-head__chips { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); }
  .smp-page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); margin-inline-start: auto; }
  @media (max-width: 480px) { .smp-page-head__actions { margin-inline-start: 0; width: 100%; } .smp-page-head__actions > * { flex: 1 1 auto; } }

  /* ---------------------------------------------------------- sticky save bar */
  .smp-savebar { position: sticky; bottom: 0; z-index: var(--sm-z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-3); padding: var(--sm-space-3) var(--sm-space-4); padding-bottom: max(var(--sm-space-3), env(safe-area-inset-bottom)); background: var(--sm-surface-raised); border-top: 1px solid var(--sm-border); box-shadow: var(--sm-shadow-md); }
  .smp-savebar[hidden] { display: none; }
  .smp-savebar__msg { flex: 1 1 12rem; min-width: 0; margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-savebar__actions { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); margin-inline-start: auto; }
  @media (max-width: 480px) { .smp-savebar__actions { width: 100%; margin-inline-start: 0; } .smp-savebar__actions > * { flex: 1 1 0; } }

  /* ---------------------------------------------------------- card table on phones: .sm-table.smp-table--cards, cells carry data-label */
  @media (max-width: 640px) {
    .smp-table--cards { display: block; border: 0; }
    .smp-table--cards thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .smp-table--cards tbody, .smp-table--cards tr { display: block; }
    .smp-table--cards tr { margin-bottom: var(--sm-space-3); padding: var(--sm-space-3) var(--sm-space-4); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); }
    .smp-table--cards td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm-space-4); padding: var(--sm-space-1-5) 0; border: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; }
    .smp-table--cards td::before { content: attr(data-label); flex: none; font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); text-align: start; }
    .smp-table--cards td[data-label=""]::before, .smp-table--cards td:not([data-label])::before { content: none; }
    /* Long unbreakable text (an email, a code, an id) wraps inside its card instead of widening it and putting a sideways scroll on the page. */
    .smp-table--cards tr { min-inline-size: 0; }
    .smp-table--cards td { overflow: hidden; }
    .smp-table--cards td :where(div, span, code, a, p, small):not(.sm-btn, .sm-badge, .sm-avatar, .sm-count) { min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
  }

  /* A card-capable table that does not fit a tablet (641 to 1280px, portrait and landscape) would hide its last columns behind a sideways scroll: ds-admin.js marks it .is-stacked, and its
     rows become cards here too, in as many columns as fit, with the same labelled cells as on a phone. A table that fits keeps its columns. */
  @media (min-width: 641px) and (max-width: 1280px) {
    .smp-table--cards.is-stacked { display: block; border: 0; }
    .smp-table--cards.is-stacked thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .smp-table--cards.is-stacked tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--sm-space-3); }
    .smp-table--cards.is-stacked tr { display: block; margin: 0; padding: var(--sm-space-3) var(--sm-space-4); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-md); }
    .smp-table--cards.is-stacked :is(tr, tr:hover) > :is(td, th) { background: transparent; }
    .smp-table--cards.is-stacked td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sm-space-4); padding: var(--sm-space-1-5) 0; border: 0; text-align: end; min-width: 0; overflow-wrap: anywhere; }
    .smp-table--cards.is-stacked td::before { content: attr(data-label); flex: none; font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); text-align: start; }
    .smp-table--cards.is-stacked td[data-label=""]::before, .smp-table--cards.is-stacked td:not([data-label])::before { content: none; }
    .smp-table--cards.is-stacked td.smp-table-rowmenu { inline-size: auto; justify-content: flex-end; }
    .smp-table--cards.is-stacked tr { min-inline-size: 0; }
    .smp-table--cards.is-stacked td { overflow: hidden; }
    .smp-table--cards.is-stacked td :where(div, span, code, a, p, small):not(.sm-btn, .sm-badge, .sm-avatar, .sm-count) { min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; text-align: end; }
  }

  /* ---------------------------------------------------------- styled select list (button + listbox) */
  .smp-listbox { position: relative; }
  .smp-listbox__button { display: flex; align-items: center; justify-content: space-between; gap: var(--sm-space-2); inline-size: 100%; min-block-size: var(--smp-tap); padding: 0 var(--sm-space-3); font: inherit; font-size: var(--sm-font-size-sm); color: var(--sm-text); background: var(--sm-surface); border: 1px solid var(--sm-border-control); border-radius: var(--sm-radius-control); cursor: pointer; text-align: start; }
  .smp-listbox__button:hover { border-color: var(--sm-border-control-hover); }
  .smp-listbox__list { position: absolute; inset-inline: 0; top: calc(100% + var(--sm-space-1)); z-index: var(--sm-z-dropdown); margin: 0; padding: var(--sm-space-1); list-style: none; max-block-size: 18rem; overflow: auto; background: var(--sm-surface-raised); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-md); box-shadow: var(--sm-shadow-lg); }
  .smp-listbox__list[hidden] { display: none; }
  .smp-listbox__option { display: flex; align-items: center; gap: var(--sm-space-2); min-block-size: var(--smp-tap); padding: 0 var(--sm-space-3); font-size: var(--sm-font-size-sm); color: var(--sm-text); border-radius: var(--sm-radius-sm); cursor: pointer; }
  .smp-listbox__option:hover, .smp-listbox__option[data-active] { background: var(--sm-surface-sunken); }
  .smp-listbox__option[aria-selected="true"] { background: var(--sm-primary-subtle); color: var(--sm-text-brand); font-weight: var(--sm-font-weight-semibold); }

  /* ---------------------------------------------------------- opened-row details band (a full-width row under a table row) */
  .smp-details-band > td, .smp-details-band > th { padding: var(--sm-space-4) var(--sm-space-5); background: var(--sm-surface-sunken); border-block: 1px solid var(--sm-border-subtle); }
  .smp-details-band__grid { display: grid; gap: var(--sm-space-3) var(--sm-space-6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 0; }
  .smp-details-band__grid dt { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
  .smp-details-band__grid dd { margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text); overflow-wrap: anywhere; }

  /* ---------------------------------------------------------- settings rows: label + hint on the left, control on the right, stacked on phones */
  .smp-setgroup { display: grid; margin: 0; padding: 0; border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); background: var(--sm-surface); }
  .smp-setrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sm-space-2) var(--sm-space-6); align-items: center; padding: var(--sm-space-4) var(--sm-space-5); }
  .smp-setrow + .smp-setrow { border-top: 1px solid var(--sm-border-subtle); }
  .smp-setrow__label { margin: 0; font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-setrow__hint { display: block; margin-top: var(--sm-space-0-5); font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-regular); color: var(--sm-text-secondary); }
  .smp-setrow__control { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sm-space-2); align-items: center; }
  @media (max-width: 640px) { .smp-setrow { grid-template-columns: minmax(0, 1fr); } }

  /* ---------------------------------------------------------- admin shell: grouped sidebar + top bar with the context switcher */
  .smp-shell { display: grid; grid-template-columns: var(--sm-sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; min-block-size: 100dvh; background: var(--sm-bg-app); }
  .smp-shell__bar { grid-column: 1 / -1; position: sticky; top: 0; z-index: var(--sm-z-sticky); display: flex; align-items: center; gap: var(--sm-space-3); min-block-size: 4rem; padding-inline: var(--sm-space-4); background: var(--sm-navbar-bg); border-bottom: 1px solid var(--sm-border-subtle); backdrop-filter: blur(16px); }
  .smp-shell__spacer { flex: 1 1 0; min-width: 0; }
  .smp-shell__side { grid-row: 2; min-width: 0; padding: var(--sm-space-4) var(--sm-space-3); background: var(--sm-surface); border-inline-end: 1px solid var(--sm-border-subtle); overflow-y: auto; }
  .smp-shell__main { grid-row: 2; min-width: 0; padding: var(--sm-space-6); }
  .smp-navgroup { display: grid; gap: var(--sm-space-0-5); margin-bottom: var(--sm-space-4); }
  .smp-navgroup__heading { margin: 0; padding: var(--sm-space-2) var(--sm-space-3); 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); }
  .smp-navgroup__link { display: flex; align-items: center; gap: var(--sm-space-2); min-block-size: var(--smp-tap); padding: 0 var(--sm-space-3); font-size: var(--sm-font-size-sm); color: var(--sm-text); text-decoration: none; border-radius: var(--sm-radius-md); }
  .smp-navgroup__link:hover { background: var(--sm-surface-sunken); }
  .smp-navgroup__link[aria-current="page"] { background: var(--sm-primary-subtle); color: var(--sm-text-brand); font-weight: var(--sm-font-weight-semibold); }
  /* a collapsible sidenav group (<sm-sidenav-section collapsible>): native details, the heading is the summary; the design system has no collapsible group yet */
  .smp-sidenav-group__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sm-space-2); min-block-size: var(--smp-tap); font-size: var(--sm-font-size-xs); cursor: pointer; list-style: none; border-radius: var(--sm-radius-md); }
  .smp-sidenav-group__summary::-webkit-details-marker { display: none; }
  .smp-sidenav-group__summary:hover { color: var(--sm-text); background-color: var(--sm-hover); }
  .smp-sidenav-group__summary:focus-visible { outline: var(--sm-focus-width) solid var(--sm-focus-ring); outline-offset: var(--sm-focus-offset); }
  .smp-sidenav-group__caret { flex: none; transition: transform var(--sm-duration-fast) var(--sm-ease-standard); }
  .smp-sidenav-group[open] > .smp-sidenav-group__summary > .smp-sidenav-group__caret { transform: rotate(180deg); }
  .smp-sidenav-group:has([aria-current="page"]) > .smp-sidenav-group__summary { color: var(--sm-text); }
  .smp-sidenav-group + .smp-sidenav-group { margin-block-start: var(--sm-space-1); }
  .sm-sidenav__link { min-block-size: var(--smp-tap); }
  .smp-identity { display: flex; align-items: center; gap: var(--sm-space-3); padding: var(--sm-space-2) var(--sm-space-3) var(--sm-space-3); min-width: 0; }
  .smp-identity__text { display: grid; min-width: 0; }
  .smp-identity__name { font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-identity__sub { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); overflow-wrap: anywhere; }
  /* the consoles' rail (Views/Shared/FlatNav, Ui:AppShell on): the sidenav sits in aside.portal-sidebar, which already gives the column its padding,
     border and scroll (console.css) and is the phone drawer (ds-shell.css), so the sidenav adds none of its own; its footer stays at the bottom */
  .smp-rail { display: flex; flex-direction: column; gap: var(--sm-space-3); }
  .smp-rail > .sm-sidenav { flex: 1 0 auto; block-size: auto; padding: 0; border: 0; background-color: transparent; overflow: visible; }
  .smp-rail .sm-sidenav__link { white-space: normal; overflow-wrap: anywhere; }
  .smp-rail .sm-sidenav__footer { display: grid; gap: var(--sm-space-0-5); }
  .smp-rail .sm-sidenav__footer form { margin: 0; }
  .smp-rail .sm-sidenav__footer .sm-btn { justify-content: flex-start; gap: var(--sm-space-3); padding-inline: var(--sm-space-3); }
  .smp-rail .sm-sidenav__footer .smp-identity { padding: var(--sm-space-2) var(--sm-space-3) 0; }
  .smp-rail__search { justify-content: flex-start; }
  .smp-rail__search-label { flex: 1 1 auto; text-align: start; }
  .smp-rail__kbd { font: inherit; font-size: var(--sm-font-size-xs); padding: 0 var(--sm-space-2); color: var(--sm-text-secondary); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-sm); }

  .smp-context { display: inline-flex; align-items: center; gap: var(--sm-space-2); min-block-size: var(--smp-tap); max-inline-size: 16rem; padding: 0 var(--sm-space-3); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-full); }
  .smp-context__name { min-width: 0; overflow-wrap: anywhere; }
  @media (max-width: 1023px) { .smp-shell { grid-template-columns: minmax(0, 1fr); } .smp-shell__side { display: none; } .smp-shell__main { grid-column: 1; padding: var(--sm-space-4); } }

  /* ---------------------------------------------------------- app bar: the signed-in shell's topbar (sm-topbar) and its account menu */
  .smp-appbar { position: sticky; inset-block-start: 0; z-index: var(--sm-z-sticky); box-sizing: border-box; min-block-size: var(--ds-topbar-h, 4.75rem); gap: var(--sm-space-4); }
  .smp-appbar__brand { --sm-logo-height: 2rem; flex: none; }
  .smp-appbar__mark { border-radius: var(--sm-radius-sm); }
  .smp-appbar__actions { flex: none; gap: var(--sm-space-2); }
  .smp-appbar__menu { display: none; flex: none; }
  .smp-appbar__env { flex: none; }
  @media (max-width: 1024px) { .smp-appbar__menu:not([hidden]) { display: inline-flex; } }
  @media (min-width: 1024px) { .smp-appbar__search { display: none; } }
  @media (max-width: 768px) {
    .smp-appbar__open { display: none; }
  }
  @media (min-width: 769px) { .smp-usermenu__panel .smp-usermenu__launch { display: none; } }
  @media (max-width: 480px) { .smp-appbar { gap: var(--sm-space-2); } }

  .smp-usermenu { position: relative; flex: none; }
  .smp-usermenu__toggle { gap: var(--sm-space-1); padding-inline: var(--sm-space-1) var(--sm-space-2); border-radius: var(--sm-radius-full, 999px); }
  .smp-usermenu[data-open="true"] .smp-usermenu__toggle > .sm-icon:last-child { transform: rotate(180deg); }
  .smp-usermenu__panel { display: none; position: absolute; inset-block-start: calc(100% + var(--sm-space-2)); inset-inline-end: 0; z-index: var(--sm-z-popover); box-sizing: border-box; min-inline-size: 18rem; max-inline-size: min(22rem, calc(100vw - 2 * var(--sm-space-3))); max-block-size: calc(100dvh - 6rem); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--sm-space-2) 0; background: var(--sm-surface-overlay); color: var(--sm-text); border: var(--sm-border-width) solid var(--sm-border); border-radius: var(--sm-radius-lg); box-shadow: var(--sm-shadow-xl); }
  .smp-usermenu[data-open="true"] .smp-usermenu__panel { display: block; }
  html:not(.js) .smp-usermenu:focus-within .smp-usermenu__panel { display: block; }
  .smp-usermenu__id { display: grid; gap: var(--sm-space-1-5); min-inline-size: 0; padding: var(--sm-space-4) var(--sm-space-5); overflow-wrap: anywhere; border-block-end: 1px solid var(--sm-border-subtle); margin-block-end: var(--sm-space-2); }
  /* Spacing as the reference: one text edge (--sm-space-5 in), full-width rules between the groups, 44px rows. */
  .smp-usermenu__group { display: grid; }
  .smp-usermenu__panel .sm-menu__label { margin: 0; padding: var(--sm-space-3) var(--sm-space-5); border-block-end: 1px solid var(--sm-border-subtle); margin-block-end: var(--sm-space-2); }
  .smp-usermenu__panel .sm-menu__item { padding-inline: var(--sm-space-5); border-radius: 0; }
  .smp-usermenu__panel .sm-menu__sep { margin-block: var(--sm-space-2); }
  .smp-usermenu__panel form[action="/signout"] { margin-block-start: var(--sm-space-2); padding-block-start: var(--sm-space-2); border-block-start: 1px solid var(--sm-border-subtle); }
  .smp-usermenu__form { margin: 0; }
  .smp-usermenu__ctx { display: grid; gap: var(--sm-space-1); flex: 1 1 auto; min-inline-size: 0; padding-block: var(--sm-space-2); }
  /* One type scale for the whole panel: every row's text is sm / medium (sm-menu__item), the second line is xs / secondary. */
  .smp-usermenu__panel { font-family: var(--sm-font-sans, inherit); font-size: var(--sm-font-size-sm); line-height: 1.4; }
  .smp-usermenu__panel .sm-menu__item { font: inherit; font-weight: var(--sm-font-weight-medium); }
  .smp-usermenu__name { min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-medium); color: var(--sm-text); }
  .smp-usermenu__id .smp-usermenu__name { font-weight: var(--sm-font-weight-semibold); }
  .smp-usermenu__sub { min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--sm-font-size-xs); line-height: var(--sm-line-height-snug, 1.35); font-weight: var(--sm-font-weight-regular); color: var(--sm-text-secondary); }
  .smp-usermenu__panel .sm-menu__item { min-block-size: var(--smp-tap); }
  .smp-usermenu__panel .sm-menu__item[aria-current="page"] { background: var(--sm-primary-subtle); }
  .smp-usermenu__panel .sm-menu__item > .sm-icon:last-child:not(:first-child) { color: var(--sm-text-brand); }
  .smp-usermenu__panel form[action="/signout"] .sm-menu__item { color: var(--sm-text-secondary); }
  .smp-usermenu__panel form[action="/signout"] .sm-menu__item:hover { color: var(--sm-danger-text); }
  .smp-usermenu__panel .sm-menu__item[aria-checked]::after { content: none; }
  .smp-verifybar { padding: var(--sm-space-2) var(--sm-gutter); }

  /* ---------------------------------------------------------- admin lists: filter bar, who cell, status stack, foot (People, Invitations, Administrators, Signups) */
  .smp-views { margin-bottom: var(--sm-space-4); }
  .smp-views .sm-tabs__list { padding-block: var(--sm-space-0-5); }
  .smp-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smp-section-gap); min-width: 0; }
  .smp-list > * { min-width: 0; }
  /* A table wider than its card scrolls inside it; edge shadows appear only on the side that still has hidden columns. */
  .smp-list .sm-table-wrap {
    background:
      linear-gradient(to right, var(--sm-surface), var(--sm-surface)) left center / 1.5rem 100% no-repeat local,
      linear-gradient(to left, var(--sm-surface), var(--sm-surface)) right center / 1.5rem 100% no-repeat local,
      linear-gradient(to right, var(--sm-border), transparent) left center / 0.75rem 100% no-repeat scroll,
      linear-gradient(to left, var(--sm-border), transparent) right center / 0.75rem 100% no-repeat scroll,
      var(--sm-surface);
  }
  .smp-list__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sm-space-1) var(--sm-space-4); }
  .smp-list__title { margin: 0; font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-list__note { margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-filterbar { display: grid; gap: var(--sm-space-3); }
  /* A grid item will not shrink below its widest unwrapped content: let the list's children shrink to the page, so the filter rows wrap instead of widening the page. */
  .smp-list > *, .smp-filterbar { min-inline-size: 0; }
  .smp-filterbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2); }
  .smp-filterbar__row .sm-input-group { flex: 1 1 16rem; max-inline-size: 26rem; }
  .smp-filterbar-wrap { display: grid; gap: var(--sm-space-3); }
  .smp-filterbar__lists[hidden] { display: none; }
  .smp-filterbar__sort .sm-input { inline-size: auto; min-inline-size: 14rem; }
  .smp-filterbar__lists { display: grid; gap: var(--sm-space-3) var(--sm-space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding: var(--sm-space-4); background: var(--sm-surface-sunken); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); }
  .smp-filterbar__lists .sm-input { inline-size: 100%; }
  .smp-filterbar .sm-input, .smp-filterbar .sm-btn, .smp-applied .sm-chip, .smp-filterbar-wrap .sm-tabs--pills .sm-tabs__tab { min-block-size: var(--smp-tap); }
  .smp-applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2); font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-nowrap { white-space: nowrap; }
  .smp-who { min-inline-size: 15rem; min-block-size: var(--smp-tap); display: flex; align-items: center; gap: var(--sm-space-3); min-width: 0; color: inherit; text-decoration: none; }
  .smp-who__text { display: grid; min-width: 0; }
  .smp-who__name { font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); overflow-wrap: break-word; }
  .smp-who__sub { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); overflow-wrap: break-word; }
  .smp-who:hover .smp-who__name { color: var(--sm-text-brand); }
  .sm-btn > .sm-icon { flex: none; }
  /* The 44px tap floor made the toast close button taller than the message, leaving empty space under the title. */
  .sm-toast .sm-btn--icon { min-block-size: 2rem; min-inline-size: 2rem; block-size: 2rem; inline-size: 2rem; align-self: flex-start; margin-block: -0.25rem; }
  .sm-field .pw-box { position: relative; display: block; }
  .sm-field .pw-box input { inline-size: 100%; padding-inline-end: 52px; }
  .smp-stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-1); }
  .smp-note { display: block; font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .smp-muted { color: var(--sm-text-muted); }
  .smp-mono { font-family: var(--sm-font-mono, ui-monospace, monospace); font-size: var(--sm-font-size-xs); }
  .smp-creds { max-width: 32rem; margin-block: var(--sm-space-3); }
  .smp-creds .sm-kv__item { grid-template-columns: minmax(0, 1fr); padding-block: var(--sm-space-2); }
  .smp-copyline { display: flex; align-items: center; gap: var(--sm-space-2); min-width: 0; }
  .smp-copyline code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; user-select: all; }
  .smp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sm-space-3) var(--sm-space-5); font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-pagesize { display: inline-flex; align-items: center; gap: var(--sm-space-2); margin: 0; }
  .smp-pagesize .sm-input { inline-size: auto; }
  .smp-foot .sm-pagination__item[aria-disabled=true] { color: var(--sm-text-muted); opacity: .45; cursor: default; }
  .smp-foot .sm-pagination__item[aria-disabled=true]:hover { background-color: transparent; color: var(--sm-text-muted); }
  .smp-table-rowmenu { inline-size: 1%; white-space: nowrap; text-align: end; }
  .smp-table--cards td.smp-table-rowmenu { inline-size: auto; justify-content: flex-end; }
  .smp-sections { display: flex; flex-direction: column; gap: var(--sm-space-5); padding-block-end: var(--sm-space-6); }
  .smp-sections > section {
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-3);
    padding-block-start: var(--sm-space-4);
    border-block-start: 1px solid var(--sm-border-subtle);
  }
  .smp-sections > section:first-of-type {
    padding-block-start: 0;
    border-block-start: none;
  }
  .smp-section__title {
    margin: 0;
    font-size: var(--sm-font-size-xs);
    font-weight: var(--sm-font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--sm-letter-spacing-wider);
    color: var(--sm-text-muted);
  }
  .smp-form-grid { display: grid; gap: var(--smp-form-gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .smp-endrule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); gap: var(--sm-space-2) var(--sm-space-4); align-items: center; margin-block-start: var(--sm-space-2); }
  @media (max-width: 480px) { .smp-endrule { grid-template-columns: minmax(0, 1fr); } }
  .smp-choices { display: grid; gap: var(--sm-space-3); margin: 0; padding: 0; border: 0; }
  .smp-choices[hidden] { display: none; }
  .smp-choices > legend {
    padding: 0;
    margin-block-end: var(--sm-space-2);
    font-size: var(--sm-font-size-sm);
    font-weight: var(--sm-font-weight-semibold);
    color: var(--sm-text);
  }
  @media (min-width: 520px) {
    .smp-choices {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .smp-choices > legend {
      grid-column: 1 / -1;
    }
  }
  .smp-items-start { align-items: start; }
  .smp-actions--end { justify-content: flex-end; margin-block-start: var(--sm-space-4); }
  .smp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2); }
  /* A dialog's buttons live inside its form (inside the scrolling body), so on a short screen they stay pinned to the bottom edge of the dialog without overlapping content. */
  .sm-dialog__body .smp-actions--end {
    position: sticky;
    inset-block-end: calc(-1 * var(--sm-space-6));
    z-index: 10;
    margin-inline: calc(-1 * var(--sm-space-6));
    margin-block-start: var(--sm-space-6);
    padding: var(--sm-space-4) var(--sm-space-6);
    background-color: var(--sm-surface-overlay);
    border-block-start: 1px solid var(--sm-border-subtle);
  }

  /* ---------------------------------------------------------- admin overview */
  .smp-overview { display: grid; gap: var(--sm-space-6); grid-template-columns: repeat(6, minmax(0, 1fr)); margin-block: 0; }
  .smp-overview > .smp-overview__main { grid-column: span 4; }
  .smp-overview > .smp-overview__side { grid-column: span 2; }
  .smp-overview > .smp-overview__half { grid-column: span 3; }
  @media (max-width: 900px) { .smp-overview { grid-template-columns: minmax(0, 1fr); } .smp-overview > .smp-overview__main, .smp-overview > .smp-overview__side, .smp-overview > .smp-overview__half { grid-column: auto; } }
  .smp-ovcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smp-section-gap); align-content: start; padding: var(--smp-card-pad); min-width: 0; }
  .smp-ovcard .sm-list { min-width: 0; }
  .smp-ovcard summary, .smp-list summary { display: list-item; padding-block: var(--sm-space-3); cursor: pointer; }
  .smp-ovcard .sm-list__item { flex-wrap: wrap; row-gap: var(--sm-space-2); }
  .smp-ovcard .sm-list__content { flex: 1 1 10rem; min-width: 0; }
  .smp-ovcard .sm-list__title, .smp-ovcard .sm-list__description { overflow-wrap: anywhere; }
  .smp-ovcard__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sm-space-2) var(--sm-space-4); }
  .smp-ovcard__title { margin: 0; font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-ovcard__note { margin: var(--sm-space-1) 0 0; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-overview__side .sm-list__item { flex-wrap: nowrap; }
  .smp-overview__side .sm-list__trailing { margin-inline-start: auto; }
  .smp-metrics { display: grid; gap: var(--smp-page-gap); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-block: 0; }
  .smp-metric { display: grid; gap: var(--sm-space-1); align-content: start; padding: var(--smp-card-pad); color: inherit; text-decoration: none; min-width: 0; }
  a.smp-metric:hover { border-color: var(--sm-border-strong); }
  .smp-metric__go { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  a.smp-metric .smp-metric__go { color: var(--sm-text-link); }
  .smp-bars { display: grid; gap: var(--sm-space-3); }
  .smp-fig { margin: 0; display: grid; gap: var(--sm-space-1); }
  .smp-fig__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sm-space-2); align-items: stretch; }
  .smp-yaxis { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--sm-font-size-xs); color: var(--sm-text-muted); }
  .smp-spark { inline-size: 100%; block-size: 8rem; }
  .smp-spark__line { stroke: var(--sm-border-subtle); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .smp-spark rect { fill: var(--sm-primary-border); }
  .smp-spark rect.is-today { fill: var(--sm-primary); }
  .smp-axis { display: flex; justify-content: space-between; margin-inline-start: 2rem; font-size: var(--sm-font-size-xs); color: var(--sm-text-muted); }

  /* ---------------------------------------------------------- the open list of a select: the design system's menu look (surface, border, radius, shadow, 44px rows, selected row in the brand tint).
     Where the browser lets a select style its list (appearance: base-select) it gets this; elsewhere the native list stays. */
  @supports (appearance: base-select) {
    select.sm-input, select.sm-input::picker(select) { appearance: base-select; }
    select.sm-input { display: flex; align-items: center; }
    select.sm-input::picker-icon { display: none; }
    select.sm-input::picker(select) { box-sizing: border-box; margin-block: var(--sm-space-1); padding: var(--sm-space-1); max-block-size: 20rem; background: var(--sm-surface-overlay); color: var(--sm-text); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-lg); box-shadow: var(--sm-shadow-lg); }
    select.sm-input option { display: flex; align-items: center; gap: var(--sm-space-2); min-block-size: var(--smp-tap); padding-inline: var(--sm-space-3); border-radius: var(--sm-radius-sm); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-medium); color: var(--sm-text); cursor: pointer; }
    select.sm-input option::checkmark { display: none; }
    select.sm-input option:hover, select.sm-input option:focus-visible { background: var(--sm-hover-solid, var(--sm-surface-sunken)); }
    select.sm-input option:checked { background: var(--sm-primary-subtle); color: var(--sm-text-brand); font-weight: var(--sm-font-weight-semibold); }
  }

  /* ---------------------------------------------------------- one person (/admin/people/{id}): head, "needs attention" alerts, then sections of settings rows */
  .smp-person { display: grid; gap: var(--sm-space-6); inline-size: 100%; }
  .smp-person-head { display: flex; align-items: center; gap: var(--sm-space-5); padding-block-end: var(--sm-space-5); border-bottom: 1px solid var(--sm-border-subtle); }
  .smp-person-head__text { display: grid; gap: var(--sm-space-2); min-width: 0; }
  .smp-person .smp-page-head__sub { overflow-wrap: anywhere; }
  .smp-psec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sm-space-2); align-content: start; min-width: 0; }
  .smp-psec > :is(.sm-alert, .sm-setgroup, .smp-setgroup) + .sm-alert { margin-block-start: var(--sm-space-3); }
  .smp-psec > .smp-section__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sm-space-1) var(--sm-space-3); margin: 0; font-size: var(--sm-font-size-md); }
  .smp-section__note { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-regular); color: var(--sm-text-secondary); }
  :is(.smp-person, .smp-twostep) .smp-setrow { grid-template-columns: minmax(0, 1fr) auto; }
  :is(.smp-person, .smp-twostep) .smp-setrow__label { overflow-wrap: anywhere; }
  :is(.smp-person, .smp-twostep) .smp-setrow__control { justify-content: flex-end; }
  :is(.smp-person, .smp-twostep) .smp-setrow__control:empty { display: none; }
  :is(.smp-person, .smp-twostep) .smp-setrow__control > form { margin: 0; }
  @media (max-width: 640px) { :is(.smp-person, .smp-twostep) .smp-setrow { grid-template-columns: minmax(0, 1fr); } :is(.smp-person, .smp-twostep) .smp-setrow__control { justify-content: flex-start; } .smp-person-head { align-items: flex-start; } }
  .smp-setgroup--flush { border: 0; border-radius: 0; background: transparent; }
  .smp-setgroup--danger { border-color: var(--sm-danger-border, var(--sm-danger-text)); }
  .smp-setgroup > .sm-accordion { border-top: 1px solid var(--sm-border-subtle); }
  .smp-setgroup > .sm-accordion .sm-accordion__item { border-block-end: 0; }
  .smp-setgroup > .sm-accordion .sm-accordion__trigger { padding-inline: var(--sm-space-5); font-size: var(--sm-font-size-sm); }
  .smp-setgroup > .sm-accordion .sm-accordion__content { padding-inline: var(--sm-space-5); }
  .smp-attn { display: grid; gap: var(--sm-space-2); }
  /* One row per blocker: icon, what is wrong, and its action on the right (under the text on phones). The tone's own colour carries a thick edge so the kind reads at a glance. */
  .smp-attn .sm-alert { align-items: center; padding-block: var(--sm-space-3); border-inline-start: 4px solid var(--_fg); }
  .smp-attn .sm-alert__content { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sm-space-5); row-gap: var(--sm-space-0-5); align-items: center; }
  .smp-attn .sm-alert__content > * { grid-column: 1; margin: 0; }
  .smp-attn .sm-alert__title { font-size: var(--sm-font-size-sm); }
  .smp-attn .sm-alert__content p:not(.sm-alert__title) { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-attn .sm-alert__content > .smp-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .smp-attn form { margin: 0; }
  @media (max-width: 640px) {
    .smp-attn .sm-alert { align-items: flex-start; }
    .smp-attn .sm-alert__content { grid-template-columns: minmax(0, 1fr); }
    .smp-attn .sm-alert__content > .smp-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; margin-block-start: var(--sm-space-2); }
  }
  .smp-detail { margin-block-start: var(--sm-space-2); font-size: var(--sm-font-size-xs); }
  .smp-detail code { display: block; margin-block-start: var(--sm-space-1); overflow-wrap: anywhere; }
  .smp-log { display: grid; gap: var(--sm-space-2); margin: 0; padding: 0; list-style: none; }
  .smp-log li { display: flex; align-items: center; justify-content: space-between; gap: var(--sm-space-3); min-width: 0; }
  .smp-log__main { display: grid; min-width: 0; }
  .smp-log__sub { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); overflow-wrap: anywhere; }
  .smp-more { margin: 0; font-size: var(--sm-font-size-sm); }

  /* ========================================================================
     POPUP / DIALOG CENTERING & LAYOUT
     All popups and dialogs are strictly centered on the screen at all breakpoints.
     Overrides any bottom-sheet conversions or margin-top sibling cascades.
     ======================================================================== */
  :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog,
  :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog.sm-dialog,
  :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog.ds-sheet,
  :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog.ui-dialog,
  .sm-dialog,
  dialog.sm-dialog,
  dialog.ds-sheet,
  dialog.ui-dialog,
  dialog:modal,
  dialog[open] {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    max-block-size: min(90dvh, 48rem);
    inline-size: min(var(--_w, 35rem), calc(100vw - 2 * var(--sm-space-4)));
    max-inline-size: calc(100vw - 2 * var(--sm-space-4));
    border-radius: var(--sm-radius-dialog) !important;
  }

  @media (max-width: 639.98px) {
    :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog,
    :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog.sm-dialog,
    :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog.ds-sheet,
    :is(.ds-admin, .portal-content, .portal-layout, body, html) > dialog.ui-dialog,
    .sm-dialog,
    dialog.sm-dialog,
    dialog.ds-sheet,
    dialog.ui-dialog,
    dialog:modal,
    dialog[open] {
      position: fixed !important;
      inset: 0 !important;
      margin: auto !important;
      inline-size: min(var(--_w, 35rem), calc(100vw - 2 * var(--sm-space-3)));
      max-inline-size: calc(100vw - 2 * var(--sm-space-3));
      max-block-size: min(90dvh, calc(100dvh - 2 * var(--sm-space-3)));
      border-radius: var(--sm-radius-dialog) !important;
      border-block-end: var(--sm-border-width) solid var(--sm-border-subtle) !important;
      padding-block-end: 0 !important;
    }
  }

  .sm-dialog > .sm-dialog__header,
  .sm-dialog form > .sm-dialog__header {
    position: relative;
    display: block;
    flex: none;
    padding: var(--sm-space-6) var(--sm-space-6) 0;
    border: 0;
  }
  .sm-dialog > .sm-dialog__header > :first-child,
  .sm-dialog form > .sm-dialog__header > :first-child { min-width: 0; padding-inline-end: calc(var(--smp-tap) + var(--sm-space-3)); }
  .sm-dialog__title { margin: 0; padding: 0; }
  .sm-dialog__description { margin: var(--sm-space-2) 0 0; }
  .sm-dialog > .sm-dialog__header > .sm-btn,
  .sm-dialog form > .sm-dialog__header > .sm-btn {
    position: absolute;
    inset-block-start: var(--sm-space-3);
    inset-inline-end: var(--sm-space-3);
    inline-size: var(--smp-tap);
    block-size: var(--smp-tap);
    min-inline-size: var(--smp-tap);
    min-block-size: var(--smp-tap);
    margin: 0;
    padding: 0;
  }

  /* Centered dialog header variant (avatar/icon badge on top, centered title & description, divider line below) */
  .sm-dialog > .sm-dialog__header.smp-dialog-header--centered,
  .sm-dialog form > .sm-dialog__header.smp-dialog-header--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sm-space-8) var(--sm-space-6) var(--sm-space-6);
    border-block-end: 1px solid var(--sm-border-subtle);
    background: radial-gradient(ellipse 90% 70% at 50% -20%, var(--sm-primary-subtle) 0%, transparent 70%);
  }
  .sm-dialog > .sm-dialog__header.smp-dialog-header--centered > :first-child:not(.smp-dialog-close):not(.smp-dialog-badge),
  .sm-dialog form > .sm-dialog__header.smp-dialog-header--centered > :first-child:not(.smp-dialog-close):not(.smp-dialog-badge) {
    padding-inline-end: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 100%;
  }
  .sm-dialog .smp-dialog-header--centered .smp-dialog-badge {
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    margin-block-end: var(--sm-space-3);
    border-radius: var(--sm-radius-full);
    background: var(--sm-primary);
    color: var(--sm-on-primary);
    box-shadow: var(--sm-shadow-md);
    flex: none;
  }
  .sm-dialog .smp-dialog-header--centered .smp-dialog-badge--coral {
    background: var(--sm-chart-2);
    color: var(--sm-text-inverse);
  }
  .sm-dialog .smp-dialog-header--centered .smp-dialog-badge .sm-icon {
    inline-size: 1.625rem;
    block-size: 1.625rem;
    stroke: currentColor;
    stroke-width: 2.2;
  }
  .sm-dialog .smp-dialog-header--centered .sm-dialog__title {
    text-align: center;
    margin: 0;
    font-size: var(--sm-font-size-xl);
    font-weight: var(--sm-font-weight-semibold);
    color: var(--sm-text);
  }
  .sm-dialog .smp-dialog-header--centered .sm-dialog__description {
    text-align: center;
    margin: var(--sm-space-2) auto 0;
    color: var(--sm-text-muted);
    font-size: var(--sm-font-size-sm);
    max-inline-size: 26rem;
  }
  .sm-dialog > .sm-dialog__header.smp-dialog-header--centered > .sm-btn.smp-dialog-close,
  .sm-dialog form > .sm-dialog__header.smp-dialog-header--centered > .sm-btn.smp-dialog-close {
    position: absolute;
    inset-block-start: var(--sm-space-3);
    inset-inline-end: var(--sm-space-3);
    z-index: 1;
  }

  /* Chipbox container as single unified input field */
  .ds-org-chipbox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm-space-2);
    align-items: center;
    min-block-size: var(--sm-space-10);
    padding: var(--sm-space-2) var(--sm-space-3);
    background: var(--sm-input-bg);
    border: 1px solid var(--sm-border-control);
    border-radius: var(--sm-radius-control);
  }
  .ds-org-chipbox:focus-within {
    border-color: var(--sm-primary);
    outline: var(--sm-focus-width, 2px) solid var(--sm-focus-ring);
    outline-offset: 1px;
  }
  .ds-org-chipbox input,
  .ds-org-chipbox .sm-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    min-block-size: 0 !important;
    flex: 1 1 140px;
    color: var(--sm-text);
  }
  .sm-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; margin: 0; gap: 0; }
  .sm-dialog > .sm-dialog__body,
  .sm-dialog form > .sm-dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--sm-space-4);
    flex: 1 1 auto;
    min-block-size: 0;
    padding: var(--sm-space-4) var(--sm-space-6) var(--sm-space-6);
    scroll-padding-block-end: calc(var(--smp-tap) + var(--sm-space-8));
  }
  .sm-dialog > .sm-dialog__body:has(+ .sm-dialog__footer),
  .sm-dialog form > .sm-dialog__body:has(+ .sm-dialog__footer) { padding-block-end: var(--sm-space-4); }
  .sm-dialog__body > * { margin-block: 0; }
  .sm-dialog__body > form, .sm-dialog__body > form.smp-sections { display: grid; gap: var(--sm-space-4); padding-block-end: var(--sm-space-6); }
  .sm-dialog__body > form > section, .sm-dialog__body .smp-sections { display: grid; gap: var(--sm-space-4); }
  .sm-dialog__body .smp-form-grid { gap: var(--sm-space-4); }
  .sm-dialog__body form .confirm-act { margin: 0; }
  .sm-dialog__body form .smp-actions--end { margin-block-start: var(--sm-space-4); }
  /* A hint sits 8px under the table or field it explains, never against its border. */
  .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)); }
  .sm-dialog > .sm-dialog__footer,
  .sm-dialog form > .sm-dialog__footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sm-space-3);
    margin: 0;
    padding: var(--sm-space-4) var(--sm-space-6);
    border-block-start: 1px solid var(--sm-border-subtle);
    background-color: var(--sm-surface-overlay);
  }
  .sm-dialog__body .smp-actions--end {
    position: sticky;
    bottom: calc(-1 * var(--sm-space-6));
    z-index: 10;
    margin-inline: calc(-1 * var(--sm-space-6));
    margin-block-start: var(--sm-space-4);
    margin-block-end: calc(-1 * var(--sm-space-6));
    padding: var(--sm-space-3) var(--sm-space-6);
    background-color: var(--sm-surface-overlay);
    border-block-start: 1px solid var(--sm-border-subtle);
    gap: var(--sm-space-3);
  }
  @media (max-width: 480px) {
    .sm-dialog > .sm-dialog__header, .sm-dialog form > .sm-dialog__header { padding: var(--sm-space-4) var(--sm-space-4) 0; }
    .sm-dialog > .sm-dialog__header > :first-child, .sm-dialog form > .sm-dialog__header > :first-child { padding-inline-end: calc(var(--smp-tap) + var(--sm-space-1)); }
    .sm-dialog > .sm-dialog__body, .sm-dialog form > .sm-dialog__body { padding: var(--sm-space-4) var(--sm-space-4) var(--sm-space-4); scroll-padding-block-end: calc(var(--smp-tap) + var(--sm-space-6)); }
    .sm-dialog > .sm-dialog__footer, .sm-dialog form > .sm-dialog__footer { padding: var(--sm-space-4); flex-direction: column-reverse; align-items: stretch; }
    .sm-dialog__body .smp-actions--end { bottom: calc(-1 * var(--sm-space-4)); margin-inline: calc(-1 * var(--sm-space-4)); margin-block-end: calc(-1 * var(--sm-space-4)); padding: var(--sm-space-4); flex-direction: column-reverse; align-items: stretch; }
    .sm-dialog > .sm-dialog__footer .sm-btn, .sm-dialog form > .sm-dialog__footer .sm-btn, .sm-dialog__body .smp-actions--end .sm-btn { width: 100%; }
  }
  /* ---------------------------------------------------------- admin list pages (accounts, notifications, failed payments, usage types, ...) */
  .smp-bad { color: var(--sm-danger-text); }
  .smp-credit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-1) var(--sm-space-2); }
  .smp-credit + .smp-credit { margin-block-start: var(--sm-space-1); }
  .smp-meter { display: grid; gap: var(--sm-space-1); min-inline-size: 8rem; }
  .smp-meter .sm-progress-meta { display: none; }
  .smp-meter__txt { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .smp-who--button { background: none; border: 0; padding: 0; font: inherit; text-align: start; cursor: pointer; }
  .smp-form { display: grid; gap: var(--smp-form-gap); }
  .smp-form + .smp-form { padding-block-start: var(--sm-space-4); border-block-start: 1px solid var(--sm-border-subtle); }
  .sm-dialog__body > .sm-alert + .smp-form, .sm-dialog__body > .sm-table-wrap + .smp-form { margin-block-start: var(--sm-space-4); }
  /* ---------------------------------------------------------- plans list (/admin/plans): billing health card, attention list, plan table (cards under 62rem of room) */
  .smp-plans { container-type: inline-size; }
  .smp-quiet { display: flex; align-items: flex-start; gap: var(--sm-space-2); font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-quiet .sm-icon { flex: none; margin-block-start: var(--sm-space-0-5); }
  .smp-health { display: grid; gap: var(--sm-space-3); }
  .smp-health__box { background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); }
  .smp-health__box > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-3); min-block-size: var(--smp-tap); padding: var(--sm-space-2) var(--sm-space-4); cursor: pointer; list-style: none; }
  .smp-health__box > summary::-webkit-details-marker { display: none; }
  .smp-health__line { flex: 1 1 14rem; min-width: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-health__more { display: inline-flex; align-items: center; gap: var(--sm-space-1); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
  .smp-health__box[open] .smp-health__more .sm-icon { transform: rotate(180deg); }
  .smp-health__box > .smp-plstat__grid { padding: var(--sm-space-4); border-block-start: 1px solid var(--sm-border-subtle); }
  .smp-health__recheck { margin: 0; padding: 0 var(--sm-space-4) var(--sm-space-4); font-size: var(--sm-font-size-sm); }
  .smp-health__recheck a { color: var(--sm-text-link); font-weight: var(--sm-font-weight-semibold); }
  .smp-plstat__grid { display: grid; gap: var(--sm-space-4); grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin: 0; }
  .smp-plstat__grid > div { display: grid; gap: var(--sm-space-1); align-content: start; min-width: 0; }
  .smp-plstat__grid dt { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
  .smp-plstat__grid dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-1) var(--sm-space-2); margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-plstat__grid dd strong { font-size: var(--sm-font-size-md); font-weight: var(--sm-font-weight-semibold); }
  .smp-plstat__grid dd.smp-plstat__sub { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .smp-plstat__sync--warn { color: var(--sm-warning-text); font-weight: var(--sm-font-weight-semibold); }
  .smp-plstat__sync--bad { color: var(--sm-danger-text); font-weight: var(--sm-font-weight-semibold); }
  .smp-plstat__issues { display: grid; gap: var(--sm-space-2); margin: 0; padding: 0; list-style: none; }
  .smp-plstat__issues li { display: flex; align-items: flex-start; gap: var(--sm-space-3); padding: var(--sm-space-3) var(--sm-space-4); border: 1px solid; border-radius: var(--sm-radius-card); font-size: var(--sm-font-size-sm); color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-plstat__issues li[data-issue="bad"] { background: var(--sm-danger-subtle); border-color: var(--sm-danger-border); }
  .smp-plstat__issues li[data-issue="warn"] { background: var(--sm-warning-subtle); border-color: var(--sm-warning-border); }
  .smp-plstat__issues li .sm-icon { flex: none; margin-block-start: var(--sm-space-0-5); }
  .smp-plstat__issues li[data-issue="bad"] .sm-icon { color: var(--sm-danger-icon); }
  .smp-plstat__issues li[data-issue="warn"] .sm-icon { color: var(--sm-warning-icon); }
  .smp-plstat__issues li.smp-plstat__more { background: none; border: 0; padding-block: 0; color: var(--sm-text-secondary); }
  .smp-plattn { display: grid; gap: var(--sm-space-3); }
  .smp-plattn__list { display: grid; gap: var(--sm-space-2); margin: 0; padding: 0; list-style: none; }
  .smp-plattn__list > li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-4); padding: var(--sm-space-3) var(--sm-space-4); background: var(--sm-warning-subtle); border: 1px solid var(--sm-warning-border); border-radius: var(--sm-radius-card); }
  .smp-plattn__what { display: grid; flex: 1 1 14rem; min-width: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); overflow-wrap: anywhere; }
  .smp-plattn__what strong { color: var(--sm-text); }
  .smp-plattn__act { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); margin-inline-start: auto; }
  .smp-plattn__err { flex: 1 1 100%; }
  .smp-plans .sm-table .pp-num { text-align: end; font-variant-numeric: tabular-nums; }
  .smp-plans .sm-table .pp-plan { font-weight: var(--sm-font-weight-regular); text-align: start; min-inline-size: 12rem; }
  .smp-plans .pp-plan__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-1) var(--sm-space-3); }
  .smp-plans .pp-toggle { display: inline-flex; align-items: center; gap: var(--sm-space-1); margin-inline-start: calc(-1 * var(--sm-space-1)); padding: 0 var(--sm-space-1); background: none; border: 0; border-radius: var(--sm-radius-sm); font: inherit; color: var(--sm-text); text-align: start; cursor: pointer; min-block-size: var(--smp-tap); }
  .smp-plans .pp-toggle:hover .pp-plan__name { text-decoration: underline; }
  .smp-plans .pp-toggle:focus-visible { outline: 2px solid var(--sm-focus-ring); outline-offset: 2px; }
  .smp-plans .pp-chev { inline-size: var(--sm-space-4); block-size: var(--sm-space-4); color: var(--sm-text-secondary); transition: transform .15s; }
  .smp-plans .pp-toggle[aria-expanded="true"] .pp-chev { transform: rotate(90deg); }
  .smp-plans .pp-plan__name { font-size: var(--sm-font-size-md); font-weight: var(--sm-font-weight-semibold); }
  .smp-plans .pp-plan__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sm-space-3); padding-inline-start: var(--sm-space-5); font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .smp-plans .pp-older { color: var(--sm-warning-text); font-weight: var(--sm-font-weight-semibold); }
  .smp-plans .pp-price { white-space: nowrap; }
  .smp-plans .pp-amount { font-size: var(--sm-font-size-md); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-plans .pp-per, .smp-plans .pp-sub { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-regular); color: var(--sm-text-secondary); }
  .smp-plans .pp-muted { color: var(--sm-text-muted); }
  .smp-plans .pp-lock { display: inline-flex; margin-inline-start: var(--sm-space-1); vertical-align: middle; color: var(--sm-text-secondary); cursor: help; }
  .smp-plans .pp-drift, .smp-plans .pp-check { display: flex; align-items: center; gap: var(--sm-space-1); font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); white-space: normal; }
  .smp-plans .pp-drift { margin-block-start: var(--sm-space-0-5); }
  .smp-plans .pp-check .sm-icon { flex: none; }
  .smp-plans .pp-drift--warn, .smp-plans .pp-check--warn { color: var(--sm-warning-text); }
  .smp-plans .pp-drift--bad, .smp-plans .pp-check--bad { color: var(--sm-danger-text); }
  .smp-plans .pp-drift--ok, .smp-plans .pp-check--ok { color: var(--sm-success-text); }
  .smp-plans .pp-check--muted { color: var(--sm-text-muted); }
  .smp-plans .pp-issues { display: grid; gap: var(--sm-space-1); margin: 0; padding: 0; list-style: none; }
  .smp-plans .pp-issues .pp-drift { display: block; margin: 0; }
  .smp-plans .pp-issues__period { display: inline-block; min-inline-size: 3.5rem; margin-inline-end: var(--sm-space-1); font-weight: var(--sm-font-weight-regular); color: var(--sm-text-secondary); }
  .smp-plans .pp-actions { inline-size: 1%; white-space: nowrap; }
  .smp-plans .pp-actions__in { display: flex; align-items: center; justify-content: flex-end; gap: var(--sm-space-2); }
  .smp-plans .pp-change { display: inline-flex; }
  .smp-plans .pp-group__head th { padding-block: var(--sm-space-3) var(--sm-space-1); 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); background: var(--sm-surface-sunken); }
  .smp-plans .pp-group--off .pp-plan__name, .smp-plans .pp-group--off .pp-amount { color: var(--sm-text-muted); }
  .smp-plans .pp-detail[hidden] { display: none; }
  .smp-plans .smp-details-band > td { padding: var(--sm-space-4) var(--sm-space-5) var(--sm-space-5) calc(var(--sm-space-5) + var(--sm-space-5)); }
  .smp-pd { display: grid; gap: var(--sm-space-4); }
  .smp-pd__prices { display: grid; gap: var(--sm-space-2); }
  .smp-pd__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-5); padding: var(--sm-space-2) var(--sm-space-3); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-control); }
  .smp-pd__period { inline-size: 5rem; font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-pd__kv { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2); min-width: 0; }
  .smp-pd__k { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .smp-pd__kv code { font-size: var(--sm-font-size-xs); user-select: all; overflow-wrap: anywhere; }
  .smp-pd__note { display: inline-flex; align-items: center; gap: var(--sm-space-1); font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .smp-pd__facts { display: grid; gap: var(--sm-space-3) var(--sm-space-5); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 0; }
  .smp-pd__facts > div { display: grid; gap: var(--sm-space-1); align-content: start; min-width: 0; }
  .smp-pd__facts dt { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
  .smp-pd__facts dd { margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-pd__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-3) var(--sm-space-4); font-size: var(--sm-font-size-sm); }
  .smp-pd__price .sm-icon { inline-size: var(--sm-space-3-5, 0.875rem); block-size: var(--sm-space-3-5, 0.875rem); }
  @container (width > 46rem) {
    .smp-plans .pp-group > .pp-row > * { vertical-align: top; }
    .smp-plans .pp-group > .pp-row > td:not(.pp-actions) > :first-child, .smp-plans .pp-actions__in { min-block-size: var(--smp-tap); }
    .smp-plans .pp-group > .pp-row > td:not(.pp-actions) > :first-child:not(.pp-check) { line-height: var(--smp-tap); }
  }
  @container (width >= 74rem) {
    .smp-plans .sm-table:has(.pp-group) tr > :is(:nth-child(2), :nth-child(3)) { inline-size: 10rem; }
    .smp-plans .sm-table:has(.pp-group) tr > :nth-child(4) { inline-size: 15rem; }
    .smp-plans .sm-table:has(.pp-group) tr > :nth-child(5) { inline-size: 7rem; }
    .smp-plans .sm-table:has(.pp-group) tr > :nth-child(6) { inline-size: 18rem; }
  }
  @media (prefers-reduced-motion: reduce) { .smp-plans .pp-chev { transition: none; } }
  /* Under 46rem of room (the table has six columns) each plan becomes a card, as on phones. */
  @container (max-width: 46rem) {
    .smp-plans .sm-table-wrap { border: 0; background: none; overflow: visible; }
    .smp-plans .smp-table--cards { display: block; border: 0; }
    .smp-plans .smp-table--cards thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .smp-plans .smp-table--cards tbody, .smp-plans .smp-table--cards tr { display: block; }
    .smp-plans .smp-table--cards tr.pp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--sm-space-2) var(--sm-space-4); margin-block-end: var(--sm-space-3); padding: var(--sm-space-3) var(--sm-space-4); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); }
    .smp-plans .smp-table--cards tr.pp-group__head { padding: 0; margin-block: var(--sm-space-2); border: 0; background: none; }
    .smp-plans .smp-table--cards tr.pp-group__head th { display: block; padding: 0; background: none; border: 0; }
    .smp-plans .smp-table--cards tr.pp-detail { margin-block: 0 var(--sm-space-3); padding: 0; border: 0; background: none; }
    .smp-plans .smp-table--cards tr.pp-detail[hidden] { display: none; }
    .smp-plans .smp-table--cards .pp-row > td { display: grid; gap: 0; align-content: start; justify-items: start; padding: 0; border: 0; text-align: start; min-width: 0; overflow-wrap: anywhere; }
    .smp-plans .smp-table--cards .pp-row > td.pp-num { text-align: start; }
    .smp-plans .smp-table--cards .pp-row > td::before { content: attr(data-label); font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
    .smp-plans .smp-table--cards .pp-row > td[data-label=""]::before, .smp-plans .smp-table--cards .pp-row > td:not([data-label])::before { content: none; }
    .smp-plans .smp-table--cards .pp-row > th.pp-plan { grid-column: 1 / -1; display: grid; gap: var(--sm-space-1); padding: 0; min-inline-size: 0; border: 0; }
    .smp-plans .smp-table--cards tr.pp-row { position: relative; }
    .smp-plans .smp-table--cards .pp-row > th.pp-plan { padding-inline-end: var(--sm-space-12); }
    .smp-plans .smp-table--cards .pp-row > td.pp-actions { grid-column: 1 / -1; inline-size: auto; white-space: normal; justify-items: stretch; }
    .smp-plans .smp-table--cards .pp-row > td.pp-actions:has(.pp-edit) { padding-block-start: var(--sm-space-2); border-block-start: 1px solid var(--sm-border-subtle); }
    .smp-plans .smp-table--cards .pp-change { position: absolute; inset-block-start: var(--sm-space-2); inset-inline-end: var(--sm-space-2); }
    .smp-plans .smp-table--cards .pp-row > td.pp-actions:not(:has(.pp-edit)) { block-size: 0; margin-block-start: calc(-1 * var(--sm-space-2)); padding: 0; overflow: visible; }
    .smp-plans .smp-table--cards tr.pp-row.is-open { margin-block-end: 0; border-end-start-radius: 0; border-end-end-radius: 0; border-block-end-color: transparent; }
    .smp-plans .smp-table--cards .pp-actions__in { justify-content: flex-end; }
    .smp-plans .smp-table--cards .pp-actions__in > .pp-edit { flex: 0 1 auto; margin-inline-end: auto; }
    .smp-plans .smp-table--cards .pp-detail > td { display: block; text-align: start; justify-content: flex-start; padding: var(--sm-space-3) var(--sm-space-4) var(--sm-space-4); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-block-start: 1px dashed var(--sm-border-subtle); border-radius: 0 0 var(--sm-radius-card) var(--sm-radius-card); }
    .smp-plans .smp-table--cards .pp-detail > td::before { content: none; }
    .smp-plans .smp-table--cards .pp-row > td.pp-stripe-cell:has(.pp-issues) { grid-column: 1 / -1; }
  }

  .smp-feat-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-3); padding-block-end: var(--sm-space-4); }
  .pg-legend .sm-alert__content { display: block; line-height: 1.6; }
  .pg-legend .sm-alert__content strong { font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-feat-toolbar { padding-block-end: var(--sm-space-4); }
  .smp-feat-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-3); padding-block-end: var(--sm-space-4); }
  .smp-feat-bar > .smp-feat-search, .smp-feat-bar > .smp-feat-toolbar { padding-block-end: 0; }
  .smp-feat-bar > .smp-feat-search { flex: 1 1 18rem; }
  .smp-feat-bar__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 1 auto; gap: var(--sm-space-2); }
  .smp-feat-search .sm-input-group { flex: 1 1 18rem; max-inline-size: 26rem; }
  .smp-feat-search [data-plan-feat-status]:empty { display: none; }
  .smp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-3); }

  /* ---------------------------------------------------------- plan workspace (/admin/plans/{id} and its tabs): state header, tabs, overview tiles, saved strip, change log, price table */
  .pw-head { gap: var(--sm-space-3); padding-block-end: 0; border-block-end: 0; }
  .pw-head__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sm-space-1) var(--sm-space-3); flex: 1 1 14rem; min-width: 0; }
  .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; }
  .pw-head__code { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); overflow-wrap: anywhere; }
  .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); }
  .pw-head__fact { overflow-wrap: anywhere; }
  .pw-head__k { margin-inline-end: var(--sm-space-1); font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
  .pw-head__muted { color: var(--sm-text-muted); }
  .pw-head .pw-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-block-end: 1px solid var(--sm-border-subtle); }
  .pw-change { display: inline-flex; }
  .pw-change > .sm-btn .sm-icon { margin-inline-start: var(--sm-space-1); }
  .pw-lead { margin: 0; max-inline-size: 70ch; font-size: var(--sm-font-size-md); color: var(--sm-text-secondary); overflow-wrap: anywhere; }
  .pw-tiles { display: grid; gap: var(--smp-section-gap); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0; }
  .pw-tile { display: grid; gap: var(--sm-space-1); align-content: start; min-width: 0; padding: var(--smp-card-pad); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); }
  .pw-tile__k { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-secondary); }
  .pw-tile__v { font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-semibold); line-height: 1.3; color: var(--sm-text); overflow-wrap: anywhere; }
  .pw-tile__sub { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .pw-saved__k { margin-inline-end: var(--sm-space-2); }
  .pw-saved__links { display: inline-flex; flex-wrap: wrap; gap: var(--sm-space-1) var(--sm-space-4); margin-inline-start: var(--sm-space-3); }
  .pw-saved__links a { font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-link); }
  .pw-log { display: grid; margin: 0; padding: 0; list-style: none; background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); overflow: hidden; }
  .pw-log__item { display: grid; gap: var(--sm-space-1); min-width: 0; padding: var(--sm-space-3) var(--sm-space-4); border-block-start: 1px solid var(--sm-border-subtle); overflow-wrap: anywhere; }
  .pw-log__item:first-child { border-block-start: 0; }
  .pw-log__item p { margin: 0; }
  .pw-log__what { font-size: var(--sm-font-size-sm); color: var(--sm-text); }
  .pw-log__summary { color: var(--sm-text-secondary); }
  .pw-log__reason { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); white-space: pre-wrap; }
  .pw-log__reason--none { color: var(--sm-text-muted); }
  .pw-log__meta { font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .pw-log__meta a { color: var(--sm-text-link); }
  .pw-log__note { margin: 0; }
  .pw-pricing { container-type: inline-size; min-width: 0; }
  .pw-pricing .pp-num { text-align: end; font-variant-numeric: tabular-nums; }
  .pw-pricing .pp-plan { font-weight: var(--sm-font-weight-regular); text-align: start; }
  .pw-pricing .pp-plan .smp-pd__period, .pw-pricing .pp-period { display: block; font-size: var(--sm-font-size-md); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .pw-pricing .pp-plan__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2); margin-block-start: var(--sm-space-1); font-size: var(--sm-font-size-xs); color: var(--sm-text-secondary); }
  .pw-pricing .pp-amount { font-size: var(--sm-font-size-md); font-weight: var(--sm-font-weight-semibold); }
  .pw-pricing .pp-muted { color: var(--sm-text-muted); font-size: var(--sm-font-size-sm); }
  .pw-pricing .pp-check { display: inline-flex; align-items: center; gap: var(--sm-space-1); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); }
  .pw-pricing .pp-check--ok { color: var(--sm-success-text); }
  .pw-pricing .pp-check--warn { color: var(--sm-warning-text); }
  .pw-pricing .pp-check--bad { color: var(--sm-danger-text); }
  .pw-pricing .pp-actions { inline-size: 1%; white-space: nowrap; text-align: end; }
  /* Tablet (641 to 1100px): the six columns of a plan's Prices table plus the Edit price button are about 90px wider than the page, which hid the button. Tighter cells
     and a button that sizes to its text fit them, with nothing behind a sideways scroll. */
  @media (min-width: 641px) and (max-width: 1100px) {
    .pw-pricing .sm-table :is(th, td) { padding-inline: var(--sm-space-2); }
    .pw-pricing .pp-edit { inline-size: auto; min-inline-size: 6rem; }
  }
  .pw-pricing .pp-plan { max-inline-size: 18rem; }
  .pw-pricing code { overflow-wrap: anywhere; word-break: break-all; }
  .pw-pricing .pp-actions .pp-muted { white-space: normal; display: block; max-inline-size: 14rem; margin-inline-start: auto; }

  /* ---------------------------------------------------------- checkout and subscription flow (/account/checkout/*, /account/payment-canceled,
     /account/convert): one focused column. The order form is a grid: the fields, then the order summary (sm-card) with the totals, the terms and the
     buttons. From 60rem, when the order has fields to fill in, the summary moves to a sticky right column so the price stays in view while typing. */
  .smp-checkout { box-sizing: border-box; display: grid; gap: var(--sm-space-5); align-content: start; inline-size: 100%; max-inline-size: 40rem; margin-inline: auto; padding: var(--sm-space-8) var(--sm-space-4) var(--sm-space-12); color: var(--sm-text-secondary); }
  .smp-checkout:has(.smp-order__fields .sm-field) { max-inline-size: 64rem; }
  .smp-checkout p { margin: 0; }
  /* A payment outcome (not charged, payment received): one short card, so the heading and card are centred and the group sits in the middle of the window, not
     stuck at the top-left of an empty page. */
  .smp-checkout--outcome { max-inline-size: 34rem; min-block-size: calc(100svh - 9rem); align-content: center; }
  .smp-checkout--outcome > .smp-checkout__head { justify-items: center; text-align: center; }
  .smp-checkout--outcome > .smp-checkout__head > .smp-page-head { justify-items: center; }
  .smp-checkout .sm-overline { font-size: var(--sm-font-size-xs); }   /* the Portal floor: text >= 12px (the overline is 2xs) */
  .smp-checkout > .smp-page-head { margin: 0; padding-block-start: 0; }
  .smp-checkout .smp-page-head__sub { color: var(--sm-text-secondary); }
  .smp-checkout__head { display: grid; gap: var(--sm-space-2); }
  .smp-checkout__head > .sm-icon-tile { margin-block-end: var(--sm-space-1); }
  .smp-checkout__head > .smp-page-head { margin: 0; padding-block-start: 0; }
  .smp-checkout .sm-card { min-inline-size: 0; }
  .smp-checkout__plan { display: grid; gap: var(--sm-space-2); min-inline-size: 0; }
  .smp-checkout__terms { display: grid; gap: var(--sm-space-2); min-inline-size: 0; }
  .smp-checkout__plan > h2 { margin: 0; overflow-wrap: anywhere; }
  .smp-checkout .sm-card > h2, .smp-order__summary > h2, .smp-order__summary > div > h2, .smp-plan-line h2 { margin: 0; font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-checkout .sm-alert p + p { margin-block-start: var(--sm-space-1); }
  .smp-order { display: grid; gap: var(--sm-space-5); align-items: start; margin: 0; }
  .smp-order__fields { display: grid; gap: var(--sm-space-4); align-content: start; min-inline-size: 0; }
  .smp-order__summary { display: grid; gap: var(--sm-space-4); min-inline-size: 0; }
  @media (min-width: 60rem) {
    .smp-order:has(.smp-order__fields .sm-field) { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); column-gap: var(--sm-space-8); }
    .smp-order:has(.smp-order__fields .sm-field) > .smp-order__summary { position: sticky; inset-block-start: calc(4.75rem + var(--sm-space-4)); }
  }
  .smp-checkout .sm-field__error[hidden], .smp-checkout .sm-field__hint[hidden] { display: none; }
  .smp-checkout__note { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }

  /* The order summary: label left, amount right; the total line is the number that matters. A <dl> of one <div> per line. */
  .smp-summary { display: grid; margin: 0; border-block-start: 1px solid var(--sm-border-subtle); }
  .smp-summary > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sm-space-1) var(--sm-space-4); padding-block: var(--sm-space-3); border-block-end: 1px solid var(--sm-border-subtle); }
  .smp-summary dt { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-summary dd { margin: 0; font-size: var(--sm-font-size-sm); color: var(--sm-text); text-align: end; overflow-wrap: anywhere; }
  .smp-summary s { color: var(--sm-text-muted); }
  .smp-summary .sm-field__hint { display: block; }
  .smp-summary dt .sm-field__hint { max-inline-size: 38ch; margin-block-start: var(--sm-space-1); }
  .smp-summary__discount dd { font-weight: var(--sm-font-weight-semibold); color: var(--sm-success-text); }
  .smp-summary__total dd s { margin-inline-start: var(--sm-space-2); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-regular); }
  .smp-summary__total dt { font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-summary__total dd, .smp-summary__total dd strong { font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-bold); color: var(--sm-text); }
  .smp-summary__total dd .sm-field__hint { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-regular); }
  .smp-summary__link { display: inline-flex; align-items: center; min-block-size: var(--smp-tap); margin-inline-start: var(--sm-space-3); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-brand); }

  /* Current -> new (change plan, change seats): the new side wears the design system's selected-choice look. */
  .smp-change { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--sm-space-3); }
  .smp-change__side { display: grid; gap: var(--sm-space-1); align-content: start; min-inline-size: 0; padding: var(--sm-space-4); background-color: var(--sm-bg-subtle); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-lg); }
  .smp-change__side--new { background-color: var(--sm-primary-subtle); border-color: var(--sm-primary); outline: 1px solid var(--sm-primary); }
  .smp-change__side strong { font-size: var(--sm-font-size-lg); color: var(--sm-text); overflow-wrap: anywhere; }
  .smp-change__price { font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-change__arrow { align-self: center; color: var(--sm-text-muted); }
  @media (max-width: 480px) { .smp-change { grid-template-columns: minmax(0, 1fr); } .smp-change__arrow { justify-self: center; transform: rotate(90deg); } }

  /* What this costs (Stripe's proration lines) on the design-system table. */
  .smp-checkout .smp-costs .sm-table th, .smp-checkout .smp-costs .sm-table td { padding-inline: 0; font-size: var(--sm-font-size-sm); vertical-align: baseline; }
  .smp-checkout .smp-costs .sm-table th { font-weight: var(--sm-font-weight-regular); color: var(--sm-text-secondary); white-space: normal; }
  .smp-checkout .smp-costs .sm-table td { text-align: end; color: var(--sm-text); white-space: nowrap; }
  .smp-checkout .smp-costs .sm-table td.sm-text-success { color: var(--sm-success-text); }
  .smp-checkout .smp-costs .sm-table tfoot th { font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-checkout .smp-costs .sm-table tfoot td, .smp-checkout .smp-costs .sm-table tfoot td strong { font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-bold); }
  .smp-checkout .smp-costs .sm-table .sm-badge { margin-inline-start: var(--sm-space-2); }
  .smp-checkout .smp-costs { border: 0; }

  /* account.css paints the .account-shell hero glow from the legacy --bg-tint-2, which stays the light #E8F5FF in dark mode on pages that are neither
     html.themeable nor body.console-shell (the credit-pack picker and its refusal), so the glow showed as a white patch behind the title. */
  html[data-theme="dark"] body:not(.console-shell) .account-shell { --bg-tint-2: var(--sm-bg-subtle); }

  /* The card that pays: label, card, expiry, Change link. */
  .smp-paying-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sm-space-2) var(--sm-space-3); padding: var(--sm-space-3) var(--sm-space-4); background-color: var(--sm-bg-subtle); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-lg); font-size: var(--sm-font-size-sm); }
  .smp-paying-card strong { color: var(--sm-text); }
  .smp-paying-card a { margin-inline-start: auto; display: inline-flex; align-items: center; min-block-size: var(--smp-tap); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text-brand); }
  .smp-label { font-size: var(--sm-font-size-xs); font-weight: var(--sm-font-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--sm-text-muted); }

  /* Consent before money moves: the design system's check row, holding a rich label. */
  .smp-checkout .sm-check { align-items: flex-start; }
  .smp-checkout .sm-check .sm-check__input { margin-block-start: .125rem; }
  .smp-checkout [data-consent-gated]:disabled { opacity: .5; cursor: not-allowed; }

  /* Seat stepper: a number box between two 44px icon buttons. */
  .smp-stepper { display: flex; align-items: stretch; gap: var(--sm-space-2); max-inline-size: 15rem; }
  .smp-stepper .sm-input { text-align: center; -moz-appearance: textfield; appearance: textfield; }
  .smp-stepper .sm-input::-webkit-outer-spin-button, .smp-stepper .sm-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* Promo code: one panel for every state (idle, error, applied). The input, the Apply or Remove button and the applied box share one 44px row and one corner
     radius, and a single message line sits under the row, so applying or refusing a code changes the colour and the words, never the layout. */
  .smp-promo { display: grid; gap: var(--sm-space-2); }
  .smp-promo .sm-field { display: grid; gap: var(--sm-space-2); }
  .smp-promo-row { display: flex; align-items: stretch; gap: var(--sm-space-2); }
  .smp-promo-row .sm-input { flex: 1 1 auto; min-inline-size: 0; min-block-size: var(--smp-tap); }
  .smp-promo-row .sm-btn { flex: none; min-block-size: var(--smp-tap); border-radius: var(--sm-radius-control); }
  .smp-promo-applied__box { display: flex; flex: 1 1 auto; align-items: center; gap: var(--sm-space-2); min-inline-size: 0; min-block-size: var(--smp-tap); padding-inline: var(--sm-space-3-5); border: var(--sm-border-width) solid var(--sm-success-border); border-radius: var(--sm-radius-control); background-color: var(--sm-success-subtle); color: var(--sm-success-text); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); overflow-wrap: anywhere; }
  .smp-promo-applied__box .sm-icon { flex: none; }
  .smp-promo__msg { display: flex; align-items: flex-start; gap: var(--sm-space-1-5); margin: 0; font-size: var(--sm-font-size-sm); line-height: 1.4; }
  .smp-promo__msg .sm-icon { flex: none; margin-block-start: .125rem; }
  .smp-promo__msg--ok { color: var(--sm-success-text); }
  .smp-promo__msg--error { color: var(--sm-danger-text); font-weight: var(--sm-font-weight-semibold); }

  /* Credit packs (the pack list): the balance line, then one card per pack. */
  .smp-packs { display: grid; gap: var(--sm-space-3); grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); margin: 0; padding: 0; list-style: none; }
  .smp-pack { display: grid; gap: var(--sm-space-2); align-content: start; }
  .smp-pack__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sm-space-1) var(--sm-space-2); }
  .smp-pack__credits { font-size: var(--sm-font-size-2xl); font-weight: var(--sm-font-weight-bold); color: var(--sm-text); }
  .smp-pack__price { font-size: var(--sm-font-size-lg); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-pack .sm-btn { margin-block-start: var(--sm-space-2); }

  /* Cancel (one decision): what stops, what stays, then the optional reason chips. */
  .smp-effects { display: grid; gap: var(--sm-space-4); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
  .smp-effects h2 { margin: 0 0 var(--sm-space-2); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-effects ul { display: grid; gap: var(--sm-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--sm-font-size-sm); }
  .smp-effects li { display: flex; gap: var(--sm-space-2); align-items: flex-start; }
  .smp-effects li > .sm-icon { flex: none; margin-block-start: .125rem; }
  .smp-reasons { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); }
  .smp-reasons .sm-choice-card { padding: var(--sm-space-2) var(--sm-space-3); min-block-size: var(--smp-tap); align-items: center; }
  .smp-plan-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sm-space-1) var(--sm-space-4); }
  .smp-plan-line strong { font-size: var(--sm-font-size-lg); color: var(--sm-text); }

  /* Status card for the one-message account pages (confirm email, lockout, access denied, ...): one centred column, icon, title, copy, actions. */
  .smp-status-stage { box-sizing: border-box; display: flex; justify-content: center; inline-size: 100%; padding: var(--sm-space-8) var(--sm-space-4) var(--sm-space-12); }
  .smp-status { display: grid; justify-items: center; gap: var(--sm-space-4); inline-size: 100%; max-inline-size: 32rem; padding: var(--sm-space-8) var(--sm-space-6); text-align: center; color: var(--sm-text-secondary); }
  .smp-status h1, .smp-status h2, .smp-status p { margin: 0; overflow-wrap: anywhere; }
  .smp-status h2 { margin-block-start: var(--sm-space-2); }
  .smp-status .sm-alert, .smp-status > form { inline-size: 100%; text-align: start; }
  .smp-status > form { display: grid; gap: var(--sm-space-4); }
  .smp-status__icon { display: inline-grid; place-items: center; inline-size: var(--sm-space-12); block-size: var(--sm-space-12); border-radius: var(--sm-radius-full); background: var(--sm-primary-subtle); color: var(--sm-text-brand); }
  .smp-status__icon .sm-icon { inline-size: var(--sm-icon-size-lg); block-size: var(--sm-icon-size-lg); }
  .smp-status__icon--good { background: var(--sm-success-subtle); color: var(--sm-success-icon); }
  .smp-status__icon--bad { background: var(--sm-danger-subtle); color: var(--sm-danger-icon); }
  .smp-status__icon--warn { background: var(--sm-warning-subtle); color: var(--sm-warning-icon); }
  .smp-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sm-space-3); }
  .smp-status a:not([class]) { color: var(--sm-text-link); }
  .smp-status a:not([class]):hover { color: var(--sm-text-link-hover); }
  /* Razor's validation summary (asp-validation-summary): hidden while valid, the error list in the danger text colour once a post is refused. */
  .smp-status .validation-summary-valid { display: none; }
  .smp-status .validation-summary-errors ul { display: grid; gap: var(--sm-space-1); margin: 0; padding-inline-start: var(--sm-space-5); color: var(--sm-danger-text); font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); }
  @media (max-width: 30em) {
    .smp-status { padding: var(--sm-space-6) var(--sm-space-4); }
    .smp-status__actions { flex-direction: column; align-self: stretch; }
    .smp-status__actions > :is(.sm-btn, form, form .sm-btn) { inline-size: 100%; }
  }

  /* Sign-in pages (.auth.smp-auth): fields use the design system's own control look. ds-auth.css (unlayered, still linked for the two-panel layout)
     sets the old look on .auth .sm-field; sm-interop.css reverts those declarations for .smp-auth so these rules apply. */
  .smp-auth .sm-eyebrow { display: flex; margin-block-end: var(--sm-space-3); }
  .smp-auth .sm-field { gap: var(--sm-space-2); }
  .smp-auth .sm-field .sm-field__label { font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-semibold); color: var(--sm-text); }
  .smp-auth .sm-field .sm-input { min-block-size: 2.75rem; block-size: auto; padding-block: var(--sm-space-2); padding-inline: var(--sm-space-4); border: var(--sm-border-width) solid var(--sm-border-control); border-radius: var(--sm-radius-control); background: var(--sm-surface); font-size: var(--sm-font-size-md); font-weight: var(--sm-font-weight-regular); color: var(--sm-text); }
  .smp-auth .sm-field .sm-input:hover { border-color: var(--sm-border-control-hover); }
  .smp-auth .sm-field .sm-input:focus { border-color: var(--sm-border-selected); }
  .smp-auth .sm-field .sm-input::placeholder { font-weight: var(--sm-font-weight-regular); color: var(--sm-text-muted); }
  .smp-auth .sm-field .sm-field__error { font-size: var(--sm-font-size-sm); font-weight: var(--sm-font-weight-medium); color: var(--sm-danger-text); }
  .smp-auth .auth-forgot a, .smp-auth .auth-alt a { color: var(--sm-text-link); }
  .smp-auth :is(.auth-forgot, .auth-alt) a:hover { color: var(--sm-text-link-hover); }
  /* The eye button site.js adds to a password field sits inside the control: keep the text clear of it. */
  .smp-auth .sm-field .pw-box .sm-input { padding-inline-end: calc(var(--smp-tap) + var(--sm-space-2)); }
}

/* Admin contract dialogs (New contract here, the same field partial on contract edit and conversion): one rhythm for the rows, fields and hints, and room under the last
   row so the sticky footer never sits on a hint. Scoped to the dialog and the edit page's contract form so the legacy .sd-* rules on full pages are untouched. */
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack { row-gap: var(--sm-space-6); column-gap: var(--sm-space-5); }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-row { margin: 0; gap: var(--sm-space-2); }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-row > .sm-field,
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-control--cols > .sm-field,
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-inline > .sm-field { gap: var(--sm-space-2); }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-control--cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sm-space-5); }
@media (min-width: 900px) { body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-control--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-row > .sm-field > .sm-field__hint { margin-block-start: var(--sm-space-2); }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-row > .sm-field > .feat-switch { margin-block-start: var(--sm-space-3); }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-sec { margin-block: var(--sm-space-4) 0; padding-block-start: var(--sm-space-5); }
body.admin :is(.sm-dialog, .ds-contract-form) .ds-sdstack .sd-sec:first-child { margin-block-start: 0; padding-block-start: 0; }
body.admin .sm-dialog .sm-dialog__body form { padding-block-end: var(--sm-space-8); }
/* The edit page's form sits in the narrow column beside the contract summary: thirds and halves are full width, so dates and credit labels are not clipped. */
body.admin .ds-contract-form .ds-sdstack:has(> .sd-sec) > .sd-row--third { grid-column: span 6; }
body.admin .ds-contract-form .ds-sdstack:has(> .sd-sec) > .sd-row--half { grid-column: span 6; }
body.admin .ds-contract-form .ds-sdstack .sd-inline { grid-template-columns: minmax(0, 1fr); }
body.admin .sm-dialog .sm-dialog__description { margin-block-end: var(--sm-space-4); }

/* Dark theme: site.css colors bare links with the light-theme blue, which is 3.6:1 on the dark surface. */
:root[data-theme="dark"] .app-shell a:not([class]) { color: var(--sm-text-link); }
:root[data-theme="dark"] .app-shell a:not([class]):hover { color: var(--sm-text-link-hover); }
:root[data-theme="dark"] .ds-org-guide__more > summary,
:root[data-theme="dark"] .ds-status__code { color: var(--sm-text-link); }

/* Upstream auth pages (request an invitation, invitation code, two-step, recovery code) */
@layer sm.portal {
  .smp-auth .smp-auth-legal { margin: 0; text-align: center; text-wrap: pretty; }
  .smp-auth .sm-btn.is-picked { outline: 2px solid var(--sm-border-selected); outline-offset: 2px; }
  .smp-auth--entry .sm-field .sm-input { min-block-size: var(--sm-control-height-xl); border-color: var(--sm-border-subtle); border-radius: var(--sm-radius-lg); background: var(--sm-surface-raised); }
  .smp-auth--entry .sm-field .sm-input:hover { border-color: var(--sm-border-control-hover); }
  .smp-auth--entry .sm-field .sm-input:focus { border-color: var(--sm-border-selected); }
  .smp-auth--entry .auth-row .auth-forgot a { color: var(--sm-text); font-weight: var(--sm-font-weight-semibold); }
  .smp-auth--entry .auth-row .auth-forgot a:hover { color: var(--sm-text-link-hover); }
  .smp-auth--entry .fields > .sm-btn--primary { --_h: var(--sm-control-height-xl); background-image: linear-gradient(90deg, var(--sm-accent), var(--sm-primary)); box-shadow: var(--sm-shadow-glow); }
  .smp-auth--entry .fields > .sm-btn--primary:hover { background-image: linear-gradient(90deg, var(--sm-accent), var(--sm-primary-hover)); }
  .smp-auth--entry .auth-social { justify-content: center; }
  .smp-auth--entry .auth-social .sm-btn { --_bg: var(--sm-surface-raised); --_bd: var(--sm-border-subtle); flex: 0 0 auto; inline-size: 5rem; min-block-size: 3.25rem; border-radius: var(--sm-radius-lg); }
}

/* Two-step and security pages: the account two-step settings and setup, the recovery codes and the admin Security policy. */
@layer sm.portal {
  .smp-twostep { display: grid; gap: var(--sm-space-6); inline-size: 100%; min-width: 0; }
  .smp-twostep .smp-form { display: grid; gap: var(--smp-form-gap); }
  .smp-twostep .smp-form > .sm-field { max-inline-size: 28rem; }
  .smp-qr { inline-size: fit-content; max-inline-size: 100%; padding: var(--sm-space-3); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); }
  .smp-qr svg { display: block; max-inline-size: 100%; block-size: auto; }
  .smp-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sm-space-3); margin: 0; padding: 0; list-style: none; }
  .smp-code { min-width: 0; padding: var(--sm-space-3) var(--sm-space-4); background: var(--sm-surface); border: 1px solid var(--sm-border-subtle); border-radius: var(--sm-radius-card); overflow-wrap: anywhere; }
  .smp-switch { display: grid; gap: var(--sm-space-2); }
  .smp-counts { display: grid; gap: var(--sm-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--sm-font-size-sm); color: var(--sm-text-secondary); }
  .smp-counts strong { color: var(--sm-text); }
}

/* Canvas reference content: native lists keep their markers despite the marketing reset. */
.smp-canvas-list { list-style: disc; padding-inline-start: var(--sm-space-5); display: flex; flex-direction: column; gap: var(--sm-space-3); color: var(--sm-text-secondary); }

.smp-canvas-closing { padding: var(--sm-space-10); border-radius: var(--sm-radius-panel); background: var(--sm-primary); color: var(--sm-on-primary); justify-content: space-between; }
.smp-canvas-closing > div { flex: 1 1 60%; min-width: 0; }
.smp-canvas-closing h2, .smp-canvas-closing p { color: inherit; }
.smp-canvas-closing h2 { font-size: var(--sm-font-size-4xl); }
.smp-canvas-amplify { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sm-space-12); }
.smp-canvas-use { display: flex; align-items: flex-start; gap: var(--sm-space-5); }
.smp-canvas-use > .sm-icon { flex: none; color: var(--sm-primary); }
@media (min-width: 64rem) { .smp-canvas-amplify { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }

/* Canvas hero follows its content height instead of reserving a full viewport. */
.sec-hero.smp-canvas-hero { padding-block-end: var(--sm-space-12); }