/* Widget design tokens, core (design/widget-theming, the decision log rounds 1-3). Three tiers, all custom properties:
     1. SEEDS      --openrolesindex-seed-* (brand, brand-contrast, ink, canvas, font-body, font-display, optional highlight) set by the server
                   per org (an inline :root rule after this sheet); the keyword seeds travel as data-radius="sharp|soft|round",
                   data-density="compact|comfortable" (+ data-brand-radius, data-highlight, data-style) on <html>. The defaults
                   below are the Soft neutral, so an org with no theme looks like it.
     2. SEMANTIC   derived with color-mix(in oklch) and light-dark(): light and dark come from the SAME seeds, so a client brand
                   can no longer break dark mode. Round-3 OKLCH lightness clamps keep mid-tone seeds AA.
     3. COMPONENT  --openrolesindex-c-*: reference semantic tokens only; a style sheet (style-soft/-editorial/-crisp.css, loaded after this
                   one) sets the direction's values; panel.css consumes semantic and component tokens only.
   Light/dark: <html data-theme="light|dark|auto"> sets color-scheme; light-dark() follows it. Older browsers without
   light-dark() get the light theme (the @supports block at the end). Legacy tokens (--openrolesindex-primary, --s-1 ...) are aliases at the
   foot of this file, kept so apply.css keeps working; new code uses the semantic names. */

/* ---------- Tier 1: seed defaults (Soft neutral) ---------- */
:where(:root) {
  --openrolesindex-seed-brand: #0d7a86;
  --openrolesindex-seed-brand-contrast: #ffffff;
  --openrolesindex-seed-ink: #1b2530;
  --openrolesindex-seed-canvas: #fbfcfc;
  --openrolesindex-seed-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --openrolesindex-seed-font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Tier 2: semantic ---------- */
:root {
  color-scheme: light dark;

  /* knobs (a style sheet overrides them; defaults are AA-safe for any sane seed set) */
  --openrolesindex-lift: 44%;               /* dark: share of the brand kept when lifting the accent toward the canvas */
  --openrolesindex-muted-mix: 70%;          /* light: share of ink in muted text */
  --openrolesindex-muted-d: 66%;            /* dark: share of canvas in muted text */
  --openrolesindex-strong-mix: 52%;         /* light: share of ink in the control border */
  --openrolesindex-strong-d: 42%;           /* dark: share of canvas in the control border */
  --openrolesindex-accent-text-mix: 84%;    /* light: share of brand kept in link/text accent (rest = ink) */
  --openrolesindex-font-num: inherit;       /* numerals (pay, counts); Crisp sets a monospace */
  --openrolesindex-tint: 0%;                /* share of the brand mixed into surface-2/3 */
  --openrolesindex-dark-depth: 72%;         /* dark base = this share of the ink, rest black */
  --openrolesindex-s2-l: 96%; --openrolesindex-s3-l: 91%;   /* light surface-2/-3: share of canvas (rest ink) */
  --openrolesindex-s2-d: 93%; --openrolesindex-s3-d: 86%;   /* dark surface-2/-3: share of the dark base (rest canvas) */
  --openrolesindex-border-l: 14%; --openrolesindex-border-d: 15%;  /* hairline: share of ink (light) / canvas (dark) */
  --openrolesindex-soft-l: 11%; --openrolesindex-soft-d: 17%;      /* accent-soft: share of brand (light) / accent (dark) */
  /* round-3 lightness guard rails (OKLCH L): a light or mid-tone brand/ink still lands on AA */
  --openrolesindex-muted-lmax: 0.48;  --openrolesindex-muted-lmin: 0.74;    /* muted text: light max L / dark min L */
  --openrolesindex-strong-lmax: 0.62; --openrolesindex-strong-lmin: 0.5;    /* control border (>= 3:1) */
  --openrolesindex-atext-lmax: 0.5;   --openrolesindex-atext-lmin: 0.8;     /* accent text / links */
  --openrolesindex-accent-lmin: 0.68; --openrolesindex-onaccent-lmax: 0.22; /* dark: accent fill floor, and the label on it capped dark */
  --openrolesindex-dark-lmax: 0.28;                               /* dark base never lighter than this */
  --openrolesindex-hl-lmax: 0.55;                                  /* highlight marker (light) stays >= 3:1 on raised surfaces */

  --openrolesindex-dark-base: oklch(from color-mix(in oklch, var(--openrolesindex-seed-ink) var(--openrolesindex-dark-depth), black) min(l, var(--openrolesindex-dark-lmax)) c h);

  /* surfaces: 1 = panel/base, 2 = rail/table/sheets, 3 = hover/active/pills. In dark each step is LIGHTER (raised). */
  --openrolesindex-surface-1: light-dark(var(--openrolesindex-seed-canvas), var(--openrolesindex-dark-base));
  --openrolesindex-surface-2: light-dark(
    color-mix(in oklch, color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-s2-l), var(--openrolesindex-seed-ink)) calc(100% - var(--openrolesindex-tint)), var(--openrolesindex-seed-brand)),
    color-mix(in oklch, color-mix(in oklch, var(--openrolesindex-dark-base) var(--openrolesindex-s2-d), var(--openrolesindex-seed-canvas)) calc(100% - var(--openrolesindex-tint)), var(--openrolesindex-seed-brand)));
  --openrolesindex-surface-3: light-dark(
    color-mix(in oklch, color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-s3-l), var(--openrolesindex-seed-ink)) calc(100% - var(--openrolesindex-tint) * 1.6), var(--openrolesindex-seed-brand)),
    color-mix(in oklch, color-mix(in oklch, var(--openrolesindex-dark-base) var(--openrolesindex-s3-d), var(--openrolesindex-seed-canvas)) calc(100% - var(--openrolesindex-tint) * 1.6), var(--openrolesindex-seed-brand)));

  /* text and lines */
  --openrolesindex-text: light-dark(var(--openrolesindex-seed-ink), color-mix(in oklch, var(--openrolesindex-seed-canvas) 92%, var(--openrolesindex-dark-base)));
  --openrolesindex-text-muted: light-dark(
    oklch(from color-mix(in oklch, var(--openrolesindex-seed-ink) var(--openrolesindex-muted-mix), var(--openrolesindex-seed-canvas)) min(l, var(--openrolesindex-muted-lmax)) c h),
    oklch(from color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-muted-d), var(--openrolesindex-dark-base)) max(l, var(--openrolesindex-muted-lmin)) c h));
  --openrolesindex-border: light-dark(
    color-mix(in oklch, var(--openrolesindex-seed-ink) var(--openrolesindex-border-l), var(--openrolesindex-seed-canvas)),
    color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-border-d), var(--openrolesindex-dark-base)));
  --openrolesindex-border-strong: light-dark(
    oklch(from color-mix(in oklch, var(--openrolesindex-seed-ink) var(--openrolesindex-strong-mix), var(--openrolesindex-seed-canvas)) min(l, var(--openrolesindex-strong-lmax)) c h),
    oklch(from color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-strong-d), var(--openrolesindex-dark-base)) max(l, var(--openrolesindex-strong-lmin)) c h));
  --openrolesindex-hilite: light-dark(transparent, color-mix(in oklch, white 7%, transparent));   /* dark-only depth cues */
  --openrolesindex-edge: light-dark(transparent, var(--openrolesindex-border));

  /* accent family (primary action, selection, focus, links) */
  --openrolesindex-accent: light-dark(var(--openrolesindex-seed-brand), oklch(from color-mix(in oklch, var(--openrolesindex-seed-brand) var(--openrolesindex-lift), var(--openrolesindex-seed-canvas)) max(l, var(--openrolesindex-accent-lmin)) c h));
  --openrolesindex-accent-strong: light-dark(color-mix(in oklch, var(--openrolesindex-seed-brand) 86%, var(--openrolesindex-seed-ink)), color-mix(in oklch, var(--openrolesindex-accent) 86%, white));
  --openrolesindex-on-accent: light-dark(var(--openrolesindex-seed-brand-contrast), oklch(from var(--openrolesindex-dark-base) min(l, var(--openrolesindex-onaccent-lmax)) c h));
  --openrolesindex-accent-soft: light-dark(
    color-mix(in oklch, var(--openrolesindex-seed-brand) var(--openrolesindex-soft-l), var(--openrolesindex-seed-canvas)),
    color-mix(in oklch, var(--openrolesindex-accent) var(--openrolesindex-soft-d), var(--openrolesindex-dark-base)));
  --openrolesindex-accent-text: light-dark(
    oklch(from color-mix(in oklch, var(--openrolesindex-seed-brand) var(--openrolesindex-accent-text-mix), var(--openrolesindex-seed-ink)) min(l, var(--openrolesindex-atext-lmax)) c h),
    oklch(from color-mix(in oklch, var(--openrolesindex-accent) 80%, var(--openrolesindex-seed-canvas)) max(l, var(--openrolesindex-atext-lmin)) c h));
  /* optional secondary brand colour, a marker only (focus ring, active-row marker, comparison bar, quote bar). Absent = accent-text. */
  --openrolesindex-hl-mix: 0%;
  --openrolesindex-highlight: light-dark(
    oklch(from var(--openrolesindex-seed-highlight, var(--openrolesindex-accent-text)) min(l, var(--openrolesindex-hl-lmax)) c h),
    color-mix(in oklch, var(--openrolesindex-seed-highlight, var(--openrolesindex-accent-text)) calc(100% - var(--openrolesindex-hl-mix)), var(--openrolesindex-seed-canvas)));
  --openrolesindex-focus-ring: var(--openrolesindex-highlight);
  --openrolesindex-halo: 0 0 0 3px color-mix(in oklch, var(--openrolesindex-accent) 28%, transparent);

  /* status (fixed hues; lifted in dark) */
  --openrolesindex-danger:  light-dark(color-mix(in oklch, oklch(50% 0.19 27) 90%, var(--openrolesindex-seed-ink)), oklch(76% 0.14 27));
  --openrolesindex-warn:    light-dark(color-mix(in oklch, oklch(47% 0.12 55) 90%, var(--openrolesindex-seed-ink)), oklch(81% 0.12 72));
  --openrolesindex-success: light-dark(color-mix(in oklch, oklch(47% 0.12 150) 90%, var(--openrolesindex-seed-ink)), oklch(79% 0.14 150));
  --openrolesindex-hl: light-dark(
    color-mix(in oklch, oklch(88% 0.16 95) 55%, var(--openrolesindex-surface-1)),
    color-mix(in oklch, oklch(80% 0.15 90) 26%, var(--openrolesindex-surface-1)));
  --openrolesindex-scrim: light-dark(color-mix(in oklch, var(--openrolesindex-seed-ink) 46%, transparent), color-mix(in oklch, black 58%, transparent));

  /* elevation: three complete box-shadow lists; the style sheet picks the look */
  --openrolesindex-shadow-ink: light-dark(var(--openrolesindex-seed-ink), black);
  --openrolesindex-shadow-1: 0 1px 2px color-mix(in oklch, var(--openrolesindex-shadow-ink) 8%, transparent);
  --openrolesindex-shadow-2: 0 8px 28px color-mix(in oklch, var(--openrolesindex-shadow-ink) 18%, transparent);
  --openrolesindex-shadow-3: 0 24px 72px color-mix(in oklch, var(--openrolesindex-shadow-ink) 30%, transparent);

  /* radius scale (the data-radius keyword picks the row; round is the neutral default) */
  --openrolesindex-radius-sm: 8px; --openrolesindex-radius-md: 16px; --openrolesindex-radius-lg: 24px; --openrolesindex-radius-pill: 999px;

  /* density (keyword) and row rhythm (style). Touch targets stay 44px in every density. */
  --openrolesindex-dens: 1; --openrolesindex-touch: 44px; --openrolesindex-rows: 1;
  --openrolesindex-space-1: calc(0.25rem * var(--openrolesindex-dens)); --openrolesindex-space-2: calc(0.5rem * var(--openrolesindex-dens));
  --openrolesindex-space-3: calc(0.75rem * var(--openrolesindex-dens)); --openrolesindex-space-4: calc(1rem * var(--openrolesindex-dens));
  --openrolesindex-space-5: calc(1.5rem * var(--openrolesindex-dens)); --openrolesindex-space-6: calc(2rem * var(--openrolesindex-dens));
  --openrolesindex-space-7: calc(3rem * var(--openrolesindex-dens));   --openrolesindex-space-8: calc(4rem * var(--openrolesindex-dens));

  /* type: families are seeds; the scale is a style switch */
  --openrolesindex-font-body: var(--openrolesindex-seed-font-body);
  --openrolesindex-font-display: var(--openrolesindex-seed-font-display);
  --openrolesindex-text-body: 1rem; --openrolesindex-text-chip: 0.9375rem;
  --openrolesindex-text-title: 1.0625rem; --openrolesindex-text-fact: 1rem; --openrolesindex-text-meta: 0.875rem; --openrolesindex-text-helper: 0.8125rem;
  --openrolesindex-text-display: 1.5rem; --openrolesindex-text-hero: 2.5rem;
  --openrolesindex-lh: 1.55; --openrolesindex-lh-meta: 1.45; --openrolesindex-lh-tight: 1.2;
  --openrolesindex-w-body: 400; --openrolesindex-w-title: 600; --openrolesindex-w-display: 650; --openrolesindex-w-strong: 600;
  --openrolesindex-track-display: -0.01em;
  --openrolesindex-text-label: 0.8125rem; --openrolesindex-w-label: 600; --openrolesindex-track-label: 0; --openrolesindex-label-transform: none;

  /* motion */
  --openrolesindex-dur-fast: 120ms; --openrolesindex-dur: 200ms; --openrolesindex-dur-slow: 320ms;
  --openrolesindex-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --openrolesindex-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --openrolesindex-measure: 66ch;
  --openrolesindex-safe-b: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* seed keywords */
:root[data-radius="sharp"] { --openrolesindex-radius-sm: 2px; --openrolesindex-radius-md: 4px;  --openrolesindex-radius-lg: 6px; }
:root[data-radius="soft"]  { --openrolesindex-radius-sm: 6px; --openrolesindex-radius-md: 10px; --openrolesindex-radius-lg: 16px; }
:root[data-radius="round"] { --openrolesindex-radius-sm: 8px; --openrolesindex-radius-md: 16px; --openrolesindex-radius-lg: 24px; }
:root[data-density="comfortable"] { --openrolesindex-dens: 1; }
:root[data-density="compact"]     { --openrolesindex-dens: 0.8; }
:root[data-highlight] { --openrolesindex-hl-mix: 18%; }

/* ---------- Tier 3: component tokens (baseline = Soft-neutral without tiles; a style sheet overrides) ---------- */
:root {
  --openrolesindex-c-control-radius: var(--openrolesindex-radius-pill);   /* chips, options, starters, tabs, buttons, the composer input */
  --openrolesindex-c-bubble-radius: var(--openrolesindex-radius-md);
  --openrolesindex-c-hover-lift: 0px; --openrolesindex-c-press-scale: 1;

  --openrolesindex-c-panel-border: var(--openrolesindex-border);
  --openrolesindex-c-panel-shadow: var(--openrolesindex-shadow-3);
  --openrolesindex-c-head-bg: var(--openrolesindex-surface-1);

  --openrolesindex-c-chip-bg: var(--openrolesindex-surface-1);
  --openrolesindex-c-chip-fg: var(--openrolesindex-text);
  --openrolesindex-c-chip-border: var(--openrolesindex-border-strong);
  --openrolesindex-c-chip-hover-bg: var(--openrolesindex-accent-soft);
  --openrolesindex-c-chip-hover-border: var(--openrolesindex-accent-text);
  --openrolesindex-c-chip-count: var(--openrolesindex-text-muted);
  --openrolesindex-c-chip-pad: 0.4rem 0.9rem;

  --openrolesindex-c-bubble-user-bg: var(--openrolesindex-accent-soft);
  --openrolesindex-c-bubble-user-border: transparent;
  --openrolesindex-c-bubble-user-fg: var(--openrolesindex-text);

  --openrolesindex-c-rail-bg: var(--openrolesindex-surface-2);
  --openrolesindex-c-row-pad-y: calc(var(--openrolesindex-space-2) * var(--openrolesindex-rows));
  --openrolesindex-c-row-pad-x: var(--openrolesindex-space-2);
  --openrolesindex-c-row-divider: var(--openrolesindex-border);
  --openrolesindex-c-row-hover-bg: var(--openrolesindex-surface-3);
  --openrolesindex-c-row-active-bg: var(--openrolesindex-surface-3);
  --openrolesindex-c-row-active-marker: var(--openrolesindex-highlight);
  --openrolesindex-c-row-title-decoration: var(--openrolesindex-border-strong);
  --openrolesindex-c-row-bg: transparent;
  --openrolesindex-c-row-radius: var(--openrolesindex-radius-sm);
  --openrolesindex-c-row-shadow: 0 0 0 0 transparent; --openrolesindex-c-row-shadow-hover: 0 0 0 0 transparent;
  --openrolesindex-c-label-fg: var(--openrolesindex-text-muted);
  --openrolesindex-c-row-gap: 0px;
  --openrolesindex-c-results-rule: 0 solid transparent;
  --openrolesindex-c-h-border: 0 solid transparent; --openrolesindex-c-h-pad: 0;

  --openrolesindex-c-facts-bg: transparent; --openrolesindex-c-facts-border: 0 solid transparent; --openrolesindex-c-facts-radius: 0; --openrolesindex-c-facts-pad: 0;
  --openrolesindex-c-facts-shadow: 0 0 0 0 transparent; --openrolesindex-c-facts-rule: 0 solid transparent; --openrolesindex-c-facts-frame: 0 solid transparent;
  --openrolesindex-c-pill-bg: var(--openrolesindex-surface-3); --openrolesindex-c-pill-fg: var(--openrolesindex-text); --openrolesindex-c-pill-radius: var(--openrolesindex-radius-pill);

  --openrolesindex-c-table-border: var(--openrolesindex-border);
  --openrolesindex-c-table-outer: 1px solid var(--openrolesindex-border); --openrolesindex-c-table-radius: var(--openrolesindex-radius-md); --openrolesindex-c-table-shadow: 0 0 0 0 transparent;
  --openrolesindex-c-table-vline: 0 solid transparent; --openrolesindex-c-table-head-rule: 1px solid var(--openrolesindex-border-strong);
  --openrolesindex-c-table-head-bg: var(--openrolesindex-surface-2);
  --openrolesindex-c-table-first-bg: var(--openrolesindex-surface-1);
  --openrolesindex-c-table-same-fg: var(--openrolesindex-text-muted);
  --openrolesindex-c-table-diff-bg: var(--openrolesindex-accent-soft);
  --openrolesindex-c-table-diff-bar: var(--openrolesindex-highlight);

  --openrolesindex-c-button-bg: var(--openrolesindex-surface-1);
  --openrolesindex-c-button-fg: var(--openrolesindex-text);
  --openrolesindex-c-button-border: var(--openrolesindex-border-strong);
  --openrolesindex-c-button-primary-bg: var(--openrolesindex-accent);
  --openrolesindex-c-button-primary-hover: var(--openrolesindex-accent-strong);
  --openrolesindex-c-button-primary-fg: var(--openrolesindex-on-accent);
  --openrolesindex-c-button-apply-fg: var(--openrolesindex-accent-text);
  --openrolesindex-c-button-hover-bg: var(--openrolesindex-surface-2);

  --openrolesindex-c-input-bg: var(--openrolesindex-surface-1);
  --openrolesindex-c-input-border: var(--openrolesindex-border-strong);
  --openrolesindex-c-input-border-focus: var(--openrolesindex-accent-text);

  --openrolesindex-c-icon: var(--openrolesindex-accent-text);
  --openrolesindex-c-link-fg: var(--openrolesindex-accent-text);
  --openrolesindex-c-link-decoration: none;
  --openrolesindex-c-quote-bar: var(--openrolesindex-highlight);
}
/* brand radius wins: a client theme's radius keyword also picks the control shape, over the style's own (higher specificity) */
:root[data-brand-radius][data-radius="round"] { --openrolesindex-c-control-radius: var(--openrolesindex-radius-pill); }
:root[data-brand-radius][data-radius="soft"]  { --openrolesindex-c-control-radius: var(--openrolesindex-radius-md); }
:root[data-brand-radius][data-radius="sharp"] { --openrolesindex-c-control-radius: var(--openrolesindex-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  :root { --openrolesindex-dur-fast: 0.01ms; --openrolesindex-dur: 0.01ms; --openrolesindex-dur-slow: 0.01ms; --openrolesindex-c-hover-lift: 0px !important; --openrolesindex-c-press-scale: 1 !important; }
}

/* ---------- aliases: the pre-theming token names, mapped to the semantic ones (one release; apply.css still reads them) ---------- */
:root {
  --openrolesindex-primary: var(--openrolesindex-accent); --openrolesindex-primary-fg: var(--openrolesindex-on-accent); --openrolesindex-primary-soft: var(--openrolesindex-accent-soft);
  --openrolesindex-bg: var(--openrolesindex-surface-1); --openrolesindex-bg-2: var(--openrolesindex-surface-2); --openrolesindex-bg-3: var(--openrolesindex-surface-3);
  --openrolesindex-fg: var(--openrolesindex-text); --openrolesindex-muted: var(--openrolesindex-text-muted); --openrolesindex-focus: var(--openrolesindex-focus-ring);
  --openrolesindex-radius: var(--openrolesindex-radius-md); --openrolesindex-font: var(--openrolesindex-font-body);
  --s-1: var(--openrolesindex-space-1); --s-2: var(--openrolesindex-space-2); --s-3: var(--openrolesindex-space-3); --s-4: var(--openrolesindex-space-4); --s-5: var(--openrolesindex-space-5); --s-6: var(--openrolesindex-space-6);
  --t-title: var(--openrolesindex-text-title); --t-fact: var(--openrolesindex-text-fact); --t-meta: var(--openrolesindex-text-meta); --t-helper: var(--openrolesindex-text-helper);
  --safe-b: var(--openrolesindex-safe-b);
}

/* ---------- browsers without light-dark(): the light theme, with plain color-mix (no relative colours) ---------- */
@supports not (color: light-dark(white, black)) {
  :root, :root[data-theme] {
    color-scheme: light;
    --openrolesindex-surface-1: var(--openrolesindex-seed-canvas);
    --openrolesindex-surface-2: color-mix(in oklch, color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-s2-l), var(--openrolesindex-seed-ink)) calc(100% - var(--openrolesindex-tint)), var(--openrolesindex-seed-brand));
    --openrolesindex-surface-3: color-mix(in oklch, color-mix(in oklch, var(--openrolesindex-seed-canvas) var(--openrolesindex-s3-l), var(--openrolesindex-seed-ink)) calc(100% - var(--openrolesindex-tint) * 1.6), var(--openrolesindex-seed-brand));
    --openrolesindex-text: var(--openrolesindex-seed-ink);
    --openrolesindex-text-muted: color-mix(in oklch, var(--openrolesindex-seed-ink) 72%, var(--openrolesindex-seed-canvas));
    --openrolesindex-border: color-mix(in oklch, var(--openrolesindex-seed-ink) var(--openrolesindex-border-l), var(--openrolesindex-seed-canvas));
    --openrolesindex-border-strong: color-mix(in oklch, var(--openrolesindex-seed-ink) 58%, var(--openrolesindex-seed-canvas));
    --openrolesindex-hilite: transparent; --openrolesindex-edge: transparent;
    --openrolesindex-accent: var(--openrolesindex-seed-brand);
    --openrolesindex-accent-strong: color-mix(in oklch, var(--openrolesindex-seed-brand) 86%, var(--openrolesindex-seed-ink));
    --openrolesindex-on-accent: var(--openrolesindex-seed-brand-contrast);
    --openrolesindex-accent-soft: color-mix(in oklch, var(--openrolesindex-seed-brand) var(--openrolesindex-soft-l), var(--openrolesindex-seed-canvas));
    --openrolesindex-accent-text: color-mix(in oklch, var(--openrolesindex-seed-brand) var(--openrolesindex-accent-text-mix), var(--openrolesindex-seed-ink));
    --openrolesindex-highlight: var(--openrolesindex-seed-highlight, var(--openrolesindex-accent-text));
    --openrolesindex-danger: #b42318; --openrolesindex-warn: #9a3412; --openrolesindex-success: #166534;
    --openrolesindex-hl: color-mix(in srgb, #f5c542 45%, var(--openrolesindex-surface-1));
    --openrolesindex-scrim: color-mix(in oklch, var(--openrolesindex-seed-ink) 46%, transparent);
    --openrolesindex-shadow-ink: var(--openrolesindex-seed-ink);
  }
}

/* Style: Soft (the default). Rounded, tinted rail, results as raised tiles, layered soft shadows, sentence-case labels, a hover lift.
   Loaded after tokens-core.css; sets the direction's knobs and component tokens only (design/widget-theming/the decision log, A). */
:root {
  --openrolesindex-lift: 46%; --openrolesindex-tint: 5%; --openrolesindex-w-display: 650;
  --openrolesindex-dark-depth: 100%; --openrolesindex-s2-d: 90%; --openrolesindex-s3-d: 83%; --openrolesindex-border-d: 18%; --openrolesindex-strong-d: 48%; --openrolesindex-muted-d: 76%;
  --openrolesindex-soft-l: 9%; --openrolesindex-soft-d: 20%;
  --openrolesindex-rows: 1;
  /* type scale: medium (the core defaults); labels stay sentence case */
  --openrolesindex-c-label-fg: var(--openrolesindex-text);
  /* elevation: layered, low contrast; in dark an edge ring and a top highlight carry the depth */
  --openrolesindex-shadow-1: 0 1px 2px color-mix(in oklch, var(--openrolesindex-shadow-ink) 6%, transparent), 0 3px 10px color-mix(in oklch, var(--openrolesindex-shadow-ink) 7%, transparent), inset 0 1px 0 var(--openrolesindex-hilite);
  --openrolesindex-shadow-2: 0 2px 4px color-mix(in oklch, var(--openrolesindex-shadow-ink) 5%, transparent), 0 8px 20px color-mix(in oklch, var(--openrolesindex-shadow-ink) 9%, transparent), 0 20px 44px color-mix(in oklch, var(--openrolesindex-shadow-ink) 12%, transparent), 0 0 0 1px var(--openrolesindex-edge), inset 0 1px 0 var(--openrolesindex-hilite);
  --openrolesindex-shadow-3: 0 4px 8px color-mix(in oklch, var(--openrolesindex-shadow-ink) 6%, transparent), 0 16px 32px color-mix(in oklch, var(--openrolesindex-shadow-ink) 11%, transparent), 0 40px 80px color-mix(in oklch, var(--openrolesindex-shadow-ink) 20%, transparent), 0 0 0 1px var(--openrolesindex-edge), inset 0 1px 0 var(--openrolesindex-hilite);
  --openrolesindex-c-panel-border: color-mix(in oklch, var(--openrolesindex-border) 60%, transparent);
  --openrolesindex-c-hover-lift: -1px; --openrolesindex-c-press-scale: 0.98;
  /* rows: separate raised tiles on the tinted rail */
  --openrolesindex-c-row-bg: light-dark(var(--openrolesindex-surface-1), var(--openrolesindex-surface-3)); --openrolesindex-c-row-radius: var(--openrolesindex-radius-md);
  --openrolesindex-c-row-shadow: var(--openrolesindex-shadow-1); --openrolesindex-c-row-shadow-hover: var(--openrolesindex-shadow-2); --openrolesindex-c-row-hover-bg: light-dark(var(--openrolesindex-surface-1), var(--openrolesindex-surface-3));
  --openrolesindex-c-row-divider: transparent; --openrolesindex-c-row-gap: var(--openrolesindex-space-3); --openrolesindex-c-row-pad-x: var(--openrolesindex-space-4);
  --openrolesindex-c-row-active-bg: var(--openrolesindex-accent-soft);
  /* job-detail facts: a soft card; comparison: a rounded table */
  --openrolesindex-c-facts-bg: var(--openrolesindex-surface-2); --openrolesindex-c-facts-border: 1px solid var(--openrolesindex-border); --openrolesindex-c-facts-radius: var(--openrolesindex-radius-md); --openrolesindex-c-facts-pad: var(--openrolesindex-space-4); --openrolesindex-c-facts-shadow: var(--openrolesindex-shadow-1);
  --openrolesindex-c-table-shadow: var(--openrolesindex-shadow-1);
}
@supports not (color: light-dark(white, black)) {
  :root { --openrolesindex-c-row-bg: var(--openrolesindex-surface-1); --openrolesindex-c-row-hover-bg: var(--openrolesindex-surface-1); }
}


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--openrolesindex-surface-1);color:var(--openrolesindex-text);font:var(--openrolesindex-text-body)/var(--openrolesindex-lh) var(--openrolesindex-font-body);-webkit-font-smoothing:antialiased}
.portal{min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:900px){.wrap{padding:0 32px}}
a{color:var(--openrolesindex-c-link-fg);text-decoration:var(--openrolesindex-c-link-decoration)}
a:hover{text-decoration:underline}
p a,li>p a,.inline-link{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:3px solid var(--openrolesindex-focus-ring);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,h4{font-family:var(--openrolesindex-font-display);font-weight:var(--openrolesindex-w-display);letter-spacing:var(--openrolesindex-track-display);line-height:var(--openrolesindex-lh-tight);margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
mark{background:var(--openrolesindex-hl);color:inherit;border-radius:3px;padding:0 .15em}
img{max-width:100%}
/* header */
.top{border-bottom:1px solid var(--openrolesindex-border);background:var(--openrolesindex-surface-1)}
.top .wrap{display:flex;align-items:center;gap:var(--openrolesindex-space-4);min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--openrolesindex-font-display);font-weight:var(--openrolesindex-w-display);font-size:1.0625rem;color:var(--openrolesindex-text);text-decoration:none;white-space:nowrap}
.logo i{width:28px;height:28px;border-radius:9px;background:var(--openrolesindex-accent);display:inline-grid;place-items:center}
.logo i::before{content:"";width:12px;height:12px;border:3px solid var(--openrolesindex-on-accent);border-radius:50%}
.top nav{margin-left:auto}
.top nav ul{display:flex;gap:var(--openrolesindex-space-2)}
.top nav a{display:inline-flex;align-items:center;min-height:var(--openrolesindex-touch);padding:0 var(--openrolesindex-space-3);border-radius:var(--openrolesindex-c-control-radius);color:var(--openrolesindex-text);font-weight:500;text-decoration:none}
.top nav a:hover{background:var(--openrolesindex-surface-2)}
.top nav a[aria-current]{background:var(--openrolesindex-accent-soft);color:var(--openrolesindex-accent-text)}
.top details.menu{display:none;margin-left:auto;position:relative}
.top details.menu summary{list-style:none;display:inline-flex;align-items:center;min-height:var(--openrolesindex-touch);border:1px solid var(--openrolesindex-c-button-border);border-radius:var(--openrolesindex-c-control-radius);background:var(--openrolesindex-c-button-bg);color:var(--openrolesindex-text);font-weight:600;padding:0 var(--openrolesindex-space-3);cursor:pointer}
.top details.menu summary::-webkit-details-marker{display:none}
.top details.menu ul{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--openrolesindex-surface-1);border:1px solid var(--openrolesindex-border);border-radius:var(--openrolesindex-radius-md);box-shadow:var(--openrolesindex-shadow-1);padding:6px;z-index:5;display:flex;flex-direction:column;gap:2px}
.top details.menu a{display:flex;min-height:var(--openrolesindex-touch);align-items:center;padding:0 var(--openrolesindex-space-3);border-radius:var(--openrolesindex-c-control-radius);color:var(--openrolesindex-text);text-decoration:none}
.top details.menu a[aria-current]{background:var(--openrolesindex-accent-soft);color:var(--openrolesindex-accent-text)}
@media(max-width:899px){.top nav{display:none}.top details.menu{display:block}}
/* footer */
.foot{margin-top:auto;border-top:1px solid var(--openrolesindex-border);background:var(--openrolesindex-surface-2);color:var(--openrolesindex-text-muted);font-size:var(--openrolesindex-text-meta);line-height:var(--openrolesindex-lh-meta)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:var(--openrolesindex-space-3) var(--openrolesindex-space-5);padding-top:var(--openrolesindex-space-5);padding-bottom:var(--openrolesindex-space-5)}
.foot a{color:var(--openrolesindex-text-muted)}
/* text helpers */
.eyebrow{font-size:var(--openrolesindex-text-label);font-weight:var(--openrolesindex-w-label);letter-spacing:var(--openrolesindex-track-label);text-transform:var(--openrolesindex-label-transform);color:var(--openrolesindex-text-muted)}
.muted{color:var(--openrolesindex-text-muted)}
.meta{font-size:var(--openrolesindex-text-meta);line-height:var(--openrolesindex-lh-meta);color:var(--openrolesindex-text-muted)}
.helper{font-size:var(--openrolesindex-text-helper);line-height:var(--openrolesindex-lh-meta);color:var(--openrolesindex-text-muted)}
.num{font-family:var(--openrolesindex-font-num);font-variant-numeric:tabular-nums}
.hero-h{font-size:clamp(1.75rem,2.2vw + 1rem,var(--openrolesindex-text-hero))}
.display{font-size:var(--openrolesindex-text-display)}
.crumbs{font-size:var(--openrolesindex-text-meta);color:var(--openrolesindex-text-muted);padding:var(--openrolesindex-space-3) 0 0;display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs a{color:var(--openrolesindex-text-muted)}
/* buttons, chips, inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--openrolesindex-touch);padding:0 var(--openrolesindex-space-4);border-radius:var(--openrolesindex-c-control-radius);border:1px solid var(--openrolesindex-c-button-border);background:var(--openrolesindex-c-button-bg);color:var(--openrolesindex-c-button-fg);font:inherit;font-weight:var(--openrolesindex-w-strong);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--openrolesindex-c-button-hover-bg);text-decoration:none}
.btn.primary{background:var(--openrolesindex-c-button-primary-bg);border-color:transparent;color:var(--openrolesindex-c-button-primary-fg)}
.btn.primary:hover{background:var(--openrolesindex-c-button-primary-hover)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--openrolesindex-accent-text)}
.btn.sm{min-height:36px;padding:0 var(--openrolesindex-space-3);font-size:var(--openrolesindex-text-meta)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;text-align:left;min-height:36px;padding:var(--openrolesindex-c-chip-pad);border-radius:var(--openrolesindex-c-control-radius);border:1px solid var(--openrolesindex-c-chip-border);background:var(--openrolesindex-c-chip-bg);color:var(--openrolesindex-c-chip-fg);font:inherit;font-size:var(--openrolesindex-text-chip);cursor:pointer;text-decoration:none}
.chip:hover{background:var(--openrolesindex-c-chip-hover-bg);border-color:var(--openrolesindex-c-chip-hover-border);text-decoration:none}
.chip .n{color:var(--openrolesindex-c-chip-count);font-size:var(--openrolesindex-text-meta);font-family:var(--openrolesindex-font-num)}
.chip.on{background:var(--openrolesindex-accent-soft);border-color:var(--openrolesindex-accent-text);color:var(--openrolesindex-accent-text)}
.chip .k{color:var(--openrolesindex-text-muted);font-weight:400}
.chip.on .k{color:inherit;opacity:.8}
.chip .x{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:inherit;text-decoration:none;font-size:1rem;line-height:1;margin-right:-6px}
.chip .x:hover{background:var(--openrolesindex-surface-1)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--openrolesindex-text-label);font-weight:var(--openrolesindex-w-label);color:var(--openrolesindex-text)}
.input,input[type=text],input[type=search],input[type=email],input[type=number],select{min-height:var(--openrolesindex-touch);padding:0 var(--openrolesindex-space-4);border:1px solid var(--openrolesindex-c-input-border);border-radius:var(--openrolesindex-c-control-radius);background:var(--openrolesindex-c-input-bg);color:var(--openrolesindex-text);font:inherit;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--openrolesindex-c-input-border-focus)}
/* composer */
.composer{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;padding:8px;border:1px solid var(--openrolesindex-c-input-border);border-radius:var(--openrolesindex-radius-lg);background:var(--openrolesindex-c-input-bg);box-shadow:var(--openrolesindex-shadow-1)}
.composer textarea,.composer input{flex:1 1 240px;min-height:var(--openrolesindex-touch);border:0;background:transparent;color:var(--openrolesindex-text);font:inherit;line-height:var(--openrolesindex-lh);padding:10px 12px;resize:none;outline:none;width:auto}
.composer .btn{align-self:flex-end}
@media(max-width:599px){.composer .btn{flex:1 1 100%}}
.composer:focus-within{border-color:var(--openrolesindex-c-input-border-focus);box-shadow:var(--openrolesindex-halo)}
/* cards */
.card{background:var(--openrolesindex-c-row-bg);border-radius:var(--openrolesindex-c-row-radius);box-shadow:var(--openrolesindex-c-row-shadow);padding:var(--openrolesindex-space-4);border:1px solid var(--openrolesindex-c-panel-border)}
.card.soft{background:var(--openrolesindex-c-facts-bg);box-shadow:none}
.job h3{font-size:var(--openrolesindex-text-title);font-weight:var(--openrolesindex-w-title);font-family:var(--openrolesindex-font-body);letter-spacing:0;line-height:1.3}
.job h3 a{color:var(--openrolesindex-text);text-decoration:none}
.job h3 a:hover{text-decoration:underline;text-decoration-color:var(--openrolesindex-c-row-title-decoration)}
.job .emp{font-size:var(--openrolesindex-text-meta);color:var(--openrolesindex-text-muted);margin-top:2px}
.job .facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:var(--openrolesindex-text-fact)}
.job .facts span{display:inline-flex;align-items:center;gap:6px}
.job .pay{font-weight:var(--openrolesindex-w-strong);font-family:var(--openrolesindex-font-num)}
.quote{margin:10px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--openrolesindex-c-quote-bar);font-size:var(--openrolesindex-text-meta);line-height:var(--openrolesindex-lh-meta);color:var(--openrolesindex-text-muted)}
.quote q{quotes:"\201C" "\201D"}
.quote .src{display:block;font-size:var(--openrolesindex-text-helper);margin-top:2px}
.job.compact{padding:var(--openrolesindex-space-3) var(--openrolesindex-space-4)}
.job.compact .quote{margin-top:6px}
/* tri-state facts */
.tri{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--openrolesindex-c-pill-radius);font-size:var(--openrolesindex-text-helper);font-weight:600;line-height:1.5;white-space:nowrap}
.tri::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tri.stated{background:var(--openrolesindex-accent-soft);color:var(--openrolesindex-accent-text)}
.tri.conflicts{background:color-mix(in oklch,var(--openrolesindex-warn) 12%,var(--openrolesindex-surface-1));color:var(--openrolesindex-warn)}
.tri.none{background:var(--openrolesindex-surface-3);color:var(--openrolesindex-text-muted)}
.tri.none::before{background:transparent;border:1.5px dashed currentColor}
.trirow{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:10px;align-items:center}
.trirow .lbl{font-size:var(--openrolesindex-text-helper);color:var(--openrolesindex-text-muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:var(--openrolesindex-text-helper);color:var(--openrolesindex-text-muted)}
.legend .lg{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.count{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:var(--openrolesindex-c-pill-radius);background:var(--openrolesindex-surface-3);color:var(--openrolesindex-text-muted);font-size:var(--openrolesindex-text-helper);font-weight:600;font-family:var(--openrolesindex-font-num)}
/* conversation bits */
.msg{display:flex;flex-direction:column;gap:6px}
.msg .who{font-size:var(--openrolesindex-text-helper);font-weight:600;color:var(--openrolesindex-text-muted)}
.msg.user p{align-self:flex-start;background:var(--openrolesindex-c-bubble-user-bg);color:var(--openrolesindex-c-bubble-user-fg);border-radius:var(--openrolesindex-c-bubble-radius);padding:10px 14px}
.msg.bot{gap:10px}
.msg .lbl{font-size:var(--openrolesindex-text-label);font-weight:var(--openrolesindex-w-label);color:var(--openrolesindex-text-muted);margin-top:4px}
.zero{padding:12px 16px;border-left:3px solid var(--openrolesindex-highlight);background:var(--openrolesindex-surface-2);border-radius:0 var(--openrolesindex-radius-sm) var(--openrolesindex-radius-sm) 0}
/* rows (employer lists) */
.rows{display:flex;flex-direction:column;gap:var(--openrolesindex-c-row-gap)}
.row{display:grid;grid-template-columns:1fr auto;gap:var(--openrolesindex-space-1) var(--openrolesindex-space-4);align-items:center;padding:var(--openrolesindex-space-3) var(--openrolesindex-c-row-pad-x);background:var(--openrolesindex-c-row-bg);border-radius:var(--openrolesindex-c-row-radius);box-shadow:var(--openrolesindex-c-row-shadow);border:1px solid var(--openrolesindex-c-panel-border)}
.row .t{font-weight:var(--openrolesindex-w-title);color:var(--openrolesindex-text);text-decoration:none;font-size:var(--openrolesindex-text-title)}
.row .m{grid-column:1;font-size:var(--openrolesindex-text-meta);color:var(--openrolesindex-text-muted)}
.row .pay{grid-column:2;grid-row:1/3;text-align:right;font-variant-numeric:tabular-nums;font-size:var(--openrolesindex-text-meta);color:var(--openrolesindex-text-muted)}
.row .pay b{display:block;font-size:var(--openrolesindex-text-fact);color:var(--openrolesindex-text);font-family:var(--openrolesindex-font-num)}
.row .pay.nm{font-style:italic}
@media(max-width:720px){.row{grid-template-columns:1fr}.row .pay{grid-column:1;grid-row:auto;text-align:left}.row .pay b{display:inline;margin-right:.4rem}}
/* pager, trust, misc */
.pager{display:flex;flex-wrap:wrap;gap:var(--openrolesindex-space-3);align-items:center;margin-top:var(--openrolesindex-space-5);font-size:var(--openrolesindex-text-meta);color:var(--openrolesindex-text-muted)}
.trust{padding:var(--openrolesindex-space-6) 0 var(--openrolesindex-space-7)}
.trust ul{display:grid;gap:var(--openrolesindex-space-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.trust li{background:var(--openrolesindex-surface-2);border-radius:var(--openrolesindex-radius-md);padding:var(--openrolesindex-space-5)}
.trust h3{font-size:var(--openrolesindex-text-title);margin-bottom:8px}
.trust p{color:var(--openrolesindex-text-muted)}
.sec-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--openrolesindex-space-3);margin-bottom:var(--openrolesindex-space-3)}
main{flex:1}