html{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,select,textarea{font-size:16px}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
img,video{-webkit-user-drag:none;-webkit-touch-callout:none}
@font-face{font-family:"RR UI";src:url("/fonts/DMSans-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"RR UI";src:url("/fonts/DMSans-600.ttf") format("truetype");font-weight:600 900;font-display:swap}
@font-face{font-family:"RR Mono";src:url("/fonts/JetBrainsMono-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"RR Mono";src:url("/fonts/JetBrainsMono-700.ttf") format("truetype");font-weight:700;font-display:swap}
/* Phosphor hardware: authoritative shared tokens and control primitives. */
:is(#rr,.family-app,body):not([data-mode="light"]){
--canvas:#0E1311;--panel:#151C18;--raised:linear-gradient(180deg,#25302A,#1D2722);--pressed:#0A0E0C;--track:#131A16;
--text-hi:#EAF2EC;--text-mid:#A2B6A9;--text-lo:#7F9587;--border:rgba(190,223,202,.12);--brand:#75C69B;--brandInk:#0B2416;
--brandFill:linear-gradient(180deg,#84D3A8,#66B58C);--activity:#E0A23C;--people:#B98BFF;--handle:rgba(234,242,236,.35);
--lift:inset 0 1px 0 rgba(255,255,255,.07),0 3px 8px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.4);--lift-outer:0 3px 8px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.4);
--key:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.7),0 3px 9px rgba(0,0,0,.52);
--brandKey:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 rgba(0,0,0,.55),0 5px 14px rgba(117,198,155,.27);
--inset:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.05);
--sheet:inset 0 1px 0 rgba(255,255,255,.09),0 -1px 0 rgba(0,0,0,.5),0 -3px 9px rgba(0,0,0,.4);--ring:0 0 0 2px var(--brand),0 0 18px rgba(117,198,155,.35);--tabEdge:rgba(255,255,255,.12);
}
:is(#rr,.family-app,body)[data-mode="light"],:is(#rr,body):has(.family-app[data-mode="light"]){
--canvas:#EEF2EC;--panel:#FFFFFF;--raised:linear-gradient(180deg,#FFFFFF,#F2F6F0);--pressed:#E2E8E0;--track:#FFFFFF;
--text-hi:#17231C;--text-mid:#4E6457;--text-lo:#6B7F72;--border:rgba(18,40,26,.12);--brand:#176B43;--brandInk:#FFFFFF;
--brandFill:linear-gradient(180deg,#1E7B50,#155F3C);--activity:#C9831F;--people:#7B4FD6;--handle:rgba(23,35,28,.28);
--lift:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,40,28,.10),0 10px 24px rgba(20,40,28,.08);--lift-outer:0 1px 2px rgba(20,40,28,.10),0 10px 24px rgba(20,40,28,.08);
--key:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgba(20,40,28,.06),0 1px 0 rgba(20,40,28,.15),0 3px 9px rgba(20,40,28,.12);
--brandKey:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.22),0 5px 13px rgba(23,107,67,.27);
--inset:inset 0 2px 4px rgba(20,40,28,.17),inset 0 -1px 0 rgba(255,255,255,.85);
--sheet:inset 0 1px 0 #FFFFFF,0 -1px 0 rgba(20,40,28,.08),0 -3px 9px rgba(20,40,28,.08);--ring:0 0 0 2px var(--brand),0 0 18px rgba(23,107,67,.28);--tabEdge:#FFFFFF;
}
:is(#rr,.family-app,body){--bg:var(--canvas);--panel-2:var(--pressed);--sunk:var(--pressed);--on-brand:var(--brandInk);--brand-soft:color-mix(in srgb,var(--brand) 14%,var(--panel));--brandSoft:var(--brand-soft);--border-hi:var(--border);--r-sm:8px;--r-md:12px;--r-lg:16px;--ui:"RR UI","DM Sans",sans-serif;--mono:"RR Mono","JetBrains Mono",monospace;--glow:none}
:is(#hud,.family-app) button,dialog button{min-height:44px;min-width:44px;border-radius:12px;background:var(--raised);box-shadow:var(--key);color:var(--text-hi);border:1px solid var(--border);font-family:var(--ui);transition:transform 150ms ease-out,box-shadow 150ms ease-out}
:is(#hud,.family-app) :is(button.primary,.primary-button,.fleet-primary-action){height:46px;min-height:46px;border-radius:12px;font:700 15px var(--ui);background:var(--brandFill);box-shadow:var(--brandKey);color:var(--brandInk)}
#hud :is(#exportShowRange,#exportClear,#exportHelpOpen,#exportViewLibrary){border-color:transparent}
:is(#hud,.family-app) button:active,dialog button:active{transform:translateY(1px);box-shadow:var(--inset)}
:is(#hud,.family-app) button:disabled{opacity:.4;cursor:not-allowed}
:is(#hud,.family-app) :is(input,select){border-radius:8px}
:is(#hud,.family-app) :is(button.quiet,.application-global-nav a){background:transparent;box-shadow:none;border-color:transparent;color:var(--brand);font:600 15px var(--ui)}
:is(#hud,.family-app) :is(.rocker,.theme-toggle,.layout-chooser){min-height:44px;background:var(--pressed);box-shadow:var(--inset);border-radius:12px;padding:4px;gap:4px}
:is(#hud,.family-app) :is(.rocker,.theme-toggle,.layout-chooser) button{background:var(--raised);box-shadow:var(--key);border-radius:12px;color:var(--text-hi)}
#hud :is(.iconbtn,.icon-button,#profileBtn){border-radius:50%}
#hud #profileBtn{min-width:44px;min-height:44px}
:is(#hud,.family-app) :is(.card,.fleet-card,.settings-card){border-radius:16px}
dialog{background:var(--panel);color:var(--text-hi);border:1px solid var(--border);border-radius:16px;box-shadow:var(--lift);font-family:var(--ui)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
#hud .rail-card{display:flex;flex-direction:column;min-width:0;padding:0;border:0;border-radius:12px;background:transparent;box-shadow:none;overflow:hidden;position:relative}
#hud .rail-card.main{box-shadow:var(--ring)}
#hud .rail-card .thumb .slot{position:absolute;top:6px;left:6px;right:auto;bottom:auto;width:auto;min-width:24px;height:24px;padding:3px 7px;border-radius:8px;background:#0a0e0ccc;color:#EAF2EC;border:1px solid #ffffff55;box-shadow:var(--key);font:700 12px var(--mono)}
#hud .rail-card.main .thumb .slot{background:var(--brandFill);color:var(--brandInk)}
#hud .rail-card .meta{min-height:0;position:absolute;inset:auto 0 0;padding:16px 9px 7px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;font:600 12px var(--ui);text-align:left}
#hud.export-active #exportPanel{border-radius:24px 24px 0 0;background:var(--panel);box-shadow:var(--sheet);padding:14px;display:flex;flex-direction:column;gap:12px}
#exportPanel::before{content:"";display:block;flex:none;width:34px;height:3px;border-radius:8px;background:var(--text-lo);margin:0 auto 4px}
#hud.export-active #exportPanel .export-heading{display:flex;align-items:flex-start;justify-content:space-between;width:100%}
#hud.export-active #exportTitle{font:600 18px var(--ui)}
#hud.export-active #exportMeta{display:block;text-align:left;font:12px var(--ui);margin-top:5px}
#hud.export-active #exportCancel{width:44px;height:44px;flex:none;border-radius:50%;background:var(--raised);box-shadow:var(--key)}
#hud.export-active #exportRange{background:var(--pressed);box-shadow:var(--inset);border-radius:12px;padding:12px 8px;border:0}
#hud.export-active .export-duration{background:var(--brandSoft);color:var(--brand);border-radius:8px;padding:6px}
#hud.export-active .export-bounds,#hud.export-active .export-actions{display:block;margin:0;width:100%}
#hud.export-active .export-bounds .rocker{display:flex}#hud.export-active .export-bounds .rocker button{flex:1;width:auto;padding:0 8px}
#hud.export-active .export-quiet{display:flex;justify-content:space-between}
#hud.export-active .export-quiet button{width:auto;padding:0 8px}
#hud.export-active #exportConfirm{width:100%}
#hud.export-active .export-footer{display:flex;justify-content:space-between;gap:4px;order:8}
#hud.export-active .export-footer button{padding:0 4px;min-width:0}
#hud #dock .ribbon-shell{padding-left:24px;padding-right:53px;background:var(--track);border-radius:0 14px 14px 14px;box-shadow:none}
#hud #dock .ribbon-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--lift-outer);clip-path:inset(0 -30px -30px);pointer-events:none}
#hud #dock #ribbon{border:0;background:var(--track);border-radius:0}
#hud.timeline-only #dock #ribbon{}
#hud #dock #tlScale{width:auto;margin-left:24px;margin-right:53px;height:44px}
#hud #dock #tlScale span{font:10px var(--mono);top:10px}
#hud #dock #tlScale span::before{height:7px;background:var(--text-mid)}
#hud #dock #tlScale i{position:absolute;top:2px;width:1px;height:4px;background:var(--border)}
#hud #cursor{background:var(--brand);box-shadow:none}
#hud #timelineTag{position:absolute;top:24px;left:50%;transform:translateX(-50%);white-space:nowrap;font:10px var(--mono);line-height:12px;min-height:18px;box-sizing:border-box;color:var(--brand);background:var(--panel);border-radius:8px;padding:3px 6px;z-index:3}
#hud .lane-gutter{position:absolute;left:5px;top:8px;bottom:8px;display:flex;flex-direction:column;justify-content:space-between;color:var(--text-mid);font:12px var(--ui);pointer-events:none}
/* Specific mobile geometry remains in receipt-readability; hardware owns surfaces. */
/* The existing LIVE tab remains pending the round-9 type-size clarification. */
#hud .rail-card .thumb .slot{display:block;text-shadow:none;line-height:16px}
.family-app .account-segment,#hud :is(#layoutSeg,#modeSeg,.layout-menu){display:flex;min-height:44px;padding:4px;gap:4px;background:var(--pressed);box-shadow:var(--inset);border-radius:12px}
.family-app .account-segment button,#hud :is(#layoutSeg,#modeSeg) button{background:none;box-shadow:none;border:0;font-family:var(--ui)}
.family-app .account-segment button[aria-pressed="true"],#hud :is(#layoutSeg,#modeSeg) button.on{background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
.family-app .account-card{border-radius:16px;box-shadow:var(--lift)}
.family-app :is(h1,h2,h3,.wordmark,.fleet-heading h1,.account-card h2){font-family:var(--ui)}
:is(#rr,.family-app,body){--text:var(--text-hi);--motion:var(--activity);--object:var(--people);--txn:var(--brand);--live:var(--brand);--wordmark-spacing:0}
#hud #dock #tlScale span::before{border:0;width:1px}
#hud.export-active .export-bounds button,#hud.export-active .export-actions button{border-color:var(--border)}
#hud.export-active #exportViewLibrary{width:auto;margin-left:auto}
#hud :is(.chip,.filter-chip),.family-app .fleet-filter{border-radius:8px}
#hud :is(#rail,#receipt:not([data-floating="true"]),.calendar),.family-app :is(.settings-card,.auth-card){box-shadow:var(--lift);border-radius:16px}
/* Short phones keep the three lanes but compress them so Reels and the header never collide. */
@media (max-height:700px){#hud #dock #tlScale{height:28px}#hud #dock #tlScale span{top:6px}}
/* Export in the phone rail: compact enough to fit without scrolling on a 375x812 phone. The rail is not
draggable, so no grab bar or Hide timeline strip. */
#hud.export-active #exportPanel::before{display:none}
#hud.export-active #exportPanel{padding:8px 12px;gap:6px;overscroll-behavior:contain}
#hud.export-active #exportPanel .export-copy{order:1}#hud.export-active #exportRange{order:2}#hud.export-active #exportPanel .export-bounds{order:3}#hud.export-active #exportPanel .export-actions{order:4}#hud.export-active #exportPanel .export-footer{order:5}
#hud.export-active #exportRange{padding:6px 10px}
#hud.export-active #exportPanel .export-times strong{font-size:clamp(17px,5vw,22px);line-height:1.2}
#hud.export-active #exportPanel .export-bounds{display:flex;align-items:center;gap:8px}
#hud.export-active #exportPanel .export-bounds .rocker{flex:1;min-width:0}
#hud.export-active #exportPanel .export-quiet{width:auto;padding:0 8px;border:0}
#hud.export-active #exportPanel .export-footer{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:44px}
#hud.export-active #exportPanel .export-footer button{min-height:44px;width:auto;margin:0;border:0;padding:0 4px}
#hud.export-active #exportPanel .export-footer #exportViewLibrary{}
@media (max-width:360px){#hud.export-active #exportPanel .export-footer button{padding:0 2px}}
.hudhost.phone.phone-landscape #hud.export-active #exportRange{grid-column:2;grid-row:1;margin:0}
#hud.export-active #exportPanel{padding:6px 12px;gap:5px}
#hud.export-active #exportPanel>:is(#exportPreviewHost,#exportResult):empty{display:none}
#hud.export-active #exportPanel>:is(#exportPreviewHost,#exportResult){order:6}
#hud.export-active #exportRange{padding:4px 10px;min-height:44px;display:flex;align-items:center}
#hud.export-active #exportPanel .export-times{width:100%}
#hud.export-active #exportPanel .export-times>span{display:flex;align-items:baseline;gap:5px;min-width:0}
#hud.export-active #exportPanel .export-times>span:last-child{flex-direction:row-reverse;justify-content:flex-start}
#hud.export-active #exportPanel .export-times small{display:inline;font-size:10px}
#hud.export-active #exportPanel .export-times strong{font-size:clamp(15px,4.6vw,20px)}
#hud.export-active #exportPanel .export-duration small{display:none}
#hud.export-active #exportPanel .export-duration{padding:4px 8px}
#hud.export-active #exportPanel :is(.export-footer,.export-bounds) button{display:inline-flex;align-items:center;justify-content:center}
#hud.export-active #exportPanel .export-heading>div{flex:1;min-width:0;text-align:left}
#hud.export-active #exportPanel #exportTitle{text-transform:none;letter-spacing:0;font:600 18px var(--ui)}
#hud.export-active #exportPanel>*{align-self:stretch}
/* Round 4: single authoritative definitions for the replaced components. */
#hud #playbackCapsule{justify-self:start;display:flex;align-items:center;flex:none;padding:4px;gap:0;border:0;border-radius:999px;background:var(--pressed);box-shadow:var(--inset)}
#hud #playBtn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:var(--brandFill);box-shadow:var(--brandKey);color:var(--brandInk)}
#hud #playBtn svg{width:16px;height:16px}
#hud.export-active #playBtn,#hud.is-live:not([data-timeline-minimized="true"]) #playBtn{background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
#hud #playBtn:active{transform:translateY(1px);box-shadow:var(--inset)}
#hud #playbackSpeed{appearance:none;min-width:0;width:auto;height:44px;padding:0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text-hi);font:600 var(--form-control-size,13px) var(--mono);opacity:1}
#hud #timeCalendarBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:static;transform:none;flex:none;width:auto;min-width:0;height:54px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#hud #bigClock{font:700 26px/1 var(--mono);color:var(--brand);letter-spacing:0;white-space:nowrap}
#hud #bigDay{display:block;margin:0;padding:0;border:0;background:transparent;box-shadow:none;font:400 10px var(--mono);letter-spacing:.1em;color:var(--text-mid);white-space:nowrap}
#hud :is(#exportDock,#audioBtn,.seek-more summary){display:flex;align-items:center;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-mid)}
#hud #exportDock{color:var(--brand)}
#hud :is(#exportDock,#audioBtn,.seek-more summary) svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#hud .location-switcher{display:flex;align-items:center;gap:6px;height:44px;border:1px solid var(--border);border-radius:12px;background:transparent;box-shadow:none;padding:0 8px}
#hud .location-switcher select{height:42px;min-width:0;max-width:160px;border:0;background:transparent;box-shadow:none;color:var(--text-hi);font:600 16px var(--ui)}
#hud #modeChip{display:flex;align-items:center;flex:none;width:8px;height:8px;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
#hud #modeDot{display:block;width:8px;height:8px;border-radius:50%;background:var(--text-mid);box-shadow:none}
#hud #modeChip.mode-live #modeDot{background:var(--brand)}
#hud #timelineCameraTab{display:flex;align-items:center;gap:6px;position:relative;flex:none;height:44px;min-height:44px;min-width:0;padding:14px 9px 0;border:0;border-radius:14px 14px 0 0;background:var(--track);box-shadow:none;color:var(--text-hi);font:600 13px var(--ui);order:0;margin-right:auto;max-width:calc(50% - 65px);overflow:visible}
#hud #timelineCameraTab::after{content:"";position:absolute;left:100%;bottom:0;width:14px;height:14px;background:radial-gradient(circle at 100% 0,transparent 14px,var(--track) 14px);pointer-events:none}
#hud #timelineCameraTab .camera-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hud #timelineCameraTab::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--brand)}
#hud .camera-tab-chevron{font-size:12px;color:var(--text-mid)}
#hud #goLive{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;position:absolute;top:0;right:0;bottom:0;width:52px;min-height:44px;padding:0;border:0;border-radius:0 14px 14px 0;background:var(--raised);box-shadow:var(--key);color:var(--brand);font:700 12px var(--mono);letter-spacing:.06em}
#hud #goLive::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:1px;background:var(--border)}
#hud .live-cap-label{display:flex;flex-direction:column;align-items:center;gap:6px}
#hud .live-cap-label i{width:7px;height:7px;border-radius:50%;background:currentColor}
#hud #goLive[aria-pressed="true"]{background:var(--brandFill);color:var(--brandInk);box-shadow:var(--brandKey)}
#hud #goLive[aria-pressed="true"] .live-cap-forward{display:none}
#hud #goLive[aria-pressed="true"] .live-cap-label{flex-direction:row;gap:3px}
#hud #goLive[aria-pressed="true"] i{animation:live-cap-pulse 1.6s ease-in-out infinite}
@keyframes live-cap-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#hud #goLive[aria-pressed="true"] i{animation:none}}
#hud #goLiveText{padding:0;background:transparent;color:inherit;font:inherit}
#hud .zoomer{order:1;display:flex;position:absolute;left:50%;bottom:0;transform:translateX(-50%);align-items:center;flex:none;gap:4px;padding:4px;margin-bottom:6px;border:0;border-radius:12px;background:var(--pressed);box-shadow:var(--inset)}
#hud .zoomer button{display:block;min-width:40px;width:40px;min-height:36px;height:36px;padding:0;border:0;border-radius:9px;background:var(--raised);box-shadow:var(--key);color:var(--text-hi);font-size:18px}
#hud .zoomer .zoom-cycle{display:none}
#hud .zoomer .lvl{order:1;padding:0;font:400 12px var(--mono);color:var(--text-mid)}
#hud #zoomOut{order:0}#hud #zoomIn{order:2}
#hud .rail-tabs{display:flex;flex-direction:row;align-items:stretch;gap:6px;padding:6px;min-height:66px;flex:none;position:relative;width:100%;border:0;border-radius:18px;background:var(--pressed);box-shadow:var(--inset)}
#hud .rail-tabs button[data-tab]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0;height:54px;min-height:54px;padding:0;border:0;border-radius:13px;background:transparent;box-shadow:none;color:var(--text-mid);font:600 12px var(--ui);letter-spacing:0}
#hud .rail-tabs button[aria-selected="true"]{background:var(--raised);box-shadow:var(--key);color:var(--brand)}
#hud .rail-tabs svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
#hud .rail-tabs :is(.chev,.evidence-count){display:none}
#hud #mobileCameraSelector{padding:8px 12px;min-height:0;overflow:auto}
#hud #mobileCameraList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:8px;padding:0;overflow:visible}
#hud #mobileCameraList .rail-card{width:100%;height:78px;min-height:78px}
#hud #mobileCameraList .thumb{width:100%;height:78px;position:relative}
#hud #mobileCameraList .thumb canvas{width:100%;height:100%;object-fit:cover}
#hud #cameraRefreshNote{display:flex;justify-content:space-between;gap:10px;background:none;border:0;box-shadow:none;margin:8px 0;font:400 12px var(--ui);color:var(--text-lo)}
#hud #mobileCameraQuery{display:block;width:100%;height:40px;min-height:40px;padding:0 12px;border:0;border-radius:11px;background:var(--pressed);box-shadow:var(--inset);font:400 14px var(--ui);color:var(--text-mid);text-align:left}
#hud :is(#receiptPrev,#receiptNext,#receiptClose){display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-mid)}
#hud :is(#receiptPrev,#receiptNext) svg{width:20px;height:20px}#hud #receiptClose svg{width:18px;height:18px}
#hud #receiptLiveFollow{display:flex;align-items:center;gap:6px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--brand);font:600 12px var(--ui)}
#hud #receiptLiveFollow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
#hud #desktopPanelToggle{display:none}
.hudhost:not(.phone) #hud #desktopPanelToggle{display:block}
#hud[data-deck="true"] .stage{display:block;position:relative;flex:1;min-height:0}
#hud[data-deck="true"] .canvas-area{position:absolute;inset:0 0 auto;height:calc(100vw * 9 / 16);width:100%;margin:0;min-height:0;padding:0;}
#hud[data-deck="true"] #grid{width:100%;height:100%;max-height:none;margin:0}
#hud[data-deck="true"] #grid .cam{height:100%;max-height:none}
#hud[data-deck="true"] #grid .cam :is(video,img){object-fit:contain}
#hud[data-deck="true"] #investigationPanel{position:absolute;inset:0;width:100%;height:100%;max-height:none;display:block;pointer-events:none;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
#hud[data-deck="true"] #phoneDeck{position:absolute;top:calc(100vw * 9 / 16);left:0;right:0;bottom:66px;display:flex;flex-direction:column;pointer-events:auto;background:transparent;overflow:visible;padding-top:0}
#hud #timelineHandle{position:absolute;top:0;left:calc(50% - var(--handle-width,80px)/2);width:var(--handle-width,80px);height:44px;min-height:44px;padding:10px var(--handle-inline,20px) 29px;border:0;border-radius:0;background:transparent;box-shadow:none;touch-action:none;z-index:5}
#hud #timelineHandle span{display:block;width:40px;height:5px;border-radius:999px;background:var(--handle)}
#hud #panelSection{background:var(--panel);border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:var(--sheet);position:relative;height:var(--panel-height);flex:none;min-height:28px;padding-top:12px;transition:height var(--section-motion,150ms) ease-out}
#hud #deckDrawer{height:100%;min-height:0;overflow:auto}
.hudhost.phone #hud:not(.reals) #dock .dock-inner{display:flex;flex-direction:column;padding:0;gap:0}
#hud[data-deck="true"] #dock{position:relative;inset:auto;width:100%;height:var(--timeline-height);min-height:0;flex:none;order:initial;background:var(--panel);padding:var(--timeline-top-padding,28px) 8px 0;transition:height var(--section-motion,150ms) ease-out;margin-top:6px;border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:var(--sheet)}
#hud[data-deck="true"] .rail-tabs{position:absolute;bottom:0;left:0;right:0;pointer-events:auto;z-index:30}
#hud[data-deck="true"] #deckDrawer :is(#rail,#receipt,#exportPanel){position:relative;inset:auto;width:100%;height:var(--receipt-waiting-height,100%);max-height:none;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
#hud[data-deck="true"] #rail .rail-content{display:flex;min-height:0;height:100%}
#hud[data-deck="true"] #railBody{overflow:auto;min-height:0;touch-action:pan-y}
#hud[data-deck="true"] .cursor-header{display:flex;flex-direction:column;position:relative;padding:0;height:auto;min-height:0;gap:0}
#hud[data-deck="true"] #cursorControls{position:static;transform:none;display:flex;flex:none;width:auto;gap:0}
#hud[data-deck="true"] #timelineSecondary{display:flex;gap:0}
#hud[data-deck="true"] :is(#back10,#fwd10){display:none}
.hudhost.phone #hud:not(.reals) :is(.dock-head,.transport,.legend){display:none}
#hud[data-deck="true"] #exportPanel::before{content:none}
#hud.deck-dragging{--section-motion:0s}
#hud [hidden]{display:none}
#hud #receipt .rline{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;height:auto;padding:8px 6px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;font:400 14px var(--ui);gap:8px}
#hud #receipt .rline.on{border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent);color:var(--brand)}
#hud #receipt .rline.on .line-name,#hud .rcard .at-playback-line>span{color:var(--brand)}
#hud #receipt .rline:last-child{border-bottom:0}
#hud #receipt .rtotal{background:transparent;box-shadow:none;border:0;font-weight:600}
#hud :is(button.secondary,.secondary-button){height:46px;min-height:46px;border-radius:12px;font:600 15px var(--ui);background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
#hud :is(button.quiet,.quiet-button){background:transparent;box-shadow:none;font:600 15px var(--ui);color:var(--brand)}
#hud .cursor-header{display:flex;flex-direction:column;position:relative;height:auto;margin:0}
#hud #timelineTabs{display:flex;align-items:flex-end;position:relative;width:100%;height:50px;flex:none}
#hud #timelineControls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:100%;height:60px;gap:0;order:-1}
#hud #cursorControls{position:static;transform:none;display:flex;align-items:center;min-width:0}
#hud #timelineSecondary{display:flex;align-items:center;gap:0;justify-self:end}
#hud #timelineControls :is(#back10,#fwd10){display:none}
#hud #timelineControls .seek-more{width:44px;min-width:44px;height:44px}
#hud .seek-more summary::after{content:none}
#hud #ribbon{height:var(--track-height,112px);position:relative;transition:height var(--section-motion,150ms) ease-out}
#hud #ribbon[data-people="false"]{height:var(--track-height,96px)}
#hud #receipt h4{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:0;margin:0;padding:0;min-height:44px;height:44px}
#hud .receipt-nav{display:flex;align-items:center;justify-content:space-between;grid-column:1;grid-row:1;min-width:0}
#hud .receipt-tools{grid-column:2;grid-row:1;display:flex}
#hud #receipt #rcTitle{display:none}
/* Following live sits at the right end of the TOTAL row; the one-row header has no room for it (E3). */
#hud #receipt .rtotal #receiptLiveFollow{margin-left:auto;min-height:44px}
#hud.export-active #exportConfirm{height:46px;min-height:46px;border-radius:12px;font:700 15px var(--ui);background:var(--brandFill);box-shadow:var(--brandKey);color:var(--brandInk)}
#hud.export-active :is(#exportMarkStart,#exportMarkEnd){height:46px;min-height:46px;border-radius:12px;font:600 15px var(--ui);background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
#hud.export-active #exportClear{background:transparent;box-shadow:none;font:600 15px var(--ui);color:var(--brand)}
.hudhost:not(.phone) #hud .rail-tabs{position:absolute;bottom:0;right:0;width:300px}
#hud.reals .rail-tabs{display:none}
/* Landscape retains the existing full-video canvas, bottom transport and right evidence panel.
It does not use the portrait deck or its rest positions. */
.hudhost.phone.phone-landscape #hud:not(.reals):not(.export-active) .stage{position:absolute;inset:0;display:block}
.hudhost.phone.phone-landscape #hud:not(.reals):not(.export-active) .canvas-area{position:absolute;inset:0;width:100%;height:auto;margin:0}
.hudhost.phone.phone-landscape #hud:not(.reals):not(.export-active) #grid{width:100%;height:100%;max-height:none}
.hudhost.phone.phone-landscape #hud:not(.reals):not(.export-active) #investigationPanel{position:absolute;inset:0;width:100%;height:100%;max-height:none;display:block;background:transparent;border:0;pointer-events:none;backdrop-filter:none}
/* Round 15: landscape is a viewing mode. No camera rail and no receipt or object list; receipts use the floating card. */
.hudhost.phone.phone-landscape #hud:not(.reals):not(.export-active) #rail{display:none}
.hudhost.phone.phone-landscape #hud:not(.reals) .rail-tabs{display:none}
#hud.export-active :is(#exportShowRange,#exportClear,#exportHelpOpen,#exportViewLibrary){background:transparent;box-shadow:none;font:600 15px var(--ui);color:var(--brand);white-space:normal}
/* The timeline canvas always matches its track; without this it keeps its last drawn height. */
#hud #ribbon #tlCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Export footer links are quiet links in one row. */
#hud.export-active #exportPanel .export-footer button{font:600 13px var(--ui);white-space:nowrap;padding:0 4px}
/* Receipt header: ‹ amount › centered, close at the right. */
.hudhost.phone #hud #receipt .receipt-nav{display:flex;flex:1;align-items:center;justify-content:center;gap:4px;padding-left:44px}
.hudhost.phone #hud #receipt #receiptPrev{order:0}.hudhost.phone #hud #receipt #rcAmt{order:1;min-width:88px;text-align:center}.hudhost.phone #hud #receipt #receiptNext{order:2}
/* Short phones (under 700 px tall): compact track and handle, receipt number hidden, so the drawer keeps usable space. */
@media (max-height:700px){
#hud #ribbon{height:var(--track-height,76px)}
#hud[data-deck="true"] #receipt h4{min-height:44px}
}
/* The drawer scrolls; floating "more above/below" hints only covered the header and rows. */
/* Landscape export lives in the narrow side panel. */
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-times strong{font-size:15px}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-times small{display:none}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-footer{flex-wrap:wrap;justify-content:flex-start;column-gap:14px}
/* The desktop timeline toggle never appears on phones. */
.hudhost.phone #desktopPanelToggle{display:none}
/* The landscape side panel starts under the top bar; keep export controls clear of it. */
.hudhost.phone.phone-landscape #hud.export-active #exportPanel{padding-top:52px}
#hud #timelineHandle{display:none}
.hudhost.phone #hud:not(.reals):not([data-landscape="true"]) #timelineHandle{display:block}
#hud #miniScrub{display:none;position:relative;height:44px;min-width:24px;flex:1;touch-action:none}
#miniScrub::before{content:"";position:absolute;left:0;right:0;top:28px;height:8px;border-radius:999px;background:var(--pressed);box-shadow:var(--inset)}
#miniScrub::after{content:"";position:absolute;left:50%;top:22px;width:2px;height:20px;background:var(--brand)}
#miniScrub span{position:absolute;left:calc(50% - 5px);top:26px;width:12px;height:12px;border-radius:50%;background:var(--brand)}
#hud[data-timeline-minimized="true"]{--timeline-top-padding:6px}
#hud[data-timeline-minimized="true"] #dock{height:68px;padding:12px 8px;overflow:visible}
/* Portrait keeps the handle: same 11 px above and 13 px below it as the expanded timeline. */
#hud[data-timeline-minimized="true"]:not([data-view-mode="true"]) #dock{height:84px;padding-top:28px}
#hud[data-timeline-minimized="true"] #timelineControls{display:flex;height:44px;gap:10px}
#hud[data-timeline-minimized="true"] #miniScrub{display:block}
#hud[data-timeline-minimized="true"] :is(#playbackSpeed,#bigDay,#timelineSecondary,#timelineTabs,#timelineCameraTab,.zoomer,.ribbon-shell,#tlScale,#timelineTag,.dock-head,.transport,.legend){display:none}
#hud[data-timeline-minimized="true"] #playbackCapsule{padding:0;background:transparent;box-shadow:none}
#hud[data-timeline-minimized="true"] #timeCalendarBtn{height:44px}
#hud[data-timeline-minimized="true"] #bigClock{font-size:20px;line-height:20px}
/* Tall timeline: the camera section folds away completely (it has no handle to show). */
#hud[data-panel-minimized="true"] #panelSection{min-height:0;padding-top:0;border-width:0;box-shadow:none;overflow:hidden}
#hud[data-panel-minimized="true"] #deckDrawer{visibility:hidden;pointer-events:none}
@media(max-width:900px){:root{--form-control-size:16px}}
@media(prefers-reduced-motion:reduce){#hud :is(#panelSection,#dock,#ribbon){transition:none}}
/* Export in the portrait panel: the Export button and footer links stay pinned; only the range controls scroll. */
#hud[data-deck="true"].export-active #exportPanel .export-actions{position:sticky;bottom:44px;z-index:2;background:var(--panel);padding-top:6px}
#hud[data-deck="true"].export-active #exportPanel .export-footer{position:sticky;bottom:0;z-index:2;background:var(--panel)}
#hud #receipt[data-floating="true"] h4{height:44px;min-height:44px}
#hud #receipt[data-floating="true"] .receipt-nav{padding:0;grid-column:1;grid-row:1}
#hud.reals #receipt .receipt-tools,#hud #receipt[data-floating="true"] #receiptLiveFollow{display:none}
#hud.reals #receipt #rcAmt{font:700 18px var(--mono)}
#hud #receipt[data-floating="true"] #rcLines{flex:1 1 auto;min-height:0;height:auto;max-height:40dvh;overflow:auto}
#hud #receipt[data-floating="true"] #rcLines:has(.rline:not([hidden])){min-height:44px}
#hud.reals #receipt [hidden]{display:none}
#hud #receipt[data-floating="true"] .rtotal{padding:8px 6px;min-height:44px}
#hud #reelsDone{margin-left:auto}
#hud .rr-live-tile-status{position:absolute;right:4px;top:4px;padding:2px 4px;border:0;box-shadow:none;border-radius:5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3;font:400 10px/13px var(--mono);color:var(--text-mid);background:rgba(2,4,3,.72)}
#hud .rr-live-tile-status[data-status="STALE"]{color:var(--motion)}
#hud .rr-live-tile-status[data-status="PLAYING"]{color:var(--brand)}
/* Receipt list: the centered handle occupies the gap between Find and the right-hand pills. */
#evidenceFind{padding:0 12px;flex:none;border-bottom:1px solid var(--border);font:12px var(--ui)}
#evidenceFind[hidden]{display:none}
.evidence-find-heading{display:flex;align-items:center;gap:6px;height:36px;--receipt-pill-padding:6px}
#evidenceFind a,#evidenceFind button,.receipt-list-status button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:30px;height:30px;background:transparent;box-shadow:none;border:1px solid var(--border);border-radius:999px;color:var(--text-mid);padding:0 var(--receipt-pill-padding,12px);font:12px var(--ui);cursor:pointer;text-decoration:none}
#evidenceFind :is(a,button)::after{content:"";position:absolute;inset:-7px 0}
#evidenceFind .ricon{width:16px;height:16px}
#evidenceFind #receiptLiveEntry{color:var(--brand);margin-left:auto}
#receiptLiveEntry::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
#evidenceFind [hidden]{display:none}
#receiptLiveEntry:focus-visible{outline:3px solid var(--text-hi);outline-offset:2px}
@media(max-width:374px){.evidence-find-heading{--receipt-pill-padding:0px;gap:0}}
#hud #receipt.waiting-live :is(.rtotal,#receiptMetadata,#rcHint,#rcSub,#receiptLiveFollow){display:none}
#hud #receipt.waiting-live #rcLines{flex:none;height:44px;min-height:44px;max-height:44px;overflow:visible}
#hud #receipt.waiting-live{--receipt-waiting-height:auto;--receipt-waiting-max-height:none;--receipt-waiting-min-height:0;--receipt-waiting-flex:none;flex:none;height:auto;min-height:0;align-self:start}
#hud .live-receipt-waiting{display:flex;align-items:center;gap:6px;height:44px;padding:0 8px;border-radius:10px;font-size:12px;background:var(--pressed);box-shadow:var(--inset);color:var(--text-mid)}
#hud .live-receipt-waiting i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--brand)}
#hud .live-receipt-waiting strong{font-weight:600;color:var(--brand)}
#hud #ghostTapMark{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--text) 55%,transparent);pointer-events:none;z-index:6}
#hud #ghostTapMark i{position:absolute;left:50%;width:22px;height:22px;box-sizing:border-box;border:2px solid var(--text);border-radius:50%;opacity:.8;transform:translate(-50%,-50%)}
#hud #ghostTapCard{position:fixed;z-index:100;width:228px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:var(--panel);box-shadow:var(--lift-outer);color:var(--text)}
#hud #ghostTapCard::after{content:"";position:absolute;top:100%;left:var(--pointer-x);transform:translateX(-50%);border:8px solid transparent;border-bottom:0;border-top-color:var(--panel)}
#hud .ghost-tap-eyebrow{font:10px var(--mono);color:var(--text-lo);letter-spacing:.06em}
#hud .ghost-tap-time{font:700 18px var(--mono)}
#hud .ghost-tap-actions{display:flex;gap:10px}
#hud .ghost-tap-actions button{flex:1;min-height:44px;border-radius:12px;font:600 12px var(--ui);background:var(--raised);box-shadow:var(--key);color:var(--text)}
#hud #ghostGo{background:var(--brandFill);box-shadow:var(--brandKey);color:var(--brandInk)}
#hud #miniCanvas{position:absolute;inset:0;width:100%;height:44px;pointer-events:none}
#hud[data-landscape="true"]{--receipt-card-width:clamp(280px,38vw,420px)}
#hud[data-view-mode="true"] #timelineControls #goLive{position:relative;inset:auto;display:flex;flex:none;width:44px;min-width:44px;height:44px;border-radius:10px}
/* A 44 px viewing-mode key (landscape and Reels) fits the dot and LIVE only; raised vs green still shows the state. */
#hud[data-view-mode="true"] #timelineControls #goLive .live-cap-forward{display:none}
#hud[data-view-mode="true"] #timelineControls #goLive .live-cap-label{gap:3px}
#hud #receiptCardHeader{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;height:44px;min-height:44px;flex:none;padding-left:8px}
#hud #receiptCardHeader[hidden]{display:none}
#hud #receipt .receipt-card-meta{font:10px var(--mono);color:var(--text-lo);letter-spacing:.04em;white-space:nowrap}
#hud #receiptCardTotal{color:var(--text);font-weight:700}
#hud #receiptCardGrip,#hud #receiptExpand{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-lo)}
#hud #receiptCardGrip{touch-action:none}
#hud #receiptExpand{justify-self:end}
#hud #receiptExpand span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--raised);box-shadow:var(--key);color:var(--text)}
#hud #receipt[data-floating="true"] :is(h4,#rcLines,.rtotal,#receiptMetadata)[hidden]{display:none}
/* Round 15 viewing mode (phone landscape and Reels): the video plus one frosted mini-timeline bar on the
bottom edge. The frost matches the landscape top banner and keeps light ink and the dark control looks over video in both themes. */
#hud{--frost-bg:rgba(8,18,12,.56);--frost-blur:blur(8px)}
#hud[data-view-mode="true"] #dock{position:absolute;inset:auto 0 0;width:auto;height:calc(68px + env(safe-area-inset-bottom));max-height:none;padding:12px max(8px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;box-shadow:none;z-index:40;pointer-events:auto;overflow:visible;--text-hi:#f7faf4;--text-mid:#edf5ef;--text-lo:#c0d5c7;--brand:#8cd2a8;--raised:linear-gradient(180deg,#25302A,#1D2722);--pressed:#0A0E0C;--track:#131A16;--key:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 0 rgba(0,0,0,.7),0 3px 9px rgba(0,0,0,.52);--inset:inset 0 2px 6px rgba(0,0,0,.7),inset 0 -1px 0 rgba(255,255,255,.05);transition:transform var(--section-motion,150ms) ease-out}
/* Landscape bar carries the handle: swipe it down to hide the bar and the top banner. */
.hudhost.phone.phone-landscape #hud[data-view-mode="true"] #dock{height:calc(76px + env(safe-area-inset-bottom));padding-top:20px}
.hudhost.phone.phone-landscape #hud[data-view-mode="true"] #timelineHandle{display:block;top:-4px}
.hudhost.phone.phone-landscape #hud[data-view-mode="true"] #timelineHandle span{background:rgba(247,250,244,.6)}
.hudhost.phone.phone-landscape #hud .topbar{transition:transform var(--section-motion,150ms) ease-out}
#hud[data-view-chrome="hidden"] #dock{transform:translateY(100%);pointer-events:none}
.hudhost.phone.phone-landscape #hud[data-view-chrome="hidden"] .topbar{transform:translateY(-100%);pointer-events:none}
#hud #viewChromePill{display:none;position:absolute;left:calc(50% - 40px);bottom:max(2px,env(safe-area-inset-bottom));width:80px;height:44px;min-height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;z-index:45;touch-action:none}
#hud #viewChromePill span{position:absolute;left:20px;bottom:10px;width:40px;height:5px;border-radius:999px;background:rgba(247,250,244,.8);box-shadow:0 1px 3px rgba(0,0,0,.6)}
#hud[data-view-chrome="hidden"] #viewChromePill{display:block}
@media(prefers-reduced-motion:reduce){#hud[data-view-mode="true"] #dock,.hudhost.phone.phone-landscape #hud .topbar{transition:none}}