/* Decision Systems: uses the shared defaults (cobalt card). */


/* ---- opening: deep-blue panel, white serif headline, and the night-walk picture (a person and an AI side by side) ---- */
.s-intro{--bg:#06122c;--ink:#fff}
.s-intro .kicker{color:#7fdcff}
.s-intro h1{color:#fff}
.s-intro .lede{color:#b3c2ec}
.s-intro .btn-solid{background:#fff;color:#06122c;border-color:#fff}
.s-intro .btn-solid:hover{background:#dce6ff;border-color:#dce6ff}
.s-intro .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.s-intro .btn-line:hover{background:#fff;color:#06122c}
.s-intro .filmchip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.25);color:#fff}
.s-intro .filmchip .pl{color:#7fdcff}
.hero-art{position:absolute;z-index:0;top:var(--hdr);bottom:var(--inset);left:var(--inset);right:var(--fw);overflow:hidden;border-radius:var(--r-l);pointer-events:none}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 20%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06122c 0%,rgba(6,18,44,.82) 22%,rgba(6,18,44,.35) 46%,rgba(6,18,44,0) 66%),linear-gradient(0deg,#06122c 0%,rgba(6,18,44,.55) 12%,rgba(6,18,44,0) 34%)}
[dir=rtl] .hero-art::after{background:linear-gradient(270deg,#06122c 0%,rgba(6,18,44,.82) 22%,rgba(6,18,44,.35) 46%,rgba(6,18,44,0) 66%),linear-gradient(0deg,#06122c 0%,rgba(6,18,44,.55) 12%,rgba(6,18,44,0) 34%)}
[dir=rtl] .hero-art{left:var(--fw);right:var(--inset)}
[dir=rtl] .hero-art img{object-position:0% 20%}
@media(max-width:1100px){.hero-art,[dir=rtl] .hero-art{left:var(--inset);right:var(--inset)}.hero-art img{opacity:.55}}

/* ---- the desk ("what moved in the last seven days"): classic white. The opening is the deep-blue moment; the desk is for reading.
   The shared dark variables are redefined for the left and middle of the desk only; the ranked list stays on the blue card. ---- */
.s-desk{--bg:#fff;color:var(--ink)}
.s-desk::before{border-color:var(--edge);box-shadow:var(--d3)}
.desk-top,.agents,.radar-wrap,.desk-note,.srcline{--deep:#fff;--deep-2:#fbfcfa;--deep-line:rgba(16,33,31,.13);--deep-ink:#10211f;--deep-mute:#5b6b65;--live:#16875f;
  --l-decision:#12906a;--l-engineering:#2a5fd0;--l-food:#b5731a;--l-media:#7a3fc0;--l-ai:#c0366b;--l-world:#1e7f9a}
.s-desk .kicker{color:var(--brass)}
.s-desk h2{color:var(--ink)}
#agents b{color:var(--ink)}
#agents li.work b::after{background:#16875f}
.pause{background:#fff;border-color:var(--edge);color:var(--ink)}
.pause:hover{border-color:var(--brass)}
.filters button{border-color:var(--edge);color:var(--ink)}
.filters button:hover{border-color:var(--brass)}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.radar{background:#fbfcfa;border:1px solid var(--edge);box-shadow:inset 0 1px 3px rgba(16,33,31,.06)}
.sweep{background:linear-gradient(90deg,transparent,rgba(22,135,95,.10));border-right:1px solid rgba(22,135,95,.6)}
.dot.dim{opacity:.18}

.allbtn{border-color:var(--edge);color:var(--ink)}
.allbtn:hover{border-color:var(--brass)}
.allbtn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

.getnews{background:var(--ink);color:#fff;border-color:var(--ink)}
.getnews:hover{background:var(--green)}

/* ---- price watch: white, like the desk ---- */
.s-prices{--bg:#fff;color:var(--ink)}
.s-prices .kicker{color:var(--brass)}
.s-prices h2{color:var(--ink);max-width:30ch;font-size:clamp(26px,3vw,40px);margin:0}
.s-prices .lede{margin:6px 0 0;font-size:15px}
.pw{display:flex;flex-direction:column;gap:clamp(12px,2vh,22px)}
.pw-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:start}
.pw-chart{margin:0}
.pw-chart svg{width:100%;height:auto;display:block}
.pw-chart text{font:15px/1 Inter,system-ui,sans-serif;fill:#5b6b65}
.pw-leg{font-size:12px;color:#5b6b65;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.pw-leg i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:2px}
.pw-out{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.pw-k{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#5b6b65}
.pw-out b{font:600 clamp(30px,3.6vw,46px)/1 var(--serif,Georgia,serif);color:var(--ink)}
.pw-cmp{font-size:13px;color:#5b6b65}
.pw-sl{display:grid;gap:6px}
.pw-sl label{display:grid;grid-template-columns:1fr auto;font-size:13px;gap:2px 10px}
.pw-sl label output{font-variant-numeric:tabular-nums;font-weight:600}
.pw-sl input[type=range]{grid-column:1/-1;width:100%;accent-color:#2a5fd0}
.pw-btns{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.pw-track{font-size:14px;margin:0;max-width:92ch}
.pw-note{font-size:12px;color:#5b6b65;margin:0;max-width:100ch}
@media(max-width:900px){.pw-grid{grid-template-columns:1fr}}
.pw-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.pw-pick label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#5b6b65}
.pw-pick select{font:inherit;font-size:15px;padding:9px 14px;border:1px solid var(--edge);border-radius:10px;background:#fff;color:var(--ink);max-width:100%}
.pw-pending{border:1px solid var(--edge);border-radius:14px;padding:18px 22px;background:#fbfcfa;max-width:70ch}
.pw-pending h3{margin:0 0 6px;font:500 1.4rem/1.15 var(--serif,Georgia,serif);color:var(--ink)}
.pw-pending p{margin:0 0 6px;font-size:15px}
/* hero: let more of the picture show */
.hero-art::after{background:linear-gradient(90deg,#06122c 0%,rgba(6,18,44,.7) 20%,rgba(6,18,44,.25) 44%,rgba(6,18,44,0) 62%),linear-gradient(0deg,#06122c 0%,rgba(6,18,44,.35) 9%,rgba(6,18,44,0) 26%)}
