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;--record:#E0806F;--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);
 --lift-subtle:0 1px 0 rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);--sheet:inset 0 1px 0 rgba(255,255,255,.09),0 -1px 0 rgba(0,0,0,.5),0 -2px 6px rgba(0,0,0,.4);--export-tint:16%;--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;--record:#B5483B;--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);
 --lift-subtle:0 1px 0 rgba(20,40,28,.06),0 2px 6px rgba(20,40,28,.06);--sheet:inset 0 1px 0 #FFFFFF,0 -1px 0 rgba(20,40,28,.08),0 -2px 6px rgba(20,40,28,.08);--export-tint:12%;--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:not(:where(.rr-overlay *,.store-card *,.cam,.export-handle,#receiptExport,#exportReceiptClear,#exportReceiptOnVideo)),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}
#hud :is(#exportShowRange,#exportClear,#exportHelpOpen){border-color:transparent}
:is(#hud,.family-app) button:active:not(:where(.rr-overlay *,.store-card *)),dialog button:active{transform:translateY(1px);box-shadow:var(--inset)}
:is(#hud,.family-app) button:disabled:not(:where(.rr-overlay *,.store-card *,#exportReceiptOnVideo)){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)}
#hud #profileBtn{min-width:44px;min-height:44px}
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 #dock .ribbon-shell{padding-left:24px;padding-right:53px;background:var(--track);border-radius:14px;box-shadow:none}
#hud #dock .ribbon-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--lift-subtle);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:var(--timeline-scale-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{display:flex;min-height:44px;padding:4px;gap:4px;background:var(--pressed);box-shadow:var(--inset);border-radius:12px}
.family-app .account-segment button{background:none;box-shadow:none;border:0;font-family:var(--ui)}
.family-app .account-segment button[aria-pressed="true"]{background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
.family-app .account-card{border-radius:16px;box-shadow:var(--lift)}

: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 :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}}

/* 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;-webkit-appearance:none;flex:none;min-width:58px;width:auto;height:44px;margin:0 auto 6px 0;padding:0 26px 0 12px;border:0;border-radius:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237F9587' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/10px 6px,var(--raised);box-shadow:var(--key);color:var(--text-hi);font:600 var(--form-control-size,13px) var(--mono);opacity:1}
#hud #playbackSpeed:disabled{opacity:.4}
#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:var(--clock-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:not(#phoneBar>*),#audioBtn){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)}
.hudhost:not(.phone) #hud #exportDock{color:var(--brand)}
#hud :is(#exportDock:not(#phoneBar>*),#audioBtn) 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 #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}
/* W3 (Desktop Phase 1): the panel's tray sits at its top, 12 px in: a 44 px sunken tray with the selected segment raised and
   the others flat, words only (no icons, no counts). The segments are 36 px with a 44 px target. */
.hudhost:not(.phone) #hud .rail-tabs{display:flex;flex-direction:row;align-items:center;gap:4px;padding:4px;height:44px;min-height:44px;flex:none;position:absolute;top:calc(var(--watch-panel-top,0px) + 12px);right:12px;width:calc(var(--watch-panel-w,300px) - 24px);box-sizing:border-box;border:0;border-radius:12px;background:var(--pressed);box-shadow:var(--inset);z-index:8}
.hudhost:not(.phone) #hud .rail-tabs button[data-tab]{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:36px;min-height:36px;padding:0;border:0;border-radius:9px;background:transparent;box-shadow:none;color:var(--text-mid);font:600 13px var(--ui);letter-spacing:0;white-space:nowrap}
.hudhost:not(.phone) #hud .rail-tabs button[data-tab]::after{content:"";position:absolute;inset:-4px 0}
.hudhost:not(.phone) #hud .rail-tabs button[aria-selected="true"]{background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
.hudhost:not(.phone) #hud .rail-tabs :is(svg,.chev,.evidence-count){display:none}
/* Landscape Watch reads Receipts · Objects: the cameras live in the column (065-watch-b.css). */
.hudhost:not(.phone) #hud[data-watch="columns"] .rail-tabs button[data-tab="cameras"]{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:fill}
#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[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:var(--deck-video-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:fill}
#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:var(--deck-video-height,calc(100vw * 9 / 16));left:0;right:0;bottom:calc(66px + env(safe-area-inset-bottom));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{display:flex;flex-direction:column;box-sizing:border-box;background:var(--panel);border:0;border-radius:0;box-shadow:none;position:relative;height:var(--panel-height);flex:none;min-height:28px;padding-top:var(--panel-top-padding,12px);transition:height var(--section-motion,150ms) ease-out}
#hud #deckDrawer{flex:1;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"] #deckDrawer :is(#rail,#receipt){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.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%,var(--receipt-playing-ground,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 .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:var(--timeline-controls-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:auto;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:minmax(0,1fr) auto;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;gap:4px}
#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}
/* Keep in Saved clips (Save or Share design E4): a smaller raised key at the right of the status line. */
#hud.export-active #exportConfirm{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;width:auto;min-width:44px;height:44px;min-height:44px;padding:0 10px;border:0;border-radius:10px;font:600 13px var(--ui);background:var(--raised);box-shadow:var(--key);color:var(--text-hi);white-space:nowrap}

.hudhost:not(.phone) #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}

/* 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}
/* Receipt header: ‹ amount › centered, close at the right. */
/* One receipt header on every surface: ‹ total › centred over the card, the close key on the right. */
#hud #receipt .receipt-nav{display:flex;flex:1;align-items:center;justify-content:center;gap:4px;padding-left:44px}
#hud #receipt #receiptPrev{order:0}#hud #receipt #rcAmt{order:1;min-width:88px;margin:0;text-align:center}#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}
}

#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,.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}

/* On cramped phones, the base rule folds the section that was not last opened. */
#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"] :is(#deckDrawer,#panelPositionRow){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}}

#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 #reelsExit{position:absolute;top:8px;right:8px;z-index:65;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);color:#f7faf4;box-shadow:var(--key)}
#hud #reelsLabel{position:absolute;top:8px;left:8px;z-index:65;display:flex;align-items:center;gap:8px;padding:4px 7px;border-radius:4px;background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);color:#f7faf4;font:600 10px var(--mono);letter-spacing:.04em}
#hud.reals #grid .cam-label{display:none}

#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:is([data-view-mode="true"],[data-small-phone="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:is([data-view-mode="true"],[data-small-phone="true"]) #timelineControls #goLive .live-cap-forward{display:none}
#hud:is([data-view-mode="true"],[data-small-phone="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 calc(66px + env(safe-area-inset-bottom));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{bottom:0;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}}

/* Round 17: one flowing export layout. The range keys are the IN/OUT readouts. */
#hud.export-active #exportPanel{display:flex;position:relative;inset:auto;transform:none;width:100%;height:auto;min-height:0;max-height:none;flex:none;flex-direction:column;gap:8px;margin:0;padding:8px 12px 0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;overscroll-behavior:contain}
#hud.export-active #exportPanel>*{flex:none;align-self:stretch}
#hud.export-active #exportPanel>:is(#exportPreviewHost,#exportResult):empty{display:none}
/* One line: title, then camera and date; Close sits beside the Export button so the heading row stays one line tall. */
#hud.export-active #exportPanel .export-heading{display:flex;align-items:baseline;gap:8px;min-width:0;text-align:left}
#hud.export-active #exportTitle{flex:none;font:600 18px var(--ui);text-transform:none;letter-spacing:0}
#hud.export-active #exportMeta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px/1.3 var(--ui)}
#hud.export-active #exportCancel{width:44px;height:44px;flex:none;border-radius:50%;background:var(--raised);box-shadow:var(--key)}
#hud.export-active #exportRange{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:0;border:0;background:transparent;box-shadow:none;font-variant-numeric:tabular-nums}
#hud.export-active :is(#exportMarkStart,#exportMarkEnd){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;min-height:44px;height:auto;padding:0 4px;border:1px solid var(--border);border-radius:12px;background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
#hud.export-active #exportRange small{font:600 10px/1.2 var(--ui);color:var(--text-mid)}
#hud.export-active #exportRange strong{font:600 clamp(15px,4.6vw,20px)/1.2 var(--mono);white-space:nowrap}
#hud.export-active .export-duration{font:600 13px/1.4 var(--mono);text-align:center;background:var(--brandSoft);color:var(--brand);border-radius:8px;padding:4px 8px}
#hud.export-active .export-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;width:100%}
/* Short labels keep the four links on one 44 px row on phones (full names stay in aria-labels); a narrow screen wraps with no extra gap. */
#hud.export-active .export-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:8px;row-gap:0;margin:0}
#hud.export-active #exportPanel .export-footer button:not(#exportViewLibrary){display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:0;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--brand);font:600 13px var(--ui);white-space:nowrap}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel{padding-top:52px}
.hudhost.phone.phone-landscape #hud.export-active #exportRange strong{font-size:15px}
/* Short phones (e.g. 320 × 568): the Export button already names the action, so the heading gives its room to the timeline. */
/* 320 × 568: the heading row goes too (still announced); the timeline shows the camera and date. */
@media (max-height:600px){.hudhost:not(.phone) #hud.export-active #exportPanel .export-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-height:700px){.hudhost:not(.phone) #hud.export-active #exportTitle{display:none}.hudhost:not(.phone) #hud.export-active #exportPanel{gap:6px}.hudhost:not(.phone) #hud.export-active :is(#exportMarkStart,#exportMarkEnd) small:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* Round 20 small phone mode: the timeline rests on its minimized bar (no handle), and a one-time frosted note sits on the
   bottom edge of the video. Light ink on the frost in both themes, like the floating receipt card. */
.hudhost.phone #hud[data-small-phone="true"]:not(.reals) #timelineHandle{display:none}
#hud[data-small-phone="true"][data-timeline-minimized="true"] #timelineSecondary{display:flex}
#hud[data-small-phone="true"] #timelineSecondary>:not(#playbackQualitySlot){display:none}
#hud #smallPhoneNote{position:absolute;left:8px;right:8px;top:calc(var(--deck-video-height,calc(100vw * 9 / 16)) - 8px);transform:translateY(-100%);z-index:60;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:12px;background:var(--frost-bg);-webkit-backdrop-filter:var(--frost-blur);backdrop-filter:var(--frost-blur);color:#f7faf4}
#hud #smallPhoneNote p{flex:1;margin:0;font:12px/1.35 var(--ui)}
#hud #smallPhoneNote button{flex:none;min-width:64px;height:44px;padding:0 12px;border:0;border-radius:10px;background:var(--raised);box-shadow:var(--key);color:var(--text-hi);font:600 13px var(--ui)}
/* Under 390 px wide the controls row can't hold a 26 px clock between 44 px keys: the clock steps down to 22 px and
   the three right-hand keys to 40 px wide (still 44 px tall), so nothing touches. */
@media (max-width:389px){.hudhost.phone #hud:not([data-timeline-minimized="true"]) #bigClock{font-size:22px}}
/* Under 350 px wide the minimized bar gives its scrub ruler room: tighter gaps and an 18 px clock. */
@media (max-width:349px){#hud[data-small-phone="true"] #timelineControls{gap:4px}#hud[data-small-phone="true"] #bigClock{font-size:18px;line-height:18px}}