/* medialens Media Room design system - extracted from docs/design/synthesis-v2.html (approved 2026-07-10). tokens.css is NOT used by the app page. */
/* medialens. Synthesis v2 - liquid glass, uniform rounding, adlens type DNA.
   Semantics: red = negative/bleeding, green = positive, blue-violet #2F5AF0 =
   brand/neutral/informational, amber = caution/measurement. Low color count. */
:root{
--ink:#16161A; --ink-2:#3c3c46; --gray:#74747E; --hairline:#E4E4E9; --hairline-2:rgba(22,22,26,.07); --wash:#FAFAFB; --white:#fff;
--accent:#2F5AF0; --accent-press:#2440C8; --accent-ink:#1c3aa8; --accent-tint:rgba(47,90,240,.08); --accent-tint-2:rgba(47,90,240,.14);
--neg:#BE4B42; --neg-ink:#8E352D; --neg-tint:rgba(190,75,66,.11); --neg-tint-2:rgba(190,75,66,.19);
--pos:#1B7F4B; --pos-ink:#14603a; --pos-tint:rgba(27,127,75,.11);
--amber:#E6A23C; --amber-ink:#8a5a14; --amber-tint:rgba(230,162,60,.15);
--glass:rgba(255,255,255,.6); --glass-2:rgba(255,255,255,.36); --glass-hair:rgba(255,255,255,.82); --glass-blur:20px;
--r:18px; --r-2:14px; --r-3:10px;
--shadow:0 14px 36px -24px rgba(24,36,84,.32), 0 3px 10px -6px rgba(24,36,84,.14);
--shadow-lg:0 36px 74px -28px rgba(24,36,84,.44);
--f:"Heebo",-apple-system,"Segoe UI",sans-serif;
/* Revenue-source pie (Ronen request, 2026-07-11) - flat, brand-consistent taxonomy colors. Paid
   channels use their accent/amber "family"; organic siblings are washed/lighter tints of the same
   family (never a gradient); tiktok gets its own distinct teal; email stays green; everything
   untagged/unmatched stays gray, lightest for the fully-unknown bucket. */
--rs-meta-paid:#2F5AF0; --rs-meta-organic:#9DB2F7; --rs-google-paid:#E6A23C; --rs-google-organic:#F2CE94;
--rs-tiktok-paid:#159895; --rs-email:#1B7F4B; --rs-other-tagged:#9C9CA6; --rs-other-ref:#B7B7C0; --rs-unknown:#D8D8DE;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f); color:var(--ink); line-height:1.55; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; background:radial-gradient(1000px 560px at 85% -12%, rgba(47,90,240,.09), transparent 60%),radial-gradient(800px 480px at -6% 2%, rgba(47,90,240,.07), transparent 58%),var(--wash); min-height:100vh; padding-bottom:96px; overflow-x:hidden}
h1,h2,h3,h4,p{margin:0}
button{font-family:var(--f); cursor:pointer; border:none; background:none; color:inherit}
input,textarea{font-family:var(--f)}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.tnum{font-variant-numeric:tabular-nums}
.ambient{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.blob{position:absolute; border-radius:50%; filter:blur(76px); opacity:.5}
.blob.b1{width:640px;height:640px; top:-200px; right:-140px; background:radial-gradient(circle at 42% 42%, rgba(47,90,240,.42), transparent 68%); animation:drift1 52s ease-in-out infinite}
.blob.b2{width:560px;height:560px; top:36%; left:-180px; background:radial-gradient(circle at 50% 50%, rgba(47,90,240,.3), transparent 66%); animation:drift2 60s ease-in-out infinite}
.blob.b3{width:520px;height:520px; bottom:-220px; right:20%; background:radial-gradient(circle at 50% 50%, rgba(47,90,240,.24), transparent 64%); animation:drift3 68s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-38px,44px) scale(1.06)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-34px) scale(1.04)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,-44px) scale(1.06)}}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.02; mix-blend-mode:multiply}
.glass{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.05) 46%),linear-gradient(158deg, var(--glass), var(--glass-2)); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); border:1px solid var(--glass-hair); border-radius:var(--r); box-shadow:var(--shadow)}
.glass::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 38%); -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; opacity:.85}
.kick{font-size:13px; font-weight:700; letter-spacing:.13em; color:var(--gray); text-transform:uppercase}
.t-sec{font-size:clamp(18px,2.4vw,21px); font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.t-card{font-size:16px; font-weight:700; letter-spacing:-.005em}
.t-body{font-size:15px; color:var(--ink-2)}
.hint{font-size:12.5px; color:var(--gray); font-weight:500}
.big-num{font-weight:800; letter-spacing:-.02em; line-height:.95; font-variant-numeric:tabular-nums}
.zone-lead{display:flex; gap:11px; align-items:flex-start; margin:2px 0 20px; font-size:15px; line-height:1.6; color:var(--ink-2); max-width:70ch}
.zone-lead .zl-tick{flex:none; width:3px; align-self:stretch; border-radius:2px; background:var(--accent); min-height:38px}
.zone-lead b{color:var(--ink); font-weight:700}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle}
.topbar{position:sticky; top:0; z-index:60; background:rgba(250,250,251,.72); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-bottom:1px solid var(--hairline-2)}
.topbar-in{max-width:1200px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand-lock{font-weight:900; letter-spacing:-.045em; font-size:27px; color:var(--ink); direction:ltr; unicode-bidi:isolate; line-height:1; display:inline-flex; align-items:baseline}
.brand-lock .dot{display:inline-block; width:.3em; height:.3em; border-radius:50%; background:var(--accent); margin-inline-start:.1em; flex:none}
.brand .sub{font-size:11.5px; color:var(--gray); font-weight:500; margin-top:1px}
.spacer{flex:1}
.tenant{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-2); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair); backdrop-filter:blur(8px)}
.tenant:hover{border-color:var(--gray)}
.tenant .tdot{width:7px;height:7px;border-radius:50%;background:var(--pos)}
.tenant svg{width:14px;height:14px;color:var(--gray)}
.sysstat{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--gray); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.sysstat .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sysstat.frozen{color:var(--amber-ink); background:var(--amber-tint); border-color:rgba(230,162,60,.4)}
.sysstat.frozen .dot{background:var(--amber)}
.uavatar{width:36px;height:36px;border-radius:50%; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.55); border:1px solid var(--glass-hair); color:var(--gray)}
.uavatar svg{width:17px;height:17px}
.hamb{display:none; width:40px;height:40px;border-radius:999px; place-items:center; background:rgba(255,255,255,.55); border:1px solid var(--glass-hair); color:var(--ink)}
.hamb svg{width:20px;height:20px}
.nav-shell{position:sticky; top:60px; z-index:55; padding:12px 0 6px; background:linear-gradient(180deg, rgba(250,250,251,.85), rgba(250,250,251,0))}
.nav{max-width:1200px; margin:0 auto; display:flex; gap:4px; overflow-x:auto; padding:5px; scrollbar-width:none; background:linear-gradient(158deg, var(--glass), var(--glass-2)); border:1px solid var(--glass-hair); border-radius:999px; backdrop-filter:blur(16px) saturate(1.5); box-shadow:var(--shadow)}
.nav::-webkit-scrollbar{display:none}
.tab{white-space:nowrap; padding:9px 15px; border-radius:999px; font-size:13.5px; font-weight:700; color:var(--gray); display:inline-flex; align-items:center; gap:7px; transition:.18s}
.tab:hover{color:var(--ink-2)}
.tab.active{color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-press)); box-shadow:0 8px 18px -8px rgba(47,90,240,.55)}
.tab svg{width:15px;height:15px}
.tab .n{min-width:18px; padding:0 5px; border-radius:999px; font-size:11px; font-weight:800; line-height:18px; text-align:center; background:var(--neg); color:#fff}
.tab.active .n{background:rgba(255,255,255,.28)}
.tab .n.cool{background:var(--pos)}
.navsheet{display:none; position:fixed; inset-block-start:60px; inset-inline:0; z-index:58; background:rgba(250,250,251,.94); backdrop-filter:blur(24px); border-bottom:1px solid var(--hairline-2); box-shadow:var(--shadow); transform:translateY(-10px); opacity:0; pointer-events:none; transition:.22s}
body.nav-open .navsheet{transform:none; opacity:1; pointer-events:auto}
.navsheet .tab{width:100%; justify-content:flex-start; padding:14px 22px; min-height:50px; border-radius:0; border-bottom:1px solid var(--hairline-2); border-inline-start:3px solid transparent}
.navsheet .tab:last-child{border-bottom:none}
.navsheet .tab.active{background:var(--accent-tint); color:var(--accent-ink); box-shadow:none; border-inline-start-color:var(--accent)}
.navsheet .tab .n{margin-inline-start:auto}
#navScrim{display:none; position:fixed; inset:0; z-index:57; background:rgba(20,26,52,.18)}
body.nav-open #navScrim{display:block}
.period-bar{margin-top:16px; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.pb-label{font-size:12.5px; font-weight:700; color:var(--gray); display:inline-flex; gap:6px; align-items:center}
.pb-label svg{width:15px;height:15px}
.seg{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.5); border:1px solid var(--glass-hair)}
.seg-b{padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; color:var(--gray); transition:.16s; white-space:nowrap}
.seg-b:hover{color:var(--ink-2)}
.seg-b.active{color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-press)); box-shadow:0 6px 14px -7px rgba(47,90,240,.55)}
.pb-custom{display:none; align-items:center; gap:8px; font-size:12.5px; color:var(--gray)}
.pb-custom.on{display:inline-flex}
.pb-custom input{background:rgba(255,255,255,.6); border:1px solid var(--glass-hair); border-radius:var(--r-3); padding:6px 9px; font-size:13px; color:var(--ink); font-family:var(--f)}
.pb-custom input:focus{outline:none; border-color:var(--accent)}
.pb-now{margin-inline-start:auto}
.week-scrub{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px}
/* report-scrub = the weekly-report history picker's wrapper (index.html renderReport2). Same layout
   as .week-scrub, but a DISTINCT class on purpose: a document-level delegated click listener targets
   `.week-scrub .seg-b` (the dossier week scrubber's applyWeek wiring) - the picker's buttons must
   never sit on that selector's bubble path. Keep these two rules in sync visually; never merge them
   into one selector. */
.report-scrub{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px}
section{display:none}
section.on{display:block; animation:rise .4s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.pad{padding:26px 0}
.sec-head{display:flex; align-items:baseline; gap:12px; margin:6px 0 6px; flex-wrap:wrap}
.sec-head .t-sec{margin-inline-end:auto}
.settle{opacity:0; animation:settle .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes settle{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.hero{margin-top:18px; padding:30px 32px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:30px; align-items:center}
.hero-lead .kick{color:var(--accent-ink)}
.saved-row{display:flex; align-items:flex-start; gap:8px; margin:14px 0 2px}
.saved-cur{font-size:clamp(20px,3vw,26px); font-weight:700; color:var(--gray); margin-top:.5em}
.saved{font-size:clamp(2.6rem,7.6vw,4.5rem); color:var(--ink)}
.est-tag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:var(--gray); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair); padding:4px 11px; border-radius:999px; margin-top:6px}
.hero-h{font-size:17px; font-weight:700; color:var(--ink); max-width:52ch; margin-top:16px; line-height:1.5}
.hero-sub{font-size:14px; color:var(--ink-2); max-width:50ch; margin-top:9px; line-height:1.62}
.hero-sub b{color:var(--ink); font-weight:700}
.streaks{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
.streak{flex:1; min-width:158px; padding:15px 16px; border-radius:var(--r-2); background:rgba(255,255,255,.5); border:1px solid var(--glass-hair)}
.streak .sv{font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--ink)}
.streak.calm .sv{color:var(--pos-ink)}
.streak.blue .sv{color:var(--accent-ink)}
.streak .sl{font-size:12.5px; color:var(--gray); font-weight:500; margin-top:6px; line-height:1.45}
.pips{display:flex; gap:3px; margin-top:11px}
.pips i{width:8px; height:18px; border-radius:3px; background:rgba(47,90,240,.14); transition:.3s}
.pips i.on{background:var(--pos)}
.pips.b i.on{background:var(--accent)}
.dial-card{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:22px; border-radius:var(--r-2); background:rgba(255,255,255,.5); border:1px solid var(--glass-hair)}
.dial{position:relative; width:168px; height:168px}
.dial .cen{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.dial .cen b{font-size:44px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.dial .cen span{font-size:12px; color:var(--gray); font-weight:500; margin-top:2px}
.dial-cap{font-size:13px; color:var(--ink-2); margin-top:12px; max-width:26ch; line-height:1.5}
.spark{display:flex; align-items:flex-end; gap:4px; height:28px; margin-top:12px; width:100%}
.spark i{flex:1; border-radius:3px 3px 0 0; background:var(--accent); opacity:.28}
.spark i:last-child{opacity:.9}
.map-note{display:flex; gap:10px; align-items:flex-start; padding:13px 16px; margin-top:6px; border-radius:var(--r-2); background:var(--amber-tint); border:1px solid rgba(230,162,60,.36); color:var(--amber-ink); font-size:13px; line-height:1.55}
.map-note svg{color:var(--amber); margin-top:1px}
.map-note b{font-weight:700}
.legend{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px; font-size:12px; color:var(--gray)}
.legend .li{display:inline-flex; align-items:center; gap:6px}
.legend .sw{width:14px; height:14px; border-radius:5px; border:1px solid var(--glass-hair)}
/* Revenue-source pie (board section "מקור ההכנסה") - donut (reuses .dial/.cen, the calibration
   ring's own hole-in-the-middle markup) beside a per-bucket legend; wraps to stacked on narrow
   widths since the legend column's min-width plus the fixed donut width no longer fit side by side. */
.rp-grid{display:flex; gap:26px; align-items:center; flex-wrap:wrap}
.rp-legend{display:flex; flex-direction:column; gap:10px; flex:1; min-width:220px}
.rp-item{display:flex; align-items:center; gap:10px}
.rp-sw{width:14px; height:14px; border-radius:5px; flex:none; border:1px solid var(--glass-hair)}
.rp-item .rp-label{flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.rp-item .rp-val{font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap}
.map-grid{margin-top:12px; display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:100px; gap:10px}
.slab{position:relative; overflow:hidden; cursor:pointer; padding:13px 14px; border-radius:var(--r-2); display:flex; flex-direction:column; justify-content:space-between; min-width:0; border:1px solid var(--glass-hair); backdrop-filter:blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4); box-shadow:0 10px 22px -18px rgba(24,36,84,.32); transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation:slabIn .5s both cubic-bezier(.2,.8,.2,1)}
@keyframes slabIn{from{opacity:0; transform:scale(.95) translateY(8px)}to{opacity:1; transform:none}}
.slab::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.5), transparent 42%)}
.slab:hover{transform:translateY(-4px); box-shadow:var(--shadow); z-index:5}
.slab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.slab .s-top{display:flex; align-items:center; gap:7px; position:relative; z-index:1}
.slab .s-ch{font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--gray); background:rgba(255,255,255,.6); border:1px solid var(--glass-hair); border-radius:999px; padding:1px 8px}
.slab .s-name{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); min-width:0}
.slab .s-mid{position:relative; z-index:1}
.slab .s-roas{font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1}
.slab.xl .s-roas{font-size:36px}
.slab .s-bot{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10.5px; font-weight:600; color:var(--gray); position:relative; z-index:1; margin-top:8px}
.slab .s-share{height:4px; border-radius:2px; background:rgba(20,26,52,.09); overflow:hidden; margin-top:6px; position:relative; z-index:1}
.slab .s-share i{display:block; height:100%; border-radius:2px}
.slab .s-flag{position:absolute; inset-block-start:11px; inset-inline-end:11px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; z-index:2}
.s-flag svg{width:13px;height:13px;stroke-width:2}
.s-flag.attn{background:var(--neg); animation:pulse 2.2s infinite}
.s-flag.win{background:var(--pos)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(190,75,66,.5)}50%{box-shadow:0 0 0 7px rgba(190,75,66,0)}}
.h-winner{background:linear-gradient(158deg, rgba(27,127,75,.22), rgba(27,127,75,.07))}
.h-winner .s-roas{color:var(--pos-ink)}
.h-winner .s-share i{background:var(--pos)}
.h-healthy{background:linear-gradient(158deg, rgba(27,127,75,.12), rgba(27,127,75,.04))}
.h-healthy .s-roas{color:var(--pos-ink)}
.h-healthy .s-share i{background:var(--pos)}
.h-quiet{background:linear-gradient(158deg, rgba(47,90,240,.1), rgba(47,90,240,.03))}
.h-quiet .s-roas{color:var(--accent-ink)}
.h-quiet .s-share i{background:var(--accent)}
.h-bleed{background:linear-gradient(158deg, rgba(190,75,66,.22), rgba(190,75,66,.07))}
.h-bleed .s-roas{color:var(--neg-ink)}
.h-bleed .s-share i{background:var(--neg)}
.h-cold{background:linear-gradient(158deg, rgba(230,162,60,.14), rgba(255,255,255,.34)); border-style:dashed}
.h-cold .s-roas{color:var(--amber-ink)}
.h-cold .s-share i{background:var(--amber)}
/* Legend swatch only (final review hardening batch d) - matches the actual tile overlay 1:1
   (public/app/index.html renderHeatMap's `stripe` const): a real suspect tile is never .h-suspect
   itself, it keeps its health colour (.h-winner/.h-bleed/...) and layers this exact striped
   overlay on top, so the swatch must reproduce the same opacities/spacing to read as the same mark. */
.h-suspect{background:repeating-linear-gradient(135deg, rgba(116,116,126,.16) 0 7px, rgba(116,116,126,0) 7px 15px)}
.h-suspect .s-roas{color:var(--gray)}
.h-suspect .s-share i{background:var(--gray)}
.sp-xl{grid-column:span 3; grid-row:span 2}
.sp-l{grid-column:span 2; grid-row:span 2}
.sp-m{grid-column:span 2}
.sp-s{grid-column:span 1}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:14px}
.kpi{padding:18px}
.kpi .k{font-size:12.5px; color:var(--gray); font-weight:600; display:flex; flex-direction:column; gap:2px; min-height:34px}
.kpi .kg{font-size:11px; color:var(--gray); font-weight:500}
.kpi .v{font-size:clamp(30px,4.4vw,36px); font-weight:900; letter-spacing:-.02em; margin:10px 0 6px; color:var(--ink); line-height:1}
.kpi .v .u{font-size:20px; font-weight:700; color:var(--gray)}
.kpi.leak .v{color:var(--neg)}
.verdict{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 11px; border-radius:999px}
.v-up{color:var(--pos-ink); background:var(--pos-tint)}
.v-dn{color:var(--neg-ink); background:var(--neg-tint)}
.v-flat{color:var(--gray); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.kpi .delta{font-size:12px; color:var(--gray); margin-top:8px; line-height:1.45}
.bandline{margin-top:14px; padding:16px 20px; display:flex; gap:14px; align-items:flex-start; border-inline-start:3px solid var(--neg)}
.bandline .ic{width:38px;height:38px;border-radius:999px; display:grid; place-items:center; flex:none; background:var(--neg-tint-2); color:var(--neg)}
.bandline .ic svg{width:20px;height:20px}
.bandline b{color:var(--neg-ink); font-weight:700}
.digest{margin-top:14px; padding:18px 20px}
.digest ul{list-style:none; padding:0; margin:12px 0 0}
.digest li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink-2); padding:11px 0; border-bottom:1px solid var(--hairline-2)}
.digest li:last-child{border-bottom:none; padding-bottom:0}
.digest li .dt{margin-top:7px; width:8px; height:8px; border-radius:50%; flex:none}
.dt.up{background:var(--pos)}
.dt.dn{background:var(--neg)}
.dt.n{background:var(--amber)}
.digest li b{color:var(--ink); font-weight:700}
.card{padding:20px 22px; margin-bottom:12px}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px}
.chip svg{width:13px;height:13px;stroke-width:1.8}
.c-attn{color:var(--neg-ink); background:var(--neg-tint-2)}
.c-ok{color:var(--pos-ink); background:var(--pos-tint)}
.c-caution{color:var(--amber-ink); background:var(--amber-tint)}
.c-mute{color:var(--gray); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.metarow{display:flex; flex-wrap:wrap; gap:8px}
.evid{font-size:15px; color:var(--ink-2); margin-top:12px; line-height:1.62}
.evid b{color:var(--ink); font-weight:700}
.why{margin-top:11px; font-size:14px; color:var(--ink-2); line-height:1.58; background:rgba(255,255,255,.45); border:1px solid var(--glass-hair); border-radius:var(--r-2); padding:11px 14px}
.why b{color:var(--accent-ink)}
.card.decide{border-inline-start:3px solid var(--neg)}
.card.decide.grow{border-inline-start-color:var(--pos)}
.actions{display:flex; gap:9px; margin-top:16px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700; border:1px solid var(--glass-hair); background:rgba(255,255,255,.55); backdrop-filter:blur(8px); color:var(--ink-2); transition:.15s}
.btn svg{width:15px;height:15px}
.btn:hover{border-color:var(--gray); color:var(--ink)}
.btn-approve{background:linear-gradient(150deg, var(--pos), var(--pos-ink)); color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(27,127,75,.5)}
.btn-approve:hover{filter:brightness(1.06); color:#fff}
.btn-reject{color:var(--neg-ink); border-color:rgba(190,75,66,.32)}
.btn-reject:hover{background:var(--neg-tint); border-color:var(--neg)}
.caveat{margin-top:12px; font-size:12.5px; color:var(--gray); display:flex; gap:7px; align-items:flex-start; line-height:1.5}
.caveat svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--gray)}
.resolved{margin-top:13px; padding:11px 16px; border-radius:var(--r-2); font-size:14px; font-weight:600; display:none; align-items:center; gap:8px}
.resolved.approve{display:flex; background:var(--pos-tint); color:var(--pos-ink); border:1px solid rgba(27,127,75,.3)}
.resolved.reject{display:flex; background:var(--neg-tint); color:var(--neg-ink); border:1px solid rgba(190,75,66,.3)}
.dd-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.dd{padding:16px 18px; text-align:center}
.dd .n{font-size:32px; font-weight:900; line-height:1}
.dd .l{font-size:12px; color:var(--gray); margin-top:6px}
.dd.a .n{color:var(--neg)}
.dd.b .n{color:var(--pos-ink)}
.dd.c .n{color:var(--amber-ink)}
.dd.d .n{color:var(--gray)}
.dlist{overflow:hidden}
.dcard{cursor:pointer; padding:16px 18px; border-bottom:1px solid var(--hairline-2)}
.dcard:last-child{border-bottom:none}
.dcard .head{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.dcard .head .nm{font-size:15.5px; font-weight:700; margin-inline-end:auto; min-width:0}
.dcard .head .arw{color:var(--gray); transition:transform .26s}
.dcard.open .arw{transform:rotate(180deg)}
.roas-num{font-size:15px; font-weight:800}
.mbanner{margin-top:12px; padding:11px 14px; border-radius:var(--r-2); font-size:13px; font-weight:600; display:flex; gap:9px; align-items:flex-start; line-height:1.5}
.mbanner svg{flex:none;margin-top:1px}
.mbanner.red{background:var(--neg-tint); color:var(--neg-ink); border:1px solid rgba(190,75,66,.28)}
.mbanner.hold{background:var(--pos-tint); color:var(--pos-ink); border:1px solid rgba(27,127,75,.24)}
.mbanner.cold{background:var(--amber-tint); color:var(--amber-ink); border:1px solid rgba(230,162,60,.3)}
.dbody{display:none; margin-top:14px; border-top:1px solid var(--hairline-2); padding-top:13px}
.dcard.open .dbody{display:block}
.angle{display:flex; gap:11px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--hairline-2)}
.angle:last-child{border:none; padding-bottom:0}
.da-tag{font-size:10.5px; font-weight:700; padding:2px 10px; border-radius:999px; flex:none; margin-top:2px}
.da-esc{color:var(--neg-ink); background:var(--neg-tint-2)}
.da-hold{color:var(--pos-ink); background:var(--pos-tint)}
.da-read{color:var(--gray); background:rgba(255,255,255,.55)}
.da-cold{color:var(--amber-ink); background:var(--amber-tint)}
.angle .txt{font-size:14px; color:var(--ink-2); line-height:1.55}
.angle .txt b{color:var(--ink)}
/* missions */
.mission-top{display:flex; align-items:center; gap:18px; padding:18px 22px; margin-bottom:14px}
.mprog{flex:1; min-width:0}
.mprog .row{display:flex; justify-content:space-between; gap:10px; font-size:14px; font-weight:600; flex-wrap:wrap}
.mbar{height:9px; border-radius:999px; margin-top:10px; overflow:hidden; background:rgba(47,90,240,.1); border:1px solid var(--glass-hair)}
.mbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--pos)); transition:width .6s cubic-bezier(.2,.8,.2,1)}
.mtot{text-align:center; flex:none}
.mtot .n{font-size:32px; font-weight:900; color:var(--ink); line-height:1}
.mtot .l{font-size:11.5px; color:var(--gray); margin-top:4px}
.mlist{overflow:hidden}
.mission{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-bottom:1px solid var(--hairline-2); transition:background .2s; cursor:pointer}
.mission:last-child{border-bottom:none}
.mission:hover{background:rgba(255,255,255,.4)}
.mission.done{opacity:.62}
.mission.done .m-title{text-decoration:line-through; color:var(--gray)}
.check{width:26px; height:26px; border-radius:9px; border:1.5px solid var(--glass-hair); background:rgba(255,255,255,.5); flex:none; margin-top:1px; display:grid; place-items:center; color:transparent; transition:.18s}
.check svg{width:15px;height:15px;stroke-width:2.4}
.mission:hover .check{border-color:var(--pos)}
.mission.done .check{background:var(--pos); border-color:var(--pos); color:#fff}
.m-title{font-size:15px; font-weight:700}
.m-sub{font-size:13.5px; color:var(--ink-2); margin-top:4px; line-height:1.5}
.m-impact{margin-inline-start:auto; text-align:center; flex:none}
.m-impact .amt{font-size:18px; font-weight:800; color:var(--pos-ink)}
.m-impact .lbl{font-size:10.5px; color:var(--gray)}
/* department */
.dept-list{overflow:hidden; margin-bottom:8px}
.lens{padding:17px 19px; border-bottom:1px solid var(--hairline-2)}
.lens:last-child{border-bottom:none}
.lens .top{display:flex; align-items:center; gap:12px}
.lens .av{width:38px;height:38px;border-radius:999px; display:grid; place-items:center; flex:none; background:var(--accent-tint); color:var(--accent); border:1px solid var(--glass-hair)}
.lens .av svg{width:19px;height:19px}
.lens .nm{font-weight:700; font-size:15px}
.lens .role{font-size:12.5px; color:var(--gray)}
.lens .state{margin-inline-start:auto; font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px}
.state-active{color:var(--pos-ink); background:var(--pos-tint)}
.state-soon{color:var(--gray); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.depth{height:6px; border-radius:999px; margin-top:13px; overflow:hidden; background:rgba(47,90,240,.1); border:1px solid var(--glass-hair)}
.depth i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(47,90,240,.5), var(--accent))}
.lens .dl{font-size:12px; color:var(--gray); margin-top:7px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.lesson{border-bottom:1px solid var(--hairline-2)}
.lesson:last-child{border-bottom:none}
.lesson-hd{padding:16px 19px; display:flex; gap:13px; align-items:flex-start; cursor:pointer; border-inline-start:3px solid var(--accent)}
.lesson-hd:hover{background:rgba(255,255,255,.4)}
/* The dept zone's לקחים cards are read-only (no expand/collapse, no click handler) - deptLessonCardHtml
   marks its .lesson-hd with .static so the hover highlight (a leftover expand affordance from the
   mockup, where .lesson IS clickable/toggleable) never implies interactivity that is not there
   (final review hardening batch e). Scoped modifier, not a blanket override, so the mockup file's
   own genuinely-clickable .lesson-hd is untouched. */
.lesson-hd.static:hover{background:none}
.lesson .lic{width:34px;height:34px;border-radius:999px; display:grid; place-items:center; flex:none; background:var(--accent-tint); color:var(--accent)}
.lesson .lic svg{width:17px;height:17px}
.lesson .t{font-size:15px; font-weight:700; color:var(--ink)}
.lesson .d{font-size:13.5px; color:var(--ink-2); margin-top:5px; line-height:1.55}
.lesson .arw{color:var(--gray); margin-inline-start:auto; flex:none; transition:transform .26s; margin-top:4px}
.lesson.open .arw{transform:rotate(180deg)}
.lesson-more{display:none; padding:0 19px 16px; border-inline-start:3px solid var(--accent)}
.lesson.open .lesson-more{display:block}
.lesson .src{font-size:11.5px; color:var(--gray)}
.lesson-more .mtxt{font-size:13.5px; color:var(--ink-2); line-height:1.6; margin-bottom:8px; background:rgba(255,255,255,.45); border:1px solid var(--glass-hair); border-radius:var(--r-2); padding:11px 14px}
.win-arch{display:flex; gap:14px; align-items:center; padding:15px 19px; border-bottom:1px solid var(--hairline-2)}
.win-arch:last-child{border-bottom:none}
.win-arch .wic{width:34px;height:34px;border-radius:999px; display:grid; place-items:center; flex:none; background:var(--pos-tint); color:var(--pos-ink)}
.win-arch .wt{font-weight:700; font-size:14.5px}
.win-arch .ba{display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--gray); margin-top:3px; flex-wrap:wrap}
.win-arch .before{color:var(--neg-ink); text-decoration:line-through}
.win-arch .after{color:var(--pos-ink); font-weight:600}
.win-arch .ba svg{width:13px;height:13px;color:var(--gray)}
.win-arch .amt{margin-inline-start:auto; font-size:17px; font-weight:800; color:var(--ink); text-align:center; flex:none}
.win-arch .amt small{display:block; font-size:10px; color:var(--gray); font-weight:500}
.win-arch .amt svg{width:20px;height:20px;color:var(--pos);stroke-width:2.4}
/* report */
.report-hero{padding:26px 28px; margin-bottom:14px}
.report-hero h2{font-size:clamp(22px,4vw,34px); font-weight:900; margin:8px 0 12px; letter-spacing:-.015em; line-height:1.1}
.report-hero p{font-size:15px; color:var(--ink-2); max-width:66ch; line-height:1.62}
.rgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px}
.rstat{padding:15px 17px; border-radius:var(--r-2); background:rgba(255,255,255,.5); border:1px solid var(--glass-hair)}
.rstat .n{font-size:26px; font-weight:900; letter-spacing:-.01em}
.rstat .l{font-size:12px; color:var(--gray); margin-top:4px}
.dim-tag{font-size:10.5px; font-weight:700; padding:2px 10px; border-radius:999px; margin-inline-end:9px}
.dim-acq{color:var(--accent-ink); background:var(--accent-tint-2)}
.dim-ret{color:var(--pos-ink); background:var(--pos-tint)}
.dim-mon{color:var(--amber-ink); background:var(--amber-tint)}
.rline{padding:13px 0; border-bottom:1px solid var(--hairline-2)}
.rline:last-child{border:none; padding-bottom:0}
.rline b{font-weight:700}
/* settings */
.stage-row{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.stage-opt{flex:1; min-width:220px; padding:17px 19px; cursor:pointer; transition:.18s}
.stage-opt:hover{border-color:rgba(47,90,240,.5)}
.stage-opt.sel{border-color:var(--accent); background:linear-gradient(158deg, var(--accent-tint-2), rgba(255,255,255,.4))}
.stage-opt .h{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; flex-wrap:wrap}
.stage-opt .badge-cur{font-size:10.5px; color:var(--pos-ink); font-weight:700; margin-inline-start:auto; display:inline-flex; align-items:center; gap:4px}
.stage-opt .badge-cur .dot{width:6px;height:6px;border-radius:50%;background:var(--pos)}
.stage-opt .d{font-size:13.5px; color:var(--ink-2); margin-top:9px; line-height:1.55}
.kpi-set{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.kpi-in{padding:14px 16px}
.kpi-in label{font-size:12px; color:var(--gray); font-weight:600; display:block}
.kpi-in .field{display:flex; align-items:baseline; gap:5px; margin-top:6px}
.kpi-in input{flex:1; width:100%; background:rgba(255,255,255,.55); border:1px solid var(--glass-hair); color:var(--ink); font-size:19px; font-weight:700; padding:8px 12px; border-radius:var(--r-3); font-variant-numeric:tabular-nums}
.kpi-in input:focus{outline:none; border-color:var(--accent)}
.kpi-in .u{font-size:13px; color:var(--gray)}
.estop-zone{border:1px solid rgba(230,162,60,.55); overflow:hidden}
.ez-head{display:flex; gap:14px; align-items:flex-start; padding:20px 22px}
.ez-ic{width:40px;height:40px;border-radius:999px; display:grid; place-items:center; flex:none; background:var(--amber-tint); color:var(--amber-ink)}
.ez-ic svg{width:21px;height:21px}
.ez-title{font-size:16px; font-weight:800; letter-spacing:-.005em}
.ez-desc{font-size:13.5px; color:var(--ink-2); margin-top:6px; line-height:1.6; max-width:64ch}
.ez-status{margin-inline-start:auto; flex:none; font-size:11.5px; font-weight:700; padding:5px 13px; border-radius:999px; color:var(--gray); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.estop-zone.frozen .ez-status{color:#fff; background:var(--amber-ink); border-color:transparent}
.ez-foot{padding:0 22px 20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.ez-arm{border-color:rgba(230,162,60,.5); color:var(--amber-ink); font-weight:700}
.ez-arm:hover{background:var(--amber-tint); border-color:var(--amber)}
.ez-confirm{display:none; gap:10px; align-items:center; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2); font-weight:600}
.estop-zone.arming .ez-confirm{display:flex}
.estop-zone.arming .ez-arm{display:none}
.ez-yes{background:var(--amber-ink); color:#fff; border-color:transparent}
.ez-yes:hover{background:#6f470f; color:#fff}
.ez-release{display:none; background:var(--ink); color:#fff; border-color:transparent}
.estop-zone.frozen .ez-release{display:inline-flex}
.estop-zone.frozen .ez-arm{display:none}
.estop-zone.frozen{border-color:var(--amber)}
.estop-zone.frozen .ez-head{background:var(--amber-tint)}
.health-strip{margin-top:20px; padding:18px 20px}
/* drawer (glass instrument) */
.scrim{position:fixed; inset:0; z-index:70; background:rgba(20,26,52,.24); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .26s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; inset-block:0; inset-inline-start:0; width:min(540px,94vw); z-index:80; display:flex; flex-direction:column; transform:translateX(110%); visibility:hidden; pointer-events:none; transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s .32s; background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(250,250,251,.84)); backdrop-filter:blur(30px) saturate(1.5); border-inline-end:1px solid var(--glass-hair); border-start-end-radius:var(--r); border-end-end-radius:var(--r); box-shadow:var(--shadow-lg)}
.drawer.on{transform:none; visibility:visible; pointer-events:auto; transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s}
.dr-hd{padding:22px 24px 16px; border-bottom:1px solid var(--hairline-2)}
.dr-hd .row1{display:flex; align-items:center; gap:10px}
.dr-hd .dr-name{font-size:21px; font-weight:800; letter-spacing:-.01em; min-width:0}
.dr-hd .close{margin-inline-start:auto; width:38px; height:38px; border-radius:999px; border:1px solid var(--glass-hair); background:rgba(255,255,255,.6); color:var(--gray); display:grid; place-items:center; flex:none}
.dr-hd .close:hover{color:var(--ink); border-color:var(--gray)}
.dr-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.tag{font-size:11.5px; font-weight:600; padding:3px 12px; border-radius:999px; color:var(--ink-2); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.dr-body{overflow:auto; padding:20px 24px 40px; flex:1}
.sect-t{font-size:12px; font-weight:700; color:var(--gray); letter-spacing:.1em; text-transform:uppercase; margin:18px 0 11px}
.dangle{padding:14px 16px; margin-bottom:11px; border-radius:var(--r-2); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.dangle.esc{border-inline-start:3px solid var(--neg)}
.dangle .a-hd{display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-wrap:wrap}
.dangle .a-lens{font-size:13px; font-weight:700}
.dangle .a-pillar{font-size:10.5px; font-weight:600; color:var(--gray); background:rgba(255,255,255,.6); border:1px solid var(--glass-hair); padding:2px 9px; border-radius:999px}
.a-state{font-size:10.5px; font-weight:700; padding:2px 10px; border-radius:999px; margin-inline-start:auto}
.st-speaks{color:var(--pos-ink); background:var(--pos-tint)}
.st-esc{color:var(--neg-ink); background:var(--neg-tint-2)}
.st-hold{color:var(--gray); background:rgba(255,255,255,.6)}
.st-thin{color:var(--amber-ink); background:var(--amber-tint)}
.dangle .a-txt{font-size:14px; color:var(--ink-2); line-height:1.6}
.a-ev{margin-top:10px; display:flex; flex-wrap:wrap; gap:7px}
.ev{font-size:11.5px; font-weight:600; background:rgba(255,255,255,.6); border:1px solid var(--glass-hair); border-radius:999px; padding:3px 11px; color:var(--ink-2)}
.ev .evk{color:var(--gray); font-weight:500; margin-inline-end:5px}
.esc-act{margin-top:12px; padding-top:12px; border-top:1px dashed var(--hairline-2)}
.esc-act .ea-line{font-size:13.5px; font-weight:700; margin-bottom:9px; display:flex; gap:7px; align-items:center}
.esc-act .ea-line svg{color:var(--accent)}
.act-btns{display:flex; gap:8px; flex-wrap:wrap}
.btn.sm{padding:8px 14px; font-size:13px}
/* veto modal */
.modal-bg{position:fixed; inset:0; z-index:100; background:rgba(20,26,52,.3); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:24px}
.modal-bg.on{display:flex; animation:rise .28s}
.modal{max-width:460px; width:100%; padding:26px; border-radius:20px; background:linear-gradient(160deg, rgba(255,255,255,.95), rgba(250,250,251,.9)); backdrop-filter:blur(30px) saturate(1.4); border:1px solid var(--glass-hair); box-shadow:var(--shadow-lg)}
.modal h3{font-size:19px; font-weight:800}
.modal p{font-size:14px; color:var(--ink-2); margin-top:7px; line-height:1.55}
.veto-tags{display:flex; gap:9px; margin:18px 0; flex-wrap:wrap}
.vt{display:flex; align-items:center; gap:7px; padding:11px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink-2); background:rgba(255,255,255,.55); border:1px solid var(--glass-hair)}
.vt:hover{border-color:var(--gray)}
.vt.sel{background:var(--accent-tint-2); border-color:var(--accent); color:var(--accent-ink)}
.vt svg{width:15px;height:15px}
.modal textarea{width:100%; background:rgba(255,255,255,.55); border:1px solid var(--glass-hair); border-radius:var(--r-2); color:var(--ink); font-size:14px; padding:11px 14px; resize:vertical; min-height:66px}
.modal textarea:focus{outline:none; border-color:var(--accent)}
.modal .foot{display:flex; gap:9px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
/* toast */
.toast{position:fixed; inset-block-end:26px; inset-inline:0; z-index:120; display:flex; justify-content:center; pointer-events:none; padding:0 16px}
.toast .tin{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:999px; font-weight:700; font-size:14px; color:#fff; background:linear-gradient(150deg, var(--accent), var(--accent-press)); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(12px); transition:.28s; max-width:92vw}
.toast .tin svg{width:16px;height:16px}
.toast.show .tin{opacity:1; transform:none}
.toast.warn .tin{background:linear-gradient(150deg, var(--amber), var(--amber-ink))}
.toast.ok .tin{background:linear-gradient(150deg, var(--pos), var(--pos-ink))}
/* responsive */
@media(max-width:1280px){ .hero-grid{gap:26px}
.hero{padding:28px}
}
@media(max-width:1024px){ .hero-grid{grid-template-columns:1fr; gap:24px}
.dial-card{max-width:360px; margin:0 auto; width:100%}
.map-grid{grid-template-columns:repeat(4,1fr)}
.sp-xl{grid-column:span 2; grid-row:span 2}
.sp-l{grid-column:span 2; grid-row:span 2}
.kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){ .nav-shell{display:none}
.navsheet{display:block}
.hamb{display:grid}
.tenant, .sysstat{display:none}
/* Task 9 responsive-sweep fix: #adminLink/#frozenChip both carry the .sysstat class specifically
   to collapse here like the rest of the header chips, but boot()/updateFrozenChip() toggle them
   via inline style.display - which otherwise wins over this class rule and left "ניהול"/"מוקפא"
   crowding the topbar next to the hamburger on mobile (measured: 2 non-44px chips squeezing out
   the brand lockup at 375px). !important restores the original collapse-on-mobile intent. */
.tenant, .sysstat, #adminLink, #frozenChip{display:none !important}
.topbar-in{padding:10px 16px}
.wrap{padding:0 16px}
.period-bar{padding:10px 14px; gap:10px}
.pb-now{margin-inline-start:0; width:100%}
.map-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:104px}
.sp-xl,.sp-l,.sp-m{grid-column:span 2; grid-row:auto}
.sp-s{grid-column:span 1}
.slab.xl .s-roas{font-size:30px}
.kpi-set{grid-template-columns:repeat(2,1fr)}
.rgrid{grid-template-columns:repeat(3,1fr)}
/* Task 9 responsive-sweep fix: .check dropped from this list - it is always aria-hidden/decorative
   (the missions zone's read-only checkmark glyph; missions cards are not clickable), never itself a
   touch target. The blanket min-height:44px was stretching its 26x26 base into a 26x44 pill at
   narrow widths for no functional reason - visually confirmed at 375px (missions zone). */
.btn,.tab,.vt,.uavatar,.hamb,.close,.seg-b{min-height:44px}
/* Task 9 responsive-sweep fix: .hamb (40x40 base) and .close (38x38 base) are icon-only SQUARE
   buttons - the min-height rule above already bumped their height to 44px but left width
   untouched, so measured rects came back 40x44/38x44: under the 44px floor on the narrow axis
   AND visibly stretched from circle to oval. min-width restores both the touch-target floor and
   the circular shape. */
.hamb,.close{min-width:44px}
.navsheet .tab{min-height:50px}
.dd-row{grid-template-columns:repeat(2,1fr)}
/* Task 9 responsive-sweep fix: #marginEditBtn is an inline text-link inside the bottom-line's
   sentence (no CSS class, no padding - see public/app/index.html's blHtml) - measured 109x22 at
   375px, well under the 44px touch-target floor. Padding+matching negative margin grows the tap
   box without shifting surrounding text (the negative margin cancels the padding's footprint in
   the inline flow), so the sentence still reads the same at every width. */
#marginEditBtn{padding:13px 4px; margin:-13px -4px}
}
@media(max-width:560px){ .map-grid{display:flex; flex-direction:column; gap:8px}
.slab{grid-column:auto !important; grid-row:auto !important; min-height:74px}
.slab .s-mid{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px}
.slab.xl .s-roas,.slab .s-roas{font-size:26px}
.rgrid{grid-template-columns:1fr}
.kpis{grid-template-columns:1fr}
.report-hero,.hero{padding:22px 18px}
.card{padding:18px}
.zone-lead{font-size:14.5px}
.seg{flex-wrap:wrap; border-radius:var(--r)}
}
@media(max-width:480px){ .kpi-set{grid-template-columns:1fr}
.stage-opt{min-width:100%}
.streak{min-width:100%}
.dd-row{grid-template-columns:repeat(2,1fr)}
.actions .btn{flex:1}
.drawer{width:100vw; border-radius:0}
.pad{padding:20px 0}
.pb-custom{width:100%}
}
@media(max-width:375px){ .wrap{padding:0 12px}
.topbar-in{padding:10px 12px; gap:10px}
.brand-lock{font-size:22px}
.brand .sub{display:none}
.dd-row{grid-template-columns:1fr}
.mission-top{flex-direction:column; align-items:stretch; gap:14px}
.mtot{text-align:start}
}
@media(prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important}
.settle{opacity:1}
.blob{animation:none !important}
}
/* Ronen ruling (2026-07-11): in the top bar the lockup and the room title sit on ONE baseline row
   (was a stacked sub-line under the lockup). Additive and scoped to .topbar so nothing else in the
   header reflows; the existing <=375px rule that hides .brand .sub still applies untouched. */
.topbar .brand{align-items:baseline}
.topbar .brand .sub{margin-top:0; white-space:nowrap}