/* My IFFS — hand-authored additions.

   pages/account.css is GENERATED from the design handoff by scripts/extract_page_css.py and
   must never be hand-edited; additions live here (CLAUDE.md house style).

   The mock was a standalone utility screen with a `.wrap` container and inline `style=` on
   most blocks. Here it sits inside the normal site chrome, so `.wrap` only has to supply the
   column rhythm and the reading width — this page is deliberately narrow, because it is read
   one-handed in a queue at the gate. */

.wrap {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Signed-in header strip: who you are, and the way out. */
.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.account-lede {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-secondary);
}

.account-sent {
  margin: var(--sp-3) 0 0;
}

.account-foot {
  margin: var(--sp-3) 0 0;
  color: var(--c-text-secondary);
}

.account-empty {
  margin: 0 0 var(--sp-3);
  color: var(--c-text-secondary);
}

.account-actions {
  margin-top: var(--sp-4);
}

/* Single-column form grid — the mock set this inline on every form on the page. */
.form-grid--single {
  grid-template-columns: 1fr;
}

/* A consent that is not being offered yet. Legible, obviously inert, and not mistakable
   for one that is merely switched off. */
.pref-row--pending {
  opacity: .72;
}

.pref-row--pending .switch {
  cursor: not-allowed;
}

/* The section headings inside the narrow column sit tighter than a marketing section. */
.wrap section > .t-h3 {
  margin: 0 0 var(--sp-3);
}

/* "Your access" — one row per role the signed-in person holds. Reuses the design's `.seat`
   row for the layout, so this only has to strip the list semantics the markup needs for a
   screen reader. TIER 2 tokens only; no colour literals (house style). */
.account-roles {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Naming a group seat.

   An unclaimed seat is a small form; a named one stays a plain `.seat` row. The two look
   deliberately different because they ARE different — Critical Rule 2a means a named seat
   can never become a form, and a buyer should be able to see that at a glance rather than
   discovering it by clicking. */
.seat-form {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--p-steel-100);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.seat-form:last-child { border-bottom: 0; }

.seat-form__title {
  font-size: 14.5px;
  color: var(--c-text-secondary);
}

.seat-form .field { display: flex; flex-direction: column; gap: 4px; }

.seat-form .btn { align-self: flex-start; }

.seat-form .t-small { color: var(--c-text-secondary); margin: 0; }