: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;
}
:root {
color-scheme: light dark;
--openrolesindex-lift: 44%;
--openrolesindex-muted-mix: 70%;
--openrolesindex-muted-d: 66%;
--openrolesindex-strong-mix: 52%;
--openrolesindex-strong-d: 42%;
--openrolesindex-accent-text-mix: 84%;
--openrolesindex-font-num: inherit;
--openrolesindex-tint: 0%;
--openrolesindex-dark-depth: 72%;
--openrolesindex-s2-l: 96%; --openrolesindex-s3-l: 91%;
--openrolesindex-s2-d: 93%; --openrolesindex-s3-d: 86%;
--openrolesindex-border-l: 14%; --openrolesindex-border-d: 15%;
--openrolesindex-soft-l: 11%; --openrolesindex-soft-d: 17%;
--openrolesindex-muted-lmax: 0.48;  --openrolesindex-muted-lmin: 0.74;
--openrolesindex-strong-lmax: 0.62; --openrolesindex-strong-lmin: 0.5;
--openrolesindex-atext-lmax: 0.5;   --openrolesindex-atext-lmin: 0.8;
--openrolesindex-accent-lmin: 0.68; --openrolesindex-onaccent-lmax: 0.22;
--openrolesindex-dark-lmax: 0.28;
--openrolesindex-hl-lmax: 0.55;
--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);
--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)));
--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));
--openrolesindex-edge: light-dark(transparent, var(--openrolesindex-border));
--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));
--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);
--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));
--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);
--openrolesindex-radius-sm: 8px; --openrolesindex-radius-md: 16px; --openrolesindex-radius-lg: 24px; --openrolesindex-radius-pill: 999px;
--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));
--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;
--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; }
: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%; }
:root {
--openrolesindex-c-control-radius: var(--openrolesindex-radius-pill);
--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);
}
: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; }
}
: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);
}
@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);
}
}
: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;
--openrolesindex-c-label-fg: var(--openrolesindex-text);
--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;
--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);
--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); }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: var(--openrolesindex-w-body) var(--openrolesindex-text-body) / var(--openrolesindex-lh) var(--openrolesindex-font-body); color: var(--openrolesindex-text); background: var(--openrolesindex-surface-1); display: flex; flex-direction: column; -webkit-text-size-adjust: 100%; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
:focus-visible { outline: 3px solid var(--openrolesindex-focus-ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }
.chip, .btn, .opt, .starter, .link, .title, .card, #tabs [role="tab"], #send, #stop, #input {
transition: background-color var(--openrolesindex-dur-fast) var(--openrolesindex-ease-out), border-color var(--openrolesindex-dur-fast) var(--openrolesindex-ease-out), text-decoration-color var(--openrolesindex-dur-fast),
box-shadow var(--openrolesindex-dur) var(--openrolesindex-ease-out), transform var(--openrolesindex-dur-fast) var(--openrolesindex-ease-out), color var(--openrolesindex-dur-fast); }
.chip:hover, .btn:hover, .opt:hover:not(:disabled), .starter:hover, #send:hover { transform: translateY(var(--openrolesindex-c-hover-lift)); }
.chip:active, .btn:active, .opt:active:not(:disabled), .starter:active, #send:active { transform: scale(var(--openrolesindex-c-press-scale)); }
header { position: relative; display: flex; align-items: center; gap: var(--openrolesindex-space-2); padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3); border-bottom: 1px solid var(--openrolesindex-border); background: var(--openrolesindex-c-head-bg); flex: none; }
header h1 { font-family: var(--openrolesindex-font-display); font-weight: var(--openrolesindex-w-display); letter-spacing: var(--openrolesindex-track-display); font-size: var(--openrolesindex-text-title); line-height: var(--openrolesindex-lh-tight); flex: 1; min-width: 0; overflow: hidden; overflow-wrap: break-word;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
header .icon { width: 1.4rem; height: 1.4rem; fill: var(--openrolesindex-c-icon); flex: none; }
header .link { white-space: nowrap; flex: none; }
@media (max-width: 24.99rem) {
header { gap: var(--openrolesindex-space-1); padding-inline: var(--openrolesindex-space-2); }
header .link { padding-inline: var(--openrolesindex-space-1); min-width: 0; }
}
.link { background: none; border: 0; color: var(--openrolesindex-c-link-fg); padding: var(--openrolesindex-space-1) var(--openrolesindex-space-2); min-height: var(--openrolesindex-touch); min-width: var(--openrolesindex-touch); text-align: start; border-radius: var(--openrolesindex-radius-sm);
text-decoration: var(--openrolesindex-c-link-decoration); text-underline-offset: 0.2em; }
.link:hover { background: var(--openrolesindex-accent-soft); }
.link.small { font-size: var(--openrolesindex-text-meta); }
#compact { display: none; }
#convtoggle[aria-pressed="true"] { background: var(--openrolesindex-accent-soft); font-weight: var(--openrolesindex-w-strong); }
body.compact #compact { display: inline-block; }
main.layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#chat { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.resume { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--openrolesindex-space-1) var(--openrolesindex-space-2); padding: var(--openrolesindex-space-1) var(--openrolesindex-space-3); font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-text-muted); border-bottom: 1px solid var(--openrolesindex-border); }
[dir=rtl] #newresp { transform: translateX(50%); }
#langmenu { max-height: 60vh; overflow-y: auto; }
#newresp { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); bottom: var(--openrolesindex-space-3); z-index: 2; background: var(--openrolesindex-c-button-primary-bg); color: var(--openrolesindex-c-button-primary-fg); border-color: var(--openrolesindex-c-button-primary-bg); font-weight: var(--openrolesindex-w-strong); min-height: 40px; padding-block: 0.3rem; box-shadow: var(--openrolesindex-shadow-2); }
.msg.error .actions { margin-block-start: var(--openrolesindex-space-2); }
#side { container-type: inline-size; flex: 1; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--openrolesindex-border); background: var(--openrolesindex-c-rail-bg); }
#composer { flex: none; background: var(--openrolesindex-surface-1); }
#side.empty { display: none; }
#tabs, #tabsnav { display: none; }
@media (max-width: 47.99rem) {
#tabsnav { display: block; flex: none; }
#tabs { display: flex; gap: var(--openrolesindex-space-1); margin: var(--openrolesindex-space-2) var(--openrolesindex-space-3); padding: 3px; background: var(--openrolesindex-surface-3); border-radius: calc(var(--openrolesindex-c-control-radius) + 3px); flex: none; }
#tabs [role="tab"] { flex: 1; min-height: var(--openrolesindex-touch); border: 0; background: transparent; color: var(--openrolesindex-text-muted); border-radius: var(--openrolesindex-c-control-radius); font-weight: var(--openrolesindex-w-strong); padding: 0 var(--openrolesindex-space-3); }
#tabs [role="tab"][aria-selected="true"] { background: var(--openrolesindex-surface-1); color: var(--openrolesindex-text); box-shadow: var(--openrolesindex-shadow-1), inset 0 -2px 0 var(--openrolesindex-accent-text); }
#tabs [role="tab"].flash:not([aria-selected="true"]) { background: var(--openrolesindex-accent-soft); color: var(--openrolesindex-text); }
body[data-tab="jobs"] #chat, body[data-tab="jobs"] #composer { display: none; }
body:not([data-tab="jobs"]) #side { display: none; }
body[data-tab="jobs"] #side, body[data-tab="jobs"] #side.empty { display: flex; border-top: 0; }
body[data-tab="jobs"] .empty-hint { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--openrolesindex-text-muted); text-align: center; padding: var(--openrolesindex-space-5); font-size: var(--openrolesindex-text-meta); margin: 0; }
body[data-view="compare"] header h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body[data-view="compare"] #convtoggle { margin-inline-start: auto; }
body[data-view="detail"] #results, body[data-view="compare"] #results { display: none; }
#side { overflow: hidden; } #results { flex: 1; }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
#tabs [role="tab"].flash:not([aria-selected="true"]) { animation: openrolesindex-tabflash 1.8s ease-out; }
@keyframes openrolesindex-tabflash { 0%, 55% { box-shadow: 0 0 0 3px var(--openrolesindex-accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
}
#chips { display: flex; gap: var(--openrolesindex-space-2); align-items: center; padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3); overflow-x: auto; scrollbar-width: none; white-space: nowrap; flex: none; border-bottom: 1px solid var(--openrolesindex-border); }
#chips::-webkit-scrollbar { display: none; }
.chips-h { 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); flex: none; }
.chip { flex: none; border: 1px solid var(--openrolesindex-c-chip-border); background: var(--openrolesindex-c-chip-bg); color: var(--openrolesindex-c-chip-fg); border-radius: var(--openrolesindex-c-control-radius); padding: 0.4rem 0.8rem; min-height: var(--openrolesindex-touch); font-size: var(--openrolesindex-text-chip); display: inline-flex; align-items: center; gap: var(--openrolesindex-space-1); }
.chip span { color: var(--openrolesindex-c-chip-count); font-size: 1.15em; line-height: 1; }
.chip:hover { border-color: var(--openrolesindex-c-chip-hover-border); background: var(--openrolesindex-c-chip-hover-bg); }
@media (prefers-reduced-motion: no-preference) {
.chip.changed { animation: openrolesindex-chip 1.2s ease-out; }
@keyframes openrolesindex-chip { 0% { outline: 2px solid var(--openrolesindex-accent); outline-offset: 1px; background: var(--openrolesindex-accent-soft); } 100% { outline: 2px solid transparent; outline-offset: 1px; } }
}
#log { flex: 1; min-height: 6rem; overflow: auto; padding: var(--openrolesindex-space-4); display: flex; flex-direction: column; gap: var(--openrolesindex-space-5); overscroll-behavior: contain; }
.msg { max-width: 100%; }
.msg .who { display: block; 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); margin-block-end: var(--openrolesindex-space-1); }
.msg.user { align-self: flex-end; max-width: 88%; }
.msg.user .body { background: var(--openrolesindex-c-bubble-user-bg); color: var(--openrolesindex-c-bubble-user-fg); border: 1px solid var(--openrolesindex-c-bubble-user-border);
border-radius: var(--openrolesindex-c-bubble-radius) var(--openrolesindex-c-bubble-radius) var(--openrolesindex-space-1) var(--openrolesindex-c-bubble-radius); padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3); }
.msg.user .who { text-align: end; }
.msg.assistant .body { line-height: var(--openrolesindex-lh); max-width: var(--openrolesindex-measure); }
.msg.error .body { border: 1px solid var(--openrolesindex-danger); border-radius: var(--openrolesindex-c-bubble-radius); padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3); }
.opts { display: flex; flex-wrap: wrap; gap: var(--openrolesindex-space-2); margin-block-start: var(--openrolesindex-space-3); }
.opt { border: 1px solid var(--openrolesindex-c-chip-border); background: var(--openrolesindex-c-chip-bg); color: var(--openrolesindex-c-chip-fg); border-radius: var(--openrolesindex-c-control-radius); padding: var(--openrolesindex-c-chip-pad); min-height: var(--openrolesindex-touch); font-size: var(--openrolesindex-text-chip); display: inline-flex; align-items: center; gap: var(--openrolesindex-space-1); }
.opt .n { color: var(--openrolesindex-c-chip-count); font-variant-numeric: tabular-nums; font-family: var(--openrolesindex-font-num); }
.opt:hover:not(:disabled) { border-color: var(--openrolesindex-c-chip-hover-border); background: var(--openrolesindex-c-chip-hover-bg); }
.opts.old { opacity: 0.55; }
.opts.old .opt { cursor: default; }
.msg .ph { display: inline-block; width: 1.9ch; height: 0.8em; vertical-align: -0.05em; margin-inline: 0.1ch; border-radius: var(--openrolesindex-radius-pill); background: color-mix(in oklch, var(--openrolesindex-text-muted) 28%, transparent); }
@media (prefers-reduced-motion: no-preference) { .msg .ph { background-image: linear-gradient(90deg, transparent, color-mix(in oklch, var(--openrolesindex-surface-1) 70%, transparent), transparent); background-size: 200% 100%; animation: openrolesindex-ph 1.4s infinite linear; } @keyframes openrolesindex-ph { to { background-position: -200% 0; } } }
.msg p { margin: 0 0 var(--openrolesindex-space-2); } .msg p:last-child { margin: 0; }
.msg ul { margin: var(--openrolesindex-space-2) 0; padding-inline-start: 1.2rem; } .msg li { margin: var(--openrolesindex-space-1) 0; }
.msg table { border-collapse: collapse; font-size: var(--openrolesindex-text-meta); display: block; overflow-x: auto; max-width: 100%; }
.msg td, .msg th { border: 1px solid var(--openrolesindex-border); padding: 0.35rem 0.5rem; vertical-align: top; text-align: start; }
.msg th { background: var(--openrolesindex-surface-2); }
a.job-ref { color: var(--openrolesindex-c-link-fg); text-decoration: underline; text-underline-offset: 0.15em; }
a.src-ref { color: var(--openrolesindex-c-link-fg); text-decoration: none; font-weight: 700; padding: 0 0.15em; }
.thinking { display: inline-flex; gap: 0.3rem; align-items: center; color: var(--openrolesindex-text-muted); font-size: var(--openrolesindex-text-meta); }
[data-loading=dots] .thinking .lbl, [data-loading=steps] .thinking { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.steps { list-style: none; margin: 0; padding: 0; color: var(--openrolesindex-text-muted); font-size: var(--openrolesindex-text-meta); }
.steps li::before { content: "• "; color: var(--openrolesindex-c-link-fg); } .steps .done::before { content: "✓ "; }
.thinking i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
.thinking i { animation: openrolesindex-pulse 1.2s infinite ease-in-out; } .thinking i:nth-child(2) { animation-delay: 0.2s; } .thinking i:nth-child(3) { animation-delay: 0.4s; }
@keyframes openrolesindex-pulse { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
}
.starters { display: flex; flex-wrap: wrap; gap: var(--openrolesindex-space-2); margin-block-start: var(--openrolesindex-space-3); }
.starter { border: 1px solid var(--openrolesindex-c-chip-border); background: var(--openrolesindex-c-chip-bg); color: var(--openrolesindex-c-chip-fg); border-radius: var(--openrolesindex-c-control-radius); padding: 0.55rem 0.9rem; min-height: var(--openrolesindex-touch); font-size: var(--openrolesindex-text-chip); text-align: start; }
.starter:hover { border-color: var(--openrolesindex-c-chip-hover-border); background: var(--openrolesindex-c-chip-hover-bg); }
#status { font-size: var(--openrolesindex-text-helper); color: var(--openrolesindex-text-muted); padding: 0 var(--openrolesindex-space-3); min-height: 0; }
#form { display: flex; gap: var(--openrolesindex-space-2); padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3) calc(var(--openrolesindex-space-3) + var(--openrolesindex-safe-b)); border-top: 1px solid var(--openrolesindex-border); background: var(--openrolesindex-surface-1); flex: none; }
#input { flex: 1; min-width: 0; min-height: 48px; padding: var(--openrolesindex-space-2) 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-size: 16px; }
#input:focus { outline: 3px solid var(--openrolesindex-focus-ring); outline-offset: 2px; border-color: var(--openrolesindex-c-input-border-focus); }
#input::placeholder { color: var(--openrolesindex-text-muted); opacity: 1; }
#send, #stop { min-height: 48px; min-width: 48px; border-radius: var(--openrolesindex-c-control-radius); border: 1px solid var(--openrolesindex-c-button-border); padding: 0 var(--openrolesindex-space-4); flex: none; }
#send { background: var(--openrolesindex-c-button-primary-bg); color: var(--openrolesindex-c-button-primary-fg); border-color: var(--openrolesindex-c-button-primary-bg); font-weight: var(--openrolesindex-w-strong); }
#send:hover:not(:disabled) { background: var(--openrolesindex-c-button-primary-hover); border-color: var(--openrolesindex-c-button-primary-hover); }
#send:disabled { opacity: 0.5; cursor: default; }
#stop { background: var(--openrolesindex-c-button-bg); color: var(--openrolesindex-c-button-fg); }
footer, #ainote { flex: none; font-size: var(--openrolesindex-text-helper); line-height: var(--openrolesindex-lh-meta); color: var(--openrolesindex-text-muted); padding: var(--openrolesindex-space-1) var(--openrolesindex-space-3) calc(var(--openrolesindex-space-2) + var(--openrolesindex-safe-b)); overflow-wrap: break-word; text-wrap: pretty; }
@media (max-width: 47.99rem) { footer, #ainote { padding-inline: var(--openrolesindex-space-4); } }
#results { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.results-h { display: flex; align-items: center; gap: var(--openrolesindex-space-1); margin: var(--openrolesindex-space-3) var(--openrolesindex-space-3) 0; padding-block-start: var(--openrolesindex-space-2); border-top: var(--openrolesindex-c-results-rule); flex-wrap: wrap; }
.btn.small { margin-inline-start: auto; min-height: var(--openrolesindex-touch); padding-block: 0.3rem; font-size: var(--openrolesindex-text-meta); }
.btn[aria-pressed="true"] { background: var(--openrolesindex-accent-soft); border-color: var(--openrolesindex-accent-text); font-weight: var(--openrolesindex-w-strong); }
#counts { font-weight: var(--openrolesindex-w-strong); font-size: var(--openrolesindex-text-fact); font-family: var(--openrolesindex-font-num); font-variant-numeric: tabular-nums; }
.info { flex: none; width: 44px; height: 44px; margin-block: -10px; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.info span { width: 1.4rem; height: 1.4rem; border: 1px solid var(--openrolesindex-text-muted); border-radius: 50%; color: var(--openrolesindex-text-muted); font: italic 600 0.8rem/1.3rem Georgia, serif; text-align: center; }
.info[aria-expanded="true"] span { background: var(--openrolesindex-accent-soft); border-color: var(--openrolesindex-accent-text); }
#shown, #info-text, #warnings, #refreshed { font-size: var(--openrolesindex-text-helper); color: var(--openrolesindex-text-muted); padding: 0 var(--openrolesindex-space-3); margin: var(--openrolesindex-space-1) 0 0; }
#cards, #skel { list-style: none; margin: 0; padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3) var(--openrolesindex-space-3); display: flex; flex-direction: column; gap: var(--openrolesindex-c-row-gap); }
#cards.stale { opacity: 0.55; transition: opacity 0.15s; }
.card { border-bottom: 1px solid var(--openrolesindex-c-row-divider); padding: var(--openrolesindex-c-row-pad-y) var(--openrolesindex-c-row-pad-x); display: flex; flex-direction: column; border-radius: var(--openrolesindex-c-row-radius); background: var(--openrolesindex-c-row-bg); box-shadow: var(--openrolesindex-c-row-shadow); }
.card:hover, .card:focus-within { background: var(--openrolesindex-c-row-hover-bg); box-shadow: var(--openrolesindex-c-row-shadow-hover); }
.card.active { background: var(--openrolesindex-c-row-active-bg); box-shadow: inset 3px 0 0 var(--openrolesindex-c-row-active-marker), var(--openrolesindex-c-row-shadow); }
.r1, .r2 { display: flex; justify-content: space-between; align-items: center; gap: var(--openrolesindex-space-3); }
.r2 { flex-wrap: wrap; row-gap: 0; } .racts { display: inline-flex; align-items: center; margin-inline-start: auto; }
.card h3 { font-family: var(--openrolesindex-font-display); font-size: var(--openrolesindex-text-title); font-weight: var(--openrolesindex-w-title); letter-spacing: var(--openrolesindex-track-display); line-height: var(--openrolesindex-lh-tight); overflow-wrap: break-word; min-width: 0; }
.title { background: none; border: 0; padding: var(--openrolesindex-space-1) 0; min-height: var(--openrolesindex-touch); font: inherit; color: inherit; text-align: start; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--openrolesindex-c-row-title-decoration); text-underline-offset: 0.22em; }
.title:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.pay { flex: none; font-size: var(--openrolesindex-text-fact); font-weight: var(--openrolesindex-w-strong); white-space: nowrap; font-family: var(--openrolesindex-font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nopay { font-weight: var(--openrolesindex-w-body); font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-text-muted); }
.pcx { margin-block-start: var(--openrolesindex-space-1); font-size: var(--openrolesindex-text-helper); line-height: var(--openrolesindex-lh-meta); color: var(--openrolesindex-warn); font-weight: var(--openrolesindex-w-strong); overflow-wrap: anywhere; }
.facts .pcd { display: flex; flex-direction: column; gap: var(--openrolesindex-space-1); }
.pcl b { font-weight: var(--openrolesindex-w-strong); color: var(--openrolesindex-text-muted); margin-inline-end: var(--openrolesindex-space-1); }
.pcd .quote { margin: 0; }
.meta { font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh-meta); color: var(--openrolesindex-text-muted); min-width: 0; overflow-wrap: anywhere; } .meta.small { font-size: var(--openrolesindex-text-helper); }
.more { flex: none; background: none; border: 0; min-height: var(--openrolesindex-touch); padding: 0 var(--openrolesindex-space-2); font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-c-link-fg); text-decoration: underline; text-underline-offset: 0.2em; border-radius: var(--openrolesindex-radius-sm); }
.more:hover { background: var(--openrolesindex-accent-soft); }
.diff { margin: var(--openrolesindex-space-2) 0 0; font-size: var(--openrolesindex-text-meta); }
.actions { display: flex; gap: var(--openrolesindex-space-2); flex-wrap: wrap; align-items: center; margin: var(--openrolesindex-space-2) 0 0; }
.whyd { margin-block-start: var(--openrolesindex-space-1); font-size: var(--openrolesindex-text-helper); color: var(--openrolesindex-text-muted); }
.whyd summary { cursor: pointer; min-height: var(--openrolesindex-touch); display: flex; align-items: center; width: fit-content; }
.whyd ul { margin: 0 0 var(--openrolesindex-space-1); padding-inline-start: 1.1rem; } .whyd li { margin: 2px 0; }
.btn { border: 1px solid var(--openrolesindex-c-button-border); background: var(--openrolesindex-c-button-bg); color: var(--openrolesindex-c-button-fg); border-radius: var(--openrolesindex-c-control-radius); padding: 0.5rem 1rem; min-height: var(--openrolesindex-touch); font-size: var(--openrolesindex-text-chip); }
.btn:hover { background: var(--openrolesindex-c-button-hover-bg); }
.btn.apply { border-color: var(--openrolesindex-c-button-apply-fg); color: var(--openrolesindex-c-button-apply-fg); font-weight: var(--openrolesindex-w-strong); }
.btn.apply:hover { background: var(--openrolesindex-accent-soft); }
.btn.primary { background: var(--openrolesindex-c-button-primary-bg); border-color: var(--openrolesindex-c-button-primary-bg); color: var(--openrolesindex-c-button-primary-fg); font-weight: var(--openrolesindex-w-strong); }
.btn.primary:hover { background: var(--openrolesindex-c-button-primary-hover); border-color: var(--openrolesindex-c-button-primary-hover); }
.card.skel { min-height: 5.5rem; background: linear-gradient(90deg, var(--openrolesindex-surface-2), var(--openrolesindex-surface-3), var(--openrolesindex-surface-2)); background-size: 200% 100%; border-color: transparent; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .card.skel { animation: openrolesindex-shimmer 1.4s infinite linear; } @keyframes openrolesindex-shimmer { to { background-position: -200% 0; } } }
#alts { padding: 0 var(--openrolesindex-space-3) var(--openrolesindex-space-3); font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-text-muted); }
#alts h4 { margin: 0 0 var(--openrolesindex-space-1); font-size: var(--openrolesindex-text-label); font-weight: var(--openrolesindex-w-label); text-transform: uppercase; letter-spacing: 0.04em; }
#alts ul { list-style: none; margin: 0; padding: 0; } #alts li { margin: var(--openrolesindex-space-1) 0; } #alts .link { min-height: 32px; min-width: 0; padding: 0.1rem 0.25rem; font-size: inherit; }
#alts .grp { margin: var(--openrolesindex-space-1) 0; } #alts .grp summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; width: fit-content; color: var(--openrolesindex-text); }
#alts .grp ul { padding-inline-start: var(--openrolesindex-space-3); }
#alts .near .card { padding-inline: 0; } #alts .near .meta { padding-block-end: var(--openrolesindex-space-1); }
#blocked { padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3) var(--openrolesindex-space-3); }
.blk { list-style: none; margin: 0 0 var(--openrolesindex-space-2); padding: 0; }
.blk li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--openrolesindex-space-2); padding-block: var(--openrolesindex-space-2); border-bottom: 1px solid var(--openrolesindex-border); }
.blk .btn.small { margin-inline-start: auto; }
.also { margin: 0 0 var(--openrolesindex-space-3); font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-text-muted); }
.rail-acts { display: flex; flex-wrap: wrap; gap: var(--openrolesindex-space-2); margin: 0; }
.morewrap { margin: 0; padding: var(--openrolesindex-space-1) var(--openrolesindex-space-3) var(--openrolesindex-space-3); } .morewrap .btn { width: 100%; font-weight: var(--openrolesindex-w-strong); }
.optack { margin: var(--openrolesindex-space-2) 0 0; font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-text-muted); }
mark.hl { background: var(--openrolesindex-hl); color: inherit; border-radius: 2px; scroll-margin-block: 30vh; }
.ln { margin: 0 0 var(--openrolesindex-space-1); } .ln.muted { color: var(--openrolesindex-text-muted); font-size: var(--openrolesindex-text-helper); } .ln.warn { color: var(--openrolesindex-warn); font-weight: var(--openrolesindex-w-strong); font-size: var(--openrolesindex-text-helper); }
.quote { display: block; margin: 0 0 var(--openrolesindex-space-2); font-size: var(--openrolesindex-text-helper); color: var(--openrolesindex-text-muted); font-style: italic; }
.quote::before, .quote::after { content: none; }
.cmpstrip { display: flex; align-items: center; justify-content: space-between; gap: var(--openrolesindex-space-3); flex-wrap: wrap; padding-block-end: var(--openrolesindex-space-2); border-bottom: 1px solid var(--openrolesindex-border); }
.cmpstrip p { font-weight: var(--openrolesindex-w-strong); min-width: 0; overflow-wrap: anywhere; } .cmpstrip .btn.small { margin-inline-start: 0; }
.cmptable .more { min-height: 36px; padding-inline: 0; }
.btn:disabled { opacity: 0.6; cursor: default; }
.cmp { display: none; }
#cards.comparing .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--openrolesindex-space-1); align-items: start; }
#cards.comparing .cmp { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; grid-row: 1 / span 2; cursor: pointer; }
#cards.comparing .cmp input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--openrolesindex-accent); }
#cards.comparing .r1, #cards.comparing .r2 { grid-column: 2; }
#cmpbar { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--openrolesindex-space-2); padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3) calc(var(--openrolesindex-space-2) + var(--openrolesindex-safe-b)); background: var(--openrolesindex-surface-1); border-top: 1px solid var(--openrolesindex-border); z-index: 1; }
#cmp-hint { flex: 1 1 100%; font-size: var(--openrolesindex-text-helper); color: var(--openrolesindex-text-muted); } #cmp-hint:empty { display: none; }
#cmp-go { flex: 1; }
.cmp-scroll { overflow: auto; max-width: 100%; max-height: max(12rem, calc(100dvh - 13rem)); border: var(--openrolesindex-c-table-outer); border-radius: var(--openrolesindex-c-table-radius); box-shadow: var(--openrolesindex-c-table-shadow); margin-block-start: var(--openrolesindex-space-3); background: var(--openrolesindex-surface-1); }
.cmptable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh-meta); }
.cmptable th, .cmptable td { padding: var(--openrolesindex-space-2); text-align: start; vertical-align: top; border-bottom: 1px solid var(--openrolesindex-c-table-border); border-inline-start: var(--openrolesindex-c-table-vline); min-width: 7.5rem; overflow-wrap: break-word; }
.cmptable thead th { position: sticky; inset-block-start: 0; z-index: 2; font-weight: var(--openrolesindex-w-body); background: var(--openrolesindex-c-table-head-bg); border-bottom: var(--openrolesindex-c-table-head-rule); vertical-align: bottom; }
.cmptable thead th:first-child { inset-inline-start: 0; z-index: 3; }
.cmptable thead .title { display: block; font-weight: var(--openrolesindex-w-strong); font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh-tight); padding: var(--openrolesindex-space-1) 0; min-height: var(--openrolesindex-touch); }
.cmptable thead .btn { margin-block: var(--openrolesindex-space-1); padding-block: 0.3rem; }
.cmptable tbody th { min-width: 5.2rem; overflow-wrap: normal; font-weight: var(--openrolesindex-w-strong); color: var(--openrolesindex-text-muted); background: var(--openrolesindex-c-table-first-bg); position: sticky; inset-inline-start: 0; z-index: 1; border-inline-start: 0;
font-size: var(--openrolesindex-text-label); letter-spacing: var(--openrolesindex-track-label); text-transform: var(--openrolesindex-label-transform); }
.cmptable td { color: var(--openrolesindex-c-table-same-fg); }
.cmptable td.num { font-family: var(--openrolesindex-font-num); font-variant-numeric: tabular-nums; }
.cmptable tr:last-child > * { border-bottom: 0; }
.cmptable tr.differs td { background: var(--openrolesindex-c-table-diff-bg); color: var(--openrolesindex-text); font-weight: var(--openrolesindex-w-strong); }
.cmptable tr.differs th { background: var(--openrolesindex-c-table-diff-bg); color: var(--openrolesindex-text); box-shadow: inset 3px 0 0 var(--openrolesindex-c-table-diff-bar); }
.cmp-scroll:focus-visible { outline-offset: -3px; }
#detail { flex: 1; min-height: 0; overflow: auto; padding: var(--openrolesindex-space-3) var(--openrolesindex-space-4) calc(var(--openrolesindex-space-5) + var(--openrolesindex-safe-b)); background: var(--openrolesindex-surface-1); }
#detail h3 { margin: var(--openrolesindex-space-2) 0 var(--openrolesindex-space-3); font-family: var(--openrolesindex-font-display); font-size: var(--openrolesindex-text-display); line-height: var(--openrolesindex-lh-tight); font-weight: var(--openrolesindex-w-display); letter-spacing: var(--openrolesindex-track-display); text-wrap: balance; }
#detail h4 { margin: var(--openrolesindex-space-4) 0 var(--openrolesindex-space-2); padding-block-end: var(--openrolesindex-c-h-pad); border-bottom: var(--openrolesindex-c-h-border);
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-c-label-fg); }
#detail .actions { margin: var(--openrolesindex-space-3) 0; }
.reader { display: flex; flex-direction: column; gap: var(--openrolesindex-space-4); }
.facts { display: grid; grid-template-columns: auto 1fr; column-gap: var(--openrolesindex-space-4); font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh-meta);
background: var(--openrolesindex-c-facts-bg); border: var(--openrolesindex-c-facts-border); border-radius: var(--openrolesindex-c-facts-radius); padding: var(--openrolesindex-c-facts-pad); box-shadow: var(--openrolesindex-c-facts-shadow); border-block: var(--openrolesindex-c-facts-frame); }
.facts div { display: contents; }
.facts dt, .facts dd { padding-block: var(--openrolesindex-space-1); border-top: var(--openrolesindex-c-facts-rule); }
.facts div:first-child > * { border-top: 0; }
.facts dt { color: var(--openrolesindex-text-muted); } .facts dd { font-variant-numeric: tabular-nums; font-family: var(--openrolesindex-font-num); }
.facts div:first-child dd { font-weight: var(--openrolesindex-w-strong); font-size: var(--openrolesindex-text-fact); }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pills li { font-size: var(--openrolesindex-text-helper); font-weight: var(--openrolesindex-w-strong); background: var(--openrolesindex-c-pill-bg); color: var(--openrolesindex-c-pill-fg); border-radius: var(--openrolesindex-c-pill-radius); padding: 0.15rem 0.6rem; }
.reading { max-width: var(--openrolesindex-measure); }
.reqs { padding-inline-start: 1.2rem; font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh); } .reqs li { margin: var(--openrolesindex-space-1) 0; } .reqs q { color: var(--openrolesindex-text-muted); }
.desc { font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh); } .desc p { margin: var(--openrolesindex-space-2) 0; }
.src { margin: var(--openrolesindex-space-3) 0; } .src h4 { margin: 0 0 var(--openrolesindex-space-1); font-size: var(--openrolesindex-text-meta); }
.src blockquote { margin: var(--openrolesindex-space-1) 0; padding-inline-start: var(--openrolesindex-space-3); border-inline-start: 3px solid var(--openrolesindex-c-quote-bar); font-size: var(--openrolesindex-text-meta); line-height: var(--openrolesindex-lh); }
.empty-hint { display: none; }
@media (min-width: 48rem) {
#compact { display: inline-block; }
main.layout { display: grid; grid-template-columns: minmax(20rem, 44%) 1fr; grid-template-rows: minmax(0, 1fr) auto; }
#chat { grid-column: 1; grid-row: 1; min-height: 0; border-inline-end: 1px solid var(--openrolesindex-border); }
#composer { grid-column: 1; grid-row: 2; border-inline-end: 1px solid var(--openrolesindex-border); }
#side { grid-column: 2; grid-row: 1 / 3; min-width: 0; max-height: none; border-top: 0; position: relative; }
#chips { flex-wrap: wrap; white-space: normal; }
#side.empty { display: flex; }
#results { flex: 1; overflow: auto; }
.results-h { padding-block-start: var(--openrolesindex-space-4); }
#detail { position: absolute; inset: 0; padding: var(--openrolesindex-space-4) var(--openrolesindex-space-5); }
.cmptable th, .cmptable td { min-width: 8rem; padding: var(--openrolesindex-space-2) var(--openrolesindex-space-3); } .cmptable tbody th { min-width: 6.5rem; }
.cmptable thead .title { font-size: var(--openrolesindex-text-fact); }
.empty-hint { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--openrolesindex-text-muted); text-align: center; padding: var(--openrolesindex-space-5); font-size: var(--openrolesindex-text-meta); margin: 0; }
@media (prefers-reduced-motion: no-preference) { main.layout, #side { transition: grid-template-columns 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } }
body[data-view="detail"] main.layout { grid-template-columns: minmax(16rem, 26%) 1fr; }
body[data-view="detail"] #side { display: grid; grid-template-columns: 15rem 1fr; }
body[data-view="detail"] #results { grid-column: 1; overflow: auto; border-inline-end: 1px solid var(--openrolesindex-border); }
body[data-view="detail"] #detail { position: static; grid-column: 2; overflow: auto; container-type: inline-size; }
body[data-view="detail"] .results-h { margin: 0; padding: var(--openrolesindex-space-3); border-top: 0; }
body[data-view="detail"] .btn.small { margin-inline-start: 0; min-height: 36px; }
body[data-view="detail"] #cmpbar { padding-inline: var(--openrolesindex-space-2); } body[data-view="detail"] #cmp-go { padding-inline: var(--openrolesindex-space-2); font-size: var(--openrolesindex-text-meta); }
body[data-view="detail"] #counts { font-size: var(--openrolesindex-text-meta); color: var(--openrolesindex-text-muted); }
body[data-view="detail"] #warnings, body[data-view="detail"] #alts { display: none; }
body[data-view="detail"] #cards { display: flex; flex-direction: column; padding: 0 var(--openrolesindex-space-2) var(--openrolesindex-space-3); }
body[data-view="detail"] .card { cursor: pointer; }
body[data-view="detail"] .card h3 { font-size: var(--openrolesindex-text-meta); }
body[data-view="detail"] .r2, body[data-view="detail"] #skel, body[data-view="detail"] #shown, body[data-view="detail"] #info-text, body[data-view="detail"] .info { display: none; }
body[data-view="detail"] .title { min-height: 36px; padding-block: var(--openrolesindex-space-1); }
body[data-view="detail"] .pay { font-size: var(--openrolesindex-text-helper); }
body[data-view="detail"] .r1 { flex-direction: column; align-items: flex-start; gap: 0; }
body[data-view="detail"] .pay { padding-block-end: var(--openrolesindex-space-1); white-space: normal; }
body[data-view="compare"] main.layout { grid-template-columns: minmax(0, 1fr); }
body[data-view="compare"] #side { grid-column: 1; grid-row: 1 / 3; display: flex; }
body[data-view="compare"] #results, body[data-view="compare"] #chat, body[data-view="compare"] #composer { display: none; }
body[data-view="compare"] #detail { position: static; flex: 1; }
body[data-view="compare"] .reader.one { max-width: none; }
body[data-view="compare"] .cmptable th, body[data-view="compare"] .cmptable td { min-width: 12rem; }
body[data-view="compare"] .cmptable tbody th { min-width: 7rem; }
body[data-view="compare"].conv-open #chat { display: flex; grid-column: 1; grid-row: 1; justify-self: start; width: clamp(22rem, 34%, 32rem); z-index: 4; background: var(--openrolesindex-surface-1); border-inline-end: 1px solid var(--openrolesindex-border); box-shadow: var(--openrolesindex-shadow-3); }
body[data-view="compare"].conv-open #composer { display: block; grid-column: 1; grid-row: 2; justify-self: start; width: clamp(22rem, 34%, 32rem); z-index: 4; box-shadow: var(--openrolesindex-shadow-3); }
.reader.one { max-width: 70ch; }
.reader .summary .actions { flex-direction: row; }
.reader .summary .actions .btn { flex: 1 1 12rem; }
}
@container (max-width: 36rem) {
.r1 { flex-direction: column; align-items: flex-start; gap: 0; }
.r1 h3 { width: 100%; }
.pay { white-space: normal; padding-block-end: var(--openrolesindex-space-1); }
}
@container (min-width: 56rem) {
#cards, #skel { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--openrolesindex-space-5); }
body[data-view="detail"] #cards { display: flex; }
}
@container (min-width: 46rem) {
.reader { display: grid; grid-template-columns: minmax(16rem, 20rem) minmax(24rem, 1fr); gap: var(--openrolesindex-space-5); align-items: start; }
.reader.one { display: block; }
.reader .summary { position: sticky; top: 0; }
.reader .summary .actions { flex-direction: column; align-items: stretch; }
}
@media (min-width: 48rem) and (max-width: 64rem) { body[data-view="detail"] #side { grid-template-columns: 12rem 1fr; } }
.icon-btn { padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
#theme[data-mode="light"] .moon, #theme[data-mode="dark"] .sun { display: none; }
#thememenu, #optmenu, #langmenu { position: absolute; z-index: 10; inset-block-start: calc(100% - 4px); inset-inline-end: var(--openrolesindex-space-3); min-width: 9.5rem; padding: var(--openrolesindex-space-1); display: flex; flex-direction: column;
background: var(--openrolesindex-surface-3); border: 1px solid var(--openrolesindex-border); border-radius: var(--openrolesindex-radius-md); box-shadow: var(--openrolesindex-shadow-2); }
#thememenu button, #optmenu button, #langmenu button { min-height: var(--openrolesindex-touch); border: 0; background: none; text-align: start; padding: 0; padding-inline: 2rem var(--openrolesindex-space-3); border-radius: var(--openrolesindex-radius-sm); position: relative; color: var(--openrolesindex-text); }
#thememenu button:hover, #optmenu button:hover, #langmenu button:hover { background: var(--openrolesindex-surface-2); }
#optmenu { width: max-content; max-width: calc(100% - 2 * var(--openrolesindex-space-3)); } #optmenu button { padding-inline: var(--openrolesindex-space-3); white-space: nowrap; width: 100%; }
#more-opts span { font-size: 1.4rem; line-height: 1; }
#thememenu button[aria-checked="true"], #langmenu button[aria-checked="true"] { font-weight: var(--openrolesindex-w-strong); }
#thememenu button[aria-checked="true"]::before, #langmenu button[aria-checked="true"]::before { content: ""; position: absolute; inset-inline-start: 0.8rem; inset-block-start: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.275rem; border-radius: 50%; background: var(--openrolesindex-accent); }
.btn.danger { border-color: var(--openrolesindex-danger); color: var(--openrolesindex-danger); }
#delrow { flex: none; padding: 0 var(--openrolesindex-space-2) calc(var(--openrolesindex-space-1) + var(--openrolesindex-safe-b)); }
#ainote { padding-block-end: 0; }
#delcard { position: fixed; z-index: 20; inset-block-start: var(--openrolesindex-space-6); inset-inline: var(--openrolesindex-space-3); max-width: 28rem; margin-inline: auto; padding: var(--openrolesindex-space-4); display: flex; flex-direction: column; gap: var(--openrolesindex-space-3);
background: var(--openrolesindex-surface-3); color: var(--openrolesindex-text); border: 1px solid var(--openrolesindex-border); border-radius: var(--openrolesindex-radius-md); box-shadow: var(--openrolesindex-shadow-3); }
#delcard h2, #yourdata h2 { font-family: var(--openrolesindex-font-display); font-weight: var(--openrolesindex-w-display); letter-spacing: var(--openrolesindex-track-display); font-size: var(--openrolesindex-text-title); line-height: var(--openrolesindex-lh-tight); }
#del-err { border-inline-start: 3px solid var(--openrolesindex-danger); padding-inline-start: var(--openrolesindex-space-2); font-weight: var(--openrolesindex-w-strong); }
.acts { display: flex; flex-wrap: wrap; gap: var(--openrolesindex-space-2); }
body.yd main.layout, body.yd #tabsnav, body.yd #ainote, body.yd #delrow, body.yd #auditref { display: none; }
#yourdata { flex: 1; min-height: 0; overflow: auto; padding: var(--openrolesindex-space-3) var(--openrolesindex-space-4) calc(var(--openrolesindex-space-5) + var(--openrolesindex-safe-b)); background: var(--openrolesindex-surface-1); display: flex; flex-direction: column; align-items: flex-start; gap: var(--openrolesindex-space-3); }
#yourdata > * { max-width: 70ch; }
#yourdata dt { margin-block-start: var(--openrolesindex-space-3); font-weight: var(--openrolesindex-w-strong); }
#yourdata dd { color: var(--openrolesindex-text-muted); }
#yourdata ul { margin: 0; padding-inline-start: var(--openrolesindex-space-4); }
#yourdata h2:focus, #delcard h2:focus { outline: none; }
@media (forced-colors: active) {
:focus-visible, #input:focus { outline: 3px solid Highlight; outline-offset: 2px; }
#tabs [role="tab"][aria-selected="true"] { border-block-end: 3px solid Highlight; }
}
@media (max-width: 47.99rem) and (max-height: 30rem) {
html, body { height: auto; } body { min-height: 100%; }
main.layout, #chat, #side, #yourdata { flex: none; }
#log { flex: none; height: max(10rem, 55vh); }
#tabs { margin-block: var(--openrolesindex-space-1); }
#delcard { inset-block-start: var(--openrolesindex-space-2); max-height: calc(100vh - 2 * var(--openrolesindex-space-2)); overflow: auto; }
}