/* Read Achilles account chrome — auth UI, header indicator, CTAs, preferences.
   Loaded alongside /assets/account.js. Works from 360px up; 44px+ targets.

   Tokens: one gold, two radii, five type sizes. Everything below references
   the tokens — no literal colors, radii, or off-scale sizes outside the token block. */

/* ---------- tokens ---------- */
/* On :root (not scoped hosts): any .ra-* control placed anywhere keeps its chrome */
:root {
  --amber: #d4a94e;
  --line: #2a2a26;
  --line-strong: #65635a; /* control boundaries: 3:1 on --card (WCAG 1.4.11) */
  --card: #161614;
  --text: #f5f1e8;
  --muted: #a89f8d;
  --ink: #141310;
  --error: #cf7d6d;
  --error-hover: #e09a8d;
  --success: #93a86f;
  --danger-line: #6b3a3a;
  --danger-hover: #7a4444;
  --on-danger: #fff;
  --amber-wash: rgba(212,169,78,.08);
  --danger-wash: rgba(107,58,58,.08);
  --r-sm: 4px;   /* controls */
  --r-lg: 8px;   /* surfaces */
  --fs-fine: 13px;
  --fs-body: 14px;
  --fs-lead: 17px;
  --fs-title: 20px;
  --fs-code: 24px;
  --ease: .15s ease;
  --font: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- header slot ---------- */
.ra-slot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ra-email{font-size:var(--fs-fine);color:var(--muted);overflow-wrap:anywhere}

/* ---------- header account dropdown (game-team structure, RA tokens) ---------- */
.ra-acct-wrap{position:relative}
.ra-acct-btn{display:flex;align-items:center;gap:0.5rem;background:none;border:none;
  cursor:pointer;padding:0.25rem;border-radius:8px;min-height:44px;
  color:var(--text);font:inherit;transition:background-color var(--ease)}
.ra-acct-btn:hover{background:var(--amber-wash)}
.ra-acct-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ra-acct-avatar{width:32px;height:32px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--amber),#8a6d1f);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.85rem;color:var(--ink)}
.ra-acct-name{font-weight:600;color:var(--text);max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ra-acct-arrow{font-size:0.7rem;color:var(--muted)}
.ra-acct-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:190px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);z-index:50;overflow:hidden;padding:0.25rem 0}
.ra-acct-menu.open{display:block;animation:raIn .15s ease-out}
.ra-acct-item{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.7rem 1rem;
  background:none;border:none;color:var(--text);font-size:0.9rem;font-family:var(--font-ui);
  cursor:pointer;text-align:left;text-decoration:none;min-height:44px;box-sizing:border-box;
  transition:background-color var(--ease)}
.ra-acct-item:hover{background:var(--amber-wash);color:var(--text);text-decoration:none}
.ra-acct-item:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.ra-acct-item .ra-acct-ic{flex:none}

/* ---------- buttons & links ---------- */
/* Header account slot: push to the far right of the flex .brand-row.
 * (renderSlots() also preserves the slot's existing classes.) */
.ra-slot{margin-left:auto;}
.ra-btn{font:inherit;font-size:var(--fs-body);line-height:1;min-height:44px;padding:12px 18px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:transparent;color:var(--text);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  transition:border-color var(--ease),color var(--ease),opacity var(--ease),background-color var(--ease)}
.ra-btn:hover{border-color:var(--amber)}
.ra-btn.primary{background:var(--amber);border-color:var(--amber);color:var(--ink);font-weight:600}
/* ghost: a quiet modifier of the base button — same chrome, dimmed label */
.ra-btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--muted)}
.ra-btn.ghost:hover{border-color:var(--amber);color:var(--text)}
.ra-btn.danger{background:var(--danger-line);border-color:var(--danger-line);color:var(--on-danger)}
.ra-btn.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover)}
.ra-btn:disabled{opacity:.5;cursor:not-allowed}
.ra-link{font-size:var(--fs-fine);color:var(--muted);text-decoration:underline;text-underline-offset:3px;
  min-height:44px;display:inline-flex;align-items:center;background:none;border:0;cursor:pointer;
  font-family:inherit;padding:0;transition:color var(--ease),opacity var(--ease)}
.ra-link:hover{color:var(--text)}
.ra-link:disabled{opacity:.55;cursor:default;text-decoration:none}
.ra-link:disabled:hover{color:var(--muted)}

/* ---------- auth panel ---------- */
/* Fixed overlay: backdrop + centered card. Previously #ra-auth was
 * position:relative inside <main>, so it rendered inline at the bottom
 * of the page (overlapping footer/FAQ) instead of as a modal. */
#ra-auth-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);
  display:flex;align-items:flex-start;justify-content:center;
  padding:48px 16px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch}
#ra-auth-overlay[hidden]{display:none}
#ra-auth{position:relative;width:100%;max-width:440px;margin:0 auto;padding:28px 24px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);font-family:var(--font);
  box-shadow:0 24px 64px rgba(0,0,0,.5)}
/* Overlay fade (same 220ms as panel enter/exit) */
#ra-auth-overlay.ra-leaving{opacity:0;transition:opacity .22s ease-out}
#ra-auth h2{font-size:var(--fs-title);margin:0 0 8px;font-weight:400}
#ra-auth .ra-sub{font-size:var(--fs-body);color:var(--muted);margin:0 0 18px;line-height:1.5;overflow-wrap:anywhere}
#ra-auth label{display:block;font-size:var(--fs-fine);color:var(--muted);margin:0 0 6px}
/* shared form elements: auth panel AND prefs (the delete-zone code input
 * lives outside #ra-auth and must not render as a raw native field) */
#ra-auth input[type=email],#ra-auth input[type=text],
[data-ra-prefs] input[type=email],[data-ra-prefs] input[type=text]{
  width:100%;box-sizing:border-box;min-height:48px;font-size:var(--fs-lead);padding:12px 14px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--ink);color:var(--text);
  transition:border-color var(--ease)}
#ra-auth input:focus-visible,[data-ra-prefs] input:focus-visible,[data-ra-prefs] select:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ra-code{font-size:var(--fs-code);font-family:var(--font-code);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:6px;text-indent:6px;text-align:center;
  direction:ltr;unicode-bidi:embed}
.ra-err{font-size:var(--fs-body);color:var(--error);margin:10px 0 0;min-height:20px}
.ra-ok{font-size:var(--fs-body);color:var(--success);margin:10px 0 0}
.ra-row{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.ra-cta .ra-row,.ra-delete .ra-row,.ra-confirm-inline .ra-row{margin-top:12px}
.ra-delete .ra-row > label{flex-basis:100%;font-size:var(--fs-fine);color:var(--muted);margin-bottom:-4px}
/* "Change email" lives inside the running sentence — not a 44px button mid-paragraph */
#ra-auth .ra-edit{min-height:0;padding:0;vertical-align:baseline;font-size:inherit;display:inline}
#ra-auth .ra-count{font-variant-numeric:tabular-nums}
/* functional chrome (close, back link) is deliberately UI-sans against the serif editorial voice */
#ra-auth .ra-close{position:absolute;top:6px;right:14px;background:none;border:0;color:var(--muted);
  font-size:var(--fs-lead);font-family:var(--font-ui);cursor:pointer;padding:12px;min-height:44px;min-width:44px;
  transition:color var(--ease)}
#ra-auth .ra-close:hover{color:var(--text)}
#ra-auth .ra-success{text-align:center;padding:12px 0}
#ra-auth .ra-success .big{display:block;width:16px;height:28px;margin:0 auto 14px;
  border-right:3px solid var(--success);border-bottom:3px solid var(--success);
  transform:rotate(45deg);transform-origin:center}
#ra-auth .ra-resend-help{font-size:var(--fs-fine);color:var(--muted);margin:14px 0 6px;line-height:1.5}

/* screen-swap enter transition (JS toggles .ra-enter; reduced-motion gated below) */
#ra-auth.ra-enter > *:not(.ra-close){animation:raIn .22s ease-out}
@keyframes raIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* symmetric exit: the same 220ms on the way out (JS toggles .ra-leaving) */
#ra-auth.ra-leaving > *:not(.ra-close){opacity:0;transform:translateY(-4px);
  transition:opacity .22s ease-out,transform .22s ease-out}

/* ---------- inline CTAs ---------- */
.ra-cta{border:1px solid var(--amber);border-radius:var(--r-lg);background:var(--amber-wash);
  padding:16px 18px;margin:24px 0;font-size:var(--fs-body);line-height:1.55;color:var(--text)}
.ra-cta p{margin:0 0 6px}
.ra-cta .ra-fine{font-size:var(--fs-fine);color:var(--muted)}


/* visually hidden (screen-reader-only) live regions */
.ra-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- banners ---------- */
.ra-banner{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:12px 18px;margin:16px 0;font-size:var(--fs-body);color:var(--muted);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ---------- preferences (signed-in) ---------- */
[data-ra-prefs]{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px;margin:28px 0;max-width:720px;font-family:var(--font)}
[data-ra-prefs] > h2{margin:28px 0 4px;font-size:var(--fs-lead);font-weight:400}
[data-ra-prefs] > h2:first-of-type{margin-top:0}
[data-ra-prefs] .ra-sub{font-size:var(--fs-fine);color:var(--muted);margin:0 0 14px}
[data-ra-prefs] .ra-backlink{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-body);font-family:var(--font-ui);color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;background:none;border:0;cursor:pointer;padding:0;margin-bottom:8px;
  transition:color var(--ease)}
[data-ra-prefs] .ra-backlink:hover{color:var(--text)}
.ra-progress{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin:0 0 20px;
  background:var(--amber-wash)}
[data-ra-prefs] .ra-progress .ra-progress-label{margin:0 0 6px;font-size:var(--fs-body)}
[data-ra-prefs] .ra-progress .ra-progress-label strong{font-weight:600}
.ra-progress p{margin:0;font-size:var(--fs-body);color:var(--muted)}
.ra-progress strong{color:var(--text);font-weight:600}
[data-ra-prefs] fieldset{border:0;padding:0;margin:0;min-width:0}
[data-ra-prefs] legend{font-size:var(--fs-fine);color:var(--muted);padding:0;margin-bottom:6px}
.ra-nl-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin:0 0 16px}
.ra-check{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;
  font-size:var(--fs-body)}
.ra-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--amber);flex:none}
.ra-field{margin:0 0 14px}
.ra-field label{display:block;font-size:var(--fs-fine);color:var(--muted);margin-bottom:6px}
.ra-field select{font:inherit;font-size:var(--fs-lead);min-height:44px;padding:10px 12px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--ink);color:var(--text);max-width:100%;
  transition:border-color var(--ease)}
.ra-consent{font-size:var(--fs-fine);color:var(--muted);line-height:1.5;margin:6px 0}
[data-ra-prefs] .ra-msg{font-size:var(--fs-body);margin:10px 0 0;min-height:20px}
[data-ra-prefs] .ra-msg.ok{color:var(--success)}
[data-ra-prefs] .ra-msg.err{color:var(--error)}


/* quiet "Personalize" details: experience + cadence + topics, one grid only */
.ra-personalize{margin:4px 0 8px;border-top:1px solid var(--line);padding-top:8px}
.ra-personalize summary{font-size:var(--fs-body);color:var(--muted);cursor:pointer;padding:12px 0;
  transition:color var(--ease)}
.ra-personalize summary:hover{color:var(--text)}
.ra-personalize .ra-field{margin-top:10px}

/* ---------- danger zone ---------- */
.ra-delete{margin-top:22px;border:1px solid var(--danger-line);border-radius:var(--r-sm);
  padding:14px 16px;background:var(--danger-wash)}
.ra-delete summary{font-size:var(--fs-body);color:var(--error);cursor:pointer;font-weight:600;
  padding:10px 0;transition:color var(--ease)}
.ra-delete summary:hover{color:var(--error-hover)}
.ra-delete .ra-sub{font-size:var(--fs-fine);color:var(--muted);line-height:1.55;margin:10px 0}

.ra-delete .ra-code{max-width:220px}

/* ---------- sign-out-everywhere ---------- */
.ra-signout-all{margin-top:12px}
.ra-signout-all .ra-msg{min-height:0}

/* ---------- styled inline confirm (never confirm()) ---------- */
.ra-banner .ra-confirm-inline{flex-basis:100%}
.ra-confirm-inline{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;
  margin-top:12px;background:var(--card);animation:raIn .22s ease-out}
.ra-confirm-inline p{margin:0 0 12px;font-size:var(--fs-body);color:var(--text)}


@media (max-width:560px){.ra-nl-grid{grid-template-columns:1fr}}

/* ---------- public profile (test slice) ---------- */
.ra-profile-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:22px;margin:28px 0;max-width:720px}
.ra-profile-card h3{margin:0 0 10px;font-size:var(--fs-lead);font-weight:400}
.ra-pf-mini{display:flex;gap:14px;align-items:center;margin:12px 0 16px}
.ra-pf-mini strong{font-size:var(--fs-lead);font-weight:600}
.ra-profile-card .ra-field input[type=text],.ra-profile-card .ra-field textarea{
  width:100%;box-sizing:border-box;min-height:48px;font-size:var(--fs-lead);padding:12px 14px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--ink);color:var(--text)}
.ra-profile-card .ra-field textarea{min-height:76px;resize:vertical}
.ra-pf-url{overflow-wrap:anywhere;font-size:var(--fs-body)}
.ra-pf-url a{color:var(--amber)}
.ra-pf-checks{border:0;padding:0;margin:12px 0;min-width:0}
.ra-pf-checks legend{font-size:var(--fs-fine);color:var(--muted);padding:0;margin-bottom:6px}
.ra-pf-locked{opacity:.85}
/* S2 publish overlay */
.ra-pf-overlay{position:fixed;inset:0;background:rgba(10,10,8,.72);z-index:60;overflow-y:auto;
  display:flex;align-items:flex-start;justify-content:center;padding:32px 16px}
.ra-pf-sheet{position:relative;max-width:640px;width:100%;background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:28px 24px}
.ra-pf-sheet h2{font-size:var(--fs-title);font-weight:400;margin:0 0 8px}
.ra-pf-sheet h3.ra-pf-ph{font-size:var(--fs-fine);color:var(--muted);font-weight:400;
  text-transform:uppercase;letter-spacing:.08em;margin:20px 0 8px}
.ra-pf-sheet .ra-close{position:absolute;top:6px;right:14px;background:none;border:0;color:var(--muted);
  font-size:var(--fs-lead);font-family:var(--font-ui);cursor:pointer;padding:12px;min-height:44px;min-width:44px}
.ra-pf-sheet .ra-close:hover{color:var(--text)}
.ra-pf-sheet .ra-field input[type=text],.ra-pf-sheet .ra-field textarea{
  width:100%;box-sizing:border-box;min-height:48px;font-size:var(--fs-lead);padding:12px 14px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--ink);color:var(--text)}
.ra-pf-sheet .ra-field textarea{min-height:64px;resize:vertical}
/* S2 live WYSIWYG preview */
.ra-pf-preview{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink);
  padding:20px;margin:0 0 8px}
.ra-pf-pv-head{text-align:center;margin-bottom:8px}
.ra-pf-pv-avatar{margin-bottom:8px}
.ra-pf-pv-name{font-size:22px}
.ra-pf-pv-foot{font-size:12px;color:var(--muted);margin-top:6px}
.ra-pf-pv-bio{font-size:15px;line-height:1.6}
.ra-pf-pv-bars{margin:12px 0}
.ra-pf-pv-bar{height:10px;border-radius:4px;background:var(--line);margin:8px 0}
.ra-pf-pv-empty{color:var(--muted);font-style:italic;font-size:14px}
/* share prompt card */
.ra-pf-prompt{border:1px solid var(--amber);border-radius:var(--r-lg);background:var(--amber-wash);
  padding:14px 18px;margin:0 0 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-size:var(--fs-body)}
.ra-pf-prompt .ra-row{margin:0}

@media (max-width:560px){
  .ra-pf-overlay{padding:16px 8px}
  .ra-pf-sheet{padding:22px 16px}
}

/* ---------- reduced motion: everything off, no exceptions ---------- */
@media (prefers-reduced-motion:reduce){
  #ra-auth.ra-enter > *,
  .ra-confirm-inline{animation:none}
  *,*::before,*::after{animation:none !important;transition:none !important}
  #ra-auth .ra-code{letter-spacing:4px;text-indent:4px}
}

/* T4 (2026-10-11): SSO entry button + divider + footer in the auth modal */
.ra-sso{display:block;width:100%;text-align:center;text-decoration:none;margin:4px 0 0}
.ra-or{text-align:center;color:var(--muted);font-size:13px;margin:10px 0;text-transform:uppercase;letter-spacing:.08em}
.ra-or::before,.ra-or::after{content:"";display:inline-block;width:28%;height:1px;background:var(--line);vertical-align:middle;margin:0 8px}
.ra-foot{color:var(--muted);font-size:13px;text-align:center;margin:12px 0 0}
.ra-sso-sub{color:var(--muted);font-size:13px;text-align:center;margin:6px 0 0}
/* Native OAuth (2026-10-11): Google/Apple buttons above the Achilles Desk
 * button; rendered only for configured providers (JS removes the wrap when
 * empty or the probe fails). */
.ra-oauth-wrap:empty{display:none}
.ra-oauth-wrap .ra-oauth{margin-top:8px}
.ra-oauth-wrap .ra-oauth:first-child{margin-top:4px}
.ra-btn.ra-oauth{display:flex;align-items:center;justify-content:center;gap:10px}
.ra-btn.ra-oauth svg{flex:none;display:block}

/* ---------- MBTI profile field (Phase 1) ---------- */
/* Segmented 16-option picker; dark chrome, token-only, 360px-up, 44px+ targets. */
.ra-mbti .ra-mbti-sub{font-size:var(--fs-body);color:var(--muted);margin:-4px 0 12px}
.ra-mbti .ra-sub a{color:var(--amber)}
.ra-mbti-segs{border:0;margin:0 0 6px;padding:0;display:grid;gap:10px}
.ra-mbti-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ra-mbti-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:64px;padding:10px 8px;border-radius:var(--r-lg);border:1px solid var(--line-strong);
  background:transparent;color:var(--muted);cursor:pointer;font:inherit;
  transition:border-color var(--ease),background-color var(--ease),color var(--ease)}
.ra-mbti-opt:hover{border-color:var(--amber);color:var(--text)}
.ra-mbti-opt:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.ra-mbti-letter{font-size:22px;font-weight:700;line-height:1.2}
.ra-mbti-optname{font-size:var(--fs-fine);font-weight:400}
.ra-mbti-opt[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.ra-mbti-opt[aria-pressed="true"] .ra-mbti-optname{color:var(--ink)}
.ra-mbti-preview{font-size:var(--fs-body);color:var(--muted);margin:10px 0 14px}
.ra-mbti-preview strong{font-family:var(--font-code);font-size:var(--fs-code);color:var(--text);letter-spacing:4px}
.ra-mbti-set{display:flex;align-items:center;gap:12px;margin:2px 0 14px;flex-wrap:wrap}
.ra-mbti-badge{font-family:var(--font-code);font-size:var(--fs-code);font-weight:700;letter-spacing:3px;
  padding:8px 14px 8px 17px;border:1px solid var(--line-strong);border-radius:var(--r-lg);
  color:var(--text);cursor:help}
.ra-mbti-source{font-size:var(--fs-fine);color:var(--muted)}
.ra-mbti-low{font-size:var(--fs-fine);font-weight:700;color:var(--amber);border:1px solid var(--amber);border-radius:20px;padding:2px 10px;white-space:nowrap}
.ra-mbti .ra-check{margin:0 0 14px}
.ra-mbti [data-mbti-confirm]{margin-top:10px}
.ra-mbti-fine{font-size:var(--fs-fine);color:var(--muted);margin:14px 0 0;line-height:1.5}
.ra-mbti .ra-row [data-mbti-retrywrap]{display:inline-flex}
.ra-mbti .ra-row [data-mbti-retrywrap][hidden]{display:none}