/* triage.html: the glasses character fades in beside each numbered section.
 * One character moves between the .tri-slot spots (see assets/speck/triage.js).
 * Sizes live here so the layout is stable before the script runs; the script
 * reads each slot's --s (CSS px per art pixel) for the canvas scale.
 *   narrow (< 720 px): at the end of the eyebrow row, 1.5x (2x from 400 px),
 *                      2x at the closing block
 *   wide (>= 720 px):  a sticky right-hand column, 2.5x, 3x from 960 px */
:root{--tri-scale:1.5;--tri-end-scale:2;--tri-cap-h:18px;--tri-mast:68px}
@media (min-width:400px){:root{--tri-scale:2}}
@media (min-width:720px){:root{--tri-scale:2.5;--tri-end-scale:2.5}}
@media (min-width:960px){:root{--tri-scale:3;--tri-end-scale:3}}

.tri-slot{--s:var(--tri-scale);width:calc(100px * var(--s));height:calc(32px * var(--s) + var(--tri-cap-h));position:relative}
.end .tri-slot{--s:var(--tri-end-scale);margin:22px auto 0}

/* Narrow: the slot sits at the end of the eyebrow row; everything else spans the row. */
.sec[data-speck-state]>.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
.sec[data-speck-state]>.wrap>*{grid-column:1 / -1}
.sec[data-speck-state]>.wrap>.sec__eyebrow{grid-column:1;grid-row:1;min-width:0}
.sec[data-speck-state]>.wrap>.tri-slot{grid-column:2;grid-row:1;margin-bottom:12px}

/* Wide: a right-hand column; the slot spans the whole section and stays level with the reader. */
@media (min-width:720px){
  .sec[data-speck-state]>.wrap{grid-template-columns:minmax(0,1fr) calc(100px * var(--tri-scale));column-gap:clamp(24px,3vw,40px);align-items:start}
  .sec[data-speck-state]>.wrap>*{grid-column:1}
  .sec[data-speck-state]>.wrap>.tri-slot{grid-column:2;grid-row:1 / span 12;margin:0;position:sticky;top:calc(var(--tri-mast) + 16px);align-self:start}
}

/* The one character: fades in over 0.85 s with a 6 px rise, out over 0.55 s. */
.tri-speck{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(6px);transition:opacity .55s cubic-bezier(.4,0,.8,.4),transform .55s ease-in;pointer-events:none}
.tri-speck.on{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.15,.7,.25,1),transform .85s cubic-bezier(.15,.7,.25,1)}
html.speck-reduced .tri-speck,html.speck-reduced .tri-speck.on{transform:none;transition:none}
.tri-canvas{height:calc(32px * var(--s));display:flex;justify-content:center}
.tri-cap{margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;line-height:14px;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tri-cap b{font-weight:400;color:var(--ink-2)}
.tri-cap i{font-style:normal}
/* Phones: the section captions show only the state id. */
@media (max-width:719.98px){.sec .tri-cap i{display:none}}