/* =====================================================================
   Member area component layer (auth, account dashboard, settings shell,
   trade lists, pokedex, trainer directory). Token-driven (var(--snk-*));
   depends on snk-remote-raids.css for the shared .rr-* primitives + --rr-live.
   Lifted verbatim from the approved mockups (docs/superpowers/mockups/auth/).
   ===================================================================== */

/* ---------- icon discipline (member scopes) ----------
   Same zero-specificity baseline as snk-remote-raids.css: standalone Lucide
   icons default to ~1rem; framed icons (.ico 2.2rem, .acct-tile .ic, etc.)
   opt UP via their own rules. :where() keeps this at specificity 0. */
:where(.snk-auth,.acct-grid,.acct-layout,.acct-side,.acct-panel,.trn-grid,.trn-card,.pdx-grid,.teampick) :where(i[data-lucide],svg.lucide){width:1rem;height:1rem}

/* ---- auth cards (sign-in / sign-up) ---- */
/* auth card uses an intentional larger 20px radius (focal, isolated card) — not the --rr-r-* component scale */
.snk-auth{max-width:450px;margin:1rem auto;padding:2rem 1.75rem;border:1px solid var(--snk-border);border-radius:20px;background:var(--snk-surface);box-shadow:0 14px 40px var(--snk-shadow)}
.snk-auth .ico{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;margin:0 auto .9rem;background:linear-gradient(135deg,color-mix(in srgb,var(--snk-accent) 22%,var(--snk-surface)),var(--snk-surface));color:var(--snk-accent)}
.snk-auth .ico i{width:2.2rem;height:2.2rem}
.snk-auth h1{font-size:1.55rem;font-weight:800;text-align:center;letter-spacing:-.02em;margin:0 0 .35rem;color:var(--snk-text)}
.snk-auth .sub{text-align:center;color:var(--snk-text-muted);font-size:.9rem;margin-bottom:1.1rem;line-height:1.45}
.snk-auth hr{border:0;border-top:1px solid var(--snk-hairline);margin:1rem 0}
.snk-auth .field{margin-bottom:.9rem}
.snk-auth label{display:block;font-weight:700;font-size:.84rem;margin-bottom:.35rem;color:var(--snk-ink-700)}
.snk-auth label .opt{color:var(--snk-text-muted);font-weight:500}
.snk-auth .links{text-align:center;margin-top:1.1rem;font-size:.88rem;display:flex;flex-direction:column;gap:.4rem}
.snk-auth .links a{color:var(--snk-accent);text-decoration:none;font-weight:600}
.pw-reqs{list-style:none;padding:0;margin:.55rem 0 0;font-size:.78rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem}
.pw-reqs li{color:var(--snk-text-muted);display:flex;gap:.35rem;align-items:center}
.pw-reqs li::before{content:"○";font-weight:800}
.pw-reqs li.ok,.pw-reqs li.text-success{color:var(--snk-success)} .pw-reqs li.ok::before,.pw-reqs li.text-success::before{content:"✓"}
.pw-reqs li.text-danger{color:var(--snk-danger)}
/* bridge the existing sign-up JS (Bootstrap is-invalid) onto .rr-input */
.rr-input.is-invalid{border-color:var(--snk-danger)}
.rr-input.is-invalid ~ .invalid-feedback{display:block;color:var(--snk-danger);font-size:.78rem;margin-top:.25rem}
.terms-toggle{width:100%;border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:999px;padding:.65rem;font-weight:800;color:var(--snk-ink-700);cursor:pointer;display:flex;gap:.4rem;align-items:center;justify-content:center}
.terms-toggle.on{background:var(--snk-success);color:#fff;border-color:var(--snk-success)}
.terms-toggle.is-invalid{border-color:var(--snk-danger)}
.terms-note{font-size:.74rem;color:var(--snk-text-muted);text-align:center;margin-top:.5rem;line-height:1.4}
.terms-note a{color:var(--snk-accent)}
.teampick{display:flex;gap:.4rem}
.teampick button{flex:1;border:1px solid var(--snk-border-strong);background:var(--snk-surface);border-radius:var(--rr-r-md);padding:.5rem;font-weight:800;font-size:.8rem;cursor:pointer;color:var(--snk-ink-700)}
.teampick button.mystic.on{background:linear-gradient(135deg,#1b6ec2,#2aa5e6);color:#fff;border-color:transparent}
.teampick button.valor.on{background:linear-gradient(135deg,#d23b3b,#f0683f);color:#fff;border-color:transparent}
.teampick button.instinct.on{background:linear-gradient(135deg,#e0a800,#f5d042);color:#fff;border-color:transparent}

/* teamless hero fallback (rr-phero t-mystic/valor/instinct live in snk-remote-raids.css) */
.rr-phero.t-none{background:linear-gradient(135deg,#475569,#64748b)}

/* ---- account dashboard action grid ---- */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.acct-tile{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1.05rem .8rem;text-align:center;text-decoration:none;color:var(--snk-text);font-weight:700;font-size:.88rem;transition:.12s;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.acct-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px var(--snk-shadow);border-color:var(--snk-accent)}
.acct-tile .ic{width:2.7rem;height:2.7rem;border-radius:var(--rr-r-md);display:grid;place-items:center;background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent)}
.acct-tile.feature{border-color:color-mix(in srgb,var(--rr-live) 40%,var(--snk-border))}
.acct-tile.feature .ic{background:color-mix(in srgb,var(--rr-live) 14%,var(--snk-surface));color:var(--rr-live)}
.acct-tile .new{font-size:.6rem;font-weight:800;background:var(--rr-live);color:#fff;border-radius:5px;padding:.05rem .3rem;text-transform:uppercase}

/* ---- account settings shell ---- */
.acct-layout{display:grid;grid-template-columns:230px 1fr;gap:1.2rem;align-items:start}
.acct-side{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:.55rem;position:sticky;top:5.5rem}
.acct-side a{display:flex;gap:.6rem;align-items:center;padding:.6rem .7rem;border-radius:var(--rr-r-sm);text-decoration:none;color:var(--snk-ink-700);font-weight:700;font-size:.87rem}
.acct-side a i{width:1.05rem;height:1.05rem}
.acct-side a.on{background:color-mix(in srgb,var(--snk-accent) 13%,var(--snk-surface));color:var(--snk-accent)}
.acct-side a.danger{color:var(--snk-danger)}
.acct-panel{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1.5rem 1.6rem}
.acct-panel h2{font-size:1.2rem;font-weight:800;margin:0 0 1.1rem;letter-spacing:-.01em;color:var(--snk-text)}
.avatar-row{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem}
.avatar-row .rr-av{width:72px;height:72px;font-size:1.7rem}
.chips-in{display:flex;gap:.4rem;flex-wrap:wrap}
.chip-tag{background:color-mix(in srgb,var(--snk-accent) 12%,var(--snk-surface));color:var(--snk-accent);border-radius:999px;padding:.3rem .65rem;font-weight:700;font-size:.8rem;display:inline-flex;gap:.3rem;align-items:center}
.switch-row{display:flex;align-items:center;gap:.7rem;padding:.75rem 0;border-top:1px solid var(--snk-hairline)}
.switch-row .lbl{font-weight:700;color:var(--snk-text)} .switch-row .lbl span{display:block;font-weight:500;color:var(--snk-text-muted);font-size:.8rem}
.switch{margin-left:auto;width:2.6rem;height:1.5rem;border-radius:999px;background:var(--snk-accent);position:relative;flex:0 0 auto;border:0;cursor:pointer}
.switch::after{content:"";position:absolute;top:.15rem;right:.15rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff}
.switch.off{background:var(--snk-border-strong)} .switch.off::after{right:auto;left:.15rem}
textarea.rr-input{min-height:90px;resize:vertical}

/* ---- trainer directory ---- */
.trn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem}
.trn-card{border:1px solid var(--snk-border);border-radius:var(--rr-r-lg);background:var(--snk-surface);padding:1rem}
.trn-card .fc{margin-top:.7rem;background:var(--snk-surface-3);border:1px dashed var(--snk-border-strong);border-radius:9px;padding:.4rem .6rem;font-weight:800;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.4rem;color:var(--snk-text)}
.trn-card .fc button{margin-left:auto;border:0;background:var(--snk-accent);color:#fff;border-radius:7px;width:1.7rem;height:1.7rem;display:grid;place-items:center;cursor:pointer}
.trn-badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.6rem}
.trn-b{font-size:.72rem;font-weight:700;border-radius:7px;padding:.2rem .45rem;display:inline-flex;gap:.25rem;align-items:center}
.trn-b i{width:.85rem;height:.85rem}
.trn-b.raid{background:color-mix(in srgb,var(--rr-live) 13%,var(--snk-surface));color:var(--rr-live)}
.trn-b.trade{background:color-mix(in srgb,var(--snk-success) 14%,var(--snk-surface));color:var(--snk-success)}
.trn-b.gift{background:color-mix(in srgb,var(--snk-brand) 30%,var(--snk-surface));color:var(--rr-amber)}

/* ---- pokedex picker ---- */
.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.4rem}
.pdx-cell{border:1px solid var(--snk-border);border-radius:var(--rr-r-sm);background:var(--snk-surface);padding:.3rem;text-align:center;position:relative;cursor:pointer}
.pdx-cell img{width:46px;height:46px;object-fit:contain}
.pdx-cell.owned{border-color:var(--snk-success);background:color-mix(in srgb,var(--snk-success) 9%,var(--snk-surface))}
.pdx-cell.owned::after{content:"✓";position:absolute;top:1px;right:5px;color:var(--snk-success);font-weight:800;font-size:.85rem}
.pdx-cell .dx{font-size:.6rem;color:var(--snk-text-muted)}

@media(max-width:760px){.acct-layout{grid-template-columns:1fr}.acct-side{position:static;display:flex;gap:.3rem;overflow:auto}.acct-side a{white-space:nowrap}}

/* mobile nav-offset: clear the floating bottom tab bar (visible ≤991.98px).
   --rr-botgap is defined in snk-remote-raids.css (loaded first). */
@media(max-width:991.98px){
  .acct-layout{padding-bottom:var(--rr-botgap,calc(3.6rem + env(safe-area-inset-bottom)))}
}