/* Chart kit. Every color is a design token, so night mode follows the palette; the wavelength fill is physical color.
 * Motion: short and quiet (150-300 ms for state changes, a 900 ms draw-in once), and none for reduced-motion users. */
.oyb-ch {
	--oyb-ch-s1: var(--oyb-color-pink);
	--oyb-ch-s2: var(--oyb-color-ink);
	--oyb-ch-s3: var(--oyb-color-alert);
	--oyb-ch-s4: var(--oyb-color-good);
	--oyb-ch-s5: var(--oyb-color-blue); /* late in the order: the body-clock band is blue too */
	--oyb-ch-s6: var(--oyb-color-subtle);
	--oyb-ch-s7: var(--oyb-ch-s1); /* 7 to 9 (spectra only): the first three colors again, drawn dashed */
	--oyb-ch-s8: var(--oyb-ch-s2);
	--oyb-ch-s9: var(--oyb-ch-s3);
	--oyb-ch-mel: var(--oyb-color-melanopic);
	--oyb-ch-fast: 180ms;
	--oyb-ch-slow: 280ms;
	margin: 1.6em 0;
	padding: 18px 18px 12px;
	background: var(--oyb-color-surface);
	border: 2px solid var(--oyb-color-line);
	border-radius: var(--oyb-radius);
	color: var(--oyb-color-text);
	font-family: var(--oyb-font-body);
	font-size: 15px;
	line-height: 1.45;
	min-width: 0;
}
.oyb-ch * { box-sizing: border-box; }
.oyb-ch__head { margin: 0 0 12px; display: flex; flex-direction: column; gap: 2px; }
.oyb-ch__title { display: block; font-family: var(--oyb-font-display); font-weight: 700; font-size: 19px; line-height: 1.2; color: var(--oyb-color-ink); text-wrap: balance; }
.oyb-ch__sub { font-size: 13px; color: var(--oyb-color-muted); }

/* Keys: series and layer toggles. The theme styles every button:hover/focus (blue fill, shadow); these never take it. */
.oyb-ch__keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.oyb-ch .oyb-ch__key,
.oyb-ch .oyb-ch__key:hover,
.oyb-ch .oyb-ch__key:focus,
.oyb-ch .oyb-ch__key:active {
	display: inline-flex; align-items: center; gap: 8px; min-height: 32px; max-width: 100%; margin: 0; padding: 4px 12px 4px 10px;
	border: 2px solid var(--oyb-color-line); border-radius: var(--oyb-radius-pill); background: var(--oyb-color-surface);
	box-shadow: none; transform: none; color: var(--oyb-color-text); font: 700 13px/1.25 var(--oyb-font-body);
	text-align: left; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; outline: none;
	transition: color var(--oyb-ch-fast) ease, border-color var(--oyb-ch-fast) ease, background-color var(--oyb-ch-fast) ease;
	-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
	.oyb-ch .oyb-ch__key:hover { border-color: var(--oyb-color-subtle); background: var(--oyb-color-page); }
}
.oyb-ch .oyb-ch__key:focus-visible { outline: 2px solid var(--oyb-color-blue); outline-offset: 2px; }
.oyb-ch .oyb-ch__key[aria-pressed="false"] { color: var(--oyb-color-subtle); }
/* The swatch: filled when on, an empty ring when off. */
.oyb-ch__key i {
	flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--oyb-ch-k); border: 2px solid var(--oyb-ch-k);
	transition: background-color var(--oyb-ch-fast) ease, opacity var(--oyb-ch-fast) ease;
}
.oyb-ch__key[aria-pressed="false"] i { background: transparent; opacity: .55; }
.oyb-ch__key.is-s1 { --oyb-ch-k: var(--oyb-ch-s1); } .oyb-ch__key.is-s2 { --oyb-ch-k: var(--oyb-ch-s2); }
.oyb-ch__key.is-s3 { --oyb-ch-k: var(--oyb-ch-s3); } .oyb-ch__key.is-s4 { --oyb-ch-k: var(--oyb-ch-s4); }
.oyb-ch__key.is-s5 { --oyb-ch-k: var(--oyb-ch-s5); } .oyb-ch__key.is-s6 { --oyb-ch-k: var(--oyb-ch-s6); }
.oyb-ch__key.is-s7 { --oyb-ch-k: var(--oyb-ch-s7); } .oyb-ch__key.is-s8 { --oyb-ch-k: var(--oyb-ch-s8); } .oyb-ch__key.is-s9 { --oyb-ch-k: var(--oyb-ch-s9); }
/* A dashed line's swatch is a short dash, so it can't pass for the solid line in the same color. */
.oyb-ch__key:is(.is-s7, .is-s8, .is-s9) i { width: 16px; height: 0; border-radius: 0; border: 0; border-top: 3px dashed var(--oyb-ch-k); background: none; }
.oyb-ch__key:is(.is-s7, .is-s8, .is-s9)[aria-pressed="false"] i { opacity: .35; }
.oyb-ch__key.is-mel { --oyb-ch-k: var(--oyb-ch-mel); }
.oyb-ch__key.is-mel i { border-radius: 3px; border-style: dashed; border-width: 1.5px; background: color-mix(in srgb, var(--oyb-ch-mel) 25%, transparent); }
.oyb-ch__key.is-mel[aria-pressed="false"] i { background: transparent; }
.oyb-ch__key.is-day { --oyb-ch-k: var(--oyb-color-warn); }

/* Plot: y labels | plot, then x labels. The SVGs stretch to the plot box; text is HTML. */
.oyb-ch__frame { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 8px; padding-right: 12px; } /* room for the last x label */
.oyb-ch__y { position: relative; grid-row: 1; width: 2.6em; font-size: 12px; color: var(--oyb-color-muted); }
.oyb-ch__y span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.oyb-ch__plot { position: relative; grid-row: 1; grid-column: 2; aspect-ratio: 5 / 2; min-height: 180px; touch-action: pan-y; }
.oyb-ch__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.oyb-ch__band { grid-row: 2; grid-column: 2; height: 8px; margin-top: 3px; border-radius: 4px; }
.oyb-ch__x { position: relative; grid-row: 3; grid-column: 2; height: 22px; font-size: 12px; color: var(--oyb-color-muted); font-variant-numeric: tabular-nums; }
.oyb-ch__x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.oyb-ch__xtitle { grid-row: 4; grid-column: 2; font-size: 12px; color: var(--oyb-color-muted); text-align: center; }

.oyb-ch__grid { stroke: var(--oyb-color-line); stroke-width: 1; }
.oyb-ch__base { stroke: var(--oyb-color-subtle); stroke-width: 1; }
.oyb-ch__nir { fill: var(--oyb-color-line-soft); }
.oyb-ch__mel-fill { fill: var(--oyb-ch-mel); opacity: .18; }
.oyb-ch__mel-line { fill: none; stroke: var(--oyb-ch-mel); stroke-width: 1.5; stroke-dasharray: 6 5; }
.oyb-ch__day { fill: none; stroke: var(--oyb-color-warn); stroke-width: 2; stroke-dasharray: 6 5; }
.oyb-ch__s { color: var(--oyb-ch-s1); }
.oyb-ch__s.is-s2 { color: var(--oyb-ch-s2); } .oyb-ch__s.is-s3 { color: var(--oyb-ch-s3); }
.oyb-ch__s.is-s4 { color: var(--oyb-ch-s4); } .oyb-ch__s.is-s5 { color: var(--oyb-ch-s5); } .oyb-ch__s.is-s6 { color: var(--oyb-ch-s6); }
.oyb-ch__s.is-s7 { color: var(--oyb-ch-s7); } .oyb-ch__s.is-s8 { color: var(--oyb-ch-s8); } .oyb-ch__s.is-s9 { color: var(--oyb-ch-s9); }
.oyb-ch__s .oyb-ch__fill { fill: currentColor; opacity: .1; }
.oyb-ch__s .oyb-ch__line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.oyb-ch__s:is(.is-s7, .is-s8, .is-s9) .oyb-ch__line { stroke-dasharray: 7 4; }
/* One lamp: the wavelength-colored fill carries it; the outline is ink. */
.oyb-ch.is-one .oyb-ch__fill { opacity: .85; }
.oyb-ch.is-one .oyb-ch__line { stroke-width: 1.5; } /* stroked in the wavelength colors (inline), no dark outline */

/* Toggled series and layers fade rather than blink. */
.oyb-ch__s, .oyb-ch__mel, .oyb-ch__day { transition: opacity var(--oyb-ch-slow) ease; }
.oyb-ch__s.is-off, .oyb-ch__mel.is-off, .oyb-ch__day.is-off { opacity: 0; }

/* Draw-in: the data layer wipes in from the left the first time the chart is seen (kit.js adds the classes). */
.oyb-ch.is-anim .oyb-ch__svg.is-ink { clip-path: inset(0 100% 0 0); }
.oyb-ch.is-anim.is-drawn .oyb-ch__svg.is-ink { clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(.2, .7, .2, 1); }
.oyb-ch.is-anim .oyb-ch__tag { opacity: 0; }
.oyb-ch.is-anim.is-drawn .oyb-ch__tag { opacity: 1; transition: opacity 300ms ease 700ms; }

.oyb-ch__tag { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.oyb-ch__tag.is-peak { margin-bottom: 4px; color: var(--oyb-color-ink); }
.oyb-ch__tag.is-nir { top: 6px; color: var(--oyb-color-muted); font-weight: 700; }

/* Hover / touch readout: fades in and follows the pointer. */
.oyb-ch__cursor { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 1px dashed var(--oyb-color-muted); pointer-events: none; opacity: 0; transition: opacity var(--oyb-ch-fast) ease; }
.oyb-ch__readout {
	position: absolute; top: 8px; left: 0; z-index: 2; width: max-content; max-width: min(260px, 100%); padding: 8px 10px; border-radius: var(--oyb-radius-sm);
	background: var(--oyb-color-panel); color: #fff; font-size: 12px; line-height: 1.4; pointer-events: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18); font-variant-numeric: tabular-nums;
	opacity: 0; transform: translateY(4px); transition: opacity var(--oyb-ch-fast) ease, transform var(--oyb-ch-fast) ease;
}
.oyb-ch__hl { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--oyb-color-ink); opacity: 0; pointer-events: none; transition: opacity var(--oyb-ch-fast) ease, left 120ms ease, width 120ms ease; }
.oyb-ch__plot.is-reading .oyb-ch__hl { opacity: .06; }
.oyb-ch__plot.is-reading .oyb-ch__cursor, .oyb-ch__plot.is-reading .oyb-ch__readout { opacity: 1; transform: none; }

.oyb-ch__readout b { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; font-size: 13px; }
.oyb-ch__readout b i { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.oyb-ch__readout p { margin: 0 0 6px; color: rgba(255, 255, 255, .78); }
.oyb-ch__readout p.is-head { margin: 6px 0 3px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .62); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.oyb-ch__readout p.is-share { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .15); color: #fff; }
.oyb-ch__readout span { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 3px; }
/* A long lamp name wraps to a second line; the percentage never breaks or overlaps it. */
.oyb-ch__readout span em { display: flex; align-items: flex-start; gap: 6px; flex: 1 1 auto; min-width: 0; font-style: normal; overflow-wrap: anywhere; }
.oyb-ch__readout span em .oyb-ch__dot { margin-top: 3px; }
.oyb-ch__readout span strong { flex: none; white-space: nowrap; }

.oyb-ch__caption { margin: 10px 0 0; font-size: 14px; color: var(--oyb-color-muted); }
.oyb-ch__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* See the numbers: a drawer that slides open (kit.js animates the height; without script it simply opens). */
.oyb-ch__numbers { margin-top: 10px; border-top: 1px solid var(--oyb-color-line-soft); padding-top: 8px; font-size: 14px; }
.oyb-ch__numbers summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; color: var(--oyb-color-blue); list-style: none; border-radius: 6px; }
.oyb-ch__numbers summary::-webkit-details-marker { display: none; }
.oyb-ch__numbers summary::marker { content: ""; }
.oyb-ch__numbers summary:focus { outline: none; }
.oyb-ch__numbers summary:focus-visible { outline: 2px solid var(--oyb-color-blue); outline-offset: 3px; }
.oyb-ch__numbers summary i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--oyb-ch-slow) ease; }
.oyb-ch__numbers[open] summary i, .oyb-ch__numbers.is-opening summary i { transform: translateY(2px) rotate(-135deg); }
.oyb-ch__numbers.is-closing summary i { transform: translateY(-2px) rotate(45deg); }
.oyb-ch__drawer { overflow: hidden; }

/* Per lamp: name, then three plain values on one line. */
.oyb-ch__lamps { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.oyb-ch__lamp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oyb-ch__lamp + .oyb-ch__lamp { padding-top: 12px; border-top: 1px solid var(--oyb-color-line-soft); }
.oyb-ch p.oyb-ch__who { margin: 0; font-weight: 800; color: var(--oyb-color-ink); }
.oyb-ch__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.oyb-ch__stats > div { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } /* values line up even when a label wraps */
.oyb-ch__stats dt { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--oyb-color-muted); }
.oyb-ch__stats dd { margin: 0; font-size: 16px; font-weight: 800; color: var(--oyb-color-ink); font-variant-numeric: tabular-nums; line-height: 1.3; }
.oyb-ch__stats dd .is-none { font-size: 13px; font-weight: 600; color: var(--oyb-color-subtle); }

.oyb-ch__who { display: inline-flex; align-items: center; gap: 8px; }
.oyb-ch__dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--oyb-ch-k, var(--oyb-ch-s1)); }
.oyb-ch__dot.is-s1 { --oyb-ch-k: var(--oyb-ch-s1); } .oyb-ch__dot.is-s2 { --oyb-ch-k: var(--oyb-ch-s2); } .oyb-ch__dot.is-s3 { --oyb-ch-k: var(--oyb-ch-s3); }
.oyb-ch__dot.is-s4 { --oyb-ch-k: var(--oyb-ch-s4); } .oyb-ch__dot.is-s5 { --oyb-ch-k: var(--oyb-ch-s5); } .oyb-ch__dot.is-s6 { --oyb-ch-k: var(--oyb-ch-s6); }
.oyb-ch__dot.is-s7 { --oyb-ch-k: var(--oyb-ch-s7); } .oyb-ch__dot.is-s8 { --oyb-ch-k: var(--oyb-ch-s8); } .oyb-ch__dot.is-s9 { --oyb-ch-k: var(--oyb-ch-s9); }
.oyb-ch__dot:is(.is-s7, .is-s8, .is-s9) { background: transparent; box-shadow: inset 0 0 0 2.5px var(--oyb-ch-k); } /* the dashed lines: a ring */
/* On the dark readout, the ink series needs to read as light. */
.oyb-ch__readout .oyb-ch__dot.is-s2 { background: #fff; }
.oyb-ch__readout .oyb-ch__dot.is-s8 { box-shadow: inset 0 0 0 2.5px #fff; }

/* "?" tips: hover on desktop, tap or keyboard anywhere. The bubble is fixed-position (placed by kit.js) so the drawer's
 * overflow can't clip it. */
.oyb-tip { position: relative; display: inline; }
/* In a table with a sticky first column every first cell is its own layer, and later cells paint over earlier ones. The
 * cell holding an open tip goes above all of them (its row's other cells and the row below), so the tip is never covered. */
.oyb-cmp :is(th, td):has(.oyb-tip.is-open), .oyb-cmp :is(th, td):has(.oyb-tip:hover) { z-index: 6; }
.oyb-cmp :is(th, td):not(:first-child):has(.oyb-tip.is-open), .oyb-cmp :is(th, td):not(:first-child):has(.oyb-tip:hover) { position: relative; }
.oyb-tip__end { white-space: nowrap; }
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn { vertical-align: middle; margin-left: 5px; }
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn,
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn:hover,
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn:focus,
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn:active {
	display: inline-grid; place-items: center; position: relative; top: -1px; width: 15px; height: 15px; margin: 0 0 0 5px; padding: 0; border-radius: 50%; vertical-align: middle;
	border: 2px solid var(--oyb-color-subtle); background: transparent; box-shadow: none; color: var(--oyb-color-muted);
	font: 800 10px/1 var(--oyb-font-body); letter-spacing: 0; text-transform: none; cursor: pointer; outline: none;
	transition: color var(--oyb-ch-fast) ease, border-color var(--oyb-ch-fast) ease, background-color var(--oyb-ch-fast) ease;
}
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn[aria-expanded="true"] { border-color: var(--oyb-color-ink); color: var(--oyb-color-ink); }
:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn:focus-visible { outline: 2px solid var(--oyb-color-blue); outline-offset: 2px; }
.oyb-tip__pop {
	position: fixed; left: 0; top: 0; z-index: 100000; width: max-content; max-width: min(260px, 70vw); padding: 9px 11px;
	border-radius: var(--oyb-radius-sm); background: var(--oyb-color-panel); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
	font: 500 13px/1.45 var(--oyb-font-body); letter-spacing: 0; text-transform: none; white-space: normal; text-align: left;
	opacity: 0; visibility: hidden; transform: translate(-50%, -4px); pointer-events: none;
	transition: opacity var(--oyb-ch-fast) ease, transform var(--oyb-ch-fast) ease, visibility 0s linear var(--oyb-ch-fast);
}
.oyb-tip.is-open .oyb-tip__pop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@media (hover: hover) {
	:is(.oyb-ch, .oyb-cmp) .oyb-tip__btn:hover { border-color: var(--oyb-color-ink); color: var(--oyb-color-ink); }
}

/* ---------- Spectrum scale: shape or measured output (one shown at a time; "both" adds the switch) ---------- */
.oyb-ch__y { grid-column: 1; }
.oyb-ch[data-oyb-scale-now="rel"] [data-oyb-scale="abs"], .oyb-ch[data-oyb-scale-now="abs"] [data-oyb-scale="rel"] { display: none; }
.oyb-ch__seg { display: inline-flex; padding: 3px; gap: 2px; border: 2px solid var(--oyb-color-line); border-radius: var(--oyb-radius-pill); background: var(--oyb-color-page); }
.oyb-ch .oyb-ch__seg button,
.oyb-ch .oyb-ch__seg button:hover,
.oyb-ch .oyb-ch__seg button:focus,
.oyb-ch .oyb-ch__seg button:active {
	margin: 0; padding: 4px 12px; min-height: 26px; border: 0; border-radius: var(--oyb-radius-pill); background: transparent; box-shadow: none; transform: none;
	color: var(--oyb-color-muted); font: 700 13px/1.25 var(--oyb-font-body); cursor: pointer; outline: none;
	transition: color var(--oyb-ch-fast) ease, background-color var(--oyb-ch-fast) ease;
}
.oyb-ch .oyb-ch__seg button[aria-pressed="true"] { background: var(--oyb-color-surface); color: var(--oyb-color-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.oyb-ch .oyb-ch__seg button:focus-visible { outline: 2px solid var(--oyb-color-blue); outline-offset: 2px; }

/* Compact: a chart inside a product card. The card is the frame. */
.oyb-ch.is-compact { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; }
.oyb-ch.is-compact .oyb-ch__head:empty { display: none; }
.oyb-ch.is-compact .oyb-ch__head { margin-bottom: 6px; }
.oyb-ch.is-compact .oyb-ch__plot { aspect-ratio: 2 / 1; min-height: 0; } /* a min height here forced a 240 px width: it spilled out of a narrow pick card's drawer */
.oyb-ch.is-compact .oyb-ch__frame { padding-top: 10px; } /* the top axis label sits half above the plot */
.oyb-ch.is-compact .oyb-ch__keys:empty { display: none; }

/* ---------- Lens view: a color chart without / through the lens, compared with a slider ---------- */
.oyb-lens { margin: 0; min-width: 0; }
.oyb-lens__frame { position: relative; border-radius: var(--oyb-radius-sm); overflow: hidden; touch-action: pan-y; user-select: none; }
.oyb-lens__layer { padding: 10px; background: #202020; } /* the chart's own black surround */
.oyb-lens__layer.is-open { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--oyb-pos)) 0 0); }
.oyb-lens__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.oyb-lens__grid i { display: block; aspect-ratio: 4 / 3; border-radius: 3px; } /* a bit wider than tall: about as high as the curve beside it */
.oyb-lens__handle { position: absolute; top: 0; bottom: 0; left: var(--oyb-pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; }
.oyb-lens__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.oyb-lens__tag { position: absolute; top: 6px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.oyb-lens__tag.is-open { left: 6px; } .oyb-lens__tag.is-thru { right: 6px; }
.oyb-lens__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.oyb-lens__range:focus-visible ~ .oyb-lens__handle::after, .oyb-lens__frame:focus-within .oyb-lens__handle::after { outline: 2px solid var(--oyb-color-blue); outline-offset: 2px; }
.oyb-lens__cap { margin: 6px 0 0; font-size: 12px; color: var(--oyb-color-muted); }

/* ---------- Lines (transmission, flicker waveform, ramps, loudness) ---------- */
.oyb-ch--lines .oyb-ch__s .oyb-ch__fill.is-soft { opacity: .12; }
.oyb-ch--lines.is-one .oyb-ch__line { stroke: var(--oyb-ch-s1); stroke-width: 2.5; }
.oyb-ch--lines .oyb-ch__x { margin-top: 4px; }
.oyb-ch__note { margin: 8px 0 0; font-size: 13px; color: var(--oyb-color-muted); }

/* ---------- Bars ---------- */
/* One grid: labels (as wide as the longest, at most 42%) | lanes. Every lane starts at the same x; a lane is the bar's
 * full-scale width, minus a gutter on the right for the value that follows the bar. */
.oyb-bars { --oyb-bars-pad: 5.6em; }
.oyb-ch ol.oyb-bars__list { list-style: none; margin: 0; padding: 0; display: grid; /* the theme indents article lists */ grid-template-columns: fit-content(42%) minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; }
.oyb-bars__row { display: contents; --oyb-ch-k: var(--oyb-ch-s1); }
.oyb-bars__row.is-s2 { --oyb-ch-k: var(--oyb-ch-s2); } .oyb-bars__row.is-s3 { --oyb-ch-k: var(--oyb-ch-s3); }
.oyb-bars__row.is-s4 { --oyb-ch-k: var(--oyb-ch-s4); } .oyb-bars__row.is-s5 { --oyb-ch-k: var(--oyb-ch-s5); } .oyb-bars__row.is-s6 { --oyb-ch-k: var(--oyb-ch-s6); }
.oyb-bars__label { font-size: 14px; font-weight: 700; color: var(--oyb-color-ink); line-height: 1.25; overflow-wrap: anywhere; text-align: right; }
.oyb-bars__lane { position: relative; display: block; height: 24px; margin-right: var(--oyb-bars-pad); }
.oyb-bars__bar { position: relative; z-index: 1; display: block; height: 100%; min-width: 3px; border-radius: 0 6px 6px 0; background: var(--oyb-ch-k); transform-origin: left center; }
.oyb-ch--bars.is-one .oyb-bars__bar { background: var(--oyb-ch-s1); }
/* The article's own product against the field (bars.php "focus"): it keeps the pink, the rest go grey and quiet. */
.oyb-bars__row.is-muted { --oyb-ch-k: color-mix(in srgb, var(--oyb-color-subtle) 60%, var(--oyb-color-surface)); }
.oyb-bars__row.is-muted .oyb-bars__label, .oyb-bars__row.is-muted .oyb-bars__value { font-weight: 600; color: var(--oyb-color-muted); }
.oyb-bars__row.is-focus .oyb-bars__label, .oyb-bars__row.is-focus .oyb-bars__value { font-weight: 800; color: var(--oyb-color-pink-deep); }
.oyb-bars__value { position: absolute; z-index: 2; top: 50%; margin-left: 5px; padding: 1px 3px; border-radius: 4px; background: var(--oyb-color-surface); transform: translateY(-50%); font-size: 14px; font-weight: 800; color: var(--oyb-color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } /* on the card's color, so a reference line passes behind it */
.oyb-bars__value small { font-size: 12px; font-weight: 600; color: var(--oyb-color-muted); }
/* Reference lines: a dashed segment in every lane (rows join it up through the gaps), labelled once in the header row. */
.oyb-bars__rl { position: absolute; z-index: 0; top: -5px; bottom: -5px; border-left: 2px dashed var(--oyb-color-ink); opacity: .45; }
/* The reference labels: a line each in the flow (so a wrapped label pushes the next down), the dashed line's stub under them. */
.oyb-bars__row.is-head .oyb-bars__lane { height: auto; padding-bottom: 10px; }
.oyb-bars__rline { position: relative; display: block; min-height: 1.35em; font-size: 12px; }
.oyb-bars__row.is-head .oyb-bars__rl { top: auto; bottom: -5px; height: 15px; }
.oyb-bars__rlabel { position: relative; display: inline-block; vertical-align: top; transform: translateX(-50%); font-size: 12px; font-weight: 700; line-height: 1.25; white-space: normal; text-align: center; color: var(--oyb-color-muted); }
.oyb-bars__rline .oyb-bars__rlabel + .oyb-bars__rlabel { position: absolute; top: 0; } /* a second label on the same line sits by its own line */
.oyb-bars__rlabel.is-start { transform: translateX(-4px); text-align: left; } .oyb-bars__rlabel.is-end { transform: translateX(calc(-100% + 4px)); text-align: right; }
.oyb-ch.is-anim .oyb-bars__bar { transform: scaleX(0); }
.oyb-ch.is-anim.is-drawn .oyb-bars__bar { transform: scaleX(1); transition: transform 700ms cubic-bezier(.2, .7, .2, 1) calc(var(--oyb-i, 0) * 50ms); }
.oyb-ch.is-anim .oyb-bars__value, .oyb-ch.is-anim .oyb-bars__rl, .oyb-ch.is-anim .oyb-bars__rlabel { opacity: 0; }
.oyb-ch.is-anim.is-drawn .oyb-bars__value, .oyb-ch.is-anim.is-drawn .oyb-bars__rlabel { opacity: 1; transition: opacity 300ms ease 500ms; }
.oyb-ch.is-anim.is-drawn .oyb-bars__rl { opacity: .45; transition: opacity 300ms ease 600ms; }

/* Tables in "See the numbers" (bars, risk map). */
.oyb-ch__table { overflow-x: auto; padding-top: 10px; }
.oyb-ch__table table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.oyb-ch__table th, .oyb-ch__table td { padding: 6px 8px; border-bottom: 1px solid var(--oyb-color-line-soft); text-align: left; vertical-align: top; }
.oyb-ch__table thead th { font-size: 12px; color: var(--oyb-color-muted); font-weight: 700; }
.oyb-ch__table tbody th { font-weight: 700; color: var(--oyb-color-ink); }
.oyb-ch__table tbody th .oyb-ch__dot { margin-right: 6px; }
.oyb-ch__table tr.is-ref th, .oyb-ch__table tr.is-ref td { color: var(--oyb-color-muted); font-style: italic; }
.oyb-ch__table td.is-none { color: var(--oyb-color-good); font-weight: 700; } .oyb-ch__table td.is-low { color: var(--oyb-color-warn); font-weight: 700; } .oyb-ch__table td.is-high { color: var(--oyb-color-alert); font-weight: 700; }

/* ---------- Flicker risk map ---------- */
.oyb-risk__high { fill: color-mix(in srgb, var(--oyb-color-alert) 14%, transparent); }
.oyb-risk__low { fill: color-mix(in srgb, var(--oyb-color-warn) 22%, var(--oyb-color-surface)); }
.oyb-risk__none { fill: color-mix(in srgb, var(--oyb-color-good) 18%, var(--oyb-color-surface)); }
.oyb-ch .oyb-ch__key.is-static, .oyb-ch .oyb-ch__key.is-static:hover { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: default; font-weight: 600; } /* a legend, not a button */
.oyb-ch__keys:has(.is-static) { gap: 6px 18px; }
.oyb-ch__key.is-static.is-none { --oyb-ch-k: var(--oyb-color-good); } .oyb-ch__key.is-static.is-low { --oyb-ch-k: var(--oyb-color-warn); } .oyb-ch__key.is-static.is-high { --oyb-ch-k: var(--oyb-color-alert); }
.oyb-ch__key.is-static i { border-radius: 3px; }
.oyb-risk__dot { position: absolute; z-index: 1; width: 0; height: 0; outline: none; }
.oyb-risk__dot i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--oyb-color-ink); box-shadow: 0 0 0 2px var(--oyb-color-surface); } /* one color: the zone carries the verdict */
.oyb-risk__dot:focus-visible i { outline: 2px solid var(--oyb-color-blue); outline-offset: 2px; }
.oyb-risk__steady { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; font-size: 13px; color: var(--oyb-color-muted); }
.oyb-risk__steady b { font-weight: 700; color: var(--oyb-color-text); }
.oyb-risk__steady span { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--oyb-color-ink); }
.oyb-risk__steady span i { width: 10px; height: 10px; border-radius: 50%; background: var(--oyb-color-good); }
.oyb-risk__steady small { font-weight: 600; color: var(--oyb-color-muted); }
.oyb-risk__tag { position: absolute; left: 12px; bottom: 6px; display: flex; flex-direction: column; width: max-content; max-width: 14em; font-size: 12px; font-weight: 800; color: var(--oyb-color-ink); line-height: 1.2; pointer-events: none; }
.oyb-risk__tag small { font-weight: 600; color: var(--oyb-color-muted); }
.oyb-risk__dot.is-top .oyb-risk__tag { bottom: auto; top: -8px; } /* beside the dot, not above the plot */
.oyb-risk__dot.is-flip .oyb-risk__tag { left: auto; right: 12px; text-align: right; align-items: flex-end; } /* near the right edge: label to the left */
.oyb-ch.is-anim .oyb-risk__dot { opacity: 0; }
.oyb-ch.is-anim.is-drawn .oyb-risk__dot { opacity: 1; transition: opacity 400ms ease 200ms; }

@media (max-width: 560px) {
	.oyb-ch { padding: 14px 12px 10px; font-size: 14px; }
	.oyb-ch__plot { aspect-ratio: 4 / 3; min-height: 0; }
	.oyb-ch__title { font-size: 17px; }
	.oyb-ch__stats { gap: 6px 10px; }
	.oyb-ch__stats dd { font-size: 15px; }
	/* Bars stack: label above its bar, so the bar gets the full width. */
	.oyb-bars { --oyb-bars-pad: 5.2em; }
	.oyb-ch ol.oyb-bars__list { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
	.oyb-bars__label { font-size: 13px; text-align: left; margin-top: 6px; }
	.oyb-bars__row.is-head .oyb-bars__label { display: none; }
	.oyb-risk__tag { max-width: 9em; }
}

@media (prefers-reduced-motion: reduce) {
	.oyb-ch, .oyb-ch * { transition: none !important; animation: none !important; }
	.oyb-ch.is-anim .oyb-ch__svg.is-ink { clip-path: none; }
	.oyb-ch.is-anim .oyb-ch__tag { opacity: 1; }
}

/* An agreement band (lines y_band): the shaded range a reading should stay inside, its zero line and label. */
.oyb-ch__yband { fill: color-mix(in srgb, var(--oyb-tone-good, #237a43) 11%, transparent); }
.oyb-ch__zero { stroke: var(--oyb-color-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
.oyb-ch__yband-label { position: absolute; right: 6px; transform: translateY(calc(-100% - 4px)); font: 700 10px/1 var(--oyb-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--oyb-tone-good, #237a43); pointer-events: none; }

/* Many series, a panel each (chart.php oyb_chart_stack: flicker per lamp, an old chart's many scenes): slim rows on one axis, labels at the bottom only. */
.oyb-ch ol.oyb-stack { list-style: none; margin: 4px 0 0; padding: 0; }
.oyb-stack__row { display: grid; grid-template-columns: minmax(110px, 22%) minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 4px 0; border-top: 1px solid var(--oyb-color-line-soft); }
.oyb-stack__row:first-child { border-top: 0; }
.oyb-stack__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.oyb-stack__who strong { font-size: 14px; font-weight: 800; color: var(--oyb-color-ink); }
.oyb-stack__who span { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.oyb-stack__who .is-good { color: var(--oyb-tone-good); }
.oyb-stack__who .is-warn { color: var(--oyb-tone-warn); }
.oyb-stack__who .is-bad { color: var(--oyb-tone-bad); }
.oyb-stack .oyb-ch.is-compact .oyb-ch__plot { aspect-ratio: auto; height: 58px; min-height: 0; }
.oyb-stack .oyb-ch.is-compact .oyb-ch__frame { padding-top: 6px; }
.oyb-stack .oyb-ch.is-compact .oyb-ch__head,
.oyb-stack__row:not(.is-last) .oyb-ch__x,
.oyb-stack__row:not(.is-last) .oyb-ch__xtitle { display: none; }
.oyb-stack .oyb-ch__y span { font-size: 10px; }
@media (max-width: 560px) {
	.oyb-stack__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0 4px; }
	.oyb-stack__who { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
}

/* Range (kit/range.php): each product's settings as dots on one axis, joined from the lowest to the highest; one color,
 * as in the Flourish chart it replaces. Labels in a column only as wide as they need, like the bars. */
.oyb-ch ol.oyb-range { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); column-gap: 16px; }
.oyb-range__row { display: contents; }
.oyb-range__label { padding: 7px 0; font-size: 14px; font-weight: 800; line-height: 1.25; color: var(--oyb-color-ink); }
.oyb-range__label small { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; color: var(--oyb-color-muted); font-variant-numeric: tabular-nums; }
.oyb-range__lane { position: relative; min-height: 30px; margin-right: 8px; background: linear-gradient(var(--oyb-color-line-soft), var(--oyb-color-line-soft)) 0 50% / 100% 1px no-repeat; align-self: stretch; }
.oyb-range__span { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: color-mix(in srgb, var(--oyb-color-blue) 55%, transparent); }
.oyb-range__dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--oyb-color-blue); box-shadow: 0 0 0 2px var(--oyb-color-surface); }
/* Each dot names its value on hover (or a tap on a phone, kit.js): "15 min". */
.oyb-range__dot { cursor: default; transition: transform .15s ease; }
.oyb-range__dot::before { content: ""; position: absolute; inset: -7px; } /* a bigger target than the dot */
.oyb-range__dot::after {
	content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
	padding: 4px 8px; border-radius: 6px; background: var(--oyb-color-ink); color: var(--oyb-color-surface);
	font: 700 12px/1.2 var(--oyb-font-body); white-space: nowrap; font-variant-numeric: tabular-nums;
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.oyb-range__dot:is(:hover, .is-tip) { transform: scale(1.3); z-index: 2; }
.oyb-range__dot:is(:hover, .is-tip)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(.77); } /* scale(.77) undoes the dot's 1.3 */
.oyb-range__row.is-axis .oyb-range__lane { min-height: 22px; background: linear-gradient(var(--oyb-color-subtle), var(--oyb-color-subtle)) 0 0 / 100% 1px no-repeat; }
.oyb-range__ticks span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11.5px; color: var(--oyb-color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* the last tick sits at the edge with no room: it wrapped one digit per line ("100") */
.oyb-range__unit { margin: 4px 0 0; text-align: center; font-size: 12px; font-weight: 700; color: var(--oyb-color-muted); }
@media (prefers-reduced-motion: no-preference) {
	.oyb-ch--range.is-anim:not(.is-drawn) .oyb-range__dot, .oyb-ch--range.is-anim:not(.is-drawn) .oyb-range__span { opacity: 0; }
	.oyb-range__dot, .oyb-range__span { transition: opacity .4s ease calc(var(--oyb-i, 0) * 40ms); }
}
@media (max-width: 480px) { .oyb-ch ol.oyb-range { grid-template-columns: fit-content(44%) minmax(0, 1fr); column-gap: 10px; } .oyb-range__label { font-size: 13px; } .oyb-range__dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } }


.oyb-ch__tag.is-nir.is-low { top: auto; bottom: 6px; } /* at the foot of the band when the peak's label sits near the top of it */
.oyb-ch__tag.is-nir.is-right { left: auto !important; right: 6px; transform: none; } /* a narrow band: the word stays inside the plot */
.oyb-ch__tag.is-nir.is-left { left: 6px !important; transform: none; }

/* ---------- Study figures (kit/study.php): a paper's figure redrawn from its numbers ---------- */
.oyb-sf { --oyb-sf-none: color-mix(in srgb, var(--oyb-color-subtle) 55%, var(--oyb-color-surface)); }
.oyb-sf__over { position: absolute; inset: 0; pointer-events: none; }
.oyb-sf__zero { stroke: var(--oyb-color-subtle); stroke-width: 1.5; }
.oyb-sf__ref { stroke: var(--oyb-color-ink); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .5; }
.oyb-sf__reflab { position: absolute; right: 4px; transform: translateY(calc(-100% - 3px)); padding: 0 3px; border-radius: 3px; background: var(--oyb-color-surface); font-size: 12px; font-weight: 700; color: var(--oyb-color-muted); white-space: nowrap; }
.oyb-sf__evlab { position: absolute; top: 4px; margin-left: 5px; font-size: 12px; font-weight: 700; color: var(--oyb-color-muted); white-space: nowrap; }
.oyb-sf__evlab.is-end { margin-left: 0; transform: translateX(calc(-100% - 5px)); }
/* Columns: one slot per category; each bar from zero, its error bar, its value above (below for a negative one). */
.oyb-sf__col { position: absolute; top: 0; bottom: 0; transition: background-color var(--oyb-ch-fast) ease; }
.oyb-sf__col.is-hot { background: color-mix(in srgb, var(--oyb-color-ink) 5%, transparent); }
.oyb-sf__bar { position: absolute; display: block; min-height: 2px; border-radius: 5px 5px 0 0; background: var(--oyb-sf-c, var(--oyb-ch-s1)); transform-origin: center bottom; }
.oyb-sf__bar.is-neg { border-radius: 0 0 5px 5px; transform-origin: center top; }
.oyb-sf__bar.is-none { --oyb-sf-c: var(--oyb-sf-none); }
.oyb-sf__bar.is-s2 { --oyb-sf-c: var(--oyb-ch-s2); } .oyb-sf__bar.is-s3 { --oyb-sf-c: var(--oyb-ch-s3); } .oyb-sf__bar.is-s4 { --oyb-sf-c: var(--oyb-ch-s4); }
.oyb-sf__bar.is-s5 { --oyb-sf-c: var(--oyb-ch-s5); } .oyb-sf__bar.is-s6 { --oyb-sf-c: var(--oyb-ch-s6); }
.oyb-sf__bar.is-nm { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oyb-color-ink) 18%, transparent); } /* a pale wavelength (yellow-green) still has an edge */
.oyb-sf__err { position: absolute; width: 14px; margin-left: -7px; border-top: 2px solid var(--oyb-color-ink); border-bottom: 2px solid var(--oyb-color-ink); }
.oyb-sf__err::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--oyb-color-ink); transform: translateX(-1px); }
.oyb-sf__val { position: absolute; transform: translate(-50%, -4px); font-size: 13px; font-weight: 800; color: var(--oyb-color-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.oyb-sf__val.is-neg { transform: translate(-50%, 4px); }
.oyb-sf__star { position: absolute; left: 50%; transform: translate(-50%, -22px); font-size: 15px; font-weight: 800; color: var(--oyb-color-pink-deep, var(--oyb-color-pink)); line-height: 1; }
.oyb-sf--lines .oyb-sf__star { transform: translate(-50%, -8px); }
.oyb-sf__cats { height: auto; min-height: 22px; }
.oyb-sf__cats span.oyb-sf__cat { position: absolute; top: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px; white-space: normal; text-align: center; line-height: 1.2; font-weight: 700; color: var(--oyb-color-text); }
.oyb-sf__cats { padding-bottom: 3.3em; }
.oyb-sf__cat i { display: block; width: 10px; height: 10px; border-radius: 50%; }
/* Lines: shaded stretches (sleep, light exposure), the error band, a dot at each reported point. */
.oyb-sf__band { position: absolute; top: 0; bottom: 0; }
.oyb-sf__band.is-dark { background: color-mix(in srgb, var(--oyb-color-ink) 8%, transparent); }
.oyb-sf__band.is-light { background: color-mix(in srgb, var(--oyb-color-warn) 16%, transparent); }
.oyb-sf__band em { position: absolute; left: 6px; top: 4px; font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--oyb-color-muted); white-space: nowrap; }
.oyb-sf__eband { fill: currentColor; opacity: .14; }
.oyb-sf__pt { position: absolute; width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: var(--oyb-ch-k, var(--oyb-ch-s1)); box-shadow: 0 0 0 2px var(--oyb-color-surface); transition: opacity var(--oyb-ch-slow) ease; }
.oyb-sf__pt.is-s2 { --oyb-ch-k: var(--oyb-ch-s2); } .oyb-sf__pt.is-s3 { --oyb-ch-k: var(--oyb-ch-s3); } .oyb-sf__pt.is-s4 { --oyb-ch-k: var(--oyb-ch-s4); }
.oyb-sf__pt.is-s5 { --oyb-ch-k: var(--oyb-ch-s5); } .oyb-sf__pt.is-s6 { --oyb-ch-k: var(--oyb-ch-s6); }
.oyb-sf__pt.is-off { opacity: 0; }
.oyb-sf__pt.is-hot { transform: scale(1.45); }
.oyb-sf--lines .oyb-ch__line { stroke-width: 2.5; }
/* Credit, tags, the facts under the numbers table. */
.oyb-sf__credit { margin: 10px 0 0; font-size: 12.5px; color: var(--oyb-color-muted); }
.oyb-sf__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.oyb-sf__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.oyb-sf__tag { padding: 2px 8px; border-radius: var(--oyb-radius-pill); background: color-mix(in srgb, var(--oyb-color-warn) 18%, var(--oyb-color-surface)); font-size: 11.5px; font-weight: 800; color: var(--oyb-color-ink); }
.oyb-sf__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.oyb-sf__facts > div.is-wide { grid-column: 1 / -1; }
.oyb-sf__facts dt { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--oyb-color-muted); }
.oyb-sf__facts dd { margin: 0; font-size: 14px; color: var(--oyb-color-text); }
.oyb-sf .oyb-ch__readout em.is-sig { display: block; margin-top: 4px; color: rgba(255, 255, 255, .7); font-style: normal; }
/* Draw-in: bars grow from zero, dots and labels fade in after. */
.oyb-ch.is-anim .oyb-sf__bar { transform: scaleY(0); }
.oyb-ch.is-anim.is-drawn .oyb-sf__bar { transform: scaleY(1); transition: transform 700ms cubic-bezier(.2, .7, .2, 1) calc(var(--oyb-i, 0) * 60ms); }
.oyb-ch.is-anim :is(.oyb-sf__err, .oyb-sf__val, .oyb-sf__star, .oyb-sf__pt) { opacity: 0; }
.oyb-ch.is-anim.is-drawn :is(.oyb-sf__err, .oyb-sf__val, .oyb-sf__star, .oyb-sf__pt) { opacity: 1; transition: opacity 300ms ease 600ms; }
.oyb-ch.is-anim.is-drawn .oyb-sf__pt.is-off { opacity: 0; }
@media (max-width: 560px) {
	.oyb-sf--bars .oyb-ch__plot { aspect-ratio: 1 / 1; }
	.oyb-sf__val { font-size: 11.5px; }
	.oyb-sf__err { width: 10px; margin-left: -5px; }
	.oyb-sf__cats span.oyb-sf__cat { font-size: 11px; }
	.oyb-sf__facts { grid-template-columns: minmax(0, 1fr); }
}
.oyb-sf--bars .oyb-ch__cursor { display: none; }
.oyb-sf__cat i.is-none { background: var(--oyb-sf-none); }
/* The theme spaces article paragraphs; inside a study figure the kit sets its own. */
.oyb-sf p.oyb-ch__note { margin: 8px 0 0; }
.oyb-sf p.oyb-sf__credit { margin: 10px 0 0; }
.oyb-sf p.oyb-ch__caption { margin: 10px 0 0; }
.oyb-sf p.oyb-ch__sr { margin: 0; }

/* Bland-Altman (kit/agreement.php): the dots darker where readings stack, the limits band, the bias in pink, the limits
 * dashed; the line labels sit at the right edge, above their line (the lower limit's below it). */
.oyb-ch--ba .oyb-ba__ytitle { margin: 2px 0 6px; font: 600 11px/1.3 var(--oyb-font-mono); letter-spacing: .04em; color: var(--oyb-color-muted); }
.oyb-ba__band { fill: color-mix(in srgb, var(--oyb-color-subtle) 9%, transparent); }
.oyb-ba__d { fill: none; stroke: var(--oyb-color-blue); stroke-linecap: round; stroke-width: 4.5; }
.oyb-ba__d.is-l0 { stroke-opacity: .22; } .oyb-ba__d.is-l1 { stroke-opacity: .38; } .oyb-ba__d.is-l2 { stroke-opacity: .56; }
.oyb-ba__d.is-l3 { stroke-opacity: .76; } .oyb-ba__d.is-l4 { stroke-opacity: 1; }
.oyb-ba__bias { stroke: var(--oyb-ch-s1); stroke-width: 2.5; }
.oyb-ba__loa { stroke: var(--oyb-color-ink); stroke-width: 1.5; stroke-dasharray: 6 4; opacity: .7; }
.oyb-ba__tag { position: absolute; right: 6px; transform: translateY(calc(-100% - 3px)); font: 700 10px/1 var(--oyb-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--oyb-color-ink); background: color-mix(in srgb, var(--oyb-color-surface) 80%, transparent); padding: 2px 3px; border-radius: 3px; pointer-events: none; }
.oyb-ba__tag.is-bias { color: var(--oyb-ch-s1); right: auto; left: 6px; } /* left, so it never stacks with the limit labels at the right */
.oyb-ba__tag.is-below { transform: translateY(3px); }
.oyb-ch.is-anim .oyb-ba__tag { opacity: 0; }
.oyb-ch.is-anim.is-drawn .oyb-ba__tag { opacity: 1; transition: opacity 300ms ease 700ms; }
@media (max-width: 520px) { .oyb-ba__d { stroke-width: 3.5; } }