.experiment-conversation-root {
  container: xlab / inline-size;
  margin-block-start: 0.75rem;
}

.xlab-shell {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  min-block-size: 36rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow-sm);
}

.xlab-rail,
.xlab-main,
.xlab-drawer {
  min-inline-size: 0;
}

.xlab-rail {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-inline-end: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface-muted) 78%, var(--surface-strong));
}

.xlab-rail-heading,
.xlab-context,
.xlab-result-heading,
.xlab-thread {
  display: flex;
  align-items: center;
}

.xlab-rail-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem;
  padding: 0.65rem;
  border-block-end: 1px solid var(--line);
}

.xlab-rail-title,
.xlab-thread {
  min-inline-size: 0;
}

.xlab-rail-title {
  display: grid;
  gap: 0.1rem;
}

.xlab-rail-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.xlab-rail-actions .small-button {
  min-block-size: 2rem;
  padding: 0.36rem 0.5rem;
  font-size: 0.68rem;
}

.xlab-rail-actions .xlab-rail-icon {
  inline-size: 1.9rem;
  padding: 0.2rem;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1rem;
}

.xlab-rail-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  inline-size: 2rem;
  min-block-size: 2rem;
  margin-inline-start: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.15rem;
  line-height: 1;
}

.xlab-rail-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.xlab-shell.is-rail-collapsed {
  grid-template-columns: 2.6rem minmax(0, 1fr);
}

.xlab-shell.is-rail-collapsed .xlab-rail {
  grid-template-rows: max-content;
}

.xlab-shell.is-rail-collapsed .xlab-rail-heading {
  padding: 0.45rem 0.25rem;
}

.xlab-shell.is-rail-collapsed .xlab-rail-title,
.xlab-shell.is-rail-collapsed .xlab-rail-actions > :not(.xlab-rail-toggle) {
  display: none;
}

.xlab-shell.is-rail-collapsed .xlab-rail-actions {
  justify-content: center;
}

.xlab-shell.is-rail-collapsed .xlab-rail-toggle {
  margin-inline-start: 0;
}

.xlab-rail-heading small,
.xlab-thread small,
.xlab-context small,
.xlab-bubble > small,
.xlab-touch small {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.xlab-thread-list,
.xlab-transcript,
.xlab-drawer {
  overflow: auto;
  scrollbar-color: var(--line-strong) transparent;
  scrollbar-width: thin;
}

.xlab-thread-list {
  padding: 0.3rem;
  max-block-size: 75dvh;
}

.xlab-thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem;
}

.xlab-thread-delete {
  padding: 0.35rem 0.45rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--danger, #a12d2d);
  font-size: 1rem;
  font-weight: 700;
}

.xlab-thread-delete:hover {
  background: color-mix(in oklab, var(--danger, #a12d2d) 10%, transparent);
}

.xlab-thread {
  position: relative;
  inline-size: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2rem 0.4rem;
  padding: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink);
  text-align: start;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.xlab-thread:hover {
  background: var(--surface-strong);
}

.xlab-thread:focus-visible,
.xlab-thread-delete:focus-visible,
.xlab-style-card:has(input:focus-visible),
.xlab-manifest-dialog :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.xlab-thread.is-current {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
  background: var(--accent-soft);
}

.xlab-thread > small {
  flex-basis: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xlab-thread-state,
.xlab-state,
.xlab-review-chip,
.xlab-pack-warning {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  color: var(--ink-soft);
  font-size: 0.64rem;
  font-weight: 720;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.xlab-main {
  display: grid;
  grid-auto-rows: auto;
  align-content: start;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 0, color-mix(in oklab, var(--accent-soft) 55%, transparent), transparent 20rem),
    var(--surface);
}

.xlab-context {
  gap: 0.75rem;
  min-block-size: 3.5rem;
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
  border-block-end: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface-strong) 92%, transparent);
}

.xlab-context > div {
  display: grid;
  flex: 0 1 10rem;
  min-inline-size: 7rem;
  gap: 0.06rem;
}

.xlab-context strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
}

.xlab-context .xlab-state {
  flex: none;
  margin-inline-start: auto;
  color: var(--accent);
}

.xlab-transcript {
  /* Sizes to its content: only a long conversation scrolls here, and it never
     reserves empty space above the active step. svh, not dvh, so the cap does
     not change while mobile browser toolbars collapse during page scroll. */
  max-block-size: clamp(24rem, 60svh, 50rem);
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(0.75rem, 1.5cqi, 1.25rem);
  scroll-padding-block: 1rem;
}

/* History and status bubbles only (no visible result or failed attempt): the
   active step below needs the room more. Visible trials are direct .is-result
   children (renderTranscript); historical ones sit inside the history
   <details>, so the child combinator ignores them. */
.xlab-transcript:not(:has(> .xlab-bubble.is-result)) {
  max-block-size: clamp(8rem, 24svh, 16rem);
}

.xlab-bubble {
  flex: 0 0 auto;
  display: grid;
  gap: 0.35rem;
  inline-size: fit-content;
  max-inline-size: min(46rem, 88%);
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 1rem 1rem 1rem 0.25rem;
  background: var(--surface-strong);
  box-shadow: 0 0.2rem 0.7rem color-mix(in oklab, var(--ink) 5%, transparent);
}

.xlab-bubble.is-user {
  align-self: end;
  border-color: color-mix(in oklab, var(--accent) 22%, var(--line));
  border-radius: 1rem 1rem 0.25rem 1rem;
  background: var(--accent-soft);
}

.xlab-bubble.is-result {
  inline-size: min(48rem, 96%);
  max-inline-size: 96%;
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
}

.xlab-bubble p,
.xlab-bubble strong,
.xlab-copy,
.xlab-subject {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-wrap: pretty;
}

.xlab-bubble time {
  color: var(--ink-soft);
  font-size: 0.64rem;
}

.xlab-result-heading {
  justify-content: space-between;
  gap: 1rem;
}

.xlab-result-heading h3,
.xlab-review-checks h4,
.xlab-review-evidence h4 {
  margin: 0;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.xlab-bubble.is-selected-iteration {
  border: 2px solid var(--accent);
}

.xlab-bubble.is-selected-iteration > .xlab-iteration-state {
  color: var(--accent);
  font-weight: 750;
}

.xlab-bubble.is-historical-iteration {
  border-style: dashed;
}

.xlab-bubble.is-current-failure {
  border-color: var(--warning);
}

.xlab-case-context,
.xlab-check-result p,
.xlab-review-evidence p {
  font-size: 0.76rem;
}

.xlab-review-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.65rem;
  margin-block: 0.55rem;
}

.xlab-check-result,
.xlab-review-evidence {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  min-inline-size: 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.xlab-check-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem;
}

.xlab-check-status {
  font-size: 0.73rem;
  font-weight: 750;
}

.xlab-check-result.is-block .xlab-check-status,
.xlab-blocking-issues > strong {
  color: var(--danger, #a12d2d);
}

.xlab-check-result.is-pass .xlab-check-status {
  color: var(--success, #24663c);
}

.xlab-check-result.is-unknown .xlab-check-status,
.xlab-evidence-unavailable {
  color: var(--warning);
}

.xlab-blocking-issues,
.xlab-advisories {
  font-size: 0.75rem;
}

.xlab-review-checks ul {
  margin: 0.3rem 0 0;
  padding-inline-start: 1.1rem;
}

.xlab-review-checks li + li {
  margin-block-start: 0.35rem;
}

.xlab-review-checks li small,
.xlab-evidence-list small {
  display: block;
  color: var(--ink-soft);
  font-size: 0.69rem;
  overflow-wrap: anywhere;
}

.xlab-evidence-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding-inline-start: 1.2rem;
  font-size: 0.76rem;
}

.xlab-evidence-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.xlab-evidence-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.xlab-evidence-list blockquote {
  margin: 0.4rem 0;
  padding-inline-start: 0.6rem;
  border-inline-start: 2px solid var(--line-strong);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.xlab-review-chip {
  color: var(--warning);
  border-color: color-mix(in oklab, var(--warning) 40%, var(--line));
  background: var(--warning-soft);
}

.xlab-touch {
  display: grid;
  gap: 0.45rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--line);
}

.xlab-touch > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.xlab-subject {
  font-weight: 680;
}

.xlab-composer {
  /* The active step takes the height it needs; the page scrolls, not the
     form. It is no longer a scroll container, so min-inline-size: 0 keeps
     long unbreakable text from widening the shared .xlab-main column. */
  position: static;
  min-inline-size: 0;
  margin: 0.5rem;
  padding: 0.65rem;
  border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: 0 -0.25rem 1rem color-mix(in oklab, var(--ink) 5%, transparent);
}

/* Long IDs, URLs or error text wrap inside the step instead of overflowing
   it, where .xlab-shell would clip them with no scrollbar. */
.xlab-composer :is(p, small, strong, li, h3, h4) {
  overflow-wrap: anywhere;
}

/* Autofocus calls scrollIntoView({ block: "start" }) on the next step. While
   this tab is visible, keep that target clear of all sticky chrome: the
   topbar, plus the .section-tabs strip that stays stuck below it at
   max-width 1180px (one row of tabs, about 4.16rem; two rows, about 6.9rem,
   at max-width 640px, where the five tabs share a four-column grid). These
   offsets follow the styles.css tab metrics; change them together. Only the
   document scroller changes, not the transcript's own scroll, and other tabs
   keep their scroll-margin convention ([data-workflow-focus-target]). */
:root:has(#experiments.is-active:not([hidden]) .xlab-shell) {
  --xlab-sticky-chrome-block-size: var(--topbar-height);
  scroll-padding-block-start: calc(var(--xlab-sticky-chrome-block-size) + 1rem);
}

@media (max-width: 1180px) {
  :root:has(#experiments.is-active:not([hidden]) .xlab-shell) {
    --xlab-sticky-chrome-block-size: calc(var(--topbar-height) + 4.2rem);
  }
}

@media (max-width: 640px) {
  :root:has(#experiments.is-active:not([hidden]) .xlab-shell) {
    --xlab-sticky-chrome-block-size: calc(var(--topbar-height) + 7rem);
  }
}

.xlab-action-form,
.xlab-subform,
.xlab-field,
.xlab-style-card,
.xlab-drawer {
  display: grid;
}

.xlab-action-form {
  gap: 0.55rem;
}

.xlab-upload-guidance,
.xlab-operation-failure {
  display: grid;
  gap: 0.4rem;
  padding: 0.6rem;
  border-inline-start: 3px solid var(--warning);
  font-size: 0.76rem;
}

.xlab-upload-guidance p,
.xlab-operation-failure p {
  margin: 0;
}

.xlab-operation-failure small {
  color: var(--ink-soft);
}

.xlab-pipeline-repair {
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  font-size: 0.78rem;
}

.xlab-pipeline-repair p {
  margin: 0;
}

.xlab-disclosure,
.xlab-conversation-history {
  min-inline-size: 0;
  border-block-start: 1px solid var(--line);
}

.xlab-disclosure > summary,
.xlab-conversation-history > summary {
  padding-block: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}

.xlab-disclosure > summary:focus-visible,
.xlab-conversation-history > summary:focus-visible,
.xlab-rail-icon:focus-visible,
.xlab-rail-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.xlab-conversation-history > .xlab-bubble {
  margin-block-end: 0.7rem;
}

.xlab-workbook-issue {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--warning) 45%, var(--line));
  border-radius: var(--radius-md);
  background: var(--warning-soft);
}

.xlab-workbook-issue > p {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
}

.xlab-stage-plan {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-inline-start: 1.3rem;
}

.xlab-stage-plan li {
  padding-inline-start: 0.15rem;
}

.xlab-stage-plan li > p {
  margin: 0.18rem 0;
  color: var(--ink);
  font-size: 0.78rem;
}

.xlab-stage-plan li > small {
  color: var(--ink-soft);
}

.xlab-action-form h3,
.xlab-action-form p,
.xlab-drawer h3,
.xlab-drawer p {
  margin: 0;
}

.xlab-action-form > p,
.xlab-boundary-note {
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-wrap: pretty;
}

.xlab-subform {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--line);
}

.xlab-subform > .xlab-field:first-child:has(textarea),
.xlab-subform > .xlab-checkline {
  grid-column: 1 / -1;
}

[data-xlab-diff] {
  grid-column: 1 / -1;
  min-inline-size: 0;
  container: message-comparison / inline-size;
}

.xlab-message-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.xlab-message-version {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@container message-comparison (max-width: 36rem) {
  .xlab-message-comparison { grid-template-columns: minmax(0, 1fr); }
}

.xlab-field {
  gap: 0.28rem;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 650;
}

.xlab-field small {
  color: var(--ink-soft);
  font-weight: 450;
  line-height: 1.35;
}

.xlab-field textarea {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 30dvh;
}

/* Workbook upload — styled control + persistent staged-file status */
.xlab-file-input {
  inline-size: 100%;
  padding: 0.5rem;
  border: 1px dashed color-mix(in oklab, var(--accent) 40%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--accent-soft) 45%, var(--surface-strong));
  color: var(--ink-soft);
  font-size: 0.76rem;
  cursor: pointer;
}

.xlab-file-input:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent-soft) 70%, var(--surface-strong));
}

.xlab-file-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.xlab-file-input::file-selector-button {
  margin-inline-end: 0.7rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.xlab-file-input::file-selector-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.xlab-file-input:disabled {
  cursor: progress;
  opacity: 0.65;
}

.xlab-file-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  font-size: 0.76rem;
  font-weight: 450;
}

.xlab-file-status.is-empty {
  color: var(--ink-soft);
  font-style: italic;
  border-style: dashed;
}

.xlab-file-status.is-ready {
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  background: color-mix(in oklab, var(--accent-soft) 35%, var(--surface-strong));
}

.xlab-file-status.is-attention {
  border-color: color-mix(in oklab, var(--warning) 45%, var(--line));
  background: var(--warning-soft);
}

.xlab-file-status.is-busy {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  background: color-mix(in oklab, var(--accent-soft) 55%, var(--surface-strong));
}

.xlab-file-icon {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.xlab-file-meta {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.xlab-file-name {
  overflow: hidden;
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xlab-file-sub {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

.xlab-file-phase {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-weight: 650;
  white-space: nowrap;
}

.xlab-file-status.is-attention .xlab-file-phase {
  color: var(--warning);
}

.xlab-file-status.is-ready .xlab-file-phase,
.xlab-file-status.is-busy .xlab-file-phase {
  color: var(--accent);
}

.xlab-spinner {
  flex: 0 0 auto;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border: 2px solid color-mix(in oklab, var(--accent) 28%, transparent);
  border-block-start-color: var(--accent);
  border-radius: 50%;
  animation: xlab-spin 0.7s linear infinite;
}

.xlab-bubble.is-busy {
  border-style: dashed;
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
  background: color-mix(in oklab, var(--accent-soft) 30%, var(--surface-strong));
}

.xlab-busy-line {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.xlab-busy-line p {
  margin: 0;
}

@keyframes xlab-spin {
  to { transform: rotate(360deg); }
}

.xlab-style-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.xlab-style-paths legend {
  margin-block-end: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.xlab-style-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  align-content: start;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.xlab-style-card:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.xlab-saved-style-card > h4 {
  margin: 0;
}

.xlab-saved-source-option {
  display: grid;
  gap: 0.55rem;
}

.xlab-saved-source-option + .xlab-saved-source-option {
  padding-block-start: 0.65rem;
  border-block-start: 1px solid var(--line);
}

.xlab-style-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-inline-size: 0;
}

.xlab-style-choice input {
  flex: 0 0 1rem;
  inline-size: 1rem;
  block-size: 1rem;
  min-inline-size: 1rem;
  min-block-size: 1rem;
  padding: 0;
  accent-color: var(--accent);
}

.xlab-checkline {
  display: flex;
  align-items: start;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.4;
}

.xlab-checkline input {
  flex: 0 0 1rem;
  inline-size: 1rem;
  block-size: 1rem;
  min-inline-size: 1rem;
  min-block-size: 1rem;
  padding: 0;
  margin-block-start: 0.15rem;
  accent-color: var(--accent);
}

.xlab-drawer {
  align-content: start;
  gap: 0.7rem;
  padding: 0.9rem;
  border-inline-start: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface-muted) 78%, var(--surface-strong));
}

.xlab-json {
  min-inline-size: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
}

.xlab-json summary {
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 680;
}

.xlab-json pre {
  max-block-size: 18rem;
  margin: 0;
  overflow: auto;
  padding: 0.65rem;
  border-block-start: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.66rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.xlab-pack-warning {
  justify-self: start;
  text-transform: none;
}

.xlab-pack-warning.is-experimental {
  color: var(--warning);
  border-color: color-mix(in oklab, var(--warning) 40%, var(--line));
  background: var(--warning-soft);
}

.xlab-empty,
.xlab-error {
  min-block-size: 0;
  place-content: start;
  text-align: start;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  min-block-size: 18rem;
  padding: 2rem;
  text-align: center;
}

.xlab-error {
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
}

.xlab-manifest-dialog {
  inline-size: min(44rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.xlab-manifest-dialog::backdrop {
  background: color-mix(in oklab, var(--ink) 48%, transparent);
  backdrop-filter: blur(0.18rem);
}

.xlab-manifest-dialog form {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 4cqi, 1.5rem);
}

.xlab-manifest-dialog h2,
.xlab-manifest-dialog p {
  margin: 0;
}

@container xlab (width < 66rem) {
  .xlab-shell {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

@container xlab (width < 45rem) {
  .xlab-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .xlab-rail {
    max-block-size: 13rem;
    border-block-end: 1px solid var(--line);
    border-inline-end: 0;
  }

  .xlab-shell.is-rail-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .xlab-shell.is-rail-collapsed .xlab-rail {
    max-block-size: 3.5rem;
  }

  .xlab-thread-list {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
  }

  .xlab-thread {
    min-inline-size: 0;
  }

  .xlab-thread-row {
    flex: 0 0 16rem;
  }

  .xlab-context {
    flex-wrap: wrap;
  }

  .xlab-context .xlab-state {
    margin-inline-start: 0;
  }

  /* The rail and the wrapped context bar already sit above the transcript
     here, so both transcript caps shrink. */
  .xlab-transcript {
    max-block-size: clamp(16rem, 48svh, 32rem);
  }

  .xlab-transcript:not(:has(> .xlab-bubble.is-result)) {
    max-block-size: clamp(8rem, 20svh, 12rem);
  }

  .xlab-style-paths,
  .xlab-subform {
    grid-template-columns: minmax(0, 1fr);
  }

  .xlab-subform > * {
    grid-column: 1;
  }

  .xlab-drawer {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xlab-shell *,
  .xlab-manifest-dialog {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  .xlab-shell,
  .xlab-bubble,
  .xlab-composer,
  .xlab-style-card,
  .xlab-json {
    border-width: 2px;
  }
}

.xlab-capability-status { margin: 0; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border-color, #d6dbe4); color: var(--text-secondary, #525e70); font-size: 0.74rem; }
.xlab-error { margin: 1rem; padding: 1rem; border: 1px solid #b64b32; border-radius: 0.65rem; background: #fff6f2; color: #713723; }
.xlab-error button + button { margin-left: 0.5rem; }
.xlab-validation { display: grid; gap: 0.6rem; padding: 0.5rem 0; }
.xlab-validation h3, .xlab-validation p { margin: 0; }
.xlab-validation .xlab-subform { display: grid; gap: 0.75rem; }

.xlab-workbook-mapping { display: grid; gap: 0.75rem; min-inline-size: 0; }
.xlab-workbook-mapping h4, .xlab-workbook-mapping p { margin: 0; }
.xlab-mapping-group { display: grid; gap: 0.55rem; min-inline-size: 0; margin: 0; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.xlab-mapping-group legend { padding-inline: 0.3rem; font-weight: 650; }
.xlab-mapping-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem 0.9rem; }
.xlab-mapping-fields label, .xlab-mapping-fields select { min-inline-size: 0; max-inline-size: 100%; }
.xlab-mapping-optional summary { cursor: pointer; color: var(--ink-soft); padding-block: 0.3rem; }
.xlab-mapping-optional[open] .xlab-mapping-fields { margin-block-start: 0.5rem; }