/* Account page (account.html). Builds on access.css (layout, form card, inputs) and
   auth-pages.css (states, toast, panels). Mobile first. */
.account-intro > .account-intro__sticky { margin: 0 0 28px; }

.account-intro h1 { overflow-wrap: anywhere; }

.account-identity {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid #ffffff24;
  border-radius: 16px;
  background: #ffffff0d;
}

.account-identity div { display: grid; min-width: 0; gap: 4px; }

.account-identity dt {
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.account-identity dd {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.account-signout {
  min-height: 46px;
  margin-top: 20px;
  padding: 0 22px;
  border: 1px solid #ffffff40;
  border-radius: 10px;
  color: #fff;
  background: transparent;
  font: 700 15px/1.2 Geist, "Segoe UI", Aptos, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
}

.account-signout:hover { border-color: var(--orange); color: #fff; background: #ffffff14; }
.account-signout:disabled { opacity: .6; cursor: progress; }

.account-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }

.account-hint {
  max-width: 70ch;
  margin: 12px 0 0;
  color: #4f5b6b;
  font-size: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- membership */
.membership-status { display: grid; justify-items: start; gap: 12px; }
.membership-status .auth-copy { margin: 0; }
.membership-status .auth-copy:focus { outline: none; }

.status-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  color: #4f5b6b;
  background: #eef1f4;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.status-pill.is-ok { color: #1f7a55; background: #e6f4ee; }
.status-pill.is-warn { color: #b9461a; background: #fff0e8; }

.join-block { margin-top: 4px; }

.account-links { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.account-links .primary { margin-top: 0; }

/* ---------------------------------------------------------------- roles */
.role-list { display: grid; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }

.role-item {
  display: grid;
  gap: 10px 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcfd;
}

.role-item div { display: grid; min-width: 0; gap: 4px; }
.role-item b { font: 400 21px/1.2 Georgia, serif; }
.role-item span { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }

.role-item small {
  color: #4f5b6b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.role-item a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-self: start;
  padding: 0 16px;
  border: 1px solid #f2b39d;
  border-radius: 10px;
  color: #b9461a;
  background: #fff7f3;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.role-item a:hover { border-color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 561px) {
  .account-links { flex-direction: row; flex-wrap: wrap; }
  .account-links .primary { width: auto; flex: 1 1 220px; }
  .account-links .secondary { min-height: 54px; }
  .role-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* Two-column layout: the whole navy panel is one screen tall and stays in view while the cards
   on the right scroll, so the left column is never an empty navy slab below the greeting. The
   page's full height on the left below the panel is plain page background. */
@media (min-width: 861px) {
  .account-shell { align-items: start; }
  .account-shell > .account-intro { position: sticky; top: 0; min-height: 100vh; }
  .account-intro > .account-intro__sticky { margin: 0; }
}

/* Single-column layout (tablets and phones): the identity box repeats what the profile form
   right below it shows, and it pushed the form below the first screen, so it is not shown. */
@media (max-width: 860px) {
  .account-intro .account-identity { display: none; }
}

/* Phones: the profile form starts on the first screen. The Sign out button stays (the
   end-to-end suite also runs at phone size and uses it) but moves into the top-right corner of
   the short intro, next to the eyebrow, instead of taking its own row. */
@media (max-width: 720px) {
  .account-intro > .account-intro__sticky { position: relative; margin: 0; }
  .account-intro .account-signout {
    position: absolute;
    top: -12px;
    right: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
  }
}