/* Shared UI contract. themes.css owns palette values; load after feature styles.
 * Deliberate exceptions: editorial headings, provider art, canvases and print. */
html[data-ui] {
  --ui-bg: var(--bg);
  --ui-surface: var(--surface-solid);
  --ui-surface-raised: var(--surface2);
  --ui-text: var(--ink);
  --ui-text-muted: var(--muted);
  --ui-placeholder: var(--soft);
  --ui-action: var(--accent);
  --ui-on-action: var(--on-accent);
  --ui-link: var(--accent2);
  --ui-focus: var(--accent2);
  --ui-divider: var(--line);
  --ui-control-border: color-mix(in srgb, var(--ink) 55%, var(--surface-solid));
  --ui-success: #77e1ac;
  --ui-warning: #f6d07c;
  --ui-danger: #ffaaa8;
  --ui-info: var(--accent2);
  --ui-overlay: #000a;
  --ui-control-radius: 10px;
  --ui-card-radius: 16px;
  --ui-control-height: 44px;
  --ui-field-font-size: 14px;
  --ui-font: var(--font-ui, Inter, 'Segoe UI', Arial, sans-serif);
  --radius-control: var(--ui-control-radius);
  --radius-card: var(--ui-card-radius);
}
html[data-ui]:is([data-theme=blanc],[data-theme=ivoire],[data-theme=studio-light]) {
  --ui-success: #21633e; --ui-warning: #745000; --ui-danger: #a52a30;
}
html[data-ui] body {font-family:var(--ui-font); color:var(--ui-text)}
/* Native fields retain their form, autocomplete and keyboard behavior.
 * These few contract declarations override legacy inline field dimensions. */
html[data-ui] body :is(select, input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=button],[type=submit]), textarea):not(.monaco-editor *, .code-textarea) {
  box-sizing:border-box; max-width:100%; min-width:0;
  min-height:var(--ui-control-height) !important;
  border:1px solid var(--ui-control-border);
  border-radius:var(--ui-control-radius) !important;
  background-color:var(--ui-surface); color:var(--ui-text);
  font-family:var(--ui-font); font-size:var(--ui-field-font-size) !important; line-height:1.5;
  padding-block:10px; padding-inline:12px;
}
html[data-ui] body textarea:not(.code-textarea) {resize:vertical}
html[data-ui] body :is(input,textarea)::placeholder {color:var(--ui-placeholder); opacity:1}
/* Legacy input {width:100%; padding:...} must never turn a checkbox into a bar. */
html[data-ui] body :is(input[type=checkbox],input[type=radio]) {
  box-sizing:border-box; flex:0 0 20px; width:20px; height:20px;
  min-width:20px; min-height:20px; max-width:20px; max-height:20px;
  padding:0; margin:0; accent-color:var(--ui-action); vertical-align:middle;
}

/* One native selection design across every shell, including dynamic fields.
 * Unsupported browsers keep their OS picker. No cloned controls or JS state.
 * Exclude multiple/size listboxes, which have different interaction semantics. */
html[data-ui] body select:not([multiple],[size]:not([size="0"],[size="1"])) {
  cursor:pointer; text-align:start; text-overflow:ellipsis;
  border-color:var(--ui-control-border);
  transition:border-color .15s ease, background-color .15s ease;
}
html[data-ui] body select:not(:disabled):hover {border-color:var(--ui-text-muted)}
html[data-ui] body select option {background:var(--ui-surface);color:var(--ui-text)}
@supports (appearance:base-select) {
  html[data-ui] body select:not([multiple],[size]:not([size="0"],[size="1"])),
  html[data-ui] body select:not([multiple],[size]:not([size="0"],[size="1"]))::picker(select) {
    appearance:base-select;
  }
  html[data-ui] body select:not([multiple],[size]:not([size="0"],[size="1"])) {
    align-items:center; gap:16px; background-image:none;
  }
  html[data-ui] body select::picker-icon {
    content:""; flex:0 0 18px; width:18px; height:18px;
    margin-inline-start:auto; background:currentColor; color:var(--ui-text-muted);
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:transform .15s ease;
  }
  html[data-ui] body select:open {border-color:var(--ui-focus)}
  html[data-ui] body select:open::picker-icon {transform:rotate(180deg)}
  html[data-ui] body select::picker(select) {
    box-sizing:border-box; padding:6px; margin-block:6px;
    min-inline-size:min(100vw - 24px,max(176px,anchor-size(self-inline)));
    max-inline-size:calc(100vw - 24px);
    max-block-size:min(352px,calc(100dvh - 24px));
    overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;
    scrollbar-color:var(--ui-control-border) transparent;
    border:1px solid var(--ui-control-border); border-radius:14px;
    background:var(--ui-surface); color:var(--ui-text);
    box-shadow:0 12px 36px #0003,0 2px 8px #0002;
    font:400 var(--ui-field-font-size)/1.5 var(--ui-font);
  }
  html[data-ui] body select:not([multiple],[size]:not([size="0"],[size="1"])) option {
    box-sizing:border-box; display:flex; align-items:center; gap:12px;
    min-block-size:44px; padding:10px 12px; margin:2px 0;
    border:1px solid transparent; border-radius:8px;
    background:transparent; color:var(--ui-text); font:400 var(--ui-field-font-size)/1.5 var(--ui-font);
    white-space:normal; overflow-wrap:anywhere; cursor:pointer;
  }
  html[data-ui] body select option::checkmark {
    order:1; margin-inline-start:auto; color:var(--ui-link); font-weight:700;
  }
  html[data-ui] body select option:checked {
    background:color-mix(in srgb,var(--ui-action) 12%,var(--ui-surface));
    color:var(--ui-text); font-weight:600;
  }
  html[data-ui] body select option:not(:disabled):is(:hover,:focus) {
    background:var(--ui-surface-raised); border-color:var(--ui-control-border);
    outline:0;
  }
  html[data-ui] body select option:disabled {color:var(--ui-text-muted);opacity:.6;cursor:not-allowed}
  html[data-ui] body select optgroup {font:600 12px/1.5 var(--ui-font);color:var(--ui-text-muted)}
  html[data-ui] body select optgroup::legend {padding:10px 12px 4px}
}
html[data-ui] body :is(button,.btn,.act,.primary-button,.secondary-button) {
  font-family:var(--ui-font); min-height:44px; border-radius:var(--ui-control-radius);
  touch-action:manipulation; overflow-wrap:anywhere;
}
html[data-ui] body :is(button,input,select,textarea):disabled {cursor:not-allowed; opacity:.58}
html[data-ui] body .icon-action {min-width:44px;min-height:44px;height:44px}
html[data-ui] body .icon-action:not(.icon-action-with-meta) {width:44px !important}
html[data-ui] body :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid var(--ui-focus) !important; outline-offset:3px !important;
}
html[data-ui] body :is(input,select,textarea)[aria-invalid=true] {border-color:var(--ui-danger)}
html[data-ui] body input[readonly],html[data-ui] body textarea[readonly] {background-color:var(--ui-surface-raised); opacity:1}
html[data-ui] body dialog {color:var(--ui-text); background:var(--ui-surface); border:1px solid var(--ui-control-border); border-radius:var(--ui-card-radius); max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); overscroll-behavior:contain}
html[data-ui] body dialog::backdrop {background:var(--ui-overlay)}
html[data-ui] body :is(.card,.sample-card,.metric,.admin-metric) {border-radius:var(--ui-card-radius)}
html[data-ui] body :is(.tablewrap,.table-wrap,.table-scroll) {max-width:100%; overflow:auto; overscroll-behavior-inline:contain}
html[data-ui] body :is(progress,meter,input[type=range]) {accent-color:var(--ui-action)}
html[data-ui] body [hidden] {display:none !important}
html[data-ui] body ::selection {background:var(--ui-action); color:var(--ui-on-action)}
.ui-theme-control {display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--ui-text-muted);max-width:100%}
.ui-theme-control select {width:auto;max-width:180px}
.ui-panel-toolbar {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;grid-column:1/-1;margin-block:0 16px;min-width:0}
.ui-panel-toggle {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid var(--ui-control-border);background:var(--ui-surface);color:var(--ui-text);font-size:14px;line-height:1.5;cursor:pointer}
.ui-panel-toggle svg {width:20px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
html[data-ui][dir=rtl] .ui-panel-toggle svg {transform:scaleX(-1)}
.ui-panel-toggle:hover {background:var(--ui-surface-raised)}
.ui-panel-status {margin-inline-end:auto;min-width:0;font-size:13px;color:var(--ui-text-muted);overflow-wrap:anywhere}
/* Explicitly registered desktop panels only. Mobile is restored by the controller. */
html[data-ui] body .ui-panel-hidden {display:none !important}
html[data-ui] body .ui-panel-layout-collapsed {grid-template-columns:minmax(0,1fr)}
@media(max-width:600px),(pointer:coarse) {
  html[data-ui] {--ui-field-font-size:16px}
  html[data-ui] body :is(button,.btn,.act) {min-height:44px}
  .ui-theme-control {flex-wrap:wrap}.ui-theme-control select {max-width:100%}
}
@media(prefers-reduced-motion:reduce) {
  html[data-ui] {scroll-behavior:auto}
  html[data-ui] body :is(button,a,input,select,textarea,dialog,.card) {transition:none;animation:none}
  html[data-ui] body select::picker-icon {transition:none}
}
@media(forced-colors:active) {
  html[data-ui] {--ui-control-border:ButtonText;--ui-focus:Highlight}
  html[data-ui] body :is(button,input,select,textarea,dialog) {border-color:ButtonText}
}
@media print {.ui-panel-toolbar,.ui-theme-control{display:none!important}}