.shell {
  min-block-size: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
}

html {
  scroll-padding-block-start: var(--topbar-stick);
}

.shell__topbar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--space-3);
  block-size: var(--topbar-h);
  padding-inline: var(--space-gutter);
  background: var(--color-topbar);
  color: var(--color-topbar-text);
}

.shell__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

.shell__logo {
  inline-size: auto;
  block-size: clamp(1.8rem, 4vw, 2.2rem);
}

.shell__account {
  justify-self: end;
}

.shell__main {
  display: grid;
  gap: var(--space-section);
  max-inline-size: var(--content-max);
  margin-inline: auto;
  padding: var(--space-8) var(--space-gutter);
}

.shell__card {
  display: grid;
  gap: var(--space-card-stack);
  padding: var(--space-card);
}

.shell__card--lead {
  border-block-start: var(--space-1) solid var(--tone);
}

.shell__card > .button-row:last-child,
.shell__card > .button-row:has(+ .shell__note:last-child),
.shell__card > .button-row:has(+ .shell__note + .shell__note:last-child),
.shell__card-foot {
  margin-block-start: calc(var(--space-section) / 2 - var(--space-card-stack));
  padding-block-start: calc(var(--space-section) / 2);
  border-block-start: 1px solid var(--color-border-light);
}

.shell__card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.shell__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-toolbar);
}

.shell__heading {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell__note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.shell__note:empty {
  display: none;
}

.shell__note--error {
  color: var(--color-error);
}

.shell__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-grid);
}

.shell__fact {
  display: grid;
  gap: var(--space-label);
}

.shell__fact-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.shell__fact-value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
}

.scroll-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

[data-section="chat"] .shell__topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-dropdown);
}

.shell--bare > .shell__topbar {
  display: none;
}

.shell--bare > .shell__main {
  display: block;
  max-inline-size: none;
  padding: 0;
}

@media (max-width: 768px) {
  .shell__topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-dropdown);
    transition: transform var(--dur-fast) var(--ease-out);
  }

  :root[data-topbar-hidden]:not([data-section="chat"]) {
    --topbar-stick: 0px;
  }

  :root[data-topbar-hidden]:not([data-section="chat"]) .shell__topbar {
    transform: translateY(-100%);
  }
}

@media (min-width: 769px) {
  .shell__main {
    padding-block-end: calc(var(--space-8) + var(--control-h) + var(--space-gutter));
  }

  [data-section="chat"] .shell__main {
    max-inline-size: none;
    padding: 0;
  }
}

@media (max-width: 768px) {
  [data-section="chat"] .shell__main {
    padding-block-end: 0;
  }
}