/* Opt-in shared components. Keep examples and feature pages on the same rules. */
:root{--ui-space-xs:4px;--ui-space-sm:8px;--ui-space-md:16px;--ui-space-lg:24px;--ui-space-xl:32px;--ui-font-small:12px;--ui-font-body:15px;--ui-font-section:17px;--ui-font-title:24px}
.ui-text-title{font-size:var(--ui-font-title);font-weight:700;line-height:1.2;color:var(--ui-heading)}
.ui-text-section{font-size:var(--ui-font-section);font-weight:700;line-height:1.3;color:var(--ui-heading)}
.ui-text-body{font-size:var(--ui-font-body);line-height:1.5;color:var(--ui-text)}
.ui-text-caption{font-size:var(--ui-font-small);line-height:1.4;color:var(--ui-muted)}
.ui-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--ui-space-md)}
.ui-field{display:grid;align-content:start;gap:var(--ui-space-sm);min-width:0}
.ui-field label{margin:0}.ui-field input:not([type=checkbox]):not([type=radio]),.ui-field select,.ui-field textarea{width:100%;margin:0}
.ui-field__help,.ui-field__error{margin:0;font-size:var(--ui-font-small);line-height:1.4}
.ui-field__help{color:var(--ui-muted)}.ui-field__error{color:var(--ui-error)}
.ui-field [aria-invalid=true]{border-color:var(--ui-error);box-shadow:0 0 0 1px var(--ui-error)}
.ui-field :is(input,textarea)[readonly]{background:var(--ui-surface-alt)}
.ui-field :is(input,select,textarea):disabled{opacity:.6;cursor:not-allowed}
.ui-choice{display:flex;align-items:center;gap:var(--ui-space-sm);font-size:13px;font-weight:400;margin:0;min-height:34px}
.ui-choice input:is([type=checkbox],[type=radio]){width:17px;max-width:17px;height:17px;min-height:17px;padding:0;margin:0;accent-color:var(--ui-primary)}
.ui-button--compact{min-height:28px;padding:3px 8px;font-size:12px}
.ui-button--touch{min-height:44px;min-width:44px;padding:10px 14px}
.ui-button--busy{display:inline-flex;align-items:center;gap:8px}
.ui-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--ui-control-border);border-top-color:currentColor;border-radius:50%;animation:ui-spin .8s linear infinite;flex:none}
@keyframes ui-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ui-spinner{animation:none}}
.ui-tabs{display:flex;flex-wrap:wrap;gap:var(--ui-space-md);border-bottom:1px solid var(--ui-line);margin-bottom:var(--ui-space-md)}
.ui-tabs [role=tab]{min-height:34px;padding:5px 0;border:0;border-bottom:2px solid var(--palette-ff45fad085);border-radius:0;background:var(--palette-ff45fad085);color:var(--ui-muted)}
.ui-tabs [role=tab][aria-selected=true]{border-bottom-color:var(--ui-primary);color:var(--ui-heading);font-weight:700}
.ui-table-toolbar,.ui-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-sm);margin:var(--ui-space-md) 0}
.ui-table-toolbar label{flex:1;min-width:min(180px,100%)}.ui-table-toolbar input,.ui-table-toolbar select{max-width:100%}
.ui-table-scroll{overflow:auto;max-width:100%;border:1px solid var(--ui-line);border-radius:4px}
.ui-data-table{width:100%;min-width:640px;border-collapse:collapse;background:var(--ui-surface);color:var(--ui-text)}
.ui-data-table :is(th,td){padding:10px 12px;border-bottom:1px solid var(--ui-line);text-align:left}
.ui-data-table thead th{background:var(--ui-surface-alt);color:var(--ui-heading)}
.ui-data-table tr.is-selected{background:var(--ui-selection)}
.ui-data-table .ui-sort{border:0;background:var(--palette-ff45fad085);color:inherit;font:inherit;font-weight:inherit;padding:0;min-height:28px}
.ui-table-state{text-align:center;padding:var(--ui-space-xl)!important;color:var(--ui-muted);white-space:normal}
.ui-pagination{justify-content:flex-end}.ui-pagination [role=status]{margin-right:auto}
.ui-message{padding:10px 12px;border:1px solid var(--ui-line);border-radius:4px;margin:8px 0;overflow-wrap:anywhere}
.ui-message--success{background:var(--ui-success-bg);color:var(--ui-success)}
.ui-message--warning{background:var(--ui-warning-bg);color:var(--ui-warning)}
.ui-message--error{background:var(--ui-error-bg);color:var(--ui-error)}
.ui-section{padding:var(--ui-space-lg) 0;border-bottom:1px solid var(--ui-line)}
.ui-section:first-child{border-top:0}
@media(max-width:640px){.ui-table-toolbar{align-items:stretch}.ui-table-toolbar label{flex:1 1 100%}}

.ui-field .ui-checkbox{display:flex;align-items:center;gap:var(--ui-space-sm);min-height:34px}.ui-field .ui-checkbox input{margin:0}

.ui-route-row{display:flex;align-items:center;gap:var(--ui-space-sm);margin-bottom:var(--ui-space-sm)}
.ui-route-row>select{flex:1;min-width:0;width:auto}.ui-route-row>button{flex:none}

/* Shared server messages pair text and surface in both themes, on every app. */
.messages p{padding:10px 12px;border:1px solid var(--ui-line);border-radius:4px;margin:12px 0;overflow-wrap:anywhere;background:var(--ui-success-bg);color:var(--ui-success)}
.messages p[data-message-level=warning]{background:var(--ui-warning-bg);color:var(--ui-warning)}
.messages p[data-message-level=error]{background:var(--ui-error-bg);color:var(--ui-error)}
.messages p[data-message-level=info],.messages p[data-message-level=debug]{background:var(--ui-surface-alt);color:var(--ui-text)}

/* Dark feedback uses neutral surfaces with clear semantic edge markers. */
[data-theme="dark"] :is(.ui-message--error,.messages p[data-message-level=error]){color:var(--ui-text);border-inline-start:3px solid var(--ui-critical)}
[data-theme="dark"] :is(.ui-message--warning,.messages p[data-message-level=warning]){color:var(--ui-text);border-inline-start:3px solid var(--ui-warning)}

.ui-critical-value{color:var(--ui-critical);font-size:32px;font-weight:700}

/* Opt-in base controls for shared popups without an app-wide stylesheet. */
.ui-control,.ui-button{box-sizing:border-box;min-height:34px;max-width:100%;padding:6px 9px;border:1px solid var(--ui-control-border);border-radius:4px;background:var(--ui-surface);color:var(--ui-text);font:inherit}
.ui-button{cursor:pointer;white-space:nowrap}.ui-button:hover{background:var(--ui-hover)}
.ui-control:focus-visible,.ui-button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-button--primary{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-on-primary)}.ui-button--primary:hover{background:var(--ui-primary-hover);color:var(--ui-on-primary)}
.ui-button:disabled{opacity:.55;cursor:not-allowed}
.ui-icon-button.ui-icon-button--compact{width:24px;height:24px;min-height:24px;flex:0 0 24px;padding:4px;border-color:var(--ui-line)}
.ui-icon-button.ui-icon-button--compact .ui-icon{width:14px;height:14px}