/*
 * Internal ui 1.3.0 — spec-sheet helpers for design canvases only. Not part of the code package.
 * Loads after tokens.css and bundle.css.
 */

/* Spec sheets: components pages, handoff, token tables */
.sheet { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-10); background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); }
.sheet-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; }
.sheet-lead { max-width: 820px; font-size: var(--text-md); color: var(--text-muted); }
.spec { display: flex; flex-direction: column; gap: var(--space-3); }
.spec-name { font-size: var(--text-lg); font-weight: 600; }
.spec-sub { font-size: var(--text-sm); color: var(--text-muted); }
.spec-grid { display: grid; gap: var(--space-4); }
.cell { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cell-cap { font-size: var(--text-sm); color: var(--text-muted); }
.panel { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.stage { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; }
.anno { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.45; }
.anno strong { color: var(--text); font-weight: 600; }
.new-mark { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-xs); font-weight: 600; }
.fix-mark { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--text); font-size: var(--text-xs); font-weight: 600; }
.diff-old { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.is-later { opacity: 0.55; outline: 1px dashed var(--border-strong); outline-offset: -1px; }

/* Still frame for animations on an artboard: put .is-still on the element or any ancestor.
   Spinners and pulses stop; a countdown or indeterminate bar shows a fixed, non-empty frame (--still, default 60%). */
.is-still, .is-still * { animation-play-state: paused !important; }
.progress-countdown.is-still > span, .is-still .progress-countdown > span { animation: none !important; width: var(--still, 60%); }
.progress-ind.is-still > span, .is-still .progress-ind > span { animation: none !important; width: 35%; margin-left: var(--still, 30%); }

/* Long-form documents on a canvas */
.doc { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) 64px; background: var(--surface); color: var(--text); font-family: var(--font-ui); font-size: var(--text-md); line-height: 1.6; }
.doc h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.doc h2 { margin: var(--space-4) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xl); font-weight: 700; }
.doc h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.doc p, .doc ul, .doc ol { margin: 0; max-width: 980px; }
.doc ul, .doc ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.doc th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); }
.doc td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.doc .lead { font-size: var(--text-lg); color: var(--text-muted); max-width: 980px; }
.qa { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.qa-n { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.qa-q { font-weight: 600; }
.qa-a { grid-column: 2; color: var(--text-muted); font-size: var(--text-base); }

/* Swatches and contrast tables */
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.sw { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.sw-chip { height: 44px; display: flex; align-items: center; padding: 0 var(--space-3); font-size: var(--text-base); font-weight: 600; }
.sw-meta { display: flex; justify-content: space-between; gap: var(--space-2); padding: 6px var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.ratio { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.ratio.fail { color: var(--danger-text); }

/* Component previews: light and dark side by side, or stacked for wide parts */
.pv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); font-family: var(--font-ui); }
.pv.pv-stack { grid-template-columns: minmax(0, 1fr); }
.pv > .app { gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-6); }
.pv-theme { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pv-sec { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pv-cap { font-size: var(--text-sm); color: var(--text-muted); }
.pv-cap b { color: var(--text); font-weight: 600; }
.pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.pv-row.top { align-items: flex-start; }
.pv-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.pv-frame { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
.pv-tipwrap { position: relative; display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }