/* ============================================================
   Xucho — Controls (1:1 metrics of @phreshos/react-ui)
   Sizes: xsmall 25px / small 28px / medium 34px / large 40px / xlarge 46px
   Heights, insets, gaps and radii per the control metrics table.
   Paints via the Surface engine; color-mix does the OKLab math.
   ============================================================ */

/* ---------- Button ---------- */
.button {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--control-gap, 6px);
  height: var(--control-height, 34px);
  padding-inline: var(--control-inset, 12px);
  padding-block: 0;
  font-size: var(--control-font, 0.8125em);
  font-weight: 500; line-height: 1;
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
  border: 0;
  background: none;
  border-radius: var(--control-radius, var(--radius));
  transition: box-shadow var(--duration) var(--easing), color var(--duration) var(--easing),
              outline-color var(--duration) var(--easing), opacity var(--duration) var(--easing),
              scale var(--duration) var(--easing);
  outline: 3px solid transparent; outline-offset: 1px;
  --surface-paint: var(--color-default);
  --surface-rim: linear-gradient(to right, transparent,
    color-mix(in oklab, color-mix(in oklab, var(--color-default), white 70%) 22%, transparent) 18%,
    color-mix(in oklab, color-mix(in oklab, var(--color-default), white 70%) 55%, transparent) 50%,
    color-mix(in oklab, color-mix(in oklab, var(--color-default), white 70%) 22%, transparent) 82%, transparent);
  --surface-spill-top: radial-gradient(50% 100% at 50% 0, color-mix(in oklab, color-mix(in oklab, var(--color-default), white 70%) 15%, transparent), transparent);
}
.button:not(.flat):not(.recessed) { box-shadow: var(--shadow-resting); }
.button.icon-only { padding-inline: 0; width: var(--control-height, 34px); }

.button:hover:not(:disabled) { --surface-paint: color-mix(in oklab, var(--paint-base, var(--color-default)), var(--color-foreground) 5%); }
.button:active:not(:disabled) { scale: 0.97; --surface-paint: color-mix(in oklab, var(--paint-base, var(--color-default)), var(--color-foreground) 10%); box-shadow: none; }
.button:active:not(:disabled)::before { --surface-paint: color-mix(in oklab, var(--paint-base, var(--color-default)), var(--color-foreground) 10%); }
.button:focus-visible { outline-color: color-mix(in oklab, var(--focus-color, var(--color-primary)) 34%, transparent); }
.button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* Color variants: paint base */
.button[data-color="primary"]   { --paint-base: var(--color-primary); --surface-paint: var(--color-primary); --focus-color: var(--color-primary); }
.button[data-color="secondary"] { --paint-base: var(--color-secondary); --surface-paint: var(--color-secondary); --focus-color: var(--color-secondary); }
.button[data-color="danger"]    { --paint-base: var(--color-danger); --surface-paint: var(--color-danger); --focus-color: var(--color-danger); }
.button[data-color="success"]   { --paint-base: var(--color-success); --surface-paint: var(--color-success); --focus-color: var(--color-success); }
.button[data-color="warning"]   { --paint-base: var(--color-warning); --surface-paint: var(--color-warning); --focus-color: var(--color-warning); }
.button[data-color="info"]      { --paint-base: var(--color-info); --surface-paint: var(--color-info); --focus-color: var(--color-info); }

/* Soft variants (color:soft level) */
.button[data-variant="soft"][data-color="primary"]   { --paint-base: var(--primary-soft);   --surface-paint: var(--primary-soft); }
.button[data-variant="soft"][data-color="secondary"] { --paint-base: var(--secondary-soft); --surface-paint: var(--secondary-soft); }
.button[data-variant="soft"][data-color="danger"]    { --paint-base: var(--danger-soft);    --surface-paint: var(--danger-soft); }

/* Depth variants */
.button.flat { box-shadow: none; --surface-paint: transparent; --surface-rim: none; --surface-spill-top: none; }
.button.recessed { box-shadow: none; --surface-paint: var(--background-recessed); }

/* Sizes */
.button[data-size="xsmall"]  { --control-height: 25px; --control-inset: 8px;  --control-gap: 4px; --control-radius: calc(var(--radius) * 0.184); --control-font: 0.6875em; }
.button[data-size="small"]   { --control-height: 28px; --control-inset: 8px;  --control-gap: 4px; --control-radius: calc(var(--radius) * 0.412); --control-font: 0.75em; }
.button[data-size="medium"]  { --control-height: 34px; --control-inset: 12px; --control-gap: 6px; --control-radius: var(--radius); --control-font: 0.8125em; }
.button[data-size="large"]   { --control-height: 40px; --control-inset: 18px; --control-gap: 9px; --control-radius: calc(var(--radius) * 1.765); --control-font: 0.875em; }
.button[data-size="xlarge"]  { --control-height: 46px; --control-inset: 24px; --control-gap: 12px; --control-radius: calc(var(--radius) * 2.706); --control-font: 0.9375em; }

/* Pending */
.button.pending > * { visibility: hidden; }
.button.pending::part(pending) { }
.button.pending { cursor: progress; }

/* Taskbar buttons */
.taskbar-button { --shadow-extra: var(--shadow-taskbar-control); }

/* ---------- Fields (label + well + input) ---------- */
.field { display: grid; gap: 6px; font-size: 0.8125em; line-height: var(--line-height); }
.field > label { font-weight: 600; }
.field > .description { font-size: var(--secondary-font-size); opacity: var(--control-secondary-opacity); }
.field > .error-message { font-size: var(--secondary-font-size); color: var(--danger-strong); }

.well {
  position: relative; isolation: isolate;
  display: grid; min-width: 0;
  border-radius: var(--control-radius, var(--radius));
  --surface-paint: var(--background-recessed);
  --surface-rim: linear-gradient(to right, transparent,
    color-mix(in oklab, color-mix(in oklab, var(--background-recessed), white 70%) 12%, transparent) 18%,
    color-mix(in oklab, color-mix(in oklab, var(--background-recessed), white 70%) 45%, transparent) 50%,
    color-mix(in oklab, color-mix(in oklab, var(--background-recessed), white 70%) 12%, transparent) 82%, transparent);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.well:focus-within { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 34%, transparent); }

.well input, .well textarea, .well select {
  height: var(--control-height, 34px);
  padding-inline: var(--control-inset, 12px);
  border: 0; outline: none; background: transparent;
  caret-color: currentColor; min-width: 0; width: 100%;
}
.well textarea { height: auto; rows: 4; padding-block: 6px; resize: vertical; }
.well[data-size="xsmall"] input { --control-height: 25px; --control-inset: 8px; font-size: 0.6875em; }
.well[data-size="small"]  input { --control-height: 28px; --control-inset: 8px; font-size: 0.75em; }
.well[data-size="large"]  input { --control-height: 40px; --control-inset: 18px; font-size: 0.875em; }
.well[data-size="xlarge"] input { --control-height: 46px; --control-inset: 24px; font-size: 0.9375em; }

/* Search field: icon + input + clear */
.well.search { grid-template-columns: auto 1fr auto; align-items: center; padding-inline: 0; }
.well.search .search-icon { display: grid; place-items: center; width: var(--control-height, 34px); height: 100%; opacity: var(--control-placeholder-opacity); pointer-events: none; }
.well.search input { padding-inline: 0 !important; }

.field-button {
  display: inline-grid; place-items: center;
  width: calc(var(--control-height, 34px) - 8px); height: calc(var(--control-height, 34px) - 8px);
  margin-inline-end: 4px; border: 0; background: transparent; border-radius: var(--radius-s);
  cursor: pointer; transition: background-color var(--duration) var(--easing);
}
.field-button:hover { background: var(--veil-hover); }
.field-button:active { background: var(--veil-press); }

/* ---------- Menu ---------- */
.menu {
  display: grid; gap: 2px;
  min-width: 170px;
  padding: 4px;
  font-size: 0.8125em;
  border-radius: var(--radius);
  --surface-paint: var(--color-default);
  box-shadow: var(--shadow-floating);
}
.menu-item {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 6px;
  min-height: 34px; padding-inline: 12px;
  border-radius: var(--control-radius, var(--radius));
  cursor: pointer; outline-offset: -1px;
  outline: 3px solid transparent;
  background: none; border: 0; text-align: start; font-size: 0.8125em;
  transition: background-color var(--duration) var(--easing), outline-color var(--duration) var(--easing);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--veil-hover); }
.menu-item:active { background: var(--veil-press); }
.menu-item:focus-visible { outline-color: color-mix(in oklab, var(--color-primary) 34%, transparent); }
.menu-item.selected { background: var(--selection); }
.menu-item .check { margin-inline-start: auto; opacity: 0; }
.menu-item.selected .check { opacity: 1; }
.menu-item .submenu-arrow { margin-inline-start: auto; opacity: var(--control-secondary-opacity); }
.menu-separator { height: 1px; margin-block: 4px; margin-inline: 12px; background: var(--separator); }
.menu-header { padding-inline: 12px; padding-block: 6px; font-size: var(--secondary-font-size); font-weight: 600; opacity: var(--control-secondary-opacity); }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; z-index: 2147483000;
  max-width: 28em; padding-block: 6px; padding-inline: 9px;
  font-size: 0.75em; line-height: var(--line-height);
  border-radius: var(--radius-s);
  --surface-paint: var(--color-foreground);
  color: var(--color-background);
  box-shadow: var(--shadow-floating);
  pointer-events: none;
}

/* ---------- Popover / Dialog surfaces ---------- */
.popover {
  position: fixed; z-index: 2147483000;
  border-radius: var(--radius);
  --surface-paint: var(--color-default);
  box-shadow: var(--shadow-floating);
}
.backdrop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 12px; overflow: auto;
  background: color-mix(in oklab, var(--backdrop-darker, var(--color-foreground)) 50%, transparent);
}
.dialog {
  width: 32rem; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
  padding: 18px; overflow: hidden;
  display: grid; gap: 12px;
  border-radius: var(--radius);
  --surface-paint: var(--color-default);
  box-shadow: var(--shadow-floating);
}
.dialog > .dialog-title { font-size: 0.875em; font-weight: 600; margin: 0; line-height: var(--line-height); }
.dialog > .dialog-description { font-size: 0.8125em; opacity: var(--control-secondary-opacity); margin: 0; }
.dialog > .dialog-body { display: grid; gap: 12px; }
.dialog > .dialog-footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }

/* ---------- Alert ---------- */
.alert {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 18px; border-radius: var(--radius);
  --surface-paint: var(--alert-subtle, var(--default-subtle));
  box-shadow: none;
}
.alert .alert-title { font-weight: 600; }
.alert .alert-content { font-size: 0.8125em; }
.alert[data-color="danger"]  { --alert-subtle: var(--danger-subtle); }
.alert[data-color="warning"] { --alert-subtle: var(--warning-subtle); }
.alert[data-color="success"] { --alert-subtle: var(--success-subtle); }
.alert[data-color="info"]    { --alert-subtle: var(--info-subtle); }

/* ---------- Toggle: checkbox / radio / switch ---------- */
.toggle-row { display: flex; align-items: center; gap: 6px; min-height: 25px; cursor: pointer; }
.toggle { all: unset; position: relative; isolation: isolate; display: grid; place-items: center; width: 18px; height: 18px; cursor: pointer; border-radius: var(--radius-xs); transition: scale var(--duration) var(--easing), background-color var(--duration) var(--easing); --surface-paint: var(--background-recessed); box-shadow: none; }
.toggle:active { scale: 0.92; }
.toggle[aria-checked="true"] { --surface-paint: var(--color-primary); }
.toggle .mark { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.toggle .mark path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 143ms var(--easing); }
.toggle[aria-checked="true"] .mark path { stroke-dashoffset: 0; }
.toggle.radio { border-radius: var(--radius-full); }
.toggle.radio .mark { display: grid; place-items: center; }
.toggle.radio .mark .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; scale: 0; transition: scale 143ms var(--easing); }
.toggle.radio[aria-checked="true"] .mark .dot { scale: 1; }
.toggle .mark { color: var(--color-background); }

.switch-track {
  position: relative; isolation: isolate; display: block;
  width: 32px; height: 18px; border-radius: var(--radius-full);
  --surface-paint: var(--background-recessed);
  transition: background-color var(--duration) var(--easing);
  cursor: pointer; border: 0; background: none;
}
.switch-track[aria-checked="true"] { --surface-paint: var(--color-primary); }
.switch-thumb {
  position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  border-radius: var(--radius-full); background: var(--switch-thumb-color, var(--color-default));
  z-index: 2; transition: translate 122ms var(--easing), width 122ms var(--easing);
}
.switch-track[aria-checked="true"] .switch-thumb { translate: 14px 0; }
.switch-track:active .switch-thumb { width: 15px; }
:root[data-theme="dark"] .switch-thumb { --switch-thumb-color: var(--color-foreground); }

/* ---------- Segmented control / Tabs ---------- */
.segmented {
  position: relative; isolation: isolate;
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--control-radius, var(--radius));
  --surface-paint: var(--background-recessed);
  box-shadow: none;
}
.segment-item {
  position: relative; z-index: 2; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 28px; padding-inline: 12px;
  border: 0; background: none; border-radius: var(--radius-s);
  font-size: 0.75em; font-weight: 500; cursor: pointer;
  color: inherit; opacity: var(--control-secondary-opacity);
  transition: opacity var(--duration) var(--easing);
}
.segment-item:hover { opacity: 1; }
.segment-item[aria-selected="true"] { opacity: 1; color: var(--color-background); }
.segment-indicator {
  position: absolute; z-index: 1; top: 3px; bottom: 3px;
  border-radius: var(--radius-s);
  --surface-paint: var(--color-primary);
  transition: translate var(--duration) var(--easing), width var(--duration) var(--easing), height var(--duration) var(--easing);
}
.segment-item[aria-selected="true"] { color: var(--segment-fg, var(--color-background)); }

/* Tabs (terminal session tabs) */
.tabs { display: flex; align-items: center; gap: 4px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding-inline: 8px;
  border: 0; background: none; border-radius: var(--control-radius, var(--radius));
  font-size: 0.75em; cursor: pointer; opacity: var(--control-secondary-opacity);
  transition: opacity var(--duration) var(--easing), background-color var(--duration) var(--easing);
}
.tab:hover { opacity: 1; background: var(--veil-hover); }
.tab[aria-selected="true"] { opacity: 1; background: var(--veil-hover); }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; }
.table th {
  height: 34px; padding-inline: 12px; text-align: start;
  font-size: var(--secondary-font-size); font-weight: 600; opacity: var(--control-secondary-opacity);
}
.table th.sortable:hover { opacity: 1; cursor: pointer; }
.table td { height: 34px; padding-inline: 12px; border-block-start: 1px solid var(--separator); overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
.table tbody tr { transition: background-color var(--duration) var(--easing); }
.table tbody tr:hover { background: var(--veil-hover); }
.table tbody tr.selected { background: var(--selection); }

/* ---------- Grid list ---------- */
.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--item-width, 192px), 100%), 1fr)); gap: 12px; }
.grid-item {
  position: relative; isolation: isolate;
  display: grid; gap: 6px; padding: var(--control-inset, 12px);
  border-radius: var(--control-radius, var(--radius));
  cursor: pointer; border: 0; background: none; text-align: start;
  --surface-paint: var(--color-default);
  transition: background-color var(--duration) var(--easing);
}
.grid-item:hover { --surface-paint: color-mix(in oklab, var(--color-default), var(--color-foreground) 5%); }
.grid-item.selected { background: var(--selection); }
.grid-item .check { position: absolute; top: 6px; right: 6px; opacity: 0; }
.grid-item.selected .check { opacity: 1; }

/* ---------- Tree (sidebar places) ---------- */
.tree { display: grid; gap: 2px; font-size: 0.8125em; }
.tree-item {
  display: flex; align-items: center; gap: 6px;
  min-height: 34px; padding-inline: 12px;
  padding-inline-start: calc(6px + (var(--level, 0) - 1) * var(--spacing));
  border-radius: var(--control-radius, var(--radius));
  cursor: pointer; border: 0; background: none; text-align: start; color: inherit;
  outline: 3px solid transparent; outline-offset: -1px;
  transition: background-color var(--duration) var(--easing);
}
.tree-item:hover { background: var(--veil-hover); }
.tree-item[aria-selected="true"] { background: var(--selection); }
.tree-item .chevron { transition: rotate var(--duration) var(--easing); }
.tree-item[aria-expanded="true"] .chevron { rotate: 90deg; }
.tree-item .leaf-spacer { width: 18px; flex-shrink: 0; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.toolbar-group { display: flex; align-items: center; gap: 6px; }
.toolbar-separator { width: 1px; align-self: stretch; background: var(--shadow-taskbar-separator); background: var(--separator); }

/* ---------- Badges / Kbd / Code ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 0.75em; font-weight: 600;
  background: var(--badge-subtle, var(--default-subtle));
  color: var(--badge-strong, var(--default-strong));
}
.badge[data-color="primary"]   { --badge-subtle: var(--primary-subtle);   --badge-strong: var(--primary-strong); }
.badge[data-color="secondary"] { --badge-subtle: var(--secondary-subtle); --badge-strong: var(--secondary-strong); }
.badge[data-color="success"]   { --badge-subtle: var(--success-subtle);   --badge-strong: var(--success-strong); }
.badge[data-color="warning"]   { --badge-subtle: var(--warning-subtle);   --badge-strong: var(--warning-strong); }
.badge[data-color="danger"]    { --badge-subtle: var(--danger-subtle);    --badge-strong: var(--danger-strong); }
.badge[data-color="info"]      { --badge-subtle: var(--info-subtle);      --badge-strong: var(--info-strong); }
.badge .dot { width: 0.5em; height: 0.5em; border-radius: var(--radius-full); background: currentColor; }

.kbd {
  display: inline-grid; place-items: center;
  height: 1.79em; padding-inline: 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-ui); font-size: 0.75em; font-weight: 600;
  font-variant-numeric: tabular-nums;
  --surface-paint: var(--color-default); box-shadow: var(--shadow-window-content);
}
.code {
  font-family: var(--font-mono); font-size: 0.9em;
  padding-inline: 3px; border-radius: var(--radius-s);
  --surface-paint: var(--background-recessed);
}

/* ---------- Slider ---------- */
.slider { display: grid; gap: 6px; }
.slider .slider-label { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.8125em; }
.slider .slider-label .value { font-variant-numeric: tabular-nums; opacity: var(--control-secondary-opacity); }
.slider-bed {
  position: relative; isolation: isolate; display: flex; align-items: center;
  height: 18px; border-radius: var(--radius-full);
  --surface-paint: var(--background-recessed);
  padding-inline: calc(3px + 6px);
}
.slider-fill { position: absolute; inset-block: 0; left: 9px; border-radius: var(--radius-full); --surface-paint: var(--color-primary); }
.slider-thumb {
  position: absolute; width: 12px; height: 12px; border-radius: var(--radius-full);
  background: var(--switch-thumb-color, var(--color-default));
  z-index: 2; cursor: grab; border: 0; padding: 0;
  transition: scale var(--duration) var(--easing);
}
.slider-thumb:active { scale: 0.92; cursor: grabbing; }

/* ---------- Progress bar / Meter ---------- */
.progress { position: relative; isolation: isolate; height: 6px; border-radius: var(--radius-full); overflow: hidden; --surface-paint: var(--background-recessed); }
.progress-fill { position: absolute; inset-block: 0; background: var(--color-primary); border-radius: inherit; transition: width 153ms var(--easing); }

/* ---------- Headings / Text ---------- */
.heading { font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0; }
.heading[data-level="1"] { font-size: 2em; }
.heading[data-level="2"] { font-size: 1.75em; }
.heading[data-level="3"] { font-size: 1.5em; }
.heading[data-level="4"] { font-size: 1.25em; }
.heading[data-level="5"], .heading[data-level="6"] { font-size: 1.125em; }
.text { margin: 0; line-height: var(--line-height); }
.text.secondary { opacity: var(--control-secondary-opacity); }

/* ---------- App layout (programs: Files, Settings) ---------- */
.app-layout {
  display: grid; height: 100%; min-height: 0;
  padding: 6px 6px 0; column-gap: 6px;
  grid-template-columns: 216px 1fr;
  grid-template-areas: "title header" "sidebar content" "sidebar footer";
  grid-template-rows: auto 1fr auto;
}
.app-layout.narrow { grid-template-columns: 1fr; grid-template-areas: "title" "header" "content" "footer"; }
.app-layout-title { grid-area: title; font-size: 0.875em; font-weight: 600; min-height: 40px; padding-inline: 6px; display: flex; align-items: center; }
.app-layout-header { grid-area: header; display: flex; align-items: center; gap: 6px; min-height: 40px; }
.app-layout-sidebar { grid-area: sidebar; display: grid; align-content: start; gap: 12px; padding-block: 6px; }
.app-layout-content {
  grid-area: content; min-height: 0; min-width: 0;
  position: relative; isolation: isolate; overflow: clip;
  container-type: size; border-radius: var(--radius);
  --surface-paint: var(--background-recessed);
}
.app-layout-content-inner { height: 100%; overflow: auto; padding: 18px; }
.app-layout-footer { grid-area: footer; display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; }

/* Breadcrumbs */
.breadcrumbs { display: flex; align-items: center; gap: 2px; min-width: 0; font-size: 0.8125em; }
.breadcrumbs .crumb { border: 0; background: none; cursor: pointer; border-radius: var(--radius-s); padding: 4px 6px; opacity: var(--control-secondary-opacity); transition: opacity var(--duration) var(--easing), background-color var(--duration) var(--easing); white-space: nowrap; }
.breadcrumbs .crumb:hover { opacity: 1; background: var(--veil-hover); }
.breadcrumbs .crumb.current { opacity: 1; font-weight: 600; cursor: default; }
.breadcrumbs .crumb-sep { opacity: 0.55; display: grid; place-items: center; }

/* Empty state */
.empty { display: grid; place-items: center; gap: 12px; padding: 24px; text-align: center; color: inherit; opacity: 0.8; }