/* =============================================================================
   Hairline figures — the system's side (lib/pw-hairline.js)
   The engine draws in six custom properties; here they come from the system's tokens, so a figure follows light and dark, the accent and the face
   with the surface it sits on. The engine's own rules have no specificity, so these win without `!important`.

     --hairline-plate   the fill of every plate: it must be the colour the figure sits on, because a plate hides what is behind it
     --hairline-hi      what is lit (the only highlight)       --hairline-edge   silhouettes
     --hairline-mid     every other stroke                     --hairline-lo     what recedes
     --hairline-stroke  the stroke width, in CSS pixels at any size

   `.pw-hairline` is the frame the specimens use: a surface, the figure on it, and a read-out in the corner. The ground is a variable, so a figure on
   another surface says so once (`--hl-ground`) and the plates follow.
   ============================================================================= */
.pw-hairline { --hl-ground: var(--pw-bg-surface); position: relative; overflow: hidden; border-radius: var(--pw-radius-2xl); background: var(--hl-ground); box-shadow: 0 0 0 1px var(--pw-border-subtle); }
[data-pw-hairline], [data-hairline] {
  --hairline-plate: var(--hl-ground, var(--pw-bg-surface));
  --hairline-hi: var(--pw-fg-primary);
  --hairline-edge: color-mix(in srgb, var(--pw-fg-primary) 50%, var(--hairline-plate));
  --hairline-mid: color-mix(in srgb, var(--pw-fg-primary) 31%, var(--hairline-plate));
  --hairline-lo: color-mix(in srgb, var(--pw-fg-primary) 17%, var(--hairline-plate));
  --hairline-stroke: 0.9;
}
[data-pw-hairline] { display: block; width: 100%; aspect-ratio: 5 / 4; }
.pw-hairline__read, .pw-hairline__name { position: absolute; z-index: 1; top: 12px; font: 11px/1 var(--pw-font-mono); letter-spacing: 0.02em; color: var(--pw-fg-tertiary); pointer-events: none; font-variant-numeric: tabular-nums; }
.pw-hairline__name { inset-inline-start: 14px; } .pw-hairline__read { inset-inline-end: 14px; color: var(--pw-fg-primary); }

/* =============================================================================
   Tone: a figure's parts take a colour only through data-tone="0..4" (cool → hot) on a group, so the drawing itself still holds no colour. The five
   tones are the system's chart ramp (cyan, green, amber, orange, red); the group re-points the engine's own variables, so strokes, creases and plates
   follow, and the change between tones is a transition, not a jump. Colour is the data here (a temperature, a price, a level), never decoration.
   ============================================================================= */
:root, [data-hairline], .pw-hairline {
  --hl-tone-0: var(--pw-die-cyan-3); --hl-tone-1: var(--pw-die-green-3); --hl-tone-2: var(--pw-die-orange-2); --hl-tone-3: var(--pw-die-orange-3); --hl-tone-4: var(--pw-die-red-3);
}
html.dark [data-hairline], [data-pw-theme="dark"] :root, [data-hairline], .pw-hairline {
  --hl-tone-0: var(--pw-die-cyan-2); --hl-tone-1: var(--pw-die-green-2); --hl-tone-4: var(--pw-die-red-2);
}
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark), html:not(.light):not(.dark) [data-hairline], html:not(.light):not(.dark) .pw-hairline { --hl-tone-0: var(--pw-die-cyan-2); --hl-tone-1: var(--pw-die-green-2); --hl-tone-4: var(--pw-die-red-2); }
}
[data-hairline] [data-tone="0"], .pw-hairline__legend [data-tone="0"] { --tone: var(--hl-tone-0); }
[data-hairline] [data-tone="1"], .pw-hairline__legend [data-tone="1"] { --tone: var(--hl-tone-1); }
[data-hairline] [data-tone="2"], .pw-hairline__legend [data-tone="2"] { --tone: var(--hl-tone-2); }
[data-hairline] [data-tone="3"], .pw-hairline__legend [data-tone="3"] { --tone: var(--hl-tone-3); }
[data-hairline] [data-tone="4"], .pw-hairline__legend [data-tone="4"] { --tone: var(--hl-tone-4); }
[data-hairline] svg [data-tone] {
  --hl-hi: var(--tone);
  --hl-edge: color-mix(in srgb, var(--tone) 82%, var(--hairline-plate));
  --hl-mid: color-mix(in srgb, var(--tone) 58%, var(--hairline-plate));
  --hl-lo: color-mix(in srgb, var(--tone) 32%, var(--hairline-plate));
  --hl-plate: color-mix(in srgb, var(--tone) 16%, var(--hairline-plate));
}
[data-hairline] svg path, [data-hairline] svg circle, [data-hairline] svg ellipse { transition: fill 0.45s var(--pw-ease-out, ease), stroke 0.45s var(--pw-ease-out, ease); }
@media (prefers-reduced-motion: reduce) { [data-hairline] svg path, [data-hairline] svg circle, [data-hairline] svg ellipse { transition: none; } }

/* what a figure says about itself, as HTML on top of it (lib/pw-hairline.js · overlays) */
.pw-hairline__tip {
  position: absolute; inset: 0 auto auto 0; z-index: 3; display: grid; gap: 4px; width: max-content; min-width: 220px; max-width: min(360px, calc(100% - 24px)); padding: 10px 12px; border-radius: var(--pw-radius-lg);
  background: var(--pw-bg-surface); color: var(--pw-fg-primary); box-shadow: 0 0 0 1px var(--pw-border-subtle), var(--pw-shadow-md, 0 8px 24px rgb(0 0 0 / 0.12));
  font-size: 12px; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity 0.12s linear;
}
.pw-hairline__tip.is-on { opacity: 1; }
.pw-hairline__tip-t { font-size: 13px; font-weight: var(--pw-font-weight-semibold); }
.pw-hairline__tip-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 50%; background: var(--tone, var(--pw-fg-tertiary)); }
.pw-hairline__tip-s { color: var(--pw-fg-tertiary); }
.pw-hairline__tip dl { display: grid; gap: 2px; margin: 4px 0 0; padding-top: 6px; border-top: 1px solid var(--pw-border-subtle); }
.pw-hairline__tip dl > div { display: flex; justify-content: space-between; gap: 14px; }
.pw-hairline__tip dt { color: var(--pw-fg-tertiary); white-space: nowrap; } .pw-hairline__tip dd { margin: 0; white-space: nowrap; text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--pw-font-weight-medium); }
.pw-hairline__labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pw-hairline__label { position: absolute; inset: 0 auto auto 0; font: 11px/1 var(--pw-font-sans); letter-spacing: 0.01em; color: var(--pw-fg-tertiary); white-space: nowrap; }
.pw-hairline__legend {
  position: absolute; inset-inline-start: 14px; inset-block-end: 12px; z-index: 2; display: grid; gap: 6px; max-width: calc(100% - 28px); padding: 8px 10px; border-radius: var(--pw-radius-lg);
  background: color-mix(in srgb, var(--hl-ground, var(--pw-bg-surface)) 88%, transparent); box-shadow: 0 0 0 1px var(--pw-border-subtle); font-size: 11px; color: var(--pw-fg-secondary); pointer-events: none;
}
.pw-hairline__legend[hidden] { display: none; }
.pw-hairline__lg-t { font-weight: var(--pw-font-weight-semibold); color: var(--pw-fg-primary); }
.pw-hairline__lg-ramp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(36px, 1fr); gap: 2px; }
.pw-hairline__lg-ramp > span { display: grid; gap: 3px; justify-items: start; }
.pw-hairline__lg-ramp i { width: 100%; height: 6px; border-radius: 3px; background: var(--tone); }
.pw-hairline__lg-ramp em { font-style: normal; font-size: 10px; color: var(--pw-fg-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-hairline__lg-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pw-hairline__lg-key { display: inline-flex; align-items: center; gap: 5px; }
.pw-hairline__lg-key svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* in a .pw-hairline frame the legend is a bar under the figure, so it never covers the drawing */
.pw-hairline > .pw-hairline__legend.is-bar {
  position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: none; padding: 10px 14px; border-radius: 0; background: transparent; box-shadow: none;
  border-top: 1px solid var(--pw-border-subtle);
}
.pw-hairline > .pw-hairline__legend.is-bar .pw-hairline__lg-ramp { grid-auto-columns: minmax(52px, 76px); }

.pw-hairline__lg-note { color: var(--pw-fg-secondary); line-height: 1.4; max-width: 62ch; }
.pw-hairline__sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--tone) 22%, var(--hl-ground, var(--pw-bg-surface))); box-shadow: inset 0 0 0 1.5px var(--tone); }
.pw-hairline__lg-ramp i { box-shadow: none; }

/* a warning that stands on a part of the figure: a real button (so it has a name, a focus ring and a click), not a drawing */
.pw-hairline__badges { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pw-hairline__badge {
  --b: var(--pw-fg-danger); position: absolute; inset: 0 auto auto 0; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  background: var(--pw-bg-surface); color: var(--b); box-shadow: 0 0 0 1.5px var(--b), 0 2px 6px rgb(0 0 0 / 0.14);
}
.pw-hairline__badge.is-heat, .pw-hairline__badge.is-power { --b: var(--pw-fg-warning); }
.pw-hairline__badge.is-battery, .pw-hairline__badge.is-worst { --b: var(--pw-fg-danger); }
.pw-hairline__badge::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--b); opacity: 0; animation: pw-hl-badge 1.9s var(--pw-ease-out, ease-out) infinite; pointer-events: none; }
.pw-hairline__badge.is-worst::after { animation-duration: 1.3s; }
.pw-hairline__badge:hover { background: color-mix(in srgb, var(--b) 12%, var(--pw-bg-surface)); }
.pw-hairline__badge:focus-visible { outline: 2px solid var(--pw-focus-ring, var(--pw-fg-primary)); outline-offset: 3px; }
@keyframes pw-hl-badge { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .pw-hairline__badge::after { animation: none; opacity: 0; } }

/* the glow at the foot of a part: a path with class "fade" inside a data-tone group, filled by the shared vertical gradient of its tone; no outline of its own */
[data-hairline] svg path.fade { stroke: none; }
[data-hairline] svg [data-tone="0"] path.fade { fill: url(#pw-hl-fade-0); } [data-hairline] svg [data-tone="1"] path.fade { fill: url(#pw-hl-fade-1); }
[data-hairline] svg [data-tone="2"] path.fade { fill: url(#pw-hl-fade-2); } [data-hairline] svg [data-tone="3"] path.fade { fill: url(#pw-hl-fade-3); }
[data-hairline] svg [data-tone="4"] path.fade { fill: url(#pw-hl-fade-4); }
/* a figure that crops its drawing (data-viewbox) takes its shape from the crop */
[data-pw-hairline][data-viewbox] { aspect-ratio: var(--hl-ar, 5 / 4); }