/* Sybqa Proof v3 inspection bench: primitives for the live session, the console and app chrome.
   Load after components.css (tokens first). Reports do not embed this file. Everything here is flat: ink borders and
   crop marks, never a drop shadow. */
/* QC tag: a manila inspection tag with an eyelet. Children: -kind (who says it), -claim, -value (a measurement),
   -verdict (Fail / Review / Dropped), -note. Text stays ink, stamp red, review violet or muted on manila
   (green text on manila is under 4.5:1: show a pass as a .ds-stamp instead). */
.ds-qc-tag { position: relative; display: grid; gap: .2em; width: max-content; max-width: 100%; margin: 0; padding: .7em 1em .7em 2.2em; background: var(--color-tag); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); color: var(--color-ink); font-size: var(--text-small); line-height: 1.25; transform-origin: .7em 50%; }
.ds-qc-tag::before { content: ""; position: absolute; left: .7em; top: 50%; width: .8em; height: .8em; margin-top: -.4em; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
.ds-qc-tag-kind { font: 700 var(--text-caption)/1.2 var(--font-code); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-qc-tag-claim { margin: 0; font-weight: var(--weight-label); overflow-wrap: anywhere; }
.ds-qc-tag-claim--ai { font: italic 1.0625em/1.25 var(--font-note); }
.ds-qc-tag-value, .ds-qc-tag-note { font-family: var(--font-code); overflow-wrap: anywhere; }
.ds-qc-tag-verdict { font: 900 1.7em/1 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; text-transform: uppercase; }
.ds-qc-tag[data-verdict="fail"] .ds-qc-tag-verdict { color: var(--color-stamp); }
.ds-qc-tag[data-verdict="review"] .ds-qc-tag-verdict { color: var(--color-review); }
.ds-qc-tag[data-verdict="dropped"] .ds-qc-tag-verdict { color: var(--color-muted); }
.ds-qc-tag[data-verdict="dropped"] .ds-qc-tag-claim { text-decoration: line-through; }
.ds-qc-tag[data-state="measuring"] .ds-qc-tag-value::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-signal); }
.ds-qc-tag--compact { padding: .4em .7em .4em 1.9em; }
.ds-qc-tag--compact .ds-qc-tag-kind { display: none; }
.ds-qc-tag--float { position: absolute; left: 0; top: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)); }
.ds-qc-tag > .ds-stamp { justify-self: start; background: var(--color-surface); }
.ds-qc-tag--overhang > .ds-stamp { position: absolute; right: -10px; bottom: -12px; margin: 0; }
/* Dotted string from a target to an eyelet, and the hand-drawn orange ring around a finding. */
.ds-string { position: absolute; left: 0; top: 0; width: 0; height: var(--len, 0px); border-left: 2px dotted var(--color-ink); transform-origin: 0 0; rotate: var(--ang, 0deg); pointer-events: none; }
.ds-ring { position: absolute; left: 0; top: 0; width: var(--rw, auto); height: var(--rh, auto); translate: var(--rx, 0px) var(--ry, 0px); overflow: visible; fill: none; stroke: var(--color-signal); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ds-ring * { vector-effect: non-scaling-stroke; }

/* Inspection box: a dashed safety-orange outline with an optional manila label. Offsets are lengths in --bx --by --bw --bh
   (data-units="frac" reads 0..1 fractions of the nearest size container instead). data-glide animates the size. */
.ds-inspect { position: absolute; left: 0; top: 0; box-sizing: border-box; width: var(--bw, auto); height: var(--bh, auto); translate: var(--bx, 0px) var(--by, 0px); border: var(--rule-width) dashed var(--color-signal); pointer-events: none; transition: translate var(--cursor-glide) var(--ease-glide), opacity var(--motion-normal) var(--ease-standard); }
.ds-inspect[data-units="frac"] { translate: calc(var(--bx, 0) * 100cqw) calc(var(--by, 0) * 100cqh); width: calc(var(--bw, 0) * 100cqw + 12px); height: calc(var(--bh, 0) * 100cqh + 12px); margin: -6px 0 0 -6px; }
.ds-inspect[data-glide] { transition: translate var(--cursor-glide) var(--ease-glide), width var(--cursor-glide) var(--ease-glide), height var(--cursor-glide) var(--ease-glide), opacity var(--motion-normal) var(--ease-standard); }
.ds-inspect[data-dim] { opacity: .45; }
:is(.ds-inspect-tag, .ds-inspect-label) { position: absolute; left: -2px; bottom: calc(100% + var(--space-3)); display: grid; gap: 2px; margin: 0; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-6); background: var(--color-tag); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); color: var(--color-ink); font: var(--text-caption)/1.3 var(--font-code); white-space: nowrap; }
:is(.ds-inspect-tag, .ds-inspect-label)::before { content: ""; position: absolute; left: var(--space-2); top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
:is(.ds-inspect-tag, .ds-inspect-label) b { font: 900 var(--text-small)/1.1 var(--font-display); font-stretch: var(--stretch-display); }
.ds-inspect[data-below] > :is(.ds-inspect-tag, .ds-inspect-label) { bottom: auto; top: calc(100% + var(--space-3)); }
.ds-inspect[data-right] > :is(.ds-inspect-tag, .ds-inspect-label) { left: auto; right: -2px; }

/* Browser window chrome: ink frame, a bar (dots, back/forward, address, note), and a viewport that keeps its aspect ratio.
   Pair with .ds-crop (data-tone="signal" while live). Overlay children (.ds-cursor, .ds-inspect, .ds-qc-tag--float)
   sit in a position:absolute .ds-window-layer inside the viewport or screen. */
.ds-window { position: relative; min-width: 0; border: var(--rule-width) solid var(--color-ink); border-radius: var(--radius-panel); background: var(--color-surface); }
.ds-window-bar { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-3); border-bottom: var(--rule-width) solid var(--color-ink); font-size: var(--text-small); }
.ds-window-dots { display: inline-flex; flex: none; gap: var(--space-2); }
.ds-window-dots > * { width: 10px; height: 10px; border: 1.5px solid var(--color-ink); border-radius: 50%; }
.ds-window-nav { display: inline-flex; flex: none; gap: var(--space-1); font: 700 var(--text-small)/1 var(--font-code); }
.ds-window-nav > * { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-surface); }
.ds-window-nav > :disabled, .ds-window-nav > [aria-disabled="true"] { opacity: var(--opacity-disabled); }
.ds-window-url { flex: 1 1 auto; min-width: 0; overflow: hidden; font: 700 var(--text-small)/1.2 var(--font-code); text-overflow: ellipsis; white-space: nowrap; }
.ds-window-note { flex: none; margin-left: auto; color: var(--color-muted); font: italic var(--text-body)/1 var(--font-note); }
.ds-window-load { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-signal); transform-origin: 0 50%; scale: 0 1; }
.ds-window-viewport { position: relative; display: grid; place-items: center; container-type: size; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--color-code);
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: var(--mat-grid) var(--mat-grid); }
.ds-window-screen { position: relative; container-type: size; aspect-ratio: var(--ar-w, 16) / var(--ar-h, 10); width: min(100cqw, calc(100cqh * var(--ar-w, 16) / var(--ar-h, 10))); background: var(--color-surface); }
.ds-window-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ds-window-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* AI QA cursor: safety-orange pointer, click ring, mono action label. Position with --cx --cy (lengths; data-units="frac"
   uses 0..1 fractions of the size container). Moves with translate only. data-click="a|b" alternates two identical
   animations so a click restarts without forcing layout; data-sync="stale" docks it faded; data-flip puts the label left. */
.ds-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; translate: var(--cx, 0px) var(--cy, 0px); pointer-events: none; transition: translate var(--cursor-glide) var(--ease-glide), opacity var(--motion-normal) var(--ease-standard); }
.ds-cursor[data-units="frac"] { translate: calc(var(--cx, 0) * 100cqw) calc(var(--cy, 0) * 100cqh); }
.ds-cursor[data-sync="stale"] { --cx: .94; --cy: .92; opacity: .35; }
.ds-cursor > svg { position: absolute; left: 0; top: 0; width: 20px; height: 23px; overflow: visible; fill: var(--color-signal); stroke: var(--color-ink); stroke-width: 2; stroke-linejoin: round; }
.ds-cursor-ring { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border: 2px solid var(--color-signal); border-radius: 50%; opacity: 0; }
.ds-cursor-label, .ds-cursor-tag { position: absolute; left: 16px; top: 20px; padding: 1px var(--space-2); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); background: var(--color-signal); color: var(--color-on-signal); font: 700 var(--text-caption)/1.5 var(--font-code); letter-spacing: .04em; white-space: nowrap; }
.ds-cursor[data-flip] :is(.ds-cursor-label, .ds-cursor-tag) { left: auto; right: 16px; }

/* Run log: fixed-height mono rows (time VERB text) so changing text never shifts layout. */
.ds-runlog { margin: 0; padding: 0; list-style: none; font: var(--text-caption)/1.6 var(--font-code); }
.ds-runlog > li { display: grid; grid-template-columns: 3rem 5.5rem minmax(0, 1fr); gap: var(--space-2); height: 1.6em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ds-runlog > li > b { font-weight: 700; }
.ds-runlog > li > :first-child { color: var(--color-muted); }

/* Checklist: ink rules and orange-tick boxes (the homepage "what it checks" list). data-done="true" draws the tick. */
.ds-checklist { --box: 2.5rem; margin: 0; padding: 0; list-style: none; border-top: var(--rule-width) solid var(--color-ink); }
.ds-checklist--sm { --box: 1.5rem; }
.ds-checklist > li { position: relative; display: grid; grid-template-columns: var(--box) minmax(0, 1fr); gap: var(--space-4); align-items: center; min-height: calc(var(--box) + var(--space-6)); padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-ink); }
.ds-checklist > li::before { content: ""; grid-row: 1 / span 5; width: var(--box); height: var(--box); border: var(--rule-width) solid var(--color-ink); background: var(--color-surface); }
.ds-checklist > li > * { grid-column: 2; }
.ds-checklist > li[data-done="true"]::after { content: ""; position: absolute; left: calc(var(--box) * .22); top: calc(50% - var(--box) * .6); width: calc(var(--box) * .36); height: calc(var(--box) * .76); border: solid var(--color-signal); border-width: 0 calc(var(--box) * .16) calc(var(--box) * .16) 0; rotate: 40deg; }

/* Proof lines: "The AI said" / "The browser measured" / stamp. Stacks below 440px of its own width. */
.ds-proof { display: grid; gap: var(--space-2); container-type: inline-size; }
.ds-proof-row { display: grid; gap: var(--space-1); }
.ds-proof-label { font: 700 var(--text-caption)/1.4 var(--font-code); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-proof-said { font: italic 1.0625rem/1.3 var(--font-note); }
.ds-proof-measured { font-family: var(--font-code); overflow-wrap: anywhere; }
.ds-proof[data-outcome="dropped"] .ds-proof-said { text-decoration: line-through; }
@container (min-width: 440px) { .ds-proof-row { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: baseline; } }

/* Small labels and state markers. */
.ds-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 1px var(--space-2); border: 1.5px solid var(--color-ink); border-radius: var(--radius-sheet); background: var(--color-surface); color: var(--color-ink); font: 500 var(--text-caption)/1.6 var(--font-code); white-space: nowrap; }
.ds-chip[data-tone="success"] { color: var(--color-success); }
.ds-chip[data-tone="danger"] { color: var(--color-danger); }
.ds-chip[data-tone="review"] { color: var(--color-review); }
.ds-chip[data-tone="warning"] { color: var(--color-warning); }
.ds-live-dot { display: inline-block; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-signal); }
/* Counters: a visible noun above a mono number. */
.ds-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.ds-tally > div { min-width: 0; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-ink); background: var(--color-surface); }
.ds-tally dt { font: 700 var(--text-caption)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.ds-tally dd { margin: 0; font: 700 1.5rem/1.2 var(--font-code); font-variant-numeric: tabular-nums; }
.ds-tally [data-tone="danger"] dd { color: var(--color-danger); }
.ds-tally [data-tone="review"] dd { color: var(--color-review); }
.ds-tally [data-tone="success"] dd { color: var(--color-success); }
/* Two-way toggle (aria-pressed) and the stamp legend. */
/* Equal columns on one row: a narrow screen wraps the labels inside their segment, never the segments onto a ragged second row. */
.ds-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; border: 1.5px solid var(--color-ink); border-radius: var(--radius-button); overflow: hidden; }
.ds-seg > button { min-height: var(--control-height); padding: var(--space-1) var(--space-4); border: 0; background: var(--color-surface); font-weight: var(--weight-label); line-height: 1.2; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
@media (max-width: 480px) { .ds-seg > button { padding-inline: var(--space-2); } }
.ds-seg > button + button { border-left: 1.5px solid var(--color-ink); }
.ds-seg > button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-canvas); }
.ds-legend { padding: var(--space-3) 0; border-block: var(--border-width) solid var(--color-border); }
.ds-legend > summary { cursor: pointer; min-height: var(--control-height); padding-block: var(--space-2); font-weight: var(--weight-label); }
.ds-legend dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center; margin: 0; }
.ds-legend dd { margin: 0; color: var(--color-muted); }
/* Ledger: manila head over mono rows (time, kind chip, text, stamp). */
.ds-ledger { display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border: var(--rule-width) solid var(--color-ink); }
.ds-ledger-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10); background: var(--color-tag); border-bottom: var(--rule-width) solid var(--color-ink); }
.ds-ledger-head::before { content: ""; position: absolute; left: var(--space-4); top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }
.ds-ledger-head :is(h2, h3) { margin: 0; font-size: var(--text-section); }
.ds-ledger-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; }
.ds-ledger-row { display: grid; grid-template-columns: 4.5rem 4.75rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--control-height); padding: var(--space-1) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); content-visibility: auto; contain-intrinsic-size: auto 44px; font-size: var(--text-small); }
.ds-ledger-time { font: var(--text-caption)/1.4 var(--font-code); color: var(--color-muted); }
/* Night console strip for raw logs, with a reverse focus ring. */
.ds-console { background: var(--color-night); color: var(--color-on-night); border: var(--rule-width) solid var(--color-ink); }
.ds-console :focus-visible { outline-color: var(--color-action-reverse); }
.ds-console > summary { cursor: pointer; min-height: var(--control-height); padding: var(--space-2) var(--space-4); font: 600 var(--text-small)/1.4 var(--font-code); }
.ds-console ol { margin: 0; padding: 0 var(--space-4) var(--space-4); list-style: none; font: var(--text-caption)/1.6 var(--font-code); color: var(--color-on-night-muted); }

/* Choice group: native radios or checkboxes drawn as inspection tags (rating, topic). */
.ds-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.ds-choices > legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--weight-label); }
.ds-choice { position: relative; display: inline-flex; margin: 0; }
.ds-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ds-choice > span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-height); min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); background: var(--color-surface); font-weight: var(--weight-label); }
.ds-choice > input:checked + span { background: var(--color-ink); color: var(--color-canvas); }
.ds-choice > input:focus-visible + span { outline: var(--focus-width) solid var(--color-action); outline-offset: var(--focus-offset); }

/* Consent banner: a fixed bottom bar. It overlays the page, so showing or hiding it never moves content. Keep controls
   native buttons with equal visual weight for accept and decline. */
.ds-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-consent); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); padding: var(--space-4) max(var(--space-6), calc((100% - var(--content-width)) / 2)); background: var(--color-surface); color: var(--color-ink); border-top: var(--rule-width) solid var(--color-ink); }
.ds-consent-body { flex: 1 1 24rem; min-width: 0; }
.ds-consent-title { margin: 0 0 var(--space-1); font: 900 var(--text-body)/1.2 var(--font-display); font-stretch: var(--stretch-display); }
.ds-consent-text { margin: 0; max-width: 70ch; color: var(--color-muted); font-size: var(--text-small); }
.ds-consent-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--space-3); }
html:has(.ds-consent:not([hidden])) { scroll-padding-bottom: var(--consent-h, 9rem); }

/* Feedback dialog: head, a short form, and status text. Use with <dialog class="ds-feedback"> and bindDialog. */
.ds-feedback { width: min(520px, calc(100vw - 32px)); padding: 0; }
.ds-feedback-head { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-3); border-bottom: var(--rule-width) solid var(--color-ink); background: var(--color-tag); }
.ds-feedback-head h2 { margin: 0; font-size: 1.5rem; }
.ds-feedback-head .eyebrow { margin: 0 0 var(--space-1); }
.ds-feedback-form { display: grid; gap: var(--space-5); padding: var(--space-6); }
.ds-feedback-count { margin: 0; color: var(--color-muted); font: var(--text-caption)/1.4 var(--font-code); text-align: right; }
.ds-feedback-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ds-feedback-status { min-height: 1.5em; margin: 0; font-size: var(--text-small); }
.ds-feedback-trigger { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8); border: 1.5px solid var(--color-ink); border-radius: var(--radius-tag); background: var(--color-tag); color: var(--color-ink); font-weight: var(--weight-label); }
.ds-feedback-trigger::before { content: ""; position: absolute; left: var(--space-3); top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1.5px solid var(--color-ink); border-radius: 50%; background: var(--color-canvas); }


/* Motion. The base state of every animated element is its FINAL state; entrances run only when motion is allowed,
   from a state class or data attribute, with explicit from and to keyframes. Transform, translate, rotate, scale and
   opacity only (the load sweep is the documented exception). Reduced motion is also handled by the global override
   in components.css. */
@keyframes ds-tag-drop { from { translate: 0 -12px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes ds-ring-pop { from { scale: .6; opacity: 0; } 70% { scale: 1.05; opacity: 1; } to { scale: 1; opacity: 1; } }
@keyframes ds-string-out { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes ds-tick-in { from { scale: 0; } 70% { scale: 1.15; } to { scale: 1; } }
@keyframes ds-ripple-a { from { scale: .5; opacity: .9; } to { scale: 1.8; opacity: 0; } }
@keyframes ds-ripple-b { from { scale: .5; opacity: .9; } to { scale: 1.8; opacity: 0; } }
@keyframes ds-travel-a { from { translate: var(--px, 0px) var(--py, 0px); } to { translate: var(--cx, 0px) var(--cy, 0px); } }
@keyframes ds-travel-b { from { translate: var(--px, 0px) var(--py, 0px); } to { translate: var(--cx, 0px) var(--cy, 0px); } }
@keyframes ds-load { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes ds-pulse { 50% { opacity: .25; } }
@keyframes ds-ledger-in { from { translate: 0 -6px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ds-qc-tag.is-in { animation: ds-tag-drop .4s var(--ease-stamp) both; }
  .ds-ring.is-in { animation: ds-ring-pop .3s var(--ease-stamp) both; }
  .ds-string.is-in { animation: ds-string-out .25s ease-out both; }
  .ds-checklist > li[data-done="true"]::after { animation: ds-tick-in .28s ease-out both; }
  .ds-cursor[data-click="a"] .ds-cursor-ring { animation: ds-ripple-a .4s ease-out both; }
  .ds-cursor[data-click="b"] .ds-cursor-ring { animation: ds-ripple-b .4s ease-out both; }
  .ds-cursor[data-travel="a"] { animation: ds-travel-a var(--cursor-glide) var(--ease-glide) both; }
  .ds-cursor[data-travel="b"] { animation: ds-travel-b var(--cursor-glide) var(--ease-glide) both; }
  .ds-window-bar[data-loading="a"] .ds-window-load, .ds-window-bar[data-loading="b"] .ds-window-load { animation: ds-load .8s ease-out both; }
  .ds-live-dot { animation: ds-pulse 1.1s ease-in-out infinite; }
  .ds-ledger-row.is-new { animation: ds-ledger-in .16s ease-out both; }
}
@media (max-width: 700px) {
  .ds-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-ledger-row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
  .ds-ledger-row > .ds-chip { display: none; }
  .ds-consent { padding: var(--space-4); }
  .ds-consent-actions > * { flex: 1 1 8rem; }
  .ds-feedback-actions > * { flex: 1 1 8rem; }
}
@media (forced-colors: active) {
  .ds-cursor > svg { fill: Highlight; stroke: CanvasText; }
  .ds-inspect { border-color: Highlight; }
  .ds-ring { stroke: Highlight; }
  .ds-qc-tag, .ds-chip, .ds-consent { border-color: CanvasText; }
}
@media print {
  .ds-consent { display: none; }
}