/* Wraeclast Index — shared tokens match the drill-down page (explore.html) */
:root{
  --ground:#F4F1E9; --surface:#FFFFFF; --raised:#EDE8DC; --sunken:#E4DED0;
  --line:#D6CFBE; --line-soft:#E6E0D2;
  --text:#22201B; --muted:#6B655A; --faint:#918A7C;
  --accent:#8A5E12; --accent-soft:#F0E3C6;
  --str:#A8362C; --dex:#3F7A3C; --int:#2F5FA0; --any:#7A7266;
  --pos:#2F6B34; --neg:#A8362C;
  --shadow:0 1px 2px rgba(34,32,27,.07), 0 6px 18px rgba(34,32,27,.06);
  --shadow-hi:0 2px 4px rgba(34,32,27,.08), 0 14px 32px rgba(34,32,27,.10);
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --disp:'Fraunces', Georgia, 'Times New Roman', serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#14120F; --surface:#1B1915; --raised:#232019; --sunken:#100E0B;
    --line:#332E24; --line-soft:#272319;
    --text:#E9E3D4; --muted:#9E9686; --faint:#7A7364;
    --accent:#CFA75E; --accent-soft:#2B2213;
    --str:#D2584C; --dex:#6EAE68; --int:#6C9AD6; --any:#B6AE9D;
    --pos:#77BB6E; --neg:#D2584C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-hi:0 2px 4px rgba(0,0,0,.45), 0 16px 36px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#14120F; --surface:#1B1915; --raised:#232019; --sunken:#100E0B;
  --line:#332E24; --line-soft:#272319;
  --text:#E9E3D4; --muted:#9E9686; --faint:#7A7364;
  --accent:#CFA75E; --accent-soft:#2B2213;
  --str:#D2584C; --dex:#6EAE68; --int:#6C9AD6; --any:#B6AE9D;
  --pos:#77BB6E; --neg:#D2584C;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-hi:0 2px 4px rgba(0,0,0,.45), 0 16px 36px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-padding-top:64px}
body{margin:0; background:var(--ground); color:var(--text); font:14px/1.45 var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column}
main{flex:1}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0; text-wrap:balance}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.top-in{max-width:1400px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{font-family:var(--disp); font-size:19px; font-weight:600; text-decoration:none; letter-spacing:-.01em; white-space:nowrap}
.brand em{font-style:normal; color:var(--accent)}
.tabs{display:flex; gap:2px; background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:2px;
  overflow-x:auto; scrollbar-width:none; max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:5px 12px; border-radius:6px; font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; white-space:nowrap}
.tabs a:hover{color:var(--text)}
.tabs a[aria-current="page"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
.tabs-sep{width:1px; background:var(--line); margin:4px 4px}
.grow{flex:1}
.stamp{font-size:11.5px; color:var(--faint); white-space:nowrap}
.stamp b{color:var(--muted); font-weight:500}

/* ---------- home ---------- */
.view{max-width:1400px; margin:0 auto; padding:0 16px 40px}
.hero{display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:clamp(40px, 16vh, 150px); padding-bottom:18px; transition:padding .45s cubic-bezier(.2,.8,.2,1)}
.hero.docked{padding-top:22px}
.hero-title{font-family:var(--disp); font-weight:600; font-size:clamp(34px, 6vw, 54px); letter-spacing:-.02em;
  transition:opacity .3s, transform .45s cubic-bezier(.2,.8,.2,1), max-height .45s; max-height:80px; overflow:hidden}
.hero-title em{font-style:normal; color:var(--accent)}
.hero-sub{color:var(--muted); margin:6px 0 22px; font-size:14px; transition:opacity .3s, max-height .45s, margin .45s; max-height:90px; overflow:hidden}
.hero-tag{display:block; font-family:var(--disp); font-size:17px; color:var(--text); letter-spacing:.02em}
.hero-more{display:block; margin-top:4px; font-size:13px}
.hero.docked .hero-title,.hero.docked .hero-sub{opacity:0; max-height:0; margin:0; transform:translateY(-8px)}

.searchbox{position:relative; width:min(720px, 100%)}
.searchbox input{width:100%; height:56px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  padding:0 52px 0 50px; font-size:17px; box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s}
.searchbox input::placeholder{color:var(--faint)}
.searchbox input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)}
.searchbox input::-webkit-search-cancel-button{-webkit-appearance:none}
.searchbox-ic{position:absolute; left:18px; top:50%; width:19px; height:19px; translate:0 -50%; color:var(--faint); pointer-events:none}
.searchbox-kbd{position:absolute; right:16px; top:50%; translate:0 -50%; font:500 12px var(--mono); color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:1px 7px; background:var(--raised)}
.searchbox input:focus ~ .searchbox-kbd{opacity:0}

.kinds{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:20px;
  padding:4px 12px; font-size:12.5px; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s, border-color .15s}
.chip:hover{border-color:var(--accent); color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--ground); font-weight:500}
.chip .ct{font-family:var(--mono); font-size:11px; opacity:.75; margin-left:5px}

.quote{margin:4px auto 2px; text-align:center; font-family:var(--disp, serif); color:var(--muted)}
.quote blockquote{margin:0; font-style:italic; font-size:15px; letter-spacing:.02em}
.quote blockquote::before{content:'\201C'} .quote blockquote::after{content:'\201D'}
.quote figcaption{font-size:12px; color:var(--faint); margin-top:2px}
.quote figcaption::before{content:'\2014\00a0'}
.quote[hidden]{display:none}
.status{text-align:center; color:var(--faint); font-size:12.5px; min-height:18px; margin:6px 0 14px}
.status b{color:var(--muted); font-weight:500}


.more{text-align:center; margin-top:18px}
.btn{border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:8px; padding:7px 16px; cursor:pointer; font-size:13px; font-weight:500}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.btn.primary:hover{filter:brightness(1.08)}
.empty{text-align:center; padding:40px 16px; color:var(--muted)}
.empty h3{font-family:var(--disp); font-size:19px; color:var(--text); margin-bottom:6px}

/* ---------- shared page chrome for Build / Currency ---------- */
.pagehd{padding:28px 0 16px; display:flex; flex-direction:column; gap:6px}
.pagehd h2{font-family:var(--disp); font-size:28px; font-weight:600; letter-spacing:-.01em}
.pagehd p{margin:0; color:var(--muted); max-width:72ch}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint)}
.field{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:13px; min-width:0}
.field:focus{outline:none; border-color:var(--accent)}
textarea.field{width:100%; min-height:92px; resize:vertical; font:12px/1.4 var(--mono)}
.seg{display:flex; background:var(--sunken); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px; flex-wrap:wrap}
.seg button{border:0; background:transparent; color:var(--muted); cursor:pointer; padding:5px 11px; border-radius:6px; font-size:12.5px; font-weight:500; white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--text); box-shadow:var(--shadow)}
.note{font-size:12px; color:var(--faint); line-height:1.5}
.note b{color:var(--muted)}
.sect{margin:26px 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sect h3{font-family:var(--disp); font-size:19px; font-weight:600}
.sect p{margin:0; font-size:12.5px; color:var(--faint)}
.err{color:var(--neg); font-size:13px}
.controls{display:grid; gap:10px; margin-bottom:14px}
.controls .field{min-width:180px}
.star{position:relative; z-index:1; background:none; border:0; color:var(--faint); font-size:17px; line-height:1; cursor:pointer; padding:0 2px}
.star:hover{color:var(--text)}
.star[aria-pressed="true"]{color:var(--accent)}
label.note{display:inline-flex; gap:6px; align-items:center; cursor:pointer}
.buildsum{margin-top:18px; display:grid; gap:12px}
.bs-hd{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.bs-hd h3{font-family:var(--disp); font-size:22px}
.verdict{margin:0; font-size:15px; line-height:1.5; padding:10px 12px; border-radius:8px; background:var(--raised); border-left:3px solid var(--accent)}
.verdict.def{border-left-color:var(--neg)}
.bs-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px 16px; margin:0}
.bs-grid dt{font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
.bs-grid dd{margin:2px 0 0; font:600 16px var(--mono); font-variant-numeric:tabular-nums}
.bs-grid dd small{font-size:11px; font-weight:500; color:var(--faint)}

.foot{border-top:1px solid var(--line); margin-top:30px}
.foot p{max-width:1400px; margin:0 auto; padding:18px 16px 30px; color:var(--faint); font-size:11.5px; line-height:1.6}
.foot a{color:var(--muted)}

@media (max-width:640px){
  .top-in{gap:8px}
  .stamp{display:none}
  .searchbox input{height:50px; font-size:16px}
  .searchbox-kbd{display:none}
  .hero{padding-top:36px}
}


/* Farms tab */
.fm-ver{display:grid; gap:8px; margin-bottom:16px; padding:12px 14px; background:var(--surface); border:2px solid var(--line); border-radius:var(--r)}
.fm-label{margin:0; font-size:14px; line-height:1.5; color:var(--muted)}
.fm-label b{color:var(--text); font-weight:600}
.fm-label a{color:var(--accent); font-weight:600; text-underline-offset:2px}
.fm-warn{margin:0; font-size:13px; line-height:1.45; color:var(--text); background:var(--blood-soft, color-mix(in srgb, var(--neg) 14%, var(--surface)));
  border-left:3px solid var(--blood, var(--neg)); border-radius:0 6px 6px 0; padding:6px 10px}
.fm-src{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12.5px}
.fm-chips{margin:0; justify-content:flex-start}
.fm-ctl .field{min-width:0}
.fm-foot{margin-top:18px}
.fm-foot a{color:var(--muted)}
.card.fm{--fm-t:var(--muted)}
.card.fm.t-s{--fm-t:var(--accent)}
.card.fm.t-a{--fm-t:var(--c-rare, #D9B566)}
.card.fm.t-b{--fm-t:var(--c-unique, #C06A2B)}
.card.fm.t-c{--fm-t:var(--str)}
.card.fm.t-f{--fm-t:var(--faint)}
.card.fm > .card-hd .card-ic{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--fm-t) 60%, transparent)}
.fm-tier{font:700 21px/1 var(--disp); color:var(--fm-t)}
.card.fm > .card-ft .kind{color:var(--fm-t)}
.fm-rates{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:11.5px; color:var(--muted)}
.fm-rate{display:inline-flex; align-items:center; gap:6px}
.fm-dots{display:inline-flex; gap:3px}
.fm-dots i{width:7px; height:7px; border-radius:50%; background:var(--line)}
.fm-dots i.on{background:var(--accent)}
.fm-miss{margin:0; font-size:11.5px; line-height:1.45; color:var(--faint)}
.fm-out{display:grid; grid-template-columns:minmax(0, 1fr); gap:4px; container-type:inline-size}
.fm-out .lbl, .fm-sec .lbl{margin:0}
.fm-row{position:relative; z-index:1; display:flex; align-items:center; gap:8px; width:100%; min-width:0; padding:4px 7px 4px 4px;
  border:0; border-radius:6px; background:var(--sunken); color:inherit; cursor:pointer; text-align:left; font-size:12.5px}
.fm-row:hover, .fm-row:focus-visible{background:var(--raised)}
.fm-row .card-ic{width:24px; height:24px; border-radius:5px}
.fm-row .card-ic img{width:22px; height:22px}
.fm-row .card-ic .ic{zoom:.6}
.fm-row .card-ic .glyph{font-size:12px}
.fm-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.fm-row .spark{flex:none; width:44px; height:16px}
.fm-p{font:600 12px var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.fm-p small{margin-left:2px; font-size:10.5px; font-weight:500; color:var(--faint)}
.fm-p.none{font:11px var(--sans); color:var(--faint)}
.fm-row .chg{font:500 11px var(--mono); white-space:nowrap}
.fm-grp{display:flex; flex-wrap:wrap; gap:4px}
.fm-grp .pill{white-space:normal; min-width:0; overflow-wrap:anywhere}
.fm-master{color:var(--muted); white-space:nowrap}
.fm-sec{display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; border-top:1px dashed var(--line); padding-top:10px}
.fm-dl{display:grid; grid-template-columns:max-content 1fr; gap:7px 14px; margin:0; font-size:13px; line-height:1.45}
.fm-dl dt{padding-top:2px; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint)}
.fm-dl dd{margin:0; min-width:0; overflow-wrap:anywhere}
.fm-tabs{margin:0; padding:0; list-style:none; display:grid; gap:5px}
.fm-tabs span{display:block; font-size:12px; color:var(--muted)}
.cards.fm-items{grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:8px}
.card.detail .fm-items .card{padding:11px 12px 9px; gap:6px; box-shadow:var(--shadow)}   /* item cards in a farm popup keep the grid size */
.card.detail .fm-items .card h3{font-size:14px}
.card.detail .fm-items .card-ic{width:40px; height:40px}
.card.detail .fm-items .card-tx{-webkit-line-clamp:3; font-size:12.5px}
.card.detail .fm-items .card-ls{font-size:12.5px}
.fm-links{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.fm-mods{margin:0; font-size:12px; line-height:1.45; color:var(--muted)}
.fm-tline{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.fm-tag{font:600 9.5px var(--sans); text-transform:uppercase; letter-spacing:.08em; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:4px; padding:0 5px}
a.pill.fm-tq{color:var(--text); text-decoration:none; border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
a.pill.fm-tq:hover{border-color:var(--accent)}
a.pill.fm-tq small{margin-left:2px; color:var(--faint)}
@container (max-width:300px){ .fm-row .spark{display:none} }
@media (max-width:480px){
  .fm-dl{grid-template-columns:1fr; gap:2px}
  .fm-dl dd{margin-bottom:6px}
}
/* end Farms tab */

/* ---------- trade page ---------- */
.linkbtn{background:none; border:0; color:var(--accent); cursor:pointer; font-size:12.5px; text-decoration:underline; text-underline-offset:2px; padding:3px 0}
.tp-ex{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.tp{display:grid; gap:12px}
.tp-h{font-family:var(--disp); font-size:16px; margin-top:6px}
.tp-pick, .tp-add{position:relative; flex:1 1 320px; max-width:560px}
.tp-pick input, .tp-add input{width:100%}
.tp-item{display:inline-flex; gap:8px; align-items:center}
.tp-group{border:2px solid var(--line); border-radius:var(--r); padding:10px 12px; display:grid; gap:8px; background:var(--sunken)}
.tp-ghd{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.tp-ghd h4{margin:0; font-size:14px}
.tp-ghd .tp-del{margin-left:auto; padding:3px 10px; font-size:12px}
.tp-mod{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 8px; border-radius:8px; background:var(--surface)}
.tp-mtext{flex:1 1 260px; font-size:13px}
.tp-mod .seg button{padding:3px 9px; font-size:12px}
.tp-num{width:90px; padding:5px 8px; font:500 13px var(--mono)}
.tp-x{padding:3px 10px; font-size:12px}
.tp-addg .btn{font-size:12.5px}
.tp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px 14px}
.tp-grid label{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted)}
.tp-grid .tp-num{width:100%}
.tp-out{position:sticky; bottom:10px; margin-top:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; z-index:5; box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tp-sum{margin:0; flex:1 1 320px; font-size:13px; line-height:1.5}

/* Atlas tab */
.at-secs{justify-content:flex-start; margin:0 0 12px}
.at-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.at-bar .field{flex:1 1 240px; max-width:440px}
.at-status{text-align:left; margin:10px 0 12px}
.at-list{border:2px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); overflow:hidden}
.at-list .empty{padding:26px 16px}
.at-row{display:grid; gap:5px; padding:9px 12px; border-bottom:1px solid var(--line-soft)}
.at-row:last-child{border-bottom:0}
.at-row:hover{background:var(--raised)}
.at-hd{display:flex; gap:8px; align-items:center; min-width:0}
.at-hd b{font-weight:600; font-size:13.5px; overflow-wrap:anywhere}
.at-tag{margin-left:auto; flex:none; font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; white-space:nowrap}
.at-x{font:500 11px var(--mono); color:var(--accent)}
.at-ls{margin:0; padding:0; list-style:none; font-size:12.5px; line-height:1.45; display:grid; gap:3px}
.at-ls li{display:flex; gap:10px; align-items:baseline}
.at-t{flex:none; width:74px; font:500 11px var(--mono); color:var(--muted); white-space:nowrap}
.at-bonus, .at-on{margin:0; font-size:11.5px; color:var(--faint); line-height:1.4}
small.at-bonus{display:block}
.at-grp{margin:0; padding:9px 12px 7px; font-family:var(--disp); font-size:14px; letter-spacing:.03em; color:var(--accent);
  background:var(--sunken); border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:baseline}
.at-grp span{font:500 11px var(--mono); color:var(--faint)}
.at-opts{display:grid; gap:4px; margin-left:10px; padding-left:10px; border-left:2px solid var(--line)}
.at-opts > span{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--faint)}
.dot.t-c{background:var(--accent)} .dot.t-n{background:var(--text)} .dot.t-s{background:var(--faint)}
.card:not(.detail) .at-pop{display:none}
.at-pop{display:grid; gap:6px}
.at-pop h4{margin:4px 0 0; font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.09em; color:var(--faint)}
@media (max-width:640px){
  .at-t{width:62px}
  .at-bar .seg{width:100%}
}
/* Trade page: popular searches from everyone */
.tp-pop{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 10px}
.tp-pop:empty{display:none}
.tp-pop .chip{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* the league clock just below the header on home (assets/league.js) */
.leagueclock{margin:10px auto 0; text-align:center; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}
.leagueclock b{color:var(--muted); font-weight:600}
.leagueclock .lc-up, .leagueclock .lc-down{font-family:var(--mono); color:var(--text)}
.leagueclock .lc-down{color:var(--accent)}
.leagueclock .lc-sep{margin:0 8px; color:var(--line)}
/* phones: the fog drifts past the crest but never makes the page wider than the screen */
@media (max-width:760px){ .hero{overflow-x:clip} }