/* ==========================================================================
   Scene layout
   --------------------------------------------------------------------------
   Structure only: grid, flex, gap, sizing, measure and responsive behaviour.
   Scenes never declare their own appearance — every fill, edge and shadow
   comes from the active theme tokens and the active style pack.

   The exceptions, all of which reference a theme token rather than a
   literal, are the auth divider rule, the settings save-bar edge and fill
   (a sticky bar needs an opaque ground), and the reader pull-quote rule:
   each carries structural meaning and cannot be expressed with layout alone.

   Every scene root declares `container-type: inline-size`, so the breakpoints
   below respond to the width of the preview frame rather than the width of
   the browser window. That is what makes the phone / tablet / desktop toggle
   truthful.

   A container query cannot style its own container. So every rule inside an
   @container block targets a child of the scene root, never the root itself.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Box model
   _base.css sets border-box only on c-* classes. Scene wrappers set a
   width of 100% plus padding, so they need border-box too. If not, they
   grow wider than the frame and the right edge is clipped.
   -------------------------------------------------------------------------- */

:where(.s-dashboard, .s-landing, .s-reader, .s-settings, .s-auth, .s-empty),
:where(.s-dashboard, .s-landing, .s-reader, .s-settings, .s-auth, .s-empty) :where([class^="s-"], [class*=" s-"]) {
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Navbar at narrow widths
   The c-navbar component does not wrap. Under 40rem the scene puts the
   links on a second, full-width row. The brand and the actions stay on the
   first row, so the primary button and the avatar stay visible.
   -------------------------------------------------------------------------- */

@container (max-width: 40rem) {
  .s-dashboard__navbar,
  .s-landing__navbar,
  .s-reader__navbar,
  .s-settings__navbar,
  .s-empty__navbar {
    flex-wrap: wrap;
    row-gap: var(--space-2);
    padding-inline: var(--space-4);
  }

  .s-dashboard__navbar .c-navbar__links,
  .s-landing__navbar .c-navbar__links,
  .s-reader__navbar .c-navbar__links,
  .s-settings__navbar .c-navbar__links,
  .s-empty__navbar .c-navbar__links {
    order: 3;
    flex: 1 0 100%;
    inline-size: 100%;
  }

  .s-dashboard__navbar .c-navbar__actions,
  .s-landing__navbar .c-navbar__actions,
  .s-reader__navbar .c-navbar__actions,
  .s-settings__navbar .c-navbar__actions,
  .s-empty__navbar .c-navbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }

  /* The time-range menu is secondary. The page heading still says
     "Production", and the chart says "last 24 hours". */
  .s-dashboard__navbar .c-dropdown {
    display: none;
  }

}

/* A narrow frame gets a smaller link set, not the same set on two rows or
   behind a scroll fade. Under 56rem the dashboard shows only the first four
   links (Overview, Deployments, Analytics, Logs). At a 761 px builder stage
   the four actions use most of the first row, so the links go to a second,
   full-width row (the same wrap as the 40rem rule above). */
@container (max-width: 56rem) {
  .s-dashboard__navbar {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  .s-dashboard__navbar .c-navbar__links {
    order: 3;
    flex: 1 0 100%;
    inline-size: 100%;
  }

  .s-dashboard__navbar .c-navbar__actions {
    margin-inline-start: auto;
  }

  .s-dashboard__navbar .c-navbar__link:nth-child(n + 5) {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Shared resets for media inside scenes
   -------------------------------------------------------------------------- */

.s-dashboard svg,
.s-landing svg,
.s-reader svg,
.s-settings svg,
.s-auth svg,
.s-empty svg {
  max-width: 100%;
}

/* Inline code inside prose. The pack owns the code block; this only makes sure
   a bare <code> in a sentence picks up the theme's mono family. */
.s-dashboard :not(pre) > code,
.s-landing :not(pre) > code,
.s-reader :not(pre) > code,
.s-settings :not(pre) > code,
.s-auth :not(pre) > code,
.s-empty :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}


/* ==========================================================================
   Dashboard
   ========================================================================== */

.s-dashboard {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s-dashboard__navbar {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Avatar trigger for the name tooltip: the button is only as wide as the
   avatar, and the bubble aligns to the end edge, so it stays in the scene. */
.s-dashboard__user > .c-btn {
  padding-inline: var(--space-1);
}

.s-dashboard__user > .c-tooltip__bubble {
  left: auto;
  right: 0;
  transform: none;
  translate: none;
  text-align: end;
}

/* Skip link: out of view until it gets keyboard focus. Then it shows
   above the navbar at the top left corner of the scene. */
.s-dashboard__skip {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-3);
  z-index: 4;
  transform: translateY(-200%);
}

.s-dashboard__skip:focus,
.s-dashboard__skip:focus-visible {
  transform: none;
}

.s-dashboard__body {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
  padding: var(--space-5);
}

.s-dashboard__side {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--space-8) + var(--space-2));
}

/* <main> comes before the sidebar in the DOM, so the page <h1> is the first
   heading. The grid puts it back in the second column. */
.s-dashboard__main {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.s-dashboard__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.s-dashboard__heading-text {
  min-width: 0;
}

.s-dashboard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.s-dashboard__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.s-dashboard__heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.s-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
}

.s-dashboard .c-stat__spark svg {
  display: block;
  width: 100%;
  height: 2rem;
}

.s-dashboard__split {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

/* Grid and flex children default to min-content width, which lets a wide table
   or a long code line blow the column out. These pin them back. */
.s-dashboard__chart-card,
.s-dashboard__region-card,
.s-dashboard__table-card {
  min-width: 0;
}

.s-dashboard__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.s-dashboard__chart-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 6;
}

.s-dashboard__chart-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

.s-dashboard__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.s-dashboard__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* A 16 by 16 px key is a color patch large enough to tell apart from the next key. */
.s-dashboard__legend-key {
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--space-4);
  block-size: var(--space-4);
}

.s-dashboard__meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block-end: var(--space-4);
}

.s-dashboard__meter:last-child {
  margin-block-end: 0;
}

.s-dashboard__meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.s-dashboard__table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.s-dashboard__table-tools .c-input {
  inline-size: 14rem;
  max-inline-size: 100%;
}

/* The status chips take a full row under the title and the tools. */
.s-dashboard__filter {
  flex: 1 0 100%;
}

.s-dashboard__table-wrap {
  overflow-x: auto;
}

.s-dashboard__table-wrap .c-table {
  min-inline-size: 46rem;
}

/* Selection column: only as wide as the checkbox. */
.s-dashboard__select {
  inline-size: 1%;
  white-space: nowrap;
}

.s-dashboard__select .c-checkbox {
  gap: 0;
}

/* Presence row under the page title: the list row has no inset of its own
   here, and the two avatars overlap by a quarter of their width. */
.s-dashboard__presence {
  margin-block-start: var(--space-2);
}

.s-dashboard__presence .c-list__row {
  gap: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
}

.s-dashboard__presence-faces {
  display: inline-flex;
  flex-shrink: 0;
}

.s-dashboard__presence-faces > .c-avatar + .c-avatar {
  margin-inline-start: calc(-1 * var(--space-2));
}

.s-dashboard__table-caption {
  text-align: start;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  padding-block-end: var(--space-3);
}

.s-dashboard__table-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.s-dashboard__table-count {
  margin: 0;
  font-size: var(--text-sm);
}

/* The toast is the last child of the scene root. Sticky keeps it at the
   bottom of the visible frame while the page scrolls. At the end of the page
   it sits below the table card, so it never covers the pagination. */
.s-dashboard .s-dashboard__toast {
  position: sticky;
  inset-block-end: var(--space-5);
  z-index: 80; /* base scale: toast */
  align-self: flex-end;
  inline-size: auto;
  max-inline-size: 24rem;
  margin: 0 var(--space-5) var(--space-5);
}

@container (max-width: 60rem) {
  .s-dashboard__split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 52rem) {
  .s-dashboard__body {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .s-dashboard__main {
    grid-column: 1;
  }

  /* The navbar holds the primary links at this width. The full sidebar
     would push the KPIs off the first screen, so it is hidden. */
  .s-dashboard__side {
    display: none;
  }

  .s-dashboard .s-dashboard__toast {
    align-self: stretch;
    max-inline-size: none;
    margin-inline: var(--space-4);
  }
}

/* Under 40rem the table needs all of its width for the data. The selection
   column and the bulk action go away together, so no button acts on rows
   that the user cannot see. */
@container (max-width: 40rem) {
  .s-dashboard__select,
  .s-dashboard__bulk {
    display: none;
  }
}

/* On a narrow stage the bottom of the screen holds the heading actions,
   the navbar row or the table, so a sticky toast covers them. Under 52rem
   the toast stays in the flow at the end of the scene and covers no
   content. At 52rem (a 727 px stage), the sticky toast covered the navbar
   row. */
@container (max-width: 52rem) {
  .s-dashboard .s-dashboard__toast {
    position: relative;
    inset-block-end: auto;
  }
}


/* ==========================================================================
   Landing
   ========================================================================== */

.s-landing {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s-landing__navbar {
  position: sticky;
  top: 0;
  z-index: 3;
}

.s-landing__footer {
  margin-block-start: auto;
}

.s-landing__main {
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.s-landing__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-7);
}

.s-landing__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}

.s-landing__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.s-landing__title {
  margin: 0;
  max-inline-size: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.s-landing__lede {
  margin: 0;
  max-inline-size: 52ch;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.s-landing__watch {
  margin: 0;
}

.s-landing__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-1);
}

.s-landing__fineprint {
  margin: 0;
  max-inline-size: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.s-landing__hero-art {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.s-landing__hero-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.s-landing__hero-note {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.s-landing__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.s-landing__logos-label {
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.s-landing__logos-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.s-landing__logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  opacity: 0.72;
}

.s-landing__features,
.s-landing__proof {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.s-landing__section-title {
  margin: 0;
  max-inline-size: 26ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.s-landing__section-lede {
  margin: 0;
  max-inline-size: 60ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.s-landing__triptych {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.s-landing__triptych .c-card {
  display: flex;
  flex-direction: column;
}

.s-landing__triptych .c-card__body {
  flex: 1 1 auto;
}

.s-landing__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-4);
}

.s-landing__quote {
  margin: 0;
}

.s-landing__quote-text {
  margin: 0;
  max-inline-size: 62ch;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

/* The video link sits under the quote, one space step below it. */
.s-landing__quote-video {
  margin-block-start: var(--space-3);
}

.s-landing__quote-by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.s-landing__quote-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
}

.s-landing__quote-role {
  font-size: var(--text-xs);
}

.s-landing__signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: center;
  gap: var(--space-6);
}

.s-landing__signup-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.s-landing__signup-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

@container (max-width: 56rem) {
  .s-landing__hero,
  .s-landing__signup {
    grid-template-columns: minmax(0, 1fr);
  }

  .s-landing__main {
    gap: var(--space-7);
    padding: var(--space-6) var(--space-4) var(--space-7);
  }

  .s-landing__title {
    max-inline-size: none;
    font-size: var(--text-2xl);
  }

  /* The hero H1 stays one step above the section titles. */
  .s-landing__section-title {
    font-size: var(--text-xl);
  }
}


/* ==========================================================================
   Reader
   ========================================================================== */

.s-reader {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* One sticky wrapper holds the progress bar and the navbar, so the bar
   sits above the navbar and does not cover its top edge. */
.s-reader__top {
  position: sticky;
  top: 0;
  z-index: 3;
}

.s-reader__main {
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: var(--space-7);
}

.s-reader__article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.s-reader__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.s-reader__kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.s-reader__title {
  margin: 0;
  max-inline-size: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.s-reader__deck {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.s-reader__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

.s-reader__byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.s-reader__author {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.s-reader__author-role {
  font-weight: var(--weight-normal);
}

.s-reader__dateline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.s-reader__listen {
  flex: none;
}

/* The audio length is secondary text inside the button. */
.s-reader__listen-length {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}

.s-reader__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.s-reader__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.s-reader__figure-art {
  overflow-x: auto;
}

.s-reader__figure-art svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.s-reader__section-title {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  /* Two lines of the body baseline grid, not a multiple of the heading size. */
  line-height: calc(2 * var(--text-base) * var(--leading-normal));
  letter-spacing: var(--tracking-tight);
  scroll-margin-block-start: calc(var(--space-8) + var(--space-5));
}

.s-reader__body > .s-reader__section-title:first-child {
  margin-block-start: 0;
}

.s-reader__caption {
  margin: 0;
  max-inline-size: 66ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.s-reader__body {
  max-inline-size: 68ch;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* The gap between paragraphs is one body line height, so the text stays on
   the baseline grid. */
.s-reader__body > p {
  margin: 0 0 calc(1em * var(--leading-normal));
}

.s-reader__body > p:last-child {
  margin-block-end: 0;
}

/* The related articles close the body. Its gap is one body line height,
   so it stays on the baseline grid. */
.s-reader__related {
  margin-block-end: calc(1em * var(--leading-normal));
}

.s-reader__related-list {
  margin: 0;
}

/* "Back to top" link at the end of each section. Smaller type puts it
   below the body text in the reading order. */
.s-reader__back {
  font-size: var(--text-sm);
}

.s-reader__pullquote {
  margin: var(--space-6) 0;
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
}

.s-reader__pullquote > p {
  margin: 0;
  max-inline-size: 34ch;
}

.s-reader__code {
  margin-block: var(--space-5);
}

.s-reader__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block-start: var(--space-4);
}

.s-reader__author-card,
.s-reader__aside-card {
  min-width: 0;
}

.s-reader__author-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.s-reader__author-body > .c-avatar {
  flex-shrink: 0;
}

.s-reader__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.s-reader__author-body p {
  margin: var(--space-2) 0 0;
  max-inline-size: 60ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.s-reader__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
}

.s-reader__aside {
  position: sticky;
  /* Navbar height plus one space step, so the TOC stays below the navbar. */
  top: calc(var(--space-8) + var(--space-5));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.s-reader__aside-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.s-reader__toc {
  font-size: var(--text-sm);
}

@container (max-width: 58rem) {
  .s-reader__main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5) var(--space-4) var(--space-7);
  }

  .s-reader__aside {
    position: static;
  }

  .s-reader__title {
    max-inline-size: none;
    font-size: var(--text-2xl);
  }

  .s-reader__tags {
    margin-inline-start: 0;
  }
}

/* Under 40rem the diagram labels get too small to read. The figure keeps a
   minimum width and scrolls sideways instead. */
@container (max-width: 40rem) {
  .s-reader__figure-art svg {
    min-inline-size: 36rem;
  }
}


/* ==========================================================================
   Settings
   ========================================================================== */

/* The root is only the query container. The padding lives on
   .s-settings__main, so the @container rule below can change it. */
.s-settings {
  container-type: inline-size;
  min-height: 100%;
}

.s-settings__navbar {
  position: sticky;
  top: 0;
  z-index: 3;
}

.s-settings__main {
  inline-size: 100%;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.s-settings__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.s-settings__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.s-settings__subtitle {
  margin: 0;
  max-inline-size: 68ch;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.s-settings__tabs,
.s-settings__panel {
  min-width: 0;
}

.s-settings__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.s-settings__section {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}

.s-settings__section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.s-settings__section-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.s-settings__section-note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* One field column per section: the eye follows one vertical scan line.
   The gap of --space-5 is 60 percent of a 40px input. */
.s-settings__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.s-settings__field--wide {
  grid-column: 1 / -1;
}

.s-settings__group {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.s-settings__group > legend {
  padding: 0;
  margin-block-end: var(--space-2);
}

.s-settings__toggles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.s-settings__inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

/* Sticky at the bottom of the frame, so Save is reachable without a
   scroll past the danger zone. The fill hides the fields that scroll below.
   The actions start at the left edge of the field column: the start padding
   is the width of the section head column plus the section gap. */
.s-settings__savebar {
  position: sticky;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  padding-inline-start: calc(15rem + var(--space-5));
  border-block-start: var(--border-width) solid var(--border);
  background: var(--bg-base);
}

/* A link inside the error alert. The colour and the underline come from
   the `.c-alert a` rule in _base.css; this rule adds weight only. */
.s-settings__link {
  font-weight: var(--weight-medium);
}

.s-settings__savebar-text {
  margin: 0;
  font-size: var(--text-sm);
}

/* The status line next to Save changes while the save runs (see the comment
   in settings.html). */
.s-settings__savebar-status {
  margin: 0;
  align-self: center;
  font-size: var(--text-sm);
}

.s-settings__savebar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Typed-name confirmation in the danger zone: the disabled danger button
   is directly under the field that enables it. */
.s-settings__confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.s-settings__confirm > .c-field {
  inline-size: 100%;
  max-inline-size: 24rem;
}

@container (max-width: 50rem) {
  .s-settings__main {
    padding: var(--space-5) var(--space-4) 0;
  }

  .s-settings__section {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .s-settings__savebar {
    padding-inline-start: 0;
  }
}


/* ==========================================================================
   Auth
   ========================================================================== */

/* The root is only the query container. The padding lives on
   .s-auth__ground, so the @container rule below can change it. */
.s-auth {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s-auth__ground {
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  padding: var(--space-7) var(--space-5);
}

.s-auth__stage {
  inline-size: 100%;
  max-inline-size: 58rem;
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 20rem);
  align-items: center;
  gap: var(--space-7);
}

.s-auth__card {
  min-width: 0;
}

.s-auth__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.s-auth__brand {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

/* The brand is the link to the home page. It uses the neutral focus ring. */
.s-auth__brand:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.s-auth__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

/* The avatar and the name show the person that this is the real sign-in page. */
.s-auth__welcome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.s-auth__welcome > .c-avatar {
  flex-shrink: 0;
}

.s-auth__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.s-auth__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The gap of --space-5 is 60 percent of a 40px input. */
.s-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* One of the two text-color declarations in this file (the other is
   .s-reader__caption). A bare <a> would otherwise fall back to the
   browser's default blue, which belongs to no theme. */
.s-auth__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.s-auth__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.s-auth__submit {
  inline-size: 100%;
  justify-content: center;
}

.s-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.s-auth__divider::before,
.s-auth__divider::after {
  content: "";
  flex: 1 1 auto;
  border-block-start: var(--border-width) solid var(--border);
}

.s-auth__divider-text {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.s-auth__providers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.s-auth__providers > :last-child {
  grid-column: 1 / -1;
}

.s-auth__providers .c-btn {
  justify-content: center;
}

.s-auth__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.s-auth__footer p {
  margin: 0;
}

.s-auth__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.s-auth__aside-quote {
  margin: 0;
  max-inline-size: 26ch;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.s-auth__aside-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.s-auth__legal {
  margin: 0;
  max-inline-size: 40ch;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

@container (max-width: 52rem) {
  .s-auth__ground {
    padding: var(--space-6) var(--space-4);
  }

  .s-auth__stage {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 28rem;
    gap: var(--space-5);
  }
}


/* ==========================================================================
   Empty state
   ========================================================================== */

.s-empty {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s-empty__navbar {
  position: sticky;
  top: 0;
  z-index: 3;
}

.s-empty__main {
  inline-size: 100%;
  max-inline-size: 60rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.s-empty__hero {
  text-align: center;
  margin-block-start: var(--space-4);
}

.s-empty__hero .c-empty__art {
  display: flex;
  justify-content: center;
}

.s-empty__hero .c-empty__art svg {
  inline-size: 12rem;
  max-inline-size: 100%;
  block-size: auto;
}

.s-empty__hero .c-empty__body {
  max-inline-size: 52ch;
  margin-inline: auto;
}

.s-empty__hero .c-empty__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.s-empty__paths,
.s-empty__cli,
.s-empty__templates {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.s-empty__section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Setup progress above the three paths: the label sits directly over the bar. */
.s-empty__setup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-inline-size: 32rem;
}

.s-empty__setup-label {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.s-empty__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.s-empty__cards .c-card {
  display: flex;
  flex-direction: column;
}

.s-empty__cards .c-card__body {
  flex: 1 1 auto;
}

.s-empty__cost {
  font-size: var(--text-sm);
}

.s-empty__starters {
  font-size: var(--text-sm);
}

@container (max-width: 48rem) {
  .s-empty__main {
    gap: var(--space-6);
    padding: var(--space-5) var(--space-4) var(--space-7);
  }
}