/* Nest / shell chrome borders — off when Settings → Borderless UI is on.
   Marker classes: `.ui-surface` (boxed nest), `.ui-surface-band` (header /
   divider bands). Control borders (buttons, fields) are untouched. */
html[data-inventor-borderless] .ui-surface,
html[data-inventor-borderless] .ui-surface-band {
  border-width: 0 !important;
  border-color: transparent !important;
}

/* Page base + OKLab-derived palette.
   Set `--page-base` only (Settings / status-bar picker / env default).
   Nest fills, ink, selection, and borders are opaque solids from
   `color-mix(in oklab, …)` — never translucent overlays. */
:root {
  --page-base: #ffffff;
  --page-card: color-mix(in oklab, var(--page-base), white 35%);

  /* Nest ladder (lighter → darker). */
  --surface-outer: color-mix(in oklab, var(--page-base), black 5%);
  --surface-nested: color-mix(in oklab, var(--page-base), black 8%);
  --surface-deep: color-mix(in oklab, var(--page-base), black 11%);
  --surface-inset: color-mix(in oklab, var(--page-base), black 14%);
  --surface-inset-deeper: color-mix(in oklab, var(--page-base), black 17%);

  --surface-border-outer: color-mix(in oklab, var(--page-base), black 10%);
  --surface-border-nested: color-mix(in oklab, var(--page-base), black 12%);
  --surface-border-deep: color-mix(in oklab, var(--page-base), black 15%);
  --surface-border-inset: color-mix(in oklab, var(--page-base), black 18%);

  /* Ink / selection — same hue as page base (tinted near-black). */
  --page-ink: color-mix(in oklab, black 82%, var(--page-base));
  --page-ink-muted: color-mix(in oklab, black 48%, var(--page-base));
  --page-ink-contrast: color-mix(in oklab, var(--page-base), white 20%);
  --page-border: color-mix(in oklab, var(--page-base), black 22%);
  --page-input: color-mix(in oklab, var(--page-base), black 22%);
  --page-ring: var(--page-ink);
  --page-secondary: color-mix(in oklab, var(--page-base), black 6%);
  --page-muted: color-mix(in oklab, var(--page-base), black 7%);
  --page-accent: color-mix(in oklab, var(--page-base), black 6%);
  --page-control-border: color-mix(in oklab, var(--page-ink) 40%, var(--page-base));
  --page-select-fill: color-mix(in oklab, var(--page-ink) 22%, var(--page-base));
}

::selection {
  background-color: var(--page-select-fill);
  color: var(--page-ink);
}

.bg-surface-outer {
  background-color: var(--surface-outer);
}
.bg-surface-nested {
  background-color: var(--surface-nested);
}
.bg-surface-deep {
  background-color: var(--surface-deep);
}
.bg-surface-inset {
  background-color: var(--surface-inset);
}

.border-surface-outer {
  border-color: var(--surface-border-outer);
}
.border-surface-nested {
  border-color: var(--surface-border-nested);
}
.border-surface-deep {
  border-color: var(--surface-border-deep);
}
.border-surface-inset {
  border-color: var(--surface-border-inset);
}

.hover\:bg-surface-nested:hover {
  background-color: var(--surface-nested);
}
.hover\:bg-surface-deep:hover {
  background-color: var(--surface-deep);
}
.hover\:bg-surface-inset:hover {
  background-color: var(--surface-inset);
}
.hover\:bg-surface-inset-deeper:hover {
  background-color: var(--surface-inset-deeper);
}

/* Control outlines — tinted with page ink (buttons, toggles). */
.border-page-control {
  border-color: var(--page-control-border) !important;
}
.hover\:border-page-ink:hover {
  border-color: var(--page-ink);
}