/* Atelier — direction 05 ported from explorations/05-direction (Peter, 2026-10-07).
   Loaded last and unlayered, like persona-studio.css, so it settles the shared language:
   vermilion for commit/live actions, mono provenance marks, and the persona page's portrait-led hero.
   Three voices: Clarity City is the product, the serif is a persona speaking, mono is provenance. */

/* ── Shared ─────────────────────────────────────────────────────────────────────── */
.btn--live {
  background: var(--action-live); color: var(--on-action-live); border-color: transparent;
}
.btn--live:hover { background: var(--action-live-hover); color: var(--on-action-live); }

/* Provenance marks are drawn, not typed glyphs, so they read identically in every font. */
.field__source {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .02em; color: var(--on-surface-muted);
}
.field__source::before {
  content: '' !important; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--on-surface); box-shadow: 0 0 0 1px var(--on-surface);
}
.field__source--inferred::before { background: linear-gradient(90deg, var(--on-surface) 50%, transparent 50%); }
.field__source--unknown::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); }

/* ── Persona page ─────────────────────────────────────────────────────────────── */
:root[data-register] .persona-review > .page-head,
:root[data-register='card'] .persona-review > .page-head {
  padding: 8px 0 24px; background: transparent; border-radius: 0; align-items: end;
}
:root[data-register] .persona-review .persona-identity { gap: 48px; align-items: end; }
:root[data-register] .persona-review .persona-identity .avatar {
  width: clamp(220px, 24vw, 340px); height: auto; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--on-surface) 8%, transparent);
}
.persona-review .persona-identity .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
:root[data-register] .persona-review .page-head__title {
  font-size: clamp(3rem, 5.6vw, 5rem); font-weight: 620; line-height: .95; letter-spacing: -.045em;
}
.persona-review .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--on-surface-faint); }
.persona-review .persona-identity__role { font-size: var(--text-md); color: var(--on-surface-muted); }
.persona-review .persona-hero__motivation { margin-top: 20px; padding-inline-start: 22px; border-inline-start: 2px solid var(--on-surface); max-width: 36ch; }
.persona-review .persona-hero__motivation .attribute-value dd { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; letter-spacing: -.012em; }
.persona-review .persona-hero__motivation dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-faint); }

/* Readiness reads as a quiet strip; the action that matters is the one live button. */
:root[data-register='card'] .persona-review .readiness-panel { background: var(--surface-raised); }

/* Provenance band: what came from you, what AI completed, what is still unknown — with counts. */
.persona-review .source-legend {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 22px 28px;
  border-radius: 22px; background: var(--surface-raised);
}
.persona-review .source-legend > div { grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.persona-review .source-legend .field__source { font-size: var(--text-xs); font-weight: 500; color: var(--on-surface-muted); }
.persona-review .source-legend__count { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--on-surface); }
.persona-review .source-legend p { grid-column: 1 / -1; font-size: var(--text-sm); }

/* Traits as rows under a hairline head, like the prototype: label, value, then where it came from. */
:root[data-register='card'] .persona-review .attribute-group { background: var(--surface-raised); }
.persona-review .attribute-group summary span { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; }
:root[data-register='card'] .persona-review .attribute-group[open] summary { border-bottom: 1px solid var(--on-surface); }
.persona-review .attribute-group .attribute-grid { gap: 0 40px; padding-top: 4px; }
.persona-review .attribute-group .attribute-value { padding-block: 18px; border-bottom: 1px solid var(--line); }
.persona-review .attribute-value dt { font-size: var(--text-sm); color: var(--on-surface-faint); }
.persona-review .attribute-value dd .attribute-value__text { font-size: var(--text-md); line-height: 1.45; }
.persona-review .attribute-value .field__source { margin-top: 10px; font-size: var(--text-xs); }

@media (max-width: 64rem) {
  :root[data-register] .persona-review .persona-identity { gap: 28px; }
}
@media (max-width: 40rem) {
  :root[data-register] .persona-review .page-head__title { font-size: 2.75rem; }
  :root[data-register] .persona-review .persona-identity .avatar { width: 112px; height: auto; border-radius: 16px; }
  .persona-review .persona-identity:has(.persona-hero__motivation) { grid-template-columns: 112px minmax(0,1fr); }
  .persona-review .source-legend { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 14px; }
  .persona-review .source-legend > div { grid-template-columns: auto auto 1fr; }
  .persona-review .source-legend p { grid-column: 3; }
  .persona-review .attribute-group .attribute-grid { gap: 0; }
}

/* ── Persona library: a cast of portraits, each card saying how much of it is known ── */
.persona-library .page-head .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .09em; color: var(--on-surface-faint); }
:root[data-register] .persona-library .page-head__title { font-size: clamp(2.75rem, 4.6vw, 4rem); font-weight: 610; line-height: 1; letter-spacing: -.045em; }
:root[data-register='card'] .persona-library .collection { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
:root[data-register='card'] .persona-library .persona-card { padding: 12px 12px 20px; border-radius: 22px; transition: transform .45s var(--ease-standard), box-shadow .45s var(--ease-standard); }
:root[data-register='card'] .persona-library .persona-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -32px color-mix(in oklch, var(--on-surface) 45%, transparent); }
:root[data-register='card'] .persona-library .persona-card__identity { grid-template-columns: minmax(0, 1fr); gap: 16px; }
:root[data-register='card'] .persona-library .persona-card .avatar { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; font-size: 64px; overflow: hidden; }
:root[data-register='card'] .persona-library .persona-card .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .8s var(--ease-standard); }
:root[data-register='card'] .persona-library .persona-card:hover .avatar img { transform: scale(1.03); }
:root[data-register='card'] .persona-library .persona-card__name,
:root[data-register='card'] .persona-library .persona-card > :not(.persona-card__identity) { padding-inline: 10px; }
:root[data-register='card'] .persona-library .persona-card .item__title { font-size: var(--text-lg); }
:root[data-register='card'] .persona-library .persona-card__motivation { margin-block: 18px 12px; margin-inline: 10px; padding-inline: 14px 0; border-inline-start-color: var(--on-surface); }
.persona-card__goal { font-size: var(--text-md); line-height: 1.45; }
.persona-card__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-faint); }

.persona-card__provenance { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; padding-block: 12px; border-top: 1px solid var(--line); }
.prov-count { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .02em; color: var(--on-surface-muted); }
.prov-count::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--on-surface); }
.prov-count--inferred::before { background: linear-gradient(90deg, var(--on-surface) 50%, transparent 50%); box-shadow: 0 0 0 1px var(--on-surface); }
.prov-count--unknown::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); }
:root[data-register] .persona-library .persona-card .item__foot { margin-top: 8px; }
.persona-library .persona-card .item__link:last-child:not(:first-child) { border-color: var(--on-surface); }
:root[data-register] .persona-library .persona-card.persona-card--draft { padding: 24px; border: 1.5px dashed var(--line-strong); }
/* No portrait: the initial on a halftone tile, in the same frame as a photo, so a row of cards stays level */
:root[data-register='card'] .persona-library .persona-card .avatar:not(:has(img)) {
  font-size: 56px; color: var(--on-surface-muted);
  background: radial-gradient(circle, color-mix(in oklch, var(--on-surface) 14%, transparent) 1.2px, transparent 1.6px) 0 0 / 7px 7px, var(--surface-sunken);
}

/* ── Research desk: each saved group is a table of faces and the question it was asked ── */
:root[data-register] .research-library { max-inline-size: 64rem; gap: 24px; }
.research-library .page-head__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; color: var(--on-surface-faint); }
.research-library > .page-head .page-head__kicker::before { content: ''; width: 18px; height: 8px; background: radial-gradient(circle, var(--action-live) 2.4px, transparent 2.9px) 0 0 / 6px 8px; }
:root[data-register] .research-library .page-head__title { font-size: clamp(2.5rem, 4.2vw, 3.75rem); font-weight: 610; line-height: 1; letter-spacing: -.045em; }
.saved-group-list { gap: 12px; }
:root[data-register='card'] .saved-group { padding: 24px 28px; border-radius: 22px; transition: box-shadow .35s var(--ease-standard); }
:root[data-register='card'] .saved-group:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.saved-group__portraits .avatar { inline-size: 44px; block-size: 44px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface-raised); }
.saved-group__portraits .avatar img { width: 100%; height: 100%; object-fit: cover; }
.saved-group__portraits .avatar + .avatar { margin-inline-start: -12px; }
.saved-group__head h2 { font-size: var(--text-md); }
.saved-group__head .field__hint { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; }
.saved-group__research .page-head__kicker { font-size: var(--text-xs); }
.saved-group__question { font-size: var(--text-lg); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; max-width: 40ch; }
.saved-group__meta { font-size: var(--text-sm); }
.saved-group__meta time { font-family: var(--font-mono); font-size: var(--text-xs); }
.saved-group__action { color: var(--on-surface); text-decoration: underline; text-underline-offset: 4px; }

/* ── Chat library: the persona's last words, in their voice ── */
.conversation-library .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; color: var(--on-surface-faint); }
:root[data-register] .conversation-library .page-head__title { font-size: clamp(2.75rem, 4.6vw, 4rem); font-weight: 610; line-height: 1; letter-spacing: -.045em; }
:root[data-register] .saved-conversation__identity .avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; overflow: hidden; }
.saved-conversation__identity .avatar img { width: 100%; height: 100%; object-fit: cover; }
.saved-conversation__title { letter-spacing: -.015em; }
.saved-conversation__excerpt--voice { font-family: var(--font-voice); font-style: italic; font-size: var(--text-lg); line-height: 1.35; color: var(--on-surface); }
.saved-conversation__excerpt--voice > span { font-family: var(--font-sans); font-style: normal; font-size: var(--text-sm); font-weight: 600; color: var(--on-surface-muted); }
.saved-conversation__foot time { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ── Round-5 fixes: the idea in the shell ─────────────────────────────────────── */
/* One left edge everywhere: narrower pages align to the same start, not to the centre. */
.main > .page { margin-inline: 0 auto; }

/* The scale is the product's idea: one, a few, many. Drawn in CSS so link text is unchanged. */
.nav-primary__link { display: flex; align-items: center; gap: 10px; }
.nav-primary__link::before { content: ''; flex: none; width: 20px; height: 12px; background: currentColor; opacity: .85; mask: var(--nav-glyph) center / contain no-repeat; -webkit-mask: var(--nav-glyph) center / contain no-repeat; }
.nav-primary__link[href="/"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M4.5 11V5.2L10 1.2l5.5 4V11z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nav-primary__link[href$="/buyer_personas"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='4' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4 12c.8-2.6 3-4 6-4s5.2 1.4 6 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.nav-primary__link[href$="/persona_templates"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Crect x='4' y='1' width='12' height='10' rx='1.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7 4.5h6M7 7.5h4' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.nav-primary__link[href$="/persona_conversations"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='6' r='4' fill='black'/%3E%3C/svg%3E"); }
.nav-primary__link[href$="/synthetic_focus_groups"] { --nav-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='4' cy='8' r='2.4' fill='black'/%3E%3Ccircle cx='10' cy='4' r='2.4' fill='black'/%3E%3Ccircle cx='16' cy='8' r='2.4' fill='black'/%3E%3C/svg%3E"); }
.nav-primary__link[href$="/persona_conversations"]::after,
.nav-primary__link[href$="/synthetic_focus_groups"]::after { flex: none; white-space: nowrap; margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: var(--on-navigation-muted); opacity: .8; font-weight: 400; }
.nav-primary__link[href$="/persona_conversations"]::after { content: '1:1'; }
.nav-primary__link[href$="/synthetic_focus_groups"]::after { content: '1:few'; }
.nav-primary__note { font-size: var(--text-xs); }


/* Persona hero carries its actions; readiness is a quiet status line. */
.persona-review .persona-hero__actions { margin-top: 24px; padding: 0; border: 0; gap: 10px; }
.persona-review .persona-hero__actions .btn { border-radius: 999px; }
:root[data-register] .persona-review .readiness-panel--approved { padding: 16px 24px; }

/* Provenance strip: one mark per trait. */
.persona-review .source-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 18px 28px 0; }
.source-strip__group { display: contents; }
.source-strip__mark { width: 9px; height: 9px; border-radius: 50%; background: var(--on-surface); }
.source-strip__mark--inferred { background: linear-gradient(90deg, var(--on-surface) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--on-surface); }
.source-strip__mark--unknown { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); }
.persona-review .source-strip + .source-legend { border-radius: 0 0 22px 22px; padding-top: 14px; }
.persona-review .source-strip { background: var(--surface-raised); border-radius: 22px 22px 0 0; }

/* Library: a row of cards is one height (Peter, 2026-10-27), each card's links on its bottom edge; filters match the controls. */
:root[data-register='card'] .persona-library .collection { align-items: stretch; }
:root[data-register='card'] .persona-library .persona-card { display: flex; flex-direction: column; }
:root[data-register='card'] .persona-library .persona-card > .item__foot { margin-top: auto; }

/* Research desk: the card's real action is a button. */
.saved-group__action { display: inline-flex; padding: 0 18px; border-radius: 999px; background: var(--on-surface); color: var(--surface-raised); text-decoration: none; font-size: var(--text-sm); }
.saved-group__action:hover { background: var(--accent-hover); color: var(--surface-raised); }

/* Chat library: faces first. */
.chat-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; margin: 8px 0 4px; }
/* A row of picks is one height, the Chat key on every card's bottom edge (Peter, 2026-10-27) */
.chat-pick { display: flex; }
.chat-pick__link { flex: 1; grid-template-rows: auto auto 1fr auto; }
.chat-pick__link { display: grid; gap: 4px; padding: 10px 10px 14px; border-radius: 18px; background: var(--surface-raised); color: var(--on-surface); text-decoration: none; transition: transform .4s var(--ease-standard), box-shadow .4s var(--ease-standard); }
.chat-pick__link:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px color-mix(in oklch, var(--on-surface) 45%, transparent); }
.chat-pick .avatar { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin-bottom: 6px; font-size: var(--text-2xl); }
.chat-pick .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.chat-pick .avatar:not(:has(img)) { display: grid; place-items: center; background: radial-gradient(circle, color-mix(in oklch, var(--on-surface) 14%, transparent) 1.2px, transparent 1.6px) 0 0 / 7px 7px, var(--surface-sunken); color: var(--on-surface-muted); }
.chat-pick__name { font-weight: 600; font-size: var(--text-md); padding-inline: 4px; }
.chat-pick__role { font-size: var(--text-sm); color: var(--on-surface-muted); padding-inline: 4px; }
.chat-pick__go { justify-self: start; margin: 8px 4px 0; padding: 6px 14px; border-radius: 999px; background: var(--surface-sunken); font-size: var(--text-sm); font-weight: 600; }
.chat-pick__link:hover .chat-pick__go { background: var(--action-live); color: var(--on-action-live); }
.conversation-library .conversation-start { margin-top: 4px; }

@media (max-width: 40rem) {
  .persona-review .persona-identity { align-items: start; }
  :root[data-register] .persona-review .persona-identity .avatar { align-self: start; }
  .chat-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persona-review .source-strip { padding: 14px 18px 0; }
}

/* ── Forms: graphite focus, mono labels for optional sections; one live commit per form ── */
:root[data-register] .input:focus, :root[data-register] .select:focus, :root[data-register] .textarea:focus {
  outline-color: var(--on-surface); border-color: var(--on-surface);
}
:root[data-register='type'] .textarea:focus { border-inline-start-color: var(--on-surface); }
:root[data-register='type'] .input:focus, :root[data-register='type'] .select:focus { border-bottom-color: var(--on-surface); }
.persona-creation .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; color: var(--on-surface-faint); }
:root[data-register] .persona-creation .page-head__title { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 610; line-height: 1; letter-spacing: -.045em; }

/* Template choice: two real cards with the buying focus as a mark, and a pill action */
.template-choices { gap: 14px; }
:root[data-register='card'] .template-choice__item { position: relative; padding: 26px 26px 22px; border-radius: 22px; transition: transform .45s var(--ease-standard), box-shadow .45s var(--ease-standard); }
:root[data-register='card'] .template-choice__item:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -32px color-mix(in oklch, var(--on-surface) 45%, transparent); }
.template-choice__item .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; color: var(--on-surface-faint); }
.template-choice__item .item__title { font-size: var(--text-xl); letter-spacing: -.025em; }
.template-choice__item .item__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.template-choice__item .item__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .02em; }
.template-choice__action { justify-self: start; align-self: flex-start; display: inline-flex; margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: var(--surface-sunken); font-size: var(--text-sm); font-weight: 600; transition: background .25s var(--ease-standard), color .25s var(--ease-standard); }
.template-choice__item:hover .template-choice__action { background: var(--action-live); color: var(--on-action-live); }
.persona-creation details > summary .field__hint, .persona-creation summary small { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; }

/* ── Research workspace: assemble the table, then ask the question ── */
.research-workspace .page-head__kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .09em; color: var(--on-surface-faint); }
:root[data-register] .research-workspace .page-head__title { font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 610; line-height: 1.02; letter-spacing: -.04em; }
/* A flow's header has one shape (Bishop, 2026-10-21): breadcrumb and step bar on one row, so the bar sits at
   the same height on every step whatever gap the page puts under its breadcrumb. Narrower, the bar sits
   under the breadcrumb, where the two cannot collide. */
@media (min-width: 72rem) {
  .page:has(> .study-bar__crumbs + .research-progress) { position: relative; }
  .page > .study-bar__crumbs + .research-progress { position: absolute; top: 0; right: 0; margin: 0; }
  /* the breadcrumb wraps before it reaches the bar */
  .page > .study-bar__crumbs:has(+ .research-progress) { padding-inline-end: 31rem; }
}
.research-progress ol { gap: 18px; }
.research-progress li { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--on-surface-faint); }
.research-progress li > span[aria-hidden] { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); font-size: var(--text-xs); }
.research-progress li[aria-current='step'] { color: var(--on-surface); }
/* On a phone the bar is one line: only the current step, as "Step 2 of 4 · Question" (Bishop, 2026-10-27: the
   current step had wrapped onto a line of its own) */
.research-progress__count { display: none; }
@media (max-width: 40rem) {
  .research-progress li:not([aria-current='step']) { display: none; }
  .research-progress__count { display: inline; }
  .research-progress li > span[aria-hidden] { display: none; }
}
.research-progress li.is-done { color: var(--on-surface-muted); }
.research-progress li.is-done > span[aria-hidden] { box-shadow: inset 0 0 0 1.5px var(--on-surface-muted); color: var(--on-surface); }
.research-progress li[aria-current='step'] > span[aria-hidden] { background: var(--action-live); color: var(--on-action-live); box-shadow: none; }

/* People: a chosen seat is unmistakable — graphite ring, the face lit, others quiet */
.persona-option { transition: box-shadow .25s var(--ease-standard), background .25s var(--ease-standard); }
.persona-option:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--on-surface); background: var(--surface-raised); }
.persona-option .avatar { border-radius: 50%; overflow: hidden; }
.persona-option .avatar img { width: 100%; height: 100%; object-fit: cover; }
.persona-options:has(input:checked) .persona-option:not(:has(input:checked)) .avatar { filter: grayscale(.6); opacity: .75; }
.research-audience__portraits .avatar { border-radius: 50%; overflow: hidden; }
.research-audience__portraits .avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The question is the page: set it like the prototype's ask. A question field is the same size wherever it
   asks (a Run's objective, a simulation's question): the scale's 25px. */
.research-workspace textarea[name$='[objective]'] {
  font-size: var(--text-xl); font-weight: 540; line-height: 1.25; letter-spacing: -.02em;
  padding: 16px 18px; border-radius: 16px; min-height: 5.5em;
}
.research-workspace .research-form .field__label[for$='_objective'] { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--on-surface-faint); }

input[type='checkbox'], input[type='radio'] { accent-color: var(--on-surface); }

/* ── Templates and the field catalog (Mikael's bare admin markup): the same head, actions in a row ── */
:root[data-register] div.page > .page-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 12px; }
/* The chat's header keeps its own grid (conversations.css): who on the left, its actions top right like every other page */
:root[data-register] div.page > .page-head.conversation-header { display: grid; }
div.page > .page-head > h1 { flex: 1 1 100%; font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 610; line-height: 1.02; letter-spacing: -.04em; }
div.page > .page-head > p { flex: 1 1 100%; max-width: 62ch; color: var(--on-surface-muted); }
div.page > .page-head > .btn, div.page > .page-head > .button_to { flex: none; }
div.page > .page-head > a:not(.btn) { margin-left: 6px; font-size: var(--text-sm); }
div.page > .collection > .item h2 { font-size: var(--text-lg); letter-spacing: -.02em; }
div.page > .collection > .item h2 a { text-decoration: none; }
div.page > .collection > .item h2 a::after { content: ' →'; color: var(--on-surface-faint); }
div.page > .collection > .item p { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .03em; color: var(--on-surface-muted); }
div.page nav.section[aria-label='Template versions'] a { display: inline-flex; margin: 0 8px 8px 0; padding: 6px 12px; border-radius: 999px; background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-xs); text-decoration: none; color: var(--on-surface); }
div.page nav.section[aria-label='Template versions'] { display: flex; flex-wrap: wrap; align-items: center; }

/* The synthetic voice, wherever a persona or simulated individual speaks */
.voice { font-family: var(--font-voice); font-style: italic; font-weight: 400; }
.report-doc > section + section { margin-top: 28px; }

/* ── Phone: a bottom tab bar for the five main destinations; the top Menu stays as "More" ── */
.tabbar { display: none; }
@media (max-width: 40rem) {
  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface-navigation);
    box-shadow: 0 -1px 0 var(--navigation-line), 0 -12px 30px -18px color-mix(in oklch, black 60%, transparent);
  }
  .tabbar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; border-radius: 12px; color: var(--on-navigation-muted); text-decoration: none; font-size: var(--text-xs); letter-spacing: .01em; }
  .tabbar__link[aria-current="page"] { background: var(--navigation-active); color: var(--on-navigation); }
  .tabbar__link:focus-visible { outline: 2px solid var(--on-navigation); outline-offset: -2px; }
  .tabbar__glyph { width: 22px; height: 14px; background: currentColor; mask: var(--tab-glyph) center / contain no-repeat; -webkit-mask: var(--tab-glyph) center / contain no-repeat; }
  .tabbar__link[aria-current="page"] .tabbar__glyph { background: var(--action-live); }
  .tabbar__link--home { --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M4.5 11V5.2L10 1.2l5.5 4V11z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .tabbar__link--personas { --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='4' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4 12c.8-2.6 3-4 6-4s5.2 1.4 6 4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
  .tabbar__link--chat { --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='10' cy='6' r='4.5' fill='black'/%3E%3C/svg%3E"); }
  .tabbar__link--groups { --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Ccircle cx='4' cy='8' r='2.4' fill='black'/%3E%3Ccircle cx='10' cy='4' r='2.4' fill='black'/%3E%3Ccircle cx='16' cy='8' r='2.4' fill='black'/%3E%3C/svg%3E"); }
  .tabbar__link--simulate { --tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cg fill='black'%3E%3Ccircle cx='3' cy='3' r='1.4'/%3E%3Ccircle cx='7.5' cy='3' r='1.4'/%3E%3Ccircle cx='12' cy='3' r='1.4'/%3E%3Ccircle cx='16.5' cy='3' r='1.4'/%3E%3Ccircle cx='3' cy='8.5' r='1.4'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.4'/%3E%3Ccircle cx='12' cy='8.5' r='1.4'/%3E%3Ccircle cx='16.5' cy='8.5' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
  body.app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media print { .tabbar { display: none !important; } }

/* Persona history: each revision, why it happened, and which research used it */
.persona-history { margin-block: 32px; scroll-margin-top: 24px; }
.persona-history .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.history-list { position: relative; display: grid; gap: 0; margin: 0; padding: 0 0 0 22px; list-style: none; }
.history-list::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1.5px; background: var(--line); }
.history-item { position: relative; padding: 0 0 20px; }
.history-item::before { content: ''; position: absolute; left: -22px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface-page); box-shadow: inset 0 0 0 1.5px var(--on-surface-faint); }
.history-item--current::before { background: var(--on-surface); box-shadow: none; }
.history-item p { margin: 0; }
.history-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.history-item__rev { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-surface-faint); }
.history-item__head time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-surface-faint); }
.history-item__why { margin-top: 4px !important; font-size: var(--text-sm); }
.history-item__why a { color: var(--on-surface-muted); text-underline-offset: 3px; }
.history-item__changes { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.history-item__label { font-weight: 600; }
.history-item__before { color: var(--on-surface-faint); text-decoration: line-through; }
.history-item__used { margin-top: 6px !important; font-size: var(--text-sm); color: var(--on-surface-muted); }

/* How a persona buys, and who else is in the room */
.buying-committee { margin-block: 32px; padding: 24px; border-radius: 18px; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--line); scroll-margin-top: 24px; }
.buying-committee .section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.buying-committee__count { margin: 0 auto 0 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--on-surface-muted); }
.buying-committee__count strong { color: var(--on-surface); font-weight: 500; }
.buying-committee__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 14px 24px; margin: 0; }
.buying-committee__rows div { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.buying-committee__rows dt { font-size: var(--text-sm); color: var(--on-surface-faint); }
.buying-committee__rows dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-weight: 500; }
.buying-committee__room { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.buying-committee__room ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; padding: 0; list-style: none; }
.buying-committee__person { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; }
.buying-committee__person:hover { box-shadow: inset 0 0 0 1.5px var(--on-surface); }
.buying-committee__person .avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; font-size: var(--text-sm); }
.buying-committee__person .avatar img { width: 100%; height: 100%; object-fit: cover; }
.buying-committee__person span { display: flex; flex-direction: column; line-height: 1.25; }
.buying-committee__person small { font-size: var(--text-sm); color: var(--on-surface-muted); }
.buying-committee__scale { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--on-surface-faint); }

/* ── Bishop round 1 (2026-10-14): one type scale, one page width, paper with material, and colour rules you can read ── */
/* Three sizes: display (Home and a persona's name), page title (everything else), section. */
:root[data-register] .page:not(.persona-review) .page-head .page-head__title { font-size: var(--type-page-title); }
:root[data-register] .persona-review .page-head .page-head__title { font-size: clamp(3rem, 5.6vw, 5rem); }
/* One width for working pages; documents keep their narrower measure on purpose. */
:root[data-register] .main > .page { max-width: 60rem; }
/* Data hues belong to answers only; chrome is ink. */
:root[data-register] .research-progress li[aria-current='step'] { border-color: var(--on-surface); }
/* The rail: three groups instead of ten equal rows. */
.nav-primary__group { margin: 18px 0 6px 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-navigation-muted); }
.nav-primary__group:first-child { margin-top: 0; }

/* Buttons say what they do: vermilion starts something live (one per screen), ink-filled makes or shares an artefact, outlined goes somewhere. */