/* Stroke's object pages (stroke/drawn.py, 21 Oct 2026, the Web Director's craft): a Stroke tile on every property
	group, and the defaults drawn beside their values (track, switch, swatch, enum chip). Drawings are aria-hidden and
	sit at the right of the value's first line; the value's text stays. Hover of a row lights its track magenta (opacity
	only). A track's dot glides in once when its row first scrolls into view (the .sd-knob transform, written by JS). */

/* ---------- a property group: its heading (tile + name) and its table; the group is the tile's hover host ---------- */
.sd-group { display: grid; gap: 12px; min-width: 0; }
.doc .sd-group > .doc-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.sd-group > .doc-sub .sk-tile { margin-block: -2px; }

/* ---------- the drawings ---------- */
.sd-draw { display: block; float: right; margin: 2.5px 0 0 12px; overflow: visible; }
.sd-track { margin-top: 3.5px; }

.sd-rail { fill: none; stroke: color-mix(in srgb, #1c1b21 28%, transparent); stroke-width: 1; }
.sd-hot { fill: none; stroke: color-mix(in srgb, #d23a7e 55%, transparent); stroke-width: 1; opacity: 0; transition: opacity .6s var(--ease); }
.sd-level { fill: none; stroke: color-mix(in srgb, #1c1b21 62%, transparent); stroke-width: 2; }
.sd-dot { fill: #1c1b21; }
.sd-level-hot { stroke: #d23a7e; opacity: 0; transition: opacity .6s var(--ease); }
.sd-dot-hot { fill: #d23a7e; opacity: 0; transition: opacity .6s var(--ease); }
@media (hover: hover) {
	.doc-table tr:hover :is(.sd-hot, .sd-level-hot, .sd-dot-hot) { opacity: 1; transition-duration: .35s; }
}

.sd-sw { fill: none; stroke: color-mix(in srgb, #1c1b21 30%, transparent); stroke-width: 1.5; }
.sd-sw-knob { fill: color-mix(in srgb, #1c1b21 42%, transparent); }
.sd-on .sd-sw { fill: #d23a7e; stroke: #d23a7e; }
.sd-on .sd-sw-knob { fill: #fff; }

.sd-swatch rect { stroke: color-mix(in srgb, #1c1b21 20%, transparent); stroke-width: 1; }

/* an enum default: its value as a chip (a link to its enum when the type names one) */
.sd-chip { display: inline-flex; align-items: center; height: 22px; margin-block: -2px; padding: 0 9px; border-radius: 999px;
	background: color-mix(in srgb, #1c1b21 7%, transparent); color: var(--ink); font-weight: 750; font-size: 12.5px; line-height: 1;
	white-space: nowrap; vertical-align: 1px; }
.doc-table a.sd-chip { text-decoration: none; cursor: pointer;
	transition: background-color .6s var(--ease), color .6s var(--ease), scale .6s var(--ease); }
@media (hover: hover) { .doc-table a.sd-chip:hover { background: #1c1b21; color: #fff; transition-duration: .35s; } }
.doc-table a.sd-chip:active { scale: .95; transition-duration: .35s, .35s, .4s; }

@media (prefers-reduced-motion: reduce) {
	.sd-hot, .sd-level-hot, .sd-dot-hot, .doc-table a.sd-chip { transition-duration: 0s !important; }
}

/* ---------- a family page's title carries its family's tile (the Objects page's heading) ---------- */
.sd-title { display: flex; align-items: center; gap: .32em; }
.sd-title .sk-svg { width: .92em; height: .92em; }