/* Atelier · the Reading register for everything built on design/ux.
   Same idiom as the app's Reading layout: no cards, rows on hairlines, small uppercase section heads over an ink rule,
   faces hidden in lists. Loaded last so it overrides each area's card styling only when Reading is chosen. */

:root[data-register='type'] {
  /* Section heads read like the app's Reading sections */
  & :is(.home-page, .outputs-page, .updates-page, .sources-page, .simulations-page, .sim-page, .company-context-page, .proposal-page, .source-page, .persona-review) .section__title,
  & .summary-doc__label, & .sim-block__title {
    font-size: var(--text-xs); line-height: 1.5; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-muted);
  }
  & :is(.home-page, .outputs-page, .updates-page, .sources-page, .persona-review) .section__head { padding-bottom: var(--space-1); border-bottom: 1px solid var(--on-surface); }

  /* Card grids become lists of rows */
  & :is(.update-list, .output-list, .source-list, .unused-list, .home-cast__grid, .excerpt-list, .evidence-list, .list-rows) { display: flex; flex-direction: column; gap: 0; }
  & :is(.update-card__link, .output-card, .source-card, .unused-card, .cast-card, .excerpt, .evidence) {
    height: auto; padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none;
  }
  & :is(.update-card__link, .output-card, .source-card, .cast-card):hover { box-shadow: none; }
  & :is(.update-card__link, .output-card, .source-card, .cast-card):hover :is(.update-card__name, .output-card__title, .source-card__title, .cast-card__name) { text-decoration: underline; text-underline-offset: 3px; }
  & :is(.update-card__link, .output-card, .source-card, .unused-card, .cast-card) .avatar,
  & :is(.update-card__head, .output-card__foot, .source-card__foot) .avatar, & .output-faces .avatar, & .source-card__faces { display: none; }
  & .output-meta .output-faces > span { margin-left: 0; }
  & :is(.update-card__foot, .output-card__foot, .source-card__foot) { padding-top: 4px; border-top: 0; }
  & .update-card__link::before { display: none; }
  & .update-card__reply, & .update-card__source { font-size: var(--text-md); }
  & .cast-card { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  & .cast-card .status { margin-top: 0; padding-top: 0; margin-left: auto; }
  & .cast-card--new .cast-card__plus { display: none; }
  & .excerpt, & .evidence { padding-left: 14px; border-left: 2px solid var(--on-surface); }
  & .excerpt--contradicts, & .evidence--contradicts { border-left-color: var(--attention); }

  /* Home: the three scales as a list of choices, not tiles */
  & .home-scales { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--on-surface); }
  & .scale-tile { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "art kicker go" "art title go" "art text go"; column-gap: var(--space-3); row-gap: 2px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; }
  & .scale-tile:hover { box-shadow: none; transform: none; }
  & .scale-tile__art { grid-area: art; height: auto; margin: 4px 0 0; transform: scale(.7); transform-origin: left top; }
  & .scale-tile__kicker { grid-area: kicker; } & .scale-tile__title { grid-area: title; font-size: var(--text-md); } & .scale-tile__text { grid-area: text; max-width: 60ch; }
  & .scale-tile__go { grid-area: go; align-self: center; margin-top: 0; }
  & :is(.home-updates, .home-context) { padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--on-surface); border-radius: 0; background: none; box-shadow: none; }

  /* Documents and panels lose their boxes, keep their order */
  & :is(.summary-doc, .proposal-decision, .source-link, .sim-field-sheet, .sim-block, .sim-review__block, .context-read, .topic-matrix, .buying-committee, .loop, .output-feature__doc, .sim-next) {
    padding: 0; border-radius: 0; background: none; box-shadow: none;
  }
  & :is(.sim-block, .sim-review__block, .context-read, .topic-matrix, .buying-committee, .sim-next) { padding-top: var(--space-2); border-top: 1px solid var(--on-surface); }
  & .summary-doc__head { padding-bottom: var(--space-2); }
  & .proposal-decision { position: static; padding-top: var(--space-2); border-top: 1px solid var(--on-surface); }
  & .output-feature { grid-template-columns: minmax(0, 1fr); }
  & .output-feature__doc { display: none; }
  & :is(.sim-cols, .sim-review__grid, .proposal-layout, .source-layout) { grid-template-columns: minmax(0, 1fr); }
  & .source-panel { position: static; }
  & .buying-committee__rows { grid-template-columns: minmax(0, 1fr); gap: 0; }
  & .buying-committee__rows div { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); align-items: baseline; padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  & .buying-committee__person { padding: 4px 0; box-shadow: none; }
  & .buying-committee__person .avatar { display: none; }
  & .persona-proposals { border-radius: 0; background: none; padding: var(--space-2) 0 var(--space-2) 14px; }
  & .follow-up-origin, & .conversation-controls .follow-up-origin { padding: 0 0 0 14px; border-radius: 0; background: none; box-shadow: none; }
  & .report-field, & .recent-list { border-top-color: var(--on-surface); }
}

/* ══ Reading in the Instrument look, as one owner (2026-10-27) ══════════════════════════════════════════
   Peter: Reading had corners (row actions stranded at the far edge of 1000px rows) and most pages had no
   Reading at all (Chat, Simulations, Sources and Updates were pixel-identical to Cards). Reading is now one
   definition, the idiom above made general: the page is a document.
   1. One reading column, so a row's action is never far from the text it acts on.
   2. No plates: with Zones on, plates lose fill and seam; sections are divided by rules instead. The data
      drawings (a simulation's field, a persona's readouts) stay drawn: they are figures in the document.
   3. Every collection is a list of rows on hairlines; a row's actions follow its text, never pushed into a
      corner. Faces stay small in rows.
   Home keeps its own composition. Placement and spacing are !important for the same reason as the roles. */

html[data-look="instrument"][data-register="type"] {
  --plate: transparent;
  --seam: transparent;
  --reading-column: 48rem;
}

/* 1. One column */
html[data-look="instrument"][data-register="type"] .main .page:not(.home-page, .page .page) { max-width: var(--reading-column) !important; }

/* 2. No plates: what was a plate is a section under a rule */
html[data-look="instrument"][data-register="type"] .main :is(
  .section:not(.section--plain), .research-form, .sim-step, .research-form .form-step, .editor-shell > form.form,
  .conversation-empty, .readiness-panel, .research-mode, .home-updates, .home-context
) {
  padding: 20px 0 0 !important; border: 0 !important; border-top: 1px solid var(--on-surface) !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important;
}

/* 3. Collections are rows on hairlines */
html[data-look="instrument"][data-register="type"] .main :is(
  .collection, .saved-conversation-list, .saved-group-list, .research-members, .research-mode-grid, .output-list, .outputs-library .output-grid
) {
  display: flex !important; flex-direction: column !important; gap: 0 !important; grid-template-columns: none !important;
  border-top: 1px solid var(--on-surface);
}
html[data-look="instrument"][data-register="type"] .main :is(
  .collection > .item, .chat-pick > .chat-pick__link, .saved-conversation > .saved-conversation__link, .saved-group,
  .research-members > .item, .research-mode-grid > .research-mode, .output-card
) {
  min-height: 0 !important; padding: 16px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important; transform: none !important;
}
/* A row's actions follow its text */
html[data-look="instrument"][data-register="type"] .main :is(.item__foot, .saved-group__foot, .saved-conversation__foot, .output-card__foot) {
  justify-content: flex-start !important; gap: 8px 24px !important; margin-top: 12px !important; padding-top: 0 !important; border-top: 0 !important;
}
/* A chat pick is a row: a small face, the name and role, then Chat. The rows share their columns (a subgrid), so
   every Chat sits in one column right after the longest name, not ragged and not in the far corner. */
html[data-look="instrument"][data-register="type"] .main .chat-picks { display: grid !important; grid-template-columns: 40px max-content max-content 1fr !important; gap: 0 16px !important; border-top: 1px solid var(--on-surface); }
html[data-look="instrument"][data-register="type"] .main .chat-pick { display: contents !important; }
html[data-look="instrument"][data-register="type"] .main .chat-pick__link {
  grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: subgrid !important; grid-template-rows: auto !important;
  align-items: center !important;
}
html[data-look="instrument"][data-register="type"] .main .chat-pick__link .avatar { width: 40px !important; height: 40px !important; aspect-ratio: 1; grid-row: 1 / span 2; }
html[data-look="instrument"][data-register="type"] .main .chat-pick__link > :not(.avatar, .chat-pick__go) { grid-column: 2; justify-self: start; text-align: left !important; margin: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .chat-pick__link { text-align: left !important; justify-items: start !important; }
html[data-look="instrument"][data-register="type"] .main .chat-pick__go { grid-column: 3; grid-row: 1 / span 2; margin: 0 0 0 8px !important; justify-self: start; }

/* Home's cast in Reading: the faces leave, so a row is name, role and status on one line (the older Reading rule
   made the row a wrapping flex row over the Instrument's grid, which crushed the names to a few letters) */
html[data-look="instrument"][data-register="type"] .main .home-cast__grid { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto !important; column-gap: 16px !important; }
html[data-look="instrument"][data-register="type"] .main .home-cast__grid > li { display: contents !important; }
/* The rows share the list's columns (a subgrid), so "Create a persona", which has no status, still lines its text
   up with every role (Bishop, 2026-10-27) */
html[data-look="instrument"][data-register="type"] .main .home-cast__grid .cast-card {
  grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: subgrid !important; align-items: baseline !important; column-gap: 16px !important;
}
html[data-look="instrument"][data-register="type"] .main .home-cast__grid .cast-card .status { margin: 0 !important; }

/* Nothing in a corner: an action or a caption sits with the text it belongs to */
/* Home's three ways in: the key under its text, not at the far end of the row */
html[data-look="instrument"][data-register="type"] .main .scale-tile {
  grid-template-columns: 3rem minmax(0, 1fr) !important; grid-template-areas: "art kicker" "art title" "art text" "art go" !important;
}
html[data-look="instrument"][data-register="type"] .main .scale-tile__go { justify-self: start !important; align-self: start !important; margin-top: 10px !important; }
/* A library row: the persona's source line and its actions under the identity, not under the goal column */
html[data-look="instrument"][data-register="type"] .main .persona-library .collection > .item > :is(.item__meta, .item__foot) { grid-column: 1 / -1 !important; }
/* A simulation's field bar: the caption under the group-by control, left, not right-aligned at the bar's end */
html[data-look="instrument"][data-register="type"] .main .sim-instrument .sim-field-sheet__bar { flex-direction: column-reverse !important; align-items: flex-start !important; gap: 12px !important; }
html[data-look="instrument"][data-register="type"] .main .sim-instrument .sim-field-sheet__bar > div:first-child { text-align: left !important; flex: none !important; }
/* Lists of research: faces leave a Reading list, as everywhere in Reading */
html[data-look="instrument"][data-register="type"] .main .recent-item__faces { display: none !important; }

/* ══ Reading, Bishop round 2 (2026-10-27): one edge, one row, one field ══════════════════════════════════
   Reading had two edges: the column's left edge and a second, right edge collecting actions, step bars,
   dates, statuses and counts (on Grille each reads as the corner of an absent plate). Reading now hangs
   everything off the left edge; the persona's and company context's source column stays as the one deliberate
   right-hand column. */

/* (1) Corners. A head's actions go under its preamble, as on a phone; the selector matches the specificity of
   page-head.css's kicker and portrait rules */
html[data-look="instrument"][data-register="type"] .main :is(.page-head, .inst-head) { grid-template-columns: minmax(0, 1fr) !important; }
html[data-look="instrument"][data-register="type"] .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; align-self: start !important; justify-content: flex-start !important; margin-top: 8px !important;
}
/* The step bar is a line of its own under the breadcrumb, at the left edge */
html[data-look="instrument"][data-register="type"] .main .page > .study-bar__crumbs + .research-progress { position: static !important; }
html[data-look="instrument"][data-register="type"] .main .page > .study-bar__crumbs:has(+ .research-progress) { padding-inline-end: 0 !important; }
/* Counts follow their heading; a status follows its tabs; Reanalyse and evidence roles follow their text */
html[data-look="instrument"][data-register="type"] .main :is(.section__head, .results-navigation, .analysis-heading, .saved-conversation__head, :has(> .evidence-role)) {
  justify-content: flex-start !important; column-gap: 16px !important;
}
html[data-look="instrument"][data-register="type"] .main :is(.results-navigation, :has(> .evidence-role)) > * { flex: none !important; margin-inline-start: 0 !important; }
html[data-look="instrument"][data-register="type"] .main :is(.section__meta, .run-status, .evidence-role, .output-card__foot time, .saved-conversation__foot time, .saved-conversation__head .status) { margin-inline-start: 0 !important; }
html[data-look="instrument"][data-register="type"] .main summary > small.field__hint { float: none !important; margin-inline-start: 12px !important; }
/* A research row's date joins its meta line */
html[data-look="instrument"][data-register="type"] .main .recent-item {
  grid-template-columns: 34px minmax(6rem, 9rem) minmax(0, 1fr) !important; grid-template-areas: "glyph kind title" "glyph kind meta" "glyph kind date" !important;
}
html[data-look="instrument"][data-register="type"] .main .recent-item__date { justify-self: start !important; }

/* (2) One left edge: no section, panel or row keeps an inset its plate no longer draws */
html[data-look="instrument"][data-register="type"] .main .page :is(
  .section:not(.section--plain), .research-form, .research-form .form-step, .sim-step, .editor-shell > form.form, .editor-shell > form.form:not(:has(.section, .sim-step)),
  .conversation-tools, .conversation-limit, .research-next, .run-history, .tested-concept, .research-details, .notice, .recent-list,
  .sim-audience__row, .source-legend, .persona-evidence, .persona-history, .outcome-count, .home-updates, .home-context, .readiness-panel
) { padding-inline: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .page :is(.section:not(.section--plain), .research-form, .research-form .form-step, .sim-step, .editor-shell > form.form:not(:has(.section, .sim-step))) {
  padding-block: 20px 24px !important;
}

/* (3, 5) A Reading row: identity line, its text, one meta line, actions; all on one edge, the row's own parts
   close together (8-12px) and rows apart (40px) */
html[data-look="instrument"][data-register="type"] .main .persona-library .collection > .item {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; padding: 20px 0 !important;
}
html[data-look="instrument"][data-register="type"] .main .persona-library .collection > .item > * { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; border: 0 !important; padding-inline: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .persona-library .persona-card__motivation { padding-inline-start: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .saved-conversation__link { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; }
html[data-look="instrument"][data-register="type"] .main .saved-conversation__link > * { grid-column: 1 !important; grid-row: auto !important; margin: 0 !important; }
/* A simulation's persona weights are hairline rows, the segment after the name */
html[data-look="instrument"][data-register="type"] .main .sim-audience__row {
  justify-content: flex-start !important; gap: 24px !important; padding-block: 12px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; background: none !important;
}
html[data-look="instrument"][data-register="type"] .main .sim-audience__who { min-width: 14rem; }
/* A Run's seat plates in one ruled row, no box */
html[data-look="instrument"][data-register="type"] .main .outcome-counts { border: 0 !important; border-top: 1px solid var(--on-surface) !important; background: none !important; box-shadow: none !important; }
html[data-look="instrument"][data-register="type"] .main .outcome-count { background: none !important; box-shadow: none !important; }
/* The chat's honesty line is a ruled note like the simulation's, not a filled banner */
html[data-look="instrument"][data-register="type"] .main .conversation-limit { background: none !important; border-radius: 0 !important; box-shadow: none !important; }

/* (4) Components sized for wide plates */
html[data-look="instrument"][data-register="type"] .main :is(.btn, .inst-btn) { white-space: nowrap !important; }
html[data-look="instrument"][data-register="type"] .main .outcome-count p:has(> .outcome-count__value) { white-space: nowrap; }
html[data-look="instrument"][data-register="type"] .main .sim-column__head { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
html[data-look="instrument"][data-register="type"] .main .sim-column__label { max-width: none !important; width: auto !important; }

/* (6) One Reading field: every input, select and textarea is underlined, nothing filled or boxed. A left rule
   stays reserved for a voice or a piece of evidence, so no field borrows it. */
html[data-look="instrument"][data-register="type"] .main :is(.input, .select, .textarea, .sim-question) {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-strong) !important;
  border-radius: 0 !important; box-shadow: none !important; padding-inline: 0 !important;
}
html[data-look="instrument"][data-register="type"] .main :is(.input, .select, .textarea, .sim-question):focus { border-bottom-color: var(--on-surface) !important; outline: none; }
html[data-look="instrument"][data-register="type"] .main .chat-composer { background: none !important; box-shadow: none !important; border: 0 !important; padding-inline: 0 !important; }

/* ══ Reading, Bishop round 2 SHOULDs and COULDs (2026-10-27) ══════════════════════════════════════════ */

/* (7) One rule per boundary: a section's ink rule replaces a hairline, never adds to it */
html[data-look="instrument"][data-register="type"] .main .home-scales { border-top: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .section__head + :is(.collection, .saved-conversation-list, .saved-group-list, .research-members, .research-mode-grid, .output-list, .chat-picks) { border-top: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .persona-library > .toolbar { border: 0 !important; box-shadow: none !important; padding-block: 0 !important; }
html[data-look="instrument"][data-register="type"] .main .research-form:has(.form-step) { border-top: 0 !important; padding-top: 0 !important; }

/* (8) A choice with a description is a hairline row too; the chosen one is marked by its ink mark, never a box */
html[data-look="instrument"][data-register="type"] .main :is(.source-kind-choice, .persona-option),
html[data-look="instrument"][data-register="type"] .main :is(.source-kind-choice, .persona-option):has(input:checked) {
  padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
}

/* (11) The chat picks' hairlines end where their content does, not at the column's far edge */
html[data-look="instrument"][data-register="type"] .main .chat-picks { width: fit-content !important; min-width: 24rem; grid-template-columns: 40px max-content max-content !important; }

/* A link in a document is underlined: a template's or a field's title in a Reading list too */
html[data-look="instrument"][data-register="type"] .main .page > .collection > .item h2 a { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }