/* ============================================================================
   PROFILE — the signed-in identity.
   A cover, an identity block, a data grid and two actions. Fixed to the
   viewport so it can never introduce a vertical scrollbar.
   ========================================================================= */
.authed{
  position:relative;z-index:2;
  height:calc(100vh - 58px);height:calc(100dvh - 58px);
  min-height:calc(100vh - 58px);
  display:grid;place-items:center;padding:clamp(16px,3vh,34px);
  overflow:hidden;
  animation:gateIn .8s var(--ease) both;
}

.profile{
  position:relative;width:min(720px,100%);
  border:1px solid var(--hair-2);
  background:var(--panel);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.profile::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-line) 30%,transparent 72%);
}

/* ---------------------------------------------------------------- cover -- */
.profile-cover{
  position:relative;flex:0 0 auto;
  height:clamp(116px,19vh,186px);
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(198,164,81,.16),transparent 58%),
    radial-gradient(90% 120% at 88% 10%,rgba(72,118,190,.13),transparent 62%),
    linear-gradient(180deg,#0d131c,#0a0f16);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.profile-topo{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.profile-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(9,13,19,.55));
}
.profile-tag,.profile-status{
  position:absolute;top:16px;z-index:2;font-size:8px;letter-spacing:.24em;color:var(--dim);
}
.profile-tag{left:20px}
.profile-status{right:20px;color:var(--grn)}
.profile-status .dot{background:var(--grn);box-shadow:0 0 8px rgba(38,184,135,.6)}

/* ----------------------------------------------------------------- body -- */
.profile-body{padding:0 clamp(22px,3vw,38px) clamp(18px,2.6vh,28px)}
.profile-head{display:flex;align-items:flex-end;gap:18px;margin-top:-38px;position:relative;z-index:2}
.profile-av{
  flex:0 0 auto;width:78px;height:78px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold-2);
  border:1px solid var(--gold-line);
  background:linear-gradient(160deg,rgba(198,164,81,.22),rgba(198,164,81,.06));
  box-shadow:0 0 0 4px var(--panel),0 12px 30px rgba(0,0,0,.45);
}
.profile-id{padding-bottom:6px;min-width:0}
.profile-eyebrow{display:block;color:var(--gold);font-size:7.5px;letter-spacing:.28em;margin-bottom:7px}
.profile-id h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,34px);
  line-height:1.1;letter-spacing:-.02em;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.authed-sub{margin-top:6px;color:var(--dim);font-size:12px}

.profile-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:clamp(16px,2.6vh,26px) 0 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.profile-grid>div{
  display:flex;flex-direction:column;gap:7px;
  padding:13px 16px 13px 0;min-width:0;
}
.profile-grid>div:nth-child(even){border-left:1px solid var(--hair);padding-left:16px}
.profile-grid .k{color:var(--dim-2);font-size:7.5px;letter-spacing:.2em}
.profile-grid b{
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--tx-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.profile-actions{
  display:grid;grid-template-columns:1fr auto;gap:10px;
  margin-top:clamp(16px,2.6vh,26px);
}
.profile-actions .btn.primary{margin-top:0}
.profile-actions .btn.ghost{margin-top:0;width:auto;padding:0 20px}

.authed-note{margin-top:14px;color:var(--dim-2);font-size:9.5px;letter-spacing:.04em;text-align:center}

/* ------------------------------------------------------------ responsive -- */
@media (max-height:760px){
  .profile-cover{height:clamp(96px,15vh,140px)}
  .profile-av{width:66px;height:66px;font-size:22px;margin-top:-30px}
  .profile-head{margin-top:-30px}
  .profile-grid>div{padding-top:10px;padding-bottom:10px}
  .authed-note{display:none}
}
@media (max-height:620px){
  .profile-cover{height:88px}
  .profile-grid{grid-template-columns:1fr;border-bottom:0}
  .profile-grid>div:nth-child(even){border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .profile-grid>div:nth-child(n+3){display:none}
}
@media (max-width:640px){
  .authed{height:auto;min-height:calc(100dvh - 58px);overflow:visible;padding:14px}
  .profile-grid{grid-template-columns:1fr}
  .profile-grid>div:nth-child(even){border-left:0;padding-left:0;border-top:1px solid var(--hair)}
  .profile-actions{grid-template-columns:1fr}
  .profile-actions .btn.ghost{width:100%}
  .profile-tag,.profile-status{font-size:7px;letter-spacing:.16em}
}

/* ---------------------------------------------- Google Identity Services --
   The real Google button sits invisibly on top of our styled button, so the
   click reaches Google's popup while the design stays ours. */
.sso-btn{position:relative}
.gis-overlay{
  position:absolute;inset:0;z-index:2;display:block;
  overflow:hidden;opacity:0;
}
.gis-overlay > div,
.gis-overlay iframe{
  width:100%!important;height:100%!important;
  min-width:100%!important;min-height:100%!important;
  border:0!important;
}