/* W.C.D.S.A. member portal — layout classes used only by member-login.html
   and member-center.html. Loaded AFTER styles.css so it reuses the same
   design tokens (--line, --muted, --hair, --radius, etc.). */

/* Compact hero for utility pages */
.compact-hero{padding-block:clamp(2rem,6vw,4rem) clamp(1rem,3vw,1.6rem)}
.compact-hero h1{margin:.4rem 0 .6rem}

/* Shared shells */
.auth-shell,.member-shell{max-width:var(--shell);margin-inline:auto;display:grid;gap:1.1rem}
.auth-note{margin-top:.4rem}

/* Two-up card grids */
.auth-grid,.dashboard-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Forms */
.auth-shell form,.member-shell form{display:grid;gap:.7rem}
.auth-shell label,.member-shell label{display:grid;gap:.35rem;font-size:.92rem;color:var(--muted)}
.auth-shell input,.member-shell input{
  width:100%;padding:.7rem .8rem;border-radius:12px;
  background:var(--panel-2);border:1px solid var(--hair);
  color:var(--ink);font:inherit;font-size:.98rem;
}
.auth-shell input:focus,.member-shell input:focus{
  outline:none;border-color:var(--line);
  box-shadow:0 0 0 3px rgba(61,139,255,.22)
}
.auth-shell input[readonly],.member-shell input[readonly]{opacity:.72;cursor:default}

/* Signup grid + full-width action row */
.profile-grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.profile-grid .form-wide{grid-column:1/-1}
.signup-panel{margin-top:.2rem}
.notice-card h2{font-size:1.3rem}

/* Honeypot — visually hidden, still in the DOM for bots */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Member center */
.member-toolbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:.2rem 0 .4rem
}
.member-toolbar h2{margin:.5rem 0 .3rem}
.approval-notice{border-left-color:var(--gold)}
.dashboard-section{margin-top:1.1rem}
.section-heading{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:.5rem
}
.section-heading h2{margin:.4rem 0}
.compact-list .record{padding:.8rem}

@media (max-width:640px){
  .member-toolbar,.section-heading{flex-direction:column;align-items:stretch}
}