/* Shared interaction semantics. Brand red is separate from selection. */
:root{--state-selected:#2f6b45;--state-selected-text:#24533d;--state-selected-bg:#edf6ef;--state-focus:#245b9e;--state-success:#2f6b45;--state-success-text:#24533d;--state-success-bg:#edf6ef;--state-warning:#946200;--state-warning-text:#714900;--state-warning-bg:#fff7e6;--state-info:#687582;--state-info-text:#455463;--state-info-bg:#f1f4f6;--state-disabled:#69737d;--state-disabled-bg:#edf0f2;--state-hover:#f7f8f9;--state-error:#8d1015;--state-error-bg:#fff2f2;--state-disabled-border:#b7c0c8;--state-error-border:#D71920}
input[type=checkbox],input[type=radio],progress{accent-color:var(--state-selected)}
select[multiple] option:checked{background:var(--state-selected-bg);color:var(--state-selected-text)}
::selection{background:#cfe4d6;color:#173b2a}
:focus-visible{outline:3px solid var(--state-focus);outline-offset:4px}
/* Error borders remain independent of the blue focus ring. Do not mark pristine required inputs. */
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border:2px solid var(--state-error-border);border-color:var(--state-error-border)!important}
@media(forced-colors:active){:root{--state-selected:Highlight;--state-selected-text:CanvasText;--state-selected-bg:Canvas;--state-focus:Highlight}:focus-visible{outline-color:Highlight}input[type=checkbox],input[type=radio]{accent-color:auto}select[multiple] option:checked{background:Highlight;color:HighlightText}}

/* One semantic feedback component, reused by notices, badges and live statuses. */
:where([data-ui-state],.notice){--feedback-color:var(--state-info-text);--feedback-border:var(--state-info);--feedback-bg:var(--state-info-bg)}
:where([data-ui-state=success],.notice-success){--feedback-color:var(--state-success-text);--feedback-border:var(--state-success);--feedback-bg:var(--state-success-bg)}
:where([data-ui-state=warning],.notice-warning){--feedback-color:var(--state-warning-text);--feedback-border:var(--state-warning);--feedback-bg:var(--state-warning-bg)}
:where([data-ui-state=error],.notice-error){--feedback-color:var(--state-error);--feedback-border:var(--state-error-border);--feedback-bg:var(--state-error-bg)}
:where([data-ui-state=disabled]){--feedback-color:var(--state-disabled);--feedback-border:var(--state-disabled);--feedback-bg:var(--state-disabled-bg)}
.ui-status,.state-badge{color:var(--feedback-color);background:var(--feedback-bg);border-radius:5px;padding:3px 8px;font-size:.85em;overflow-wrap:anywhere}
.state-badge{display:inline-block;border:1px solid var(--feedback-border)}
.ui-status[data-ui-state=success]::before{content:"✓" / "";margin-inline-end:.35em}.ui-status[data-ui-state=error]::before{content:"!" / "";font-weight:700;margin-inline-end:.35em}
.notice{color:var(--feedback-color);border-color:var(--feedback-border);background:var(--feedback-bg)}
.notice-icon{margin-inline-end:.4em;font-weight:700}
/* Inactive is a separate state: checked values remain visible without an active green surface. */
:where(button,input,select,textarea):disabled,[role=button][aria-disabled=true],a[aria-disabled=true]{color:var(--state-disabled);background-color:var(--state-disabled-bg);border-color:var(--state-disabled-border);cursor:not-allowed;opacity:1}
input:is([type=checkbox],[type=radio]):disabled{accent-color:var(--state-disabled)}
:is(.qm-topics,.kl-segmented,.kl-options) label:has(input:disabled){color:var(--state-disabled);border-color:var(--state-disabled-border);background:var(--state-disabled-bg);box-shadow:none;cursor:not-allowed;font-weight:400}
button:disabled:hover,[aria-disabled=true]:hover{filter:none}
button:not(:disabled):not(.primary):hover{background:var(--state-hover)}
/* Submitted validation errors surround the group; the selected child keeps its green check. */
[data-ui-invalid=true]{border:2px solid var(--state-error-border)!important;border-radius:8px;padding:12px}
[data-ui-invalid=true]>legend{color:var(--state-error)}
.ui-field-error{color:var(--state-error);font-size:.85rem;margin:8px 0 0}
@media(forced-colors:active){:root{--state-success:Highlight;--state-success-text:CanvasText;--state-success-bg:Canvas;--state-warning:CanvasText;--state-warning-text:CanvasText;--state-warning-bg:Canvas;--state-info:CanvasText;--state-info-text:CanvasText;--state-info-bg:Canvas;--state-disabled:GrayText;--state-disabled-bg:Canvas;--state-error:CanvasText;--state-error-border:CanvasText}.state-badge{border-style:solid}:disabled,[aria-disabled=true]{color:GrayText}.ui-status{border:1px solid CanvasText}}
/* Disabled overrides brand and module control styling, while retaining the checked value. */
:is(input,select,textarea):disabled{color:var(--state-disabled)!important;background-color:var(--state-disabled-bg)!important;border-color:var(--state-disabled-border)!important}
input:is([type=checkbox],[type=radio]):disabled{accent-color:var(--state-disabled)!important}
button.primary:disabled,a.button.primary[aria-disabled=true]{background:var(--state-disabled-bg);border-color:var(--state-disabled-border);color:var(--state-disabled);filter:none}

:where([data-ui-state=selected]){--feedback-color:var(--state-selected-text);--feedback-border:var(--state-selected);--feedback-bg:var(--state-selected-bg)}

.notice.notice-warning:not(:has(.notice-icon))::before,.ui-status[data-ui-state=warning]::before{content:"⚠" / "";margin-inline-end:.4em}