/* ============================================================================
callout.css — DIMENSION CALLOUTS
The graft that makes the negative space informative (spec §6 "Dimension
callouts"). Present on leaves 01, 02, 03 (type panels) and 04.
Markup contract, exactly as index.html ships it:
48 in × 250 ft
NO MONOSPACE. The datasheet read comes from Archivo at wdth 76 with
tabular-nums + lining-nums, per the hard prohibition in spec §2.2. If anyone
reaches for a mono family "just for the numbers", the whole distinctness
argument collapses.
TRIGGER CONTRACT. The drawn end state is reached by either of two paths, so
the callout works whether or not js/callout.js has booted:
1. the owning leaf going live — `.leaf__body[data-live] .callout`
2. an explicit per-callout flag — `.callout[data-callout="drawn"]`
js/callout.js may also write `stroke-dashoffset` / `transform` / `opacity`
inline; these are TRANSITIONS, not animations, so an inline write still
tweens on the same curves rather than fighting a keyframe track.
Per-callout entry offset: `--callout-in` (a ). Leaf 01's callout draws
at +1100 ms and leaf 02's at +180 ms behind its claim; those offsets are set
in css/motion.css, which owns timing. Positioning inside a leaf belongs to
css/leaf.css and css/band.css; this file owns the drawing only.
========================================================================== */
.callout {
/* Leader length in user units. index.html ships `--len:208`, which is the
x2-x1 of `.lead` in the 220-wide viewBox. Restated here so a callout
without an inline style still draws. */
--len: 208;
--callout-in: 0ms;
--callout-lead: var(--kraft-lit);
--callout-num: var(--stencil-2);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-1);
margin: 0;
padding: 0;
width: 220px;
max-width: 100%;
}
.callout svg {
display: block;
width: 100%;
height: auto;
aspect-ratio: 220 / 12;
overflow: visible;
}
/* ── The leader line ─────────────────────────────────────────────────────────
Draws stroke-dashoffset L → 0 over --d-callout-line (520 ms) on --e-grade. */
.callout .lead {
stroke: var(--callout-lead);
stroke-width: 1;
stroke-linecap: butt;
vector-effect: non-scaling-stroke;
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
transition: stroke-dashoffset calc(var(--d-callout-line) * 1) var(--e-grade)
var(--callout-in);
}
/* ── The two ticks ───────────────────────────────────────────────────────────
scaleY 0 → 1 over --d-callout-tick (180 ms) on --e-lay, staggered 60 ms.
`transform-box: view-box` puts transform-origin in the SVG's own user units,
which is the only reliable origin for a zero-width vertical . */
.callout .tick {
stroke: var(--callout-lead);
stroke-width: 1;
stroke-linecap: butt;
vector-effect: non-scaling-stroke;
transform-box: view-box;
transform-origin: 6px 6px;
transform: scaleY(0);
transition: transform calc(var(--d-callout-tick) * 1) var(--e-lay)
var(--callout-in);
}
.callout .tick:last-child {
transform-origin: 214px 6px;
/* the 60 ms stagger is stated literally in the spec, not tokenised */
transition-delay: calc(var(--callout-in) + 60ms);
}
/* ── The numeral ─────────────────────────────────────────────────────────────
Fades and un-blurs (blur(3px) → 0) over --d-callout-num (260 ms) at a
--d-callout-delay (420 ms) delay. Reads exactly like a drawing being
dimensioned by hand. */
.callout .num {
font-family: var(--f-label);
font-variation-settings: "wdth" 76, "wght" 500;
font-weight: 500;
font-size: var(--t-num);
line-height: 1.2;
letter-spacing: 0;
font-variant-numeric: tabular-nums lining-nums;
color: var(--callout-num);
opacity: 0;
filter: blur(3px);
transition:
opacity calc(var(--d-callout-num) * 1) var(--e-lay)
calc(var(--callout-in) + var(--d-callout-delay) * 1),
filter calc(var(--d-callout-num) * 1) var(--e-lay)
calc(var(--callout-in) + var(--d-callout-delay) * 1);
}
/* ── Drawn ───────────────────────────────────────────────────────────────── */
.callout[data-callout="drawn"] .lead,
.leaf__body[data-live] .callout .lead {
stroke-dashoffset: 0;
}
.callout[data-callout="drawn"] .tick,
.leaf__body[data-live] .callout .tick {
transform: scaleY(1);
}
.callout[data-callout="drawn"] .num,
.leaf__body[data-live] .callout .num {
opacity: 1;
filter: blur(0);
}
/* ── Orientation ─────────────────────────────────────────────────────────────
`--h` is the resting orientation and exists as a named no-op so the markup
can always declare its intent. `--v` rotates the whole figure a quarter turn
anticlockwise, so the numeral reads bottom-to-top — the engineering-drawing
convention for a vertical dimension, and the reason it is not counter-
rotated back to horizontal. The rotated figure keeps its original layout
box; where it sits on the stage is css/leaf.css's decision. */
.callout--h {
transform: none;
}
.callout--v {
transform: rotate(-90deg);
transform-origin: center;
}
/* ── The list wrapper (leaf 02) ─────────────────────────────────────────────
`` holds one or more callouts behind their claim. */
.callouts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--s-4);
justify-items: start;
}
.callouts > li {
display: contents;
}
/* ── Grounds the default ink cannot survive ─────────────────────────────────
`--kraft-lit` and `--stencil-2` are the stated values and hold on foam,
kraft, seal and cream. The leaf 03 type panel is a solid `--plate-carbon`
slab and the carbon leaf inverts the whole card, so both re-declare the two
callout inks rather than drawing a brown line on near-black. */
[data-ground="plate-carbon"] .callout,
[data-plate="carbon"] .callout {
--callout-lead: var(--rule-dark);
--callout-num: var(--carbon-soft);
}
/* On the kraft-gold type panel the leader would vanish into its own ground. */
[data-ground="kraft-gold"] .callout {
--callout-lead: var(--kraft-mid);
--callout-num: var(--stencil);
}