/* Page layout on top of tea-styles.css. TEA tokens only, no new colours. */

[hidden] { display: none !important; } /* .btn sets display, which would otherwise beat the hidden attribute */

.page {
  max-width: 760px;
  padding-block: var(--tea-space-6) var(--tea-space-8);
  display: grid;
  gap: var(--tea-space-5);
}
.page > * { min-width: 0; }
.page > p { margin: 0; }

@media (max-width: 600px) {
  .tea-container { padding-inline: var(--tea-space-4); }
}

/* Header */
.page-head h1 { margin: 0; }
.eyebrow { color: var(--tea-accent-strong); margin: 0 0 var(--tea-space-2); }

/* Wizard */
.step-count { margin: 0 0 var(--tea-space-2); }
.choice { display: flex; flex-wrap: wrap; gap: var(--tea-space-3); margin-bottom: var(--tea-space-4); }
.choice .btn { min-width: 160px; }

/* Checklist */
.chosen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tea-space-2); }

/* Progress card stays in view while scrolling, on screens with room for it */
@media (min-width: 700px) {
  .sticky { position: sticky; top: var(--tea-space-3); z-index: 2; }
  html { scroll-padding-top: 8rem; } /* keeps keyboard focus clear of the sticky card */
}
.progress-count { margin: 0 0 var(--tea-space-3); font-weight: var(--tea-weight-semibold); color: var(--tea-ink); }
.save-note { margin: var(--tea-space-3) 0 0; }
.save-note:empty { display: none; }

.section-intro { margin: 0; }
.items { list-style: none; margin: var(--tea-space-3) 0 0; padding: 0; }
.item { padding-block: var(--tea-space-5); }
.item + .item { border-top: 1px solid var(--tea-line-2); }
.item:last-child { padding-bottom: 0; }
.item__title {
  display: flex; align-items: flex-start; gap: var(--tea-space-3);
  font-family: var(--tea-font-heading); font-weight: var(--tea-weight-semibold);
  font-size: var(--tea-text-lg); line-height: var(--tea-leading-snug); color: var(--tea-ink);
}
.item__title input { width: 1.25rem; height: 1.25rem; margin-top: 0.15em; }
.item__title .badge { flex: none; margin-top: 0.1em; }
.item__steps, .account-list { margin: var(--tea-space-2) 0 0; padding-left: calc(1.25rem + var(--tea-space-3)); }
.item__steps { color: var(--tea-ink-2); }

/* Admin account list: stacked on phones, one row per account on wider screens */
.account-list { margin-top: var(--tea-space-3); }
.account-list > p { margin: 0 0 var(--tea-space-3); }
.accounts { list-style: none; margin: 0 0 var(--tea-space-3); padding: 0; display: grid; gap: var(--tea-space-3); }
.accounts:empty { display: none; }
.account { display: grid; gap: var(--tea-space-2); }
.account + .account { border-top: 1px solid var(--tea-line-2); padding-top: var(--tea-space-3); }
.account__field { display: grid; gap: var(--tea-space-1); }
.account .link-button { justify-self: start; }
.account-actions { display: flex; flex-wrap: wrap; gap: var(--tea-space-2); }
.copy-status { margin: var(--tea-space-2) 0 0; }
.copy-status:empty { margin: 0; } /* stays in the page, so screen readers announce it reliably */
@media (min-width: 720px) {
  .account { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: end; }
  .account .link-button { margin-bottom: 0.75em; }
}

/* Text-styled button, underline on hover like every TEA link */
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--tea-text-sm); color: var(--tea-accent-strong);
}
.link-button:hover { text-decoration: underline; }
.link-button:focus-visible { outline: none; box-shadow: var(--tea-focus); border-radius: var(--tea-radius-sm); }