/* Shared application theme and controls. Existing class names and values are preserved. */
:root {
  color-scheme: dark;
  --bg: var(--grey-014);
  --panel: var(--grey-020);
  --panel-2: var(--grey-026);
  --panel-3: var(--grey-035);
  --line: rgb(var(--veil-light) / 0.1);
  --line-strong: rgb(var(--veil-light) / 0.2);
  --text: var(--grey-242);
  --muted: var(--grey-150);
  --subtle: var(--grey-110);
  --accent: #d9ff73;
  --accent-ink: #161b0c;
  --accent-soft: rgba(217, 255, 115, 0.12);
  --violet: #b9a7ff;
  --violet-soft: rgba(155, 132, 255, 0.11);
  --blue: #8fd7ff;
  --blue-soft: rgba(79, 175, 231, 0.11);
  --danger: #ff8e83;
  --warn: #ffc96a;
  --ok: #9ce6a8;
  /* A chat's context: how full (the model pill's ring, „Modell und Zugriff“'s bar) and where it is handed over. */
  /* The surface of a dialog, also under its parts that stay in view while it scrolls. */
  --surface-dialog: var(--grey-026);
  --context-fill: #4b6890;
  --context-track: rgb(var(--veil-light) / .09);
  --context-limit: #e2394d;
  --radius: var(--ui-radius-panel);
  --mobile-host-chrome-height: 92px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--grey-249);
  --panel: #ffffff;
  --panel-2: var(--grey-242);
  --panel-3: var(--grey-233);
  --line: rgb(var(--veil-dark) / .1);
  --line-strong: rgb(var(--veil-dark) / .2);
  --text: var(--grey-030);
  --muted: var(--grey-095);
  --subtle: var(--grey-110);
  --accent: #3b7d22;
  --accent-ink: #ffffff;
  --accent-soft: rgba(59, 125, 34, .1);
  --violet: #5f51a5;
  --violet-soft: rgba(95, 81, 165, .08);
  --blue: #14618d;
  --blue-soft: rgba(20, 97, 141, .07);
  --danger: #b03227;
  --warn: #8a5a10;
  --ok: #217a45;
  --surface-dialog: #ffffff;
  --context-fill: #7d97bb;
  --context-track: rgb(var(--veil-dark) / .09);
  --context-limit: #d91535;
}
.form-error { color: var(--danger); font-size: 12px; min-height: 18px; }

.primary, .secondary { border-radius: var(--ui-radius-control); font-weight: var(--ui-control-weight); padding: var(--ui-control-padding); }
.primary { background: var(--accent); color: var(--accent-ink); }
.primary:hover { background: #e5ff9a; }
.secondary { background: var(--panel-3); color: var(--text); }
.text-button, .danger-text { background: transparent; color: var(--muted); font-size: var(--ui-text-small); padding: 5px; }
.text-button:hover { color: var(--text); }
.danger-text { color: var(--danger); }
.icon-button, .quiet-icon, .tool-button { border-radius: var(--ui-radius-icon); }
.icon-button { font-size: 16px; height: var(--ui-icon-size); width: var(--ui-icon-size); }
.icon-button:hover, .quiet-icon:hover, .tool-button:hover { background: rgb(var(--veil-light) / 0.06); color: var(--text); }
.quiet-icon { font-size: var(--ui-text-base); height: var(--ui-quiet-icon-size); width: var(--ui-quiet-icon-size); }
.status-chip { align-items: center; background: var(--panel-2); border-radius: var(--ui-radius-pill); color: var(--muted); display: inline-flex; font-family: var(--font); font-size: 9px; gap: 6px; padding: 4px 8px; }
.status-chip.active { color: var(--ok); }
.status-chip.failed { color: var(--danger); }
.status-chip.running { background: transparent; margin-left: 7px; padding: 0; }
.status-chip.running i { animation: spin .75s linear infinite; background: transparent; border: 2px solid rgba(217,255,115,.2); border-radius: 50%; border-right-color: var(--accent); box-shadow: 0 0 7px rgba(217,255,115,.22); box-sizing: border-box; height: 11px; width: 11px; }
.status-chip.running .status-chip-label { display: none; }

.small-button { font-size: var(--ui-text-small); padding: var(--ui-small-control-padding); }

.modal { background: var(--surface-dialog); border: 1px solid var(--line-strong); border-radius: var(--ui-radius-dialog); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.65); color: var(--text); max-height: min(850px, 92dvh); max-width: 650px; overflow-y: auto; padding: 0; width: calc(100% - 30px); }
.compact-modal { max-width: 520px; }
.modal::backdrop { backdrop-filter: blur(8px); background: rgb(var(--veil-dark) / 0.72); }
.modal form, .modal > section { padding: var(--ui-dialog-padding); }
.modal-head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: var(--ui-dialog-gap); }
.modal-head h2 { font-size: var(--ui-text-title); letter-spacing: -0.045em; margin: 0; }
.modal label { color: var(--muted); display: block; font-size: var(--ui-text-small); font-weight: 650; margin: 11px 0; }
.modal label > span { color: var(--subtle); font-weight: 400; }
.modal input, .modal select, .modal textarea { background: var(--grey-017); border: 1px solid var(--line); border-radius: var(--ui-radius-field); display: block; margin-top: 6px; outline: 0; padding: var(--ui-field-padding); width: 100%; }
.modal input:focus, .modal textarea:focus, .modal select:focus { border-color: rgba(217, 255, 115, 0.38); }
.modal .setting-check { align-items: center; display: grid !important; gap: 10px; grid-template-columns: 18px minmax(0,1fr); margin: 0; max-width: 100%; min-width: 0; width: 100%; }
.modal .setting-check input[type="checkbox"] { accent-color: var(--accent); background: transparent; border: 0; border-radius: 4px; height: 18px; margin: 0; padding: 0; width: 18px; }
.modal .setting-check > span { min-width: 0; overflow-wrap: anywhere; }
.modal-grid { display: grid; gap: 0 11px; grid-template-columns: 1fr 1fr; }
.modal-actions { align-items: center; display: flex; gap: 8px; justify-content: flex-end; margin-top: 19px; }
.modal-actions.split { justify-content: space-between; }
/* Shared icon-button layout; feature sheets retain their size, border and interaction variants. */
.icon-button, .quiet-icon, .tool-button, .ml-icon-button, .tk-icon-button, .vt-icon-btn, .co-icon, .fb-icon-button, .fb-seg button, .settings-logout {
  align-items: center;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  justify-content: center;
}
.ml-icon-button, .tk-icon-button, .vt-icon-btn, .co-icon, .fb-icon-button, .fb-seg button, .settings-logout {
  border-radius: var(--ui-radius-icon);
  height: var(--ui-icon-size);
  width: var(--ui-icon-size);
}
/* The full-screen dialog shell used by communication and the vault. */
.ml-dialog, .tk-dialog, .vt-dialog, .co-dialog {
  background: transparent;
  border: 0;
  color: var(--text);
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100vw;
}
.ml-dialog::backdrop, .tk-dialog::backdrop, .vt-dialog::backdrop {
  backdrop-filter: blur(6px);
  background: rgb(var(--veil-dark) / .62);
}
/* Card frames and pills share their outline; content layout remains in its feature. */
.settings-group, .rt-card, .ph-card {
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel);
}
.rt-chip, .vt-chip-filter, .ph-card-meta, .ml-cal-daynum, .rt-val, .rt-filter-chip {
  border-radius: var(--ui-radius-pill);
}

/* The same person badge in mail and meeting address suggestions. */
.ml-suggest-cora { background: var(--accent-soft); border-radius: 5px; color: var(--accent); font-size: 10px; font-weight: 700; margin-left: 4px; padding: 1px 5px; }

/* Neutral settings components. Legacy names remain aliases at the same specificity. */

:is(.settings-dialog, .settings-sheet) :is(.settings-search, .ui-search), .ui-search.ui-search { align-items: center; background: rgb(var(--veil-light) / .035); border: 1px solid var(--line); border-radius: 11px; color: var(--subtle); cursor: text; display: flex; flex-direction: row; gap: 8px; height: 38px; margin: 2px 14px 8px; padding: 0 8px 0 11px; transition: border-color 120ms ease, box-shadow 120ms ease; }
:is(.settings-search, .ui-search):focus-within { border-color: var(--line-strong); color: var(--muted); }
:is(.settings-search, .ui-search) > svg { flex: 0 0 auto; height: 15px; width: 15px; }
:is(.settings-dialog, .settings-sheet) :is(.settings-search, .ui-search) input, :is(.settings-dialog, .settings-sheet) :is(.settings-search, .ui-search) input:focus, .ui-search.ui-search input, .ui-search.ui-search input:focus { background: transparent; border: 0; box-shadow: none; color: var(--text); flex: 1; font-size: 12.5px; min-height: 0; min-width: 0; outline: 0; padding: 0; }
:is(.settings-search, .ui-search) input::placeholder { color: var(--subtle); }
:is(.settings-search, .ui-search) input::-webkit-search-cancel-button { display: none; }
:is(.settings-search-clear, .ui-search-clear) { align-items: center; background: transparent; border-radius: 6px; color: var(--muted); display: inline-flex; height: 24px; justify-content: center; padding: 0; width: 24px; }
:is(.settings-search-clear, .ui-search-clear):hover { background: rgb(var(--veil-light) / .08); color: var(--text); }
:is(.settings-search-clear, .ui-search-clear) svg { height: 12px; width: 12px; }
:is(.settings-nav, .ui-sidenav) { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 10px 12px; scrollbar-color: rgba(230,238,210,.12) transparent; scrollbar-width: thin; }
:is(.settings-nav, .ui-sidenav)::-webkit-scrollbar { width: 6px; }
:is(.settings-nav, .ui-sidenav)::-webkit-scrollbar-thumb { background: rgba(230,238,210,.12); border: 0; }
:is(.settings-nav-group, .ui-sidenav-group) + :is(.settings-nav-group, .ui-sidenav-group) { margin-top: 14px; }
:is(.settings-nav-label, .ui-sidenav-label) { align-items: baseline; color: var(--subtle); display: flex; font-size: 9.5px; font-weight: 760; gap: 8px; justify-content: space-between; letter-spacing: .13em; margin: 0 0 3px; padding: 0 10px; text-transform: uppercase; }
:is(.settings-nav-label, .ui-sidenav-label) small { color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0; max-width: 58%; overflow: hidden; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
:is(.settings-nav-sub, .ui-sidenav-sub) { display: grid; gap: 1px; margin: 8px 0 4px 11px; padding-left: 17px; position: relative; }
:is(.settings-nav-sub, .ui-sidenav-sub)[hidden] { display: none; }
:is(.settings-nav-sub, .ui-sidenav-sub) + :is(.settings-nav-sub, .ui-sidenav-sub) { margin-top: 12px; }
:is(.settings-nav-sublabel, .ui-sidenav-sublabel) { align-items: center; background: #d9ff73; border-radius: 5px; bottom: 2px; color: #161b0c; display: flex; font-size: 8.5px; font-weight: 800; justify-content: center; left: 0; letter-spacing: .14em; line-height: 1; margin: 0; overflow: hidden; padding: 3px 0; position: absolute; text-transform: uppercase; top: 2px; transform: rotate(180deg); white-space: nowrap; width: 14px; writing-mode: vertical-rl; }
:is(.settings-nav-sub, .ui-sidenav-sub) > button { border-radius: 8px; padding-left: 6px; }
:is(.settings-nav-sub, .ui-sidenav-sub).single { margin-left: 0; padding-left: 0; }
:is(.settings-nav-sub, .ui-sidenav-sub).single > button { padding-left: 10px; }
:is(.settings-nav-sub, .ui-sidenav-sub).single :is(.settings-nav-sublabel, .ui-sidenav-sublabel) { border-radius: 4px; bottom: auto; justify-self: start; left: auto; margin: 0 0 2px 11px; padding: 4px 7px 3px; position: static; top: auto; transform: none; width: auto; writing-mode: horizontal-tb; }
:is(.settings-nav, .ui-sidenav) button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--muted); display: flex; font-size: 12.5px; font-weight: 600; gap: 10px; min-height: 36px; padding: 0 10px; text-align: left; transition: background 120ms ease, color 120ms ease; width: 100%; }
:is(.settings-nav, .ui-sidenav) button > svg { flex: 0 0 auto; height: 16px; opacity: .72; width: 16px; }
:is(.settings-nav, .ui-sidenav) button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.settings-nav, .ui-sidenav) button:hover { background: rgb(var(--veil-light) / .045); color: var(--text); }
:is(.settings-nav, .ui-sidenav) button:focus-visible { border-color: rgba(217,255,115,.5); outline: none; }
:is(.settings-nav, .ui-sidenav) button.active { background: var(--accent-soft); color: var(--text); }
:is(.settings-nav, .ui-sidenav) button.active > svg { color: var(--accent); opacity: 1; }
:is(.settings-nav, .ui-sidenav) button.search-hit > span { color: var(--text); }
:is(.settings-nav-empty, .ui-sidenav-empty) { color: var(--subtle); font-size: 11.5px; margin: 14px 10px; }
:is(.settings-pane-head, .ui-section-head-toolbar) { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin-bottom: 2px; }
:is(.settings-pane-head, .ui-section-head-toolbar) > div { min-width: 0; }
:is(.settings-pane-head, .ui-section-head-toolbar) strong { display: block; font-size: 13.5px; font-weight: 650; }
:is(.settings-pane-head, .ui-section-head-toolbar) span { color: var(--muted); display: block; font-size: 11.5px; line-height: 1.5; margin-top: 3px; }
:is(.settings-pane-head, .ui-section-head-toolbar) > button, :is(.settings-pane-head-actions, .ui-section-actions) { flex: 0 0 auto; }
:is(.settings-pane-head-actions, .ui-section-actions) { align-items: center; display: flex; gap: 8px; }
:is(.settings-group-head, .ui-section-head-group) { display: grid; gap: 3px; min-width: 0; }
:is(.settings-group-head, .ui-section-head-group) strong { display: block; font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
:is(.settings-group-head, .ui-section-head-group) span { color: var(--muted); display: block; font-size: 11.5px; line-height: 1.5; }
:is(.settings-group-head, .ui-section-head-group):has(> button), :is(.settings-group-head, .ui-section-head-group):has(> :is(.settings-segment, .ui-segment)) { align-items: center; gap: 4px 14px; grid-template-columns: minmax(0, 1fr) auto; }
:is(.settings-group-head, .ui-section-head-group) > div:not(:is(.settings-segment, .ui-segment)) { display: grid; gap: 3px; min-width: 0; }
:is(.settings-group-head, .ui-section-head-group) > button, :is(.settings-group-head, .ui-section-head-group) > :is(.settings-segment, .ui-segment) { grid-column: 2; grid-row: 1; }
:is(.settings-group-head, .ui-section-head-group) > button { white-space: nowrap; }
:is(.settings-saved, .ui-saved) { background: rgba(156,230,168,.14); border-radius: 999px; color: var(--ok); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .02em; max-width: 100%; opacity: 0; overflow: hidden; padding: 2px 8px; text-overflow: ellipsis; transform: translateY(2px); transition: opacity 160ms ease, transform 160ms ease; white-space: nowrap; }
:is(.settings-saved, .ui-saved)::before { content: "✓ "; }
:is(.settings-saved, .ui-saved)[data-tone="error"] { background: rgba(255,142,131,.14); color: var(--danger); }
:is(.settings-saved, .ui-saved)[data-tone="error"]::before { content: "✕ "; }
:is(.settings-saved, .ui-saved).show { opacity: 1; transform: none; }
:is(.settings-section, .ui-section) { display: grid; min-width: 0; }
:is(.settings-section-head, .ui-section-head) { display: grid; gap: 4px; margin-bottom: 4px; }
:is(.settings-section-head, .ui-section-head) h3 { color: var(--text); font-size: 15px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; margin: 0; }
:is(.settings-section-head, .ui-section-head) p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
:is(.settings-section-head, .ui-section-head) + :is(.theme-picker, .ui-choices) { margin-top: 12px; }
:is(.settings-section-head, .ui-section-head) h3 :is(.settings-saved, .ui-saved) { letter-spacing: .02em; margin-left: 8px; vertical-align: middle; }
:is(.settings-field, .ui-row) { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 8px 28px; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: 15px 0; }
:is(.settings-section-head, .ui-section-head) + :is(.settings-field, .ui-row) { border-top: 0; }
:is(.settings-section-head, .ui-section-head) + :is(.settings-field, .ui-row) { padding-top: 10px; }
:is(.settings-field-stack, .ui-row-stack) { grid-template-columns: minmax(0, 1fr); }
:is(.settings-field-copy, .ui-row-copy) { display: grid; gap: 3px; min-width: 0; }
:is(.settings-field-copy, .ui-row-copy) strong { align-items: center; color: var(--text); display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 600; gap: 8px; letter-spacing: -.005em; }
:is(.settings-field-copy, .ui-row-copy) small { color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.5; max-width: 62ch; }
:is(.settings-field, .ui-row) > select, :is(.settings-field, .ui-row) > input:not([type="checkbox"]) { width: 240px; }
:is(.settings-field, .ui-row) > .secondary, :is(.settings-field, .ui-row) > .primary { justify-self: end; }
:is(.theme-picker, .ui-choices) { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 196px)); margin-top: 4px; }
:is(.theme-card, .ui-choice) { cursor: pointer; display: grid; gap: 9px; margin: 0; min-width: 0; position: relative; }
:is(.theme-card, .ui-choice) > input { height: 1px; margin: 0; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
:is(.theme-card-preview, .ui-choice-preview) { aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: 11% 25% minmax(0, 1fr); overflow: hidden; transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
:is(.theme-card-preview, .ui-choice-preview) > i { display: block; min-width: 0; }
:is(.theme-card-name, .ui-choice-name) { align-items: center; color: var(--muted); display: flex; font-size: 12.5px; font-weight: 600; gap: 8px; }
:is(.theme-card-name, .ui-choice-name)::before { border: 1.5px solid var(--line-strong); border-radius: 50%; content: ""; flex: 0 0 auto; height: 14px; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; width: 14px; }
:is(.theme-card, .ui-choice):hover :is(.theme-card-preview, .ui-choice-preview) { border-color: var(--line-strong); }
:is(.theme-card, .ui-choice) > input:checked ~ :is(.theme-card-preview, .ui-choice-preview) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
:is(.theme-card, .ui-choice) > input:checked ~ :is(.theme-card-name, .ui-choice-name), .ui-choice > input:checked ~ .ui-choice-preview .ui-choice-name { color: var(--text); }
:is(.theme-card, .ui-choice) > input:checked ~ :is(.theme-card-name, .ui-choice-name)::before, .ui-choice > input:checked ~ .ui-choice-preview .ui-choice-name::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--panel); }
:is(.theme-card, .ui-choice) > input:focus-visible ~ :is(.theme-card-preview, .ui-choice-preview) { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
:is(.theme-picker, .ui-choices).saving { opacity: .6; }
:is(.settings-choice, .ui-segment-radio) { background: rgb(var(--veil-light) / .04); border: 1px solid var(--line); border-radius: 10px; display: inline-flex; gap: 2px; justify-self: end; padding: 3px; }
:is(.settings-choice, .ui-segment-radio) > label { cursor: pointer; margin: 0; position: relative; }
:is(.settings-choice, .ui-segment-radio) > label > input { height: 1px; margin: 0; opacity: 0; pointer-events: none; position: absolute; width: 1px; }
:is(.settings-choice, .ui-segment-radio) > label > span { align-items: center; border-radius: 7px; color: var(--muted); display: inline-flex; font-size: 11.5px; font-weight: 650; gap: 6px; min-height: 28px; padding: 0 11px; transition: background 120ms ease, color 120ms ease; white-space: nowrap; }
:is(.settings-choice, .ui-segment-radio) > label > span > svg { flex: 0 0 auto; height: 14px; opacity: .75; width: 14px; }
:is(.settings-choice, .ui-segment-radio) > label:hover > span { color: var(--text); }
:is(.settings-choice, .ui-segment-radio) > label > input:checked + span { background: var(--panel-3); box-shadow: 0 1px 0 rgb(var(--veil-light) / .04), 0 6px 18px rgba(0,0,0,.14); color: var(--text); }
:is(.settings-choice, .ui-segment-radio) > label > input:checked + span > svg { color: var(--accent); opacity: 1; }
:is(.settings-choice, .ui-segment-radio) > label > input:focus-visible + span { box-shadow: 0 0 0 2px var(--accent); }
:is(.settings-choice, .ui-segment-radio).saving { opacity: .6; }
:is(.settings-nav-group, .ui-sidenav-group)[data-nav-group="project"] { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
:is(.settings-dialog, .settings-sheet) :is(.settings-choice, .ui-segment-radio) > label > input { opacity: 0; }
:is(.settings-segment, .ui-segment) { background: rgb(var(--veil-light) / .04); border: 1px solid var(--line); border-radius: 10px; display: inline-flex; gap: 2px; padding: 3px; }
:is(.settings-segment, .ui-segment) button { background: transparent; border: 0; border-radius: 7px; color: var(--muted); font-size: 11.5px; font-weight: 650; min-height: 28px; padding: 0 11px; white-space: nowrap; }
:is(.settings-segment, .ui-segment) button:hover { color: var(--text); }
:is(.settings-segment, .ui-segment) button.active { background: var(--panel-3); box-shadow: 0 1px 0 rgb(var(--veil-light) / .04), 0 6px 18px rgba(0,0,0,.14); color: var(--text); }
:is(.settings-segment, .ui-segment) button:disabled { cursor: default; opacity: .4; }
/* A segment across its whole row, its choices alike wide (a choice too long is cut, its full name in the title). */
.ui-segment-fill { display: flex; min-width: 0; width: 100%; }
.ui-segment-fill button { flex: 1 1 0; min-width: 0; overflow: hidden; padding: 0 4px; text-overflow: ellipsis; }

/* A compact row of a sheet: a short label left, its control filling the rest (Modell, Thinking, Tempo …). */
.ui-row-compact { border-top: 1px solid var(--line); display: grid; gap: 6px 14px; grid-template-columns: 76px minmax(0, 1fr); min-height: 46px; padding: 6px 0; align-items: center; }
.ui-row-compact:first-child { border-top: 0; }
.ui-row-compact > .ui-row-label, .ui-fold > summary > .ui-row-label { color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: -.005em; }
.ui-row-compact > select { margin: 0; min-height: 34px; width: 100%; }

/* A fold: one line with a label, what it is set to and a chevron; the rest opens below it (a <details>). */
.ui-fold { border-top: 1px solid var(--line); }
.ui-fold > summary { align-items: center; cursor: pointer; display: grid; gap: 6px 14px; grid-template-columns: 76px minmax(0, 1fr) auto; list-style: none; min-height: 46px; padding: 6px 0; }
.ui-fold > summary::-webkit-details-marker { display: none; }
.ui-fold > summary:focus-visible { border-radius: var(--ui-radius-field); box-shadow: 0 0 0 2px var(--accent); outline: 0; }
.ui-fold-value { color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-fold-chevron { border-bottom: 1.6px solid var(--subtle); border-right: 1.6px solid var(--subtle); height: 7px; margin-right: 4px; transform: rotate(45deg) translate(-2px, -2px); transition: transform 140ms ease; width: 7px; }
.ui-fold[open] > summary .ui-fold-chevron { transform: rotate(225deg) translate(-2px, -2px); }
.ui-fold > summary:hover .ui-fold-chevron { border-color: var(--text); }
.ui-fold-body { display: grid; gap: 10px; padding: 2px 0 14px; }
.ui-fold-body > .ui-row-compact { border-top: 0; min-height: 40px; padding: 0; }
.ui-fold-body > small, .ui-fold-body > div > small { color: var(--muted); font-size: 11px; }

/* A meter: how full something is, a mark where something happens (--ui-meter-mark). */
.ui-meter { background: var(--context-track); border-radius: var(--ui-radius-pill); display: block; height: 6px; min-width: 0; position: relative; }
.ui-meter > .ui-meter-fill { background: var(--context-fill); border-radius: inherit; display: block; height: 100%; max-width: 100%; }
.ui-meter > .ui-meter-mark { background: var(--context-limit); border-radius: 2px; bottom: -3px; position: absolute; top: -3px; width: 2px; }
/* Neutral segments also accept an icon; existing settings aliases retain their layout. */
.ui-segment button { align-items: center; display: inline-flex; gap: 6px; justify-content: center; }
/* Rich form labels can use the copy container directly, without an extra strong element. */
.ui-row > .ui-row-copy:not(:has(strong)) { align-items: center; color: var(--text); display: flex; flex-wrap: wrap; font-size: 13px; font-weight: 600; letter-spacing: -.005em; line-height: 1.5; }
.ui-row > .ui-row-copy:not(:has(strong)) > small { flex-basis: 100%; }
html[data-theme="light"] :is(.settings-dialog, .settings-sheet) :is(.settings-search, .ui-search) input { background: transparent; }
html[data-theme="light"] :is(.settings-search, .ui-search), html[data-theme="light"] :is(.settings-segment, .ui-segment) { background: #fff; }
html[data-theme="light"] :is(.settings-nav, .ui-sidenav) button:hover { background: rgb(var(--veil-dark) / .05); }
html[data-theme="light"] :is(.settings-search, .ui-search):focus-within { border-color: rgba(59,125,34,.5); box-shadow: 0 0 0 3px rgba(59,125,34,.08); }
html[data-theme="light"] :is(.settings-nav, .ui-sidenav) button:focus-visible { border-color: rgba(59,125,34,.5); }
html[data-theme="light"] :is(.settings-saved, .ui-saved) { background: rgba(33,122,69,.1); }
html[data-theme="light"] :is(.settings-choice, .ui-segment-radio) { background: #fff; }
html[data-theme="light"] :is(.settings-choice, .ui-segment-radio) > label > input:checked + span { background: var(--grey-233); box-shadow: none; }
html[data-theme="light"] :is(.theme-card, .ui-choice) > input:checked ~ :is(.theme-card-name, .ui-choice-name)::before { box-shadow: inset 0 0 0 3px #fff; }
@media (max-width: 860px) {
  :is(.settings-search, .ui-search) { margin: 2px 12px 8px; }
  :is(.settings-nav, .ui-sidenav) { padding: 2px 8px 16px; }
  :is(.settings-nav, .ui-sidenav) button { font-size: 14px; min-height: 44px; padding: 0 12px; }
  :is(.settings-nav, .ui-sidenav) button > span { flex: 0 1 auto; }
  :is(.settings-nav, .ui-sidenav) button > svg { height: 18px; width: 18px; }
  :is(.settings-nav-label, .ui-sidenav-label) { font-size: 10.5px; margin-bottom: 4px; }
  :is(.settings-nav-sub, .ui-sidenav-sub) { margin: 10px 0 6px 13px; padding-left: 20px; }
  :is(.settings-nav-sub, .ui-sidenav-sub) > button { padding-left: 9px; }
  :is(.settings-nav-sub, .ui-sidenav-sub).single > button { padding-left: 12px; }
  :is(.settings-nav-sub, .ui-sidenav-sub).single :is(.settings-nav-sublabel, .ui-sidenav-sublabel) { margin-left: 13px; }
  :is(.settings-nav-sublabel, .ui-sidenav-sublabel) { font-size: 9.5px; width: 17px; }
  :is(.settings-nav-group, .ui-sidenav-group) + :is(.settings-nav-group, .ui-sidenav-group) { margin-top: 18px; }
  :is(.settings-dialog, .settings-sheet) :is(.settings-pane-head, .ui-section-head-toolbar) > button, :is(.settings-pane-head-actions, .ui-section-actions) { width: 100%; }
  :is(.settings-pane-head, .ui-section-head-toolbar) { align-items: stretch; flex-direction: column; gap: 10px; }
  :is(.settings-pane-head-actions, .ui-section-actions) > button { flex: 1 1 auto; }
  :is(.settings-group-head, .ui-section-head-group):has(> button), :is(.settings-group-head, .ui-section-head-group):has(> :is(.settings-segment, .ui-segment)) { grid-template-columns: minmax(0, 1fr); }
  :is(.settings-group-head, .ui-section-head-group) > button, :is(.settings-group-head, .ui-section-head-group) > :is(.settings-segment, .ui-segment) { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 4px; }
  :is(.settings-dialog, .settings-sheet) :is(.settings-segment, .ui-segment):not(.ui-segment-fill) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  :is(.settings-dialog, .settings-sheet) :is(.settings-segment, .ui-segment) button { min-height: 36px; padding: 0 6px; }
  .ui-row-compact, .ui-fold > summary { column-gap: 10px; grid-template-columns: 64px minmax(0, 1fr); }
  .ui-fold > summary { grid-template-columns: 64px minmax(0, 1fr) auto; }
  :is(.settings-field, .ui-row) { gap: 10px; grid-template-columns: minmax(0, 1fr); padding: 13px 0; }
  :is(.settings-field-copy, .ui-row-copy) strong { font-size: 14px; }
  :is(.settings-field, .ui-row) > select, :is(.settings-field, .ui-row) > input:not([type="checkbox"]) { width: 100%; }
  :is(.settings-field, .ui-row) > .secondary, :is(.settings-field, .ui-row) > .primary, :is(.settings-choice, .ui-segment-radio) { justify-self: start; }
  :is(.theme-picker, .ui-choices) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.settings-choice, .ui-segment-radio) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  :is(.settings-choice, .ui-segment-radio) > label > span { justify-content: center; min-height: 38px; padding: 0 6px; }
}