.shell__stage--reader, .shell__stage--mono, .shell__stage--mono-capped, .shell__stage--canvas,
.shell__stage--duo, .shell__stage--lead-aside, .shell__stage--stack-rail, .shell__stage--rail-stack,
.shell__stage--thirds,
.shell__stage--header-split, .shell__stage--split-footer, .shell__stage--quad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--content-pad);
  align-content: start;

  --zone-aside: clamp(280px, 32%, 352px);
  --zone-min: 320px;
}
.shell__stage--canvas { gap: 0; }

.shell__workspace:has(> .shell__stage > .shell__stage__body.shell__stage--canvas) {
  overflow: hidden;
}
.shell__stage:has(> .shell__stage__body.shell__stage--canvas) {
  flex: 1 1 0;
  min-height: 0;
}
.shell__stage__body.shell__stage--canvas {
  flex: 1 1 0;
  min-height: 0;
  align-content: stretch;
  grid-template-rows: minmax(0, 1fr);
}

.shell__stage--reader {
  grid-template-columns: minmax(0, var(--content-max-width));
  justify-content: center;
}

.shell__stage__body, .shell__zone { min-width: 0; }

.shell__zone { align-self: start; }

.shell__stage--mono-capped, .shell__stage--duo, .shell__stage--lead-aside, .shell__stage--stack-rail,
.shell__stage--rail-stack,
.shell__stage--thirds, .shell__stage--header-split, .shell__stage--split-footer,
.shell__stage--quad {
  max-width: calc(var(--stage-max-width) + 2 * var(--content-pad));
}

.shell__workspace:has(.shell__stage--rung-736),
.shell__workspace:has(.shell__stage--rung-904),
.shell__workspace:has(.shell__stage--rung-1088) {
  container-type: inline-size;
  container-name: workspace;
}

@media (min-width: 768px) {
  @container workspace (min-width: 736px) {
    .shell__stage--duo          { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shell__stage--header-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shell__stage--header-split .shell__zone--z1 { grid-column: 1 / -1; }
    .shell__stage--split-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shell__stage--split-footer .shell__zone--z3 { grid-column: 1 / -1; }
    .shell__stage--quad         { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @container workspace (min-width: 736px) and (max-width: 1087.98px) {
    .shell__workspace:not(:has(> .shell__zonetabs)) .shell__stage--thirds {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container workspace (min-width: 904px) {
    .shell__stage--lead-aside   { grid-template-columns: minmax(0, 2fr) minmax(0, var(--zone-aside)); }
    .shell__stage--stack-rail   { grid-template-columns: minmax(0, var(--zone-aside)) minmax(0, 1fr); }
    .shell__stage--stack-rail .shell__zone--z1,
    .shell__stage--stack-rail .shell__zone--z2 { grid-column: 1; }
    .shell__stage--stack-rail .shell__zone--z3 { grid-column: 2; grid-row: 1 / span 2; }

    .shell__stage--rail-stack   { grid-template-columns: minmax(0, 1fr) minmax(0, var(--zone-aside)); }
    .shell__stage--rail-stack .shell__zone--z1 { grid-column: 1; grid-row: 1 / span 2; }
    .shell__stage--rail-stack .shell__zone--z2,
    .shell__stage--rail-stack .shell__zone--z3 { grid-column: 2; }
  }

  @container workspace (min-width: 1088px) {
    .shell__stage--thirds       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

.shell__zone { --zone-pad: clamp(12px, 1.6vw, 16px); }
.shell__zone--pad { padding: var(--zone-pad); }

@media (min-width: 768px) {

  .shell__zone--scroll { overflow-y: auto; min-height: 0; align-self: start; max-height: 100%; --chrome-top: 0px; }

  .shell__stage:has(.shell__zone--scroll) {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: var(--content-pad);
  }
  .shell__stage__body:has(> .shell__zone--scroll) {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  @container workspace (min-width: 904px) {
    .shell__stage--stack-rail:has(> .shell__zone--scroll)   { grid-template-rows: auto minmax(0, 1fr); }
    .shell__stage--rail-stack:has(> .shell__zone--scroll)   { grid-template-rows: auto minmax(0, 1fr); }
  }
  @container workspace (min-width: 736px) {
    .shell__stage--header-split:has(> .shell__zone--scroll) { grid-template-rows: auto minmax(0, 1fr); }
    .shell__stage--quad:has(> .shell__zone--scroll)         { grid-template-rows: repeat(2, minmax(0, 1fr)); }
  }

  @container workspace (min-width: 736px) {
    .shell__stage--split-footer:has(> .shell__zone--z3.shell__zone--scroll) { grid-template-rows: auto minmax(0, 1fr); }
    .shell__stage--split-footer:has(> .shell__zone--z1.shell__zone--scroll),
    .shell__stage--split-footer:has(> .shell__zone--z2.shell__zone--scroll) { grid-template-rows: minmax(0, 1fr) auto; }
  }

  .shell__stage--reader:has(> .shell__zone--z2):has(> .shell__zone--scroll),
  .shell__stage--canvas:has(> .shell__zone--z2):has(> .shell__zone--scroll) {
    grid-template-rows: auto;
    grid-auto-rows: minmax(0, 1fr);
  }

  .shell__zone--fill { align-self: stretch; min-height: 0; }

  .shell__stage:has(.shell__zone--fill) {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: var(--content-pad);
  }
  .shell__stage__body:has(> .shell__zone--fill) {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
}

.shell__zone--no-scrollbar { scrollbar-width: none; }
.shell__zone--no-scrollbar::-webkit-scrollbar { display: none; }

.shell__zone--card {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: var(--zone-pad);
}
.shell__zone--well {
  background-color: var(--surface-zone-well);
  border-radius: 12px;
  padding: var(--zone-pad);
}
.shell__zone--outline {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--zone-pad);
}

.shell__zone--paper {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: var(--zone-pad);
}

.shell__zone--card > .card,
.shell__zone--well > .card,
.shell__zone--outline > .card,
.shell__zone--paper > .card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.shell__zone--bleed.shell__zone--card,
.shell__zone--bleed.shell__zone--paper {
  padding: 0;
  overflow: hidden;
}

.shell__banner--strip {
  margin: calc(-1 * var(--banner-bleed)) calc(-1 * var(--banner-bleed)) 0;
  padding: var(--space-3) var(--content-pad);
  background-color: var(--status-info-bg);
  color: var(--status-info-text);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.shell__banner--inset {
  background-color: var(--accent-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shell__banner:not(.shell__banner--strip) {
  max-width: calc(var(--stage-max-width) + 2 * var(--content-pad));
}

.shell__dock--duo .shell__dock-content,
.shell__dock--thirds .shell__dock-content,
.shell__dock--quarters .shell__dock-content,
.shell__dock--quint .shell__dock-content { display: grid; align-items: center; }
.shell__dock--duo .shell__dock-content      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shell__dock--thirds .shell__dock-content   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shell__dock--quarters .shell__dock-content { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shell__dock--quint .shell__dock-content    { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.shell__dock--duo .shell__dock-content > *,
.shell__dock--thirds .shell__dock-content > * {
  flex: unset;
  min-width: 0;
  display: flex;
  align-items: center;
}
.shell__dock--duo .shell__dock-content > :first-child,
.shell__dock--thirds .shell__dock-content > :first-child { justify-content: flex-start; }
.shell__dock--thirds .shell__dock-content > :nth-child(2) { justify-content: center; }
.shell__dock--duo .shell__dock-content > :last-child,
.shell__dock--thirds .shell__dock-content > :last-child { justify-content: flex-end; }