/* Atelier · type roles, the one owner of how each kind of text looks (2026-10-27).
   Tokens (ux/tokens.css) define the ingredients; this file decides which ingredients each role uses,
   once per look, and lists every class that plays the role. That list is the schema: a new label class
   joins a role here instead of styling itself. Per-page sheets had re-decided roles screen by screen
   (an audit of 28 screens found 6 kicker styles, 10 page titles, 15 section titles and 28 small caps
   labels), so the type properties here are !important: a page sheet may place a role, never restyle it.
   Loaded last. Roles are scoped to the Instrument look for now; Standard keeps its own sheets. */

html[data-look="instrument"] {
  --role-caps-font: var(--font-mono);
  --role-caps-size: var(--text-xs);
  --role-caps-weight: 500;
  --role-caps-track: .1em;
  --role-tag-size: var(--text-xs);
  --role-title-weight: 600;
  --role-title-track: -.035em;
}

/* Page kicker and printed label: one caps voice and one grey, the label printed on the instrument beside the
   thing it names (Bishop, 2026-10-27: five label dialects became this one) */
html[data-look="instrument"] .main :is(
  .page-head__kicker, .inst-kicker, .summary-doc__kind, .summary-doc__kind span,
  .scale-tile__kicker, .home-updates__kicker, .home-field__label, .home-field__label span,
  .sim-step__n, .form-step__n, .summary-doc__label, .recent-item__kind, .output-card__kind,
  .output-feature__kicker, .persona-card__label, .finding-label, .calibration__label, .outcome-count__label,
  .attribute-value > dt, .home-context dt, .context-read__parts dt, .finding-context dt, .msg--user .msg__who, .tested-concept > p, .tested-concept > p > strong
) {
  font-family: var(--role-caps-font) !important;
  font-size: var(--role-caps-size) !important;
  font-weight: var(--role-caps-weight) !important;
  letter-spacing: var(--role-caps-track) !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  color: var(--on-surface-muted) !important;
}
/* A kicker is text only: the mode glyphs live in the navigation, where they are the same on every page */
html[data-look="instrument"] .main .page-head__kicker::before { content: none !important; }
html[data-look="instrument"] .main .inst-kicker .sim-scale-mark { display: none !important; }
/* A kicker reads as the page's printed label: the muted ink, not the headline's */
html[data-look="instrument"] .main :is(.page-head__kicker, .inst-kicker, .summary-doc__kind) { color: var(--on-surface-muted) !important; }

/* Tag: the smallest printed mark, on chips and badges */
html[data-look="instrument"] .main :is(.tag-synthetic, .label, .field__marker, .round-table__kicker, .output-feature__new) {
  font-family: var(--role-caps-font) !important;
  font-size: var(--role-tag-size) !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Page title: one size, weight and tracking. The home hero and document titles keep their own size. */
html[data-look="instrument"] .main :is(.page-head__title, .inst-head__title, .page-head > h1, .page-head > div > h1) {
  font-size: clamp(2rem, 3vw, 2.5rem) !important;
  font-weight: var(--role-title-weight) !important;
  letter-spacing: var(--role-title-track) !important;
  line-height: 1.06 !important;
}
html[data-look="instrument"] .main :is(.home-head__title, .summary-doc__headline, .report-doc__question) {
  font-weight: var(--role-title-weight) !important;
  letter-spacing: var(--role-title-track) !important;
}

/* Section title */
html[data-look="instrument"] .main :is(
  .section__title, .sim-block__title, .analysis-heading h2, .brief-start__head h2, .research-section-head h2,
  .conversation-empty h2, .section > h2, .research-next h2
) {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

/* Card title: one size and weight. The featured output keeps its larger size, nothing else. */
html[data-look="instrument"] .main :is(.item__title, .item > h2, .saved-group__head h2, .saved-group__question, .output-feature__title) {
  font-family: var(--font-sans) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}
html[data-look="instrument"] .main .output-feature__title { font-size: var(--text-xl) !important; }

/* Field label: what a control asks, in the product's voice and ink, never printed caps or a disabled grey */
html[data-look="instrument"] .main .field__label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--on-surface) !important;
}

/* Helper: what a field or a step asks of you, in the small reading size (one size, one ink, everywhere) */
html[data-look="instrument"] .main :is(.field__hint, .setup-hint, .persona-options__hint) {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--on-surface-muted) !important;
}

/* A tag is a thin outlined mark, never a filled pill (Bishop, 2026-10-27: "LATEST" was the one cream pill) */
html[data-look="instrument"] .main :is(.tag-synthetic, .output-feature__new) {
  display: inline-block; margin-inline-end: 8px; padding: 1px 7px !important; border-radius: 3px !important;
  background: none !important; box-shadow: inset 0 0 0 1px var(--line-strong) !important; color: var(--on-surface-muted) !important;
}