/* Shared component library for every page, in both layout registers.
   Markup is register-agnostic; each component has a card block and a type block below.
   Pages should be composed from these. A page stylesheet only adds what is truly page-specific. */

/* A common heading voice across Cards/Reading and all page compositions. */
:root[data-register] .page-head { gap: 12px; }
:root[data-register] .page-head .page-head__kicker { font-size: var(--text-xs); font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-muted); }
:root[data-register] .page-head .page-head__title { margin: 0; font-size: var(--type-page-title); font-weight: 550; line-height: var(--type-title-leading); letter-spacing: var(--type-title-tracking); }
:root[data-register] .page-head .page-head__sub { margin: 0; font-size: var(--text-md); font-weight: 400; line-height: 1.5; }
/* The subscription stays connected, but contributes no visual row or flex gap. */
turbo-cable-stream-source { display: none; }

@layer components {
  /* =========================== register-agnostic =========================== */
  .disclosure-arrow { inline-size: 20px; block-size: 20px; flex: 0 0 auto; margin-inline-start: auto; }
  details[open] > summary > .disclosure-arrow { transform: rotate(180deg); }
  .page-head__actions, .section__head, .toolbar, .composer, .item__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .page-head__sub { color: var(--on-surface-muted); }
  .study-bar ~ .view .page-head__kicker { display: none; }
  .item__foot .stat__value, .item__foot .stat__label { white-space: nowrap; }
  .section__head { justify-content: flex-start; align-items: baseline; column-gap: var(--space-2); }
  .section__action { margin-inline-start: auto; }
  .section__meta { font-size: var(--text-sm); color: var(--on-surface-muted); }
  .section__action, .item__link, .action {
    font-size: var(--text-sm); font-weight: 700; color: var(--accent);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  }
  .section__action:hover, .item__link:hover, .action:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
  .layout { display: grid; align-items: start; gap: var(--space-3); }
  .layout > * { min-width: 0; }
  .layout__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  .layout__aside { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

  .avatar {
    flex-shrink: 0; display: inline-grid; place-items: center;
    inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-pill);
    background: var(--surface-sunken); color: var(--on-surface-muted);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em;
  }
  .avatar--lg { inline-size: 4rem; block-size: 4rem; font-size: var(--text-md); }
  .avatar--moderator { background: var(--accent-soft); color: var(--accent); }
  .avatar > img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
  .persona-card .avatar { inline-size: 4rem; block-size: 4rem; border-radius: var(--radius-md); }
  .persona-card .card-source a { color: inherit; text-decoration: none; }
  .persona-card .card-source a:hover { text-decoration: underline; }
  .persona-card .item__foot .item__link + .item__link { font-weight: 400; text-decoration: none; }
  .persona-card .item__foot .item__link + .item__link:hover { text-decoration: underline; }
  .persona-identity { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .persona-identity > div { min-width: 0; }
  .persona-identity .avatar { inline-size: 5rem; block-size: 5rem; border-radius: var(--radius-md); }
  .tested-concept { padding: var(--space-3); background: var(--surface-emphasis); color: var(--on-emphasis); border-radius: var(--radius-lg); }
  .thumb {
    flex-shrink: 0; inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--radius-md);
    display: grid; place-items: center; background: var(--surface-sunken); color: var(--on-surface-muted);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  }

  .item { position: relative; min-width: 0; }
  .item__title { font-weight: 700; line-height: 1.35; }
  .item__title a { color: inherit; text-decoration: none; }
  .item__title a::after { content: ''; position: absolute; inset: 0; }   /* whole item clickable */
  .item__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .item__sub { font-size: var(--text-sm); line-height: 1.5; color: var(--on-surface-muted); }
  .item__meta { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--on-surface-muted); }
  .item__meta > span:not(:last-child)::after { content: '\00a0· '; white-space: normal; color: var(--on-surface-faint); }
  .item__title, .section__title { hyphens: auto; }
  .item__foot { position: relative; z-index: 1; }   /* controls above the whole-item link */
  .item.is-selected .item__title { color: var(--accent); }

  .status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--on-surface-muted); white-space: nowrap; }
  .status::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: var(--radius-pill); background: currentColor; }
  .status--running::before { animation: status-pulse 1.6s var(--ease-standard) infinite; }
  .status--draft::before { background: var(--on-surface-faint); }
  .persona-card .status--queued::before, .persona-card .status--generating::before { background: transparent; border: 1.5px solid currentColor; }
  @keyframes status-pulse { 50% { opacity: 0.75; } }

  .stat__value { font-variant-numeric: tabular-nums; }
  .stat__label { font-size: var(--text-sm); line-height: 1.4; color: var(--on-surface-muted); }
  .stat__note { font-size: var(--text-xs); line-height: 1.4; color: var(--on-surface-faint); }

  .bar { display: block; block-size: 4px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
  .bar > span { display: block; block-size: 100%; background: var(--on-surface-faint); border-radius: inherit; }
  .bar--accent > span { background: var(--accent); }

  .kv { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr); gap: var(--space-1) var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
  .kv dt { color: var(--on-surface-muted); }
  .layout__aside .kv { grid-template-columns: minmax(4rem, 5.5rem) minmax(0, 1fr); column-gap: var(--space-2); }

  .notice { font-size: var(--text-sm); line-height: 1.55; color: var(--on-surface-muted); }
  .notice strong { color: var(--on-surface); }

  .subnav { display: flex; gap: var(--space-3); box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
  .subnav a { flex-shrink: 0; padding-block: var(--space-2); font-size: var(--text-sm); color: var(--on-surface-muted); text-decoration: none; border-bottom: 2px solid transparent; }
  .subnav a:hover { color: var(--on-surface); }
  .subnav a[aria-current='page'] { color: var(--on-surface); font-weight: 700; border-bottom-color: var(--on-surface); }

  .search {
    flex: 1 1 100%; min-width: 0; min-height: 2.5rem; padding: 0 var(--space-2);
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised);
  }
  .filter-chip {
    min-height: 2rem; padding: 0 var(--space-2); border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong); font-size: var(--text-sm); color: var(--on-surface-muted);
    transition: background-color 120ms var(--ease-standard), color 120ms var(--ease-standard);
  }
  .filter-chip:hover { color: var(--on-surface); }
  .filter-chip[aria-pressed='true'] { background: var(--on-surface); border-color: var(--on-surface); color: var(--surface-raised); }

  /* ---- forms ---- */
  .form { display: flex; flex-direction: column; gap: var(--space-3); }
  .fieldset { border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .fieldset__legend { font-weight: 700; }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .field__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-1); font-size: var(--text-sm); font-weight: 700; }
  .field__hint { font-size: var(--text-xs); line-height: 1.5; color: var(--on-surface-muted); }
  .field__source { font-size: var(--text-xs); font-weight: 400; color: var(--on-surface-muted); }
  .field__source--supplied::before { content: '● '; color: var(--counter); }
  .field__source--inferred::before { content: '◐ '; color: var(--accent); }
  .field__source--unknown::before { content: '○ '; color: var(--on-surface-faint); }
  /* Fields in a row share three subgrid tracks (label / control / hint), so controls align even
     when one label wraps or one field has no hint. */
  .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); column-gap: var(--space-2); row-gap: 6px; }
  .field-row > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; align-content: start; margin-bottom: var(--space-1); }
  .field-row > .field > .field__label { align-self: end; }
  .input, .select, .textarea { inline-size: 100%; min-height: 2.5rem; padding: 0 var(--space-2); background: var(--surface-raised); color: var(--on-surface); }
  .textarea { min-height: 6rem; padding: var(--space-1) var(--space-2); resize: vertical; line-height: 1.5; }
  .choices { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .choice { display: inline-flex; align-items: center; gap: 6px; min-height: 2rem; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); cursor: pointer; }
  .choice input {
    appearance: none; flex-shrink: 0; margin: 0; inline-size: 0.875rem; block-size: 0.875rem;
    border: 1.5px solid var(--line-strong); border-radius: 3px; background: var(--surface-raised);
  }
  .choice input[type='radio'] { border-radius: var(--radius-pill); }
  .choice input:checked { background: var(--selection); border-color: var(--selection); box-shadow: inset 0 0 0 2px var(--surface-raised); }
  .choice:has(input:checked) { border-color: var(--selection); background: var(--selection-subtle); font-weight: 700; }
  .form__actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

  /* A form's actions, pinned to the bottom of the screen while the form is taller than it, so the next
     step is always in sight. The note says what pressing them does (a Gemini notice sits here, beside the
     button that sends the data). On a phone the bar stays in the flow: the tab bar holds the bottom. */
  .action-bar { position: sticky; bottom: 0; z-index: var(--z-action-bar); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); border-top: 1px solid var(--line-strong); background: var(--surface-page); }
  .action-bar__note { display: grid; gap: 2px; min-width: 0; max-width: 65ch; font-size: var(--text-sm); color: var(--on-surface-muted); }
  .action-bar__note p { margin: 0; }
  .action-bar__note strong { color: var(--on-surface); }
  .action-bar > .form__actions { flex-shrink: 0; margin-inline-start: auto; }
  /* Inside a panel the bar takes the panel's own ground, so it reads as part of it */
  :is(.section, .research-form) > .action-bar { background: inherit; }
  :root[data-register] .action-bar > .form__actions { border: 0; padding: 0; }
  /* Example text reads as an example, never as an entered value: quieter than any value and never
     larger than body text, even in a display-size field like a simulation's question */
  :is(.input, .textarea)::placeholder { color: var(--on-surface-faint); opacity: .75; font-size: min(1em, 1rem); font-weight: 400; letter-spacing: 0; }

  /* What generating needs, printed on the field's label */
  .field__marker { margin-inline-start: 6px; padding: 1px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--on-surface-muted); vertical-align: 1px; }

  /* An intro leads with what you do here, in bold; the rule behind it follows for when you need it */
  .page-head__sub strong { color: var(--on-surface); font-weight: 600; }

  /* Persona characteristics: a field's explanation shows while you are in it or pointing at it, not all
     ~100 at once. Its space is kept, so nothing moves as you tab; screen readers still get it as the field's
     description. A hint that changes what you may enter (Researcher supplied only) always shows. */
  .catalog-field:not(:focus-within, :hover) > .field__hint:not(:has(strong)) { visibility: hidden; }
  .gemini-data-notice--inline { display: flex; gap: 6px; }
  .gemini-data-notice--inline > span:first-child { flex: none; }
  @media (max-width: 40rem) {
    .action-bar { position: static; flex-direction: column; align-items: stretch; }
    .action-bar > .form__actions { justify-content: space-between; margin-inline-start: 0; }
  }

  /* ---- chat ---- */
  .chat { display: flex; flex-direction: column; gap: var(--space-3); }
  .msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-2); align-items: start; }
  .msg__who { font-size: var(--text-sm); font-weight: 700; }
  .msg__time { font-weight: 400; color: var(--on-surface-faint); margin-inline-start: var(--space-1); }
  .msg__body { grid-column: 2; line-height: 1.6; max-width: 68ch; }
  .msg__body > * + * { margin-top: var(--space-1); }
  .msg__body ol, .msg__body ul { padding-inline-start: var(--space-3); }
  .msg__body ol { list-style: decimal; }
  .msg__body ul { list-style: disc; }
  .msg__body li + li { margin-top: 4px; }
  .composer { flex-wrap: nowrap; align-items: flex-end; }
  .composer .textarea { min-height: 2.75rem; }
  .composer__hint { font-size: var(--text-xs); color: var(--on-surface-faint); }

  /* ---- steps ---- */
  .steps { display: grid; gap: var(--space-2); counter-reset: step; }
  .step { counter-increment: step; min-width: 0; }
  .step__title { font-weight: 700; line-height: 1.35; }
  .step__text { font-size: var(--text-sm); line-height: 1.5; color: var(--on-surface-muted); }

  /* ---- tables ---- */
  .table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
  .table th { text-align: start; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-muted); }
  .table th, .table td { padding: var(--space-1) var(--space-2); vertical-align: baseline; }
  .table th:first-child, .table td:first-child { padding-inline-start: 0; }
  .table th:last-child, .table td:last-child { padding-inline-end: 0; }
  .table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .table th, .table .table__label { white-space: nowrap; }
  .table .table__bar { inline-size: 40%; min-inline-size: 6rem; }
  .table .table__bar .bar { block-size: 6px; }
  .table-wrap { overflow-x: auto; overscroll-behavior: contain; }

  /* =============================== CARDS =============================== */
  :root[data-register='card'] {
    & .page-head { display: flex; flex-direction: column; gap: 4px; }
    & .page-head__kicker { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
    & .page-head__title { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
    & .page-head__sub { max-width: 70ch; line-height: 1.6; }
    & .page-head__actions { margin-top: var(--space-2); }
    & .action {
      display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-3);
      border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised);
      color: var(--on-surface); text-decoration: none;
    }
    & .action:hover { border-color: var(--on-surface-muted); color: var(--on-surface); }

    & .page { display: flex; flex-direction: column; gap: var(--space-4); }
    & .layout { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); }
    & .layout--wide { grid-template-columns: minmax(0, 1fr); }
    & .layout--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

    & .section {
      display: flex; flex-direction: column; gap: var(--space-2);
      padding: var(--space-3);
      border: 1px solid transparent; border-radius: var(--radius-lg);
      background: var(--surface-raised); box-shadow: var(--shadow-card);
    }
    & .section--plain { padding: 0; border: 0; background: none; box-shadow: none; }
    & .section--feature { padding: var(--space-3); }
    & .section--quiet { background: var(--surface-sunken); box-shadow: none; border-color: transparent; }
    & .section__title { font-size: var(--text-lg); line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; }

    & .collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-2); }
    & .collection--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
    & .collection--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    & .item {
      display: flex; flex-direction: column; gap: var(--space-1);
      padding: var(--space-3);
      border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface-raised);
      transition: border-color 120ms var(--ease-standard), transform 120ms var(--ease-standard);
    }
    & .item:has(.item__title a):hover { border-color: var(--line-strong); transform: translateY(-1px); }
    & .item.is-selected { border-color: var(--selection); box-shadow: 0 0 0 1px var(--selection); background: var(--selection-subtle); }
    & .item__head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
    & .item__head > div { min-width: 0; }
    & .item__foot { margin-top: auto; padding-top: var(--space-1); justify-content: space-between; }
    & .collection--list .item {
      flex-direction: row; align-items: center; gap: var(--space-2);
      padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
    }
    & .collection--list .item:last-child { border-bottom: 0; }
    & .collection--list .item:has(.item__title a):hover { transform: none; background: var(--surface-page); }
    & .collection--list .item__foot { margin: 0 0 0 auto; padding: 0; flex-wrap: nowrap; }
    & .collection--list .item.is-selected {
      padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1);
      border-radius: var(--radius-md); background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent);
    }
    & .collection--list .thumb { display: none; }
    /* #6 one container dialect per rail: the synthetic disclaimer is quiet text, not a third box */
    & .layout__aside > .notice { padding: 0 var(--space-1); background: none; font-size: var(--text-xs); }

    & .stats { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    & .stat { flex: 1 1 7rem; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface-sunken); }
    & .stat__value { font-size: var(--text-xl); line-height: 1.2; font-weight: 300; letter-spacing: -0.01em; }

    & .tags { display: flex; flex-wrap: wrap; gap: 6px; }
    & .tag {
      display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 var(--space-1);
      border-radius: var(--radius-pill); background: var(--surface-sunken);
      font-size: var(--text-xs); line-height: 1; color: var(--on-surface-muted);
    }

    & .notice { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent-subtle); }

    & .fieldset { padding: var(--space-3); border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card); }
    & .form:has(> .fieldset + .fieldset) {
      gap: 0; padding: 0 var(--space-3);
      border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-card);
    }
    & .form:has(> .fieldset + .fieldset) > .fieldset { padding: var(--space-3) 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
    & .form:has(> .fieldset + .fieldset) > * + * { border-top: 1px solid var(--line); }
    & .form:has(> .fieldset + .fieldset) > .form__actions { padding-block: var(--space-3); }
    & .fieldset__legend { float: left; inline-size: 100%; margin-bottom: var(--space-1); font-size: var(--text-lg); }
    & .input, & .select, & .textarea { min-height: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-control); }
    & .input:focus, & .select:focus, & .textarea:focus { outline: 2px solid var(--selection); outline-offset: 0; border-color: var(--selection); }

    & .chat { padding: var(--space-3); }
    & .msg__body { padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--surface-sunken); }
    & .msg--user { grid-template-columns: minmax(0, 1fr) auto; }
    & .msg--user .avatar { grid-column: 2; grid-row: 1 / span 2; }
    & .msg--user .msg__who { grid-column: 1; grid-row: 1; justify-self: end; }
    & .msg--user .msg__body { grid-column: 1; justify-self: end; background: var(--accent-subtle); }
    & .composer { padding: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-raised); }
    & .composer .textarea { border: 0; min-height: 2.5rem; }

    & .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
    & .step { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-3); position: relative; }
    & .step::before {
      content: counter(step); position: absolute; top: 0; left: 0; transform: translateY(-50%);
      inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-pill);
      display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700;
      background: var(--surface-raised); border: 1.5px solid var(--line-strong); color: var(--on-surface-muted);
    }
    & .step::after { content: ''; position: absolute; top: 0; left: 2.25rem; right: var(--space-1); block-size: 2px; background: var(--line); }
    & .step:last-child::after { display: none; }
    & .step--done::before { content: '✓'; background: var(--signal-positive); border-color: var(--signal-positive); color: var(--on-accent); }
    & .step--done::after { background: var(--signal-positive); }
    & .step--current::before { border-color: var(--signal-activity); color: var(--signal-activity); box-shadow: 0 0 0 4px var(--selection-subtle); }
    & .steps { padding-top: var(--space-2); }

    & .steps--vertical { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-top: 0; }
    & .steps--vertical .step { padding: 0 0 0 2.75rem; }
    & .steps--vertical .step::before { transform: none; }
    & .steps--vertical .step::after { top: 2rem; bottom: calc(var(--space-3) * -1 + 4px); left: 0.8125rem; right: auto; inline-size: 2px; block-size: auto; }
    & .table thead th { border-bottom: 1px solid var(--line); }
    & .table tbody tr + tr td, & .table tbody tr + tr th { border-top: 1px solid var(--line); }
  }

  /* =============================== READING =============================== */
  :root[data-register='type'] {
    & .page-head__kicker { font-size: var(--text-sm); line-height: 1.5; color: var(--on-surface-muted); }
    & .page-head__title { margin-top: var(--space-1); font-size: var(--text-3xl); line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; max-width: 32ch; }
    & .page-head__sub { margin-top: var(--space-2); font-size: var(--text-lg); line-height: 1.55; font-weight: 300; max-width: 60ch; }
    & .page-head__actions { margin-top: var(--space-2); gap: var(--space-3); }

    & .page { display: flex; flex-direction: column; gap: var(--space-5); }
    & .layout { grid-template-columns: minmax(0, 46rem) minmax(13rem, 17rem); column-gap: var(--space-6); justify-content: start; }
    & .layout--wide { grid-template-columns: minmax(0, 64rem); }
    & .layout--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-5); }
    & .layout__main, & .layout__aside { gap: var(--space-5); }
    & .layout__aside { position: sticky; top: var(--space-3); }

    & .section { display: flex; flex-direction: column; }
    & .section__head { padding-bottom: var(--space-1); border-bottom: 1px solid var(--on-surface); }
    & .section__title {
      font-size: var(--text-xs); line-height: 1.5; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--on-surface-muted);
    }
    & .section--quiet { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--line-strong); }
    & .section--quiet .section__head { border-bottom: 0; }
    & .section > :not(.section__head) { margin-top: var(--space-2); }
    & .layout__aside .section__head { border-bottom-color: var(--line-strong); }

    & .collection, & .collection--compact, & .collection--list { display: flex; flex-direction: column; }
    & .item {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-3); row-gap: 4px;
      padding-block: var(--space-2); border-bottom: 1px solid var(--line);
    }
    & .item > * { grid-column: 1; }
    & .item__foot { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-content: flex-end; }
    & .item__head { display: flex; align-items: baseline; gap: var(--space-2); }
    & .item__head .avatar, & .item__head .thumb, & .item > .thumb { display: none; }
    & .item__title { font-size: var(--text-md); }
    & .layout__main .item__sub { font-size: var(--text-md); line-height: 1.55; }
    & .item.is-selected { box-shadow: inset 2px 0 0 var(--selection); padding-inline-start: var(--space-2); }
    & .item:has(.item__title a):hover .item__title a { text-decoration: underline; text-underline-offset: 3px; }

    & .stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
    & .stat { display: flex; flex-direction: column; }
    & .stat__value { font-size: var(--text-2xl); line-height: 1.1; font-weight: 300; letter-spacing: -0.02em; }

    & .tags { display: inline; font-size: var(--text-sm); color: var(--on-surface-muted); }
    & .tag { display: inline; }
    & .tag:not(:last-child)::after { content: ', '; }

    & .notice { padding-inline-start: var(--space-2); border-inline-start: 2px solid var(--accent); }

    & .fieldset { padding-top: var(--space-2); border-top: 1px solid var(--on-surface); }
    & .fieldset__legend {
      float: left; inline-size: 100%; margin-bottom: var(--space-1);
      font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-muted);
    }
    & .input, & .select { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding-inline: 0; background: transparent; }
    & .textarea { border: 0; border-inline-start: 2px solid var(--line-strong); border-radius: 0; background: transparent; }
    & .textarea:focus { outline: none; border-inline-start-color: var(--selection); }
    & .section__head + :is(.chat, .steps, .table, .collection), & .section__head + .table-wrap > .table { border-top: 0; }
    & .msg:last-child { border-bottom: 0; }
    & .input:focus, & .select:focus { outline: none; border-bottom: 2px solid var(--selection); }
    & .choice { border: 0; border-radius: 0; padding-inline: 0 var(--space-2); }
    & .choice:has(input:checked) { background: none; color: var(--on-surface); }

    & .chat { gap: 0; border-top: 1px solid var(--line-strong); }
    & .msg { grid-template-columns: 9rem minmax(0, 1fr); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
    & .msg .avatar { display: none; }
    & .msg__who { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; }
    & .msg__time { margin: 0; font-size: var(--text-xs); }
    & .msg__body { grid-column: 2; grid-row: 1 / span 2; }
    & .msg--user .msg__body { color: var(--on-surface-muted); font-style: italic; }
    & .composer { padding-top: var(--space-2); border-top: 1px solid var(--on-surface); }
    & .composer .textarea { border: 0; border-bottom: 1px solid var(--line-strong); padding-inline: 0; }

    & .steps { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
    & .step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-2); border-bottom: 1px solid var(--line); color: var(--on-surface-muted); }
    & .step::before { content: counter(step, decimal-leading-zero); grid-row: 1 / span 2; font-size: var(--text-sm); color: var(--on-surface-faint); }
    & .step > * { grid-column: 2; }
    & .step--done::before { content: '✓'; color: var(--signal-positive); }
    & .step--current { color: var(--on-surface); }
    & .step--current .step__title::after { content: ' — now'; font-weight: 400; color: var(--signal-activity); }

    & .table { border-top: 1px solid var(--line-strong); }
    & .table tbody tr { border-bottom: 1px solid var(--line); }
  }

  /* Compact steps: a one-line progress hint, not content (both registers). */
  :root[data-register] .steps--compact { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding-top: 0; border-top: 0; }
  :root[data-register] .steps--compact .step { display: flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; position: static; color: var(--on-surface-muted); }
  :root[data-register] .steps--compact .step::before { position: static; transform: none; inline-size: 1.5rem; block-size: 1.5rem; flex-shrink: 0; }
  :root[data-register] .steps--compact .step::after { display: none; }
  :root[data-register] .steps--compact .step__text { display: none; }
  :root[data-register] .steps--compact .step--current { color: var(--on-surface); }

  /* #1 Rail rows stack in BOTH registers: text first, the foot on its own row beneath.
     Placed last with register-level specificity so it beats the card list-row and reading grid rules. */
  :root[data-register] .layout__aside .item { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  :root[data-register] .layout__aside .item__foot { justify-content: flex-start; margin: 0; padding: 0; grid-column: auto; grid-row: auto; }
}

/* ---- responsive (unlayered on purpose: overrides must beat the layered rules) ---- */
@media (max-width: 72rem) {
  :root[data-register='card'] .layout, :root[data-register='card'] .layout--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 78rem) {
  :root[data-register='type'] .layout, :root[data-register='type'] .layout--split { grid-template-columns: minmax(0, 1fr); }
  :root[data-register='type'] .layout__aside { position: static; }
}
@media (max-width: 40rem) {
  :root[data-register='card'] .collection--list .item { flex-wrap: wrap; }
  :root[data-register='card'] .collection--list .item__foot { margin-inline-start: 0; flex-wrap: wrap; }
  :root[data-register='type'] .msg { grid-template-columns: minmax(0, 1fr); }
  :root[data-register='type'] .msg__who, :root[data-register='type'] .msg__body { grid-column: 1; grid-row: auto; flex-direction: row; gap: var(--space-1); }
  :root[data-register='type'] .item { grid-template-columns: minmax(0, 1fr); }
  :root[data-register='type'] .item__foot { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}