/* Community, account and shared sub-page styles. Builds on the tokens and components in styles.css. */

/* ---------- sub-page frame ---------- */
.subpage main { min-height: 60svh; }
.page-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: end; padding: clamp(3rem, 7vw, 6rem) max(var(--margin), (100% - var(--frame)) / 2 + var(--margin)) clamp(2rem, 4vw, 3.5rem); }
.page-head h1 { grid-column: 1 / span 7; font-size: var(--step-head); line-height: 1.08; letter-spacing: -0.03em; }
.page-head p { grid-column: 8 / -1; max-width: 28em; color: var(--ink-soft); font-size: var(--step-lead); line-height: 1.5; }
.page-body { padding: 0 max(var(--margin), (100% - var(--frame)) / 2 + var(--margin)) var(--section-space); }
.header-account { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 700; text-decoration: none; }
.header-account:hover { color: var(--brass-ink); }

/* ---------- form controls (real fields keep their own boxes) ---------- */
.field { display: grid; gap: 6px; }
.field > span, .field > label { font-size: var(--step-small); font-weight: 700; }
.field small { color: var(--ink-soft); font-size: 0.8125rem; }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--stone); border-radius: 2px; background: #fbfaf7; color: var(--ink); font: inherit; font-size: 1rem; transition: border-color var(--dur-fast) ease; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); outline: none; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: #a5442e; }
.form-error { padding: 12px 14px; background: #f1ddd5; color: #6f2615; font-size: var(--step-small); font-weight: 700; }
.form-error[hidden], .form-ok[hidden] { display: none; }
.form-ok { padding: 12px 14px; background: #dbe6d6; color: #24401f; font-size: var(--step-small); font-weight: 700; }
.button[disabled], .button[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; }
.button--ghost { background: var(--paper-2); color: var(--ink); }
.button--ghost:hover { background: var(--stone); }
.button--danger { background: var(--danger); color: var(--on-dark); }
.button--danger:hover { background: var(--danger-dark); }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.3em; cursor: pointer; }
.link-button:hover { color: var(--brass-ink); }
altcha-widget { display: block; max-width: 320px; --altcha-border-radius: 2px; --altcha-color-border: var(--stone); --altcha-color-base: #fbfaf7; --altcha-color-text: var(--ink); --altcha-color-border-focus: var(--ink); }

/* ---------- site dialogs ---------- */
.site-dialog { width: min(520px, calc(100% - 32px)); max-width: none; max-height: min(86svh, 720px); padding: 0; border: 0; border-radius: 2px; overflow: visible; background: transparent; color: var(--ink); }
.site-dialog::backdrop { background: rgba(25, 27, 24, 0.68); }
.site-dialog__panel { display: grid; gap: 18px; max-height: min(86svh, 720px); overflow: auto; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32); }
.site-dialog h2 { max-width: 15ch; font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; }
.site-dialog__message { max-width: 46ch; color: var(--ink-soft); line-height: 1.65; }
.site-dialog .textarea { min-height: 112px; }
.site-dialog__error { padding: 10px 12px; background: var(--danger-soft); color: var(--danger-ink); font-size: var(--step-small); font-weight: 700; }
.site-dialog__error[hidden] { display: none; }
.site-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.site-dialog__actions .button { min-width: 112px; }
body:has(.site-dialog[open]) { overflow: hidden; }

/* ---------- full ban list ---------- */
.ban-filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; padding: 20px; background: var(--paper-2); }
.ban-filters .field > span { font-size: 0.8125rem; }
.ban-list-summary { display: flex; justify-content: space-between; gap: 16px; margin: 28px 0 12px; color: var(--ink-soft); font-size: var(--step-small); }
.ban-list .ban-row { cursor: pointer; transition: background-color var(--dur-fast) ease; }
.ban-list .ban-row:hover { background: #fbfaf7; }
.ban-list .ban-row:focus-visible { outline-offset: -3px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.pager span { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ban-detail { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--margin); background: rgba(25, 27, 24, 0.55); }
.ban-detail[hidden] { display: none; }
.ban-detail__card { width: min(560px, 100%); max-height: 90svh; overflow: auto; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); /* taste-skill-ignore: modal dialog floats above its backdrop */ }
.ban-detail__card h2 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.ban-detail__card dl { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px 16px; margin: 24px 0; }
.ban-detail__card dt { color: var(--ink-soft); }
.ban-detail__card dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ban-detail__card .button { width: 100%; }

/* ---------- comments ---------- */
.comments-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.composer { display: grid; gap: 12px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper-2); }
.composer__who { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.composer__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.composer__count { color: var(--ink-soft); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.composer__count.is-over { color: #a5442e; font-weight: 700; }
.composer-gate { display: grid; gap: 12px; justify-items: start; padding: clamp(1.25rem, 3vw, 2rem); background: var(--paper-2); }
.composer-gate strong { font-size: 1.125rem; }
.composer-gate--muted { background: var(--danger-soft); }
.composer-gate--muted p { color: var(--danger-ink); }
.composer-gate--muted a { color: inherit; font-weight: 700; }
.comment-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 40px 0 16px; }
.sort-switch { display: inline-flex; gap: 3px; background: var(--paper-2); padding: 3px; }
.sort-switch button { min-height: 40px; padding: 6px 16px; border: 0; background: transparent; font-weight: 700; cursor: pointer; }
.sort-switch button[aria-pressed="true"] { background: var(--ink); color: var(--on-dark); }
.comment-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.comment { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 20px 22px; background: #fbfaf7; }
.comment--pinned { background: #fbf4e4; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.comment__name { font-weight: 900; }
.comment__time { color: var(--ink-soft); font-size: var(--step-small); }
.comment__body { grid-column: 2; margin-top: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.comment__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.comment__actions button { min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: var(--step-small); font-weight: 700; cursor: pointer; }
.comment__actions button:hover, .comment__actions button[aria-pressed="true"] { color: var(--brass-ink); }
.comment__actions button[aria-pressed="true"]::before { content: "● "; }
.comment__replies { grid-column: 2; display: grid; gap: 3px; margin: 14px 0 0; padding: 0; list-style: none; }
.comment__replies .comment { grid-template-columns: 32px minmax(0, 1fr); padding: 14px 16px; background: var(--paper); }
.comment__editor { grid-column: 2; display: grid; gap: 8px; margin-top: 12px; }
.comment__editor .textarea { min-height: 88px; }
.comment__editor div { display: flex; gap: 10px; }
.comment-state { padding: 32px 24px; background: #fbfaf7; color: var(--ink-soft); text-align: center; }
.comment-state strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 1.125rem; }
.mc-avatar { width: 44px; height: 44px; image-rendering: pixelated; background: var(--paper-2); }
.comment__replies .mc-avatar { width: 32px; height: 32px; }
.mc-avatar--fallback { display: grid; place-items: center; background: var(--graphite); color: var(--brass-light); font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.comments-aside { display: grid; gap: 24px; position: sticky; top: 24px; }
.comments-aside section { padding: 22px; background: var(--paper-2); }
.comments-aside h2 { font-size: 1.25rem; line-height: 1.3; }
.comments-aside p, .comments-aside li { color: var(--ink-soft); font-size: var(--step-small); }
.comments-aside ol { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 1.2em; }

/* ---------- account ---------- */
.account-shell { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.account-tabs { display: flex; gap: 3px; margin-bottom: 24px; background: var(--paper-2); padding: 3px; }
.account-tabs button { flex: 1; min-height: 44px; border: 0; background: transparent; font-weight: 700; cursor: pointer; }
.account-tabs button[aria-selected="true"] { background: var(--ink); color: var(--on-dark); }
.account-card { display: grid; gap: 18px; padding: clamp(1.5rem, 4vw, 2.5rem); background: #fbfaf7; }
.account-card h2 { font-size: var(--step-sub); line-height: 1.15; }
.account-card .button { justify-self: start; }
.account-stack { display: grid; gap: 24px; }
.identity-reminder { background: var(--graphite); color: var(--on-dark); }
.identity-reminder p { max-width: 52ch; color: var(--on-dark-soft); }
.identity-reminder .link-button { color: var(--on-dark-soft); }
.identity-reminder .link-button:hover { color: var(--brass-light); }
.identity-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.identity-actions .button, .identity-actions .link-button { min-height: 44px; }
.identity-invite p { max-width: 52ch; color: var(--ink-soft); }
.account-note { display: grid; gap: 14px; padding-top: 8px; color: var(--ink-soft); }
.account-note h2 { color: var(--ink); font-size: 1.25rem; }
.account-note ol { display: grid; gap: 10px; margin: 0; padding-left: 1.3em; }
.identity-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; align-items: center; padding: 20px; background: var(--paper-2); }
.identity-card .mc-avatar { width: 64px; height: 64px; grid-row: span 2; }
.identity-card strong { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.code-box { display: inline-block; padding: 8px 14px; background: var(--ink); color: var(--brass-light); font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: 0.12em; }

/* ---------- legal reading pages ---------- */
.legal-layout { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 8fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.legal-index { position: sticky; top: 24px; display: grid; gap: 18px; padding: 24px; background: var(--graphite); color: var(--on-dark); }
.legal-index strong { font-size: 1rem; }
.legal-index nav { display: grid; gap: 10px; }
.legal-index a { min-height: 40px; display: flex; align-items: center; color: var(--on-dark-soft); font-size: var(--step-small); font-weight: 700; text-decoration-color: var(--brass); text-underline-offset: 0.35em; }
.legal-index a:hover { color: var(--brass-light); }
.legal-index p { color: var(--on-dark-soft); font-size: 0.8125rem; }
.legal-copy { grid-column: 2; max-width: 74ch; }
.legal-copy section { padding: 0 0 clamp(3rem, 6vw, 5rem); scroll-margin-top: 24px; }
.legal-copy h2 { margin-bottom: 18px; font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; }
.legal-copy h3 { margin: 28px 0 10px; font-size: 1.125rem; }
.legal-copy p, .legal-copy li { line-height: 1.8; }
.legal-copy p + p { margin-top: 14px; }
.legal-copy ul { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 1.35em; }
.legal-copy a { color: var(--brass-ink); font-weight: 700; }
.legal-callout { padding: 24px; background: var(--paper-2); }

@media (max-width: 1100px) {
  .page-head h1, .page-head p { grid-column: 1 / -1; }
  .comments-layout, .account-shell { grid-template-columns: 1fr; }
  .comments-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ban-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ban-filters .field:first-child { grid-column: 1 / -1; }
  .legal-layout { grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); }
  .legal-copy { grid-column: 2; }
}
@media (max-width: 820px) {
  .header-account { display: none; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-index { position: static; }
  .legal-copy { grid-column: 1; }
  .legal-index a { min-height: 44px; }
}
@media (max-width: 560px) {
  .ban-filters { grid-template-columns: 1fr 1fr; padding: 14px; }
  .comments-aside { grid-template-columns: 1fr; }
  .comment { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 16px; }
  .mc-avatar { width: 36px; height: 36px; }
  .comment__replies { grid-column: 1 / -1; }
  .ban-detail { align-items: end; padding: 0; }
  .ban-detail__card { width: 100%; max-height: 85svh; }
  .site-dialog { position: fixed; inset: auto auto 8px 8px; width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(88svh - 8px); margin: 0; }
  .site-dialog__panel { max-height: 88svh; padding: 24px 18px max(20px, env(safe-area-inset-bottom)); }
  .site-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .site-dialog__actions .button { min-width: 0; min-height: 48px; }
}

/* ---------- round-2 visual fixes ---------- */
.ban-list .ban-row { background: #fbfaf7; }
.ban-list .ban-row--expired, .ban-list .ban-row--lifted { background: var(--paper-2); }
.account-card > .link-button, .account-card .link-button { justify-self: start; }