/* Retail console v6 shell (review prototype, 25-10).
   A presentation layer loaded LAST, over the live console + v5 layers. It changes how the console looks and moves,
   never what it shows: no page, tab, card, column, filter or role rule is removed here. Day + Night.
   Tokens: 8-pt spacing, radius 10 / 14 / 20, soft layered shadows, glass on sticky bars, one easing, one focus ring.
   Phone = max-width 767px (same break as v5 layout). */

/* ================================ 1. Tokens ================================ */
:root{
 --v6-ease:cubic-bezier(.22,.8,.3,1);
 --v6-t1:150ms;--v6-t2:220ms;--v6-t3:280ms;
 --v6-s1:4px;--v6-s2:8px;--v6-s3:12px;--v6-s4:16px;--v6-s5:24px;--v6-s6:32px;
 --v6-r1:10px;--v6-r2:14px;--v6-r3:20px;
 --v6-font:'Inter Tight',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 --v6-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --v6-tabbar:62px;
 --vx-r:10px;--vx-r-lg:14px;--v5-ease:var(--v6-ease);
}
/* Day: neutral cool greys + the live teal-green accent */
:root:not([data-theme=night]){
 --vx-bg:#f3f5f6;--vx-surface:#ffffff;--vx-surface-2:#f1f4f5;--vx-line:#e2e7ea;--vx-line-strong:#cbd3d8;
 --vx-ink:#121d27;--vx-ink-2:#465462;--vx-ink-3:#5f6c7b;
 --vx-accent:#1f6b60;--vx-accent-soft:#e5f2ee;
 --v6-glass:rgba(255,255,255,.78);--v6-glass-line:rgba(18,29,39,.08);
 --v6-sh1:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
 --v6-sh2:0 2px 4px -2px rgba(16,24,40,.05),0 8px 20px -6px rgba(16,24,40,.10);
 --v6-sh3:0 -2px 6px rgba(16,24,40,.04),0 -16px 40px -8px rgba(16,24,40,.20);
 --v6-scrim:rgba(12,20,28,.42);
 --v6-ring:0 0 0 2px var(--vx-surface),0 0 0 4px var(--vx-accent);
 --v6-ok:#1d7152;--v6-ok-bg:#e4f3eb;--v6-attn:#86600f;--v6-attn-bg:#fbf0d6;--v6-prob:#a3372e;--v6-prob-bg:#fbe7e4;
 --v6-info:#2b5a92;--v6-info-bg:#e7effa;--v6-id:#6a4b99;--v6-id-bg:#efe9f9;--v6-quiet:#5f6c7b;--v6-quiet-bg:#eef1f3;
 color-scheme:light;
}
/* Night ("Night" switch): no white flashes, contrast >= 4.5:1 for text */
:root[data-theme=night]{
 --vx-bg:#0d1417;--vx-surface:#141d21;--vx-surface-2:#1a252a;--vx-line:#243238;--vx-line-strong:#33454d;
 --vx-ink:#e8eff1;--vx-ink-2:#b6c3c8;--vx-ink-3:#93a3a9;
 --vx-accent:#56c2ac;--vx-accent-soft:#163a33;
 --v6-glass:rgba(20,29,33,.80);--v6-glass-line:rgba(255,255,255,.06);
 --v6-sh1:0 1px 2px rgba(0,0,0,.30);
 --v6-sh2:0 10px 28px -8px rgba(0,0,0,.55);
 --v6-sh3:0 -18px 44px -8px rgba(0,0,0,.65);
 --v6-scrim:rgba(0,0,0,.6);
 --v6-ring:0 0 0 2px var(--vx-surface),0 0 0 4px var(--vx-accent);
 --v6-ok:#6fd0a8;--v6-ok-bg:#173a2f;--v6-attn:#e9c275;--v6-attn-bg:#3b3120;--v6-prob:#f29d93;--v6-prob-bg:#45251f;
 --v6-info:#9cc2f0;--v6-info-bg:#1d2d44;--v6-id:#c8b2f2;--v6-id-bg:#2e2542;--v6-quiet:#a4b1b6;--v6-quiet-bg:#1f2a2f;
 color-scheme:dark;
}
html{background:var(--vx-bg);-webkit-text-size-adjust:100%}
body{background:var(--vx-bg);color:var(--vx-ink);font-family:var(--v6-font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
.mono,code,kbd,.k-num,.v .mono{font-family:var(--v6-mono)}
.k-num,.kpi .v,.gl .v,.v5-sheet-val b,.md-mini b{font-variant-numeric:tabular-nums;font-family:var(--v6-font)}

/* one focus ring everywhere */
:where(button,a,[tabindex]:not([tabindex="-1"]),input,select,textarea,summary):focus-visible{outline:2px solid var(--vx-accent)!important;outline-offset:2px!important}

/* ================================ 2. Surfaces, type, controls ================================ */
.md-panel,.card,.k,.kpi,.gl,.branch-card,.v5x-aq-case{border-color:var(--vx-line);border-radius:var(--v6-r2);box-shadow:var(--v6-sh1);background:var(--vx-surface)}
.md-panel{padding:20px}
.k{transition:transform var(--v6-t2) var(--v6-ease),box-shadow var(--v6-t2) var(--v6-ease),border-color var(--v6-t2)}
@media (hover:hover){.k:hover{box-shadow:var(--v6-sh2);border-color:var(--vx-line-strong);transform:translateY(-1px)}}
.k-num{font-size:30px;font-weight:600;letter-spacing:-.6px}
.k-label{font-size:13px;font-weight:600}
.k-sub,.k-foot,.md-note{font-size:12.5px}
.v5-head h1,.head h1{font-size:24px;font-weight:600;letter-spacing:-.4px;line-height:1.2}
.md-panel-title h2,.card>h3,.md-panel h2{font-size:15.5px;font-weight:600;letter-spacing:-.1px}
.btn{border-radius:var(--v6-r1);font-weight:550;transition:background-color var(--v6-t1) var(--v6-ease),border-color var(--v6-t1),box-shadow var(--v6-t1),transform 80ms}
.btn:active{transform:scale(.98)}
.btn.pri,.btn.primary{box-shadow:0 1px 2px rgba(16,24,40,.12)}
select,input[type=text],input[type=search],input[type=date],input[type=time],input[type=number],textarea{border-radius:var(--v6-r1)}
.tag,.pill,.chip5,.v5x-state{border-radius:999px}

/* Semantic colour only where it means something (fed into the console's own status variables) */
:root{--st-good:var(--v6-ok);--st-good-bg:var(--v6-ok-bg);--st-warn:var(--v6-attn);--st-warn-bg:var(--v6-attn-bg);--st-bad:var(--v6-prob);--st-bad-bg:var(--v6-prob-bg);--st-info:var(--v6-info);--st-info-bg:var(--v6-info-bg);--st-pilot:var(--v6-id);--st-pilot-bg:var(--v6-id-bg);--st-mute-bg:var(--v6-quiet-bg)}

/* Empty states: a quiet drawing + one sentence of why + one action (markup unchanged) */
.md-empty{position:relative;padding-top:64px!important;text-align:center}
.md-empty::before{content:'';position:absolute;left:50%;top:14px;width:56px;height:40px;transform:translateX(-50%);opacity:.9;
 background:var(--vx-ink-3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 40' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='4' y='6' width='48' height='30' rx='6'/%3E%3Cpath d='M4 14h48M12 22h18M12 28h10'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 40' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='4' y='6' width='48' height='30' rx='6'/%3E%3Cpath d='M4 14h48M12 22h18M12 28h10'/%3E%3Ccircle cx='42' cy='26' r='4'/%3E%3C/svg%3E") center/contain no-repeat}
.md-empty b{display:block;margin-bottom:4px}

/* screens cross-fade in (150 ms) */
.screen.on{animation:v6ScreenIn var(--v6-t1) var(--v6-ease) both}
@keyframes v6ScreenIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.v6-stagger>*{animation:v6Rise var(--v6-t2) var(--v6-ease) both}
.v6-stagger>*:nth-child(2){animation-delay:30ms}.v6-stagger>*:nth-child(3){animation-delay:60ms}.v6-stagger>*:nth-child(4){animation-delay:90ms}.v6-stagger>*:nth-child(n+5){animation-delay:120ms}
@keyframes v6Rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================================ 3. Unified icon and tab systems (v6.1 Stage 1) ================================ */
.v6i{display:inline-block;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v6i-16{width:16px;height:16px}.v6i-20{width:20px;height:20px}.v6i-24{width:24px;height:24px}
.v6-tabic .v6i{width:24px!important;height:24px!important}
.v6-tic .v6i{width:24px!important;height:24px!important}
.v5-navii .v6i,.v5-navgi .v6i{width:20px!important;height:20px!important}
.v6-ib .v6i,.v6-sh-x .v6i{width:20px!important;height:20px!important}
/* Two different patterns: segments switch views, underline tabs switch page sections. */
.v5-views,.v5x-vtabs,.v5-seg,.tabs{position:relative;display:flex!important;flex-wrap:nowrap!important;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.v5-views::-webkit-scrollbar,.v5x-vtabs::-webkit-scrollbar,.v5-seg::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.v5-views,.v5x-vtabs,.v5-seg{gap:3px!important;padding:3px!important;margin:0 0 16px;border:1px solid var(--vx-line)!important;border-radius:12px!important;background:var(--vx-surface-2)!important;width:max-content}
.v5x-vtabs{width:100%}
.v5-views>button,.v5x-vtabs>button,.v5-seg>button{position:relative;z-index:1;flex:0 0 auto;min-height:36px;padding:7px 14px!important;margin:0!important;border:0!important;border-radius:9px!important;background:transparent!important;box-shadow:none!important;font:550 13px/1.2 var(--v6-font)!important;color:var(--vx-ink-2)!important;white-space:nowrap;cursor:pointer;transition:color var(--v6-t1) var(--v6-ease)}
.v5x-vtabs>button{flex:1 1 0!important}
.v5-views>button.on,.v5x-vtabs>button.on,.v5-seg>button.on{color:var(--vx-ink)!important;font-weight:650!important}
.v6-segmented>.v6-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:9px;background:var(--vx-surface);box-shadow:0 1px 3px rgba(16,24,40,.13);pointer-events:none;transition:transform 220ms var(--v6-ease),width 220ms var(--v6-ease)}
:root[data-theme=night] .v6-segmented>.v6-ind{background:var(--vx-line-strong);box-shadow:0 1px 3px rgba(0,0,0,.28)}
.tabs{width:100%;gap:10px!important;padding:0!important;margin:0 0 16px!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--vx-line)!important;border-radius:0!important}
.tabs>button{position:relative;z-index:1;flex:0 0 auto;min-height:44px;padding:8px 13px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--vx-ink-2)!important;font:500 13px/1.2 var(--v6-font)!important;white-space:nowrap;cursor:pointer}
.tabs>button.on{color:var(--vx-ink)!important;font-weight:650!important}
.v6-underline>.v6-ind{position:absolute;z-index:0;left:0;bottom:0;top:auto;width:0;height:2px;border-radius:2px 2px 0 0;background:var(--vx-accent);pointer-events:none;transition:transform 220ms var(--v6-ease),width 220ms var(--v6-ease);box-shadow:none}
.v6-ind.v6-noanim{transition:none!important}
.v5-views>button.on::after,.tabs>button.on::after{content:none!important}
.v5-seg small{opacity:.8;font-weight:650;margin-left:5px;font-variant-numeric:tabular-nums}
.v5-views>button:focus-visible,.v5x-vtabs>button:focus-visible,.v5-seg>button:focus-visible,.tabs>button:focus-visible{outline:2px solid var(--vx-accent)!important;outline-offset:-3px!important}
@media(max-width:767px){.v5-views>button,.v5x-vtabs>button,.v5-seg>button,.tabs>button{min-height:44px!important}.tabs{scroll-padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.v6-ind,.v5-views>button,.v5x-vtabs>button,.v5-seg>button{transition:none!important;scroll-behavior:auto!important}}

/* ================================ 4. Desktop shell ================================ */
.top{background:var(--v6-glass)!important;-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--v6-glass-line)!important;box-shadow:none}
.side{background:var(--vx-surface);border-right:1px solid var(--vx-line)}
.nav .v5-navitem.on,.nav button.on{background:var(--vx-accent-soft)!important;color:var(--vx-accent)!important;position:relative}
.nav .v5-navitems .v5-navitem.on::before{content:'';position:absolute;left:22px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--vx-accent)}
.nav .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--v6-prob);color:#fff;font:650 11px/1 var(--v6-font)}
:root[data-theme=night] .nav .cnt{color:#1b0f0d}
.nav .v6-kbd{display:none;margin-left:auto;font:500 10.5px/1 var(--v6-mono);color:var(--vx-ink-3);border:1px solid var(--vx-line);border-radius:5px;padding:3px 5px;background:var(--vx-surface)}
@media (hover:hover){.nav button:hover .v6-kbd,.nav button:focus-visible .v6-kbd{display:inline-block}.nav button:hover .cnt+.v6-kbd{display:none}}
.v6-pinned{padding:2px 0 8px;margin-bottom:6px;border-bottom:1px solid var(--vx-line)}
.v6-pinned-h{display:flex;align-items:center;gap:8px;font:650 11px/1 var(--v6-font);letter-spacing:.06em;text-transform:uppercase;color:var(--vx-ink-3);padding:10px 10px 6px}
.v6-pinned .v5-navitem{padding-left:12px!important}
.v6-pinned .v6-pinic{display:inline-grid;place-items:center;width:18px;height:18px;color:var(--vx-accent)}
.v6-pinned .v6-pinic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:root.v5-sidemin .v6-pinned-h span,:root.v5-sidemin .v6-pinned .v5-navl,:root.v5-sidemin .nav .v6-kbd{display:none!important}
:root.v5-sidemin .v6-pinned .v5-navitem{justify-content:center;padding:8px 0!important}
.v6-ib{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--v6-r1);border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink-2);cursor:pointer;padding:0;flex:none;position:relative;transition:background-color var(--v6-t1),color var(--v6-t1)}
.v6-ib:hover{color:var(--vx-ink);background:var(--vx-surface-2)}
.v6-ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v6-ib[aria-pressed=true]{color:var(--vx-accent);background:var(--vx-accent-soft);border-color:transparent}
.v6-ib[aria-pressed=true] svg{fill:currentColor;fill-opacity:.18}
#v6Pin{display:none}
@media (min-width:768px){#v6Pin{display:inline-grid}}
body:not(.v5-mob):not(.v5-land) .v6-only-phone{display:none!important}

/* Today: calm hierarchy, a hero strip on top */
#s-overview>.v5-ctx,#s-overview .v5-ctx:first-child{display:flex;align-items:center;gap:8px 12px;padding:0;margin:0 0 8px}
.v6-hero{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.v6-hchip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 12px;border-radius:999px;border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink-2);font:550 12.5px/1.2 var(--v6-font);cursor:pointer;box-shadow:var(--v6-sh1)}
.v6-hchip i{width:8px;height:8px;border-radius:50%;background:var(--v6-quiet);flex:none}
.v6-hchip.ok i{background:var(--v6-ok)}.v6-hchip.attn i{background:var(--v6-attn)}.v6-hchip.prob i{background:var(--v6-prob)}
.v6-hchip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v6-hchip:hover{color:var(--vx-ink);border-color:var(--vx-line-strong)}

/* Tables: sticky headers, density, sort indicators */
.screen thead th{background:var(--vx-surface-2);font:650 12px/1.3 var(--v6-font);letter-spacing:.01em;color:var(--vx-ink-2);text-transform:none}
@media (min-width:768px){
 .v6-stick{overflow:visible!important}
 .v6-stick thead th{position:sticky;top:var(--vx-top);z-index:3;box-shadow:inset 0 -1px 0 var(--vx-line)}
 .v6-sortable{cursor:pointer;user-select:none;white-space:nowrap}
 .v6-sortable::after{content:'';display:inline-block;width:8px;height:8px;margin-left:6px;opacity:.35;vertical-align:1px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l3 3H1zM4 8L1 5h6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l3 3H1zM4 8L1 5h6z'/%3E%3C/svg%3E") center/contain no-repeat}
 .v6-sortable[aria-sort=ascending]::after{opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1l3.5 4.5h-7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1l3.5 4.5h-7z'/%3E%3C/svg%3E")}
 .v6-sortable[aria-sort=descending]::after{opacity:1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7L.5 2.5h7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 7L.5 2.5h7z'/%3E%3C/svg%3E")}
 .screen tbody tr{transition:background-color var(--v6-t1)}
 .screen tbody tr:hover{background:var(--vx-surface-2)}
 :root.v6-compact .screen tbody td{padding-top:5px!important;padding-bottom:5px!important;height:auto}
 :root.v6-compact .screen thead th{padding-top:6px!important;padding-bottom:6px!important}
 :root.v6-compact .screen .wpl .logstd tbody tr{height:44px}
}

/* Split view (wide screens): the detail panel docks beside the list instead of covering it */
@media (min-width:1280px){
 :root.v6-split #scrim{opacity:0!important;pointer-events:none!important}
 :root.v6-split .drawer.on{top:var(--vx-top)!important;bottom:0!important;height:auto!important;width:var(--v6-splitw)!important;max-width:none;border-radius:0!important;box-shadow:-1px 0 0 var(--vx-line)!important;border-left:1px solid var(--vx-line)}
 :root.v6-split .main{padding-right:calc(var(--v6-splitw) + 28px)}
 :root{--v6-splitw:min(460px,34vw)}
}

/* Command palette: groups, icons, recent, keyboard hints */
.cmdk{background:var(--v6-scrim)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cmdkbox{border-radius:var(--v6-r3)!important;box-shadow:0 24px 64px -12px rgba(0,0,0,.35)!important;border:1px solid var(--vx-line)!important;background:var(--vx-surface)!important;overflow:hidden}
.cmdkin{padding:14px 16px!important;border-bottom:1px solid var(--vx-line)}
.cmdkin input{font-size:16px!important}
.palg{font:650 11px/1 var(--v6-font)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-ink-3)!important;padding:14px 16px 6px!important}
.palrow{border-radius:var(--v6-r1);margin:0 8px;min-height:44px}
.palrow.on{background:var(--vx-accent-soft)!important}
.palic{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--vx-surface-2);color:var(--vx-ink-2);flex:none}
.palic svg{width:16px;height:16px}
.cmdkfoot{font:500 11.5px/1.4 var(--v6-font)!important;color:var(--vx-ink-3)!important;padding:10px 16px!important;border-top:1px solid var(--vx-line);background:var(--vx-surface-2)}
.v6-palkbd{margin-left:auto;font:500 10.5px/1 var(--v6-mono);color:var(--vx-ink-3);border:1px solid var(--vx-line);border-radius:5px;padding:3px 5px}

/* Drawer (desktop / tablet side panel) */
.drawer{background:var(--vx-surface);border-color:var(--vx-line);box-shadow:-24px 0 48px -16px rgba(16,24,40,.22)}
#scrim{background:var(--v6-scrim)!important;transition:opacity var(--v6-t2) var(--v6-ease)}
.drawer{transition:transform var(--v6-t3) var(--v6-ease),visibility 0s var(--v6-t3)!important}
.drawer.on{transition:transform var(--v6-t3) var(--v6-ease),visibility 0s!important}

/* ================================ 5. v6 sheet component (filters, pickers, account, notes) ================================ */
#v6scrim{position:fixed;inset:0;z-index:70;background:var(--v6-scrim);opacity:0;pointer-events:none;transition:opacity var(--v6-t2) var(--v6-ease)}
#v6scrim.on{opacity:1;pointer-events:auto}
#v6sheet{position:fixed;z-index:71;left:50%;bottom:0;width:min(560px,100%);max-height:92dvh;display:flex;flex-direction:column;background:var(--vx-surface);color:var(--vx-ink);
 border-radius:var(--v6-r3) var(--v6-r3) 0 0;box-shadow:var(--v6-sh3);transform:translate(-50%,104%);visibility:hidden;
 transition:transform var(--v6-t3) var(--v6-ease),visibility 0s var(--v6-t3);padding-bottom:env(safe-area-inset-bottom)}
#v6sheet.on{transform:translate(-50%,0);visibility:visible;transition:transform var(--v6-t3) var(--v6-ease),visibility 0s}
#v6sheet.drag{transition:none}
@media (min-width:768px){#v6sheet{bottom:auto;top:50%;border-radius:var(--v6-r3);transform:translate(-50%,-46%) scale(.98);opacity:0;transition:transform var(--v6-t2) var(--v6-ease),opacity var(--v6-t2),visibility 0s var(--v6-t2);max-height:80vh}
 #v6sheet.on{transform:translate(-50%,-50%);opacity:1;transition:transform var(--v6-t2) var(--v6-ease),opacity var(--v6-t2),visibility 0s}
 #v6sheet .v6-handle{display:none}}
.v6-handle{flex:none;display:grid;place-items:center;height:22px;cursor:grab;touch-action:none}
.v6-handle::before{content:'';width:40px;height:5px;border-radius:5px;background:var(--vx-line-strong)}
.v6-sh-head{flex:none;display:flex;align-items:center;gap:10px;padding:4px 20px 12px;touch-action:none}
.v6-sh-head h2{flex:1;margin:0;font:650 17px/1.3 var(--v6-font);letter-spacing:-.2px}
.v6-sh-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--vx-surface-2);color:var(--vx-ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.v6-sh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.v6-sh-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 16px;scrollbar-width:none}
.v6-sh-body::-webkit-scrollbar{display:none}
.v6-sh-foot{flex:none;display:flex;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--vx-line);background:var(--vx-surface)}
.v6-sh-foot .btn{flex:1;min-height:48px;font-size:15px}
.v6-field{display:block;margin:0 0 14px}
.v6-field>span{display:block;font:600 12.5px/1.3 var(--v6-font);color:var(--vx-ink-2);margin-bottom:6px}
.v6-field select,.v6-field input,.v6-field textarea{width:100%;min-height:48px;font-size:16px;padding:10px 12px;border:1px solid var(--vx-line-strong);border-radius:var(--v6-r1);background:var(--vx-surface);color:var(--vx-ink)}
.v6-field textarea{min-height:96px;resize:vertical}
.v6-opts{display:grid;gap:6px;margin:0 0 8px}
.v6-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:1px solid var(--vx-line);border-radius:var(--v6-r2);background:var(--vx-surface);color:var(--vx-ink);font:550 15px/1.3 var(--v6-font);text-align:left;cursor:pointer}
.v6-opt small{display:block;font:450 12.5px/1.3 var(--v6-font);color:var(--vx-ink-3);margin-top:2px}
.v6-opt>span{flex:1;min-width:0}
.v6-opt.on{border-color:var(--vx-accent);background:var(--vx-accent-soft)}
.v6-opt.on::after{content:'';width:18px;height:18px;flex:none;background:var(--vx-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.v6-opt .v6-oic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--vx-surface-2);color:var(--vx-ink-2);flex:none}
.v6-opt .v6-oic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v6-sh-sec{font:650 11.5px/1 var(--v6-font);letter-spacing:.06em;text-transform:uppercase;color:var(--vx-ink-3);margin:18px 0 8px}
.v6-acct-id{display:flex;align-items:center;gap:12px;padding:4px 0 8px}
.v6-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--vx-accent-soft);color:var(--vx-accent);font:650 15px/1 var(--v6-font);flex:none}
.v6-acct-id b{display:block;font-size:15px}.v6-acct-id small{color:var(--vx-ink-3);font-size:12.5px}

/* filters: one button + a row of removable chips (phone) */
.v6-frow{display:none}
.v6-fchip{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:36px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--vx-accent-soft);color:var(--vx-accent);font:600 12.5px/1.2 var(--v6-font);border:0;white-space:nowrap}
.v6-fchip button{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0}
.v6-fchip button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* swipe actions tray */
.v6-swipe-tray{position:fixed;z-index:40;display:flex;gap:6px;align-items:stretch;padding:6px;pointer-events:auto;animation:v6Fade var(--v6-t1) var(--v6-ease)}
.v6-swipe-tray button{min-width:84px;min-height:44px;border:0;border-radius:var(--v6-r1);font:650 13px/1.2 var(--v6-font);color:#fff;background:var(--vx-accent);padding:8px 10px;cursor:pointer}
.v6-swipe-tray button.attn{background:#9a6c0f}.v6-swipe-tray button.ok{background:#1d7152}.v6-swipe-tray button.neutral{background:#4b5867}
.v6-swiping{transition:none!important}
.v6-swipe-back{transition:transform var(--v6-t2) var(--v6-ease)!important}
@keyframes v6Fade{from{opacity:0}to{opacity:1}}

/* ================================ 6. More sheet (full screen, phone) ================================ */
#v6more{position:fixed;inset:0;z-index:72;background:var(--vx-bg);display:flex;flex-direction:column;transform:translateY(100%);visibility:hidden;
 transition:transform var(--v6-t3) var(--v6-ease),visibility 0s var(--v6-t3)}
#v6more.on{transform:none;visibility:visible;transition:transform var(--v6-t3) var(--v6-ease),visibility 0s}
.v6-more-top{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--v6-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--v6-glass-line)}
.v6-more-top h2{flex:1;margin:0;font:650 22px/1.2 var(--v6-font);letter-spacing:-.4px}
.v6-more-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px calc(var(--v6-tabbar) + 28px + env(safe-area-inset-bottom));scrollbar-width:none}
.v6-more-body::-webkit-scrollbar{display:none}
.v6-more-search{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border-radius:var(--v6-r2);border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink-3);font:500 15px/1 var(--v6-font);cursor:pointer;box-shadow:var(--v6-sh1)}
.v6-more-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.v6-more-h{font:650 12px/1 var(--v6-font);letter-spacing:.07em;text-transform:uppercase;color:var(--vx-ink-3);margin:22px 4px 10px}
.v6-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.v6-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:96px;padding:14px 12px 12px;border-radius:var(--v6-r2);border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink);
 font:600 13px/1.25 var(--v6-font);text-align:left;cursor:pointer;box-shadow:var(--v6-sh1);transition:transform 90ms,box-shadow var(--v6-t1)}
.v6-tile:active{transform:scale(.97)}
.v6-tile .v6-tic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--vx-accent-soft);color:var(--vx-accent)}
.v6-tile .v6-tic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v6-tile .v6-tbadge{position:absolute;top:10px;right:10px}
.v6-tile.on{border-color:var(--vx-accent)}
.v6-recent{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.v6-recent::-webkit-scrollbar{display:none}
.v6-recent button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink);font:600 13px/1 var(--v6-font);cursor:pointer}
.v6-recent button span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--vx-surface-2);color:var(--vx-ink-2)}
.v6-recent svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v6-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--v6-prob);color:#fff;font:700 11px/1 var(--v6-font);font-variant-numeric:tabular-nums}
:root[data-theme=night] .v6-badge{color:#1b0f0d}

/* ================================ 7. Phone ================================ */
@media (max-width:767px),(max-height:520px) and (orientation:landscape) and (max-width:1023px){
 :root{--vx-top:56px;--v5-tab:var(--v6-tabbar)}
 /* app bar: store title (sheet), date chip (sheet), search, bell, account */
 .top{padding:0 6px 0 max(8px,env(safe-area-inset-left))!important;gap:2px!important}
 .top>#ttl,.top #themeBtn,.top #signOutBtn,.top .v5-fresh{display:none!important}
 .v6-store{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:48px;padding:4px 8px;border:0;background:none;color:var(--vx-ink);border-radius:var(--v6-r1);cursor:pointer;text-align:left}
 .v6-store b{display:flex;align-items:center;gap:4px;max-width:100%;font:650 15.5px/1.2 var(--v6-font);letter-spacing:-.2px;white-space:nowrap;overflow:hidden}
 .v6-store b span{overflow:hidden;text-overflow:ellipsis}
 .v6-store b svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
 .v6-store small{font:500 12px/1.2 var(--v6-font);color:var(--vx-ink-3);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--v6-t1)}
 .v6-date{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:0;background:var(--vx-surface-2);color:var(--vx-ink-2);font:600 12.5px/1 var(--v6-font);cursor:pointer;margin:0 2px;position:relative}
 .v6-date::before{content:'';position:absolute;inset:-4px 0}
 .v6-date i{width:7px;height:7px;border-radius:50%;background:var(--v6-ok)}.v6-date.past i{background:var(--v6-info)}
 .top .v6-ib,.top #alBtn{width:44px!important;height:44px!important;min-width:44px;border:0!important;background:none!important;border-radius:50%!important;color:var(--vx-ink-2)}
 .top #alBtn svg{width:21px!important;height:21px!important}.top .v6-ib svg{width:21px;height:21px}
 .top #alBtn .badge{top:6px;right:6px}
 .v6-acct .v6-av{width:30px;height:30px;font-size:12px}
 /* page header collapses into the app bar on scroll */
 :root.v6-scrolled .v6-store small{opacity:1}
 /* sticky segmented control under the app bar */
 .screen>.v5-views,.screen .tabs{position:sticky;top:calc(var(--vx-top) + 6px);z-index:15;width:100%;margin-bottom:14px;background:var(--v6-glass)!important;-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
 .screen>.v5-views>button,.screen .tabs>button{flex:1 0 auto!important;min-height:44px!important;font-size:13.5px!important}
 .v5-seg{width:100%}.v5-seg>button{flex:1 0 auto!important;min-height:44px!important;text-align:center!important}
 .v5-views>button,.tabs>button,.v5x-vtabs>button{min-height:44px!important}
 .v5x-aqbar .v5-seg{display:flex!important;grid-template-columns:none}
 /* bottom tab bar: 5 items, icon + label, accent pill behind the active icon */
 .mobtabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;height:auto;min-height:var(--v6-tabbar);padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))!important;
  background:var(--v6-glass)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-top:1px solid var(--v6-glass-line)!important;box-shadow:0 -1px 0 rgba(0,0,0,.02)}
 .mobtabs button{position:relative;display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:3px!important;min-height:56px!important;min-width:44px;padding:4px 2px!important;border:0;background:none!important;color:var(--vx-ink-3)!important;font:600 11.5px/1.1 var(--v6-font)!important;border-radius:0!important;-webkit-tap-highlight-color:transparent}
 .mobtabs .v6-tabic{position:relative;display:grid;place-items:center;width:56px;height:30px;border-radius:999px;transition:background-color var(--v6-t2) var(--v6-ease)}
 .mobtabs .v6-tabic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--v6-t2) var(--v6-ease)}
 .mobtabs button.on{color:var(--vx-accent)!important;font-weight:700!important}
 .mobtabs button.on .v6-tabic{background:var(--vx-accent-soft)}
 .mobtabs button.on .v6-tabic svg{fill:currentColor;fill-opacity:.16;stroke-width:1.9}
 .mobtabs button:active .v6-tabic svg{transform:scale(.9)}
 .mobtabs .v6-badge{position:absolute;top:-3px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:10.5px;padding:0 5px;box-shadow:0 0 0 2px var(--vx-surface)}
 .mobtabs .v6-tabl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .main{padding:12px 0 calc(var(--v6-tabbar) + 24px + env(safe-area-inset-bottom))!important}   /* v6.1c: the page gutter is the screen's 16 px only (main + screen gave 32 px) */
 .toast{bottom:calc(var(--v6-tabbar) + 18px + env(safe-area-inset-bottom))!important}
 /* type + touch */
 body{font-size:14px}
 .screen input:not([type=checkbox]):not([type=radio]):not([type=range]),.screen select,.screen textarea,.drawer input:not([type=checkbox]):not([type=radio]):not([type=range]),.drawer select,.drawer textarea,.cmdkin input{font-size:16px!important}
 .screen button,.screen select,.screen input:not([type=checkbox]):not([type=radio]):not([type=range]),.screen summary,.drawer button,.drawer select,.drawer summary,.cmdk button{min-height:44px}
 .screen .chip,.screen .v5x-chip,.screen .v5x-hr,.screen .v5x-minibtn,.screen .v5x-namebtn,.screen .lnk,.drawer:not(.pc) .lnk,.drawer.v6ph .lnk,.drawer.v6ph .pcLink{min-height:44px;display:inline-flex;align-items:center}
 .screen .btn,.screen .btn.sm,.drawer .btn.sm,.screen .wpl .btn{min-height:44px!important}
 .screen label.search,.screen label.search input{min-height:44px!important}
 #s-movement .mh-mapctl button,#s-movement .mh-float button{min-height:44px!important;min-width:44px}
 .screen tbody td:before,.k-sub,.md-note,small{font-size:12px!important}
 .v5-head h1,.head h1{font-size:22px!important}
 .md-panel{padding:16px;border-radius:var(--v6-r2)}
 /* filters -> one button + chip row; the controls themselves live in a sheet */
 .v6-fh,.v6-pdate{display:none!important}
 .v6-frow{display:flex;align-items:center;gap:8px;margin:0 0 12px;min-width:0}
 .v6-fbtn{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--vx-line-strong);background:var(--vx-surface);color:var(--vx-ink);font:650 13.5px/1 var(--v6-font);cursor:pointer;position:relative}
 .v6-fbtn::before{content:'';position:absolute;inset:-3px 0}
 .v6-fbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
 .v6-fbtn.on{background:var(--vx-ink);color:var(--vx-surface);border-color:var(--vx-ink)}
 .v6-fchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
 .v6-fchips::-webkit-scrollbar{display:none}
 /* KPI rows: 2-column grid (every card stays tappable) */
 .v5-kgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .kpis,.glance{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 .k{min-height:116px}.k-num{font-size:28px!important}
 /* tables -> cards: primary line photo + name + pill, then time · area · camera; status trailing */
 .screen tbody tr{border-radius:var(--v6-r2)!important;box-shadow:var(--v6-sh1);border-color:var(--vx-line)!important;padding:14px 14px 12px!important;gap:10px 14px!important;position:relative;touch-action:pan-y;will-change:transform}
 .screen tbody tr.click,.screen tbody tr[data-person],.screen tbody tr[tabindex]{padding-right:34px!important}
 .screen tbody tr.click::after,.screen tbody tr[data-person]::after{content:'';position:absolute;right:12px;top:22px;width:9px;height:9px;border-right:2px solid var(--vx-ink-3);border-top:2px solid var(--vx-ink-3);transform:rotate(45deg);opacity:.6}
 .screen tbody td:first-child{font-size:14.5px;font-weight:600}
 .screen tbody td:first-child .who{display:flex;align-items:center;gap:10px}
 .screen tbody td:before{font:500 12px/1.3 var(--v6-font)!important;color:var(--vx-ink-3)}
 /* charts: full width; labels never overlap */
 .v5-hb-x span{font-size:12px}
 .v6-tip{position:fixed;z-index:60;pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--vx-ink);color:var(--vx-surface);font:650 12.5px/1.2 var(--v6-font);transform:translate(-50%,-120%);white-space:nowrap;animation:v6Fade var(--v6-t1)}
 .v5-hb.v6-hit i{opacity:1!important;filter:brightness(1.1)}
 /* search: the palette goes full screen */
 .cmdk{padding:0!important;align-items:stretch!important}
 .cmdkbox{width:100%!important;max-height:none!important;height:100dvh;border-radius:0!important;border:0!important}
 .cmdkin{padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important;min-height:60px}
 .cmdklist{flex:1;overflow-y:auto}
 .palacts .btn{min-height:40px}
 /* side drawer list (old More) never used on phone */
 .sheetnav{display:none}
}
/* phone portrait only: drawers as bottom sheets, person card full screen, live feed */
@media (max-width:767px){
 /* drawers -> bottom sheets: handle, snap 55% / 92%, swipe down to close, sticky primary action */
 .drawer{border-radius:var(--v6-r3) var(--v6-r3) 0 0!important;box-shadow:var(--v6-sh3)!important;max-height:92dvh!important;padding-top:26px!important;overscroll-behavior:contain;transition:transform var(--v6-t3) var(--v6-ease),height var(--v6-t3) var(--v6-ease),visibility 0s var(--v6-t3)!important}
 .drawer.on{transition:transform var(--v6-t3) var(--v6-ease),height var(--v6-t3) var(--v6-ease),visibility 0s!important}
 .drawer.v6-half{height:55dvh!important}
 .drawer.v6-full{height:92dvh!important}
 .drawer.v6-drag{transition:none!important}
 .v6-dhandle{position:sticky;top:-26px;z-index:6;display:grid;place-items:center;height:26px;margin:-26px -16px 0;cursor:grab;touch-action:none;background:var(--vx-surface)}
 .v6-dhandle::before{content:'';width:40px;height:5px;border-radius:5px;background:var(--vx-line-strong)}
 .drawer>.x[data-close]{top:10px!important;z-index:7}
 .drawer .v5x-case-acts{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:5;margin:12px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--vx-surface);border-top:1px solid var(--vx-line);display:flex;gap:10px}
 .drawer .v5x-case-acts .btn{flex:1;min-height:48px;font-size:15px}
 /* person card: a full-screen sheet with a sticky photo / name header that shrinks on scroll */
 #drawer.pc{height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding-top:0!important}
 #drawer.pc .v6-dhandle{display:none}
 #drawer.pc .pcHead{position:sticky;top:0;z-index:6;background:var(--vx-surface);transition:padding var(--v6-t2) var(--v6-ease)}
 #drawer.pc.v6-shrunk .pcHead{padding-top:8px;padding-bottom:8px;box-shadow:0 1px 0 var(--vx-line)}
 #drawer.pc.v6-shrunk .pcHead img,#drawer.pc.v6-shrunk .pcHead .pcIni{transition:width var(--v6-t2),height var(--v6-t2)}
 /* live view: a vertical feed of 16:9 tiles */
 #s-liveview .camgrid{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
 #s-liveview .cam{aspect-ratio:16/9;height:auto!important;border-radius:var(--v6-r2) var(--v6-r2) 0 0}
 .cfs-btn{min-width:48px;min-height:48px}
}
/* landscape phone: same app bar; bottom tabs in a row */
@media (max-height:520px) and (orientation:landscape) and (max-width:1023px){
 .mobtabs .v6-tabic{width:40px;height:26px}
 .mobtabs button{flex-direction:row!important;gap:6px!important;min-height:44px!important}
}
@media (max-width:360px){.v6-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.v6-date span{display:none}}

/* ================================ 8. Motion preference ================================ */
@media (prefers-reduced-motion:reduce){
 .screen.on,.v6-stagger>*{animation:none!important}
 #v6sheet,#v6more,.drawer,#v6scrim,.v6-ind{transition:none!important}
}

/* ================================ v6.1 final polish ================================ */
:root{--v61-gutter:28px;--v61-card-pad:20px;--v61-card-gap:16px;--v6-split-w:460px;--v6-ease:cubic-bezier(.22,.8,.3,1)}
@media(max-width:1023px){:root{--v61-gutter:24px}}
@media(max-width:767px){:root{--v61-gutter:16px;--v61-card-pad:16px;--v61-card-gap:12px}}
.screen.on{padding-left:var(--v61-gutter);padding-right:var(--v61-gutter);min-width:0}
.screen.on .v5-cols,.screen.on .v5-stack,.screen.on .v5-split,.screen.on .stats2,.screen.on .md-grid{min-width:0;align-items:stretch}
.screen.on .md-panel,.screen.on .v5-card,.screen.on .kpi5,.screen.on .glcard,.screen.on .v5x-case{min-width:0;border-radius:14px}
.screen.on .md-panel{padding:var(--v61-card-pad)}
.screen.on .v5-cols>*{min-width:0}
.screen.on .stats2>*{height:100%;align-self:stretch}
.screen.on .stats2>*,.screen.on .v5-kpis>*,.screen.on .ov-top>*{display:flex;flex-direction:column;min-height:120px}
.screen.on .stats2>*>:last-child,.screen.on .v5-kpis>*>:last-child{margin-top:auto}
.screen.on .kpi5 .lbl,.screen.on .glcard .lbl,.screen.on .stats2 span{line-height:1.4;max-height:2.8em;overflow:hidden}
.screen.on .kpi5 b,.screen.on .glcard b,.screen.on .stats2 b{font-variant-numeric:tabular-nums}
.screen.on .pagehead,.screen.on .md-page-head,.screen.on .v5-head{align-items:center;gap:12px}
.top :is(select,input,button,.chip,.btn){min-height:36px;box-sizing:border-box}
.top .scopebar,.top .topright,.top .topacts{align-items:center;gap:8px}
.top #viewAsSel{background:var(--vx-surface)!important;color:var(--vx-ink)!important;box-shadow:none!important;border:1px solid var(--vx-line)!important}
.top #viewAsSel:focus{outline:2px solid var(--vx-accent);outline-offset:2px}
.v6-appbar{gap:8px;align-items:center}
.v6-appbar button,.v6-appbar .v6-date{min-height:44px;min-width:44px}
@media (max-width:767px),(max-height:520px) and (orientation:landscape) and (max-width:1023px){.mobtabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:max(8px,env(safe-area-inset-bottom));gap:0}}   /* v6.1c: phone only - it showed under the desktop side menu */
.mobtabs button{min-width:0;align-items:center;justify-content:center;gap:3px}
.mobtabs button .v6-tabic{margin-inline:auto;position:relative}
.mobtabs button .v6-tbadge{right:-3px;top:-4px;border:2px solid var(--vx-surface);font-variant-numeric:tabular-nums}
.v6-tiles{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.v6-tile{display:flex;flex-direction:column;min-height:98px;height:100%;position:relative;padding:12px;gap:8px;text-align:left;align-items:flex-start;justify-content:flex-start}
.v6-tile .v6-tic{width:40px;height:40px;display:grid;place-items:center;border-radius:12px}
.v6-tbadge{position:absolute;right:10px;top:10px}
.v6i{stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none;vector-effect:non-scaling-stroke}
.v6i-16{width:16px;height:16px}.v6i-20{width:20px;height:20px}.v6i-24{width:24px;height:24px}
.v6-segmented{display:flex;align-items:stretch;gap:0;padding:3px!important;background:var(--vx-surface-2)!important;border:1px solid var(--vx-line)!important;border-radius:12px!important;position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;min-height:42px}
.v6-segmented::-webkit-scrollbar,.v6-underline::-webkit-scrollbar{display:none}
.v6-segmented>button{z-index:1;flex:1 0 auto;min-height:36px;border:0!important;border-radius:9px!important;background:transparent!important;white-space:nowrap;text-align:center;line-height:1.3;font-weight:500;position:relative}
.v6-segmented>.v6-ind{position:absolute;z-index:0;left:0;top:3px;height:calc(100% - 6px);border-radius:9px;background:var(--vx-surface);box-shadow:0 1px 4px rgba(12,30,45,.13);transition:width .22s var(--v6-ease),transform .22s var(--v6-ease);pointer-events:none}
.v6-segmented>button.on,.v6-segmented>button[aria-selected=true]{color:var(--vx-ink)!important;font-weight:600}
.v6-underline{display:flex;position:relative;gap:4px;border-bottom:1px solid var(--vx-line);border-radius:0!important;background:transparent!important;padding:0!important;min-height:44px;overflow-x:auto;scrollbar-width:none}
.v6-underline>button{z-index:1;min-height:44px;white-space:nowrap;flex:0 0 auto;padding:0 16px!important;border:none!important;background:none!important;font-weight:500;color:var(--vx-ink-2);border-radius:0!important}
.v6-underline>button.on,.v6-underline>button[aria-selected=true]{font-weight:600;color:var(--vx-ink)!important}
.v6-underline>.v6-ind{pointer-events:none;position:absolute;left:0;bottom:0;height:2px!important;top:auto!important;border-radius:2px;background:var(--vx-accent);transition:transform .22s var(--v6-ease),width .22s var(--v6-ease)}
.v6-noanim{transition:none!important}
.v6-segmented>button:focus-visible,.v6-underline>button:focus-visible{outline:2px solid var(--vx-accent);outline-offset:-3px}
[data-theme=night] .v6-segmented{background:var(--vx-surface-2)!important}[data-theme=night] .v6-segmented>.v6-ind{background:var(--vx-surface);box-shadow:0 1px 5px rgba(0,0,0,.45)}
.v61-close{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:50%!important;display:inline-flex;align-items:center;justify-content:center;padding:0!important}
.v61-close:focus-visible{outline:2px solid var(--vx-accent);outline-offset:2px}
button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--vx-accent);outline-offset:2px}
.screen.on .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box}
.screen.on .btn.sm{min-height:32px}.screen.on .btn:not(.sm){min-height:36px}
.screen.on .chip,.screen.on .tag,.screen.on .pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;line-height:1.3}
.screen.on table th,.screen.on table td{box-sizing:border-box;vertical-align:middle}
.screen.on table td:has(.mono),.screen.on table td.num{font-variant-numeric:tabular-nums}
.screen.on table th[aria-sort]:after{margin-inline-start:6px}
.screen.on .twrap,.screen.on .tablewrap{overflow-x:auto;max-width:100%;position:relative;isolation:isolate}
.screen.on .v6-stick thead th{position:sticky;top:0;z-index:4;background:var(--vx-surface);background-clip:padding-box}
.screen.on .v6-wide{overscroll-behavior-x:contain}
.v6-chart-tip{position:fixed;z-index:15000;max-width:200px;background:var(--vx-ink);color:var(--vx-surface);font-size:13px;line-height:1.4;border-radius:9px;box-shadow:0 4px 18px rgba(0,0,0,.22);padding:8px 12px;pointer-events:none}
.v6-row-open{position:relative;z-index:5}.v6-swipe-tray{display:flex;align-items:stretch;gap:0;overflow:hidden;border-radius:0 12px 12px 0;background:var(--vx-surface-2)}
.v6-swipe-tray button{flex:1;min-width:0;min-height:100%;padding:0 6px;border:0;border-left:1px solid var(--vx-line);font-size:12px;color:var(--vx-ink)}
.v6-swipe-tray button.ok{background:var(--vx-ok-bg,var(--vx-surface-2))}
.v61-swipe-hint{font-size:12px;color:var(--vx-ink-2);border:1px solid var(--vx-line);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--vx-surface-2)}
.v6-split #drawer{width:var(--v6-split-w)!important;max-width:50vw!important;min-width:380px!important}
#v6SplitGrip{position:fixed;right:calc(var(--v6-split-w) - 6px);top:65px;bottom:0;width:12px;cursor:col-resize;z-index:9998;touch-action:none}
#v6SplitGrip:before{content:'';position:absolute;left:5px;top:0;bottom:0;border-left:1px solid var(--vx-line)}
#v6SplitGrip:hover:before,#v6SplitGrip.on:before{border-left:3px solid var(--vx-accent)}
#v6SplitGrip:focus-visible{outline:2px solid var(--vx-accent)}
.v6-row-selected{outline:2px solid var(--vx-accent)!important;outline-offset:-2px;background:var(--vx-surface-2)!important}
.screen.on .md-empty[data-kind]{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.screen.on .md-empty[data-kind]:before{content:'◇';display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--vx-line);border-radius:16px;color:var(--vx-ink-2);font-size:28px;line-height:1}
.screen.on .md-empty[data-kind=quiet]:before{content:'✓'} .screen.on .md-empty[data-kind=error]:before{content:'!'} .screen.on .md-empty[data-kind=setup]:before{content:'⚙'} .screen.on .md-empty[data-kind=closed]:before{content:'◷'} .screen.on .md-empty[data-kind=locked]:before{content:'×'}
.v6-fsheet .v6-field{min-width:0}.v6-fsheet input[type=time]{min-width:0}
/* Unified image slots: no face or evidence is substituted for absent event evidence. */
.face-photo img,.dthumb img,.pc-photo img{object-fit:contain!important;background:var(--vx-surface-2)}
#s-liveview .cam .hd-toggle,#s-liveview .cam [data-quality],#s-liveview .cam .cam-quality{border-radius:999px!important;min-height:24px!important;min-width:32px!important;max-height:28px!important;padding:3px 9px!important;background:rgba(15,23,42,.75)!important;color:#fff!important}
@media(max-width:767px){
 .screen.on{padding-left:16px;padding-right:16px}
 .screen.on .md-panel{padding:16px}
 .screen.on button:not(.v6-ind),.screen.on .btn,.mobtabs button,#v6more button,#v6sheet button{min-height:44px}
 .v61-close{width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important}
 .v6-segmented>button{min-height:44px}.v6-segmented{min-height:50px}
 .v6-underline{position:sticky;top:var(--v6-appbar-h,58px);z-index:18;backdrop-filter:blur(12px);background:var(--vx-surface)!important}
 .v6-underline>button{min-height:44px}
 .v6-segmented,.v6-underline{mask-image:linear-gradient(to right,#000 0%,#000 94%,transparent 100%)}
 .v6-appbar .v6-date{white-space:nowrap}
 #s-overview .v6-hchip{max-height:32px;min-height:32px!important;padding:4px 10px!important;font-size:11px!important;white-space:nowrap}
 .v6-split #drawer{width:100%!important;min-width:0!important;max-width:100%!important}
 .screen.on input,.screen.on select,#v6sheet input,#v6sheet select{font-size:16px}
 .screen.on .v5-card,.screen.on .md-panel{max-width:100%}
 .screen.on .v5-hbars,.screen.on .v5-chart{min-width:0;overflow-x:auto}
 .screen.on .v5-hbars .tick{font-size:12px}
}
[data-theme=night] .v6-chart-tip{background:var(--vx-surface-2);color:var(--vx-ink);border:1px solid var(--vx-line)}
@media(prefers-reduced-motion:reduce){.v6-ind,.v6-swipe-tray,.v6-chart-tip,.v61-swipe-hint{animation:none!important;transition:none!important}}

/* ===== v6.1a fixes ===== */
/* swipe tray: overlay flush with the row's right edge; equal-height actions */
.v6-swipe-tray{z-index:40;display:flex;align-items:stretch;gap:0;padding:0;overflow:hidden;background:var(--vx-surface-2);border:1px solid var(--vx-line);border-left:0;box-shadow:var(--v6-sh1)}
.v6-swipe-tray button{flex:1 1 0;min-width:0;min-height:44px;height:100%;margin:0;border:0;border-left:1px solid var(--vx-line);border-radius:0;padding:0 8px;font:650 13px/1.2 var(--v6-font);color:#fff;cursor:pointer}
.v6-swipe-tray button:first-child{border-left:0}
.v6-swipe-tray button.attn{background:#8a5f0d}.v6-swipe-tray button.ok{background:#1b6a4c}.v6-swipe-tray button.neutral{background:#4b5867}.v6-swipe-tray button:not(.attn):not(.ok):not(.neutral){background:var(--vx-accent)}
:root[data-theme=night] .v6-swipe-tray button{color:#0d1417}
:root[data-theme=night] .v6-swipe-tray button.attn{background:#e9c275}:root[data-theme=night] .v6-swipe-tray button.ok{background:#6fd0a8}:root[data-theme=night] .v6-swipe-tray button.neutral{background:#a4b1b6}
/* icon strokes tuned per size so 16 / 20 / 24 px read with the same weight */
svg.v6i-16{stroke-width:2}svg.v6i-20{stroke-width:1.75}svg.v6i-24{stroke-width:1.6}
.k-ic svg.v6i,.palic svg.v6i{width:16px!important;height:16px!important;stroke-width:2}
/* Detection log view switch: phones only (desktop keeps its own select) */
.v61-dlseg{display:none!important}
@media (max-width:767px),(max-height:520px) and (orientation:landscape) and (max-width:1023px){.v61-dlseg{display:flex!important;width:100%;margin:0 0 12px}.v61-dlseg>button{flex:1 1 0!important}}
/* chart hold tooltip */
.v6-chart-tip{position:fixed;z-index:80;pointer-events:none;padding:7px 11px;border-radius:9px;background:var(--vx-ink);color:var(--vx-surface);font:650 12.5px/1.25 var(--v6-font);white-space:nowrap;box-shadow:var(--v6-sh2);animation:v6Fade var(--v6-t1) var(--v6-ease)}
.v5-hb{-webkit-touch-callout:none;user-select:none}
.v5-hb.v6-hit i{opacity:1!important;filter:brightness(1.12)}
/* Live tile: HD / SD as a small pill on the LIVE badge's line (hit area stays 44 px) */
#s-liveview .cam .lvq,.cam .lvq{position:absolute;right:8px!important;bottom:6.5px!important;top:auto!important;left:auto!important;height:22px!important;min-height:22px!important;min-width:0!important;width:auto!important;padding:0 9px!important;
 border-radius:999px!important;border:1px solid rgba(255,255,255,.28)!important;background:rgba(10,14,18,.62)!important;color:#fff!important;font:700 11px/20px var(--v6-font)!important;letter-spacing:.04em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none!important}
.cam .lvq::before{content:'';position:absolute;inset:-11px -8px}
.cam .lvq[aria-pressed=true],.cam .lvq.on{background:var(--vx-accent)!important;border-color:transparent!important}
:root{--v6-splitw:var(--v6-split-w)}
/* sideways-scrolling rows fade at the edge that has more */
.v6-fr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.v6-fl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.v6-fl.v6-fr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
/* phone app bar: every control a full 44 px target; the compact hero chip keeps an invisible 44 px hit area */
@media (max-width:767px),(max-height:520px) and (orientation:landscape) and (max-width:1023px){
 .top .v6-store{min-height:48px!important}
 .top .v6-date{min-height:44px!important;padding:0 12px!important}
 .top .v6-date::before{content:none}
}
.v6-hchip{position:relative}.v6-hchip::after{content:'';position:absolute;left:-2px;right:-2px;top:-6px;bottom:-6px}
/* Detection log row buttons look like every other small button (no mono, same border and radius) */
.screen .v5x-minibtn{font:600 12.5px/1.2 var(--v6-font)!important;border:1px solid var(--vx-line-strong)!important;border-radius:var(--v6-r1)!important;background:var(--vx-surface)!important;color:var(--vx-ink)!important;padding:0 12px!important;letter-spacing:0!important}
.screen .v5x-minibtn:hover{background:var(--vx-surface-2)!important}
/* ===== v6.1b (owner 26-10: "popups per person are not uniform, cards also not uniform") =====
   Two card families only:
   1. Page card = the Today card (.k): white surface, 1px line, 14px radius, 16px padding, label on top
      (12.5 / 600), number 32 / 650, note 12 px, a 3 px inset bar only for a STATE (late, error, warning).
      .kpi (Visits, CRM) and .gl (Attendance) now follow it.
   2. Tile inside a card or a popup = the person-card tile (.pcKpi): grey surface, 1px soft line, label on top
      in small capitals, value 18 / 600. .stats2 (every popup) and .md-mini (Counters, Today) now follow it. */
.kpi,.gl{position:relative;padding:16px 16px 14px;border:1px solid var(--vx-line);border-radius:var(--vx-r-lg);background:var(--vx-surface);min-height:112px}
.kpi .l,.gl .l{font-size:12.5px;font-weight:600;color:var(--vx-ink-2);line-height:1.3;margin:0}
.kpi .v,.gl .v{font-size:32px;font-weight:650;letter-spacing:-.8px;line-height:1.1;margin-top:12px}
.kpi .d,.gl .s{font-size:12px;color:var(--vx-ink-3);margin-top:6px;line-height:1.45}
.gl .txt{display:flex;flex-direction:column}.gl .txt .l{order:-1}
.kpi.acc,.kpi.ok,.kpi.high,.kpi.crit{border-left:1px solid var(--vx-line)}
.kpi.ok::before,.kpi.high::before,.kpi.crit::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0}
.kpi.ok::before{background:var(--st-good)}.kpi.high::before{background:#d7a847}.kpi.crit::before{background:var(--st-bad)}
.stats2{gap:8px}
.stats2>div,.md-mini>div{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;min-width:0;padding:10px 12px 11px;
 border:1px solid color-mix(in srgb,var(--vx-line) 70%,transparent);border-radius:var(--vx-r-lg);background:var(--vx-surface-2)}
.stats2>div::before,.md-mini>div::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:var(--vx-r);background:var(--vx-line-strong)}
.stats2 b,.md-mini b{display:block;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--vx-ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}   /* values wrap, never cut */
.stats2 span,.md-mini span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ev-muted,var(--vx-ink-3));line-height:1.3}
/* Visits by hour: tall enough to read the bars, same accent as the Today chart */
/* number on top, bar in the middle, hour underneath - like the Today chart */
.v5x-hr{height:96px;justify-content:space-between;padding:5px 0 4px}
.v5x-hr b{order:-1;font-size:12px;font-weight:650}
.v5x-hr i{bottom:22px;height:calc((100% - 48px) * var(--h) / 100);opacity:.55}.v5x-hr.on i{opacity:.9}
.v5x-hr span{font-size:11px;color:var(--vx-ink-3);font-variant-numeric:tabular-nums}
@media (max-width:700px){
 .kpi,.gl{min-height:104px;padding:13px 13px 12px;border-radius:12px}.kpi .v,.gl .v{font-size:27px;margin-top:9px}.kpi .l,.gl .l{font-size:12px}
 .stats2 b,.md-mini b{font-size:16px;white-space:normal;overflow-wrap:anywhere}
}
/* One person popup: visits, staff and customers without a face use the person card's header, actions and body
   (V6PH in v6-boot.js), so every person opens in the same frame. */
#drawer.v6ph .pcHead .pcIni{font-size:26px}
/* one close button in every popup: round, outlined, top right in the header tools */
#drawer.v6ph .pcTools .x{position:static}
#drawer .v61-close{border:1px solid var(--vx-line)!important;background:var(--vx-surface)!important;color:var(--vx-ink-2)!important;box-shadow:none!important}
#drawer .v61-close:hover{background:var(--vx-surface-2)!important;color:var(--vx-ink)!important}
/* popup tiles: two columns, like the person card tiles */
#drawer:not(.pc) .stats2,#drawer.v6ph .stats2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the person card's own header buttons (more, close) get the same round outline (its header is re-rendered inside the drawer) */
#drawer.v6ph .pcTools .pcIcon,#drawer.v6ph .pcTools [data-close]{width:36px!important;height:36px!important;min-width:36px!important;border-radius:50%!important;border:1px solid var(--vx-line)!important;background:var(--vx-surface)!important;color:var(--vx-ink-2)!important;display:inline-grid!important;place-items:center;padding:0!important;box-shadow:none!important}
#drawer.v6ph .pcTools .pcIcon:hover,#drawer.v6ph .pcTools [data-close]:hover{background:var(--vx-surface-2)!important;color:var(--vx-ink)!important}
.stats2 b.mono{font-family:inherit}
@media (max-width:700px){#drawer.v6ph .pcTools .pcIcon,#drawer.v6ph .pcTools [data-close]{width:44px!important;height:44px!important;min-width:44px!important}}
/* ===== v6.1c: one backdrop for every popup (owner 26-10: "the background change is not uniform") =====
   Side panel (#scrim), sheets and More (#v6scrim), search (.cmdk), face registration (.enr-modal) and the picture
   viewer (.evr-scrim) all dim the page the same way: one colour per theme, the same light blur, the same fade.
   The camera full screen stays black on purpose (it is a viewer, not a popup). */
:root{--v6-backdrop-blur:blur(3px)}
#scrim,#v6scrim,.cmdk,.enr-modal{background:var(--v6-scrim)!important;-webkit-backdrop-filter:var(--v6-backdrop-blur)!important;backdrop-filter:var(--v6-backdrop-blur)!important}

/* company mark (owner 26-10): the PeopleSense AI app icon from peoplesenseai.com replaces the eye symbol */
.brand .mark.mark-logo{background:none!important;padding:0;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.brand .mark.mark-logo img{width:100%;height:100%;display:block;object-fit:cover}
/* ===== v6.1c side menu as a clean tree (owner 26-10: "side tree is not proper") =====
   Group heads all look the same (icon 20, label 600, chevron); the group holding the open page is always shown
   and its head takes the ink colour, not a heavier weight. Pages hang off one thin guide line under the group icon;
   the open page is a soft accent pill with its marker ON the guide line (no stray bar inside the pill).
   No hover shift. The collapsed icon rail keeps its own layout. */
:root:not(.v5-sidemin) .nav .v5-navhead{min-height:36px;padding:8px 10px;gap:12px;font-weight:600;font-size:13.5px;color:var(--vx-ink-2);margin:6px 0 0}
:root:not(.v5-sidemin) .nav .v5-navgrp:first-child>.v5-navhead{margin-top:0}
:root:not(.v5-sidemin) .nav .v5-navgrp.has-on>.v5-navhead{color:var(--vx-ink);font-weight:600}
:root:not(.v5-sidemin) .nav .v5-navgrp.has-on>.v5-navhead .v5-navgi{color:var(--vx-accent)}
.nav .v5-navgrp.has-on>.v5-navitems{display:block}
.nav .v5-navgrp.has-on>.v5-navhead .v5-chev{transform:rotate(90deg)}
.nav button:hover{transform:none!important}
:root:not(.v5-sidemin) .nav .v5-navitems{margin:2px 0 4px 19px;padding:0 0 0 10px;border-left:1.5px solid var(--vx-line-strong,#cfd8dc)}
:root:not(.v5-sidemin) .nav .v5-navitems .v5-navitem{position:relative;min-height:34px;margin:1px 0;padding:7px 10px!important;font-size:13px;font-weight:500;color:var(--vx-ink-2);border-radius:8px}
:root:not(.v5-sidemin) .nav .v5-navitems .v5-navitem:hover{background:var(--vx-surface-2);color:var(--vx-ink)}
:root:not(.v5-sidemin) .nav .v5-navitems .v5-navitem.on{background:var(--vx-accent-soft)!important;color:var(--vx-accent)!important;font-weight:600}
:root:not(.v5-sidemin) .nav .v5-navitems .v5-navitem.on::before{left:-11px!important;top:7px!important;bottom:7px!important;width:2px!important;border-radius:2px!important;background:var(--vx-accent)!important}
:root.v5-sidemin .nav .v5-navitems .v5-navitem.on::before{display:none}
/* every other popup (to-do, alerts, camera, add employee, lists) gets the same frame as the person card:
   same 520 px panel, same 20 px inset, the title in the person-card name style, close button top right on the title line */
#drawer:not(.pc){padding:20px 20px 24px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--vx-accent) 5%,transparent),transparent 160px),var(--vx-surface)}
#drawer:not(.pc)>h2:first-of-type,#drawer:not(.pc) .v5x-case>h2:first-child{font-size:20px!important;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:2px 0 6px;padding-right:56px}
#drawer:not(.pc)>.x{top:16px!important;right:16px!important}
/* recorder playback player (v6/v6-playback.js): the same backdrop and frame as every other popup, above the picture viewer */
.v6pb{position:fixed;inset:0;z-index:10100;display:none;align-items:center;justify-content:center;padding:20px}
.v6pb.on{display:flex}
.v6pb-scrim{position:absolute;inset:0;background:var(--v6-scrim);-webkit-backdrop-filter:var(--v6-backdrop-blur);backdrop-filter:var(--v6-backdrop-blur)}
.v6pb-box{position:relative;width:min(880px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:var(--vx-surface);border:1px solid var(--vx-line);border-radius:var(--vx-r-lg,14px);
 box-shadow:0 20px 60px rgba(5,20,18,.18);padding:20px;display:flex;flex-direction:column;gap:12px}
.v6pb-head{display:flex;align-items:flex-start;gap:12px}.v6pb-head>div{flex:1;min-width:0}
.v6pb-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.v6pb-sub{margin-top:4px;font-size:13px;color:var(--vx-ink-2);font-variant-numeric:tabular-nums}
.v6pb-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--vx-line);background:var(--vx-surface);color:var(--vx-ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.v6pb-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.v6pb-seg{align-self:flex-start}
.v6pb-stage{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.v6pb-stage video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.v6pb-msg{position:absolute;inset:auto 12px 12px 12px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.62);color:#fff;font-size:13px;text-align:center}
.v6pb-msg[hidden]{display:none}.v6pb-msg[data-kind=none]{inset:0;display:grid;place-items:center;background:var(--vx-surface-2);color:var(--vx-ink-2);font-size:15px;border-radius:0}
.v6pb-note{margin:0;font-size:12px;color:var(--vx-ink-3)}
@media (max-width:700px){.v6pb{padding:0;align-items:stretch}.v6pb-box{width:100%;max-height:none;border-radius:0;padding:16px}.v6pb-x{width:44px;height:44px}}
/* ===== v6.1c one control scale (owner 26-10: "tabs and options are not of uniform sizes ... drop downs and everything") =====
   Scan of every page found buttons at 30/31/32/35/37 px, dropdowns from 19 to 40 px, inputs 22-46 px, chips 26/32,
   segmented controls 29/36. Desktop now uses two sizes only (phones keep the 44 px touch size set above):
     regular 36 px - buttons, dropdowns, text / date / time inputs           radius 10, 13 px
     small   32 px - .btn.sm, row action menus, filter chips (pill)          radius 10 / pill, 12.5 px
     segmented     - one 40 px track with 32 px options, radius 10 / 8      (Map/List, Focus/Quad/Wall, Table/Cards, ...)
   Section tabs (underline) keep their own 44 px row; cards, toggles and the live HD/SD pill are not controls. */
@media (min-width:701px){
 :is(.screen,#drawer:not(.pc),#drawer.v6ph,.top,.v5x-ddbar) :is(.btn,select,input:is([type=text],[type=search],[type=date],[type=time],[type=number],[type=email],[type=tel],:not([type]))){
   box-sizing:border-box;height:36px;min-height:36px;font-size:13px;line-height:1.2;border-radius:10px}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph,.top) .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;font-weight:600}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph,.top) select{padding:0 30px 0 12px}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph,.top) input:is([type=text],[type=search],[type=date],[type=time],[type=number],[type=email],[type=tel],:not([type])){padding:0 12px}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph) :is(.btn.sm,select.rowact){height:32px;min-height:32px;font-size:12.5px;padding-left:12px;padding-right:12px}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph) select.rowact{padding-right:28px}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph) :is(.chip,.fchip,.v5x-chip):is(button,a,[role=button]),:is(.screen,#drawer:not(.pc),#drawer.v6ph) .fchip{
   box-sizing:border-box;height:32px;min-height:32px;padding:0 12px;border-radius:999px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph) :is(.seg,.v5-seg,.v5-views.v6-segmented){box-sizing:border-box;min-height:40px;padding:4px;gap:2px;border-radius:10px;display:inline-flex;align-items:center}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph) :is(.seg,.v5-seg,.v5-views.v6-segmented)>button{box-sizing:border-box;height:32px;min-height:32px;padding:0 14px;border-radius:8px!important;font-size:13px;font-weight:500;line-height:1}
 :is(.screen,#drawer:not(.pc),#drawer.v6ph) :is(.seg,.v5-seg,.v5-views.v6-segmented)>button.on,:is(.screen,#drawer:not(.pc),#drawer.v6ph) :is(.seg,.v5-seg,.v5-views.v6-segmented)>button[aria-checked=true]{font-weight:600}
 #s-ask input[placeholder^="Ask"]{height:46px;font-size:15px}   /* the question box stays the large hero field */
}
/* side menu: the Collapse / Expand control stays visible at the bottom (it scrolled out of sight in the icon rail);
   the logo also expands a collapsed menu */
#sideFoot{position:sticky;bottom:0;z-index:2;background:var(--vx-surface);padding-top:6px;margin-top:auto;border-top:1px solid var(--vx-line)}
:root.v5-sidemin .side .brand .mark{cursor:pointer}

/* phone map: the map panel is the card itself (no extra inset); one 16 px page gutter on phones */
@media (max-width:767px){
 .md-map-wrap.md-v6{padding:0!important;border-radius:var(--vx-r-lg,14px);overflow:hidden}
}
/* phones: every tappable row on Today reaches 44 px (audit: "Busiest hour" 20 px, health chip 32 px, camera card 41 px) */
@media (max-width:767px){
 #s-overview .v5-find>div[role=button],#s-overview [data-v5x-tdd][role=button]{min-height:44px;display:flex;align-items:center}
 #s-overview .v6-hchip{min-height:44px}
 #s-overview .k,#s-overview .v5-floor{min-height:44px}
}
/* phones: every dropdown, text / date input and checkbox row is a 44 px touch target (audit: filters 36 px, setup
   checkboxes 13-20 px); the checkbox itself stays small, its whole label row takes the tap */
@media (max-width:767px){
 .screen :is(select,input:is([type=text],[type=search],[type=date],[type=time],[type=number],:not([type]))){min-height:44px;font-size:16px}
 .screen label:has(>input[type=checkbox]),.screen label:has(>input[type=radio]){min-height:44px;display:flex;align-items:center;gap:10px}
 .screen input[type=checkbox],.screen input[type=radio]{width:20px;height:20px;flex:none}
}
/* Ask a question: each answer (.qa) shares its class with the 28 px quick-action buttons, so answers were squeezed to
   28 px and piled on top of each other (owner screenshot 26-10). Answers are full-width blocks again. */
.ask .qa{display:block;width:auto;height:auto;border:0;border-radius:0;background:none;cursor:auto;place-items:initial;margin-bottom:16px}
.ask .qa:hover{background:none;color:inherit}
/* one-line rows on phones (rowsOneLine in v6-app.js) */
@media (max-width:767px){
 .screen .v6-row1{flex-wrap:nowrap!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
 .screen .v6-row1::-webkit-scrollbar{display:none}
 .screen .v6-row1>*{flex:none!important;white-space:nowrap;scroll-snap-align:start}
 /* search boxes: one box, the icon inside it (the input drew its own box inside the label's box) */
 .screen label.search{min-height:44px;align-items:center}
 .screen label.search input{border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;flex:1;padding:0 8px;outline:0}
 /* row actions side by side: one size (Edit was taller than More) */
 .screen :is(td,.row,.v5-card,[data-md-label]) :is(.btn.sm,select.rowact,.btn){min-height:44px;height:44px;font-size:14px;line-height:1;padding-top:0;padding-bottom:0;border-radius:10px}
}
/* live tile full screen button (all widths) */
.lvtile .v6-fsbtn{position:absolute;right:8px;top:8px;z-index:3;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.35);background:rgba(10,20,19,.55);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lvtile .v6-fsbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (pointer:coarse){.lvtile .v6-fsbtn{width:44px;height:44px}}
/* ===== v6.1c compact phone cards (owner 26-10: "waste of space, present in compact form ... once expanded full details
   should be shown ... make sure similar issues are not left out"). Applies to EVERY table that turns into cards on a
   phone, not one page:
   - the selected / opened row highlights the CARD (thin accent ring), never each field as grey boxes;
   - tighter card (12 px), small labels inline with their value, two fields per line;
   - long chip lists (areas, cameras, routes) sit inline and show the first 4 + "+N more" (compactChips in v6-app.js);
     opening the row shows everything in the popup. */
@media (max-width:767px){
 .screen tbody tr{gap:6px 12px!important;padding:12px!important;margin-bottom:8px!important}
 .screen tbody tr>td,.screen tbody tr.v5x-sel>td,.screen tbody tr.v6-row-selected>td{background:none!important}
 .screen tbody tr.v5x-sel,.screen tbody tr.v6-row-selected{outline:0!important;box-shadow:inset 0 0 0 2px var(--vx-accent)!important;background:var(--vx-surface)!important}
 .screen tbody td:before{font-size:11px!important;margin-bottom:1px!important;text-transform:none}
 .screen tbody td:first-child{padding-bottom:6px!important}
 .screen tbody td:has(.zchips,.v6-chiprow){grid-column:1/-1}
 .screen tbody .zchips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
 .screen tbody .zchips .chip{min-height:24px!important;height:24px;padding:0 8px!important;font-size:12px!important;border-radius:999px}
 .screen tbody .zchips .v6-more{font-size:12px;color:var(--vx-ink-3);padding:0 4px}
 .screen tbody .zchips>*:not(.chip):not(.v6-more){font-size:11px;color:var(--vx-ink-3)}
}
/* ===== v6.1c compact (owner 26-10: "alerts and maps ... bigger waste of space for icons"):
   - empty / quiet messages: a small 20 px icon beside one line of text, no 64 px illustration (all widths);
   - phone page head: title and its actions on one line, description one line, drill chip without its own box,
     filters / segmented rows close together. Content starts ~200 px higher on Alerts. */
.md-empty{padding:12px 14px 12px 44px!important;text-align:left!important;min-height:0}
.md-empty::before{left:14px!important;top:12px!important;width:20px!important;height:20px!important;transform:none!important;opacity:.7!important;
 -webkit-mask-size:contain!important;mask-size:contain!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-position:center!important;mask-position:center!important}
.md-empty b{display:inline;margin:0 6px 0 0}
.v5x-zero-box{padding:10px 12px!important}
@media (max-width:767px){
 /* the title never shrinks below its one-line width; when title + actions don't fit, the actions wrap below
    (with min-width:0 the People actions squeezed "Who is here" to one letter per line) */
 .screen>.head{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-start;gap:8px;margin-bottom:8px!important}
 .screen>.head>div:first-child{flex:1;min-width:auto}
 .screen>.head h1{font-size:20px!important;margin:0!important;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
 .screen>.head p{margin:2px 0 0!important;font-size:12.5px!important;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
 .screen>.head>div:last-child:not(:first-child){flex:none;display:flex;gap:6px}
 .screen>.head>div:last-child:not(:first-child) .btn{padding:0 12px!important;font-size:13px!important}
 .screen>.v5x-ddbar{padding:0!important;margin:0 0 6px!important;background:none!important;border:0!important;box-shadow:none!important}
 .screen>.v5x-ddbar .v5x-chip{min-height:36px!important}
 .screen>.v6-frow{margin:0 0 6px!important}
 .screen>.v5x-aqbar,.screen>.v5-views{margin-bottom:8px!important}
 .screen .md-panel,.screen .card{padding:12px!important}
}
/* full scan 26-10 (desktop + phone, every page) */
@media (max-width:767px){
 /* Detection log card: the long camera name widened the status column, so the person's name ran under IN / OUT.
    Area and Camera take the full width; the status column holds only the IN / OUT word. */
 .screen #dlTable tbody td:nth-child(8),.screen #dlTable tbody td:nth-child(9){grid-column:2/-1!important}
 .screen #dlTable tbody td:first-child{min-width:0;overflow:hidden}
 /* tappable cards (the row opens the full person / visit popup): the key fields only - name line + 4 fields + actions */
 .screen tbody tr.click:not(#dlTable tr)>td:nth-child(n+6):not(:last-child){display:none!important}
 .screen tbody tr.click:not(#dlTable tr)>td:last-child:not(:has(button,select,a)):nth-child(n+6){display:none!important}
 /* removable drill chips: 44 px touch, compact padding */
 .screen .v5x-chip{min-height:44px!important}
}
/* desktop: Ask question chips on the 32 px scale; the Ask button as tall as its 46 px question box; player buttons one size */
#s-ask .chips button{min-height:32px;height:32px;padding:0 12px;border-radius:999px}
#s-ask .askbox .btn{height:46px!important;min-height:46px!important}
.mh-transport button{height:40px!important;min-height:40px!important;width:auto}
/* full scan 26-10, second pass */
.mh-transport{display:flex!important;flex-wrap:nowrap!important;align-items:center}
.mh-transport button,.mh-transport button.mh-play{height:40px!important;min-height:40px!important;width:40px!important;min-width:40px!important;padding:0!important}
.mh-floors button{height:36px!important;min-height:36px!important}
.mh-mapctl button{height:32px!important;min-height:32px!important}
@media (max-width:767px){
 .mh-floors button,.mh-mapctl button,.mh-transport button,.mh-transport button.mh-play{height:44px!important;min-height:44px!important}
 .mh-transport button,.mh-transport button.mh-play{width:44px!important;min-width:44px!important}
 /* Detection log card: every field after the photo flows in the wide column (zone ran over area / on site) */
 .screen #dlTable tbody td:nth-child(n+6){grid-column:2/-1!important;grid-row:auto!important}
 /* drill chips and Ask question chips: 44 px touch */
 .screen>.v5x-ddbar .v5x-chip,.screen .v5x-chip,#s-ask .chips button{min-height:44px!important;height:auto!important}
 /* Store setup: the small note under a heading / beside a button sits on its own line (it ran over them) */
 #s-config span.muted.sm{display:block;margin-top:2px}
}
/* desktop: the Visits filter row (area / camera / how it ended / came back) stays on one line; each select shares the width */
@media (min-width:768px){.v5x-fsel{flex-wrap:nowrap!important}.v5x-fsel>*{flex:1 1 0;min-width:0}.v5x-fsel>button{flex:none}}
/* phone cards, tighter (scan: ~290 px): tappable cards keep the name line + 3 fields + actions; the Detection log card
   drops the Type badge (the name line already says it) and Area / on site (both in the popup) */
@media (max-width:767px){
 .screen tbody tr.click:not(#dlTable tr)>td:nth-child(n+5):not(:last-child){display:none!important}
 .screen #dlTable tbody td:nth-child(2),.screen #dlTable tbody td:nth-child(8){display:none!important}
}

/* company mark in the phone top bar (owner 26-10: 'company logo still not changed' - phone had none) */
.v6-phmark{display:none}
body.v5-mob .top .v6-phmark,body.v5-land .top .v6-phmark{display:block;flex:none;width:28px;height:28px;border-radius:8px;margin-left:12px}

/* phones: every tab, segment and filter stays on screen - rows wrap, no sideways-hidden choices (owner 26-10: 'so many tabs hidden') */
@media (max-width:767px){
 .v5-views,.v5x-vtabs,.v5-seg,.tabs,.screen .seg,.screen .chips,.screen .floorbar{flex-wrap:wrap!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
 .v5-views>button,.v5x-vtabs>button,.v5-seg>button,.tabs>button{flex:1 1 auto!important}
}
.v6-wrapped>button.on{background:var(--vx-surface)!important;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.tabs.v6-wrapped>button.on{background:none!important;box-shadow:inset 0 -2px 0 var(--vx-accent)}
.v6-dlf{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.v6-dlf .chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--vx-line);border-radius:999px;background:var(--vx-surface);color:var(--vx-ink-2);font:500 14px/1 var(--v6-font);cursor:pointer}
.v6-dlf .chip.on{border-color:var(--vx-accent);color:var(--vx-accent)}

/* desktop person card = side panel beside a usable list (owner 26-10, as the live consoles had): no dark overlay, the
   list stays clickable (another row switches the card), the open row is marked. Phones keep the full-screen card. */
@media (min-width:1024px){
 :root:has(#drawer.on.pc) #scrim{opacity:0!important;pointer-events:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 #drawer.pc{box-shadow:-12px 0 32px rgba(0,0,0,.22)}
}
.v6-open-row>td,.v6-open-row{background:color-mix(in srgb,var(--vx-accent) 12%,transparent)!important}
/* QA 27-10 (owner: map / option cards with empty spaces, cards not uniform). Layout only; no wording or design change.
   - option tiles (Settings -> Store settings) and the Features / Roles grids: every card in a row is the same height;
   - phone: a lone last summary card fills its row instead of leaving an empty half row;
   - phone Movement: the 3D / 2D / View buttons sit below the floor tabs instead of covering First Floor / Utility Zone. */
.v5x-links{grid-auto-rows:1fr}
.v5x-fgrid,.v5x-roles{align-items:stretch}
@media (max-width:480px){
 .kpis>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:767px){
 #s-movement .mh-map>.mh-mapctl{top:66px}
}

/* every device size (owner 27-10: "make sure the page size all aligned with the user devices") */
/* tablets and wider: segments, view switches and chip rows wrap instead of pushing a choice past the edge */
@media (min-width:768px){
 .v5-views,.v5x-vtabs,.v5-seg,.screen .seg,.screen .chips,.screen .floorbar{flex-wrap:wrap!important}
 /* Detection log table: the Type tag and the photo always fit their column (fixed table layout) */
 #dlTable thead th:nth-child(2){width:108px}
 #dlTable thead th:nth-child(5){width:66px}
}
/* values wrap onto another line instead of ending in '...': Detection log cells, Movement Tracker people rows */
#dlTable tbody td,#dlTable tbody td b{text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere}
.mh-app .mh-prow .mh-prow-id b,.mh-app .mh-prow .mh-prow-id span{text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
/* hour chart: the ':00' part of each hour label is left out where the chart is narrow (phones, tablets) */
@media (max-width:520px),(min-width:768px) and (max-width:1199px){.v5-hb-x span small{display:none}}
/* touch: small controls keep their look but get a 44 px wide target */
@media (max-width:767px),(pointer:coarse){
 .screen .lvcount,.screen .qa,.screen .v5-views>button,.screen .seg>button{min-width:44px}
 .wpl .colf{position:relative}.wpl .colf::after{content:'';position:absolute;inset:-13px -13px}
}
/* touch tablets (OnePlus Pad class) in the wide layout: the same 44 px targets as on phones */
@media (pointer:coarse) and (min-width:768px){
 .screen button,.screen select,.screen input:not([type=checkbox]):not([type=radio]):not([type=range]),.screen summary,.drawer button,.drawer select,.drawer summary,.cmdk button,.top button{min-height:44px}
 .screen .chip,.screen .v5x-chip,.screen .v5x-hr,.screen .v5x-minibtn,.screen .v5x-namebtn,.screen .lnk{min-height:44px;display:inline-flex;align-items:center}
 .screen .btn,.screen .btn.sm,.drawer .btn.sm,.screen .wpl .btn,.top .btn{min-height:44px!important}
 .screen label.search,.screen label.search input{min-height:44px!important}
 #s-movement .mh-mapctl button,#s-movement .mh-float button,.top .v6-ib{min-height:44px!important;min-width:44px}
}
/* person card and photo viewer on every device: captions and button labels wrap, 44 px touch targets,
   and on a short landscape phone the whole photo fits the screen height */
#drawer .pcShC{white-space:normal!important;text-overflow:clip!important;overflow-wrap:anywhere}
#evViewer .evr-btn{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;text-align:center}
@media (max-width:767px),(pointer:coarse){
 #evViewer .evr-x{width:44px;height:44px}
 #evViewer .evr-btn{min-height:44px}
 #drawer .pcIcon,#drawer.pc .pcIcon{min-width:44px}
 #drawer .pcBtn,#drawer.pc .pcBtn{min-height:44px}
}
@media (max-height:520px) and (orientation:landscape){#evViewer .evr-frame{width:min(100%,calc(100dvh - 140px))}}

/* ---- owner 27-10: tables and logs line up, desktop width used --------------------------------------------------
   One shared rule set for every list / log table: the page uses the full width beside the side menu (paragraphs keep
   a reading length), columns size to their content instead of equal slices, values wrap (never "..."), numbers sit
   right, one thumbnail size (the Detection log's 51x68 face crop, DL_BOX) wherever a photo shows in a row. */
:root{--v5-max:none}
.screen{max-width:none!important}
.screen .head p,.screen p.muted{max-width:80ch}
@media (min-width:768px){
 .screen table{table-layout:auto!important;width:100%}
 .screen table th,.screen table td{white-space:normal;overflow-wrap:break-word;word-break:normal;text-overflow:clip;vertical-align:middle}
 .screen table th{white-space:nowrap}
 .screen table td.n,.screen table th.n{text-align:right;white-space:nowrap}
 .screen table td.mono{white-space:nowrap}
 .screen table td .dthumb,.screen table td .v5x-img{flex:0 0 auto}
}
/* Visits -> All visits (.vtable): time | customer (photo + id) | came in by | time in store | areas | how it ended */
.vtable col.c-time{width:72px}.vtable col.c-who{width:220px}.vtable col.c-cam{width:150px}.vtable col.c-dur{width:96px}.vtable col.c-end{width:150px}
.vt-who{display:flex;align-items:center;gap:10px;min-width:0}
.vt-who>div{min-width:0;overflow-wrap:anywhere}
.vt-areas .vt-more{display:none}
.vt-areas.open .vt-more{display:inline}
.vt-areas .vt-x{padding:0 8px;min-height:24px;margin-left:4px}
.vt-areas.open .vt-x{margin-top:4px}
@media (max-width:767px){.vtable colgroup{display:none}.vt-who{gap:8px}}
/* evidence tile with the recording playing in place (owner 10-11, Loss prevention) */
.v6pb-tile{position:relative;width:200px;max-width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#1d2329;display:block}
.v6pb-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v6pb-tl,.v6pb-tr{position:absolute;top:6px;font-size:11px;font-weight:600;line-height:1;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.6);color:#fff;z-index:1}
.v6pb-tl{left:6px}.v6pb-tr{right:6px}
.v6pb-tl:empty{display:none}
.v6pb-tplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.72);color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-left:3px}
.v6pb-tplay:hover{background:rgba(0,0,0,.88)}
.v6pb-tile.v6pb-inl-on video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain}
.v6pb-tile .v6pb-msg{position:absolute;left:6px;right:6px;bottom:6px;font-size:11px;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.65);color:#fff;z-index:1}
.v6pb-tile .v6pb-msg[hidden]{display:none}
.v6pb-inl-x{position:absolute;top:4px;right:4px;z-index:2;width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.v6pb-inl-j{position:absolute;left:4px;top:4px;z-index:2;display:flex;gap:4px}.v6pb-inl-j button{height:24px;padding:0 8px;border-radius:12px;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:12px;font-weight:600;cursor:pointer}