/* Accounts pages: settings shell, onboarding plan cards, invitations, sessions. Builds on tokens.css,
   components.css and app.css/auth.css only (no new colours). Author: Smarketer. */

/* ------------------------------------------------------------------ settings shell (app layout) */
.settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--topbar-h, 72px) + var(--s-2)); }
.settings-nav__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.settings-nav__link {
  display: flex; align-items: center; gap: 10px; min-height: var(--touch); padding: 8px 12px;
  border-radius: var(--radius-md); color: var(--muted-strong); text-decoration: none;
}
.settings-nav__link:hover { background: var(--lavender); color: var(--heading); }
.settings-nav__link[aria-current="page"] { background: var(--brand-50); color: var(--brand); font-weight: var(--fw-medium); }
.settings-nav__link[aria-current="page"]::after { content: "•"; margin-inline-start: auto; }
.settings__main { display: grid; gap: var(--s-3); min-width: 0; }
.settings__main > .panel { min-width: 0; }
.settings-note { color: var(--muted); font-size: var(--fs-sm); }
.settings-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.settings-actions form { display: inline-flex; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: flex-end; }
.inline-form .field { flex: 1 1 200px; margin: 0; }
.inline-form .select, .inline-form .input { min-width: 0; }
.inline-form .field:last-child { flex: 0 0 auto; }

@media (max-width: 1023.98px) {
  .settings { grid-template-columns: 1fr; }
  .settings-nav { position: static; margin-inline: calc(var(--s-2) * -1); overflow-x: auto; }
  .settings-nav__list { display: flex; gap: var(--s-0-5); padding: 0 var(--s-2) var(--s-1); width: max-content; }
  .settings-nav__link { white-space: nowrap; }
  .settings-nav__link[aria-current="page"]::after { content: none; }
  .settings-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); }
}

/* member / session rows */
.member-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1-5) var(--s-2); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--divider); }
.member-row__who { flex: 1 1 260px; }
.member-row__actions { flex: 0 1 auto; }
.member-row:first-child { border-top: 0; }
.member-row__who { display: flex; gap: var(--s-1-5); align-items: center; min-width: 0; }
.member-row__actions .menu form { display: block; }
.member-row__actions .menu .menu__item { width: 100%; }
.member-row__name { color: var(--heading); font-weight: var(--fw-medium); }
.member-row__meta { color: var(--muted); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.member-row__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; align-items: center; }
.member-row__actions form { display: inline-flex; gap: var(--s-0-5); align-items: center; }
.member-row__actions .select { min-height: var(--control-h-sm, 36px); }
@media (max-width: 767.98px) {
  .member-row__actions { justify-content: flex-start; }
}

/* branding */
.logo-preview {
  display: grid; place-items: center; width: 100%; max-width: 320px; min-height: 120px; padding: var(--s-2);
  border: 1px dashed var(--control-border); border-radius: var(--radius-md); background: var(--canvas);
}
.logo-preview img { max-width: 100%; max-height: 96px; height: auto; object-fit: contain; }
.color-row { display: flex; gap: var(--s-1-5); align-items: flex-start; flex-wrap: wrap; }
.color-row .field { flex: 1 1 180px; margin: 0; }
.color-swatch-input { width: 56px; height: var(--control-h, 44px); padding: 4px; border: 1px solid var(--control-border); border-radius: var(--radius-input, 12px); background: var(--surface); cursor: pointer; }
.brand-sample { display: flex; align-items: center; gap: var(--s-1-5); padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.brand-sample__bar { width: 8px; align-self: stretch; border-radius: 4px; background: var(--brand); }
.consent-preview { padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--canvas); white-space: pre-line; }

/* ------------------------------------------------------------------ onboarding (auth layout) */
.plan-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1); }
.plan-choice { position: relative; display: block; cursor: pointer; }
.plan-choice__input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-choice__card {
  display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.plan-choice__name { color: var(--heading); font-weight: var(--fw-medium); display: flex; justify-content: space-between; gap: 6px; }
.plan-choice__price { color: var(--brand); font-weight: var(--fw-medium); }
.plan-choice__note { color: var(--muted); font-size: var(--fs-xs); }
.plan-choice__check { display: none; color: var(--brand); }
.plan-choice__input:checked + .plan-choice__card { border-color: var(--brand); background: var(--brand-50); }
.plan-choice__input:checked + .plan-choice__card .plan-choice__check { display: inline-flex; }
.plan-choice__input:focus-visible + .plan-choice__card { outline: var(--focus-ring, 3px solid var(--brand-300)); outline-offset: 2px; }
@media (max-width: 479.98px) { .plan-choices { grid-template-columns: 1fr; } }

.invite-card { display: grid; gap: var(--s-1-5); padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--lavender); }
.invite-card__org { font-size: var(--fs-lg); color: var(--heading); font-weight: var(--fw-medium); }
.inline-logout { display: inline; }
.inline-logout .btn { min-height: 0; padding: 0; vertical-align: baseline; }
.auth-actions { display: grid; gap: var(--s-1); }
.auth-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: var(--fs-sm); }
.qr-box { display: grid; place-items: center; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.qr-box img { width: 200px; height: 200px; image-rendering: pixelated; }
.codes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-mono); background: var(--canvas); }