/* Runewards — profile page. Built in the handoff's design language: same
   tokens, same component patterns (stat tiles, faction rows, card panels).

   The layout is "Direction A — Command rail" (owner's choice, 2026-09-03): a
   348px rail that holds everything about the ACCOUNT and stays on screen, and
   a main column that is only about the game. The rail is why this page has no
   chip subnav any more — the account is never more than one glance away, so
   there is nothing to jump to. */

.pf-grid{display:grid;grid-template-columns:348px minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}

/* ─── The rail ───────────────────────────────────────────── */
/* Sticky under the 72px solid header. A rail taller than the viewport simply
   scrolls with the page, which is the right behaviour and needs no rule. */
.pf-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-card{border:1px solid var(--line);border-radius:10px;background:var(--ground2);padding:clamp(18px,2.4vw,24px)}
.pf-card-h{margin:0 0 16px;font:700 12px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

.pf-idrow{display:flex;gap:13px;align-items:center;margin-bottom:18px}
.pf-crest{width:52px;height:52px;flex:none}
.pf-id{min-width:0}
/* h1.pf-name, not .pf-name: site.css has `.page-main h1 {font: ... 58px;
   max-width: 22ch}` for a page heading, which is more specific than a class
   and was rendering the rail's name at 58px - two lines and a broken card. A
   tie on specificity goes to whichever rule comes later, and this file loads
   after site.css. */
h1.pf-name{margin:0 0 5px;max-width:none;font:700 clamp(19px,1.9vw,23px)/1.14 var(--fdisp);letter-spacing:.01em;color:var(--ink);overflow-wrap:anywhere}
.pf-username{margin:0;font:500 13px/1.4 var(--fmono);color:var(--gold);overflow-wrap:anywhere}
.pf-email{margin:0;font-size:14px;line-height:1.5;color:var(--ink-dim);overflow-wrap:anywhere}
.pf-verified{margin:8px 0 0;display:inline-flex;align-items:center;gap:7px;font:600 10px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:#7FE3A0}
.pf-verified svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Stat tiles: the account page's pattern, two to a row in the rail. */
.pf-stats{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;margin:18px 0 0}
.pf-stat{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:rgba(20,10,8,.5)}
.pf-stat-n{display:block;font:500 22px/1 var(--fmono);color:var(--gold);margin-bottom:6px}
.pf-stat-l{display:block;font:600 10px/1.3 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}

/* The four account rows. Each Change opens the editor on its own tab. */
.pf-rows{display:flex;flex-direction:column}
.pf-row{display:flex;gap:12px;align-items:baseline;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}
.pf-row:last-child{border-bottom:0;padding-bottom:0}
.pf-row:first-child{padding-top:0}
.pf-row-t{min-width:0}
.pf-row-l{margin:0 0 3px;font:600 10px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.pf-row-v{margin:0;font-size:14px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.pf-row-v:empty::before{content:"Not set";color:var(--ink-dim)}
.pf-row-mono{font:500 13px/1.4 var(--fmono)}
.pf-change{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:0;border:0;background:none;cursor:pointer;font:500 13px/1 var(--fbody);color:var(--ink-dim);text-decoration:none;border-bottom:1px solid rgba(240,192,0,.35);transition:color .18s,border-color .18s}
.pf-change:hover{color:var(--gold);border-bottom-color:var(--gold)}


.pf-signout{min-height:50px;padding:15px;border:1px solid var(--line);border-radius:7px;background:rgba(20,10,8,.7);color:var(--ink);font:600 12px/1 var(--fbody);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .18s,color .18s}
.pf-signout:hover{color:var(--gold);border-color:var(--gold-core)}

/* ─── The main column ────────────────────────────────────── */
.pf-body{min-width:0;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.pf-body > section{margin:0}
.s-h2{margin:0 0 16px;font:700 clamp(26px,3.2vw,38px)/1.1 var(--fdisp);letter-spacing:.01em;color:var(--ink)}
.pf-sec-head{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;justify-content:space-between;margin-bottom:16px}
.pf-sec-head .s-h2{margin:0}
.pf-sec-count{margin:0;font:500 13px/1.4 var(--fmono);color:var(--ink-dim)}
.pf-sec-note{margin:-6px 0 18px;max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--ink-dim);text-wrap:pretty}
.pf-content{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
.pf-closing{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--ink-dim);text-wrap:pretty}

/* Email banner and the claim band (amber, the account page's panel pattern) */
.pf-banner,.pf-claim{border:1px solid rgba(224,138,60,.5);border-radius:9px;padding:20px 22px;background:rgba(192,96,16,.08)}
.pf-banner-title,.pf-claim-title{margin:0 0 8px;display:flex;align-items:center;gap:10px;font:700 12px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:#E08A3C}
.pf-banner-dot{width:9px;height:9px;border-radius:50%;background:#E08A3C;flex:none}
.pf-banner-text{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.pf-claim-text{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.pf-claim-text b{font:500 20px/1 var(--fmono);font-weight:500;color:var(--gold);margin:0 8px 0 0}
.pf-banner-btn{min-height:46px;padding:13px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(20,10,8,.7);color:var(--ink);font:600 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}

/* Loading / error line */
.pf-msg{margin:0;font-size:13.5px;line-height:1.55;color:#B9A594;min-height:20px}
.pf-msg.is-err{color:#E08A3C}
.pf-retry{margin-top:14px;min-height:46px;padding:13px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(20,10,8,.7);color:var(--ink);font:600 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}

/* Faction mastery and collection share one row component: a name, a figure
   and a track. The two differ only in what the figure counts. */
.pf-facs,.pf-mastery{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pf-fac{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:14px clamp(14px,3vw,20px);border-bottom:1px solid var(--line);background:var(--ground2)}
.pf-fac:last-child{border-bottom:0}
.pf-fac-name{flex:none;min-width:118px;font:700 14px/1.2 var(--fdisp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.pf-fac-count{flex:none;min-width:76px;font:500 14px/1 var(--fmono);color:var(--ink-dim)}
.pf-fac-count b{font-weight:500;color:var(--gold)}
.pf-track{flex:1 1 160px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.pf-fill{height:100%;border-radius:2px}
.pf-fac-xp{flex:none;font:500 12px/1 var(--fmono);color:var(--ink-dim)}

.pf-empty{margin:0;padding:18px;font-size:14px;line-height:1.6;color:var(--ink-dim)}

/* Decks & heroes */
.pf-decks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:18px}
.pf-deck{border:1px solid var(--line);border-radius:10px;padding:20px;background:var(--ground2)}
.pf-deck-name{display:block;font:700 14px/1.2 var(--fdisp);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.pf-deck-line{display:block;font-size:13.5px;line-height:1.55;color:var(--ink-dim)}
.pf-deck-line b{font:500 13px/1 var(--fmono);font-weight:500;color:var(--ink)}
.pf-deck-tag{display:inline-block;margin-top:9px;font:500 10px/1 var(--fmono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.pf-heroes{display:flex;flex-wrap:wrap;gap:8px}
.pf-hero{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:7px;background:var(--raised)}
.pf-hero-name{font:700 13px/1.2 var(--fdisp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pf-hero-tag{font:600 9px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* Achievements: a card each, in progress first, finished last. */
.pf-achv{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.pf-ach{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--ground2)}
.pf-ach-head{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.pf-ach-name{font:700 13px/1.2 var(--fdisp);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pf-ach.is-done .pf-ach-name{color:var(--gold)}
.pf-ach-n{flex:none;font:500 11px/1.3 var(--fmono);color:var(--ink-dim)}
.pf-ach.is-done .pf-ach-n{color:#7FE3A0}
.pf-ach-text{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-dim);text-wrap:pretty}
.pf-ach-prize{margin:10px 0 0;font:500 11.5px/1.4 var(--fmono);color:var(--ink-dim)}

/* Edit profile: a window (css/site.css .modal, opened by js/profile.js), one
   tab per thing that can change. Same input shell as the account page, so a
   player sees one kind of field across the site - but inside a modal pane the
   form drops its own card, or the window is a frame inside a frame. */
.pf-editor .pf-form{border:0;background:none;padding:0;margin:0}
.pf-editor .pf-field{max-width:none}
.pf-form{border:1px solid var(--line);border-radius:9px;background:var(--raised);padding:clamp(18px,2.6vw,24px);margin-bottom:14px;display:flex;flex-direction:column;gap:14px}
.pf-form h3{margin:0;font:700 16px/1.2 var(--fdisp);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.pf-form-note{margin:-4px 0 0;max-width:62ch;font-size:13.5px;line-height:1.6;color:var(--ink-dim);text-wrap:pretty}
.pf-field{display:flex;flex-direction:column;gap:7px;max-width:420px}
.pf-label{font:600 11px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.pf-input{width:100%;min-height:48px;padding:13px 16px;border-radius:7px;background:#0F0705;border:1px solid var(--line);color:var(--ink);font:400 15px/1.2 var(--fbody);outline-offset:2px}
.pf-input:focus{border-color:var(--gem);outline:2px solid rgba(47,212,220,.45)}
.pf-input.is-bad{border-color:rgba(224,96,60,.75)}
.pf-form-row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.pf-btn{min-height:46px;padding:13px 18px;border:1px solid var(--line);border-radius:6px;background:rgba(20,10,8,.7);color:var(--ink);font:600 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:border-color .18s,color .18s}
.pf-btn:hover{color:var(--gold);border-color:var(--gold-core)}
.pf-btn:disabled{opacity:.6;cursor:default}
.pf-btn.is-danger{color:#E0603C;border-color:rgba(224,96,60,.55)}
.pf-btn.is-danger:hover{color:#fff;background:rgba(224,96,60,.22);border-color:#E0603C}
.pf-form-msg{font-size:13.5px;line-height:1.5;color:var(--ink-dim);max-width:52ch}
.pf-form-msg.is-ok{color:#7FE3A0}
.pf-form-msg.is-err{color:#E08A3C}
/* Per-field, so "there is no @ in that" sits under the address rather than
   next to the button. Empty means gone: no reserved gap that never fills. */
.pf-field-msg{margin:0;font-size:13px;line-height:1.5;max-width:44ch;text-wrap:pretty}
.pf-field-msg:empty{display:none}
.pf-field-msg.is-err{color:#E08A3C}
.pf-field-msg.is-hint{color:var(--ink-dim)}

/* One column below the width where a 348px rail plus a readable main column
   stop fitting. The rail goes FIRST: on a phone, who you are and what you can
   change is the reason to open this page on a phone at all. */
@media (max-width:1023.98px){
  .pf-grid{grid-template-columns:minmax(0,1fr)}
  .pf-rail{position:static;top:auto}
  .pf-stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* Under Sign out, in its shape: the last thing in the sidebar and the only
   one that leaves the page, to /delete-account where the explanation and the
   form live together. A link, so it works before any script runs. */
.pf-signout.is-danger{display:block;text-align:center;text-decoration:none;margin-top:10px;color:#E0603C;border-color:rgba(224,96,60,.55)}
.pf-signout.is-danger:hover{color:#fff;background:rgba(224,96,60,.22);border-color:#E0603C}