/* Two themes, both dark: Nocturne (the default, below) and Pride (dark).
   --h0..--h5 colour the rewards picked under "Looking for", one per search. */
:root{
  --stone:#141413; --card:#1F1E1D; --sunk:#191817; --rule:#3A3936;
  --ink:#F5F4ED; --ink-2:#C3C1B7; --ink-3:#8B8A82;
  --amber:#D97757; --amber-soft:#2C201B;
  --ant:#D9A441; --amal:#5FA1E0; --men:#D8544E; --theo:#7FBCA4; --imp:#A79BD9;
  --ok:#7FBCA4; --no:#D8544E;
  --h0:#D97757; --h1:#56C2E6; --h2:#C5D45C; --h3:#EE7FC9; --h4:#B4A2F2; --h5:#5ED8B8;
  --shadow:0 0 0 1px rgba(245,244,237,.04);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="pride-dark"]{
  --stone:#120E18; --card:#1C1624; --sunk:#16111D; --rule:#342A42;
  --ink:#F2EDF7; --ink-2:#C2B8CE; --ink-3:#8E84A0;
  --amber:#FF62AE; --amber-soft:#2A1523;
  --ant:#F0A63C; --amal:#5B9CF0; --men:#F0605A; --theo:#5BC47A; --imp:#B98AE8;
  --ok:#5BC47A; --no:#F0605A;
  --h0:#FF62AE; --h1:#5BC8F0; --h2:#C9DB52; --h3:#FFA24C; --h4:#B98AE8; --h5:#5BD6A8;
  --shadow:0 0 0 1px rgba(242,237,247,.05);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:220px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--ink);
  font-family:Karla,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5}
h1,h2,h3{font-family:"Bodoni Moda","Didot","Times New Roman",serif;font-weight:600;margin:0}
.wrap{max-width:1280px;margin:0 auto;padding:0 18px 80px}
img.ic{width:20px;height:20px;flex:0 0 20px;object-fit:contain;image-rendering:auto}


/* ---------- shared controls ---------- */
.ghost{font:inherit;font-size:13px;color:var(--ink-2);background:none;
  border:1px solid var(--rule);border-radius:2px;padding:5px 10px;cursor:pointer}
.ghost:hover{color:var(--ink);border-color:var(--ink-3)}
.barsel select,.field select{font:inherit;font-size:13px;color:var(--ink);
  background:var(--sunk);border:1px solid var(--rule);border-radius:2px;padding:4px 6px}
select:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}

/* ---------- panels ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;
  padding-top:18px}
@media (max-width:1000px){.cols{grid-template-columns:minmax(0,1fr)}}
section.panel{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  margin-bottom:18px;box-shadow:var(--shadow)}
.panel > h2{font-size:17px;padding:12px 16px 10px;border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.panel > h2 .hint{font-family:Karla,sans-serif;font-size:12px;font-weight:400;color:var(--ink-3)}
.panel .body{padding:6px 16px 14px}

/* ---------- tooltip ---------- */
.tip{position:fixed;z-index:80;pointer-events:none;opacity:0;transform:translateY(-3px);
  background:var(--card);color:var(--ink);border:1px solid var(--ink-3);border-radius:3px;
  padding:9px 11px 10px;font-size:12.5px;line-height:1.45;
  box-shadow:0 6px 22px rgba(0,0,0,.22);transition:opacity .09s ease}
.tip.on{opacity:1;transform:none}
.tip h4{font-family:Karla,sans-serif;font-size:12.5px;font-weight:700;margin:0 0 4px}
.tip h5{font-family:Karla,sans-serif;font-size:10.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.05em;text-transform:uppercase;margin:8px 0 3px}
.tip p{margin:2px 0;color:var(--ink-2)}
.hastip{cursor:help;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--ink-3);text-underline-offset:3px}
.buyer.hastip,.tchip.hastip{text-decoration:none;cursor:pointer}

.tiptab{border-collapse:collapse;width:100%;margin:4px 0 6px;font-variant-numeric:tabular-nums}
.tiptab th,.tiptab td{padding:3px 0 3px 10px;text-align:right;border-bottom:1px dotted var(--rule);
  color:var(--ink-2);font-weight:400}
.tiptab th{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tiptab th:first-child,.tiptab td:first-child{text-align:left;padding-left:0;color:var(--ink)}
.tiptab tr.short td:last-child{color:var(--no);font-weight:700}
[hidden]{display:none!important}

/* the build notice: a themed card just under the sticky header, top right */
.toast{position:fixed;z-index:90;right:18px;top:80px;display:flex;align-items:flex-start;gap:10px;
  width:min(420px,calc(100vw - 24px));background:var(--card);color:var(--ink);
  border:1px solid var(--ink-3);border-left:4px solid var(--ok);border-radius:3px;
  padding:11px 8px 12px 14px;font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,.5);
  animation:toastin .16s ease-out}
.toast.warn{border-left-color:var(--amber)}
.toast .tbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.toast .tbody b{font-size:14px;line-height:1.3}
.toast .tbody span{color:var(--ink-2);line-height:1.45}
.toast .ghost{flex:0 0 auto;align-self:center}
.toast .tclose{flex:0 0 auto;width:24px;height:24px;border:0;border-radius:2px;background:none;
  color:var(--ink-3);font:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0}
.toast .tclose:hover{color:var(--ink);background:var(--sunk)}
@keyframes toastin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:640px){ .toast{left:10px;right:10px;width:auto} }
.icfb{display:inline-flex;align-items:center;justify-content:center;border-radius:3px;
  border:1px solid var(--rule);background:var(--sunk);color:var(--ink-3);font-size:10.5px;
  font-weight:700;font-family:Karla,sans-serif;line-height:1}
.iconnote{margin:14px 0 0;padding:8px 12px;border-left:3px solid var(--amber);background:var(--card);
  font-size:12.5px;color:var(--ink-2);max-width:90ch}
.ghost.arm{color:var(--no);border-color:var(--no)}
.credit{margin:22px 0 0;font-size:12px;color:var(--ink-3)}
.credit a{color:var(--ink-2)}

/* ---------- toggles set on <html> ---------- */
.noscrip .scv{display:none!important}
/* ---------- details: each kind has its own switch; off hides it ---------- */
.no-cost .dt-cost,.no-zero .dt-zero,.no-acts .dt-acts,.no-notes .dt-notes{display:none!important}
.panel > h2 .dtick{flex:0 0 auto;margin-left:auto;font-family:Karla,sans-serif;font-size:12px;
  font-weight:400;color:var(--ink-3)}
.panel > h2 .dtick + #recfold{margin-left:0}
.tiptab tr.best td{color:var(--ok);font-weight:700}
.tiptab tr.tot td{font-weight:700;border-top:1px solid var(--rule)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}