/* portal.css — CWGimpact Groundwork PORTAL COMPATIBILITY ADAPTER, v1.2.1
   ============================================================================
   Applies approved Groundwork identity (sand / ochre / terracotta / dark
   earth / muted green, Lora + DM Sans) to the existing operating CWG portal
   WITHOUT touching the portal's own structural CSS (layout, flex, grid,
   overflow, z-index, focus/keyboard behaviour all stay exactly as shipped)
   and WITHOUT touching groundwork.css, tokens.json or website.css.

   Read-only inputs this file was written against (portal repo, not owned by
   this package): public/_design-system/{portal-core,red-plate,components,
   gsp-structural,themes,fonts,design-language-gsp-xp}.css — see docs/
   portal.md for the file-by-file trace.

   ACTIVATION: load this stylesheet LAST, after every existing portal
   structural sheet (fonts.css, shell.css, components.css, themes.css,
   portal-core.css, red-plate.css, gsp-structural.css, ...). It changes
   nothing on its own — every declaration in this file is scoped under
   `html[data-ds-language="cwg-groundwork"]`, the SAME activation pattern
   the portal's own design-language-gsp-xp.css already uses for its
   alternate skin. A page without that attribute renders byte-identical to
   today's MMD red/black/grey portal; nothing here is reachable otherwise.

   WHY SCOPED TOKEN MAPPING INSTEAD OF @import OF dist/tokens.css: this
   package's own tokens.css sets a SECOND, UNSCOPED `:root{--baobab:...;
   --paper:...;--ink:...}` block (its own convenience default for a
   standalone Groundwork site). Importing that file verbatim into a shared
   portal bundle would leak Groundwork colours onto every MMD page,
   including ones that never opt into data-ds-language="cwg-groundwork" —
   exactly the breakage this adapter exists to prevent. So the five
   identity colours and two font families are re-declared here, values
   copied verbatim from tokens.json/README.md (no new palette, nothing
   invented), but properly SCOPED. @font-face registration (fonts.css) has
   no such risk — declaring a font family globally doesn't change anything
   until something's font-family references it — so that one loads via a
   normal relative @import, as asked.
   ============================================================================ */

@import url('./fonts.css');

html[data-ds-language="cwg-groundwork"] {
  /* ==========================================================================
     1. GROUNDWORK PRIMITIVES — verbatim from tokens.json. Single source of
     truth for every value below; nothing downstream invents a new hex.
     ========================================================================== */
  --cwg-sand:       #F5F1E5;
  --cwg-ochre:      #E5C476;
  --cwg-terracotta: #85513C;
  --cwg-earth:      #40382F;
  --cwg-green:      #74835C;
  --cwg-line:       #D4CBBB;
  --cwg-surface:    #FFFCF6;
  --cwg-display:    "Lora", Georgia, serif;
  --cwg-body:       "DM Sans", Arial, sans-serif;
  --cwg-control-radius: 3px;
  --cwg-panel-radius:   6px;
  --cwg-focus:      3px solid var(--cwg-earth);

  /* Deep terracotta for danger/destructive states — one mix, not a new hue,
     needed because plain terracotta alone reads too close to the primary
     accent to double as "delete this" without a heavier step. */
  --cwg-terracotta-deep: color-mix(in srgb, var(--cwg-earth) 30%, var(--cwg-terracotta));

  /* ==========================================================================
     2. BASE SEMANTIC TOKENS — the contract every var()-driven rule in
     portal-core.css / components.css / red-plate.css / gsp-structural.css
     already consumes. This is the SAME token set design-language-gsp-xp.css
     remaps for its own skin (paper/ink/baobab/signal/radius/font) — proven
     activation pattern, reused here rather than reinvented.
     ========================================================================== */
  --paper:      var(--cwg-sand);
  --paper-2:    var(--cwg-surface);
  --ink:        var(--cwg-earth);
  --ink-soft:   var(--cwg-earth);
  --ink-solid:  var(--cwg-earth);
  --ink-mute:   color-mix(in srgb, var(--cwg-earth) 72%, var(--cwg-surface));
  --ink-faint:  color-mix(in srgb, var(--cwg-earth) 46%, var(--cwg-surface));
  --hairline:   var(--cwg-line);
  --line:       var(--cwg-line);

  --baobab:     var(--cwg-terracotta);
  --baobab-2:   var(--cwg-terracotta-deep);
  --baobab-bg:  color-mix(in srgb, var(--cwg-ochre) 28%, var(--cwg-surface));
  --baobab-on:  var(--cwg-surface);
  --ds-logo-asset: none; /* portal brand mark stays the portal's own SVG; identity here is colour/type only */

  /* Status semantics preserved: words + colour, never colour alone (portal
     markup already renders text/icons alongside these — untouched here).
     success=green, warning=ochre, danger=deep terracotta, info=neutral ink. */
  --signal-amber:     color-mix(in srgb, var(--cwg-earth) 22%, var(--cwg-ochre));
  --signal-amber-bg:  color-mix(in srgb, var(--cwg-ochre) 26%, var(--cwg-surface));
  --signal-grass:     color-mix(in srgb, var(--cwg-earth) 18%, var(--cwg-green));
  --signal-grass-bg:  color-mix(in srgb, var(--cwg-green) 22%, var(--cwg-surface));
  --signal-info:      var(--cwg-terracotta);
  --signal-info-bg:   color-mix(in srgb, var(--cwg-terracotta) 16%, var(--cwg-surface));

  --radius:       var(--cwg-panel-radius);
  --ds-radius-sm: var(--cwg-control-radius);
  --ds-rule:      1px;
  --sb-hair:      color-mix(in srgb, var(--cwg-surface) 10%, transparent);

  /* ==========================================================================
     3. FONT ALIASES — every alias scattered across the portal DS resolves
     to the two approved faces. Display/headings -> Lora; every working
     interface (body, controls, mono-flavoured chrome labels) -> DM Sans.
     Numeric records use DM Sans tabular figures alongside their labels.
     ========================================================================== */
  --font-display:      var(--cwg-display);
  --font-ui:            var(--cwg-body);
  --font-mono:          var(--cwg-body);
  --mmd-font-mono:      var(--cwg-body);
  --mmd-font-display:   var(--cwg-display);
  --mmd-font-ui:        var(--cwg-body);
  --ds-font-window:     var(--cwg-body);

  /* ==========================================================================
     4. rp-* PRIMITIVES (red-plate.css / portal-core.css) — the portal's
     black/red/silver chrome ramp. Flattened onto Groundwork: surfaces on
     sand/surface, ink on earth, the single red accent on terracotta, the
     black title/topbar gradient stops on earth (see section 6 for the
     gradient -> flat rewrite itself).
     ========================================================================== */
  --rp-white:          var(--cwg-surface);
  --rp-desk:            var(--cwg-line);
  --rp-ink:             var(--cwg-earth);
  --rp-ink-soft:        var(--cwg-earth);
  --rp-ink-mute:        var(--ink-mute);
  --rp-ink-floor:       var(--ink-mute);
  --rp-silver:          var(--cwg-surface);
  --rp-silver-2:        var(--cwg-sand);
  --rp-line-2:          var(--cwg-line);
  --rp-line-3:          var(--cwg-line);
  --rp-black-1:         var(--cwg-earth);
  --rp-line:            var(--cwg-line);
  --rp-border-strong:   color-mix(in srgb, var(--cwg-earth) 35%, var(--cwg-line));
  --rp-red:             var(--cwg-terracotta);
  --rp-red-deep:        var(--cwg-terracotta-deep);
  --rp-red-lift:        color-mix(in srgb, var(--cwg-surface) 12%, var(--cwg-terracotta));
  --rp-red-sink:        var(--cwg-terracotta-deep);
  --rp-page-bg:         var(--cwg-sand);
  --rp-paper:           var(--cwg-surface);
  --rp-hairline:        var(--cwg-line);
  --rp-page-ink:        var(--cwg-earth);
  --rp-page-mute:       var(--ink-mute);
  --rp-radius:          var(--cwg-control-radius);
  --rp-ctl:             36px; /* was 24px — groundwork's own 36px compact-control floor */
  --rp-page-pad:        22px 26px 40px;
  --rp-black:           var(--cwg-earth);
  --rp-black-lift:      color-mix(in srgb, var(--cwg-surface) 8%, var(--cwg-earth));
  --rp-black-foot:      color-mix(in srgb, black 22%, var(--cwg-earth));
  --rp-black-chrome-hi: rgba(255, 252, 246, .12);
  --rp-black-chrome-lo: rgba(0, 0, 0, .55);
  --rp-tb-hover-fill:   rgba(255, 252, 246, .16);
  --rp-tb-hover-line:   rgba(255, 252, 246, .38);
  --rp-toolbar:         var(--cwg-surface);
  --rp-danger-bg:       color-mix(in srgb, var(--cwg-terracotta-deep) 12%, var(--cwg-surface));
  --rp-attention-bg:    color-mix(in srgb, var(--cwg-ochre) 20%, var(--cwg-surface));
  --rp-fs-th: 10.5px; --rp-fw-th: 700; --rp-ls-th: 0.06em;

  /* -- ds-c-* ramp (gsp-xp windows-chrome skin): each family below is a
     systematic light->base->dark color-mix ramp of ONE approved Groundwork
     hue, not a new palette. black/white/neutral ramps sit between earth and
     surface (structural chrome); yellow sits on sand (canvas/panel warmth);
     amber on ochre; red AND blue both resolve to terracotta (terracotta is
     the approved primary; the few concrete active/selected/on selectors that
     used blue for selection state are re-pointed to ochre explicitly in
     section 7, per "ochre active surfaces"); green on green (success). teal
     has no approved equivalent and is folded into green. */
  --ds-c-black-01: var(--cwg-earth);
  --ds-c-black-02: var(--cwg-earth);
  --ds-c-white-01: var(--cwg-surface);
  --ds-c-white-02: color-mix(in srgb, var(--cwg-surface) 97%, white);
  --ds-c-white-03: #ffffff;
  --ds-c-neutral-01: color-mix(in srgb, var(--cwg-earth) 7%, var(--cwg-surface));
  --ds-c-neutral-02: color-mix(in srgb, var(--cwg-earth) 14%, var(--cwg-surface));
  --ds-c-neutral-03: color-mix(in srgb, var(--cwg-earth) 21%, var(--cwg-surface));
  --ds-c-neutral-04: color-mix(in srgb, var(--cwg-earth) 28%, var(--cwg-surface));
  --ds-c-neutral-05: color-mix(in srgb, var(--cwg-earth) 34%, var(--cwg-surface));
  --ds-c-neutral-06: color-mix(in srgb, var(--cwg-earth) 41%, var(--cwg-surface));
  --ds-c-neutral-07: color-mix(in srgb, var(--cwg-earth) 48%, var(--cwg-surface));
  --ds-c-neutral-08: color-mix(in srgb, var(--cwg-earth) 55%, var(--cwg-surface));
  --ds-c-neutral-09: color-mix(in srgb, var(--cwg-earth) 62%, var(--cwg-surface));
  --ds-c-neutral-10: color-mix(in srgb, var(--cwg-earth) 69%, var(--cwg-surface));
  --ds-c-neutral-11: color-mix(in srgb, var(--cwg-earth) 76%, var(--cwg-surface));
  --ds-c-neutral-12: color-mix(in srgb, var(--cwg-earth) 83%, var(--cwg-surface));
  --ds-c-neutral-13: color-mix(in srgb, var(--cwg-earth) 90%, var(--cwg-surface));
  --ds-c-neutral-14: color-mix(in srgb, var(--cwg-earth) 96%, var(--cwg-surface));
  --ds-c-neutral-15: color-mix(in srgb, var(--cwg-earth) 4%, var(--cwg-earth));
  --ds-c-neutral-16: color-mix(in srgb, var(--cwg-earth) 10%, var(--cwg-earth));
  --ds-c-neutral-17: color-mix(in srgb, var(--cwg-earth) 17%, var(--cwg-earth));
  --ds-c-neutral-18: color-mix(in srgb, var(--cwg-earth) 24%, var(--cwg-earth));
  --ds-c-neutral-19: color-mix(in srgb, var(--cwg-earth) 31%, var(--cwg-earth));
  --ds-c-neutral-20: color-mix(in srgb, var(--cwg-earth) 38%, var(--cwg-earth));
  --ds-c-neutral-21: color-mix(in srgb, var(--cwg-earth) 45%, var(--cwg-earth));
  --ds-c-neutral-22: color-mix(in srgb, var(--cwg-earth) 52%, var(--cwg-earth));
  --ds-c-neutral-23: color-mix(in srgb, var(--cwg-earth) 59%, var(--cwg-earth));
  --ds-c-neutral-24: color-mix(in srgb, var(--cwg-earth) 66%, var(--cwg-earth));
  --ds-c-neutral-25: color-mix(in srgb, var(--cwg-earth) 72%, var(--cwg-earth));
  --ds-c-neutral-26: color-mix(in srgb, var(--cwg-earth) 79%, var(--cwg-earth));
  --ds-c-neutral-27: color-mix(in srgb, var(--cwg-earth) 86%, var(--cwg-earth));
  --ds-c-neutral-28: color-mix(in srgb, var(--cwg-earth) 92%, var(--cwg-earth));
  --ds-c-yellow-01: color-mix(in srgb, var(--cwg-sand) 7%, var(--cwg-surface));
  --ds-c-yellow-02: color-mix(in srgb, var(--cwg-sand) 15%, var(--cwg-surface));
  --ds-c-yellow-03: color-mix(in srgb, var(--cwg-sand) 22%, var(--cwg-surface));
  --ds-c-yellow-04: color-mix(in srgb, var(--cwg-sand) 30%, var(--cwg-surface));
  --ds-c-yellow-05: color-mix(in srgb, var(--cwg-sand) 37%, var(--cwg-surface));
  --ds-c-yellow-06: color-mix(in srgb, var(--cwg-sand) 44%, var(--cwg-surface));
  --ds-c-yellow-07: color-mix(in srgb, var(--cwg-sand) 52%, var(--cwg-surface));
  --ds-c-yellow-08: color-mix(in srgb, var(--cwg-sand) 59%, var(--cwg-surface));
  --ds-c-yellow-09: color-mix(in srgb, var(--cwg-sand) 67%, var(--cwg-surface));
  --ds-c-yellow-10: color-mix(in srgb, var(--cwg-sand) 74%, var(--cwg-surface));
  --ds-c-yellow-11: color-mix(in srgb, var(--cwg-sand) 81%, var(--cwg-surface));
  --ds-c-yellow-12: color-mix(in srgb, var(--cwg-sand) 89%, var(--cwg-surface));
  --ds-c-yellow-13: color-mix(in srgb, var(--cwg-sand) 96%, var(--cwg-surface));
  --ds-c-yellow-14: color-mix(in srgb, var(--cwg-earth) 4%, var(--cwg-sand));
  --ds-c-yellow-15: color-mix(in srgb, var(--cwg-earth) 11%, var(--cwg-sand));
  --ds-c-yellow-16: color-mix(in srgb, var(--cwg-earth) 19%, var(--cwg-sand));
  --ds-c-yellow-17: color-mix(in srgb, var(--cwg-earth) 26%, var(--cwg-sand));
  --ds-c-yellow-18: color-mix(in srgb, var(--cwg-earth) 33%, var(--cwg-sand));
  --ds-c-yellow-19: color-mix(in srgb, var(--cwg-earth) 41%, var(--cwg-sand));
  --ds-c-yellow-20: color-mix(in srgb, var(--cwg-earth) 48%, var(--cwg-sand));
  --ds-c-yellow-21: color-mix(in srgb, var(--cwg-earth) 56%, var(--cwg-sand));
  --ds-c-yellow-22: color-mix(in srgb, var(--cwg-earth) 63%, var(--cwg-sand));
  --ds-c-yellow-23: color-mix(in srgb, var(--cwg-earth) 70%, var(--cwg-sand));
  --ds-c-yellow-24: color-mix(in srgb, var(--cwg-earth) 78%, var(--cwg-sand));
  --ds-c-yellow-25: color-mix(in srgb, var(--cwg-earth) 85%, var(--cwg-sand));
  --ds-c-yellow-26: color-mix(in srgb, var(--cwg-earth) 92%, var(--cwg-sand));
  --ds-c-amber-01: color-mix(in srgb, var(--cwg-ochre) 7%, var(--cwg-surface));
  --ds-c-amber-02: color-mix(in srgb, var(--cwg-ochre) 14%, var(--cwg-surface));
  --ds-c-amber-03: color-mix(in srgb, var(--cwg-ochre) 21%, var(--cwg-surface));
  --ds-c-amber-04: color-mix(in srgb, var(--cwg-ochre) 28%, var(--cwg-surface));
  --ds-c-amber-05: color-mix(in srgb, var(--cwg-ochre) 34%, var(--cwg-surface));
  --ds-c-amber-06: color-mix(in srgb, var(--cwg-ochre) 41%, var(--cwg-surface));
  --ds-c-amber-07: color-mix(in srgb, var(--cwg-ochre) 48%, var(--cwg-surface));
  --ds-c-amber-08: color-mix(in srgb, var(--cwg-ochre) 55%, var(--cwg-surface));
  --ds-c-amber-09: color-mix(in srgb, var(--cwg-ochre) 62%, var(--cwg-surface));
  --ds-c-amber-10: color-mix(in srgb, var(--cwg-ochre) 69%, var(--cwg-surface));
  --ds-c-amber-11: color-mix(in srgb, var(--cwg-ochre) 76%, var(--cwg-surface));
  --ds-c-amber-12: color-mix(in srgb, var(--cwg-ochre) 83%, var(--cwg-surface));
  --ds-c-amber-13: color-mix(in srgb, var(--cwg-ochre) 90%, var(--cwg-surface));
  --ds-c-amber-14: color-mix(in srgb, var(--cwg-ochre) 96%, var(--cwg-surface));
  --ds-c-amber-15: color-mix(in srgb, var(--cwg-earth) 4%, var(--cwg-ochre));
  --ds-c-amber-16: color-mix(in srgb, var(--cwg-earth) 10%, var(--cwg-ochre));
  --ds-c-amber-17: color-mix(in srgb, var(--cwg-earth) 17%, var(--cwg-ochre));
  --ds-c-amber-18: color-mix(in srgb, var(--cwg-earth) 24%, var(--cwg-ochre));
  --ds-c-amber-19: color-mix(in srgb, var(--cwg-earth) 31%, var(--cwg-ochre));
  --ds-c-amber-20: color-mix(in srgb, var(--cwg-earth) 38%, var(--cwg-ochre));
  --ds-c-amber-21: color-mix(in srgb, var(--cwg-earth) 45%, var(--cwg-ochre));
  --ds-c-amber-22: color-mix(in srgb, var(--cwg-earth) 52%, var(--cwg-ochre));
  --ds-c-amber-23: color-mix(in srgb, var(--cwg-earth) 59%, var(--cwg-ochre));
  --ds-c-amber-24: color-mix(in srgb, var(--cwg-earth) 66%, var(--cwg-ochre));
  --ds-c-amber-25: color-mix(in srgb, var(--cwg-earth) 72%, var(--cwg-ochre));
  --ds-c-amber-26: color-mix(in srgb, var(--cwg-earth) 79%, var(--cwg-ochre));
  --ds-c-amber-27: color-mix(in srgb, var(--cwg-earth) 86%, var(--cwg-ochre));
  --ds-c-amber-28: color-mix(in srgb, var(--cwg-earth) 92%, var(--cwg-ochre));
  --ds-c-red-01: color-mix(in srgb, var(--cwg-terracotta) 7%, var(--cwg-surface));
  --ds-c-red-02: color-mix(in srgb, var(--cwg-terracotta) 15%, var(--cwg-surface));
  --ds-c-red-03: color-mix(in srgb, var(--cwg-terracotta) 22%, var(--cwg-surface));
  --ds-c-red-04: color-mix(in srgb, var(--cwg-terracotta) 30%, var(--cwg-surface));
  --ds-c-red-05: color-mix(in srgb, var(--cwg-terracotta) 37%, var(--cwg-surface));
  --ds-c-red-06: color-mix(in srgb, var(--cwg-terracotta) 44%, var(--cwg-surface));
  --ds-c-red-07: color-mix(in srgb, var(--cwg-terracotta) 52%, var(--cwg-surface));
  --ds-c-red-08: color-mix(in srgb, var(--cwg-terracotta) 59%, var(--cwg-surface));
  --ds-c-red-09: color-mix(in srgb, var(--cwg-terracotta) 67%, var(--cwg-surface));
  --ds-c-red-10: color-mix(in srgb, var(--cwg-terracotta) 74%, var(--cwg-surface));
  --ds-c-red-11: color-mix(in srgb, var(--cwg-terracotta) 81%, var(--cwg-surface));
  --ds-c-red-12: color-mix(in srgb, var(--cwg-terracotta) 89%, var(--cwg-surface));
  --ds-c-red-13: color-mix(in srgb, var(--cwg-terracotta) 96%, var(--cwg-surface));
  --ds-c-red-14: color-mix(in srgb, var(--cwg-earth) 4%, var(--cwg-terracotta));
  --ds-c-red-15: color-mix(in srgb, var(--cwg-earth) 11%, var(--cwg-terracotta));
  --ds-c-red-16: color-mix(in srgb, var(--cwg-earth) 19%, var(--cwg-terracotta));
  --ds-c-red-17: color-mix(in srgb, var(--cwg-earth) 26%, var(--cwg-terracotta));
  --ds-c-red-18: color-mix(in srgb, var(--cwg-earth) 33%, var(--cwg-terracotta));
  --ds-c-red-19: color-mix(in srgb, var(--cwg-earth) 41%, var(--cwg-terracotta));
  --ds-c-red-20: color-mix(in srgb, var(--cwg-earth) 48%, var(--cwg-terracotta));
  --ds-c-red-21: color-mix(in srgb, var(--cwg-earth) 56%, var(--cwg-terracotta));
  --ds-c-red-22: color-mix(in srgb, var(--cwg-earth) 63%, var(--cwg-terracotta));
  --ds-c-red-23: color-mix(in srgb, var(--cwg-earth) 70%, var(--cwg-terracotta));
  --ds-c-red-24: color-mix(in srgb, var(--cwg-earth) 78%, var(--cwg-terracotta));
  --ds-c-red-25: color-mix(in srgb, var(--cwg-earth) 85%, var(--cwg-terracotta));
  --ds-c-red-26: color-mix(in srgb, var(--cwg-earth) 92%, var(--cwg-terracotta));
  --ds-c-blue-01: color-mix(in srgb, var(--cwg-terracotta) 6%, var(--cwg-surface));
  --ds-c-blue-02: color-mix(in srgb, var(--cwg-terracotta) 12%, var(--cwg-surface));
  --ds-c-blue-03: color-mix(in srgb, var(--cwg-terracotta) 18%, var(--cwg-surface));
  --ds-c-blue-04: color-mix(in srgb, var(--cwg-terracotta) 24%, var(--cwg-surface));
  --ds-c-blue-05: color-mix(in srgb, var(--cwg-terracotta) 29%, var(--cwg-surface));
  --ds-c-blue-06: color-mix(in srgb, var(--cwg-terracotta) 35%, var(--cwg-surface));
  --ds-c-blue-07: color-mix(in srgb, var(--cwg-terracotta) 41%, var(--cwg-surface));
  --ds-c-blue-08: color-mix(in srgb, var(--cwg-terracotta) 47%, var(--cwg-surface));
  --ds-c-blue-09: color-mix(in srgb, var(--cwg-terracotta) 53%, var(--cwg-surface));
  --ds-c-blue-10: color-mix(in srgb, var(--cwg-terracotta) 59%, var(--cwg-surface));
  --ds-c-blue-11: color-mix(in srgb, var(--cwg-terracotta) 65%, var(--cwg-surface));
  --ds-c-blue-12: color-mix(in srgb, var(--cwg-terracotta) 71%, var(--cwg-surface));
  --ds-c-blue-13: color-mix(in srgb, var(--cwg-terracotta) 76%, var(--cwg-surface));
  --ds-c-blue-14: color-mix(in srgb, var(--cwg-terracotta) 82%, var(--cwg-surface));
  --ds-c-blue-15: color-mix(in srgb, var(--cwg-terracotta) 88%, var(--cwg-surface));
  --ds-c-blue-16: color-mix(in srgb, var(--cwg-terracotta) 94%, var(--cwg-surface));
  --ds-c-blue-17: color-mix(in srgb, var(--cwg-terracotta) 96%, var(--cwg-surface));
  --ds-c-blue-18: color-mix(in srgb, var(--cwg-earth) 6%, var(--cwg-terracotta));
  --ds-c-blue-19: color-mix(in srgb, var(--cwg-earth) 12%, var(--cwg-terracotta));
  --ds-c-blue-20: color-mix(in srgb, var(--cwg-earth) 18%, var(--cwg-terracotta));
  --ds-c-blue-21: color-mix(in srgb, var(--cwg-earth) 24%, var(--cwg-terracotta));
  --ds-c-blue-22: color-mix(in srgb, var(--cwg-earth) 29%, var(--cwg-terracotta));
  --ds-c-blue-23: color-mix(in srgb, var(--cwg-earth) 35%, var(--cwg-terracotta));
  --ds-c-blue-24: color-mix(in srgb, var(--cwg-earth) 41%, var(--cwg-terracotta));
  --ds-c-blue-25: color-mix(in srgb, var(--cwg-earth) 47%, var(--cwg-terracotta));
  --ds-c-blue-26: color-mix(in srgb, var(--cwg-earth) 53%, var(--cwg-terracotta));
  --ds-c-blue-27: color-mix(in srgb, var(--cwg-earth) 59%, var(--cwg-terracotta));
  --ds-c-blue-28: color-mix(in srgb, var(--cwg-earth) 65%, var(--cwg-terracotta));
  --ds-c-blue-29: color-mix(in srgb, var(--cwg-earth) 71%, var(--cwg-terracotta));
  --ds-c-blue-30: color-mix(in srgb, var(--cwg-earth) 76%, var(--cwg-terracotta));
  --ds-c-blue-31: color-mix(in srgb, var(--cwg-earth) 82%, var(--cwg-terracotta));
  --ds-c-blue-32: color-mix(in srgb, var(--cwg-earth) 88%, var(--cwg-terracotta));
  --ds-c-blue-33: color-mix(in srgb, var(--cwg-earth) 92%, var(--cwg-terracotta));
  --ds-c-green-01: color-mix(in srgb, var(--cwg-green) 15%, var(--cwg-surface));
  --ds-c-green-02: color-mix(in srgb, var(--cwg-green) 31%, var(--cwg-surface));
  --ds-c-green-03: color-mix(in srgb, var(--cwg-green) 46%, var(--cwg-surface));
  --ds-c-green-04: color-mix(in srgb, var(--cwg-green) 62%, var(--cwg-surface));
  --ds-c-green-05: color-mix(in srgb, var(--cwg-green) 77%, var(--cwg-surface));
  --ds-c-green-06: color-mix(in srgb, var(--cwg-green) 92%, var(--cwg-surface));
  --ds-c-green-07: color-mix(in srgb, var(--cwg-earth) 8%, var(--cwg-green));
  --ds-c-green-08: color-mix(in srgb, var(--cwg-earth) 23%, var(--cwg-green));
  --ds-c-green-09: color-mix(in srgb, var(--cwg-earth) 38%, var(--cwg-green));
  --ds-c-green-10: color-mix(in srgb, var(--cwg-earth) 54%, var(--cwg-green));
  --ds-c-green-11: color-mix(in srgb, var(--cwg-earth) 69%, var(--cwg-green));
  --ds-c-green-12: color-mix(in srgb, var(--cwg-earth) 85%, var(--cwg-green));
  --ds-c-teal: var(--cwg-green);
  --ds-c-white-01-a85: color-mix(in srgb, var(--cwg-surface) 85%, transparent);
  --ds-c-yellow-03-a: color-mix(in srgb, var(--cwg-sand) 55%, transparent);

  /* base canvas + type, so anything that reads html/body directly (not just
     component classes) still lands on Groundwork */
  background: var(--cwg-sand);
  color: var(--cwg-earth);
  font-family: var(--cwg-body);
}

html[data-ds-language="cwg-groundwork"] body {
  background: var(--cwg-sand);
  color: var(--cwg-earth);
  font-family: var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] h1,
html[data-ds-language="cwg-groundwork"] h2,
html[data-ds-language="cwg-groundwork"] h3,
html[data-ds-language="cwg-groundwork"] .module-title {
  font-family: var(--cwg-display);
}

/* ============================================================================
   5. CONTROL SIZE FLOOR — "desktop compact 36px buttons/inputs and readable
   dense table cells; mobile 44px". Explicit min-height rather than relying
   on padding math, per groundwork's own accessibility contract (README:
   "Default controls at least 44px high; compact table controls at least
   36px"). Structural display/flex/position of these rules is untouched —
   only geometry + colour.
   ============================================================================ */
html[data-ds-language="cwg-groundwork"] .ds-button,
html[data-ds-language="cwg-groundwork"] .ds-tb-btn,
html[data-ds-language="cwg-groundwork"] .rp-lang,
html[data-ds-language="cwg-groundwork"] .gsp-tool,
html[data-ds-language="cwg-groundwork"] .gsp-node-open {
  font-family: var(--cwg-body);
  border-radius: var(--cwg-control-radius);
}
html[data-ds-language="cwg-groundwork"] .ds-button,
html[data-ds-language="cwg-groundwork"] .ds-input,
html[data-ds-language="cwg-groundwork"] .ds-select,
html[data-ds-language="cwg-groundwork"] .ds-textarea,
html[data-ds-language="cwg-groundwork"] .md-in,
html[data-ds-language="cwg-groundwork"] .ec-in {
  min-height: 36px;
  border-radius: var(--cwg-control-radius);
  font-family: var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] .ds-datagrid-th,
html[data-ds-language="cwg-groundwork"] .ds-datagrid-row td,
html[data-ds-language="cwg-groundwork"] .ds-oms-table td,
html[data-ds-language="cwg-groundwork"] .ds-paper-table td,
html[data-ds-language="cwg-groundwork"] .gsp-node {
  min-height: 36px; /* dense table cells stay dense — this is a floor, not a target row height */
}
@media (max-width: 640px), (pointer: coarse) {
  html[data-ds-language="cwg-groundwork"] .ds-button,
  html[data-ds-language="cwg-groundwork"] .ds-input,
  html[data-ds-language="cwg-groundwork"] .ds-select,
  html[data-ds-language="cwg-groundwork"] .ds-textarea,
  html[data-ds-language="cwg-groundwork"] .ds-tb-btn,
  html[data-ds-language="cwg-groundwork"] .property-mobile-record,
  html[data-ds-language="cwg-groundwork"] .property-mobile-summary {
    min-height: 44px;
  }
}
/* property-mobile-* (components.css) had no explicit touch-target floor at
   all — added directly, not inherited from the 640px rule above, so it also
   applies to a narrow desktop window, matching the class's own "mobile"
   intent regardless of pointer type. */
html[data-ds-language="cwg-groundwork"] .property-mobile-record,
html[data-ds-language="cwg-groundwork"] .property-mobile-summary {
  min-height: 44px;
  font-family: var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] .property-mobile-header h1,
html[data-ds-language="cwg-groundwork"] .property-mobile-record span,
html[data-ds-language="cwg-groundwork"] .directory-node-name,
html[data-ds-language="cwg-groundwork"] .ds-oms-record-title {
  font-family: var(--cwg-body);
  color: var(--cwg-earth);
}

/* ============================================================================
   6. TOPBAR (.ds-topbar / .ds-tb-*) — the gradient black band with a red
   top-edge active tab becomes a flat earth band with a restrained four-
   colour stripe (terracotta / green / ochre / earth) on its bottom edge, and
   a flat surface-toned active tab plate with an ochre top edge (active =
   ochre, per the approved role split; the band itself stays terracotta-
   adjacent/earth as the primary chrome, not ochre, so "active" still reads
   distinctly against the bar). No hero treatment — this is the "restrained
   stripe and identity mark, not cover art" the README specifies for
   compact ERP screens.
   ============================================================================ */
html[data-ds-language="cwg-groundwork"] .ds-topbar {
  background: var(--cwg-earth); /* flat — no gradient */
  box-shadow: none;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,
    var(--cwg-terracotta) 0 42%, var(--cwg-green) 42% 54%,
    var(--cwg-ochre) 54% 78%, var(--cwg-earth) 78% 100%) 1;
}
html[data-ds-language="cwg-groundwork"] .ds-tb-brand .ds-tb-app-name,
html[data-ds-language="cwg-groundwork"] .ds-topbar .ds-tb-brand .ds-tb-app-name,
html[data-ds-language="cwg-groundwork"] .ds-tb-tab:not(.active),
html[data-ds-language="cwg-groundwork"] .ds-tb-who,
html[data-ds-language="cwg-groundwork"] .ds-tb-signout {
  color: color-mix(in srgb, var(--cwg-surface) 86%, transparent);
  font-family: var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] .ds-tb-brand .ds-tb-mark {
  fill: var(--cwg-surface);
}
html[data-ds-language="cwg-groundwork"] .ds-tb-tab:not(.active):hover {
  color: var(--cwg-surface);
  background: color-mix(in srgb, var(--cwg-surface) 14%, transparent);
}
html[data-ds-language="cwg-groundwork"] .ds-tb-tab.active {
  background: var(--cwg-surface); /* flat, no white-to-silver gradient */
  border-top: 3px solid var(--cwg-ochre); /* active = ochre, per the approved role split */
  color: var(--cwg-earth);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--cwg-earth) 20%, transparent);
}
html[data-ds-language="cwg-groundwork"] .ds-tb-tab .n {
  border-color: color-mix(in srgb, var(--cwg-surface) 55%, transparent);
  color: var(--cwg-surface);
}
html[data-ds-language="cwg-groundwork"] .ds-tb-tab.active .n {
  border-color: var(--cwg-earth); color: var(--cwg-earth); background: var(--cwg-line);
}
html[data-ds-language="cwg-groundwork"] .ds-tb-btn {
  background: color-mix(in srgb, var(--cwg-surface) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cwg-surface) 32%, transparent);
  color: var(--cwg-surface);
}

/* ============================================================================
   7. SIDEBAR RAIL (.sb) — already fully var(--ink)/var(--paper)-driven in
   the source, so section 2's token remap alone recolours it correctly
   (dark earth rail, sand text) with zero structural change; only the two
   remaining hardcoded rgba(...) accents get an explicit rewrite.
   ============================================================================ */
html[data-ds-language="cwg-groundwork"] .sb {
  font-family: var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] .sb .entity-switch {
  border-color: color-mix(in srgb, var(--cwg-surface) 12%, transparent);
}
/* --sb-hair (consumed by .sb .sb-brand's border-bottom) is set once in the
   token block above; portal-core.css's own :root definition of the same
   name has lower specificity than our attribute-scoped selector wherever a
   rule actually reads it through the cascade on a cwg-groundwork page. */

/* ============================================================================
   8. WINDOW / MODAL / BUTTON — .ds-window, .ds-modal-body/.ds-modal-header,
   .ds-button(+variants) already consume var(--paper)/var(--ink)/var(--hairline)/
   var(--baobab)/var(--font-*)/var(--radius) directly (confirmed in source),
   so section 1-3's token remap recolours and refonts them with no layout
   change. Only geometry additions (min-height, radius) are named directly.
   ============================================================================ */
html[data-ds-language="cwg-groundwork"] .ds-modal-body {
  border-radius: var(--cwg-panel-radius);
  border-color: var(--cwg-line);
}
html[data-ds-language="cwg-groundwork"] .ds-modal-header {
  font-family: var(--cwg-display);
}
html[data-ds-language="cwg-groundwork"] .ds-button-primary,
html[data-ds-language="cwg-groundwork"] .ds-button {
  text-transform: none; /* Groundwork buttons are sentence case, not the uppercase MMD treatment */
  letter-spacing: normal;
}
html[data-ds-language="cwg-groundwork"] .ds-button:disabled,
html[data-ds-language="cwg-groundwork"] .ds-input:disabled,
html[data-ds-language="cwg-groundwork"] .ds-select:disabled,
html[data-ds-language="cwg-groundwork"] .gsp-tool:disabled,
html[data-ds-language="cwg-groundwork"] [disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(28%); /* disabled stays visually distinct from every status hue, not colour-coded itself */
}

/* ============================================================================
   9. GSP SYSTEM (gsp-structural.css — the Windows-XP-style planning/supplier
   chrome: .gsp-app/.gsp-window/.gsp-titlebar/.gsp-toolbar/.gsp-tool/.gsp-node/
   .gsp-chip/.gsp-statusbar/.gsp-menu, including the supplier-facing screens
   promoted from supplier-xp.css — no distinct "gsp-auth" class exists in the
   source; supplier auth/bid screens are built from this same class family,
   covered here). Section 1's --ds-c-* ramp already recolours every gradient
   stop; the two rules below additionally FLATTEN the gradients themselves
   (the ramp alone would still render a two-stop gradient, just in
   Groundwork hues — the brief asks for flat).
   ============================================================================ */
html[data-ds-language="cwg-groundwork"] .gsp-app {
  font-family: var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] .gsp-titlebar {
  background: var(--cwg-terracotta); /* flat, was linear-gradient(blue-24 -> blue-32) */
}
html[data-ds-language="cwg-groundwork"] .gsp-titlebar-close {
  background: var(--cwg-terracotta-deep); /* flat, was linear-gradient(red-11 -> red-14 -> red-20) */
}
html[data-ds-language="cwg-groundwork"] .gsp-titlebar-close:hover {
  background: color-mix(in srgb, var(--cwg-surface) 18%, var(--cwg-terracotta-deep));
}
html[data-ds-language="cwg-groundwork"] .gsp-tool[data-primary="true"] {
  background: var(--cwg-surface); /* flat, was linear-gradient(white -> yellow -> amber) */
  border-color: var(--cwg-terracotta);
}
html[data-ds-language="cwg-groundwork"] .gsp-tool[data-primary="true"]:hover {
  background: var(--ds-c-amber-01);
}
html[data-ds-language="cwg-groundwork"] .gsp-node-open {
  background: var(--cwg-surface); /* flat, was linear-gradient(white -> yellow -> amber) */
  border-color: var(--cwg-terracotta);
}
html[data-ds-language="cwg-groundwork"] .gsp-mcol-head {
  background: var(--cwg-surface); /* flat, was linear-gradient(white -> blue-07) */
}
/* "ochre active surfaces": the concrete selected/on/active states in the
   gsp system used the blue ramp (now terracotta per section 1's ramp
   mapping) — re-pointed to ochre here so selection reads distinctly from
   the terracotta structural chrome around it. */
html[data-ds-language="cwg-groundwork"] .gsp-tool[data-on="true"],
html[data-ds-language="cwg-groundwork"] .gsp-node[data-selected="true"],
html[data-ds-language="cwg-groundwork"] .gsp-menu:hover,
html[data-ds-language="cwg-groundwork"] .gsp-menu[aria-current="page"],
html[data-ds-language="cwg-groundwork"] .gsp-menu[data-active="true"],
html[data-ds-language="cwg-groundwork"] .gsp-edge[data-on="true"] {
  background: var(--ds-c-amber-04);
  border-color: var(--cwg-ochre);
}
html[data-ds-language="cwg-groundwork"] .gsp-edge[data-on="true"] {
  stroke: var(--cwg-ochre);
}
html[data-ds-language="cwg-groundwork"] .gsp-plan-state[data-state="confirmed"] {
  color: var(--signal-grass);
}
html[data-ds-language="cwg-groundwork"] .gsp-plan-state[data-state="none"],
html[data-ds-language="cwg-groundwork"] .gsp-plan-state[data-state="unscheduled"] {
  color: var(--cwg-terracotta-deep); /* danger stays a distinct hue, never relies on position/weight alone — text content is unchanged, still carries the word */
}

/* ============================================================================
   10. PRINT / SUPPLIER EXPORTS — the portal's @media print rules already
   consume var(--paper)/var(--hairline) and hide interactive chrome
   (.ds-paper-controls etc.); section 1's remap already makes the printed
   sheet render on sand/surface. The one addition needed is suppressing the
   topbar's decorative stripe and the gsp windows-chrome bevels in print
   output, which don't route through var(--paper) and aren't already in the
   existing hide-list.
   ============================================================================ */
@media print {
  html[data-ds-language="cwg-groundwork"] .ds-topbar,
  html[data-ds-language="cwg-groundwork"] .sb,
  html[data-ds-language="cwg-groundwork"] .gsp-titlebar,
  html[data-ds-language="cwg-groundwork"] .gsp-toolbar,
  html[data-ds-language="cwg-groundwork"] .gsp-statusbar {
    display: none;
  }
  html[data-ds-language="cwg-groundwork"] .ds-paper-sheet[data-raised="true"],
  html[data-ds-language="cwg-groundwork"] .ds-paper-page {
    background: #ffffff; /* print stays neutral paper-white regardless of screen canvas tone */
    color: var(--cwg-earth);
  }
}

/* ============================================================================
   11. FOCUS — groundwork's own visible-focus contract, applied on top of
   the portal's existing focus-visible selectors (behaviour untouched).
   ============================================================================ */
html[data-ds-language="cwg-groundwork"] button:focus-visible,
html[data-ds-language="cwg-groundwork"] a:focus-visible,
html[data-ds-language="cwg-groundwork"] input:focus-visible,
html[data-ds-language="cwg-groundwork"] select:focus-visible,
html[data-ds-language="cwg-groundwork"] textarea:focus-visible,
html[data-ds-language="cwg-groundwork"] [tabindex]:focus-visible {
  outline: var(--cwg-focus);
  outline-offset: 2px;
}

/* ============================================================================
   SUPPORTED ALIASES (registry mirror — see manifest.json "portalAdapter"):
   rp-*, ds-c-*, gsp-* (incl. supplier-promoted gsp-* auth/bid screens),
   property-mobile-*, ds-tb family / .ds-topbar, .sb (rail), .ds-window, .ds-modal*,
   .ds-button*, .ds-input/.ds-select/.ds-textarea, --font-ui/--mmd-font-ui/
   --ds-font-window/--font-display/--mmd-font-display, print/@media print
   paper-file exports.
   ============================================================================ */

/* Working-register controls share the compact Groundwork contract. These
   semantic aliases occur in properties, procurement, projects and suppliers. */
html[data-ds-language="cwg-groundwork"] .gsp-btn,
html[data-ds-language="cwg-groundwork"] .gsp-input,
html[data-ds-language="cwg-groundwork"] .gsp-select,
html[data-ds-language="cwg-groundwork"] .gsp-textarea,
html[data-ds-language="cwg-groundwork"] .gsp-tool {
  min-height: 36px;
  height: auto;
  padding: 7px 12px;
  border-radius: var(--cwg-control-radius);
  font-family: var(--cwg-body);
  font-size: 12px;
  box-shadow: none;
}
html[data-ds-language="cwg-groundwork"] .gsp-input,
html[data-ds-language="cwg-groundwork"] .gsp-select,
html[data-ds-language="cwg-groundwork"] .gsp-textarea {
  background: var(--cwg-surface);
  color: var(--cwg-earth);
  border-color: var(--cwg-line);
}
html[data-ds-language="cwg-groundwork"] .gsp-input[type="checkbox"],
html[data-ds-language="cwg-groundwork"] .gsp-input[type="radio"] {
  min-height: 18px; width: 18px; padding: 0;
}
html[data-ds-language="cwg-groundwork"] .gsp-menu:hover,
html[data-ds-language="cwg-groundwork"] .gsp-menu[aria-current="page"],
html[data-ds-language="cwg-groundwork"] .gsp-menu[data-active="true"],
html[data-ds-language="cwg-groundwork"] .mlp .gsp-menu[data-active="true"] {
  color: var(--cwg-earth);
  background: var(--cwg-ochre);
}
html[data-ds-language="cwg-groundwork"] .gsp-toolbar {
  gap: 6px; padding: 6px 8px;
}
html[data-ds-language="cwg-groundwork"] .property-register-table,
html[data-ds-language="cwg-groundwork"] .gsp-grid {
  font-family: var(--cwg-body);
  font-variant-numeric: tabular-nums;
  background: var(--cwg-surface);
}
html[data-ds-language="cwg-groundwork"] .property-register-table th,
html[data-ds-language="cwg-groundwork"] .gsp-grid th {
  background: var(--cwg-sand);
  color: var(--cwg-earth);
  font-family: var(--cwg-body);
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  border-bottom: 2px solid var(--cwg-ochre);
}
html[data-ds-language="cwg-groundwork"] .property-register-table td,
html[data-ds-language="cwg-groundwork"] .property-register-table th {
  padding: 8px 10px;
}
html[data-ds-language="cwg-groundwork"] .property-title,
html[data-ds-language="cwg-groundwork"] .property-heading .property-title {
  font-family: var(--cwg-body);
  font-size: 18px;
  font-weight: 600;
}
html[data-ds-language="cwg-groundwork"] .gsp-link {
  color: var(--cwg-terracotta);
}
@media (max-width:640px), (pointer:coarse) {
  html[data-ds-language="cwg-groundwork"] .gsp-btn,
  html[data-ds-language="cwg-groundwork"] .gsp-input,
  html[data-ds-language="cwg-groundwork"] .gsp-select,
  html[data-ds-language="cwg-groundwork"] .gsp-textarea,
  html[data-ds-language="cwg-groundwork"] .gsp-tool {
    min-height: 44px;
    font-size: 14px;
  }
  html[data-ds-language="cwg-groundwork"] .gsp-input[type="checkbox"],
  html[data-ds-language="cwg-groundwork"] .gsp-input[type="radio"] {
    min-height: 18px;
  }
}

/* Native module tabs need an explicit fill: browser buttonface is not a
   Groundwork colour. Active state remains ochre through the scoped rule. */
html[data-ds-language="cwg-groundwork"] .mlp .gsp-menu:not([data-active="true"]):not(:hover) {
  background: var(--cwg-sand);
  color: var(--cwg-earth);
}
html[data-ds-language="cwg-groundwork"] .mlp .gsp-menu {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
html[data-ds-language="cwg-groundwork"] .ds-tb-tab.active {
  height: 36px;
  min-height: 36px;
  margin-top: 1px;
  margin-bottom: 1px;
}
@media (max-width:640px), (pointer:coarse) {
  html[data-ds-language="cwg-groundwork"] .mlp .gsp-menu {
    min-height: 44px;
  }
}

/* Shared native supplier window: compact, readable header and navigation. */
html[data-ds-language="cwg-groundwork"] .gsp-titlebar {
  min-height: 44px;
  height: auto;
  padding: 4px 12px;
  font-family: var(--cwg-body);
  font-size: 14px;
  background: var(--cwg-earth);
}
html[data-ds-language="cwg-groundwork"] .gsp-titlebar-close {
  width: auto;
  min-width: 36px;
  height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--cwg-line);
  border-radius: var(--cwg-control-radius);
  color: var(--cwg-earth);
  background: var(--cwg-sand);
  box-shadow: none;
  font: 12px var(--cwg-body);
}
html[data-ds-language="cwg-groundwork"] .gsp-toolbar > .gsp-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
html[data-ds-language="cwg-groundwork"] .gsp-grid td,
html[data-ds-language="cwg-groundwork"] .gsp-grid th {
  padding: 8px 10px;
}
@media (max-width:640px), (pointer:coarse) {
  html[data-ds-language="cwg-groundwork"] .gsp-titlebar-close,
  html[data-ds-language="cwg-groundwork"] .gsp-toolbar > .gsp-link {
    min-height: 44px;
    height: auto;
    font-size: 14px;
  }
}

/* Native date/spinner internals need room after the control padding is applied. */
html[data-ds-language="cwg-groundwork"] .gsp-input[type="date"],
html[data-ds-language="cwg-groundwork"] .gsp-input[type="datetime-local"] {
  min-width: 160px;
}
html[data-ds-language="cwg-groundwork"] .gsp-input[type="number"][data-w="num"] {
  min-width: 100px;
}