/* /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; }