:root { --account-ink: #14243a; --account-gold: #b58b23; --account-paper: #fffdf7; }
.web-account-page { min-height: 100vh; background: linear-gradient(180deg, #f7f1e4 0, #fff 32rem); color: var(--account-ink); }
.web-account-main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 6vw, 5rem) 0; }
.web-account-closed { width: min(700px, 100%); margin: 8vh auto; padding: clamp(1.5rem, 4vw, 3rem); background: rgba(255,255,255,.94); border: 1px solid rgba(181,139,35,.35); border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(10,28,50,.12); text-align: center; }
.web-account-closed h1 { color: #0b1d35; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.4rem); }
.web-account-shell { background: var(--account-paper); border: 1px solid rgba(181,139,35,.35); border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(10,28,50,.12); overflow: hidden; }
.app-account-shell { min-height: 36rem; }
.app-account-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.5rem; color: #fff; background: #0b1d35; }
.app-account-kicker { margin: 0; color: #f1cf69; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.app-account-role { display: flex; flex-wrap: wrap; gap: .45rem; margin: .45rem 0 0; }
.app-account-role-badge, .account-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .65rem; font-size: .82rem; font-weight: 700; background: #eee6d2; }
.app-account-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; min-height: 32rem; }
.app-account-navigation { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; background: #f3ead7; border-right: 1px solid #dfd1b2; }
.account-nav-button, .account-button, .account-link-button, .app-account-auth-button, .app-account-create-button, .app-display-name-button, .app-leaderboard-opt-in-button { min-height: 2.75rem; border-radius: .55rem; padding: .65rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.account-nav-button, .account-button, .app-account-auth-button, .app-account-create-button, .app-display-name-button, .app-leaderboard-opt-in-button { border: 1px solid #b58b23; }
.account-nav-button { text-align: left; background: transparent; color: #14243a; }
.account-nav-button[aria-current="page"] { background: #0b1d35; color: #fff; }
.account-button-primary, .app-account-auth-button, .app-account-create-button { background: #0b1d35; color: #fff; }
.account-button-secondary { background: #fff; color: #0b1d35; }
.account-link-button { width: fit-content; border: 0; background: transparent; color: #153e6b; padding-inline: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.app-account-content { padding: clamp(1rem, 3vw, 2rem); outline: none; }
/* Signed-out states have no section navigation, so the rail collapses and the
   pane -- sign-in, email code, recovery, reset, creation, check-your-email --
   sits centred in the shell instead of beside a blank cream column. The width
   matches the widest of those forms so nothing narrows or reflows. */
.app-account-navigation[hidden] { display: none; }
.app-account-layout-single { grid-template-columns: minmax(0, 1fr); }
.app-account-layout-single .app-account-content { width: 100%; max-width: 40rem; margin: 0 auto; }
.account-page { display: grid; gap: 1rem; }
.account-page-title { margin: 0; font-family: Georgia, serif; color: #0b1d35; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.account-page-intro, .account-card-copy { line-height: 1.65; }
.account-card, .app-account-create-card, .app-competitive-profile-card, .app-leaderboard-card, .app-display-name-card, .app-leaderboard-opt-in-card, .app-account-deletion-card { padding: 1.15rem; border: 1px solid #dfd1b2; border-radius: .8rem; background: #fff; }
.account-card-title { margin-top: 0; color: #0b1d35; }
.account-status-row { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid #ece4d4; }
.account-badge-good { background: #dcebdd; color: #1d5d2b; }
.account-badge-attention, .account-badge-warn { background: #fff0cb; color: #72500a; }
.account-field, .app-account-auth-field-label { display: grid; min-width: 0; gap: .35rem; margin: .75rem 0; font-weight: 700; }
.account-input, .account-field input, .app-account-auth-input, .app-account-create-input, .app-account-create-select, .app-display-name-input, .app-display-name-report-input, .app-display-name-report-reason { width: 100%; min-height: 2.8rem; border: 1px solid #a99672; border-radius: .5rem; padding: .65rem .75rem; font: inherit; font-size: 16px; }
.account-sign-in-form, .account-password-recovery-form, .account-password-reset-form { display: grid; width: min(100%, 38rem); gap: .8rem; }
.account-auth-controls { display: grid; min-width: 0; gap: .65rem; margin-top: .8rem; }
.account-auth-controls .account-button, .account-auth-controls .account-link-button { justify-self: start; }
.account-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; }
.account-check-row { display: flex; align-items: center; gap: .65rem; width: fit-content; line-height: 1.4; }
.account-check-row input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.account-announcement { min-height: 1.5rem; }
.account-error { color: #8a2424; }
.account-success { color: #1d5d2b; }
.account-reauth-modal:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(5,15,30,.72); }
.account-reauth-panel { width: min(32rem, 100%); padding: 1.5rem; border-radius: .8rem; background: #fff; }
[data-account-task-surface] { display: grid; gap: 1rem; }
.account-danger-zone { padding-top: .5rem; }
.app-account-deletion-card { display: grid; gap: .75rem; }
.app-account-deletion-eyebrow, .app-account-deletion-title, .app-account-deletion-summary { margin: 0; }
.app-account-deletion-panel, .app-account-deletion-blocked, .app-account-deletion-incomplete, .app-account-deletion-done { display: grid; gap: .75rem; padding: 1rem; border: 1px solid #dfd1b2; border-radius: .65rem; background: #fff7f7; }
.app-account-deletion-panel[hidden], .app-account-deletion-blocked[hidden], .app-account-deletion-incomplete[hidden], .app-account-deletion-done[hidden] { display: none !important; }
.app-account-deletion-ack { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; line-height: 1.5; }
.app-account-deletion-ack input { margin-top: .3rem; }
.app-account-deletion-field { display: grid; gap: .35rem; font-weight: 700; }
.app-account-deletion-card input[type="text"] { width: 100%; min-height: 2.8rem; border: 1px solid #a99672; border-radius: .5rem; padding: .65rem .75rem; font: inherit; font-size: 16px; }
.app-account-deletion-open, .app-account-deletion-code-request, .app-account-deletion-code-verify, .app-account-deletion-cancel, .app-account-deletion-retry, .app-account-deletion-destructive { min-height: 2.75rem; width: fit-content; border: 1px solid #b58b23; border-radius: .55rem; padding: .65rem 1rem; font: inherit; font-weight: 700; cursor: pointer; background: #fff; color: #0b1d35; }
.app-account-deletion-destructive { border-color: #8c2f22; background: #8c2f22; color: #fff; }
.app-account-deletion-destructive:disabled { border-color: #98a2b3; background: #d0d5dd; color: #344054; cursor: not-allowed; }
.app-account-deletion-reference { word-break: break-all; }
.app-account-deletion-status { margin: 0; color: #344054; line-height: 1.5; }
.app-account-deletion-status[hidden], .app-account-deletion-reference[hidden] { display: none !important; }
.web-account-noscript { padding: 1rem; text-align: center; }
@media (max-width: 760px) {
  .web-account-main { width: min(100% - 1rem, 1120px); padding: 1rem 0 2rem; }
  .app-account-layout { grid-template-columns: 1fr; }
  .app-account-navigation { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #dfd1b2; }
  .account-nav-button { flex: 0 0 auto; }
  .account-status-row { align-items: flex-start; flex-direction: column; gap: .35rem; }
}

/* ===========================================================================
 * Website account presentation parity (2026-09-04).
 *
 * The account experience mounts three families of markup: the website-native
 * `.account-*` components (styled above), and the `app-account-*`,
 * `app-competitive-*`, `app-leaderboard-*`, `app-display-name-*`,
 * `app-reward-*` and `klv-reauthentication-*` components shared with the
 * installed app. The shared families were only ever given a stylesheet inside
 * `appendNativeAppFocusCss()` in scripts/build-deploy.js, which writes to
 * dist-ios/dist-android and deliberately never reaches the public bundle. The
 * web build loads their scripts all the same, so on the website they rendered
 * with default user-agent styling: raw `2px outset` buttons, label/value pairs
 * with no separation ("Competitive XP40"), a 0px-tall progress bar, and gold
 * headings left over from the dark-shell type scale sitting on white cards.
 *
 * This block gives those components the same structure the app build already
 * uses, recoloured for the light account card. Colours are the ones already
 * established above and in the app's own `.app-account-shell .account-card`
 * overrides -- ink #0b1d35, body #344054, muted #475467, faint #667085,
 * hairlines #dfd1b2/#ece4d4, accent #8a6a12 (5.06:1 on white). Nothing here
 * changes markup, behaviour or any account/auth logic, and this file is loaded
 * only by /account/ and /account/reset/.
 * ======================================================================== */

/* Role badge sat in the navy header and inherited its white text on a cream
 * pill -- 1.24:1, effectively invisible. Both badge families now state ink. */
.app-account-role-badge, .account-badge { color: #14243a; }

/* The site eyebrow is built for centred dark-hero sections: centred flex with
 * decorative rules either side, in --gold-bright (1.64:1 on white). Inside an
 * account card it has to be a quiet left-aligned label. */
.app-account-shell .eyebrow {
  display: block;
  margin-bottom: .3rem;
  color: #8a6a12;
  font-size: .7rem;
  letter-spacing: .18em;
  text-align: left;
}
.app-account-shell .eyebrow::before, .app-account-shell .eyebrow::after { display: none; }

/* Shared-component headings: the global h1-h6 rule paints --gold, which is
 * 2.42:1 on these white cards and clashes with the navy `.account-card-title`
 * used by the adjacent website-native cards. */
.app-account-create-title, .app-competitive-profile-title, .app-leaderboard-title,
.app-display-name-title, .app-display-name-report-title, .app-leaderboard-opt-in-title,
.app-account-deletion-title, .account-reauth-panel h2 {
  margin: 0;
  color: #0b1d35;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.2;
}
.app-account-create-step-title, .app-display-name-confirm-title {
  margin: 0;
  color: #0b1d35;
  font-size: 1rem;
  line-height: 1.25;
}

/* ---- Create Account ---------------------------------------------------- */
.app-account-create-card, .app-account-create-step { display: grid; gap: .5rem; }
.app-account-create-step[hidden], .app-account-create-adoption[hidden] { display: none !important; }
.app-account-create-step-body, .app-account-create-restriction {
  margin: 0; color: #475467; font-size: .9rem; line-height: 1.45;
}
.app-account-create-helper { margin: 0; color: #667085; font-size: .82rem; line-height: 1.4; }
.app-account-create-label {
  display: block; margin-bottom: .3rem;
  color: #344054; font-size: .86rem; font-weight: 700;
}
/* A month, a year and a short reference are not full-bleed fields. */
.app-account-create-input, .app-account-create-select { max-width: 22rem; }
.app-account-create-continue, .app-account-create-submit, .app-account-create-adopt,
.app-account-create-back, .app-account-create-defer {
  justify-self: start;
  min-height: 2.75rem;
  border: 1px solid #0b1d35;
  border-radius: .55rem;
  padding: .65rem 1.1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.app-account-create-continue, .app-account-create-submit, .app-account-create-adopt {
  background: #0b1d35; color: #fff;
}
.app-account-create-back, .app-account-create-defer { background: #fff; color: #0b1d35; }
.app-account-create-continue:disabled, .app-account-create-submit:disabled,
.app-account-create-adopt:disabled { opacity: .55; cursor: not-allowed; }
.app-account-create-status, .app-account-create-reference {
  margin: 0; color: #344054; font-size: .86rem; line-height: 1.4;
}
.app-account-create-status.is-error { color: #8a2424; font-weight: 700; }
.app-account-create-reference { color: #667085; font-size: .76rem; word-break: break-all; }
.app-account-create-adoption {
  display: grid; gap: .5rem; margin-top: .35rem;
  padding-top: .7rem; border-top: 1px solid #ece4d4;
}

/* ---- Competitive profile ----------------------------------------------- */
.app-competitive-profile-summary, .app-competitive-profile-ceiling,
.app-competitive-profile-public, .app-competitive-profile-status {
  margin: 0; color: #475467; font-size: .88rem; line-height: 1.45;
}
.app-competitive-profile-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem; margin-top: .25rem;
}
.app-competitive-profile-stats[hidden] { display: none !important; }
.app-competitive-profile-stat {
  display: grid; gap: .15rem; padding: .6rem;
  border: 1px solid #ece4d4; border-radius: .5rem; background: #fffdf7;
}
.app-competitive-profile-stat-label {
  color: #475467; font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.app-competitive-profile-stat-value {
  color: #0b1d35; font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700;
}

/* ---- Reward tier + progress -------------------------------------------- */
/* Keeps the navy pill the app build already uses on light account cards, so
 * the parchment/gold badge type stays legible against a white card. */
.app-reward-tier-mount { display: grid; gap: .55rem; margin-top: .15rem; }
.app-reward-tier-mount[hidden], .app-reward-collection-mount[hidden],
.app-reward-collection-toggle[hidden], .app-reward-celebration[hidden] { display: none !important; }
.app-reward-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; border: 1px solid rgba(201,162,39,.3);
  border-radius: .6rem; background: #0b1d35;
}
.app-reward-badge.is-current {
  border-color: #b58b23;
  background-color: #0b1d35;
  background-image: linear-gradient(rgba(201,162,39,.14), rgba(201,162,39,.14));
}
.app-reward-badge.is-locked { border-style: dashed; opacity: .62; }
.app-reward-badge-icon { display: inline-flex; flex: none; color: #e8c84a; }
.app-reward-badge-label { display: grid; gap: .05rem; min-width: 0; }
.app-reward-badge-name { color: #f5edd8; font-size: .92rem; font-weight: 700; line-height: 1.2; }
.app-reward-badge-range { color: rgba(245,237,216,.62); font-size: .72rem; line-height: 1.2; }
.app-reward-badge-marker {
  margin-left: auto; flex: none; color: #e8c84a;
  font-size: .66rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.app-reward-badge--large { padding: .7rem .9rem; }
.app-reward-badge--large .app-reward-badge-icon svg { width: 26px; height: 26px; }
.app-reward-badge--large .app-reward-badge-name { font-size: 1.05rem; }
.app-reward-badge--compact { gap: .4rem; padding: .35rem .55rem; }
.app-reward-badge--compact .app-reward-badge-icon svg { width: 16px; height: 16px; }
.app-reward-badge--compact .app-reward-badge-name { font-size: .82rem; }
.app-reward-badge--compact .app-reward-badge-range { display: none; }
.app-reward-progress { display: grid; gap: .3rem; }
.app-reward-progress-track {
  height: 8px; border-radius: 999px; background: #0b1d35; overflow: hidden;
}
.app-reward-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #c9a227 0%, #e8c84a 100%);
}
.app-reward-progress-text { margin: 0; color: #475467; font-size: .82rem; line-height: 1.4; }
.app-reward-celebration {
  margin: 0; padding: .5rem .7rem;
  border: 1px solid #dfd1b2; border-radius: .5rem;
  background: #fff8e3; color: #72500a; font-size: .86rem; font-weight: 700;
}

/* ---- Leaderboards ------------------------------------------------------ */
.app-leaderboard-summary, .app-leaderboard-footnote, .app-leaderboard-status {
  margin: 0; color: #475467; font-size: .88rem; line-height: 1.45;
}
.app-leaderboard-footnote { color: #667085; font-size: .82rem; }
.app-leaderboard-status { font-style: italic; }
.app-leaderboard-status.is-error { color: #8a2424; font-style: normal; }
.app-leaderboard-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 0; }
.app-leaderboard-panel { display: grid; gap: .4rem; margin-top: .2rem; }
.app-leaderboard-rows { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.app-leaderboard-row {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center; gap: .15rem .5rem; padding: .5rem .6rem;
  border: 1px solid #ece4d4; border-radius: .5rem; background: #fffdf7;
}
.app-leaderboard-rank {
  grid-column: 1; grid-row: 1;
  color: #8a6a12; font-family: 'Cinzel', serif; font-weight: 700;
}
.app-leaderboard-identity {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: .35rem; min-width: 0;
}
.app-leaderboard-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #0b1d35; font-weight: 700;
}
.app-leaderboard-badge { flex: none; padding: .15rem; border-radius: 999px; }
.app-leaderboard-badge .app-reward-badge-label,
.app-leaderboard-badge .app-reward-badge-marker { display: none; }
.app-leaderboard-value {
  grid-column: 3; grid-row: 1; justify-self: end; text-align: right;
  color: #344054; font-size: .86rem; font-weight: 700;
}
.app-leaderboard-level {
  grid-column: 2 / -1; justify-self: start;
  color: #8a6a12; font-size: .74rem; font-weight: 700; white-space: nowrap;
}
/* "This is you" is a compact pill under the player's identity, never a word
   per line in the rank column. It spans the identity and value columns so the
   row's three columns are undisturbed at any width. */
.app-leaderboard-current {
  grid-column: 2 / -1; justify-self: start;
  display: inline-flex; align-items: center; min-height: 1.35rem;
  padding: .05rem .55rem; border-radius: 999px;
  background: rgba(181,139,35,.16); border: 1px solid rgba(181,139,35,.35);
  color: #6b4f0a; font-size: .68rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.app-leaderboard-row.is-current-player { border-color: #cbb271; background: #fff8e6; }

/* ---- Display name ------------------------------------------------------ */
.app-display-name-summary, .app-display-name-moderation, .app-display-name-recovery,
.app-display-name-report-summary, .app-display-name-report-status,
.app-display-name-confirm-body {
  margin: 0; color: #475467; font-size: .88rem; line-height: 1.45;
}
.app-display-name-current { margin: 0; color: #0b1d35; font-weight: 700; }
.app-display-name-current[hidden], .app-display-name-confirm[hidden] { display: none !important; }
.app-display-name-moderation.is-attention { color: #72500a; font-weight: 700; }
.app-display-name-form { display: grid; gap: .45rem; margin-top: .35rem; }
.app-display-name-field-label {
  display: grid; gap: .3rem; color: #344054; font-size: .86rem; font-weight: 700;
}
.app-display-name-helper, .app-display-name-footnote {
  margin: 0; color: #667085; font-size: .8rem; line-height: 1.4;
}
.app-display-name-status { min-height: 1.3em; margin: 0; color: #475467; font-size: .86rem; line-height: 1.4; }
.app-display-name-status.is-error { color: #8a2424; }
.app-display-name-status.is-busy { font-style: italic; }
.app-display-name-confirm {
  display: grid; gap: .45rem; padding: .7rem;
  border: 1px solid #dfd1b2; border-radius: .5rem; background: #fffdf7;
}
.app-display-name-report {
  display: grid; gap: .45rem; margin-top: .5rem;
  padding-top: .7rem; border-top: 1px solid #ece4d4;
}
.app-display-name-input, .app-display-name-report-input, .app-display-name-report-reason {
  max-width: 24rem;
}

/* ---- Leaderboard sharing ----------------------------------------------- */
.app-leaderboard-opt-in-summary, .app-leaderboard-opt-in-requirement,
.app-leaderboard-opt-in-state, .app-leaderboard-opt-in-status {
  margin: 0; color: #475467; font-size: .88rem; line-height: 1.45;
}
.app-leaderboard-opt-in-requirement { color: #667085; font-size: .82rem; }
.app-leaderboard-opt-in-status { min-height: 1.3em; }
.app-leaderboard-opt-in-status.is-error { color: #8a2424; }
.app-leaderboard-opt-in-status.is-busy { font-style: italic; }
.app-leaderboard-opt-in-state.is-attention { color: #72500a; font-weight: 700; }
.app-leaderboard-opt-in-disclosure-heading {
  margin: .4rem 0 0; color: #475467; font-size: .76rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
/* `ul { list-style: none }` is a site-wide reset; these two really are lists. */
.app-leaderboard-opt-in-shared, .app-leaderboard-opt-in-never-shared {
  margin: 0; padding-left: 1.2rem; list-style: disc;
  color: #344054; font-size: .88rem; line-height: 1.5;
}
.app-leaderboard-opt-in-shared-item, .app-leaderboard-opt-in-never-shared-item {
  margin: 0;
}

/* ---- Pill actions shared by the app components ------------------------- */
.app-reward-collection-toggle, .app-leaderboard-load-more, .app-leaderboard-tab,
.app-display-name-confirm-save, .app-display-name-confirm-cancel,
.app-display-name-report-button {
  justify-self: start;
  min-height: 2.5rem;
  border: 1px solid #b58b23;
  border-radius: 999px;
  padding: .45rem 1rem;
  background: #fff;
  color: #0b1d35;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.app-leaderboard-tab { min-height: 2.25rem; padding: .4rem .9rem; }
.app-leaderboard-tab.is-active { border-color: #0b1d35; background: #0b1d35; color: #fff; }
.app-display-name-confirm-save { border-color: #0b1d35; background: #0b1d35; color: #fff; }
.app-leaderboard-load-more[hidden], .app-display-name-report-button[hidden] { display: none !important; }
/* Geometry for these two comes from the shared control rule above; they were
 * missing only a background, which left the user-agent grey showing through. */
.app-display-name-button, .app-leaderboard-opt-in-button {
  justify-self: start;
  background: #0b1d35;
  color: #fff;
}
/* Leaderboard Sharing (pre-launch correction, 2026-09-05). The web card is a
 * plain block (no grid gap, unlike the app shell), so the Turn on/off control
 * sat flush against the requirement sentence above it and the status line
 * below it. Block display gives it its own line, with the surface's .75rem
 * (12px) step above and .5rem (8px) below -- presentation only. */
.app-leaderboard-opt-in-button { display: block; margin: .75rem 0 .5rem; }

/* ---- Reauthentication dialog ------------------------------------------- */
/* Label, field and confirm button previously shared one line and touched. */
.klv-reauthentication-controls { display: grid; gap: .5rem; margin: .5rem 0; }
.klv-reauthentication-label { display: grid; gap: .35rem; color: #344054; font-weight: 700; }
.klv-reauthentication-password, .klv-reauthentication-code {
  width: 100%; max-width: 20rem; min-height: 2.8rem;
  border: 1px solid #a99672; border-radius: .5rem;
  padding: .65rem .75rem; font: inherit; font-size: 16px;
}
.klv-reauthentication-confirm, .klv-reauthentication-confirm-code,
.klv-reauthentication-send-code {
  justify-self: start; min-height: 2.75rem;
  border: 1px solid #0b1d35; border-radius: .55rem;
  padding: .65rem 1.1rem; background: #0b1d35; color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.klv-reauthentication-send-code { background: #fff; color: #0b1d35; }
.klv-reauthentication-status { margin: 0; color: #475467; font-size: .88rem; line-height: 1.45; }
.klv-reauthentication-status.is-error { color: #8a2424; }
.account-reauth-panel h2 { font-family: 'Cinzel', serif; }

/* ---- Danger zone disclosure -------------------------------------------- */
/* `<summary class="account-card-title">` is not a heading element, so it never
 * picked up the display face or scale and rendered as 16px body text behind a
 * user-agent triangle, below the very cards it introduces. */
.account-danger-zone {
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid #ece4d4;
}
.account-danger-zone > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  list-style: none;
  color: #0b1d35;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.account-danger-zone > summary::-webkit-details-marker { display: none; }
.account-danger-zone > summary::before {
  content: '';
  flex: none;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid #b58b23;
  border-bottom: 2px solid #b58b23;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.account-danger-zone[open] > summary::before { transform: rotate(45deg); }
.account-danger-zone > .account-card-copy { margin: .35rem 0 .75rem; color: #475467; }

/* A six-character code and a short confirmation phrase do not need the whole
 * card width on a desktop viewport. */
.app-account-deletion-card input[type="text"] { max-width: 22rem; }
/* Matches the 1.25rem checkbox the website-native `.account-check-row` uses,
 * instead of the 13px user-agent default. */
.app-account-deletion-ack input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; }

/* A bare action button that is a direct grid child of `.account-page` was
 * stretching to the full column (the password-reset recovery action). */
.account-page > .account-button, .account-page > .account-link-button,
.account-page > .app-account-create-submit { justify-self: start; }

/* The content pane is a programmatic focus target (tabindex="-1") so screen
 * readers land on the new section. It is not keyboard-reachable, so the
 * site-wide `[tabindex="-1"]:focus-visible` ring only ever painted a 3px gold
 * rectangle -- clipped on two sides by the shell's overflow -- around the whole
 * pane after every section change. `.app-account-content { outline: none }`
 * above was already the intent; it just lost to that rule's !important. */
.app-account-content:focus, .app-account-content:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* `.account-sign-in-form` is both the form and the card it lives in, so the
 * 38rem form cap also narrowed the card itself and left it visibly short of
 * the full-width "New to KLV?" card immediately beneath it. Let the card match
 * its siblings and cap the fields instead, the way the deletion and creation
 * cards already do. The bare recovery/reset forms keep the 38rem cap above. */
.account-card.account-sign-in-form { width: 100%; }
.account-card.account-sign-in-form .account-field { max-width: 26rem; }

/* A birth month and a four-digit year were being stretched across the whole
 * content column. */
.account-creation-birth-form .account-field { max-width: 12rem; }

/* The recovery and reset submits are grid children of their own form, so they
 * stretched to the form's full 38rem while every other primary action in the
 * account experience -- Sign in, Create account, Continue, Delete My Account --
 * sits at its intrinsic width. */
.account-password-recovery-form > .account-button,
.account-password-reset-form > .account-button { justify-self: start; }

/* The account address on the Overview card is the one piece of unbreakable
 * user text in the account shell. With no wrap opportunity its min-content
 * width blew the single-column mobile grid about 18px past the shell, which
 * `overflow: hidden` then clipped -- so Overview rendered its cards wider than
 * every other section and the panel silently overflowed the viewport. Measured
 * on a physical Android device: the column resolved to 384.79px on Overview
 * against 366.58px elsewhere, and collapsed back to 366.58px as soon as this
 * declaration applied. The header copy of the same address already carries
 * this treatment in the app build. */
.account-private-identity { overflow-wrap: anywhere; }