@layer components {
  .exhale-vaults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--exhale-vault-column-min)), 1fr));
    align-items: start;
    gap: var(--space-8);
    max-inline-size: var(--max-content);
    margin: var(--space-0) auto;
    padding: calc(var(--safe-top) + var(--space-7)) var(--gutter-fluid) var(--space-0);
    list-style: none;
  }

  /* A page that holds the vaults takes their width, so its title and groups share their left edge. */
  .page:has(> .exhale-vaults) {
    --measure: var(--max-content);
  }

  .page-title + .exhale-vaults {
    padding-block-start: var(--space-0);
  }

  .exhale-vaults + .settings-group {
    margin-block-start: var(--space-9);
  }

  /* The vaulted room. The crown is drawn, so the arch keeps its proportion at every width; its
     inner course is built from both springings toward the keystone as the list is done. */
  .exhale-vault {
    position: relative;
    display: flex;
    flex-direction: column;
    --vault-crown: var(--color-surface-inverse);
    --vault-crown-ink: var(--color-ink-on-inverse);
    --vault-course: oklch(var(--lch-ink-on-inverse) / var(--exhale-vault-course-alpha));
    --vault-whole: var(--color-celebrate);
    --vault-ground: var(--color-surface-inverse);
    --vault-name: var(--color-ink-on-inverse);
    --vault-ink: var(--color-ink-on-inverse);
    --vault-quiet: oklch(var(--lch-ink-on-inverse) / var(--exhale-vault-quiet-alpha));
    --vault-rule: oklch(var(--lch-ink-on-inverse) / var(--exhale-vault-rule-alpha));
    --vault-hover: oklch(var(--lch-ink-on-inverse) / var(--exhale-vault-hover-alpha));

    color: var(--vault-ink);
    transition: transform var(--dur-fast) var(--ease-calm);
  }

  .exhale-vault__crown {
    display: block;
    inline-size: var(--size-fill);
    block-size: auto;
  }

  .exhale-vault__crown-ground {
    fill: var(--vault-crown);
  }

  .exhale-vault__course {
    fill: none;
    stroke: var(--vault-course);
    stroke-width: var(--border-width-strong);
    stroke-linecap: round;
  }

  /* The built course is drawn in the done color from its first stretch, so the line that closes
     the arch is the same line the family has been building all along. */
  .exhale-vault__course--built {
    stroke: var(--vault-whole);
  }

  .exhale-vault__keystone {
    fill: var(--vault-crown-ink);
  }

  .exhale-vault--whole .exhale-vault__keystone {
    fill: var(--vault-whole);
  }

  .exhale-vault__body {
    display: flex;
    flex-direction: column;
    margin-block-start: calc(-1 * var(--border-width));
    padding: var(--space-8) var(--space-8) var(--space-0);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
    background: var(--vault-ground);
  }

  .exhale-vault__for,
  .exhale-vault__words,
  .exhale-vault__keeps,
  .exhale-vault__due,
  .exhale-vault__hint,
  .exhale-vault__go-label,
  .exhale-vault__go-detail,
  .exhale-vault__go .icon {
    color: var(--vault-quiet);
  }

  .exhale-vault__for {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
  }

  .exhale-vault__name {
    margin-block-start: var(--space-3);
    font: var(--type-title-1);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .exhale-vault__open {
    color: inherit;
    text-decoration: none;
  }

  .exhale-vault__open::after {
    content: "";
    position: absolute;
    inset: var(--space-0);
    border-radius: var(--radius-xl);
  }

  .exhale-vault__promise {
    margin-block-start: var(--space-4);
    font: var(--type-title-2);
    letter-spacing: var(--tracking-display);
    text-wrap: pretty;
  }

  .exhale-vault__words {
    display: -webkit-box;
    margin: var(--space-4) var(--space-0) var(--space-0);
    overflow: hidden;
    font: var(--type-quote);
    letter-spacing: var(--tracking-display);
    text-wrap: pretty;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--exhale-vault-words-lines);
  }

  .exhale-vault__measure {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-4);
    margin-block-start: var(--space-6);
    font: var(--type-label);
  }

  .exhale-vault__due {
    font: var(--type-body-sm);
  }

  .exhale-vault__due::before {
    content: "·";
    margin-inline-end: var(--space-4);
  }

  .exhale-vault__keeps {
    margin-block-start: var(--space-2);
    font: var(--type-caption);
    text-wrap: pretty;
  }

  .exhale-vault__promise + .exhale-vault__keeps {
    margin-block-start: var(--space-5);
  }

  .exhale-vault__foot {
    margin-block-start: var(--space-7);
  }

  .exhale-vault__start {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block-end: var(--space-8);
  }

  .exhale-vault__button {
    position: relative;
    z-index: var(--z-raised);
    inline-size: var(--size-fill);
  }

  .exhale-vault__hint {
    font: var(--type-caption);
    text-align: center;
  }

  /* The vault's one way forward: what is next, or what comes after. It runs to the vault's edges
     and closes its foot. */
  .exhale-vault__go {
    --icon-size: var(--input-icon-size);

    position: relative;
    z-index: var(--z-raised);
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr) auto;
    align-items: center;
    column-gap: var(--space-5);
    margin-inline: calc(-1 * var(--space-8));
    padding: var(--space-6) var(--space-8) var(--space-7);
    border-block-start: var(--border-width) solid var(--vault-rule);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
    color: var(--vault-ink);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-calm);
  }

  .exhale-vault__go > span {
    grid-column: 1;
  }

  .exhale-vault__go > .icon {
    grid-column: 2;
    grid-row: 1 / span 3;
  }


  .exhale-vault__go:active {
    background-color: var(--vault-hover);
  }

  .exhale-vault__go-label {
    font: var(--type-overline);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
  }

  .exhale-vault__go-title {
    margin-block-start: var(--space-3);
    font: var(--type-heading);
  }

  .exhale-vault__go-detail {
    margin-block-start: var(--space-1);
    overflow: hidden;
    font: var(--type-body-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  @media (any-hover: hover) {
    .exhale-vault__go:hover {
      background-color: var(--vault-hover);
    }

    .exhale-vault:has(.exhale-vault__open:hover) {
      transform: translateY(var(--hover-lift));
    }
  }

  .exhale-vault:has(.exhale-vault__open:active) {
    transform: scale(var(--press-scale));
  }

  .exhale-vault__name,
  .exhale-vault__promise {
    color: var(--vault-name);
  }

  .exhale-vault--steel {
    --vault-crown: var(--color-info);
    --vault-ground: var(--color-info);
  }

  .exhale-vault--sage {
    --vault-crown: var(--color-done);
    --vault-ground: var(--color-done);
  }

  .exhale-vault--stone {
    --vault-crown: var(--color-ink);
    --vault-ground: var(--color-ink);
  }

  .exhale-vault--paper,
  .exhale-vault--linen {
    --vault-crown-ink: var(--color-ink-display);
    --vault-whole: var(--color-celebrate-ink);
    --vault-name: var(--color-ink-display);
    --vault-ink: var(--color-ink);
    --vault-quiet: var(--color-ink-faint);
  }

  .exhale-vault--paper {
    --vault-crown: var(--color-surface);
    --vault-ground: var(--color-surface);
    --vault-course: var(--color-border-strong);
    --vault-rule: var(--color-border);
    --vault-hover: var(--color-surface-sunken);
  }

  .exhale-vault--linen {
    --vault-crown: var(--color-surface-sunken);
    --vault-ground: var(--color-surface-sunken);
    --vault-course: oklch(var(--lch-ink-display) / var(--exhale-vault-course-alpha));
    --vault-rule: oklch(var(--lch-ink-display) / var(--exhale-vault-rule-alpha));
    --vault-hover: oklch(var(--lch-ink-display) / var(--exhale-vault-hover-alpha));
  }
}