/* Shared visual laws for React and the existing static renderer adapter. */
html { color-scheme: dark; font-family: var(--ageis-font-sans); scroll-padding-block-start: var(--ageis-space-20); scrollbar-color: var(--ageis-color-scrollbar-thumb) var(--ageis-color-scrollbar-track); scrollbar-width: auto; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ageis-color-canvas); color: var(--ageis-color-text); font-family: var(--ageis-font-sans); font-size: var(--ageis-type-body); line-height: var(--ageis-type-body-leading); }
::selection { background: var(--ageis-color-selection); color: var(--ageis-color-text); }
*::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
*::-webkit-scrollbar-track { background: var(--ageis-color-scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--ageis-color-scrollbar-thumb); border: 2px solid var(--ageis-color-scrollbar-track); border-radius: var(--ageis-radius-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--ageis-color-scrollbar-hover); }
*::-webkit-scrollbar-thumb:active { background: var(--ageis-color-scrollbar-active); }
a, button, input, select, textarea, summary { touch-action: manipulation; }
a, button:not(:disabled), summary, [role="button"] { cursor: pointer; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ageis-color-focus); outline-offset: 3px; scroll-margin-block: var(--ageis-space-20); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
textarea { resize: none; field-sizing: content; min-block-size: 6rem; }
code, pre, kbd { font-family: var(--ageis-font-mono); }
pre { overflow: auto; max-inline-size: 100%; }
img, svg, video { max-inline-size: 100%; }
:where(h1,h2,h3,p,td,th,dd,code) { overflow-wrap: anywhere; }
:where(h1,h2,h3) { text-wrap: balance; }
:where(p,li) { text-wrap: pretty; }
:where(main,section,aside,article,form) { min-inline-size: 0; }
:where(table) { font-variant-numeric: tabular-nums; }
.ageis-skip { position: fixed; inset-block-start: var(--ageis-space-2); inset-inline-start: var(--ageis-space-2); z-index: 100; padding: var(--ageis-space-3) var(--ageis-space-4); border-radius: var(--ageis-radius-control); background: var(--ageis-color-text); color: var(--ageis-color-text-inverse); transform: translateY(-200%); }
.ageis-skip:focus { transform: none; }
.ageis-state { padding: var(--ageis-space-6); border: 1px solid var(--ageis-color-border); border-radius: var(--ageis-radius-panel); background: var(--ageis-color-surface); }
.ageis-state[data-tone="danger"] { border-inline-start: 3px solid var(--ageis-color-danger); }
.ageis-state[data-tone="warning"] { border-inline-start: 3px solid var(--ageis-color-warning); }
.ageis-state[data-tone="success"] { border-inline-start: 3px solid var(--ageis-color-success); }
.ageis-state h2 { margin-block: 0 var(--ageis-space-2); font-size: var(--ageis-type-section); }
.ageis-state p { color: var(--ageis-color-text-secondary); margin-block: 0 var(--ageis-space-4); }
.ageis-workspace { display: grid; gap: var(--ageis-space-6); max-inline-size: var(--ageis-layout-content); margin-inline: auto; padding: var(--ageis-space-6); }
.ageis-workspace-header { display: flex; align-items: start; justify-content: space-between; gap: var(--ageis-space-4); flex-wrap: wrap; }
.ageis-workspace-header h1 { font-size: var(--ageis-type-title); letter-spacing: var(--ageis-type-heading-tracking); line-height: var(--ageis-type-heading-leading); margin: 0; }
.ageis-workspace-header p { margin-block: var(--ageis-space-2) 0; color: var(--ageis-color-text-secondary); max-inline-size: var(--ageis-layout-reading); }
.ageis-workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: var(--ageis-space-6); align-items: start; }
.ageis-evidence { border-inline-start: 1px solid var(--ageis-color-border); padding-inline-start: var(--ageis-space-6); }
.ageis-provenance { border-block-start: 1px solid var(--ageis-color-border); padding-block-start: var(--ageis-space-4); color: var(--ageis-color-text-tertiary); font-size: var(--ageis-type-metadata); }
.ageis-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ageis-space-3); }
.ageis-data-region { min-inline-size: 0; max-inline-size: 100%; overflow: auto; scrollbar-gutter: stable; }
.ageis-metric { font-size: var(--ageis-type-metric); font-weight: var(--ageis-type-semibold); font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) { .ageis-workspace-body { grid-template-columns: minmax(0, 1fr); } .ageis-evidence { border-inline-start: 0; border-block-start: 1px solid var(--ageis-color-border); padding-inline-start: 0; padding-block-start: var(--ageis-space-4); } }
@media (max-width: 640px) { .ageis-workspace { padding: var(--ageis-space-4); } :where(button:not([role="checkbox"]):not([role="radio"]):not([role="switch"]),[role="button"],input:not([type="checkbox"]):not([type="radio"]),select) { min-block-size: var(--ageis-layout-touch); } }
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: normal !important; }
[dir="rtl"] :where(code,pre,.font-mono,.font-telemetry) { font-family: 'IBM Plex Sans Arabic', var(--ageis-font-mono); }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: var(--ageis-motion-reduce) !important; animation-iteration-count: 1 !important; transition-duration: var(--ageis-motion-reduce) !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { html { scrollbar-color: auto; } :where(button,input,select,textarea) { border: 1px solid ButtonText; } :focus-visible { outline-color: Highlight; } }

@media (max-width: 640px) { label[for] { min-block-size: var(--ageis-layout-touch); display: inline-flex; align-items: center; } }

/* The hidden attribute remains authoritative even when component display rules apply. */
[hidden] { display: none !important; }