/* Atelier · rhythm, the one owner of the spacing a page is built on (2026-10-27).
   The partner of type-roles, control-roles and page-head: those decide how text and controls look and where
   a head's parts sit; this decides the space between things. A sweep of 24 screens found 21 different gaps
   between a page's blocks (0 to 84px), 21 plate insets, running text 110-130 characters wide, and large text
   set tighter than small. Every value here is on the token scale (ux/tokens.css: 6 / 12 / 24 / 36 / 48 /
   72 on a 24px baseline). Spacing is !important for the same reason as the roles: a page sheet may place a
   block, never re-space it. Home is its own composition and keeps its own rhythm.
   Scoped to the Instrument look; Standard keeps its own sheets. */

html[data-look="instrument"] {
  --rhythm-page: var(--space-4);      /* 36: between a page's blocks */
  --rhythm-attach: var(--space-3);    /* 24: a breadcrumb row to the head it names */
  --inset: var(--space-3);            /* 24: inside every plate */
  --inset-frame: var(--space-2);      /* 12: the frame round a portrait card's picture */
  --measure: 70ch;                    /* the longest line running text may set */
}

/* ── The page: one gap between its top-level blocks; no block adds its own margin to it. Only the outermost
   page: a page nested inside one (a Run's analysis, a chat's thread) is a block, and keeps its own inner
   spacing (a Run's first finding must stay above a 1280x800 laptop's fold, run_analysis_flow_test). ── */
html[data-look="instrument"] .main .page:not(.home-page, .page .page) { gap: var(--rhythm-page) !important; }
html[data-look="instrument"] .main .page:not(.home-page, .page .page) > * { margin-block: 0 !important; }
html[data-look="instrument"] .main .page:not(.home-page, .page .page) > .study-bar__crumbs { margin-bottom: calc(var(--rhythm-attach) - var(--rhythm-page)) !important; }
/* A head belongs to what it heads: the first block follows it at the attach step, closer than block to block.
   Set on the head itself, because the element right after a head may be hidden (a stream source, a template). */
html[data-look="instrument"] .main .page:not(.home-page, .page .page) > :is(.page-head, .inst-head) { margin-bottom: calc(var(--rhythm-attach) - var(--rhythm-page)) !important; }
/* The one exception: a focus group Run's results page attaches at 12px, because its first finding must show on
   a 1280x800 laptop without scrolling (Mikael's run_analysis_flow_test) and the page has no space to give */
html[data-look="instrument"] .main .page.run-page:not(.page .page) > .study-bar__crumbs { margin-bottom: -24px !important; }
html[data-look="instrument"] .main .page.run-page:not(.page .page) > :is(.page-head, .inst-head) { margin-bottom: -24px !important; }

/* ── Plates: one inset. A plain section (no plate, .section--plain) and the slim approved-status strip
   keep theirs; readouts and lists of hairline rows pad their rows instead. ── */
html[data-look="instrument"] .main :is(
  .section:not(.section--plain, .readiness-panel--approved), .research-form, .saved-group, .saved-conversation__link,
  .output-card, .conversation-empty, .template-choice__item
) { padding: var(--inset) !important; }

/* Portrait cards: a close frame round the picture, the text under it inset the same, a plate's space at the
   foot. The persona library's cards already are (12 12 20); the chat picks follow them. */
html[data-look="instrument"] .main .chat-pick__link {
  padding: var(--inset-frame) var(--inset-frame) 20px !important;
}

/* ── Forms: a form is a stack of plates, 36px apart. Numbered steps (a simulation's, a Run's) are each a plate,
   never steps ruled inside one panel; a form without sections is one plate (Bishop, 2026-10-27: three forms
   had three structures). ── */
html[data-look="instrument"] .main :is(.simulation-form, .research-form:has(.form-step)) { display: flex !important; flex-direction: column !important; gap: var(--rhythm-page) !important; }
html[data-look="instrument"] .main .research-form:has(.form-step) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* A Run's steps 02 and 03 sit in the shared discussion-setup wrapper; in the Run form it steps aside */
html[data-look="instrument"] .main .research-form:has(.form-step) .discussion-setup:has(> .form-step) { display: contents !important; }
html[data-look="instrument"] .main :is(.sim-step, .research-form .form-step) {
  margin: 0 !important; padding: var(--inset) !important; border: 0 !important; border-radius: 0 !important;
  background: var(--plate, var(--surface-raised)) !important; box-shadow: 0 0 0 2px var(--seam, transparent) !important;
}
html[data-look="instrument"] .main .editor-shell > form.form:not(:has(.section, .sim-step)) {
  padding: var(--inset) !important; background: var(--plate, var(--surface-raised)); box-shadow: 0 0 0 2px var(--seam, transparent);
}

/* ── Running text: 1.5 up to 16px, closing as the type gets larger (about 1.42 at 20, 1.35 at 25), and never
   wider than a comfortable line (hints are one-line helpers, not running text, and keep their width). The whole selector is :where(),
   zero specificity: a type role (a kicker, a tag) keeps its own leading, and a page that sets its own
   measure (a headline at 34ch) keeps it; the 70ch cap only applies where nothing narrower was set. ── */
:where(html[data-look="instrument"] .main) :where(
  p, blockquote, dd, :is(ul, ol):not([class]) > li, .page-head__sub, .scale-tile__text, .finding-explanation,
  .saved-conversation__excerpt, .msg__body, .analysis-quote, .synthesis-card__content, .setup-hint, .attribute-value__text
) { line-height: min(1.5em, calc(1.1em + .4rem)) !important; }
:where(html[data-look="instrument"] .main) :where(
  p:not(.field__hint), blockquote, dd, :is(ul, ol):not([class]) > li, .muted, .finding-explanation, .analysis-quote,
  .synthesis-card__content, .setup-hint, .history-item
) { max-width: var(--measure); }

/* ── Eyebrows sit 8px above what they name. A finding's label sits in its section's 12px grid gap. ── */
html[data-look="instrument"] .main .finding > .finding-label { margin-bottom: -4px !important; }

/* ── A Run's results (Bishop, 2026-10-27). The section heading repeats the tab right above it, so it stays for
   screen readers and leaves the screen; Reanalyse keeps its place at the right. Captions keep one distance:
   16px clear of what they don't belong to, 8px to what they count. ── */
html[data-look="instrument"] .main .analysis-heading h2 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html[data-look="instrument"] .main .analysis-heading { justify-content: flex-end !important; }
html[data-look="instrument"] .main .analysis-results .selection-count { margin: 16px 0 0 !important; }
html[data-look="instrument"] .main .analysis-results .selection-count + .outcome-counts { margin-top: 8px !important; }
html[data-look="instrument"] .main .analysis-results .evidence-scope { margin: 16px 0 0 !important; }

/* ── Company context's parts: each value with its source on the same line, in one column at the right edge, and
   each part on its own ruled row, so a source can only belong to the value beside it (Bishop, 2026-10-27: on a
   line of its own the tag sat as close to the next label as to its own value) ── */
html[data-look="instrument"] .main .context-read__parts > div { padding-block: 12px; border-bottom: 1px solid var(--line); }
html[data-look="instrument"] .main .context-read__parts dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 24px; }
html[data-look="instrument"] .main .context-read__parts dd > .field__source { grid-row: 1; grid-column: 2; margin: 0; white-space: nowrap; }