/* MeshWars: styles for the /account page (frontend/account.js).
   Loaded alongside theme.css + landing.css (frontend/account.html) --
   landing.css already supplies the page-wide html/body rules and the
   shared .mw-nav block, so this file only carries what's specific to
   this one page. */

/* This page has a lot of dynamically shown/hidden elements (account.js
   toggles .hidden throughout), and several of the classes below set
   their own `display` (block/flex/grid) at the same specificity the
   browser's own default `[hidden] { display: none }` uses -- an
   author rule beats a user-agent default regardless of specificity, so
   without this, an element with both a class that sets display AND the
   hidden attribute stays visible. Same fix admin.css's own [hidden]
   rule applies, blanket here rather than per-selector (join.css's own
   approach) because this page has too many such elements to track
   individually and getting even one wrong is a visible bug, not a
   cosmetic one. */
[hidden] { display: none !important; }

/* Widened to match rules.css's own .rules-wrap -- this page now carries
   the same contents-rail-plus-search layout /docs and /rules use
   (rules.css's .rules-layout/.rules-toc, loaded here alongside this
   file), and a 210px rail plus a reading column need more room than
   the single narrow column this page used to be. The two states that
   are NOT that two-column layout -- the loading hint and the signed-out
   sign-in panel, both direct children of this wrap -- get their own
   narrower measure below instead of stretching full width. */
.account-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--mw-nav-h) + 24px) 16px 64px;
}

#account-loading,
#account-signed-out {
  max-width: 640px;
  margin: 0 auto;
}

/* The reading column next to the rail (rules.css's .rules-toc is the
   other .rules-layout child). Deliberately NOT .rules-body -- that
   class carries rules.css's own heading/paragraph sizing tuned for
   running prose, which this page's mix of hints, tables and forms
   doesn't need verbatim. What it DOES now share with .rules-body,
   restyled below rather than reused wholesale: no boxed cards (Matt
   does not want bordered, rounded-corner panels for plain content),
   and every heading -- .account-group-title at h2, .account-title at
   h3 -- carrying the same gold-rule-under-a-gold-heading treatment
   rules.css's own h2/h3 use. */
.account-body { max-width: 100%; }

.account-hint {
  font-size: 0.8125rem;
  color: var(--mw-text-5);
  margin: 4px 0 0;
}

/* No box any more -- Matt does not want bordered, rounded-corner cards
   around plain content. Used to carry its own background/border/radius;
   now it's spacing only, and the section reads as prose under its own
   heading (.account-title, below) the same way a run of <h3> subsections
   inside one rules.css <section> does. The heading's own margin-top
   supplies the gap above each panel's content, so there is nothing left
   for this rule to do except stop one panel's content from crowding the
   next heading. */
.account-panel {
  margin-bottom: 4px;
}

/* A panel's own title -- one level below .account-group-title, both
   now styled like rules.css's h2/h3 (gold heading, no box) rather than
   the small uppercase label this used to be. Was a plain <div> until
   this page grew the same contents rail /docs and /rules use (see
   .account-wrap's own comment): the rail needs a real heading with an
   id to link to, so every one of these is now an <h3> inside a group
   (every panel below Player), id'd in account.html -- the Player
   heading itself is an <h2> and uses .account-group-title instead, the
   same class every other top-level group heading ("Radios &
   troubleshooting", "Play", "Security") already carries, so all four
   rail-level headings share one look. (/account has no search box of
   its own -- Matt: it's your own settings, not something to search --
   but the rail's need for a real id'd heading predates and is
   independent of that.) */
.account-title {
  margin: 28px 0 8px;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mw-gold);
}

.account-error {
  background: #2a1414;
  border: 1px solid #663333;
  color: #f08080;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.75rem;
  margin: 10px 0;
}

/* A completed pending-identity link (frontend/account.js's own
   maybeCompletePendingLink()) -- confirms once, in place, at the top of
   the signed-in view, rather than leaving the connection implicit in
   the identities list below it. Same green "everything's fine" tint
   join.css's .status-diagnosis-ok uses for the same kind of message. */
.account-banner {
  background: #16240f;
  border: 1px solid var(--mw-friendly);
  color: #b8e0a0;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* The non-dismissible "set a password" onboarding prompt
   (frontend/account.js's renderOwesPasswordBanner(), gated on GET
   /api/account's owes_password). Deliberately gold/accent-toned, not
   the red .account-error or .account-warning-box treatment used
   elsewhere on this page -- this isn't reporting that something went
   wrong, it's a required next step, the same "important, not an
   error" register --mw-accent-wash/-line already carries for a
   currently-selected control (see theme.css's own comments on those
   two variables). This is the one place on the page that still keeps
   a bordered box on purpose -- a required onboarding step, not a plain
   content section, so it reads as "at the top for a reason" next to
   the unboxed panels below it -- and
   there is deliberately no close/dismiss control anywhere in this
   rule or the markup it styles (frontend/account.html). The relocated
   #account-password-form (see account.js's own comment on the move)
   inherits .account-password-form's own layout unchanged; only the
   spacing above it here is this rule's concern. */
.account-owes-password-banner {
  background: var(--mw-accent-wash);
  border: 2px solid var(--mw-accent-wash-line);
  border-left: 4px solid var(--mw-accent);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.account-owes-password-title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--mw-accent);
  margin-bottom: 6px;
}
.account-owes-password-copy p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mw-text-5);
  margin: 0 0 12px;
}
/* The relocated form sits directly in the banner once it's owed --
   .account-password-form's own margin-top (below) is right for its
   normal spot just under a hint paragraph in the Security panel, but
   reads as too much extra air stacked under the copy paragraph above,
   which already carries its own margin-bottom. */
.account-owes-password-banner .account-password-form {
  margin-top: 0;
}

/* The "check your email" status line under the magic-link button --
   everything else this sign-in card needs now lives in
   frontend/signin.css (shared with join.css/link.css, see that
   file's own header), but this rule's colour differs on link.css
   (a different --mw-text-* step), so it stays local rather than
   forcing all three pages to the same shade. */
.signin-email-sent {
  font-size: 0.6875rem;
  color: var(--mw-text-6);
  margin: 8px 0 0;
}

/* ---- Password sign-in (POST /auth/password/start) ------------------------
   A SECOND action on the same #account-signin-email-form as the
   magic-link button above it, sharing that form's one email field --
   see account.html's own comment on #account-signin-password-group for
   why this isn't a separate form. Same shape join.css defines for its
   own #signin-password-group -- link.css has no equivalent (link.html
   never offers password sign-in, see link.js's own comment), so this
   isn't a three-way match like frontend/signin.css's rules and stays
   local to the two pages that need it. */
.signin-password-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mw-line);
}
.signin-password-group label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.75rem;
  color: var(--mw-text-5);
}
.signin-password-group label > span {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}

/* ---- Sign-in methods list -------------------------------------------- */

.account-identities {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.account-identities-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
}

.account-identity-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-identity-item:last-child { margin-bottom: 0; }

.account-identity-name {
  font-size: 0.875rem;
  color: var(--mw-text-1);
}

.account-identity-detail {
  font-size: 0.6875rem;
  color: var(--mw-text-6);
  margin-top: 2px;
}

/* ---- Player -------------------------------------------------------- */

.account-player-line {
  font-size: 0.875rem;
  color: var(--mw-text-1);
  margin: 4px 0;
}

.account-field {
  display: block;
  margin: 12px 0 10px;
  font-size: 0.75rem;
  color: var(--mw-text-5);
}
.account-field > span {
  display: block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}
.account-field input {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}
.account-field input:focus {
  outline: none;
  border-color: var(--mw-accent);
}

/* Structural, not an allowlist. This was a hand-maintained list of ids,
   so every standalone button added to a panel since then has rendered as
   an unstyled native control: "Delete my account", "Rotate key" and
   "Disable two-factor authentication" were all bare. They only looked
   fine in passing because their panels are hidden in most account
   states. Matching a panel's own direct-child button means the next one
   added is styled by construction rather than by remembering to come
   back here. :not([class]) is the whole rule: a standalone button is one
   nobody gave a class to, at whatever depth it sits, and anything with a
   class of its own (.account-link-btn, .account-wizard-choice-btn) opts
   out and keeps its treatment. A child combinator was tried first and
   was too narrow -- it missed the two-factor disable button, which sits
   inside a state wrapper rather than directly in the panel. */
.account-connect-form button,
.account-panel button:not([class]) {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-connect-form button:hover,
.account-panel button:not([class]):hover { background: var(--mw-line); }
.account-connect-form button:disabled,
.account-panel button:not([class]):disabled { opacity: 0.5; cursor: default; }

/* ---- Player: sign-up wizard (#account-wizard, account.js's
   showWizardStep()) --------------------------------------------------
   One step visible at a time -- see account.html's own comment on
   #account-wizard for why. Deliberately no card/box treatment, same as
   every other panel on this page: a step is just its heading
   (.account-title, reused) plus whatever field it holds, spaced the
   same as the rest of the page. This block only adds the bits that are
   new -- the required-field marker, the progress line, the fork's two
   choice buttons, and the back/continue action row. */
.account-required-mark {
  display: inline;
  margin-left: 6px;
  color: var(--mw-hostile);
  font-weight: 700;
}
.account-wizard-progress {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mw-text-6);
}
/* Team step's heading is a <legend>, not an <h3> -- browsers give
   legend its own UA padding/border that .account-title never accounts
   for, so it's zeroed out here rather than baking a legend-specific
   exception into .account-title itself. */
.account-wizard-team-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.account-wizard-team-fieldset legend.account-title {
  padding: 0;
}
.account-wizard-fork-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.account-wizard-choice-btn {
  flex: 1 1 200px;
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}
.account-wizard-choice-btn:hover { background: var(--mw-line); }
.account-wizard-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
/* .account-connect-form button (above) outranks a plain .account-link-btn
   on specificity alone, since every Back button here sits inside a
   .account-connect-form -- without this, Back would render as a solid
   button instead of the plain text link every Cancel control elsewhere
   on this page uses. */
.account-wizard-actions button.account-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-weight: 400;
}

/* The route back in once the dialog below has been dismissed --
   #account-player-unlinked's own button, reusing the fork step's own
   choice-button look. Sits under a one-line hint with no action row of
   its own to inherit spacing from, so it gets a small margin here
   rather than none at all. */
#account-wizard-open-btn {
  margin-top: 12px;
}

/* ---- Player: sign-up wizard dialog (#account-wizard-dialog) --------------
   #account-wizard above is unchanged by this -- it's still exactly the
   same one-step-at-a-time, unboxed-within-itself flow. What's new is
   the <dialog> it now lives inside (account.js's openWizardDialog()/
   closeWizardDialog(), native showModal()/close()) -- the one place on
   this page Matt actually asked for a contained, boxed treatment ("it
   should be a modal pop up kind of thing"), rather than the
   deliberately unboxed panels .account-panel carries everywhere else.
   Still restrained, not a new look: the same dark surface, border and
   radius this site's other modals already use (frontend/mc.css's
   .mc-modal-inner). */
.account-wizard-dialog {
  box-sizing: border-box;
  background: var(--mw-panel);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line-strong);
  border-radius: 8px;
  padding: 6px 28px 28px;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.account-wizard-dialog * { box-sizing: border-box; }
/* showModal()'s own background inerting already stops the rest of the
   page being interacted with while this is open -- this is purely the
   visual cue that it's inert, dimmed the same as this site's other
   modals (.mc-modal's own rgba backdrop). */
.account-wizard-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
/* A plain right-aligned row for the close control, above every step's
   own heading -- not overlaid on top of the content the way a
   position:absolute corner button would be, which risks colliding with
   whichever step's own heading or hint happens to be showing. */
.account-wizard-dialog-header {
  display: flex;
  justify-content: flex-end;
}
.account-wizard-dialog-close {
  background: none;
  border: none;
  color: var(--mw-text-5);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}
.account-wizard-dialog-close:hover { color: var(--mw-text-1); }

/* ---- Sessions -------------------------------------------------------- */

.account-sessions {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.account-sessions-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
}

.account-session-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-session-item:last-child { margin-bottom: 0; }

.account-session-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}

.account-session-current-tag {
  display: inline-block;
  background: var(--mw-accent-wash);
  color: var(--mw-accent);
  border: 1px solid var(--mw-accent-wash-line);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-session-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* ---- Group headings ---------------------------------------------------
   One level above .account-title: groups a run of .account-panel
   sections under a single label ("Player", "Radios & troubleshooting",
   "Play", "Security", "Admin") so the page reads as a small number of
   clear areas instead of one long undifferentiated list of panels. Admin
   is the one of the five that isn't always there -- #account-admin-group
   (account.html) sits hidden for an account with no role, so its own
   h2 never renders at all in that case, same as Radios &
   troubleshooting / Play for an account with no linked player. These are
   this page's h2s -- the same rail-level heading rules.css's own
   .rules-body h2 carries (gold-light, 2px gold rule underneath), so
   the same look applies whether the heading is reached by scrolling
   /rules or /account. Bigger than .account-title on purpose -- a panel
   title labels what's inside one h3 subsection; this labels a run of
   several. */
.account-group-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--mw-gold-light);
  margin: 40px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mw-gold);
}
/* Player is the very first thing on the page, so it doesn't want the
   extra top margin every later group heading uses to separate itself
   from the group before it. Targeted by id rather than :first-of-type:
   these five headings sit at four different nesting depths (Player
   inside its own <section>; Radios/Play inside #account-player-groups;
   Security a direct child of .account-body; Admin inside
   #account-admin-group), so :first-of-type -- which only ever looks at
   siblings under the SAME parent -- would also zero out Radios,
   Security and Admin, which is not what this is for. */
#player.account-group-title {
  margin-top: 0;
}

.account-group-note {
  margin-bottom: 16px;
}

.account-panel-subtitle {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--mw-text-3);
  margin: 12px 0 4px;
}
.account-panel-subtitle:first-child {
  margin-top: 0;
}

.account-divider {
  border: none;
  border-top: 1px solid var(--mw-raised);
  margin: 16px 0 12px;
}

.account-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.account-link-btn {
  background: none;
  border: none;
  color: var(--mw-accent);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* A clear-box warning, distinct from a plain error line -- used for the
   team-switch confirmation and the rotate-key confirmation/result, same
   visual language join.css's own .join-warning-box uses on the join
   page for the same purpose (stop the eye, don't blend into the
   surrounding paragraphs). */
.account-warning-box {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #f0c0a8;
}
.account-warning-box strong {
  display: block;
  color: #ffb088;
  margin-bottom: 2px;
}
/* The one truly unrecoverable moment on this page -- once a rotated key
   is gone, it is gone. Same sizing bump join.css's own .key-warning-box
   applies for the identical case on the join page. */
.account-warning-box-strong {
  border-width: 2px;
  padding: 12px 14px;
  font-size: 0.8125rem;
}
.account-warning-box-strong strong {
  font-size: 0.9375rem;
}

.account-confirm-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.account-confirm-actions button:first-child {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-confirm-actions button:first-child:hover { background: var(--mw-line); }
.account-confirm-actions button:first-child:disabled { opacity: 0.5; cursor: default; }

/* A one-time value (a rotated API key) -- readonly input plus a Copy
   button, same shape join.css's own .copy-row uses on the join page. */
.account-copy-row {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}
.account-copy-row input {
  flex: 1;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-width: 0;
}
.account-copy-row button {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.account-copy-row button:hover { background: var(--mw-line); }

/* Every plain-button action across the sections below shares this one
   look, same as the connect/logout buttons above already do. */
.account-add-radio-form button,
#account-status-check-btn,
#account-checkin-health-btn,
#account-checkin-confirm-start-btn,
.account-checkin-confirm-btn,
#account-team-switch-btn,
#account-rotate-key-btn,
.account-password-actions button,
#account-contact-email-submit {
  background: var(--mw-raised);
  color: var(--mw-accent);
  border: 1px solid var(--mw-line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-add-radio-form button:hover,
#account-status-check-btn:hover,
#account-checkin-health-btn:hover,
#account-checkin-confirm-start-btn:hover,
.account-checkin-confirm-btn:hover,
#account-team-switch-btn:hover,
#account-rotate-key-btn:hover,
.account-password-actions button:hover,
#account-contact-email-submit:hover { background: var(--mw-line); }
.account-add-radio-form button:disabled,
#account-status-check-btn:disabled,
#account-checkin-health-btn:disabled,
#account-checkin-confirm-start-btn:disabled,
.account-checkin-confirm-btn:disabled,
#account-team-switch-btn:disabled,
#account-rotate-key-btn:disabled,
.account-password-actions button:disabled,
#account-contact-email-submit:disabled { opacity: 0.5; cursor: default; }

/* ---- My radios --------------------------------------------------------
   Same rhythm join.css's own .radios-list/.radios-item give the
   identical list on the join page's setup-check panel. */
.account-radios-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.account-radios-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
  margin: 0 0 12px;
}
.account-radios-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.account-radios-item span:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.account-radios-item-detail {
  color: var(--mw-text-6);
  font-size: 0.6875rem;
  margin-right: auto;
  padding-left: 10px;
}
.account-radios-item button {
  background: #2a1414;
  color: #f08080;
  border: 1px solid #663333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.account-radios-item button:hover { background: #3a1a1a; }
.account-radios-item button:disabled { opacity: 0.5; cursor: default; }

.account-add-radio-row {
  display: flex;
  gap: 10px;
}
.account-field-compact { flex: 0 0 140px; }
.account-field-grow { flex: 1; }
/* Shared with #account-join-form's own protocol select (the Player
   panel's "Join MeshWars" flow, #account-player-unlinked in
   account.html) -- same field, same styling need, no reason for a
   second copy of this rule. */
.account-add-radio-form select,
#account-join-form select {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}

/* ---- Troubleshooting / check-in health diagnosis ----------------------
   Same visual language join.css's own .status-diagnosis-ok/-attention
   use for the identical /api/mc/status diagnosis on the join page --
   real prominence (its own bordered block, larger text) rather than
   reading as just another line of copy. */
.account-diagnosis {
  border-radius: 6px;
  padding: 12px 14px;
  margin: 4px 0 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 600;
}
.account-diagnosis-ok {
  background: #16240f;
  border: 1px solid var(--mw-friendly);
  color: #b8e0a0;
}
.account-diagnosis-attention {
  background: var(--mw-accent-deep);
  border: 1px solid var(--mw-hostile);
  color: #f0c0a8;
}

.account-status-result,
.account-checkin-health-result {
  margin-top: 4px;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin: 6px 0 4px;
}
.account-table th,
.account-table td {
  border: 1px solid var(--mw-line);
  padding: 5px 8px;
  text-align: left;
  color: var(--mw-text-2);
}
.account-table thead th {
  color: var(--mw-text-6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.625rem;
  font-weight: 700;
}
.account-table td { text-align: center; }

/* ---- Why my check-ins may not be counting ------------------------------ */
.account-contacts-list {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
}
.account-contacts-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-contacts-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
}
.account-contact-status {
  display: inline-block;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.account-contact-status-ok {
  background: var(--mw-accent-wash);
  color: #b8e0a0;
  border: 1px solid var(--mw-friendly);
}
.account-contact-status-attention {
  background: var(--mw-accent-deep);
  color: #f0c0a8;
  border: 1px solid var(--mw-hostile);
}
/* ---- Confirm my node -------------------------------------------------------
   Replaces the old typed fallback-name form's ".account-checkin-name-*"
   rules (removed) -- .account-checkin-confirm-form keeps that same
   idle-state layout (a growing label next to a submit button), but
   everything past submission (waiting/candidates found/bound/expired)
   is rendered by account.js into .account-checkin-confirm-result, same
   "one result well, fully re-drawn per state" pattern
   .account-status-result / .account-checkin-health-result already use
   above -- so it needs no state-specific hidden/shown rules of its own.

   One form covering both protocols now (see frontend/account.html's
   own comment on this section for why): .account-checkin-confirm-form
   stacks its two rows vertically -- the "Radio type" dropdown first,
   on its own line, so that choice reads as made BEFORE the fields
   below it react to it -- and .account-checkin-confirm-fields-row
   carries the growing-label-next-to-button layout the single row used
   to have, unchanged in look, just demoted to an inner row rather than
   the whole form. account.js toggles #account-checkin-confirm-name-
   field's `hidden` property (never inline display -- see this file's
   own [hidden] rule near the top of this file) when Meshtastic is
   selected, since that
   protocol needs no typed name at all. */
.account-checkin-confirm-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.account-checkin-confirm-protocol-field {
  max-width: 220px;
}
.account-checkin-confirm-protocol-field select {
  width: 100%;
  background: var(--mw-page);
  color: var(--mw-text-1);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.875rem;
}
.account-checkin-confirm-fields-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.account-checkin-confirm-result {
  margin-top: 10px;
}
.account-checkin-confirm-countdown {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mw-accent);
  margin: 8px 0;
}
/* The issued Meshtastic broadcast code -- reuses .account-copy-row's
   input+Copy-button look (the API-key/join-link pattern this page
   already uses elsewhere) so it reads as something to copy, not just
   to read, and is sized up from that shared style's default since this
   is the one thing on the page a player has to get exactly right by
   eye or by paste. */
.account-checkin-confirm-code-row input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.account-checkin-candidates-list {
  list-style: none;
  margin: 8px 0 12px;
  padding: 0;
}
.account-checkin-candidate-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-checkin-candidate-item:last-child { margin-bottom: 0; }
.account-checkin-candidate-item button { margin-top: 6px; }
.account-checkin-candidate-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--mw-text-1);
  font-weight: 600;
}
/* The one candidate that can't be picked -- deliberately flat rather
   than sharing .account-checkin-confirm-btn's accent-bordered look, so
   it never reads as an available action even before a viewer notices
   the disabled cursor. */
.account-checkin-candidate-claimed {
  background: var(--mw-page);
  color: var(--mw-text-6);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  cursor: default;
}
/* The candidate that's already the caller's OWN radio -- neither an
   available pick (.account-checkin-confirm-btn) nor someone else's
   (.account-checkin-candidate-claimed above): stays clickable (accept
   already treats re-confirming your own radio as a no-op success), so
   it keeps the pointer cursor and a friendly border rather than the
   claimed style's flat, disabled look. */
.account-checkin-candidate-mine {
  background: var(--mw-page);
  color: var(--mw-friendly);
  border: 1px solid var(--mw-friendly);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}
.account-checkin-candidate-mine:hover { background: var(--mw-line); }

/* ---- My stats ------------------------------------------------------------ */
.account-stats-card {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.account-stats-card:last-child { margin-bottom: 0; }
.account-stats-dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin: 0;
}
.account-stats-dl dt {
  color: var(--mw-text-5);
  font-size: 0.75rem;
}
.account-stats-dl dd {
  margin: 0;
  color: var(--mw-text-1);
  font-size: 0.8125rem;
  text-align: right;
  font-weight: 600;
}

/* ---- My team -------------------------------------------------------------- */
.account-team-picker-wrap { margin-top: 10px; }
.account-team-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.account-team-swatch {
  --swatch-color: var(--mw-accent);
  background: var(--mw-page);
  color: var(--swatch-color);
  border: 1px solid var(--swatch-color);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.account-team-swatch:hover { background: var(--mw-raised); }
.account-team-swatch.active { background: var(--swatch-color); color: #0a0a0a; }
.account-team-swatch:disabled { opacity: 0.4; cursor: default; }
.account-team-confirm { margin-top: 10px; }

/* The join wizard's team picker (#account-join-team-picker) sits inside
   <form class="account-connect-form"> (the wizard steps this appears
   in are all one form -- see account.html's own comment on
   #account-wizard). `.account-connect-form button` (specificity 0,1,1)
   and `.account-connect-form button:hover` (0,2,1) both outrank the
   plain `.account-team-swatch`/`:hover`/`.active`/`:disabled` rules
   above (0,1,0 / 0,2,0 / 0,2,0 / 0,2,0) -- every swatch rendered flat
   grey instead of its team colour, and clicking one showed no
   selected state at all for as long as the pointer stayed put,
   because the generic hover rule beat .active outright. These re-
   declare the exact same four rules one selector level more specific
   (scoped through .account-team-picker, the swatches' own wrapper) so
   they win regardless of which form a picker happens to sit inside,
   without an !important arms race against .account-connect-form's own
   rules -- and without affecting the OTHER #account-team-picker (My
   team > Switch team), which never had this collision (not nested in
   any .account-connect-form) and reads identically either way since
   these declarations match its base rules exactly. Order preserved
   from above: hover, then active, then disabled, so an equal-specificity
   collision between THESE three still resolves the same way. */
.account-team-picker .account-team-swatch {
  background: var(--mw-page);
  color: var(--swatch-color);
  border: 1px solid var(--swatch-color);
}
.account-team-picker .account-team-swatch:hover { background: var(--mw-raised); }
.account-team-picker .account-team-swatch.active { background: var(--swatch-color); color: #0a0a0a; }
.account-team-picker .account-team-swatch:disabled { opacity: 0.4; cursor: default; }

/* ---- My check-in history / honors ---------------------------------------- */
.account-honors-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.account-honors-empty {
  list-style: none;
  color: var(--mw-text-6);
  font-size: 0.8125rem;
}
.account-honors-item {
  background: var(--mw-page);
  border: 1px solid var(--mw-line);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.account-honors-item:last-child { margin-bottom: 0; }

/* ---- Sign-in methods: disconnect + last-door note ------------------------- */
.account-identity-disconnect-btn {
  margin-top: 6px;
  background: #2a1414;
  color: #f08080;
  border: 1px solid #663333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}
.account-identity-disconnect-btn:hover { background: #3a1a1a; }
.account-identity-disconnect-btn:disabled { opacity: 0.5; cursor: default; }
.account-identity-lastdoor {
  color: #f0c0a8;
}

/* ---- Password / contact email --------------------------------------------- */
.account-password-form,
.account-contact-email-form {
  margin-top: 6px;
}
.account-password-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.account-contact-email-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- API key --------------------------------------------------------------- */
.account-rotate-key-confirm { margin-top: 10px; }
.account-rotate-key-result { margin-top: 10px; }

/* The wizard moves focus to each step's heading so a screen reader
   announces where you have landed. Those headings carry tabindex="-1",
   which makes them focusable by script but never by Tab -- and the UA
   then paints its default focus ring around them, which on this dark
   ground renders as a hairline box and reads as an empty text input
   sitting above the buttons. Suppressing it costs no keyboard
   affordance, because tabindex="-1" already means no keyboard user can
   reach these by tabbing; every genuinely focusable control in the
   dialog keeps its own :focus-visible ring. */
.account-wizard-dialog [tabindex="-1"]:focus {
  outline: none;
}

/* Links inside hint text. Without this they fall through to the UA
   default, which is #0000EE -- and it showed: the "Docs page" link in
   the wizard's key-reveal step was the only anchor on the whole account
   page rendering in browser blue, against a gold-linked site. Scoped to
   .account-hint so it covers a hint wherever it appears (the wizard
   dialog, the owed-password banner, the Security panel) rather than
   restyling every anchor on the page, several of which are buttons in
   link clothing and already carry their own colour. */
.account-hint a {
  color: var(--mw-gold);
  text-decoration: underline;
}

.account-hint a:hover {
  color: var(--mw-gold-light);
}