/* card_economy.css — layered on top of skin_atlas.css, which supplies the dossier's casework tokens and shared components. Only the pieces this page needs and the atlas does not live here. */ /* The shared sheet paints the atlas's own headline figure as a hero watermark; this page has a different one. */ .hero:after{content:'$5.00'} /* The atlas sizes its stat numbers for four short figures; this page carries seven-digit counts (1,389,346) beside a narrower content column when the HUD rail is present, and the atlas clamp overflowed and clipped them. Re-size the stat number to fit the cell and never wrap or clip, so the row stays even. */ /* The runtime HUD appends several more sheets after this one and puts .casework on ; those set the stat number to ~50px, which clips this page's seven-digit counts. Win regardless of injected order and clip nothing. */ .casework .stats .stat strong{font-size:clamp(17px,1.5vw,23px)!important; line-height:1.15!important;letter-spacing:-.04em!important} /* 6 stats → force 3×2 grid instead of auto-fit which wraps 5+1 */ body.page-card-economy .stats{grid-template-columns:repeat(3,minmax(0,1fr))!important} /* A quoted rule or a quoted ban letter is the load-bearing element of this page, so it gets a form of its own rather than being italic body text. */ .q{background:#0c1522;border-left:3px solid var(--line);border-radius:0 6px 6px 0; padding:16px 20px;margin:0 0 16px;font:13.5px/1.7 var(--mono);color:#dfe7f0} .q.rule{border-left-color:var(--red)} .q.letter{border-left-color:#7d3644;background:#170f15} .q p{margin:0 0 9px}.q p:last-child{margin:0} .q strong{color:#fff} .q ul{margin:8px 0 0;padding-left:20px} .q li{margin:4px 0;color:#c7d3e0} .q li.hit{color:#fff;font-weight:600} .src{display:block;margin-top:10px;color:var(--dim);font:11px/1.6 var(--mono);letter-spacing:.03em} .src a{color:#8fa8c0} /* The five-step strip. Numbered because the order is the argument: you cannot reach step 5 without having paid at steps 1 and 2. */ /* Five fixed columns: the strip is an argument in sequence, so it stays one row and the cells shrink to fit rather than wrapping into a ragged 4+1. It still stacks cleanly on tablet and phone — never clipped, never a locked page. */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:2px; background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden} @media(max-width:1024px){.steps{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.steps{grid-template-columns:1fr}} .steps article{background:var(--panel);padding:20px 19px;position:relative} .steps .n{display:block;font:800 11px var(--mono);letter-spacing:.14em;color:var(--red);margin-bottom:9px} .steps h4, .steps h3{margin:0 0 8px;font:700 14px/1.35 var(--sans);letter-spacing:-.02em;color:var(--text)} .steps p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.72} .steps em{font-style:normal;color:#dbe4ee} .flag{display:inline-block;padding:1px 7px;border-radius:3px;font: 700 11px var(--mono); letter-spacing:.07em;text-transform:uppercase;vertical-align:1px} .flag.valve{background:#1b2a3d;color:#8cccf4;border:1px solid #3d5673} .flag.vol{background:#2a2414;color:#e7cd91;border:1px solid #6d5e2c} .flag.third{background:#241a26;color:#c3aee0;border:1px solid #5a4a7a} .who{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px} .who article{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:22px 23px} .who article p{margin:0 0 11px;color:var(--muted);font-size:13.5px;line-height:1.72} .who article p:last-child{margin:0} .id{font-family:var(--mono);font-size:12px;color:var(--dim)} .who .id{font-family:var(--mono);font-size:12px;color:var(--dim)} .who h3{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .caveat{border:1px solid var(--line);background:#0d1523;border-radius:7px;padding:19px 21px;margin:18px 0 0} .caveat h4, .caveat h3{margin:0 0 8px;font:700 12px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--gold)} .caveat p{margin:0;color:var(--muted);font-size:13px;line-height:1.75} .caveat p+p{margin-top:9px} /* A measured figure strip, used where a paragraph would bury the number. Same grammar as .stats but sized to sit inside a section rather than open one. */ .figline{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:2px; background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:20px 0} .figline div{background:var(--panel);padding:16px 18px} .figline b{display:block;font:800 22px/1.15 var(--sans);letter-spacing:-.035em;color:var(--text)} .figline span{display:block;margin-top:6px;color:var(--dim);font:11px/1.55 var(--mono); text-transform:uppercase;letter-spacing:.05em} /* The level ladder. The bar is proportional to sets consumed, drawn inline so the table stays readable with styles off. */ .ladder .lb{display:block;height:7px;border-radius:3px;min-width:2px; background:linear-gradient(90deg,#3b5f7d,#8cccf4)} /* Steam Support letters, reproduced as letters. Deliberately close to the colouring of the real help-request view so the template is recognisable. */ .letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(315px,1fr));gap:14px;margin:18px 0} .letters figure{margin:0;background:#16202e;border:1px solid #2b3d52;border-radius:7px;overflow:hidden} .letters .hd{background:#27506e;color:#dceaf6;font:600 11.5px/1.35 var(--mono);padding:9px 13px;letter-spacing:.02em} .letters blockquote{margin:0;padding:15px 16px;color:#c7d6e4;font:13px/1.72 var(--sans)} .letters blockquote p{margin:0 0 10px} .letters blockquote p:last-child{margin:0} .letters .sig{color:#8da6bd;font-family:var(--mono);font-size:12px} .letters .closed{background:#101a29;text-align:center;color:#8da6bd;font:12px/1 var(--mono);padding:11px; border-top:1px solid #2b3d52} .letters figcaption{border-top:1px solid #2b3d52;padding:10px 14px;color:var(--dim);font:11.5px/1.65 var(--mono)} .letters figcaption a{color:var(--blue)} /* Two sides of one enforcement desk, set side by side so the comparison is the layout rather than a sentence asking the reader to make it. */ .ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(305px,1fr));gap:16px;margin:20px 0} .ledger article{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:19px 21px} .ledger article.user{border-left:3px solid var(--red)} .ledger article.inside{border-left:3px solid var(--gold)} .ledger h4{margin:0 0 3px;font:700 15.5px/1.35 var(--sans);color:var(--text)} .ledger .side{margin:0 0 13px;color:var(--dim);font:11px/1.45 var(--mono);text-transform:uppercase;letter-spacing:.06em} .ledger dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 15px} .ledger dt{color:var(--dim);font:11px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.05em} .ledger dd{margin:0;color:var(--muted);font:13.5px/1.65 var(--sans)} /* "What the farm props up" — a source node feeding five platform metrics, drawn in plain HTML/CSS so it survives with scripting off and never depends on a chart library. */ .props{margin:22px 0} .props .src-node{background:linear-gradient(180deg,#1d1119,#170f15);border:1px solid #6b3743; border-radius:8px;padding:16px 20px;text-align:center;max-width:520px;margin:0 auto} .props .src-node b{display:block;font:800 18px/1.25 var(--sans);color:#ffb8c0;letter-spacing:-.02em} .props .src-node span{display:block;margin-top:5px;color:#e3c6cb;font:12.5px/1.5 var(--mono)} .props .stem{width:2px;height:22px;background:#6b3743;margin:0 auto} .props .fanout{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} @media(max-width:820px){.props .fanout{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}} .props .fanout article{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue); border-radius:7px;padding:15px 15px 17px} .props .fanout h5{margin:0 0 7px;font:700 13px/1.3 var(--sans);color:var(--text)} .props .fanout p{margin:0;color:var(--muted);font:12px/1.6 var(--sans)} .props .kill{margin:16px 0 0;background:#0c1522;border-left:3px solid var(--red);border-radius:0 6px 6px 0; padding:13px 18px;color:#dfe7f0;font:14px/1.6 var(--sans)} .props .kill strong{color:#fff} /* The gem / booster value-sink loop: card -> gems -> booster -> cards, each hop taxed, net value destroyed. A closed ring of chips with arrows. */ .sink{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:18px 0} .sink .chip2{background:var(--panel2);border:1px solid var(--line);border-radius:20px; padding:9px 16px;font:600 13px var(--sans);color:var(--text);text-align:center} .sink .chip2 small{display:block;color:var(--dim);font:11px/1.4 var(--mono);margin-top:2px} .sink .arr{color:var(--red);font:700 18px var(--mono)} /* ====================================================================== Interactive block: the level calculator and the three figures. Everything below is progressive enhancement — the markup it decorates carries the same numbers as static text, so the section still reads with scripting off. ====================================================================== */ .calc{display:grid;grid-template-columns:minmax(250px,330px) 1fr;gap:20px;align-items:start; background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px;margin:0 0 26px} @media(max-width:880px){.calc{grid-template-columns:1fr}} .calc .ctl label{display:block;color:var(--dim);font:11px/1.5 var(--mono); text-transform:uppercase;letter-spacing:.07em;margin:0 0 7px} .calc .ctl label+label{margin-top:18px} .calc .presets+label{margin-top:20px} .calc .lvlnum{font:800 46px/1 var(--sans);letter-spacing:-.05em;color:var(--blue);margin:0 0 4px} .calc .lvlnum small{display:inline-block;margin-left:8px;font:600 12px/1 var(--mono); color:var(--dim);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle} .calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px; background:linear-gradient(90deg,#3b5f7d,#8cccf4);outline:none;margin:0} .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px; border-radius:50%;background:#f3f5f9;border:3px solid #2b4f6b;cursor:pointer} .calc input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:#f3f5f9; border:3px solid #2b4f6b;cursor:pointer} .calc input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(140,204,244,.35)} .calc input[type=number]{width:100%;background:#0c1522;border:1px solid var(--line);border-radius:5px; padding:8px 10px;color:var(--text);font:13px var(--mono)} .calc input[type=number]:focus{outline:none;border-color:var(--blue)} .calc .presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px} .calc .presets button{background:#0c1522;border:1px solid var(--line);border-radius:4px;color:var(--muted); font:11px var(--mono);padding:5px 9px;cursor:pointer} .calc .presets button:hover{border-color:var(--blue);color:var(--text)} .calc .out{display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px} .calc .out div{background:var(--panel2);padding:13px 14px} .calc .out b{display:block;font:800 19px/1.15 var(--sans);letter-spacing:-.03em;color:var(--text)} .calc .out span{display:block;margin-top:5px;color:var(--dim);font: 11px/1.5 var(--mono); text-transform:uppercase;letter-spacing:.05em} @media(min-width:700px){.calc .out{grid-template-columns:repeat(3,1fr)}} .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;margin:22px 0} .chart-box{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px 20px 14px} .chart-box h4{margin:0 0 2px;font:700 14px/1.35 var(--sans);color:var(--text)} .chart-box .sub{margin:0 0 14px;color:var(--dim);font:11.5px/1.55 var(--mono)} .chart-box svg{display:block;width:100%;height:auto;overflow:visible} .gridln{stroke:#1b2838;stroke-width:1} .axisln{stroke:#2b3d52;stroke-width:1} .tk{fill:#7e93a8;font: 11px var(--mono)} .tk.mid{text-anchor:middle} .tk.end{text-anchor:end} .curve{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .curvefill{fill:rgba(140,204,244,.11)} .refdot{fill:var(--gold);stroke:#090e17;stroke-width:1.5} .reflab{fill:#efcb87;font: 11px var(--mono);text-anchor:middle} .mklab{fill:#ff9aa4;font:11px var(--mono);text-anchor:middle} .mkline{stroke:var(--red);stroke-width:1.5;stroke-dasharray:4 4} .mkdot{fill:var(--red);stroke:#090e17;stroke-width:2} .bar{fill:var(--blue)} .bar.gold{fill:var(--gold)} .bar:hover,.bar.gold:hover{fill:#fff} .barlab{fill:#7e93a8;font: 11px var(--mono);text-anchor:middle} .fcell.recur{fill:var(--red)} .fcell.new{fill:#33465b;stroke:#48607a;stroke-width:1} .fcell:hover{fill:#fff} .glegend{margin-top:13px;font:11px var(--mono);color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap} .gk{display:inline-block;width:12px;height:12px;border-radius:3px} .gk.recur{background:var(--red)} .gk.new{background:#33465b;border:1px solid #48607a;margin-left:16px} #cetip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .12s; background:#0c1522;border:1px solid var(--blue);border-radius:5px;padding:7px 10px; color:var(--text);font:12px/1.5 var(--mono);white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.55)} #cetip.on{opacity:1} @media (prefers-reduced-motion:reduce){ .curve,.bar{transition:none !important} }