#app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "brand tabs"
    "rail  main";
  height: 100dvh;
}

#brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: 56px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

#menuBtn {
  display: none;
}

.brand-name {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.02em;
}

.brand-name em {
  font-style: normal;
  color: var(--accent);
}

/* A single-column grid here declares its column rather than leaning on an
   implicit one: an auto column takes its width from the widest line inside it,
   so one long captured value would size the stage instead of the other way
   round, and the plinth's max-width would have nothing definite to measure
   against. */
#main {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
}

#stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 8px 24px 28px;
  overflow: auto;
  background: radial-gradient(70% 55% at 50% 38%, rgba(255, 255, 255, 0.022), transparent 72%);
}

#status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* A form's worth of readouts is as wide as the form makes it, so the strip
   stays one row and scrolls rather than wrapping into a block deep enough to
   push the exhibit off the screen. */
#statusFields {
  display: flex;
  flex: 1 1 0;
  gap: 22px;
  min-width: 0;
  overflow-x: auto;
}

#statusFields.is-clipped {
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.st-field {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 1px;
}

.st-value {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
}

.st-value.is-empty {
  color: var(--dim);
}

#statusTools {
  display: flex;
  align-items: center;
  gap: 10px;
}

#statusClock {
  min-width: 5ch;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

#receipt {
  max-width: 44ch;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.18s var(--ease),
    translate 0.18s var(--ease),
    overlay 0.18s allow-discrete,
    display 0.18s allow-discrete;
}

@starting-style {
  #receipt[open] {
    opacity: 0;
    translate: 0 8px;
  }
}

#receipt:not([open]) {
  opacity: 0;
  translate: 0 8px;
}

#receipt::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

#receiptTitle {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

#receiptBody {
  margin-bottom: 20px;
  color: var(--dim);
  font-size: 14px;
}

.rc-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 12px;
}

#receiptBody strong {
  color: var(--text);
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}

#receiptBody p + p {
  margin-top: 8px;
}

@media (max-width: 860px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "tabs"
      "main";
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  #brand {
    border-right: none;
  }

  #menuBtn {
    display: grid;
  }

  #stage {
    padding: 8px 16px 24px;
  }

  #status {
    padding: 10px 16px;
  }

  /* the tools take a row of their own before the readouts are squeezed into a
     strip too narrow to read one in */
  #statusFields {
    flex-basis: 100%;
    gap: 16px;
  }

  .st-label {
    font-size: 10px;
  }

  .st-value {
    font-size: 13px;
  }
}