/* Uptimia marketing — reusable /cp dashboard vignette (.vg3-*), shared.
   Extracted verbatim from uptime-monitoring-v1-hero-alt3.html. The MARKUP is an
   inline per-page copy (each page customises its dashboard content); only this CSS
   is shared. Depends on --mono (tokens.css). Live-incident loop = @keyframes vg3*.
   The proof-band-into-hero restyling from -hero-alt3 is intentionally NOT included. */

.hero-a3 .hero-grid{grid-template-columns:.88fr 1.12fr;gap:60px}
.vg3-wrap{perspective:2200px;position:relative}
.vg3-wrap::after{content:'';position:absolute;left:8%;right:8%;bottom:-30px;height:80px;background:radial-gradient(ellipse at center,rgba(0,163,95,.45),transparent 70%);filter:blur(20px);z-index:0;pointer-events:none}
.vg3{position:relative;z-index:1;background:#fff;border-radius:14px;overflow:hidden;
      transform:rotateY(-9deg) rotateX(6deg) rotateZ(.5deg) scale(.92);transform-style:preserve-3d;
      transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s cubic-bezier(.2,.7,.2,1);
      box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.vg3-wrap:hover .vg3{transform:rotateY(-5deg) rotateX(3deg) rotateZ(0) scale(.96)}
.vg3-body{display:flex;align-items:stretch;height:546px}
.vg3-sb{flex:none;width:140px;background:#2c3e50;color:#fff;display:flex;flex-direction:column}
.vg3-logo{display:flex;align-items:center;height:31px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.06);flex:none}
.vg3-logo .lg-big{width:76px;height:16.5px}
.vg3-logo .lg-small{display:none;width:17px;height:14.5px}
.vg3-nav{flex:1;padding:8px 6px;display:flex;flex-direction:column;gap:1.5px}
.vg3-navf{flex:none;padding:8px 6px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:1.5px}
.vg3-sb .it{display:flex;align-items:center;gap:6px;padding:4.5px 7px;border-radius:5px;font-size:9px;font-weight:550;color:rgba(255,255,255,.85);white-space:nowrap;min-width:0}
.vg3-sb .it .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vg3-sb .it svg{width:10px;height:10px;flex:none}
.vg3-sb .it .ch{width:8px;height:8px;flex:none}
.vg3-sb .it.on{background:rgba(255,255,255,.1);color:#fff;font-weight:650}
.vg3-sb .ct{font-family:var(--mono);font-size:6.5px;font-weight:500;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;flex:none}
.vg3-sb .bdg{font-size:6.5px;font-weight:650;line-height:1;padding:2px 4px;border-radius:999px;background:rgba(224,36,36,.16);color:#fda4a4;font-variant-numeric:tabular-nums}
/* Expanded Monitoring type list (frame param monitoring_open) — mirrors the real
   /cp sidebar: grouped caps labels + type rows w/ lucide icons and mono counts. */
.vg3-subnav{display:flex;flex-direction:column;gap:1px}
.vg3-subnav .gl{padding:4px 7px 2px 22px;font-size:5.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.35);white-space:nowrap}
.vg3-subnav .st{display:flex;align-items:center;gap:5px;padding:2.5px 7px 2.5px 22px;border-radius:5px;font-size:8px;font-weight:500;color:rgba(255,255,255,.75);white-space:nowrap;min-width:0}
.vg3-subnav .st svg{width:8.5px;height:8.5px;flex:none;opacity:.8}
.vg3-subnav .st .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vg3-subnav .st.on{background:rgba(255,255,255,.1);color:#fff;font-weight:650}
.vg3-subnav .st .ct{font-family:var(--mono);font-size:6.5px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums;flex:none}
.vg3-subnav .sdn{display:inline-flex;align-items:center;gap:2px;font-size:6.5px;font-weight:700;color:#fda4a4;font-variant-numeric:tabular-nums}
.vg3-subnav .sdn i{width:3.5px;height:3.5px;border-radius:50%;background:#f87171}
.vg3-sb .it .ch.rot{transform:rotate(180deg)}
.vg3-main{flex:1;min-width:0;background:#f4f4f5;padding:12px 14px 14px;display:flex;flex-direction:column;gap:9px;overflow:hidden}
.vg3-main>*{flex:none}
.vg3-main>.vg3-cards{flex:1;min-height:0}
.vg3-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vg3-title b{font-size:15px;font-weight:700;letter-spacing:-.025em;color:#18181b}
.vg3-add{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;font-weight:650;color:#fff;background:#008A4F;border-radius:5px;padding:4px 8px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,163,95,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.vg3-add svg{width:8px;height:8px;flex:none}
.vg3-chips{display:flex;align-items:center;gap:4px;min-width:0}
.vg3-chip{--g:4px;font-size:8.5px;font-weight:650;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:9px;padding:3.5px 8px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.vg3-chip .n{color:#8a8a93;font-weight:500;font-variant-numeric:tabular-nums}
.vg3-chip .gd{width:5px;height:5px;border-radius:1.5px;flex:none}
.vg3-chip.on{background:#EBFDF2;border-color:rgba(0,163,95,.3);color:#008A4F}
.vg3-chip.on .n{color:#008A4F;opacity:.7}
.vg3-dn{font-size:6.5px;font-weight:700;line-height:1;padding:2.5px 4px;border-radius:999px;background:#FEF2F1;color:#D92C20;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3-mng{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:8px;font-weight:500;color:#52525b;white-space:nowrap}
.vg3-mng svg{width:7px;height:7px;flex:none}
.vg3-ovh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vg3-ovh h4{font-size:10px;font-weight:600;color:#18181b;letter-spacing:-.01em}
.vg3-dr{display:inline-flex;align-items:center;gap:4px;height:15px;padding:0 6px;font-size:8px;font-weight:500;color:#18181b;background:#fff;border:1px solid #ececef;border-radius:5px;white-space:nowrap}
.vg3-dr svg{width:8px;height:8px;flex:none;color:#52525b}
.vg3-kpis{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);overflow:hidden}
.vg3-kpi{padding:8px 8px 9px;border-left:1px solid #f4f4f5;min-width:0}
.vg3-kpi:first-child{border-left:0}
.vg3-kpi .l{display:block;font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3-kpi .v{display:block;margin-top:3px;font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#18181b;font-variant-numeric:tabular-nums}
.vg3-kpi .v.gd{color:#008A4F}
.vg3-kpi .v .u{font-size:8px;font-weight:500;color:#8a8a93;margin-left:1px}
.vg3-kpi .s{display:block;margin-top:3px;font-size:7px;line-height:1.35;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.vg3-kpi .v.sw,.vg3-kpi .s.sw{display:grid;max-width:100%}
.vg3-tag{font-size:6.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#52525b;background:#f4f4f5;border-radius:4px;padding:2px 4px;white-space:nowrap;flex:none}
.vg3-attn{display:grid;grid-template-rows:minmax(0,1fr);margin-bottom:0;animation:vg3Attn 10s linear infinite}
.vg3-attn>*{min-height:0;overflow:hidden}
.vg3-alert{background:#fff;border:1px solid rgba(224,36,36,.25);border-radius:12px;padding:8px 12px 9px;box-shadow:0 1px 2px rgba(15,17,26,.04)}
.vg3-alert .r1{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#D92C20}
.vg3-alert .r1 svg{width:9px;height:9px;flex:none}
.vg3-alert .r1 .all{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-weight:500;letter-spacing:0;text-transform:none;color:#52525b;font-size:8px}
.vg3-alert .r1 .all svg{width:7px;height:7px}
.vg3-alert .r2{display:flex;align-items:center;gap:7px;margin-top:6px;min-width:0}
.vg3-alert .r2 .dot{width:7px;height:7px;border-radius:50%;flex:none;background:#E02424;box-shadow:0 0 0 3px rgba(224,36,36,.14)}
.vg3-alert .r2 .nm{display:flex;align-items:center;gap:5px;min-width:0;max-width:45%}
.vg3-alert .r2 .nm b{font-size:9px;font-weight:650;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3-alert .r2 .msg{flex:1;font-family:var(--mono);font-size:8px;color:#52525b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vg3-alert .r2 .chip{margin-left:auto;flex:none;font-size:8px;font-weight:600;border-radius:4px;padding:2px 6px;white-space:nowrap;color:#D92C20;background:#FEF2F1;font-variant-numeric:tabular-nums}
.vg3-alert .r2 .post{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:8px;font-weight:500;color:#fff;background:#00A35F;border:1px solid rgba(0,163,95,.3);border-radius:5px;padding:3px 6px}
.vg3-alert .r2 .post svg{width:8px;height:8px;flex:none}
.vg3-alert .r2 .view{flex:none;font-size:8px;font-weight:500;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:5px;padding:3px 7px}
.vg3-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.vg3-search{display:inline-flex;align-items:center;gap:5px;height:17px;width:150px;padding:0 7px;background:#fff;border:1px solid #ececef;border-radius:6px;font-size:8px;color:#8a8a93;white-space:nowrap}
.vg3-search svg{width:8px;height:8px;flex:none;color:#8a8a93}
.vg3-tools .rt{display:flex;align-items:center;gap:6px;flex:none}
.vg3-fchips{display:flex;align-items:center;gap:3px}
.vg3-fchip{--g:3px;display:inline-flex;align-items:center;gap:3.5px;height:14px;padding:0 5px;border-radius:5px;border:1px solid #ececef;background:#fff;font-size:7px;font-weight:650;color:#52525b;white-space:nowrap;font-variant-numeric:tabular-nums}
.vg3-fchip.on{background:#EBFDF2;border-color:rgba(0,163,95,.3);color:#008A4F}
.vg3-fchip i{width:4.5px;height:4.5px;border-radius:50%;flex:none}
.vg3-fchip .n{color:#8a8a93;font-weight:500}
.vg3-fchip.on .n{color:#008A4F;opacity:.7}
.vg3-sel{display:inline-flex;align-items:center;gap:8px;height:14px;padding:0 5px;border-radius:5px;border:1px solid #ececef;background:#fff;font-size:7px;font-weight:650;color:#52525b;white-space:nowrap}
.vg3-sel svg{width:7px;height:7px;flex:none}
.vg3-vm{display:inline-flex;align-items:center;border:1px solid #ececef;border-radius:5px;overflow:hidden;background:#fff;flex:none}
.vg3-vm span{display:flex;align-items:center;justify-content:center;width:15px;height:14px;color:#52525b;border-right:1px solid #ececef}
.vg3-vm span:last-child{border-right:0}
.vg3-vm span.on{background:#008A4F;color:#fff}
.vg3-vm svg{width:8px;height:8px}
.vg3-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.vg3-card{position:relative;background:#fff;border:1px solid #ececef;border-radius:12px;padding:9px 11px 8px;box-shadow:0 1px 2px rgba(15,17,26,.04);min-width:0;display:flex;flex-direction:column;gap:5px}
.vg3-card.lv{animation:vg3CardB 10s linear infinite}
.vg3-card .h{display:flex;align-items:center;gap:5px;min-width:0}
.vg3-card .h .dt{width:6px;height:6px;border-radius:50%;background:#00A35F;flex:none}
.vg3-card .h b{font-size:9.5px;font-weight:650;color:#18181b;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3-card .h .gsw{width:5px;height:5px;border-radius:1.5px;flex:none}
.vg3-card .h .rt{margin-left:auto;display:flex;align-items:center;gap:3px;flex:none}
.vg3-card .h .cb{width:7px;height:7px;border:1px solid #d4d4d8;border-radius:1.5px;flex:none}
.vg3-card .h .mn{display:flex;flex:none;color:#8a8a93}
.vg3-card .h .mn svg{width:8px;height:8px}
.vg3-card .u{display:flex;align-items:center;gap:5px;min-width:0}
.vg3-card .pill{flex:none;display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:650;border-radius:999px;padding:1.5px 5px 1.5px 4px;border:1px solid transparent}
.vg3-card .pill i{width:4px;height:4px;border-radius:50%;flex:none}
.vg3-card .pill.up{color:#008A4F;background:#EBFDF2;border-color:rgba(0,163,95,.25)}
.vg3-card .pill.up i{background:#00A35F}
.vg3-card .pill.dn{color:#D92C20;background:#FEF2F1;border-color:rgba(217,44,32,.25)}
.vg3-card .pill.dn i{background:#E02424}
.vg3-card .url{font-family:var(--mono);font-size:8px;color:#8a8a93;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3-card .bars{display:flex;gap:1px;height:16px}
.vg3-card .bars i{flex:1;border-radius:2px;background:#00A35F}
.vg3-card .bars i.rr{background:#E02424}
.vg3-card .f{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;margin-top:auto;padding-top:5px;border-top:1px solid #f4f4f5}
.vg3-card .f .pc{font-size:10.5px;font-weight:700;color:#00A35F;font-variant-numeric:tabular-nums}
.vg3-card .f .avg{font-size:8px;color:#8a8a93;font-variant-numeric:tabular-nums;white-space:nowrap}
.sw{display:inline-grid;min-width:0;max-width:100%;overflow:hidden}
.sw>*{grid-area:1/1;justify-self:start;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.sw.end>*{justify-self:end}
.sw>.a{opacity:0;animation:vg3A 10s linear infinite}
.sw>.b{opacity:1;animation:vg3B 10s linear infinite}
.sw.late>.a{animation-name:vg3A2}
.sw.late>.b{animation-name:vg3B2}
.pop{--g:5px;display:inline-grid;grid-template-columns:minmax(0,1fr);margin-left:0;opacity:1;overflow:hidden;animation:vg3Pop 10s linear infinite}
.pop>*{min-width:0;white-space:nowrap}
/* Monitor-header status pill: size the swap wrapper to the pill, not to a line box.
   .sw>.a/.b are blockified grid items, so a bare .pill inside one sits on a LINE BOX
   built from the header row's 15px/23.25px strut (23px tall) and is BASELINE-aligned
   in it — which drops the pill 3px below every sibling the align-items:center row
   centres (.incp "incident — Post update", .vg3-tag, the title). .pop>.incp has no
   such wrapper, so the two chips never lined up on any of the 20 monitor-detail
   screens. Real /cp centres all three on one axis (MonitorDetailLayout.tsx renders
   `flex items-center` over h1 + status Badge + the Post-update button; measured
   against the built cp CSS: h1 25.3px, Badge 22px, button 23.25px — identical
   centres). Making the wrapper a centred flex box reproduces that. Scoped to the
   header row on purpose: text swaps elsewhere need their line box for the ellipsis,
   and the KPI pill keeps its deliberate baseline nudge. */
.vg3.upd .upd-head .r>.sw>*:has(>.pill){display:flex;align-items:center}
.vg3-card .h .dt.lv{background:#E02424;animation:vg3Dot 10s linear infinite}
.vg3-card .bars i.lv{background:#E02424;animation:vg3Bar 10s linear infinite}
.vg3-card .f .pc.lv{color:#D92C20;animation:vg3Pc 10s linear infinite}
.vg3-kpi .v.sw>.b.bad{color:#D92C20}
@keyframes vg3A{0%,36.9%{opacity:1}37%,92.9%{opacity:0}93%,100%{opacity:1}}
@keyframes vg3B{0%,36.9%{opacity:0}37%,92.9%{opacity:1}93%,100%{opacity:0}}
@keyframes vg3A2{0%,43.9%{opacity:1}44%,90.9%{opacity:0}91%,100%{opacity:1}}
@keyframes vg3B2{0%,43.9%{opacity:0}44%,90.9%{opacity:1}91%,100%{opacity:0}}
@keyframes vg3Bar{0%,33.9%{background:#00A35F}34%,92.9%{background:#E02424}93%,100%{background:#00A35F}}
@keyframes vg3Dot{0%,33.9%{background:#00A35F}34%,92.9%{background:#E02424}93%,100%{background:#00A35F}}
@keyframes vg3Pc{0%,36.9%{color:#00A35F}37%,92.9%{color:#D92C20}93%,100%{color:#00A35F}}
@keyframes vg3CardB{0%,36.9%{border-color:#ececef}37%,92.9%{border-color:rgba(224,36,36,.35)}93%,100%{border-color:#ececef}}
@keyframes vg3Attn{0%,43.9%{grid-template-rows:minmax(0,0fr);margin-bottom:-9px}44%,90.9%{grid-template-rows:minmax(0,1fr);margin-bottom:0}91%,100%{grid-template-rows:minmax(0,0fr);margin-bottom:-9px}}
@keyframes vg3Pop{0%,43.9%{grid-template-columns:minmax(0,0fr);margin-left:calc(-1 * var(--g));opacity:0}44%,90.9%{grid-template-columns:minmax(0,1fr);margin-left:0;opacity:1}91%,100%{grid-template-columns:minmax(0,0fr);margin-left:calc(-1 * var(--g));opacity:0}}
@media (max-width:980px){
  .hero-a3 .hero-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:700px){
  .vg3{transform:none}
  .vg3-wrap:hover .vg3{transform:none}
  .vg3-wrap::after{display:none}
  .vg3-body{height:auto}
  .vg3-main{overflow:visible}
  .vg3-card.x3{display:none}
  .vg3 *{animation:none!important}
  .vg3-sb{width:36px}
  .vg3-sb .it{justify-content:center;padding:5px 4px}
  .vg3-logo{justify-content:center;padding:0 4px}
  .vg3-logo .lg-big,.vg3-sb .it .tx,.vg3-sb .it .ch,.vg3-sb .ct,.vg3-sb .pop{display:none}
  .vg3-logo .lg-small{display:block}
  .vg3-nav,.vg3-navf{padding:8px 4px}
  .vg3-mng,.vg3-ovh,.vg3-tools{display:none}
  .vg3-subnav{display:none}
}
@media (max-width:560px){
  .vg3-main{padding:11px 12px 13px;gap:8px}
  .vg3-cards{grid-template-columns:1fr}
  .vg3-card.x2{display:none}
  .vg3-alert .r1 .all,.vg3-alert .r2 .view,.vg3-alert .r2 .post,.vg3-alert .r2 .msg{display:none}
  .vg3-kpis{grid-template-columns:1fr 1fr}
  .vg3-kpi{padding:8px 10px 9px;border-left:0;border-top:1px solid #f4f4f5}
  .vg3-kpi:nth-child(even){border-left:1px solid #f4f4f5}
  .vg3-kpi:nth-child(1),.vg3-kpi:nth-child(2){border-top:0}
  .vg3-kpi .v{font-size:15px}
  .vg3-chips .hm{display:none}
}

/* --- QC fix: top-align hero copy against the tall dashboard (was center) --- */
.hero-a3 .hero-grid{align-items:start}

/* ═══════ Hero treatment for every .hero-a3 + vg3 hero (44 pages) ═══════
   Tuned on the homepage over several review rounds, then rolled out here. Geometry
   is identical on all of them — 1440px hero container, .88fr/1.12fr columns, 60px
   gap, giving a 741px card track, 686px visible card and 583px copy column at
   ≥1440px — which is why one set of numbers fits every page. All of it is scoped to
   the two-column layout; at ≤980px the grid stacks and none of it applies.

   ── 1. Vertical balance ──
   The start-alignment above leaves the copy stranded high while the card hangs low:
   the card's rotateX(6deg) scale(.92) transform insets its VISIBLE top edge ~23px
   below the grid row while its box still runs the full 546px, so the optical centres
   sit 65–78px apart. The copy drops via `align-self:center`, NOT a `top` offset, and
   that is load-bearing — which column is taller flips with viewport width. At 1440px
   the card's box drives the row and the copy has ~117–143px of slack to fall into,
   but by ~1024px the copy has wrapped tall enough to drive the row height itself and
   has ZERO slack; a fixed `top` there pushed its last line 16px THROUGH the proof
   strip below. Centring is self-limiting: full drop where there is slack, tapering
   to 0 where there isn't, with no breakpoint to hand-tune. The -17px pull-back is
   eyeballed — bottoms deliberately do NOT align, the card ends ~48px lower, which is
   what looked right. It is NEGATIVE so it can only ever move the copy up, away from
   the proof strip; never make it positive.

   ── 2. Headline sized off the COLUMN, not the viewport ──
   A `vw` headline is sized against the window, but the copy column narrows faster
   than the window (583px→381px across 1440→981), so the headline outgrew its column
   and broke to 4 lines. Column width = .88/2.0 × (100vw − 56px padding − 60px gap)
   = 0.44·vw − 51px, and the ceiling font in the 583px column is the proportion that
   reads well (~9%); solving for it gives 3.93vw − 4.6px, which holds that ratio at
   every width and keeps the headline at 3 lines. --h1-k rescales the whole curve for
   pages with a different ceiling (the homepage runs a 57px headline → k = 1.096). It
   must scale floor, slope and ceiling together or the ratio drifts.

   ── 3. Card holds its size and slides under the right edge ──
   Its `1.12fr` track otherwise shrinks the card with the window, compressing the
   dashboard's internals — at 1024px the same 34-monitor screen was squeezed into
   509px, so the KPI row, log table and monitor cards all got tighter the narrower
   the window. Pinning the card to the ONE size it has at the 1440px container keeps
   it legible and lets the viewport crop it instead. 741px IS that natural width:
   (1440 − 56 padding − 60 gap) × 1.12/2.0. So ≥1440px is pixel-identical to what
   shipped before; only narrower viewports change. `minmax(0,1.12fr)` is required,
   not tidying — an `fr` track carries an implicit min-content minimum, so a
   fixed-width item would force the TRACK to 741px too, pushing the grid past the
   container and crushing the copy column (it fell to 167px in testing). The crop
   needs no rule of its own: the hero's existing `overflow:hidden` does it, and
   scrollWidth == innerWidth at every width tested, so no horizontal scrollbar.

   ⚠ TWO EXCLUSIONS from the pin, both measured, both kept automatic via `:has()`
   so a new page opts itself in or out by its own markup:

   (a) `.vg3-pop` — the 11 integration pages. That channel popover is anchored to the
       card's RIGHT edge (`right:-10px`), so pinning the card slides the popover off
       first: measured 36% hidden at 1200px and 67% hidden at 1024px on
       /integrations/slack. On those pages the popover IS the story ("the alert as it
       lands in Slack"), so they keep the fluid card and take only the
       vertical-balance and headline rules.

   (b) `.wlh` — white-label and use-cases/agencies. Their wrapper holds the client-kit
       mockup, not a vg3 dashboard, and it is `max-width:560px; margin-left:auto`.
       Pinning the wrapper to 741px would right-align that 560px kit inside a box that
       overhangs the viewport, clipping a mockup that would otherwise have fit.

   If :has() is unsupported every guarded rule drops together and the cards simply
   stay fluid — the pre-2026-07-31 behaviour, which is a safe failure mode.

   NOTE the card is not always the vg3 partial: solution-status-page reaches it
   through blocks/status-page-mockup.html.twig (`.vg3 spg`), which is why the gate
   below tests for `.vg3-wrap` rather than for any page list.

   Re-derive 741px AND the headline slope together if the container, padding, gap or
   column ratio ever move — both encode the same assumptions. */
@media (min-width:981px){
  /* Applies only to heroes that actually carry a card. `.hero-a3` alone is NOT the
     right gate — scheduled-reports and integrations/webhooks use it with a different
     right-hand mockup and no .vg3-wrap at all, and would otherwise have picked up
     the copy centring and (worse) the minmax() below, which changes how their grid
     is allowed to shrink. */
  .hero-a3:has(.hero-grid > .vg3-wrap) .hero-grid > div:first-child{align-self:center;position:relative;top:-17px}
  .hero-a3 .hero-grid > .vg3-wrap{top:-16px}
  .hero.hero-a3:has(.hero-grid > .vg3-wrap) h1{font-size:clamp(calc(34px * var(--h1-k,1)),calc((3.93vw - 4.6px) * var(--h1-k,1)),calc(52px * var(--h1-k,1)))}

  /* The size pin, minus the two exclusions documented above. */
  .hero-a3:has(.hero-grid > .vg3-wrap):not(:has(.vg3-pop)):not(:has(.wlh)) .hero-grid{grid-template-columns:.88fr minmax(0,1.12fr)}
  .hero-a3:not(:has(.vg3-pop)):not(:has(.wlh)) .hero-grid > .vg3-wrap{width:741px;min-width:0}
}

/* ── Channel-alert popover (.vg3-pop) — integration pages. The same incident as
   it lands in the page's channel (Slack, Teams, Discord, SMS…). Fills the vg3
   partial's `pop` block: a sibling of .vg3 inside .vg3-wrap, outside the 3D
   transform so it floats flat above the twisted dashboard, anchored lower-right.
   Slides in at the 44% beat — the moment the confirmed alert is dispatched —
   on the shared 10s clock. The card inside is the page's own sl-* channel kit
   (colors/branding stay page-side); these rules position the popover and size
   the kit down to popover scale. */
.vg3-pop{position:absolute;z-index:2;right:-10px;bottom:-34px;width:318px;animation:vg3PopIn 10s linear infinite}
.vg3-pop .sl-app{border-color:#e4e4e7;box-shadow:0 3px 6px rgba(0,0,0,.2),0 30px 60px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05)}
.vg3-pop .sl-head{height:32px;padding:0 12px;gap:7px}
.vg3-pop .sl-head .sllg{width:13px;height:13px;flex:none}
.vg3-pop .sl-head .hash{font-size:12.5px}
.vg3-pop .sl-head .tn{font-size:9px}
.vg3-pop .sl-body-wrap{padding:11px 12px 12px}
.vg3-pop .sl-msg{grid-template-columns:28px 1fr;gap:8px}
.vg3-pop .sl-av{width:28px;height:28px}
.vg3-pop .sl-av.bot{background-size:16px auto}
.vg3-pop .sl-who .nm{font-size:12px}
.vg3-pop .sl-text{font-size:11.5px}
.vg3-pop .sl-attach{margin-top:6px;padding:9px 11px}
.vg3-pop .sl-attach .at-t{font-size:11.5px}
.vg3-pop .sl-attach .at-sub{font-size:10px}
.vg3-pop .sl-fields{margin-top:7px;gap:7px 14px}
.vg3-pop .sl-fields .f .v{font-size:9.5px}
.vg3-pop .sl-actions{margin-top:9px}
.vg3-pop .sl-ackbtn,.vg3-pop .sl-btn2{height:26px;padding:0 11px;font-size:10.5px}
@keyframes vg3PopIn{0%,43.9%{opacity:0;transform:translateY(14px) scale(.97)}45.6%,90.9%{opacity:1;transform:none}91%,100%{opacity:0;transform:translateY(14px) scale(.97)}}
@media (max-width:700px){
  /* `relative`, not `static`: identical layout for a normal-flow block, but it
     keeps the copy-guard shield below anchored to the popover — on `static` the
     shield resolves against .vg3-wrap and blankets the whole hero column. */
  .vg3-pop{position:relative;width:auto;margin-top:14px;animation:none}
}

/* ── Screen: uptime monitor detail (.vg3.upd) — vg3-screen-uptime.html.twig.
   Rides the shared 10s vg3 clock: Frankfurt fails at 34%, the cross-checks
   confirm at 38.5/40.5/42.5%, status/banner/alerts flip at 44% (the `late`
   window), recovery 91–93%. Static no-animation state (mobile) = the down
   state, same convention as the general screen. */
.vg3.upd .upd-bc{display:flex;align-items:center;gap:3px;font-size:7.5px;color:#8a8a93;white-space:nowrap}
.vg3.upd .upd-bc b{color:#52525b;font-weight:600}
.vg3.upd .upd-bc svg{width:7px;height:7px;flex:none;color:#d4d4d8}
.vg3.upd .upd-head{display:flex;flex-direction:column;gap:4px}
.vg3.upd .upd-head .r{display:flex;align-items:center;gap:6px;min-width:0}
.vg3.upd .upd-head b{font-size:15px;font-weight:700;letter-spacing:-.025em;color:#18181b;white-space:nowrap}
.vg3.upd .upd-head .rt{margin-left:auto;display:flex;align-items:center;gap:5px;flex:none}
.vg3.upd .upd-head .kebab{display:flex;align-items:center;justify-content:center;width:17px;height:15px;background:#fff;border:1px solid #ececef;border-radius:5px;color:#52525b}
.vg3.upd .upd-head .kebab svg{width:9px;height:9px}
.vg3.upd .upd-head .url{font-family:var(--mono);font-size:8px;color:#8a8a93;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3.upd .upd-head .int{flex:none;font-size:7px;color:#8a8a93;background:#fff;border:1px solid #ececef;border-radius:999px;padding:1.5px 6px;white-space:nowrap}
.vg3.upd .incp{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:650;color:#D92C20;background:#FEF2F1;border:1px solid rgba(217,44,32,.25);border-radius:999px;padding:1.5px 6px;white-space:nowrap}
.vg3.upd .incp svg{width:8px;height:8px;flex:none}
.vg3.upd .pill{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:650;border-radius:999px;padding:1.5px 6px 1.5px 5px;border:1px solid transparent;white-space:nowrap}
.vg3.upd .pill i{width:4px;height:4px;border-radius:50%;flex:none}
.vg3.upd .pill.up{color:#008A4F;background:#EBFDF2;border-color:rgba(0,163,95,.25)}
.vg3.upd .pill.up i{background:#00A35F}
.vg3.upd .pill.dn{color:#D92C20;background:#FEF2F1;border-color:rgba(217,44,32,.25)}
.vg3.upd .pill.dn i{background:#E02424}
.vg3.upd .vg3-kpis{grid-template-columns:repeat(4,1fr)}
.vg3.upd .vg3-kpi .v .pill{margin-top:1px}
.vg3.upd .vg3-alert .snt{flex:none;font-size:8px;font-weight:600;color:#52525b;white-space:nowrap;margin-left:auto}
.vg3.upd .vg3-alert .r2 .chip{margin-left:0}
.vg3.upd .upd-logs{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 3px}
.vg3.upd .upd-logs .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.vg3.upd .upd-logs h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b}
.vg3.upd .upd-logs .lh .ct{font-family:var(--mono);font-size:7px;color:#8a8a93;white-space:nowrap}
.vg3.upd .upd-logs .thead{display:grid;grid-template-columns:1.3fr .9fr 1fr .55fr;gap:6px;padding:2px 0 3px;font-size:6px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93}
.vg3.upd .upd-logs .row{display:grid;grid-template-columns:1.3fr .9fr 1fr .55fr;gap:6px;align-items:center;padding:3px 0;border-top:1px solid #f4f4f5;min-width:0;line-height:1.2}
.vg3.upd .upd-logs .loc{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:550;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.upd .upd-logs .loc img{width:10px;height:7.5px;object-fit:cover;border-radius:1px;flex:none}
.vg3.upd .upd-logs .tm{font-family:var(--mono);font-size:7.5px;color:#8a8a93;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3.upd .upd-logs .ms{font-family:var(--mono);font-size:7.5px;color:#52525b;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3.upd .upd-logs .rp{display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
.vg3.upd .upd-logs .rp>*{min-height:0;overflow:hidden}
.vg3.upd .upd-logs .rp.r0{animation:updRow0 10s linear infinite}
.vg3.upd .upd-logs .rp.r1{animation:updRow1 10s linear infinite}
.vg3.upd .upd-logs .rp.r2{animation:updRow2 10s linear infinite}
.vg3.upd .upd-logs .rp.r3{animation:updRow3 10s linear infinite}
.vg3.upd .upd-logs .rp.ri0{animation:updRowI0 10s linear infinite}
.vg3.upd .upd-logs .rp.ri1{animation:updRowI1 10s linear infinite}
.vg3.upd .upd-logs .rp.ri2{animation:updRowI2 10s linear infinite}
.vg3.upd .upd-chart{flex:1;min-height:96px;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 7px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.vg3.upd .upd-chart .lh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vg3.upd .upd-chart h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b}
.vg3.upd .upd-chart .sub{font-family:var(--mono);font-size:7px;color:#8a8a93;white-space:nowrap}
.vg3.upd .upd-chart .lgd{display:flex;align-items:center;justify-content:center;gap:7px;font-size:6.5px;color:#52525b;white-space:nowrap}
.vg3.upd .upd-chart .lgd i{display:inline-block;width:5px;height:5px;border-radius:1.5px;margin-right:2.5px;vertical-align:0}
.vg3.upd .upd-chart .plot{flex:1;min-height:0;display:flex;gap:5px}
.vg3.upd .upd-chart .ylab{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:6px;color:#8a8a93;padding-bottom:1px;flex:none}
.vg3.upd .upd-chart .area{flex:1;min-width:0}
.vg3.upd .upd-chart .area svg{width:100%;height:100%;display:block}
.vg3.upd .upd-chart .band{animation:updBand 10s linear infinite}
.vg3.upd .upd-chart .ax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:6.5px;color:#8a8a93}
/* protocol-session transcript card (vg3-screen-email) — sits between logs and
   chart so the flex:1 chart stays near its min-height instead of absorbing the
   whole column; .sw/.a/.b ride the shared 10s clock like everything else */
.vg3.upd .upd-sess{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:9px 11px 8px}
.vg3.upd .upd-sess .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.vg3.upd .upd-sess h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b}
.vg3.upd .upd-sess .lh .ct{font-family:var(--mono);font-size:7px;color:#8a8a93;white-space:nowrap}
.vg3.upd .upd-sess>.sw{display:grid;width:100%}
.vg3.upd .upd-sess>.sw>*{justify-self:stretch;width:100%}
.vg3.upd .upd-sess .ln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:7.5px;line-height:1.35;color:#52525b;padding:4.5px 0;border-top:1px solid #f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.upd .upd-sess .ln .pfx{flex:none;width:8px;color:#b0b0b8}
.vg3.upd .upd-sess .ln.ok{color:#008A4F}
.vg3.upd .upd-sess .ln.mut{color:#8a8a93}
.vg3.upd .upd-sess .ln.bad{color:#D92C20;font-weight:600}
@keyframes updRow0{0%,33.9%{grid-template-rows:minmax(0,0fr)}34%,90.9%{grid-template-rows:minmax(0,1fr)}91%,100%{grid-template-rows:minmax(0,0fr)}}
@keyframes updRow1{0%,38.4%{grid-template-rows:minmax(0,0fr)}38.5%,90.9%{grid-template-rows:minmax(0,1fr)}91%,100%{grid-template-rows:minmax(0,0fr)}}
@keyframes updRow2{0%,40.4%{grid-template-rows:minmax(0,0fr)}40.5%,90.9%{grid-template-rows:minmax(0,1fr)}91%,100%{grid-template-rows:minmax(0,0fr)}}
@keyframes updRow3{0%,42.4%{grid-template-rows:minmax(0,0fr)}42.5%,90.9%{grid-template-rows:minmax(0,1fr)}91%,100%{grid-template-rows:minmax(0,0fr)}}
@keyframes updRowI0{0%,33.9%{grid-template-rows:minmax(0,1fr)}34%,90.9%{grid-template-rows:minmax(0,0fr)}91%,100%{grid-template-rows:minmax(0,1fr)}}
@keyframes updRowI1{0%,38.4%{grid-template-rows:minmax(0,1fr)}38.5%,90.9%{grid-template-rows:minmax(0,0fr)}91%,100%{grid-template-rows:minmax(0,1fr)}}
@keyframes updRowI2{0%,40.4%{grid-template-rows:minmax(0,1fr)}40.5%,90.9%{grid-template-rows:minmax(0,0fr)}91%,100%{grid-template-rows:minmax(0,1fr)}}
@keyframes updBand{0%,33.9%{opacity:0}34%,92.9%{opacity:.14}93%,100%{opacity:0}}
@media (max-width:700px){
  .vg3.upd .upd-bc,.vg3.upd .upd-head .rt,.vg3.upd .upd-chart,.vg3.upd .upd-sess{display:none}
}
@media (max-width:560px){
  .vg3.upd .vg3-kpis{grid-template-columns:1fr 1fr}
  .vg3.upd .vg3-alert .snt{display:none}
  .vg3.upd .upd-logs .thead span:nth-child(3),.vg3.upd .upd-logs .row .ms{display:none}
  .vg3.upd .upd-logs .thead,.vg3.upd .upd-logs .row{grid-template-columns:1.3fr .9fr .55fr}
}

/* ── Screen: speed monitor detail (.vg3.upd.spd) — vg3-screen-speed.html.twig.
   Rides .upd's detail-page primitives (breadcrumb, head, pills, 4-col KPIs,
   banner, .upd-chart shell) and adds the amber Degraded state + the Web Vitals
   small-multiples card. On the shared 10s clock: slow checks land at 34%
   (chart tails swap flat→spike, spdIn/spdOut), KPI values follow at 37%,
   status/banner flip at 44%, recovery 91–93%. Degraded is TROUBLE (amber
   #D97706), never Down — vitals breaches leave availability untouched, which
   is why there is no down-badge in the sidebar (frame param down_badges:false). */
.vg3.upd .pill.dgd{color:#B45309;background:#FFFBEB;border-color:rgba(217,119,6,.3)}
.vg3.upd .pill.dgd i{background:#D97706}
.vg3.upd .incp.wn{color:#B45309;background:#FFFBEB;border-color:rgba(217,119,6,.3)}
.vg3.upd .vg3-alert.wn{border-color:rgba(217,119,6,.35)}
.vg3.upd .vg3-alert.wn .r1{color:#B45309}
.vg3.upd .vg3-alert.wn .r2 .dot{background:#D97706;box-shadow:0 0 0 3px rgba(217,119,6,.16)}
.vg3.upd .vg3-alert.wn .r2 .chip{color:#B45309;background:#FFFBEB}
.vg3.spd .upd-chart{flex:1.1}
.vg3.spd .spd-vitals{flex:1;min-height:100px;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 7px;display:flex;flex-direction:column;gap:4px;overflow:hidden}
.vg3.spd .spd-vitals .lh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vg3.spd .spd-vitals h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b}
.vg3.spd .spd-vitals .sub{font-family:var(--mono);font-size:7px;color:#8a8a93;white-space:nowrap}
.vg3.spd .spd-vitals .vgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vg3.spd .spd-vitals .vcell{min-width:0;display:flex;flex-direction:column;gap:3px}
.vg3.spd .spd-vitals .vh{display:flex;align-items:baseline;gap:4px;min-width:0}
.vg3.spd .spd-vitals .vh b{font-size:9px;font-weight:700;color:#18181b}
.vg3.spd .spd-vitals .vh .fx{font-size:6.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.spd .spd-vitals .vh .vv{margin-left:auto;font-family:var(--mono);font-size:8px;font-weight:650;color:#18181b;font-variant-numeric:tabular-nums;flex:none}
.vg3.spd .scp{flex:none;font-size:6px;font-weight:650;line-height:1;border-radius:999px;padding:1.5px 4px;white-space:nowrap}
.vg3.spd .scp.gd{color:#15803d;background:#f0fdf4}
.vg3.spd .scp.pr{color:#b91c1c;background:#fef2f2}
.vg3.spd .spd-vitals .varea{flex:1;min-height:0}
.vg3.spd .spd-vitals .varea svg{width:100%;height:100%;display:block}
.vg3.spd .spd-vitals .bnote{font-size:6px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.upd .tl-spk{opacity:1;animation:spdIn 10s linear infinite}
.vg3.upd .tl-flat{opacity:0;animation:spdOut 10s linear infinite}
@keyframes spdIn{0%,33.9%{opacity:0}34%,90.9%{opacity:1}91%,100%{opacity:0}}
@keyframes spdOut{0%,33.9%{opacity:1}34%,90.9%{opacity:0}91%,100%{opacity:1}}
@media (max-width:700px){
  .vg3.spd .spd-vitals{display:none}
}

/* ── Screen: transaction monitor detail (.vg3.upd.trx) — vg3-screen-transaction.html.twig.
   Rides .upd's detail-page primitives (breadcrumb, head, pills, 4-col KPIs,
   banner, .upd-chart shell incl. .lgd legend + .band incident marker) and adds
   the step-breakdown last-run waterfall (.tbrk). On the shared 10s clock: the
   failed run lands at 34% (step-stack chart tails flat→spike, spdIn/spdOut —
   selectors extended above), the waterfall re-paints at 37% (.sw text swaps +
   .ba/.bb bar layers on vg3A/vg3B: step 4 red + stretched, camera appears,
   steps 5–7 → "not run"), status/banner/badges flip at 44%, recovery 91–93%.
   Waterfall bars keep their chart slot color (STEP_COLORS by slowest-rank),
   failed step #b91c1c, Other-band steps neutral #b9bac1 — real
   TransactionStepBreakdown behavior. */
.vg3.trx .upd-chart{flex:1;min-height:88px}
.vg3.trx .tbrk{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 5px;display:flex;flex-direction:column}
.vg3.trx .tbrk .lh{display:flex;align-items:center;gap:6px;margin-bottom:3px;min-width:0}
.vg3.trx .tbrk h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b;white-space:nowrap}
.vg3.trx .rs{display:inline-flex;align-items:center;gap:3px;font-size:6.5px;font-weight:650;line-height:1;border-radius:999px;padding:2px 6px;white-space:nowrap}
.vg3.trx .rs svg{width:7px;height:7px;flex:none}
.vg3.trx .rs.ok{color:#008A4F;background:#EBFDF2}
.vg3.trx .rs.bad{color:#D92C20;background:#FEF2F1}
.vg3.trx .tbrk .tmr{font-family:var(--mono);font-size:6.5px;color:#8a8a93;font-variant-numeric:tabular-nums}
.vg3.trx .segc{margin-left:auto;display:inline-flex;flex:none;border:1px solid #ececef;border-radius:6px;overflow:hidden}
.vg3.trx .segc span{font-size:6.5px;font-weight:600;color:#8a8a93;padding:2.5px 6px;white-space:nowrap}
.vg3.trx .segc span.on{background:#f4f4f5;color:#18181b}
.vg3.trx .trw{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 34px 30px;gap:7px;align-items:center;padding:3px 0;border-top:1px solid #f4f4f5;line-height:1.2;min-width:0}
.vg3.trx .trw .sl{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;overflow:hidden}
.vg3.trx .stn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:14px;padding:1px 2px;border-radius:3px;background:#f4f4f5;font-family:var(--mono);font-size:6px;color:#8a8a93}
.vg3.trx .trw .nm{font-size:7.5px;font-weight:550;color:#3f3f46;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vg3.trx .trw .nm .tg{font-family:var(--mono);font-size:6.5px;color:#8a8a93;font-weight:400}
.vg3.trx .trw .tk{position:relative;height:7px;min-width:0}
.vg3.trx .trw .tk::before{content:"";position:absolute;top:1px;bottom:1px;left:0;right:0;border-left:1px solid #ececef;border-right:1px solid #ececef}
.vg3.trx .trw .tk i{position:absolute;top:0;bottom:0;border-radius:2px;min-width:2px}
.vg3.trx .trw .tk i.ba{opacity:0;animation:vg3A 10s linear infinite}
.vg3.trx .trw .tk i.bb{opacity:1;animation:vg3B 10s linear infinite}
.vg3.trx .trw .du{justify-self:end;font-family:var(--mono);font-size:6.5px;color:#52525b;font-variant-numeric:tabular-nums}
.vg3.trx .trw .du .bd{color:#D92C20;font-weight:650}
.vg3.trx .trw .ic{display:flex;justify-content:flex-end;align-items:center;color:#00A35F}
.vg3.trx .trw .ic svg{width:8px;height:8px;flex:none}
.vg3.trx .trw .ic .sw>*{display:inline-flex;align-items:center;gap:3px}
.vg3.trx .trw .ic .cam{color:#8a8a93}
.vg3.trx .trw .ic .x{color:#D92C20}
.vg3.trx .trw .ic .nr{font-size:6px;color:#8a8a93}
@media (max-width:560px){
  .vg3.trx .tbrk .tmr,.vg3.trx .segc{display:none}
  .vg3.trx .trw{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 30px 28px}
  .vg3.trx .trw .nm .tg{display:none}
}

/* ── Shared primitives for the 2026-07-28 themed-screen batch (.vg3.upd.*) ──
   .rpx k0–k3 = generic staggered row-pop (rides the updRow* keyframes);
   .cdet = generic white detail card (label/value .crow rows, .lifebar meter,
   .acr activity rows); KPI value tint helpers .gd/.wn inside .sw swaps. */
.vg3.upd .rpx{display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
.vg3.upd .rpx>*{min-height:0;overflow:hidden}
.vg3.upd .rpx.k0{animation:updRow0 10s linear infinite}
.vg3.upd .rpx.k1{animation:updRow1 10s linear infinite}
.vg3.upd .rpx.k2{animation:updRow2 10s linear infinite}
.vg3.upd .rpx.k3{animation:updRow3 10s linear infinite}
.vg3.upd .vg3-kpi .v .gd{color:#008A4F}
.vg3.upd .vg3-kpi .v .wn{color:#B45309}
.vg3.upd .cdet{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 6px;display:flex;flex-direction:column;min-width:0}
.vg3.upd .cdet .lh,.vg3.upd .drec .lh,.vg3.upd .bwall .lh,.vg3.upd .spv .lh,.vg3.upd .alr-tl .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px;min-width:0}
.vg3.upd .cdet h5,.vg3.upd .drec h5,.vg3.upd .bwall h5,.vg3.upd .spv h5,.vg3.upd .alr-tl h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b;white-space:nowrap}
.vg3.upd .cdet .lh .ct,.vg3.upd .drec .lh .ct,.vg3.upd .bwall .lh .ct,.vg3.upd .spv .lh .ct,.vg3.upd .alr-tl .lh .ct{font-family:var(--mono);font-size:7px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.upd .crow{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:baseline;padding:2.5px 0;border-top:1px solid #f4f4f5;font-size:7.5px;line-height:1.25}
.vg3.upd .crow>span{color:#8a8a93}
.vg3.upd .crow>b{color:#18181b;font-weight:550;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3.upd .crow>b .wn{color:#B45309;font-weight:650}
.vg3.upd .lifebar{margin-top:4px;padding-top:4px;border-top:1px solid #f4f4f5;display:flex;flex-direction:column;gap:2.5px}
.vg3.upd .lifebar .lr{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.vg3.upd .lifebar .ll{font-size:6px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93;white-space:nowrap}
.vg3.upd .lifebar .lv{font-family:var(--mono);font-size:6.5px;color:#52525b;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3.upd .lifebar .trk{height:5px;background:#f4f4f5;border-radius:3px;overflow:hidden}
.vg3.upd .lifebar .trk i{display:block;height:100%;background:#D97706;border-radius:3px}
.vg3.upd .lifebar .wnt{color:#B45309;font-weight:700}
.vg3.upd .acr{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:6px;align-items:center;padding:3px 0;border-top:1px solid #f4f4f5}
.vg3.upd .acr .ad{width:6px;height:6px;border-radius:50%;justify-self:center}
.vg3.upd .acr .ad.ok{background:#00A35F}
.vg3.upd .acr .ad.wn{background:#D97706}
.vg3.upd .acr .ad.bd{background:#E02424}
.vg3.upd .acr .at{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.vg3.upd .acr .at b{font-size:7.5px;font-weight:600;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.upd .acr .mut,.vg3.upd .ett .mut{font-size:6.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.upd .acr .am{font-family:var(--mono);font-size:6.5px;color:#8a8a93;white-space:nowrap}

/* ── Screen: incident escalation (.vg3.upd.alr) — vg3-screen-alerts.html.twig.
   Timeline rows appear on the updRow0–3 stagger (incident opened 34%, step 1
   38.5%, step 2 40.5%, acknowledged 42.5%); header ack chip + KPIs settle at
   44% (`late`). Vocabulary and layout mirror /cp EventTimeline SimRow +
   SimContactsBox. */
.vg3.alr .alr-tl{flex:1;min-height:0;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 5px;display:flex;flex-direction:column;overflow:hidden}
.vg3.alr .evw{display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden}
.vg3.alr .evw>*{min-height:0;overflow:hidden}
.vg3.alr .evw.r0{animation:updRow0 10s linear infinite}
.vg3.alr .evw.r1{animation:updRow1 10s linear infinite}
.vg3.alr .evw.r2{animation:updRow2 10s linear infinite}
.vg3.alr .evw.r3{animation:updRow3 10s linear infinite}
.vg3.alr .evr{display:grid;grid-template-columns:34px 10px minmax(0,1fr);gap:6px}
.vg3.alr .etm{font-family:var(--mono);font-size:6.5px;color:#8a8a93;text-align:right;padding-top:1.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3.alr .edc{display:flex;flex-direction:column;align-items:center}
.vg3.alr .edt{width:6px;height:6px;border-radius:50%;flex:none;margin-top:2px}
.vg3.alr .edt.bad{background:#E02424;box-shadow:0 0 0 2px rgba(224,36,36,.14)}
.vg3.alr .edt.brand{background:#2a78d6}
.vg3.alr .edt.warn{background:#D97706}
.vg3.alr .edt.good{background:#00A35F}
.vg3.alr .eln{width:1.5px;flex:1;background:#ececef;margin-top:2px;min-height:5px}
.vg3.alr .eco{min-width:0;padding-bottom:5px}
.vg3.alr .ett{display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
.vg3.alr .ett b{font-size:7.5px;font-weight:650;color:#18181b;flex:none}
.vg3.alr .stpg{flex:none;font-size:5.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#52525b;background:#f4f4f5;border-radius:3px;padding:1px 4px}
.vg3.alr .ebox{margin-top:3px;border:1px solid #ececef;border-radius:6px;overflow:hidden;background:#fafafa}
.vg3.alr .ebr{display:flex;align-items:center;gap:5px;padding:2.5px 6px;border-top:1px solid #f0f0f1;min-width:0}
.vg3.alr .ebr:first-child{border-top:0}
.vg3.alr .ebr svg{width:7px;height:7px;flex:none;color:#52525b}
.vg3.alr .ebr .nm{font-size:7px;font-weight:600;color:#18181b;white-space:nowrap}
.vg3.alr .ebr .vl{margin-left:auto;font-family:var(--mono);font-size:6px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.alr .esb{margin-top:2px;font-size:6.5px;color:#8a8a93;line-height:1.4}
.vg3.upd .ackp{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:650;color:#008A4F;background:#EBFDF2;border:1px solid rgba(0,163,95,.25);border-radius:999px;padding:1.5px 6px;white-space:nowrap}
.vg3.upd .ackp svg{width:8px;height:8px;flex:none}

/* ── Screen: SSL + domain expiry (.vg3.upd.ssl / .vg3.upd.dmn) — amber trouble
   stories on .cdet/.lifebar primitives; SSL keeps the real 4-col logs. */
.vg3.ssl .upd-logs .row .ms,.vg3.ssl .upd-logs .thead span:nth-child(3){font-variant-numeric:tabular-nums}

/* ── Screen: DNS monitor detail (.vg3.upd.dnsx) — vg3-screen-dns.html.twig.
   Watched-records table with the baseline diff (strike-through was → red now)
   on the .sw swap; nameserver-health mono rows. Mirrors /cp DnsWatchedRecords
   columns Record/Answer/TTL/Last changed. */
.vg3.dnsx .drec{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 5px;display:flex;flex-direction:column;min-width:0}
.vg3.dnsx .drec .thead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.8fr) .35fr minmax(0,1fr);gap:6px;padding:2px 0 3px;font-size:6px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93}
.vg3.dnsx .drow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.8fr) .35fr minmax(0,1fr);gap:6px;align-items:center;padding:2.5px 0;border-top:1px solid #f4f4f5;min-width:0;line-height:1.2}
.vg3.dnsx .rc{display:flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;overflow:hidden}
.vg3.dnsx .tc{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:16px;padding:1px 2.5px;border-radius:3px;background:#f4f4f5;font-family:var(--mono);font-size:5.5px;font-weight:600;color:#52525b}
.vg3.dnsx .rc b{font-size:7.5px;font-weight:600;color:#18181b}
.vg3.dnsx .ans{font-family:var(--mono);font-size:6.5px;color:#3f3f46;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3.dnsx .ans s{color:#a1a1aa}
.vg3.dnsx .ans em{color:#D92C20;font-style:normal;font-weight:700}
.vg3.dnsx .ttl{font-family:var(--mono);font-size:6.5px;color:#8a8a93;font-variant-numeric:tabular-nums}
.vg3.dnsx .lch{font-size:6.5px;color:#8a8a93;min-width:0;justify-self:end;text-align:right}
.vg3.dnsx .lch .bd{color:#D92C20;font-weight:650}
.vg3.dnsx .fnote{font-size:6px;color:#8a8a93;margin-top:2px;border-top:1px solid #f4f4f5;padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.dnsx .nsr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2.5px 0;border-top:1px solid #f4f4f5;min-width:0}
.vg3.dnsx .nsh{font-family:var(--mono);font-size:7px;font-weight:600;color:#18181b;white-space:nowrap}
.vg3.dnsx .nsc{font-family:var(--mono);font-size:6px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ── Screen: server monitor detail (.vg3.upd.srv) — vg3-screen-server.html.twig.
   CPU chart w/ dashed threshold + brief spike (tl-flat/tl-spk); disk-usage
   mount bars where /var crosses 90% via .ba/.bb layers on vg3A/vg3B. */
.vg3.srv .upd-chart{flex:none;height:112px}
.vg3.srv .mtr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center;padding:3px 0;border-top:1px solid #f4f4f5}
.vg3.srv .mtr .mn{font-family:var(--mono);font-size:7px;color:#18181b;white-space:nowrap}
.vg3.srv .mtr .bar{position:relative;height:5px;background:#f4f4f5;border-radius:3px;overflow:hidden}
.vg3.srv .mtr .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#00A35F}
.vg3.srv .mtr .bar i.wrn{background:#D97706}
.vg3.srv .mtr .bar i.crit{background:#E02424}
.vg3.srv .mtr .bar i.ba{opacity:1;animation:vg3A 10s linear infinite}
.vg3.srv .mtr .bar i.bb{opacity:0;animation:vg3B 10s linear infinite}
.vg3.srv .mtr .mv{font-family:var(--mono);font-size:6.5px;color:#52525b;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3.srv .mtr .mv .bd{color:#D92C20;font-weight:650}

/* ── Screen: heartbeat monitor detail (.vg3.upd.hbt) — vg3-screen-heartbeat.html.twig.
   Pulse strip (blips → red silence via tl-flat/tl-spk + HTML "7m silent" label
   on spdIn) and the real ping-log columns w/ the synthesized incident row. */
.vg3.hbt .plsr{position:relative;height:38px}
.vg3.hbt .plsr svg{width:100%;height:100%;display:block}
.vg3.hbt .sillbl{position:absolute;right:3%;top:2px;font-family:var(--mono);font-size:6.5px;font-weight:700;color:#b91c1c;opacity:1;animation:spdIn 10s linear infinite;white-space:nowrap}
.vg3.hbt .pax{display:flex;justify-content:space-between;font-family:var(--mono);font-size:6px;color:#8a8a93;margin-top:2px}
.vg3.hbt .hlog .thead,.vg3.hbt .hlog .row{grid-template-columns:minmax(0,1fr) .55fr .85fr .55fr}
.vg3.hbt .hlog .row .ms:last-child{justify-self:end;text-align:right}
.vg3.hbt .sgn{display:inline-flex;font-size:5.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1.5px 4px;border-radius:3px;line-height:1}
.vg3.hbt .sgn.ok{color:#008A4F;background:#EBFDF2}
.vg3.hbt .sgn.miss{color:#fff;background:#E02424}
.vg3.hbt .hlog .tm.bd,.vg3.hbt .hlog .ms.bd{color:#D92C20;font-weight:650}
.vg3.hbt .hlog .ms.wnc{color:#B45309}

/* ── Screen: API monitor detail (.vg3.upd.trx.apx) — vg3-screen-api.html.twig.
   Rides the transaction step-breakdown CSS; adds method badges + the per-step
   assertion count and the assertion checklist card. */
.vg3.apx .mb{flex:none;display:inline-flex;font-size:5.5px;font-weight:700;letter-spacing:.04em;padding:1.5px 3.5px;border-radius:3px;line-height:1}
.vg3.apx .mb.get{color:#1d4ed8;background:#eff6ff}
.vg3.apx .mb.post{color:#b45309;background:#fffbeb}
.vg3.apx .trw .ic .asn{font-family:var(--mono);font-size:6px;color:#8a8a93;font-variant-numeric:tabular-nums}
.vg3.apx .trw .ic .asn.bd{color:#D92C20;font-weight:700}
.vg3.apx .aslist .asr{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2.5px 0;border-top:1px solid #f4f4f5;min-width:0}
.vg3.apx .aslist .asl{font-family:var(--mono);font-size:7px;color:#3f3f46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.apx .aslist .asv{font-family:var(--mono);font-size:6.5px;color:#52525b;white-space:nowrap;flex:none}
.vg3.apx .aslist .asv .ok{color:#00A35F;font-weight:700}
.vg3.apx .aslist .asv .no{color:#D92C20;font-weight:700}

/* ── Screen: blacklist monitor detail (.vg3.upd.bkl) — vg3-screen-blacklist.html.twig.
   The list × resource wall (tier bands, dot/date cells) + the dark mono
   check transcript, straight from BlacklistWall/BlacklistCheckTranscript. */
.vg3.bkl .bwall{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 5px;display:flex;flex-direction:column;min-width:0}
.vg3.bkl .bwh{display:grid;grid-template-columns:minmax(0,1.5fr) .6fr .6fr .9fr;gap:5px;padding:1px 0 2px;font-size:5.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93}
.vg3.bkl .bwt{font-size:5.5px;font-weight:650;color:#52525b;background:#f4f4f5;border-radius:3px;padding:2px 5px;margin:2px 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.bkl .bwr{display:grid;grid-template-columns:minmax(0,1.5fr) .6fr .6fr .9fr;gap:5px;align-items:center;padding:1.5px 0;border-top:1px solid #f8f8f9;min-width:0}
.vg3.bkl .bl{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.vg3.bkl .bl b{font-size:6.5px;font-weight:600;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.bkl .bz{font-family:var(--mono);font-size:5px;color:#a1a1aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.bkl .bwc{display:inline-flex;align-items:center;gap:3px;font-size:6px;color:#a1a1aa}
.vg3.bkl .bwc i{width:5px;height:5px;border-radius:50%;flex:none}
.vg3.bkl .bwc i.ok{background:#6ee7b7}
.vg3.bkl .bwc i.ls{background:#E02424}
.vg3.bkl .bwc .lst{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:6px;font-weight:700;color:#D92C20}
.vg3.bkl .bwc.na{color:#d4d4d8}
.vg3.bkl .bwm{font-size:6px;color:#8a8a93;margin-top:2px;border-top:1px solid #f4f4f5;padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.bkl .btrx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.bkl .btrx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.vg3.bkl .btrx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.bkl .btrx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.bkl .bintro{font-size:6.5px;color:#a1a1aa}
.vg3.bkl .bintro b{font-family:var(--mono);color:#e4e4e7;font-weight:600}
.vg3.bkl .bcode{display:flex;flex-direction:column;gap:2.5px}
.vg3.bkl .bln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;min-width:0;white-space:nowrap;overflow:hidden}
.vg3.bkl .bln .q{color:#a5b4fc}
.vg3.bkl .bln .ar{color:#52525b}
.vg3.bkl .bln .cl{color:#4ade80}
.vg3.bkl .bln .ld{color:#f87171;font-weight:700}
.vg3.bkl .bln .nt{color:#71717a;margin-left:4px}

/* ── Screen: real user monitoring (.vg3.upd.rumx) — vg3-screen-rum.html.twig.
   Satisfaction donut (two conic-gradients on the .sw swap) + the Countries
   table with emoji flags, per RumMonitorPage. */
.vg3.rumx .rsat .satw{display:flex;align-items:center;gap:16px;padding:4px 0 2px}
.vg3.rumx .dnut{position:relative;width:52px;height:52px;flex:none}
.vg3.rumx .dna{position:absolute;inset:0;display:grid}
.vg3.rumx .dna>span{grid-area:1/1;border-radius:50%}
.vg3.rumx .dnut::after{content:"";position:absolute;inset:11px;background:#fff;border-radius:50%}
.vg3.rumx .dcv{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-size:9.5px;font-weight:700;color:#18181b}
.vg3.rumx .dcv>*{grid-area:1/1;justify-self:center;align-self:center}
.vg3.rumx .dleg{display:flex;flex-direction:column;gap:3px;font-size:7px;color:#52525b;min-width:0}
.vg3.rumx .dleg i{display:inline-block;width:5px;height:5px;border-radius:1.5px;margin-right:4px;vertical-align:0}
.vg3.rumx .dleg b{font-weight:650;color:#18181b;margin-left:3px}
.vg3.rumx .rgeo .thead,.vg3.rumx .rgeo .row{grid-template-columns:minmax(0,1.4fr) .7fr 1fr}
.vg3.rumx .rgeo .loc{font-size:7.5px}

/* ── Screen: status page preview (.vg3.upd.stp) — vg3-screen-statuspage.html.twig.
   The cp live preview: verdict banner (operational→partial outage), component
   rows with 26-tick uptime bars, the posted Investigating update (rpx k3) and
   the Subscribe footer — vocabulary from StatusPagePreview + threadStages. */
.vg3.stp .spv{flex:1;min-height:0;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 6px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.vg3.stp .verd{display:grid;margin-bottom:2px}
.vg3.stp .verd>*{grid-area:1/1;min-width:0;justify-self:stretch}
.vg3.stp .verd>.a{opacity:0;animation:vg3A2 10s linear infinite}
.vg3.stp .verd>.b{opacity:1;animation:vg3B2 10s linear infinite}
.vg3.stp .vb{display:flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;color:#fff;border-radius:7px;padding:5px 8px;white-space:nowrap}
.vg3.stp .vb.ok{background:#15803d}
.vg3.stp .vb.bad{background:#b91c1c}
.vg3.stp .vb svg{width:9px;height:9px;flex:none}
.vg3.stp .secl{font-size:6px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a93;margin-top:3px}
.vg3.stp .cmr{display:grid;grid-template-columns:8px minmax(50px,auto) minmax(0,1fr) auto auto;gap:6px;align-items:center;padding:3px 0;border-top:1px solid #f4f4f5}
.vg3.stp .cmr:first-of-type{border-top:0}
.vg3.stp .cd{width:6px;height:6px;border-radius:50%;justify-self:center;flex:none}
.vg3.stp .cd.ok{background:#00a35f}
.vg3.stp i.cd.sw{display:inline-grid;background:none;width:6px;height:6px}
.vg3.stp .cd span{grid-area:1/1;width:6px;height:6px;border-radius:50%;display:block}
.vg3.stp .cd span.ok{background:#00a35f}
.vg3.stp .cd span.bad{background:#b91c1c}
.vg3.stp .cn{font-size:7.5px;font-weight:600;color:#18181b;white-space:nowrap}
.vg3.stp .tks{display:flex;gap:1.5px;min-width:0;overflow:hidden}
.vg3.stp .tks i{width:3px;height:11px;border-radius:1px;background:#00a35f;flex:none}
.vg3.stp .tks i.w{background:#D97706}
.vg3.stp .tks i.sw{display:inline-grid;background:none}
.vg3.stp .tks i.sw span{grid-area:1/1;width:3px;height:11px;border-radius:1px;background:#00a35f}
.vg3.stp .tks i.sw span.bad{background:#b91c1c}
.vg3.stp .cu{font-family:var(--mono);font-size:6.5px;color:#8a8a93;font-variant-numeric:tabular-nums}
.vg3.stp .cp{display:inline-flex;font-size:6.5px;font-weight:650;border-radius:999px;padding:1.5px 5px;line-height:1.2;white-space:nowrap}
.vg3.stp .cp.ok{color:#008A4F;background:#EBFDF2}
.vg3.stp .cp.bad{color:#D92C20;background:#FEF2F1}
.vg3.stp .updp{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:5px;align-items:center;background:#fafafa;border:1px solid #f4f4f5;border-radius:7px;padding:4px 7px;margin-top:4px}
.vg3.stp .stg{font-size:5.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#D92C20;background:#FEF2F1;border-radius:3px;padding:1.5px 4px;white-space:nowrap}
.vg3.stp .utm{font-family:var(--mono);font-size:6px;color:#8a8a93}
.vg3.stp .utx{font-size:6.5px;color:#3f3f46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.stp .spf{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:6px;color:#8a8a93;border-top:1px solid #f4f4f5;margin-top:auto;padding-top:4px;white-space:nowrap}
.vg3.stp .sub-chip{display:inline-flex;align-items:center;gap:3px;font-size:6.5px;font-weight:650;color:#fff;background:#008A4F;border-radius:5px;padding:2px 6px}
.vg3.stp .sub-chip svg{width:7px;height:7px;flex:none}

/* Virus log = the real 2-column table (Check time / Status). */
.vg3.vir .vlog .thead,.vg3.vir .vlog .row{grid-template-columns:minmax(0,1fr) .5fr}
@media (max-width:700px){
  .vg3.bkl .btrx,.vg3.dnsx .cdet,.vg3.rumx .rsat{display:none}
}
@media (max-width:560px){
  .vg3.alr .etm{display:none}
  .vg3.alr .evr{grid-template-columns:10px minmax(0,1fr)}
  .vg3.stp .cu,.vg3.dnsx .ttl{display:none}
  .vg3.stp .cmr{grid-template-columns:8px minmax(50px,auto) minmax(0,1fr) auto}
  .vg3.dnsx .drec .thead,.vg3.dnsx .drow{grid-template-columns:minmax(0,.9fr) minmax(0,1.8fr) minmax(0,1fr)}
  .vg3.hbt .hlog .thead span:nth-child(4),.vg3.hbt .hlog .row .ms:last-child{display:none}
  .vg3.hbt .hlog .thead,.vg3.hbt .hlog .row{grid-template-columns:minmax(0,1fr) .55fr .85fr}
}
/* QC fixes after headless phase-shots: donut spans were collapsed by the
   generic .sw>* justify-self:start; slow-country value tint; fluid status
   ticks; alerts policy-ladder card. */
.vg3.rumx .dna>span{justify-self:stretch;align-self:stretch}
.vg3.rumx .rgeo .ms .bd{color:#D92C20;font-weight:650}
.vg3.stp .tks{flex:1}
.vg3.stp .tks i{flex:1 1 0;width:auto}
.vg3.stp .tks i.sw span{width:100%}
.vg3.alr .alr-tl{flex:none}
.vg3.alr .plc{flex:1;min-height:0;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:8px 11px 5px;display:flex;flex-direction:column;overflow:hidden}
.vg3.alr .plc .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;min-width:0}
.vg3.alr .plc h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b;white-space:nowrap}
.vg3.alr .plc .lh .ct{font-family:var(--mono);font-size:7px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.alr .plr{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;gap:7px;align-items:center;padding:3px 0;border-top:1px solid #f4f4f5;line-height:1.2}
.vg3.alr .plr .stpg{justify-self:start}
.vg3.alr .plr .wt{font-family:var(--mono);font-size:6.5px;color:#8a8a93;white-space:nowrap}
.vg3.alr .plr .to{font-size:7px;color:#3f3f46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.alr .plr .st{font-size:6.5px;color:#8a8a93;white-space:nowrap}
.vg3.alr .plr .st .ok{color:#008A4F;font-weight:650}
.vg3.alr .plr .st .cnl{color:#8a8a93;text-decoration:line-through}
/* RUM screen v2 — fill the full 546px canvas: donut + browser-distribution
   side by side (.rgrid), 5-row Countries, Slowest Pages card; the two tables
   flex-fill so neither animation phase leaves dead space. */
.vg3.rumx .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:stretch}
.vg3.rumx .rgrid>*{min-width:0}
.vg3.rumx .rsat .satw{flex:1;display:flex;align-items:center;gap:16px;padding:2px 0}
.vg3.rumx .rdist .dbr{flex:1;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:7px;align-items:center;padding:2px 0}
.vg3.rumx .dnm{font-size:7px;color:#3f3f46;white-space:nowrap}
.vg3.rumx .dtk{height:5px;background:#f4f4f5;border-radius:3px;overflow:hidden}
.vg3.rumx .dtk i{display:block;height:100%;background:#2a78d6;border-radius:3px}
.vg3.rumx .dpc{font-family:var(--mono);font-size:6.5px;color:#8a8a93;font-variant-numeric:tabular-nums}
.vg3.rumx .rgeo,.vg3.rumx .rslow{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.rumx .rgeo .rp,.vg3.rumx .rslow .rp{flex:1}
.vg3.rumx .rslow .thead,.vg3.rumx .rslow .row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.vg3.rumx .rslow .thead span:last-child{justify-self:end}
.vg3.rumx .rslow .ms{justify-self:end;text-align:right}
.vg3.rumx .pu{font-family:var(--mono);font-size:7px;color:#3f3f46;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){
  .vg3.rumx .rgrid,.vg3.rumx .rslow{display:none}
}
/* RUM v2 height trim — measured 539.9 vs 520 avail in the incident phase:
   smaller donut + tighter rows bring natural height under budget; the
   flex-grow tables absorb the healthy-phase slack. */
.vg3.rumx .dnut{width:44px;height:44px}
.vg3.rumx .dnut::after{inset:9.5px}
.vg3.rumx .dcv{font-size:8.5px}
.vg3.rumx .rsat .satw{gap:12px;padding:0}
.vg3.rumx .rdist .dbr{padding:1.5px 0}
.vg3.rumx .rgeo .row,.vg3.rumx .rslow .row{padding:2px 0}
/* Server screen v2 — real ServerContent metric-card grid (6 cards: CPU w/
   iowait, Memory, Swap, Load 1m/5m/15m, Network I/O, System Uptime) replaces
   the KPI strip; compact CPU chart; bottom row = Disk mounts + Server Details.
   Bars use usageSeverity colors (ok<70 green, warn amber, crit red); the CPU
   card's bar rides the .ba/.bb vg3A/vg3B layers like the /var mount bar. */
.vg3.srv .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.vg3.srv .mc{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:6.5px 9px 7px;min-width:0;display:flex;flex-direction:column;gap:2.5px}
.vg3.srv .mc .l{font-size:6px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.srv .mc .v{font-size:12.5px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:#18181b;font-variant-numeric:tabular-nums}
.vg3.srv .mc .v.sw{display:grid}
.vg3.srv .mc .v .u{font-size:7px;font-weight:500;color:#8a8a93;margin-left:2px}
.vg3.srv .mc .s{font-size:6.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.vg3.srv .mc .s.sw{display:grid}
.vg3.srv .mbar{position:relative;height:4px;background:#f4f4f5;border-radius:3px;overflow:hidden;margin:1px 0}
.vg3.srv .mbar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#00A35F}
.vg3.srv .mbar i.wrn{background:#D97706}
.vg3.srv .mbar i.crit{background:#E02424}
.vg3.srv .mbar i.ba{opacity:1;animation:vg3A 10s linear infinite}
.vg3.srv .mbar i.bb{opacity:0;animation:vg3B 10s linear infinite}
.vg3.srv .bgrid{flex:1 0 auto;display:grid;grid-template-columns:1.25fr 1fr;gap:9px;align-items:stretch}
.vg3.srv .bgrid>*{min-width:0}
.vg3.srv .bgrid .mtr,.vg3.srv .bgrid .crow{flex:1;align-items:center}
@media (max-width:700px){
  .vg3.srv .bgrid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .vg3.srv .mgrid{grid-template-columns:1fr 1fr}
}

/* ── API v2 (no-whitespace pass) — vg3-screen-api.html.twig.
   .agrid pairs the Assertions card with a dark Response transcript (.artx —
   the 201 body vs the 500 error object on the .sw swap); .rlog = Recent Runs
   location log. Both are flex-grow-only so the healthy phase's collapsed-banner
   slack spreads into row spacing; the .rlog insert/collapse rows (r0/r1 +
   ri0/ri1) stay flex:none so the row animation keeps its height. */
.vg3.apx .agrid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:9px;align-items:stretch}
.vg3.apx .agrid>*{min-width:0}
.vg3.apx .agrid .aslist{display:flex;flex-direction:column}
.vg3.apx .agrid .asr{flex:1;align-items:center}
.vg3.apx .artx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.apx .artx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.apx .artx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.apx .artx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.apx .acode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.apx .acode .sw.ab{display:grid}
.vg3.apx .aln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.apx .aln .q{color:#a5b4fc;font-weight:700}
.vg3.apx .aln .cl{color:#4ade80}
.vg3.apx .aln .ld{color:#f87171;font-weight:700}
.vg3.apx .aln .nt{color:#71717a}
.vg3.apx .rlog{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.apx .rlog .rp{flex:1}
.vg3.apx .rlog .rp.r0,.vg3.apx .rlog .rp.r1,.vg3.apx .rlog .rp.ri0,.vg3.apx .rlog .rp.ri1{flex:none}
.vg3.apx .rlog .thead,.vg3.apx .rlog .row{grid-template-columns:.6fr minmax(0,1fr) 1.25fr .55fr}
.vg3.apx .rlog .thead span:last-child{justify-self:end}
.vg3.apx .rlog .row .ms:last-child{justify-self:end;text-align:right}
.vg3.apx .rlog .rr{font-family:var(--mono);font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.apx .rlog .rr.okc{color:#00A35F}
.vg3.apx .rlog .rr.bdc{color:#D92C20;font-weight:650}
@media (max-width:700px){
  .vg3.apx .artx{display:none}
  .vg3.apx .agrid{grid-template-columns:1fr}
  .vg3.apx .rlog .thead span:nth-child(3){display:none!important}
  .vg3.apx .rlog .rr{display:none}
  .vg3.apx .rlog .thead,.vg3.apx .rlog .row{grid-template-columns:.6fr minmax(0,1fr) .55fr}
  .vg3.apx .rlog .row .ms:last-child{display:block}
}

/* ── Heartbeat v2 (no-whitespace pass) — vg3-screen-heartbeat.html.twig.
   .hgrid pairs the "How this check works" settings card with a dark cron
   transcript (.hbtx). .hgrid and .hlog are flex-grow-only absorbers of the
   collapsed-banner slack in the healthy phase; animated rows (rpx.k3 insert,
   rp.ri2 collapse) stay flex:none — only static rows stretch. */
.vg3.hbt .hgrid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:9px;align-items:stretch}
.vg3.hbt .hgrid>*{min-width:0}
.vg3.hbt .hgrid .cdet{display:flex;flex-direction:column}
.vg3.hbt .hgrid .cdet .lh{margin-bottom:5px}
.vg3.hbt .hgrid .crow{flex:1;align-items:center;padding:3.5px 0}
.vg3.hbt .plsr{height:32px}
.vg3.hbt .hbtx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.hbt .hbtx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.hbt .hbtx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.hbt .hbtx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.hbt .hcode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.hbt .hln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;line-height:1.2;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.hbt .hln.ind{padding-left:38px}
.vg3.hbt .hln .cm{color:#71717a}
.vg3.hbt .hln .q{color:#a5b4fc;font-weight:700}
.vg3.hbt .hln .cl{color:#4ade80}
.vg3.hbt .hln .ld{color:#f87171;font-weight:700}
.vg3.hbt .hln .nt{color:#71717a}
.vg3.hbt .hlog{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.hbt .hlog .rp{flex:1}
.vg3.hbt .hlog .rp.ri2,.vg3.hbt .hlog .rpx.k3{flex:none}
@media (max-width:700px){
  .vg3.hbt .hbtx{display:none}
  .vg3.hbt .hgrid{grid-template-columns:1fr}
}

/* ── SSL v2 (no-whitespace pass) — vg3-screen-ssl.html.twig.
   .sgrid pairs the Certificate Details card with a dark openssl transcript
   (.sslx, same visual language as the heartbeat .hbtx). .sgrid and the logs
   are flex-grow-only absorbers of the collapsed-banner slack in the healthy
   phase; the SSL log has no animated rows, so every .rp stretches. */
.vg3.ssl .sgrid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:9px;align-items:stretch}
.vg3.ssl .sgrid>*{min-width:0}
.vg3.ssl .sgrid .cdet{display:flex;flex-direction:column}
.vg3.ssl .sgrid .crow{flex:1;align-items:center;padding:1px 0}
.vg3.ssl .sslx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.ssl .sslx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.ssl .sslx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.ssl .sslx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.ssl .hcode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.ssl .hln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;line-height:1.2;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.ssl .hln .cm{color:#71717a}
.vg3.ssl .hln .q{color:#a5b4fc;font-weight:700}
.vg3.ssl .hln .cl{color:#4ade80}
.vg3.ssl .hln .wl{color:#fbbf24;font-weight:700}
.vg3.ssl .hln .nt{color:#71717a}
.vg3.ssl .upd-logs{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.ssl .upd-logs .rp{flex:1}
@media (max-width:700px){
  .vg3.ssl .sslx{display:none}
  .vg3.ssl .sgrid{grid-template-columns:1fr}
}

/* ── Domain v2 (no-whitespace pass) — vg3-screen-domain.html.twig.
   .dgrid pairs the Domain Details card with a dark whois transcript (.dmnx,
   same visual language as .sslx/.hbtx — registrar and nameservers appear ONLY
   here, keeping the details card product-faithful). .dgrid and the Recent
   Activity card (.dact) absorb the collapsed-banner slack in the healthy
   phase; the animated rpx.k3 activity row stays flex:none, static .acr rows
   stretch. */
.vg3.dmn .dgrid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:9px;align-items:stretch}
.vg3.dmn .dgrid>*{min-width:0}
.vg3.dmn .dgrid .cdet{display:flex;flex-direction:column}
.vg3.dmn .dgrid .crow{flex:1;align-items:center;padding:1px 0}
.vg3.dmn .dmnx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.dmn .dmnx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.dmn .dmnx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.dmn .dmnx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.dmn .hcode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.dmn .hln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;line-height:1.2;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.dmn .hln .cm{color:#71717a}
.vg3.dmn .hln .q{color:#a5b4fc;font-weight:700}
.vg3.dmn .hln .cl{color:#4ade80}
.vg3.dmn .hln .wl{color:#fbbf24;font-weight:700}
.vg3.dmn .hln .nt{color:#71717a}
.vg3.dmn .dact{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.dmn .dact .acr{flex:1}
.vg3.dmn .dact .rpx{flex:none}
@media (max-width:700px){
  .vg3.dmn .dmnx{display:none}
  .vg3.dmn .dgrid{grid-template-columns:1fr}
}

/* ── DNS v2 (no-whitespace pass) — vg3-screen-dns.html.twig. .dnsg pairs the
   Nameserver Health card (5 .nsr rows) with a dark dig transcript (.dnst).
   No insert rows on this screen, so .drec rows and .nsr rows are all static
   stretch absorbers; .drec and .dnsg are flex-grow-only. */
.vg3.dnsx .drec{flex:1 0 auto}
.vg3.dnsx .drec .drow{flex:1}
.vg3.dnsx .dnsg{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:9px;align-items:stretch}
.vg3.dnsx .dnsg>*{min-width:0}
.vg3.dnsx .dnsg .cdet{display:flex;flex-direction:column}
.vg3.dnsx .dnsg .nsr{flex:1;align-items:center}
.vg3.dnsx .nsc .bd{color:#D92C20;font-weight:650}
.vg3.dnsx .dnst{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.dnsx .dnst .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.dnsx .dnst h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.dnsx .dnst .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.dnsx .hcode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.dnsx .hln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;line-height:1.2;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.dnsx .hln .cm{color:#71717a}
.vg3.dnsx .hln .q{color:#a5b4fc;font-weight:700}
.vg3.dnsx .hln .cl{color:#4ade80}
.vg3.dnsx .hln .ld{color:#f87171;font-weight:700}
.vg3.dnsx .hln .nt{color:#71717a}
@media (max-width:700px){
  .vg3.dnsx .dnsg{display:none}
  .vg3.dnsx .drec .thead span:nth-child(3){display:none}
}

/* ── Blacklist v2 (no-whitespace pass) — vg3-screen-blacklist.html.twig. The
   wall grows to 8 rows (SORBS + UCEPROTECT L1 join the standard tier) and the
   transcript gains a ✓/✗ sweep-status line + why-it-matters note. No insert
   rows — every change is an in-place .sw swap — so wall rows and transcript
   lines are all static stretch absorbers; .bwall and .btrx are flex-grow-only. */
.vg3.bkl .bwall{flex:1 0 auto}
.vg3.bkl .bwr{flex:1;padding:1px 0}
.vg3.bkl .btrx{flex:1 0 auto}
.vg3.bkl .bcode{flex:1;justify-content:space-evenly}

/* ── Virus v2 (no-whitespace pass) — vg3-screen-virus.html.twig. .vgrid pairs
   the Monitoring Logs card with a dark Web Risk transcript (.virx) showing the
   real hourly uris:search question and both answers — clean = empty {} body,
   flagged = threatTypes JSON. Animated rows (rpx.k3 insert, rp.ri2 collapse)
   stay flex:none; static log rows and .acr activity rows stretch; .vgrid and
   the activity card (.vact) are flex-grow-only. */
.vg3.vir .vgrid{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:9px;align-items:stretch}
.vg3.vir .vgrid>*{min-width:0}
.vg3.vir .vlog{display:flex;flex-direction:column}
.vg3.vir .vlog .rp{flex:1}
.vg3.vir .vlog .rp.ri2,.vg3.vir .vlog .rpx.k3{flex:none}
.vg3.vir .virx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.vir .virx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.vir .virx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.vir .virx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.vir .hcode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.vir .hln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;line-height:1.2;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.vir .hln.ind{padding-left:14px}
.vg3.vir .hln .cm{color:#71717a}
.vg3.vir .hln .q{color:#a5b4fc;font-weight:700}
.vg3.vir .hln .cl{color:#4ade80}
.vg3.vir .hln .ld{color:#f87171;font-weight:700}
.vg3.vir .hln .nt{color:#71717a}
.vg3.vir .vact{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.vir .vact .acr{flex:1;align-items:center}
.vg3.vir .vact .rpx{flex:none}
@media (max-width:700px){
  .vg3.vir .virx{display:none}
  .vg3.vir .vgrid{grid-template-columns:1fr}
}
/* ── Status page public mockup (.vg3.spg) — blocks/status-page-mockup.html.twig.
   Breaks the dashboard pattern: a browser window on status.caldmont.com rendering
   the REAL public status page (v19 renderer / status-page.css palette — zinc ink,
   hairline sections, #16a34a/#ca8a04/#dc2626 state colors, serif-italic verdict
   accent). Shares the vg3 clock: .sw/.sw.late/.pop/.vg3-attn plus spgSeg/spgDot
   for the 34% red flip and spgVdot for the 44% verdict dot. The animated notice
   is the vg3-attn collapse (page gap 10px; its collapsed -9px margin nets +1px
   in the healthy phase only, which the stretching rows absorb);
   .cmp is the only flex-grow section — its .crow rows absorb the slack. */
.vg3.spg .spg-in{height:546px;display:flex;flex-direction:column;background:#fff}
.vg3.spg .spg-chrome{flex:none;height:22px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#f4f4f5;border-bottom:1px solid #e4e4e7}
.vg3.spg .spg-chrome .dots{display:flex;gap:4px;flex:none}
.vg3.spg .spg-chrome .dots i{width:6px;height:6px;border-radius:50%;background:#fca5a5}
.vg3.spg .spg-chrome .dots i:nth-child(2){background:#fcd34d}
.vg3.spg .spg-chrome .dots i:nth-child(3){background:#86efac}
.vg3.spg .spg-chrome .addr{margin:0 auto;display:inline-flex;align-items:center;gap:4px;height:14px;padding:0 24px;background:#fff;border:1px solid #e4e4e7;border-radius:7px;font-family:var(--mono);font-size:7px;color:#52525b;white-space:nowrap}
.vg3.spg .spg-chrome .addr svg{width:6.5px;height:6.5px;color:#16a34a;flex:none}
.vg3.spg .spg-chrome .ric{flex:none;display:flex;color:#a1a1aa}
.vg3.spg .spg-chrome .ric svg{width:8px;height:8px}
.vg3.spg .spg-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 16px;overflow:hidden;color:#0a0a0a}
.vg3.spg .spg-page>*{flex:none;min-width:0}
/* topbar */
.vg3.spg .spg-top{display:flex;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid #ececec}
.vg3.spg .spg-top .bnd{display:inline-flex;align-items:center;gap:5px}
/* Same brand mark the live demo below draws (.sv-mark): brand-coloured tile with a
   white diamond, NOT an initial — the two must read as one company. */
.vg3.spg .spg-top .bnd i{width:12px;height:12px;border-radius:3.5px;background:#00994F;font-size:0;color:transparent;font-style:normal;display:inline-flex;position:relative}
.vg3.spg .spg-top .bnd i::after{content:'';position:absolute;inset:3px;border-radius:1px;background:#fff;transform:rotate(45deg)}
.vg3.spg .spg-top .bnd b{font-size:9px;font-weight:700;letter-spacing:-.01em}
.vg3.spg .spg-top .sp{flex:1}
.vg3.spg .spg-top .tlink{font-size:7.5px;font-weight:500;color:#71717a;white-space:nowrap}
.vg3.spg .spg-top .tzseg{display:inline-flex;align-items:center;border:1px solid #ececec;border-radius:5px;overflow:hidden}
.vg3.spg .spg-top .tzseg b,.vg3.spg .spg-top .tzseg span{font-size:6.5px;font-weight:600;padding:2px 5px;color:#71717a}
.vg3.spg .spg-top .tzseg b{background:#f4f4f5;color:#0a0a0a}
.vg3.spg .spg-top .subbtn{display:inline-flex;align-items:center;gap:3px;font-size:7.5px;font-weight:650;color:#fff;background:#00994F;border-radius:5px;padding:3px 7px;white-space:nowrap}
.vg3.spg .spg-top .subbtn svg{width:7px;height:7px;flex:none}
/* verdict hero */
.vg3.spg .spg-hero{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vg3.spg .vhl{display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.spg .vt{font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:#0a0a0a}
.vg3.spg .vt em{font-family:'New York','Iowan Old Style','Charter',Georgia,serif;font-style:italic;font-weight:600;letter-spacing:-.01em}
.vg3.spg .vsub{display:inline-flex;align-items:center;gap:4px;font-size:7.5px;color:#71717a}
.vg3.spg .vsub b{font-family:var(--mono);font-weight:600;color:#0a0a0a}
.vg3.spg .vsub .vdot{width:6px;height:6px;border-radius:50%;background:#dc2626;box-shadow:0 0 0 2.5px rgba(220,38,38,.15);animation:spgVdot 10s linear infinite;flex:none}
.vg3.spg .vsub .lp{display:inline-flex;align-items:center;gap:3px;margin-left:3px;font-size:6.5px;font-weight:650;color:#16803c;background:#ecfdf3;border:1px solid #bbf0ce;border-radius:999px;padding:1px 5px}
.vg3.spg .vsub .lp i{width:3.5px;height:3.5px;border-radius:50%;background:#16a34a;flex:none}
.vg3.spg .vas{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.vg3.spg .vas .al{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#71717a}
.vg3.spg .vas .an{font-size:15px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vg3.spg .vas .an i{font-style:normal;font-size:8px;font-weight:500;color:#71717a;margin-left:2px}
@keyframes spgVdot{0%,43.9%{background:#16a34a;box-shadow:0 0 0 2.5px rgba(22,163,74,.15)}44%,90.9%{background:#dc2626;box-shadow:0 0 0 2.5px rgba(220,38,38,.15)}91%,100%{background:#16a34a;box-shadow:0 0 0 2.5px rgba(22,163,74,.15)}}
/* 90-day ribbon */
.vg3.spg .rib{display:flex;flex-direction:column;gap:4px}
.vg3.spg .rbar{display:flex;gap:1.5px;height:13px}
.vg3.spg .rbar i{flex:1;border-radius:1.5px;background:#16a34a;min-width:0}
.vg3.spg .rbar i.wn{background:#ca8a04}
.vg3.spg .rbar i.lv{background:#dc2626;animation:spgSeg 10s linear infinite}
.vg3.spg .rlab{display:flex;align-items:center;gap:7px;font-size:6.5px;color:#a1a1aa;white-space:nowrap}
.vg3.spg .rlab i{flex:1;height:1px;background:#ececec}
.vg3.spg .rlab b{font-family:var(--mono);font-weight:600;color:#71717a}
@keyframes spgSeg{0%,33.9%{background:#16a34a}34%,92.9%{background:#dc2626}93%,100%{background:#16a34a}}
@keyframes spgDot{0%,33.9%{background:#16a34a}34%,92.9%{background:#dc2626}93%,100%{background:#16a34a}}
/* incident notice (vg3-attn wraps it) */
.vg3.spg .ntc{background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:7px 10px 8px}
.vg3.spg .ntc .nh{display:flex;align-items:center;gap:6px;min-width:0}
.vg3.spg .ntc .klab{flex:none;font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#71717a}
.vg3.spg .ntc .npill{flex:none;margin-left:auto;font-size:6.5px;font-weight:700;letter-spacing:.04em;color:#dc2626;background:#fff;border:1px solid #fecaca;border-radius:999px;padding:1px 6px}
.vg3.spg .ntc .nt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8.5px;font-weight:700;letter-spacing:-.01em;color:#0a0a0a}
.vg3.spg .ntc .nu{display:flex;align-items:baseline;gap:6px;margin-top:4px;min-width:0}
.vg3.spg .ntc .stg{flex:none;font-size:7px;font-weight:700;color:#dc2626}
.vg3.spg .ntc .ntm{flex:none;font-family:var(--mono);font-size:6.5px;color:#a1a1aa}
.vg3.spg .ntc .ntx{font-size:7.5px;color:#52525b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* key numbers — hairline row */
.vg3.spg .sts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ececec;border-bottom:1px solid #ececec;padding:7px 0}
.vg3.spg .st{padding:0 10px;border-left:1px solid #ececec;min-width:0}
.vg3.spg .st:first-child{border-left:0;padding-left:0}
.vg3.spg .st .l{display:block;font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#71717a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.spg .st .n{display:block;margin-top:2px;font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.vg3.spg .st .n i{font-style:normal;font-size:7.5px;font-weight:500;color:#a1a1aa;margin-left:1px}
.vg3.spg .st .n.sw,.vg3.spg .st .d.sw{display:grid;max-width:100%}
.vg3.spg .st .n .wn{color:#ca8a04}
.vg3.spg .st .n .bd,.vg3.spg .pct .bd{color:#dc2626}
.vg3.spg .st .d{display:block;margin-top:2px;font-size:6.5px;color:#a1a1aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* components */
.vg3.spg .cmp{flex:1 0 auto;display:flex;flex-direction:column;gap:6px}
.vg3.spg .ch2{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.vg3.spg .ch2 h5{font-size:9px;font-weight:700;letter-spacing:-.01em;color:#0a0a0a}
.vg3.spg .ch2 .xa{font-size:6.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.spg .grp{border:1px solid #ececec;border-radius:9px;padding:0 9px;display:flex;flex-direction:column;flex:1 0 auto}
.vg3.spg .grp.gcl{flex:none}
.vg3.spg .gh{display:flex;align-items:center;gap:5px;padding:6px 0;flex:none}
.vg3.spg .gh b{font-size:8.5px;font-weight:650;letter-spacing:-.01em}
.vg3.spg .gh .gc{font-family:var(--mono);font-size:7px;color:#a1a1aa}
.vg3.spg .gh .gp{margin-left:auto;display:inline-grid}
.vg3.spg .gch{width:8px;height:8px;flex:none;color:#a1a1aa}
.vg3.spg .gch.rot{transform:rotate(90deg)}
.vg3.spg .cpil{display:inline-flex;font-size:6.5px;font-weight:650;border-radius:999px;padding:1.5px 6px;border:1px solid transparent;white-space:nowrap}
.vg3.spg .cpil.ok{color:#16803c;background:#ecfdf3;border-color:#bbf0ce}
.vg3.spg .cpil.bd{color:#dc2626;background:#fef2f2;border-color:#fecaca}
.vg3.spg .crow{display:flex;align-items:center;gap:6px;padding:4px 0;border-top:1px solid #f4f4f5;flex:1;min-width:0}
.vg3.spg .cd{width:5.5px;height:5.5px;border-radius:50%;flex:none}
.vg3.spg .cd.ok{background:#16a34a}
.vg3.spg .cd.lv{background:#dc2626;animation:spgDot 10s linear infinite}
.vg3.spg .cn{flex:1;min-width:0;font-size:8px;font-weight:600;color:#27272a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.spg .cn .cds{font-weight:400;font-family:var(--mono);font-size:6.5px;color:#a1a1aa;margin-left:5px}
.vg3.spg .pct{flex:none;font-family:var(--mono);font-size:7px;color:#71717a;font-variant-numeric:tabular-nums}
.vg3.spg .pct.sw{display:inline-grid}
.vg3.spg .pslot{flex:none;display:inline-flex;min-width:0}
.vg3.spg .cdet2{border-top:1px solid #f4f4f5;padding:6px 0 7px;display:flex;flex-direction:column;gap:3px;flex:none}
.vg3.spg .ubar{display:flex;gap:1px;height:8px}
.vg3.spg .ubar i{flex:1;border-radius:1px;background:#16a34a;min-width:0}
.vg3.spg .ubar i.bd{background:#dc2626}
.vg3.spg .ucap{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:6px;color:#a1a1aa;white-space:nowrap}
.vg3.spg .ucap .mid{font-family:var(--mono);color:#71717a;overflow:hidden;text-overflow:ellipsis}
.vg3.spg .leg{display:flex;align-items:center;gap:8px;font-size:6.5px;color:#71717a;white-space:nowrap;flex:none}
.vg3.spg .leg span{display:inline-flex;align-items:center;gap:3px}
.vg3.spg .leg i{width:5px;height:5px;border-radius:1.5px;flex:none}
.vg3.spg .leg i.ok{background:#16a34a}
.vg3.spg .leg i.wn{background:#ca8a04}
.vg3.spg .leg i.bd{background:#dc2626}
.vg3.spg .leg i.mt{background:#4f63d2}
.vg3.spg .leg i.nd{background:#f0f0f2;border:1px solid #e4e4e7}
.vg3.spg .leg .hint{margin-left:auto;color:#a1a1aa;letter-spacing:.04em}
/* footer */
.vg3.spg .sft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:7px;border-top:1px solid #ececec;font-size:6.5px;color:#a1a1aa;white-space:nowrap}
.vg3.spg .sft .pw{display:inline-flex;align-items:center;gap:3px}
.vg3.spg .sft .pw svg{width:9px;height:8px;flex:none}
.vg3.spg .sft .pw b{font-weight:650;color:#27272a}
.vg3.spg .sft .fl{overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){
  .vg3.spg .spg-in{height:auto}
  .vg3.spg .spg-hero{flex-direction:column;align-items:flex-start;gap:6px}
  .vg3.spg .vas{align-items:flex-start}
  .vg3.spg .cn .cds,.vg3.spg .leg .hint{display:none}
  .vg3.spg .spg-top .tlink,.vg3.spg .spg-top .tzseg{display:none}
}

/* ============================================================
   Report email mockup (.vg3.rml) — blocks/report-email-mockup.html.twig,
   homepage "Project manager" panel. Mail client in split view: inbox
   list of sent reports (one row per real cadence) + the weekly report
   opened. Email body mirrors the real v3 report email (report-header +
   report-block-uptime): eyebrow/h1/hero/stat grid/uptime tables — NO
   bar graphics, the real email has none. Static, no clock classes.
   ============================================================ */
.vg3.rml .rml-in{height:546px;display:flex;flex-direction:column;background:#fff}
.vg3.rml .rml-chrome{flex:none;height:22px;display:flex;align-items:center;gap:8px;padding:0 10px;background:#f4f4f5;border-bottom:1px solid #e4e4e7}
.vg3.rml .rml-chrome .dots{display:flex;gap:4px;flex:none}
.vg3.rml .rml-chrome .dots i{width:6px;height:6px;border-radius:50%;background:#fca5a5}
.vg3.rml .rml-chrome .dots i:nth-child(2){background:#fcd34d}
.vg3.rml .rml-chrome .dots i:nth-child(3){background:#86efac}
.vg3.rml .rml-chrome .addr{margin:0 auto;display:inline-flex;align-items:center;gap:4px;height:14px;padding:0 24px;background:#fff;border:1px solid #e4e4e7;border-radius:7px;font-family:var(--mono);font-size:7px;color:#52525b;white-space:nowrap}
.vg3.rml .rml-chrome .addr svg{width:7px;height:7px;color:#8a8a93;flex:none}
.vg3.rml .rml-head{flex:none;display:flex;flex-direction:column;gap:6px;padding:9px 12px;border-bottom:1px solid #ececef}
.vg3.rml .rml-head .sj{display:flex;align-items:baseline;gap:8px;min-width:0}
.vg3.rml .rml-head .sj>b{flex:1;min-width:0;font-size:10.5px;font-weight:700;letter-spacing:-.015em;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rml .rml-head .whn{flex:none;display:flex;align-items:baseline;gap:4px;font-size:7px;color:#8a8a93;white-space:nowrap}
.vg3.rml .rml-head .whn b{font-weight:600;color:#52525b}
.vg3.rml .rml-head .frm{display:flex;align-items:center;gap:7px;min-width:0}
.vg3.rml .rml-head .av{flex:none;width:18px;height:18px;border-radius:50%;background:#00994F;display:inline-flex;align-items:center;justify-content:center}
.vg3.rml .rml-head .av svg{width:10px;height:8.5px}
.vg3.rml .rml-head .who{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.vg3.rml .rml-head .who b{font-size:8px;font-weight:650;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rml .rml-head .who span{font-size:6.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rml .rml-head .who span i{font-style:normal;color:#b3b3ba}
.vg3.rml .rml-head .att{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:6.5px;font-weight:500;color:#52525b;background:#fafafa;border:1px solid #ececef;border-radius:6px;padding:3px 7px;white-space:nowrap;font-family:var(--mono)}
.vg3.rml .rml-head .att svg{width:7px;height:7px;flex:none;color:#8a8a93}
.vg3.rml .rml-pane{flex:1;min-height:0;display:flex;background:#f4f4f5;padding:10px 12px;overflow:hidden}
.vg3.rml .eml{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #ececef;border-radius:10px;box-shadow:0 1px 3px rgba(15,17,26,.06);overflow:hidden}
.vg3.rml .eml .ebr{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid #f4f4f5}
.vg3.rml .eml .bnd{display:inline-flex;align-items:center;gap:5px;flex:none}
.vg3.rml .eml .bnd i{width:15px;height:15px;border-radius:5px;background:#0a0a0a;color:#fff;font-size:8.5px;font-weight:800;font-style:normal;display:inline-flex;align-items:center;justify-content:center}
.vg3.rml .eml .bnd b{font-size:10px;font-weight:800;letter-spacing:-.02em;color:#18181b;white-space:nowrap}
.vg3.rml .eml .ebd{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 12px 0;min-width:0}
.vg3.rml .eml .eye{flex:none;display:flex;align-items:center;gap:4px;font-size:6px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#008A4F;white-space:nowrap}
.vg3.rml .eml .eye i{width:3.5px;height:3.5px;border-radius:50%;background:#00A35F;flex:none}
.vg3.rml .eml h4{flex:none;margin-top:4px;font-size:12px;font-weight:750;letter-spacing:-.02em;color:#18181b}
.vg3.rml .eml .esum{flex:none;margin-top:3px;font-size:8px;line-height:1.45;color:#52525b}
.vg3.rml .eml .esum b{color:#18181b;font-weight:650}
.vg3.rml .eml .esum b.gd{color:#008A4F}
.vg3.rml .eml .stats{flex:none;display:grid;grid-template-columns:1fr 1fr 1.25fr;border-top:1px solid #ececef;margin-top:7px}
.vg3.rml .eml .stats .s{padding:6px 10px 7px;border-left:1px solid #f4f4f5;min-width:0}
.vg3.rml .eml .stats .s:first-child{border-left:0;padding-left:0}
.vg3.rml .eml .stats .l{display:block;font-size:6px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rml .eml .stats b{display:block;margin-top:2px;font-size:12px;font-weight:700;letter-spacing:-.02em;color:#18181b;font-variant-numeric:tabular-nums}
.vg3.rml .eml .stats b.z{font-size:9.5px;color:#8a8a93;padding-top:2px}
.vg3.rml .eml .stats b.wn{color:#b45309}
.vg3.rml .eml .sct{flex:none;margin-top:7px;padding-top:6px;border-top:1px solid #ececef;font-size:8.5px;font-weight:700;letter-spacing:-.01em;color:#18181b;white-space:nowrap}
.vg3.rml .eml .tbl{flex:1;min-height:0;display:flex;flex-direction:column;min-width:0}
.vg3.rml .eml .sub2{flex:none;padding-top:5px;font-size:6px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93;white-space:nowrap}
.vg3.rml .eml .th,.vg3.rml .eml .tr2{display:grid;grid-template-columns:minmax(0,1fr) 42px 46px 32px 24px;align-items:center;gap:6px;min-width:0}
.vg3.rml .eml .th span,.vg3.rml .eml .tr2 span{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.rml .eml .th span:first-child,.vg3.rml .eml .tr2 span:first-child{text-align:left}
.vg3.rml .eml .th{flex:none;padding:4px 0 3px;border-bottom:1px solid #ececef;font-size:6.5px;font-weight:650;color:#8a8a93}
.vg3.rml .eml .tr2{flex:1;min-height:0;border-bottom:1px solid #f4f4f5;font-size:7.5px;color:#52525b;font-variant-numeric:tabular-nums}
.vg3.rml .eml .tr2 .nm{display:flex;align-items:center;gap:5px;font-weight:650;color:#18181b}
.vg3.rml .eml .tr2 .d{width:5px;height:5px;border-radius:50%;background:#00A35F;flex:none}
.vg3.rml .eml .tr2 .up{color:#008A4F;font-weight:700}
.vg3.rml .eml .tr2.bad .d{background:#dc2626}
.vg3.rml .eml .tr2.bad .up,.vg3.rml .eml .tr2.bad span:nth-child(4),.vg3.rml .eml .tr2.bad span:nth-child(5){color:#dc2626;font-weight:700}
.vg3.rml .eml .ir{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:3px 6px 3px 16px;background:#fafafa;border-bottom:1px solid #f4f4f5;font-size:6.5px;color:#8a8a93}
.vg3.rml .eml .ir span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.rml .eml .ir span:last-child{flex:none;font-variant-numeric:tabular-nums}
.vg3.rml .eml .efo{flex:none;padding:5px 12px 7px;border-top:1px solid #f4f4f5;font-size:6.5px;color:#b3b3ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rml .eml .efo i{font-style:normal;color:#d4d4d8}
.vg3.rml .eml .efo u{text-decoration:underline;text-underline-offset:1.5px;color:#8a8a93}
@media (max-width:700px){
  .vg3.rml .rml-in{height:auto}
  .vg3.rml .rml-head .whn,.vg3.rml .eml .hm{display:none}
  .vg3.rml .eml .th,.vg3.rml .eml .tr2{grid-template-columns:minmax(0,1fr) 44px 34px 26px}
  .vg3.rml .eml .tr2{padding:5px 0}
  .vg3.rml .eml .stats .l{white-space:normal}
}

/* ============================================================
   Owner dashboard screen (.vg3.ownd) — homepage "Website owner"
   panel. Rides the hero-dashboard components verbatim; overrides
   only hold the attention slot OPEN statically (base keyframe
   starts collapsed), re-tint the alert amber (SSL heads-up, not
   an outage), and stretch the 4 cards to fill the 2 rows.
   ============================================================ */
.vg3.ownd .vg3-attn{animation:none;grid-template-rows:minmax(0,1fr);margin-bottom:0}
.vg3.ownd .vg3-alert{border-color:rgba(217,119,6,.3)}
.vg3.ownd .vg3-alert .r1{color:#b45309}
.vg3.ownd .vg3-alert .r2 .dot{background:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.14)}
.vg3.ownd .vg3-alert .r2 .chip{color:#b45309;background:#fffbeb}
.vg3.ownd .vg3-tag.wn{color:#b45309;background:#fffbeb}
.vg3.ownd .vg3-cards{grid-template-columns:1fr;grid-auto-rows:1fr;align-content:stretch}
.vg3.ownd .vg3-card{justify-content:space-between}
.vg3.ownd .vg3-card .h .url{flex:1;min-width:0}
.vg3.ownd .vg3-card .h .avg{flex:none;font-size:8px;color:#8a8a93;font-variant-numeric:tabular-nums;white-space:nowrap}
.vg3.ownd .vg3-card .h .pc{flex:none;font-size:10px;font-weight:700;color:#00A35F;font-variant-numeric:tabular-nums}
.vg3.ownd .vg3-card .bars{flex:none;height:13px;gap:1.5px}
@media (max-width:560px){
  .vg3.ownd .vg3-card .h .avg{display:none}
}

/* ── Alerts v2 (no-whitespace pass) — vg3-screen-alerts.html.twig.
   The timeline is now STATIC structure that lights up in place: healthy phase
   shows the ARMED ladder (hollow dots, t+N dry-run times, contact boxes — the
   real editor dry-run language), then row 1 fires at 34% (.sw.e), step 1 at
   37% (.sw), step 2 at 40.5% (.sw.m), the ack row pops at 42.5% (evw.r3) and
   `late` (44%) settles the rest. Only the ack row changes height between
   phases, so both sit near the 520 budget; .plc rows, .aact rows and the
   transcript absorb the small healthy-phase slack. NO phone-call steps —
   no voice channel exists (the page FAQ says so). */
.vg3.alr .sw.e>.a{animation-name:alrEA}
.vg3.alr .sw.e>.b{animation-name:alrEB}
.vg3.alr .sw.m>.a{animation-name:alrMA}
.vg3.alr .sw.m>.b{animation-name:alrMB}
@keyframes alrEA{0%,33.9%{opacity:1}34%,92.9%{opacity:0}93%,100%{opacity:1}}
@keyframes alrEB{0%,33.9%{opacity:0}34%,92.9%{opacity:1}93%,100%{opacity:0}}
@keyframes alrMA{0%,40.4%{opacity:1}40.5%,92.9%{opacity:0}93%,100%{opacity:1}}
@keyframes alrMB{0%,40.4%{opacity:0}40.5%,92.9%{opacity:1}93%,100%{opacity:0}}
.vg3.alr .etm.sw>*{justify-self:end}
.vg3.alr .dsw{width:6px;height:6px;margin-top:2px;flex:none}
.vg3.alr .dsw .edt{margin-top:0}
.vg3.alr .edt.hol{background:#fff;border:1.5px solid #d4d4d8;box-sizing:border-box;box-shadow:none}
.vg3.alr .eco.lst{padding-bottom:0}
.vg3.alr .agrd{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:9px;align-items:stretch}
.vg3.alr .agrd>*{min-width:0}
.vg3.alr .agrd .plc{flex:none;min-height:0}
.vg3.alr .plc .plr{flex:1}
.vg3.alr .altx{background:#101014;border-radius:11px;padding:8px 11px 7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.alr .altx .lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0}
.vg3.alr .altx h5{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;white-space:nowrap}
.vg3.alr .altx .ct{font-family:var(--mono);font-size:6.5px;color:#71717a;white-space:nowrap;min-width:0}
.vg3.alr .hcode{display:flex;flex-direction:column;gap:2.5px;flex:1;justify-content:space-evenly}
.vg3.alr .hln{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-size:6.5px;line-height:1.2;color:#d4d4d8;white-space:nowrap;overflow:hidden;min-width:0}
.vg3.alr .hln.ind{padding-left:14px}
.vg3.alr .hln .cm{color:#71717a}
.vg3.alr .hln .cl{color:#4ade80}
.vg3.alr .hln .nt{color:#71717a}
.vg3.alr .aact{flex:1 0 auto;display:flex;flex-direction:column}
.vg3.alr .aact .acr{flex:1;align-items:center;padding:2.5px 0}
.vg3.alr .aact .at{flex-direction:row;align-items:baseline;gap:5px}
.vg3.alr .aact .rpx{flex:none}
.vg3.alr .alr-tl{padding:7px 11px 4.5px}
.vg3.alr .eco{padding-bottom:4px}
.vg3.alr .ebr{padding:1.5px 6px}
.vg3.alr .esb{margin-top:1px}
.vg3.alr .plc .plr{padding:2.5px 0}
@media (max-width:700px){
  .vg3.alr .altx{display:none}
  .vg3.alr .agrd{grid-template-columns:1fr}
}

/* ── Escalation policy editor (.vg3.upd.alr.esc) — vg3-screen-escalation.html.twig,
   /incident-escalations hero. Rides the .alr dry-run primitives (.evr/.etm/.edt/
   .dsw/.ebox + the alrE/alrM keyframes): the LEFT rail is the STATIC built
   ladder (real editor step cards, wait connectors, repeat + recovery nodes) and
   the RIGHT dry-run pane lights up row by row at 34/37/40.5/44%. Both phases
   are the same height — nothing inserts. */
.vg3.esc .upd-head .pcl{width:9px;height:9px;flex:none;color:#b3b3ba}
.vg3.esc .vg3-tag{display:inline-flex;align-items:center;gap:3px;text-transform:none;letter-spacing:0}
.vg3.esc .vg3-tag svg{width:7px;height:7px;flex:none}
.vg3.esc .ebtn{display:inline-flex;align-items:center;gap:3.5px;font-size:7px;font-weight:600;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:6px;padding:2.5px 7px;white-space:nowrap}
.vg3.esc .ebtn svg{width:7.5px;height:7.5px;flex:none}
.vg3.esc .ebtn.del{color:#D92C20;border-color:transparent;background:transparent}
.vg3.esc .esc-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:11px;align-items:stretch}
.vg3.esc .erail{display:flex;flex-direction:column;min-width:0}
.vg3.esc .estp{display:grid;grid-template-columns:15px minmax(0,1fr);gap:7px}
.vg3.esc .enum{width:15px;height:15px;border-radius:50%;background:#18181b;color:#fff;font-size:7.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vg3.esc .enum.rp{background:#fff;color:#8a8a93;border:1.5px dashed #d4d4d8;box-sizing:border-box}
.vg3.esc .enum.ok{background:#00A35F}
.vg3.esc .enum svg{width:7.5px;height:7.5px}
.vg3.esc .ecard{background:#fff;border:1px solid #ececef;border-radius:9px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:5px 8px 4.5px;min-width:0}
.vg3.esc .esh{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
.vg3.esc .esh b{font-size:8px;font-weight:650;color:#18181b;flex:none}
.vg3.esc .esh .mut,.vg3.esc .ersv,.vg3.esc .ercv .mut,.vg3.esc .eadd .mut{font-size:6.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.esc .esh .mut i{font-style:normal;font-family:var(--mono);font-size:6px;color:#52525b;font-weight:600}
.vg3.esc .esh .etc{margin-left:auto;flex:none;font-family:var(--mono);font-size:6px;color:#8a8a93;background:#fafafa;border:1px solid #ececef;border-radius:4px;padding:1px 4px}
.vg3.esc .echips{display:flex;align-items:center;gap:4px;margin-top:3.5px;min-width:0;overflow:hidden}
.vg3.esc .chp{display:inline-flex;align-items:center;gap:4px;font-size:7px;font-weight:600;color:#18181b;border-radius:6px;padding:2px 6px 2px 3px;white-space:nowrap;flex:none}
.vg3.esc .chp.pe{background:#EBFDF2;box-shadow:inset 0 0 0 1px rgba(0,163,95,.2)}
.vg3.esc .chp.tmx{background:#eef2ff;box-shadow:inset 0 0 0 1px rgba(67,56,202,.18)}
.vg3.esc .chp.add{color:#8a8a93;font-weight:500;border:1px dashed #d4d4d8;padding:2px 6px}
.vg3.esc .chp.add svg{width:6px;height:6px;flex:none}
.vg3.esc .avx{width:9px;height:9px;border-radius:50%;background:#00A35F;color:#fff;font-size:4.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vg3.esc .avx.bc{background:#4338ca}
.vg3.esc .tic{width:9px;height:9px;border-radius:3px;background:rgba(67,56,202,.12);color:#4338ca;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vg3.esc .tic svg{width:6px;height:6px}
.vg3.esc .chp .cv{font-family:var(--mono);font-size:5.5px;font-weight:400;color:#8a8a93}
.vg3.esc .ersv{display:flex;align-items:center;gap:4px;margin-top:3px}
.vg3.esc .ersv svg{width:7px;height:7px;flex:none;color:#b3b3ba}
.vg3.esc .ersv b{color:#52525b;font-weight:650}
.vg3.esc .ersv.np{margin-top:2.5px}
.vg3.esc .ewt{display:grid;grid-template-columns:15px minmax(0,1fr);gap:7px;flex:1;min-height:9px}
.vg3.esc .ewt::before{content:"";width:1.5px;background:#e4e4e7;justify-self:center;height:100%}
.vg3.esc .ewt .pill2{align-self:center;justify-self:start;display:inline-flex;align-items:center;gap:4px;font-size:6.5px;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:999px;padding:2px 7px;white-space:nowrap;box-shadow:0 1px 2px rgba(15,17,26,.04)}
.vg3.esc .ewt .pill2 svg{width:7px;height:7px;flex:none;color:#8a8a93}
.vg3.esc .ewt .pill2 b{font-weight:650;color:#18181b}
.vg3.esc .eadd{display:grid;grid-template-columns:15px minmax(0,1fr);gap:7px;flex:1;min-height:9px;align-items:center}
.vg3.esc .eadd::before{content:"";width:1.5px;background:#e4e4e7;justify-self:center;height:100%}
.vg3.esc .eadd .lb{justify-self:start;display:inline-flex;align-items:center;gap:3.5px;font-size:6.5px;font-weight:500;color:#8a8a93;border:1px dashed #d4d4d8;border-radius:7px;padding:2px 7px;white-space:nowrap}
.vg3.esc .eadd .lb svg{width:6px;height:6px;flex:none}
.vg3.esc .estp.rep,.vg3.esc .estp.rcv{margin-top:0}
.vg3.esc .estp+.estp{margin-top:6px}
.vg3.esc .ecard.erep{padding:4.5px 8px 4px}
.vg3.esc .tgl{width:14px;height:8px;border-radius:999px;background:#00A35F;position:relative;flex:none;display:inline-block}
.vg3.esc .tgl i{position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:#fff}
.vg3.esc .estp.rcv{margin-top:6px}
.vg3.esc .ercv{min-width:0;display:flex;flex-direction:column;gap:1px;padding-top:1px}
.vg3.esc .ercv b{font-size:7.5px;font-weight:650;color:#008A4F;white-space:nowrap}
.vg3.esc .edry{flex:none}
.vg3.esc .edry .evr{flex:1}
.vg3.esc .edry h5{display:inline-flex;align-items:center;gap:3.5px}
.vg3.esc .pdt{width:4px;height:4px;border-radius:50%;background:#00A35F;flex:none}
.vg3.esc .eco{padding-bottom:6px}
.vg3.esc .eco.lst{padding-bottom:0}
.vg3.esc .ett .gtx{color:#008A4F}
.vg3.esc .eln.dsh{background:none;width:0;border-left:1.5px dashed #d4d4d8}
.vg3.esc .etot{margin-top:auto;border-top:1px solid #f4f4f5;padding-top:4px;font-size:6.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.esc .etot b{color:#18181b;font-weight:650}
.vg3.esc .esave{display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #ececef;border-radius:9px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:4px 9px;font-size:7px;color:#8a8a93;white-space:nowrap}
.vg3.esc .esave .sdt{width:5px;height:5px;border-radius:50%;background:#d4d4d8;flex:none}
.vg3.esc .esave .sbtn{margin-left:auto;flex:none;font-size:7px;font-weight:650;color:#fff;background:#9be3c3;border-radius:6px;padding:2.5px 8px}
@media (max-width:700px){
  .vg3.esc .esc-grid{grid-template-columns:1fr}
  .vg3.esc .edry,.vg3.esc .esave,.vg3.esc .esh .etc{display:none}
  .vg3.esc .ewt,.vg3.esc .eadd{min-height:14px}
}

/* ── Maintenance schedule (.vg3.upd.mnt) — vg3-screen-maintenance.html.twig,
   /maintenance-windows hero. The real /cp/maintenance page: running-now strip,
   the 7-day ScheduleTimeline calendar (hour axis, lane-stacked blocks, red
   now-line, free-slot ghost, dark hover tooltip) and the windows list.
   STATIC layout — the 10s clock only plays the window OPENING: 34% flips the
   head clock 01:58→02:41 (.sw.e), jumps the now-line past 02:00 (mntNow) and
   turns the DB-migration block solid running green (mntBlk); the strip flips
   upcoming→running at 37% (.sw + mntStrip); the list row chip/next-run cell
   and the tooltip status flip at 40.5% (.sw.m). Nothing inserts — both phases
   the same height by construction. Static/reduced-motion/mobile state = the
   RUNNING phase (all base values are phase-B). Slot hookups reuse the global
   alrE*/alrM* keyframes. */
.vg3.mnt .sw.e>.a{animation-name:alrEA}
.vg3.mnt .sw.e>.b{animation-name:alrEB}
.vg3.mnt .sw.m>.a{animation-name:alrMA}
.vg3.mnt .sw.m>.b{animation-name:alrMB}
.vg3.mnt .upd-head .int{display:inline-flex;align-items:center;gap:3px}
.vg3.mnt .upd-head .int svg{width:7px;height:7px;flex:none;color:#b3b3ba}
.vg3.mnt .upd-head .int i{font-style:normal;font-family:var(--mono);font-size:6px;color:#b3b3ba}
.vg3.mnt .nwb{display:inline-flex;align-items:center;gap:3.5px;font-size:7px;font-weight:650;color:#fff;background:#00A35F;border:1px solid #00935a;border-radius:6px;padding:2.5px 7px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,163,95,.25)}
.vg3.mnt .nwb svg{width:7px;height:7px;flex:none}
/* running-now strip — both states grid-stacked, container tint plays at 37% */
.vg3.mnt .mstrip{background:#F3FCF7;border:1px solid rgba(0,163,95,.35);border-radius:8px;padding:4px 8px;animation:mntStrip 10s linear infinite}
.vg3.mnt .mstrip .sw{display:grid;width:100%}
.vg3.mnt .mstrip .sw>.a,.vg3.mnt .mstrip .sw>.b{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.vg3.mnt .msdot{width:5px;height:5px;border-radius:50%;background:#b3b3ba;flex:none}
.vg3.mnt .msdot.on{background:#00A35F;box-shadow:0 0 0 2.5px rgba(0,163,95,.18)}
.vg3.mnt .mtx{font-size:7.5px;color:#3f6152;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3.mnt .mtx b{font-weight:650;color:#14532d}
.vg3.mnt .mprog{margin-left:auto;flex:none;width:64px;height:3.5px;border-radius:999px;background:rgba(0,163,95,.18);overflow:hidden}
.vg3.mnt .mprog i{display:block;height:100%;width:34%;border-radius:999px;background:#00A35F}
.vg3.mnt .sw>.a .msend{margin-left:auto}
.vg3.mnt .msend{flex:none;font-size:6.5px;font-weight:650;color:#52525b;white-space:nowrap}
.vg3.mnt .msend.on{color:#008A4F}
.vg3.mnt .mview{flex:none;font-size:6.5px;font-weight:600;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:5px;padding:1px 6px}
@keyframes mntStrip{0%,36.9%{background:#fff;border-color:#ececef}37%,92.9%{background:#F3FCF7;border-color:rgba(0,163,95,.35)}93%,100%{background:#fff;border-color:#ececef}}
/* the calendar */
.vg3.mnt .mcal{flex:1;min-height:0;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:7px 10px 5px;display:flex;flex-direction:column;min-width:0}
.vg3.mnt .mch{display:flex;align-items:center;gap:7px;min-width:0;margin-bottom:4px}
.vg3.mnt .mch .hl{font-size:6.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#52525b;flex:none}
.vg3.mnt .mch .clk{font-family:var(--mono);font-size:6.5px;color:#8a8a93;white-space:nowrap;display:inline-flex;gap:2px}
.vg3.mnt .mlg{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:6px;color:#8a8a93;white-space:nowrap;flex:none}
.vg3.mnt .mlg span{display:inline-flex;align-items:center;gap:2.5px}
.vg3.mnt .mlg i{width:8px;height:5px;border-radius:2px}
.vg3.mnt .mlg i.run{background:#00A35F}
.vg3.mnt .mlg i.rec{background:#EBFDF2;border:1px solid rgba(0,163,95,.5)}
.vg3.mnt .mlg i.one{background:#EFF8FF;border:1px solid rgba(21,112,239,.45)}
.vg3.mnt .mtg7{display:inline-flex;gap:1.5px;background:#f4f4f5;border-radius:6px;padding:1.5px;flex:none}
.vg3.mnt .mtg7 span{font-size:6px;font-weight:600;color:#8a8a93;border-radius:5px;padding:1.5px 5px;white-space:nowrap}
.vg3.mnt .mtg7 span.on{background:#fff;color:#18181b;box-shadow:0 1px 2px rgba(15,17,26,.08)}
.vg3.mnt .maxis{display:flex;min-width:0}
.vg3.mnt .maxis .sp{width:44px;flex:none}
.vg3.mnt .maxis .ax{position:relative;flex:1;height:8px}
.vg3.mnt .maxis .ax i{position:absolute;top:0;font-style:normal;font-family:var(--mono);font-size:5px;color:#b3b3ba;transform:translateX(-50%)}
.vg3.mnt .maxis .ax i:first-child{transform:none}
.vg3.mnt .maxis .ax i.lst{transform:translateX(-100%)}
.vg3.mnt .mgrid{flex:1;min-height:0;display:flex;flex-direction:column}
.vg3.mnt .mday{flex:1;display:flex;align-items:stretch;min-height:19px;border-top:1px solid #f4f4f5}
.vg3.mnt .mday:first-child{border-top:0}
.vg3.mnt .mday.l2{flex:1.55;min-height:31px}
.vg3.mnt .mdl{width:44px;flex:none;display:flex;flex-direction:column;justify-content:center;gap:0;padding-right:6px}
.vg3.mnt .mdl b{font-size:6.5px;font-weight:650;color:#18181b;line-height:1.2}
.vg3.mnt .mdl b.td{color:#008A4F}
.vg3.mnt .mdl b.wk{color:#8a8a93}
.vg3.mnt .mdl span{font-size:5.5px;color:#b3b3ba;line-height:1.2}
.vg3.mnt .mtk{position:relative;flex:1;min-width:0;background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(12.5% - 1px),#f4f4f5 calc(12.5% - 1px),#f4f4f5 12.5%)}
.vg3.mnt .mtk.td{background-color:rgba(0,163,95,.035)}
.vg3.mnt .cblk{position:absolute;top:4px;height:10px;min-width:4px;border-radius:3px;border:1px solid transparent;font-size:5.5px;font-weight:650;line-height:8px;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.vg3.mnt .cblk.rec{background:#EBFDF2;border-color:rgba(0,163,95,.5);color:#008A4F}
.vg3.mnt .cblk.one{background:#EFF8FF;border-color:rgba(21,112,239,.45);color:#1570EF}
.vg3.mnt .cblk.mig{background:#00A35F;border-color:#00935a;color:#fff;box-shadow:0 0 0 2px rgba(0,163,95,.22);z-index:2;animation:mntBlk 10s linear infinite}
@keyframes mntBlk{0%,33.9%{background:#EBFDF2;border-color:rgba(0,163,95,.5);color:#008A4F;box-shadow:0 0 0 2px rgba(0,163,95,.12)}34%,92.9%{background:#00A35F;border-color:#00935a;color:#fff;box-shadow:0 0 0 2px rgba(0,163,95,.22)}93%,100%{background:#EBFDF2;border-color:rgba(0,163,95,.5);color:#008A4F;box-shadow:0 0 0 2px rgba(0,163,95,.12)}}
.vg3.mnt .mnow{position:absolute;top:-1px;bottom:-1px;left:11.181%;width:1.5px;background:#E02424;z-index:4;animation:mntNow 10s linear infinite}
.vg3.mnt .mnow i{position:absolute;top:-2px;left:-1.75px;width:5px;height:5px;border-radius:50%;background:#E02424}
@keyframes mntNow{0%,33.9%{left:8.194%}34%,92.9%{left:11.181%}93%,100%{left:8.194%}}
.vg3.mnt .mgh{position:absolute;top:4px;height:10px;border:1px dashed #d4d4d8;border-radius:3px;background:rgba(255,255,255,.75);display:inline-flex;align-items:center;justify-content:center;gap:1.5px;font-family:var(--mono);font-size:5.5px;font-weight:600;color:#8a8a93;box-sizing:border-box;white-space:nowrap}
.vg3.mnt .mgh svg{width:5px;height:5px;flex:none}
/* dark hover tooltip — floats over the rows below Today, no height cost */
.vg3.mnt .mtt{position:absolute;left:18.5%;top:15px;z-index:6;display:flex;flex-direction:column;gap:1px;background:#18181b;border-radius:6px;padding:4.5px 7px;box-shadow:0 4px 12px rgba(15,17,26,.28);pointer-events:none;width:max-content;max-width:180px}
.vg3.mnt .mtt b{font-size:7px;font-weight:650;color:#fff;white-space:nowrap}
.vg3.mnt .mtt span{font-size:6px;color:#d4d4d8;white-space:nowrap}
.vg3.mnt .mtt .mo{font-family:var(--mono);font-size:5.5px}
.vg3.mnt .mtt .mo i{font-style:normal;color:#8a8a93}
.vg3.mnt .mtt .st{color:#a1a1aa}
.vg3.mnt .mtt .st>.a,.vg3.mnt .mtt .st>.b{font-size:6px;color:#a1a1aa}
.vg3.mnt .mhint{display:flex;align-items:center;gap:3.5px;font-size:6px;color:#b3b3ba;padding:3px 0 1px;white-space:nowrap;overflow:hidden}
.vg3.mnt .mhint svg{width:6.5px;height:6.5px;flex:none;color:#d4d4d8}
.vg3.mnt .mhint b{font-weight:600;color:#8a8a93}
/* the windows list */
.vg3.mnt .mlst{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:0 10px 2px}
.vg3.mnt .mtabs{display:flex;align-items:center;gap:10px;border-bottom:1px solid #f4f4f5}
.vg3.mnt .mtab{font-size:6.5px;font-weight:600;color:#8a8a93;padding:5px 0 4px;border-bottom:1.5px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.vg3.mnt .mtab.on{color:#18181b;font-weight:650;border-bottom-color:#00A35F}
.vg3.mnt .mtab i{font-style:normal;font-family:var(--mono);font-size:5.5px;color:#8a8a93;background:#f4f4f5;border-radius:999px;padding:0 3.5px}
.vg3.mnt .mrow{display:grid;grid-template-columns:42px minmax(0,1.15fr) 76px minmax(0,1fr);gap:7px;align-items:center;padding:3.5px 0;border-top:1px solid #f4f4f5;min-width:0}
.vg3.mnt .mrow:first-of-type{border-top:0}
.vg3.mnt .mrow.hv{background:#F6FEF9;box-shadow:0 0 0 4px #F6FEF9;border-radius:2px}
.vg3.mnt .mchip{display:grid;justify-items:start}
.vg3.mnt .mchip .c{font-size:5.5px;font-weight:650;border-radius:999px;padding:1px 5px;white-space:nowrap;border:1px solid transparent}
.vg3.mnt .mchip .c.run{color:#fff;background:#00A35F;border-color:#00935a}
.vg3.mnt .mchip .c.rec{color:#008A4F;background:#EBFDF2;border-color:rgba(0,163,95,.35)}
.vg3.mnt .mchip .c.one{color:#1570EF;background:#EFF8FF;border-color:rgba(21,112,239,.35)}
.vg3.mnt .mnm{display:flex;flex-direction:column;gap:0;min-width:0}
.vg3.mnt .mnm b{font-size:7.5px;font-weight:650;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.mnt .mnm .sc{display:inline-flex;align-items:center;gap:2.5px;font-size:6px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.mnt .mnm .sc svg{width:6px;height:6px;flex:none;color:#d4d4d8}
.vg3.mnt .mnx{display:grid;min-width:0}
.vg3.mnt .mnx>.a,.vg3.mnt .mnx>.b{display:flex;flex-direction:column;gap:0;min-width:0}
.vg3.mnt .mnx b{font-size:6.5px;font-weight:650;color:#18181b;white-space:nowrap}
.vg3.mnt .mnx b.on{color:#008A4F}
.vg3.mnt .mnx span{font-family:var(--mono);font-size:5.5px;color:#b3b3ba;white-space:nowrap}
.vg3.mnt .mmon{display:inline-flex;align-items:center;gap:3px;font-size:6.5px;color:#8a8a93;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.mnt .mmon svg{width:7px;height:7px;flex:none;color:#b3b3ba}
.vg3.mnt .mmon b{font-weight:650;color:#52525b}
@media (max-width:700px){
  .vg3.mnt .mlst,.vg3.mnt .mtt,.vg3.mnt .mlg,.vg3.mnt .upd-head .int,.vg3.mnt .mprog{display:none}
  .vg3.mnt .mday{min-height:17px}
  .vg3.mnt .mday.l2{min-height:28px}
}

/* ── Scheduled reports send (.vg3.upd.rps) — /scheduled-reports hero.
   The real /cp Reports page at 09:00 on the 1st: head + date clock, the
   send-status strip, the reports list (Name/Frequency/Last Sent/Next Report,
   freqBadge palette) and the report email itself as the recipients receive it
   (ReportEmailPreview fidelity: chrome + address pill, From/To/Subject,
   branded Caldmont body, per-type monitor tables, incident rows, attachments).
   STATIC layout — the 10s clock only plays the report SENDING itself: 34%
   flips the head clock 08:59→09:00 (.sw.e); the strip flips upcoming→sent at
   37% (.sw + the global mntStrip tint); the list-row Last Sent/Next Report
   cells flip at 40.5% (.sw.m); the delivery pill flips scheduled→delivered at
   44% (.sw.late). Nothing inserts — both phases the same height by
   construction. Static/reduced-motion/mobile state = the SENT phase (all base
   values are phase-B). Slot hookups reuse the global alrE*/alrM* keyframes. */
.vg3.rps .sw.e>.a{animation-name:alrEA}
.vg3.rps .sw.e>.b{animation-name:alrEB}
.vg3.rps .sw.m>.a{animation-name:alrMA}
.vg3.rps .sw.m>.b{animation-name:alrMB}
.vg3.rps .upd-head .int{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:6.5px;color:#8a8a93;white-space:nowrap}
.vg3.rps .upd-head .int svg{width:7px;height:7px;flex:none;color:#b3b3ba}
.vg3.rps .nwb{display:inline-flex;align-items:center;gap:3.5px;font-size:7px;font-weight:650;color:#fff;background:#00A35F;border:1px solid #00935a;border-radius:6px;padding:2.5px 7px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,163,95,.25)}
.vg3.rps .nwb svg{width:7px;height:7px;flex:none}
/* send-status strip — both states grid-stacked, container tint plays at 37% */
.vg3.rps .rstrip{background:#F3FCF7;border:1px solid rgba(0,163,95,.35);border-radius:8px;padding:4px 8px;animation:mntStrip 10s linear infinite}
.vg3.rps .rstrip .sw{display:grid;width:100%}
.vg3.rps .rstrip .sw>.a,.vg3.rps .rstrip .sw>.b{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.vg3.rps .rsd{width:5px;height:5px;border-radius:50%;background:#b3b3ba;flex:none}
.vg3.rps .rsd.on{background:#00A35F;box-shadow:0 0 0 2.5px rgba(0,163,95,.18)}
.vg3.rps .rtx{font-size:7.5px;color:#3f6152;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3.rps .rtx b{font-weight:650;color:#14532d}
.vg3.rps .rsn{margin-left:auto;flex:none;font-size:6.5px;font-weight:650;color:#52525b;white-space:nowrap}
.vg3.rps .rsn.on{color:#008A4F}
.vg3.rps .rvw{flex:none;font-size:6.5px;font-weight:600;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:5px;padding:1px 6px}
/* the reports list — Name / Frequency / Last Sent / Next Report / actions */
.vg3.rps .rtbl{background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:1px 10px 2px}
.vg3.rps .rhd,.vg3.rps .rrow{display:grid;grid-template-columns:minmax(0,1.3fr) 54px 62px 62px 14px;gap:7px;align-items:center;min-width:0}
.vg3.rps .rhd{padding:3.5px 0 3px;border-bottom:1px solid #f4f4f5}
.vg3.rps .rhd span{font-size:5.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93;white-space:nowrap}
.vg3.rps .rrow{padding:3px 0;border-top:1px solid #f4f4f5}
.vg3.rps .rrow:nth-of-type(2){border-top:0}
.vg3.rps .rrow.hv{background:#F6FEF9;box-shadow:0 0 0 4px #F6FEF9;border-radius:2px}
.vg3.rps .rnm{font-size:7.5px;font-weight:650;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rps .rfq{justify-self:start;font-size:5.5px;font-weight:650;border-radius:999px;padding:1px 5px;white-space:nowrap;border:1px solid transparent}
.vg3.rps .rfq.grn{color:#008A4F;background:#EBFDF2;border-color:rgba(0,163,95,.35)}
.vg3.rps .rfq.tea{color:#0E9384;background:#F0FDF9;border-color:rgba(14,147,132,.35)}
.vg3.rps .rfq.pur{color:#7A5AF8;background:#F5F3FF;border-color:rgba(122,90,248,.35)}
.vg3.rps .rdt{font-family:var(--mono);font-size:6px;color:#52525b;white-space:nowrap}
.vg3.rps .rdt i{font-style:normal}
.vg3.rps .rdt .ok{color:#008A4F;font-weight:600}
.vg3.rps .rdt .soon{color:#18181b;font-weight:600}
.vg3.rps .rkb{display:flex;align-items:center;justify-content:center;color:#b3b3ba}
.vg3.rps .rkb svg{width:8px;height:8px}
/* the email — canvas, chrome, meta, branded body, attachments */
.vg3.rps .rmail{flex:1;min-height:0;background:#ececef;border:1px solid #e4e4e7;border-radius:11px;padding:4px 6px 5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.vg3.rps .rmbar{display:flex;align-items:center;gap:6px;min-width:0;flex:none}
.vg3.rps .dts{display:inline-flex;gap:2.5px;flex:none}
.vg3.rps .dts i{width:4.5px;height:4.5px;border-radius:50%;background:#d4d4d8}
.vg3.rps .addr{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:6px;color:#8a8a93;background:#fff;border:1px solid #e4e4e7;border-radius:6px;padding:1px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rps .rpil{flex:none}
.vg3.rps .rpil>.a,.vg3.rps .rpil>.b{font-size:5.5px;font-weight:650;border-radius:999px;padding:1px 6px;border:1px solid #e4e4e7;background:#fff;color:#8a8a93}
.vg3.rps .rpil>.b.on{color:#008A4F;background:#EBFDF2;border-color:rgba(0,163,95,.35)}
.vg3.rps .rmwin{flex:1;min-height:0;background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 1px 3px rgba(15,17,26,.06);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.vg3.rps .rmeta{display:flex;flex-direction:column;gap:1px;padding:3.5px 9px;border-bottom:1px solid #f4f4f5;flex:none}
.vg3.rps .mr2{display:flex;align-items:baseline;gap:5px;min-width:0}
.vg3.rps .mr2 .k{width:26px;flex:none;font-size:5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c8c8cd}
.vg3.rps .mr2 .v{font-size:6.5px;color:#52525b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rps .mr2 b{font-size:7px;font-weight:650;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.rps .chips{display:inline-flex;gap:3px;min-width:0}
.vg3.rps .rchip{font-style:normal;font-size:5.5px;color:#52525b;background:#f8f8f9;border:1px solid #ececef;border-radius:999px;padding:.5px 5px;white-space:nowrap}
.vg3.rps .rbody{flex:1;min-height:0;background:#EDF1F6;padding:3.5px 8px 3px;display:flex;flex-direction:column;gap:2px;min-width:0}
.vg3.rps .rlogo{text-align:center;font-size:7px;font-weight:800;letter-spacing:.22em;color:#1F3D63;flex:none}
.vg3.rps .rhc{background:#fff;border-radius:6px;padding:4px 8px 0;overflow:hidden;flex:none}
.vg3.rps .rhc>b{display:block;font-size:8.5px;font-weight:700;color:#1e2f45}
.vg3.rps .rhc .prd{display:block;font-family:var(--mono);font-size:5.5px;color:#7d8794;margin-top:.5px}
.vg3.rps .rstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e3e8ee;border-top:1px solid #e3e8ee;margin:4px -8px 0}
.vg3.rps .rstats span{background:#fff;text-align:center;padding:2.5px 2px 3px;display:flex;flex-direction:column;gap:.5px}
.vg3.rps .rstats b{font-family:var(--mono);font-size:7.5px;font-weight:650;color:#1e2f45}
.vg3.rps .rstats b.gd{color:#15803d}
.vg3.rps .rstats i{font-style:normal;font-size:4.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#7d8794}
.vg3.rps .rsec{background:#fff;border-radius:6px;padding:3px 8px 3.5px;overflow:hidden;flex:none;display:flex;flex-direction:column;gap:1.5px}
.vg3.rps .rsec .sh{font-size:5.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1F63A8}
.vg3.rps .rsec .gh{font-size:5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7d8794;margin-top:1.5px}
.vg3.rps .rmr,.vg3.rps .rir{display:flex;align-items:center;gap:4px;min-width:0;border-top:1px solid #eef1f5;padding:1px 0}
.vg3.rps .rmr .d,.vg3.rps .rir .d{width:4.5px;height:4.5px;border-radius:50%;background:#15803d;flex:none}
.vg3.rps .rir .d.bad{background:#b91c1c}
.vg3.rps .rmr .d.wn,.vg3.rps .rir .d.wn{background:#b45309}
.vg3.rps .rmr .nm{flex:1;min-width:0;font-size:6.5px;font-weight:600;color:#3a4656;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rps .rbars{display:inline-flex;align-items:center;gap:1px;flex:none}
.vg3.rps .rbars i{width:2.5px;height:7px;border-radius:1px;background:#15803d;opacity:.85}
.vg3.rps .rbars i.bad{background:#b91c1c}
.vg3.rps .rbars i.wn{background:#b45309}
.vg3.rps .rmr .pc{width:30px;flex:none;text-align:right;font-family:var(--mono);font-size:5.5px;color:#7d8794}
.vg3.rps .rmore{text-align:center;font-size:5.5px;color:#7d8794;padding-top:2px;border-top:1px solid #eef1f5;margin-top:.5px}
.vg3.rps .rir .nm{flex:1;min-width:0;font-size:6px;color:#3a4656;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.rps .rir .nm b{font-weight:650;color:#1e2f45}
.vg3.rps .rir .du{flex:none;font-family:var(--mono);font-size:5.5px;color:#7d8794;white-space:nowrap}
.vg3.rps .rfoot{text-align:center;font-size:4.5px;color:#9aa5b1;flex:none}
.vg3.rps .rfoot i{font-style:normal;text-decoration:underline;color:#7d8794}
.vg3.rps .ratt{display:flex;align-items:center;gap:4px;padding:3px 9px;background:#f8f8f9;border-top:1px solid #f4f4f5;flex:none;min-width:0;overflow:hidden}
.vg3.rps .ratt .k{font-size:5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c8c8cd;flex:none}
.vg3.rps .ratt i{display:inline-flex;align-items:center;gap:2.5px;font-style:normal;font-family:var(--mono);font-size:5.5px;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:5px;padding:1px 5px;white-space:nowrap}
.vg3.rps .ratt svg{width:5.5px;height:5.5px;flex:none;color:#8a8a93}
@media (max-width:700px){
  .vg3.rps .rtbl,.vg3.rps .upd-head .int,.vg3.rps .rfoot{display:none}
}

/* ── Team members (.vg3.upd.tmm) — vg3-screen-team.html.twig, /teams hero.
   The real /cp/users page: header ("Team Members" + subtitle, seat meter,
   Invite-teammate button), the pending-invite strip, the members table
   (search + role filter chips; Member / Role / Monitor access / Contacts /
   Status; role-menu badges, scope cells, channel tiles) and the two bottom
   cards ("Recent access changes" audit trail + "The five roles" cheat sheet).
   STATIC layout — the 10s clock only plays jordan ACCEPTING the invite: 34%
   flips the pending row (.sw.e + tmmAv avatar tint + tmmRow highlight); the
   strip flips pending→accepted at 37% (.sw + the global mntStrip tint); the
   seat meter ticks 4→5 at 40.5% (.sw.m + tmmSeat bar); the audit top row
   flips at 44% (.sw.late). Nothing inserts — both phases the same height by
   construction; table rows flex to fill the window. Static/reduced-motion/
   mobile state = the ACCEPTED phase (all base values are phase-B). Slot
   hookups reuse the global alrE*/alrM* keyframes. */
.vg3.tmm .sw.e>.a{animation-name:alrEA}
.vg3.tmm .sw.e>.b{animation-name:alrEB}
.vg3.tmm .sw.m>.a{animation-name:alrMA}
.vg3.tmm .sw.m>.b{animation-name:alrMB}
.vg3.tmm .upd-head .url{font-family:inherit;font-size:7.5px}
.vg3.tmm .nwb{display:inline-flex;align-items:center;gap:3.5px;font-size:7px;font-weight:650;color:#fff;background:#00A35F;border:1px solid #00935a;border-radius:6px;padding:2.5px 7px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,163,95,.25)}
.vg3.tmm .nwb svg{width:7px;height:7px;flex:none}
/* head seat meter — count flips 4→5 at 40.5%, bar widens with it */
.vg3.tmm .smeter{display:flex;flex-direction:column;align-items:flex-end;gap:1.5px;margin-right:2px}
.vg3.tmm .smeter .sl{display:inline-flex;align-items:baseline;gap:2.5px;font-size:6.5px;color:#8a8a93;white-space:nowrap}
.vg3.tmm .smeter .sl .sw{vertical-align:baseline}
.vg3.tmm .smeter .sl b{font-size:7px;font-weight:700;color:#18181b;font-variant-numeric:tabular-nums}
.vg3.tmm .smeter .sl i{font-style:normal}
.vg3.tmm .smeter .str{width:56px;height:3.5px;border-radius:999px;background:#e4e4e7;overflow:hidden}
.vg3.tmm .smeter .str i{display:block;height:100%;width:33.3%;border-radius:999px;background:#00A35F;animation:tmmSeat 10s linear infinite}
@keyframes tmmSeat{0%,40.4%{width:26.7%}40.5%,92.9%{width:33.3%}93%,100%{width:26.7%}}
.vg3.tmm .smeter .sf{font-size:5.5px;color:#b3b3ba;white-space:nowrap}
/* pending-invite strip — both states grid-stacked, container tint at 37% */
.vg3.tmm .ustrip{background:#F3FCF7;border:1px solid rgba(0,163,95,.35);border-radius:8px;padding:4px 8px;animation:mntStrip 10s linear infinite}
.vg3.tmm .ustrip .sw{display:grid;width:100%}
.vg3.tmm .ustrip .sw>.a,.vg3.tmm .ustrip .sw>.b{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
.vg3.tmm .usdot{width:5px;height:5px;border-radius:50%;background:#D97706;flex:none}
.vg3.tmm .usdot.on{background:#00A35F;box-shadow:0 0 0 2.5px rgba(0,163,95,.18)}
.vg3.tmm .ustx{font-size:7.5px;color:#3f6152;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg3.tmm .ustx b{font-weight:650;color:#14532d}
.vg3.tmm .usnt{margin-left:auto;flex:none;font-size:6.5px;font-weight:650;color:#52525b;white-space:nowrap}
.vg3.tmm .usnt.on{color:#008A4F}
.vg3.tmm .usvw{flex:none;font-size:6.5px;font-weight:600;color:#52525b;background:#fff;border:1px solid #ececef;border-radius:5px;padding:1px 6px}
/* members table — rows flex so the card fills the window exactly */
.vg3.tmm .utbl{flex:1;min-height:0;background:#fff;border:1px solid #ececef;border-radius:11px;box-shadow:0 1px 2px rgba(15,17,26,.04);padding:0 10px 3px;display:flex;flex-direction:column;overflow:hidden}
.vg3.tmm .utools{display:flex;align-items:center;gap:5px;padding:6px 0;border-bottom:1px solid #f4f4f5;min-width:0;overflow:hidden;flex:none}
.vg3.tmm .uhd,.vg3.tmm .urow{display:grid;grid-template-columns:minmax(0,1.3fr) 54px minmax(0,1fr) 40px 52px;gap:6px;align-items:center;min-width:0}
.vg3.tmm .uhd{flex:none;padding:4px 0 3px;border-bottom:1px solid #f4f4f5}
.vg3.tmm .uhd span{font-size:5.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.tmm .urow{flex:1;min-height:0;border-top:1px solid #f4f4f5;padding:2px 0}
.vg3.tmm .uhd+.urow{border-top:0}
.vg3.tmm .urow.jn{border-radius:2px;animation:tmmRow 10s linear infinite}
@keyframes tmmRow{0%,33.9%{background:transparent;box-shadow:none}34%,92.9%{background:#F6FEF9;box-shadow:0 0 0 4px #F6FEF9}93%,100%{background:transparent;box-shadow:none}}
.vg3.tmm .umem{display:flex;align-items:center;gap:5px;min-width:0}
.vg3.tmm .uav{flex:none;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:5px;font-weight:700;color:#fff;letter-spacing:.02em}
.vg3.tmm .uav.p{background:#5d4fc0}
.vg3.tmm .uav.m{background:#007e42}
.vg3.tmm .uav.d{background:#2166ad}
.vg3.tmm .uav.s{background:#576574}
.vg3.tmm .uav.al{background:#b67800}
.vg3.tmm .uav.j{background:#0E9384;animation:tmmAv 10s linear infinite}
@keyframes tmmAv{0%,33.9%{background:#d4d4d8;color:#52525b}34%,92.9%{background:#0E9384;color:#fff}93%,100%{background:#d4d4d8;color:#52525b}}
.vg3.tmm .unm{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.vg3.tmm .unm b{font-size:7.5px;font-weight:650;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.tmm .unm b.sw{display:grid}
.vg3.tmm .unm>span{font-family:var(--mono);font-size:5.5px;color:#8a8a93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vg3.tmm .unm>span.sw{display:grid}
.vg3.tmm .you{display:inline-block;margin-left:3px;font-style:normal;font-size:4.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#52525b;background:#f4f4f5;border-radius:3px;padding:.5px 2.5px;vertical-align:1px}
.vg3.tmm .rbg{display:inline-flex;align-items:center;gap:2.5px;font-family:var(--mono);font-size:5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;padding:1.5px 4.5px;border-radius:999px;border:1px solid #ececef;white-space:nowrap;background:#fff}
.vg3.tmm .rbg i{width:3.5px;height:3.5px;border-radius:50%;background:currentColor;flex:none}
.vg3.tmm .rbg svg{width:5px;height:5px;flex:none;opacity:.6}
.vg3.tmm .rbg.ow{color:#5d4fc0;background:#F5F3FF;border-color:rgba(93,79,192,.3)}
.vg3.tmm .rbg.ad{color:#007e42;background:#EBFDF2;border-color:rgba(0,126,66,.3)}
.vg3.tmm .rbg.ed{color:#2166ad;background:#EFF8FF;border-color:rgba(33,102,173,.3)}
.vg3.tmm .rbg.vw{color:#52525b;background:#f8f8f9;border-color:#e4e4e7}
.vg3.tmm .rbg.bl{color:#b67800;background:#FFFAEB;border-color:rgba(182,120,0,.3)}
.vg3.tmm .uacc{display:flex;align-items:center;gap:3px;font-size:6.5px;color:#52525b;min-width:0;white-space:nowrap;overflow:hidden}
.vg3.tmm .uacc svg{width:7px;height:7px;flex:none;color:#b3b3ba}
.vg3.tmm .uacc .gpill{flex:none;font-style:normal;font-size:5px;font-weight:650;color:#2166ad;background:#EFF8FF;border-radius:999px;padding:.5px 4px}
.vg3.tmm .uacc em{font-style:normal;font-size:6px;color:#8a8a93;min-width:0;overflow:hidden;text-overflow:ellipsis}
.vg3.tmm .uacc.no{color:#8a8a93;font-style:italic}
.vg3.tmm .ucts{display:flex;align-items:center;gap:2px}
.vg3.tmm .ctile{display:flex;align-items:center;justify-content:center;width:9px;height:9px;border-radius:2.5px;background:#f4f4f5;border:1px solid #ececef;color:#52525b}
.vg3.tmm .ctile svg{width:5px;height:5px}
.vg3.tmm .ucts .none{color:#d4d4d8;font-size:6.5px}
.vg3.tmm .ucts .warn{font-size:6px;font-weight:650;color:#B45309}
.vg3.tmm .ustt{display:flex;flex-direction:column;gap:1.5px;min-width:0;line-height:1.2;align-items:flex-start}
.vg3.tmm .ustt b{display:inline-flex;font-size:5.5px;font-weight:650;color:#008A4F;background:#EBFDF2;border:1px solid rgba(0,163,95,.25);border-radius:999px;padding:.5px 4px;white-space:nowrap}
.vg3.tmm .ustt>span{font-family:var(--mono);font-size:5px;color:#b3b3ba;white-space:nowrap}
.vg3.tmm .ustt.sw{display:grid}
.vg3.tmm .ustt.sw>.a,.vg3.tmm .ustt.sw>.b{display:flex;flex-direction:column;gap:1.5px;min-width:0;line-height:1.2;align-items:flex-start}
.vg3.tmm .ustt.sw span{font-family:var(--mono);font-size:5px;color:#b3b3ba;white-space:nowrap}
.vg3.tmm .ustt .a.pend b{color:#B45309;background:#FFFAEB;border-color:rgba(217,119,6,.3)}
.vg3.tmm .ustt .rs{font-family:var(--mono);font-size:5px;font-weight:650;color:#008A4F!important;white-space:nowrap}
/* bottom cards — audit trail + role cheat sheet */
.vg3.tmm .ugrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:9px;min-width:0}
.vg3.tmm .uaud .uar{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:5px;align-items:center;padding:2.5px 0;border-top:1px solid #f4f4f5}
.vg3.tmm .uar:first-of-type{border-top:0}
.vg3.tmm .uar .ui{display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background:#f8f8f9;border:1px solid #f0f0f1;color:#8a8a93}
.vg3.tmm .uar .ui svg{width:6px;height:6px}
.vg3.tmm .uar .ut{font-size:6.5px;color:#8a8a93;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.tmm .uar .ut b{font-weight:650;color:#18181b}
.vg3.tmm .uar .ut.sw{display:grid}
.vg3.tmm .uar .um{font-family:var(--mono);font-size:5.5px;color:#b3b3ba;white-space:nowrap;justify-self:end}
.vg3.tmm .uar .um.sw{display:grid}
.vg3.tmm .uar .um .on{color:#008A4F;font-weight:600}
.vg3.tmm .urcard .urr{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:5px;align-items:center;padding:2.5px 0;border-top:1px solid #f4f4f5}
.vg3.tmm .urr:first-of-type{border-top:0}
.vg3.tmm .urr .ud{font-size:6px;color:#8a8a93;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg3.tmm .urr .un{font-family:var(--mono);font-size:6px;color:#8a8a93;font-variant-numeric:tabular-nums}
.vg3.tmm .lh .ct.lnk{color:#008A4F;font-weight:600}
@media (max-width:700px){
  .vg3.tmm .ugrid,.vg3.tmm .utools,.vg3.tmm .smeter,.vg3.tmm .nwb,.vg3.tmm .uacc,.vg3.tmm .ucts,.vg3.tmm .upd-head .url{display:none}
  .vg3.tmm .uhd,.vg3.tmm .urow{grid-template-columns:minmax(0,1fr) 54px 52px}
  .vg3.tmm .uhd span:nth-child(3),.vg3.tmm .uhd span:nth-child(4){display:none}
}

/* ═════════ Mockup copy-guard — the /cp dashboard vignette ═════════
   Companion to the block at the end of base.css; see that comment for the
   rationale. The hero screen is the single biggest block of invented data on
   the site (fake fleet, hostnames, response times, a live 503 loop), and it
   ships on 44 templates plus the homepage.

   The shield goes on .vg3, not .vg3-wrap: the wrapper's ::before is free but
   its ::after is the green under-glow, and keeping the guard inside the
   wrapper leaves the .vg3-wrap:hover .vg3 tilt working (the event bubbles out).
   .vg3-pop needs its OWN shield — .vg3 is a stacking context (z-index:1), so a
   shield inside it can never rise over the sibling popover (z-index:2). */
.vg3-wrap{
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  cursor:default;
}
.vg3::before,.vg3-pop::before{
  content:'';position:absolute;inset:0;z-index:10;
  background:transparent;pointer-events:auto;
}
.vg3 img,.vg3-pop img{-webkit-user-drag:none;user-drag:none;pointer-events:none}