/* /settings — the shared layout for a page assembled from two older ones.
 *
 * THE BUG THIS FIXES
 * On the old /user-console, three sections were wrapped in `.profile-shell`
 * (width: min(940px, 100%); margin: 0 auto) and the fourth — the account
 * deletion block — in `.profile-section`, a class NO STYLESHEET DEFINES. It
 * therefore had no width and no centring, so on any desktop window it ran the
 * full width of the viewport while everything above it stopped at 940px. That
 * is the misalignment: not a margin that needed nudging, a wrapper that was
 * never styled at all.
 *
 * Rather than define `.profile-section` and leave four separate width rules to
 * drift apart again, width is now owned in ONE place: `.set-shell` wraps the
 * whole page and nothing inside it sets its own width. A new section is aligned
 * because it is inside the shell, not because someone remembered the class.
 *
 * WHY 1120px AND NOT 940px
 * That is `main`'s width in css/style.css and `.section-inner`'s in
 * homepage.css — the width every other signed-in page uses. The old console
 * chose 940 because it inherited profile.css, and Settings now carries a
 * members table that wants the room.
 *
 * WHAT THIS FILE DOES NOT DO
 * It does not restyle the cards. The organization half keeps user-config.css's
 * header-strip-plus-padded-body idiom and the account half keeps profile.css's
 * padded `.profile-card`; both are already consistent internally, and merging
 * them into one card style would be a redesign rather than a fix. This file
 * only unifies the frame around them and settles the spacing where the two
 * sheets meet.
 */

/* ── Page frame ─────────────────────────────────────────────────────── */

.set-page {
  min-height: calc(100vh - var(--topbar-h));
  padding: clamp(1.5rem, 3.5vw, 3rem) 0 3.5rem;
}

/* The single source of width for this page. */
.set-shell {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* ── Page header ────────────────────────────────────────────────────── */

.set-page-header { margin-bottom: -0.5rem; }

.set-eyebrow {
  margin: 0;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  font-weight: 700;
}

.set-page-header h1 {
  margin: 0.35rem 0 0.45rem;
  color: var(--title, #14324d);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.2;
}

.set-lead {
  margin: 0;
  max-width: 68ch;
  color: var(--muted, #64748b);
}

/* ── A titled group of cards ────────────────────────────────────────── */

.set-block {
  display: grid;
  gap: 1rem;
  /* [hidden] on the organization block must win over `display: grid`, or the
   * section renders for every member until js/settings.js decides otherwise —
   * which is the flash of organization data the markup comment warns about. */
}

.set-block[hidden] { display: none; }

.set-block-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  /* Sits tight to the lead paragraph below it rather than to the block gap. */
  margin-bottom: -0.5rem;
}

.set-block-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--title, #14324d);
}

.set-block-lead {
  margin: 0 0 0.25rem;
  max-width: 68ch;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

/* A visible break before the irreversible action, without the full-width
   sprawl the undefined wrapper used to produce. */
.set-block--danger {
  margin-top: 0.5rem;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--border, #d7e1ec);
}

/* ── Reconciling the two inherited sheets ───────────────────────────── */

/* user-config.css spaces its own sections with `margin-top: 2rem` because they
 * used to be stacked directly in a page body. Inside `.set-block` the grid gap
 * already provides that, and both together double it. */
.set-block .uc-section { margin-top: 0; }

/* Same reason: the members header carried its own bottom margin. */
.set-block .uc-header { margin-bottom: 0; }

/* These were <h2> on the old page and are <h3> here, one level deeper now that
 * the block owns the <h2>. Carry the sizing across so the demotion is
 * semantic only and nothing shrinks visually. */
.set-block .uc-header h3 {
  margin: 0;
  font-size: 1rem;
  flex: 1;
}

.set-block .password-card-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--profile-ink, #1f2937);
}

/* profile.css sizes the lead and status text against `.profile-shell`, which
 * this page does not use. Keep the card internals looking the same. */
.set-block .profile-card { margin: 0; }

/* ── Narrow screens ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .set-shell {
    width: min(1120px, calc(100% - 1.5rem));
    gap: 1.5rem;
  }

  .set-block-head h2 { font-size: 1.05rem; }
}

/* The bottom tab bar overlays the end of the page in the app shell, so the
   last card needs clearance or the delete button sits under it. */
html.app-shell .set-page {
  padding-bottom: calc(3.5rem + var(--bottom-bar-h, 64px));
}

/* ── Owner-only actions ─────────────────────────────────────────────────
   Transfer and delete. Both are irreversible, so the styling leans on space
   and explicit state rather than colour alone — the delete button is
   unreachable until the organization name has been typed exactly. */

.od-badge-owner {
  background: #fef3c7;
  color: #92400e;
}

/* The two cards sit inside a .set-block--danger that already carries the rule
   above it, so they need separation from each other rather than more chrome. */
.od-card + .od-card { margin-top: 0.25rem; }

.od-hint {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--profile-muted, #536176);
  max-width: 68ch;
}

.od-hint--strong {
  color: #991b1b;
  font-weight: 600;
}

/* Who disappears. Rendered from a service-role preview, because RLS hides
   other people's memberships from the browser and this list is the only place
   the consequence is visible before it happens. */
.od-members {
  margin: 0.5rem 0 0;
  padding: 0.75rem 0.9rem;
  list-style: none;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  background: #fffafa;
  display: grid;
  gap: 0.45rem;
  max-height: 15rem;
  overflow-y: auto;
}

.od-member {
  font-size: 0.85rem;
  color: var(--profile-ink, #1f2937);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.od-tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #3730a3;
}

/* The case the caller cannot otherwise discover: this member also belongs to a
   different organization and will lose that too. */
.od-warn {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b91c1c;
}

.od-status {
  margin: 0.85rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.od-status.is-error   { color: #b91c1c; }
.od-status.is-success { color: #15803d; }
.od-status.is-info    { color: var(--profile-muted, #536176); }

/* A disabled destructive button must not read as merely "styled red". */
.od-card .btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}