/* =============================================================================
   STRATAMIZE ONE — COMPONENT LAYER
   stratamize-components.css · v1.0.0
   -----------------------------------------------------------------------------
   HAND-AUTHORED. This is the one file in dist/ that is NOT build output and must
   never be overwritten by tools/build-tokens.mjs.

   Contract:
     - Consumes ONLY var(--sm-*) custom properties from the generated token layer.
     - Contains ZERO raw hex, rgb(), px radius, or ms duration. (Two documented
       exceptions below, both forced by the CSS spec itself.)
     - No build step, no preprocessor, no dependencies. Works identically in a
       React/Tailwind app (POS), a FreeMarker/Javalin server-rendered app
       (CRM, Invoicing), and a static marketing page.

   Load order (required, in this order):
     1. <link rel="stylesheet" href="stratamize.css">            <- generated token layer
     2. <link rel="stylesheet" href="stratamize-components.css"> <- this file

   `stratamize.css` is the file emitted by tools/build-tokens.mjs; it is the
   only source of the --sm-* custom properties. This file DEFINES no tokens and
   has no fallbacks, so loading it without stratamize.css first yields
   components with every colour, size and duration unresolved — i.e. unstyled.
   There is no `stratamize-tokens.css`; that name has never been emitted.

   Light/dark: components carry NO per-mode overrides. Every component renders
   correctly in both modes purely by virtue of consuming semantic tokens, which
   the token layer flips. If a component here ever needs a per-mode override, the
   token layer is missing a semantic role — fix the spine, not this file. The two
   places that legitimately depart from this are marked DELIBERATE MODE-INVARIANT
   and explained inline (.sm-surface-navy and its descendants).

   LITERAL AUDIT — every non-var() value in this file, and why it is here.
   Verified: 0 raw hex, 0 rgb(), 0 raw color of any kind.

     1. Media-query breakpoint (1024px, once — line 277). CSS custom properties are not
        valid in media feature values — this is a spec limitation, not a choice.
        Transcribed from breakpoint.lg in the spine and MUST be kept in sync.
        TODO(spine): when the build gains a media-query emitter, generate these.

     2. `1px` border hairlines (~40 occurrences). *** REAL SPINE GAP ***
        The spine has no borderWidth group. radius.xs is the smallest length
        token at 4px and focus.ringWidth is 2px, so there is nothing legal to
        reference for a 1px rule. Per the "never invent a value" rule this is
        reported rather than papered over with a made-up token. It is also NOT
        written with a var() fallback, because referencing a --sm-* name that
        does not exist in the spine would trip brand-lint.
        TODO(spine): add a borderWidth group — hairline 1px, thin 2px,
        thick 4px — which would emit as sm-border-width-hairline / -thin /
        -thick. Then sweep this file: every "1px solid" takes the hairline
        token, and the four places currently borrowing the focus ring width as
        a geometry value (.sm-tab::after height, .sm-divider--brand height,
        .sm-kbd border-bottom-width, .sm-avatar-group ring) take the thin
        token. That borrowing is semantically wrong — a focus token should not
        be setting decorative thickness — and is flagged here, not hidden.

     3. `1ms` in .sm-reduce-motion. A kill-switch, not a design duration.
        Deliberately 1ms and not 0 so that animationend/transitionend listeners
        still fire and product JS does not hang waiting on an event.

     4. Unitless geometry: transform percentages (translate(-50%)), gradient
        colour stops (50%), clip-path polygon points, and the 1px/-1px
        .sm-visually-hidden clip idiom. These are geometry, not design decisions,
        and have no token analogue in any design system.

   Section index:
     00  Base / reset
     01  Layout — container, shell, sidebar, topbar
     02  Buttons
     03  Forms — field, label, input, select, textarea, checkbox, radio, switch
     04  Card
     05  Badge · Chip
     06  Alert
     07  Table
     08  Tabs
     09  Nav
     10  Overlays — modal, popover, tooltip, toast
     11  Feedback — progress, spinner, skeleton
     12  Data & misc — avatar, divider, kbd, breadcrumb, pagination,
                       empty-state, stat
     13  Marketing — eyebrow, section, hero, feature-card, cta-band,
                     logo-lockup, prose
     14  Utilities
     15  Motion layer  (all transitions/animations live here)
     16  Forced-colors & print

   STRUCTURAL / REGIONAL CLASSES — part of the contract, easy to miss.
   These six are containers and behaviours rather than visual components. None
   of them looks like anything on its own, which is exactly why they were absent
   from earlier copies of the published class list. They are legitimate; the
   contract was incomplete, not this file.

     .sm-auth          Full-viewport centring shell for login / sign-up /
                       password-reset. place-items:center over 100dvh, with a
                       .sm-auth__panel child capped at a readable width.
     .sm-table-wrap    Horizontal scroll container for .sm-table. Owns the
                       border, radius and raised background so a wide table
                       scrolls INSIDE its own box rather than making the page
                       scroll sideways.
     .sm-toast-region  The one fixed --sm-z-toast live region that stacks
                       .sm-toast elements bottom-end. Toasts go inside it; a
                       toast positioned on its own will not stack.
     .sm-avatar-group  Overlapping avatar stack — negative inline margin plus a
                       punch-out ring on each neighbour so the overlap reads as
                       depth and not as a rendering fault.
     .sm-numeric       Opt-in tabular-nums. Already applied inside .sm-table td,
                       .sm-stat__value and .sm-pagination__item; use the class
                       directly for money/IDs/counts outside those.
     .sm-reveal        Marketing scroll reveal (+ .sm-reveal--in, toggled by
                       product JS). Defined inside the reduced-motion guard, and
                       the prefers-reduced-motion:reduce arm forces it visible —
                       content is never hidden from a user who suppressed motion.
   ============================================================================= */


/* =============================================================================
   00 · BASE / RESET
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor scrolling clears the sticky topbar. */
  scroll-padding-top: var(--sm-top-bar-height);
}

body {
  margin: 0;
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-base);
  line-height: var(--sm-leading-base);
  font-weight: var(--sm-weight-regular);
  color: var(--sm-text-primary);
  background-color: var(--sm-surface-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--sm-font-display);
  font-weight: var(--sm-weight-bold);
  color: var(--sm-text-primary);
  letter-spacing: var(--sm-tracking-tight);
}

/* App-density heading defaults. Marketing headings are re-scaled in section 13. */
h1 { font-size: var(--sm-text-4xl); line-height: var(--sm-leading-4xl); }
h2 { font-size: var(--sm-text-3xl); line-height: var(--sm-leading-3xl); }
h3 { font-size: var(--sm-text-2xl); line-height: var(--sm-leading-2xl); }
h4 { font-size: var(--sm-text-xl);  line-height: var(--sm-leading-xl); }
h5 { font-size: var(--sm-text-lg);  line-height: var(--sm-leading-lg); letter-spacing: var(--sm-tracking-normal); }
h6 { font-size: var(--sm-text-md);  line-height: var(--sm-leading-md); letter-spacing: var(--sm-tracking-normal); }

p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

a {
  color: var(--sm-text-link);
  text-decoration-color: var(--sm-border-brand);
  text-underline-offset: var(--sm-space-1);
}

a:hover {
  text-decoration-color: currentColor;
}

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

code, pre, samp, kbd {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-text-sm);
}

/* Tabular figures everywhere money and IDs appear. */
.sm-numeric,
.sm-table td,
.sm-stat__value,
.sm-pagination__item {
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--sm-border-subtle); /* see LITERAL AUDIT note 2 */
  margin: 0;
}

::selection {
  /* Instructed to use the brand tint. NOTE: in dark mode brandTint is a 10%
     alpha wash, which reads faint as a selection highlight.
     TODO(spine): add semantic.surface.selection (a stronger, mode-aware
     selection backing). Not inventing one here. */
  background-color: var(--sm-surface-brand-tint);
  color: var(--sm-text-primary);
}

/* Scrollbars — Firefox + WebKit/Blink. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sm-border-strong) transparent;
}

::-webkit-scrollbar {
  width: var(--sm-space-2);
  height: var(--sm-space-2);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--sm-border-strong);
  border-radius: var(--sm-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--sm-text-tertiary);
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* -----------------------------------------------------------------------------
   Internal composition helpers — NOT tokens.
   Deliberately named --sm-internal-* so they can never be mistaken for, or
   collide with, a generated token. Both are composed purely from focus tokens.
   -------------------------------------------------------------------------- */
:root {
  /* The canonical focus ring. Box-shadow (not outline) so the ring's inner gap
     is painted with --sm-focus-ring-offset-color, which is what that token is
     for — outline-offset would expose whatever happens to sit behind. */
  --sm-internal-ring:
    0 0 0 var(--sm-focus-ring-offset) var(--sm-focus-ring-offset-color),
    0 0 0 calc(var(--sm-focus-ring-offset) + var(--sm-focus-ring-width)) var(--sm-focus-ring);
  /* Components set this to their resting shadow so :focus-visible can stack the
     ring on top without destroying elevation. */
  --sm-internal-shadow: none;
}


/* =============================================================================
   01 · LAYOUT — container, shell, sidebar, topbar
   ============================================================================= */

.sm-container {
  width: 100%;
  max-width: var(--sm-container-max);
  margin-inline: auto;
  padding-inline: var(--sm-space-6);
}

.sm-container--wide {
  max-width: var(--sm-container-wide);
}

/* App shell: sidebar + topbar + content. Grid areas keep the topbar full-width
   above the sidebar so the navy band spans the whole viewport. */
.sm-shell {
  display: grid;
  grid-template-columns: var(--sm-sidebar-width) minmax(0, 1fr);
  grid-template-rows: var(--sm-top-bar-height) minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--sm-surface-sunken);
}

.sm-shell > .sm-topbar  { grid-area: topbar; }
.sm-shell > .sm-sidebar { grid-area: sidebar; }
.sm-shell > .sm-shell__main,
.sm-shell > main        { grid-area: main; }

.sm-shell__main {
  min-width: 0;
  padding: var(--sm-space-6);
  overflow-y: auto;
}

.sm-shell--collapsed {
  grid-template-columns: var(--sm-sidebar-collapsed) minmax(0, 1fr);
}

/* Below lg the sidebar leaves the flow; product code toggles .sm-sidebar--open. */
@media (width < 1024px) { /* breakpoint.lg */
  .sm-shell,
  .sm-shell--collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  .sm-shell > .sm-sidebar {
    position: fixed;
    inset-block: var(--sm-top-bar-height) 0;
    inset-inline-start: 0;
    z-index: var(--sm-z-drawer);
    width: var(--sm-sidebar-width);
    transform: translateX(-100%);
  }

  .sm-shell > .sm-sidebar.sm-sidebar--open {
    transform: translateX(0);
  }
}

/* --- Topbar ---------------------------------------------------------------
   DELIBERATE MODE-INVARIANT SEAM. The topbar is .sm-surface-navy: it renders
   identically in light and dark. This is the visual hand-off — the marketing
   footer band, this app topbar, and the auth/login screen are the same navy, so
   a user crossing from stratamize.com into the product never experiences a
   brand discontinuity. Do not make this mode-aware. See section 14.
   ------------------------------------------------------------------------- */
.sm-topbar {
  position: sticky;
  top: 0;
  z-index: var(--sm-z-header);
  display: flex;
  align-items: center;
  gap: var(--sm-space-4);
  height: var(--sm-top-bar-height);
  padding-inline: var(--sm-space-4);
  background-color: var(--sm-surface-brand-deep);
  background-image: var(--sm-gradient-navy-band);
  border-bottom: 1px solid var(--sm-brand-800); /* mode-invariant hairline on navy */
  color: var(--sm-text-on-brand);
}

.sm-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  margin-inline-end: var(--sm-space-2);
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-lg);
  font-weight: var(--sm-weight-bold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-on-brand);
  text-decoration: none;
}

.sm-topbar__spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.sm-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
}

/* --- Sidebar -------------------------------------------------------------- */
.sm-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-1);
  width: 100%;
  padding: var(--sm-space-3);
  background-color: var(--sm-surface-raised);
  border-inline-end: 1px solid var(--sm-border-subtle);
  overflow-y: auto;
}

.sm-sidebar__section {
  padding-block: var(--sm-space-2);
}

.sm-sidebar__heading {
  padding: var(--sm-space-2) var(--sm-space-3);
  font-size: var(--sm-text-2xs);
  line-height: var(--sm-leading-2xs);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  color: var(--sm-text-tertiary);
}

.sm-sidebar__footer {
  margin-top: auto;
  padding-top: var(--sm-space-3);
  border-top: 1px solid var(--sm-border-subtle);
}

/* Collapsed rail hides labels, keeps icons + touch target. */
.sm-shell--collapsed .sm-sidebar .sm-nav-item__label,
.sm-shell--collapsed .sm-sidebar .sm-sidebar__heading {
  display: none;
}

.sm-shell--collapsed .sm-sidebar .sm-nav-item {
  justify-content: center;
  padding-inline: var(--sm-space-2);
}


/* =============================================================================
   02 · BUTTONS
   ============================================================================= */

.sm-btn {
  --sm-internal-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-2);
  height: var(--sm-control-height-md);
  padding-inline: var(--sm-space-4);
  border: 1px solid transparent;
  border-radius: var(--sm-radius-md);
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  color: var(--sm-text-primary);
  box-shadow: var(--sm-internal-shadow);
}

.sm-btn:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent; /* forced-colors hook */
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring), var(--sm-internal-shadow);
}

.sm-btn:disabled,
.sm-btn[aria-disabled="true"],
.sm-btn.sm-btn--disabled {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.sm-btn__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
}

/* --- Primary -------------------------------------------------------------- */
.sm-btn--primary {
  background-color: var(--sm-action-primary-bg);
  color: var(--sm-action-primary-fg);
  border-color: transparent;
}

.sm-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-primary-bg-hover);
  --sm-internal-shadow: var(--sm-shadow-glow-brand);
  box-shadow: var(--sm-internal-shadow);
}

.sm-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-primary-bg-active);
  --sm-internal-shadow: none;
  box-shadow: none;
}

/* --- Secondary ------------------------------------------------------------ */
.sm-btn--secondary {
  background-color: var(--sm-action-secondary-bg);
  color: var(--sm-action-secondary-fg);
  border-color: var(--sm-action-secondary-border);
  --sm-internal-shadow: var(--sm-shadow-xs);
  box-shadow: var(--sm-internal-shadow);
}

.sm-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-secondary-bg-hover);
  border-color: var(--sm-border-strong);
}

.sm-btn--secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-secondary-bg-active);
}

/* --- Ghost ---------------------------------------------------------------- */
.sm-btn--ghost {
  background-color: var(--sm-action-ghost-bg);
  color: var(--sm-action-ghost-fg);
  border-color: transparent;
}

.sm-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-ghost-bg-hover);
}

.sm-btn--ghost:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-surface-active);
}

/* --- Danger --------------------------------------------------------------- */
.sm-btn--danger {
  background-color: var(--sm-action-danger-bg);
  color: var(--sm-action-danger-fg);
  border-color: transparent;
}

.sm-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-danger-bg-hover);
}

.sm-btn--danger:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--sm-action-danger-bg-active);
}

/* --- Sizes ---------------------------------------------------------------- */
.sm-btn--sm {
  height: var(--sm-control-height-sm);
  padding-inline: var(--sm-space-3);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  border-radius: var(--sm-radius-sm);
  gap: var(--sm-space-1);
}

/* Law 7: POS/terminal touch target. control-height-lg == touch-target-min. */
.sm-btn--lg {
  height: var(--sm-control-height-lg);
  min-width: var(--sm-touch-target-min);
  padding-inline: var(--sm-space-6);
  font-size: var(--sm-text-lg);
  line-height: var(--sm-leading-lg);
  gap: var(--sm-space-3);
}

.sm-btn--block {
  display: flex;
  width: 100%;
}

.sm-btn--icon {
  width: var(--sm-control-height-md);
  padding-inline: var(--sm-space-0);
}

.sm-btn--icon.sm-btn--sm { width: var(--sm-control-height-sm); }
.sm-btn--icon.sm-btn--lg { width: var(--sm-control-height-lg); }

/* Icon-only ghost buttons in the navy topbar need mode-invariant ink.
   DELIBERATE MODE-INVARIANT — see .sm-surface-navy note in section 14. */
.sm-topbar .sm-btn--ghost {
  color: var(--sm-brand-100);
}

.sm-topbar .sm-btn--ghost:hover:not(:disabled) {
  background-color: var(--sm-brand-800);
  color: var(--sm-text-on-brand);
}

/* Marketing context upgrades the primary button to the textSafe brand gradient.
   Law 1: brandCta runs brand-500 -> brand-700 and never lands on cyan, so white
   text holds >= 4.7:1 across the whole run. */
.sm-hero .sm-btn--primary,
.sm-cta-band .sm-btn--primary,
.sm-btn--primary.sm-btn--gradient {
  background-image: var(--sm-gradient-brand-cta);
}


/* =============================================================================
   03 · FORMS
   ============================================================================= */

.sm-field {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-2);
  min-width: 0;
}

.sm-field--row {
  flex-direction: row;
  align-items: center;
  gap: var(--sm-space-3);
}

.sm-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-1);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  font-weight: var(--sm-weight-semibold);
  color: var(--sm-text-secondary);
}

.sm-label--required::after {
  content: "*";
  color: var(--sm-status-danger-fg);
}

.sm-help {
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  color: var(--sm-text-tertiary);
}

.sm-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-space-1);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  font-weight: var(--sm-weight-medium);
  color: var(--sm-status-danger-fg);
}

/* --- Text controls -------------------------------------------------------- */
.sm-input,
.sm-select,
.sm-textarea {
  --sm-internal-shadow: var(--sm-shadow-xs);
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--sm-control-height-md);
  padding-inline: var(--sm-space-3);
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-regular);
  color: var(--sm-text-primary);
  background-color: var(--sm-surface-canvas);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-md);
  box-shadow: var(--sm-internal-shadow);
  appearance: none;
}

.sm-textarea {
  height: auto;
  min-height: calc(var(--sm-control-height-lg) * 2);
  padding-block: var(--sm-space-2);
  resize: vertical;
}

.sm-input::placeholder,
.sm-textarea::placeholder {
  color: var(--sm-text-muted);
}

.sm-input:hover:not(:disabled),
.sm-select:hover:not(:disabled),
.sm-textarea:hover:not(:disabled) {
  border-color: var(--sm-border-strong);
}

.sm-input:focus-visible,
.sm-select:focus-visible,
.sm-textarea:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  border-color: var(--sm-border-focus);
  box-shadow: var(--sm-internal-ring), var(--sm-internal-shadow);
}

.sm-input:disabled,
.sm-select:disabled,
.sm-textarea:disabled,
.sm-input[readonly],
.sm-textarea[readonly] {
  background-color: var(--sm-surface-sunken);
  color: var(--sm-text-tertiary);
  cursor: not-allowed;
  box-shadow: none;
}

.sm-input[aria-invalid="true"],
.sm-select[aria-invalid="true"],
.sm-textarea[aria-invalid="true"] {
  border-color: var(--sm-status-danger-solid);
  background-color: var(--sm-status-danger-bg);
}

.sm-input[aria-invalid="true"]:focus-visible,
.sm-select[aria-invalid="true"]:focus-visible,
.sm-textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--sm-status-danger-solid);
}

/* Size variants share the control-height scale with buttons. */
.sm-input--sm, .sm-select--sm {
  height: var(--sm-control-height-sm);
  padding-inline: var(--sm-space-2);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  border-radius: var(--sm-radius-sm);
}

.sm-input--lg, .sm-select--lg {
  height: var(--sm-control-height-lg);
  padding-inline: var(--sm-space-4);
  font-size: var(--sm-text-lg);
  line-height: var(--sm-leading-lg);
}

/* Native select chevron drawn as a token-coloured gradient wedge — no asset,
   no raw hex. Two linear-gradients form the caret. */
.sm-select {
  padding-inline-end: var(--sm-space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right var(--sm-space-4) center,
    right var(--sm-space-3) center;
  background-size: var(--sm-space-1) var(--sm-space-1);
  background-repeat: no-repeat;
  color: var(--sm-text-primary);
  cursor: pointer;
}

/* --- Checkbox & radio ----------------------------------------------------- */
.sm-checkbox,
.sm-radio {
  --sm-internal-shadow: none;
  flex: 0 0 auto;
  display: inline-grid;
  place-content: center;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  margin: 0;
  appearance: none;
  background-color: var(--sm-surface-canvas);
  border: 1px solid var(--sm-border-strong);
  cursor: pointer;
}

.sm-checkbox { border-radius: var(--sm-radius-xs); }
.sm-radio    { border-radius: var(--sm-radius-full); }

.sm-checkbox::before,
.sm-radio::before {
  content: "";
  transform: scale(0);
}

/* Checkmark drawn with clip-path — compositor-friendly, scales with the box. */
.sm-checkbox::before {
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  background-color: var(--sm-action-primary-fg);
  clip-path: polygon(21% 49%, 34% 36%, 43% 55%, 67% 26%, 79% 37%, 44% 76%);
}

.sm-radio::before {
  width: var(--sm-space-2);
  height: var(--sm-space-2);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-action-primary-fg);
}

.sm-checkbox:checked,
.sm-radio:checked,
.sm-checkbox:indeterminate {
  background-color: var(--sm-action-primary-bg);
  border-color: var(--sm-action-primary-bg);
}

.sm-checkbox:checked::before,
.sm-radio:checked::before {
  transform: scale(1);
}

.sm-checkbox:indeterminate::before {
  transform: scale(1);
  clip-path: polygon(22% 44%, 78% 44%, 78% 56%, 22% 56%);
}

.sm-checkbox:hover:not(:disabled),
.sm-radio:hover:not(:disabled) {
  border-color: var(--sm-border-focus);
}

.sm-checkbox:focus-visible,
.sm-radio:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-checkbox:disabled,
.sm-radio:disabled {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  background-color: var(--sm-surface-sunken);
}

.sm-checkbox[aria-invalid="true"],
.sm-radio[aria-invalid="true"] {
  border-color: var(--sm-status-danger-solid);
}

/* Touch-target expansion on terminal surfaces without changing visual size. */
.sm-checkbox--touch,
.sm-radio--touch {
  outline-offset: var(--sm-focus-ring-offset);
}

.sm-checkbox--touch::after,
.sm-radio--touch::after {
  content: "";
  position: absolute;
  min-width: var(--sm-touch-target-min);
  min-height: var(--sm-touch-target-min);
}

/* --- Switch --------------------------------------------------------------- */
.sm-switch {
  --sm-internal-shadow: none;
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: var(--sm-space-8);
  height: var(--sm-space-5);
  margin: 0;
  appearance: none;
  border: 1px solid var(--sm-border-strong);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-surface-hover);
  cursor: pointer;
  vertical-align: middle;
}

.sm-switch::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: var(--sm-space-1);
  width: var(--sm-space-3);
  height: var(--sm-space-3);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-surface-canvas);
  box-shadow: var(--sm-shadow-xs);
  transform: translate(0, -50%);
}

.sm-switch:checked {
  background-color: var(--sm-action-primary-bg);
  border-color: var(--sm-action-primary-bg);
}

.sm-switch:checked::before {
  /* translate only — never animate inset/left. Law 6. */
  transform: translate(var(--sm-space-3), -50%);
  background-color: var(--sm-action-primary-fg);
}

.sm-switch:hover:not(:disabled) {
  border-color: var(--sm-border-focus);
}

.sm-switch:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-switch:disabled {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
}

.sm-switch--lg {
  width: var(--sm-space-12);
  height: var(--sm-space-6);
}

.sm-switch--lg::before {
  width: var(--sm-space-4);
  height: var(--sm-space-4);
}

.sm-switch--lg:checked::before {
  transform: translate(var(--sm-space-6), -50%);
}


/* =============================================================================
   04 · CARD
   ============================================================================= */

.sm-card {
  --sm-internal-shadow: var(--sm-shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--sm-surface-raised);
  border: 1px solid var(--sm-border-subtle);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-internal-shadow);
  overflow: hidden;
}

.sm-card__header {
  display: flex;
  align-items: center;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4) var(--sm-space-5);
  border-bottom: 1px solid var(--sm-border-subtle);
}

.sm-card__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-lg);
  line-height: var(--sm-leading-lg);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  color: var(--sm-text-primary);
}

.sm-card__subtitle {
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  color: var(--sm-text-tertiary);
}

.sm-card__actions {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
}

.sm-card__body {
  flex: 1 1 auto;
  padding: var(--sm-space-5);
  color: var(--sm-text-secondary);
}

.sm-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4) var(--sm-space-5);
  background-color: var(--sm-surface-sunken);
  border-top: 1px solid var(--sm-border-subtle);
}

/* A card whose whole surface is a link/button target. */
.sm-card--interactive {
  cursor: pointer;
  text-align: start;
}

.sm-card--interactive:hover {
  --sm-internal-shadow: var(--sm-shadow-md);
  box-shadow: var(--sm-internal-shadow);
  border-color: var(--sm-border-brand);
}

.sm-card--interactive:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring), var(--sm-internal-shadow);
}

/* An interactive card is a real control (a card-sized <button> or <a>), so it
   needs the same unavailable state every other control has. Both selectors are
   carried because the element may be rendered either way: <button> takes
   :disabled, <a> can only take aria-disabled. Matches the .sm-btn pattern. */
.sm-card--interactive:disabled,
.sm-card--interactive[aria-disabled="true"] {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  border-color: var(--sm-border-subtle);
}

.sm-card--flush .sm-card__body {
  padding: var(--sm-space-0);
}

.sm-card--selected {
  border-color: var(--sm-border-brand);
  background-color: var(--sm-surface-brand-tint);
}


/* =============================================================================
   05 · BADGE · CHIP
   ============================================================================= */

.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-1);
  padding: var(--sm-space-1) var(--sm-space-2);
  border: 1px solid transparent;
  border-radius: var(--sm-radius-sm);
  font-size: var(--sm-text-xs);
  line-height: var(--sm-leading-xs);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  white-space: nowrap;
  /* Neutral is the default so a bare .sm-badge is never unstyled. */
  background-color: var(--sm-surface-hover);
  color: var(--sm-text-secondary);
  border-color: var(--sm-border-subtle);
}

.sm-badge--neutral {
  background-color: var(--sm-surface-hover);
  color: var(--sm-text-secondary);
  border-color: var(--sm-border-subtle);
}

.sm-badge--brand {
  background-color: var(--sm-surface-brand-tint);
  color: var(--sm-text-brand);
  border-color: var(--sm-border-brand);
}

.sm-badge--success {
  background-color: var(--sm-status-success-bg);
  color: var(--sm-status-success-fg);
  border-color: var(--sm-status-success-border);
}

.sm-badge--warning {
  background-color: var(--sm-status-warning-bg);
  color: var(--sm-status-warning-fg);
  border-color: var(--sm-status-warning-border);
}

.sm-badge--danger {
  background-color: var(--sm-status-danger-bg);
  color: var(--sm-status-danger-fg);
  border-color: var(--sm-status-danger-border);
}

/* Info rides the cyan status ramp: cyan as FG on a 15% tint, never white-on-cyan.
   Law 1 holds — this is tinted text, not a text-bearing cyan fill. */
.sm-badge--info {
  background-color: var(--sm-status-info-bg);
  color: var(--sm-status-info-fg);
  border-color: var(--sm-status-info-border);
}

.sm-badge--dot::before {
  content: "";
  width: var(--sm-space-2);
  height: var(--sm-space-2);
  border-radius: var(--sm-radius-full);
  background-color: currentColor;
  flex: 0 0 auto;
}

.sm-badge--pill {
  border-radius: var(--sm-radius-full);
  padding-inline: var(--sm-space-3);
}

/* --- Chip: a badge that can be interacted with / dismissed ----------------- */
.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  height: var(--sm-control-height-sm);
  padding-inline: var(--sm-space-3);
  border: 1px solid var(--sm-border-default);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-surface-raised);
  color: var(--sm-text-secondary);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  font-weight: var(--sm-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.sm-chip:hover {
  background-color: var(--sm-surface-hover);
  border-color: var(--sm-border-strong);
}

.sm-chip:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-chip[aria-pressed="true"],
.sm-chip--active {
  background-color: var(--sm-surface-brand-tint);
  border-color: var(--sm-border-brand);
  color: var(--sm-text-brand);
}

.sm-chip:disabled,
.sm-chip[aria-disabled="true"] {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.sm-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-space-4);
  height: var(--sm-space-4);
  margin-inline-end: calc(var(--sm-space-1) * -1);
  border: 0;
  border-radius: var(--sm-radius-full);
  background-color: transparent;
  color: var(--sm-text-tertiary);
  cursor: pointer;
}

.sm-chip__remove:hover {
  background-color: var(--sm-surface-active);
  color: var(--sm-text-primary);
}

.sm-chip__remove:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

/* Removing a chip is an edit to a data set, not a dismissal of transient UI —
   a filter chip can legitimately be locked (a required facet, a permission the
   operator does not hold) while the chip itself must stay visible. So unlike
   the alert/toast/modal dismiss affordances, this one gets a disabled state.
   It also inherits the chip's own disabled state via pointer-events. */
.sm-chip__remove:disabled,
.sm-chip__remove[aria-disabled="true"] {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   06 · ALERT
   ============================================================================= */

.sm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4);
  border: 1px solid var(--sm-border-subtle);
  border-inline-start-width: var(--sm-space-1);
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-surface-raised);
  color: var(--sm-text-secondary);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
}

.sm-alert__icon {
  flex: 0 0 auto;
  width: var(--sm-space-5);
  height: var(--sm-space-5);
  color: currentColor;
}

.sm-alert__content {
  flex: 1 1 auto;
  min-width: 0;
}

.sm-alert__title {
  margin: 0 0 var(--sm-space-1);
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  color: var(--sm-text-primary);
}

.sm-alert__actions {
  display: flex;
  gap: var(--sm-space-2);
  margin-top: var(--sm-space-3);
}

.sm-alert__dismiss {
  flex: 0 0 auto;
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  color: var(--sm-text-tertiary);
  cursor: pointer;
  border-radius: var(--sm-radius-sm);
  padding: var(--sm-space-1);
}

.sm-alert__dismiss:hover { color: var(--sm-text-primary); }

.sm-alert__dismiss:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-alert--success {
  background-color: var(--sm-status-success-bg);
  border-color: var(--sm-status-success-border);
  border-inline-start-color: var(--sm-status-success-solid);
  color: var(--sm-status-success-fg);
}

.sm-alert--warning {
  background-color: var(--sm-status-warning-bg);
  border-color: var(--sm-status-warning-border);
  border-inline-start-color: var(--sm-status-warning-solid);
  color: var(--sm-status-warning-fg);
}

.sm-alert--danger {
  background-color: var(--sm-status-danger-bg);
  border-color: var(--sm-status-danger-border);
  border-inline-start-color: var(--sm-status-danger-solid);
  color: var(--sm-status-danger-fg);
}

.sm-alert--info {
  background-color: var(--sm-status-info-bg);
  border-color: var(--sm-status-info-border);
  border-inline-start-color: var(--sm-status-info-solid);
  color: var(--sm-status-info-fg);
}

/* Titles inside a status alert inherit the status hue, not text-primary. */
.sm-alert--success .sm-alert__title,
.sm-alert--warning .sm-alert__title,
.sm-alert--danger  .sm-alert__title,
.sm-alert--info    .sm-alert__title {
  color: currentColor;
}


/* =============================================================================
   07 · TABLE
   ============================================================================= */

.sm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sm-text-base);
  line-height: var(--sm-leading-base);
  color: var(--sm-text-secondary);
  text-align: start;
}

.sm-table caption {
  padding: var(--sm-space-3) var(--sm-space-4);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  color: var(--sm-text-tertiary);
  text-align: start;
}

.sm-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--sm-z-raised);
  padding: var(--sm-space-3) var(--sm-space-4);
  background-color: var(--sm-surface-raised);
  border-bottom: 1px solid var(--sm-border-default);
  font-size: var(--sm-text-2xs);
  line-height: var(--sm-leading-2xs);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  color: var(--sm-text-tertiary);
  text-align: start;
  white-space: nowrap;
}

.sm-table tbody td {
  padding: var(--sm-space-3) var(--sm-space-4);
  border-bottom: 1px solid var(--sm-border-subtle);
  vertical-align: middle;
}

.sm-table tbody tr:last-child td {
  border-bottom: 0;
}

.sm-table tbody tr:hover td {
  background-color: var(--sm-surface-hover);
}

.sm-table tbody tr[aria-selected="true"] td,
.sm-table tbody tr.sm-table__row--selected td {
  background-color: var(--sm-surface-brand-tint);
}

.sm-table tfoot td {
  padding: var(--sm-space-3) var(--sm-space-4);
  background-color: var(--sm-surface-sunken);
  border-top: 1px solid var(--sm-border-default);
  font-weight: var(--sm-weight-semibold);
  color: var(--sm-text-primary);
}

/* Sortable header button. */
.sm-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-1);
  border: 0;
  padding: var(--sm-space-0);
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: var(--sm-radius-xs);
}

.sm-table__sort:hover { color: var(--sm-text-primary); }

.sm-table__sort:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

/* A column can be genuinely unsortable — server-side sort unavailable, or the
   grid is mid-fetch. The header text must stay legible when that happens, so
   this state suppresses the affordance without dimming the column label into
   illegibility: no opacity change, tertiary ink, no hover response. */
.sm-table__sort:disabled,
.sm-table__sort[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--sm-text-tertiary);
}

.sm-table th[aria-sort="ascending"] .sm-table__sort,
.sm-table th[aria-sort="descending"] .sm-table__sort {
  color: var(--sm-text-brand);
}

.sm-table__num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-family: var(--sm-font-mono);
}

.sm-table--dense thead th,
.sm-table--dense tbody td,
.sm-table--dense tfoot td {
  padding: var(--sm-space-2) var(--sm-space-3);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
}

.sm-table--striped tbody tr:nth-child(even) td {
  background-color: var(--sm-surface-sunken);
}

.sm-table--bordered th,
.sm-table--bordered td {
  border: 1px solid var(--sm-border-subtle);
}

/* Horizontal scroll container so wide tables never break page layout. */
.sm-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sm-border-subtle);
  border-radius: var(--sm-radius-lg);
  background-color: var(--sm-surface-raised);
}


/* =============================================================================
   08 · TABS
   ============================================================================= */

.sm-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sm-space-1);
  border-bottom: 1px solid var(--sm-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}

.sm-tabs::-webkit-scrollbar { display: none; }

.sm-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  height: var(--sm-control-height-lg);
  padding-inline: var(--sm-space-4);
  border: 0;
  background: transparent;
  color: var(--sm-text-tertiary);
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--sm-radius-md) var(--sm-radius-md) var(--sm-radius-none) var(--sm-radius-none);
}

/* Underline drawn as a pseudo-element so activation animates scaleX, never width. */
.sm-tab::after {
  content: "";
  position: absolute;
  inset-inline: var(--sm-space-2);
  bottom: 0;
  height: var(--sm-focus-ring-width);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-action-primary-bg);
  transform: scaleX(0);
}

.sm-tab:hover {
  color: var(--sm-text-primary);
  background-color: var(--sm-surface-hover);
}

.sm-tab:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: calc(var(--sm-focus-ring-offset) * -1);
  box-shadow: var(--sm-internal-ring);
}

.sm-tab[aria-selected="true"],
.sm-tab--active {
  color: var(--sm-text-brand);
}

.sm-tab[aria-selected="true"]::after,
.sm-tab--active::after {
  transform: scaleX(1);
}

.sm-tab:disabled,
.sm-tab[aria-disabled="true"] {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.sm-tab__count {
  font-size: var(--sm-text-xs);
  line-height: var(--sm-leading-xs);
  font-weight: var(--sm-weight-semibold);
  color: var(--sm-text-tertiary);
  background-color: var(--sm-surface-hover);
  border-radius: var(--sm-radius-full);
  padding-inline: var(--sm-space-2);
}

/* Pill variant for segmented controls / filter bars. */
.sm-tabs--pills {
  border-bottom: 0;
  gap: var(--sm-space-1);
  padding: var(--sm-space-1);
  background-color: var(--sm-surface-sunken);
  border-radius: var(--sm-radius-md);
}

.sm-tabs--pills .sm-tab {
  height: var(--sm-control-height-md);
  border-radius: var(--sm-radius-sm);
}

.sm-tabs--pills .sm-tab::after { display: none; }

.sm-tabs--pills .sm-tab[aria-selected="true"],
.sm-tabs--pills .sm-tab.sm-tab--active {
  background-color: var(--sm-surface-raised);
  color: var(--sm-text-primary);
  box-shadow: var(--sm-shadow-xs);
}


/* =============================================================================
   09 · NAV
   ============================================================================= */

.sm-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-nav--horizontal {
  flex-direction: row;
  align-items: center;
}

.sm-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sm-space-3);
  min-height: var(--sm-control-height-md);
  padding: var(--sm-space-2) var(--sm-space-3);
  border-radius: var(--sm-radius-md);
  color: var(--sm-text-secondary);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-medium);
  text-decoration: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: start;
  width: 100%;
}

.sm-nav-item__icon {
  flex: 0 0 auto;
  width: var(--sm-space-5);
  height: var(--sm-space-5);
  color: var(--sm-text-tertiary);
}

.sm-nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm-nav-item__trailing {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--sm-text-tertiary);
  font-size: var(--sm-text-xs);
  line-height: var(--sm-leading-xs);
}

.sm-nav-item:hover {
  background-color: var(--sm-surface-hover);
  color: var(--sm-text-primary);
}

.sm-nav-item:hover .sm-nav-item__icon {
  color: var(--sm-text-primary);
}

.sm-nav-item:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-nav-item:active {
  background-color: var(--sm-surface-active);
}

.sm-nav-item--active,
.sm-nav-item[aria-current="page"] {
  background-color: var(--sm-surface-brand-tint);
  color: var(--sm-text-brand);
  font-weight: var(--sm-weight-semibold);
}

.sm-nav-item--active .sm-nav-item__icon,
.sm-nav-item[aria-current="page"] .sm-nav-item__icon {
  color: var(--sm-text-brand);
}

.sm-nav-item[aria-disabled="true"],
.sm-nav-item:disabled {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* Nav inside the navy topbar — DELIBERATE MODE-INVARIANT ink (section 14). */
.sm-topbar .sm-nav-item {
  color: var(--sm-brand-100);
}

.sm-topbar .sm-nav-item:hover {
  background-color: var(--sm-brand-800);
  color: var(--sm-text-on-brand);
}

.sm-topbar .sm-nav-item--active,
.sm-topbar .sm-nav-item[aria-current="page"] {
  background-color: var(--sm-brand-800);
  color: var(--sm-text-on-brand);
}


/* =============================================================================
   10 · OVERLAYS — modal, popover, tooltip, toast
   ============================================================================= */

.sm-modal__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--sm-z-overlay);
  background-color: var(--sm-surface-scrim);
  display: grid;
  place-items: center;
  padding: var(--sm-space-4);
  overflow-y: auto;
}

.sm-modal {
  position: relative;
  z-index: var(--sm-z-modal);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--sm-container-max);
  max-height: calc(100vh - var(--sm-space-16));
  background-color: var(--sm-surface-overlay);
  border: 1px solid var(--sm-border-subtle);
  border-radius: var(--sm-radius-xl);
  box-shadow: var(--sm-shadow-xl);
  overflow: hidden;
}

/* Sizes as a share of the content container, not arbitrary pixel widths. */
.sm-modal--sm { max-width: calc(var(--sm-container-max) / 4); }
.sm-modal--md { max-width: calc(var(--sm-container-max) / 2.5); }
.sm-modal--lg { max-width: calc(var(--sm-container-max) / 1.6); }
.sm-modal--full {
  max-width: none;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: var(--sm-radius-none);
}

.sm-modal__header {
  display: flex;
  align-items: center;
  gap: var(--sm-space-3);
  padding: var(--sm-space-5) var(--sm-space-6);
  border-bottom: 1px solid var(--sm-border-subtle);
}

.sm-modal__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-xl);
  line-height: var(--sm-leading-xl);
  font-weight: var(--sm-weight-bold);
  letter-spacing: var(--sm-tracking-normal);
  color: var(--sm-text-primary);
}

.sm-modal__close {
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-control-height-md);
  height: var(--sm-control-height-md);
  border: 0;
  border-radius: var(--sm-radius-md);
  background: transparent;
  color: var(--sm-text-tertiary);
  cursor: pointer;
}

.sm-modal__close:hover {
  background-color: var(--sm-surface-hover);
  color: var(--sm-text-primary);
}

.sm-modal__close:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-modal__body {
  flex: 1 1 auto;
  padding: var(--sm-space-6);
  overflow-y: auto;
  color: var(--sm-text-secondary);
}

.sm-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4) var(--sm-space-6);
  background-color: var(--sm-surface-sunken);
  border-top: 1px solid var(--sm-border-subtle);
}

/* --- Popover -------------------------------------------------------------- */
.sm-popover {
  position: absolute;
  z-index: var(--sm-z-popover);
  min-width: var(--sm-sidebar-collapsed);
  max-width: var(--sm-sidebar-width);
  padding: var(--sm-space-2);
  background-color: var(--sm-surface-overlay);
  border: 1px solid var(--sm-border-subtle);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-lg);
  color: var(--sm-text-secondary);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
}

.sm-popover[hidden],
.sm-tooltip[hidden],
.sm-modal__scrim[hidden] {
  display: none;
}

.sm-popover__title {
  padding: var(--sm-space-2) var(--sm-space-3);
  font-size: var(--sm-text-2xs);
  line-height: var(--sm-leading-2xs);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  color: var(--sm-text-tertiary);
}

/* Menu items inside a popover reuse nav-item geometry. */
.sm-popover .sm-nav-item {
  font-size: var(--sm-text-md);
}

.sm-popover__separator {
  height: 1px;
  margin: var(--sm-space-2) var(--sm-space-0);
  background-color: var(--sm-border-subtle);
  border: 0;
}

/* --- Tooltip --------------------------------------------------------------
   Tooltips are always the dark chip regardless of mode, so they read as
   "system chrome". text-inverse/surface pairing comes from the token layer. */
.sm-tooltip {
  position: absolute;
  z-index: var(--sm-z-tooltip);
  max-width: var(--sm-sidebar-width);
  padding: var(--sm-space-2) var(--sm-space-3);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-surface-brand-deep);
  color: var(--sm-text-on-brand);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  font-weight: var(--sm-weight-medium);
  box-shadow: var(--sm-shadow-md);
  pointer-events: none;
  text-align: center;
}

/* --- Toast ---------------------------------------------------------------- */
.sm-toast-region {
  position: fixed;
  z-index: var(--sm-z-toast);
  inset-block-end: var(--sm-space-6);
  inset-inline-end: var(--sm-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-3);
  width: min(calc(100% - var(--sm-space-12)), calc(var(--sm-sidebar-width) * 1.5));
  pointer-events: none;
}

.sm-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sm-space-3);
  padding: var(--sm-space-4);
  background-color: var(--sm-surface-overlay);
  border: 1px solid var(--sm-border-subtle);
  border-inline-start-width: var(--sm-space-1);
  border-inline-start-color: var(--sm-action-primary-bg);
  border-radius: var(--sm-radius-lg);
  box-shadow: var(--sm-shadow-lg);
  color: var(--sm-text-secondary);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  pointer-events: auto;
}

.sm-toast__title {
  margin: 0 0 var(--sm-space-1);
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  color: var(--sm-text-primary);
}

.sm-toast__content { flex: 1 1 auto; min-width: 0; }

.sm-toast__dismiss {
  flex: 0 0 auto;
  border: 0;
  padding: var(--sm-space-1);
  border-radius: var(--sm-radius-sm);
  background: transparent;
  color: var(--sm-text-tertiary);
  cursor: pointer;
}

.sm-toast__dismiss:hover { color: var(--sm-text-primary); }

.sm-toast__dismiss:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-toast--success { border-inline-start-color: var(--sm-status-success-solid); }
.sm-toast--warning { border-inline-start-color: var(--sm-status-warning-solid); }
.sm-toast--danger  { border-inline-start-color: var(--sm-status-danger-solid); }
.sm-toast--info    { border-inline-start-color: var(--sm-status-info-solid); }


/* =============================================================================
   11 · FEEDBACK — progress, spinner, skeleton
   ============================================================================= */

.sm-progress {
  display: block;
  width: 100%;
  height: var(--sm-space-2);
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-surface-active);
  overflow: hidden;
}

/* Law 1: the decor gradient (brand-500 -> cyan-400) is legal here because a
   progress bar carries no text. Never put a label on top of this fill. */
.sm-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--sm-radius-full);
  background-color: var(--sm-action-primary-bg);
  background-image: var(--sm-gradient-decor);
}

.sm-progress--lg { height: var(--sm-space-3); }
.sm-progress--sm { height: var(--sm-space-1); }

.sm-progress--success .sm-progress__bar {
  background-image: none;
  background-color: var(--sm-status-success-solid);
}

.sm-progress--warning .sm-progress__bar {
  background-image: none;
  background-color: var(--sm-status-warning-solid);
}

.sm-progress--danger .sm-progress__bar {
  background-image: none;
  background-color: var(--sm-status-danger-solid);
}

/* --- Spinner --------------------------------------------------------------
   A conic ring masked to an annulus — no SVG asset, no raw color. Static (a
   partial ring) when reduced motion is preferred; rotation is added in §15. */
.sm-spinner {
  display: inline-block;
  width: var(--sm-space-5);
  height: var(--sm-space-5);
  border-radius: var(--sm-radius-full);
  border: var(--sm-focus-ring-width) solid var(--sm-border-subtle);
  border-top-color: var(--sm-action-primary-bg);
  vertical-align: middle;
}

.sm-spinner--sm { width: var(--sm-space-4); height: var(--sm-space-4); }
.sm-spinner--lg { width: var(--sm-space-8); height: var(--sm-space-8); }

.sm-spinner--on-brand {
  border-color: var(--sm-brand-800);
  border-top-color: var(--sm-text-on-brand);
}

/* --- Skeleton ------------------------------------------------------------- */
.sm-skeleton {
  display: block;
  width: 100%;
  height: var(--sm-space-4);
  border-radius: var(--sm-radius-sm);
  background-color: var(--sm-surface-active);
  /* Shimmer sweep lives in §15; the flat block is the reduced-motion state. */
  background-image: linear-gradient(
    90deg,
    transparent,
    var(--sm-surface-hover),
    transparent
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
}

.sm-skeleton--text  { height: var(--sm-space-3); border-radius: var(--sm-radius-xs); }
.sm-skeleton--title { height: var(--sm-space-6); border-radius: var(--sm-radius-sm); }
.sm-skeleton--circle {
  width: var(--sm-space-10);
  height: var(--sm-space-10);
  border-radius: var(--sm-radius-full);
}
.sm-skeleton--block { height: var(--sm-space-24); border-radius: var(--sm-radius-lg); }


/* =============================================================================
   12 · DATA & MISC
   ============================================================================= */

/* --- Avatar --------------------------------------------------------------- */
.sm-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--sm-space-10);
  height: var(--sm-space-10);
  border-radius: var(--sm-radius-full);
  /* Law 1: initials are a must-read glyph, so the DEFAULT avatar fill is the
     solid text-safe brand (white on brand-600 = 5.2:1). The decor gradient
     terminates on cyan and gradient.decor is documented "never under text",
     so it is opt-in via .sm-avatar--decor for initial-less/image avatars only. */
  background-color: var(--sm-action-primary-bg);
  color: var(--sm-action-primary-fg);
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  overflow: hidden;
  user-select: none;
}

/* Decorative avatar: photo-less, initial-less placeholder tiles only. Because
   this fill runs into cyan, it must never carry initials or any other glyph
   the user has to read (white on the cyan-400 terminus is 2.30:1).
   The selector ENFORCES that contract rather than merely documenting it: the
   gradient applies only when the avatar is empty or wraps an image. Slot text
   in and it falls back to .sm-avatar's solid text-safe brand fill (5.22:1)
   instead of rendering unreadable initials. A comment cannot be linted;
   Law 1 exposure that spans two selectors is invisible to brand-lint's
   per-block text-on-cyan check, so the rule has to be self-limiting. */
.sm-avatar--decor:empty,
.sm-avatar--decor:has(> img),
.sm-avatar--decor:has(> svg) {
  background-image: var(--sm-gradient-decor);
}

.sm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sm-avatar--sm {
  width: var(--sm-space-6);
  height: var(--sm-space-6);
  font-size: var(--sm-text-2xs);
  line-height: var(--sm-leading-2xs);
}

.sm-avatar--lg {
  width: var(--sm-space-16);
  height: var(--sm-space-16);
  font-size: var(--sm-text-2xl);
  line-height: var(--sm-leading-2xl);
}

.sm-avatar--square { border-radius: var(--sm-radius-md); }

.sm-avatar-group {
  display: inline-flex;
  align-items: center;
}

.sm-avatar-group .sm-avatar + .sm-avatar {
  margin-inline-start: calc(var(--sm-space-3) * -1);
  box-shadow: 0 0 0 var(--sm-focus-ring-width) var(--sm-chart-punchout);
}

/* --- Divider -------------------------------------------------------------- */
.sm-divider {
  border: 0;
  height: 1px;
  width: 100%;
  background-color: var(--sm-border-subtle);
  margin-block: var(--sm-space-4);
}

.sm-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin-block: var(--sm-space-0);
  margin-inline: var(--sm-space-3);
}

/* Decorative brand rule — cyan is legal here, it carries no text. */
.sm-divider--brand {
  height: var(--sm-focus-ring-width);
  background-color: transparent;
  background-image: var(--sm-gradient-decor);
  border-radius: var(--sm-radius-full);
}

.sm-divider--labelled {
  display: flex;
  align-items: center;
  gap: var(--sm-space-3);
  height: auto;
  background: transparent;
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  color: var(--sm-text-tertiary);
}

.sm-divider--labelled::before,
.sm-divider--labelled::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--sm-border-subtle);
}

/* --- Kbd ------------------------------------------------------------------ */
.sm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sm-space-5);
  height: var(--sm-space-5);
  padding-inline: var(--sm-space-2);
  border: 1px solid var(--sm-border-default);
  border-bottom-width: var(--sm-focus-ring-width);
  border-radius: var(--sm-radius-xs);
  background-color: var(--sm-surface-sunken);
  color: var(--sm-text-secondary);
  font-family: var(--sm-font-mono);
  font-size: var(--sm-text-2xs);
  line-height: var(--sm-leading-2xs);
  font-weight: var(--sm-weight-medium);
  white-space: nowrap;
}

/* --- Breadcrumb ----------------------------------------------------------- */
.sm-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sm-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  color: var(--sm-text-tertiary);
}

.sm-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
}

.sm-breadcrumb__item a {
  color: var(--sm-text-tertiary);
  text-decoration: none;
  border-radius: var(--sm-radius-xs);
}

.sm-breadcrumb__item a:hover {
  color: var(--sm-text-brand);
  text-decoration: underline;
}

.sm-breadcrumb__item a:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-breadcrumb__item[aria-current="page"] {
  color: var(--sm-text-primary);
  font-weight: var(--sm-weight-semibold);
}

.sm-breadcrumb__sep {
  color: var(--sm-text-muted);
  user-select: none;
}

.sm-breadcrumb__sep::before { content: "/"; }

/* --- Pagination ----------------------------------------------------------- */
.sm-pagination {
  display: flex;
  align-items: center;
  gap: var(--sm-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sm-control-height-md);
  height: var(--sm-control-height-md);
  padding-inline: var(--sm-space-2);
  border: 1px solid transparent;
  border-radius: var(--sm-radius-md);
  background: transparent;
  color: var(--sm-text-secondary);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-medium);
  text-decoration: none;
  cursor: pointer;
}

.sm-pagination__item:hover:not([aria-disabled="true"]) {
  background-color: var(--sm-surface-hover);
  color: var(--sm-text-primary);
}

.sm-pagination__item:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

.sm-pagination__item[aria-current="page"] {
  background-color: var(--sm-action-primary-bg);
  border-color: var(--sm-action-primary-bg);
  color: var(--sm-action-primary-fg);
  font-weight: var(--sm-weight-semibold);
}

.sm-pagination__item[aria-disabled="true"],
.sm-pagination__item:disabled {
  opacity: var(--sm-action-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

.sm-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sm-control-height-md);
  height: var(--sm-control-height-md);
  color: var(--sm-text-muted);
  user-select: none;
}

/* --- Empty state ---------------------------------------------------------- */
.sm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-3);
  padding: var(--sm-space-16) var(--sm-space-6);
  text-align: center;
  color: var(--sm-text-tertiary);
}

.sm-empty-state__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-space-16);
  height: var(--sm-space-16);
  margin-bottom: var(--sm-space-1);
  border-radius: var(--sm-radius-xl);
  background-color: var(--sm-surface-brand-tint);
  color: var(--sm-text-brand);
}

.sm-empty-state__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-xl);
  line-height: var(--sm-leading-xl);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-normal);
  color: var(--sm-text-primary);
}

.sm-empty-state__body {
  max-width: var(--sm-prose-max);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  color: var(--sm-text-tertiary);
}

.sm-empty-state__actions {
  display: flex;
  gap: var(--sm-space-3);
  margin-top: var(--sm-space-2);
}

/* --- Stat ----------------------------------------------------------------- */
.sm-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-1);
  min-width: 0;
}

.sm-stat__label {
  font-size: var(--sm-text-2xs);
  line-height: var(--sm-leading-2xs);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  color: var(--sm-text-tertiary);
}

.sm-stat__value {
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-3xl);
  line-height: var(--sm-leading-3xl);
  font-weight: var(--sm-weight-bold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-primary);
  font-variant-numeric: tabular-nums;
}

.sm-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-1);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  font-weight: var(--sm-weight-semibold);
  font-variant-numeric: tabular-nums;
  /* Law 3: direction is a state, so it uses status colors — never brand. */
  color: var(--sm-text-tertiary);
}

.sm-stat__delta--up   { color: var(--sm-status-success-fg); }
.sm-stat__delta--down { color: var(--sm-status-danger-fg); }
.sm-stat__delta--flat { color: var(--sm-text-tertiary); }

.sm-stat__caption {
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  color: var(--sm-text-muted);
}

/* Marketing/hero stats scale up and take the gradient ink treatment. */
.sm-stat--display .sm-stat__value {
  font-size: var(--sm-mkt-h2);
  line-height: var(--sm-mkt-h2-leading);
  font-weight: var(--sm-weight-extrabold);
}


/* =============================================================================
   13 · MARKETING
   -----------------------------------------------------------------------------
   Same palette, same families, same radius language, same easing curve as the
   app classes above. The ONLY difference is density: these use the fluid
   fontSize.marketing clamp() scale and --sm-space-section rhythm, where the app
   uses the dense fontSize.app scale. That is what makes the marketing site and
   the product read as one continuous system rather than two brands.
   ============================================================================= */

.sm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  font-family: var(--sm-font-ui);
  font-size: var(--sm-text-sm);
  line-height: var(--sm-leading-sm);
  font-weight: var(--sm-weight-semibold);
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  color: var(--sm-text-brand);
}

.sm-eyebrow::before {
  content: "";
  width: var(--sm-space-6);
  height: var(--sm-focus-ring-width);
  border-radius: var(--sm-radius-full);
  background-image: var(--sm-gradient-decor); /* decorative rule, no text */
}

.sm-eyebrow--bare::before { display: none; }

/* --- Section -------------------------------------------------------------- */
.sm-section {
  padding-block: var(--sm-space-section);
  background-color: var(--sm-surface-canvas);
}

.sm-section--sunken { background-color: var(--sm-surface-sunken); }

.sm-section--tint {
  /* tintWash is textSafe: dark copy on a light wash. */
  background-image: var(--sm-gradient-tint-wash);
}

.sm-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-4);
  max-width: var(--sm-prose-max);
  margin-bottom: var(--sm-space-12);
}

.sm-section__head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.sm-section__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-mkt-h2);
  line-height: var(--sm-mkt-h2-leading);
  font-weight: var(--sm-weight-bold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-primary);
  text-wrap: balance;
}

.sm-section__lead {
  font-size: var(--sm-mkt-lead);
  line-height: var(--sm-mkt-lead-leading);
  font-weight: var(--sm-weight-regular);
  color: var(--sm-text-secondary);
  text-wrap: pretty;
}

.sm-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sm-sidebar-width)), 1fr));
  gap: var(--sm-space-6);
}

/* --- Hero ----------------------------------------------------------------- */
.sm-hero {
  position: relative;
  padding-block: var(--sm-space-section);
  background-color: var(--sm-surface-canvas);
  overflow: hidden;
}

.sm-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-6);
  max-width: var(--sm-prose-max);
}

.sm-hero--center .sm-hero__inner {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.sm-hero__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-mkt-hero);
  line-height: var(--sm-mkt-hero-leading);
  font-weight: var(--sm-weight-extrabold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-primary);
  text-wrap: balance;
}

.sm-hero__title--sub {
  font-size: var(--sm-mkt-h1);
  line-height: var(--sm-mkt-h1-leading);
}

.sm-hero__lead {
  font-size: var(--sm-mkt-lead);
  line-height: var(--sm-mkt-lead-leading);
  color: var(--sm-text-secondary);
  text-wrap: pretty;
}

.sm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm-space-3);
  margin-top: var(--sm-space-2);
}

.sm-hero__media {
  margin-top: var(--sm-space-12);
  border-radius: var(--sm-radius-2xl);
  border: 1px solid var(--sm-border-subtle);
  box-shadow: var(--sm-shadow-xl);
  overflow: hidden;
}

/* Navy hero — the marketing bookend of the seam. Ink is mode-invariant. */
.sm-hero--navy {
  background-color: var(--sm-surface-brand-deep);
  background-image: var(--sm-gradient-navy-band);
  color: var(--sm-text-on-brand);
}

.sm-hero--navy .sm-hero__title { color: var(--sm-text-on-brand); }
.sm-hero--navy .sm-hero__lead  { color: var(--sm-brand-200); }
.sm-hero--navy .sm-eyebrow     { color: var(--sm-cyan-400); }

/* --- Feature card --------------------------------------------------------- */
.sm-feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-3);
  padding: var(--sm-space-8);
  background-color: var(--sm-surface-raised);
  border: 1px solid var(--sm-border-subtle);
  border-radius: var(--sm-radius-xl);
  box-shadow: var(--sm-shadow-sm);
}

.sm-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-space-12);
  height: var(--sm-space-12);
  margin-bottom: var(--sm-space-2);
  border-radius: var(--sm-radius-lg);
  /* Law 1: this tile carries a white glyph the user must see, so it takes
     gradient.iconTile (brand-500 -> brand-700), NOT gradient.decor. decor
     terminates on cyan-400, where white measures 2.30:1 — under the 3:1 that
     SC 1.4.11 requires of a graphical object, so a white glyph on it was
     illegal at every size. iconTile's worst point is its brand-500 leading
     edge at 3.79:1, clearing 3:1 across the whole run.

     Sizing constraint, and it is real: 3.79:1 satisfies the graphical-object
     threshold for a GLYPH but not the 4.5:1 body-text threshold. This tile is
     for icons only. Do not put a letter, a numeral or a count badge in it —
     use .sm-avatar (solid brand-600, white 5.22:1) for anything read as text.

     NB the spine annotates gradient.iconTile "white holds >= 4.7:1 across the
     whole run". Measured, that is wrong at the brand-500 end (3.79:1) — the
     same arithmetic slip BRAND.md §9 open question 1 already records against
     gradient.brandCta, which shares that leading edge. The token choice is
     still correct; only the claimed margin is overstated. */
  background-image: var(--sm-gradient-icon-tile);
  color: var(--sm-text-on-brand);
  /* Glow follows the fill: a cyan halo around a brand-only tile reads as a
     rendering fault, and shadow.glowCyan is scoped to decorative tiles. */
  box-shadow: var(--sm-shadow-glow-brand);
}

.sm-feature-card__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-mkt-h3);
  line-height: var(--sm-mkt-h3-leading);
  font-weight: var(--sm-weight-bold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-primary);
}

.sm-feature-card__body {
  font-size: var(--sm-mkt-body);
  line-height: var(--sm-mkt-body-leading);
  color: var(--sm-text-secondary);
  text-wrap: pretty;
}

.sm-feature-card__link {
  margin-top: auto;
  padding-top: var(--sm-space-3);
  font-size: var(--sm-text-md);
  line-height: var(--sm-leading-md);
  font-weight: var(--sm-weight-semibold);
  color: var(--sm-text-link);
  text-decoration: none;
}

.sm-feature-card__link:hover { text-decoration: underline; }

/* Law 5: links are interactive and must carry the branded ring, not the UA
   default. Mirrors the .sm-breadcrumb__item a treatment. */
.sm-feature-card__link:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  border-radius: var(--sm-radius-xs);
  box-shadow: var(--sm-internal-ring);
}

/* This is a component link with a gateable destination (an unreleased feature,
   a plan-locked page), not prose — a marketing card routinely ships before its
   target does. Only [aria-disabled] is carried: :disabled has no effect on an
   <a>, and the accessible pattern for an unavailable link is aria-disabled
   plus a suppressed activation, which pointer-events provides here. Ink drops
   to tertiary (4.76:1 light / 6.96:1 dark) rather than link blue so the label
   no longer reads as actionable while staying above the AA body floor. */
.sm-feature-card__link[aria-disabled="true"] {
  color: var(--sm-text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

.sm-feature-card--interactive { cursor: pointer; }

.sm-feature-card--interactive:hover {
  border-color: var(--sm-border-brand);
  box-shadow: var(--sm-shadow-lg);
}

.sm-feature-card--interactive:focus-within {
  box-shadow: var(--sm-internal-ring), var(--sm-shadow-lg);
}

/* --- CTA band ------------------------------------------------------------- */
.sm-cta-band {
  padding-block: var(--sm-space-section);
  /* navyBand is textSafe. Mode-invariant, same as the app topbar. */
  background-color: var(--sm-surface-brand-deep);
  background-image: var(--sm-gradient-navy-band);
  color: var(--sm-text-on-brand);
  text-align: center;
}

.sm-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sm-space-5);
  max-width: var(--sm-prose-max);
  margin-inline: auto;
}

.sm-cta-band__title {
  margin: 0;
  font-family: var(--sm-font-display);
  font-size: var(--sm-mkt-h1);
  line-height: var(--sm-mkt-h1-leading);
  font-weight: var(--sm-weight-extrabold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-on-brand);
  text-wrap: balance;
}

.sm-cta-band__lead {
  font-size: var(--sm-mkt-lead);
  line-height: var(--sm-mkt-lead-leading);
  color: var(--sm-brand-200);
  text-wrap: pretty;
}

.sm-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sm-space-3);
}

/* On navy, the secondary button must be an outline in brand-400 ink.
   Law 2: brand-400 for text/outline on dark. */
.sm-cta-band .sm-btn--secondary,
.sm-hero--navy .sm-btn--secondary {
  background-color: transparent;
  color: var(--sm-brand-100);
  border-color: var(--sm-brand-700);
  box-shadow: none;
}

.sm-cta-band .sm-btn--secondary:hover,
.sm-hero--navy .sm-btn--secondary:hover {
  background-color: var(--sm-brand-800);
  border-color: var(--sm-brand-500);
  color: var(--sm-text-on-brand);
}

/* --- Logo lockup ---------------------------------------------------------- */
.sm-logo-lockup {
  display: inline-flex;
  align-items: center;
  /* Clear space = cap-height of the "S". space-3 approximates that at the
     112px min web width from brandAsset.minWidth. */
  gap: var(--sm-space-3);
  padding: var(--sm-space-3);
  font-family: var(--sm-font-display);
  font-size: var(--sm-text-xl);
  line-height: var(--sm-leading-xl);
  font-weight: var(--sm-weight-extrabold);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-text-primary);
  text-decoration: none;
}

.sm-logo-lockup__mark {
  flex: 0 0 auto;
  height: var(--sm-space-8);
  width: auto;
}

.sm-logo-lockup__word { white-space: nowrap; }

.sm-logo-lockup--inverse { color: var(--sm-text-on-brand); }

.sm-logo-lockup:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
  border-radius: var(--sm-radius-sm);
}

/* --- Prose ---------------------------------------------------------------- */
.sm-prose {
  max-width: var(--sm-prose-max);
  font-size: var(--sm-mkt-body);
  line-height: var(--sm-mkt-body-leading);
  color: var(--sm-text-secondary);
  text-wrap: pretty;
}

.sm-prose > * + * { margin-top: var(--sm-space-5); }

.sm-prose h2 {
  margin-top: var(--sm-space-12);
  font-size: var(--sm-mkt-h2);
  line-height: var(--sm-mkt-h2-leading);
  color: var(--sm-text-primary);
}

.sm-prose h3 {
  margin-top: var(--sm-space-10);
  font-size: var(--sm-mkt-h3);
  line-height: var(--sm-mkt-h3-leading);
  color: var(--sm-text-primary);
}

.sm-prose h4 {
  margin-top: var(--sm-space-8);
  font-size: var(--sm-text-lg);
  line-height: var(--sm-leading-lg);
  color: var(--sm-text-primary);
}

.sm-prose a {
  color: var(--sm-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--sm-space-1);
}

.sm-prose a:hover { text-decoration-thickness: var(--sm-focus-ring-width); }

/* Law 5: prose links get the branded ring, not the UA default. */
.sm-prose a:focus-visible {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  border-radius: var(--sm-radius-xs);
  box-shadow: var(--sm-internal-ring);
}

.sm-prose strong { font-weight: var(--sm-weight-semibold); color: var(--sm-text-primary); }

.sm-prose ul,
.sm-prose ol {
  padding-inline-start: var(--sm-space-6);
}

.sm-prose li + li { margin-top: var(--sm-space-2); }

.sm-prose ul { list-style: disc; }
.sm-prose ol { list-style: decimal; }

.sm-prose li::marker { color: var(--sm-text-brand); }

.sm-prose blockquote {
  padding-inline-start: var(--sm-space-5);
  border-inline-start: var(--sm-space-1) solid var(--sm-border-brand);
  color: var(--sm-text-primary);
  font-size: var(--sm-mkt-lead);
  line-height: var(--sm-mkt-lead-leading);
  font-style: italic;
}

.sm-prose code {
  padding: var(--sm-space-1) var(--sm-space-2);
  border-radius: var(--sm-radius-xs);
  background-color: var(--sm-surface-sunken);
  border: 1px solid var(--sm-border-subtle);
  color: var(--sm-text-primary);
  font-size: var(--sm-text-sm);
}

.sm-prose pre {
  padding: var(--sm-space-4);
  border-radius: var(--sm-radius-lg);
  background-color: var(--sm-surface-sunken);
  border: 1px solid var(--sm-border-subtle);
  overflow-x: auto;
}

.sm-prose pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

.sm-prose img {
  border-radius: var(--sm-radius-xl);
  border: 1px solid var(--sm-border-subtle);
}

.sm-prose hr {
  border-top: 1px solid var(--sm-border-subtle);
  margin-block: var(--sm-space-10);
}


/* =============================================================================
   14 · UTILITIES
   ============================================================================= */

/* Focus ring escape hatch — attach to any custom widget that owns its own
   keyboard handling. Law 5. */
.sm-focus-ring:focus-visible,
.sm-focus-ring[data-focus-visible] {
  outline: var(--sm-focus-ring-width) solid transparent;
  outline-offset: var(--sm-focus-ring-offset);
  box-shadow: var(--sm-internal-ring);
}

/* Kill all motion inside a subtree, regardless of OS preference. Law 6 hatch. */
.sm-reduce-motion,
.sm-reduce-motion *,
.sm-reduce-motion *::before,
.sm-reduce-motion *::after {
  /* 1ms, not 0s, is deliberate and is the canonical reduce-motion kill switch:
     a 0s duration prevents `transitionend`/`animationend` from ever firing, so
     any JS awaiting those events deadlocks. It is a motion-OFF sentinel, not a
     motion duration, so it is correctly not on the spine scale. */
  /* brand-lint-disable-next-line raw-duration */
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  /* brand-lint-disable-next-line raw-duration */
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

.sm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  /* -1px is the canonical visually-hidden idiom, not a spacing choice: it pulls
     the 1px box out of the flow so it cannot affect layout while staying in the
     a11y tree. A 4px-scale value would make the element occupy real space. */
  /* brand-lint-disable-next-line magic-spacing */
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip-link pattern: hidden until focused. */
.sm-visually-hidden.sm-visually-hidden--focusable:focus-visible {
  position: fixed;
  inset-block-start: var(--sm-space-3);
  inset-inline-start: var(--sm-space-3);
  z-index: var(--sm-z-toast);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--sm-space-3) var(--sm-space-4);
  clip-path: none;
  border-radius: var(--sm-radius-md);
  background-color: var(--sm-action-primary-bg);
  color: var(--sm-action-primary-fg);
  font-weight: var(--sm-weight-semibold);
  box-shadow: var(--sm-internal-ring);
}

/* Gradient ink. Law 1: the gradient IS the ink here — bg-clip-text — so cyan is
   legal. Light mode uses the light-optimised ramp, dark uses the dark one.
   This is the one place where a mode switch is unavoidable because the two
   gradients are separate tokens rather than one mode-aware token.
   TODO(spine): a single mode-aware gradient.brandInk (light/dark keys instead of
   two sibling tokens) would let this collapse to one declaration. */
.sm-text-gradient {
  background-image: var(--sm-gradient-brand-ink-light);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-sm-theme="light"]) .sm-text-gradient {
    background-image: var(--sm-gradient-brand-ink);
  }
}

[data-sm-theme="dark"] .sm-text-gradient {
  background-image: var(--sm-gradient-brand-ink);
}

[data-sm-theme="light"] .sm-text-gradient {
  background-image: var(--sm-gradient-brand-ink-light);
}

/* -----------------------------------------------------------------------------
   .sm-surface-navy — THE SEAM.

   This is the single most important class in the system for brand continuity.
   It is DELIBERATELY IDENTICAL IN LIGHT AND DARK MODE, because it is the surface
   a user carries with them across the boundary between the marketing site and
   the product:

       marketing footer band  ->  app topbar  ->  auth / login screen

   All three are this navy. A user who signs up on stratamize.com and lands in
   the POS sees the same navy band above them that was at the bottom of the
   page they just left. Nothing else in the system is mode-invariant.

   Because the SURFACE is mode-invariant, the INK on it must be too — otherwise
   dark-mode text tokens would flip against a fixed background and break
   contrast. So descendants here use mode-invariant values: --sm-text-on-brand
   (neutral-0 in both modes) and raw brand-ramp steps, which are literal hexes
   by definition and therefore mode-stable. This is the documented exception to
   "components never reference the raw ramp".

   TODO(spine): semantic.text.onNavy / onNavyMuted / borderOnNavy would let this
   block consume semantics instead of the raw ramp. Not inventing them here.
   -------------------------------------------------------------------------- */
.sm-surface-navy {
  background-color: var(--sm-surface-brand-deep);
  background-image: var(--sm-gradient-navy-band);
  color: var(--sm-text-on-brand);
}

.sm-surface-navy h1,
.sm-surface-navy h2,
.sm-surface-navy h3,
.sm-surface-navy h4,
.sm-surface-navy h5,
.sm-surface-navy h6,
.sm-surface-navy .sm-card__title,
.sm-surface-navy .sm-stat__value {
  color: var(--sm-text-on-brand);
}

.sm-surface-navy p,
.sm-surface-navy .sm-prose,
.sm-surface-navy .sm-help,
.sm-surface-navy .sm-section__lead {
  color: var(--sm-brand-200);
}

.sm-surface-navy .sm-label,
.sm-surface-navy .sm-stat__label {
  color: var(--sm-brand-300);
}

.sm-surface-navy .sm-stat__caption,
.sm-surface-navy .sm-breadcrumb {
  color: var(--sm-brand-400);
}

.sm-surface-navy a:not(.sm-btn) {
  color: var(--sm-brand-300);
}

.sm-surface-navy a:not(.sm-btn):hover {
  color: var(--sm-text-on-brand);
}

.sm-surface-navy .sm-divider {
  background-color: var(--sm-brand-800);
}

/* Form controls on navy (the login screen). */
.sm-surface-navy .sm-input,
.sm-surface-navy .sm-select,
.sm-surface-navy .sm-textarea {
  background-color: var(--sm-brand-800);
  border-color: var(--sm-brand-700);
  color: var(--sm-text-on-brand);
  box-shadow: none;
}

.sm-surface-navy .sm-input::placeholder,
.sm-surface-navy .sm-textarea::placeholder {
  color: var(--sm-brand-400);
}

.sm-surface-navy .sm-input:hover:not(:disabled),
.sm-surface-navy .sm-select:hover:not(:disabled),
.sm-surface-navy .sm-textarea:hover:not(:disabled) {
  border-color: var(--sm-brand-500);
}

/* Law 2: brand-400/500 for outlines on dark. */
.sm-surface-navy .sm-input:focus-visible,
.sm-surface-navy .sm-select:focus-visible,
.sm-surface-navy .sm-textarea:focus-visible {
  border-color: var(--sm-brand-400);
}

.sm-auth {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--sm-space-6);
}

.sm-auth__panel {
  width: 100%;
  max-width: calc(var(--sm-sidebar-width) * 1.6);
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-5);
}


/* =============================================================================
   15 · MOTION LAYER
   -----------------------------------------------------------------------------
   Law 6: every transition and animation in this stylesheet lives inside this
   one block, so motion is provably opt-in. Without motion preference, every
   component above is fully functional; hover and active states simply apply
   instantly.

   Which properties may be animated is NOT restated here. The authority is the
   spine — motion.animatableProperties in tokens/stratamize.tokens.json, which
   carries an explicit `allowed` list and an explicit `banned` list. Read it
   there. A list transcribed into this comment would drift the moment the spine
   is amended, which is exactly what happened when background-position was
   added to `allowed` (it is paint-bound, not layout-bound, so it forces no
   reflow; the marketing CTA hover-slide and the skeleton shimmer both depend
   on it). `all` is banned because it silently opts into every banned property
   at once. Every declaration below animates a property on the spine's allowed
   list; if you add one, check the spine first.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

  .sm-btn,
  .sm-chip,
  .sm-chip__remove,
  .sm-nav-item,
  .sm-tab,
  .sm-pagination__item,
  .sm-card--interactive,
  .sm-feature-card,
  .sm-modal__close,
  .sm-toast__dismiss,
  .sm-alert__dismiss,
  .sm-table__sort,
  .sm-breadcrumb__item a,
  .sm-feature-card__link,
  .sm-logo-lockup {
    transition:
      color var(--sm-duration-instant) var(--sm-ease-standard),
      background-color var(--sm-duration-instant) var(--sm-ease-standard),
      border-color var(--sm-duration-fast) var(--sm-ease-standard),
      box-shadow var(--sm-duration-fast) var(--sm-ease-standard),
      opacity var(--sm-duration-fast) var(--sm-ease-standard),
      transform var(--sm-duration-fast) var(--sm-ease-standard);
  }

  .sm-input,
  .sm-select,
  .sm-textarea,
  .sm-checkbox,
  .sm-radio,
  .sm-switch {
    transition:
      border-color var(--sm-duration-fast) var(--sm-ease-standard),
      background-color var(--sm-duration-fast) var(--sm-ease-standard),
      box-shadow var(--sm-duration-fast) var(--sm-ease-standard);
  }

  .sm-checkbox::before,
  .sm-radio::before,
  .sm-switch::before {
    transition: transform var(--sm-duration-fast) var(--sm-ease-standard);
  }

  .sm-tab::after {
    transition: transform var(--sm-duration-normal) var(--sm-ease-entrance);
    transform-origin: center;
  }

  .sm-progress__bar {
    transition: transform var(--sm-duration-normal) var(--sm-ease-standard);
  }

  .sm-sidebar {
    transition: transform var(--sm-duration-slow) var(--sm-ease-entrance);
  }

  /* Lift affordances — transform only. */
  .sm-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
  .sm-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(calc(var(--sm-space-1) * -0.25));
  }

  .sm-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0);
  }

  .sm-card--interactive:hover,
  .sm-feature-card--interactive:hover {
    transform: translateY(calc(var(--sm-space-1) * -0.5));
  }

  /* Marketing CTA slide — background-position on the 200% brandCtaSlide ramp.
     textSafe gradient, so white copy holds across the whole slide. */
  .sm-hero .sm-btn--primary,
  .sm-cta-band .sm-btn--primary,
  .sm-btn--primary.sm-btn--gradient {
    background-image: var(--sm-gradient-brand-cta-slide);
    background-size: 200% auto;
    background-position: 0% center;
    transition:
      background-position var(--sm-duration-slow) var(--sm-ease-standard),
      box-shadow var(--sm-duration-fast) var(--sm-ease-standard),
      transform var(--sm-duration-fast) var(--sm-ease-standard);
  }

  .sm-hero .sm-btn--primary:hover,
  .sm-cta-band .sm-btn--primary:hover,
  .sm-btn--primary.sm-btn--gradient:hover {
    background-position: 100% center;
  }

  /* --- Keyframed components --- */

  @keyframes sm-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .sm-spinner {
    animation: sm-spin var(--sm-duration-deliberate) var(--sm-ease-linear) infinite;
  }

  @keyframes sm-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }

  .sm-skeleton {
    animation: sm-shimmer calc(var(--sm-duration-deliberate) * 2) var(--sm-ease-linear) infinite;
  }

  @keyframes sm-toast-in {
    from { opacity: 0; transform: translateY(var(--sm-space-4)); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .sm-toast {
    animation: sm-toast-in var(--sm-duration-normal) var(--sm-ease-entrance) both;
  }

  @keyframes sm-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes sm-modal-in {
    from { opacity: 0; transform: translateY(var(--sm-space-4)) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .sm-modal__scrim {
    animation: sm-overlay-in var(--sm-duration-normal) var(--sm-ease-standard) both;
  }

  .sm-modal {
    animation: sm-modal-in var(--sm-duration-slow) var(--sm-ease-entrance) both;
  }

  @keyframes sm-popover-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  .sm-popover,
  .sm-tooltip {
    animation: sm-popover-in var(--sm-duration-fast) var(--sm-ease-entrance) both;
  }

  /* Marketing scroll reveal — product code toggles .sm-reveal--in. */
  .sm-reveal {
    opacity: 0;
    transform: translateY(var(--sm-space-6));
    transition:
      opacity var(--sm-duration-deliberate) var(--sm-ease-entrance),
      transform var(--sm-duration-deliberate) var(--sm-ease-entrance);
  }

  .sm-reveal--in {
    opacity: 1;
    transform: translateY(0);
  }

  html { scroll-behavior: smooth; }
}

/* Reveal must never hide content when motion is suppressed. */
@media (prefers-reduced-motion: reduce) {
  .sm-reveal { opacity: 1; transform: none; }
}


/* =============================================================================
   16 · FORCED-COLORS & PRINT
   ============================================================================= */

@media (forced-colors: active) {
  /* System colors are mandated by the OS here; brand tokens are ignored by the
     UA. Restoring a real outline keeps Law 5 satisfied in high-contrast mode,
     where box-shadow rings are not painted. */
  .sm-btn:focus-visible,
  .sm-input:focus-visible,
  .sm-select:focus-visible,
  .sm-textarea:focus-visible,
  .sm-checkbox:focus-visible,
  .sm-radio:focus-visible,
  .sm-switch:focus-visible,
  .sm-chip:focus-visible,
  .sm-tab:focus-visible,
  .sm-nav-item:focus-visible,
  .sm-pagination__item:focus-visible,
  .sm-focus-ring:focus-visible {
    outline: var(--sm-focus-ring-width) solid Highlight;
    outline-offset: var(--sm-focus-ring-offset);
  }

  .sm-btn,
  .sm-card,
  .sm-input,
  .sm-select,
  .sm-textarea,
  .sm-modal,
  .sm-popover,
  .sm-toast,
  .sm-alert {
    border: 1px solid CanvasText;
  }

  .sm-checkbox:checked,
  .sm-radio:checked,
  .sm-switch:checked {
    background-color: Highlight;
  }

  .sm-skeleton,
  .sm-progress__bar {
    background-image: none;
    background-color: CanvasText;
  }
}

@media print {
  .sm-topbar,
  .sm-sidebar,
  .sm-toast-region,
  .sm-modal__scrim,
  .sm-popover,
  .sm-tooltip,
  .sm-pagination,
  .sm-skeleton,
  .sm-spinner {
    display: none !important;
  }

  .sm-shell {
    display: block;
    min-height: 0;
  }

  .sm-card,
  .sm-feature-card,
  .sm-table-wrap {
    box-shadow: none;
    break-inside: avoid;
  }

  .sm-section,
  .sm-hero,
  .sm-cta-band {
    padding-block: var(--sm-space-8);
  }
}

/* =============================================================================
   END — stratamize-components.css
   ============================================================================= */