/*
 * "Moderna" theme, account area (wave 10, W37): profile, edit profile, registration, login, lost password, e-mail form,
 * avatar upload, followed users and private messages. Needs tokens.css, components.css and forum.css first.
 * Tokens only, no raw colors. Loaded by the pages' {% block head %}; behavior in account.js.
 *
 * Contents: page frames (.acc), password field toggle, live status,
 * save bar, profile header, activity list, registration layout, avatar upload, private messages.
 */

/* ---- frames ---- */
.acc { width: 100%; }
.acc-narrow { max-width: 520px; margin: 0 auto; }
.acc-narrow.acc-wide-ok { max-width: 720px; }
.acc-form { max-width: 900px; margin: 0 auto; }
.acc-form.acc-reg { max-width: 1040px; }
.acc-pm { max-width: 900px; margin: 0 auto; }
.acc .card { margin-bottom: var(--space-4); }
.acc h1 { margin-bottom: 0; }
.acc .page-intro { margin-bottom: var(--space-4); }
.acc-card { padding: var(--space-8) var(--space-6); text-align: center; }
.acc-card h1 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.acc-card .lead { margin: 0 0 var(--space-5); }
.acc-card .stack, .acc-card .field { text-align: left; }
.acc-card-icon { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.acc-center { justify-content: center; }
.acc-links { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); }
.acc-aside { text-align: center; color: var(--text-2); }
.acc-logout { margin-top: var(--space-3); }
.acc-card-form h2 { font-size: var(--fs-lg); }
.acc-or { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--fs-sm); }
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.acc-gap { margin-top: var(--space-4); }
.acc-static { min-height: var(--control-h); display: flex; align-items: center; gap: var(--space-2); color: var(--text); font-weight: 600; word-break: break-word; }
.acc-notice { margin-bottom: var(--space-4); }
.acc .field fieldset, fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.acc legend { padding: 0; font-size: var(--fs-sm); font-weight: 550; color: var(--text-2); margin-bottom: 5px; }

.acc .field > small { font-size: var(--fs-xs); }

/* ---- password field: the toggle is added by account.js (hidden without it) ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); }


/* ---- live availability check (registration) ---- */
.live-status { font-size: var(--fs-xs); color: var(--muted); }
.live-status:empty { display: none; }
.live-status.is-ok { color: var(--ok); }
.live-status.is-bad { color: var(--danger); }
.live-status.is-busy { color: var(--muted); }
.live-status a { text-decoration: underline; }

/* ---- sectioned forms ---- */
.acc-jump { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 var(--space-4); padding-bottom: 2px; scrollbar-width: none; }
.acc-jump a { flex: none; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); font-weight: 550; }
.acc-jump a:hover { color: var(--text); border-color: var(--border-strong); text-decoration: none; }
.acc-section { scroll-margin-top: calc(var(--header-h) + 12px); }
.acc-section .card-head h2 { font-size: var(--fs-lg); }
.acc-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; list-style: none; font-weight: 650; }
.acc-more > summary::-webkit-details-marker { display: none; }
.acc-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-left: var(--space-2); transition: transform var(--dur-fast); }
.acc-more[open] > summary::after { transform: rotate(-135deg); }
.acc-more > summary .muted { margin-left: auto; font-weight: 400; font-size: var(--fs-sm); }
.radios-box .radios { gap: 8px; }
.counter { text-align: right; font-variant-numeric: tabular-nums; }
.counter.is-near { color: var(--warn); }
.acc-callout { display: flex; gap: var(--space-5); align-items: flex-start; margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.acc-callout img { flex: none; width: 150px; height: 150px; border-radius: var(--radius-sm); background: var(--surface); padding: 6px; }
.acc-callout h3 { margin-bottom: var(--space-2); }
.acc-callout p { margin: 0 0 var(--space-2); color: var(--text-2); font-size: var(--fs-sm); }


/* sticky save bar at the end of long forms */
.acc-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  margin: 0 calc(var(--space-2) * -1); padding: var(--space-3) var(--space-2);
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--border);
}
.acc-savebar-note { margin-right: auto; font-size: var(--fs-sm); }

/* ---- registration ---- */
.acc-reg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.acc-reg-side { position: sticky; top: calc(var(--header-h) + 16px); }
.acc-steps { margin: 0; padding-left: 20px; display: grid; gap: var(--space-3); color: var(--text-2); font-size: var(--fs-base); }
.acc-steps strong { color: var(--text); }
.acc-reg .g-recaptcha { margin-bottom: var(--space-2); }

/* ---- profile ---- */
.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; padding: var(--space-6); }
.profile-photo { position: relative; width: 140px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--accent-soft); border: 1px solid var(--border); }
.profile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.profile-photo img[hidden] { display: none; }
.profile-letter { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 56px; font-weight: 700; text-transform: uppercase; }
.profile-main { min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.profile-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.profile-title h1 { font-size: var(--fs-2xl); word-break: break-word; }
.profile-sub { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--fs-base); }
.profile-sub a { color: var(--link); word-break: break-all; }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.profile-stats .stat { padding: var(--space-3) var(--space-4); min-width: 0; }
.profile-stats .stat-value { font-size: var(--fs-xl); }
.profile-stats .stat-text { font-size: var(--fs-md); font-weight: 650; letter-spacing: 0; padding: 5px 0; overflow-wrap: anywhere; }
.profile-tabs .tab-panel > .card { margin-bottom: var(--space-4); }
.profile-activity { list-style: none; margin: 0 0 var(--space-4); padding: 4px var(--space-4); }
.profile-activity li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 10px 0; border-bottom: 1px solid var(--border); }
.profile-activity li:last-child { border-bottom: 0; }
.profile-topic { min-width: 0; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.profile-topic:hover { color: var(--link); }
.profile-topic-meta { flex: none; display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.profile-topic-meta .pill { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 26px; }

/* ---- avatar upload ---- */
.avatar-up { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.avatar-up-now { text-align: center; }
.avatar-up-photo { width: 160px; margin: 0 auto; }
.avatar-up-cap { margin: var(--space-2) 0 0; font-size: var(--fs-sm); }

/* ---- private messages ---- */
.pm-tabs { margin-bottom: var(--space-4); }
.pm-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.pm-tabs .icon { width: 16px; height: 16px; vertical-align: 0; }
.pm-card { padding: 0; overflow: hidden; }
.pm-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--border); min-height: 48px; }
.pm-toolbar .check input, .pm-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; cursor: pointer; }
.pm-selected { font-size: var(--fs-sm); }
.pm-bulk { margin-left: auto; display: flex; gap: var(--space-2); }
.pm-rows { list-style: none; margin: 0; padding: 0; }
.pm-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--border); }
.pm-row:last-child { border-bottom: 0; }
.pm-row:hover { background: var(--surface-2); }
.pm-row.is-selected { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.pm-check { display: grid; place-items: center; padding: 0 0 0 var(--space-4); height: 100%; min-width: 44px; cursor: pointer; }
.pm-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2); color: var(--text); min-width: 0; }
.pm-link:hover { text-decoration: none; }
.pm-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pm-who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.pm-who .topic-dot { margin-top: 0; background: var(--unread); }
.pm-subject, .pm-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-subject { font-weight: 550; }
.pm-preview { color: var(--muted); font-size: var(--fs-sm); }
.pm-row.is-unread .pm-subject, .pm-row.is-unread .pm-who { font-weight: 700; color: var(--text); }
.pm-when { color: var(--muted); font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
.follow-row { grid-template-columns: minmax(0, 1fr) auto; padding-right: var(--space-4); }
.follow-row .pm-link { grid-template-columns: auto minmax(0, 1fr); }
.pm-message { padding: var(--space-6); }
.pm-message-head { display: grid; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.pm-message-head h1 { font-size: var(--fs-xl); word-break: break-word; }
.pm-body { max-width: none; }
.pm-message-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.pm-message-actions .pm-delete { margin-left: auto; }
.pm-compose textarea { min-height: 220px; }
.pm-compose { padding: var(--space-6); }

/* ---- phones ---- */
@media (max-width: 900px) {
  .acc-reg-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-reg-side { position: static; order: -1; }
  .acc-steps { font-size: var(--fs-sm); }
}
@media (max-width: 700px) {
  .profile-head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: var(--space-5) var(--space-4); }
  .profile-photo { width: 120px; }
  .profile-title, .profile-sub, .profile-actions { justify-content: center; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-activity li { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .profile-topic { max-width: 100%; white-space: normal; }
  .avatar-up { grid-template-columns: minmax(0, 1fr); }
  .acc-callout { flex-direction: column; }
  .setting { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .acc-card { padding: var(--space-6) var(--space-4); }
  .pm-message, .pm-compose { padding: var(--space-4); }
  .pm-link { grid-template-columns: auto minmax(0, 1fr); }
  .pm-when { grid-column: 2; text-align: left; }
  .pm-bulk .btn span { display: none; }
  .pm-bulk .btn { min-width: 36px; padding: 0 8px; }
  .pm-message-actions .pm-delete { margin-left: 0; }
  .acc-savebar { flex-wrap: wrap; }
}