/* ev-account.css — the member account area.
 *
 * The page was Bootstrap pills in a two-column grid inside the ev-* chrome, so
 * the shell and its contents came from different design systems. Tokens here all
 * come from ev-cards.css.
 *
 * The nav is a horizontal tab strip rather than a sidebar. On a phone the old
 * col-md-3 stacked six nav links ABOVE the content, so reaching your own profile
 * meant scrolling past the whole menu; a strip scrolls sideways and keeps the
 * panel at the top of the viewport where it belongs.
 */

.ev-acct{padding:24px 0 64px;max-width:960px;margin:0 auto}

/* ---------- identity header --------------------------------------------- */
/* Says whose account this is. The old page just said "Settings", which on a
   shared machine is a genuine question rather than a rhetorical one. */
.ev-acct__head{display:flex;align-items:center;gap:16px;margin:0 0 22px}
.ev-acct__avatar{
  width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--ev-line);background:var(--ev-paper);
}
.ev-acct__avatar--blank{
  display:flex;align-items:center;justify-content:center;
  font:700 23px/1 var(--ev-ui);color:var(--ev-coral-ink);background:var(--ev-coral-soft);
  border-color:var(--ev-coral-soft);
}
.ev-acct__who{min-width:0}
.ev-acct__name{font:700 25px/1.2 var(--ev-ui);letter-spacing:-.02em;color:var(--ev-ink);margin:0 0 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-acct__meta{font:400 14px/1.4 var(--ev-ui);color:var(--ev-ink-3);margin:0 0 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-acct__handle{color:var(--ev-ink-2);font-weight:600}
.ev-acct__handle::after{content:'·';margin:0 6px;color:var(--ev-line);font-weight:400}
/* Text button, not a filled one — it is a secondary action next to your own name. */
.ev-acct__avatar-edit{
  border:0;background:none;padding:0;cursor:pointer;
  font:600 13px/1 var(--ev-ui);color:var(--ev-coral-ink);
  text-decoration:underline;text-underline-offset:2px;
}
.ev-acct__avatar-edit:hover{color:var(--ev-coral-deep)}
.ev-acct__avatar-edit:focus-visible{outline:2px solid var(--ev-coral-deep);outline-offset:3px;border-radius:3px}

/* ---------- tabs --------------------------------------------------------- */
.ev-acct__tabs{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--ev-line);margin:0 0 26px;
}
.ev-acct__tabs::-webkit-scrollbar{display:none}
.ev-acct__tab{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:11px 15px;margin-bottom:-1px;
  font:600 14px/1 var(--ev-ui);color:var(--ev-ink-2);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.ev-acct__tab:hover{color:var(--ev-ink)}
.ev-acct__tab.is-on{color:var(--ev-ink);border-bottom-color:var(--ev-coral)}
.ev-acct__tab i{font-size:15px;line-height:1}
.ev-acct__tab:focus-visible{outline:2px solid var(--ev-coral-deep);outline-offset:-2px;border-radius:4px}
/* Log out sits with the identity, not in the scrolling tab strip — see the note
   in account.php. Pinned right on desktop; full width under the name on a phone,
   where a right-floated control competes with the avatar for a narrow row. */
.ev-acct__logout{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border:1px solid var(--ev-line);border-radius:20px;
  font:600 13px/1 var(--ev-ui);color:var(--ev-ink-2);text-decoration:none;background:var(--ev-surface);
}
.ev-acct__logout:hover{border-color:var(--ev-coral);color:var(--ev-coral-ink)}
.ev-acct__logout:focus-visible{outline:2px solid var(--ev-coral-deep);outline-offset:2px}

/* ---------- panel -------------------------------------------------------- */
.ev-acct__panel{min-height:220px}
.ev-acct__panel h3{font:700 19px/1.25 var(--ev-ui);letter-spacing:-.015em;color:var(--ev-ink);margin:0 0 4px}
.ev-acct__panel h4{font:700 15px/1.3 var(--ev-ui);color:var(--ev-ink);margin:22px 0 6px}
.ev-acct__panel p{font:400 15px/1.6 var(--ev-ui);color:var(--ev-ink-2)}
.ev-acct__panel .form-label{font:600 13px/1.3 var(--ev-ui);color:var(--ev-ink-2);margin-bottom:5px}
.ev-acct__panel .form-control,
.ev-acct__panel .form-select{
  border:1px solid var(--ev-line);border-radius:9px;padding:10px 13px;
  font:400 15px/1.35 var(--ev-ui);color:var(--ev-ink);background:var(--ev-surface);
}
.ev-acct__panel .form-control:focus,
.ev-acct__panel .form-select:focus{
  border-color:var(--ev-coral-deep);box-shadow:0 0 0 3px var(--ev-coral-soft);outline:none;
}
.ev-acct__panel .btn-primary{
  background:var(--ev-coral-deep);border:1px solid var(--ev-coral-deep);color:#fff;
  font:700 14.5px/1 var(--ev-ui);border-radius:9px;padding:12px 22px;
}
.ev-acct__panel .btn-primary:hover{background:var(--ev-coral-ink);border-color:var(--ev-coral-ink)}

/* A card is the default container for anything in the panel that is a distinct
   object — a form, a saved card, a receipt. */
.ev-acct-card{
  background:var(--ev-surface);border:1px solid var(--ev-line);border-radius:12px;
  padding:20px;margin:0 0 16px;
}
.ev-acct-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ev-acct-card__head h3{margin:0}

/* Empty states, which several sections currently have none of. */
.ev-acct-empty{
  text-align:center;padding:38px 22px;border:1px dashed var(--ev-line);
  border-radius:12px;background:var(--ev-paper);
}
.ev-acct-empty__title{font:600 16px/1.3 var(--ev-ui);color:var(--ev-ink);margin:0 0 5px}
.ev-acct-empty p{font-size:14px;color:var(--ev-ink-3);margin:0 0 14px}

/* Inline feedback. Sections currently echo <p class="text-danger">❌ …</p>. */
.ev-acct-note{
  border-radius:9px;padding:11px 14px;margin:0 0 16px;
  font:400 14.5px/1.45 var(--ev-ui);border:1px solid transparent;
}
.ev-acct-note--ok{background:#E8F5EC;border-color:#9CCFAE;color:#20603A}
.ev-acct-note--bad{background:var(--ev-coral-soft);border-color:var(--ev-coral);color:var(--ev-coral-ink)}

/* ---------- signed out: LoginRegisterPro ---------------------------------
 *
 * LRP renders ProcessWire's admin Inputfield markup — including jQuery UI button
 * classes — so the login, register and forgot screens arrived looking like the
 * back end had leaked onto the front. Its logic is worth keeping (registration,
 * email verification, password reset all run through it), so this restyles the
 * markup rather than replacing the module.
 *
 * All three screens use the same classes and all three render inside
 * .ev-acct--guest, so scoping there covers the set. Selectors are deliberately
 * specific: LoginRegisterPro.css loads on these pages too.
 */
.ev-acct--guest{max-width:460px;margin:0 auto;padding-top:38px;text-align:left}
.ev-acct--guest .ev-acct__name{font-size:26px;margin-bottom:6px}
.ev-acct--guest .ev-acct__meta{margin-bottom:20px;white-space:normal}
.ev-acct--guest .ev-acct-card{padding:24px}

.ev-acct--guest .InputfieldForm,
.ev-acct--guest .LoginForm{margin:0;padding:0;border:0;background:none;list-style:none}
.ev-acct--guest .Inputfield,
.ev-acct--guest .InputfieldContent{margin:0 0 15px;padding:0;border:0;background:none;list-style:none}
.ev-acct--guest .InputfieldContent:last-of-type{margin-bottom:0}

.ev-acct--guest .InputfieldHeader,
.ev-acct--guest label{
  display:block;margin:0 0 5px;padding:0;
  font:600 13px/1.3 var(--ev-ui);color:var(--ev-ink-2);background:none;border:0;
}

.ev-acct--guest input[type=text],
.ev-acct--guest input[type=email],
.ev-acct--guest input[type=password]{
  display:block;width:100%;max-width:100%;box-sizing:border-box;
  border:1px solid var(--ev-line);border-radius:9px;padding:11px 13px;
  font:400 15px/1.35 var(--ev-ui);color:var(--ev-ink);background:var(--ev-surface);
}
.ev-acct--guest input[type=text]:focus,
.ev-acct--guest input[type=email]:focus,
.ev-acct--guest input[type=password]:focus{
  border-color:var(--ev-coral-deep);box-shadow:0 0 0 3px var(--ev-coral-soft);outline:none;
}

/* The jQuery UI button, restated. All four ui-* classes are listed so this beats
   whatever the admin theme's stylesheet sets. */
.ev-acct--guest button.ui-button,
.ev-acct--guest .ui-button.ui-widget.ui-state-default.ui-corner-all,
.ev-acct--guest button[type=submit]{
  display:block;width:100%;margin:6px 0 0;
  background:var(--ev-coral-deep);border:1px solid var(--ev-coral-deep);color:#fff;
  font:700 15px/1 var(--ev-ui);border-radius:10px;padding:13px 22px;cursor:pointer;
  text-shadow:none;box-shadow:none;
}
.ev-acct--guest button.ui-button:hover,
.ev-acct--guest button[type=submit]:hover{background:var(--ev-coral-ink);border-color:var(--ev-coral-ink);color:#fff}
.ev-acct--guest button.ui-button:focus-visible{outline:3px solid var(--ev-coral);outline-offset:2px}
/* jQuery UI wraps label text in a span and hides icons with these. */
.ev-acct--guest .ui-button .ui-button-text{padding:0;line-height:inherit}
.ev-acct--guest .ui-icon{display:none}

/* LRP's own "Register" / "Forgot password" links under the form. */
.ev-acct--guest .LoginRegisterLinks{
  list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--ev-line);
  display:flex;flex-wrap:wrap;gap:6px 18px;
}
.ev-acct--guest .LoginRegisterLinks li{margin:0}
.ev-acct--guest .LoginRegisterLinks a,
.ev-acct__alt a{color:var(--ev-coral-ink);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.ev-acct--guest .LoginRegisterLinks a:hover,
.ev-acct__alt a:hover{color:var(--ev-coral-deep)}
.ev-acct__alt{margin:16px 0 0;font:400 14px/1.5 var(--ev-ui);color:var(--ev-ink-3)}

/* PW notices — wrong password, "check your email", validation failures. */
.ev-acct--guest .NoticeError,
.ev-acct--guest .NoticeWarning,
.ev-acct--guest .ui-state-error{
  background:var(--ev-coral-soft);border:1px solid var(--ev-coral);color:var(--ev-coral-ink);
  border-radius:9px;padding:11px 14px;margin:0 0 16px;font:400 14.5px/1.45 var(--ev-ui);
}
.ev-acct--guest .NoticeMessage,
.ev-acct--guest .ui-state-highlight{
  background:#E8F5EC;border:1px solid #9CCFAE;color:#20603A;
  border-radius:9px;padding:11px 14px;margin:0 0 16px;font:400 14.5px/1.45 var(--ev-ui);
}
.ev-acct--guest .InputfieldStateError input{border-color:var(--ev-coral)}

@media (max-width:620px){
  .ev-acct--guest{padding-top:24px}
  .ev-acct--guest .ev-acct-card{padding:18px}
  .ev-acct{padding:16px 0 48px}
  .ev-acct__head{gap:12px 14px;margin-bottom:18px;flex-wrap:wrap}
  .ev-acct__avatar{width:50px;height:50px}
  .ev-acct__name{font-size:21px}
  .ev-acct__tabs{margin-bottom:20px}
  .ev-acct-card{padding:16px}
  /* Full width on its own row rather than squeezed beside a truncated name. */
  .ev-acct__logout{margin-left:0;width:100%;justify-content:center;padding:11px 15px}
}

/* ---------- your photos --------------------------------------------------- */
.ev-acct-count{
  display:inline-block;min-width:20px;padding:2px 7px;margin-left:7px;border-radius:10px;
  background:var(--ev-paper);border:1px solid var(--ev-line);
  font:700 11.5px/1.5 var(--ev-ui);color:var(--ev-ink-3);vertical-align:middle;
}
.ev-howto{margin:0 0 14px;padding-left:20px}
.ev-howto li{margin:0 0 8px;font:400 14.5px/1.55 var(--ev-ui);color:var(--ev-ink-2)}
.ev-howto strong{color:var(--ev-ink)}
.ev-howto a{color:var(--ev-coral-ink)}
.ev-howto__foot{font:400 13.5px/1.5 var(--ev-ui);color:var(--ev-ink-3);margin:14px 0 0}
.ev-howto__foot a{color:var(--ev-coral-ink)}
/* Grid inside a panel card is tighter than the full-width vault grid. */
.ev-acct__panel .ev-photos__grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}

/* ---------- contribute form (photo-submit) ----------------------------- */
/* Shared with the account screens rather than given its own stylesheet: it is
   the same kind of surface — a signed-in member filling in a form about their
   own contribution — and a second file would drift from this one. */
.ev-field{margin:0 0 20px}
.ev-field > label{display:block;font:600 13px/1.3 var(--ev-ui);color:var(--ev-ink);margin:0 0 6px}
.ev-field input[type=text],
.ev-field select,
.ev-field input[type=file]{width:100%;max-width:520px;font:400 15px/1.4 var(--ev-ui);
  color:var(--ev-ink);background:var(--ev-surface);border:1px solid var(--ev-line);
  border-radius:9px;padding:10px 12px}
.ev-field input[type=text]:focus,
.ev-field select:focus{outline:2px solid var(--ev-coral);outline-offset:1px;border-color:transparent}
.ev-field__hint{font:400 12.5px/1.5 var(--ev-ui);color:var(--ev-ink-3);margin:6px 0 0;max-width:520px}
.ev-field__hint a{color:var(--ev-coral-ink)}
.ev-field__fixed{font:400 15px/1.4 var(--ev-ui);margin:0}
.ev-field__change{font:600 12.5px/1 var(--ev-ui);color:var(--ev-coral-ink);margin-left:8px;text-decoration:none}
.ev-field__change:hover{text-decoration:underline}

/* The consent line is long on purpose — it is what the person is agreeing to,
   so it is shown in full rather than summarised behind a link. Set at reading
   size rather than fine-print size for the same reason. */
.ev-field--consent{background:var(--ev-paper);border:1px solid var(--ev-line);
  border-radius:11px;padding:14px 16px}
.ev-field--consent > label{display:flex;gap:10px;align-items:flex-start;font-weight:400;
  font-size:13.5px;line-height:1.55;color:var(--ev-ink-2);cursor:pointer;max-width:640px}
.ev-field--consent input[type=checkbox]{flex:none;margin-top:2px;width:17px;height:17px;
  accent-color:var(--ev-coral)}