/* DPDP Star UI (4.8): tokens, base and components for the console and the rights portal.
   Built from the dpdpa.support design system (site.css token names and values). Self-hosted, no third party.
   Tenant brand: /brand.css (served by the app, linked after this file) overrides only the --brand-* tokens.
   Dark mode: brand colours only (navy family, red, white); follows the system unless data-theme is set. */

/* ---- 1. Fonts (SIL OFL 1.1, licences in /vendor/fonts/) ---- */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/source-serif-4-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20B9; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B8, U+20BA-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- 2. Tokens ---- */
:root {
  /* brand: tenant-overridable through /brand.css */
  --brand-primary: #1A2B6D;
  --brand-primary-hover: #121E4C;
  --brand-primary-tint: #EEF0F7;
  --on-brand-primary: #FFFFFF;
  --brand-accent: #D41317;
  --brand-accent-hover: #B01014;
  --on-brand-accent: #FFFFFF;
  /* platform-fixed */
  --ink: #1E2A5E;
  --bg: #FFFFFF;
  --bg-alt: #F7F8FA;
  --bg-sunk: #EEF0F3;
  --surface: #FFFFFF;
  --text: #1B2240;
  --muted: #4E5677;
  --faint: #5F6682;
  --line: #E3E6EE;
  --line-strong: #C9CEDC;
  --line-input: #8A92B2;
  --header-bg: rgba(255,255,255,0.96);
  --scrim: rgba(14,22,56,0.48);
  --fill-dark: #1E2A5E;           /* dark neutral fill (was slate-700/800/900); white text stays legible in both themes */
  --fill-dark-hover: #121E4C;
  /* semantic tones: fg / bg / ring */
  --danger: #9B0F12; --danger-bg: #FDECEC; --danger-ring: transparent;
  --danger-solid: #B01014; --danger-solid-hover: #8E0D10;
  --success-solid: #1B6E3A;
  --success: #1B6E3A; --success-bg: #E8F4EC; --success-ring: transparent;
  --warning: #7A4A00; --warning-bg: #FDF3E1; --warning-ring: transparent;
  --info: #1A2B6D; --info-bg: #EEF0F7; --info-ring: transparent;
  --neutral: #4E5677; --neutral-bg: #EEF0F3; --neutral-ring: transparent;
  /* type */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Noto Sans Devanagari', 'Nirmala UI';
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 26px; --fs-stat: 30px;
  /* shape */
  --radius: 12px; --radius-sm: 8px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30,42,94,0.06), 0 4px 12px -6px rgba(30,42,94,0.16);
  --shadow: 0 1px 2px rgba(30,42,94,0.06), 0 12px 32px -16px rgba(30,42,94,0.22);
  --shadow-btn: 0 1px 2px rgba(14,22,56,0.12), 0 4px 12px -6px rgba(14,22,56,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  --ease: cubic-bezier(.2,0,0,1);
  --gutter: 16px;
  --sidebar-w: 248px;
  --topbar-h: 56px;
  /* page-style tokens (renamed from --tsi-*, DPDPA-nkmu); they follow the brand tokens above */
  --brand-primary-25: var(--bg-alt);
  --brand-primary-50: var(--brand-primary-tint);
  --brand-primary-100: var(--brand-primary-tint);
  --brand-primary-200: var(--line-strong);
  --brand-primary-800: var(--brand-primary-hover);
  --brand-dark: var(--ink);
  /* old names, kept as aliases until 2027-01-19 for pages and themes that still read them */
  --tsi-primary: var(--brand-primary);
  --tsi-primary-25: var(--brand-primary-25);
  --tsi-primary-50: var(--brand-primary-50);
  --tsi-primary-100: var(--brand-primary-100);
  --tsi-primary-200: var(--brand-primary-200);
  --tsi-primary-800: var(--brand-primary-800);
  --tsi-accent: var(--brand-accent);
  --tsi-dark: var(--brand-dark);
  --background: var(--bg-alt);
  --card-bg: var(--surface);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand-primary: #5F6B99; --brand-primary-hover: #7781A8; --brand-primary-tint: #1D2549; --on-brand-primary: #FFFFFF;
  --ink: #FFFFFF; --bg: #0E1638; --bg-alt: #121A45; --bg-sunk: #1B2757; --surface: #16214D;
  --text: #E8EBF5; --muted: #A7B1DA; --faint: #9AA4D2;
  --line: #2A3666; --line-strong: #3A4780; --line-input: #6B7AC4;
  --header-bg: rgba(14,22,56,0.94); --scrim: rgba(0,0,0,0.6);
  --fill-dark: #2A3666; --fill-dark-hover: #3A4780;
  --danger: #FF8A8D; --danger-bg: #16214D; --danger-ring: #FF8A8D;
  --success: #C9D0F0; --success-bg: #1F2B5C; --success-ring: transparent; --success-solid: #2A3666;
  --warning: #FF8A8D; --warning-bg: #16214D; --warning-ring: #FF8A8D;
  --info: #C9D0F0; --info-bg: #1F2B5C; --info-ring: transparent;
  --neutral: #A7B1DA; --neutral-bg: #1B2757; --neutral-ring: transparent;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -14px rgba(0,0,0,0.65);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35), 0 4px 12px -6px rgba(0,0,0,0.5);
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---- 3. Base (replaces the Tailwind preflight) ---- */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--line); }
html { -webkit-text-size-adjust: 100%; line-height: 1.5; tab-size: 4; }
body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; color: var(--text); background: var(--bg-alt); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; color: var(--ink); }
h1 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
h2 { line-height: 1.25; }
p, blockquote, dl, dd, figure, pre, hr { margin: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: 600; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }
small { font-size: 80%; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
input, select, textarea { background-color: var(--surface); color: var(--text); }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--faint); }
textarea { resize: vertical; }
img, svg, video, canvas, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
hr { height: 0; border-top-width: 1px; }
summary { display: list-item; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fill-dark); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.mono, .font-mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
::selection { background: var(--brand-primary-tint); color: var(--text); }

/* ---- 4. Components ---- */
/* Buttons (site .btn: pill, shadow, 600) */
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-base); line-height: 1.2; text-align: center; border: 0; cursor: pointer; transition: background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.s-btn:hover { transform: translateY(-1px); }
.s-btn:active { transform: translateY(1px); }
.s-btn--primary { background: var(--brand-primary); color: var(--on-brand-primary); box-shadow: var(--shadow-btn); }
.s-btn--primary:hover { background: var(--brand-primary-hover); }
.s-btn--accent { background: var(--brand-accent); color: var(--on-brand-accent); box-shadow: var(--shadow-btn); }
.s-btn--accent:hover { background: var(--brand-accent-hover); }
.s-btn--ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.s-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.s-btn--danger { background: var(--danger-solid); color: #fff; box-shadow: var(--shadow-btn); }
.s-btn--danger:hover { background: var(--danger-solid-hover); }
.s-btn--quiet { background: transparent; color: var(--ink); padding-inline: 8px; }
.s-btn--quiet:hover { text-decoration: underline; transform: none; }
.s-btn--block { width: 100%; }
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.s-btn--primary:focus-visible, .s-btn--accent:focus-visible, .s-btn--danger:focus-visible { box-shadow: 0 0 0 2px var(--bg); }

/* Forms */
.s-field { display: grid; gap: 6px; margin-bottom: 16px; }
.s-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.s-req { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: var(--fs-xs); }
.s-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 16px; }
.s-input:focus { border-color: var(--ink); outline: 3px solid var(--ink); outline-offset: 1px; }
.s-help { font-size: var(--fs-sm); color: var(--muted); }
.s-error { color: var(--danger); font-size: var(--fs-sm); font-weight: 600; }
.s-input[aria-invalid="true"] { border-color: var(--danger); }
.s-alert { border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-sm); background: var(--danger-bg); color: var(--danger); box-shadow: inset 4px 0 0 var(--danger); }
.s-alert--ok { background: var(--success-bg); color: var(--success); box-shadow: inset 4px 0 0 var(--success); }
.s-alert--info { background: var(--info-bg); color: var(--info); box-shadow: inset 4px 0 0 var(--info); }
/* low-credit band (shell.js, 11 Oct 2026) */
.s-credit-band { margin-bottom: 16px; }
.s-credit-band a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Cards */
.s-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.s-card h2 { font-family: var(--font-serif); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 8px; }

/* Page header */
.s-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.s-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.s-page-head h1 { font-size: var(--fs-xl); }
.s-page-desc { color: var(--muted); font-size: var(--fs-sm); max-width: 68ch; margin-top: 4px; }

/* Stat cards */
.s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.s-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.s-stat-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.s-stat-figure { font-family: var(--font-serif); font-size: var(--fs-stat); font-weight: 700; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; line-height: 1.1; margin-top: 6px; }

/* Status badges: icon + label, never colour alone. JS sets data-status; the label is text. */
.s-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral); box-shadow: inset 0 0 0 1px var(--neutral-ring); }
.s-badge::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--ico, var(--ico-dot)) center / contain no-repeat; mask: var(--ico, var(--ico-dot)) center / contain no-repeat; }
.s-badge[data-tone="info"] { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-ring); }
.s-badge[data-tone="success"] { background: var(--success-bg); color: var(--success); box-shadow: inset 0 0 0 1px var(--success-ring); }
.s-badge[data-tone="warning"] { background: var(--warning-bg); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-ring); }
.s-badge[data-tone="danger"] { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.s-badge[data-tone="danger-solid"] { background: var(--danger-solid); color: #fff; box-shadow: none; }
.s-badge[data-style="outline"] { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.s-badge[data-style="dashed"] { background: transparent; box-shadow: none; outline: 1px dashed currentColor; outline-offset: -1px; }
:root {
  --ico-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='3.5'/%3E%3C/svg%3E");
  --ico-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1a5 5 0 1 0 0 10A5 5 0 0 0 6 1Zm0 1.5v7a3.5 3.5 0 0 1 0-7Z'/%3E%3C/svg%3E");
  --ico-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.6 8.6 2.2 6.2l-1 1 3.4 3.4 6.4-6.4-1-1z'/%3E%3C/svg%3E");
  --ico-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 1.5 3.5 3.5 3.5-3.5 1 1L7 6l3.5 3.5-1 1L6 7l-3.5 3.5-1-1L5 6 1.5 2.5z'/%3E%3C/svg%3E");
  --ico-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1 1.5 5.5l1 1L5.3 3.7V11h1.4V3.7l2.8 2.8 1-1z'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8a5.2 5.2 0 1 0 0 10.4A5.2 5.2 0 0 0 6 .8Zm0 1.4a3.8 3.8 0 1 1 0 7.6 3.8 3.8 0 0 1 0-7.6ZM5.3 3v3.3l2.4 1.5.7-1.1-1.7-1.1V3z'/%3E%3C/svg%3E");
  --ico-rotate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.2a4.8 4.8 0 0 0-4.4 2.9L.5 3.4v3.4h3.4L2.8 5.7A3.4 3.4 0 1 1 6 10.4v1.4A4.8 4.8 0 1 0 6 1.2Z'/%3E%3C/svg%3E");
  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1a2.8 2.8 0 0 0-2.8 2.8V5H2v6h8V5H8.8V3.8A2.8 2.8 0 0 0 6 1Zm0 1.3c.8 0 1.5.7 1.5 1.5V5h-3V3.8c0-.8.7-1.5 1.5-1.5Z'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 1a4 4 0 1 0 2.3 7.3l2.7 2.7 1-1-2.7-2.7A4 4 0 0 0 5 1Zm0 1.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Z'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8 1.5 2.5v3.2c0 2.6 1.9 4.8 4.5 5.5 2.6-.7 4.5-2.9 4.5-5.5V2.5z'/%3E%3C/svg%3E");
  --ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8.4 1.2 10.8 3.6 4 10.4 1.2 10.8 1.6 8z'/%3E%3C/svg%3E");
  --ico-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 2h10v2.5H1zm.8 3.3h8.4V11H1.8zm2.7 1.4v1.2h3V6.7z'/%3E%3C/svg%3E");
  --ico-hold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5h2v9H3zm4 0h2v9H7z'/%3E%3C/svg%3E");
}
.s-badge[data-icon="half"] { --ico: var(--ico-half); } .s-badge[data-icon="tick"] { --ico: var(--ico-tick); }
.s-badge[data-icon="cross"] { --ico: var(--ico-cross); } .s-badge[data-icon="up"] { --ico: var(--ico-up); }
.s-badge[data-icon="clock"] { --ico: var(--ico-clock); } .s-badge[data-icon="rotate"] { --ico: var(--ico-rotate); }
.s-badge[data-icon="lock"] { --ico: var(--ico-lock); } .s-badge[data-icon="search"] { --ico: var(--ico-search); }
.s-badge[data-icon="shield"] { --ico: var(--ico-shield); } .s-badge[data-icon="pencil"] { --ico: var(--ico-pencil); }
.s-badge[data-icon="box"] { --ico: var(--ico-box); } .s-badge[data-icon="hold"] { --ico: var(--ico-hold); }

/* Deadline chip: day count in mono, absolute date in title */
.s-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--neutral); box-shadow: inset 0 0 0 1px var(--line-strong); }
.s-chip[data-tone="warning"] { background: var(--warning-bg); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-ring); }
.s-chip[data-tone="danger"] { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-ring); }
.s-chip[data-tone="danger-solid"] { background: var(--danger-solid); color: #fff; box-shadow: none; }
.s-chip[data-tone="closed"] { background: var(--neutral-bg); color: var(--neutral); box-shadow: none; }

/* Tables become cards below 768px (ui.js labels each cell from its column header) */
.s-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.s-table th { background: var(--bg-alt); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-align: left; padding: 10px 12px; }
.s-table td { padding: 12px; border-top: 1px solid var(--line); vertical-align: top; }
@media (max-width: 767px) {
  table.s-cardify, table.s-cardify tbody, table.s-cardify tr, table.s-cardify td { display: block; width: 100% !important; max-width: 100% !important; }
  table.s-cardify { table-layout: auto !important; min-width: 0 !important; }
  table.s-cardify thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  table.s-cardify tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; padding: 6px 4px; }
  table.s-cardify td { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; text-align: right !important; border: 0 !important; padding: 7px 12px !important; white-space: normal !important; overflow-wrap: anywhere; overflow: visible !important; text-overflow: clip !important; }
  table.s-cardify td::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
  table.s-cardify td:not([data-label])::before, table.s-cardify td[data-label=""]::before { content: none; }
  table.s-cardify td { overflow-wrap: break-word; word-break: normal; flex-wrap: wrap; }
  table.s-cardify td > button, table.s-cardify td > a, table.s-cardify td > .s-badge, table.s-cardify td > .s-chip { white-space: nowrap; flex: none; }
  table.s-cardify td[colspan] { justify-content: center; text-align: center !important; }
  .s-app .overflow-x-auto:has(> table.s-cardify) { overflow: visible; border: 0; box-shadow: none; }
}

/* Dialog / modal / toast */
.s-modal { border: 0; padding: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); width: min(480px, calc(100vw - 32px)); }
.s-modal::backdrop { background: var(--scrim); }
.s-modal-body { padding: 24px; }
.s-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.s-toast { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow), inset 4px 0 0 var(--info); padding: 12px 12px 12px 16px; font-size: var(--fs-sm); animation: s-rise .18s var(--ease); }
.s-toast[data-tone="success"] { box-shadow: var(--shadow), inset 4px 0 0 var(--success); }
.s-toast[data-tone="danger"] { box-shadow: var(--shadow), inset 4px 0 0 var(--danger); }
.s-toast p { flex: 1; margin: 2px 0; }
.s-toast button { min-width: 32px; min-height: 32px; border-radius: 8px; color: var(--muted); }
@media (max-width: 639px) { .s-toasts { left: 16px; right: 16px; width: auto; } }

/* Empty state */
.s-empty { text-align: center; color: var(--muted); padding: 32px 16px; }
.s-empty strong { display: block; color: var(--text); margin-bottom: 4px; }

/* Conversation thread (grievance replies) */
.s-thread { display: grid; gap: 12px; }
.s-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; background: var(--bg-alt); color: var(--text); border-bottom-left-radius: 4px; justify-self: start; overflow-wrap: anywhere; white-space: pre-wrap; }
.s-msg--staff { justify-self: end; background: var(--brand-primary-tint); border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.s-msg-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); margin-bottom: 4px; white-space: normal; }
.s-msg-head time { font-family: var(--font-mono); font-weight: 500; color: var(--muted); }
.s-msg-sys { text-align: center; font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 10px; }
.s-msg-sys::before, .s-msg-sys::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* "Powered by" credit: the text lives here, not in HTML, so the brand-name rewrite never touches it */
.s-powered { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--faint); min-height: 24px; text-decoration: none; }
.s-powered::before { content: ""; width: 11px; height: 14px; background: url('/vendor/brand-mark.svg') center / contain no-repeat; }
.s-powered::after { content: "Powered by DPDP Star"; }
/* dark: the small mark uses the mono-white artwork (logo/final brand note: mono white for small reversed use), no tile */
:root[data-theme="dark"] .s-powered::before { background-image: url('/vendor/brand-mark-mono-white.svg'); }
.s-powered:hover { color: var(--ink); text-decoration: underline; }
.s-byline::after { content: "by Cynor Sense"; }
.s-byline { font-size: var(--fs-xs); color: var(--faint); }

/* Logo: the DPDP Star shield has a light and a dark artwork; a tenant logo is shown as given (see below for dark) */
.s-logo { height: 28px; width: auto; max-width: 140px; object-fit: contain; border-radius: 6px; }
/* dark: the DPDP Star shield switches to its reverse artwork (white and navy tint, logo/final), never a white tile.
   Matched on the src the pages ship, so a tenant logo (BrandingFilter rewrites the src) is never replaced: it keeps its
   own artwork on a subtle navy tile, because a tenant gives no dark variant. */
:root[data-theme="dark"] img[src="/vendor/brand-mark.png"], :root[data-theme="dark"] img[src="/vendor/brand-mark.svg"] { content: url('/vendor/brand-mark-dark.svg'); }
:root[data-theme="dark"] :is(.s-logo, .s-mark):not([src="/vendor/brand-mark.png"]):not([src="/vendor/brand-mark.svg"]) { background: #1A2B6D; padding: 3px; border-radius: 4px; }

/* ---- 5. Console app shell ---- */
body.s-app { background: var(--bg-alt); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); padding: 0 !important; margin: 0; min-height: 100vh; display: block !important; }
.s-sidebar { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; transform: none; }
.s-side-brand { display: flex; align-items: center; gap: 10px; padding: 14px 18px; min-height: var(--topbar-h); border-bottom: 1px solid var(--line); color: var(--ink); }
.s-side-brand strong { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; display: block; }
.s-side-brand .s-byline { display: block; margin-top: 2px; }
.s-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.s-nav-group { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 6px; }
.s-nav-group:first-child { padding-top: 4px; }
.s-nav a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; font-size: var(--fs-base); text-decoration: none; transition: background-color .15s var(--ease); }
.s-nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--faint); }
.s-nav a:hover { background: var(--bg-alt); }
.s-nav a[aria-current="page"] { background: var(--brand-primary-tint); color: var(--ink); font-weight: 600; }
.s-nav a[aria-current="page"] svg { color: var(--ink); }
.s-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--brand-primary); }
.s-side-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.s-topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter); background: var(--header-bg); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); margin-left: var(--sidebar-w); }
.s-topbar-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-topbar-title .s-crumb { color: var(--faint); font-weight: 500; }
.s-menu-btn { display: none; width: 44px; height: 44px; margin-left: -10px; border-radius: 10px; align-items: center; justify-content: center; color: var(--ink); }
.s-menu-btn:hover { background: var(--bg-alt); }
.s-menu-btn svg, .s-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; }
.s-org { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); padding: 4px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.s-user { position: relative; }
.s-user-btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 4px; border-radius: var(--radius-pill); color: var(--text); }
.s-user-btn:hover { background: var(--bg-alt); }
.s-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-primary); color: var(--on-brand-primary); font-weight: 600; font-size: 13px; flex: none; }
.s-user-name { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-role { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--brand-primary-tint); color: var(--ink); white-space: nowrap; }
.s-user-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 70; }
.s-user-menu .s-menu-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: var(--fs-sm); color: var(--muted); display: grid; gap: 4px; }
.s-user-menu a, .s-user-menu button { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text); text-align: left; font-weight: 500; }
.s-user-menu a:hover, .s-user-menu button:hover { background: var(--bg-alt); }
.s-user-menu .s-signout { color: var(--danger); }
.s-scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
.s-main { margin-left: var(--sidebar-w); padding: 28px var(--gutter) 48px !important; min-width: 0; max-width: calc(1280px + var(--sidebar-w)); overflow: visible !important; animation: s-enter .18s var(--ease); }
.s-main > h1:first-child, .s-main h1.text-2xl, .s-main h1.text-3xl { font-size: var(--fs-xl) !important; }
.s-app.s-locked { overflow: hidden; }
@media (min-width: 1440px) { .s-main { padding-right: 48px !important; } }
@media (max-width: 1023px) {
  .s-sidebar { transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: none; }
  .s-sidebar.open { transform: none; box-shadow: var(--shadow); }
  .s-topbar, .s-main { margin-left: 0; }
  .s-menu-btn { display: inline-flex; }
}
@media (max-width: 639px) {
  .s-topbar .s-org, .s-user-name, .s-user-btn .s-role { display: none; }
  .s-main { padding-top: 20px !important; }
}

/* Legacy page hooks still used in page markup: route them through the tokens */
:is(.s-app, .s-login) .primary-text { color: var(--ink); }
:is(.s-app, .s-login) .primary-bg { background-color: var(--brand-primary); color: var(--on-brand-primary); }
:is(.s-app, .s-login) .primary-bg:hover { background-color: var(--brand-primary-hover); }
:is(.s-app, .s-login) .accent-text { color: var(--danger); }
:is(.s-app, .s-login) .border-primary { border-color: var(--brand-primary); }
.s-app .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.s-app main h1 { font-family: var(--font-serif); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }

/* Tailwind important modifier used by one modal */
.\!max-w-2xl { max-width: 42rem !important; }

/* ---- 6. Login card (console sign-in, password reset, setup) ---- */
body.s-login { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 24px 16px; background-color: var(--bg-alt); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 6px 6px; }
.s-login-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px 24px; }
.s-login-card--wide { max-width: 560px; }
.s-login-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); margin-bottom: 20px; }
.s-login-brand .s-logo { height: 40px; }
.s-login-brand strong { font-size: 18px; font-weight: 600; display: block; line-height: 1.1; }
.s-login-card h1 { font-size: var(--fs-xl); margin-bottom: 6px; }
.s-login-card .s-sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 20px; }
.s-login-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.s-pw { position: relative; }
.s-pw .s-input { padding-right: 52px; }
.s-pw-toggle { position: absolute; right: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); border-radius: var(--radius-sm); }
.s-pw-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.s-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.s-steps span { font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.s-steps span[aria-current="step"] { background: var(--brand-primary); color: var(--on-brand-primary); box-shadow: none; }

/* ---- 7. Rights portal scale (principal-facing: larger type, mobile-first) ---- */
html.s-rights-root { font-size: 106.25%; }
body.s-rights { --fs-xs: 13px; --fs-sm: 15px; --fs-base: 17px; --fs-md: 19px; --fs-lg: 24px; --fs-xl: clamp(28px, 6vw, 36px); font-size: var(--fs-base); line-height: 1.6; background: var(--bg); color: var(--text); }
.s-rights-foot { margin: 32px auto 16px; padding: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--muted); max-width: 640px; }
.s-theme-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border-radius: var(--radius-pill); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--surface); }
.s-theme-btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* ---- 8. Motion (transform/opacity only) and print ---- */
@keyframes s-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes s-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: #fff; --bg-alt: #fff; --surface: #fff; --text: #000; --ink: #000; --muted: #333; --line: #ccc; }
  .s-sidebar, .s-topbar, .s-scrim, .s-toasts, .skip-link { display: none !important; }
  .s-main { margin: 0 !important; padding: 0 !important; animation: none; }
}
/* ---- 9. Compatibility utilities: exactly the utility class names the pages and their scripts use (no Tailwind runtime), mapped to the tokens. Generated from a class scan; keep in sync when markup changes. ---- */
@keyframes s-spin{to{transform:rotate(360deg)}}
@keyframes s-pulse{50%{opacity:.5}}
.absolute{position:absolute}
.align-top{vertical-align:top}
.animate-pulse{animation:s-pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.animate-spin{animation:s-spin 1s linear infinite}
.bg-\[\#1A2B6D\]{background-color:var(--brand-primary)}
.bg-amber-100{background-color:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-ring)}
.bg-amber-50{background-color:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-ring)}
.bg-black{background-color:#000}
.bg-blue-100{background-color:var(--info-bg)}
.bg-blue-50{background-color:var(--info-bg)}
.bg-gray-100{background-color:var(--bg-sunk)}
.bg-gray-200{background-color:var(--line)}
.bg-gray-50{background-color:var(--bg-alt)}
.bg-green-100{background-color:var(--success-bg)}
.bg-green-50{background-color:var(--success-bg)}
.bg-green-600{background-color:var(--success)}
.bg-green-700{background-color:var(--success)}
.bg-indigo-600{background-color:var(--brand-primary)}
.bg-opacity-50{background-color:var(--scrim)}
.bg-orange-100{background-color:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-ring)}
.bg-purple-100{background-color:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-ring)}
.bg-red-100{background-color:var(--danger-bg);box-shadow:inset 0 0 0 1px var(--danger-ring)}
.bg-red-50{background-color:var(--danger-bg);box-shadow:inset 0 0 0 1px var(--danger-ring)}
.bg-red-600{background-color:var(--danger-solid)}
.bg-slate-100{background-color:var(--bg-sunk)}
.bg-slate-200{background-color:var(--line)}
.bg-slate-50{background-color:var(--bg-alt)}
.bg-slate-600{background-color:var(--fill-dark)}
.bg-slate-700{background-color:var(--fill-dark)}
.bg-slate-900{background-color:var(--fill-dark)}
.bg-teal-50{background-color:var(--brand-primary-tint)}
.bg-teal-600{background-color:var(--brand-primary)}
.bg-transparent{background-color:transparent}
.bg-white{background-color:var(--surface)}
.bg-yellow-100{background-color:var(--warning-bg);box-shadow:inset 0 0 0 1px var(--warning-ring)}
.block{display:block}
.border{border-width:1px}
.border-2{border-width:2px}
.border-amber-100{border-color:var(--warning-bg)}
.border-amber-200{border-color:var(--warning-bg)}
.border-amber-600{border-color:var(--warning)}
.border-b{border-bottom-width:1px}
.border-b-4{border-bottom-width:4px}
.border-blue-100{border-color:var(--info-bg)}
.border-blue-200{border-color:var(--info-bg)}
.border-blue-600{border-color:var(--brand-primary)}
.border-collapse{border-collapse:collapse}
.border-dashed{border-style:dashed}
.border-gray-200{border-color:var(--line)}
.border-gray-300{border-color:var(--line-input)}
.border-green-200{border-color:var(--success-bg)}
.border-green-500{border-color:var(--success)}
.border-indigo-500{border-color:var(--brand-primary)}
.border-indigo-600{border-color:var(--brand-primary)}
.border-l{border-left-width:1px}
.border-l-2{border-left-width:2px}
.border-l-4{border-left-width:4px}
.border-orange-600{border-color:var(--warning)}
.border-red-100{border-color:var(--danger-bg)}
.border-red-200{border-color:var(--danger-bg)}
.border-red-500{border-color:var(--danger)}
.border-red-600{border-color:var(--danger)}
.border-slate-100{border-color:var(--line)}
.border-slate-200{border-color:var(--line)}
.border-slate-300{border-color:var(--line-input)}
.border-slate-50{border-color:var(--line)}
.border-slate-900{border-color:var(--ink)}
.border-t{border-top-width:1px}
.border-t-2{border-top-width:2px}
.border-t-4{border-top-width:4px}
.border-teal-100{border-color:var(--line-strong)}
.border-teal-200{border-color:var(--line-strong)}
.border-teal-600{border-color:var(--brand-primary)}
.border-y{border-top-width:1px;border-bottom-width:1px}
.break-all{word-break:break-all}
.break-words{overflow-wrap:break-word}
.capitalize{text-transform:capitalize}
.col-span-2{grid-column:span 2/span 2}
.cursor-default{cursor:default}
.cursor-pointer{cursor:pointer}
.divide-gray-100>:not([hidden])~:not([hidden]){border-color:var(--line)}
.divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--line)}
.divide-slate-100>:not([hidden])~:not([hidden]){border-color:var(--line)}
.divide-slate-50>:not([hidden])~:not([hidden]){border-color:var(--line)}
.duration-150{transition-duration:.15s}
.duration-200{transition-duration:.2s}
.fixed{position:fixed}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.focus\:border-blue-500:focus{border-color:var(--brand-primary)}
.focus\:border-indigo-500:focus{border-color:var(--brand-primary)}
.focus\:border-primary-text{border-color:var(--ink)}
.focus\:border-transparent{border-color:transparent}
.focus\:outline-none{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2{box-shadow:0 0 0 2px var(--s-ring,var(--ink))}
.focus\:ring-blue-500:focus{--s-ring:var(--ink)}
.focus\:ring-indigo-500:focus{--s-ring:var(--ink)}
.focus\:ring-primary-text{--s-ring:var(--ink)}
.focus\:ring-teal-500:focus{--s-ring:var(--ink)}
.focus\:ring-teal-600:focus{--s-ring:var(--ink)}
.font-black{font-weight:700}
.font-bold{font-weight:600}
.font-medium{font-weight:500}
.font-mono{font-family:var(--font-mono);font-weight:500}
.font-normal{font-weight:400}
.font-semibold{font-weight:600}
.gap-0\.5{gap:0.125rem}
.gap-1{gap:0.25rem}
.gap-12{gap:3rem}
.gap-2{gap:0.5rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-0\.5{height:0.125rem}
.h-11{height:2.75rem}
.h-16{height:4rem}
.h-4{height:1rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.hidden{display:none}
.hover\:bg-gray-100:hover{background-color:var(--bg-sunk)}
.hover\:bg-gray-200:hover{background-color:var(--line)}
.hover\:bg-gray-300:hover{background-color:var(--line-strong)}
.hover\:bg-gray-50:hover{background-color:var(--bg-alt)}
.hover\:bg-green-50:hover{background-color:var(--success-bg)}
.hover\:bg-green-700:hover{background-color:var(--success)}
.hover\:bg-green-800:hover{background-color:var(--success)}
.hover\:bg-opacity-90{opacity:.92}
.hover\:bg-primary-dark{background-color:var(--brand-primary-hover)}
.hover\:bg-red-50:hover{background-color:var(--danger-bg);box-shadow:inset 0 0 0 1px var(--danger-ring)}
.hover\:bg-red-700:hover{background-color:var(--danger-solid-hover)}
.hover\:bg-slate-200:hover{background-color:var(--line)}
.hover\:bg-slate-300:hover{background-color:var(--line-strong)}
.hover\:bg-slate-50:hover{background-color:var(--bg-alt)}
.hover\:bg-slate-50\/50:hover{background-color:color-mix(in srgb,var(--bg-alt) 50%,transparent)}
.hover\:bg-slate-700:hover{background-color:var(--fill-dark)}
.hover\:bg-slate-800:hover{background-color:var(--fill-dark)}
.hover\:bg-teal-50\/30:hover{background-color:color-mix(in srgb,var(--brand-primary-tint) 30%,transparent)}
.hover\:bg-teal-600:hover{background-color:var(--brand-primary)}
.hover\:bg-teal-700:hover{background-color:var(--brand-primary-hover)}
.hover\:border-teal-400:hover{border-color:var(--brand-primary)}
.hover\:opacity-90{opacity:.9}
.hover\:shadow-md{box-shadow:var(--shadow-sm)}
.hover\:text-blue-800:hover{color:var(--info)}
.hover\:text-gray-800:hover{color:var(--ink)}
.hover\:text-green-800:hover{color:var(--success)}
.hover\:text-indigo-900:hover{color:var(--ink)}
.hover\:text-orange-800:hover{color:var(--warning)}
.hover\:text-red-800:hover{color:var(--danger)}
.hover\:text-red-900:hover{color:var(--danger)}
.hover\:text-slate-600:hover{color:var(--muted)}
.hover\:text-slate-900:hover{color:var(--ink)}
.hover\:text-teal-600:hover{color:var(--ink)}
.hover\:text-teal-900:hover{color:var(--ink)}
.hover\:text-white{color:#fff}
.hover\:underline{text-decoration-line:underline}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.inset-0{inset:0}
.invisible{visibility:hidden}
.italic{font-style:italic}
.items-baseline{align-items:baseline}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.leading-none{line-height:1}
.leading-relaxed{line-height:1.625}
.leading-tight{line-height:1.25}
.list-disc{list-style-type:disc}
.list-inside{list-style-position:inside}
.list-outside{list-style-position:outside}
.max-h-40{max-height:10rem}
.max-h-48{max-height:12rem}
.max-h-\[150px\]{max-height:150px}
.max-h-\[400px\]{max-height:400px}
.max-h-screen{max-height:100vh}
.max-w-4xl{max-width:56rem}
.max-w-\[120px\]{max-width:120px}
.max-w-\[160px\]{max-width:160px}
.max-w-\[200px\]{max-width:200px}
.max-w-\[240px\]{max-width:240px}
.max-w-lg{max-width:32rem}
.max-w-sm{max-width:24rem}
.max-w-xl{max-width:36rem}
.max-w-xs{max-width:20rem}
.mb-1{margin-bottom:0.25rem}
.mb-10{margin-bottom:2.5rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.min-w-\[300px\]{min-width:300px}
.min-w-full{min-width:100%}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-4{margin-left:1rem}
.ml-auto{margin-left:auto}
.mr-2{margin-right:0.5rem}
.mr-3{margin-right:0.75rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-20{margin-top:5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.opacity-25{opacity:.25}
.opacity-75{opacity:.75}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}
.p-2{padding:0.5rem}
.p-2\.5{padding:0.625rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pb-1{padding-bottom:0.25rem}
.pb-2{padding-bottom:0.5rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pb-6{padding-bottom:1.5rem}
.pb-8{padding-bottom:2rem}
.pl-2{padding-left:0.5rem}
.pl-3{padding-left:0.75rem}
.pr-2{padding-right:0.5rem}
.pr-4{padding-right:1rem}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.right-4{right:1rem}
.rounded{border-radius:4px}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:var(--radius-sm)}
.rounded-md{border-radius:6px}
.rounded-xl{border-radius:var(--radius)}
.self-center{align-self:center}
.shadow-lg{box-shadow:var(--shadow)}
.shadow-md{box-shadow:var(--shadow-sm)}
.shadow-sm{box-shadow:var(--shadow-sm)}
.sticky{position:sticky}
.table{display:table}
.table-fixed{table-layout:fixed}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-\[\#1A2B6D\]{color:var(--ink)}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[13px\]{font-size:13px}
.text-\[8px\]{font-size:8px}
.text-\[9px\]{font-size:9px}
.text-amber-600{color:var(--warning)}
.text-amber-700{color:var(--warning)}
.text-amber-800{color:var(--warning)}
.text-base{font-size:1rem;line-height:1.5rem}
.text-blue-500{color:var(--info)}
.text-blue-600{color:var(--info)}
.text-blue-700{color:var(--info)}
.text-blue-800{color:var(--info)}
.text-center{text-align:center}
.text-gray-400{color:var(--faint)}
.text-gray-500{color:var(--muted)}
.text-gray-600{color:var(--muted)}
.text-gray-700{color:var(--text)}
.text-gray-800{color:var(--ink)}
.text-gray-900{color:var(--ink)}
.text-green-500{color:var(--success)}
.text-green-600{color:var(--success)}
.text-green-700{color:var(--success)}
.text-green-800{color:var(--success)}
.text-indigo-600{color:var(--ink)}
.text-left{text-align:left}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-md{font-size:1rem;line-height:1.5rem}
.text-orange-600{color:var(--warning)}
.text-orange-800{color:var(--warning)}
.text-purple-800{color:var(--warning)}
.text-red-400{color:var(--danger)}
.text-red-500{color:var(--danger)}
.text-red-600{color:var(--danger)}
.text-red-700{color:var(--danger)}
.text-red-800{color:var(--danger)}
.text-right{text-align:right}
.text-slate-300{color:var(--faint)}
.text-slate-400{color:var(--faint)}
.text-slate-500{color:var(--muted)}
.text-slate-600{color:var(--muted)}
.text-slate-700{color:var(--text)}
.text-slate-800{color:var(--ink)}
.text-slate-900{color:var(--ink)}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-teal-400{color:var(--ink)}
.text-teal-600{color:var(--ink)}
.text-teal-700{color:var(--ink)}
.text-teal-800{color:var(--ink)}
.text-white{color:#fff}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-yellow-800{color:var(--warning)}
.top-0{top:0}
.top-4{top:1rem}
.tracking-\[0\.2em\]{letter-spacing:0.2em}
.tracking-tight{letter-spacing:-0.015em}
.tracking-tighter{letter-spacing:-0.03em}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.transition{transition-property:color,background-color,border-color,box-shadow,opacity,transform;transition-duration:.15s;transition-timing-function:var(--ease)}
.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:var(--ease)}
.transition-colors{transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:var(--ease)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.underline{text-decoration-line:underline}
.uppercase{text-transform:uppercase}
.w-16{width:4rem}
.w-4{width:1rem}
.w-6{width:1.5rem}
.w-64{width:16rem}
.w-72{width:18rem}
.w-8{width:2rem}
.w-\[10\%\]{width:10%}
.w-\[11\%\]{width:11%}
.w-\[12\%\]{width:12%}
.w-\[8\%\]{width:8%}
.w-\[9\%\]{width:9%}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-wrap{white-space:pre-wrap}
.z-30{z-index:30}
.z-40{z-index:40}
.divide-y>:not([hidden])~:not([hidden]){border-top-width:1px}
.space-y-1>:not([hidden])~:not([hidden]){margin-top:0.25rem}
.space-y-2>:not([hidden])~:not([hidden]){margin-top:0.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:0.75rem}
.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}
.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}
.bg-\[\#1A2B6D\].text-white{color:var(--on-brand-primary)}
.bg-indigo-600.text-white{color:var(--on-brand-primary)}
.bg-teal-600.text-white{color:var(--on-brand-primary)}
@media (min-width:640px){
.sm\:flex-row{flex-direction:row}
.sm\:items-center{align-items:center}
.sm\:justify-between{justify-content:space-between}
.sm\:p-8{padding:2rem}
.sm\:w-72{width:18rem}
}
@media (min-width:768px){
.md\:col-span-1{grid-column:span 1/span 1}
.md\:flex-row{flex-direction:row}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.md\:items-center{align-items:center}
.md\:w-auto{width:auto}
}
@media (min-width:1024px){
.lg\:col-span-2{grid-column:span 2/span 2}
.lg\:col-span-3{grid-column:span 3/span 3}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg\:p-0{padding:0}
.lg\:p-8{padding:2rem}
}