/* Rootquest — Phase 1 stylesheet
   Split out of index.html so the Content Security Policy can
   forbid inline style. Tokens are from DESIGN.md §2; do not
   introduce colours outside them. No dark mode. */

:root{
  --paper:#F2F4F1; --paper-raised:#FBFCFA; --ink:#1B2A26;
  --ink-soft:#5A6B64; --verdigris:#2E7D6B; --rule:#D3DAD4;
  --legendary:#B87333; --epic:#6B4E9E; --rare:#2E6FA3; --common:#7C8C85;
  --danger:#A63D5C;
  --display:'Fraunces',Georgia,serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --data:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
  color:var(--ink);font-family:var(--body);line-height:1.6;
}
.wrap{max-width:44rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
:focus-visible{outline:2px solid var(--verdigris);outline-offset:3px}
.hidden{display:none !important}

/* ── seal & brand ─────────────────────────────── */
.brand{display:flex;align-items:center;gap:.7rem}
.wordmark{
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1;
  font-optical-sizing:auto;font-weight:700;
  font-size:clamp(1.9rem,7vw,2.5rem);letter-spacing:-.02em;
  line-height:1;margin:0;
}
.wordmark.small{font-size:1.6rem}
.seal .ring{fill:none;stroke:var(--verdigris);stroke-width:2.5;stroke-dasharray:5 4;opacity:.85}
.seal .trace{fill:none;stroke:var(--verdigris);stroke-width:2;opacity:.85}
.seal .node{fill:var(--verdigris);opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .seal .ring{stroke-dashoffset:120;animation:draw .9s ease-out .1s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}

.lede{margin:1.6rem 0 0;font-size:1.05rem;max-width:32rem}
.sub{margin:1rem 0 0;color:var(--ink-soft);font-size:.95rem;max-width:32rem}
.sub.fine{font-size:.85rem}
.sub.tight{margin-top:0}

hr.double{
  border:0;height:4px;margin:2.25rem 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}

/* ── panels ───────────────────────────────────── */
.panel{
  background:var(--paper-raised);border:1px solid var(--rule);
  border-left:3px solid var(--verdigris);border-radius:2px;
  padding:1.35rem 1.4rem;margin:0 0 1rem;
}
.panel h2{
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1;
  font-optical-sizing:auto;font-weight:600;
  font-size:1.25rem;letter-spacing:-.01em;margin:0 0 .5rem;
}
.panel p{margin:0 0 .9rem;font-size:.93rem}
.panel p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--data);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--verdigris);
  display:block;margin-bottom:.45rem;
}
.title{
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1;
  font-optical-sizing:auto;font-weight:700;
  font-size:1.7rem;letter-spacing:-.015em;margin:0 0 .4rem;
}

/* ── forms ────────────────────────────────────── */
label,.label{
  display:block;font-family:var(--data);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .4rem;
}
input[type=email],input[type=text]{
  width:100%;padding:.65rem .8rem;
  border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink);
  font-family:var(--data);font-size:.9rem;
}
input:focus{border-color:var(--verdigris)}
.field{margin:0 0 1rem}
.hint{font-size:.78rem;color:var(--ink-soft);margin:.4rem 0 0;font-family:var(--data)}

button{
  font-family:var(--data);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.7rem 1.2rem;border-radius:2px;cursor:pointer;
  border:1px solid var(--verdigris);
  background:var(--verdigris);color:#fff;
  transition:opacity .12s ease;
}
button:hover{opacity:.88}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:transparent;color:var(--verdigris)}
button.link{
  background:none;border:none;color:var(--verdigris);
  padding:0;text-transform:none;letter-spacing:0;
  font-size:.82rem;text-decoration:underline;text-underline-offset:2px;
}
.actions{margin:1.1rem 0 0}

.msg{
  margin:1rem 0 0;padding:.7rem .9rem;border-radius:2px;
  font-family:var(--data);font-size:.8rem;line-height:1.6;
  border:1px solid var(--rule);background:var(--paper);
}
.msg.err{border-left:3px solid var(--danger);color:var(--danger)}
.msg.ok{border-left:3px solid var(--verdigris)}

/* ── character ────────────────────────────────── */
.stage{
  border:1px solid var(--rule);border-radius:2px;
  background:linear-gradient(#EDF1EC 0%,#F7F9F6 62%,#EAEEE8 62%,#E4E9E2 100%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:1rem;min-height:15rem;
}
.stage svg{width:9rem;height:auto;display:block}

.creator{display:grid;gap:1.25rem}
@media (min-width:40rem){
  .creator{grid-template-columns:15rem 1fr;align-items:start}
}

.optset{margin:0 0 1.1rem}
.swatches{display:flex;flex-wrap:wrap;gap:.45rem}
.sw{
  width:2.1rem;height:2.1rem;border-radius:2px;
  border:1px solid var(--rule);cursor:pointer;padding:0;
  background-clip:padding-box;
}
.sw[aria-pressed=true]{outline:2px solid var(--verdigris);outline-offset:2px}
.chip{
  padding:.45rem .8rem;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper);color:var(--ink-soft);
  font-family:var(--data);font-size:.72rem;
  letter-spacing:.06em;text-transform:none;cursor:pointer;
}
.chip[aria-pressed=true]{
  border-color:var(--verdigris);color:var(--verdigris);
  background:var(--paper-raised);
}

/* ── build slider ─────────────────────────────── */
.range-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.readout{
  font-family:var(--data);font-size:.68rem;letter-spacing:.08em;
  color:var(--verdigris);
}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;background:transparent;margin:.35rem 0 0;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--rule);border-radius:0;
}
input[type=range]::-moz-range-track{
  height:2px;background:var(--rule);border-radius:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:.85rem;height:1.4rem;margin-top:-.68rem;border-radius:2px;
  background:var(--verdigris);border:1px solid var(--verdigris);
}
input[type=range]::-moz-range-thumb{
  width:.85rem;height:1.4rem;border-radius:2px;
  background:var(--verdigris);border:1px solid var(--verdigris);
}
input[type=range]:focus-visible{outline:2px solid var(--verdigris);outline-offset:6px}
.range-ends{
  display:flex;justify-content:space-between;
  font-family:var(--data);font-size:.66rem;color:var(--ink-soft);
  margin:.3rem 0 0;
}

/* ── profile ──────────────────────────────────── */
.profile-head{display:grid;gap:1.5rem}
@media (min-width:40rem){
  .profile-head{grid-template-columns:14rem 1fr;align-items:start}
}
.handle{
  font-family:var(--display);font-variation-settings:"SOFT" 40,"WONK" 1;
  font-optical-sizing:auto;font-weight:700;
  font-size:1.6rem;letter-spacing:-.015em;margin:0;
}
.meta-line{
  font-family:var(--data);font-size:.78rem;color:var(--ink-soft);
  margin:.35rem 0 0;
}
.empty{
  border:1px dashed var(--rule);border-radius:2px;
  padding:1.5rem 1.25rem;text-align:center;
  background:rgba(251,252,250,.5);
}
.empty p{margin:0;font-family:var(--data);font-size:.8rem;color:var(--ink-soft)}
.empty p + p{margin-top:.5rem;opacity:.75;font-size:.74rem}

.section{margin-top:2.25rem}

/* ── wardrobe ─────────────────────────────────── */
.wardrobe{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
}
.slot{
  border:1px dashed var(--rule);border-radius:2px;
  background:rgba(251,252,250,.5);
  min-height:5.5rem;padding:.7rem .5rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
}
.slot-mark{
  width:1.4rem;height:1.4rem;border-radius:50%;
  border:1.5px dashed var(--rule);
}
.slot-label{
  font-family:var(--data);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
.tier-key{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0}
.tier{
  font-family:var(--data);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.25rem .5rem;border-radius:2px;
  border:1px solid var(--rule);color:var(--ink-soft);
}
.tier-legendary{border-color:var(--legendary);color:var(--legendary)}
.tier-epic{border-color:var(--epic);color:var(--epic)}
.tier-rare{border-color:var(--rare);color:var(--rare)}
.tier-common{border-color:var(--common);color:var(--common)}

.topbar{
  display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;
}
footer{margin:3rem 0 0;font-family:var(--data);font-size:.72rem;color:var(--ink-soft);opacity:.8}
footer a{color:var(--verdigris)}

@media (max-width:24rem){
  .wardrobe{grid-template-columns:repeat(2,1fr)}
}