/* adapter-skilled-routines.css: Skilled Routines' own role names pointed at the fleet roles (premium token layer, 2026-11-02).
   Method: the DoorWerk proof (NEXUS SHARED/SMART SYSTEM/ops/state/master/audit_1102/premium_system.md, PS-5/PS-6, "Rollout: builder briefs").
   Load order on every page: site.css -> page CSS -> fleet-web-tokens.css -> brand-skilled-routines.css (generated from vorm.json) -> this file.
   No raw colour, size or duration here: every value is a fleet role, a Skilled Routines scale token, or a relative step from one.
   One edit to a layer-1 input (vorm.json color.light -> brand-skilled-routines.css) moves every rule below.
   Scope: colour roles, elevation, button states, tables, motion. Type (--fs-*), space (--sp-*), --band-y, radius and fonts stay the site's own.
   Depth (DESIGN.md §6, 09_SURFACE §3/§4): rule line + surface lightness step + tinted e0-e3 only on raised or interactive surfaces.
   Light ground: no data-scheme. */

/* ---- colour roles: --c-* (site.css, from vorm.json color.light) and the premium_hero --sr-* aliases -> fleet roles ---- */
:root {
  --c-background: var(--n-2);                 /* the ground one ramp step under the fleet n-1: vorm paper is L .967 under surface L .994, so the card keeps its lightness step (n-2 .975 -> card 1.0) */
  --c-surface: var(--card);
  --c-text: var(--foreground);
  --c-muted: var(--muted-foreground);
  --c-border: var(--border);
  --c-control-border: var(--n-9);              /* field and control edge: n-9 keeps >= 3:1 on the ground (fleet --input n-7 would not) */
  --c-primary: var(--primary);
  --c-primary-hover: var(--primary-hover);
  --c-primary-pressed: var(--primary-active);
  --c-primary-text: var(--primary-foreground);
  --c-link-hover: var(--primary);              /* vorm: link_hover = primary */
  --c-focus: var(--primary);                   /* vorm: focus = primary; --ring stays the site's ring WIDTH (brand file) */
  --c-selected: var(--secondary-active);
  --c-selected-text: var(--foreground);
  /* status roles (fleet 01§6; values = SR's own colours via the brand file): */
  /* stacking (fleet 09§8 ladder): the one below-base layer SR uses (a background pseudo-element behind its own box), named from the ladder */
  --z-below: calc(var(--z-base) - var(--z-raised));
  --c-success: var(--success); --c-warn: var(--warning); --c-danger: var(--danger);

  --sr-paper: var(--c-background); --sr-surface: var(--card); --sr-ink: var(--foreground); --sr-muted: var(--muted-foreground);
  --sr-line: var(--border); --sr-line-strong: var(--n-9); --sr-blue: var(--primary); --sr-blue-hover: var(--primary-hover);
  --sr-on-blue: var(--primary-foreground); --sr-error: var(--foreground);
}

/* ---- elevation ---- */
/* e0: static cards: the tinted rule line (--c-border = --border) on the lighter --card, no shadow */
.card, .rt-card, .home-v3 .month, .home-v3 .rpt, .home .ad-card {
  box-shadow: var(--surface-edge, 0 0 #0000), var(--e0, 0 0 #0000);
}
/* e2: the surface that carries the ask (the request form), and the hero report; the site's 2 coloured shadows move to e2 / e1 */
.card.req, .home-v3 .rpt--hero {
  background: var(--card-raised);
  box-shadow: var(--surface-edge, 0 0 #0000), var(--e2);
}
.home-v3 .rpt--hero .rpt__file { box-shadow: var(--e1); }
/* e3: the phone menu panel (it floats over the page) */
@media (max-width: 860px) {
  .site-nav { box-shadow: var(--e3); }
}

/* ---- buttons: rest / hover / press / focus-visible / disabled, all from roles; durations x --motion (0 under reduced motion) ---- */
/* primary (.btn-primary, the home .btn, nav .head-cta.is-primary): inner top light + e1 at rest; tinted hover + e2; spring press, flat */
.btn-primary, .home .btn:not(.btn-secondary), .head-cta.is-primary {
  box-shadow: inset 0 1px 0 var(--primary-edge), var(--e1);
  transition: background-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-spring);
}
.btn-primary:hover, .home .btn:not(.btn-secondary):hover, .head-cta.is-primary:hover {
  background: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-foreground);
  box-shadow: inset 0 1px 0 var(--primary-edge), var(--e2);
}
.btn-primary:active, .home .btn:not(.btn-secondary):active, .head-cta.is-primary:active {
  background: var(--primary-active); border-color: var(--primary-active); transform: scale(var(--press-scale)); box-shadow: var(--e0, 0 0 #0000);
}
/* secondary (.btn-secondary) and the outline nav controls (.head-cta, the Menu summary): card at rest, tinted ground on hover, deeper + spring on press */
.btn-secondary, .head-cta:not(.is-primary), .nav-menu > summary {
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-spring);
}
.btn-secondary:hover, .home .pkg__act .btn-secondary:hover, .nav-menu > summary:hover {
  background: var(--secondary-hover); border-color: var(--foreground); color: var(--foreground);
}
.btn-secondary:active, .nav-menu > summary:active { background: var(--secondary-active); transform: scale(var(--press-scale)); }
.head-cta:not(.is-primary):active { transform: scale(var(--press-scale)); }
/* focus-visible: the site's ring (width --ring, offset --ring-offset) in the primary role, outside the control */
.btn:focus-visible, .head-cta:focus-visible, .nav-menu > summary:focus-visible {
  outline: var(--ring) solid var(--c-focus); outline-offset: var(--ring-offset);
}
/* disabled: muted ground, low text, no shadow, no lift */
.btn[disabled], .btn[aria-disabled="true"], .head-cta[aria-disabled="true"],
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  background: var(--muted); color: var(--muted-foreground); border-color: var(--border); box-shadow: none; transform: none; cursor: not-allowed;
}

/* ---- tables and figures: tabular lining figures wherever the site sets numbers ---- */
table { font-variant-numeric: var(--table-num); }
table th { background: var(--table-head-bg); color: var(--table-head-fg); }
table th, table td { border-bottom-color: var(--table-rule); }
table tbody tr:hover { background: var(--table-row-hover); }
.prices .fig, .home-v3 .month__v, .home-v3 .rpt__kpi-v { font-variant-numeric: var(--table-num); }