/* QPBUDDY 360 - application styles (vanilla CSS, no framework) */

/* The hidden attribute must always win — author display rules
   (e.g. .btn { display:inline-block }, .pano-loading { display:flex })
   would otherwise override the UA stylesheet's [hidden] { display:none }. */
[hidden] { display: none !important; }

:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #1c2733;
  --muted: #64748b;
  --line: #dbe2e9;
  --accent: #0b6bcb;
  --accent-dark: #0857a3;
  --ok: #16a34a;
  --warn: #d97706;
  --err: #dc2626;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 22px;
  background: #10202e;
  color: #fff;
}
.topbar .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 17px; }
.topbar .brand span { color: #7fb3e8; font-weight: 500; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a {
  color: #cfe0ef; text-decoration: none; padding: 6px 12px; border-radius: 6px; font-size: 14px;
}
.topbar nav a:hover { background: rgba(255,255,255,.08); }
.topbar nav a.active { background: var(--accent); color: #fff; }
.topbar .auth { font-size: 14px; }
.topbar .auth a { color: #cfe0ef; }
.topbar .auth .user { color: #9fb8cc; margin-right: 8px; }

/* ---------- embed mode (QPBUDDY main-app iframe, 360SITEWALK.PRD) ----------
   The host system already shows site name + identity + logout, so the brand
   and user row are dropped — but a slim nav row STAYS so embedded users can
   reach Dashboard / New walk / the Plan library / Account. */
body.embed-page .topbar { gap: 10px; padding: 5px 14px; }
body.embed-page .topbar .brand,
body.embed-page .topbar .auth { display: none; }

/* phones: the single no-wrap row overflows (nav's flex:1 jams Account/Admin
   past the right edge) — drop the brand subtitle, put the links on their own
   wrapping row below brand + auth */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; }
  .topbar .brand span { display: none; }
  .topbar nav { order: 3; flex: 1 1 100%; flex-wrap: wrap; }
}

/* full-bleed page shell: every page uses the whole viewport width on desktop
 * (operator request — no centered 1180px column with empty gutters). Narrow
 * reading elements (forms, login card) still cap themselves below. */
main { max-width: none; margin: 0; padding: 20px 24px; }

.foot {
  max-width: none; margin: 26px 0 36px; padding: 0 24px;
  font-size: 12px; color: var(--muted);
}

/* ---------- components ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(16,32,46,.05);
}
.card h2 { margin-top: 0; font-size: 18px; }
.card h3 { font-size: 15px; color: var(--muted); margin: 22px 0 8px; text-transform: uppercase; letter-spacing: .4px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card-head h2 { margin: 0; }
.card-head h2 a { color: var(--ink); text-decoration: none; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.desc { color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.empty { background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); padding: 40px; text-align: center; }

.page-head h1 { margin: 0 0 4px; font-size: 24px; }
.page-head .sub { color: var(--muted); margin: 0 0 12px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
/* compact tabs (operator: smaller buttons to save vertical space) */
.tabs a {
  padding: 3px 10px; border-radius: 6px; text-decoration: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); font-size: 12.5px;
}
.tabs a:hover { border-color: var(--accent); }
.tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Walkthrough tab: green so it stands out from every other button on the
 * page (operator request 2026-09-08) — green in idle, hover AND active */
.tabs a.tab-walkthrough { border-color: #22c55e; color: #15803d; font-weight: 600; }
.tabs a.tab-walkthrough:hover { border-color: #16a34a; }
.tabs a.tab-walkthrough.active { background: #16a34a; color: #fff; border-color: #16a34a; }

.btn {
  display: inline-block; padding: 8px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 14px; text-decoration: none;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: #e2e8f0; color: #334155;
}
.badge-ready, .badge-ready_for_calibration { background: #dcfce7; color: #166534; }
.badge-failed, .badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-uploaded, .badge-new { background: #e0f2fe; color: #075985; }
.badge-calibrating, .badge-validating, .badge-extracting, .badge-stabilizing, .badge-normalizing, .badge-sampling,
.badge-initialising_slam, .badge-slam_processing, .badge-optimising,
.badge-exporting_trajectory, .badge-generating_previews { background: #fef9c3; color: #854d0e; }
.badge-wait_orient_confirm { background: #ffedd5; color: #9a3412; }
.badge-cancelled { background: #e2e8f0; color: #475569; }
.orient-confirm p { margin: 8px 0; }

dl.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 16px; margin: 14px 0; }
dl.stats div { background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
dl.stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
dl.stats dd { margin: 2px 0 0; font-weight: 600; }

.alert { padding: 12px 16px; border-radius: var(--radius); margin: 12px 0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-info { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }

/* ---------- forms ---------- */
label { display: block; margin: 12px 0 4px; font-weight: 500; font-size: 14px; }
input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b6d4f0; border-color: var(--accent); }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > label { flex: 1; min-width: 180px; }
/* forms span the full page too; only the text controls keep a readable
 * measure — a 2500px-wide text input is unusable even on a wide screen */
.form-card { max-width: none; }
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.form-card select, .form-card textarea { max-width: 760px; }
fieldset { border: 1px dashed var(--line); border-radius: 6px; margin: 14px 0; }
fieldset legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.inline-form { display: inline-block; margin-top: 8px; }

.auth-card { max-width: 380px; margin: 60px auto; }
.auth-card h1 { margin-top: 0; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.log-error td { color: var(--err); }
.log-warning td { color: var(--warn); }

/* ---------- upload ---------- */
.upload-zone {
  border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 34px; text-align: center; cursor: pointer; background: #fafbfc;
  transition: border-color .15s, background .15s;
}
.upload-zone.dragover { border-color: var(--accent); background: #eef6fd; }
.upload-progress { margin: 14px 0; }
.upload-progress .bar, .big-progress, .mini-progress {
  height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
}
.upload-progress .bar div, .big-progress div, .mini-progress div {
  height: 100%; background: var(--accent); width: 0; transition: width .3s;
}
.big-progress { height: 18px; margin: 18px 0; }
.mini-progress { height: 6px; margin: 10px 0; }
.card-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
.card-status .mini-progress { width: 100%; margin: 0; }

/* ---------- processing page ---------- */
.proc-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.proc-head h2 { margin: 0; }
.proc-step { font-size: 15px; margin: 4px 0 2px; }
.proc-frames { min-height: 18px; }
/* phase stepper: where the current run is on the way to "ready to calibrate" */
.proc-phases { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 18px 0 4px; }
.pp { flex: 1 1 118px; min-width: 112px; text-align: center; position: relative; padding: 0 4px; }
.pp::after {          /* connector to the next phase */
  content: ''; position: absolute; top: 13px; left: calc(50% + 17px);
  width: calc(100% - 34px); height: 2px; background: var(--line);
}
.pp:last-child::after { display: none; }
.pp-dot {
  width: 27px; height: 27px; border-radius: 50%; background: #eef2f6;
  border: 2px solid var(--line); display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; position: relative; z-index: 1;
}
.pp-t { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.3; }
.pp.pp-done .pp-dot { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 0; }
.pp.pp-done::after { background: var(--ok); }
.pp.pp-done .pp-t { color: var(--ink); }
.pp.pp-active .pp-dot { border-color: var(--accent); color: var(--accent-dark); box-shadow: 0 0 0 4px rgba(11,107,203,.14); }
.pp.pp-active .pp-t { color: var(--accent-dark); font-weight: 600; }
.pp.pp-error .pp-dot { background: #fee2e2; border-color: var(--err); color: var(--err); }
.pp.pp-error .pp-t { color: var(--err); }
@media (max-width: 640px) { .pp::after { display: none; } }  /* wrapped rows: no dangling lines */
/* success panel shown when the run finishes (processing.js un-hides it) */
.proc-done { border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: var(--radius); padding: 14px 16px; margin: 14px 0 4px; }
.proc-done p { margin: 0 0 10px; }
.proc-done .admin-actions .btn { margin: 0; }
/* technical details: collapsed unless asked for */
.proc-tech summary { cursor: pointer; font-size: 14px; color: var(--muted); user-select: none; }
.proc-tech summary:hover { color: var(--accent-dark); }
.proc-tech[open] summary { margin-bottom: 10px; }
/* the last-run values read line by line (operator: no box grid) — label
 * column left, value right, wrapping values stay under themselves */
.proc-stats { margin: 0; }
.proc-stats > div { display: flex; gap: 4px 14px; align-items: baseline; padding: 2px 0; }
.proc-stats dt { flex: none; width: 250px; max-width: 45%; color: var(--muted); font-size: 13px; }
.proc-stats dd { margin: 0; min-width: 0; }

/* ---------- calibration ---------- */
.cal-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-plan-pane, .cal-side-pane { min-width: 0; }
.pane-toolbar { display: flex; gap: 6px; margin-bottom: 8px; }
.pane-toolbar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pane-toolbar .float-dock-btn { margin-left: auto; }   /* upper-right corner of the minimap */
.pane-toolbar .side-dock { display: none; }            /* only meaningful while floating */
.wt-plan.float-map .pane-toolbar .side-dock { display: inline-block; }
.plan-canvas-wrap {
  position: relative; background: #f8fafc; border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; min-height: 320px;
}
.plan-canvas-wrap { user-select: none; -webkit-user-select: none; }

/* ---------- collapsible advanced sections (layman pass 2026-09-09):
 * technical options live inside closed <details> cards/rows ---------- */
details.card > summary, details.adv-details > summary {
  cursor: pointer; list-style-position: outside; font-size: 14px;
}
details.card > summary h2 {
  display: inline; font-size: 15px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin: 0;
}
details.adv-details {
  margin: 12px 0; padding: 8px 12px; border: 1px dashed var(--line);
  border-radius: 6px;
}
details.adv-details > summary { color: var(--muted); }
details.adv-details .form-row { margin-top: 10px; }

/* ---------- full-viewport calibration (operator 2026-09-09): the map
 * fills the entire remaining viewport height — no dead gap above the
 * bottom footer. Desktop only: the stacked single-column mobile layout
 * keeps the natural scrolling page flow. ---------- */
@media (min-width: 901px) {
  body.cal-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.cal-page > main {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    padding: 10px 16px 4px;
  }
  /* tight bottom chrome: the map ends right above the footer text */
  body.cal-page #calibration-page { padding-bottom: 10px; margin-bottom: 4px; }
  body.cal-page .foot { margin: 4px 0 8px; }
  body.cal-page .page-head { flex: none; }
  body.cal-page #calibration-page {
    flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column;
  }
  body.cal-page #calibration-page > h2,
  body.cal-page #calibration-page > .pill,
  body.cal-page #calibration-page > .cal-summary,
  body.cal-page .cal-guide { flex: none; }
  body.cal-page .cal-layout { flex: 1 1 0%; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  body.cal-page .cal-plan-pane { display: flex; flex-direction: column; min-height: 0; }
  body.cal-page .cal-plan-pane .pane-toolbar,
  body.cal-page .cal-plan-pane .layer-toggles,
  body.cal-page .cal-plan-pane .skew-list { flex: none; }
  body.cal-page .cal-plan-pane .plan-canvas-wrap { flex: 1 1 0%; min-height: 120px; }
  body.cal-page .cal-side-pane { min-height: 0; overflow-y: auto; }
}
.plan-canvas-wrap canvas { display: block; cursor: crosshair; }
.plan-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; color: var(--muted); font-size: 14px;
  pointer-events: none;   /* let wheel/drag reach the canvas underneath, so
                             zoom/pan work on the trajectory before a plan is
                             uploaded */
}
.plan-placeholder a { pointer-events: auto; }   /* keep the upload link clickable */
.cp-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.cp-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 13px;
}
.cp-item.selected { border-color: var(--accent); background: #eef6fd; }
.cal-result { margin-top: 10px; }

/* skew-fix list (under the calibration map) — capped height so long lists
   scroll in place and the panel stays compact/visible */
.skew-list { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.skew-list h4 { margin: 0 0 6px; }
#skew-entries { max-height: 240px; overflow-y: auto; padding-right: 4px; }
.skew-item {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
  margin-bottom: 6px; font-size: 13px;
}
.skew-item.live { border-color: var(--accent); background: #eef6fd; }
.skew-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.skew-actions { display: flex; gap: 6px; }
.skew-edit { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.skew-edit input { width: 72px; }

/* on-screen calibration guide */
.cal-guide { margin-bottom: 12px; }
/* collapsed by default (operator 2026-09-09): the map gets the viewport */
.cal-guide summary {
  cursor: pointer; display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px; list-style-position: outside; font-size: 14px;
}
.cal-guide summary h3 { margin: 0; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.cal-guide[open] summary { margin-bottom: 10px; }
#cal-guide-state { font-size: 13px; }
.cal-guide-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cal-guide-steps li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font-size: 14px; line-height: 1.45; }
.gs-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #eef2f6; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink); margin-top: 1px; }
.cal-guide-steps li.gs-done { opacity: .72; }
.cal-guide-steps li.gs-done .gs-num { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 0; }
.cal-guide-steps li.gs-done .gs-num::after { content: '✓'; font-size: 12px; }
.cal-guide-steps li.gs-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #f0f7fd; }
.cal-guide-steps li.gs-current .gs-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.gs-tip { margin: 0; font-size: 13px; }
.cal-quality-Excellent { color: var(--ok); font-weight: 700; }
.cal-quality-Good { color: var(--ok); }
.cal-quality-Acceptable { color: var(--warn); }
.cal-quality-Poor { color: var(--err); font-weight: 700; }

/* ---------- walkthrough ---------- */
.walkthrough { display: flex; flex-direction: column; gap: 10px; }
/* side-docked minimap: the walkthrough becomes a 3-column grid —
   minimap | divider | 360 stack — with a draggable divider resizing both */
.walkthrough.side-dock-left, .walkthrough.side-dock-right { display: grid; gap: 10px; }
.walkthrough.side-dock-left {
  grid-template-columns: var(--wt-map-w, 320px) 6px minmax(0, 1fr);
  grid-template-areas:
    "wtmap wtsplit pano"
    "wtmap wtsplit nav"
    "wtmap wtsplit bottom"
    "wtmap wtsplit status";
}
.walkthrough.side-dock-right {
  grid-template-columns: minmax(0, 1fr) 6px var(--wt-map-w, 320px);
  grid-template-areas:
    "pano wtsplit wtmap"
    "nav wtsplit wtmap"
    "bottom wtsplit wtmap"
    "status wtsplit wtmap";
}
.walkthrough.side-dock-left > .wt-pano,
.walkthrough.side-dock-right > .wt-pano { grid-area: pano; min-width: 0; }
.walkthrough.side-dock-left > .wt-nav,
.walkthrough.side-dock-right > .wt-nav { grid-area: nav; }
.walkthrough.side-dock-left > .wt-bottom,
.walkthrough.side-dock-right > .wt-bottom { grid-area: bottom; }
.walkthrough.side-dock-left > .wt-status,
.walkthrough.side-dock-right > .wt-status { grid-area: status; }
.walkthrough.side-dock-left > .wt-plan,
.walkthrough.side-dock-right > .wt-plan {
  grid-area: wtmap; min-width: 0; display: flex; flex-direction: column;
}
.walkthrough.side-dock-left > .wt-plan .plan-canvas-wrap,
.walkthrough.side-dock-right > .wt-plan .plan-canvas-wrap { flex: 1 1 auto; min-height: 220px; }
.wt-side-splitter { display: none; }
.walkthrough.side-dock-left > .wt-side-splitter,
.walkthrough.side-dock-right > .wt-side-splitter {
  display: block; grid-area: wtsplit; cursor: col-resize;
  background: #26364d; border-radius: 3px;
}
.walkthrough.side-dock-left > .wt-side-splitter:hover,
.walkthrough.side-dock-right > .wt-side-splitter:hover { background: var(--accent); }
.wt-pano { position: relative; background: #0b1220; border-radius: var(--radius); overflow: hidden; }
#pano-container, #traj-container { width: 100%; height: 100%; }
#pano-container { height: 52vh; min-height: 320px; touch-action: none; }
.pano-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cfe0ef; font-size: 15px; background: rgba(11,18,32,.6);
  pointer-events: none; /* never block drag/zoom even while shown */
}
.pano-hud {
  position: absolute; top: 12px; left: 12px; color: #e2f0fb; background: rgba(11,18,32,.55);
  padding: 5px 10px; border-radius: 6px; font-size: 13px;
}
.pano-hud .hud-zoom { margin-left: 6px; }
.pano-controls {
  position: absolute; bottom: 12px; left: 54px; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; background: rgba(11,18,32,.55); padding: 6px 10px; border-radius: 8px; color: #e2f0fb;
  transition: transform .25s ease, opacity .2s ease;
}
.pano-controls.collapsed {
  transform: translateX(calc(-100% - 70px));   /* slides out past the left edge */
  opacity: 0; pointer-events: none;
}
.pano-ctrl-toggle {
  position: absolute; bottom: 12px; left: 12px; width: 34px; height: 36px;
  background: rgba(11,18,32,.55); color: #e2f0fb; border: 1px solid #2c4058;
  border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; z-index: 6;
}
.pano-ctrl-toggle:hover { border-color: var(--accent); }
.pano-controls .btn { background: #1d2c40; color: #e2f0fb; border-color: #2c4058; }
.pano-controls .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* compact walkthrough controls (operator 2026-09-09): the 360 overlay
 * buttons (Follow path etc.), the nav row, and the minimap/3D pane
 * toolbars (+ − Fit …) all get smaller paddings/text */
.pano-controls .btn, .wt-nav .btn, .pane-toolbar .btn {
  padding: 4px 9px; font-size: 12.5px; line-height: 1.4; border-radius: 5px;
}
.pano-controls { gap: 8px; padding: 5px 9px; }
.wt-nav { gap: 8px; padding: 6px 12px; }
.pane-toolbar { gap: 4px; }
.pano-controls .muted { color: #cfe0ef; }
.wt-bottom { display: flex; flex-direction: row; }
.wt-plan, .wt-3d { min-width: 0; flex: 1 1 0%; }   /* allow shrinking below canvas content */
.wt-plan.float-map {
  position: fixed; z-index: 60; width: 380px; flex: none;
  box-shadow: 0 8px 30px rgba(12, 25, 43, .35); border-radius: var(--radius);
}
.wt-plan.float-map .pane-toolbar { cursor: move; }
/* floating minimap: the user's resize height wins — no min-height ceiling */
.wt-plan.float-map .plan-canvas-wrap { min-height: 0; }
.wt-plan .float-resize { display: none; }
.wt-plan.float-map .float-resize {
  display: block;
  position: absolute;
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 55%, var(--line) 55% 65%, transparent 65%);
  opacity: .85;
}
.wt-plan.float-map .float-resize:hover { opacity: 1; }
.wt-bottom.one-panel .wt-splitter { display: none; }
.wt-splitter {
  flex: none; width: 10px; cursor: col-resize; position: relative;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.wt-splitter::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 4px; right: 4px;
  background: var(--line); border-radius: 4px;
}
.wt-splitter:hover::after { background: var(--accent); }
/* horizontal divider between the 360 stack and the docked minimap row
 * (operator 2026-09-08): drag up = taller minimap / smaller 360, down =
 * taller 360. Shown by JS only in grid mode with the minimap docked. */
.wt-hsplit {
  display: none; flex: none; height: 10px; cursor: row-resize;
  position: relative; touch-action: none;
}
.wt-hsplit:not([hidden]) { display: block; }
.wt-hsplit::after {
  content: ''; position: absolute; left: 0; right: 0; top: 4px; bottom: 4px;
  background: var(--line); border-radius: 4px;
}
.wt-hsplit:hover::after { background: var(--accent); }
@media (max-width: 900px) {
  .wt-bottom { flex-direction: column; }
  .wt-splitter { width: auto; height: 10px; cursor: row-resize; }
  .wt-splitter::after { top: 4px; bottom: 4px; left: 0; right: 0; }
}
/* narrow / mobile */
@media (max-width: 900px) {
  #pano-container { height: 45vh; min-height: 260px; }
  .wt-plan .plan-canvas-wrap, .wt-3d #traj-container { height: 300px; }
  .pano-controls { gap: 6px; padding: 5px 8px; }
}
@media (max-width: 520px) {
  .walkthrough { gap: 8px; }
  #pano-container { height: 40vh; min-height: 220px; }
  .pano-hud { font-size: 11px; padding: 4px 8px; }
  .pano-controls { font-size: 12px; }
  .pano-controls .btn, .wt-nav .btn, .pane-toolbar .btn { padding: 5px 8px; font-size: 12px; }
  .wt-status { font-size: 12px; gap: 8px; }
  .wt-plan .plan-canvas-wrap, .wt-3d #traj-container { height: 250px; }
}
.wt-plan, .wt-3d { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
/* accuracy footer moved directly under the 360 panel (walkthrough only):
   default 26/36px page-bottom margins would waste viewport height there */
.walkthrough > footer.foot { margin: 0 2px; padding: 0 2px; }

/* ---------- full-viewport walkthrough (operator 2026-09-08): the entire
 * <main> fits the window — no vertical scrollbar. body.wt-page is a flex
 * column: topbar + main(flex) ; .walkthrough stretches, the 360 panel takes
 * whatever height is left, the minimap/3D row shrinks rather than pushing
 * content off-screen. Specificity (body.wt-page …) overrides the fixed-px
 * and vh rules above, including inside media queries. ---------- */
body.wt-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.wt-page > main {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 10px 16px 12px;
}
body.wt-page .page-head { flex: none; }
body.wt-page .walkthrough { flex: 1 1 auto; min-height: 0; gap: 8px; }
/* flex-basis 0, not auto: the pano's height must come from flex distribution
 * alone — basis:auto makes it circular (its content is the renderer canvas,
 * whose inline px size mirrors the container), which froze the pano at
 * min-height instead of absorbing the collapsed-row space */
body.wt-page .wt-pano { flex: 1 1 0%; min-height: 150px; }
body.wt-page #pano-container { height: 100%; min-height: 0; }
body.wt-page .wt-nav, body.wt-page .wt-status, body.wt-page .walkthrough > footer.foot { flex: none; }
body.wt-page .wt-bottom { flex: 0 1 auto; min-height: 140px; }
/* every child hidden (minimap off/floated + 3D off): collapse the row
 * completely — the 360 view takes the space (operator 2026-09-08) */
body.wt-page .wt-bottom:not(:has(> :not([hidden]))) { display: none; min-height: 0; }
body.wt-page .wt-bottom.wt-bottom-empty { display: none; min-height: 0; }
body.wt-page .wt-plan, body.wt-page .wt-3d {
  display: flex; flex-direction: column; min-height: 0;
}
body.wt-page .wt-plan .pane-toolbar,
body.wt-page .wt-3d .pane-toolbar,
body.wt-page .layer-toggles { flex: none; }
body.wt-page .wt-plan .plan-canvas-wrap,
body.wt-page .wt-3d #traj-container {
  flex: 1 1 auto; height: auto; min-height: 110px;
}
/* the floating minimap keeps its own (user-resized) height even in the
 * full-viewport layout */
body.wt-page .wt-plan.float-map .plan-canvas-wrap { min-height: 0; }
/* phones: fitting the WHOLE main without a scrollbar needs the rows that
 * stack vertically to give way — the 3D pane is the least essential there
 * (the minimap keeps the site context); tabs become one scrollable row */
@media (max-width: 640px) {
  body.wt-page > main { padding: 6px 10px 8px; }
  body.wt-page .tabs { flex-wrap: nowrap; overflow-x: auto; }
  body.wt-page .wt-3d, body.wt-page .wt-splitter { display: none; }
  body.wt-page .wt-pano { min-height: 130px; }
  body.wt-page .walkthrough { gap: 6px; }
  body.wt-page .wt-status { padding: 6px 10px; font-size: 12.5px; gap: 8px; }
  body.wt-page .topbar { padding: 6px 10px; }
}
@media (max-width: 400px) {
  body.wt-page .wt-pano { min-height: 110px; }
  body.wt-page .walkthrough > footer.foot { font-size: 10.5px; line-height: 1.35; }
}
@media (max-width: 520px) {
  body.wt-page .layer-toggles { display: none; }   /* keep the map, drop its toggle row */
  body.wt-page .wt-bottom { min-height: 110px; }
  body.wt-page .wt-plan .plan-canvas-wrap { min-height: 80px; }
}
.wt-plan .plan-canvas-wrap, .wt-3d #traj-container { height: 340px; }
.layer-toggles { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.layer-toggles label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }
.wt-status {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; font-size: 14px; font-variant-numeric: tabular-nums;
}
.wt-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 14px;
}
.wt-nav .muted { color: var(--muted); }
.wt-nav .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* bounce/reverse playback indicator */
.play-dir {
  display: inline-flex; align-items: center;
  background: #fef3c7; color: #92400e; border: 1px solid #f59e0b;
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600;
  animation: play-dir-pulse 1.1s ease-in-out infinite;
}
.play-dir[hidden] { display: none; }
@keyframes play-dir-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
/* playback settings dialog */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 18, 32, .55);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 22px; min-width: 340px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 10px;
}
.modal h3 { margin: 0 0 2px; }
.modal label { display: flex; align-items: center; gap: 8px; }
.modal input[type="number"] { width: 90px; }
.modal .muted { margin: 0; font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.remap-badge {
  background: #fef3c7; color: #92400e; border: 1px solid #f59e0b;
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600;
}

/* ---------- dashboard ---------- */
.dash-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.dash-toolbar .muted { color: var(--muted); font-size: 14px; }
.dash-views { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-views .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dash-count { margin-right: 4px; }
.dash-live { font-size: 13px; }
.dash-grid { display: grid; gap: 16px; }
.dash-grid.big { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.dash-grid.medium { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dash-grid.small { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.dash-grid .card { margin: 0; }
.card.pinned { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dash-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
/* quiet pencil beside the project name = rename (replaces the big button) */
.plan-name-tag {
  display: inline-block; vertical-align: 2px; margin-left: 10px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
}
.name-edit {
  border: 0; background: none; padding: 1px 4px; margin-left: 2px;
  font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted);
  vertical-align: middle;
}
.name-edit:hover { color: var(--accent-dark); }
.btn-danger { border-color: #fca5a5; color: #b91c1c; }
.btn-danger:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.dash-list { width: 100%; border-collapse: collapse; background: var(--panel); }
.dash-list th, .dash-list td {
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  text-align: left; font-size: 14px; vertical-align: middle;
}
.dash-list th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #f8fafc; }
.dash-list tr.pinned-row td { background: #f0f7fd; }
.dash-list .btn { padding: 4px 8px; font-size: 13px; }
.card-thumb-link { display: block; text-decoration: none; }
.card-thumb {
  display: block; width: 100%; height: 130px; object-fit: cover;
  border-radius: 6px; margin-bottom: 10px; background: #eef2f6;
}
.card-thumb-link:hover .card-thumb { opacity: .88; }
.td-name .card-thumb-link { display: inline-flex; }
.dash-grid.small .card-thumb { height: 90px; }
.thumb-mini { width: 56px; height: 34px; object-fit: cover; border-radius: 4px; margin: 0 8px 0 0; vertical-align: middle; }
.td-name { display: flex; align-items: center; }
.wide-table-wrap { overflow-x: auto; }

/* ---------- dashboard: sort by plan (grouped) ---------- */
.plan-group { margin-bottom: 26px; }
.plan-group-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 2px 10px;
  cursor: pointer; user-select: none;
}
.plan-group-head:hover .plan-group-title h2 { color: var(--accent); }
.plan-group-chevron { margin-left: auto; color: var(--muted); font-size: 14px; padding: 2px 6px; }
.plan-group.collapsed .plan-group-head { margin-bottom: 14px; }
.plan-group-thumb {
  width: 96px; height: 64px; object-fit: contain; flex: none;
  background: #f1f5f9; border: 1px solid var(--line); border-radius: 6px;
}
.plan-group-thumb-empty {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--muted);
}
.plan-group-title { min-width: 0; }
.plan-group-title h2 { margin: 0; font-size: 17px; }
.plan-group-count { display: block; margin-top: 2px; }

/* ---------- new-walk: plan-first picker ---------- */
.plan-step-h {
  margin: 22px 0 10px; font-size: 15px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted);
}
.plan-picker {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.plan-pick { display: block; cursor: pointer; }
.plan-pick input { position: absolute; opacity: 0; pointer-events: none; }
.plan-pick-body {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  border: 2px solid var(--line); border-radius: 8px; padding: 8px;
  background: var(--panel);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.plan-pick:hover .plan-pick-body { border-color: var(--accent-dark, #2f6fb8); }
.plan-pick.selected .plan-pick-body, .plan-pick:has(input:checked) .plan-pick-body {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 1px 4px rgba(16,32,46,.08);
}
.plan-pick-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 88px; background: #f1f5f9; border-radius: 6px; overflow: hidden;
}
.plan-pick-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.plan-pick-empty { font-size: 26px; color: var(--muted); }
.plan-pick-title {
  font-weight: 600; font-size: 13.5px; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.plan-pick-sub { font-size: 12px; color: var(--muted); line-height: 1.3; }
#plan-upload-reveal { margin-top: 10px; }
.plan-chip {
  margin: 4px 0 10px; padding: 8px 12px; font-size: 13.5px;
  background: #f0f7fd; border: 1px solid #cfe1f5; border-radius: 8px;
}
.plan-chip-none { background: #fffbeb; border-color: #fde68a; }
@media (max-width: 640px) {
  .plan-picker { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .plan-pick-body { padding: 6px; }
  .plan-pick-thumb { height: 68px; }
  .plan-group-thumb { width: 72px; height: 48px; }
  .plan-group-title h2 { font-size: 15.5px; }
}

/* ---------- diagnostics ---------- */
.quality-chart { background: #f8fafc; border: 1px solid var(--line); border-radius: 6px; padding: 14px; min-height: 220px; }

/* ---------- misc ---------- */
.status-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }

/* ---------- multi-user / admin ---------- */
.owner-chip { font-size: 11px; color: var(--muted); background: #eef2f6; border-radius: 10px; padding: 1px 8px; margin-left: 8px; }
/* site (tenant) pill — shown wherever the owning site matters (topbar next
   to the user, dashboard owner chips, walk page owner line, plan library) */
.site-pill {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.2px;
  color: #155a8a; background: #dcecf9; border: 1px solid #b9d7ef;
  border-radius: 999px; padding: 0 8px; margin-left: 8px; white-space: nowrap;
}
/* floor-plan page: current-plan thumbnail block */
.fp-plan { display: flex; align-items: center; gap: 14px; margin: 12px 0; }
.fp-plan-thumb {
  width: 140px; max-height: 120px; object-fit: contain; flex: none;
  background: #f1f5f9; border: 1px solid var(--line); border-radius: 6px;
}
.fp-plan-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.topbar .site-pill { color: #bcd6ec; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.page-head .sub .site-pill { margin-left: 6px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-grid .card h3 { margin-top: 0; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* was white-space:nowrap — forced the confirm buttons onto one 620px line, overflowing phones */
.auth-card p a { color: var(--accent); }
.auth-card .muted { font-size: 13px; margin: 12px 0 0; }
.form-card .check { display: flex; align-items: center; gap: 6px; }
.form-card .check input { width: auto; }
.form-card hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- storage page keep/purge markers ---------- */
.tick-kept { color: #15803d; font-weight: 600; font-size: 12px; margin-left: 6px; white-space: nowrap; }

/* ---------- floor-plan library (spec §20bis) ---------- */
.plans-page h2 { margin: 18px 0 10px; }
.plans-upload { max-width: none; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.plan-card { display: flex; gap: 12px; background: var(--card, #fff); border: 1px solid var(--line, #dbe3ec); border-radius: 8px; padding: 12px; }
.plan-thumb { flex: 0 0 132px; }
.plan-thumb img { width: 132px; height: 100px; object-fit: contain; background: #f1f5f9; border-radius: 6px; border: 1px solid var(--line, #dbe3ec); }
.plan-body { flex: 1; min-width: 0; font-size: 13px; }
.plan-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.plan-notes { margin: 4px 0; color: #475569; }
.plan-refs { margin: 4px 0; overflow-wrap: anywhere; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-actions .muted { align-self: center; }
.share-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2f6; border-radius: 10px; padding: 1px 8px; font-size: 12px; margin: 0 2px; }
.btn-mini { padding: 0 5px; font-size: 11px; line-height: 16px; border: 1px solid var(--line, #dbe3ec); background: #fff; border-radius: 4px; cursor: pointer; }
.pill { display: inline-block; font-size: 11px; background: #e0ecfb; color: #0b6bcb; border-radius: 10px; padding: 1px 8px; vertical-align: middle; }
.pill-lib { background: #ede9fe; color: #6d28d9; }
.plans-modal { width: min(860px, 94vw); }
.plans-modal .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plans-modal .modal-head h3 { margin: 0; }
.scale-canvas-wrap { position: relative; height: 46vh; min-height: 260px; background: #0f172a; border-radius: 6px; overflow: hidden; }
.scale-canvas-wrap canvas { position: absolute; inset: 0; cursor: crosshair; }
.scale-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 10px; }
.scale-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #475569; }
.share-list { list-style: none; padding: 0; margin: 10px 0 0; }

/* ---------- side-by-side compare walkthrough ---------- */
.cmp { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 190px); min-height: 480px; }
.cmp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-bar .muted { font-size: 12px; }
.cmp-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.cmp-panes { --cmp-a-w: 50%; flex: 1; display: flex; min-height: 240px; }
.cmp-pane { display: flex; flex-direction: column; min-width: 180px; border: 1px solid var(--line, #dbe3ec); border-radius: 8px; overflow: hidden; background: #0b1220; }
#cmp-pane-a { flex: 0 0 var(--cmp-a-w); }
#cmp-pane-b { flex: 1; }
.cmp-pane-head { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #f1f5f9; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line, #dbe3ec); }
.cmp-pane-date { font-weight: 400; }
.cmp-frame { flex: 1; width: 100%; border: 0; }
.cmp-split { flex: 0 0 6px; cursor: col-resize; background: var(--line, #dbe3ec); border-radius: 3px; }
.cmp-split:hover { background: #93c5fd; }
.cmp-hsplit {
  flex: none; height: 10px; cursor: row-resize; position: relative;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.cmp-hsplit::after {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 0; right: 0;
  background: var(--line, #dbe3ec); border-radius: 4px;
}
.cmp-hsplit:hover::after { background: var(--accent); }
/* divider drag in flight: the embedded 360 panes must not capture the
   pointer, or mousemove/mouseup vanish the moment the cursor crosses them */
body.cmp-dragging { user-select: none; -webkit-user-select: none; }
body.cmp-dragging .cmp-frame { pointer-events: none; }
.cmp-map-wrap { flex: 0 0 240px; display: flex; flex-direction: column; border: 1px solid var(--line, #dbe3ec); border-radius: 8px; background: #fff; position: relative; }
/* shared minimap popped out into its OWN BROWSER WINDOW (operator
 * 2026-09-08): the wrap fills the popup (which loads this same stylesheet);
 * the compare page shows a slim slot in its place */
.cmp-map-wrap.popped { position: static; flex: 1 1 auto; width: auto; height: auto; }
.cmp-map-slot {
  flex: 0 0 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border: 1px dashed var(--line); border-radius: 8px; color: var(--muted);
  font-size: 13.5px; background: #f8fafc;
}
/* toolbar + layer toggles never shrink/clip when the strip is resized small —
   the map canvas is the only part that yields */
.cmp-map-wrap .pane-toolbar, .cmp-map-wrap .layer-toggles { flex: none; }
.cmp-map { flex: 1; position: relative; }
.cmp-map canvas { position: absolute; inset: 0; }
.cmp-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-left: 8px; }
.cmp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cmp-dot-a { background: #0b6bcb; }
.cmp-dot-b { background: #7c3aed; }

/* ⚖ Compare popover on the single walkthrough */
.cmp-wrap { position: relative; }
.cmp-pop { position: absolute; right: 0; top: 110%; z-index: 40; background: #fff; border: 1px solid var(--line, #dbe3ec); border-radius: 8px; box-shadow: 0 10px 28px rgba(2,8,20,.18); padding: 8px; min-width: 280px; max-height: 300px; overflow: auto; }
.cmp-pop-title { font-size: 12px; color: #64748b; margin: 2px 4px 6px; }
.cmp-pop-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cmp-pop-item:hover { background: #eef2f6; }

/* ---------- embedded walkthrough pane (?embed=1) ---------- */
body.bare { margin: 0; }
body.bare main { padding: 0 !important; max-width: none !important; }
.walkthrough.wt-embed { height: 100vh; }
.walkthrough.wt-embed .wt-bottom,
.walkthrough.wt-embed #wt-toggle-plan,
.walkthrough.wt-embed #wt-splitter,
.walkthrough.wt-embed #pano-fullscreen { display: none !important; }
/* embedded pane: pano fills the iframe height (no minimap row below it) */
.walkthrough.wt-embed .wt-pano { flex: 1; min-height: 0; }
.walkthrough.wt-embed #pano-container { height: 100%; min-height: 0; }
.walkthrough.wt-embed .wt-status { font-size: 11px; }
/* the shared compare map shares .plan-canvas-wrap with the calibration page —
   its 320px min-height would inflate the strip and push the toggles out, so
   cap it here (the canvas wrap itself carries both classes — a descendant
   selector on .cmp-map never matches it) */
.cmp-map-wrap { min-height: 0; }
.cmp-map-wrap .plan-canvas-wrap { min-height: 0; flex: 1; }