/* Shared layout for the five account/help pages. Reuses the existing allowlisted
   password-reset sheet so these pages need no static-server changes. */
.account-pages { margin: 0; color: var(--ds-text); background: var(--ds-bg); font: 16px/1.6 var(--ds-font); }
.account-pages *, .account-pages *::before, .account-pages *::after { box-sizing: border-box; }
.account-pages [hidden] { display: none !important; }
.account-pages :focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 3px; }
.account-pages main { padding-block: var(--ds-space-6) var(--ds-space-8); overflow-wrap: anywhere; }
.account-pages main > header { margin-bottom: var(--ds-space-6); border-top: 3px solid var(--ds-accent); }
.account-pages h1 { max-width: 18ch; font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: 1.12; }
.account-pages h2, .account-pages h3, .account-pages h4 { line-height: 1.3; overflow-wrap: anywhere; }
.account-pages h2 { margin-bottom: var(--ds-space-4); }
.account-pages h3, .account-pages h4 { font-family: var(--ds-font-display); }
.account-pages p { margin-block: var(--ds-space-3); }
.account-pages .ds-card p + p { margin-top: var(--ds-space-3); }
.account-pages main > section { margin-bottom: var(--ds-space-5); }
.account-pages .muted, .account-pages .hint, .account-pages .intro { color: var(--ds-text-muted); }
.account-pages .intro { max-width: 65ch; }
.account-pages code, .account-pages pre { font-family: var(--ds-font-mono); font-size: var(--ds-fs-sm); }
.account-pages code { overflow-wrap: anywhere; }
.account-pages pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-block: var(--ds-space-4); padding: var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); background: var(--ds-bg); }
.account-pages label { display: block; margin-block: var(--ds-space-4) var(--ds-space-2); }
.account-pages button, .account-pages input { max-width: 100%; }
.account-pages .button-full { width: 100%; }
.account-pages .button-danger { color: var(--ds-hot); background: var(--ds-surface); border-color: var(--ds-hot); }
.account-pages .error-message, .account-pages .is-error { color: var(--ds-hot); }
.account-pages .account-notice.is-success { color: var(--ds-ok); }
.account-pages .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Profile: player record first, technical account controls behind Advanced. */
.profile-sections { display: grid; gap: var(--ds-space-5); }
.profile-utilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-5); }
.profile-utilities > :first-child { grid-column: 1 / -1; }
.profile-advanced > summary { cursor: pointer; min-height: 44px; font: 700 var(--ds-fs-xl)/1.5 var(--ds-font-display); }
.profile-advanced[open] > summary { margin-bottom: var(--ds-space-5); }
.profile-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-5); }
.profile-metadata > section { min-width: 0; }
.profile-sections > * { min-width: 0; }
#bot-profiles { display: grid; gap: var(--ds-space-5); }
#bot-profiles > p:only-child { padding: var(--ds-space-5); border: 1px dashed var(--ds-line-strong); border-radius: var(--ds-radius-md); }
#bot-profiles article { min-width: 0; border-top: 1px solid var(--ds-line); padding-top: var(--ds-space-4); }
#bot-profiles article h3 { color: var(--ds-accent); }
#bot-profiles article > ul { padding-left: var(--ds-space-5); }
#bot-profiles article > .player-stat-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-3); padding: 0; list-style: none; }
.player-stat-tiles li { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface-2); }
.player-stat-tiles strong { font: 800 clamp(1.8rem, 4vw, 3rem)/1.2 var(--ds-font-display); color: var(--ds-accent); }
.player-stat-tiles span { color: var(--ds-text-muted); }
.owner-key-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-block: var(--ds-space-4); }
.owner-key-once { padding: var(--ds-space-4); border: 1px solid var(--ds-cyan); border-radius: var(--ds-radius-md); background: var(--ds-bg); }
.owner-key-once code { display: block; }
.metadata-settings { margin-block: var(--ds-space-5); }
.metadata-settings fieldset { display: grid; gap: var(--ds-space-2); min-width: 0; padding: var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); }
.metadata-settings legend { font-weight: 700; padding-inline: var(--ds-space-2); }
.metadata-settings input:not([type=checkbox]), .metadata-settings textarea { width: 100%; min-width: 0; min-height: 44px; padding: var(--ds-space-3); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm); color: var(--ds-text); background: var(--ds-bg); font: inherit; }
.metadata-settings textarea { min-height: 100px; resize: vertical; }
.metadata-settings input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--ds-accent); }
.metadata-settings button, #account-resend { min-height: 44px; padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-md); color: var(--ds-text); background: var(--ds-surface-2); font: inherit; cursor: pointer; }
.metadata-settings button { justify-self: start; }
.rating-chart-svg { display: block; width: 100%; max-width: 480px; height: auto; }
.rating-chart-line { stroke: var(--ds-cyan); stroke-width: 2; }
.rating-chart-dot { fill: var(--ds-cyan); }
/* Dialogs retain their existing account flows and identifiers. */
.account-pages .account-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: var(--ds-space-5); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-lg); color: var(--ds-text); background: var(--ds-surface); box-shadow: var(--ds-shadow-2); }
.account-pages .account-dialog::backdrop { background: var(--ds-bg); opacity: .85; }
.account-pages .dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--ds-space-3); }
.account-pages .dialog-heading > div { min-width: 0; }
.account-pages .dialog-heading h2 { margin: 0; }
.account-pages .icon-button { flex-shrink: 0; width: 44px; padding: 0; font-size: var(--ds-fs-xl); }
.account-pages .account-dialog button[type=submit] { margin-block: var(--ds-space-4); }
.account-pages .text-button { width: 100%; letter-spacing: 0; }
/* Help is a readable guide with quick jump links, not a dense console. */
.help-contents ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3) var(--ds-space-5); list-style: none; padding: 0; margin: 0; }
.help-contents a { display: inline-flex; align-items: center; min-height: 44px; }
.help-page main > nav { margin-bottom: var(--ds-space-5); }
.help-page section { scroll-margin-top: var(--ds-space-5); }
.help-page .ds-page-header { min-height: 13rem; }
.help-page .ds-page-header .ds-eyebrow { min-height: 1.4em; }
.help-page .ds-page-header .ds-display { min-height: 2em; }
.help-page .ds-page-header .ds-lede { min-height: 3em; }
.help-page > main > p[data-i18n] { min-height: 7rem; }
.help-page article + article { border-top: 1px solid var(--ds-line); margin-top: var(--ds-space-5); padding-top: var(--ds-space-5); }
.help-page .faq dt { font-weight: 700; margin-top: var(--ds-space-4); color: var(--ds-cyan); }
.help-page .faq dd { margin: var(--ds-space-2) 0; color: var(--ds-text-muted); }
.help-protocol h2, .help-protocol h3 { margin-top: var(--ds-space-6); }
.help-protocol .table-scroll { max-width: 100%; }
.help-protocol table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.help-protocol th, .help-protocol td { padding: var(--ds-space-2); border: 1px solid var(--ds-line-strong); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
/* Password recovery (Operate): a tight column, a small title, one pink action. Tokens only; the shell supplies the nav. */
.reset-page { margin: 0; }
.reset-page main { padding-block: var(--ds-space-6) var(--ds-space-8); }
.reset-page .reset-shell > * { max-width: 38rem; }
.reset-page h1 { max-width: none; margin: 0; padding-block: .1em; font-size: var(--ds-fs-xl); line-height: 1; }
.reset-page .ds-lede { margin-top: var(--ds-space-3); font-size: var(--ds-fs-md); }
.reset-page form.ds-card { margin-top: var(--ds-space-5); padding: var(--ds-space-5) 0 0; }
.reset-page .ds-label { display: block; margin: var(--ds-space-4) 0 var(--ds-space-2); }
.reset-page .ds-label:first-child { margin-top: 0; }
.reset-page .ds-hint { margin: var(--ds-space-2) 0 0; }
.reset-page .ds-btn-primary { width: 100%; margin-top: var(--ds-space-5); }
.reset-page .reset-status { min-height: 1.5rem; margin: var(--ds-space-4) 0 0; color: var(--ds-text-muted); }
.reset-page .reset-status.is-error { color: var(--ds-hot); }
.reset-page .reset-links { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); margin-top: var(--ds-space-5); }
.reset-page [hidden] { display: none !important; }
@media (max-width: 800px) {
  .profile-utilities, .profile-metadata { grid-template-columns: 1fr; }
  #bot-profiles article > .player-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .player-stat-tiles li:first-child { grid-column: 1 / -1; }
  .help-contents ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .account-pages .ds-card, .account-pages .ds-empty { padding: var(--ds-space-4); }
  .help-contents ul { grid-template-columns: 1fr; }
  .help-protocol th, .help-protocol td { padding: var(--ds-space-1); font-size: var(--ds-fs-xs); }
}
@media (max-width: 620px) {
  .help-page .ds-page-header { min-height: 18rem; }
  .help-page .ds-page-header .ds-display { min-height: 2.2em; }
  .help-page .ds-page-header .ds-lede { min-height: 4.5em; }
  .help-page > main > p[data-i18n] { min-height: 19rem; }
}
/* Lobby style (#1109): dark scene (body.ds-scene-page), pink call to action, open sections instead of boxed panels. */
.account-pages { color: var(--game-text); }
.account-pages main > header { border-top: 0; }
.account-pages :is(.muted, .hint, .intro) { color: var(--game-muted); }
.account-pages :is(.ds-btn-primary, .button-primary) { border: 0; border-radius: var(--ds-radius-lg); color: var(--ds-cta-ink); background: var(--ds-cta); font-weight: 900; letter-spacing: .14em; box-shadow: var(--ds-glow-cta); }
.account-pages :is(.ds-btn-primary, .button-primary):hover:not(:disabled) { background: var(--ds-cta-hover); }
.account-pages :is(.ds-btn-primary, .button-primary):focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 3px; }
.account-pages :is(a:not(.button, .ds-btn, .site-nav a), .text-button, .back-link) { color: var(--game-cyan); }
.account-pages :is(a:not(.button, .ds-btn, .site-nav a), .text-button, .back-link):hover { color: var(--game-text); }
.account-pages :is(input:not([type=checkbox]), select, textarea) { border: 1px solid var(--game-line); border-radius: var(--ds-radius-md); color: var(--game-text); background: var(--ds-scene-scrim); }
.account-pages :is(input, select, textarea):focus-visible { outline: none; border-color: var(--game-cyan); box-shadow: var(--ds-focus); }
.account-pages :is(.panel, .ds-card) { border: 0; border-top: 1px solid var(--game-line); border-radius: 0; background: none; box-shadow: none; }
.account-pages :is(.panel, .ds-card) :is(h2, h3) { font-family: var(--ds-font-display); text-transform: uppercase; letter-spacing: .03em; }
.account-pages .profile-advanced { padding-top: var(--ds-space-4); }
.account-pages .player-stat-tiles li { border: 1px solid var(--ds-line-strong); border-radius: 0; background: color-mix(in srgb, var(--ds-cyan) 5%, var(--ds-surface)); }
.account-pages .player-stat-tiles strong, .account-pages #bot-profiles article h3 { color: var(--game-cyan); }
.account-pages #bot-profiles article, .account-pages.help-page article + article { border-top-color: var(--game-line); }
.account-pages .account-dialog { border: 1px solid var(--game-line); border-radius: var(--ds-radius-md); background: var(--game-glass); }
.account-pages .account-dialog::backdrop { background: var(--ds-scene-scrim); opacity: 1; }
.account-pages .button-danger { border-color: var(--game-pink); color: var(--game-pink); background: transparent; }
.account-pages :is(.error-message, .is-error) { color: var(--game-pink); }
.account-pages pre, .account-pages .owner-key-once { border-color: var(--game-line); background: var(--ds-scene-scrim); }
.help-page .faq dt { color: var(--game-cyan); }
.help-page .faq dd { color: var(--game-muted); }
.help-protocol th, .help-protocol td { border-color: var(--game-line); }
.help-protocol th { background: transparent; color: var(--game-muted); }
.help-reference > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.help-reference > section.ds-card { margin-top: var(--ds-space-5); }
.help-first-game ol { margin: 0; padding-left: var(--ds-space-5); }
.help-first-game a { display: inline-flex; align-items: center; min-height: 44px; }

/* Sign-in dialog: pink primary, cyan focus ring, tokens only. account-bar.js links this sheet whenever the page has the dialog,
   so the rules are not scoped to .account-pages and use dialog.account-dialog to outrank the legacy player.css dialog. */
dialog.account-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--ds-space-5); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-lg); color: var(--ds-text); background: var(--ds-surface); box-shadow: var(--ds-shadow-2); }
dialog.account-dialog::backdrop { background: var(--ds-scene-scrim); backdrop-filter: none; }
dialog.account-dialog form { padding: 0; }
dialog.account-dialog .dialog-heading h2 { margin: 0; font: 800 var(--ds-fs-xl)/1 var(--ds-font-display); letter-spacing: .01em; text-transform: uppercase; }
dialog.account-dialog .ds-hint, dialog.account-dialog .account-notice { margin: var(--ds-space-3) 0 0; color: var(--ds-text-muted); font-size: var(--ds-fs-sm); }
dialog.account-dialog .account-notice.is-success { color: var(--ds-ok); }
dialog.account-dialog label { display: block; margin: var(--ds-space-4) 0 var(--ds-space-2); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: 600; }
dialog.account-dialog label select { display: block; margin-top: var(--ds-space-2); }
dialog.account-dialog input, dialog.account-dialog select { width: 100%; min-height: 48px; padding: var(--ds-space-2) var(--ds-space-4); border: 2px solid var(--ds-control-line); border-radius: 0; color: var(--ds-text); background: var(--ds-bg); font: inherit; }
dialog.account-dialog :is(input, select):focus, dialog.account-dialog :is(input, select):focus-visible { border-color: var(--ds-cyan); outline: 3px solid var(--ds-cyan); outline-offset: 2px; box-shadow: none; }
dialog.account-dialog .error-message { min-height: 1.5rem; margin: var(--ds-space-3) 0 0; color: var(--ds-hot); }
dialog.account-dialog #account-submit { width: 100%; margin-block: var(--ds-space-4) var(--ds-space-2); }
dialog.account-dialog .text-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; color: var(--ds-cyan); background: transparent; font: 600 var(--ds-fs-sm)/1.2 var(--ds-font); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
dialog.account-dialog .text-button:hover { color: var(--ds-text); }
dialog.account-dialog .text-button:focus-visible, dialog.account-dialog .icon-button:focus-visible, dialog.account-dialog #account-resend:focus-visible { outline: 3px solid var(--ds-cyan); outline-offset: 2px; box-shadow: none; }
dialog.account-dialog .account-access-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--ds-space-2); }
dialog.account-dialog .account-access-link[hidden] { display: none; }