/* ---------- Community: reader accounts, comments, profiles ---------- */

/* Avatars: a photo, or initials on a colour from the username. */
.avatar { display: inline-block; flex: none; inline-size: var(--avatar-size, 40px); block-size: var(--avatar-size, 40px); border-radius: 50%; object-fit: cover; background: var(--surface-3); }
img.avatar { inline-size: auto; block-size: auto; }
.avatar--initials { display: inline-grid; place-items: center; font-size: calc(var(--avatar-size, 40px) * 0.4); font-weight: 800; color: #FFFFFF;
  background: hsl(var(--avatar-hue, 150) 45% 38%); letter-spacing: 0.02em; }
.avatar--gone { background: var(--surface-3); color: var(--ink-2); }

/* Header account slot */
.account-slot { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.site-header__tools + .account-slot { margin-inline-start: var(--space-2); }
.account-slot__signin { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--touch); padding-inline: var(--space-2); border-radius: 999px; color: #FFFFFF; font-size: var(--step--1); font-weight: 600; text-decoration: none; }
.account-slot__signin:hover { background: rgb(255 255 255 / 0.12); }
.account-slot__signin .icon { inline-size: 22px; block-size: 22px; }
@media (max-width: 899px) { .account-slot__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } }
.account-slot__bell { position: relative; color: #FFFFFF; }
.account-slot__badge { position: absolute; inset-block-start: 6px; inset-inline-end: 4px; min-inline-size: 18px; padding-inline: 4px; border-radius: 999px; background: var(--flag-red); color: #FFFFFF; font-size: 0.6875rem; font-weight: 800; line-height: 18px; text-align: center; }
.account-menu { position: relative; }
.account-menu__toggle { position: relative; }
.account-menu__dot { display: none; position: absolute; inset-block-start: 8px; inset-inline-end: 6px; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--flag-red); box-shadow: 0 0 0 2px var(--brand); }
.account-menu__count { display: inline-block; min-inline-size: 20px; margin-inline-start: auto; padding-inline: 6px; border-radius: 999px; background: var(--flag-red); color: #FFFFFF; font-size: 0.75rem; text-align: center; }
/* Phones: the bar holds the brand, the account, search and the menu; the bell moves into the account menu. */
@media (max-width: 899px) {
  .site-header .site-header__bar { gap: 0; }
  .site-header .site-menu { margin-inline-start: 0; }
  .site-header .account-slot .icon-button, .site-header .account-menu__toggle { min-inline-size: 40px; }
}
@media (max-width: 479px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand .wordmark { font-size: 1.3125rem; }
  .account-slot .account-slot__bell { display: none; }
  .account-menu__dot { display: block; }
}
.account-menu__toggle { display: inline-grid; place-items: center; min-inline-size: var(--touch); min-block-size: var(--touch); list-style: none; cursor: pointer; border-radius: 999px; }
.account-menu__toggle::-webkit-details-marker { display: none; }
.account-menu__toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.account-menu__panel { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); z-index: 30; display: grid; min-inline-size: 220px; padding: var(--space-2); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.account-menu__panel a, .account-menu__signout { display: flex; align-items: center; min-block-size: var(--touch); padding-inline: var(--space-3); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--step-0); background: none; border: 0; cursor: pointer; inline-size: 100%; text-align: start; font-family: inherit; }
.account-menu__panel a:hover, .account-menu__signout:hover { background: var(--surface-2); }
.account-menu__panel form { margin: 0; }
.account-menu__name { display: grid; padding: var(--space-2) var(--space-3) var(--space-3); margin: 0 0 var(--space-1); border-block-end: 1px solid var(--line); }
.account-menu__name span { color: var(--ink-2); font-size: var(--step--1); }

/* Comments block */
.comments__frame, .comments__body { display: block; padding: 0 var(--space-4) var(--space-4); }
.comments__body { padding: 0; display: grid; gap: var(--space-4); }
.comments__loading, .comments__empty { margin: 0; padding: var(--space-3) 0; color: var(--ink-2); }
.comments__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.comments__count { margin: 0; font-weight: 700; }
.comments__sort { display: flex; gap: var(--space-2); }
.comments__new { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: center; min-block-size: 40px; padding-inline: var(--space-4); border: 0; border-radius: 999px; background: var(--atlas-green); color: var(--on-status); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-pop); }
.comments__new .icon { inline-size: 18px; block-size: 18px; }
.comments__notice { margin: 0; padding: var(--space-3); border-radius: var(--radius-m); background: var(--atlas-tint); color: var(--ink); font-size: var(--step--1); }
.comments__notice--warn { background: color-mix(in srgb, var(--flag-red) 10%, var(--surface)); }
.comments__signin { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface-2); }
.comments__signin p { margin: 0; }
.comments__signin-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.comments__list, .comments__replies { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.comments__thread { display: grid; gap: var(--space-3); padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); }
.comments__thread:last-child { border-block-end: 0; }
.comments__replies { gap: var(--space-3); padding-inline-start: calc(40px + var(--space-3)); }
.comments__more-replies { padding-inline-start: calc(40px + var(--space-3)); }
.comments__more-replies > summary { min-block-size: var(--touch); display: flex; align-items: center; color: var(--atlas-green); font-weight: 700; font-size: var(--step--1); cursor: pointer; }
.comments__more-replies > .comments__replies { padding-inline-start: 0; }
.comments__load-more { justify-self: center; }
.comments__rules { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
@media (max-width: 599px) {
  .comments__replies, .comments__more-replies { padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--line); }
}

/* One comment */
.comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); scroll-margin-block-start: 120px; }
.comment--pending .comment__main { opacity: 0.85; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); font-size: var(--step--1); }
.comment__author { font-weight: 800; color: var(--ink); text-decoration: none; }
.comment__author:hover { text-decoration: underline; }
.comment__author--gone { color: var(--ink-2); font-style: italic; }
.comment__badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--atlas-tint); color: var(--atlas-green); font-size: 0.6875rem; font-weight: 700; }
.comment__crest { inline-size: 16px; block-size: 16px; object-fit: contain; }
.comment__time, .comment__edited { color: var(--ink-2); }
.comment__body { margin-block: 4px 0; overflow-wrap: anywhere; line-height: 1.5; }
.comment__body p { margin: 0 0 var(--space-2); }
.comment__body p:last-child { margin: 0; }
.comment__body a { color: var(--promo); }
.comment__body--deleted { color: var(--ink-2); font-style: italic; }
.comment__pending { margin: var(--space-2) 0 0; padding: 4px var(--space-2); border-radius: var(--radius-s); background: color-mix(in srgb, var(--sand) 18%, var(--surface)); font-size: 0.75rem; font-weight: 600; inline-size: fit-content; }
.comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); margin-block-start: 2px; }
.comment__actions form { margin: 0; }
.comment__action { display: inline-flex; align-items: center; gap: 4px; min-block-size: 36px; padding-inline: var(--space-2); border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; text-decoration: none; list-style: none; }
.comment__action::-webkit-details-marker { display: none; }
.comment__action:hover { background: var(--surface-2); color: var(--ink); }
.comment__action .icon { inline-size: 17px; block-size: 17px; }
.comment__like.is-liked { color: var(--flag-red); }
.comment__like.is-liked .icon { fill: currentColor; }
.comment__like--static { cursor: default; }
.comment__like--static:hover { background: none; color: var(--ink-2); }
.comment__action--done { cursor: default; }
.comment__action--ok { color: var(--win); }
.comment__action--bad { color: var(--loss); }
.comment__moderation { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.comment__menu { flex-basis: auto; }
.comment__menu[open] { flex-basis: 100%; }
.comment__menu[open] > summary { color: var(--ink); }
.comment-report { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--step--1); }
.comment-report select { min-block-size: 40px; padding-inline: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; }

/* Comment form */
.comment-form { display: grid; gap: var(--space-2); }
.comment-form--reply { padding-block-start: var(--space-2); }
.comment-form__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.comment-form textarea { flex: 1; inline-size: 100%; min-block-size: 72px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font: inherit; line-height: 1.45; resize: vertical; }
.comment-form textarea:focus { outline: 2px solid var(--atlas-green); outline-offset: 1px; border-color: transparent; }
.comment-form__actions { display: flex; justify-content: flex-end; }
.comment-form__error { margin: 0; color: var(--loss); font-size: var(--step--1); font-weight: 600; }
.comment-count { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-size: 0.75rem; font-weight: 700; }
.comment-count .icon { inline-size: 14px; block-size: 14px; }

/* Sign up, sign in, password pages */
.auth-page { display: grid; justify-items: center; padding-block: var(--space-5); }
.auth-page__card { inline-size: min(100%, 460px); padding: var(--space-5); display: grid; gap: var(--space-4); overflow: visible; }
.auth-page__head { display: grid; gap: var(--space-2); }
.auth-page__title { margin: 0; font-size: var(--step-3); }
.auth-page__intro, .auth-page__contact { margin: 0; color: var(--ink-2); }
.auth-form { display: grid; gap: var(--space-4); }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-weight: 700; font-size: var(--step--1); }
.auth-field input[type="text"], .auth-field input[type="email"], .auth-field input[type="password"], .auth-field select, .auth-field textarea {
  inline-size: 100%; min-block-size: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); font: inherit; }
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus { outline: 2px solid var(--atlas-green); outline-offset: 1px; border-color: transparent; }
.auth-field__hint { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.auth-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--step--1); line-height: 1.4; }
.auth-check input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--atlas-green); }
.auth-form__submit { inline-size: 100%; min-block-size: var(--touch); }
.auth-form__alt { margin: 0; text-align: center; font-size: var(--step--1); color: var(--ink-2); }
.auth-form__errors { padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: color-mix(in srgb, var(--loss) 10%, var(--surface)); color: var(--ink); font-size: var(--step--1); }
.auth-form__errors ul { margin: 0; padding-inline-start: var(--space-4); }
.auth-form__trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* Account settings */
.account-page { display: grid; gap: var(--space-4); max-inline-size: 720px; }
.account-page__head { display: flex; align-items: center; gap: var(--space-4); }
.account-page__title { margin: 0; font-size: var(--step-3); }
.account-page__meta { margin: 0; color: var(--ink-2); }
.account-section { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); overflow: visible; }
.account-section__title { margin: 0; font-size: var(--step-1); }
.account-section__text { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.account-section--danger { box-shadow: inset 3px 0 0 var(--loss), var(--shadow-card); }
.account-section__danger { color: var(--loss); }
.account-page__signout { justify-self: start; }
@media (max-width: 599px) { .account-section { padding: var(--space-4); } }

/* Notifications */
.notifications__list { margin: 0; padding: 0 0 var(--space-2); list-style: none; }
.notifications__empty { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--ink-2); }
.notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--line); }
.notification--unread { background: var(--atlas-tint); }
.notification__text p { margin: 0; }
.notification__link { font-size: var(--step--1); font-weight: 700; color: var(--atlas-green); }
.notification__time { color: var(--ink-2); font-size: 0.75rem; white-space: nowrap; }

/* Public profile */
.profile-page { display: grid; gap: var(--space-4); }
.profile-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4) var(--space-5); align-items: center; padding: var(--space-5); }
.profile-card__avatar .avatar { --avatar-size: 112px; inline-size: 112px; block-size: 112px; }
.profile-card__name { margin: 0; font-size: var(--step-4); line-height: 1.1; }
.profile-card__handle { margin: 2px 0 0; color: var(--ink-2); text-align: start; }
.profile-card__bio { margin: var(--space-2) 0 0; }
.profile-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--ink-2); }
.profile-card__team { display: inline-flex; align-items: center; gap: 6px; }
.profile-card__team img { object-fit: contain; }
.profile-card__stats { display: flex; gap: var(--space-5); margin: 0; }
.profile-card__stats div { display: grid; text-align: center; }
.profile-card__stats dt { order: 2; color: var(--ink-2); font-size: var(--step--1); }
.profile-card__stats dd { margin: 0; font-size: var(--step-3); font-weight: 800; }
@media (max-width: 699px) {
  .profile-card { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--space-4); }
  .profile-card__handle { text-align: center; }
  .profile-card__facts { justify-content: center; }
}
.profile-comments__list { margin: 0; padding: 0 var(--space-4) var(--space-2); list-style: none; }
.profile-comment { padding-block: var(--space-3); border-block-start: 1px solid var(--line); display: grid; gap: 4px; }
.profile-comment__on { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.profile-comment__on a { color: var(--ink); font-weight: 700; }
.profile-comment__likes { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--ink-2); font-size: 0.75rem; font-weight: 700; }
.profile-comment__likes .icon { inline-size: 14px; block-size: 14px; }

/* Community rules (and other short legal pages) */
.legal-page { padding: var(--space-5); display: grid; gap: var(--space-4); max-inline-size: 760px; }
.legal-page__title { margin: 0; font-size: var(--step-4); }
.legal-page__intro { margin: var(--space-2) 0 0; color: var(--ink-2); font-size: var(--step-1); }
.legal-page__section h2 { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.legal-page__section ul { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); line-height: 1.5; }
.legal-page__updated { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
@media (max-width: 599px) { .legal-page { padding: var(--space-4); } }

/* Admin: community pages */
.admin-facts { display: grid; gap: var(--space-2); margin: 0; }
.admin-facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-3); }
.admin-facts dt { color: var(--ink-2); font-size: var(--step--1); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-2); }
.admin-panel__title { padding: var(--space-4) var(--space-4) 0; margin: 0; }
.admin-comment { max-inline-size: 70ch; overflow-wrap: anywhere; }
.admin-comment p { margin: 0 0 var(--space-1); }
.admin-table--comments td { vertical-align: top; }
.admin-table--comments .admin-table__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.admin-table--comments .admin-table__actions form { margin: 0; }
.admin .admin-form textarea { inline-size: 100%; font-family: inherit; }
@media (max-width: 599px) { .admin-facts div { grid-template-columns: 1fr; gap: 0; } }