@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;
 --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);
 --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 -12px 32px rgba(0,0,0,.6);--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;
 --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);
 --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 -8px 24px rgba(20,40,28,.14);--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),#hud.export-active #exportConfirm{background:var(--brandFill);box-shadow:var(--brandKey);color:var(--brandInk)}
:is(#hud,.family-app) :is(button.quiet,.rail-tabs button,.application-global-nav a),#hud :is(#exportShowRange,#exportClear,#exportHelpOpen,#exportViewLibrary){background:transparent;box-shadow:none;border-color:transparent;color:var(--text-mid)}
: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(.rocker,.zoomer,.theme-toggle,.layout-chooser),#hud #playbackCapsule,#hud .rail-tabs{min-height:44px;background:var(--pressed);box-shadow:var(--inset);border-radius:12px;padding:4px;gap:4px}
:is(#hud,.family-app) :is(.rocker,.zoomer,.theme-toggle,.layout-chooser) button,#hud #playbackCapsule :is(button,select){background:var(--raised);box-shadow:var(--key);border-radius:12px;color:var(--text-hi)}
#hud .rail-tabs button{font:600 12px var(--ui);border:0;border-radius:12px}
#hud .rail-tabs button[aria-selected="true"]{background:var(--raised);box-shadow:var(--key);color:var(--brand)}
#hud .rail-tabs button::after{display:none}#hud .rail-tabs svg{stroke-width:1.8}
: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 #cameraControlSheet{background:var(--panel);border-radius:24px 24px 0 0;box-shadow:var(--sheet);transition:transform 150ms ease-out;overflow:visible}
#hud #cameraControlSheet #selectCameras{position:relative;inset:auto;transform:none;display:flex;margin:-36px auto 0;min-height:44px;width:max-content;max-width:100%;padding:0 16px;border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;background:var(--panel);box-shadow:inset 0 1px 0 var(--tabEdge);color:var(--text-hi);touch-action:none;font:600 13px var(--ui);gap:8px}
#hud #cameraSheetHandle{display:flex;width:100%;height:24px;min-height:24px;align-items:center;justify-content:center;background:none;border:0;box-shadow:none;touch-action:none}
#hud .sheet-grip{width:34px;height:3px;border-radius:8px;background:var(--text-lo)}
#hud #cameraControlSheet #panelHandle{display:block!important;align-self:flex-end;width:auto;height:44px;min-height:44px;padding:0 12px;background:transparent;box-shadow:none;color:var(--text-mid);font:12px var(--ui)}
#hud .rail-card{border-radius:12px;box-shadow:var(--key);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{background:linear-gradient(0deg,#000c,transparent);color:#EAF2EC}
#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;font:600 13px var(--ui);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;font:13px var(--ui)}
#hud.export-active #exportConfirm{width:100%;border-radius:12px}
#hud.export-active .export-footer{display:flex;justify-content:space-between;gap:4px;order:8}
#hud.export-active .export-footer button{font:12px var(--ui);padding:0 4px;min-width:0}
#hud #dock .ribbon-shell{padding-left:24px!important;padding-right:24px!important;background:var(--track);border-radius:14px;box-shadow:var(--lift)}
#hud #dock #ribbon{height:112px!important;border:0;background:var(--track);border-radius:0}
#hud.timeline-only #dock #ribbon{height:64px!important}
#hud #dock #tlScale{width:auto!important;margin-left:24px!important;margin-right:24px!important;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);color:var(--brand);background:var(--panel);border-radius:8px;padding:3px 6px;z-index:3}
#hud #timelineCameraTab{position:absolute;bottom:0;left:0;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--panel);border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;padding:10px;font:600 12px var(--ui);box-shadow:inset 0 1px 0 var(--tabEdge)}
#hud #timelineCameraTab::before{content:"●";color:var(--brand);margin-right:6px}
#hud #dock .cursor-header .zoomer{right:0;left:auto;transform:none;top:auto;bottom:0;min-height:44px;border-radius:12px 12px 0 0}
#hud #dock .zoomer button{display:block!important;min-width:36px;min-height:36px}
#hud #dock .zoomer .zoom-cycle{display:none!important}
#hud #dock .ribbon-shell #goLive{left:auto!important;right:24px;top:-44px;background:var(--raised);border-radius:12px 12px 0 0;color:var(--brand)}
#hud #goLiveText{background:none;color:var(--brand)}
#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}

#hud[data-layered-sheets="true"] #cameraSheetHandle{touch-action:none;min-height:24px;box-shadow:none}

/* Specific mobile geometry remains in receipt-readability; hardware owns surfaces. */
#hud[data-layered-sheets="true"] #cameraControlSheet{background:var(--panel);border-radius:24px 24px 0 0;box-shadow:var(--sheet)}
#hud[data-layered-sheets="true"] #mobileCameraList .rail-card{border-radius:12px;box-shadow:var(--key)}
#hud[data-layered-sheets="true"] #mobileCameraList .rail-card.main{box-shadow:var(--ring)}
#hud[data-layered-sheets="true"] #mobileCameraList .meta{background:linear-gradient(0deg,#000c,transparent);color:#EAF2EC}
.hudhost.phone #hud[data-layered-sheets="true"] .rail-tabs{background:var(--pressed)!important;box-shadow:var(--inset)}
/* LIVE is a folder tab between the camera tab and the zoom rocker, never over the lanes. */
#hud #dock .ribbon-shell #goLive{top:-44px;right:125px;height:44px;min-width:52px;width:auto;padding:0 8px;border-radius:12px 12px 0 0}
#hud #timelineCameraTab{max-width:calc(100% - 190px)}
#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),#hud :is(.mark,.tlabel,.lvl,.chip,.rail-tabs,.camera-code){font-family:var(--ui)}
#hud :is(.iconbtn,.icon-button,#audioBtn,#profileBtn){border-radius:50%}
#hud :is(#audioBtn,#profileBtn,.seek-more summary){min-width:44px;min-height:44px}

: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 .cursor-header .zoomer #zoomOut{order:0}#hud #dock .cursor-header .zoomer .lvl{order:1;padding:0 6px;font:600 12px var(--ui)}#hud #dock .cursor-header .zoomer #zoomIn{order:2}
#hud[data-layered-sheets="true"] #mobileCameraList .meta{position:absolute;bottom:0;left:0;right:0;padding:14px 5px 5px;min-height:28px}
#hud #dock #tlScale span::before{border:0;width:1px}
#hud.export-active .export-bounds button,#hud.export-active .export-actions button{border-radius:12px;border-color:var(--border)}
#hud.export-active #exportViewLibrary{width:auto;margin-left:auto}
#hud #dock .ribbon-shell #goLive{box-shadow:var(--key)}

#hud .rail-tabs svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#hud :is(.chip,.filter-chip),.family-app .fleet-filter{border-radius:8px}
#hud :is(#rail,#receipt,.calendar),.family-app :is(.settings-card,.auth-card){box-shadow:var(--lift);border-radius:16px}
#hud #playbackCapsule #playBtn{background:var(--raised);box-shadow:var(--key);color:var(--text-hi)}
#hud #playbackCapsule #playBtn:active{transform:translateY(1px);box-shadow:var(--inset)}
#hud :is(.rail-tabs,.meta,.lab,.st,.kicker,.legend,.seek-actions){font-family:var(--ui)}
/* Short phones keep the three lanes but compress them so Reels and the header never collide. */
@media (max-height:700px){#hud #dock #ribbon{height:76px!important}#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,#hud.export-active #panelHandle{display:none!important}
#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!important;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;min-height:44px;padding:0 8px;background:none;border:0;box-shadow:none;color:var(--text-mid);font:13px var(--ui)}
#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;background:none;box-shadow:none;padding:0 4px;font:12px var(--ui);color:var(--text-mid);white-space:nowrap}
#hud.export-active #exportPanel .export-footer #exportViewLibrary{color:var(--brand)}
@media (max-width:360px){#hud.export-active #exportPanel .export-footer button{font-size:11px;padding:0 2px}}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;align-content:start;padding:6px 12px}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-copy{grid-column:1;grid-row:1}
.hudhost.phone.phone-landscape #hud.export-active #exportRange{grid-column:2;grid-row:1;margin:0}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-actions{grid-column:3;grid-row:1;align-self:center}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-bounds{grid-column:1;grid-row:2}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-footer{grid-column:2/4;grid-row:2}
#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)}
.hudhost.phone.phone-landscape #hud.export-active #exportPanel .export-times{gap:4px}
.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}
#hud.export-active #exportPanel>*{align-self:stretch}