/*
 * News. — reader accounts (Login + My account pages, header account menu).
 * WordPress-only additions on top of assets/css/style.css; design classes are unchanged.
 */

/* Without JS the class on <html> is missing — WordPress's body.logged-in still shows the right views. */
body.logged-in .account__view--guest{ display:none; }
body.logged-in .account__view--user{ display:block; }
body.logged-in .account-hub{ display:block; }
body.logged-in .account-gate{ display:none; }

/* Header menu avatar (Gravatar) */
.account__avatar{ overflow:hidden; }
.account__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Notices (form results) */
.news-auth-notice{
  margin:0 0 16px; padding:12px 14px;
  border-radius:var(--radius-s); border:1px solid var(--border-bottom);
  background:var(--paper); color:var(--ink);
  font-size:13.5px; line-height:1.45; text-align:left;
}
.news-auth-notice--success{ border-color:rgba(5,150,105,.35); background:rgba(5,150,105,.08); }
.news-auth-notice--error{ border-color:rgba(237,28,36,.35); background:rgba(237,28,36,.06); }
.account-main > .news-auth-notice{ margin-bottom:14px; }

/* Login page */
.login-card [data-auth-panel][hidden],
.login-card [data-login-social-only][hidden],
.login-card [data-login-benefits][hidden]{ display:none !important; }
.login-card__split--single,
.login-card__split:has(> .login-card__col--social[hidden]){
  grid-template-columns:minmax(0, 1fr);
  max-width:420px; margin-inline:auto;
}
.login-card__split--single .login-card__col-label,
.login-card__split:has(> .login-card__col--social[hidden]) .login-card__col-label{ display:none; }
a.auth-social__btn{ text-decoration:none; }
.news-auth-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin:-2px 0 12px; font-size:13px;
}
.news-auth-row a{ color:var(--red); font-weight:700; }
.news-auth-check{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); cursor:pointer; }
.news-auth-check input{ width:16px; height:16px; margin:0; accent-color:var(--red); }

/* Honeypot / hidden username helpers */
.news-hp{
  position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;
}

/* My account additions */
.account-field textarea{
  min-height:88px; padding:10px 14px; resize:vertical;
  border:1px solid var(--border-bottom); border-radius:var(--radius-s);
  background:var(--paper); color:var(--ink); font:inherit; font-size:15px; line-height:1.45;
  max-width:100%; box-sizing:border-box;
}
.account-field textarea:focus{ outline:2px solid var(--red); outline-offset:1px; }
.news-account-hint-gap{ margin:-6px 0 14px; }
.news-account-actions-gap{ margin-top:18px; }
.news-account-inline-form{ display:contents; }
.news-account-avatar{ display:flex; align-items:center; gap:14px; }
.news-account-avatar__img,
.news-account-avatar img{ width:64px; height:64px; border-radius:50%; flex:none; object-fit:cover; }
.news-account-avatar a{ color:var(--red); font-weight:700; }
.news-account-subform{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--border-bottom);
}
.news-account-subform h3{
  margin:0 0 6px; font-family:var(--sans); font-size:16px; font-weight:700; color:var(--ink);
}
.news-account-subform > .account-field__hint:first-of-type{ margin-bottom:14px; }
.news-password-hint{ margin:-4px 0 12px; }
.news-password-hint[data-strength="weak"]{ color:var(--red); }
.news-password-hint[data-strength="strong"]{ color:#059669; }
.news-account-danger{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.news-account-danger form{ margin:0; }
.news-account-danger .account-field__hint{ flex-basis:100%; }
.news-account-empty--compact{ padding:28px 12px; }
.news-comment-status--pending{ color:var(--muted); }
a.account-connect__btn{ display:inline-flex; align-items:center; text-decoration:none; }
a.account-connect__btn--ghost{ color:var(--ink); }
.account-connect__icon{ font-weight:700; }

@media (max-width:900px){
  .news-account-inline-form .btn{ width:100%; justify-content:center; min-height:48px; }
}

/* Account sidebar: stick below the sticky header (brand bar + nav ≈ 100px) with a comfortable gap. */
@media (min-width:901px){
  .account-side{ top:124px; }
  body.admin-bar .account-side{ top:156px; }
}

/* Profile photo upload */
.news-account-avatar__body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.news-account-avatar__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.news-account-avatar__pick{ cursor:pointer; position:relative; }
.news-account-avatar__pick:focus-within{ outline:2px solid var(--red); outline-offset:2px; }
.news-account-avatar__remove{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer; }
.news-account-avatar.is-removing img{ opacity:.35; }