/* /profile: the host page of the Order's My Profile element. The element brings its own styling;
   this file only places it under the shared header and styles the sign-in / not-connected states. */

.prof { padding-top: var(--header); min-height: 60svh; }
.prof__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prof__portal { width: 100%; }
.prof__portal member-portal[hidden] { display: none; }

.prof__state {
  margin: clamp(48px, 9vh, 96px) auto 0;
  width: min(56ch, calc(100% - 2 * var(--gutter)));
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.prof__state[hidden] { display: none; }
.prof__state-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.prof__state-text { margin: 12px 0 0; color: var(--body); text-wrap: pretty; }
.prof__btn {
  appearance: none;
  margin-top: 22px;
  font: 500 12.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(205, 215, 226, 0.28);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: color .24s var(--ease), border-color .24s var(--ease), background-color .24s var(--ease);
}
.prof__btn:hover { color: var(--ink); border-color: var(--accent); background: var(--accent-soft); }
.prof__btn:active { transform: translateY(1px); }

/* Elements hosted here come from the Order, where a button without its own background is not grey. Here the page is
   colour-scheme: dark, so give such buttons no background; anything a widget declares still wins (zero specificity). */
:where(.prof__portal) button { background-color: transparent; }

/* The Academy membership, shown under the Order's profile. */
.prof__academy { width: min(56ch, calc(100% - 2 * var(--gutter))); margin: clamp(40px, 7vh, 72px) auto clamp(56px, 9vh, 96px); padding-top: 22px; border-top: 1px solid var(--line); }
.prof__academy[hidden] { display: none; }
.prof__ah { margin: 0 0 16px; font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: 0.06em; color: var(--ink); }
.prof__afacts { margin: 0 0 6px; display: grid; }
.prof__arow { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.prof__arow:first-child { border-top: 0; padding-top: 0; }
.prof__arow dt { color: var(--muted); font-size: 0.9rem; }
.prof__arow dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.prof__anote { margin: 14px 0 0; color: var(--muted); font-size: 0.9rem; text-wrap: pretty; }
.prof__amsg { margin: 12px 0 0; color: var(--body); font-size: 0.95rem; min-height: 1em; }
.prof__alink { display: inline-block; margin: 22px 0 0 18px; color: var(--body); font-size: 0.95rem; text-underline-offset: 0.2em; }
.prof__alink:hover { color: var(--ink); }
.prof__academy a.prof__btn { display: inline-block; text-decoration: none; }
.prof__btn:disabled { opacity: .55; cursor: progress; }