/* REAShield v2 — dashboard-grade product visuals (hero dashboard + bento visuals + case study) */

/* shared bits */
.chipd{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:999px;font-family:"Geist Mono",monospace;white-space:nowrap}
.chipd.up{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.chipd.dn{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.chipd.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.chipd.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.chipd.mut{background:var(--raise);color:var(--mut)}
.tile{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center}
.tile svg{width:15px;height:15px}
.t-good{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.t-acc{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-ink)}
.t-bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.t-cyan{background:color-mix(in srgb,var(--cyan) 15%,transparent);color:var(--cyan)}
.t-warn{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}

/* ===== hero dashboard ===== */
.dash .dbody{display:grid;grid-template-columns:58px 1fr;min-height:520px}
.rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0;border-right:1px solid var(--line);background:var(--panel2)}
.rail .logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(160deg,#8f80ff,#5a48e8);margin-bottom:10px}
.rail a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--faint)}
.rail a.on{background:var(--raise);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.rail a svg{width:17px;height:17px}
.rail .sp{flex:1}
.dmain{padding:16px 18px 18px;min-width:0}
.dtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--faint);display:flex;gap:7px;align-items:center}
.crumb b{color:var(--ink);font-weight:600}
.dtop .sp{flex:1}
.pillx{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);border:1px solid var(--line2);border-radius:9px;padding:6px 10px;background:var(--panel2);white-space:nowrap}
.pillx.search{min-width:180px;color:var(--faint)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--good);border:1px solid color-mix(in srgb,var(--good) 35%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent);border-radius:9px;padding:6px 10px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(135deg,#f472b6,#8b5cf6)}

.k4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.kc{border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:linear-gradient(180deg,var(--panel2),var(--panel));display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:end}
.kc .kl{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--faint)}
.kc .kv{font-size:26px;font-weight:650;letter-spacing:-.03em;font-family:"Geist Mono",monospace;line-height:1.1;margin-top:8px}
.kc .kv small{font-size:12px;color:var(--faint);font-weight:500}
.kc .ks{font-size:11px;color:var(--faint);grid-column:1}
.kc .kchart{grid-row:2/4;grid-column:2;align-self:end}
.sparkbars{display:flex;align-items:flex-end;gap:3px;height:34px}
.sparkbars i{display:block;width:5px;border-radius:2px;background:var(--line2)}
.sparkbars i.hl{background:var(--good)}

.dgrid{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;margin-top:12px}
.panel{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:14px;min-width:0}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ph h4{font-size:13px;font-weight:600}
.ph .sp{flex:1}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;font-size:11px}
.seg span{padding:3px 8px;color:var(--faint)}
.seg span.on{background:var(--raise);color:var(--ink)}
.chart{width:100%;height:auto;display:block}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .yl,.chart .xl{fill:var(--faint);font:500 9.5px "Geist Mono",monospace}
.chart .area{fill:url(#scoreFill)}
.chart .ln{fill:none;stroke:url(#scoreLine);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.chart .thr{stroke:var(--warn);stroke-width:1.2;stroke-dasharray:4 4}
.chart .thrl{fill:var(--warn);font:600 9.5px "Geist Mono",monospace}
.chart .pt{fill:var(--panel2);stroke:var(--accent);stroke-width:2}
.chart .pt.hot{fill:var(--cyan);stroke:var(--panel2);stroke-width:3}
.chart .tip rect{fill:var(--panel);stroke:var(--line2)}
.chart .tip text{fill:var(--ink);font:600 10px "Geist Mono",monospace}
.chart .tip .s{fill:var(--faint);font-weight:500}
.feed{display:grid;gap:4px}
.fi{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px}
.fi:hover{background:var(--raise)}
.fi .ft{min-width:0;flex:1}
.fi b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi span{display:block;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi time{font-size:10.5px;color:var(--faint);font-family:"Geist Mono",monospace}

@media(max-width:1060px){.k4{grid-template-columns:1fr 1fr}.dgrid{grid-template-columns:1fr}}
@media(max-width:640px){.dash .dbody{grid-template-columns:1fr}.rail{display:none}.pillx.search,.dtop .pillx{display:none}}

/* ===== bento visuals ===== */
.gaugewrap{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media(max-width:700px){.gaugewrap{grid-template-columns:1fr;justify-items:center}}
.gauge{position:relative;width:200px}
.gauge svg{display:block;width:100%;height:auto}
.gauge .tk{stroke:var(--line2);stroke-width:2;stroke-linecap:round}
.gauge .tk.on{stroke:var(--cyan)}
.gauge .gv{position:absolute;left:0;right:0;bottom:4px;text-align:center}
.gauge .gv b{display:block;font-size:42px;font-weight:650;letter-spacing:-.04em;font-family:"Geist Mono",monospace;line-height:1}
.gauge .gv span{font-size:11.5px;color:var(--faint)}
.sigrows{display:grid;gap:13px;width:100%}
.sig{display:grid;grid-template-columns:128px 1fr 78px;gap:12px;align-items:center;font-size:12.5px;color:var(--mut)}
.caps{display:flex;gap:3px}
.caps i{flex:1;height:14px;border-radius:4px;background:var(--raise)}
.caps.g i.f{background:var(--good)} .caps.w i.f{background:var(--warn)} .caps.b i.f{background:var(--bad)}
.sig .chipd{justify-self:end}

.findings{display:grid;gap:8px}
.fd{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.fd .js{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 10px "Geist Mono",monospace;color:#1a1300;background:#f7df1e}
.fd code{display:block;font-size:12px;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd small{display:block;font-size:11px;color:var(--faint);font-family:"Geist Mono",monospace}
.fdhead{display:flex;gap:8px;align-items:center;margin-bottom:10px;font-size:12px;color:var(--faint)}

.procs{display:flex;align-items:center;gap:0;justify-content:space-between}
.proc{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:12px;padding:8px 11px;background:var(--panel2);font-size:12.5px;font-weight:600;white-space:nowrap}
.wire{flex:1;height:2px;margin:0 6px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--cyan));background-size:200% 100%;animation:wire 2.2s linear infinite;opacity:.8}
@keyframes wire{to{background-position:-200% 0}}
.maptbl{margin-top:16px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mr{display:grid;grid-template-columns:1fr 24px 1fr;gap:8px;align-items:center;padding:9px 12px;font:500 12px "Geist Mono",monospace;border-top:1px solid var(--line)}
.mr:first-child{border-top:none}
.mr.h{font:600 10.5px Geist,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);background:var(--panel2)}
.mr .from{color:var(--warn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr .to{color:var(--good);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr .ar{color:var(--faint);text-align:center}

.hex{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.hexh{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--faint);background:var(--panel2)}
.hexh b{color:var(--ink);font-weight:600;font-family:"Geist Mono",monospace}
.hexrow{display:grid;grid-template-columns:66px 1fr 96px;gap:12px;padding:5px 12px;font:500 11.5px "Geist Mono",monospace}
.hexrow .o{color:var(--faint)}
.hexrow .b{color:var(--mut);letter-spacing:.02em}
.hexrow .b em{font-style:normal;color:var(--accent-ink)}
.hexrow .a{color:var(--faint);letter-spacing:.08em}
@media(max-width:520px){.hexrow{grid-template-columns:56px 1fr}.hexrow .a{display:none}}

.pr{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel2)}
.prh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.prh .pricon{color:var(--good)}
.prh b{font-size:14px}
.prh .num{color:var(--faint);font-weight:400}
.prh .meta{font-size:12px;color:var(--faint)}
.prh .av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#38bdf8,#6366f1)}
.ck{display:grid;grid-template-columns:20px 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;font-size:13px;border-top:1px solid var(--line)}
.ck:first-of-type{border-top:none}
.ck .st{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800}
.ck .st.ok{background:var(--good);color:#04130c}
.ck .st.no{background:var(--bad);color:#200606}
.ck small{color:var(--faint);font-family:"Geist Mono",monospace;font-size:11.5px}
.ck .req{font-size:10.5px;font-weight:600;color:var(--mut);border:1px solid var(--line2);border-radius:999px;padding:1px 7px}
.merge{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--good) 7%,transparent);font-size:13px}
.merge .btn{margin-left:auto;padding:6px 14px;font-size:12.5px;background:var(--good);color:#04130c;border:none}
.prnote{margin-top:12px;display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--faint)}

/* ===== Adobe case study ===== */
.case{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;margin-top:52px}
@media(max-width:900px){.case{grid-template-columns:1fr}}
.casecard{border:1px solid var(--line);border-radius:24px;background:var(--panel);padding:28px;position:relative;overflow:hidden;isolation:isolate}
.casecard::after{content:"";position:absolute;right:-25%;top:-40%;width:70%;height:90%;z-index:-1;background:radial-gradient(closest-side,rgba(248,113,113,.25),transparent)}
.case .big{font-size:clamp(56px,7vw,88px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.case .big small{font-size:18px;letter-spacing:-.01em;color:var(--mut);font-weight:500;margin-left:8px}
.apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.apps span{font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2)}
.tl{display:grid;gap:0;margin-top:4px}
.tli{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.tli:first-child{border-top:none;padding-top:4px}
.tli .d{font-family:"Geist Mono",monospace;font-size:12.5px;color:var(--accent-ink);padding-top:2px}
.tli h4{font-size:15.5px;font-weight:650}
.tli p{color:var(--mut);font-size:14px;margin-top:4px}
.lesson{grid-column:1/-1;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:24px;padding:26px 28px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.lesson .tile{width:40px;height:40px;flex-basis:40px;border-radius:12px}
.lesson h3{font-size:19px;letter-spacing:-.02em}
.lesson p{color:var(--mut);font-size:15px;margin-top:6px}
.srcs{grid-column:1/-1;font-size:12px;color:var(--faint);text-align:center}
.srcs a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}

.prevnote{text-align:center;font-size:12.5px;color:var(--faint);margin-top:18px}