/* Spec Creator -- module styles.
 *
 * Two scope tiers (read this before adding rules):
 *
 *   1. CONTAINER classes -- rendered inside the module's container element.
 *      These get the `[data-module="spec-creator"]` prefix so styles never
 *      leak outside the module.
 *
 *   2. MODAL-CONTENT classes -- rendered inside `ctx.ui.modal({ content })`,
 *      which the platform mounts on `.strata-overlay` on `document.body`.
 *      That overlay carries NO `data-module` attribute, so a `[data-module=
 *      "spec-creator"] .foo` selector cannot match anything in modal HTML.
 *      These classes use the `.sc-` prefix as the leak guard and stay
 *      unscoped. See `.claude/rules/modules-lessons.md` -> "Modal content
 *      is body-mounted on .strata-overlay -- module-scoped CSS does NOT
 *      apply" for the full rationale.
 *
 * Tokens only, no hardcoded colors. Both themes share token names.
 */

/* ===================================================================
 * Tier 1: CONTAINER classes
 * =================================================================== */

/* Full-bleed override -- the assembly view fills the viewport like DAM /
   Product Catalog. Comma fallback per modules-lessons (root carries
   data-module on itself, so descendant combinator alone misses). */
.strata-content:has([data-module="spec-creator"]) { padding: 0; }
.strata-module-container[data-module="spec-creator"],
[data-module="spec-creator"].strata-module-container {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-module="spec-creator"] .sc-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
}

/* Top bar */
[data-module="spec-creator"] .sc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  gap: 16px;
}
[data-module="spec-creator"] .sc-topbar-title { display: flex; align-items: baseline; gap: 12px; }
[data-module="spec-creator"] .sc-pkg-name { font-size: 16px; font-weight: 600; }
[data-module="spec-creator"] .sc-pkg-meta { font-size: 13px; color: var(--text-secondary); }
[data-module="spec-creator"] .sc-topbar-actions { display: flex; gap: 8px; }
[data-module="spec-creator"] .sc-topbar-actions button { touch-action: manipulation; }

/* Three-column main grid */
[data-module="spec-creator"] .sc-main {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Thumbnails panel */
[data-module="spec-creator"] .sc-thumbs { border-right: 1px solid var(--border); background: var(--panel-2); overflow-y: auto; padding: 10px 8px; }
[data-module="spec-creator"] .sc-thumb-group + .sc-thumb-group { margin-top: 14px; }
[data-module="spec-creator"] .sc-thumb-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); padding: 0 6px 6px; }
[data-module="spec-creator"] .sc-thumb {
  display: flex; align-items: flex-start; gap: 8px; width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 8px; margin-bottom: 4px; cursor: pointer; text-align: left;
  color: var(--text-primary); position: relative; touch-action: manipulation; min-height: 44px;
  font-family: inherit;
}
[data-module="spec-creator"] .sc-thumb:hover { background: var(--row-hover); }
[data-module="spec-creator"] .sc-thumb.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
[data-module="spec-creator"] .sc-thumb-preview { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--panel-2); color: var(--text-secondary); margin-top: 2px; }
[data-module="spec-creator"] .sc-thumb-meta { flex: 1 1 auto; min-width: 0; }
[data-module="spec-creator"] .sc-thumb-kind { font-size: 12px; font-weight: 600; }
[data-module="spec-creator"] .sc-thumb-types { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-module="spec-creator"] .sc-thumb-desc { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
[data-module="spec-creator"] .sc-thumb-part { font-size: 11px; color: var(--text-tertiary); font-family: ui-monospace, SFMono-Regular, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
[data-module="spec-creator"] .sc-thumb-suffix { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
[data-module="spec-creator"] .sc-thumb-markup { position: absolute; top: 4px; right: 4px; background: var(--accent); color: var(--bg); font-size: 10px; padding: 1px 5px; border-radius: 8px; font-weight: 600; }
/* Phase 5 (Decision C) -- merge candidate glyph on cutsheet thumbnails. */
[data-module="spec-creator"] .sc-thumb-merge {
  position: absolute; bottom: 4px; right: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: var(--panel); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: 50%;
  cursor: pointer;
}
[data-module="spec-creator"] .sc-thumb-merge:hover {
  background: var(--accent-soft); color: var(--accent);
}
[data-module="spec-creator"] .sc-thumbs-empty { padding: 16px 12px; font-size: 13px; color: var(--text-secondary); }

/* Canvas */
[data-module="spec-creator"] .sc-canvas { overflow: auto; min-width: 0; padding: 24px 32px; background: var(--bg); }
[data-module="spec-creator"] .sc-canvas-empty { text-align: center; color: var(--text-secondary); margin-top: 80px; }
[data-module="spec-creator"] .sc-canvas-empty .sc-hint { font-size: 13px; color: var(--text-tertiary); }
[data-module="spec-creator"] .sc-canvas-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--panel-radius); padding: 18px 20px; max-width: 720px; margin: 0 auto; }
[data-module="spec-creator"] .sc-canvas-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
[data-module="spec-creator"] .sc-canvas-head h2 { margin: 0; font-size: 16px; }
[data-module="spec-creator"] .sc-canvas-role { font-size: 12px; color: var(--text-secondary); }
[data-module="spec-creator"] .sc-canvas-body { font-size: 14px; color: var(--text-primary); }
[data-module="spec-creator"] .sc-canvas-body .sc-hint { font-size: 12px; color: var(--text-tertiary); }
[data-module="spec-creator"] .sc-canvas-actions { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Page preview list (cutsheet + uploaded_document). Each included
 * source page renders as its own card in the center panel's flow --
 * the panel scrolls, not the strip. Each card has a canvas + sibling
 * SVG markup overlay drawn from the page's stored markups via the
 * pdf-markup tool's primitive renderers (PDF-points coordinates,
 * top-left origin -- matches storage). Click on a card opens the
 * markup editor.
 */
[data-module="spec-creator"] .sc-preview-wrap { display: block; min-width: 0; }
[data-module="spec-creator"] .sc-preview-sizer {
  position: relative;
  margin-inline: auto;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 4px;
}
[data-module="spec-creator"] .sc-preview-list {
  display: flex; flex-direction: column; gap: 18px;
  transform-origin: 0 0;
  will-change: transform;
}
[data-module="spec-creator"] .sc-preview-pan-active,
[data-module="spec-creator"] .sc-preview-pan-active * { cursor: grabbing !important; }
[data-module="spec-creator"] .sc-preview-page {
  display: flex; flex-direction: column; gap: 4px;
}
[data-module="spec-creator"] .sc-preview-page[data-action="open-markup-editor"] {
  cursor: pointer;
}
[data-module="spec-creator"] .sc-preview-page[data-action="open-markup-editor"]:hover .sc-preview-canvas-wrap {
  border-color: var(--accent);
}
[data-module="spec-creator"] .sc-preview-page-label {
  font-size: 11px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding-left: 2px;
}
[data-module="spec-creator"] .sc-preview-canvas-wrap {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  min-height: 200px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
[data-module="spec-creator"] .sc-preview-canvas {
  display: block; width: 100%; height: auto;
}
[data-module="spec-creator"] .sc-preview-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
[data-module="spec-creator"] .sc-preview-canvas[data-sc-preview-painted] + .sc-preview-overlay + .sc-preview-empty,
[data-module="spec-creator"] .sc-preview-canvas[data-sc-preview-painted] ~ .sc-preview-empty { display: none; }
[data-module="spec-creator"] .sc-preview-transition-snapshot {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: contain;
  background: var(--panel); pointer-events: none;
  opacity: 1; transition: opacity 0.16s ease;
}
[data-module="spec-creator"] .sc-preview-canvas[data-sc-preview-painted] ~ .sc-preview-transition-snapshot,
[data-module="spec-creator"] .sc-preview-transition-snapshot.is-retiring { opacity: 0; }
[data-module="spec-creator"] .sc-preview-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-tertiary);
  pointer-events: none;
}

/* Spec Desk raw-render chrome overlay -- the header/footer chrome drawn as
   DOM over the raw cutsheet canvas (see preview.js raw path). It sits over
   the WHITE canvas paper: header/footer bands are blank white, so the ink
   uses --strata-markup-text (dark in BOTH themes, same token the markup
   primitives use for on-paper ink). container-type makes 1cqw == 1% of the
   overlay/canvas width so point font sizes map cleanly. Sits BELOW the
   markup SVG in DOM order so markups render on top. */
[data-module="spec-creator"] .sc-chrome-overlay {
  position: absolute; inset: 0;
  container-type: inline-size;
  pointer-events: none;
  overflow: hidden;
  color: var(--strata-markup-text);
}
[data-module="spec-creator"] .sc-preview-canvas:not([data-sc-preview-painted]) ~ .sc-chrome-overlay,
[data-module="spec-creator"] .sc-preview-canvas[data-sc-preview-rendering] ~ .sc-chrome-overlay {
  visibility: hidden;
}
[data-module="spec-creator"] .sc-chrome-logo {
  position: absolute;
  object-fit: contain;
}
[data-module="spec-creator"] .sc-chrome-text {
  position: absolute;
  white-space: nowrap;
  line-height: 1;
  color: var(--strata-markup-text);
  font-family: Helvetica, Arial, sans-serif;
}
[data-module="spec-creator"] .sc-chrome-text-right {
  text-align: right;
}
[data-module="spec-creator"] .sc-chrome-rule {
  position: absolute;
  background: var(--strata-markup-text);
  /* The rule height is set inline as a % of the canvas that mirrors the
     issued PDF's point thickness (0.5-2pt). At a small preview zoom that
     percentage can round below one device pixel and vanish; a 1px floor
     keeps the hairline visible without over-thickening a thick rule. */
  min-height: 1px;
}
[data-module="spec-creator"] .sc-chrome-typebox {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--strata-markup-text);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  color: var(--strata-markup-text);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  overflow: hidden;
}
[data-module="spec-creator"] .sc-chrome-typebox-line {
  white-space: nowrap;
}

/* Detail panel */
[data-module="spec-creator"] .sc-detail { border-left: 1px solid var(--border); background: var(--panel-2); padding: 14px 16px; overflow-y: auto; }
[data-module="spec-creator"] .sc-detail-title { margin: 0 0 12px; font-size: 14px; }
[data-module="spec-creator"] .sc-detail-section { margin-bottom: 14px; }
[data-module="spec-creator"] .sc-detail-section label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 4px; }
[data-module="spec-creator"] .sc-detail-section input,
[data-module="spec-creator"] .sc-detail-section select,
[data-module="spec-creator"] .sc-detail-section textarea {
  width: 100%;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 6px 8px; font-size: 13px; font-family: inherit;
}
[data-module="spec-creator"] .sc-detail-section .sc-readonly { font-size: 13px; color: var(--text-secondary); }
/* Fixture-types editor (U6) */
[data-module="spec-creator"] .sc-ft-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
[data-module="spec-creator"] .sc-ft-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-soft); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 2px 4px 2px 8px; font-size: 12px; line-height: 1.6;
}
[data-module="spec-creator"] .sc-ft-chip-x {
  border: none; background: none; cursor: pointer; color: var(--text-tertiary);
  font-size: 15px; line-height: 1; padding: 0 2px;
}
[data-module="spec-creator"] .sc-ft-chip-x:hover { color: var(--error); }
[data-module="spec-creator"] .sc-detail-actions { display: flex; gap: 8px; margin-top: 8px; }
[data-module="spec-creator"] .sc-detail-empty .sc-detail-summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0; }
[data-module="spec-creator"] .sc-detail-empty .sc-detail-summary dt { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
[data-module="spec-creator"] .sc-detail-empty .sc-detail-summary dd { margin: 0; font-size: 13px; }
[data-module="spec-creator"] .sc-detail-hint { font-size: 12px; color: var(--text-secondary); margin-top: 18px; }
[data-module="spec-creator"] .sc-inline-error { margin: 6px 0 0; font-size: 12px; color: var(--error); }
[data-module="spec-creator"] .sc-approvals-options { display: grid; gap: 8px; margin-bottom: 16px; }
[data-module="spec-creator"] .sc-approvals-check { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 13px; }
[data-module="spec-creator"] .sc-approvals-check input { margin: 0; }
[data-module="spec-creator"] .sc-approvals-fields { display: grid; gap: 8px; }
[data-module="spec-creator"] .sc-approvals-type-row { display: grid; grid-template-columns: minmax(52px, auto) 1fr; gap: 6px 8px; padding: 8px; border: 1px solid var(--border); border-radius: var(--panel-radius); }
[data-module="spec-creator"] .sc-approvals-type-code { grid-row: 1 / span 3; align-self: center; color: var(--text-primary); font-size: 13px; }
[data-module="spec-creator"] .sc-approvals-type-row label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; margin: 0; text-transform: none; letter-spacing: normal; }
[data-module="spec-creator"] .sc-approvals-type-row label span { color: var(--text-tertiary); font-size: 11px; }
[data-module="spec-creator"] .sc-approvals-type-row input { min-width: 0; }

/* Project picker (no-project state, lives inside the container) */
[data-module="spec-creator"] .sc-empty { max-width: 720px; margin: 80px auto; padding: 20px; text-align: center; }
[data-module="spec-creator"] .sc-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 18px; }
[data-module="spec-creator"] .sc-pick { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--button-radius); cursor: pointer; color: var(--text-primary); text-align: left; font-size: 13px; }
[data-module="spec-creator"] .sc-pick:hover { background: var(--row-hover); }
[data-module="spec-creator"] .sc-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
[data-module="spec-creator"] .sc-pick-name { flex: 1 1 auto; }
[data-module="spec-creator"] .sc-pick-code { color: var(--text-tertiary); font-size: 12px; }

/* Loading shell */
[data-module="spec-creator"] .sc-loading { text-align: center; padding: 80px 0; color: var(--text-secondary); }
[data-module="spec-creator"] .sc-load-error {
  max-width: 420px; margin: 80px auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: var(--panel-radius);
}
[data-module="spec-creator"] .sc-load-error-title { font-weight: 600; color: var(--text-primary); }
[data-module="spec-creator"] .sc-load-error-msg { font-size: 13px; color: var(--text-secondary); }

/* Historical view */
[data-module="spec-creator"] .sc-historical { display: flex; flex-direction: column; height: 100%; }
[data-module="spec-creator"] .sc-historical-banner { background: var(--accent-soft); color: var(--text-primary); padding: 10px 16px; border-bottom: 1px solid var(--accent-line); font-size: 13px; }
[data-module="spec-creator"] .sc-historical-iframe { flex: 1 1 auto; width: 100%; border: 0; background: var(--panel-2); }
[data-module="spec-creator"] .sc-historical-empty { padding: 60px 24px; text-align: center; color: var(--text-secondary); }

/* Phone breakpoint -- collapse the three-column grid to a single column. */
@media (max-width: 900px) {
  [data-module="spec-creator"] .sc-main { grid-template-columns: 1fr; }
  [data-module="spec-creator"] .sc-thumbs,
  [data-module="spec-creator"] .sc-detail { border: 0; border-bottom: 1px solid var(--border); max-height: 220px; }
  [data-module="spec-creator"] .sc-canvas { padding: 16px; }
}

/* iOS input zoom prevention (container) */
@media (max-width: 640px) {
  [data-module="spec-creator"] input,
  [data-module="spec-creator"] select,
  [data-module="spec-creator"] textarea { font-size: 16px; }
}

/* ===================================================================
 * Phase 5 (Decision G): page-detail reference panel + Change product popover.
 * Tier 1 (container-rendered).
 * ===================================================================*/

[data-module="spec-creator"] .sc-ref-panel {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}
[data-module="spec-creator"] .sc-ref-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
[data-module="spec-creator"] .sc-ref-title {
  margin: 0; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
}
[data-module="spec-creator"] .sc-ref-badge {
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em;
}
[data-module="spec-creator"] .sc-ref-badge-warn {
  background: var(--error-soft); color: var(--error);
}
[data-module="spec-creator"] .sc-ref-data {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 12px; margin: 0; font-size: 12px;
}
[data-module="spec-creator"] .sc-ref-data dt {
  color: var(--text-tertiary); font-weight: 500;
}
[data-module="spec-creator"] .sc-ref-data dd {
  margin: 0; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis;
}
[data-module="spec-creator"] .sc-ref-loading,
[data-module="spec-creator"] .sc-ref-empty {
  color: var(--text-tertiary); font-style: italic;
}
[data-module="spec-creator"] .sc-ref-freshness {
  margin-top: 8px; font-size: 11px; color: var(--text-tertiary);
}
[data-module="spec-creator"] .sc-ref-freshness.sc-ref-warn { color: var(--error); }
[data-module="spec-creator"] .sc-ref-actions {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
[data-module="spec-creator"] .sc-ref-change,
[data-module="spec-creator"] .sc-ref-add-component,
[data-module="spec-creator"] .sc-ref-reset {
  font-size: 12px;
}
/* .btn-ghost has NO desktop platform rule (only a mobile @media one in
   platform/mobile.css), so the classic "Reset from Fixture List" ghost button
   renders as unstyled inline text on desktop. Give this module's ghost buttons
   the shared button box + a subtle ghost appearance. Tokens only; both themes. */
[data-module="spec-creator"] .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--input-height); padding: 0 12px;
  border-radius: var(--button-radius);
  font-size: 12px; font-weight: 600; line-height: 1;
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
[data-module="spec-creator"] .btn-ghost:hover {
  background: var(--row-hover); color: var(--text-primary);
  border-color: var(--border);
}

/* Change product popover (in-container, position: fixed). */
[data-module="spec-creator"] .sc-pop {
  position: fixed; z-index: 5000;
  background: var(--panel); color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg);
  width: 360px; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
[data-module="spec-creator"] .sc-pop-md { width: 420px; }
[data-module="spec-creator"] .sc-pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
[data-module="spec-creator"] .sc-pop-title {
  flex: 1; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-module="spec-creator"] .sc-pop-close {
  background: transparent; border: 0; color: var(--text-secondary);
  cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px;
}
[data-module="spec-creator"] .sc-pop-close:hover { background: var(--row-hover); color: var(--text-primary); }
[data-module="spec-creator"] .sc-pop-body { padding: 0; max-height: 360px; overflow-y: auto; }
[data-module="spec-creator"] .sc-pop-foot {
  padding: 8px 12px; border-top: 1px solid var(--border);
  background: var(--panel-2);
}
[data-module="spec-creator"] .sc-pop-help { font-size: 11px; color: var(--text-tertiary); }

/* Phase 5 (Decision B continued) -- inline "Include..." text-link
 * affordance still used inside the right detail panel. The full
 * thumbnail-grid picker rules live in the Tier 2 modal-content
 * section below (.sc-hp-* classes are unscoped on purpose).
 */
[data-module="spec-creator"] .sc-ref-include {
  background: transparent; border: 0;
  color: var(--accent); cursor: pointer;
  font-size: 11px; padding: 0 0 0 4px;
  text-decoration: underline; font-family: inherit;
}
[data-module="spec-creator"] .sc-ref-include:hover { color: var(--accent); opacity: 0.8; }

/* ===================================================================
 * Spec Desk shell. Tier 1 (container-rendered). Visual target:
 * _mockups/spec-creator-ux-2026-07/spec-desk-hifi.html (untracked design
 * study) -- translated here onto the platform's real tokens (--panel,
 * --border, --text-*, --accent, --success/--warning/--error) rather than
 * the mockup's own standalone token names.
 * =================================================================== */

[data-module="spec-creator"] .sc-desk-root { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bg); color: var(--text-primary); }

/* Topbar -- reuses .sc-pkg-meta-style typography; brandmark + saved
   indicator are new-in-S2 chrome, both purely decorative. */
[data-module="spec-creator"] .sc-desk-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
}
[data-module="spec-creator"] .sc-desk-brandmark {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent));
  opacity: 0.85;
}
[data-module="spec-creator"] .sc-desk-apptitle { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
[data-module="spec-creator"] .sc-desk-apptitle small { color: var(--text-tertiary); font-weight: 500; margin-left: 8px; font-size: 12px; }

/* RS -- package-kind indicator (renderKindTag). Absent for an ordinary
   spec package; a small pill, not a loud badge, for a PM submittal
   package. Doubles as the entry point to the Cover modal's PM Submittal
   preset flow (shares data-action="edit-cover" with the Cover... button). */
[data-module="spec-creator"] .sc-desk-kindtag {
  appearance: none; border: 1px solid var(--border); border-radius: 20px;
  padding: 3px 10px; font-size: 11px; font-family: var(--font-mono);
  letter-spacing: 0.02em; background: var(--panel-2); color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-kindtag:hover { border-color: var(--accent); color: var(--text-primary); }
[data-module="spec-creator"] .sc-desk-kindtag.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

[data-module="spec-creator"] .sc-desk-grow { flex: 1 1 auto; }
[data-module="spec-creator"] .sc-desk-topbar .btn-primary,
[data-module="spec-creator"] .sc-desk-topbar .btn-secondary { touch-action: manipulation; }

/* Spine -- soft progress strip, informational only (see spec-desk.js
   renderSpine() comment: never fabricates a locked/blocked state). */
[data-module="spec-creator"] .sc-desk-spine {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--border); background: var(--panel-2);
  font-size: 12px; color: var(--text-tertiary);
}
[data-module="spec-creator"] .sc-desk-arw { color: var(--border-strong); margin: 0 2px; }
[data-module="spec-creator"] .sc-desk-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 20px; color: var(--text-tertiary); white-space: nowrap;
}
[data-module="spec-creator"] .sc-desk-step-n {
  width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-family: var(--font-mono);
}
[data-module="spec-creator"] .sc-desk-step.done { color: var(--text-secondary); }
[data-module="spec-creator"] .sc-desk-step.done .sc-desk-step-n { background: var(--success); border-color: var(--success); color: var(--bg); }
[data-module="spec-creator"] .sc-desk-step.cur { color: var(--text-primary); background: var(--accent-soft); font-weight: 600; }
[data-module="spec-creator"] .sc-desk-step.cur .sc-desk-step-n { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Desk body: index | center | inspector */
[data-module="spec-creator"] .sc-desk-body { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; flex: 1 1 auto; min-height: 0; }

/* LEFT index */
[data-module="spec-creator"] .sc-desk-index { border-right: 1px solid var(--border); padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
[data-module="spec-creator"] .sc-desk-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 7px 10px; color: var(--text-tertiary); font-size: 12.5px;
  background: var(--panel-2); margin-bottom: 11px;
}
[data-module="spec-creator"] .sc-desk-search:focus-within { border-color: var(--accent); }
[data-module="spec-creator"] .sc-desk-search svg { flex: none; color: var(--text-tertiary); }
/* Live search input (wired-up per polish pass) -- sits inside the same
   bordered/backgrounded box as before; the input itself carries no
   border/background of its own so it reads as one continuous control
   with the icon, not a nested field. iOS 16px zoom-prevention already
   covers this via the generic "input, select, textarea" rules below. */
[data-module="spec-creator"] .sc-desk-search-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: transparent; outline: none;
  color: var(--text-primary); font: inherit; font-size: 12.5px; padding: 0;
}
[data-module="spec-creator"] .sc-desk-search-input::placeholder { color: var(--text-tertiary); }
/* Round-2 polish -- clear (X) button. Lives inside the same bordered box
   as the input/icon; index.js's 'input' listener toggles its `hidden`
   attribute directly (no re-render) so the input's focus/caret survive
   every keystroke. */
[data-module="spec-creator"] .sc-desk-search-clear {
  flex: none; appearance: none; border: 0; background: none; padding: 0;
  width: 16px; height: 16px; border-radius: 50%; line-height: 1; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); cursor: pointer; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-search-clear:hover { color: var(--text-primary); background: var(--row-hover); }
[data-module="spec-creator"] .sc-desk-search-clear[hidden] { display: none; }
/* Groups wrapper (region-scoped re-render target for the search filter --
   see spec-desk.js's rerenderDeskIndexGroups). Same flex/gap the groups
   used to get directly from .sc-desk-index before this wrapper existed. */
[data-module="spec-creator"] .sc-desk-igroups { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
[data-module="spec-creator"] .sc-desk-igrp { margin-bottom: 4px; }
[data-module="spec-creator"] .sc-desk-igrp > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 6px 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-tertiary); font-weight: 600;
}
[data-module="spec-creator"] .sc-desk-igrp > summary::-webkit-details-marker { display: none; }
[data-module="spec-creator"] .sc-desk-igrp > summary::before { content: "\203A"; display: inline-block; width: 8px; transition: transform 0.12s; color: var(--text-tertiary); }
[data-module="spec-creator"] .sc-desk-igrp[open] > summary::before { transform: rotate(90deg); }
[data-module="spec-creator"] .sc-desk-cnt { margin-left: auto; font-size: 9.5px; color: var(--text-tertiary); }
[data-module="spec-creator"] .sc-desk-igrp-empty { padding: 6px 9px; font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }
[data-module="spec-creator"] .sc-desk-irow {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; width: 100%;
  border-radius: var(--button-radius); cursor: pointer; border: 1px solid transparent;
  min-height: 44px; background: transparent; color: var(--text-primary);
  font-family: inherit; text-align: left; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-irow:hover { background: var(--accent-soft); }
[data-module="spec-creator"] .sc-desk-irow.sel { background: var(--accent-soft); border-color: var(--accent); }
[data-module="spec-creator"] .sc-desk-irow-main { min-width: 0; flex: 1 1 auto; }
[data-module="spec-creator"] .sc-desk-icode { font-weight: 640; font-size: 13.5px; letter-spacing: -0.01em; }
[data-module="spec-creator"] .sc-desk-isub { font-size: 10.5px; color: var(--text-tertiary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-module="spec-creator"] .sc-desk-irow-rgt { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: none; }
[data-module="spec-creator"] .sc-desk-mk { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
[data-module="spec-creator"] .sc-desk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
[data-module="spec-creator"] .sc-desk-dot-ok { background: var(--success); }
[data-module="spec-creator"] .sc-desk-dot-wn { background: var(--warning); }
[data-module="spec-creator"] .sc-desk-dot-cr { background: var(--error); }

/* CENTER */
[data-module="spec-creator"] .sc-desk-center { background: var(--panel-2); overflow-y: auto; position: relative; display: flex; flex-direction: column; }
[data-module="spec-creator"] .sc-desk-empty,
[data-module="spec-creator"] .sc-desk-placeholder {
  max-width: 460px; margin: 80px auto; padding: 20px; text-align: center; color: var(--text-secondary);
}
[data-module="spec-creator"] .sc-desk-empty h2,
[data-module="spec-creator"] .sc-desk-placeholder h2 { color: var(--text-primary); font-size: 18px; margin: 0 0 10px; }
[data-module="spec-creator"] .sc-desk-placeholder-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 5px; padding: 4px 9px; margin-bottom: 12px;
}
[data-module="spec-creator"] .sc-desk-doc { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
[data-module="spec-creator"] .sc-desk-center:has(> .sc-desk-doc) { overflow: hidden; }

/* S5a/S6 -- embedded markup (desk-only). The center hosts the pdf-markup tool
   INLINE (ctx.tools.mount appends its .tool-embed wrapper into the host). The
   desk renders placement slots only; the tool owns its markup chrome. */
[data-module="spec-creator"] .sc-desk-markup { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
[data-module="spec-creator"] .sc-desk-markup-head {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
}
[data-module="spec-creator"] .sc-desk-mk-id {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; font-weight: 650;
  color: var(--text-primary);
}
[data-module="spec-creator"] .sc-desk-mk-pill {
  flex: none; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 20px; background: var(--panel-2); color: var(--text-secondary);
  font-size: 10px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
}
[data-module="spec-creator"] .sc-desk-markup-head .btn-primary,
[data-module="spec-creator"] .sc-desk-markup-head .btn-secondary { touch-action: manipulation; }
[data-module="spec-creator"] .sc-desk-markup-chrome {
  flex: none; display: flex; align-items: center; min-width: 0;
  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--panel);
  overflow-x: auto; overflow-y: visible;
}
[data-module="spec-creator"] .sc-desk-markup-chrome:empty { display: none; }
[data-module="spec-creator"] .sc-desk-markup-host {
  flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column;
  background: var(--panel-2);
}
[data-module="spec-creator"] .sc-desk-markup-host .tool-embed { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
[data-module="spec-creator"] .sc-desk-markup-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 13px;
}
/* Polish pass -- the type-code breadcrumb used to sit in its own boxed bar
   (background + border-bottom), one more "panel" layer stacked above the
   canvas card's own panel. Flattened to plain quiet text sitting directly
   on the center region's own background -- see the .sc-canvas-card
   override below for the matching flatten on the reused classic card. */
[data-module="spec-creator"] .sc-desk-doc-head {
  padding: 10px 24px 8px; background: transparent; border-bottom: 0; flex: none;
  display: flex; align-items: center; gap: 10px;
}
[data-module="spec-creator"] .sc-desk-doc-role {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-tertiary);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-module="spec-creator"] .sc-desk-doc-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
[data-module="spec-creator"] .sc-desk-doc-head .btn-primary,
[data-module="spec-creator"] .sc-desk-doc-head .btn-ghost { border-radius: 20px; touch-action: manipulation; }
[data-module="spec-creator"] .sc-desk-mirror-banner {
  margin: 0 24px 12px; padding: 7px 10px; border: 1px solid var(--border);
  border-left: 3px solid var(--success); border-radius: var(--button-radius);
  background: var(--panel); color: var(--text-secondary); font-size: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
[data-module="spec-creator"] .sc-desk-mirror-banner.is-warn { border-left-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
[data-module="spec-creator"] .sc-desk-mirror-banner.is-good { border-left-color: var(--success); background: var(--success-soft); color: var(--success); }
[data-module="spec-creator"] .sc-desk-mirror-msg { min-width: 0; flex: 0 1 auto; }
/* Canvas padding starts below the desk-owned header and mirror banner. The
   reused classic toolbar is hidden desk-side below. */
[data-module="spec-creator"] .sc-desk-doc-canvas { flex: 1 1 0; min-width: 0; overflow: auto; padding: 0 24px 24px; }

/* Round-2 polish -- center UI pass v2: kill the "panel within a panel
   within a panel" the round-1 flatten left in place. Reused classic
   canvas (render.js's renderCanvas()) still supplies the markup verbatim
   -- render.js itself is UNTOUCHED, these are desk-scoped overrides only.
   Before (round 1): card-in-a-card (bordered .sc-canvas-card, itself
   inside the bordered doc-head bar and the padded doc-canvas), capped at
   a narrow 720px(->1040px) reading width, actions row scrolled away with
   the page. After (round 2): the redundant classic heading (duplicates
   the doc-head breadcrumb + the inspector's own 24px type-code header) is
   dropped; the action row becomes ONE slim toolbar pinned to the top of
   the center on scroll; the page itself grows to a real hero width and
   gets a paper-toned surface + lift so it reads as the dominant object,
   not a panel among equals. */
[data-module="spec-creator"] .sc-desk-doc-canvas .sc-canvas-head { display: none; }
[data-module="spec-creator"] .sc-desk-doc-canvas .sc-canvas-card {
  /* Up from round 1's 1040px -- large enough to dominate the center
     column on typical + wide viewports ("up to the container width" per
     the brief). Not left uncapped: preview.js's shared PDF.js paint
     targets a bitmap up to ~900 physical px wide (the SAME cap the
     classic 720px card already rendered against), so stretching the
     hero past roughly this width buys layout presence without buying
     any more actual sharpness -- a preview.js-level change would be
     needed to raise that ceiling. */
  max-width: 1400px; background: transparent; border: 0; border-radius: 0; padding: 0;
}
/* The reused classic canvas still emits its toolbar, but document-mode desk
   chrome owns Preview and Enter markup now. */
[data-module="spec-creator"] .sc-desk-doc-canvas .sc-canvas-actions { display: none; }
/* The page itself: a paper-toned surface lifted off the center's own
   panel-2 background (both were panel-2 before -- the "page" barely read
   as a distinct object). Desk-scoped; the classic .sc-preview-canvas-wrap
   rule above is untouched. */
[data-module="spec-creator"] .sc-desk-doc-canvas .sc-preview-canvas-wrap {
  background: var(--panel); border-color: var(--border-strong); box-shadow: var(--shadow);
}
/* Loading indications (b) -- while a page's PDF/preview paints, show a
   content-shaped shimmer instead of the plain "Loading page N..." text
   (render.js's renderPreviewStrip emits that text verbatim; render.js is
   untouched -- this is a purely visual, desk-scoped CSS override that
   hides the text and paints a shimmer in its place using the SAME
   data-sc-preview-painted attribute preview.js already sets when the
   real bitmap lands, so it disappears the instant the real paint is
   ready with no extra JS). */
[data-module="spec-creator"] .sc-desk-doc-canvas .sc-preview-canvas-wrap:not(:has(.sc-preview-canvas[data-sc-preview-painted]))::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border-strong) 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: sc-desk-shimmer 1.4s ease infinite;
}
[data-module="spec-creator"] .sc-desk-doc-canvas .sc-preview-empty { color: transparent; }
@keyframes sc-desk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-module="spec-creator"] .sc-desk-doc-canvas .sc-preview-canvas-wrap::before { animation: none; }
}

/* RIGHT inspector -- read-only for S2 (no data-edit-field inputs). */
[data-module="spec-creator"] .sc-desk-inspector { border-left: 1px solid var(--border); padding: 14px 16px; overflow-y: auto; background: var(--panel-2); }
[data-module="spec-creator"] .sc-desk-insp-empty { color: var(--text-secondary); font-size: 13px; padding: 20px 0; }
[data-module="spec-creator"] .sc-desk-idhdr { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
[data-module="spec-creator"] .sc-desk-idcodes { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
[data-module="spec-creator"] .sc-desk-idprod { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; }
[data-module="spec-creator"] .sc-desk-idtags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
[data-module="spec-creator"] .sc-desk-deco-code { margin-top: 11px; }
[data-module="spec-creator"] .sc-desk-deco-code-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 4px; }
[data-module="spec-creator"] .sc-desk-deco-code-input {
  width: 100%;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 6px 8px; font-size: 13px; font-family: var(--font-mono);
}
[data-module="spec-creator"] .sc-desk-deco-code .sc-hint { font-size: 12px; color: var(--text-tertiary); margin: 4px 0 0; }
[data-module="spec-creator"] .sc-desk-tag { font-size: 10.5px; font-family: var(--font-mono); border-radius: 20px; padding: 2px 9px; letter-spacing: 0.02em; }
[data-module="spec-creator"] .sc-desk-tag-good { background: var(--success-soft); color: var(--success); }
[data-module="spec-creator"] .sc-desk-tag-warn { background: var(--warning-soft); color: var(--warning); }
[data-module="spec-creator"] .sc-desk-tag-info { background: var(--accent-soft); color: var(--accent); }
[data-module="spec-creator"] .sc-desk-tag-sku { background: var(--panel); color: var(--text-secondary); border: 1px solid var(--border); }

/* S7 -- merge same-SKU inspector affordance. Hidden by default (renderer
   returns '' when there is no real candidate); this is the CALM-STATE case,
   so the chip itself is deliberately quiet (dashed border, tertiary text --
   spec-desk-hifi.html's ".chip.add") rather than an eye-catching primary
   action. .is-disabled is the dirty-blocked state (native `disabled` attr
   already suppresses the click; the dimmer look plus title tooltip is the
   only additional signal needed). */
[data-module="spec-creator"] .sc-desk-imerge { margin-top: 10px; }
[data-module="spec-creator"] .sc-desk-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--button-radius);
  padding: 3px 9px; font-size: 12px; font-weight: 600; font-family: inherit;
}
[data-module="spec-creator"] .sc-desk-chip-add {
  background: transparent; color: var(--text-tertiary); border: 1px dashed var(--border-strong);
  font-weight: 500; cursor: pointer;
}
[data-module="spec-creator"] .sc-desk-chip-add:hover:not(.is-disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
[data-module="spec-creator"] .sc-desk-chip-add.is-disabled { cursor: not-allowed; opacity: 0.55; }

[data-module="spec-creator"] .sc-desk-task { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--panel-radius); overflow: hidden; }
[data-module="spec-creator"] .sc-desk-task-hd {
  padding: 9px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-tertiary); display: flex; align-items: center; gap: 7px;
}
[data-module="spec-creator"] .sc-desk-task-bd { padding: 10px 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
[data-module="spec-creator"] .sc-desk-task-title { color: var(--text-primary); font-size: 13px; font-weight: 650; margin-bottom: 4px; }
[data-module="spec-creator"] .sc-desk-task-copy { margin: 0 0 8px; }
[data-module="spec-creator"] .sc-desk-kv-v.sc-desk-kv-good { color: var(--success); }
[data-module="spec-creator"] .sc-desk-kv-v.sc-desk-kv-warn { color: var(--warning); }
[data-module="spec-creator"] .sc-desk-task-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* S6 -- inspector props host. The embedded pdf-markup tool renders its OWN
   selection-properties panel into this container while marking up inline (its
   floating popover is hidden). The tool's own controls carry their styling from
   tools/pdf-markup/styles.css; we only frame the container + the empty state. */
[data-module="spec-creator"] .sc-desk-markup-props { margin-top: 12px; }
[data-module="spec-creator"] .sc-desk-markup-props-empty {
  border: 1px dashed var(--border); border-radius: var(--button-radius);
  padding: 12px; font-size: 12px; color: var(--text-tertiary);
  text-align: center; line-height: 1.45;
}

[data-module="spec-creator"] .sc-desk-acc { margin-top: 12px; }
[data-module="spec-creator"] .sc-desk-acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 8px 0;
  border-top: 1px solid var(--border);
}
[data-module="spec-creator"] .sc-desk-acc > summary::-webkit-details-marker { display: none; }
[data-module="spec-creator"] .sc-desk-acc > summary::before { content: "\203A"; color: var(--text-tertiary); width: 9px; display: inline-block; transition: transform 0.12s; }
[data-module="spec-creator"] .sc-desk-acc[open] > summary::before { transform: rotate(90deg); }
[data-module="spec-creator"] .sc-desk-memo {
  border: 1px solid var(--border); border-radius: var(--button-radius); background: var(--panel);
  padding: 9px 10px; font-size: 12px; color: var(--text-secondary); min-height: 44px; white-space: pre-wrap;
}
[data-module="spec-creator"] .sc-desk-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--border); }
[data-module="spec-creator"] .sc-desk-kv-k { color: var(--text-tertiary); }
[data-module="spec-creator"] .sc-desk-kv-v { color: var(--text-primary); text-align: right; font-weight: 540; }

/* Reconcile queue (S3) -- burn-down list of this module's OWN findings. */
[data-module="spec-creator"] .sc-desk-qwrap { padding: 20px 24px; max-width: 720px; margin: 0 auto; width: 100%; }
[data-module="spec-creator"] .sc-desk-qhead { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
[data-module="spec-creator"] .sc-desk-qhead h3 { margin: 0; font-size: 16px; font-weight: 650; color: var(--text-primary); letter-spacing: -0.01em; }
[data-module="spec-creator"] .sc-desk-grow { flex: 1 1 auto; }
[data-module="spec-creator"] .sc-desk-qcount { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
[data-module="spec-creator"] .sc-desk-qcount.is-blocking { color: var(--error); font-weight: 600; }
[data-module="spec-creator"] .sc-desk-qsub { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 16px; }
[data-module="spec-creator"] .sc-desk-qempty { font-size: 13px; color: var(--text-tertiary); padding: 20px 0; }
[data-module="spec-creator"] .sc-desk-qsection { margin-bottom: 14px; }
[data-module="spec-creator"] .sc-desk-qsec-h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 8px;
}
[data-module="spec-creator"] .sc-desk-qrow {
  display: flex; align-items: stretch; gap: 12px; padding: 11px 13px; border: 1px solid var(--border);
  border-radius: var(--panel-radius); margin-bottom: 9px; background: var(--panel); cursor: pointer;
}
[data-module="spec-creator"] .sc-desk-qrow.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
[data-module="spec-creator"] .sc-desk-qst { width: 3px; flex: none; border-radius: 3px; background: var(--warning); }
[data-module="spec-creator"] .sc-desk-qrow.cr .sc-desk-qst { background: var(--error); }
[data-module="spec-creator"] .sc-desk-qrow.ok .sc-desk-qst { background: var(--text-tertiary); }
[data-module="spec-creator"] .sc-desk-qmeta { flex: 1 1 auto; min-width: 0; }
[data-module="spec-creator"] .sc-desk-qt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 620; color: var(--text-primary); }
[data-module="spec-creator"] .sc-desk-qd { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
[data-module="spec-creator"] .sc-desk-qview {
  align-self: center; flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent);
  background: none; border: 1px solid var(--border); border-radius: var(--button-radius); padding: 4px 9px;
  cursor: pointer; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-qview:hover { background: var(--accent-soft); }
[data-module="spec-creator"] .sc-desk-qacts { display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; }
[data-module="spec-creator"] .sc-desk-qact { touch-action: manipulation; }
[data-module="spec-creator"] .sc-desk-qbucket {
  margin-top: 6px; border: 1px dashed var(--border); border-radius: var(--panel-radius); padding: 4px 4px 4px 13px;
}
[data-module="spec-creator"] .sc-desk-qbucket > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 9px 9px 0;
  font-size: 12.5px; color: var(--text-tertiary);
}
[data-module="spec-creator"] .sc-desk-qbucket > summary::-webkit-details-marker { display: none; }
[data-module="spec-creator"] .sc-desk-qbucket > summary b { color: var(--success); }
[data-module="spec-creator"] .sc-desk-qbucket-arrow { display: inline-block; transition: transform 0.12s; color: var(--text-tertiary); }
[data-module="spec-creator"] .sc-desk-qbucket[open] .sc-desk-qbucket-arrow { transform: rotate(90deg); }
[data-module="spec-creator"] .sc-desk-qbucket .sc-desk-qrow { margin: 0 9px 9px; background: var(--panel-2); }

/* S4 -- source-page filmstrip + inline apply-scope commit bar. */
[data-module="spec-creator"] .sc-desk-docsplit { flex: 1 1 auto; display: flex; min-height: 0; }
[data-module="spec-creator"] .sc-desk-filmstrip {
  width: 96px; flex: none; border-right: 1px solid var(--border); background: var(--panel);
  overflow-y: auto; padding: 10px 8px;
}
[data-module="spec-creator"] .sc-desk-fs-h {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 9px; text-align: center;
}
[data-module="spec-creator"] .sc-desk-fspage {
  position: relative; margin-bottom: 9px; border: 1.5px solid var(--border); border-radius: var(--button-radius);
  overflow: hidden; cursor: pointer; background: var(--panel-2); touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-fspage:hover { border-color: var(--accent); }
[data-module="spec-creator"] .sc-desk-fspage.exc { opacity: 0.5; }
[data-module="spec-creator"] .sc-desk-fs-out {
  position: absolute; top: 4px; left: 4px; background: var(--accent); color: var(--bg);
  font: 700 8px var(--font-mono); border-radius: 3px; padding: 0 5px; line-height: 1.5;
}
/* Round-2 polish -- real page thumbnails (replaces the S4 faux-bar
   placeholder). aspect-ratio matches the hidden-pages picker's own
   thumb wrapper (.sc-hp-thumb-canvas-wrap, 8.5x11) so both surfaces read
   as the same kind of object. The canvas is painted lazily (see
   spec-desk.js#hydrateFilmstripThumbs) via reference-panel.js's
   paintHpThumb -- the exact same PDF.js routine that picker already
   uses -- so this is a second CALLER of that pipeline, not a second
   implementation of it. */
[data-module="spec-creator"] .sc-desk-fs-thumb {
  position: relative; aspect-ratio: 8.5 / 11; overflow: hidden; background: var(--panel);
}
[data-module="spec-creator"] .sc-desk-fs-canvas { display: block; width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
/* Skeleton shimmer -- visible until the sibling canvas gets `data-
   painted` (paintHpThumb sets that attribute on success, same convention
   the hidden-pages picker + the main preview strip already use). */
[data-module="spec-creator"] .sc-desk-fs-skel {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border-strong) 37%, var(--panel-2) 63%);
  background-size: 400% 100%;
  animation: sc-desk-shimmer 1.4s ease infinite;
}
[data-module="spec-creator"] .sc-desk-fs-canvas[data-painted] + .sc-desk-fs-skel { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-module="spec-creator"] .sc-desk-fs-skel { animation: none; }
}
[data-module="spec-creator"] .sc-desk-fs-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 3px 6px; border-top: 1px solid var(--border); font-family: var(--font-mono);
  font-size: 9px; color: var(--text-tertiary); background: var(--panel);
}
[data-module="spec-creator"] .sc-desk-fs-chk {
  appearance: none; width: 15px; height: 15px; border-radius: 3px; border: 1.4px solid var(--border-strong);
  background: var(--panel-2); display: grid; place-items: center; color: var(--bg); cursor: pointer;
  flex: none; padding: 0; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-fs-chk[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
[data-module="spec-creator"] .sc-desk-applybar-wrap:empty { display: none; }
[data-module="spec-creator"] .sc-desk-applybar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border);
  background: var(--accent-soft); font-size: 12px; color: var(--text-primary); flex-wrap: wrap; flex: none;
}
[data-module="spec-creator"] .sc-desk-fs-al { font-weight: 600; }
[data-module="spec-creator"] .sc-desk-fs-scopes { display: flex; gap: 5px; flex-wrap: wrap; }
[data-module="spec-creator"] .sc-desk-fs-scope {
  appearance: none; font-size: 11px; border: 1px solid var(--border); background: var(--panel);
  border-radius: 20px; padding: 3px 10px; cursor: pointer; color: var(--text-secondary);
  font-family: inherit; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-fs-scope:hover { border-color: var(--accent); color: var(--text-primary); }
[data-module="spec-creator"] .sc-desk-fs-scope.on { border-color: var(--accent); background: var(--accent); color: var(--bg); }
[data-module="spec-creator"] .sc-desk-fs-undo {
  appearance: none; margin-left: auto; background: none; border: 0; padding: 0;
  color: var(--accent); cursor: pointer; font-weight: 560; font-family: inherit; font-size: 12px;
  touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-fs-undo:hover { text-decoration: underline; }

/* S8 -- Package Jobs tray (draft-compose only). Persistent, non-modal,
   bottom-right region in the desk chrome -- see spec-desk.js's S8 header
   comment. `:empty` hides the tray with zero jobs (the "idle = hidden"
   choice, matching .sc-desk-applybar-wrap's established pattern above). */
[data-module="spec-creator"] .sc-desk-jobs:empty { display: none; }
[data-module="spec-creator"] .sc-desk-jobs {
  position: absolute; right: 16px; bottom: 16px; width: 300px; max-width: calc(100% - 32px);
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--panel-radius);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: 30;
}
[data-module="spec-creator"] .sc-desk-jobs-hd {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border);
  background: var(--panel); color: var(--text-primary);
  font-size: 12.5px; font-weight: 620; font-family: inherit; cursor: pointer; touch-action: manipulation;
}
[data-module="spec-creator"] .sc-desk-jobs.is-collapsed .sc-desk-jobs-hd { border-bottom: 0; }
[data-module="spec-creator"] .sc-desk-jobs-spin {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid var(--accent-soft); border-top-color: var(--accent);
  animation: sc-desk-jobs-spin 0.8s linear infinite;
}
@keyframes sc-desk-jobs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-module="spec-creator"] .sc-desk-jobs-spin { animation: none; }
}
[data-module="spec-creator"] .sc-desk-jobs-cl { margin-left: auto; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 10.5px; }
[data-module="spec-creator"] .sc-desk-jobs-bd { padding: 10px 12px; max-height: 260px; overflow-y: auto; }
[data-module="spec-creator"] .sc-desk-jobrow { padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--border); }
[data-module="spec-creator"] .sc-desk-jobrow:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
[data-module="spec-creator"] .sc-desk-jobt { display: flex; align-items: center; gap: 8px; font-size: 12px; }
[data-module="spec-creator"] .sc-desk-jobt b { font-weight: 620; color: var(--text-primary); }
[data-module="spec-creator"] .sc-desk-jobrow.done .sc-desk-jobt b { color: var(--success); }
[data-module="spec-creator"] .sc-desk-jobrow.failed .sc-desk-jobt b { color: var(--error); }
[data-module="spec-creator"] .sc-desk-jobnow { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); white-space: nowrap; }
[data-module="spec-creator"] .sc-desk-jobrow.failed .sc-desk-jobnow { color: var(--error); }
[data-module="spec-creator"] .sc-desk-jobtrack { height: 5px; background: var(--panel-2); border-radius: 5px; overflow: hidden; margin-top: 7px; }
[data-module="spec-creator"] .sc-desk-jobtrack > i { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.2s ease; }
[data-module="spec-creator"] .sc-desk-jobstages { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
[data-module="spec-creator"] .sc-desk-jobst {
  font-family: var(--font-mono); font-size: 9px; padding: 2px 7px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--text-tertiary);
}
[data-module="spec-creator"] .sc-desk-jobst.done { color: var(--success); border-color: var(--success); background: var(--success-soft); }
[data-module="spec-creator"] .sc-desk-jobst.now { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
[data-module="spec-creator"] .sc-desk-joberr { font-size: 11.5px; color: var(--error); margin-top: 5px; line-height: 1.4; }
[data-module="spec-creator"] .sc-desk-jobacts { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
[data-module="spec-creator"] .sc-desk-jobopen { font-size: 11.5px; color: var(--accent); font-weight: 600; text-decoration: none; }
[data-module="spec-creator"] .sc-desk-jobopen:hover { text-decoration: underline; }
[data-module="spec-creator"] .sc-desk-jobact { touch-action: manipulation; font-size: 11.5px; }

/* Round-2 polish -- loading indications (a): a desk-shaped shimmer shell
   shown while the FIRST package load is still in flight (spec-desk.js's
   renderDeskLoadingSkeleton), in place of the classic shell's bare
   "Loading package..." text. Reuses the real .sc-desk-topbar / .sc-desk-
   spine / .sc-desk-body / .sc-desk-index / .sc-desk-center / .sc-desk-
   inspector layout classes (so the real content doesn't jump once it
   lands) plus a handful of skeleton-only fill classes. Indeterminate
   shimmer, not a percent bar -- see renderDeskLoadingSkeleton's comment
   for why (nothing countable this early). */
[data-module="spec-creator"] .sc-desk-skel-topbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); background: var(--panel);
}
[data-module="spec-creator"] .sc-desk-skel-spine {
  height: 33px; border-bottom: 1px solid var(--border); background: var(--panel-2);
}
[data-module="spec-creator"] .sc-desk-skel-chip,
[data-module="spec-creator"] .sc-desk-skel-row,
[data-module="spec-creator"] .sc-desk-skel-doc {
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--border-strong) 37%, var(--panel-2) 63%);
  background-size: 400% 100%; border-radius: var(--button-radius);
}
[data-module="spec-creator"] .sc-desk-skel { position: relative; }
[data-module="spec-creator"] .sc-desk-skel::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--panel); opacity: 0.72; pointer-events: none;
}
[data-module="spec-creator"] .sc-desk-skel-chip { height: 16px; }
[data-module="spec-creator"] .sc-desk-skel-w1 { width: 160px; }
[data-module="spec-creator"] .sc-desk-skel-w2 { width: 90px; }
[data-module="spec-creator"] .sc-desk-skel-pane { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
[data-module="spec-creator"] .sc-desk-skel-row { height: 44px; }
[data-module="spec-creator"] .sc-desk-center.sc-desk-skel-pane { align-items: center; justify-content: flex-start; padding-top: 28px; }
[data-module="spec-creator"] .sc-desk-skel-doc { width: min(680px, 100%); height: 60vh; max-height: 620px; }
[data-module="spec-creator"] .sc-desk-loadpanel {
  position: relative; z-index: 2;
  width: min(680px, 100%);
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  box-shadow: var(--shadow);
}
[data-module="spec-creator"] .sc-desk-loadeyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary);
}
[data-module="spec-creator"] .sc-desk-loadpanel h2 {
  margin: 0; color: var(--text-primary); font-size: 18px; line-height: 1.25; font-weight: 680;
}
[data-module="spec-creator"] .sc-desk-loadpanel p {
  margin: 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.45;
}
[data-module="spec-creator"] .sc-desk-loadstatus {
  display: flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 12px; font-weight: 620;
}
[data-module="spec-creator"] .sc-desk-loaddot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: sc-desk-loadpulse 1.6s ease-in-out infinite;
}
@keyframes sc-desk-loadpulse {
  0%, 100% { transform: scale(1); opacity: 0.72; box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { transform: scale(1.18); opacity: 1; box-shadow: 0 0 0 5px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  [data-module="spec-creator"] .sc-desk-skel-chip,
  [data-module="spec-creator"] .sc-desk-skel-row,
  [data-module="spec-creator"] .sc-desk-skel-doc,
  [data-module="spec-creator"] .sc-desk-loaddot { animation: none; }
}

/* Phone / narrow breakpoint -- collapse the three-column desk grid, same
   pattern as the classic shell's .sc-main breakpoint. */
@media (max-width: 900px) {
  [data-module="spec-creator"] .sc-desk-body { grid-template-columns: 1fr; }
  [data-module="spec-creator"] .sc-desk-index,
  [data-module="spec-creator"] .sc-desk-inspector { border: 0; border-bottom: 1px solid var(--border); max-height: 240px; }
  [data-module="spec-creator"] .sc-desk-doc-head { padding: 8px 16px; }
  [data-module="spec-creator"] .sc-desk-mirror-banner { margin: 0 16px 10px; }
  /* Top padding stays 0 here too; document chrome is owned above the
     scroll container. */
  [data-module="spec-creator"] .sc-desk-doc-canvas { padding: 0 16px 16px; }
  [data-module="spec-creator"] .sc-desk-qwrap { padding: 16px; }
  [data-module="spec-creator"] .sc-desk-qrow { flex-wrap: wrap; }
  [data-module="spec-creator"] .sc-desk-qacts { width: 100%; }
  /* S4 -- the filmstrip becomes a horizontal strip above the canvas rather
     than squeezing a fixed-width column into a narrow single-pane layout. */
  [data-module="spec-creator"] .sc-desk-docsplit { flex-direction: column; }
  [data-module="spec-creator"] .sc-desk-filmstrip {
    width: auto; display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  [data-module="spec-creator"] .sc-desk-fspage { width: 64px; flex: none; margin: 0 8px 0 0; }
  [data-module="spec-creator"] .sc-desk-applybar { padding: 9px 12px; }
  /* S8 -- the tray floats over a much smaller viewport at this width;
     drop it to a static, full-width block at the bottom of the shell
     instead of an absolutely-positioned corner card (mirrors
     spec-desk-hifi.html's own <=920px rule for `.jobs`). */
  [data-module="spec-creator"] .sc-desk-jobs { position: static; width: auto; max-width: none; margin: 10px; }
}
@media (max-width: 640px) {
  [data-module="spec-creator"] .sc-desk-root input,
  [data-module="spec-creator"] .sc-desk-root select,
  [data-module="spec-creator"] .sc-desk-root textarea { font-size: 16px; }
}

/* ===================================================================
 * Tier 2: MODAL-CONTENT classes -- UNSCOPED on purpose.
 *
 * These classes appear in `ctx.ui.modal({ content: ... })` HTML, which
 * mounts on `document.body` inside `.strata-overlay`. The overlay has
 * no `data-module` attribute, so any selector that requires `[data-
 * module="spec-creator"]` cannot match. The `.sc-` prefix is the leak
 * guard. Do NOT add `[data-module="spec-creator"]` to any rule below.
 * =================================================================== */

/* Dismiss-finding modal (S3 reconcile queue -- ctx.findings.acknowledge).
   Deliberately its OWN class rather than reusing .sc-hint -- that name is
   already scoped under [data-module="spec-creator"] elsewhere (canvas
   empty/body states), and modal content mounts unscoped on .strata-
   overlay, so a shared name would either not match here or create a
   confusing dual-scope class (W22 modal-content scoping lint). */
.sc-dismiss-form label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.sc-dismiss-form .sc-modal-hint { font-size: 12.5px; color: var(--text-tertiary); margin: 0 0 8px; }

/* Add page modal */
.sc-add-page-options { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sc-add-opt {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  cursor: pointer; color: var(--text-primary); width: 100%;
  font-family: inherit;
}
.sc-add-opt[disabled] { opacity: 0.55; cursor: not-allowed; }
.sc-add-opt strong { font-size: 13px; }
.sc-add-opt span { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sc-add-opt:not([disabled]):hover { background: var(--row-hover); }

/* Cover form modal */
.sc-cover-form { display: flex; flex-direction: column; gap: 10px; }
.sc-cover-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.sc-cover-form input,
.sc-cover-form select,
.sc-cover-form textarea {
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 6px 8px; font-size: 13px; font-family: inherit;
}
.sc-pm-preset-offer {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  color: var(--text-secondary); font-size: 12px;
}
.sc-pm-preset-offer[hidden] { display: none; }
.sc-cover-form .sc-pm-preset-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text-primary); }
.sc-cover-form .sc-pm-preset-check input { margin: 0; padding: 0; width: auto; }
.sc-pm-preset-active strong { color: var(--text-primary); }
.sc-pm-remove-confirm p { margin: 0 0 10px; }
.sc-pm-remove-confirm ul { margin: 0 0 10px; padding-left: 20px; }

/* Cutsheet picker modal */
.sc-cutsheet-pick { display: flex; flex-direction: column; gap: 6px; }
.sc-cutsheet-pick > p { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.sc-cutsheet-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.sc-cutsheet-row {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  cursor: pointer; color: var(--text-primary); font-size: 13px; font-family: inherit;
}
.sc-cutsheet-row:hover { background: var(--row-hover); }

/* Rendered-module picker modal */
.sc-rendered-pick { display: flex; flex-direction: column; gap: 8px; }
.sc-rendered-pick > p { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.sc-rendered-opt {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  cursor: pointer; color: var(--text-primary); font-family: inherit;
}
.sc-rendered-opt strong { font-size: 13px; }
.sc-rendered-opt span { font-size: 12px; color: var(--text-secondary); }
.sc-rendered-opt:hover { background: var(--row-hover); }

/* Phase 5 (Decision B continued) -- thumbnail-grid page picker.
 * Modal content; classes unscoped per the Tier 2 convention.
 * Each tile is canvas (clickable button -> opens single-page view)
 * + Include checkbox below. Selected tiles show a check badge over
 * the canvas; excluded tiles are dimmed. Single-page view replaces
 * the grid in-place via innerHTML swap.
 */
.sc-hp-modal { display: flex; flex-direction: column; gap: 12px; }
.sc-hp-help { font-size: 13px; color: var(--text-secondary); margin: 0; }
.sc-hp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 2px;
}
.sc-hp-thumb {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  background: var(--panel-2);
  border: 2px solid var(--border);
  border-radius: var(--button-radius);
  font-family: inherit;
  color: var(--text-primary);
  text-align: center;
  opacity: 0.65;
  transition: border-color 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
.sc-hp-thumb:hover { opacity: 0.95; }
.sc-hp-thumb.is-selected { border-color: var(--accent); opacity: 1; background: var(--panel); }
.sc-hp-thumb-canvas-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.sc-hp-thumb-canvas-wrap:hover { border-color: var(--accent); }
.sc-hp-thumb-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sc-hp-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-tertiary);
  pointer-events: none;
}
.sc-hp-check {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.sc-hp-thumb.is-selected .sc-hp-check { display: flex; }
.sc-hp-magnify {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 22px; height: 22px;
  background: var(--panel);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.sc-hp-thumb-canvas-wrap:hover .sc-hp-magnify { opacity: 1; }
.sc-hp-thumb-include {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.sc-hp-thumb-include input[type="checkbox"] { margin: 0; cursor: pointer; pointer-events: none; }

/* Single-page view (replaces grid in-place via innerHTML swap). */
.sc-hp-single { display: flex; flex-direction: column; gap: 10px; }
.sc-hp-single-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sc-hp-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  font-family: inherit;
}
.sc-hp-back:hover { background: var(--row-hover); color: var(--text-primary); }
.sc-hp-single-counter {
  flex: 1; text-align: center;
  font-size: 13px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sc-hp-single-nav { display: flex; gap: 6px; }
.sc-hp-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--panel-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
}
.sc-hp-arrow:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.sc-hp-single-body {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  padding: 12px;
  min-height: 50vh;
}
.sc-hp-single-body canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.sc-hp-single-foot {
  display: flex; justify-content: center;
  padding: 4px 0;
}

/* Phase 5 (Decision C) -- merge diff modal */
.sc-merge { display: flex; flex-direction: column; gap: 12px; }
.sc-merge-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px;
}
.sc-merge-col {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 10px 12px;
}
.sc-merge-col h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.sc-merge-dl {
  display: grid; grid-template-columns: 80px minmax(0, 1fr);
  gap: 4px 8px; margin: 0; font-size: 12px;
}
.sc-merge-dl dt { color: var(--text-tertiary); font-weight: 500; }
.sc-merge-dl dd { margin: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.sc-merge-result {
  font-size: 13px; color: var(--text-primary); margin: 0;
}
.sc-merge-warn {
  background: var(--error-soft); color: var(--error);
  border: 1px solid var(--error); border-radius: var(--button-radius);
  padding: 8px 10px; font-size: 12px;
}

/* Batch "Combine duplicate types" preview modal */
.sc-combine { display: flex; flex-direction: column; gap: 10px; }
.sc-combine p { margin: 0; font-size: 13px; color: var(--text-primary); }
.sc-combine-skiphdr { color: var(--text-secondary); font-size: 12px; }
.sc-combine-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sc-combine-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--button-radius); padding: 8px 12px;
  font-size: 13px; color: var(--text-primary);
}
.sc-combine-row strong { overflow: hidden; text-overflow: ellipsis; }
.sc-combine-meta { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.sc-combine-skip { border-style: dashed; opacity: 0.85; }
.sc-combine-skip .sc-combine-meta { color: var(--text-secondary); }
.sc-combine-subset-btn { flex: 0 0 auto; white-space: nowrap; }

/* Chunked subset merge -- selectable code chips + auto-chunk control */
.sc-subset { display: flex; flex-direction: column; gap: 12px; }
.sc-subset-help { margin: 0; font-size: 12px; color: var(--text-secondary); }
.sc-subset-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 260px; overflow-y: auto;
}
.sc-subset-chip {
  font-family: inherit; font-size: 12px; line-height: 1.2;
  padding: 6px 10px; cursor: pointer;
  background: var(--panel-2); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
}
.sc-subset-chip:hover { border-color: var(--accent-line); }
.sc-subset-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-subset-chip.is-selected {
  background: var(--accent-soft); border-color: var(--accent); color: var(--text-primary);
}
.sc-subset-warn {
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid var(--warning); border-radius: var(--button-radius);
  padding: 8px 10px; font-size: 12px;
}
.sc-subset-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between;
}
.sc-subset-auto {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-secondary);
}
.sc-subset-auto label { display: inline-flex; align-items: center; gap: 6px; }
.sc-subset-runsize {
  width: 56px; font-family: inherit; font-size: 12px;
  padding: 4px 6px; text-align: center;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
}
.sc-subset-runsize:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Phase 5 (Decision B continued) -- apply-scope modal */
.sc-apply-scope { display: flex; flex-direction: column; gap: 8px; }
.sc-apply-summary { font-size: 13px; color: var(--text-secondary); margin: 0 0 4px; }
.sc-apply-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
  cursor: pointer; color: var(--text-primary); font-family: inherit;
}
.sc-apply-row:hover { background: var(--row-hover); }
.sc-apply-row input[type="radio"] { margin-top: 3px; cursor: pointer; flex: 0 0 auto; }
.sc-apply-text { display: flex; flex-direction: column; gap: 2px; }
.sc-apply-text strong { font-size: 13px; }
.sc-apply-hint { font-size: 12px; color: var(--text-secondary); }
.sc-apply-admin { border-style: dashed; }

/* Issue (snapshot) form modal */
.sc-issue-form { display: flex; flex-direction: column; gap: 10px; }
.sc-issue-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.sc-issue-form input,
.sc-issue-form select,
.sc-issue-form textarea {
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 6px 8px; font-size: 13px; font-family: inherit;
}
.sc-issue-hint { font-size: 12px; color: var(--text-tertiary); margin: 4px 0 0; }

/* Studio template editor (admin) modals */
.sc-tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; }
.sc-tpl-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center;
  padding: 6px 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--button-radius);
}
.sc-tpl-row label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-secondary); grid-column: 1 / span 4; }
.sc-tpl-row input,
.sc-tpl-row textarea {
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  padding: 4px 6px; font-size: 13px; font-family: inherit;
}
.sc-tpl-default { background: var(--accent); color: var(--bg); font-size: 10px; padding: 1px 5px; border-radius: 8px; font-weight: 600; }
.sc-tpl-empty { font-size: 13px; color: var(--text-secondary); padding: 8px; }

/* iOS input zoom prevention (modal-content tier).
 * .strata-overlay is the platform's modal root on document.body. */
@media (max-width: 640px) {
  .strata-overlay .sc-add-opt,
  .strata-overlay .sc-cover-form input,
  .strata-overlay .sc-cover-form select,
  .strata-overlay .sc-cover-form textarea,
  .strata-overlay .sc-issue-form input,
  .strata-overlay .sc-issue-form select,
  .strata-overlay .sc-issue-form textarea,
  .strata-overlay .sc-tpl-row input,
  .strata-overlay .sc-tpl-row textarea,
  .strata-overlay .sc-apply-row input,
  .strata-overlay .sc-subset-runsize { font-size: 16px; }
}

/* Add-companion-product modal (reference panel). Modal content renders in
 * .strata-overlay on document.body, so these stay unscoped + prefixed. */
.strata-overlay .sc-add-comp-modal { display: flex; flex-direction: column; gap: 8px; }
.strata-overlay .sc-add-comp-label { font-size: 13px; color: var(--text-secondary); }
.strata-overlay .sc-add-comp-select {
  height: var(--input-height); padding: 0 10px;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius);
  font-size: 14px; font-family: inherit;
}
@media (max-width: 640px) {
  .strata-overlay .sc-add-comp-select { font-size: 16px; }
}

/* -- Slice E2c: structured-section toggle grid + substitution form -- */
.sc-sections-panel { display: flex; flex-direction: column; gap: 20px; }
.sc-sections-group { display: flex; flex-direction: column; gap: 8px; }
.sc-sections-heading {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.sc-toggle-grid { display: flex; flex-direction: column; gap: 2px; }
.sc-toggle-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: var(--button-radius); cursor: pointer; color: var(--text-primary);
}
.sc-toggle-row:hover { background: var(--row-hover); }
.sc-toggle-box { accent-color: var(--accent); cursor: pointer; }
.sc-toggle-box:disabled { cursor: default; }
.sc-toggle-label { font-size: 14px; }
.sc-toggle-ref { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }
.sc-sub-form { display: flex; flex-direction: column; gap: 10px; }
.sc-sub-field { display: flex; flex-direction: column; gap: 4px; }
.sc-sub-label { font-size: 13px; color: var(--text-secondary); }
.sc-sub-required { color: var(--error); }
.sc-sub-input {
  height: var(--input-height); padding: 0 10px; font-size: 14px; font-family: inherit;
  color: var(--text-primary); background: var(--input-bg);
  border: 1px solid var(--border); border-radius: var(--button-radius);
}
.sc-sub-input:focus { outline: none; border-color: var(--accent); }
.sc-sub-input:disabled { color: var(--text-tertiary); }

/* -- Slice E: structured-section inspector config panel (Spec Desk) -- */
.sc-desk-insp-body { padding: 12px 14px; }
.sc-section-config { display: block; }
.sc-section-config .sc-hint { color: var(--text-tertiary); font-size: 13px; }