/* Atelier · the page head, one layout for every page but Home (2026-10-27).
   The partner of type-roles.css and control-roles.css. Seven sheets had each laid out the head their own
   way (a column, a row with space-between, two grids, the simulation's own grid), so the kicker, the
   preamble and the buttons landed somewhere different on every page. This file is the one owner of where
   the parts of a head sit; the type roles decide how they look. Placement is !important for the same
   reason as there: a page sheet may decorate a head (a rule, a frame), never re-lay it out.

     KICKER                                           [actions]
     Title, one or more lines
     Preamble, one measure wide
     Meta and the honesty line, where a page has them

   The actions sit at the right edge, pinned to the eyebrow row, so they keep one height on every page
   whatever the title's line count (Bishop, 2026-10-27: following the title's last line read as random).
   On a phone it all stacks in that order, the actions last. Heads built around a portrait (a persona, a chat) keep the portrait and put the
   actions at the top right. Home has its own head (.home-head) and is not laid out here.
   Scoped to the Instrument look; Standard keeps its own sheets. */

html[data-look="instrument"] .main :is(.page-head, .inst-head) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: none !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  justify-content: stretch !important;
  column-gap: 32px !important;
  row-gap: 12px !important;
}
/* The eyebrow sits closer to the title it names (8px) than the title to its preamble (12px) */
html[data-look="instrument"] .main :is(.page-head, .inst-head) > :is(.page-head__kicker, .inst-kicker) { margin-bottom: -4px !important; }

/* Every part runs down the first column, in reading order */
html[data-look="instrument"] .main :is(.page-head, .inst-head) > * {
  grid-column: 1 !important;
  grid-row: auto !important;
  order: 0 !important;
  margin: 0 !important;
  max-width: none;
  justify-self: start !important;
  align-self: start !important;
}

/* The preamble keeps one measure */
html[data-look="instrument"] .main :is(.page-head, .inst-head) > :is(.page-head__sub, p:not([class]), .muted) { max-width: 65ch !important; }

/* The actions: the second column, pinned to the top of the head (the eyebrow row). With a kicker they span
   the kicker and title rows, so a 44px key never makes the eyebrow row taller. */
html[data-look="instrument"] .main :is(.page-head, .inst-head) > :is(.page-head__actions, .inst-actions, .toolbar, .item__link) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
html[data-look="instrument"] .main :is(.page-head:has(> .page-head__kicker), .inst-head:has(> .inst-kicker)) > :is(.page-head__actions, .inst-actions, .toolbar, .item__link) {
  grid-row: 1 / span 2 !important;
}

/* A head built around a portrait: the portrait and its copy are one part, the actions sit at the top right */
html[data-look="instrument"] .main .page-head:has(> :is(.persona-identity, .conversation-identity)) > :is(.page-head__actions, .toolbar) {
  grid-row: 1 !important;
  align-self: start !important;
}

/* A phone: one column, the actions last (the selector matches the specificity of the kicker and portrait rules above) */
@media (max-width: 40rem) {
  html[data-look="instrument"] .main :is(.page-head, .inst-head) { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-look="instrument"] .main :is(.page-head, .inst-head):is(*, :has(> .page-head__kicker), :has(> .inst-kicker), :has(> .persona-identity), :has(> .conversation-identity)) > :is(.page-head__actions, .inst-actions, .toolbar, .item__link) {
    grid-column: 1 !important;
    grid-row: auto !important;
    order: 1 !important;
    justify-self: start !important;
    justify-content: flex-start;
    margin-top: 6px !important;
  }
}