/* ============================================================================
   Carbon_Components.css  —  GPRNT.AI (Carbon) shared style layer
   ----------------------------------------------------------------------------
   Extracted VERBATIM from Component_Library_Carbon_20260803_v1_2.html
   (token layer + component layer, lines 15–787). This is the single source of
   truth for tokens, typography and the .c-* component classes. Any HTML page
   that <link>s this file inherits the exact same naming, variants (data-*) and
   token IDs as the component library — the library controls the styling.
   Sync date: 2026-08-19 · fileKey oe8pql0zcUWZarv2HwU7L1
   ----------------------------------------------------------------------------
   2026-08-19 live-Figma verification pass (via Figma MCP get_variable_defs on
   IconContainer, Link, Banner, Select, ProgressBar — the full token surface the
   .c-* classes bind):
   • LIGHT token layer verified current. One drift fixed: Status.Positive.Bold
     repointed Green-700 (#129963) -> Green-600 (#14b373). All other light
     colour / spacing / type tokens match live Figma.
   • Component geometry ALIGNED to Figma (per user request "align fully"):
     Buttons (4 sizes incl. X-Large, Figma raw paddings, Medium font 14->16),
     IconButton (icon always 24, circular radius), Link (Informative/blue ramp +
     Regular weight, was Primary/green Bolder), inputs (radius 12/14/16, Figma
     fill/stroke), Toggle (36x20 track / 16 knob), Tag (rounded-rect r6/8 +
     Regular weight, was a bold pill), Banner gap, Thumbnail squircle radii,
     SegmentedControl (radius + green active border), IconContainer full 12-32 set.
   • DARK token layer NOT verified — see the DARK MODE block's warning.
   ============================================================================ */

/* ============================================================================
   DesignSystem_Carbon — TOKEN LAYER
   Source: live Figma extraction via MCP  ·  fileKey oe8pql0zcUWZarv2HwU7L1
   Synced 2026-08-19  ·  124 colour / 25 spacing / 20 text / 4 effect / 1 paint

   Collections: Carbon_Color (VariableCollectionId:19:121)
                  lightMode 19:0 · darkMode 31857:0
                Carbon_Spacing (VariableCollectionId:31930:12575)
                  Default 31930:0

   NAMING: the CSS custom property mirrors the Figma variable path 1:1.
     Figma  Text/OnSurface                                  -> --Text-OnSurface
     Figma  Surface/SurfaceContainer/SurfaceContainerLow     -> --Surface-SurfaceContainer-SurfaceContainerLow
     Figma  Spacing/Space_4                                  -> --Spacing-Space_4
   Slashes become hyphens. PascalCase is preserved verbatim, so a property name
   can be pasted back into Figma search and will resolve.

   ALIASES: where a variable resolves to another variable, the CSS keeps a
   var() reference rather than a flattened hex, preserving the alias chain.
   ========================================================================== */

:root {
  /* ---- Base ramps — primitives. Never apply directly in UI. ---------- */
  --Base-Grey-0: #fdfdfd;
  --Base-Grey-50: #f5f5f5;
  --Base-Grey-75: #e8e8e8;
  --Base-Grey-100: #dbdbdb;
  --Base-Grey-200: #bfbfbf;
  --Base-Grey-300: #a3a3a3;
  --Base-Grey-400: #8c8c8c;
  --Base-Grey-600: #575757;
  --Base-Grey-700: #3d3d3d;
  --Base-Grey-800: #292929;
  --Base-Grey-900: #1a1a1a;
  --Base-Grey-1000: #1b1b1b;
  --Base-White-0: #ffffff;
  --Base-White-50: #f5f5f5;
  --Base-Green-50: #edfef7;
  --Base-Green-75: #d9fcee;
  --Base-Green-100: #b0f6da;
  --Base-Green-300: #5fedb4;
  --Base-Green-400: #38e8a2;
  --Base-Green-500: #19da8d;
  --Base-Green-600: #14b373;
  --Base-Green-700: #129963;
  --Base-Green-800: #0e8052;
  --Base-Teal-50: #effcfb;
  --Base-Teal-75: #ddf9f6;
  --Base-Teal-100: #b6f0ea;
  --Base-Teal-200: #90e8df;
  --Base-Teal-500: #2ac9b9;
  --Base-Blue-50: #d8ecfd;
  --Base-Blue-75: #bee0fc;
  --Base-Blue-100: #a2d3fb;
  --Base-Blue-400: #0780e3;
  --Base-Blue-600: #055a9f;
  --Base-Blue-800: #022644;
  --Base-Red-50: #fbe1e1;
  --Base-Red-75: #f9cbcb;
  --Base-Red-100: #f6b8b8;
  --Base-Red-400: #e63434;
  --Base-Red-600: #a91c1c;
  --Base-Red-800: #490c0c;
  --Base-Orange-50: #feefde;
  --Base-Orange-75: #fce4c8;
  --Base-Orange-100: #fcd9b2;
  --Base-Orange-400: #f59323;
  --Base-Orange-600: #b4670f;
  --Base-Orange-800: #4e2c06;
  --Base-Yellow-50: #fef2dd;
  --Base-Yellow-75: #fce9c7;
  --Base-Yellow-600: #4c3206;
  --Base-Yellow-800: #261903;
  --Base-Purple-50: #eedffb;
  --Base-Purple-75: #e3cbf9;
  --Base-Purple-100: #d8b6f7;
  --Base-Purple-400: #9233e6;
  --Base-Purple-600: #681daa;
  --Base-Purple-800: #2d0c4b;

  /* ---- Text — text and icon fills only ------------------------------- */
  --Text-OnSurface: #0f172a;
  --Text-OnSurfaceVariant: #475569;
  --Text-OnSurfaceDim: #64748b;
  --Text-OnSurfacePlaceholder: #94a3b8;
  --Text-OnSurfaceDisabled: #cbd5e1;
  --Text-OnPrimary: #ffffff;
  --Text-InverseOnSurface: #f5f5f5;

  /* ---- Surface — background fills only ------------------------------- */
  --Surface-Background-Surface: #f8f9fb;
  --Surface-SurfaceContainer-SurfaceContainerLowest: #fdfdfd;
  --Surface-SurfaceContainer-SurfaceContainerLow: #fafbfc;
  --Surface-SurfaceContainer-SurfaceContainer: #f8f9fb;
  --Surface-SurfaceContainer-SurfaceContainerHigh: #f1f5f9;
  --Surface-SurfaceContainer-SurfaceContainerHighest: #eef0f3;
  --Surface-Overlay-OverlayBase: #1a1a1a99;

  /* ---- Primary / Secondary ------------------------------------------- */
  --Primary-Primary: #18bd7b;
  --Primary-PrimaryContainer: #d9fcee;
  --Primary-PrimaryFixed: #d9fcee;
  --Primary-PrimaryFixedDim: #87f1c7;
  --Primary-PrimaryGradient_StopOne: #19da8d;
  --Primary-PrimaryGradient_StopTwo: #19da8d;
  --Secondary-Secondary: #2ac9b9;
  --Secondary-SecondaryContainer: #ddf9f6;
  --Secondary-SecondaryFixed: #ddf9f6;
  --Secondary-SecondaryFixedDim: #90e8df;

  /* ---- Outline — STROKES ONLY (scoped STROKE_COLOR in Figma) --------- */
  --Outline-Softest: #f5f5f5;
  --Outline-Softer: #e8e8e8;
  --Outline-Soft: #e2e8f0;
  --Outline-Base: #cbd5e1;
  --Outline-Bold: #94a3b8;
  --Outline-Boldest: #64748b;

  /* ---- Chart — data visualisation only --------------------------------
     Renamed 2026-08-19 to follow the underscore convention in the file:
     Chart/Segment_1 → Chart/Segment_One, etc. The mirrored custom-property
     names are the canonical form; the old --Chart-Segment_N names are kept
     below as aliases so existing prototypes keep resolving. */
  --Chart-Segment_One: #14b373;
  --Chart-Segment_Two: #00cdb9;
  --Chart-Segment_Three: #0780e3;
  --Chart-Segment_Four: #292929;
  /* back-compat aliases (pre-2026-08-19 names) */
  --Chart-Segment_1: var(--Chart-Segment_One);
  --Chart-Segment_2: var(--Chart-Segment_Two);
  --Chart-Segment_3: var(--Chart-Segment_Three);
  --Chart-Segment_4: var(--Chart-Segment_Four);

  /* ---- Status — aliased to Base ramps -------------------------------- */
  --Status-Neutral-Softest: var(--Base-Grey-50);
  --Status-Neutral-Softer: var(--Base-Grey-75);
  --Status-Neutral-Soft: var(--Base-Grey-100);
  --Status-Neutral-Base: var(--Base-Grey-400);
  --Status-Neutral-Bold: var(--Base-Grey-600);
  --Status-Neutral-Boldest: var(--Base-Grey-800);
  --Status-Positive-Softest: var(--Base-Green-50);
  --Status-Positive-Softer: var(--Base-Green-75);
  --Status-Positive-Soft: var(--Base-Green-100);
  --Status-Positive-Base: var(--Base-Green-500);
  --Status-Positive-Bold: var(--Base-Green-600); /* live 2026-08-19: #14b373 (was Green-700 #129963) */
  --Status-Positive-Boldest: var(--Base-Green-800);
  --Status-Alert-Softest: var(--Base-Red-50);
  --Status-Alert-Softer: var(--Base-Red-75);
  --Status-Alert-Soft: var(--Base-Red-100);
  --Status-Alert-Base: var(--Base-Red-400);
  --Status-Alert-Bold: var(--Base-Red-600);
  --Status-Alert-Boldest: var(--Base-Red-800);
  --Status-Notice-Softest: var(--Base-Orange-50);
  --Status-Notice-Softer: var(--Base-Orange-75);
  --Status-Notice-Soft: var(--Base-Orange-100);
  --Status-Notice-Base: var(--Base-Orange-400);
  --Status-Notice-Bold: var(--Base-Orange-600);
  --Status-Notice-Boldest: var(--Base-Orange-800);
  --Status-NoticeAlt-Softest: var(--Base-Yellow-50);
  --Status-NoticeAlt-Bold: var(--Base-Yellow-600);
  --Status-Informative-Softest: var(--Base-Blue-50);
  --Status-Informative-Softer: var(--Base-Blue-75);
  --Status-Informative-Soft: var(--Base-Blue-100);
  --Status-Informative-Base: var(--Base-Blue-400);
  --Status-Informative-Bold: var(--Base-Blue-600);
  --Status-Informative-Boldest: var(--Base-Blue-800);
  --Status-Alert-Translucent: #e6343426;
  --Status-Positive-Translucent: #19da8d26;

  /* ---- Carbon_Spacing ------------------------------------------------- */
  --Spacing-Space_0: 0rem;
  --Spacing-Space_1: 0.25rem;
  --Spacing-Space_2: 0.5rem;
  --Spacing-Space_3: 0.75rem;
  --Spacing-Space_4: 1rem;
  --Spacing-Space_5: 1.25rem;
  --Spacing-Space_6: 1.5rem;
  --Spacing-Space_8: 2rem;
  --Spacing-Space_10: 2.5rem;
  --Spacing-Space_12: 3rem;
  --Spacing-Space_14: 3.5rem;
  --Spacing-Space_16: 4rem;
  --Spacing-Space_18: 4.5rem;
  --Spacing-Space_20: 5rem;
  --Spacing-Space_22: 5.5rem;
  --Spacing-Space_24: 6rem;
  --Spacing-Space_26: 6.5rem;
  --Spacing-Space_28: 7rem;
  --Spacing-Space_30: 7.5rem;
  --Spacing-Space_32: 8rem;
  --Spacing-Space_34: 8.5rem;
  --Spacing-Space_35: 8.75rem;
  --Spacing-Space_36: 9rem;
  --Spacing-Space_37: 9.25rem;
  --Card-RoundedCorner: 1rem;

  /* ---- Effect styles ---------------------------------------------------
     Renamed 2026-08-19 to follow the underscore convention in the file:
     Shadow/Level 1 → Shadow/Level_One, etc. The mirrored custom-property
     names are the canonical form; the old --Shadow-LevelN names are kept
     below as aliases so existing prototypes keep resolving. */
  --Shadow-Level_One: 0 0.25rem 0.5625rem 0 #161a1d0d;
  --Shadow-Level_Two: 0 0.3125rem 0.625rem 0 #161a1d1f;
  --Shadow-Level_Three: 0 0.5rem 0.625rem 0 #161a1d29;
  --Shadow-Reversed: 0 -2px 0.75rem 0 #1c1c1c1a;
  /* back-compat aliases (pre-2026-08-19 names) */
  --Shadow-Level1: var(--Shadow-Level_One);
  --Shadow-Level2: var(--Shadow-Level_Two);
  --Shadow-Level3: var(--Shadow-Level_Three);

  /* ---- Paint style ------------------------------------------------------
     Figma paint style renamed to Primary_Gradient. Stop colours are raw
     hexes in the file, NOT bound to Primary/PrimaryGradient_Stop*. */
  --Primary_Gradient: linear-gradient(90deg, #19da8d 0%, #23b9aa 100%);
  --primary_gradient: var(--Primary_Gradient); /* back-compat alias */

  /* ---- Radius ----------------------------------------------------------
     Card/RoundedCorner (16px) is now a REAL token in Carbon_Spacing.
     Control radii below remain conventions with no variable behind them. */
  --radius-control: 0.25rem;
  --radius-pill: 999px;
  /* Doc-chrome radii added 2026-08-01 for the M3-style layout. --radius-tile is
     now bound to the real Card/RoundedCorner token; --radius-panel is still
     net-new with no Figma backing. Flagged in Gaps. */
  --radius-tile: var(--Card-RoundedCorner);
  --radius-panel: 1.75rem;
  /* Added 2026-08-21 during the prototype token-compliance pass. The 14 pages
     were using bare 6px and 10px radii in eight places; these name the values
     so the pages reference the stylesheet instead. NET-NEW, no Figma backing —
     the radius family now reads control 4 · sm 6 · md 10 · tile 16 · panel 28 ·
     pill 999. Flagged in Gaps: 6 and 10 should either become real Carbon
     variables or be folded into 4/16. */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;

  /* ---- Off-grid spacing ------------------------------------------------
     Carbon_Spacing is a 4px scale starting at Space_1 (4px). These three
     sub-step values were found hardcoded in the prototype (optical icon
     nudges and tight stacked-label gaps) and have no Figma variable. Named
     here so the pages reference the stylesheet; the name flags the debt.
     Deliberately NOT called --Spacing-* — that prefix mirrors Figma variable
     paths 1:1 and must stay pasteable into Figma search. Flagged in Gaps. */
  --space-offgrid-1: 0.0625rem;
  --space-offgrid-2: 0.125rem;
  --space-offgrid-6: 0.375rem;

  /* ---- Typography — Inter, Regular + Semi Bold -------------------------- */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-Regular: 400;
  --font-Bolder: 600;

  /* ---- Tracking --------------------------------------------------------
     Carbon has no letter-spacing variable. The prototype's uppercase eyebrow /
     section labels were carrying four different values (.02 / .03 / .04 / .06em)
     for what is one treatment; consolidated 2026-08-21 to --tracking-caps, with
     --tracking-caps-wide kept for the marketing hero eyebrow, which is a
     deliberately looser display treatment. NET-NEW, no Figma backing. */
  --tracking-caps: .03em;
  --tracking-caps-wide: .06em;

  /* ---- Icon glyph sizing -----------------------------------------------
     The .c-iconContainer variants below expose 12/16/20/24/32; these name the
     same steps so a page can size an icon FONT (Material Symbols) or a bare
     <svg> without hardcoding px. --font-family-icon is the third-party icon
     face — off-system by necessity, no Carbon variable. NET-NEW, no Figma
     backing. Flagged in Gaps, together with the off-grid 22px rail glyph. */
  --font-family-icon: 'Material Symbols Rounded';
  --icon-size-12: 0.75rem;
  --icon-size-16: 1rem;
  --icon-size-20: 1.25rem;
  --icon-size-24: 1.5rem;
  --icon-size-32: 2rem;
  --icon-size-offgrid-22: 1.375rem;
}

/* ==========================================================================
   DARK MODE — Carbon_Color mode 31857:0
   --------------------------------------------------------------------------
   ⚠️ UNVERIFIED / STALE. These dark values come from a 2026-08-03 extraction of
   the old Carbon_Components.css, NOT from a live Figma read. The paired token
   export (semantic.json) flags every dark value $verified:false, and live reads
   have already proven the source stale on light tokens. The remote Figma MCP
   returns light-mode values only, so these could not be re-verified in the
   2026-08-19 pass. Do NOT trust these for production dark mode — refresh them
   from Figma's variables/local REST endpoint (all modes) before shipping dark.
   The 14 prototype pages are light-only, so this does not affect them today.
   ========================================================================== */
[data-mode="dark"] {
  --Base-Grey-0: #030303;
  --Base-Grey-50: #0a0a0a;
  --Base-Grey-75: #171717;
  --Base-Grey-100: #242424;
  --Base-Grey-200: #404040;
  --Base-Grey-300: #5c5c5c;
  --Base-Grey-400: #737373;
  --Base-Grey-600: #2a2a2a;
  --Base-Grey-700: #1c1c1c;
  --Base-Grey-800: #151515;
  --Base-Grey-900: #0e0e0e;
  --Base-Grey-1000: #1b1b1b;
  --Base-White-0: #ffffff;
  --Base-White-50: #f5f5f5;
  --Base-Green-50: #86f0c6;
  --Base-Green-75: #76eebe;
  --Base-Green-100: #67ecb7;
  --Base-Green-300: #21cc88;
  --Base-Green-400: #179261;
  --Base-Green-500: #13754e;
  --Base-Green-600: #0e583a;
  --Base-Green-700: #093a26;
  --Base-Green-800: #072c1d;
  --Base-Teal-50: #8fe7de;
  --Base-Teal-75: #81e3d9;
  --Base-Teal-100: #73e0d5;
  --Base-Teal-200: #59d8cb;
  --Base-Teal-500: #1c6d64;
  --Base-Blue-50: #2c9bf5;
  --Base-Blue-75: #0883e7;
  --Base-Blue-100: #0985eb;
  --Base-Blue-400: #044982;
  --Base-Blue-600: #033259;
  --Base-Blue-800: #021c32;
  --Base-Red-50: #f9d2d2;
  --Base-Red-75: #f5a2a2;
  --Base-Red-100: #ef7979;
  --Base-Red-400: #c22121;
  --Base-Red-600: #7a1313;
  --Base-Red-800: #3c0909;
  --Base-Orange-50: #feedda;
  --Base-Orange-75: #fbca92;
  --Base-Orange-100: #f7a94f;
  --Base-Orange-400: #b4670f;
  --Base-Orange-600: #673b09;
  --Base-Orange-800: #341e04;
  --Base-Yellow-50: #fef2dc;
  --Base-Yellow-75: #fbd38d;
  --Base-Yellow-600: #885804;
  --Base-Yellow-800: #503404;
  --Base-Purple-50: #e7d1fa;
  --Base-Purple-75: #cfa3f5;
  --Base-Purple-100: #b775f0;
  --Base-Purple-400: #7721c2;
  --Base-Purple-600: #4b1579;
  --Base-Purple-800: #240a3b;
  --Text-OnSurface: #f1f5f9;
  --Text-OnSurfaceVariant: #94a3b8;
  --Text-OnSurfaceDim: #64748b;
  --Text-OnSurfacePlaceholder: #64748b;
  --Text-OnSurfaceDisabled: #475569;
  --Text-OnPrimary: #0f172a;
  --Text-InverseOnSurface: #0e0e0e;
  --Surface-Background-Surface: #0a0a0a;
  --Surface-SurfaceContainer-SurfaceContainerLowest: #1a1f2e;
  --Surface-SurfaceContainer-SurfaceContainerLow: #1e2436;
  --Surface-SurfaceContainer-SurfaceContainer: #13172a;
  --Surface-SurfaceContainer-SurfaceContainerHigh: #1c2235;
  --Surface-SurfaceContainer-SurfaceContainerHighest: #161b2c;
  --Surface-Overlay-OverlayBase: #48484899;
  --Primary-Primary: #86f0c6;
  --Primary-PrimaryContainer: #072c1d;
  --Primary-PrimaryFixed: #072c1d;
  --Primary-PrimaryFixedDim: #13754e;
  --Primary-PrimaryGradient_StopOne: #21cc88;
  --Primary-PrimaryGradient_StopTwo: #21cc88;
  --Secondary-Secondary: #59d8cb;
  --Secondary-SecondaryContainer: #8fe7de;
  --Secondary-SecondaryFixed: #b6fff8;
  --Secondary-SecondaryFixedDim: #73e0d5;
  --Outline-Softest: #2424245c;
  --Outline-Softer: #2c2c2c5c;
  --Outline-Soft: #2d3748;
  --Outline-Base: #374151;
  --Outline-Bold: #4a5568;
  --Outline-Boldest: #f1f5f9;
  --Chart-Segment_One: #4ed99d;
  --Chart-Segment_Two: #52e0d5;
  --Chart-Segment_Three: #559ee7;
  --Chart-Segment_Four: #d6d6d6;
  --Chart-Segment_1: var(--Chart-Segment_One);
  --Chart-Segment_2: var(--Chart-Segment_Two);
  --Chart-Segment_3: var(--Chart-Segment_Three);
  --Chart-Segment_4: var(--Chart-Segment_Four);
  --Status-Neutral-Softest: var(--Base-Grey-800);
  --Status-Neutral-Softer: var(--Base-Grey-600);
  --Status-Neutral-Soft: var(--Base-Grey-400);
  --Status-Neutral-Base: var(--Base-Grey-100);
  --Status-Neutral-Bold: var(--Base-Grey-75);
  --Status-Neutral-Boldest: var(--Base-White-50);
  --Status-Positive-Softest: var(--Base-Green-800);
  --Status-Positive-Softer: var(--Base-Green-600);
  --Status-Positive-Soft: var(--Base-Green-400);
  --Status-Positive-Base: var(--Base-Green-100);
  --Status-Positive-Bold: var(--Base-Green-75);
  --Status-Positive-Boldest: var(--Base-Green-50);
  --Status-Alert-Softest: var(--Base-Red-800);
  --Status-Alert-Softer: var(--Base-Red-600);
  --Status-Alert-Soft: var(--Base-Red-400);
  --Status-Alert-Base: var(--Base-Red-100);
  --Status-Alert-Bold: var(--Base-Red-75);
  --Status-Alert-Boldest: var(--Base-Red-50);
  --Status-Notice-Softest: var(--Base-Orange-800);
  --Status-Notice-Softer: var(--Base-Orange-600);
  --Status-Notice-Soft: var(--Base-Orange-400);
  --Status-Notice-Base: var(--Base-Orange-100);
  --Status-Notice-Bold: var(--Base-Orange-75);
  --Status-Notice-Boldest: var(--Base-Orange-50);
  --Status-NoticeAlt-Softest: var(--Base-Yellow-800);
  --Status-NoticeAlt-Bold: var(--Base-Yellow-75);
  --Status-Informative-Softest: var(--Base-Blue-800);
  --Status-Informative-Softer: var(--Base-Blue-600);
  --Status-Informative-Soft: var(--Base-Blue-400);
  --Status-Informative-Base: var(--Base-Blue-100);
  --Status-Informative-Bold: var(--Base-Blue-75);
  --Status-Informative-Boldest: var(--Base-Blue-50);
  --Status-Alert-Translucent: #ef797926;
  --Status-Positive-Translucent: #67ecb726;
}

/* ==========================================================================
   TYPOGRAPHY — 20 styles, migrated to T-shirt names (Family/Size_Weight)
   Inter · Regular (400) and Semi Bold (600). Letter-spacing 0 on every style.
   "Bolder" in a style name means the Figma style string "Semi Bold".
   Re-extracted 2026-08-19: the file now uses L/M/S sizing (Display/L_Bolder,
   Heading/M_Bolder, Body/M_Regular …), replacing the old Family/NN numeric
   names. The .t-<group>-<size>-<weight> classes below are canonical; the old
   .t-<group>-NN-<weight> names are kept, grouped onto the same rules, so
   existing prototypes keep resolving.
   NOTE (anomaly): Callout/S_Regular is 20/28 in the file — larger than
   Callout/L and inconsistent with the S tier. Extracted verbatim; flagged
   for the design team to confirm rather than "corrected" here.
   ========================================================================== */
/* 23 Oct 2026, Fable: Regular 400 read heavier in the browser than in Figma.
   The weight was right; macOS browsers draw text edges darker by default.
   Grayscale antialiasing draws them the way Figma does. Weight stays 400. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.t-display-l-bolder,  .t-display-01-bolder   { font-size:4.5rem; line-height:5rem; font-weight:var(--font-Bolder); }
.t-display-m-bolder,  .t-display-02-bolder   { font-size:3.5rem; line-height:4rem; font-weight:var(--font-Bolder); }
.t-display-s-bolder,  .t-heading-01-bolder   { font-size:2.5rem; line-height:3rem; font-weight:var(--font-Bolder); }
.t-display-s-regular, .t-heading-01-regular  { font-size:2.5rem; line-height:3rem; font-weight:var(--font-Regular); }
.t-heading-l-bolder,  .t-heading-02-bolder   { font-size:2rem; line-height:2.5rem; font-weight:var(--font-Bolder); }
.t-heading-l-regular, .t-heading-02-regular  { font-size:2rem; line-height:2.5rem; font-weight:var(--font-Regular); }
.t-heading-m-bolder,  .t-heading-03-bolder   { font-size:1.5rem; line-height:2rem; font-weight:var(--font-Bolder); }
.t-heading-m-regular, .t-heading-03-regular  { font-size:1.5rem; line-height:2rem; font-weight:var(--font-Regular); }
.t-heading-s-bolder,  .t-heading-04-bolder   { font-size:1.25rem; line-height:1.75rem; font-weight:var(--font-Bolder); }
.t-callout-l-bolder,  .t-callout-01-bolder   { font-size:1.125rem; line-height:1.625rem; font-weight:var(--font-Bolder); }
.t-callout-m-bolder,  .t-callout-02-bolder   { font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); }
.t-callout-s-bolder,  .t-callout-03-bolder   { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Bolder); }
.t-callout-s-regular                         { font-size:1.25rem; line-height:1.75rem; font-weight:var(--font-Regular); } /* anomaly, see note */
.t-body-l-regular,    .t-body-01-regular     { font-size:1.125rem; line-height:1.625rem; font-weight:var(--font-Regular); }
.t-body-m-regular,    .t-body-02-regular     { font-size:1rem; line-height:1.5rem; font-weight:var(--font-Regular); }
.t-body-s-regular,    .t-body-03-regular     { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); }
.t-metadata-l-bolder, .t-metadata-01-bolder  { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Bolder); }
.t-metadata-l-regular,.t-metadata-01-regular { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); }
.t-metadata-m-bolder, .t-metadata-02-bolder  { font-size:0.625rem; line-height:0.875rem; font-weight:var(--font-Bolder); }
.t-metadata-m-regular,.t-metadata-02-regular { font-size:0.625rem; line-height:0.875rem; font-weight:var(--font-Regular); }
/* back-compat: old Heading/04_Regular (20/28) — no Regular equivalent in the
   migrated file (Heading/S is Bolder-only); kept for existing markup only. */
.t-heading-04-regular                        { font-size:1.25rem; line-height:1.75rem; font-weight:var(--font-Regular); }
[class^="t-"], [class*=" t-"] { letter-spacing: 0; }

/* ==========================================================================
   PRIMITIVE — IconContainer
   --------------------------------------------------------------------------
   The single icon primitive. Every component that shows an icon NESTS this
   element rather than styling a glyph inline. Sizing is driven ENTIRELY by
   inherited custom properties, so a parent changing its Size variant
   propagates down automatically — the CSS analogue of a nested Figma
   sub-component inheriting a variant.

   Contract — a parent sets any of these and IconContainer follows:
     --iconContainer-size   box + glyph size   (16 / 20 / 24)
     --iconContainer-color  glyph fill         (text/* or primary or status/…/base)
     --iconContainer-fill   Material FILL axis (0 inactive · 1 active)
     --iconContainer-wght   Material wght axis (400 default · 600 with Semi Bold text)
     --iconContainer-bg     optional container fill (surface/* or status/…/softest)
     --iconContainer-pad    optional container padding

   IconContainer NEVER declares its own hard size — only fallbacks inside
   var(). That is what makes inheritance win over the local value.
   ========================================================================== */
.c-iconContainer {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: content-box;
  inline-size: var(--iconContainer-size, 1.5rem);
  block-size: var(--iconContainer-size, 1.5rem);
  padding: var(--iconContainer-pad, var(--Spacing-Space_0));
  background: var(--iconContainer-bg, transparent);
  border-radius: var(--iconContainer-radius, var(--radius-control));
  color: var(--iconContainer-color, var(--Text-OnSurfaceVariant));
  /* The container contributes no leading of its own, and sits on the optical
     middle when it lands in a line box next to a label rather than in a flex row. */
  line-height: 0;
  vertical-align: middle;
  transition: color .15s ease, background .15s ease;
}
.c-iconContainer > .material-symbols-rounded {
  display: block;
  font-size: var(--iconContainer-size, 1.5rem);
  line-height: 1;
  /* font-variation-settings axis values must be UNITLESS numbers. Passing a
     length here ('opsz' 24px) invalidates the WHOLE declaration, which
     silently took FILL and wght down with it. opsz is driven from font-size
     by font-optical-sizing instead, so it stays correct at 16/20/24. */
  font-optical-sizing: auto;
  font-variation-settings:
    'FILL' var(--iconContainer-fill, 0),
    'wght' var(--iconContainer-wght, 400),
    'GRAD' 0;
  /* Centre the glyph INK, not the ink plus the font's baseline leading.
     Unsupported browsers ignore this and fall back to the grid centring. */
  text-box: trim-both text text;
  user-select: none;
}
/* Inline SVGs inside an icon container: size to the container token so
   the parent's --iconContainer-size contract works identically to font
   glyphs. Colour inherits via currentColor on the SVG's own fill or
   stroke attributes — do NOT set fill here, because stroke-based icons
   carry fill="none" and a CSS fill would override it. */
.c-iconContainer > svg {
  display: block;
  inline-size: var(--iconContainer-size, 1.5rem);
  block-size: var(--iconContainer-size, 1.5rem);
  flex: 0 0 auto;
}
/* Custom mask icons (DesignSystem_Material_Icon.css) inside an icon container:
   bridge --iconContainer-size → --icon-size so the mask icons scale with the
   same container tokens the Material Symbols glyphs use. Color inherits via
   currentColor (set by --iconContainer-color on the container). */
.c-iconContainer > .icon {
  display: block;
  --icon-size: var(--iconContainer-size, 1.5rem);
}
/* Standalone size utilities — full Figma set X-Small..X-Large: 12 / 16 / 20 / 24 / 32 */
.c-iconContainer[data-size="12"] { --iconContainer-size: 0.75rem; }
.c-iconContainer[data-size="16"] { --iconContainer-size: 1rem; }
.c-iconContainer[data-size="20"] { --iconContainer-size: 1.25rem; }
.c-iconContainer[data-size="24"] { --iconContainer-size: 1.5rem; }
.c-iconContainer[data-size="32"] { --iconContainer-size: 2rem; }
/* Semantic colour roles — icons take text/*, primary/*, or status/…/base. Never outline/*. */
.c-iconContainer[data-role="default"]     { --iconContainer-color: var(--Text-OnSurface); }
.c-iconContainer[data-role="variant"]     { --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-iconContainer[data-role="dim"]         { --iconContainer-color: var(--Text-OnSurfaceDim); }
.c-iconContainer[data-role="disabled"]    { --iconContainer-color: var(--Text-OnSurfaceDisabled); }
.c-iconContainer[data-role="onPrimary"]   { --iconContainer-color: var(--Text-OnPrimary); }
.c-iconContainer[data-role="active"]      { --iconContainer-color: var(--Primary-Primary); --iconContainer-fill: 1; }
.c-iconContainer[data-role="positive"]    { --iconContainer-color: var(--Status-Positive-Base); }
.c-iconContainer[data-role="alert"]       { --iconContainer-color: var(--Status-Alert-Base); }
.c-iconContainer[data-role="notice"]      { --iconContainer-color: var(--Status-Notice-Base); }
.c-iconContainer[data-role="informative"] { --iconContainer-color: var(--Status-Informative-Base); }

/* ==========================================================================
   BUTTONS — ButtonPrimary / Secondary / Tertiary / Ghost / Alert
   Size variant sets BOTH its own metrics AND --iconContainer-size, so the
   nested IconContainer resizes with the button. No icon rule is repeated
   per button family.
   ========================================================================== */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--Spacing-Space_2);
  min-inline-size: var(--Spacing-Space_16); /* Figma minWidth 64 (raw) */
  font-family: var(--font-family); letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-pill); /* Figma radius 48 (Space_12) = fully round */
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  text-box: trim-both cap alphabetic;
}
/* --- Size variants — Figma exact (padY/padX are RAW literals from Figma) ---
   S 6/14 h32 · M 8/16 h40 · L 12/22 h48 · XL 15/24 h56.
   The padding below is Figma's padY/padX minus the 1px border, because Figma
   draws the stroke INSIDE the box, so the rendered heights are 32/40/48/56
   (Figma re-read 10 Oct 2026).
   Font: S Callout.S_Bolder 14/20 · M+L Callout.M_Bolder 16/24 · XL Callout.L_Bolder 18/26.
   Icon container: S 16 · M 20 · L 24 · XL 24 (X-Large REUSES the Large 24 container). */
.c-btn[data-size="Small"]   { padding: calc(0.375rem - 1px) calc(0.875rem - 1px);  font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Bolder); --iconContainer-size:1rem; }
.c-btn[data-size="Medium"]  { padding: calc(var(--Spacing-Space_2) - 1px) calc(var(--Spacing-Space_4) - 1px);  font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); --iconContainer-size:1.25rem; }
.c-btn[data-size="Large"]   { padding: calc(var(--Spacing-Space_3) - 1px) calc(1.375rem - 1px); font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); --iconContainer-size:1.5rem; }
.c-btn[data-size="X-Large"] { padding: calc(0.9375rem - 1px) calc(var(--Spacing-Space_6) - 1px); font-size:1.125rem; line-height:1.625rem; font-weight:var(--font-Bolder); --iconContainer-size:1.5rem; }
/* --- Type variants ------------------------------------------------------
   Figma carries Size x State on ButtonPrimary / Secondary / Tertiary / Ghost.
   ButtonAlert carries a THIRD axis, Style = Filled | Outlined, and is the only
   text-button family that does (verified live on the sibling IconButtonAlert
   set, node 1:9476, 5 Sep 2026). data-style is therefore legal on
   data-type="Alert" ONLY, and omitting it is Filled.
   Every value below is variable-bound in Figma. Token values re-read live from
   node 1:9206 on 5 Sep 2026. Forced [data-state] mirrors the live pseudo-class
   so the documentation page can show a state without hovering it. */
.c-btn[data-type="Primary"]   { background: var(--Primary_Gradient); color: var(--Text-OnPrimary); --iconContainer-color: var(--Text-OnPrimary); }
.c-btn[data-type="Primary"]:is(:hover,[data-state="Hover"])    { background: var(--Status-Positive-Bold); }
.c-btn[data-type="Primary"]:is(:active,[data-state="Pressed"]) { background: var(--Status-Positive-Boldest); }
/* Secondary binds Status.Positive.Boldest for BOTH border and label at Default,
   Hover and Pressed. It is not Primary.Primary: that was a mis-extraction,
   corrected 5 Sep 2026. Only the background moves between the three states. */
.c-btn[data-type="Secondary"] { background: transparent; border-color: var(--Status-Positive-Boldest); color: var(--Status-Positive-Boldest); --iconContainer-color: var(--Status-Positive-Boldest); }
.c-btn[data-type="Secondary"]:is(:hover,[data-state="Hover"])    { background: var(--Status-Positive-Softest); }
.c-btn[data-type="Secondary"]:is(:active,[data-state="Pressed"]) { background: var(--Status-Positive-Soft); }
/* Tertiary rides the SECONDARY (teal) ramp, not a surface/outline pair. It was
   extracted as a white button with a grey outline, which matched nothing in the
   source. Corrected 5 Sep 2026. Pressed label is Base.White.0 at Small and
   Text.OnPrimary at the other three sizes; both resolve #ffffff, so the token
   role is used here for all four. */
.c-btn[data-type="Tertiary"]  { background: var(--Secondary-SecondaryFixed); border-color: transparent; color: var(--Text-OnSurfaceVariant); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-btn[data-type="Tertiary"]:is(:hover,[data-state="Hover"])     { background: var(--Secondary-SecondaryFixedDim); }
.c-btn[data-type="Tertiary"]:is(:active,[data-state="Pressed"])  { background: var(--Secondary-Secondary); color: var(--Text-OnPrimary); --iconContainer-color: var(--Text-OnPrimary); }
/* Ghost labels bind Text.OnSurfaceVariant, and its hover/pressed steps are the
   NEUTRAL status ramp, not the surface-container ramp. Corrected 5 Sep 2026. */
.c-btn[data-type="Ghost"]     { background: transparent; color: var(--Text-OnSurfaceVariant); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-btn[data-type="Ghost"]:is(:hover,[data-state="Hover"])     { background: var(--Status-Neutral-Softest); }
.c-btn[data-type="Ghost"]:is(:active,[data-state="Pressed"])  { background: var(--Status-Neutral-Soft); }
/* Alert, Style = Filled (the default). */
.c-btn[data-type="Alert"]     { background: var(--Status-Alert-Base); color: var(--Text-OnPrimary); --iconContainer-color: var(--Text-OnPrimary); }
.c-btn[data-type="Alert"]:is(:hover,[data-state="Hover"])     { background: var(--Status-Alert-Bold); }
.c-btn[data-type="Alert"]:is(:active,[data-state="Pressed"])  { background: var(--Status-Alert-Boldest); }
/* Alert, Style = Outlined. VERIFIED live 5 Sep 2026 against the component set:
   the label binds Status/Alert/Base, Bold and Boldest in step with the border,
   and Filled binds Base/White/0. The earlier "no text token" note came from an
   incomplete components.json export and was wrong. */
.c-btn[data-type="Alert"][data-style="Outlined"] { background: transparent; border-color: var(--Status-Alert-Base); color: var(--Status-Alert-Base); --iconContainer-color: var(--Status-Alert-Base); }
.c-btn[data-type="Alert"][data-style="Outlined"]:is(:hover,[data-state="Hover"])    { background: transparent; border-color: var(--Status-Alert-Bold); color: var(--Status-Alert-Bold); --iconContainer-color: var(--Status-Alert-Bold); }
.c-btn[data-type="Alert"][data-style="Outlined"]:is(:active,[data-state="Pressed"]) { background: transparent; border-color: var(--Status-Alert-Boldest); color: var(--Status-Alert-Boldest); --iconContainer-color: var(--Status-Alert-Boldest); }
/* --- Disabled state -----------------------------------------------------
   Figma does NOT share one disabled treatment. The fill is Neutral.Softest
   (not Softer), and the border differs by family: Outline.Softer for Primary,
   Tertiary, Ghost and Alert-Filled; Outline.Soft for Secondary and
   Alert-Outlined. The families with no resting fill keep none when disabled.
   The old rule collapsed all of this to one grey box with no border. */
.c-btn[data-state="Disabled"], .c-btn:disabled {
  background: var(--Status-Neutral-Softest); border-color: var(--Outline-Softer);
  color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled);
  cursor: not-allowed; pointer-events: none;
}
.c-btn[data-type="Secondary"]:is([data-state="Disabled"],:disabled),
.c-btn[data-type="Ghost"]:is([data-state="Disabled"],:disabled),
.c-btn[data-type="Alert"][data-style="Outlined"]:is([data-state="Disabled"],:disabled) {
  background: transparent;
}
.c-btn[data-type="Secondary"]:is([data-state="Disabled"],:disabled),
.c-btn[data-type="Alert"][data-style="Outlined"]:is([data-state="Disabled"],:disabled) {
  border-color: var(--Outline-Soft);
}
/* --- Skeleton state -----------------------------------------------------
   A neutral placeholder block: no label, no border, no icon. The widths are
   RAW literals from Figma (S 141 · M 158 · L 174 · XL 194); no token supplies
   them, the same way the size paddings above are raw. */
.c-btn[data-state="Skeleton"] {
  background: var(--Status-Neutral-Softest); border-color: transparent;
  color: transparent; --iconContainer-color: transparent;
  pointer-events: none; user-select: none;
}
.c-btn[data-state="Skeleton"][data-size="Small"]   { inline-size: 8.8125rem; }
.c-btn[data-state="Skeleton"][data-size="Medium"]  { inline-size: 9.875rem; }
.c-btn[data-state="Skeleton"][data-size="Large"]   { inline-size: 10.875rem; }
.c-btn[data-state="Skeleton"][data-size="X-Large"] { inline-size: 12.125rem; }
/* --- IconButton: icon only -----------------------------------------------
   Figma: radius 48 (Space_12) = circular; icon is ALWAYS 24 (Large container)
   at EVERY size — the button grows via padding, not icon. Padding per size:
   Small 8 (Space_2) · Medium 10 (raw) · Large 12 (Space_3) · X-Large 16 (Space_4). */
/* The box is set explicitly rather than left to padding + content. Two reasons:
   .c-btn carries Figma's 64 label minWidth, which would stretch an icon-only
   button into a pill; and a Material Symbols glyph's block box runs a few px
   taller than its font-size, so a padding-derived box comes out egg-shaped. */
.c-iconBtn { box-sizing:border-box; padding:0; min-inline-size:0; border-radius: var(--radius-pill); gap:0; --iconContainer-size:1.5rem; --iconBtn-box:2.5rem; inline-size:var(--iconBtn-box); block-size:var(--iconBtn-box); }
/* padding:0 repeated on every size variant (28 Aug 2026): [data-size="X"] is an
   attribute selector, so .c-btn[data-size="Large"] etc. (same specificity, but
   declared earlier, in the shared button rules above) was winning its own
   padding (e.g. 0.75rem 1.375rem) over the plain-class .c-iconBtn base rule above,
   which cannot outrank an attribute selector on specificity alone. Silent at
   Small/Medium (the icon still had a few px to breathe); at Large it consumed
   44px of horizontal padding inside a 48px box, squeezing the icon to ~2px
   wide. Found via the calc-row remove button after switching it to Large. */
.c-iconBtn[data-size="Small"]   { --iconBtn-box:2.5rem; padding:0; } /* 8 + 24 + 8 */
.c-iconBtn[data-size="Medium"]  { --iconBtn-box:2.75rem; padding:0; } /* 10 + 24 + 10 */
.c-iconBtn[data-size="Large"]   { --iconBtn-box:3rem; padding:0; } /* 12 + 24 + 12 */
.c-iconBtn[data-size="X-Large"] { --iconBtn-box:3.5rem; padding:0; } /* 16 + 24 + 16 */
/* IconButtonPrimary's resting fill is a FLAT Primary.Primary, NOT the gradient
   ButtonPrimary uses. The two primary actions genuinely do not share a resting
   colour in the source; that is a logged library contradiction, not a
   transcription error. Without this rule an icon button inherits the gradient
   from .c-btn[data-type="Primary"] and is wrong at rest. Node 1:9244,
   re-read live 5 Sep 2026. */
.c-iconBtn[data-type="Primary"] { background: var(--Primary-Primary); }
.c-iconBtn[data-type="Primary"]:is(:hover,[data-state="Hover"])    { background: var(--Status-Positive-Bold); }
.c-iconBtn[data-type="Primary"]:is(:active,[data-state="Pressed"]) { background: var(--Status-Positive-Boldest); }
/* Secondary and Tertiary icon buttons have their own fills (read live from 1:9302 and 1:9360, 10 Oct 2026); the type names are swapped against the text buttons: IconButtonSecondary is the pale teal fill, IconButtonTertiary is the grey outline. Ghost and Alert match the text-button rules. Figma draws no border on disabled Primary, Secondary, Ghost or Alert-Filled icon buttons. */
.c-iconBtn[data-type="Secondary"] { background: var(--Secondary-SecondaryFixed); border-color: transparent; color: var(--Text-OnSurfaceVariant); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-iconBtn[data-type="Secondary"]:is(:hover,[data-state="Hover"])    { background: var(--Secondary-SecondaryFixedDim); }
.c-iconBtn[data-type="Secondary"]:is(:active,[data-state="Pressed"]) { background: var(--Secondary-Secondary); }
.c-iconBtn[data-type="Tertiary"] { background: transparent; border-color: var(--Outline-Base); color: var(--Text-OnSurfaceVariant); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-iconBtn[data-type="Tertiary"]:is(:hover,[data-state="Hover"])    { background: var(--Status-Neutral-Softest); }
.c-iconBtn[data-type="Tertiary"]:is(:active,[data-state="Pressed"]) { background: var(--Status-Neutral-Softer); color: var(--Text-OnSurfaceVariant); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-btn.c-iconBtn:is([data-state="Disabled"],:disabled) { border-color: transparent; }
.c-btn.c-iconBtn[data-type="Secondary"]:is([data-state="Disabled"],:disabled) { background: var(--Status-Neutral-Softest); border-color: transparent; color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled); }
.c-btn.c-iconBtn[data-type="Tertiary"]:is([data-state="Disabled"],:disabled) { background: transparent; border-color: var(--Outline-Soft); color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled); }
.c-btn.c-iconBtn[data-type="Alert"][data-style="Outlined"]:is([data-state="Disabled"],:disabled) { border-color: var(--Outline-Soft); }

/* Skeleton is the one state whose box does NOT follow the size arithmetic:
   Figma gives 32 at Small and 40 at Medium against resting boxes of 40 and 44.
   Transcribed as read; the mismatch is the source's. Sizes are restated
   explicitly so the text-button skeleton widths above cannot win on order. */
.c-iconBtn[data-state="Skeleton"][data-size="Small"]   { --iconBtn-box:2rem;   inline-size:2rem;   block-size:2rem; }
.c-iconBtn[data-state="Skeleton"][data-size="Medium"]  { --iconBtn-box:2.5rem; inline-size:2.5rem; block-size:2.5rem; }
.c-iconBtn[data-state="Skeleton"][data-size="Large"]   { --iconBtn-box:3rem;   inline-size:3rem;   block-size:3rem; }
.c-iconBtn[data-state="Skeleton"][data-size="X-Large"] { --iconBtn-box:3.5rem; inline-size:3.5rem; block-size:3.5rem; }

/* ==========================================================================
   LINK
   ========================================================================== */
/* Figma Link uses the INFORMATIVE (blue) ramp — base -> bold on hover/press —
   NOT Primary/green, and text is REGULAR weight (Body/Metadata *_Regular). */
.c-link {
  display: inline-flex; align-items: center; gap: var(--Spacing-Space_2); /* Figma gap 8 */
  font-family: var(--font-family); color: var(--Status-Informative-Base);
  --iconContainer-color: var(--Status-Informative-Base);
  text-decoration: none; cursor: pointer; letter-spacing:0;
  text-box: trim-both cap alphabetic;
}
/* Sizes, CSS name = one step below Figma: CSS Medium = Figma Small 14/20 icon 16 (the inline default), CSS Small = Figma X-Small 12/16 icon 12. Figma Medium (16/24) has no CSS size: never add one. */
.c-link[data-size="Medium"] { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); --iconContainer-size:1rem; }
.c-link[data-size="Small"]  { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); --iconContainer-size:0.75rem; }
.c-link:hover { text-decoration: underline; color: var(--Status-Informative-Bold); --iconContainer-color: var(--Status-Informative-Bold); }
/* The hover underline sits on the link, so a flex child inherits it and the arrow gets underlined too. Only the label should be. The icon box clips its own copy of the line; the glyph fills the box, so nothing visible is cut. */
.c-link:hover > .c-iconContainer { overflow: hidden; }
.c-link[data-state="Disabled"] { color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled); pointer-events:none; }

/* ==========================================================================
   INPUTS — TextField / Select / NumberInput / TextArea / FilterAdvancedSearch
   Field fill Surface/Background/Surface · stroke Outline/Soft · focus primary/primary (Figma re-read 10 Oct 2026)
   ========================================================================== */
.c-field { display:flex; flex-direction:column; gap: var(--Spacing-Space_2); font-family: var(--font-family); }
.c-field__label { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
/* .req marks a mandatory field's label, anywhere a label appears — not just
   inside .c-field__label. See design-system-carbon's RequiredFields note. */
.req { color: var(--Status-Alert-Base); }
.c-field__helper { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); }
.c-field[data-state="Error"] .c-field__helper { color: var(--Status-Alert-Bold); }

.c-input {
  display:flex; align-items:center; gap: var(--Spacing-Space_2);
  background: var(--Surface-Background-Surface);   /* Figma field fill */
  border: 1px solid var(--Outline-Soft);           /* Figma field stroke */
  border-radius: 0.75rem;                             /* Figma Medium radius; per-size overrides below */
  color: var(--Text-OnSurface);
  --iconContainer-color: var(--Text-OnSurfaceVariant);
  transition: border-color .15s ease;
}
/* Size variant drives padding, radius, type AND nested IconContainer.
   Figma sizes are Medium/Large/X-Large (no Small); radius 12/14/16, padY raw (10/12/16).
   Icon container is 20 at every size (leading); at Medium the TRAILING container is 16
   in Figma — apply a per-instance override where a Medium field has a trailing icon.
   Small is kept as a compact extension (radius 12). */
/* Figma heights 32/40/48/56 include the 1px inside stroke, so padding is Figma's minus the 1px border. */
.c-input[data-size="Small"]   { padding: calc(var(--Spacing-Space_1) - 1px) calc(var(--Spacing-Space_3) - 1px); font-size:0.875rem; line-height:1.25rem; --iconContainer-size:1rem; border-radius:0.75rem; }
.c-input[data-size="Medium"]  { padding: calc(0.625rem - 1px) calc(var(--Spacing-Space_4) - 1px); font-size:0.875rem; line-height:1.25rem; --iconContainer-size:1.25rem; border-radius:0.75rem; }
.c-input[data-size="Large"]   { padding: calc(var(--Spacing-Space_3) - 1px) calc(var(--Spacing-Space_4) - 1px); font-size:1rem; line-height:1.5rem; --iconContainer-size:1.25rem; border-radius:0.875rem; }
.c-input[data-size="X-Large"] { padding: calc(var(--Spacing-Space_4) - 1px); font-size:1rem; line-height:1.5rem; --iconContainer-size:1.25rem; border-radius:1rem; }
.c-input:hover   { border-color: var(--Outline-Bold); }
/* Focus — matches the Figma "State=Focus" variant exactly:
   Content   = 0.0625rem INSIDE stroke  primary/primary
   Focus Ring = 0.125rem OUTSIDE stroke status/positive/translucent
   Drawn as a box-shadow so it follows border-radius. The inner control must NOT
   draw its own ring (see .c-input__control:focus-visible below) — two stacked
   green rings was the bug. */
.c-input:focus-within {
  border-color: var(--Primary-Primary);
  box-shadow: 0 0 0 2px var(--Status-Positive-Translucent);
  outline: 0;
}
/* Browser autofill paints its own blue fill over the control. Cover it with the field's own surface
   token (an inset shadow, since autofill ignores background) and keep the text on its token. */
.c-input__control:-webkit-autofill,
.c-input__control:-webkit-autofill:hover,
.c-input__control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100rem var(--Surface-Background-Surface) inset;
  -webkit-text-fill-color: var(--Text-OnSurface);
  caret-color: var(--Text-OnSurface);
  transition: background-color 600000s 0s;
}
/* Kill the global :focus-visible ring on controls nested inside a field shell —
   the shell already owns the focus treatment. */
.c-input__control:focus,
.c-input__control:focus-visible,
.c-input select:focus-visible,
.c-input textarea:focus-visible { outline: 0; box-shadow: none; }
/* Nested sub-controls (NumberInput steppers) keep a focus indicator, but a tight
   inset one — an offset ring inside a field shell reads as a second border. */
.c-input .c-stepper button:focus-visible {
  outline: 1px solid var(--Primary-Primary); outline-offset: -1px; border-radius:0.125rem;
}
.c-input[data-state="Error"]    { border-color: var(--Status-Alert-Base); }
.c-input[data-state="Disabled"] { background: var(--Status-Neutral-Softest); border-color: var(--Outline-Soft); color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled); pointer-events:none; }
.c-input__control {
  flex:1 1 auto; min-inline-size:0; border:0; background:transparent; outline:0; padding:0;
  font-family: var(--font-family); font-size:inherit; line-height:inherit;
  font-weight: var(--font-Regular); color: inherit; letter-spacing:0;
}
.c-input__control::placeholder { color: var(--Text-OnSurfacePlaceholder); }
/* Placeholder-state colour for a native <select>: ::placeholder does not
   reach a <select>'s first option, so a "Select ..." starter renders in full
   OnSurface without this. Pattern to opt in:
     <select required>
       <option value="" disabled selected hidden>Select ...</option>
       ...
     </select>
   While the empty option is selected, the control matches :required:invalid
   and paints in OnSurfacePlaceholder — matching the ::placeholder behaviour on
   text inputs. Once the reader picks any real option the value is valid and
   the text switches to OnSurface. 28 Aug 2026, Fable — the rule for every
   unpopulated input in the system. */
.c-input--select { position: relative; }
.c-input--select .c-input__control {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-inline-end: var(--iconContainer-size, 1.25rem);
}
.c-input--select .c-input__control:required:invalid { color: var(--Text-OnSurfacePlaceholder); }
/* Dropdown chevron slot. Absolutely positioned at the trailing edge so the
   select control extends fully underneath it and receives every click.
   pointer-events:none lets clicks pass through the icon to the select. */
.c-input__chevron {
  position: absolute;
  inset-inline-end: var(--Spacing-Space_4, 1rem);
  top: 50%;
  transform: translateY(-50%);
  color: var(--Text-OnSurfaceDim); --iconContainer-color: var(--Text-OnSurfaceDim);
  pointer-events: none;
}
/* 20 Oct 2026, Fable: the Select draws Arrow_Down_Ios in a 16 box (Figma Select, IconContainer 16) whatever data-size the markup carries, so a chevron
   placed at 20 or 24 no longer reads off size. It swaps to Arrow_Up_Ios while the list is open. :open is the browser's own state where it has one;
   js/select_chevron.js sets data-open where it does not. Two rules, not one list: a browser that does not know :open would drop the whole rule. */
.c-input__chevron.c-iconContainer { --iconContainer-size: 1rem; }
.c-input--select[data-open] .c-input__chevron .icon--arrow-down-ios { -webkit-mask-image: var(--icon-arrow-up-ios); mask-image: var(--icon-arrow-up-ios); }
.c-input--select:has(select:open) .c-input__chevron .icon--arrow-down-ios { -webkit-mask-image: var(--icon-arrow-up-ios); mask-image: var(--icon-arrow-up-ios); }
.c-input__value { flex:1 1 auto; min-inline-size:0; font-weight:var(--font-Regular); }
.c-input__value[data-populated="False"] { color: var(--Text-OnSurfacePlaceholder); }
.c-input--textarea { align-items:flex-start; position:relative; }
.c-input--textarea .c-input__control { resize:vertical; min-block-size:5.5rem; }
/* 22 Oct 2026, Fable: the textarea's character count (Figma 1:18698), "n/max" at the bottom right inside the box. It sits clear of the
   corner so the resize handle never covers it, and the control gains bottom padding so typed text never runs under it.
   Markup: .c-input--textarea > textarea.c-input__control + span.c-input__count */
.c-input__count { position:absolute; inset-block-end:var(--Spacing-Space_2); inset-inline-end:var(--Spacing-Space_8); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); pointer-events:none; font-family:var(--font-family); }
.c-input--textarea:has(.c-input__count) .c-input__control { padding-block-end: var(--Spacing-Space_6); }
/* Multi-select chips live inside the field */
.c-input__chips { display:flex; align-items:center; gap: var(--Spacing-Space_1); flex-wrap:wrap; flex:1 1 auto; }
/* NumberInput stepper */
.c-stepper { display:flex; flex-direction:column; gap:0; }
.c-stepper button { border:0; background:transparent; cursor:pointer; padding:0; display:flex; --iconContainer-size:0.75rem; }

/* Search / FilterAdvancedSearch — pill field with leading search icon */
.c-search { border-radius: var(--radius-pill); }
.c-search[data-dropdown="True"] .c-search__divider { inline-size:0.0625rem; align-self:stretch; background: var(--Outline-Soft); }

/* ==========================================================================
   SELECTION CONTROLS — Checkbox / Radio / RadioGroup / Toggle
   Selected fill primary/primary · unselected ring outline/base · mark onPrimary
   ========================================================================== */
.c-choice { display:inline-flex; align-items:flex-start; gap: var(--Spacing-Space_3); font-family: var(--font-family); cursor:pointer; }

/* Two independent axes, mirroring the Figma props Check x State (node 1:10768).
   data-check = On | Off | Indeterminate      data-state = Hover | Pressed | Disabled
   Omitting data-state is the Default state. Live :hover / :active share the same
   declarations as the forced documentation states. */
.c-choice__box, .c-choice__radio {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  inline-size: var(--choice-size, 1.25rem); block-size: var(--choice-size, 1.25rem);
  background: var(--Surface-Background-Surface);
  border: 2px solid var(--Outline-Soft);
  --iconContainer-size: calc(var(--choice-size, 1.25rem) - 0.25rem);
  --iconContainer-color: var(--Text-OnPrimary);
  transition: background .12s ease, border-color .12s ease;
}
.c-choice__box   { border-radius: var(--choice-radius, var(--radius-sm)); }
.c-choice__radio { border-radius: var(--radius-pill); }
/* Radius is per size in Figma, 4px @16, 6px @20: --radius-control (4px) and --radius-sm (6px) now carry these values (Figma re-read 10 Oct 2026). */
.c-choice[data-size="Small"]  { --choice-size:1rem; --choice-radius: var(--radius-control); --choice-dot:0.25rem; }
.c-choice[data-size="Medium"] { --choice-size:1.25rem; --choice-radius: var(--radius-sm); --choice-dot:0.375rem; }
.c-choice[data-size="Large"]  { --choice-size:1.5rem; --choice-radius: var(--radius-sm); }

/* RadioButton names this step State=Active where Checkbox names it Pressed, so
   data-state="Active" is accepted here too. In the source, RadioButton's Active
   reuses the exact Hover asset and the two are pixel-identical, so it is mapped
   to Hover rather than to Pressed. Transcribed as read; the collision is a
   logged library defect, not a correction made here. */
/* ---- Off: only the ring moves ---------------------------------------- */
.c-choice:not([data-state="Disabled"]):is(:hover,[data-state="Hover"],[data-state="Active"]) :is(.c-choice__box,.c-choice__radio) {
  border-color: var(--Primary-Primary);
}
.c-choice:not([data-state="Disabled"]):is(:active,[data-state="Pressed"]) :is(.c-choice__box,.c-choice__radio) {
  border-color: var(--Outline-Base);
}

/* ---- On / Indeterminate: fill and ring move together ------------------ */
.c-choice:is([data-check="On"],[data-check="Indeterminate"]) :is(.c-choice__box,.c-choice__radio) {
  background: var(--Primary-Primary); border-color: var(--Primary-Primary);
}
.c-choice:is([data-check="On"],[data-check="Indeterminate"]):not([data-state="Disabled"]):is(:hover,[data-state="Hover"],[data-state="Active"]) :is(.c-choice__box,.c-choice__radio) {
  background: var(--Status-Positive-Bold); border-color: var(--Status-Positive-Bold);
}
.c-choice:is([data-check="On"],[data-check="Indeterminate"]):not([data-state="Disabled"]):is(:active,[data-state="Pressed"]) :is(.c-choice__box,.c-choice__radio) {
  background: var(--Status-Positive-Boldest); border-color: var(--Status-Positive-Boldest);
}

/* ---- Radio dot -------------------------------------------------------- */
.c-choice__radio::after { content:''; inline-size:0; block-size:0; border-radius:var(--radius-pill); background: var(--Text-OnPrimary); transition: inline-size .12s ease, block-size .12s ease; }
.c-choice[data-check="On"] .c-choice__radio::after { inline-size: var(--choice-dot, 0.375rem); block-size: var(--choice-dot, 0.375rem); }

/* ---- Disabled: distinct fills per check state ------------------------- */
.c-choice[data-state="Disabled"] { cursor:not-allowed; pointer-events:none; }
.c-choice[data-state="Disabled"] :is(.c-choice__box,.c-choice__radio) {
  background: var(--Status-Neutral-Softest);
  border-color: var(--Surface-SurfaceContainer-SurfaceContainer);
}
.c-choice[data-state="Disabled"]:is([data-check="On"],[data-check="Indeterminate"]) :is(.c-choice__box,.c-choice__radio) {
  background: var(--Status-Positive-Soft); border-color: var(--Status-Positive-Soft);
  --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-choice[data-state="Disabled"][data-check="On"] .c-choice__radio::after { background: var(--Text-OnPrimary); }
.c-choice[data-state="Disabled"] .c-choice__labelGroup { color: var(--Text-OnSurfaceDisabled); }
.c-choice__labelGroup { display:flex; flex-direction:column; gap: var(--Spacing-Space_0); }
.c-choice__label { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurface); }
.c-choice__meta  { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-choice[data-size="Small"] .c-choice__meta   { font-size:0.625rem; line-height:0.875rem; }
.c-choice[data-size="Medium"] .c-choice__label { font-size:1rem; line-height:1.5rem; }
.c-radioGroup { display:flex; gap: var(--Spacing-Space_4); }
.c-radioGroup[data-stack="Vertical"]   { flex-direction:column; gap: var(--Spacing-Space_3); }
.c-radioGroup[data-stack="Horizontal"] { flex-direction:row; }
.c-radioGroup[data-stack="Horizontal"] { gap: var(--Spacing-Space_6); }

/* Toggle — Figma Medium: track 36x20 (raw), knob 16, padding 2, travel 16.
   Off track = Outline.Soft · On = Primary.Primary · Disabled(off) = Surface.SurfaceContainer.SurfaceContainer. */
.c-toggle { display:inline-flex; align-items:center; gap: var(--Spacing-Space_3); cursor:pointer; font-family:var(--font-family); }
.c-toggle__track {
  inline-size:2.25rem; block-size:1.25rem; border-radius: var(--radius-pill);
  background: var(--Outline-Soft); padding: var(--space-offgrid-2); display:flex; align-items:center;
  transition: background .15s ease;
}
.c-toggle__thumb { inline-size:1rem; block-size:1rem; border-radius:var(--radius-pill); background: var(--Surface-SurfaceContainer-SurfaceContainerLowest); box-shadow: none; transition: transform .15s ease; }
.c-toggle[data-state="On"] .c-toggle__track { background: var(--Primary-Primary); }
.c-toggle[data-state="On"] .c-toggle__thumb { transform: translateX(1rem); }
.c-toggle[data-state="Disabled"] .c-toggle__track { background: var(--Surface-SurfaceContainer-SurfaceContainer); pointer-events:none; }
.c-toggle__label { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurface); }
.c-toggle__meta  { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }

/* ==========================================================================
   CARD
   ========================================================================== */
.c-card {
  display:flex; flex-direction:column; gap: var(--Spacing-Space_3);
  padding: var(--Spacing-Space_6);   /* 24. Never Space_5: 20 is the only ramp
                                        step that is not a multiple of 8. */
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest);
  border: 1px solid var(--Outline-Soft);
  border-radius: var(--Card-RoundedCorner);
  font-family: var(--font-family);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.c-card[data-elevation="Level1"] { box-shadow: var(--Shadow-Level1); border-color: transparent; }
.c-card[data-elevation="Level2"] { box-shadow: var(--Shadow-Level2); border-color: transparent; }
/* Selected card: status/positive/softest fill + primary/primary stroke */
.c-card[data-state="Selected"] { background: var(--Status-Positive-Softest); border-color: var(--Primary-Primary); }
.c-card__title { font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-card__body  { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-card__row   { display:flex; align-items:flex-start; gap: var(--Spacing-Space_3); }
.c-card__foot  { display:flex; align-items:center; justify-content:space-between; gap: var(--Spacing-Space_3); margin-block-start:auto; }

/* ==========================================================================
   TAG / BADGE — status/* families
   ========================================================================== */
/* Tag — Figma: rounded-RECT (radius 8 Medium / 6 Small), REGULAR weight (NOT a bold pill).
   Medium: pad 4/10, gap 6, icon 16, Body.S_Regular 14/20.
   Small:  pad 4/8,  gap 4, icon 12 (X-Small), Metadata.L_Regular 12/16. */
.c-tag {
  display:inline-flex; align-items:center; gap: var(--space-offgrid-6);
  font-family: var(--font-family); font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular);
  padding: calc(var(--Spacing-Space_1) - 1px) calc(0.625rem - 1px); border-radius: var(--Spacing-Space_2); /* Figma pad minus the 1px border: stroke is inside, 28 tall */
  border:1px solid transparent; --iconContainer-size:1rem;
}
.c-tag[data-size="Small"] { font-size:0.75rem; line-height:1rem; gap: var(--Spacing-Space_1); padding: calc(var(--Spacing-Space_1) - 1px) calc(var(--Spacing-Space_2) - 1px); border-radius: var(--radius-sm); --iconContainer-size:0.75rem; }
/* Colours re-derived from Figma DesignSystem_Carbon > Tag (node 37209:98818,
   read 25 Aug 2026) after Vaibhav flagged that the tags rendered borderless.
   EVERY colour carries a 1px border except Customisable; the previous rules set
   a border-colour on White only, and Grey's fill and text were a step off.
   Per variant: background / border / text.
     White        Lowest              / Neutral-Softer     / OnSurfaceVariant
     Grey         Neutral-Softest     / Neutral-Softer     / OnSurfaceVariant
     Green        Positive-Softest    / Positive-Soft      / Positive-Boldest
     Blue         Informative-Softest / Informative-Soft   / Informative-Bold
     Red          Alert-Softest       / Alert-Softer       / Alert-Base
     Orange       Notice-Softest      / Notice-Soft        / Notice-Bold
     Customisable Text-OnSurface      / transparent        / Base-White-0
   NB the Figma column header reads "Purple" over the Blue variant and its row
   labels read X-Small/Small over Size=Small/Medium — labelling slips in the
   file, not real variants. Yellow below is not in the Figma set; left in place
   rather than removed. */
.c-tag[data-colour="White"]  { background: var(--Surface-SurfaceContainer-SurfaceContainerLowest); border-color: var(--Status-Neutral-Softer); color: var(--Text-OnSurfaceVariant); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-tag[data-colour="Grey"]   { background: var(--Status-Neutral-Softest); border-color: var(--Status-Neutral-Softer); color: var(--Text-OnSurfaceVariant);  --iconContainer-color: var(--Status-Neutral-Base); }
.c-tag[data-colour="Green"]  { background: var(--Status-Positive-Softest); border-color: var(--Status-Positive-Soft); color: var(--Status-Positive-Boldest); --iconContainer-color: var(--Status-Positive-Base); }
.c-tag[data-colour="Blue"]   { background: var(--Status-Informative-Softest); border-color: var(--Status-Informative-Soft); color: var(--Status-Informative-Bold); --iconContainer-color: var(--Status-Informative-Base); }
.c-tag[data-colour="Red"]    { background: var(--Status-Alert-Softest); border-color: var(--Status-Alert-Softer);   color: var(--Status-Alert-Base);   --iconContainer-color: var(--Status-Alert-Base); }
.c-tag[data-colour="Orange"] { background: var(--Status-Notice-Softest); border-color: var(--Status-Notice-Soft);  color: var(--Status-Notice-Bold);  --iconContainer-color: var(--Status-Notice-Base); }
.c-tag[data-colour="Customisable"] { background: var(--Text-OnSurface); border-color: transparent; color: var(--Base-White-0); --iconContainer-color: var(--Base-White-0); }
.c-tag[data-colour="Yellow"] { background: var(--Status-NoticeAlt-Softest);color: var(--Status-NoticeAlt-Bold);  --iconContainer-color: var(--Status-NoticeAlt-Bold); }
.c-tag__dismiss { border:0; background:transparent; padding:0; cursor:pointer; display:flex; color:inherit; --iconContainer-color:currentColor; }
/* Badge: Figma 1px inside knock-out ring in the page surface colour (same pattern as .c-avatar__status), padding 6 (offgrid), 12/16 label (Figma re-read 10 Oct 2026). */
.c-badge { box-sizing:border-box; border:1px solid var(--Surface-Background-Surface); min-inline-size:1.25rem; block-size:1.25rem; padding:0 var(--space-offgrid-6); display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); background: var(--Status-Alert-Base); color: var(--Text-OnPrimary);
  font-family:var(--font-family); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Bolder); }

/* ==========================================================================
   BANNER / feedback
   Default status is Neutral (Figma re-read 10 Oct 2026): Neutral/Softest fill,
   Neutral/Soft stroke, padded Space_4. A data-status recolours fill, stroke
   (Soft step), label and icon. Title 16/24, body 14/20, 8 between them.
   ========================================================================== */
.c-banner {
  display:flex; align-items:center; gap: var(--Spacing-Space_2); /* Figma gap 8 */
  padding: calc(var(--Spacing-Space_4) - 1px); border-radius: var(--Card-RoundedCorner); /* Figma radius 16 (Space_4); padding minus the 1px border, stroke is inside */
  border:1px solid var(--Status-Neutral-Soft); background: var(--Status-Neutral-Softest); color: var(--Status-Neutral-Boldest); font-family: var(--font-family);
  --iconContainer-size:1.25rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-banner[hidden] { display:none !important; }
.c-banner .c-iconContainer > .material-symbols-rounded { block-size: var(--iconContainer-size); } /* 12 Oct 2026: glyph box was 24px in a 20px container and sat low next to the text; pinned to the container so it centres on the line */
.c-banner__title { font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); }
.c-banner__body  { margin:0; text-box: trim-both cap alphabetic; /* 12 Oct 2026: centre the cap height, not the line box, so the text sits level with the icon */ font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: inherit; }
.c-banner__title + .c-banner__body { margin-block-start: var(--Spacing-Space_2); }
.c-banner[data-status="positive"]    { background: var(--Status-Positive-Softest);    border-color: var(--Status-Positive-Soft);    color: var(--Status-Positive-Boldest);    --iconContainer-color: var(--Status-Positive-Base); }
.c-banner[data-status="alert"]       { background: var(--Status-Alert-Softest);       border-color: var(--Status-Alert-Soft);       color: var(--Status-Alert-Boldest);       --iconContainer-color: var(--Status-Alert-Base); }
.c-banner[data-status="notice"]      { background: var(--Status-Notice-Softest);      border-color: var(--Status-Notice-Soft);      color: var(--Status-Notice-Boldest);      --iconContainer-color: var(--Status-Notice-Base); }
.c-banner[data-status="informative"] { background: var(--Status-Informative-Softest); border-color: var(--Status-Informative-Soft); color: var(--Status-Informative-Bold);    --iconContainer-color: var(--Status-Informative-Base); }

/* ==========================================================================
   NAVIGATION — NavigationSide / NavigationTop / Tabs / SegmentedControl
   ========================================================================== */
.c-navSide {
  inline-size:4.5rem; display:flex; flex-direction:column; align-items:center;
  gap: var(--Spacing-Space_2); padding: var(--Spacing-Space_3);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest);
  border-inline-end:1px solid var(--Outline-Soft);
  border-radius: var(--Card-RoundedCorner);
}
.c-navSide__item {
  inline-size:2.75rem; block-size:2.75rem; display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius-control); cursor:pointer; border:0; background:transparent;
  --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
  transition: background .15s ease;
}
.c-navSide__item:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerHigh); }
.c-navSide__item[data-state="Active"] { background: var(--Status-Positive-Softest); --iconContainer-color: var(--Primary-Primary); --iconContainer-fill:1; }
.c-navSide__spacer { flex:1 1 auto; }

.c-tabs { display:flex; gap: var(--Spacing-Space_2); border-block-end:1px solid var(--Outline-Soft); font-family:var(--font-family); }
.c-tabs__tab {
  display:inline-flex; align-items:center; gap: var(--Spacing-Space_2);
  padding: var(--Spacing-Space_3) var(--Spacing-Space_4) calc(var(--Spacing-Space_4) - var(--space-offgrid-2)); border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular);
  color: var(--Text-OnSurfaceVariant); --iconContainer-size:1.25rem;
  border-block-end:2px solid transparent; margin-block-end:-1px;
}
.c-tabs__tab[data-state="Active"] { color: var(--Primary-Primary); font-weight: var(--font-Bolder); border-block-end-color: var(--Primary-Primary); --iconContainer-color: var(--Primary-Primary); }
.c-tabs[data-size="Small"] .c-tabs__tab { padding: var(--Spacing-Space_2) var(--Spacing-Space_3); font-size:0.75rem; line-height:1rem; --iconContainer-size:1rem; }
.c-tabs[data-size="Medium"] .c-tabs__tab { font-size:1rem; line-height:1.5rem; --iconContainer-size:1.5rem; }
/* Pill and Subtle types, Figma Tabs 1:16798 (Pill is Figma's default type; Underlined stays the unattributed CSS default). */
.c-tabs:is([data-type="Pill"],[data-type="Subtle"]) { border-block-end:0; padding-block: var(--Spacing-Space_3); }
.c-tabs:is([data-type="Pill"],[data-type="Subtle"]) .c-tabs__tab { padding: var(--Spacing-Space_2) var(--Spacing-Space_4); border-radius: var(--radius-pill); border-block-end:0; margin-block-end:0; color: var(--Text-OnSurface); }
.c-tabs[data-type="Pill"] .c-tabs__tab { background: var(--Status-Neutral-Softest); }
.c-tabs[data-type="Pill"] .c-tabs__tab:hover { background: var(--Status-Neutral-Softer); }
.c-tabs[data-type="Pill"] .c-tabs__tab[data-state="Active"] { background: var(--Primary-Primary); color: var(--Text-InverseOnSurface); font-weight: var(--font-Bolder); }
.c-tabs[data-type="Subtle"] .c-tabs__tab { background: transparent; color: var(--Text-OnSurfaceVariant); }
.c-tabs[data-type="Subtle"] .c-tabs__tab:hover { background: var(--Status-Neutral-Softest); }
.c-tabs[data-type="Subtle"] .c-tabs__tab[data-state="Active"] { background: var(--Status-Neutral-Softest); color: var(--Text-OnSurface); font-weight: var(--font-Bolder); }

/* SegmentedControl. Figma: container radius 12 (Medium) / 16 (Large), gap 8, fill SurfaceContainerLow.
   Every segment sits on Surface/Background/Surface with an inset 1px Outline/Softer ring (inset, so the
   box does not grow), radius --radius-md, pad 6/8. ACTIVE swaps the ring for an inset 2px Primary ring
   and a green (Primary) label, on the same Surface/Background/Surface fill (Figma re-read 10 Oct 2026). */
.c-segmented { display:inline-flex; padding: var(--Spacing-Space_1); gap: var(--Spacing-Space_2);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLow); border-radius: var(--Spacing-Space_3); font-family:var(--font-family); }
.c-segmented[data-size="Large"] { border-radius: var(--Spacing-Space_4); }
.c-segmented__seg { border:0; cursor:pointer; background: var(--Surface-Background-Surface); box-shadow: inset 0 0 0 1px var(--Outline-Softer); border-radius: var(--radius-md);
  padding: var(--space-offgrid-6) var(--Spacing-Space_2); font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Bolder);
  color: var(--Text-OnSurfaceVariant); --iconContainer-size:1rem; }
.c-segmented__seg[data-state="Active"] { background: var(--Surface-Background-Surface); box-shadow: inset 0 0 0 2px var(--Primary-Primary); color: var(--Primary-Primary); --iconContainer-color: var(--Primary-Primary); }
.c-segmented[data-size="Large"] .c-segmented__seg { padding: var(--Spacing-Space_2); border-radius: var(--Spacing-Space_3); font-size:1rem; line-height:1.5rem; --iconContainer-size:1.25rem; }

/* ==========================================================================
   DIVIDER
   ========================================================================== */
.c-divider { border:0; margin:0; background: var(--Outline-Soft); }
.c-divider[data-orientation="Horizontal"] { block-size:0.0625rem; inline-size:100%; }
.c-divider[data-orientation="Vertical"]   { inline-size:0.0625rem; align-self:stretch; }
.c-divider[data-type="Dashed"] { background: transparent; border-block-start:1px dashed var(--Outline-Base); block-size:0; }

/* ==========================================================================
   MEDIA — ImageContainer / ThumbnailCircular / ThumbnailSquircle
   Mandatory for every image, logo slot, chart placeholder or empty media area.
   ========================================================================== */
.c-imageContainer {
  inline-size:100%; display:flex; align-items:center; justify-content:center;
  background: var(--Status-Neutral-Softest);
  border-radius: var(--Card-RoundedCorner); overflow:hidden;
  --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceDim);
}
.c-imageContainer[data-ratio="2:1"]  { aspect-ratio: 2 / 1; }
.c-imageContainer[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.c-imageContainer[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.c-imageContainer[data-state="Loading"] {
  background: linear-gradient(90deg, var(--Status-Neutral-Softest) 25%, var(--Status-Neutral-Softer) 37%, var(--Status-Neutral-Softest) 63%);
  background-size: 400% 100%; animation: c-shimmer 1.4s ease infinite;
}
.c-imageContainer[data-state="Empty"] { border:1px dashed var(--Outline-Base); background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
@keyframes c-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

.c-thumb { display:inline-flex; align-items:center; justify-content:center; position:relative; flex:0 0 auto;
  background: var(--Status-Neutral-Softest); overflow:hidden;
  inline-size: var(--thumb-size,3rem); block-size: var(--thumb-size,3rem);
  --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-thumb[data-shape="Circular"] { border-radius: var(--radius-pill); }
.c-thumb[data-shape="Squircle"] { border-radius: var(--thumb-radius, 0.75rem); } /* Figma per-size radius */
.c-thumb[data-outline="Yes"] { border:1px solid var(--Outline-Soft); }
/* Figma Squircle radius / icon container per box size (icon per ThumbnailCircular): */
.c-thumb[data-size="32x32"]   { --thumb-size:2rem;  --thumb-radius:0.5rem;  --iconContainer-size:1rem; }
.c-thumb[data-size="48x48"]   { --thumb-size:3rem;  --thumb-radius:0.75rem; --iconContainer-size:1.25rem; }
.c-thumb[data-size="56x56"]   { --thumb-size:3.5rem;  --thumb-radius:1rem; --iconContainer-size:1.5rem; }
.c-thumb[data-size="80x80"]   { --thumb-size:5rem;  --thumb-radius:1.25rem; --iconContainer-size:2rem; }
.c-thumb[data-size="104x104"] { --thumb-size:6.5rem; --thumb-radius:1.5rem; --iconContainer-size:2rem; }
.c-thumb[data-size="144x144"] { --thumb-size:9rem; --thumb-radius:1.75rem; --iconContainer-size:2rem; }
.c-thumb[data-size="160x160"] { --thumb-size:10rem; --thumb-radius:2rem; --iconContainer-size:2rem; }
.c-thumb__badge { position:absolute; inset-block-end:0; inset-inline-end:0; inline-size:0.75rem; block-size:0.75rem;
  border-radius:var(--radius-pill); background: var(--Status-Positive-Base); border:2px solid var(--Surface-SurfaceContainer-SurfaceContainerLowest); }

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.c-progress { inline-size:100%; block-size:0.5rem; border-radius:var(--radius-pill); background: var(--Surface-SurfaceContainer-SurfaceContainerHighest); overflow:hidden; }
.c-progress[data-size="Small"] { block-size:0.25rem; }
.c-progress[data-size="Medium"] { block-size:0.5rem; }
.c-progress__bar { block-size:100%; background: var(--Primary-Primary); border-radius:var(--radius-pill); }
.c-skeleton { background: var(--Status-Neutral-Softest); border-radius: var(--radius-control); block-size:0.75rem; }

/* ==========================================================================
   BREADCRUMB
   Navigation pattern showing hierarchy and location. Links use the
   informative/link colour; the current page is neutral and non-interactive.
   Separator defaults to a slash; set data-separator="Chevron" on .c-breadcrumb
   for the chevron variant. Figma: DesignSystem_Carbon 37209:98831.
   ========================================================================== */
.c-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:var(--Spacing-Space_2);
  font-family:var(--font-family); font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); letter-spacing:0; }
.c-breadcrumb__item { display:inline-flex; align-items:center; }
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content:"/"; margin-inline-end:var(--Spacing-Space_2); color: var(--Text-OnSurfaceVariant);
  display:inline-flex; align-items:center; justify-content:center; inline-size: var(--icon-size-16); block-size: var(--icon-size-16); }
.c-breadcrumb[data-separator="Chevron"] .c-breadcrumb__item + .c-breadcrumb__item::before { content:"\203A"; }
.c-breadcrumb__link { color: var(--Status-Informative-Base); text-decoration:none; cursor:pointer; padding-block: var(--space-offgrid-6); }
.c-breadcrumb__link:hover { text-decoration:underline; color: var(--Status-Informative-Bold); }
.c-breadcrumb__current { color: var(--Text-OnSurfaceDim); }

/* ==========================================================================
   TABLE  (TableCell / TableHeaderElement)
   Carbon table primitive. Markup is a semantic <table class="c-table">; every
   cell carries the TableCell treatment. Header cells (Type=Header) take the
   SurfaceContainerLow fill and the Metadata/L_Bolder label; body cells
   (Type=Row) take Body/03 text. Row separation is the cell's own 1px
   Outline/Softer bottom stroke — never a Divider. A table always sits inside a
   card, so the cell fill is transparent by default and the card supplies the
   surface. States: Hover, Selected. Column width/alignment is declared once via
   <colgroup> or a utility on the header cell, never per body cell.
   Figma: DesignSystem_Carbon 37209:98816 (TableCell / TableHeaderElement).
   ========================================================================== */
.c-table { inline-size:100%; border-collapse:collapse; font-family:var(--font-family); }

/* Cell — the shared TableCell container (Type=Row is the default). */
.c-table th,
.c-table td,
.c-table__cell {
  padding: var(--Spacing-Space_3) var(--Spacing-Space_4);   /* 12 / 16 */
  text-align:start; white-space:nowrap; vertical-align:middle;
  border-block-end:1px solid var(--Outline-Softer);         /* row rule */
  color: var(--Text-OnSurface);
  font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular);  /* Body/03 */
  background:transparent;
}

/* Header cell — Type=Header. Callout/S_Bolder label, low-surface fill, 40 tall.
   Size and line-height are inherited from the shared cell rule above, so a
   header is the same 14/20 as the rows and differs only in weight. */
.c-table thead th,
.c-table__cell--header {
  padding: 0 var(--Spacing-Space_4); block-size:2.5rem;
  background: var(--Surface-SurfaceContainer-SurfaceContainerLow);
  color: var(--Text-OnSurfaceVariant);
  font-weight:var(--font-Bolder);  /* Callout/S_Bolder */
}

/* Body rows — 48 tall (single-line), Hover and Selected states. */
.c-table tbody td { block-size:3rem; }
.c-table tbody td { color: var(--Text-OnSurfaceVariant); }
.c-table tbody tr:hover td { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
.c-table tbody tr[data-state="Selected"] td,
.c-table__cell[data-state="Selected"] { background: var(--Status-Positive-Translucent); }

/* Placeholder / empty-value text. */
.c-table__cell--placeholder,
.c-table td.placeholder { color: var(--Text-OnSurfacePlaceholder); }

/* Numeric columns align to the end; set on the header/colgroup, inherited down. */
.c-table__cell--num,
.c-table [data-align="end"] { text-align:end; }

/* ============================================================================
   ADDED 2026-08-20 — components present in the Figma library (fileKey
   oe8pql0zcUWZarv2HwU7L1) but previously absent from this file:
   Dropdown / DropdownItem · Tooltip · Pagination / PaginationPageNumber ·
   Notification · Modal.
   ----------------------------------------------------------------------------
   Token intent is taken from the design-system rules (the single source of
   truth) and geometry follows the sibling components already in this file
   (inputs, buttons, card, banner). Exact per-node geometry for these five
   (Dropdown, Tooltip, Pagination, Notification, Modal) was re-read from their
   Figma nodes on 10 Oct 2026 and is applied below.
   ========================================================================== */

/* ==========================================================================
   DROPDOWN / DropdownItem
   A Select-style trigger (reuses the .c-input field shell) that opens a menu
   of DropdownItem rows. Menu surface = Surface/Background/Surface, Shadow Level 2,
   no stroke, radius Card/RoundedCorner. Item = 40 tall, radius 12, icon 16.
   Selected item = Surface fill + inset 1px Status/Positive/Bold ring, OnSurface
   Regular label; hover = SurfaceContainerHigh (Selected hover = SurfaceContainerLow).
   Disabled = Neutral/Softest fill. Section header row via data-type="SectionHeader"
   (Figma re-read 10 Oct 2026).
   Markup: .c-dropdown > (.c-input trigger) + .c-dropdown__menu > .c-dropdownItem*
   ========================================================================== */
.c-dropdown { position:relative; display:inline-flex; flex-direction:column; font-family:var(--font-family); }
.c-dropdown__menu {
  position:absolute; inset-block-start:calc(100% + var(--Spacing-Space_1)); inset-inline:0; z-index:20;
  display:flex; flex-direction:column; gap:var(--Spacing-Space_0);
  padding: var(--Spacing-Space_1);
  background: var(--Surface-Background-Surface);
  border:0; border-radius: var(--Card-RoundedCorner);
  box-shadow: var(--Shadow-Level2);
  max-block-size:17.5rem; overflow-y:auto;
}
.c-dropdown__menu[data-open="False"] { display:none; }
.c-dropdownItem {
  display:flex; align-items:center; gap:var(--Spacing-Space_2);
  padding: var(--Spacing-Space_2) var(--Spacing-Space_3); border:0; background:transparent; cursor:pointer;
  border-radius: var(--Spacing-Space_3); min-block-size: var(--Spacing-Space_10); text-align:start; width:100%;
  font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular);
  color: var(--Text-OnSurface); --iconContainer-size:1rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
  transition: background .12s ease, color .12s ease;
}
.c-dropdownItem__label { flex:1 1 auto; min-inline-size:0; padding-inline-end: var(--Spacing-Space_1); }
.c-dropdownItem:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerHigh); }
.c-dropdownItem[data-state="Selected"] {
  background: var(--Surface-Background-Surface); box-shadow: inset 0 0 0 1px var(--Status-Positive-Bold);
  color: var(--Text-OnSurface); font-weight: var(--font-Regular);
}
.c-dropdownItem[data-state="Selected"]:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
.c-dropdownItem[data-state="Disabled"] {
  background: var(--Status-Neutral-Softest);
  color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled);
  cursor:not-allowed; pointer-events:none;
}
.c-dropdownItem[data-type="SectionHeader"] { padding: var(--Spacing-Space_3) var(--Spacing-Space_3) var(--Spacing-Space_1) var(--Spacing-Space_2); font-size:0.75rem; line-height:1rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfaceDim); cursor: default; background: transparent; }

/* ==========================================================================
   TOOLTIP
   Inverse dark bubble carrying a short label above/below its trigger. Uses the
   neutral-dark step (Status/Neutral/Boldest) so it flips with mode, and
   Text/InverseOnSurface for the label. Optional arrow via ::after; side is set
   with data-side. Status variants recolour the bubble to a Status family.
   Markup: .c-tooltip[data-side] > text  (position the wrapper yourself)
   ========================================================================== */
.c-tooltip {
  display:inline-flex; align-items:center; max-inline-size:12.5rem;
  padding: var(--space-offgrid-6) var(--Spacing-Space_2);
  background: var(--Status-Neutral-Boldest); color: var(--Text-InverseOnSurface);
  border-radius: var(--Spacing-Space_2);
  font-family:var(--font-family); font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular);
  box-shadow: var(--Shadow-Level2); position:relative;
}
.c-tooltip::after {
  content:''; position:absolute; inline-size:0.5rem; block-size:0.5rem; rotate:45deg;
  background:inherit;
}
.c-tooltip[data-side="top"]::after    { inset-block-end:-0.1875rem; inset-inline-start:calc(50% - 0.25rem); }
.c-tooltip[data-side="bottom"]::after { inset-block-start:-0.1875rem; inset-inline-start:calc(50% - 0.25rem); }
.c-tooltip[data-side="left"]::after   { inset-inline-end:-0.1875rem;  inset-block-start:calc(50% - 0.25rem); }
.c-tooltip[data-side="right"]::after  { inset-inline-start:-0.1875rem; inset-block-start:calc(50% - 0.25rem); }
.c-tooltip[data-status="informative"] { background: var(--Status-Informative-Base); color: var(--Text-OnPrimary); }
.c-tooltip[data-status="alert"]       { background: var(--Status-Alert-Base);       color: var(--Text-OnPrimary); }
.c-tooltip[data-status="positive"]    { background: var(--Status-Positive-Bold);    color: var(--Text-OnPrimary); }

/* ==========================================================================
   PAGINATION / PaginationPageNumber
   Row of page-number buttons plus prev/next controls, sitting in a table
   card footer. Page number = 32x32, pill radius, hover SurfaceContainerLow,
   current page = Primary fill + InverseOnSurface label (Figma re-read 10 Oct 2026).
   Prev/Next reuse the icon-only treatment; disabled greys out.
   Markup: .c-pagination > (.c-pagination__nav | .c-pagination__page)* [+ .c-pagination__size]
   ========================================================================== */
.c-pagination { display:inline-flex; align-items:center; gap: var(--Spacing-Space_1); font-family:var(--font-family); }
.c-pagination__page, .c-pagination__nav {
  display:inline-flex; align-items:center; justify-content:center;
  min-inline-size:2rem; block-size:2rem; padding:0 var(--Spacing-Space_2);
  border:0; background:transparent; cursor:pointer; border-radius: var(--radius-pill);
  font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular);
  color: var(--Text-OnSurfaceVariant); --iconContainer-size:1.25rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
  transition: background .12s ease, color .12s ease;
}
.c-pagination__page:hover, .c-pagination__nav:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
.c-pagination__page[data-state="Active"] {
  background: var(--Primary-Primary); color: var(--Text-InverseOnSurface); font-weight:var(--font-Bolder);
}
.c-pagination__page[data-state="Disabled"], .c-pagination__nav[data-state="Disabled"], .c-pagination :disabled {
  color: var(--Text-OnSurfaceDisabled); --iconContainer-color: var(--Text-OnSurfaceDisabled);
  cursor:not-allowed; pointer-events:none;
}
.c-pagination__ellipsis { display:inline-flex; align-items:center; justify-content:center; min-inline-size:2rem; block-size:2rem; color: var(--Text-OnSurfaceDim); }
.c-pagination__size { display:inline-flex; align-items:center; gap: var(--Spacing-Space_2); padding: var(--Spacing-Space_1) var(--Spacing-Space_2); border-radius: var(--Spacing-Space_2); background: var(--Surface-Background-Surface); font-size:0.875rem; line-height:1.25rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfaceVariant); --iconContainer-size:1.25rem; margin-inline-start: var(--Spacing-Space_2); }

/* ==========================================================================
   NOTIFICATION  (toast / snackbar)
   Elevated feedback card, distinct from the flat inline Banner: raised on
   Shadow Level 2 with a dismiss control. Fixed, comfortable width for a toast
   stack. No border and no status accent (Figma re-read 10 Oct 2026); status shows
   in the icon colour only. Surface is Surface/Background/Surface so the toast
   reads as chrome, not as a coloured banner. Optional __footer holds a __meta
   line plus a ButtonGhost Small.
   Markup: .c-notification[data-status] > IconContainer + __wrap(__title + __body [+ __footer(__meta + button)]) + __dismiss
   ========================================================================== */
.c-notification {
  display:flex; align-items:flex-start; gap: var(--Spacing-Space_2);
  inline-size:22.5rem; max-inline-size:100%;
  padding: var(--Spacing-Space_4);
  background: var(--Surface-Background-Surface);
  border-radius: var(--Card-RoundedCorner);
  box-shadow: var(--Shadow-Level2); font-family:var(--font-family);
  --iconContainer-size:1.25rem; --iconContainer-color: var(--Status-Neutral-Base);
}
.c-notification__wrap  { flex:1 1 auto; min-inline-size:0; display:flex; flex-direction:column; gap: var(--Spacing-Space_1); }
.c-notification__title { font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-notification__body  { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-notification__dismiss { border:0; background:transparent; padding:0; cursor:pointer; display:flex; --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-notification__footer { display:flex; align-items:center; gap: var(--Spacing-Space_4); margin-block-start: var(--Spacing-Space_1); }
.c-notification__meta   { font-size:0.75rem; line-height:1rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfaceDim); }
.c-notification[data-status="positive"]    { --iconContainer-color: var(--Status-Positive-Base); }
.c-notification[data-status="alert"]       { --iconContainer-color: var(--Status-Alert-Base); }
.c-notification[data-status="notice"]      { --iconContainer-color: var(--Status-Notice-Base); }
.c-notification[data-status="informative"] { --iconContainer-color: var(--Status-Informative-Base); }

/* ==========================================================================
   MODAL
   Scrim + centred dialog card. Scrim = Surface/Overlay/OverlayBase. Card is
   Surface/Background/Surface, radius 24 from Figma (unbound there; no radius
   token is 24, so --Spacing-Space_6 carries the value, as .c-tag and
   .c-segmented do), Shadow Level 2, padded Space_6, 448 wide (Figma min 448,
   max 600). Header = Heading/S_Bolder (20/28, Figma 37209:98826) + close
   IconButton; body = Body/S_Regular (14/20); heading to body 8, content to
   actions 24, action gap 12; footer = right-aligned button row (Figma re-read
   10 Oct 2026).
   Markup: .c-modal__scrim > .c-modal > (__head(__title + close) + __body + __foot)
   ========================================================================== */
.c-modal__scrim {
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding: var(--Spacing-Space_6);
  background: var(--Surface-Overlay-OverlayBase);
}
.c-overlay { position:fixed; inset:0; background: var(--Surface-Overlay-OverlayBase); }  /* bare overlay layer; .c-modal__scrim and .c-drawer__scrim already implement it for their components (Figma Overlay 31853:21989) */
.c-modal {
  display:flex; flex-direction:column; gap: var(--Spacing-Space_2);
  inline-size:28rem; max-inline-size:100%; max-block-size:calc(100vh - var(--Spacing-Space_12));
  padding: var(--Spacing-Space_6);
  background: var(--Surface-Background-Surface);
  border-radius: var(--Spacing-Space_6);
  box-shadow: var(--Shadow-Level2); font-family:var(--font-family);
}
.c-modal[data-size="Small"] { inline-size:25rem; }
.c-modal[data-size="Large"] { inline-size:40rem; }
.c-modal__head  { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--Spacing-Space_4); }
.c-modal__title { font-size:1.25rem; line-height:1.75rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); margin:0; }
.c-modal__close { border:0; background:transparent; padding:0; cursor:pointer; display:flex; --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-modal__body  { flex:1 1 auto; overflow-y:auto; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-modal__foot  { display:flex; align-items:center; justify-content:flex-end; gap: var(--Spacing-Space_3); margin-block-start: var(--Spacing-Space_4); }

/* ==========================================================================
   FOOTER — page / wizard action bar pinned to the foot of a content column.
   Surface lowest, Shadow Reversed above it, padded Space_4 / Space_8; a left slot (typically a back control)
   and a right-aligned button group. Sticky, so it stays in view while the
   content above it scrolls. The host that places it owns any full-bleed
   offset (see the assurance stage), so the component itself takes no margin.
   ========================================================================== */
.c-footer { position:sticky; bottom:0; z-index:2;
  display:flex; align-items:center; gap: var(--Spacing-Space_4);
  padding: var(--Spacing-Space_4) var(--Spacing-Space_8);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest);
  box-shadow: var(--Shadow-Reversed); }
.c-footer__left  { display:flex; align-items:center; gap: var(--Spacing-Space_3); }
.c-footer__right { display:flex; align-items:center; gap: var(--Spacing-Space_3); margin-inline-start:auto; }

/* ============================================================================
   ADDED 2026-08-20 (pass 2) — remaining reusable BASE components from the
   Figma library inventory (fileKey oe8pql0zcUWZarv2HwU7L1), so this file now
   covers the full base/primitive set rather than a subset:
     Status · Avatar · ButtonGroup · AnchorElement · HelperText ·
     SectionHeader · Accordion · EmptyState · ListItem · CardImage/CardAction ·
     Statistics · Snackbar · ProgressCircle · ProgressStep (wizard) ·
     Popover · Drawer · NavigationTop · NavigationSide (expanded menu) ·
     Slider · DatePicker · QuickSelect · Upload · Filter · Axis (labels).
   ----------------------------------------------------------------------------
   Token intent is from the design-system rules (single source of truth) and
   geometry follows the sibling components already in this file. The Figma
   Dev-Mode MCP was DISCONNECTED during this pass, so exact per-node paddings/
   radii were NOT read live for these — values are on-system and correct in
   role, pending a live geometry-verification pass on reconnect. Product-
   specific composites (ModalBody*, ScopeEmission, GetStarted_Card,
   DisclosureOwnCard, AnnouncementModal, Slot_*) are intentionally excluded —
   they are app compositions, not base primitives.
   ========================================================================== */

/* ==========================================================================
   STATUS  (pill) — the status indicator used inline and in table cells.
   Softest fill + Boldest text/icon of the same family (per the icon-on-status
   rule). X-Small is the table size (24 tall). Neutral is the default.
   ========================================================================== */
.c-status {
  display:inline-flex; align-items:center; gap: var(--Spacing-Space_1);
  padding: var(--Spacing-Space_1) var(--Spacing-Space_2); border-radius: var(--Spacing-Space_4);
  font-family:var(--font-family); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular);
  --iconContainer-size:0.75rem;
  background: var(--Status-Neutral-Softest); color: var(--Status-Neutral-Boldest); --iconContainer-color: var(--Status-Neutral-Boldest);
}
.c-status[data-size="Small"]  { padding: var(--Spacing-Space_1) var(--Spacing-Space_2); font-size:0.875rem; line-height:1.25rem; --iconContainer-size:1rem; }
.c-status[data-status="positive"]    { background: var(--Status-Positive-Softest);    color: var(--Status-Positive-Boldest);    --iconContainer-color: var(--Status-Positive-Boldest); }
.c-status[data-status="alert"]       { background: var(--Status-Alert-Softest);       color: var(--Status-Alert-Boldest);       --iconContainer-color: var(--Status-Alert-Boldest); }
.c-status[data-status="notice"]      { background: var(--Status-Notice-Softest);      color: var(--Status-Notice-Boldest);      --iconContainer-color: var(--Status-Notice-Boldest); }
.c-status[data-status="informative"] { background: var(--Status-Informative-Softest); color: var(--Status-Informative-Bold);     --iconContainer-color: var(--Status-Informative-Base); }
.c-status__dot { inline-size:0.375rem; block-size:0.375rem; border-radius: var(--radius-pill); background: currentColor; }

/* ==========================================================================
   AVATAR — circular user/entity token. Size drives box + type + status dot.
   Falls back to initials on a neutral fill; image fills when present.
   ========================================================================== */
.c-avatar {
  position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; overflow:visible;
  inline-size: var(--avatar-size,2.5rem); block-size: var(--avatar-size,2.5rem); border-radius: var(--radius-pill);
  background: var(--Status-Neutral-Softer); color: var(--Text-OnSurfaceVariant);
  font-family:var(--font-family); font-weight:var(--font-Bolder); font-size: var(--avatar-font, calc(var(--avatar-size,2.5rem) * .4)); line-height:1;
  --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-avatar > img { inline-size:100%; block-size:100%; border-radius:inherit; object-fit:cover; }
.c-avatar[data-size="24"] { --avatar-size:1.5rem; }
.c-avatar[data-size="32"] { --avatar-size:2rem; --avatar-font:0.875rem; }
.c-avatar[data-size="40"] { --avatar-size:2.5rem; --avatar-font:1rem; }
.c-avatar[data-size="48"] { --avatar-size:3rem; --avatar-font:1.25rem; }
.c-avatar[data-size="64"] { --avatar-size:4rem; }
.c-avatar[data-size="56"] { --avatar-size:3.5rem; --avatar-font:1.5rem; }
.c-avatar[data-size="72"] { --avatar-size:4.5rem; --avatar-font:2rem; }
.c-avatar[data-brand="Primary"]   { background: var(--Status-Positive-Softest); color: var(--Primary-Primary); }
.c-avatar[data-brand="Secondary"] { background: var(--Secondary-SecondaryContainer); color: var(--Secondary-Secondary); }
.c-avatar[data-brand="Informative"] { background: var(--Status-Informative-Softest); color: var(--Status-Informative-Base); }
.c-avatar__status { position:absolute; inset-block-end:0; inset-inline-end:0; inline-size:25%; block-size:25%; min-inline-size:0.5rem; min-block-size:0.5rem;
  border-radius: var(--radius-pill); background: var(--Status-Positive-Base); border:2px solid var(--Surface-SurfaceContainer-SurfaceContainerLowest); }
.c-avatar__status[data-status="offline"] { background: var(--Status-Neutral-Base); }
.c-avatar__status[data-status="busy"]    { background: var(--Status-Alert-Base); }

/* ==========================================================================
   BUTTON GROUP — a joined row of ButtonTertiary-style segments. The group
   owns the outer pill radius; inner seams collapse to a single 1px rule.
   Use .c-btnGroup wrapping .c-btn instances; mark the active one.
   ========================================================================== */
.c-btnGroup { display:inline-flex; }
.c-btnGroup > .c-btn { border-radius:0; border-color: var(--Outline-Base); margin-inline-start:-1px; }
.c-btnGroup > .c-btn:first-child { border-start-start-radius: var(--radius-pill); border-end-start-radius: var(--radius-pill); margin-inline-start:0; }
.c-btnGroup > .c-btn:last-child  { border-start-end-radius: var(--radius-pill); border-end-end-radius: var(--radius-pill); }
.c-btnGroup > .c-btn[data-state="Active"] { background: var(--Status-Positive-Softest); border-color: var(--Primary-Primary); color: var(--Primary-Primary); --iconContainer-color: var(--Primary-Primary); z-index:1; }

/* BUTTON ROW, Figma ButtonGroup 1:9126 (read 10 Oct 2026). A spaced action row, not the joined .c-btnGroup.
   Markup: .c-btnRow[data-align="Right"] > .c-btn (secondary action first when right-aligned) + .c-btn[data-type="Primary"] */
.c-btnRow { display:flex; align-items:center; gap: var(--Spacing-Space_3); }
.c-btnRow[data-align="Right"]   { justify-content:flex-end; }
.c-btnRow[data-stack="Vertical"] { flex-direction:column; align-items:center; }

/* ==========================================================================
   ANCHOR ELEMENT: in-page section anchor list (jump navigation). No left
   rule: the active link is a 4px dot plus OnSurface SemiBold; inactive links
   are OnSurfaceDim (Figma 31831:26111, re-read 10 Oct 2026).
   ========================================================================== */
.c-anchor { display:flex; flex-direction:column; gap: var(--Spacing-Space_2); font-family:var(--font-family); }
.c-anchor__link { position:relative; padding-inline-start: var(--Spacing-Space_3); text-decoration:none; cursor:pointer;
  font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); }
.c-anchor__link[data-type="Sub"] { padding-inline-start: var(--Spacing-Space_6); }
.c-anchor__link:hover { color: var(--Text-OnSurface); }
.c-anchor__link[data-state="Active"] { color: var(--Text-OnSurface); font-weight:var(--font-Bolder); }
.c-anchor__link[data-state="Active"]::before { content:""; position:absolute; inset-inline-start:0; inset-block-start:50%; transform:translateY(-50%);
  inline-size: var(--Spacing-Space_1); block-size: var(--Spacing-Space_1); border-radius: var(--radius-pill); background: currentColor; }
.c-anchor__link[data-type="Sub"][data-state="Active"]::before { inset-inline-start: var(--Spacing-Space_3); }

/* ==========================================================================
   HELPER TEXT — standalone helper/validation line (the field-independent form
   of .c-field__helper). Default dim; error/success recolour + optional icon.
   ========================================================================== */
.c-helperText { display:inline-flex; align-items:center; gap: var(--Spacing-Space_1); font-family:var(--font-family);
  font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); --iconContainer-size:0.75rem; --iconContainer-color: var(--Text-OnSurfaceDim); }
.c-helperText[data-state="Error"]   { color: var(--Status-Alert-Bold);    --iconContainer-color: var(--Status-Alert-Base); }
.c-helperText[data-state="Success"] { color: var(--Status-Positive-Bold); --iconContainer-color: var(--Status-Positive-Base); }

/* ==========================================================================
   SECTION HEADER — title (+ optional supporting line) with a trailing slot
   for actions. Figma default is Small 16/24 (Callout/M_Bolder); Medium 18/26;
   the unattributed CSS default stays 18/26 so existing pages do not move
   (Figma re-read 10 Oct 2026).
   ========================================================================== */
.c-sectionHeader { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--Spacing-Space_3); font-family:var(--font-family); }
.c-sectionHeader__group   { display:flex; flex-direction:column; gap: var(--space-offgrid-2); min-inline-size:0; }
.c-sectionHeader__title   { font-size:1.125rem; line-height:1.625rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-sectionHeader[data-size="Small"] .c-sectionHeader__title  { font-size:1rem; line-height:1.5rem; }
.c-sectionHeader[data-size="Medium"] .c-sectionHeader__title { font-size:1.125rem; line-height:1.625rem; }
.c-sectionHeader__support { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-sectionHeader__trailing { display:flex; align-items:center; gap: var(--Spacing-Space_2); flex:0 0 auto; }

/* PAGE HEADER, Figma 37209:9351 ([NEW], read 10 Oct 2026). Title block is a SectionHeader Small; the trailing slot holds
   40px controls (TextField Medium, icon buttons, ButtonPrimary Medium), right-aligned. No fill, border or shadow.
   Markup: .c-pageHeader > .c-sectionHeader[data-size="Small"] + .c-pageHeader__trailing */
.c-pageHeader { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--Spacing-Space_3); font-family:var(--font-family); }
.c-pageHeader__trailing { display:flex; align-items:center; justify-content:flex-end; gap: var(--Spacing-Space_4); flex:0 0 auto; }

/* ==========================================================================
   ACCORDION — disclosure list. Header is a full-width button with a chevron
   that rotates when open; content reveals below. Rows separated by the row
   rule (Outline/Soft), matching the divider treatment. Header pad 16, gap 16;
   content pad 0/56/24/16 (Figma re-read 10 Oct 2026).
   ========================================================================== */
.c-accordion { display:flex; flex-direction:column; font-family:var(--font-family); }
.c-accordion__item { border-block-end:1px solid var(--Outline-Soft); }
.c-accordion__header {
  inline-size:100%; display:flex; align-items:center; gap: var(--Spacing-Space_4);
  padding: var(--Spacing-Space_4); border:0; background: var(--Surface-Background-Surface); cursor:pointer; text-align:start;
  font-family:inherit; font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface);
  --iconContainer-size:1.25rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-accordion__title { flex:1 1 auto; min-inline-size:0; }
.c-accordion__chevron { transition: transform .18s ease; }
.c-accordion__item[data-open="True"] .c-accordion__chevron { transform: rotate(180deg); }
.c-accordion__content { padding: var(--Spacing-Space_0) var(--Spacing-Space_14) var(--Spacing-Space_6) var(--Spacing-Space_4);
  background: var(--Surface-Background-Surface);
  font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-accordion__item[data-open="False"] .c-accordion__content { display:none; }

/* ==========================================================================
   EMPTY STATE — centred asset + title + body + optional action, for empty
   lists, no-results and first-run surfaces. Asset to title 24, title to body 4,
   body to action 24 (Figma draws 20; the house rule never uses Space_5, so it
   rounds to 24). Figma re-read 10 Oct 2026.
   ========================================================================== */
.c-emptyState { display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--Spacing-Space_1);
  padding: var(--Spacing-Space_6); font-family:var(--font-family); }
.c-emptyState__asset { display:inline-grid; place-items:center; inline-size:4rem; block-size:4rem; border-radius: var(--radius-pill);
  background: var(--Status-Neutral-Softest); --iconContainer-size:2rem; --iconContainer-color: var(--Text-OnSurfaceDim);
  margin-block-end: calc(var(--Spacing-Space_6) - var(--Spacing-Space_1)); }
.c-emptyState__title { font-size:1.25rem; line-height:1.75rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-emptyState__body  { max-inline-size:22.5rem; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); }
.c-emptyState__body + * { margin-block-start: calc(var(--Spacing-Space_6) - var(--Spacing-Space_1)); }

/* ==========================================================================
   LIST ITEM — ListItemStackable / ListItemStandalone. Leading + content
   (title/meta) + trailing slots. Standalone is a self-contained card row;
   Stackable is a flat row separated by the row rule. Hover + Selected states.
   ========================================================================== */
.c-listItem {
  display:flex; align-items:center; gap: var(--Spacing-Space_3);
  padding: var(--Spacing-Space_0) var(--Spacing-Space_4); font-family:var(--font-family); cursor:pointer;
  --iconContainer-size:1.25rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
  transition: background .12s ease;
}
.c-listItem[data-type="Stackable"] { border-block-end:1px solid var(--Outline-Soft); }
.c-listItem[data-type="Standalone"] { border:1px solid var(--Outline-Soft); border-radius:0.75rem; background: var(--Surface-Background-Surface); padding: var(--Spacing-Space_2) var(--Spacing-Space_4); gap: var(--Spacing-Space_2); }
.c-listItem:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
.c-listItem[data-state="Selected"] { background: var(--Status-Positive-Translucent); }
.c-listItem__lead, .c-listItem__trail { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-inline-size:2.5rem; min-block-size:2.5rem; gap: var(--Spacing-Space_2); }
.c-listItem__body  { flex:1 1 auto; min-inline-size:0; display:flex; flex-direction:column; gap: var(--space-offgrid-2); padding: var(--Spacing-Space_2) var(--Spacing-Space_2) var(--Spacing-Space_2) var(--Spacing-Space_0); }
.c-listItem[data-type="Standalone"] .c-listItem__body { padding: var(--Spacing-Space_0) var(--Spacing-Space_2) var(--Spacing-Space_0) var(--Spacing-Space_1); }
.c-listItem__title { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurface); }
.c-listItem__meta  { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }

/* ==========================================================================
   CARD extensions — CardImage (media header) and CardAction (footer row).
   Use inside .c-card. CardImage bleeds to the card edges via negative margin.
   ========================================================================== */
/* The negative margin MUST match .c-card's padding or the image stops bleeding
   to the edge. Both are Space_6. Change one and you change both. */
.c-card__image { margin: calc(-1 * var(--Spacing-Space_6)) calc(-1 * var(--Spacing-Space_6)) var(--Spacing-Space_0);
  border-start-start-radius: var(--Card-RoundedCorner); border-start-end-radius: var(--Card-RoundedCorner); overflow:hidden;
  background: var(--Status-Neutral-Softest); aspect-ratio: 16 / 9; display:flex; align-items:center; justify-content:center;
  --iconContainer-size:2rem; --iconContainer-color: var(--Text-OnSurfaceDim); }
.c-card__image > img { inline-size:100%; block-size:100%; object-fit:cover; }
.c-card__action { display:flex; align-items:center; gap: var(--Spacing-Space_2); }

/* CUSTOM SLOT, Figma 1:8087 (read 10 Oct 2026). A placeholder to mark where a custom block goes while prototyping.
   Markup: .c-slot[data-size="Default|Compact"] > .c-slot__title + .c-slot__desc (Default only) */
.c-slot { box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap: var(--Spacing-Space_2); padding: var(--Spacing-Space_4);
  background: var(--Secondary-SecondaryFixed); border:1px solid var(--Secondary-Secondary); font-family: var(--font-family); }
.c-slot__title { margin:0; font-size:1rem; line-height:1.5rem; font-weight: var(--font-Bolder); color: var(--Text-OnSurface); }
.c-slot__desc  { margin:0; font-size:1rem; line-height:1.5rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfacePlaceholder); }
.c-slot[data-size="Compact"] { display:inline-flex; padding: var(--Spacing-Space_2) var(--Spacing-Space_4); }

/* ==========================================================================
   STATISTICS — big value + label + optional delta. Delta up = positive,
   down = alert, by convention (override with data-trend where semantics flip).
   ========================================================================== */
.c-stat { display:flex; flex-direction:column; gap: var(--Spacing-Space_1); font-family:var(--font-family); }
.c-stat__label { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-stat__value { font-size:2rem; line-height:2.5rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-stat__delta { display:inline-flex; align-items:center; gap: var(--Spacing-Space_1); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Bolder); --iconContainer-size:1rem; }
.c-stat__delta[data-trend="Up"]   { color: var(--Status-Positive-Bold); --iconContainer-color: var(--Status-Positive-Base); }
.c-stat__delta[data-trend="Down"] { color: var(--Status-Alert-Bold);    --iconContainer-color: var(--Status-Alert-Base); }

/* ==========================================================================
   SNACKBAR — brief inverse-surface toast with an optional single action.
   Distinct from Notification: dark, compact, transient, no title.
   ========================================================================== */
.c-snackbar {
  display:inline-flex; align-items:center; gap: var(--Spacing-Space_2);
  padding: var(--Spacing-Space_4) var(--Spacing-Space_3) var(--Spacing-Space_4) var(--Spacing-Space_4);
  background: var(--Status-Neutral-Boldest); color: var(--Text-InverseOnSurface);
  border-radius: var(--Card-RoundedCorner); box-shadow: var(--Shadow-Level2); font-family:var(--font-family);
  --iconContainer-size:1.25rem; --iconContainer-color: var(--Text-InverseOnSurface);
}
.c-snackbar__msg { flex:1 1 auto; min-inline-size:0; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); }
.c-snackbar__action { border:0; background:transparent; cursor:pointer; padding: 0.375rem 0.875rem; min-inline-size: var(--Spacing-Space_16);
  border-radius: var(--radius-pill); font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Bolder); color: var(--Text-InverseOnSurface); }
/* Icon-only action (dismiss): drop the text-button padding and min width so the icon sits flush to the right edge. */
.c-snackbar__action:has(> .c-iconContainer:only-child) { display:flex; padding:0; min-inline-size:0; margin-inline-start:auto; color:inherit; }

/* ==========================================================================
   PROGRESS CIRCLE — determinate ring via conic-gradient on --value (0..100),
   and an indeterminate spinner variant. Track Outline/Softest, arc Primary.
   Figma sizes X-Small 36, Small 60, Medium 80; the unattributed default (48) has
   no Figma size and is kept for existing pages (Figma re-read 10 Oct 2026).
   ========================================================================== */
.c-progressCircle {
  --value:0; --pc-size:3rem; --pc-thick:0.375rem;
  inline-size: var(--pc-size); block-size: var(--pc-size); border-radius: var(--radius-pill);
  background:
    conic-gradient(var(--Primary-Primary) calc(var(--value) * 1%), var(--Outline-Softest) 0);
  display:inline-grid; place-items:center; font-family:var(--font-family);
}
.c-progressCircle::before { content:''; grid-area:1/1; inline-size: calc(var(--pc-size) - var(--pc-thick) * 2); block-size: calc(var(--pc-size) - var(--pc-thick) * 2);
  border-radius: var(--radius-pill); background: var(--Surface-SurfaceContainer-SurfaceContainerLowest); }
.c-progressCircle__label { grid-area:1/1; font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); z-index:1; }
.c-progressCircle[data-size="X-Small"] { --pc-size:2.25rem; --pc-thick:0.25rem; }
.c-progressCircle[data-size="X-Small"] .c-progressCircle__label { font-size:0.625rem; line-height:0.875rem; }
.c-progressCircle[data-size="Small"]  { --pc-size:3.75rem; --pc-thick:0.375rem; }
.c-progressCircle[data-size="Small"] .c-progressCircle__label  { font-size:0.875rem; line-height:1.25rem; }
.c-progressCircle[data-size="Medium"] { --pc-size:5rem; --pc-thick:0.5rem; }
.c-progressCircle[data-size="Medium"] .c-progressCircle__label { font-size:1rem; line-height:1.5rem; }
.c-progressCircle[data-state="Indeterminate"] {
  background: conic-gradient(var(--Primary-Primary) 0 25%, var(--Outline-Softest) 0);
  animation: c-spin .9s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   PROGRESS STEP (wizard) — horizontal or vertical stepper. Each step is a
   numbered/tick node with a connector; states Complete / Current / Upcoming.
   ========================================================================== */
.c-steps { display:flex; font-family:var(--font-family); }
.c-steps[data-orientation="Vertical"] { flex-direction:column; }
.c-steps__step { flex:1 1 0; display:flex; align-items:center; gap: var(--Spacing-Space_2); min-inline-size:0; }
.c-steps[data-orientation="Vertical"] .c-steps__step { flex:0 0 auto; align-items:flex-start; }
.c-steps__node { flex:0 0 auto; inline-size:1.75rem; block-size:1.75rem; border-radius: var(--radius-pill);
  display:inline-grid; place-items:center; font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest); border:2px solid var(--Outline-Base); color: var(--Text-OnSurfaceVariant);
  --iconContainer-size:1rem; --iconContainer-color: var(--Text-OnPrimary); }
.c-steps__label { font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-steps__connector { flex:1 1 auto; block-size:0.125rem; background: var(--Status-Neutral-Soft); border-radius: var(--radius-pill); margin-inline: var(--Spacing-Space_2); }
.c-steps__step[data-state="Complete"] .c-steps__node { background: var(--Primary-Primary); border-color: var(--Primary-Primary); color: var(--Text-OnPrimary); }
.c-steps__step[data-state="Complete"] .c-steps__label { color: var(--Text-OnSurface); }
.c-steps__step[data-state="Current"]  .c-steps__node { border-color: var(--Primary-Primary); color: var(--Primary-Primary); }
.c-steps__step[data-state="Current"]  .c-steps__label { color: var(--Text-OnSurface); font-weight:var(--font-Bolder); }

/* ==========================================================================
   POPOVER: floating surface (menus, rich tooltips, filter panels). Figma
   Type=White: Surface/Background/Surface, no stroke, Shadow Level 3, padding 16,
   radius 12, optional title Callout/M_Bolder 16/24 two pixels above the content,
   optional arrow. Position the wrapper yourself (Figma re-read 10 Oct 2026).
   ========================================================================== */
.c-popover { display:flex; flex-direction:column; gap: var(--Spacing-Space_2); position:relative;
  padding: var(--Spacing-Space_4); min-inline-size:12.5rem; max-inline-size:20rem;
  background: var(--Surface-Background-Surface);
  border-radius: 0.75rem; box-shadow: var(--Shadow-Level3); font-family:var(--font-family);
  font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurface); }
.c-popover::after { content:''; position:absolute; inline-size:0.625rem; block-size:0.625rem; rotate:45deg;
  background: var(--Surface-Background-Surface); }
.c-popover__title { font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-popover__title + * { margin-block-start: calc(var(--space-offgrid-2) - var(--Spacing-Space_2)); }
.c-popover[data-side="bottom"]::after { inset-block-start:-0.375rem; inset-inline-start:calc(50% - 0.3125rem); }
.c-popover[data-side="top"]::after    { inset-block-end:-0.375rem;  inset-inline-start:calc(50% - 0.3125rem); rotate:225deg; }

/* ==========================================================================
   DRAWER — edge-anchored panel + scrim. Slides from the inline-end by default.
   ========================================================================== */
.c-drawer__scrim { position:fixed; inset:0; z-index:90; background: var(--Surface-Overlay-OverlayBase); display:flex; }
.c-drawer {
  margin-inline-start:auto; inline-size:25rem; max-inline-size:100%; block-size:100%;
  display:flex; flex-direction:column; gap: var(--Spacing-Space_4); padding: var(--Spacing-Space_6);
  background: var(--Surface-Background-Surface); box-shadow: var(--Shadow-Level3);
  font-family:var(--font-family); overflow-y:auto;
}
.c-drawer[data-side="start"] { margin-inline-start:0; margin-inline-end:auto; }
.c-drawer__head  { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--Spacing-Space_4); }
.c-drawer__title { font-size:1.125rem; line-height:1.625rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-drawer__close { border:0; background:transparent; padding:0; cursor:pointer; display:flex; --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant); }

/* ==========================================================================
   NAVIGATION TOP — the app header bar: brand + content slots + trailing
   actions. Surface lowest with a bottom rule.
   ========================================================================== */
.c-navTop {
  display:flex; align-items:center; gap: var(--Spacing-Space_4);
  block-size:4.5rem; padding: var(--Spacing-Space_4);
  background: var(--Surface-SurfaceContainer-SurfaceContainerLowest);
  border-block-end:1px solid var(--Outline-Soft); font-family:var(--font-family);
  --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-navTop__brand   { display:inline-flex; align-items:center; gap: var(--Spacing-Space_2); font-size:1rem; line-height:1.5rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-navTop__spacer  { flex:1 1 auto; }
.c-navTop__actions { display:inline-flex; align-items:center; gap: var(--Spacing-Space_4); }

/* NavigationSide — expanded (labelled) menu row, extending the icon rail above.
   Use .c-navSide[data-expand="True"] with .c-navSide__row children. */
.c-navSide[data-expand="True"] { inline-size:15.5rem; align-items:stretch; }
.c-navSide__row {
  display:flex; align-items:center; gap: var(--Spacing-Space_2);
  padding: var(--Spacing-Space_2) var(--Spacing-Space_3); border-radius: var(--radius-control);
  cursor:pointer; border:0; background:transparent; text-align:start; width:100%;
  font-family:var(--font-family); font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant);
  --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant); transition: background .12s ease;
}
.c-navSide__row:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerHigh); }
.c-navSide__row[data-state="Active"] { background: var(--Status-Positive-Softest); color: var(--Primary-Primary); font-weight:var(--font-Bolder); --iconContainer-color: var(--Primary-Primary); --iconContainer-fill:1; }
.c-navSide__label { flex:1 1 auto; min-inline-size:0; }

/* ==========================================================================
   SLIDER — single-value track with a filled portion and a round handle.
   Drive with --value (0..100). Track Neutral/Softer, fill + handle Primary.
   ========================================================================== */
.c-slider { --value:50; position:relative; inline-size:100%; block-size:1.25rem; display:flex; align-items:center; font-family:var(--font-family); cursor:pointer; }
.c-slider__track { inline-size:100%; block-size:0.25rem; border-radius: var(--radius-pill); background: var(--Status-Neutral-Softer); overflow:hidden; }
.c-slider__fill  { block-size:100%; inline-size: calc(var(--value) * 1%); background: var(--Primary-Primary); }
.c-slider__handle { position:absolute; inset-block-start:50%; inset-inline-start: calc(var(--value) * 1%);
  inline-size:1.25rem; block-size:1.25rem; border-radius: var(--radius-pill); background: var(--Primary-Primary);
  border:0; box-shadow:none; transform: translate(-50%, -50%); }
.c-slider[data-state="Disabled"] { pointer-events:none; }
.c-slider[data-state="Disabled"] .c-slider__fill { background: var(--Status-Neutral-Base); }
.c-slider[data-state="Disabled"] .c-slider__handle { background: var(--Text-OnSurfaceDisabled); }

/* ==========================================================================
   DATE PICKER — calendar surface with a 7-column day grid. Cells: default,
   hover, selected (Primary gradient circle), range (Primary/PrimaryContainer),
   muted (adjacent month), today (Primary SemiBold, no ring). 368 wide.
   QuickSelect chips sit alongside for preset ranges (Figma re-read 10 Oct 2026).
   ========================================================================== */
.c-datePicker { display:inline-flex; flex-direction:column; gap: var(--Spacing-Space_4);
  padding: var(--Spacing-Space_4); inline-size: calc(7 * var(--Spacing-Space_12) + 2 * var(--Spacing-Space_4));
  background: var(--Surface-Background-Surface); border:0;
  border-radius: var(--Card-RoundedCorner); box-shadow: var(--Shadow-Level2); font-family:var(--font-family); }
.c-datePicker__head { display:flex; align-items:center; justify-content:space-between; --iconContainer-size:1.5rem; --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-datePicker__month { font-size:1.125rem; line-height:1.625rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurfaceVariant); }
.c-datePicker__grid { display:grid; grid-template-columns: repeat(7, 1fr); gap: var(--Spacing-Space_0); }
.c-datePicker__dow  { text-align:center; font-size:0.75rem; line-height:1rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfaceDim); padding-block:0; aspect-ratio:1; display:grid; place-items:center; }
.c-datePicker__cell {
  aspect-ratio:1; display:inline-grid; place-items:center; border:0; background:transparent; cursor:pointer;
  border-radius: var(--radius-control); font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurface);
}
.c-datePicker__cell:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerHigh); }
.c-datePicker__cell[data-muted="True"] { color: var(--Text-OnSurfaceDim); }
.c-datePicker__cell[data-today="True"] { box-shadow:none; color: var(--Primary-Primary); font-weight: var(--font-Bolder); }
.c-datePicker__cell[data-in-range="True"] { background: var(--Primary-PrimaryContainer); border-radius:0; }
.c-datePicker__cell[data-state="Selected"] { background: var(--Primary_Gradient); color: var(--Text-OnPrimary); font-weight: var(--font-Regular); border-radius: var(--radius-pill); }
.c-datePicker__cell[data-state="Disabled"] { color: var(--Text-OnSurfaceDisabled); pointer-events:none; }

/* ==========================================================================
   QUICK SELECT: row of preset-range chips (Today, 7d, 30d, …). Figma chip 40
   high, radius 12, Outline/Soft stroke, no fill; Selected = Positive/Bold stroke
   and text. Figma pads 20 horizontally; the house rule never uses Space_5, so it
   is 16 (Figma re-read 10 Oct 2026).
   ========================================================================== */
.c-quickSelect { display:inline-flex; flex-wrap:wrap; gap: var(--Spacing-Space_2); font-family:var(--font-family); }
.c-quickSelect__chip {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--Spacing-Space_2);
  padding: 0 var(--Spacing-Space_4); min-block-size: var(--Spacing-Space_10); border-radius: var(--Spacing-Space_3);
  border:1px solid var(--Outline-Soft); background:transparent; cursor:pointer;
  font-family:inherit; font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurface);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.c-quickSelect__chip:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); color: var(--Text-OnSurface); }
.c-quickSelect__chip[data-state="Selected"] { border-color: var(--Status-Positive-Bold); color: var(--Status-Positive-Bold); background: var(--Surface-Background-Surface); font-weight:var(--font-Bolder); }

/* ==========================================================================
   UPLOAD — dropzone (Standalone), compact tile, and uploaded-file list rows.
   Dropzone is a dashed neutral box; dragover + error restyle the border.
   ========================================================================== */
.c-upload {
  display:flex; flex-direction:column; align-items:center; gap: var(--Spacing-Space_4); text-align:center;
  padding: var(--Spacing-Space_6); border:2px dashed var(--Outline-Soft); border-radius: var(--Card-RoundedCorner);
  background: var(--Surface-Background-Surface); cursor:pointer; font-family:var(--font-family);
  --iconContainer-size:2rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-upload:hover { border-color: var(--Status-Positive-Bold); background: var(--Surface-SurfaceContainer-SurfaceContainerLow); --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-upload[data-state="Dragover"] { border-color: var(--Status-Positive-Bold); background: var(--Status-Positive-Translucent); --iconContainer-color: var(--Status-Positive-Bold); }
.c-upload[data-state="Dragover"] .c-upload__title { font-weight: var(--font-Bolder); color: var(--Status-Positive-Bold); }
.c-upload[data-state="Error"] { border-color: var(--Status-Alert-Base); background: var(--Status-Alert-Softest); --iconContainer-color: var(--Status-Alert-Base); }
.c-upload__title { font-size:1rem; line-height:1.5rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-upload__hint  { font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceDim); }
.c-upload[data-variant="Tile"] { flex-direction:row; padding: var(--Spacing-Space_6); gap: var(--Spacing-Space_4); text-align:start; --iconContainer-size:1.5rem; }
/* Figma UploadTile 1:18371, a 120 square (read 10 Oct 2026). */
.c-upload[data-variant="Square"] { flex-direction:column; justify-content:center; text-align:center; inline-size:7.5rem; block-size:7.5rem; padding: 0 var(--Spacing-Space_1); gap: var(--Spacing-Space_2); --iconContainer-size:1.5rem; }
.c-upload[data-variant="Square"] .c-upload__title { font-size:0.875rem; line-height:1.25rem; }
.c-uploadList { display:flex; flex-direction:column; gap: var(--Spacing-Space_1); font-family:var(--font-family); }
.c-uploadList__row {
  display:flex; align-items:center; gap: var(--Spacing-Space_4);
  padding: var(--Spacing-Space_3) var(--Spacing-Space_6); border:0; border-radius: var(--Card-RoundedCorner);
  background: transparent;
  font-size:1rem; line-height:1.5rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant);
  --iconContainer-size:1.25rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-uploadList__name { flex:1 1 auto; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-uploadList__row[data-state="Error"] { box-shadow: 0 0 0 2px var(--Status-Alert-Base); --iconContainer-color: var(--Status-Alert-Base); }

/* FILE TYPE TILE, Figma 46659:54804 (read 10 Oct 2026). 56x56 thumbnail for .c-uploadList__row; neutral in every state.
   Glyphs: PDF picture_as_pdf, JPG/JPEG/PNG image, XLSX/XLS/CSV table_chart, DOCX/DOC article, other insert_drive_file.
   Markup: .c-fileTile[data-type] > .c-iconContainer + .c-fileTile__ext */
.c-fileTile { box-sizing:border-box; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; flex:0 0 auto;
  gap: var(--Spacing-Space_1); padding: var(--Spacing-Space_1); inline-size: var(--Spacing-Space_14); block-size: var(--Spacing-Space_14);
  background: var(--Surface-SurfaceContainer-SurfaceContainer); border:1px solid var(--Outline-Soft); border-radius: var(--Card-RoundedCorner);
  font-family: var(--font-family); font-size:0.75rem; line-height:1rem; font-weight: var(--font-Regular); color: var(--Text-OnSurfaceVariant);
  --iconContainer-size:1rem; --iconContainer-color: var(--Text-OnSurfaceVariant); }
.c-fileTile__ext { text-transform:uppercase; }

/* ==========================================================================
   FILTER: trigger chip that opens a Popover/Dropdown of options. Figma
   FilterDefault Small: 32 high, padding 16, gap 8, Outline/Soft stroke, no fill;
   Selected = 2px Primary stroke, SemiBold Primary label (CSS state name Active),
   plus a count badge (Figma re-read 10 Oct 2026).
   FilterAdvancedSearch is the .c-search pill already defined above.
   ========================================================================== */
.c-filter {
  box-sizing:border-box; display:inline-flex; align-items:center; gap: var(--Spacing-Space_2);
  padding: 0 var(--Spacing-Space_4); min-block-size: var(--Spacing-Space_8); border-radius: var(--radius-pill);
  border:1px solid var(--Outline-Soft); background:transparent; cursor:pointer;
  font-family:var(--font-family); font-size:0.875rem; line-height:1.25rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant);
  --iconContainer-size:1rem; --iconContainer-color: var(--Text-OnSurfaceVariant);
}
.c-filter:hover { background: var(--Surface-SurfaceContainer-SurfaceContainerLow); }
.c-filter[data-state="Active"] { border-color: var(--Primary-Primary); box-shadow: inset 0 0 0 1px var(--Primary-Primary); background:transparent; color: var(--Primary-Primary); font-weight: var(--font-Bolder); --iconContainer-color: var(--Primary-Primary); }
.c-filter__count { display:inline-grid; place-items:center; min-inline-size:1rem; min-block-size:1rem; block-size:auto; padding: var(--space-offgrid-2) var(--space-offgrid-6);
  border-radius: var(--radius-pill); background: var(--Primary-Primary); color: var(--Text-OnPrimary); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Bolder); }

/* ==========================================================================
   AXIS — chart axis label/tick helpers (the geometry lives in the chart, not
   here). Tick labels Metadata/L on OnSurfaceVariant; value labels Bolder on
   OnSurface; gridlines/axis are Outline strokes per the chart rules.
   ========================================================================== */
.c-axis__tick  { font-family:var(--font-family); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Regular); color: var(--Text-OnSurfaceVariant); }
.c-axis__value { font-family:var(--font-family); font-size:0.75rem; line-height:1rem; font-weight:var(--font-Bolder); color: var(--Text-OnSurface); }
.c-axis__line  { background: var(--Outline-Base); }
.c-axis__grid  { background: var(--Outline-Softer); }