/* ============================================================================
   wgf-classic-plus-copium.css - the /classicpluscopium page skin.

   Replaces the inline <style> block classic_plus_copium_app.py used to emit
   (kit 18 BAN list: "Inline <style> in shell output" -> extra_css). Linked by
   the module through _wgf_seo_shell(extra_css=[...]), so the shell cache-busts
   it like every other sheet.

   Palette: docs/ui-ux/17-blizzard-palette.md. Near-black slate plates, bronze
   and gold edges, gold headings, parchment body. NO green chrome anywhere in
   this file - the only green on the page is Blizzard's own uncommon-quality
   value (#1eff00), which arrives as the inline --q custom property on an item
   slot and as the client's own uncommon ring art. No gradients, no glows.

   The --cpc-* custom properties are this page's namespace and are ALSO read by
   cpc_quest.QUEST_CSS and cpc_live's markup, so retiring a name breaks them:
   --cpc-green is deliberately kept as a NAME and re-valued to bronze, which
   turns every green surface those modules paint into bronze with no edit to
   their files (one home for the value).
   ========================================================================= */

#cpc{
  /* surfaces */
  --cpc-bg:#0a0b0f;
  --cpc-panel:#0d0f14;
  --cpc-panel2:#14161c;
  --cpc-well:#0a0b0f;
  /* ink */
  --cpc-ink:#f4ecd8;
  --cpc-muted:#9d9d9d;
  --cpc-ink-dim:#b5a06a;
  /* metal */
  --cpc-gold:#ffd100;
  --cpc-gold2:#b7912f;
  --cpc-line:#6e5a2a;
  --cpc-edge:#6e5a2a;
  /* evidence tiers, mapped onto the in-game item-quality ramp so "how real"
     reads the way rarity does: gold fact, rare-blue signal, artifact-tan
     ambiguous, legendary-orange theory, poor-grey hopium. No invented hues. */
  --cpc-t-fact:#ffd100;
  --cpc-t-signal:#0070dd;
  --cpc-t-ambiguous:#e6cc80;
  --cpc-t-theory:#ff8000;
  --cpc-t-hopium:#9d9d9d;
  /* kept name, bronze value: consumed by cpc_quest.QUEST_CSS + cpc_live */
  --cpc-green:#b7912f;
  --cpc-blue:var(--cpc-t-signal);
  --cpc-yellow:var(--cpc-t-ambiguous);
  --cpc-orange:var(--cpc-t-theory);
  --cpc-red:var(--cpc-t-hopium);

  color:var(--cpc-ink);
  font-family:"ArialN","Trebuchet MS",Verdana,sans-serif;
  line-height:1.62;
  max-width:980px;margin:0 auto;padding:0 4px}
#cpc *{box-sizing:border-box}

/* FrizQT is the client's title face. Its @font-face lives only in
   assets/wgf-game-skin.css (which restyles <body>, so a shell page must not
   pull it in - kit 18 s.0). Named first so the page inherits it the day the
   faces are lifted shell-side; until then the stack falls back cleanly. */
#cpc h1,#cpc h2,#cpc h3,#cpc .cpc-h1,#cpc .cpc-title{
  font-family:"FrizQT","Trajan Pro","Palatino Linotype",Palatino,Georgia,serif}

/* ---- header block ------------------------------------------------------ */
#cpc .cpc-hero{text-align:center;position:relative;background:var(--cpc-panel);
  border:1px solid var(--cpc-edge);padding:24px 20px 18px;margin:12px 0 8px;
  box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-kicker{letter-spacing:.34em;text-transform:uppercase;font-size:11px;
  color:var(--cpc-gold2)}
#cpc h1{font-size:40px;margin:10px 0 4px;color:var(--cpc-gold);letter-spacing:.02em}
#cpc .cpc-h1{font-size:clamp(19px,2.5vw,26px);line-height:1.28;color:var(--cpc-gold);
  margin:2px 0 10px;font-weight:700;letter-spacing:.01em}
#cpc .cpc-sub{color:var(--cpc-muted);font-size:15px;max-width:660px;margin:6px auto 0}
#cpc .cpc-stamp{margin-top:14px;font-size:11px;color:var(--cpc-ink-dim)}
#cpc .cpc-thesis{color:var(--cpc-ink);font-size:15.5px;margin:14px auto 0;max-width:820px;
  text-align:left}
#cpc .cpc-thesis b{color:var(--cpc-gold)}

/* the tier legend: a quality pip instead of a coloured emoji */
#cpc .cpc-meter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 2px}
#cpc .cpc-meter span{font-size:11px;padding:5px 11px;border:1px solid var(--cpc-line);
  background:var(--cpc-well);color:var(--cpc-muted);display:inline-flex;align-items:center;gap:7px}

/* ---- table of contents ------------------------------------------------- */
#cpc .cpc-toc{border:1px solid var(--cpc-line);background:var(--cpc-panel);
  padding:12px 16px;margin:14px 0;box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-toc-h{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cpc-gold2);margin:0 0 8px}
#cpc .cpc-toc ol{margin:0;padding:0 0 0 20px;columns:2;column-gap:26px}
#cpc .cpc-toc li{margin:3px 0;font-size:13.5px;color:var(--cpc-muted);break-inside:avoid}
#cpc .cpc-toc a{color:var(--cpc-gold);text-decoration:none}
#cpc .cpc-toc a:hover{color:#ffe375;text-decoration:underline}
@media (max-width:560px){#cpc .cpc-toc ol{columns:1}}

/* ---- section rules ----------------------------------------------------- */
#cpc h2{font-size:15px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cpc-gold);margin:30px 0 4px;padding:0 0 8px;
  border-bottom:1px solid var(--cpc-line);scroll-margin-top:80px}
#cpc .cpc-note{color:var(--cpc-muted);font-size:13px;margin:0 0 14px}

/* ---- featured band: real client metal rings (wgf-chrome .wgf-qborder) --- */
#cpc .cpc-feat{border:1px solid var(--cpc-edge);background:var(--cpc-panel);
  padding:12px 8px;margin:8px 0 4px;box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-feat-h{text-align:center;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cpc-gold2);margin:0 0 10px}
#cpc .cpc-marquee{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#cpc a.cpc-mq{text-decoration:none;line-height:0;display:inline-block}
/* the frame art is Blizzard's round AH quality ring; the sheet that owns it
   (wgf-chrome.css) sizes it 44px - this page shows it at 56px. */
#cpc .cpc-mq .wgf-qborder{width:56px;height:56px}
#cpc .cpc-mq .wgf-qborder__icon{width:40px;height:40px}

/* ---- evidence cards ---------------------------------------------------- */
#cpc .cpc-card{background:var(--cpc-panel2);border:1px solid var(--cpc-line);
  padding:15px 17px;margin:13px 0;box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-ours{border-left:3px solid var(--cpc-gold)}
#cpc .cpc-cardrow{display:flex;gap:14px;align-items:flex-start}
#cpc .cpc-cardicon{flex:0 0 auto;line-height:0;margin-top:2px}
#cpc .cpc-cardicon .wgf-qborder{width:56px;height:56px}
#cpc .cpc-cardicon .wgf-qborder__icon{width:40px;height:40px}
#cpc .cpc-cardbody{flex:1 1 auto;min-width:0}
#cpc .cpc-card h3{margin:0 0 6px;font-size:18px;color:var(--cpc-ink);display:flex;
  align-items:center;flex-wrap:wrap;gap:8px}
#cpc .cpc-card p{margin:6px 0;color:var(--cpc-ink);font-size:15px}
#cpc .cpc-fact{color:var(--cpc-muted);font-size:13.5px;line-height:1.55}
#cpc .cpc-fact b{color:var(--cpc-ink-dim)}
#cpc .cpc-tier{font-size:11.5px;letter-spacing:.03em;color:var(--cpc-muted);
  margin:8px 0 0;padding-top:8px;border-top:1px solid var(--cpc-line)}

/* ---- tier badges: pip + label, no emoji -------------------------------- */
#cpc .cpc-badge{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;
  border:1px solid var(--cpc-line);background:var(--cpc-well);color:var(--cpc-muted);
  vertical-align:middle;white-space:nowrap}
#cpc .cpc-badge::before,#cpc .cpc-meter span::before{content:"";flex:0 0 auto;
  width:9px;height:9px;background:var(--cpc-pip,var(--cpc-muted));
  box-shadow:0 0 0 1px #000}
#cpc .cpc-fact-t{--cpc-pip:var(--cpc-t-fact);color:var(--cpc-t-fact);border-color:var(--cpc-line)}
#cpc .cpc-signal{--cpc-pip:var(--cpc-t-signal);color:var(--cpc-t-signal);border-color:#243a52}
#cpc .cpc-ambiguous{--cpc-pip:var(--cpc-t-ambiguous);color:var(--cpc-t-ambiguous);border-color:var(--cpc-line)}
#cpc .cpc-theory{--cpc-pip:var(--cpc-t-theory);color:var(--cpc-t-theory);border-color:#5e4022}
#cpc .cpc-hopium{--cpc-pip:var(--cpc-t-hopium);color:var(--cpc-t-hopium);border-color:#3a3a3a}

#cpc .cpc-src{font-size:12px;color:var(--cpc-muted);margin-top:6px}
#cpc .cpc-src a{color:var(--cpc-gold2)}

/* ---- item slots -------------------------------------------------------- */
#cpc .cpc-showcase{margin:12px 0;padding:12px;border:1px solid var(--cpc-line);
  background:var(--cpc-panel)}
#cpc .cpc-showcase-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cpc-gold2);margin:0 0 10px}
#cpc .cpc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
#cpc .cpc-tile{margin:0;text-align:center}
#cpc .cpc-slot{display:inline-block;padding:3px;border:2px solid var(--q,#ffffff);
  background:#000;line-height:0}
#cpc .cpc-tile:hover .cpc-slot{border-color:var(--cpc-gold)}
#cpc .cpc-tile img{width:56px;height:56px;display:block}
#cpc a.cpc-il{text-decoration:none;color:inherit;display:block}
#cpc .cpc-tile figcaption{margin-top:6px;font-size:11px;line-height:1.35}
#cpc a.wgf-xlink{color:var(--cpc-gold);text-decoration:none;
  border-bottom:1px dotted var(--cpc-gold2)}
#cpc a.wgf-xlink:hover{color:#ffe375;border-bottom-color:#ffe375}

/* ---- proof list -------------------------------------------------------- */
#cpc .cpc-proof{background:var(--cpc-panel);border:1px solid var(--cpc-line);
  padding:6px 20px 14px;margin-top:10px;box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-proof li{margin:9px 0;color:var(--cpc-ink)}
#cpc .cpc-proof b{color:var(--cpc-gold)}

/* ---- related rail ------------------------------------------------------ */
#cpc .cpc-rail{border:1px solid var(--cpc-line);background:var(--cpc-panel);
  padding:12px 14px;margin:18px 0 4px;box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-rail-h{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cpc-gold2);margin:0 0 10px}
#cpc .cpc-rail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
#cpc a.cpc-railcell{display:flex;align-items:center;gap:10px;padding:8px 10px;
  border:1px solid var(--cpc-line);background:var(--cpc-well);text-decoration:none;color:inherit}
#cpc a.cpc-railcell:hover{border-color:var(--cpc-gold2)}
#cpc .cpc-railcell img{width:32px;height:32px;flex:0 0 auto;display:block;background:#000}
#cpc .cpc-railcell b{display:block;font-size:13.5px;color:var(--cpc-gold);font-weight:700}
#cpc .cpc-railcell span{display:block;font-size:11.5px;color:var(--cpc-muted);line-height:1.4}

#cpc .cpc-close{margin:30px 0 8px;text-align:center;color:var(--cpc-muted);font-size:12px;
  border-top:1px solid var(--cpc-line);padding-top:18px}

/* ---- live datamine strip (markup from cpc_live.py) --------------------- */
#cpc .cpc-live{border:1px solid var(--cpc-line);border-left:3px solid var(--cpc-gold2);
  background:var(--cpc-panel2);padding:12px 16px;margin:12px 0 16px;
  box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-live-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cpc-gold2);margin:0 0 10px}
#cpc .cpc-live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
#cpc .cpc-live-cell{display:flex;flex-direction:column;gap:2px;padding:8px 10px;
  border:1px solid var(--cpc-line);background:var(--cpc-well)}
#cpc .cpc-live-cell b{font-size:11px;color:var(--cpc-gold2);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
#cpc .cpc-live-cell span{font-size:15px;color:var(--cpc-ink);font-variant-numeric:tabular-nums}
#cpc .cpc-live-cell em{font-style:normal;font-size:11px;color:var(--cpc-muted)}
#cpc .cpc-live-watch{margin-top:10px;padding-top:9px;border-top:1px solid var(--cpc-line);
  font-size:12.5px;line-height:1.55;color:var(--cpc-muted)}
#cpc .cpc-live-watch b{color:var(--cpc-ink-dim)}
#cpc .cpc-live-watch.is-hit{color:var(--cpc-gold);font-weight:700}

/* ---- explainer + FAQ --------------------------------------------------- */
#cpc .cpc-explainer{background:var(--cpc-panel2);border:1px solid var(--cpc-line);
  border-left:3px solid var(--cpc-gold2);padding:14px 18px;margin:16px 0;
  box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-explainer h2{margin:0 0 8px;border:0;padding:0}
#cpc .cpc-explainer h3{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cpc-gold2);margin:15px 0 4px}
#cpc .cpc-explainer p{color:var(--cpc-ink);font-size:15px;margin:6px 0;line-height:1.6}
#cpc .cpc-faq{margin:6px 0 4px}
#cpc .cpc-faq-item{border:1px solid var(--cpc-line);background:var(--cpc-panel);margin:8px 0;
  box-shadow:0 0 0 1px #000 inset}
#cpc .cpc-faq-item summary{cursor:pointer;list-style:none;padding:12px 40px 12px 16px;
  font-size:15px;color:var(--cpc-ink);font-weight:700;position:relative}
#cpc .cpc-faq-item summary::-webkit-details-marker{display:none}
#cpc .cpc-faq-item summary::after{content:"+";position:absolute;right:16px;top:10px;
  color:var(--cpc-gold);font-size:20px;line-height:1}
#cpc .cpc-faq-item[open] summary::after{content:"\2212"}
#cpc .cpc-faq-item summary:hover{color:var(--cpc-gold)}
#cpc .cpc-faq-item p{margin:0;padding:0 16px 14px;color:var(--cpc-ink);font-size:14.5px;
  line-height:1.62}

/* ---- 3D model section (markup from wgf_models3d.viewer_section_html) ---- */
#cpc .wgf-section{margin:22px 0 6px}
#cpc .wgf-model3d-note{font-size:12px;color:var(--cpc-muted);margin:8px 0 0}

/* ---- overrides for markup this page does not own ----------------------- */
/* cpc_quest.QUEST_CSS is emitted as an inline <style> AFTER this sheet, so a
   tie on specificity would go to it. These two selectors are one class deeper
   and repaint its client-green progress fill in bronze (no gradient). */
#cpc .cpc-questwell .cpc-questwell-bar .cpc-questwell-fill{
  background:var(--cpc-gold2);background-image:none}
#cpc .cpc-questwell .cpc-questwell-bar::before{background:var(--cpc-well);background-image:none}

@media (max-width:560px){
  #cpc h1{font-size:30px}
  #cpc .cpc-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
  #cpc .cpc-marquee{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
  #cpc .cpc-cardrow{gap:10px}
  #cpc .cpc-cardicon .wgf-qborder{width:44px;height:44px}
  #cpc .cpc-cardicon .wgf-qborder__icon{width:32px;height:32px}}
