/* os.css — STATES for the starkit OS-surface components (Dock, Toolbar, Panel,
 * ListDetail, StatusBar, Widget, WidgetGrid).
 *
 * WHY THIS FILE EXISTS (identical rationale to navigation.css / dataview.css):
 * the public starstyle API (`layout.*`, `recipes.recipe`, `ss`) is a FLAT
 * token-decl surface — it maps property→token but exposes NO condition nesting,
 * so :hover / :focus-visible / :disabled / magnification / state deltas cannot
 * be emitted through it. So states live here, under the SAME discipline:
 *   - every selector is :where([data-starkit-*]) → ZERO specificity, so a
 *     caller's own class always wins without !important;
 *   - ZERO RAW HEX: every colour reads its `--starplane-*` alias and falls back
 *     to a canonical `--star-*` contract token; focus rings resolve through
 *     `--star-focus-ring`; tinted fills derive from a token via `color-mix`, so
 *     they track the THEME's accent/elevation on swap;
 *   - GPU-SAFE motion only: `transform` + `opacity` (+ `box-shadow` for
 *     elevation), never layout-affecting properties.
 * The base look (layout / token padding / surface / radius) comes from the
 * starstyle layout output applied inline by each .tsx — this file adds ONLY what
 * the closed API can't.
 *
 * Co-located ASSET, NOT a TS import (no ambient `.css` module decl in this
 * package's tsconfig), exactly like `_reference/reference.css`.
 */

/* shared tokens used across this file (resolved per-theme):
 *   accent   → var(--starplane-accent, var(--star-accent))
 *   ease     → var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)))
 *   dur-fast → var(--starplane-dur, var(--star-dur-fast, 0.12s))
 */

/* ════════════════════════════ Dock ════════════════════════════ */
:where([data-starkit-dock]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
	box-shadow: var(--starplane-shadow-3, var(--star-shadow-3));
	width: max-content;
	height: max-content;
}

/* The icon row never clips a magnified neighbour. */
:where([data-starkit-dock-rail]) {
	overflow: visible;
}

/* Each dock tile: an icon button that rests at scale(1) and grows toward the
 * cursor. The trick that makes ONE rule set serve all four edges: the
 * transform-origin is pinned to the dock's mounting edge per `data-position`,
 * so a plain `scale()` grows the icon AWAY from the bar. */
:where([data-starkit-dock-item]) {
	position: relative;
	display: grid;
	place-items: center;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit;
	padding: var(--starplane-space-1, var(--star-space-1, 0.25rem));
	border-radius: var(--starplane-radius-base, var(--star-radius-control, 6px));
	font: inherit;
	transform: scale(1);
	transition:
		transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))),
		filter var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dock][data-position="bottom"] [data-starkit-dock-item]) {
	transform-origin: bottom center;
}
:where([data-starkit-dock][data-position="top"] [data-starkit-dock-item]) {
	transform-origin: top center;
}
:where([data-starkit-dock][data-position="left"] [data-starkit-dock-item]) {
	transform-origin: left center;
}
:where([data-starkit-dock][data-position="right"] [data-starkit-dock-item]) {
	transform-origin: right center;
}

:where([data-starkit-dock-glyph]) {
	display: grid;
	place-items: center;
	width: var(--starkit-dock-icon, 2rem);
	height: var(--starkit-dock-icon, 2rem);
	font-size: 1.5rem;
	line-height: 1;
	pointer-events: none;
}

/* Magnification: the hovered tile blooms, its immediate neighbours partially —
 * the macOS falloff, pure CSS, transform-only. */
:where([data-starkit-dock-item]:hover) {
	transform: scale(1.45);
}
:where([data-starkit-dock-item]:hover + [data-starkit-dock-item]),
:where([data-starkit-dock-item]:has(+ [data-starkit-dock-item]:hover)) {
	transform: scale(1.2);
}
:where([data-starkit-dock-item]:active) {
	transform: scale(1.3);
	filter: brightness(0.94);
}
:where([data-starkit-dock-item]):focus-visible {
	outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
	outline-offset: 3px;
}
:where([data-starkit-dock-item][data-disabled="true"]) {
	cursor: not-allowed;
	opacity: 0.4;
	pointer-events: none;
}

/* Running-indicator dot: a small accent pip on the mounting edge, shown only
 * when the app is running. */
:where([data-starkit-dock-dot]) {
	position: absolute;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 50%;
	background: var(--starplane-accent, var(--star-accent));
	opacity: 0;
	transition: opacity var(--starplane-dur, var(--star-dur-fast, 0.12s))
		var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-dock-item][data-running="true"] [data-starkit-dock-dot]) {
	opacity: 1;
}
:where([data-starkit-dock][data-position="bottom"] [data-starkit-dock-dot]) { bottom: -0.18rem; }
:where([data-starkit-dock][data-position="top"] [data-starkit-dock-dot]) { top: -0.18rem; }
:where([data-starkit-dock][data-position="left"] [data-starkit-dock-dot]) { left: -0.18rem; }
:where([data-starkit-dock][data-position="right"] [data-starkit-dock-dot]) { right: -0.18rem; }

/* The active app glows softly (accent-tinted), independent of the dot. */
:where([data-starkit-dock-item][data-active="true"] [data-starkit-dock-glyph]) {
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--star-accent) 60%, transparent));
}

/* Unread/count badge, anchored to the trailing-top corner. */
:where([data-starkit-dock-badge]) {
	position: absolute;
	top: -0.1rem;
	right: -0.1rem;
	min-width: 1rem;
	padding: 0 0.25rem;
	font-size: 0.6875rem;
	line-height: 1rem;
	text-align: center;
	border-radius: 999px;
	color: var(--starplane-accent-on, var(--star-accent-on));
	/* Deepen the danger fill so the white count clears AA (saturated danger held
	 * white at only 4.09 on the dark face; the darkened fill clears 4.5). */
	background: color-mix(in srgb, var(--starplane-danger, var(--star-danger)) 82%, #000);
	pointer-events: none;
}

/* Size steps drive the tile's icon box (glyph reads the `--starkit-dock-icon`
 * custom property; `md` keeps the 2rem default). */
:where([data-starkit-dock][data-size="sm"]) { --starkit-dock-icon: 1.5rem; }
:where([data-starkit-dock][data-size="lg"]) { --starkit-dock-icon: 2.5rem; }

/* Magnification off (`magnification={false}`): freeze the hover bloom + neighbour
 * falloff to a flat, static icon row (a Windows-taskbar feel). Press still nudges. */
:where([data-starkit-dock][data-magnify="false"] [data-starkit-dock-item]:hover),
:where([data-starkit-dock][data-magnify="false"] [data-starkit-dock-item]:hover + [data-starkit-dock-item]),
:where([data-starkit-dock][data-magnify="false"] [data-starkit-dock-item]:has(+ [data-starkit-dock-item]:hover)) {
	transform: scale(1);
}

/* Auto-hide: the dock retracts to a thin sliver against its mounting edge and
 * slides back on hover / keyboard focus. Transform-only, so it stays GPU-safe. */
:where([data-starkit-dock][data-autohide="true"]) {
	transition: transform var(--starplane-dur, var(--star-dur-base, 0.16s))
		var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dock][data-autohide="true"][data-position="bottom"]) { transform: translateY(calc(100% - 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"][data-position="top"]) { transform: translateY(calc(-100% + 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"][data-position="left"]) { transform: translateX(calc(-100% + 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"][data-position="right"]) { transform: translateX(calc(100% - 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"]:hover),
:where([data-starkit-dock][data-autohide="true"]:focus-within) {
	transform: none;
}

/* ══════════════════════════ Toolbar ═══════════════════════════ */
:where([data-starkit-toolbar]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
	border-bottom: 1px solid var(--starplane-border-subtle, var(--star-border));
}

:where([data-starkit-toolbar-button]) {
	display: inline-flex;
	align-items: center;
	gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
	cursor: pointer;
	border: 1px solid transparent;
	background: transparent;
	color: var(--starplane-text-primary, var(--star-text, inherit));
	font: inherit;
	border-radius: var(--starplane-radius-base, var(--star-radius-control, 6px));
	padding: var(--starplane-space-1, var(--star-space-1, 0.25rem))
		var(--starplane-space-2, var(--star-space-2, 0.5rem));
	transition:
		background var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease)),
		transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-toolbar-button]:hover:not([disabled])) {
	background: color-mix(in srgb, var(--star-text) 8%, transparent);
}
:where([data-starkit-toolbar-button]:active:not([disabled])) {
	transform: translateY(0.5px) scale(0.98);
}
:where([data-starkit-toolbar-button]):focus-visible {
	outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
	outline-offset: 2px;
}
:where([data-starkit-toolbar-button][data-active="true"]) {
	background: color-mix(in srgb, var(--star-accent) 16%, transparent);
	color: var(--starplane-accent, var(--star-accent));
	border-color: color-mix(in srgb, var(--star-accent) 30%, transparent);
}
:where([data-starkit-toolbar-button][data-tone="danger"]) {
	color: var(--starplane-danger, var(--star-danger));
}
:where([data-starkit-toolbar-button][data-tone="danger"]:hover:not([disabled])) {
	background: color-mix(in srgb, var(--star-danger) 12%, transparent);
}
:where([data-starkit-toolbar-button][disabled]),
:where([data-starkit-toolbar-button][aria-disabled="true"]) {
	cursor: not-allowed;
	opacity: 0.45;
	pointer-events: none;
}
:where([data-starkit-toolbar-icon]) {
	display: inline-grid;
	place-items: center;
	line-height: 0;
}
:where([data-starkit-toolbar-separator]) {
	align-self: stretch;
	width: 1px;
	min-height: 1.25rem;
	margin: 0 var(--starplane-space-1, var(--star-space-1, 0.25rem));
	background: var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-toolbar-title]) {
	font-weight: 600;
	font-size: var(--starplane-text-sm, var(--star-text-sm, 0.875rem));
	color: var(--starplane-text-primary, var(--star-text));
	padding: 0 var(--starplane-space-1, var(--star-space-1, 0.25rem));
}

/* Vertical toolbar (a side rail): the hairline moves to the trailing edge and
 * the separators become horizontal rules. */
:where([data-starkit-toolbar][data-orientation="vertical"]) {
	border-bottom: 0;
	border-right: 1px solid var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-toolbar][data-orientation="vertical"] [data-starkit-toolbar-separator]) {
	align-self: stretch;
	width: auto;
	min-height: 0;
	height: 1px;
	min-width: 1.25rem;
	margin: var(--starplane-space-1, var(--star-space-1, 0.25rem)) 0;
}

/* Variant: `floating` detaches into a rounded, shadowed pill; `ghost` drops the
 * hairline. `bar` is the default hairline strip. */
:where([data-starkit-toolbar][data-variant="ghost"]) { border-bottom: 0; }
:where([data-starkit-toolbar][data-variant="floating"]) {
	border-bottom: 0;
	border-radius: var(--starplane-radius-lg, var(--star-radius-lg, 12px));
	box-shadow: var(--starplane-shadow-2, var(--star-shadow-2));
}

/* Size steps scale the button padding + type (buttons style from this file, so
 * a zero-specificity override lands cleanly over the base rule). */
:where([data-starkit-toolbar][data-size="sm"] [data-starkit-toolbar-button]) {
	padding: 0 var(--starplane-space-1, var(--star-space-1, 0.25rem));
	font-size: var(--starplane-text-xs, var(--star-text-xs, 0.75rem));
}
:where([data-starkit-toolbar][data-size="lg"] [data-starkit-toolbar-button]) {
	padding: var(--starplane-space-2, var(--star-space-2, 0.5rem))
		var(--starplane-space-3, var(--star-space-3, 0.75rem));
	font-size: var(--starplane-text-base, var(--star-text-base, 1rem));
}

/* ══════════════════ Panel + ListDetail (two-pane) ═════════════ */
:where([data-starkit-panel]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
	min-height: 0;
	overflow: hidden;
}
:where([data-starkit-panel-header]) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
	padding: var(--starplane-space-2, var(--star-space-2, 0.5rem))
		var(--starplane-space-3, var(--star-space-3, 0.75rem));
	border-bottom: 1px solid var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-panel-title]) {
	margin: 0;
	font-size: var(--starplane-text-sm, var(--star-text-sm, 0.875rem));
	font-weight: 600;
	color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-panel-actions]) {
	display: inline-flex;
	align-items: center;
	gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-panel-body]) {
	min-height: 0;
	overflow: auto;
	padding: var(--starplane-space-3, var(--star-space-3, 0.75rem));
}
:where([data-starkit-panel-body][data-flush="true"]) {
	padding: 0;
}
/* Body padding steps (`md` keeps the space.3 base; `flush` maps to `none`). */
:where([data-starkit-panel-body][data-padding="none"]) { padding: 0; }
:where([data-starkit-panel-body][data-padding="sm"]) {
	padding: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-panel-body][data-padding="lg"]) {
	padding: var(--starplane-space-4, var(--star-space-4, 1rem));
}

/* Elevation: a drop shadow keyed on `data-elevation` (default `none`). */
:where([data-starkit-panel][data-elevation="raised"]) {
	box-shadow: var(--starplane-shadow-1, var(--star-shadow-1));
}
:where([data-starkit-panel][data-elevation="floating"]) {
	box-shadow: var(--starplane-shadow-3, var(--star-shadow-3));
}

/* `ghost` variant is borderless (the fill/border are already dropped in TS). */
:where([data-starkit-panel][data-variant="ghost"]) { border: 0; }

/* Resizable: let the operator drag-resize the pane (needs a non-hidden overflow;
 * this zero-specificity rule lands after the base `overflow: hidden`). */
:where([data-starkit-panel][data-resizable="true"]) {
	resize: both;
	overflow: auto;
}

:where([data-starkit-listdetail]) {
	min-height: 0;
}
:where([data-starkit-listdetail-list]) {
	flex: 0 0 auto;
	min-width: 0;
	min-height: 0;
	overflow: auto;
}
:where([data-starkit-listdetail-detail]) {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	overflow: auto;
}

/* ════════════════════════ StatusBar ══════════════════════════ */
:where([data-starkit-statusbar]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
	font-size: var(--starplane-text-xs, var(--star-text-xs, 0.75rem));
	color: var(--starplane-text-secondary, var(--star-text-muted));
	border-top: 1px solid var(--starplane-border-subtle, var(--star-border));
	min-height: 1.5rem;
}
/* `position="top"` moves the hairline to the bottom edge (a header strip). */
:where([data-starkit-statusbar][data-position="top"]) {
	border-top: 0;
	border-bottom: 1px solid var(--starplane-border-subtle, var(--star-border));
}
/* `size="sm"`: shorter strip, smaller type. */
:where([data-starkit-statusbar][data-size="sm"]) {
	min-height: 1.25rem;
	font-size: var(--starplane-text-2xs, var(--star-text-2xs, 0.6875rem));
}
/* `variant="ghost"`: drop the hairline entirely. */
:where([data-starkit-statusbar][data-variant="ghost"]) {
	border-top: 0;
	border-bottom: 0;
}
/* Items at the start cluster left; end-aligned items get pushed right via an
 * auto left-margin on the FIRST end item. */
:where([data-starkit-statusbar-item]) {
	display: inline-flex;
	align-items: center;
	gap: var(--starplane-space-1, var(--star-space-1, 0.25rem));
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
:where([data-starkit-statusbar-item][data-align="end"]) {
	margin-inline-start: auto;
}
:where([data-starkit-statusbar-item][data-align="end"] ~ [data-starkit-statusbar-item][data-align="end"]) {
	margin-inline-start: 0;
}
:where([data-starkit-statusbar-item][data-tone="strong"]) {
	color: var(--starplane-text-primary, var(--star-text));
	font-weight: 600;
}
:where([data-starkit-statusbar-item][data-tone="ok"]) { color: var(--starplane-ok-ink, var(--star-ok-ink)); }
:where([data-starkit-statusbar-item][data-tone="warn"]) { color: var(--starplane-warn-ink, var(--star-warn-ink)); }
:where([data-starkit-statusbar-item][data-tone="danger"]) { color: var(--starplane-danger-ink, var(--star-danger-ink)); }
:where([data-starkit-statusbar-icon]) {
	display: inline-grid;
	place-items: center;
	line-height: 0;
}

/* ═══════════════════════ Widget + grid ═══════════════════════ */
:where([data-starkit-widget]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
	text-align: left;
	/* `--starkit-widget-elev` lets `data-elevation` re-point the shadow while the
	 * tone rails (below) keep their inset accent; unset → the shadow-1 default. */
	box-shadow: var(--starkit-widget-elev, var(--starplane-shadow-1, var(--star-shadow-1)));
	/* Establish the widget's base ink so body/value text (e.g. the temperature
	 * <strong>) inherits the THEME text colour instead of the UA default black,
	 * which was invisible on the dark ground (1.13 contrast, audit E34). */
	color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-widget-header]) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
}
:where([data-starkit-widget-heading]) {
	display: inline-flex;
	align-items: center;
	gap: var(--starplane-space-2, var(--star-space-2, 0.5rem));
	min-width: 0;
}
:where([data-starkit-widget-icon]) {
	display: inline-grid;
	place-items: center;
	line-height: 0;
	color: var(--starplane-accent, var(--star-accent));
}
:where([data-starkit-widget-title]) {
	font-size: var(--starplane-text-sm, var(--star-text-sm, 0.875rem));
	font-weight: 600;
	color: var(--starplane-text-primary, var(--star-text));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
:where([data-starkit-widget-action]) {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Interactive tile: a physical object — lifts toward the viewer on hover,
 * depresses on press. GPU-safe (transform + box-shadow). */
:where([data-starkit-widget][data-interactive="true"]) {
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	transition:
		transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1))),
		box-shadow var(--starplane-dur, var(--star-dur-base, 0.16s))
			var(--starplane-ease-out, var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-widget][data-interactive="true"]:hover) {
	transform: translateY(-2px);
	box-shadow: var(--starplane-shadow-2, var(--star-shadow-2));
}
:where([data-starkit-widget][data-interactive="true"]:active) {
	transform: translateY(0) scale(0.997);
	box-shadow: var(--starplane-shadow-1, var(--star-shadow-1));
}
:where([data-starkit-widget][data-interactive="true"]):focus-visible {
	outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
	outline-offset: 2px;
}
:where([data-starkit-widget][data-interactive="true"][disabled]) {
	cursor: not-allowed;
	opacity: 0.5;
	pointer-events: none;
}

/* Tone accents: a leading rail in the tile's tone, so a warn/danger widget reads
 * at a glance without a heavy fill. */
:where([data-starkit-widget][data-tone="accent"]) { box-shadow: inset 3px 0 0 0 var(--starplane-accent, var(--star-accent)), var(--starkit-widget-elev, var(--starplane-shadow-1, var(--star-shadow-1))); }
:where([data-starkit-widget][data-tone="ok"]) { box-shadow: inset 3px 0 0 0 var(--starplane-ok, var(--star-ok)), var(--starkit-widget-elev, var(--starplane-shadow-1, var(--star-shadow-1))); }
:where([data-starkit-widget][data-tone="warn"]) { box-shadow: inset 3px 0 0 0 var(--starplane-warn, var(--star-warn)), var(--starkit-widget-elev, var(--starplane-shadow-1, var(--star-shadow-1))); }
:where([data-starkit-widget][data-tone="danger"]) { box-shadow: inset 3px 0 0 0 var(--starplane-danger, var(--star-danger)), var(--starkit-widget-elev, var(--starplane-shadow-1, var(--star-shadow-1))); }

/* Elevation: re-point the shadow custom property (the tone rails follow along). */
:where([data-starkit-widget][data-elevation="flat"]) { --starkit-widget-elev: none; }
:where([data-starkit-widget][data-elevation="floating"]) { --starkit-widget-elev: var(--starplane-shadow-3, var(--star-shadow-3)); }

/* Variant: `outlined` adds a visible hairline; `plain` strips border + shadow. */
:where([data-starkit-widget][data-variant="outlined"]) {
	border-width: 1px;
	border-style: solid;
	border-color: var(--starplane-border-subtle, var(--star-border));
}
:where([data-starkit-widget][data-variant="plain"]) {
	--starkit-widget-elev: none;
	border: 0;
}

:where([data-starkit-widget][data-span="2"]) {
	grid-column: span 2;
}
:where([data-starkit-widget-grid]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
}

/* ════════ reduced motion: freeze magnification + lift, keep state ════════ */
@media (prefers-reduced-motion: reduce) {
	:where([data-starkit-dock-item]),
	:where([data-starkit-toolbar-button]),
	:where([data-starkit-widget][data-interactive="true"]) {
		transition-duration: 0.01ms;
	}
	:where([data-starkit-dock-item]:hover),
	:where([data-starkit-dock-item]:hover + [data-starkit-dock-item]),
	:where([data-starkit-dock-item]:has(+ [data-starkit-dock-item]:hover)),
	:where([data-starkit-dock-item]:active) {
		transform: none;
	}
	:where([data-starkit-widget][data-interactive="true"]:hover),
	:where([data-starkit-widget][data-interactive="true"]:active),
	:where([data-starkit-toolbar-button]:active:not([disabled])) {
		transform: none;
	}
	/* The running dot still SHOWS (state), it just doesn't fade. */
	:where([data-starkit-dock-dot]) {
		transition: none;
	}
}

/* ═══════════════ MenuBar + WindowControls (macOS chrome) ═══════════════ */
:where([data-starkit-menubar]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
	border-bottom: 1px solid var(--starplane-border-subtle, var(--star-border));
	box-shadow: var(--starplane-shadow-1, var(--star-shadow-1));
}
:where([data-starkit-menubar-chrome]) {
	min-height: var(--starplane-menubar-height, var(--star-menubar-height, 1.75rem));
}
:where([data-starkit-menubar-title]) {
	color: var(--starplane-text-primary, var(--star-text));
	font-size: var(--starplane-text-sm, var(--star-text-sm, 0.875rem));
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
}
:where([data-starkit-menubar-row]) {
	min-width: 0;
}
:where([data-starkit-menubar-button]) {
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--starplane-text-primary, var(--star-text, inherit));
	border-radius: var(--starplane-radius-base, var(--star-radius-control, 6px));
	font: inherit;
	font-size: var(--starplane-text-sm, var(--star-text-sm, 0.875rem));
	line-height: 1;
	padding: var(--starplane-space-1, var(--star-space-1, 0.25rem))
		var(--starplane-space-2, var(--star-space-2, 0.5rem));
	transition:
		opacity var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease)),
		transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-menubar-button]:hover:not([disabled])),
:where([data-starkit-menubar-button][aria-expanded="true"]) {
	background: color-mix(in srgb, var(--star-accent) 12%, transparent);
}
:where([data-starkit-menubar-button]:active:not([disabled])) {
	transform: scale(0.98);
}
:where([data-starkit-menubar-button]):focus-visible {
	outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
	outline-offset: 2px;
}
:where([data-starkit-menubar-button][disabled]),
:where([data-starkit-menubar-button][aria-disabled="true"]) {
	cursor: not-allowed;
	opacity: 0.45;
	pointer-events: none;
}
:where(.starkit-menubar-popup-trigger) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Elevation: `flat` drops the default shadow-1. */
:where([data-starkit-menubar][data-elevation="flat"]) { box-shadow: none; }
/* `ghost` variant: no hairline, no shadow (a floating menu row). */
:where([data-starkit-menubar][data-variant="ghost"]) {
	border-bottom: 0;
	box-shadow: none;
}
/* `win` variant: square button hovers (Windows chrome). */
:where([data-starkit-menubar][data-variant="win"] [data-starkit-menubar-button]) {
	border-radius: 0;
}
/* Size steps scale the menu buttons + chrome height. */
:where([data-starkit-menubar][data-size="sm"] [data-starkit-menubar-chrome]) { min-height: 1.5rem; }
:where([data-starkit-menubar][data-size="sm"] [data-starkit-menubar-button]) {
	font-size: var(--starplane-text-xs, var(--star-text-xs, 0.75rem));
	padding: 0 var(--starplane-space-1, var(--star-space-1, 0.25rem));
}
:where([data-starkit-menubar][data-size="lg"] [data-starkit-menubar-chrome]) { min-height: 2.25rem; }
:where([data-starkit-menubar][data-size="lg"] [data-starkit-menubar-button]) {
	font-size: var(--starplane-text-base, var(--star-text-base, 1rem));
	padding: var(--starplane-space-1, var(--star-space-1, 0.25rem))
		var(--starplane-space-3, var(--star-space-3, 0.75rem));
}

:where([data-starkit-window-controls]) {
	font-family: var(--starplane-font, var(--star-font-ui, system-ui, sans-serif));
}
:where([data-starkit-window-control]) {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: var(--starplane-window-control-size, var(--star-window-control-size, 0.75rem));
	height: var(--starplane-window-control-size, var(--star-window-control-size, 0.75rem));
	padding: 0;
	cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--star-text) 14%, transparent);
	border-radius: 50%;
	color: var(--starplane-window-control-glyph, var(--star-text));
	background: var(--star-window-control-fill, var(--star-surface-raised));
	font: inherit;
	line-height: 1;
	transition:
		opacity var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease)),
		transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-window-control][data-action="close"]) {
	background: var(--star-window-control-close, var(--star-danger));
}
:where([data-starkit-window-control][data-action="minimize"]) {
	background: var(--star-window-control-minimize, var(--star-warning, var(--star-accent)));
}
:where([data-starkit-window-control][data-action="zoom"]) {
	background: var(--star-window-control-zoom, var(--star-success, var(--star-accent)));
}
:where([data-starkit-window-control]:hover),
:where([data-starkit-window-control]:focus-visible) {
	transform: scale(1.05);
}
:where([data-starkit-window-control]:active) {
	transform: scale(0.94);
}
:where([data-starkit-window-control]):focus-visible {
	outline: 2px solid var(--starplane-focus-ring, var(--star-focus-ring, var(--star-accent)));
	outline-offset: 3px;
}
:where([data-starkit-window-control-glyph]) {
	display: grid;
	place-items: center;
	font-size: var(--starplane-text-xs, var(--star-text-xs, 0.625rem));
	font-weight: 700;
	line-height: 1;
	opacity: 0;
	transform: scale(0.82);
	transition:
		opacity var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease)),
		transform var(--starplane-dur, var(--star-dur-fast, 0.12s))
			var(--starplane-ease-out, var(--star-ease, ease));
}
:where([data-starkit-window-controls]:hover [data-starkit-window-control-glyph]),
:where([data-starkit-window-control]:focus-visible [data-starkit-window-control-glyph]) {
	opacity: 1;
	transform: scale(1);
}

/* Size steps re-point the control diameter custom property (`md` = 0.75rem). */
:where([data-starkit-window-controls][data-size="sm"]) { --starplane-window-control-size: 0.625rem; }
:where([data-starkit-window-controls][data-size="lg"]) { --starplane-window-control-size: 0.9rem; }

/* `side="right"`: cluster gravitates to the trailing edge (Windows chrome). */
:where([data-starkit-window-controls][data-side="right"]) {
	flex-direction: row-reverse;
}

/* `glyphs="always"`: reveal the glyphs without hover. */
:where([data-starkit-window-controls][data-glyphs="always"] [data-starkit-window-control-glyph]) {
	opacity: 1;
	transform: scale(1);
}

/* `windows` variant: flat, square, always-glyphed caption buttons with a red
 * close-hover — appended last so these zero-specificity rules win by source
 * order over the round-mac defaults above. */
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control]) {
	width: auto;
	height: auto;
	min-width: 2.75rem;
	min-height: 1.75rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--starplane-text-primary, var(--star-text));
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control-glyph]) {
	opacity: 1;
	transform: none;
	font-size: var(--starplane-text-sm, var(--star-text-sm, 0.875rem));
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control]:hover),
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control]:focus-visible) {
	transform: none;
	background: color-mix(in srgb, var(--star-text) 10%, transparent);
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control][data-action="close"]:hover) {
	background: var(--starplane-danger, var(--star-danger));
	color: var(--starplane-danger-on, var(--star-danger-on, var(--star-accent-on)));
}