/* Opt-in components. No global WordPress/theme selectors or network imports. */
.sar-ui { color: var(--sar-color-text); background: var(--sar-color-surface); font-family: var(--sar-font-body); font-size: var(--sar-text-body); line-height: var(--sar-line-body); overflow-wrap: anywhere; }
.sar-ui *, .sar-ui *::before, .sar-ui *::after { box-sizing: border-box; }
.sar-ui :where(h1, h2, h3, h4, h5, h6) { font-family: var(--sar-font-heading); line-height: var(--sar-line-heading); margin-block: 0 var(--sar-space-4); }
.sar-ui :where(h1, h2) { font-size: var(--sar-text-heading); }
.sar-ui :where(p, ul, ol, dl) { margin-block: 0 var(--sar-space-4); }
.sar-ui :where(button, input, select, textarea) { font: inherit; }
.sar-ui :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--sar-focus-width) solid var(--sar-focus-color); outline-offset: var(--sar-focus-offset); }
.sar-ui :where([id]) { scroll-margin-block-start: var(--sar-space-7); }
.sar-ui .sar-surface--inverse { background: var(--sar-color-bg-institutional); color: var(--sar-color-on-dark); --sar-focus-color: var(--sar-color-accent); padding: var(--sar-card-padding); border-radius: var(--sar-radius-card); }
.sar-ui .sar-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sar-space-2); min-height: var(--sar-control-target); min-width: var(--sar-control-target); padding: var(--sar-control-padding); border: 2px solid var(--sar-color-bg-primary); border-radius: var(--sar-radius-small); color: var(--sar-color-on-dark); background: var(--sar-color-bg-primary); font-weight: 650; text-decoration: none; cursor: pointer; text-align: center; white-space: normal; }
.sar-ui .sar-button:hover { background: var(--sar-color-bg-institutional); }
.sar-ui .sar-button--secondary { color: var(--sar-color-text); background: var(--sar-color-surface); }
.sar-ui .sar-button--secondary:hover { background: var(--sar-color-surface-muted); }
.sar-ui .sar-button--accent { color: var(--sar-color-bg-primary); background: var(--sar-color-accent); }
.sar-ui .sar-button--accent:hover { background: var(--sar-color-surface-muted); }
.sar-ui :where(button, input, select, textarea):disabled { cursor: not-allowed; color: var(--sar-color-muted); background: var(--sar-color-surface-muted); border-color: var(--sar-color-border); }
.sar-ui .sar-link { color: var(--sar-color-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1em; }
.sar-ui .sar-link:hover { text-decoration-thickness: 0.2em; }
.sar-ui .sar-surface--inverse .sar-link { color: var(--sar-color-on-dark); }
.sar-ui .sar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sar-nav-gap); }
.sar-ui .sar-nav__link { display: inline-flex; align-items: center; min-height: var(--sar-control-target); padding: var(--sar-space-2) var(--sar-space-3); color: inherit; text-decoration: underline; text-underline-offset: 0.25em; border-radius: var(--sar-radius-small); }
.sar-ui .sar-nav__link[aria-current="page"] { font-weight: 750; text-decoration-thickness: 0.2em; }
.sar-ui .sar-portal-nav { display: grid; gap: var(--sar-nav-gap); padding: var(--sar-space-4); background: var(--sar-color-surface-muted); border: 1px solid var(--sar-color-border-subtle); border-radius: var(--sar-radius-card); }
.sar-ui .sar-card { min-width: 0; padding: var(--sar-card-padding); border: 1px solid var(--sar-color-border-subtle); border-radius: var(--sar-radius-card); background: var(--sar-color-surface); color: var(--sar-color-text); --sar-focus-color: var(--sar-color-bg-primary); box-shadow: var(--sar-shadow-card); }
.sar-ui :where(.sar-service-card, .sar-matter-card, .sar-task-card, .sar-document-card, .sar-education-card, .sar-commercial-card) { border-block-start: 0.25rem solid var(--sar-color-accent); }
.sar-ui .sar-card__meta { color: var(--sar-color-muted); font-size: var(--sar-text-small); }
.sar-ui .sar-card__actions { display: flex; flex-wrap: wrap; gap: var(--sar-space-3); margin-block-start: var(--sar-space-4); }
.sar-ui .sar-process { list-style: decimal; padding-inline-start: var(--sar-space-6); }
.sar-ui .sar-process__step { padding: var(--sar-space-3); margin-block-end: var(--sar-space-3); border-inline-start: 3px solid var(--sar-color-accent-secondary); }
.sar-ui .sar-notice, .sar-ui .sar-alert { padding: var(--sar-space-4); background: var(--sar-color-surface-muted); color: var(--sar-color-text); border: 1px solid var(--sar-color-border); border-inline-start: var(--sar-alert-border); border-radius: var(--sar-radius-small); }
.sar-ui :where(.sar-alert--error, .sar-security-warning) { border-inline-start: 0.5rem double var(--sar-color-bg-primary); }
.sar-ui .sar-alert--success { border-inline-start-color: var(--sar-color-bg-institutional); }
.sar-ui .sar-badge { display: inline-flex; align-items: center; gap: var(--sar-space-1); max-width: 100%; padding: var(--sar-status-padding); color: var(--sar-color-text); background: var(--sar-color-surface-muted); border: 1px solid var(--sar-color-border); border-radius: var(--sar-radius-pill); font-size: var(--sar-text-small); font-weight: 650; }
.sar-ui .sar-badge--attention { background: var(--sar-color-accent); }
.sar-ui .sar-badge--blocked { border-width: 2px; border-style: dashed; }
.sar-ui .sar-badge--complete { color: var(--sar-color-on-dark); background: var(--sar-color-bg-institutional); }
.sar-ui .sar-gate { padding: var(--sar-space-4); border: 2px solid var(--sar-color-bg-primary); border-radius: var(--sar-radius-card); background: var(--sar-color-surface-muted); }
.sar-ui .sar-state { padding: var(--sar-card-padding); border: 1px dashed var(--sar-color-border); border-radius: var(--sar-radius-card); }
.sar-ui .sar-loading { display: flex; align-items: center; gap: var(--sar-space-3); }
.sar-ui .sar-loading__indicator { width: 1.25rem; height: 1.25rem; border: 3px solid var(--sar-color-border-subtle); border-block-start-color: var(--sar-color-text); border-radius: var(--sar-radius-pill); animation: sar-loading-turn 1s linear infinite; }
@keyframes sar-loading-turn { to { transform: rotate(1turn); } }
.sar-ui .sar-field { display: grid; gap: var(--sar-space-2); }
.sar-ui .sar-field__label { font-weight: 650; }
.sar-ui .sar-field__help { color: var(--sar-color-muted); font-size: var(--sar-text-small); }
.sar-ui .sar-field__error { color: var(--sar-color-text); font-weight: 650; }
.sar-ui .sar-control { width: 100%; min-width: 0; min-height: var(--sar-control-target); padding: var(--sar-space-3); color: var(--sar-color-text); background: var(--sar-color-surface); border: var(--sar-field-border); border-radius: var(--sar-radius-small); }
.sar-ui textarea.sar-control { min-height: 8rem; resize: vertical; }
.sar-ui .sar-control[aria-invalid="true"] { border: 2px solid var(--sar-color-bg-primary); }
.sar-ui .sar-consent { display: flex; align-items: flex-start; gap: var(--sar-space-3); min-height: var(--sar-control-target); padding: var(--sar-space-2); cursor: pointer; }
.sar-ui .sar-consent input { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: 0.25rem 0 0; accent-color: var(--sar-color-bg-primary); }
.sar-ui .sar-table-region { overflow-x: auto; max-width: 100%; border: 1px solid var(--sar-color-border-subtle); border-radius: var(--sar-radius-small); }
.sar-ui .sar-table { width: 100%; border-collapse: collapse; text-align: start; background: var(--sar-color-surface); }
.sar-ui .sar-table caption { padding: var(--sar-space-4); font-weight: 650; text-align: start; }
.sar-ui .sar-table :where(th, td) { padding: var(--sar-space-3); vertical-align: top; border-block-end: 1px solid var(--sar-color-border-subtle); overflow-wrap: anywhere; }
.sar-ui .sar-table th { background: var(--sar-color-surface-muted); }
.sar-ui .sar-queue-row--attention { border-inline-start: 4px solid var(--sar-color-accent-secondary); }
.sar-ui .sar-queue-row__owner { font-weight: 650; }
.sar-ui .sar-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--sar-space-2); list-style: none; padding: 0; font-size: var(--sar-text-small); }
.sar-ui .sar-breadcrumbs li + li::before { content: "/"; padding-inline-end: var(--sar-space-2); color: var(--sar-color-muted); }
.sar-ui .sar-mobile-nav { padding: var(--sar-space-2); border: 1px solid var(--sar-color-border); border-radius: var(--sar-radius-small); }
.sar-ui .sar-mobile-nav summary { min-height: var(--sar-control-target); padding: var(--sar-space-3); cursor: pointer; font-weight: 650; }
.sar-ui .sar-mobile-nav .sar-nav { display: grid; }
@media (min-width: 48rem) { .sar-ui .sar-portal-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: var(--sar-space-6); } }
@media (prefers-reduced-motion: reduce) { .sar-ui *, .sar-ui *::before, .sar-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .sar-ui :where(.sar-button, .sar-badge, .sar-control, .sar-gate, .sar-alert, .sar-notice) { border-color: CanvasText; } .sar-ui :where(a, button, input, select, textarea, summary):focus-visible { outline-color: Highlight; } }