/* Account site additions. Base look comes from site.css (same as disruptdsp.com). */

/* desktop: "Account / Store" sit next to the logo; phone: back arrow left, logo centre, sign out right */
.acct-nav__links { display: flex; }
@media (max-width: 760px) {
  .acct-nav__links { display: none !important; }
  .nav__right .nav__icon-btn#sign-out { width: auto; }
}

.auth {
  max-width: 440px;
  margin: 0 auto;
  padding-top: clamp(56px, 11vh, 128px);
}
.auth h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 300; }
.auth__lead { margin-top: 16px; color: var(--grey); }
.auth form { margin-top: 40px; display: grid; gap: 16px; }
.auth__links { margin-top: 32px; display: grid; gap: 10px; }
.auth__links a { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); font-size: 14px; }
.auth__links a:hover { color: var(--white); }
.auth__state { margin-top: 32px; display: grid; gap: 24px; justify-items: start; }

.dash-head { padding-top: clamp(56px, 11vh, 128px); padding-bottom: 56px; }
.dash-head h1 { font-size: clamp(44px, 7vw, 96px); font-weight: 300; }
.dash-head p { margin-top: 16px; color: var(--grey); }

.notice {
  display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between;
  border: 1px solid var(--hair); padding: 20px 24px; margin-bottom: 56px;
}
.notice p { color: var(--grey); max-width: 60ch; }
.notice strong { color: var(--white); font-weight: 400; }

.panel {
  display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 24px 48px;
  border-top: 1px solid var(--hair); padding: 40px 0;
}
.panel__title h2 { font-size: 12px; font-family: var(--text); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.panel__title p { margin-top: 10px; color: var(--dim); font-size: 14px; }
.panel__empty { color: var(--grey); }
@media (max-width: 760px) {
  .panel { grid-template-columns: 1fr; }
}

.loading { padding-top: 160px; color: var(--dim); text-align: center; }