/* Compact handles header: two controls fit within the navigation row. */
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-variant="a"][data-step="3"] .proto-collapse,
  :root[data-variant="a"][data-step="3"] .proto-info:not([hidden]) {
    width: 24px;
    height: 24px;
    inset-block-start: 5px;
  }
  :root[data-variant="a"][data-step="3"] .proto-collapse svg {
    width: 12px;
    height: 12px;
  }
  :root[data-variant="a"][data-step="3"] .proto-info:not([hidden]) {
    inset-inline-end: 42px;
    font-size: 12px;
  }
  :root[data-variant="a"][data-step="3"] aside#atelier:has(> .proto-info:not([hidden])) nav.stages {
    padding-inline-end: 62px;
  }
  :root[data-variant="a"][data-step="3"][data-collapsed] .proto-collapse {
    inset-block-start: 16px;
  }
}

/* Summary: a bounded review sheet with quiet label/value rows. */
:root[data-step="5"] .proto-qrow { display: none; }
.review-summary { padding-block: 4px 0; }
.review-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 12px; }
.review-heading h3 { font-size: 20px; font-weight: 500; margin: 0; letter-spacing: -.35px; }
.review-heading > span { color: var(--ink-2); font-size: 12px; }
.review-tabs { display: flex; gap: 4px; padding: 3px; background: rgb(0 0 0 / .035); border-radius: 9px; }
.review-tabs button { flex: 1; min-inline-size: 0; min-block-size: 40px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; cursor: pointer; }
.review-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .07); font-weight: 500; }
.review-panel { min-block-size: 218px; padding-block-start: 8px; }
.review-panel[hidden] { display: none; }
.review-panel dl { margin: 0; }
.review-finish { padding-block: 18px 8px; }
.review-finish h4 { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.review-finish p { margin: 0 0 18px; max-inline-size: 36ch; color: var(--ink-2); font-size: 13px; line-height: 1.65; }
.review-finish-view { display: flex; align-items: center; justify-content: space-between; gap: 24px; inline-size: 100%; min-block-size: 44px; padding: 10px 16px; border: 0; border-radius: 7px; background: var(--ink); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.review-finish-view:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.review-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; border-block-end: 1px solid var(--line); min-block-size: 49px; }
.review-row:last-child { border-block-end: 0; }
.review-row dt { color: var(--ink-2); font-size: 12px; }
.review-row dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; min-inline-size: 0; font-size: 13px; line-height: 1.45; }
.review-row dd > span { overflow-wrap: anywhere; }
.review-edit { flex: none; min-block-size: 44px; padding-inline: 3px; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.review-edit:hover { color: var(--ink); }
.review-tabs button:focus-visible, .review-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.review-status { margin: 8px 0 0; padding-block: 8px 2px; border-block-start: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  :root[data-variant="a"][data-step="5"] #body { overflow: auto; padding-block: 0; }
  :root[data-step="5"] .actions { display:none; }
  :root[data-step="5"] .review-heading { padding-block: 0; block-size:32px; align-items:center; }
  :root[data-step="5"] .review-heading h3 { font-size: 18px; }
  :root[data-step="5"] .review-panel { min-block-size: 180px; padding-block-start:4px; }
  :root[data-step="5"] .review-row { min-block-size: 44px; }
  :root[data-step="5"] .review-status { margin-block-start: 0; padding-block:4px 0; }
  :root[data-variant="a"][data-step="5"] .proto-collapse,
  :root[data-variant="a"][data-step="5"] .proto-info:not([hidden]) { width:24px; height:24px; inset-block-start:5px; }
  :root[data-variant="a"][data-step="5"] .proto-collapse svg { width:12px; height:12px; }
  :root[data-variant="a"][data-step="5"] .proto-info:not([hidden]) { inset-inline-end:42px; font-size:12px; }
  :root[data-variant="a"][data-step="5"] aside#atelier:has(> .proto-info:not([hidden])) nav.stages { padding-inline-end:62px; }
  :root[data-variant="a"][data-step="5"][data-collapsed] .proto-collapse { inset-block-start:16px; }
  :root[data-variant="a"][data-step="4"] .proto-info,
  :root[data-variant="a"][data-step="4"] .proto-info-panel { display:none; }
  :root[data-variant="a"][data-step="4"] aside#atelier:has(> .proto-info:not([hidden])) nav.stages { padding-inline-end:40px; }
  :root[data-step="4"] .xrow .box { inset-inline-start:auto; inset-inline-end:6px; }
  /* Preserve the expanded layout during travel; crossfade a separate collapsed title. */
  :root[data-variant="a"] { --sheet-motion: 420ms; --sheet-ease: cubic-bezier(.22, 1, .36, 1); }
  :root[data-variant="a"] aside#atelier { transition: transform var(--sheet-motion) var(--sheet-ease); }
  :root[data-variant="a"] #stage { transition: height var(--sheet-motion) var(--sheet-ease); }
  :root[data-variant="a"] .proto-collapse { transition: inset-block-start var(--sheet-motion) var(--sheet-ease); }
  :root[data-variant="a"] .proto-collapse svg { transition: transform var(--sheet-motion) var(--sheet-ease); }
  :root[data-variant="a"] aside#atelier > nav.stages,
  :root[data-variant="a"] aside#atelier > .proto-qrow,
  :root[data-variant="a"] aside#atelier #body,
  :root[data-variant="a"] aside#atelier .actions {
    opacity: 1; transition: opacity 220ms ease 80ms, visibility 0s;
  }
  :root[data-variant="a"][data-collapsed] aside#atelier > nav.stages { height: auto; }
  :root[data-variant="a"][data-collapsed][data-step="2"] aside#atelier > .proto-qrow { display: none; }
  :root[data-variant="a"][data-collapsed] aside#atelier > nav.stages,
  :root[data-variant="a"][data-collapsed] aside#atelier > .proto-qrow,
  :root[data-variant="a"][data-collapsed] aside#atelier #body,
  :root[data-variant="a"][data-collapsed] aside#atelier .actions {
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 140ms ease, visibility 0s 140ms;
  }
  :root[data-variant="a"] .review-collapsed-heading {
    display: flex; align-items: center; position: absolute; inset-block-start: 0; inset-inline: 16px;
    block-size: 56px; padding-inline-end: 44px; font-size: 19px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
    opacity: 0; visibility: hidden; transition: opacity 100ms ease, visibility 0s 100ms;
  }
  :root[data-variant="a"][data-collapsed] .review-collapsed-heading {
    opacity: 1; visibility: visible; transition: opacity 180ms ease 160ms, visibility 0s;
  }
}
.review-collapsed-heading { display: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-variant="a"] aside#atelier, :root[data-variant="a"] #stage,
  :root[data-variant="a"] aside#atelier > nav.stages, :root[data-variant="a"] aside#atelier > .proto-qrow,
  :root[data-variant="a"] aside#atelier #body, :root[data-variant="a"] aside#atelier .actions,
  :root[data-variant="a"] .review-collapsed-heading, :root[data-variant="a"] .proto-collapse,
  :root[data-variant="a"] .proto-collapse svg { transition: none !important; }
}