/* Calibrated — components (pure CSS)
   Quiet panels on a darker desk: cards, ruled sections, key/value sheets,
   counted keys, bracketed controls, tables. Hairlines, not frames. The lamp
   (--live) marks the one live thing. Needs calibrated.css (tokens).
   SVG instruments (meter, position, progress, diff, durations, ruler) live in
   calibrated-components.js. */

/* ── read by screen readers, not drawn: live announcements and words a mark stands for */
.cal-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ════ sheet (optional) ════ */

/* ── sheet · an optional drawing-sheet frame with zone labels, for pages that
   want the engineering-drawing look. Zone labels come from Calibrated.sheets()
   and data-zones="8x6" (columns x rows). Most pages don't need it. */
.cal-sheet {
  position: relative;
  background: var(--gutter);
  border: var(--line-thin) solid var(--edge-strong);
  outline: var(--line-thin) solid var(--edge);
  outline-offset: 6px;
  margin: 26px 9px 34px;
  padding: clamp(16px, 2.5vw, 32px);
}
.cal-sheet > .zones { position: absolute; pointer-events: none; display: flex; font: 10px var(--font-legend); color: var(--faint); }
.cal-sheet > .zones span { flex: 1; display: grid; place-items: center; }
.cal-sheet > .zones.top { left: 0; right: 0; top: -21px; height: 14px; }
.cal-sheet > .zones.bottom { left: 0; right: 0; bottom: -21px; height: 14px; }
.cal-sheet > .zones.left { top: 0; bottom: 0; left: -22px; width: 14px; flex-direction: column; }
.cal-sheet > .zones.right { top: 0; bottom: 0; right: -22px; width: 14px; flex-direction: column; }
.cal-sheet > .zones.top span + span, .cal-sheet > .zones.bottom span + span { border-left: var(--line-thin) solid var(--edge); }
.cal-sheet > .zones.left span + span, .cal-sheet > .zones.right span + span { border-top: var(--line-thin) solid var(--edge); }

/* ── title block · ruled cells, a small legend over each value. --tb-cols (default 4) applies
   above 700px; narrower it is always 2, even when --tb-cols is set inline. */
.cal-titleblock {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  border-top: var(--line-thin) solid var(--edge); border-left: var(--line-thin) solid var(--edge);
  background: var(--panel);
  font-size: var(--fs-small);
}
.cal-titleblock > div { padding: 5px 10px 6px; border-right: var(--line-thin) solid var(--edge); border-bottom: var(--line-thin) solid var(--edge); min-width: 0; }
.cal-titleblock dt { font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--key); }
.cal-titleblock dd { font-family: var(--font-legend); font-variant-numeric: tabular-nums; color: var(--fg); overflow-wrap: anywhere; }
.cal-titleblock .name { grid-column: 1 / -1; }
.cal-titleblock .name dd { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; text-transform: var(--display-case); letter-spacing: var(--track-title); line-height: 1.25; white-space: normal; color: var(--title); }
.cal-titleblock .wide { grid-column: span 2; }
@media (min-width: 701px) { .cal-titleblock { grid-template-columns: repeat(var(--tb-cols, 4), minmax(0, auto)); } }

/* ── revision table and the revision triangle that points at a change */
.cal-revs { border-collapse: collapse; font-size: var(--fs-small); background: var(--panel); }
.cal-revs th, .cal-revs td { border-bottom: var(--line-thin) solid var(--edge); padding: 6px 12px; text-align: left; vertical-align: top; }
.cal-revs th { font: 11px var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted); font-weight: 400; border-bottom-color: var(--edge-strong); }
.cal-revs td:first-child { text-align: center; }
.cal-revs td:last-child { white-space: nowrap; }
.cal-revs, .cal-titleblock { align-self: start; }
.cal-rev {               /* <span class="cal-rev" data-rev="B"></span> */
  display: inline-block; position: relative; vertical-align: -3px;
  width: 22px; height: 19px;
  background: var(--fault);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cal-rev::before { content: ""; position: absolute; inset: 2px 1.8px 1.2px; background: var(--panel); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cal-rev::after { content: attr(data-rev); position: absolute; left: 0; right: 0; bottom: 2.5px; text-align: center; font: 500 10px/1 var(--font-legend); color: var(--fault); }

/* ── stamp · a markup stamp across an item that was dropped or replaced */
.cal-stamp {
  display: inline-block;
  font: 500 11px/1 var(--font-legend);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fault);
  border: var(--line-thin) solid var(--fault);
  padding: 5px 8px 4px;
}
/* an approval or a live stamp takes its meaning's ink: red stays for dropped, superseded, rework */
.cal-stamp[data-ink="ok"] { color: var(--ok); border-color: var(--ok); }
.cal-stamp[data-ink="live"] { color: var(--live); border-color: var(--live); }

/* ════ page frame ════ */

/* ── masthead · mark, wordmark, what this is, version */
.cal-caption { color: var(--muted); text-transform: uppercase; }
.cal-mast { display: flex; align-items: center; gap: 14px; padding: 22px 0 18px; border-bottom: var(--line-thin) solid var(--edge); flex-wrap: wrap; }
.cal-mast .sp { flex: 1; }

/* ── intro · a typewriter-caps headline beside a short lede */
.cal-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(24px, 4vw, 48px); padding: clamp(28px, 3.5vw, 44px) 0 clamp(20px, 3vw, 36px); align-items: end; }
.cal-intro h1 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h1); line-height: 1.12; letter-spacing: .02em; text-transform: var(--display-case); color: var(--title); text-wrap: balance; }
.cal-intro p { max-width: 62ch; color: var(--legend); }
.cal-intro p + p { margin-top: 12px; }

/* ── section · a legend line between two rules: ── 2 · NAME  note ──────── sheet 2/3 */
.cal-sec { margin: clamp(36px, 4vw, 52px) 0 0; }
[data-space="open"] .cal-sec { margin-top: clamp(44px, 5vw, 68px); }
.cal-sec-h {
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
  margin-bottom: 18px;
  font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted);
}
.cal-sec-h::before { content: ""; width: 18px; border-top: var(--line-thin) solid var(--edge-strong); }
.cal-sec-h::after { content: ""; flex: 1; min-width: 24px; border-top: var(--line-thin) solid var(--edge-strong); order: 1; }
.cal-sec-h b { font: 500 var(--fs-h2)/1.2 var(--font-display); color: var(--title); text-transform: none; letter-spacing: .01em; }
.cal-sec-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-control); text-transform: none; letter-spacing: .01em; }
.cal-sec-h > span ~ span:last-child { font-size: var(--fs-legend); text-transform: uppercase; letter-spacing: var(--track-legend); }
.cal-sec-h > span ~ span:last-child { order: 2; flex: none; color: var(--key); }
/* ── block · one group inside a panel (the instruments, a figure, a table, the notes).
   Blocks stacked in a panel are ruled apart; side by side in .cal-blocks they get a rule between.
   <div class="cal-block"><div class="cal-block-h">budget<span>30 days</span></div> … </div> */
.cal-block-h { display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px;
  font: 500 var(--fs-control)/1.3 var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--fg); }
.cal-block-h > span { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: .01em; }
.cal-block-h > span:last-child:not(:first-child) { margin-left: auto; }
.cal-block + .cal-block { border-top: var(--line-thin) solid var(--edge); margin-top: 22px; padding-top: 20px; }
.cal-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 22px 0; }
.cal-blocks > .cal-block { min-width: 0; padding-right: 24px; }
.cal-blocks > .cal-block + .cal-block { border-top: 0; margin-top: 0; padding-top: 0; border-left: var(--line-thin) solid var(--edge); padding-left: 24px; }
.cal-blocks + .cal-block, .cal-block + .cal-blocks { border-top: var(--line-thin) solid var(--edge); margin-top: 22px; padding-top: 20px; }
.cal-lede { max-width: 72ch; color: var(--muted); margin: -4px 0 20px; }

/* ── surfaces */
.cal-panel { background: var(--panel); }
.cal-well { background: var(--well); }
.cal-raised { background: var(--raised); border: var(--line-thin) solid var(--edge-strong); }
.cal-framed { background: var(--panel); }
.cal-stack { display: grid; gap: var(--gap); }

/* ── legend text: small mono label for names, tags and numbers */
.cal-legend { font-family: var(--font-legend); font-size: var(--fs-legend); letter-spacing: var(--track-legend); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--muted); }

/* ── group label · a legend with a thin rule running to the edge */
.cal-gl { font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; }
.cal-gl:first-child { margin-top: 0; }
.cal-gl::after { content: ""; flex: 1; border-top: var(--line-thin) solid var(--edge); }

/* ════ separators and containers ════
   Drafting line types, each with one meaning: solid = next topic, dashed = an aside or what's
   proposed, centre line = two halves of one thing, break = something left out. */

/* ── rule · <hr class="cal-rule"> bare, or a div with a label: ──── or ──── */
.cal-rule {
  --rule: var(--edge);
  --rule-paint: linear-gradient(var(--rule) 0 0);
  display: block; height: var(--line-thin); border: 0; margin: var(--rule-space, 20px) 0;
  background: var(--rule-paint); color: var(--key);
}
.cal-rule[data-weight="strong"], .cal-rule[data-line] { --rule: var(--faint); }   /* a line type carries meaning: ≥3:1 */
.cal-rule[data-line="dashed"] { --rule-paint: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 7px); }
.cal-rule[data-line="centre"] { --rule-paint: repeating-linear-gradient(90deg, var(--rule) 0 10px, transparent 10px 13px, var(--rule) 13px 15px, transparent 15px 18px); }
.cal-rule[data-space="tight"] { --rule-space: 10px; }
.cal-rule[data-space="loose"] { --rule-space: 36px; }
/* labelled: the label sits in the line; data-align="start" sets it near the left like a section head */
.cal-rule:not(:empty) {
  height: auto; background: none; display: flex; align-items: center; gap: 10px;
  font: var(--fs-legend)/1.3 var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase;
}
/* a long label wraps between its lines instead of pushing them out */
.cal-rule:not(:empty) > * { min-width: 0; text-wrap: balance; }
.cal-rule:not(:empty)::before, .cal-rule:not(:empty)::after { content: ""; flex: 1; min-width: 18px; height: var(--line-thin); background: var(--rule-paint); }
.cal-rule[data-align="start"]::before { flex: 0 0 18px; }
.cal-rule:not(:empty) > span { color: var(--muted); text-transform: none; letter-spacing: .01em; }
/* break · a jag in the line where content was left out (log lines skipped, pages omitted) */
.cal-rule[data-line="break"] {
  height: 12px; background: var(--rule);
  -webkit-mask: var(--break-jag) center / 18px 12px no-repeat, linear-gradient(#000 0 0) left center / calc(50% - 9px) 1px no-repeat, linear-gradient(#000 0 0) right center / calc(50% - 9px) 1px no-repeat;
  mask: var(--break-jag) center / 18px 12px no-repeat, linear-gradient(#000 0 0) left center / calc(50% - 9px) 1px no-repeat, linear-gradient(#000 0 0) right center / calc(50% - 9px) 1px no-repeat;
  --break-jag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6H5.5L7.5 1.5L10.5 10.5L12.5 6H18' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}
/* ink · live marks the one "new since" line in a feed; fault marks a cut-off (over the limit below here) */
.cal-rule[data-ink="live"] { --rule: var(--live); color: var(--live); }
.cal-rule[data-ink="fault"] { --rule: color-mix(in srgb, var(--fault) 70%, var(--edge-strong)); color: var(--fault); }
.cal-rule[data-ink="ok"] { --rule: color-mix(in srgb, var(--ok) 70%, var(--edge-strong)); color: var(--ok); }

/* ── vertical rule · between items in a toolbar or a row: <span class="cal-vr" aria-hidden="true"></span> */
.cal-vr { display: inline-block; align-self: stretch; width: var(--line-thin); min-height: 1em; margin: 0 12px; background: var(--edge-strong); vertical-align: -.15em; flex: none; }

/* ── meta · a run of facts split by short hairline ticks, wrapping cleanly (no tick starts a line)
   <ul class="cal-meta"><li>v2.14.0</li><li>3 regions</li><li>2026-10-31</li></ul> */
.cal-meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; row-gap: 2px; margin: 0 0 0 -11px; clip-path: inset(-4px -4px -4px 11px); font-size: var(--fs-small); color: var(--muted); }
.cal-meta > li { position: relative; padding: 0 10px 0 11px; }
.cal-meta > li::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: var(--line-thin); background: var(--edge-strong); }
.cal-meta > li:last-child { padding-right: 0; }
.cal-meta .cal-legend, .cal-meta.cal-legend { font-size: var(--fs-legend); }

/* ── zone · a bounded group with its name set into the top edge, like a region boxed on a drawing.
   No fill, so it works on a panel, a well or the desk. data-line="dashed" = optional, proposed or
   not yet decided; data-ink live / ok / fault recolours edge and name.
   <section class="cal-zone"><div class="cal-zone-h">billing<span>owner only</span><span class="end">2 settings</span></div> … </section> */
.cal-zone { --zone: var(--edge-strong); --zone-line: solid; --zone-pad: 16px; display: flow-root; position: relative; min-width: 0; border: var(--line-thin) var(--zone-line) var(--zone); padding: 14px var(--zone-pad) 16px; }
.cal-zone:has(> .cal-zone-h:first-child) { border-top: 0; margin-top: 7px; padding-top: 0; }
.cal-zone-h {
  display: flex; align-items: center; gap: 8px; min-height: 14px; text-wrap: balance;
  margin: -7px calc(-1 * var(--zone-pad) - var(--line-thin)) 14px;
  font: 500 var(--fs-legend)/1 var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--fg);
}
.cal-zone-h::before { content: ""; flex: 0 0 11px; border-top: var(--line-thin) var(--zone-line) var(--zone); }
.cal-zone-h::after { content: ""; flex: 1; min-width: 12px; border-top: var(--line-thin) var(--zone-line) var(--zone); order: 1; }
.cal-zone-h > span { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: .01em; font-size: var(--fs-control); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-zone-h > .end { order: 2; flex: none; display: flex; align-items: center; gap: 8px; color: var(--key); font-size: var(--fs-legend); text-transform: uppercase; letter-spacing: var(--track-legend); overflow: visible; }
.cal-zone-h > .end::after { content: ""; width: 11px; border-top: var(--line-thin) var(--zone-line) var(--zone); }
.cal-zone[data-line="dashed"] { --zone-line: dashed; }
.cal-zone[data-ink="live"] { --zone: var(--live); }
.cal-zone[data-ink="ok"] { --zone: color-mix(in srgb, var(--ok) 60%, var(--edge-strong)); }
.cal-zone[data-ink="fault"] { --zone: color-mix(in srgb, var(--fault) 60%, var(--edge-strong)); }
.cal-zone[data-ink="live"] > .cal-zone-h { color: var(--live); }
.cal-zone[data-ink="ok"] > .cal-zone-h { color: var(--ok); }
.cal-zone[data-ink="fault"] > .cal-zone-h { color: var(--fault); }
.cal-zone > :last-child { margin-bottom: 0; }
.cal-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px var(--gap); align-items: start; }

/* ── bracket · binds a few lines into one idea without boxing them: a hairline [ with a tick
   at its middle, and an optional name above. Lighter than a zone; for runs of text and lists.
   <div class="cal-bracket"><div class="cal-bracket-h">before you deploy</div> … </div> */
.cal-bracket { --bracket: var(--edge-strong); position: relative; padding-left: 20px; min-width: 0; }
.cal-bracket::before { content: ""; position: absolute; left: 4px; top: 3px; bottom: 3px; width: 6px; border: var(--line-thin) solid var(--bracket); border-right: 0; }
.cal-bracket::after { content: ""; position: absolute; left: 0; top: 50%; width: 4px; border-top: var(--line-thin) solid var(--bracket); }
.cal-bracket-h { font: 500 var(--fs-legend)/1.3 var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--fg); margin-bottom: 6px; }
.cal-bracket-h > span { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: .01em; margin-left: 8px; }
.cal-bracket[data-ink="live"] { --bracket: var(--live); }
.cal-bracket[data-ink="ok"] { --bracket: color-mix(in srgb, var(--ok) 60%, var(--edge-strong)); }
.cal-bracket[data-ink="fault"] { --bracket: color-mix(in srgb, var(--fault) 60%, var(--edge-strong)); }
.cal-bracket + .cal-bracket { margin-top: 18px; }

/* ════ cards ════ */

/* ── card · one drawing per item: an info column beside the stage. The .id
   line (number badge, where it lives, status) sits at the top of the info column. */
.cal-card { background: var(--panel); display: grid; grid-template-columns: 290px minmax(0, 1fr); min-height: 220px; position: relative; }
.cal-card > .info { padding: 16px 18px 18px; border-right: var(--line-thin) solid var(--edge); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cal-card > .stage, .cal-stage { padding: 14px 18px 18px; display: flex; flex-direction: column; align-items: safe center; justify-content: center; gap: 12px; min-width: 0; overflow-x: auto; }
.cal-card h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-h3); line-height: 1.25; color: var(--title); text-transform: var(--display-case); letter-spacing: var(--track-title); text-wrap: balance; }
.cal-card .why { font-size: 13px; color: var(--fg); max-width: 46ch; }
.cal-card > .info > .cal-kv { margin-top: auto; }
.cal-card .id {
  order: -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted);
}
.cal-card .id .no { color: var(--fg); border: var(--line-thin) solid var(--faint); padding: 0 4px; line-height: 14px; }
/* the number takes the lamp only on the card in hand (focused, or marked aria-current) */
.cal-card:is(:focus-within, [aria-current]:not([aria-current="false"])) .id .no { color: var(--live); border-color: color-mix(in srgb, var(--live) 50%, var(--edge-strong)); }
.cal-card .id > span:not(.no, .end) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-card .id .end { margin-left: auto; white-space: nowrap; color: var(--muted); }
.cal-card .id .end.okc, .cal-card .id .end[data-ink="ok"] { color: var(--ok); }
.cal-card[data-state="ok"] .id .no { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--edge-strong)); }
/* dropped · the card is taped off: a band of oblique red stripes laid in the top padding (the
   card keeps its height), the stamp hung from it, a red outline round the card, the drawing faded */
.cal-card[data-state="dropped"] { outline: var(--line-thin) solid var(--fault); outline-offset: -1px; }
.cal-card[data-state="dropped"] > :not(.cal-sign) { opacity: .58; }
.cal-card[data-state="dropped"]::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 12px; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--fault) 0 7px, transparent 7px 14px);
}
.cal-card[data-state="dropped"]::after {
  content: "superseded";
  position: absolute; top: 0; right: 28px; z-index: 1; height: 24px; display: flex; align-items: center;
  font: 700 11px/1 var(--font-legend); letter-spacing: .2em; text-transform: uppercase;
  color: var(--panel); background: var(--fault); padding: 2px 12px 0;
  box-shadow: 0 0 0 4px var(--panel);
}
.cal-card > .cal-sign { grid-column: 1 / -1; }

/* ── key/value sheet · faint keys, muted values, a hairline above */
.cal-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; border-top: var(--line-thin) solid var(--edge); padding-top: 10px; }
.cal-kv dt { font: var(--fs-legend) var(--font-legend); color: var(--key); letter-spacing: var(--track-legend); text-transform: uppercase; padding-top: 2px; }
.cal-kv dd { color: var(--muted); }
.cal-kv dd code { color: var(--fg); }
.cal-stack > .cal-kv, .cal-panel > .cal-kv { background: var(--panel); border: 0; padding: 12px 16px; }

/* ── compare · two views side by side (today / proposed, before / after) */
.cal-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }
.cal-compare > div { padding: 12px 18px 18px; display: flex; flex-direction: column; min-width: 0; }
.cal-compare > div + div { border-left: var(--line-thin) dashed var(--edge); }
.cal-compare .stage { flex: 1; display: flex; flex-direction: column; align-items: safe center; justify-content: center; gap: 12px; min-height: 150px; overflow-x: auto; }
/* ── scroll cue · a drawing wider than its box scrolls sideways; a dashed line at a cut edge says it
   goes on, and is covered once you reach that end. --under is the surface colour (panel by default). */
.cal-card > .stage, .cal-stage, .cal-compare .stage, .cal-figure, [data-cal-scroll],
:is(cal-meter, cal-position, cal-progress, cal-diff, cal-durations, cal-ruler)[data-scroll] {
  background:
    linear-gradient(var(--under, var(--panel)), var(--under, var(--panel))) left / 6px 100% no-repeat local,
    linear-gradient(var(--under, var(--panel)), var(--under, var(--panel))) right / 6px 100% no-repeat local,
    repeating-linear-gradient(var(--faint) 0 3px, transparent 3px 6px) left / 1px 100% no-repeat scroll,
    repeating-linear-gradient(var(--faint) 0 3px, transparent 3px 6px) right / 1px 100% no-repeat scroll,
    var(--under, var(--panel));
}
.cal-well { --under: var(--well); }
.cal-raised { --under: var(--raised); }
.cal-tag { color: var(--key); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; }
.cal-tag.on { color: var(--legend); }
.cal-tag.on::before { content: ""; width: 7px; height: 7px; background: var(--live); clip-path: var(--star); }

/* ── note · the text a figure replaces, as the UI prints it today */
.cal-note { background: var(--raised); border: var(--line-thin) solid var(--edge-strong); padding: 10px 12px; font-size: 12px; line-height: 1.6; width: 100%; max-width: 300px; }
.cal-note .r { display: flex; gap: 10px; }
.cal-note .r .k { color: var(--key); font: var(--fs-legend) var(--font-legend); min-width: 76px; padding-top: 2px; }
.cal-note pre, .cal-pre { font: 11.5px/1.6 var(--font-legend); background: var(--well); padding: 6px 8px; white-space: pre-wrap; word-break: break-word; }

/* ════ controls and labels ════ */

/* ── count · a boxed, zero-padded number with its noun beside it */
.cal-count { display: inline-flex; align-items: center; gap: 6px; font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); font-variant-numeric: tabular-nums; color: var(--muted); text-transform: uppercase; }
.cal-count > b, .cal-cnt { font-weight: 400; display: inline-block; border: var(--line-thin) solid var(--edge-strong); padding: 0 4px; line-height: 14px; color: var(--fg); letter-spacing: 0; }
.cal-count[data-ink="live"] > b { color: var(--live); border-color: color-mix(in srgb, var(--live) 60%, var(--edge-strong)); }
.cal-count[data-ink="ok"] > b { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, var(--edge-strong)); }
.cal-count[data-ink="fault"] > b { color: var(--fault); border-color: color-mix(in srgb, var(--fault) 60%, var(--edge-strong)); }
[data-density="compact"] .cal-count > span { display: none; }

/* ── tabs · keys with a counted box; the open one is underlined in ink */
.cal-tabs { display: flex; align-items: end; gap: 16px; border-bottom: var(--line-thin) solid var(--edge); font: var(--fs-control) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted); overflow-x: auto; scrollbar-width: thin; }
.cal-tabs > * { flex: none; white-space: nowrap; min-height: 24px; padding: 4px 1px 6px; margin-bottom: -1px; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.cal-tabs > *:not(:disabled):hover { color: var(--fg); }
.cal-tabs > :focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: -1px; }
.cal-tabs > :disabled { color: var(--faint); cursor: not-allowed; }
.cal-tabs > .on, .cal-tabs > [aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -1px var(--fg); }
.cal-tabs .cal-cnt { margin-left: 5px; }
.cal-tabs > .on .cal-cnt, .cal-tabs > [aria-selected="true"] .cal-cnt { border-color: var(--fg); }

/* ── button · three tiers, so the main action always leads:
   primary  filled with ink, one per view          <button class="cal-btn primary">
   default  a hairline box: every other action      <button class="cal-btn">
   inline   a bracketed word for small actions in running text, toasts and fields: [copy]
   quiet    an underlined word for cancel and back
   Pressed toggles take their meaning's ink in text and box. */
.cal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: var(--fs-control)/1.2 var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase;
  background: none; color: var(--fg);
  border: var(--line-thin) solid var(--edge-strong); padding: 6px 12px; cursor: pointer;
  transition: color .12s ease-out, border-color .12s ease-out, background-color .12s ease-out;
}
.cal-btn:not(:disabled, [aria-disabled="true"]):hover { border-color: var(--fg); }
.cal-btn:not(:disabled, [aria-disabled="true"]):active { background: var(--current); }
.cal-btn:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
/* disabled, or busy (aria-disabled keeps it focusable while it works) */
.cal-btn:is(:disabled, [aria-disabled="true"]) { color: var(--faint); border-color: var(--edge); cursor: not-allowed; }
/* primary · filled with ink (never with the lamp) */
.cal-btn.primary { background: var(--fg); color: var(--panel); border-color: var(--fg); }
.cal-btn.primary:not(:disabled, [aria-disabled="true"]):hover { background: var(--title); border-color: var(--title); }
.cal-btn.primary:not(:disabled, [aria-disabled="true"]):active { background: var(--muted); border-color: var(--muted); }
.cal-btn.primary:is(:disabled, [aria-disabled="true"]) { background: none; border-style: dashed; border-color: var(--faint); color: var(--muted); }
/* pressed toggles: the box and the word take the meaning's ink */
.cal-btn[aria-pressed="false"] { color: var(--muted); }
.cal-btn[aria-pressed="false"]:not(:disabled, [aria-disabled="true"]):hover { color: var(--fg); }
.cal-btn[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); }
.cal-btn[data-ink="ok"][aria-pressed="true"] { color: var(--ok); border-color: var(--ok); }
.cal-btn[data-ink="fault"][aria-pressed="true"] { color: var(--fault); border-color: var(--fault); }
.cal-btn[data-ink="fault"][aria-pressed="true"]::before { content: ""; width: 12px; height: 9px; flex: none; margin-left: -2px; background: repeating-linear-gradient(-45deg, var(--fault) 0 2px, transparent 2px 4.5px); border-block: var(--line-thin) solid var(--fault); }
/* inline · a bracketed word; automatic inside toasts, fields and code blocks */
:is(.cal-btn.inline, .cal-toast .cal-btn, .cal-affixed .cal-btn, .cal-code > .cal-btn) { border: 0; padding: 5px 3px; gap: 0; color: var(--muted); background: none; }
/* the brackets are drawn, not read: the name stays "copy" */
:is(.cal-btn.inline, .cal-toast .cal-btn, .cal-affixed .cal-btn, .cal-code > .cal-btn)::before { content: "[" / ""; }
:is(.cal-btn.inline, .cal-toast .cal-btn, .cal-affixed .cal-btn, .cal-code > .cal-btn)::after { content: "]" / ""; }
:is(.cal-btn.inline, .cal-toast .cal-btn, .cal-affixed .cal-btn, .cal-code > .cal-btn):not(:disabled, [aria-disabled="true"]):hover { color: var(--fg); }
/* quiet · an underlined word */
.cal-btn.quiet { border: 0; padding: 6px 3px; color: var(--muted); background: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.cal-btn.quiet:not(:disabled, [aria-disabled="true"]):hover { color: var(--fg); text-decoration-color: var(--fg); }
.cal-btn.quiet[aria-current="page"] { color: var(--fg); text-decoration-color: var(--fg); }

/* ── sign-off row at the foot of a card */
.cal-sign { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 8px 15px; border-top: var(--line-thin) solid var(--edge); }

/* ── tally · approval strip that collects decisions (add .sticky to pin it) */
.cal-tally {
  position: static; margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 15px 8px 18px;
  background: var(--panel); border-top: var(--line-thin) solid var(--edge-strong);
  font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--legend);
}
.cal-tally > * { white-space: nowrap; }
/* the status message wraps in plain case, so a long one stays readable on a phone */
.cal-tally > [role="status"] { white-space: normal; text-transform: none; letter-spacing: .01em; min-width: 0; }
.cal-tally > :last-child { margin-left: auto; }
textarea.cal-tally-text { width: 100%; margin-top: 8px; min-height: 0; background: var(--well); border: var(--line-thin) solid var(--edge-strong); font: 12px/1.6 var(--font-legend); }
textarea.cal-tally-text[hidden] { display: none; }
.cal-tally .sp { flex: 1; }
.cal-tally.sticky { position: sticky; bottom: 0; z-index: 2; }

/* ── table · a parts list: legend heads, hairline rows */
.cal-table { width: 100%; border-collapse: collapse; background: var(--panel); font-size: 13px; }
.cal-table th { font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted); text-align: left; font-weight: 400; padding: 10px 14px; border-bottom: var(--line-thin) solid var(--edge-strong); }
.cal-table td { padding: 9px 14px; border-bottom: var(--line-thin) solid var(--edge); vertical-align: middle; }
.cal-table tr:last-child td { border-bottom: 0; }
.cal-table td:first-child { font: var(--fs-legend) var(--font-legend); color: var(--muted); width: 1%; white-space: nowrap; }
.cal-table tbody tr:hover { background: var(--hover); }
.cal-table .num { text-align: right; font-family: var(--font-legend); font-variant-numeric: tabular-nums; }
.cal-table .st { font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--key); white-space: nowrap; }
.cal-table .st[data-ink="ok"] { color: var(--ok); }
.cal-table .st[data-ink="ok"]::before { content: "✓ "; }
.cal-table .effort .cal-dot { margin-right: 3px; }
.cal-table .st[data-ink="live"] { color: var(--live); }
.cal-table .st[data-ink="live"]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--live); clip-path: var(--star); vertical-align: -1px; }
.cal-table .st[data-ink="fault"] { color: var(--fault); }
.cal-table .effort { font: var(--fs-legend) var(--font-legend); letter-spacing: .12em; color: var(--fg); white-space: nowrap; }

/* ── tiers · notes panels */
.cal-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.cal-tiers > div { background: var(--panel); padding: 14px 18px 16px; }
.cal-tiers .tt { color: var(--legend); margin-bottom: 6px; font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; }
.cal-tiers p { color: var(--muted); font-size: 13px; max-width: 70ch; }

/* ── specimens · a ruled grid of small figures with a name and a line */
.cal-specimens { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--line-thin); background: var(--edge); border: var(--line-thin) solid var(--edge); }
.cal-spec { background: var(--panel); padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; }
.cal-spec svg { width: 100%; height: auto; }
.cal-spec h4 { font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--fg); font-weight: 400; }
.cal-spec p { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ── figure · a drawing with its caption under a hairline */
/* ── grid · figures or panels side by side, wrapping to one column when narrow */
.cal-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cal-grid-min, 420px)), 1fr)); }

/* ── paper frame · no desk: panels sit flush on the paper and a rule marks each one */
[data-frame="paper"] :is(.cal-card, .cal-figure, .cal-panel) { border-top: var(--line-thin) solid var(--edge-strong); }

.cal-figure { background: var(--panel); display: grid; grid-template-rows: 1fr auto; min-width: 0; overflow-x: auto; }
.cal-figure > svg, .cal-figure > .stage { margin: 16px 18px 14px; max-width: calc(100% - 36px); overflow: visible; justify-self: center; }
.cal-figure > figcaption { border-top: var(--line-thin) solid var(--edge); padding: 7px 14px; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.cal-figure > figcaption b { font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--fg); font-weight: 400; white-space: nowrap; }

/* ── rows · a list pane with an optional selected row. The chosen row boxes its .v label
   (or, with no .v, is boxed whole, inset); see "the chosen value" below. */
.cal-rows { background: var(--panel); border: var(--line-thin) solid var(--edge); font-size: 13px; line-height: 1.6; }
.cal-rows > * { padding: 8px 14px 9px; border-bottom: var(--line-thin) solid var(--edge); }
.cal-rows > *:last-child { border-bottom: 0; }
.cal-rows > :is(.sel, [aria-selected="true"], [aria-current]:not([aria-current="false"])):not(:has(.v)) { outline: var(--line-thin) solid var(--fg); outline-offset: -5px; }
.cal-rows .meta { color: var(--muted); }

/* ── form controls */
.cal-field { display: grid; gap: 4px; }
.cal-field > label { font: var(--fs-control) var(--font-legend); letter-spacing: .01em; color: var(--legend); }
/* sentence case even when the label is written in lower case */
.cal-field > label::first-letter, .cal-field > .lbl::first-letter { text-transform: uppercase; }
.cal-input { font: 14px var(--font-legend); font-variant-numeric: tabular-nums; color: var(--fg); background: transparent; border: 0; border-bottom: var(--line-thin) solid var(--faint); padding: 5px 2px 4px; min-width: 0; border-radius: 0; }
.cal-input:hover:not(:disabled):not(:focus) { border-bottom-color: var(--fg); }
.cal-input:focus { outline: none; border-bottom-color: var(--live); box-shadow: 0 1px 0 var(--live); }
.cal-input[aria-invalid="true"]:focus { box-shadow: 0 1px 0 var(--fault); }
/* invalid and focused: the line stays red, focus shows as the lamp outline */
:is(.cal-input, .cal-select)[aria-invalid="true"]:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 3px; }
.cal-input:disabled { color: var(--muted); border-bottom-style: dashed; border-bottom-color: var(--edge-strong); cursor: not-allowed; }
/* read-only: a dotted line, no lamp on focus (it can be selected, not changed) */
.cal-input:read-only:not(:disabled) { border-bottom-style: dotted; }
.cal-input:read-only:not(:disabled):focus { border-bottom-color: var(--fg); box-shadow: none; }
.cal-input::placeholder { color: var(--key); }
.cal-input[aria-invalid="true"], .cal-input[aria-invalid="true"]:hover { border-bottom-color: var(--fault); }
.cal-field .hint { font-size: 12px; color: var(--muted); }
.cal-field .err { font-size: 12px; color: var(--fault); }
.cal-check { display: inline-flex; gap: 9px; align-items: flex-start; min-height: 24px; padding-block: 1.6px; cursor: pointer; font-size: 13px; }
/* the box keeps its size beside a long label and sits on the first line */
.cal-check input { appearance: none; flex: none; width: 12px; height: 12px; margin: calc((1lh - 12px) / 2) 0 0; border: var(--line-thin) solid var(--faint); background: transparent; cursor: pointer; display: grid; place-items: center; }
.cal-check:hover input, .cal-check input:is(:checked, :indeterminate) { border-color: var(--fg); }
.cal-check input:indeterminate::after { content: ""; width: 6px; height: 1px; background: var(--fg); }
/* required: a small word after the label (the field is already announced as required) */
.cal-field:has(:required) > label::after { content: "required" / ""; margin-left: 8px; font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--key); }
.cal-check input:disabled, .cal-check:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.cal-check input:checked::after { content: ""; width: 6px; height: 6px; background: var(--fg); }
.cal-check input:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }

/* ════ more controls ════ */

/* shared legend type for the controls below */
.cal-kbd, .cal-affix, .cal-badge, .cal-crumbs, .cal-detent label, .cal-switch .o, .cal-menu .it, .cal-steps li, .cal-details > summary, .cal-drop .lead, .cal-chips .chip, .cal-toast, .cal-empty .ttl, .cal-pager, .cal-range output, .cal-range .nums {
  font-family: var(--font-legend); font-size: var(--fs-legend); letter-spacing: var(--track-legend); text-transform: uppercase; font-variant-numeric: tabular-nums;
}

/* ── kbd · a key cap as a small hairline box */
.cal-kbd { display: inline-block; color: var(--muted); border: var(--line-thin) solid var(--edge-strong); padding: 0 4px; line-height: 14px; min-width: 16px; text-align: center; font-size: var(--fs-legend); }

/* ── select · a write-in line ending in the ▼ marker */
.cal-select {
  appearance: none; border-radius: 0; min-width: 200px; cursor: pointer;
  font: 14px var(--font-legend); color: var(--fg); padding: 5px 24px 4px 2px;
  border: 0; border-bottom: var(--line-thin) solid var(--faint);
  background: transparent no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size: 5px 5px;
}
.cal-select:hover:not(:focus, :disabled) { border-bottom-color: var(--fg); }
.cal-select:focus { outline: none; border-bottom-color: var(--live); box-shadow: 0 1px 0 var(--live); }
.cal-select:disabled { color: var(--muted); border-bottom-style: dashed; border-bottom-color: var(--edge-strong); cursor: not-allowed; }
.cal-select[aria-invalid="true"], .cal-select[aria-invalid="true"]:hover { border-bottom-color: var(--fault); }
.cal-select[aria-invalid="true"]:focus { box-shadow: 0 1px 0 var(--fault); }
.cal-select option { background: var(--raised); color: var(--fg); }
@supports (appearance: base-select) {
  .cal-select, .cal-select::picker(select) { appearance: base-select; }
  .cal-select { background-image: none; display: flex; justify-content: space-between; align-items: center; padding-right: 4px; }
  .cal-select::picker-icon { content: "▼"; font-size: 8px; color: var(--muted); transition: none; }
  .cal-select:open::picker-icon { rotate: 0deg; color: var(--live); }
  .cal-select::picker(select) { border: var(--line-thin) solid var(--edge-strong); background: var(--raised); padding: 0; margin-top: 4px; border-radius: 0; box-shadow: none; }
  .cal-select option { font: 13px var(--font-legend); padding: 6px 12px 6px 14px; border-top: var(--line-thin) solid var(--edge); }
  .cal-select option:first-of-type { border-top: 0; }
  .cal-select option::checkmark { display: none; }
  .cal-select option:hover, .cal-select option:focus-visible { background: none; outline: none; }
}
/* option list · an always-open list of options, or a picker drawn at rest */
.cal-list { border: var(--line-thin) solid var(--edge-strong); background: var(--raised); min-width: 200px; }
.cal-list > div { font: 13px var(--font-legend); padding: 6px 12px 6px 14px; border-top: var(--line-thin) solid var(--edge); display: flex; justify-content: space-between; gap: 12px; }
.cal-list > div:first-child { border-top: 0; }
.cal-list .lg { color: var(--key); }

/* ── menu · a numbered parts list in a popover */
.cal-menu { margin: 0; border: var(--line-thin) solid var(--edge-strong); background: var(--raised); color: var(--fg); padding: 4px 0; min-width: 210px; }
.cal-menu[popover] { position-area: bottom span-right; margin-top: 4px; position-try-fallbacks: flip-block, flip-inline; }
.cal-menu .it { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 5px 12px; color: var(--fg); cursor: pointer; text-align: left; }
.cal-menu .it .n { color: var(--faint); }
.cal-menu .it .cal-kbd { margin-left: auto; }
.cal-menu .it:focus-visible { outline: none; }
.cal-menu .it[data-ink="fault"] { color: var(--fault); }
.cal-menu hr { border: 0; border-top: var(--line-thin) solid var(--edge); margin: 4px 0; }

/* ── radio · a drawing balloon with an ink dot */
.cal-radio { display: inline-flex; gap: 9px; align-items: flex-start; min-height: 24px; padding-block: 1.6px; cursor: pointer; font-size: 13px; }
.cal-radio input { appearance: none; flex: none; width: 13px; height: 13px; border-radius: 50%; border: var(--line-thin) solid var(--muted); margin: calc((1lh - 13px) / 2) 0 0; display: grid; place-items: center; cursor: pointer; }
.cal-radio:hover input, .cal-radio input:checked { border-color: var(--fg); }
.cal-radio input:checked::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); }
.cal-radio input:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
.cal-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.cal-radio .meta { color: var(--muted); font: var(--fs-legend) var(--font-legend); }

/* ── switch · a small pill with a round knob: LABEL (●  )  ·  LABEL (  ●)
   Off, a faint knob rests left in a hairline pill. On, it slides right and
   turns ink. Rounded, like the radio, so it never reads as the
   square checkbox. No lamp: a setting being on is not the live thing.
   OFF/ON words (.o) are optional; .caps sets the label in legend caps. */
.cal-switch {
  --sw-w: 24px; --sw-h: 12px; --sw-knob: 8px; --sw-ease: cubic-bezier(.16, 1, .3, 1);
  display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; font-size: 13px;
}
.cal-switch .txt { margin-right: 2px; }
.cal-switch.caps .txt { font-family: var(--font-legend); font-size: var(--fs-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--key); }
.cal-switch .o { flex: none; color: var(--muted); transition: color .12s ease-out; }   /* a click on OFF / ON sets that state (calibrated-components.js) */
.cal-switch:has(input:not(:checked)) .o.off, .cal-switch:has(input:checked) .o.on { color: var(--title); }
.cal-switch input {
  appearance: none; position: relative; flex: none; box-sizing: border-box;
  width: var(--sw-w); height: var(--sw-h); margin: 0; cursor: pointer;
  border: var(--line-thin) solid var(--muted); border-radius: var(--sw-h); background: transparent;
  transition: border-color .12s ease-out, background-color .12s ease-out;
}
.cal-switch input::after {
  content: ""; position: absolute; top: 50%; left: 1px;
  width: var(--sw-knob); height: var(--sw-knob); border-radius: 50%;
  background: var(--muted); translate: 0 -50%;
  transition: translate .24s var(--sw-ease), background-color .12s ease-out;
}
.cal-switch input:checked { border-color: var(--muted); background: var(--current); }
.cal-switch input:checked::after { translate: calc(var(--sw-w) - var(--sw-knob) - 4px) -50%; background: var(--fg); }
.cal-switch:hover input:not(:disabled) { border-color: var(--fg); }
.cal-switch:hover input:not(:checked):not(:disabled)::after { background: var(--fg); }
.cal-switch input:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
.cal-switch:has(input:disabled) { cursor: not-allowed; opacity: .5; }
.cal-switch input:disabled { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .cal-switch input, .cal-switch input::after { transition: none; }
}
/* ── forced colours · calibrated.css turns the inks into system colours, so a mark drawn with a
   background, gradient or box-shadow only has to opt out of forcing to stay drawn. States the
   system palette would merge (selected, pressed) take Highlight. One block for the whole kit. */
@media (forced-colors: active) {
  /* components */
  .cal-rev, .cal-rev::before, .cal-rev::after,
  .cal-card[data-state="dropped"]::before, .cal-card[data-state="dropped"]::after,
  .cal-tabs > *, .cal-btn.primary, .cal-btn[data-ink="fault"][aria-pressed="true"]::before,
  .cal-rows .v, .cal-list .v, .cal-menu .it .v, .cal-select option .v { forced-color-adjust: none; }
  .cal-tabs > :is(.on, [aria-selected="true"]) { box-shadow: inset 0 -2px Highlight; }
  .cal-btn[aria-pressed="true"] { border-color: Highlight; outline: var(--line-thin) solid Highlight; outline-offset: -3px; }
  .cal-btn:focus-visible, .cal-tabs > :focus-visible { outline-color: Highlight; }
  .cal-btn:is(:disabled, [aria-disabled="true"]) { color: GrayText; border-color: GrayText; }
  /* overlays and feedback */
  .cal-rule, .cal-rule::before, .cal-rule::after, .cal-meta > li::before, .cal-vr,
  [data-tip]::before, .cal-callout[data-ink="fault"] .cal-gl::before, .cal-details .bl,
  .cal-scan, .cal-scan > i, .cal-scan > i::after, .cal-spin > i, .cal-wait > i::before, .cal-wait > i::after,
  .cal-readout > .ld, .cal-readout > .nd { forced-color-adjust: none; }
  /* navigation */
  .cal-pager .pg, .cal-steps li::before, .cal-steps li::after { forced-color-adjust: none; }
  .cal-pager .cur { border-color: Highlight; }
  /* form controls */
  .cal-input, .cal-select, .cal-affixed, .cal-chips, .cal-term,
  .cal-check input, .cal-radio input, .cal-detent, .cal-range { forced-color-adjust: none; }
  .cal-switch input { border-color: CanvasText; }
  .cal-switch input::after { background: CanvasText; }
  .cal-switch input:checked::after { background: Highlight; }
}

/* ── dialog · a raised panel with a ruled head */
.cal-dialog { border: var(--line-thin) solid var(--fg); background: var(--panel); color: var(--fg); padding: 0; width: min(440px, calc(100vw - 32px)); margin: auto; }
.cal-dialog::backdrop { background: color-mix(in srgb, var(--shade) 55%, transparent); }
/* the page under a modal stays put */
html:has(dialog.cal-dialog[open]:modal) { overflow: hidden; scrollbar-gutter: stable; }
.cal-dialog header { display: flex; align-items: center; gap: 10px; padding: 10px 14px 9px 16px; border-bottom: var(--line-thin) solid var(--edge-strong); font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--muted); }
.cal-dialog header b { font-weight: 400; color: var(--fg); }
.cal-dialog header .sp { flex: 1; }
.cal-dialog .bd { padding: 14px 16px; display: grid; gap: 12px; font-size: 13px; }
.cal-dialog .bd .cal-kv { border-top: 0; padding-top: 0; }
.cal-dialog footer { display: flex; justify-content: flex-end; gap: 6px; padding: 5px 12px; border-top: var(--line-thin) solid var(--edge); }
.cal-btn[data-ink="fault"].primary { background: var(--fault); border-color: var(--fault); color: var(--panel); }
.cal-btn[data-ink="fault"].primary:not(:disabled):hover { background: var(--fault); border-color: var(--fault); opacity: .88; }

/* ── tooltip · a leader line to a boxed value */
/* The box is drawn, not read (its words go to aria-describedby, which the JS wires); it can be
   hovered, the leader bridging the gap, and Esc hides it until the pointer or focus leaves. */
[data-tip] { position: relative; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; cursor: help; }
[data-tip]::before, [data-tip]::after { position: absolute; left: 50%; opacity: 0; pointer-events: none; transition: opacity .12s ease-out; z-index: 3; }
[data-tip]::before { content: ""; bottom: 100%; width: 15px; height: 12px; translate: -7px 0; background: linear-gradient(var(--fg), var(--fg)) center / 1px 100% no-repeat; }
[data-tip]::after {
  content: attr(data-tip) / ""; bottom: calc(100% + 12px); translate: -7px 0; width: max-content; max-width: min(36ch, calc(100vw - 32px)); white-space: normal;
  font: var(--fs-legend)/1.4 var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--fg);
  background: var(--raised); border: var(--line-thin) solid var(--fg); padding: 1px 6px;
}
[data-tip]:is(:hover, :focus-visible, .show)::before, [data-tip]:is(:hover, :focus-visible, .show)::after { opacity: 1; pointer-events: auto; }
@media (hover: none) { [data-tip]:focus::before, [data-tip]:focus::after { opacity: 1; pointer-events: auto; } }
[data-tip][data-tip-off]::before, [data-tip][data-tip-off]::after { opacity: 0 !important; pointer-events: none !important; }
[data-tip]:is([data-tip-end], [data-tip-flip])::after { translate: calc(-100% + 8px) 0; }
[data-tip]:focus-visible { outline: none; color: var(--live); text-decoration: underline solid var(--live); }
:has(> [data-tip]:is(:hover, :focus-visible)) > [data-tip].show:not(:hover, :focus-visible)::before,
:has(> [data-tip]:is(:hover, :focus-visible)) > [data-tip].show:not(:hover, :focus-visible)::after { opacity: 0; }

/* ── number + affix · a write-in line with a unit; ↑ ↓ step it (see calibrated-components.js) */
.cal-affixed { display: inline-flex; align-items: center; gap: 6px; border-bottom: var(--line-thin) solid var(--faint); }
.cal-affixed:hover:not(:focus-within) { border-bottom-color: var(--fg); }
.cal-affixed:focus-within { border-bottom-color: var(--live); box-shadow: 0 1px 0 var(--live); }
.cal-affixed .cal-input { border: 0; box-shadow: none; flex: 1; }
.cal-affixed .cal-btn { padding: 4px 1px; }
.cal-affix { color: var(--key); white-space: nowrap; }
.cal-num .cal-input { text-align: right; width: 9ch; }
.cal-num .cal-affix { text-transform: none; letter-spacing: 0; font-size: 12px; }
.cal-field .hint.focus-only { visibility: hidden; }
.cal-field:focus-within .hint.focus-only { visibility: visible; }

/* ── search */
.cal-search { width: 100%; }
.cal-search .cal-input { min-width: 0; }
.cal-search .cal-btn[hidden] { display: none; }
.cal-rows > [hidden] { display: none; }
.cal-rows mark { background: var(--select-bg); color: var(--select-fg); }

/* ── fieldset group */
.cal-group { border: 0; display: grid; gap: 14px; width: 100%; min-width: 0; }
.cal-group > legend { float: left; width: 100%; display: flex; gap: 8px; align-items: center; font: var(--fs-control) var(--font-legend); letter-spacing: .01em; color: var(--legend); }
.cal-group > legend b { font-weight: 400; color: var(--fg); }
.cal-group > legend > span { color: var(--key); }
.cal-group > legend::after { content: ""; flex: 1; min-width: 24px; border-top: var(--line-thin) solid var(--edge); }
.cal-group > legend + * { clear: both; }
.cal-group .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cal-group .opts { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── callout · a drawing's NOTES block */
.cal-callout { position: relative; background: var(--raised); border: var(--line-thin) solid var(--edge-strong); padding: 10px 14px 12px 16px; width: 100%; font-size: 13px; }
.cal-callout ol { list-style: none; counter-reset: n; display: grid; gap: 4px; }
.cal-callout li { counter-increment: n; display: flex; gap: 10px; }
.cal-callout li::before { content: counter(n) "."; font: var(--fs-legend) var(--font-legend); color: var(--key); padding-top: 3px; min-width: 14px; }
.cal-callout[data-ink="fault"] { border-color: color-mix(in srgb, var(--fault) 55%, var(--edge-strong)); }
.cal-callout[data-ink="fault"] .cal-gl::before { content: ""; width: 10px; height: 10px; flex: none; border: var(--line-thin) solid var(--fault); background: repeating-linear-gradient(-45deg, var(--fault) 0 1px, transparent 1px 3.5px); }
.cal-callout[data-ink="fault"] li::before { color: var(--fault); }
.cal-callout[data-ink="fault"] .cal-gl { color: var(--fault); }

/* ── toast · a raised strip that reports and goes */
.cal-toast { display: flex; align-items: center; gap: 10px; background: var(--raised); border: var(--line-thin) solid var(--edge-strong); padding: 3px 6px 3px 12px; color: var(--fg); min-width: 300px; }
.cal-toast .msg { flex: 1; text-transform: none; font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0; }
.cal-toast[data-ink="ok"] .ic { color: var(--ok); }
.cal-toast[data-ink="fault"] { border-color: color-mix(in srgb, var(--fault) 60%, var(--edge-strong)); }
.cal-toast[data-ink="fault"] .ic { color: var(--fault); }
.cal-toasts { position: fixed; right: 16px; bottom: 56px; display: grid; gap: 8px; z-index: 20; }
.cal-toasts .cal-toast { animation: toast-in .2s ease-out; }
@media (max-width: 480px) { .cal-toasts { left: 16px; right: 16px; } .cal-toast { min-width: 0; } }
@keyframes toast-in { from { opacity: 0; translate: 0 6px; } }

/* ── empty state · a dashed blank area with one way forward (no hatch: hatch means closed) */
.cal-empty { width: 100%; min-height: 150px; display: grid; place-items: center; border: var(--line-thin) dashed var(--edge-strong); padding: 18px; }
.cal-empty > div { background: var(--panel); border: var(--line-thin) solid var(--edge-strong); padding: 10px 16px 6px; display: grid; justify-items: center; gap: 2px; text-align: center; }
.cal-empty .ttl { color: var(--fg); }
.cal-empty p { font-size: var(--fs-small); color: var(--muted); }

/* ── breadcrumb · a sheet path */
.cal-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0; color: var(--muted); }
.cal-crumbs li + li::before { content: "/" / ""; color: var(--key); padding: 0 9px; }
/* links keep the base hairline underline: underlined means pressable */
.cal-crumbs a { display: inline-block; padding-block: 5px; }
.cal-crumbs a:hover { color: var(--fg); text-decoration-color: var(--fg); }
.cal-crumbs [aria-current] { color: var(--fg); }

/* ── badge · a boxed status word */
/* a long status wraps inside its box rather than running out of the column */
.cal-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: var(--line-thin) solid var(--edge-strong); padding: 0 6px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
.cal-badge .cal-dot { margin: 0; }
.cal-badge[data-ink="live"] { color: var(--live); border-color: color-mix(in srgb, var(--live) 55%, var(--edge-strong)); }
.cal-badge[data-ink="ok"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--edge-strong)); }
.cal-badge[data-ink="fault"] { color: var(--fault); border-color: color-mix(in srgb, var(--fault) 55%, var(--edge-strong)); }

/* ── file drop */
.cal-drop { position: relative; display: grid; justify-items: center; gap: 4px; width: 100%; padding: 22px 16px; border: var(--line-thin) dashed var(--edge-strong); cursor: pointer; text-align: center; }
.cal-drop:hover, .cal-drop.over { border-color: var(--fg); }
.cal-drop.over { border-style: solid; background: var(--hover); }
.cal-drop:has(input:focus-visible) { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
.cal-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cal-drop .lead { color: var(--fg); }
.cal-drop .lead u { color: var(--muted); text-decoration: none; }
.cal-drop .lead u::before { content: "["; } .cal-drop .lead u::after { content: "]"; }
.cal-drop .hint { font-size: 12px; color: var(--muted); }
.drop-wrap { width: 100%; display: grid; gap: 8px; }

/* ── chips · boxed words on a write-in line */
.cal-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; border-bottom: var(--line-thin) solid var(--faint); padding: 4px 0 5px; cursor: text; }
.cal-chips:focus-within { border-bottom-color: var(--live); box-shadow: 0 1px 0 var(--live); }
.cal-chips .chip { display: inline-block; max-width: 100%; overflow-wrap: anywhere; border: var(--line-thin) solid var(--edge-strong); padding: 0 2px 0 6px; line-height: 16px; color: var(--fg); }
/* × is a 24px target; negative margins keep the chip its drawn size */
.cal-chips .chip button { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; min-width: 24px; min-height: 24px; margin: -4px -2px -4px 0; padding: 0; vertical-align: middle; }
.cal-chips .chip button:hover { color: var(--fault); }
.cal-chips input { flex: 1; min-width: 90px; border: 0; background: transparent; color: var(--fg); font: 13px var(--font-legend); padding: 2px; outline: none; }
.cal-chips input::placeholder { color: var(--key); }

/* ── steps · progress nodes with names */
.cal-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); width: 100%; overflow-x: auto; padding-top: 1px; }
.cal-steps li { position: relative; padding-top: 18px; color: var(--muted); padding-right: 8px; }
.cal-steps li::before { content: ""; position: absolute; top: 1px; left: 0; width: 9px; height: 9px; border: var(--line-thin) solid var(--faint); }
.cal-steps li::after { content: ""; position: absolute; top: 5px; left: 13px; right: 4px; height: 1px; background: var(--faint); }
.cal-steps li:last-child::after { display: none; }
.cal-steps li.done { color: var(--fg); }
.cal-steps li.done::before { content: "" / "done, "; background: var(--fg); border-color: var(--fg); }   /* "done" is read, not drawn */
.cal-steps li.done::after { background: var(--fg); }
/* where you are: an ink star (the lamp is for what is running, not for a wizard step) */
.cal-steps li[aria-current="step"] { color: var(--title); }
.cal-steps li[aria-current="step"]::before { border: 0; width: 11px; height: 11px; top: 0; left: -1px; background: var(--fg); clip-path: var(--star); }
.cal-steps li .s { display: block; color: var(--key); font-size: var(--fs-legend); }

/* ── date · native date and time on a write-in line */
.cal-date { font: 14px var(--font-legend); color-scheme: inherit; min-width: 170px; }
.cal-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; width: 10px; height: 10px; padding: 0; margin-left: 8px;
  background: no-repeat; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 0 60%, 5px 60%; background-size: 5px 5px; }
.cal-date::-webkit-calendar-picker-indicator:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
.cal-date::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.cal-code pre, .cal-kbd { font-variant-ligatures: none; }

.cal-affixed:has([aria-invalid="true"]) { border-bottom-color: var(--fault); }
.cal-affixed:has([aria-invalid="true"]):focus-within { box-shadow: 0 1px 0 var(--fault); outline: var(--line-thin) solid var(--live); outline-offset: 3px; }
.cal-affixed:has(.cal-input:disabled) { border-bottom-style: dashed; border-bottom-color: var(--edge-strong); }
.cal-rows > .none { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-rows > .none b { font-weight: 400; color: var(--fg); }
.cal-rows > .file { display: flex; justify-content: space-between; gap: 12px; }
.cal-rows > .file > :first-child { min-width: 0; overflow-wrap: anywhere; }
.cal-rows > .file > .lg { flex: none; white-space: nowrap; }
.cal-rows > .file.bad .lg { color: var(--fault); }
.cal-chips .chip { transition: border-color .2s, color .2s; }
.cal-chips .chip.dup { border-color: var(--live); color: var(--live); }
.cal-field .err[hidden], .cal-field .hint[hidden] { display: none; }

/* ── the chosen value · its label boxed in an ink hairline (the boxed-value mark).
   The box sits in the row's padding, so the text never moves. No tint, no lamp. */
.cal-list .v, .cal-menu .it .v, .cal-select option .v, .cal-rows .v { display: inline-block; border: var(--line-thin) solid transparent; padding: 0 5px; margin: 0 -6px; line-height: 1.45; }
.cal-list > .sel .v, .cal-select option:checked .v, .cal-rows > :is(.sel, [aria-selected="true"], [aria-current]:not([aria-current="false"])) .v,
.cal-menu .it:is(:hover, :focus-visible, .on) .v { border-color: var(--fg); color: var(--title); }
.cal-menu .it[data-ink="fault"]:is(:hover, :focus-visible, .on) .v { border-color: var(--fault); color: var(--fault); }
.cal-rows > .sel, .cal-rows > [aria-selected="true"] { background: none; box-shadow: none; }
.cal-rows > .none[hidden] { display: none; }

/* ── sign-off: keep · rework · drop. Rework stamps the card in lamp and asks what isn't good enough. */
.cal-btn[data-ink="live"][aria-pressed="true"] { color: var(--live); border-color: var(--live); }
.cal-card[data-state="rework"]::after {
  content: "rework";
  position: absolute; top: 14px; right: 18px;
  font: 500 11px/1 var(--font-legend); letter-spacing: .16em; text-transform: uppercase;
  color: var(--live); border: var(--line-thin) solid color-mix(in srgb, var(--live) 70%, var(--edge-strong)); padding: 5px 8px 4px;
  background: var(--panel);
}
.cal-card .cal-sign .note { flex: 1; display: flex; align-items: center; gap: 10px; margin-right: 14px; min-width: 0;
  font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--live); white-space: nowrap; }
.cal-card .cal-sign .note[hidden] { display: none; }
.cal-card .cal-sign .note .cal-input { flex: 1; font-size: 13px; padding: 3px 2px 2px; text-transform: none; letter-spacing: 0; }
@media (max-width: 1100px) { .cal-card[data-state="rework"] .id .end { visibility: hidden; } }
@media (max-width: 700px) { .cal-card .cal-sign { flex-wrap: wrap; } .cal-card .cal-sign .note { flex-basis: 100%; margin: 4px 0 2px; } }

/* hover moves the box: in a list or picker the row under the pointer (or keyboard) takes it, and the
   chosen row gives it up until the pointer leaves. In .cal-rows the chosen row keeps its ink box and
   the row under the pointer or holding focus takes a lighter one. No background change anywhere. */
.cal-list .v, .cal-menu .it .v, .cal-select option .v, .cal-rows .v { transition: border-color .1s ease-out, color .1s ease-out; }
.cal-list > div:hover .v,
.cal-select option:is(:hover, :focus-visible) .v { border-color: var(--fg); color: var(--title); }
.cal-rows > :is(:hover, :focus-within):not(.sel, [aria-selected="true"], [aria-current]:not([aria-current="false"])) .v { border-color: var(--faint); }
.cal-list:has(> div:hover) > .sel:not(:hover) .v,
.cal-select:has(option:is(:hover, :focus-visible)) option:checked:not(:hover, :focus-visible) .v,
.cal-select:has(option:focus-visible) option:hover:not(:focus-visible) .v { border-color: transparent; color: inherit; }
.cal-rows > *:hover { background: none; }

.cal-field > .lbl { font: var(--fs-control) var(--font-legend); letter-spacing: .01em; color: var(--legend); }

/* ── textarea · a recessed editor pane with a terminal status line */
.cal-term { width: 100%; background: var(--well); border: var(--line-thin) solid var(--faint); }
.cal-term:hover:not(:focus-within, :has(:disabled)) { border-color: var(--fg); }
.cal-term:focus-within { border-color: var(--live); }
.cal-term[data-over] { border-color: var(--fault); }
.cal-term:has(.cal-textarea:disabled) { border-style: dashed; border-color: var(--edge-strong); }
.cal-term:has(.cal-textarea:disabled) .cal-textarea { color: var(--muted); cursor: not-allowed; resize: none; }
.cal-term:has(.cal-textarea:read-only:not(:disabled)) { border-style: dotted; }
.cal-term:has(.cal-textarea:read-only:not(:disabled)):focus-within { border-color: var(--fg); }
.cal-textarea {
  display: block; width: 100%; min-height: calc(4 * 1.7em + 20px); resize: vertical; field-sizing: content; overflow-wrap: anywhere;
  font: 13px/1.7 var(--font-body); color: var(--fg); background: transparent; border: 0; border-radius: 0; padding: 10px 12px;
  caret-color: var(--live); caret-shape: block; outline: none;
}
.cal-textarea::placeholder { color: var(--key); }
.cal-term .bar { display: flex; align-items: center; gap: 14px; border-top: var(--line-thin) solid var(--edge); padding: 3px 8px 3px 12px;
  font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--key); }
.cal-term .bar .sp { flex: 1; }
.cal-term .mode { color: var(--key); }
/* the vim mode and caret position are for editors only: opt in with data-status="editor" */
.cal-term:not([data-status="editor"]) .bar .mode, .cal-term:not([data-status="editor"]) .bar .pos { display: none; }
.cal-term:focus-within .mode { color: var(--live); }

/* ── detent choice · ordered options as labelled ticks; the lamp ▼ over the chosen one */
.cal-detent { --col: 52px; position: relative; display: inline-grid; justify-self: start; width: max-content; grid-auto-flow: column; grid-auto-columns: minmax(var(--col), max-content); padding-top: 14px; }
/* the rule runs from the first tick to the last (the JS measures them when labels widen a column) */
.cal-detent::before { content: ""; position: absolute; top: 14px; left: var(--r0, calc(var(--col) / 2)); right: var(--r1, calc(var(--col) / 2)); height: 1px; background: var(--faint); }
.cal-detent label { position: relative; display: grid; justify-items: center; padding: 10px 5px 2px; color: var(--muted); cursor: pointer; transition: color .12s ease-out; }
.cal-detent label:has(:disabled) { color: var(--faint); cursor: not-allowed; }
.cal-detent label:has(:disabled)::before { background: var(--edge); }
.cal-detent label::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 6px; background: var(--faint); transition: height .12s ease-out, background .12s; }
.cal-detent label:not(:has(:disabled)):hover { color: var(--fg); }
.cal-detent label:not(:has(:disabled)):hover::before { background: var(--fg); }
.cal-detent label:has(:checked) { color: var(--title); }
.cal-detent label:has(:checked)::before { background: var(--fg); height: 8px; }
.cal-detent input { position: absolute; opacity: 0; pointer-events: none; }
.cal-detent label:has(:focus-visible) span { outline: var(--line-thin) solid var(--live); outline-offset: 3px; }
.cal-detent .mk { position: absolute; top: 2px; left: var(--x, 50%); width: 11px; height: 10px; translate: -50% 0; background: var(--fg); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: left .32s cubic-bezier(.16, 1, .3, 1), background-color .12s ease-out; }
/* the ▼ is ink at rest and takes the lamp only while the choice is in hand (focused or gliding) */
.cal-detent:is(:has(:focus-visible), .moving) .mk { background: var(--live); }
.cal-detent:not(.js) .mk { display: none; }
.cal-detent:not(.js) label:has(:checked)::after { content: ""; position: absolute; top: -12px; left: 50%; width: 11px; height: 10px; translate: -50% 0; background: var(--fg); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (prefers-reduced-motion: reduce) { .cal-detent .mk { transition: none; } }

/* ── range · a handle on a ruler, the run to the value drawn heavier */
.cal-range { --p: .5; --g: var(--muted); --run: calc(6.5px + var(--p) * (100% - 13px)); position: relative; width: 100%; max-width: 380px; padding-top: 30px; }
/* without the JS there is no reading yet: no run, no box (the handle alone is true) */
.cal-range:not(.js) { --run: 0px; }
.cal-range:not(.js) output { display: none; }
.cal-range input { appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; cursor: grab; display: block; }
.cal-range input:active { cursor: grabbing; }
.cal-range input:not(:disabled):hover { --g: var(--fg); }
.cal-range:has(input:disabled) { opacity: .5; }
.cal-range input:disabled { cursor: not-allowed; }
.cal-range input:active, .cal-range input:focus-visible { --g: var(--live); }
.cal-range input:focus-visible { outline: none; }
.cal-range input::-webkit-slider-runnable-track { height: 20px;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 50% / var(--run) 2px no-repeat,
    repeating-linear-gradient(to right, var(--fg) 0 1px, transparent 1px 50%) 6.5px 50% / calc(100% - 13px) 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) calc(100% - 6px) 50% / 1px 12px no-repeat,
    repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 10%) 6.5px 50% / calc(100% - 13px) 7px no-repeat,
    linear-gradient(var(--faint), var(--faint)) 0 50% / 100% 1px no-repeat; }
.cal-range input::-moz-range-track { height: 20px;
  background:
    linear-gradient(var(--fg), var(--fg)) 0 50% / var(--run) 2px no-repeat,
    repeating-linear-gradient(to right, var(--fg) 0 1px, transparent 1px 50%) 6.5px 50% / calc(100% - 13px) 12px no-repeat,
    linear-gradient(var(--fg), var(--fg)) calc(100% - 6px) 50% / 1px 12px no-repeat,
    repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 10%) 6.5px 50% / calc(100% - 13px) 7px no-repeat,
    linear-gradient(var(--faint), var(--faint)) 0 50% / 100% 1px no-repeat; }
.cal-range input::-webkit-slider-thumb { appearance: none; box-sizing: border-box; width: 13px; height: 20px; border: var(--line-thin) solid var(--g); border-radius: 0;
  background: linear-gradient(var(--g), var(--g)) 4px 4px / 1px 10px no-repeat, linear-gradient(var(--g), var(--g)) 6px 4px / 1px 10px no-repeat, var(--panel); }
.cal-range input::-moz-range-thumb { box-sizing: border-box; width: 13px; height: 20px; border: var(--line-thin) solid var(--g); border-radius: 0;
  background: linear-gradient(var(--g), var(--g)) 4px 4px / 1px 10px no-repeat, linear-gradient(var(--g), var(--g)) 6px 4px / 1px 10px no-repeat, var(--panel); }
.cal-range .nums { margin: 4px 6.5px 0; display: flex; justify-content: space-between; color: var(--muted); }
.cal-range .nums span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.cal-range output { position: absolute; top: 0; left: var(--ox, calc(6.5px + (100% - 13px) * var(--p))); translate: -50% 0; color: var(--fg); border: var(--line-thin) solid var(--fg); padding: 0 5px; line-height: 16px; background: var(--panel); white-space: nowrap; }
.cal-range output::after { content: ""; position: absolute; left: calc(50% + var(--lx, 0px)); top: 100%; width: 1px; height: 12px; background: var(--fg); }
.cal-range:has(input:active, input:focus-visible) output { border-color: var(--live); color: var(--live); }

/* ── detail callout · a lettered balloon on a leader; open drops into an inset */
.cal-details { width: 100%; }
.cal-details > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; color: var(--muted); }
.cal-details > summary::-webkit-details-marker { display: none; }
.cal-details > summary:focus-visible { outline: none; }
.cal-details > summary:focus-visible .bl { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
.cal-details .bl { flex: none; width: 18px; height: 18px; border-radius: 50%; border: var(--line-thin) solid var(--edge-strong); display: grid; place-items: center; color: var(--fg); font-size: 10px; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.cal-details > summary b { font-weight: 400; color: var(--fg); }
.cal-details .ld { flex: 1; min-width: 16px; border-bottom: var(--line-thin) dotted var(--edge-strong); }
.cal-details .tg::before { content: "[show]" / ""; }
.cal-details[open] .tg::before { content: "[hide]" / ""; }
.cal-details > summary:hover .bl { border-color: var(--fg); }
.cal-details > summary:hover .tg { color: var(--fg); }
.cal-details[open] .bl { background: var(--fg); border-color: var(--fg); color: var(--panel); }
.cal-details > .bd { margin-left: 8.5px; border-left: var(--line-thin) dashed var(--edge-strong); padding: 2px 0 10px 18px; }
.cal-details .inset { background: var(--raised); border: var(--line-thin) solid var(--edge-strong); padding: 8px 12px 10px; font-size: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .cal-details { interpolate-size: allow-keywords; }
  .cal-details::details-content { height: 0; overflow: clip; transition: height .24s cubic-bezier(.16, 1, .3, 1), content-visibility .24s allow-discrete; }
  .cal-details[open]::details-content { height: auto; }
}

/* ── pager · bracketed steps, underlined pages, the current page boxed (see Calibrated.pager) */
.cal-pager { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; color: var(--muted); }
.cal-pager > * { white-space: nowrap; }
.cal-pager .cal-btn:first-child { margin-right: 8px; }
.cal-pager .cal-btn:last-child { margin-left: 8px; }
.cal-pager .pg { font: inherit; letter-spacing: inherit; background: none; border: var(--line-thin) solid transparent; min-width: 24px; padding: 0 5px; line-height: 22px; text-align: center; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }
.cal-pager .pg:not(.cur):hover { color: var(--fg); text-decoration-color: var(--fg); }
.cal-pager .pg:focus-visible, .cal-pager a.cal-btn:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
.cal-pager .cur { color: var(--title); border-color: var(--fg); text-decoration: none; cursor: default; }
.cal-pager .gap { color: var(--key); padding: 0 3px; }
.cal-pager a.cal-btn { text-decoration: none; }

/* ── code block · a plain well with a little flavour */
.cal-code { position: relative; width: 100%; background: var(--well); }
.cal-code pre { margin: 0; padding: 12px 14px 22px; font: var(--fs-small)/1.75 var(--font-legend); font-variant-ligatures: none; overflow-x: auto; }
/* room for the copy button, so it never covers the first line */
.cal-code:has(> .cal-btn) pre { padding-right: 64px; }
.cal-code pre:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: -1px; }
.cal-code .ln, .cal-code .cm { display: block; white-space: pre; }
.cal-code .ln::before { content: "$ "; color: var(--key); }
.cal-code .cm { color: var(--key); }
.cal-code::after { content: attr(data-lang) / ""; position: absolute; right: 10px; bottom: 5px; font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; color: var(--key); }
.cal-code > .cal-btn { position: absolute; top: 4px; right: 6px; opacity: 0; transition: opacity .12s ease-out; }
.cal-code:hover > .cal-btn, .cal-code:focus-within > .cal-btn { opacity: 1; }
@media (hover: none) { .cal-code > .cal-btn { opacity: 1; } }

/* ── spinners · braille, stepped in whole frames like a terminal redraw: 8 frames of 80 ms, the
   lamp dot is the head and two ink dots trail it. <cal-spin> is a 3×3 dot ring (the JS draws its
   eight dots); .cal-wait is the braille cell on its side, 4 dots by 2, for text and buttons, drawn
   from its four <i> (each one is a column: ::before the top dot, ::after the bottom). */
cal-spin { display: inline-block; line-height: 0; vertical-align: middle; }
cal-spin:empty { width: 48px; height: 48px; }   /* holds its place before the JS draws it */
cal-spin[size="sm"]:empty { width: 16px; height: 16px; }
.cal-spin { --d: 12px; --g: 6px; display: inline-grid; grid-template-columns: repeat(3, var(--d)); grid-template-rows: repeat(3, var(--d)); gap: var(--g); flex: none; }
.cal-spin.sm { --d: 4px; --g: 2px; }
/* --o is how many frames each dot waits to become the head, counted clockwise from the top left */
.cal-spin > i, .cal-wait > i::before, .cal-wait > i::after { background: var(--edge); animation: cal-dots .64s steps(1) infinite; animation-delay: calc(var(--o) * -80ms); }
.cal-spin > i:nth-child(1) { grid-area: 1 / 1; --o: 0; } .cal-spin > i:nth-child(2) { grid-area: 1 / 2; --o: 7; }
.cal-spin > i:nth-child(3) { grid-area: 1 / 3; --o: 6; } .cal-spin > i:nth-child(4) { grid-area: 2 / 3; --o: 5; }
.cal-spin > i:nth-child(5) { grid-area: 3 / 3; --o: 4; } .cal-spin > i:nth-child(6) { grid-area: 3 / 2; --o: 3; }
.cal-spin > i:nth-child(7) { grid-area: 3 / 1; --o: 2; } .cal-spin > i:nth-child(8) { grid-area: 2 / 1; --o: 1; }
@keyframes cal-dots { 0% { background: var(--live); } 12.5% { background: var(--fg); } 25% { background: var(--muted); } 37.5%, 100% { background: var(--edge); } }
/* braille row: along the top left to right, back along the bottom */
.cal-wait { --d: 4px; --g: 2px; display: inline-flex; gap: var(--g); vertical-align: middle; }
.cal-wait > i { display: grid; gap: var(--g); }
.cal-wait > i::before, .cal-wait > i::after { content: ""; width: var(--d); height: var(--d); }
.cal-wait > i:nth-child(1)::before { --o: 0; } .cal-wait > i:nth-child(2)::before { --o: 7; } .cal-wait > i:nth-child(3)::before { --o: 6; } .cal-wait > i:nth-child(4)::before { --o: 5; }
.cal-wait > i:nth-child(4)::after { --o: 4; } .cal-wait > i:nth-child(3)::after { --o: 3; } .cal-wait > i:nth-child(2)::after { --o: 2; } .cal-wait > i:nth-child(1)::after { --o: 1; }
.cal-btn .cal-wait { --d: 3.5px; --g: 1.5px; margin-right: 6px; vertical-align: 0; }
/* readout · the waiting line: the braille row, what is happening, a dotted leader and the time
   so far in a box (<cal-elapsed>). data-ink="ok|fault" resolves it in place: .nd takes the
   row's place and the box keeps the final time. */
.cal-readout { display: flex; align-items: center; gap: 8px; min-width: 0; font: 12px/1.2 var(--font-legend); letter-spacing: .02em; color: var(--fg); }
.cal-readout > .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-readout > .ld { flex: 1; min-width: 16px; height: 1px; align-self: flex-end; margin-bottom: 4px; background: repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 4px); }
.cal-readout > :is(cal-elapsed, .tm) { flex: none; border: var(--line-thin) solid var(--edge-strong); padding: 3px 5px 2px; font-variant-numeric: tabular-nums; }
.cal-readout > .nd { flex: none; width: 7px; height: 7px; margin-right: 15px; background: var(--fg); }   /* as wide as the row it replaces */
.cal-readout[data-ink="ok"] > .nd { background: var(--ok); }
.cal-readout[data-ink="ok"] > :is(cal-elapsed, .tm) { color: var(--ok); border-color: var(--ok); }
.cal-readout[data-ink="fault"] > .nd { background: var(--fault); }
.cal-readout[data-ink="fault"] > :is(.lb, cal-elapsed, .tm) { color: var(--fault); }
.cal-readout[data-ink="fault"] > :is(cal-elapsed, .tm) { border-color: var(--fault); }
/* measured bar (kept for pages that use it; new pages use .cal-readout or <cal-progress>): a hairline frame, an ink run sliding inside, a lamp leading edge, a scale underneath */
.cal-scan { --p: .3; position: relative; display: inline-block; width: 150px; height: 7px; flex: none; border: var(--line-thin) solid var(--edge-strong); margin-bottom: 5px; }
.cal-scan::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(100% + 1px); height: 4px;
  background: repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 10%) 0 0 / calc(100% - 1px) 100% no-repeat, linear-gradient(var(--faint), var(--faint)) 100% 0 / 1px 100% no-repeat; }
.cal-scan > i { position: absolute; top: 1px; bottom: 1px; left: 1px; width: 30%; background: var(--fg); animation: cal-measure 1.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.cal-scan > i::after { content: ""; position: absolute; right: -2px; top: -4px; bottom: -4px; width: 2px; background: var(--live); }
.cal-scan.det > i { width: calc((100% - 2px) * var(--p)); animation: none; }
@keyframes cal-measure { to { left: calc(70% - 1px); } }
@media (prefers-reduced-motion: reduce) {
  /* the dots hold the first frame: head on the first dot, its tail behind */
  .cal-spin > i, .cal-wait > i::before, .cal-wait > i::after, .cal-scan > i { animation: none; }
  .cal-spin > i:nth-child(1), .cal-wait > i:nth-child(1)::before { background: var(--live); }
  .cal-spin > i:nth-child(8), .cal-wait > i:nth-child(1)::after { background: var(--fg); }
  .cal-spin > i:nth-child(7), .cal-wait > i:nth-child(2)::after { background: var(--muted); }
  /* the sliding bar can't slide: it shows hatched end to end (busy, amount unknown), not a 30% fill */
  .cal-scan:not(.det) > i { left: 1px; right: 1px; width: auto; background: repeating-linear-gradient(-45deg, var(--fg) 0 1px, transparent 1px 4px); }
  .cal-scan:not(.det) > i::after { display: none; }
}

/* ── footer */
.cal-foot { padding: 32px 0 48px; color: var(--key); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; font: var(--fs-legend) var(--font-legend); letter-spacing: var(--track-legend); text-transform: uppercase; }

/* ── custom elements host defaults (see calibrated-components.js) */
cal-meter, cal-position, cal-progress, cal-diff, cal-durations, cal-ruler { display: inline-block; max-width: 100%; vertical-align: middle; overflow-x: auto; }
:is(cal-meter, cal-position, cal-progress, cal-diff, cal-durations, cal-ruler) > svg { display: block; max-width: 100%; height: auto; }
[data-cal-scroll]:focus-visible, :is(cal-meter, cal-position, cal-progress, cal-diff, cal-durations, cal-ruler)[data-scroll]:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
cal-durations { display: block; }
cal-span { display: none; }

/* ── responsive */
@media (max-width: 1100px) {
  .cal-specimens { --cols: 2; }
  .cal-card { grid-template-columns: 1fr; }
  .cal-card > .info { border-right: 0; border-bottom: var(--line-thin) solid var(--edge); }
  .cal-intro { grid-template-columns: 1fr; }
  .cal-card[data-state="dropped"] .id .end { visibility: hidden; }  /* the stamp sits there now */
}
@media (max-width: 700px) {
  .cal-compare { grid-template-columns: 1fr; }
  .cal-compare > div + div { border-left: 0; border-top: var(--line-thin) dashed var(--edge); }
  .cal-table { display: block; overflow-x: auto; }
  .cal-table {   /* the scroll cue, as on a stage */
    background:
      linear-gradient(var(--panel), var(--panel)) left / 6px 100% no-repeat local,
      linear-gradient(var(--panel), var(--panel)) right / 6px 100% no-repeat local,
      repeating-linear-gradient(var(--faint) 0 3px, transparent 3px 6px) left / 1px 100% no-repeat scroll,
      repeating-linear-gradient(var(--faint) 0 3px, transparent 3px 6px) right / 1px 100% no-repeat scroll,
      var(--panel);
  }
  .cal-table th, .cal-table td { white-space: nowrap; }  /* scroll, don't squeeze */
  .cal-sheet { margin: 22px 4px 30px; outline-offset: 5px; padding: 16px; }
  .cal-sheet > .zones.left, .cal-sheet > .zones.right { display: none; }
}
@media (max-width: 520px) {
  .cal-specimens { --cols: 1; }
}

/* ════ app mode · data-mode="app" on any ancestor ════
   For screens and forms people use, not drawings they read: no sheet numbers,
   sentence-case section heads and table heads. Document pages keep the drawing-set look. */
[data-mode="app"] .cal-sec-h > span ~ span:last-child { display: none; }
[data-mode="app"] .cal-sec-h, [data-mode="app"] .cal-table th, [data-mode="app"] .cal-kv dt { text-transform: none; letter-spacing: .01em; }
[data-mode="app"] .cal-sec-h b { font-size: var(--fs-control); }
[data-mode="app"] .cal-dialog header { text-transform: none; letter-spacing: .01em; }
[data-mode="app"] .cal-zone-h, [data-mode="app"] .cal-bracket-h, [data-mode="app"] .cal-rule:not(:empty) { text-transform: none; letter-spacing: .01em; font-size: var(--fs-control); }
[data-mode="app"] .cal-zone-h > .end { text-transform: none; letter-spacing: .01em; }