/* toolbox — generic primitive shared by all toolbox-based components
   (settings-toolbox, module-actions, etc.). Native HTML `popover`
   attribute + CSS anchor positioning. Top-layer rendering. */

/* Trigger — bare-metal button. `all: unset` strips the global button
   bevel; callers add their own placement / sizing via trigger_class.

   Compound `button.toolbox-trigger` is intentional: ties on specificity
   with forms.css's `button:hover` / `button:active` / `button:focus-visible`
   so source-order wins (toolbox.css loads after forms.css) and the
   bevel can't leak back on state changes. */
button.toolbox-trigger {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--ink-primary);

	&:focus-visible {
		outline: 2px solid var(--accent);
		outline-offset: 2px;
		border-radius: 4px;
	}
}

/* Default kebab glyph — three horizontal lines rendered as inline SVG.
   All visual properties live here (not on the SVG element) so themes
   and palette scopes can override via the cascade: color, line
   thickness, line width, vertical gap, corner radius, drop-shadow
   filters for depth, per-line treatment, etc.

   Geometry tokens are SVG user units within the 16×16 viewBox. */
.toolbox-glyph {
	--glyph-size: 1.25rem;
	--glyph-line-width: 10px;
	--glyph-line-height: 1.5px;
	--glyph-line-gap: 5.25px;
	--glyph-line-radius: calc(var(--glyph-line-height) / 2);

	width: var(--glyph-size);
	height: var(--glyph-size);
	display: block;

	.glyph-line {
		fill: currentColor;
		width: var(--glyph-line-width);
		height: var(--glyph-line-height);
		rx: var(--glyph-line-radius);
		x: calc((16px - var(--glyph-line-width)) / 2);
	}

	.glyph-line-1 {
		y: calc(8px - var(--glyph-line-gap) - var(--glyph-line-height) / 2);
	}

	.glyph-line-2 {
		y: calc(8px - var(--glyph-line-height) / 2);
	}

	.glyph-line-3 {
		y: calc(8px + var(--glyph-line-gap) - var(--glyph-line-height) / 2);
	}
}

/* Panel — renders in the top layer when open. Anchored to the trigger
   via position-anchor (inline per-instance) + position-area. Tokens
   come from data-ui='app' so the panel reads as neutral chrome
   regardless of the surrounding palette. */
.toolbox-panel {
	position-area: bottom span-left;
	margin: 0;
	margin-top: 0.5rem;
	padding: 1rem;
	min-width: 220px;
	background: var(--fill-primary);
	color: var(--ink-primary);
	border: 1px solid var(--stroke-secondary);
	border-radius: 8px;
	box-shadow: var(--panel-shadow, 0 4px 12px rgb(0 0 0 / 0.1));

	/* App-voice typography — mono, small, stable. Same chrome
	   typography across every toolbox panel on the site. */
	font-family:    var(--app-data-voice-font-family);
	font-size:      var(--app-data-voice-font-size);
	line-height:    var(--app-data-voice-line-height);
	letter-spacing: var(--app-data-voice-letter-spacing);
}