/* Original CMCS styles from rtabmap/server/DemoTag.h. */

:root{
  --page:#161514;
  --panel:#1F1E1D;
  --card:#2B2A28;
  --border:#454340;
  --text-2:#A19F9B;
  --text-1:#DBDAD9;
  --sans:Inter, "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--page);color:var(--text-1);
  font-family:var(--sans);font-size:14px;font-weight:400;line-height:1.4;}
body{display:flex;flex-direction:column;min-height:100%;background:var(--page);}
#banner{display:none;}
#top{
  flex:0 0 56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel);
  backdrop-filter:blur(10px);z-index:3;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.mark{width:24px;height:24px;flex:0 0 24px;}
.brand-copy{display:flex;flex-direction:column;gap:1px;min-width:0;}
.brand-kicker{font-size:12px;font-weight:400;line-height:1.2;color:var(--text-2);}
.brand-name{font-size:16px;font-weight:600;line-height:1.2;}
.phases{display:flex;align-items:stretch;gap:0;height:56px;}
.phase{display:flex;align-items:center;gap:10px;padding:0 16px;position:relative;
  color:var(--text-2);border-left:1px solid var(--border);}
.phase:first-child{border-left:0;}
.phase span{font-size:13px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;}
.phase.on{color:var(--text-1);}
.phase.on:after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--text-1);}
.meta{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:400;color:var(--text-2);}
.link{display:flex;align-items:center;gap:8px;}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--text-2);}
.link.ok .pulse{background:var(--text-1);}
#clock{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--text-1);}
#shell{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;}
#side{grid-column:1;grid-row:1;min-height:0;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border);overflow:hidden;}
#side-map{flex:0 0 auto;padding:10px 10px 0;position:relative;z-index:4;}
.place-search{position:relative;margin:0 0 8px;}
#place-search{width:100%;height:28px;border:1px solid var(--border);background:var(--card);
  color:var(--text-1);font-family:var(--sans);font-size:12px;padding:0 8px;}
#place-search:focus{outline:none;border-color:var(--text-1);}
#place-search-hits{position:absolute;left:0;right:0;top:100%;z-index:6;
  background:var(--panel);border:1px solid var(--border);max-height:180px;overflow:auto;}
#place-search-hits[hidden]{display:none;}
.place-hit{display:block;width:100%;text-align:left;padding:7px 8px;border:0;background:transparent;
  color:var(--text-1);font:inherit;font-size:12px;cursor:pointer;}
.place-hit:hover{background:var(--card);}
.place-hit em{display:block;margin-top:2px;font-style:normal;color:var(--text-2);font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tree-search{position:relative;margin:4px 10px 8px calc(8px + var(--d,1)*14px);}
#scan-search{width:100%;height:28px;border:1px solid var(--border);background:var(--card);
  color:var(--text-1);font-family:var(--sans);font-size:12px;padding:0 8px;}
#scan-search:focus{outline:none;border-color:var(--text-1);}
.scan-map-wrap{position:relative;}
#scan-map{height:168px;border:1px solid var(--border);background:var(--card);position:relative;z-index:0;isolation:isolate;}
#scan-map .leaflet-container{background:var(--card);font-family:var(--sans);}
#scan-map .leaflet-control-zoom{border:1px solid var(--border);border-radius:0;margin:6px;box-shadow:none;}
#scan-map .leaflet-control-zoom a{background:var(--card);color:var(--text-1);width:22px;height:22px;
  line-height:22px;font-size:14px;border-bottom:1px solid var(--border);}
#scan-map .leaflet-control-zoom a:hover{background:var(--panel);color:var(--text-1);}
#scan-map .leaflet-control-zoom a.leaflet-disabled{opacity:.35;color:var(--text-2);}
#scan-map .leaflet-control-attribution{font-size:9px;background:rgba(31,30,29,.72);color:var(--text-2);}
#scan-map .leaflet-control-attribution a{color:var(--text-2);}
.scan-map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;font-size:12px;font-weight:500;color:var(--text-2);}
.scan-map-empty.hide{display:none;}
.scan-pin{width:14px;height:14px;margin-left:-7px;margin-top:-7px;border-radius:50%;
  background:var(--text-1);border:2px solid var(--page);box-shadow:0 0 0 1px var(--border);}
.side-rule{flex:0 0 auto;height:1px;margin:10px 10px 0;border:0;background:#5C5A56;}
.tree{margin:0;padding:8px 0;flex:1 1 auto;min-height:0;overflow:auto;}
.tree-kids{display:none;}
.tree-node.open>.tree-kids{display:block;}
.tree-row{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 calc(8px + var(--d,0)*14px);
  cursor:default;user-select:none;}
.tree-row[data-toggle]{cursor:pointer;}
.tree-row:hover{background:var(--card);}
.tree-chev,.tree-ico{flex:0 0 12px;width:12px;height:12px;color:var(--text-2);display:block;}
.tree-ico{width:14px;height:14px;flex:0 0 14px;}
.tree-chev{transform:rotate(0deg);transform-origin:50% 50%;transition:transform .12s ease;}
.tree-row.open .tree-chev{transform:rotate(90deg);}
.tree-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:400;color:var(--text-1);}
.tree-row.leaf .tree-name{color:var(--text-2);}
.tree-id{font-weight:600;text-transform:uppercase;}
.tree-val{flex:0 1 auto;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--text-1);}
.tree-state{font-size:12px;font-weight:400;color:var(--text-2);}
.lamp{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--border);}
.lamp.on{background:var(--text-1);}
.side-actions{margin-top:auto;padding:14px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);}
.side-lock{display:flex;align-items:center;gap:8px;}
.side-lock label{flex:1;min-width:0;font-size:12px;font-weight:500;color:var(--text-2);}
#lock-phones-input{width:56px;height:28px;border:1px solid var(--border);background:var(--card);
  color:var(--text-1);font-family:var(--mono);font-size:13px;padding:0 6px;text-align:right;}
#lock-phones-input:focus{outline:none;border-color:var(--text-1);}
#lock-phones-status{font-family:var(--mono);font-size:12px;color:var(--text-2);min-width:44px;text-align:right;}
#lock-need-hint{margin-top:16px;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text-2);}
.btn{appearance:none;height:36px;border:1px solid var(--border);background:transparent;
  color:var(--text-1);font-family:var(--sans);font-size:13px;font-weight:500;line-height:1;
  cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn:hover{border-color:var(--text-1);color:var(--text-1);}
.btn:disabled{opacity:.4;cursor:wait;border-color:var(--border);}
.btn.solid{background:var(--text-1);color:var(--page);border-color:var(--text-1);}
.btn.solid:hover{background:var(--text-1);border-color:var(--text-1);}
.btn.ghost-bad:hover{border-color:var(--text-2);color:var(--text-2);}
.viewport{grid-column:2;grid-row:1;min-height:0;min-width:0;display:flex;flex-direction:row;background:var(--page);position:relative;}
.view-stage{flex:1 1 auto;min-height:0;min-width:0;position:relative;display:flex;z-index:0;}
#calib-tag{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;}
.reticle{position:relative;padding:8px;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  max-width:min(72vmin,100%);max-height:min(72vmin,100%);}
/* The PNG already carries a 1-cell quiet zone: the black square is 60% of the
   image. Size against the remaining pane. */
.reticle img{display:block;width:min(72vmin,100%);height:auto;max-height:min(72vmin,100%);aspect-ratio:1/1;
  background:#fff;image-rendering:pixelated;image-rendering:crisp-edges;}
#live{display:none;flex:1;min-height:0;width:100%;height:100%;}
#live.show{display:flex;}
#map-wrap{position:relative;flex:1;width:100%;height:100%;background:var(--page);border:0;}
#map{width:100%;height:100%;display:block;}
#map-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:13px;font-weight:500;color:var(--text-2);}
#map-msg.hidden{display:none;}
.view-tools{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;z-index:2;}
.chip{appearance:none;height:28px;padding:0 12px;border:1px solid var(--border);background:var(--card);
  color:var(--text-1);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;}
.chip:hover,.chip.on{border-color:var(--text-1);color:var(--text-1);}
.chip:disabled{opacity:.5;cursor:wait;}
#rebuild-status{font-size:12px;background:var(--panel);max-width:360px;}
.live-stats{position:absolute;top:14px;right:16px;display:flex;gap:8px;z-index:2;pointer-events:none;}
.stat{min-width:72px;padding:8px 10px;border:1px solid var(--border);background:var(--card);}
.stat b{display:block;font-size:12px;font-weight:400;color:var(--text-2);}
.stat em{display:block;margin-top:4px;font-family:var(--mono);font-size:13px;font-weight:500;font-style:normal;color:var(--text-1);}
#confirm{display:none;position:fixed;inset:0;background:var(--page);z-index:20;
  align-items:center;justify-content:center;padding:24px;}
#confirm.open{display:flex;}
.sheet{width:min(420px,100%);background:var(--panel);border:1px solid var(--border);padding:24px;}
.sheet:before{content:"";display:block;height:2px;background:var(--text-1);margin:-24px -24px 20px;}
.sheet h3{margin:0 0 8px;font-size:16px;font-weight:600;line-height:1.25;}
.sheet p{margin:0 0 22px;color:var(--text-2);font-size:14px;font-weight:400;line-height:1.45;}
.sheet-row{display:flex;gap:8px;}
.sheet-row .btn{flex:1;}
/* scan recording player (sidebar > History) */
#player{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:21;
  align-items:center;justify-content:center;padding:24px;}
#player.open{display:flex;}
#player.open.docked{position:relative;inset:auto;width:380px;flex:0 0 380px;height:auto;
  align-self:stretch;padding:12px 12px 12px 0;background:transparent;
  align-items:stretch;justify-content:stretch;pointer-events:none;z-index:2;}
#player.open.docked .player-box{pointer-events:auto;width:100%;height:100%;max-height:none;
  transform:translateZ(0);}
#player.open.docked .player-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(140px,38%);}
#player.open.docked #player-video{max-height:none;height:100%;}
#player.open.docked .player-summary{max-height:none;}
@media (max-width:900px){
  .viewport{flex-direction:column;}
  #player.open.docked{width:auto;flex:0 0 auto;max-height:42vh;padding:0 12px 12px;}
  #player.open.docked .player-box{max-height:42vh;}
}
.player-box{width:min(1180px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);padding:12px;min-height:0;}
.player-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex:0 0 auto;}
.player-head span{font-family:var(--mono);font-size:13px;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.player-head .btn{height:30px;padding:0 12px;}
.player-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(0,72vh);
  gap:12px;align-items:stretch;min-height:0;flex:1 1 auto;overflow:hidden;}
#player-video{display:block;width:100%;height:100%;max-height:72vh;background:#000;object-fit:contain;}
.player-summary{min-height:0;max-height:100%;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--border);background:var(--card);padding:10px 12px;}
.player-sum-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex:0 0 auto;}
.player-sum-head b{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--text-2);}
.player-sum-head .btn{height:28px;padding:0 10px;}
#player-sum-text{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--text-1);flex:0 0 auto;}
#player-sum-text.muted{color:var(--text-2);}
#player-tasks{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:4px;}
.player-task{appearance:none;width:100%;text-align:left;border:1px solid transparent;background:transparent;
  color:var(--text-1);padding:8px 8px;cursor:pointer;font:inherit;}
.player-task:hover,.player-task.on{border-color:var(--border);background:var(--panel);}
.player-task .t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.player-task .t em{font-family:var(--mono);font-size:12px;font-style:normal;color:var(--text-2);}
.player-task .t span{font-size:13px;font-weight:500;}
.player-task p{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--text-2);}
@media (max-width:900px){
  .player-body{grid-template-columns:1fr;}
  #player-video{max-height:42vh;}
  .player-summary{max-height:32vh;}
}
.tree-row.rec,.tree-row.model{cursor:pointer;}
.tree-row.rec .tree-name,.tree-row.model .tree-name{color:var(--text-1);}
.tree-row.model.on,.tree-row.rec.on,.tree-row.on{background:var(--card);}
.tree-row.model .tree-val,.tree-row.rec .tree-val{flex:0 0 auto;}
#view-banner{display:none;position:absolute;top:14px;left:16px;z-index:2;
  padding:8px 10px;border:1px solid var(--border);background:var(--card);
  font-size:12px;font-weight:500;color:var(--text-1);pointer-events:none;}
#view-banner.show{display:block;}
@media (max-width:900px){
  .phases{display:none;}
  #shell{grid-template-columns:1fr;}
  /* Phones show only the mesh, with Fit and Rotate as the sole controls. */
  #sidebar-toggle,#side,.live-stats,#live-btn,#rebuild-quality,#rebuild-btn,#cmcs-mode{display:none}
  .viewport{grid-column:1;grid-row:1;}
  .view-tools{justify-content:center}
  .view-tools .secondary-tools{margin-left:0}
}

/* Only demo behavior and accessibility additions below this line. */
[hidden]{display:none!important}
button.tree-row{width:100%;border:0;background:transparent;text-align:left;font:inherit;color:inherit}
button.tree-row:hover,button.tree-row.on{background:var(--card)}
.phase{font:inherit;background:none;border-top:0;border-right:0;border-bottom:0;cursor:pointer}
.tree-row:focus-visible,.phase:focus-visible,.chip:focus-visible,.btn:focus-visible{outline:1px solid var(--text-1);outline-offset:-2px}
#map{touch-action:none;cursor:grab}#map:active{cursor:grabbing}
#map-msg{z-index:4;background:var(--page)}
#map-msg button{pointer-events:auto}
#cmcs-mode,#cmcs-rotate{margin-left:0}
.view-tools .secondary-tools{display:flex;gap:8px;margin-left:auto;opacity:0;transition:opacity .15s}
.viewport:hover .secondary-tools,.secondary-tools:focus-within{opacity:1}
#shell.sidebar-hidden{grid-template-columns:1fr}#shell.sidebar-hidden .viewport{grid-column:1}
#sidebar-toggle{position:absolute;left:0;bottom:64px;z-index:5;padding:0 5px;font-size:11px;opacity:0}
#shell:hover #sidebar-toggle,#sidebar-toggle:focus-visible{opacity:1}
#preview-notice{position:absolute;left:16px;top:14px;color:var(--text-2);font-size:12px;pointer-events:none}
#scan-map button{font:inherit}
.scan-pin{padding:0;cursor:pointer}
/* Touch screens have no hover: keep hover-revealed tools visible and tappable. */
@media (hover:none){
  .view-tools .secondary-tools{opacity:1}
  .chip,.btn{min-height:36px}
}