/* Styles for the fun cards (js/cards/core.js and js/cards/fun.js). Same rules as css/story.css: cqw units, --dk-* variables, no
   color-mix, filters or clip-path (the image export cannot render them). Everything on the share card is HTML and CSS variables
   (no SVG), so the chosen background's colors reach the exported image. */

/* ---------- cover: the persona is the hero, sized by its longest word ---------- */
.dk-hero.fx-p1,.dk-hero.fx-p2,.dk-hero.fx-p3{white-space:normal;line-height:.92}
.dk-hero.fx-p1{font-size:19cqw}
.dk-hero.fx-p2{font-size:15.5cqw}
.dk-hero.fx-p3{font-size:13cqw}
.fx-the{display:block;width:fit-content;background:var(--dk-hot);color:var(--dk-on-hot);font:800 4.4cqw/1 var(--dk-mono);letter-spacing:.14em;text-transform:uppercase;padding:1.5cqw 3.2cqw;border-radius:99px;margin-bottom:2.2cqw;text-shadow:none;transform:rotate(-3deg);border:.6cqw solid var(--dk-ink)}

/* ---------- the verdict: a headline phrase is the hero ---------- */
.dk-hero.fx-roast{white-space:normal;line-height:1.05;letter-spacing:-.025em;text-shadow:.7cqw .7cqw 0 var(--dk-a2)}
.dk-hero.fx-roast.r1{font-size:12.6cqw}
.dk-hero.fx-roast.r2{font-size:10.6cqw}
.dk-hero.fx-roast.r3{font-size:9cqw}
.fx-takes{display:grid;gap:2.6cqw}
.fx-take{background:rgba(var(--dk-pi-rgb),.07);border-left:1.8cqw solid var(--dk-hot);border-radius:2.4cqw;padding:2.6cqw 3.2cqw 2.8cqw}
.fx-take.strength{border-left-color:var(--dk-good)}
.fx-take.flaw{border-left-color:var(--dk-bad)}
.fx-tag{display:block;font:700 3cqw/1 var(--dk-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-bottom:1.4cqw}
.fx-take p{margin:0;font:700 4.5cqw/1.24 var(--dk-display)}

/* ---------- the receipts and the trophy case ---------- */
.dk-quote.fx-bigquote{font-size:6.6cqw;line-height:1.2}
.fx-aw{display:grid;grid-template-columns:7cqw 1fr auto;gap:2.4cqw;align-items:center;padding:1.5cqw 0;border-bottom:.35cqw solid rgba(var(--dk-pi-rgb),.14)}
.fx-aw:last-child{border-bottom:0}
.fx-aw .ic{width:7cqw;height:7cqw;border-radius:50%;background:var(--dk-hot);color:var(--dk-on-hot);display:grid;place-items:center}
.fx-aw .ic svg{width:3.9cqw;height:3.9cqw}
.fx-aw .tk{gap:2cqw;min-width:0}
.fx-aw .tk-img{width:7cqw;height:7cqw;font-size:3cqw}
.fx-aw .tk-sym{font-size:3.9cqw}
.fx-aw .tk-name{display:none}
.fx-aw .v{text-align:right;font:800 3.9cqw/1.1 var(--dk-display);white-space:nowrap}
.fx-aw .v small{display:block;font:500 3cqw/1.25 var(--dk-body);opacity:.7}

/* ---------- oddball numbers: a tidy two-column grid of big tiles ---------- */
.fx-big{gap:2.4cqw}
.fx-big .dk-tile{padding:3.2cqw 3.4cqw}
.fx-big .dk-tile>span{font-size:3cqw}
.fx-big .dk-tile b{font-size:8.4cqw;margin:1.2cqw 0 .8cqw;white-space:nowrap}
.fx-big .dk-tile b.sm{font-size:6.4cqw}
/* a span inside a tile value (a unit, or a green or red number) must not pick up the small label style of css/story.css */
.fx-tw .dk-tile b>span,.fx-big .dk-tile b>span{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;opacity:1}
.fx-tw .dk-tile b>.dk-unit,.fx-big .dk-tile b>.dk-unit{font-size:.36em;letter-spacing:-.01em}
.fx-big .dk-tile small{font-size:3cqw;opacity:.75}

/* ---------- trader score ---------- */
.fx-scorerow{display:flex;align-items:center;gap:4cqw}
.fx-scorerow .dk-ring{flex:none;width:36cqw;height:36cqw}
.fx-scorerow .dk-ring-t b{font-size:15cqw}
.fx-mini{display:grid;gap:2cqw;flex:1;min-width:0}
.fx-mini>div{background:rgba(var(--dk-bg-rgb),.9);border:.7cqw solid var(--dk-ink);border-radius:3cqw;padding:1.8cqw 3cqw}
.fx-mini span{display:block;font:700 3cqw/1 var(--dk-mono);letter-spacing:.1em;text-transform:uppercase}
.fx-mini b{display:block;font:800 4.7cqw/1.1 var(--dk-display);margin-top:1cqw}

/* ---------- share: the trader report card ---------- */
.fx-grade{display:flex;align-items:center;gap:4.4cqw}
.fx-stamp{flex:none;width:43cqw;height:43cqw;border-radius:50%;border:1.5cqw solid var(--dk-ink);background:rgba(var(--dk-bg-rgb),.94);box-shadow:1.6cqw 1.6cqw 0 var(--dk-hot);display:grid;place-items:center}
.fx-stamp b{font:800 28cqw/1 var(--dk-display);letter-spacing:-.04em;color:var(--dk-ink)}
.fx-stamp.two b{font-size:21cqw}
.fx-gtext{display:grid;gap:2cqw;min-width:0;align-self:flex-end;justify-items:start}
.fx-gtext b{font:800 17cqw/.9 var(--dk-display);letter-spacing:-.05em;text-shadow:.9cqw .9cqw 0 var(--dk-a2);white-space:nowrap}
.fx-gtext small{font-size:.36em;letter-spacing:-.01em;text-shadow:none}
.fx-gtext em{font:800 4.6cqw/1 var(--dk-display);font-style:normal;background:var(--dk-ink);color:var(--dk-bg);padding:1.6cqw 3.2cqw;border-radius:99px}
.fx-gtext i{font:700 3.3cqw/1.2 var(--dk-body);font-style:normal;background:rgba(var(--dk-bg-rgb),.9);border:.6cqw solid var(--dk-ink);border-radius:2cqw;padding:1.2cqw 2.2cqw}
.fx-meter{display:flex;gap:.9cqw}
.fx-meter i{flex:1;height:4.2cqw;border-radius:1cqw;background:rgba(var(--dk-bg-rgb),.85);border:.5cqw solid var(--dk-ink);display:block}
.fx-meter i.on{background:var(--dk-hot)}
.fx-card{background:rgba(var(--dk-bg-rgb),.94);border:.8cqw solid var(--dk-ink);border-radius:3cqw;padding:.6cqw 4cqw;box-shadow:1.2cqw 1.2cqw 0 var(--dk-ink)}
.fx-row{display:flex;justify-content:space-between;align-items:center;gap:3cqw;padding:2.5cqw 0;border-bottom:.5cqw dashed rgba(var(--dk-ink-rgb),.4)}
.fx-row:last-child{border-bottom:0}
.fx-row>span{font:700 3cqw/1 var(--dk-mono);letter-spacing:.1em;text-transform:uppercase;flex:none}
.fx-row b{display:flex;align-items:center;gap:2cqw;font:800 6cqw/1 var(--dk-display);white-space:nowrap;min-width:0}
.fx-row b .dk-unit{font-size:.45em}
.fx-row b em{font:700 3.2cqw/1 var(--dk-mono);font-style:normal}
.fx-row .tk-img{width:7.6cqw;height:7.6cqw;font-size:3.2cqw}
.fx-row .tk-sym{font-size:4.8cqw}
.fx-row .tk-name{display:none}
.fx-cta{background:var(--dk-ink);color:var(--dk-bg);border-radius:5cqw;padding:3.2cqw 5cqw;text-align:center;font:600 3.7cqw/1.25 var(--dk-body)}
.fx-cta b{font-weight:800}

/* html2canvas mis-spaces tracked display text: keep these untracked in exports (same reason as in css/story.css) */
.exporting .fx-stamp b,.exporting .fx-gtext b,.exporting .fx-row b,.exporting .fx-mini b,.exporting .fx-take p,.exporting .fx-big .dk-tile b,.exporting .fx-aw .v{letter-spacing:normal!important;font-variant-numeric:normal!important}

/* the trophy-case front sits on the card's own colors, so profit and loss there use the ink, not the site's green and red */
.dk-awards .cg,.dk-awards .cb{color:var(--dk-ink)}