/* ------------------------------------------------------------------------
   inventory walker — our own skin, deliberately kept out of the upstream
   Potree build so Potree can be upgraded without losing any of this.
   Everything here is namespaced under .iw- or #iw-.

   The composition: the point cloud is the hero, the chrome is glass laid
   over it. Four corners and nothing in the middle.

      top-left      identity + inventory tabs
      left          the class legend (the centrepiece, in Classes mode)
      top-right     RGB | Classes  — the mode switch
      bottom-centre the walker strip: nav, object id, verdict chips
      bottom-right  "? keys", and nothing else

   One accent only: the scheme's "Pole" magenta. Everything else is grey.
   ------------------------------------------------------------------------ */

:root {
  /* glass: a near-black ground at 70 %, hairlines at 8 % white */
  --iw-glass:      rgba(9, 10, 13, 0.70);
  --iw-glass-up:   rgba(255, 255, 255, 0.045);   /* raised control on glass  */
  --iw-glass-hov:  rgba(255, 255, 255, 0.085);
  --iw-solid:      #0a0b0e;
  --iw-hair:       rgba(255, 255, 255, 0.08);
  --iw-hair-soft:  rgba(255, 255, 255, 0.05);

  --iw-ink:        #eceef2;
  --iw-ink-dim:    #99a0ac;
  --iw-ink-faint:  #6b7280;

  /* the one accent — the scheme's "Pole" magenta — active/selected state only */
  --iw-accent:     #ff82ff;
  --iw-accent-ink: #1b0a1b;
  --iw-accent-wash:rgba(255, 130, 255, 0.14);
  --iw-accent-line:rgba(255, 130, 255, 0.44);

  --iw-r:          11px;
  --iw-r-sm:       8px;
  --iw-t:          .13s;
  --iw-shadow:     0 16px 44px -14px rgba(0, 0, 0, 0.78);
  --iw-gap:        16px;
  --iw-left:       88px;   /* clear of Potree's menu toggle AND the stats.js FPS panel */

  --iw-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --iw-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

/* the page itself ------------------------------------------------------- */
html, body { margin: 0; padding: 0; height: 100%; background: #07080b; }

/* keep this: it gives the cloud a sky to sit under */
#potree_render_area { background: radial-gradient(120% 110% at 70% 0%, #1a2030 0%, #07080b 70%); }

/* shared chrome --------------------------------------------------------- */
.iw-panel {
  position: absolute;
  z-index: 1000;
  color: var(--iw-ink);
  font-family: var(--iw-sans);
  font-size: 12px;
  background: var(--iw-glass);
  border: 1px solid var(--iw-hair);
  border-radius: var(--iw-r);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: var(--iw-shadow);
}

.iw-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--iw-ink-faint);
  font-weight: 600;
}

kbd {
  font-family: var(--iw-mono);
  font-size: 9.5px;
  line-height: 1;
  padding: 3px 4px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--iw-hair);
  color: var(--iw-ink-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* one focus ring for everything clickable — an operator tool lives on these */
.iw-panel button,
#iw-keys { font-family: inherit; }
button:focus-visible,
[tabindex]:focus-visible,
.iw-lrow:focus-visible {
  outline: 2px solid var(--iw-accent);
  outline-offset: 2px;
  border-radius: var(--iw-r-sm);
}

/* --------------------------------------------------------- the left column
   identity on top, the class legend beneath it. A flex column rather than
   two absolutely-placed panels, so the legend follows the title however many
   lines the inventory tabs wrap onto. The wrapper itself must not eat mouse
   drags meant for the cloud, hence pointer-events: none on it. */
#iw-col-left {
  position: absolute; z-index: 1000;
  top: var(--iw-gap); left: var(--iw-left);
  width: 252px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100% - 2 * var(--iw-gap));
  pointer-events: none;
}
#iw-col-left > .iw-panel {
  position: relative;
  top: auto; left: auto; right: auto; bottom: auto;
  width: auto;
  pointer-events: auto;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------- identity */
#iw-title {
  padding: 12px 15px 0;
  overflow: hidden;
}
#iw-title h1 {
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
#iw-title .iw-sub {
  margin: 4px 0 12px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--iw-ink-dim);
  font-variant-numeric: tabular-nums;
}
#iw-title .iw-sub .q { color: var(--iw-ink-faint); }
#iw-title .iw-sub .bad { color: var(--iw-ink); }

/* inventory tabs — top-left, one click away, under the identity ---------- */
.iw-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 9px 0 11px;
  border-top: 1px solid var(--iw-hair-soft);
  /* 306-5 went from 9 inventories to 14 and the column grew past the window,
     pushing the class legend off the bottom where nothing could reach it.
     The tab list scrolls inside its own panel instead, so however many tabs a
     mission grows, the legend and the curb switch stay where they were. */
  max-height: 26vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.iw-tabs::-webkit-scrollbar { width: 7px; }
.iw-tabs::-webkit-scrollbar-thumb {
  background: var(--iw-glass-up); border-radius: 4px;
}
.iw-tab {
  appearance: none;
  border: 1px solid transparent;
  background: var(--iw-glass-up);
  color: var(--iw-ink-dim);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 8px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--iw-t) ease, color var(--iw-t) ease,
              border-color var(--iw-t) ease;
  display: flex; align-items: baseline; gap: 5px;
}
.iw-tab:hover { background: var(--iw-glass-hov); color: var(--iw-ink); }
.iw-tab .n {
  font-family: var(--iw-mono);
  font-size: 9.5px;
  color: var(--iw-ink-faint);
  font-variant-numeric: tabular-nums;
}
.iw-tab[aria-selected="true"] {
  background: var(--iw-accent-wash);
  border-color: var(--iw-accent-line);
  color: #fff;
}
.iw-tab[aria-selected="true"] .n { color: var(--iw-accent); }

/* ------------------------------------------------------------ mode switch */
#iw-modes {
  top: var(--iw-gap); right: var(--iw-gap);
  padding: 7px 8px;
  display: flex; align-items: center; gap: 8px;
}
.iw-seg {
  display: flex; gap: 3px;
  padding: 3px;
  border-radius: var(--iw-r-sm);
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--iw-hair-soft);
}
.iw-segbtn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent;
  color: var(--iw-ink-dim);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 13px 7px;
  border-radius: 6px;
  transition: background var(--iw-t) ease, color var(--iw-t) ease;
}
.iw-segbtn:hover { background: var(--iw-glass-hov); color: var(--iw-ink); }
.iw-segbtn[aria-pressed="true"] {
  background: var(--iw-accent);
  color: var(--iw-accent-ink);
  box-shadow: 0 2px 10px -2px rgba(255, 130, 255, 0.55);
}
.iw-segbtn[aria-pressed="true"]:hover { background: var(--iw-accent); color: var(--iw-accent-ink); }
.iw-segbtn[disabled] { opacity: .32; cursor: not-allowed; }
#iw-modes kbd { margin-right: 2px; }

/* ----------------------------------------------------------- class legend */
/* the link out: a view worth showing is a view someone else can be put in
   front of, so the address of the current one is one click away */
/* Igor, looking for it: "mozes napraviti share dugme? ne vidim ga".  It was
   there, a 10.5 px grey pill under the subtitle.  A control that gets pressed
   every few minutes of a demonstration has to be findable without hunting, so
   it now reads as the action it is. */
.iw-share {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; width: 100%;
  margin: 11px 0 2px; padding: 8px 11px;
  border: 1px solid var(--iw-accent-line); border-radius: var(--iw-r-sm);
  background: var(--iw-accent-wash); color: var(--iw-ink);
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  transition: background var(--iw-t), border-color var(--iw-t);
}
.iw-share::before {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--iw-accent);
}
.iw-share:hover { background: rgba(255, 130, 255, 0.22); border-color: var(--iw-accent); }
.iw-share:focus-visible { outline: 2px solid var(--iw-accent); outline-offset: 2px; }
.iw-share kbd { margin-left: auto; font-size: 10px; }

/* right column: the class legend lives here now. It is read once at the start
   and then rarely touched, while the left column carries the things a review
   uses constantly -- and with 16 inventory tabs the left column had no room
   left anyway. */
#iw-col-right {
  position: absolute; z-index: 1000;
  top: calc(var(--iw-gap) + 52px);          /* clear of the RGB/Classes switch */
  right: var(--iw-gap);
  width: 236px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100% - 2 * var(--iw-gap) - 52px);
  pointer-events: none;
}
#iw-col-right > .iw-panel {
  position: relative; top: auto; left: auto; right: auto; bottom: auto;
  width: auto; pointer-events: auto; flex: 0 0 auto;
}
#iw-legend.folded #iw-legend-rows,
#iw-legend.folded #iw-legend-foot { display: none; }
#iw-legend.folded #iw-legend-head { padding-bottom: 0; }

/* the surveyed line is a switch, not a caption */
button.iw-crow-line {
  appearance: none; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; font: inherit; padding: 3px 0;
  display: flex; align-items: center; gap: 8px;
}
button.iw-crow-line:hover .nm { color: var(--iw-ink); }
button.iw-crow-line[aria-pressed="false"] { opacity: 0.45; }
button.iw-crow-line kbd { margin-left: auto; }

#iw-legend {
  padding: 11px 7px 8px;
  display: none;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
/* .on now means "the displayed cloud HAS a classification", not "mode is
   Classes": the class filter is a shader discard that bites in RGB mode too,
   so its control has to be on screen in both modes. */
#iw-legend.on { display: block; flex: 0 1 auto; }
/* in RGB mode the swatch is a key to a colouring you are not looking at, so
   it is quietened -- the row still toggles the class. */
#iw-legend.rgbmode .iw-lrow .sw { opacity: .5; }
#iw-legend-foot .iw-both { color: var(--iw-ink-faint); }
#iw-legend.rgbmode #iw-legend-foot .iw-both { color: var(--iw-ink-dim); }
#iw-legend-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 8px 9px;
}
#iw-legend-head .iw-eyebrow { flex: 1 1 auto; white-space: nowrap; }
.iw-mini {
  appearance: none; border: 0; background: transparent;
  color: var(--iw-ink-faint);
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 4px; border-radius: 5px;
  cursor: pointer;
  transition: color var(--iw-t) ease, background var(--iw-t) ease;
}
.iw-mini:hover { color: var(--iw-ink); background: var(--iw-glass-hov); }
#iw-legend-head .sep { color: rgba(255,255,255,0.14); font-size: 10px; }

.iw-lrow {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--iw-ink-dim);
  font-family: var(--iw-sans); font-size: 11.5px;
  text-align: left;
  padding: 5px 8px 6px;
  border-radius: 7px;
  cursor: pointer;
  transition: background var(--iw-t) ease, color var(--iw-t) ease,
              opacity var(--iw-t) ease, border-color var(--iw-t) ease;
}
.iw-lrow:hover { background: var(--iw-glass-hov); color: var(--iw-ink); }
.iw-lrow .sw {
  width: 10px; height: 10px; border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset;
  transition: box-shadow var(--iw-t) ease;
}
.iw-lrow .nm { flex: 1 1 auto; letter-spacing: -0.005em; }
.iw-lrow .pct {
  font-family: var(--iw-mono); font-size: 10.5px;
  color: var(--iw-ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right; min-width: 44px;
}
/* hidden class: visibly dimmed, swatch hollowed out */
.iw-lrow[aria-pressed="false"] { opacity: .34; }
.iw-lrow[aria-pressed="false"] .sw {
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}
/* the isolated class */
.iw-lrow.solo {
  background: var(--iw-accent-wash);
  border-color: var(--iw-accent-line);
  color: #fff;
}
.iw-lrow.solo .pct { color: var(--iw-accent); }

#iw-legend-foot {
  padding: 8px 8px 1px;
  margin-top: 4px;
  border-top: 1px solid var(--iw-hair-soft);
  font-size: 10px; line-height: 1.5;
  color: var(--iw-ink-faint);
}
#iw-legend-foot b { color: var(--iw-ink-dim); font-weight: 600; }

/* ---------------------------------------------------------- walker strip */
#iw-walk {
  left: 50%; transform: translateX(-50%);
  bottom: var(--iw-gap);
  max-width: min(94vw, 1080px);
  padding: 12px 14px 12px;
  overflow: hidden;
}
#iw-progress {
  position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: rgba(255, 255, 255, 0.06);
  display: block;
}
#iw-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--iw-accent);
  transition: width .2s ease;
}
.iw-walk-nav {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--iw-hair-soft);
}
.iw-nav {
  appearance: none; cursor: pointer;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--iw-glass-up);
  color: var(--iw-ink-dim);
  font-size: 15px; line-height: 1;
  transition: background var(--iw-t) ease, color var(--iw-t) ease;
}
.iw-nav:hover { background: var(--iw-glass-hov); color: var(--iw-ink); }
#iw-pos {
  font-family: var(--iw-mono); font-size: 12px;
  color: var(--iw-ink);
  font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: center;
}
.iw-vrule { width: 1px; height: 18px; background: var(--iw-hair); flex: 0 0 auto; }
#iw-objid {
  font-family: var(--iw-mono); font-size: 11.5px;
  color: var(--iw-ink);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px;
}
#iw-walk-meta {
  margin-left: auto;
  font-size: 10.5px; color: var(--iw-ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* verdict chips — greyscale, accent when set */
.iw-vgrid { display: flex; flex-wrap: wrap; gap: 4px; }
.iw-vbtn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px 6px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--iw-glass-up);
  color: var(--iw-ink-dim);
  font-family: var(--iw-sans); font-size: 11px;
  cursor: pointer; text-align: left;
  transition: background var(--iw-t) ease, color var(--iw-t) ease,
              border-color var(--iw-t) ease;
}
.iw-vbtn:hover { background: var(--iw-glass-hov); color: var(--iw-ink); }
.iw-vbtn .lbl { flex: 1 1 auto; white-space: nowrap; }
.iw-vbtn.on {
  background: var(--iw-accent-wash);
  border-color: var(--iw-accent-line);
  color: #fff;
}
.iw-vbtn.on kbd { color: var(--iw-accent); border-color: var(--iw-accent-line); }

/* ------------------------------------------------------- bottom-right key */
#iw-keys {
  appearance: none;
  right: var(--iw-gap); bottom: var(--iw-gap);
  padding: 7px 11px 8px;
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--iw-ink-faint);
  cursor: pointer;
  transition: color var(--iw-t) ease, background var(--iw-t) ease;
}
#iw-keys:hover { color: var(--iw-ink); background: rgba(14, 16, 20, 0.80); }

/* fold a panel down to its own header: the pictures are 196 px tall and the
   verdict grid is another 60, which is most of a laptop screen when the point
   of the exercise is to look AT the cloud */
.iw-min {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 20px; height: 18px; line-height: 1; margin-left: 8px;
  border: 1px solid var(--iw-hair); border-radius: var(--iw-r-sm);
  background: var(--iw-glass-up); color: var(--iw-ink-dim);
  font: inherit; font-size: 13px; padding: 0;
}
.iw-min:hover { color: var(--iw-ink); }
#iw-photos.folded #iw-strip,
#iw-walk.folded .iw-vgrid { display: none; }
#iw-walk.folded { padding-bottom: 8px; }
#iw-photos.folded #iw-photos-head { padding-bottom: 0; }

/* which overlay is on screen: one chip per baked set, shown only when a
   mission has more than one (C walks them in the same order) */
#iw-curb-sets {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0 7px;
}
.iw-cset {
  appearance: none; cursor: pointer;
  border: 1px solid var(--iw-hair); border-radius: 999px;
  background: var(--iw-glass-up); color: var(--iw-ink-dim);
  font: inherit; font-size: 10.5px; padding: 2px 9px;
}
.iw-cset:hover { color: var(--iw-ink); }
.iw-cset[aria-pressed="true"] {
  background: var(--iw-accent-soft, rgba(201,120,255,0.18));
  border-color: var(--iw-accent, #c978ff); color: #fff;
}

/* ------------------------------------------------------------ photo popup */
#iw-photos {
  left: 50%; transform: translateX(-50%);
  bottom: 126px;
  max-width: min(62vw, 1000px);
  padding: 9px 11px 11px;
  display: none;
}
#iw-photos.on { display: block; }
#iw-photos-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 3px 8px;
}
#iw-photos-head .who {
  font-family: var(--iw-mono); font-size: 11px; color: var(--iw-ink);
}
#iw-photos-head .meta {
  font-size: 10.5px; color: var(--iw-ink-faint); margin-left: auto;
  font-variant-numeric: tabular-nums;
}
#iw-strip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
#iw-strip::-webkit-scrollbar { height: 7px; }
#iw-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 4px; }
#iw-strip img {
  height: 196px; width: auto; border-radius: var(--iw-r-sm); display: block;
  border: 1px solid var(--iw-hair);
  background: #11131a;
  cursor: zoom-in;
  transition: outline-color var(--iw-t) ease;
  outline: 2px solid transparent; outline-offset: 1px;
}
#iw-strip img.sel { outline-color: var(--iw-accent); }
.iw-nophoto {
  padding: 22px 18px; text-align: center;
  font-size: 11.5px; color: var(--iw-ink-faint);
  border: 1px dashed var(--iw-hair); border-radius: var(--iw-r-sm);
  min-width: 320px;
}

/* lightbox */
#iw-lightbox {
  position: absolute; inset: 0; z-index: 2000; display: none;
  background: rgba(4, 5, 8, 0.92);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center; cursor: zoom-out;
}
#iw-lightbox.on { display: flex; }
#iw-lightbox img {
  max-width: 92vw; max-height: 92vh; border-radius: 10px;
  border: 1px solid var(--iw-hair);
  box-shadow: 0 30px 80px -20px #000;
}

/* ------------------------------------------------------------ help overlay */
#iw-help {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 20px 24px 22px; width: 580px; display: none;
  z-index: 1600;
  max-height: 84vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
#iw-help.on { display: block; }
#iw-help h2 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
#iw-help p.lead { margin: 0 0 16px; font-size: 11.5px; color: var(--iw-ink-dim); }
#iw-help table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
#iw-help td { padding: 4px 0; vertical-align: top; }
#iw-help td:first-child { width: 168px; white-space: nowrap; }
#iw-help td:last-child { color: var(--iw-ink-dim); }
#iw-help h3 {
  margin: 16px 0 5px; font-size: 9.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--iw-ink-faint); font-weight: 600;
}
#iw-help-close {
  position: absolute; top: 12px; right: 12px;
  appearance: none; border: 1px solid transparent;
  background: var(--iw-glass-up);
  color: var(--iw-ink-dim);
  width: 24px; height: 24px; border-radius: 7px;
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: background var(--iw-t) ease, color var(--iw-t) ease;
}
#iw-help-close:hover { background: var(--iw-glass-hov); color: var(--iw-ink); }

/* ------------------------------------------------------------------ toast */
/* top-centre: the bottom of the screen now belongs to the walker strip */
#iw-toast {
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%) translateY(-8px);
  z-index: 1500;
  padding: 8px 14px 9px; border-radius: var(--iw-r);
  background: var(--iw-solid); border: 1px solid var(--iw-hair);
  color: var(--iw-ink); font-family: var(--iw-sans); font-size: 12px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: var(--iw-shadow);
  font-variant-numeric: tabular-nums;
}
#iw-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#iw-toast .sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; }

/* keep Potree's own sidebar above the cloud but below nothing of ours */
#potree_sidebar_container { z-index: 1100; }
/* \ opens Potree's own 300 px sidebar over this corner; the left column steps
   aside rather than hiding under it (it is z-index 1100, we are 1000). */
body.iw-sidebar-open #iw-col-left { left: calc(300px + var(--iw-gap)); }

/* ------------------------------------------------- shorter viewports etc. */
@media (max-height: 760px) {
  #iw-strip img { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ------------------------------------------------------- curb overlay (C)
   sits in the left column between the title and the class legend. Collapsed it
   is one line (name, state, switch, key); on, it opens the colour key. */
#iw-curb { padding: 0; overflow: hidden; }
.iw-curbhead {
  display: flex; align-items: center; gap: 9px; width: 100%;
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 10px 14px; color: var(--iw-ink);
  transition: background var(--iw-t) ease;
}
.iw-curbhead:hover { background: var(--iw-glass-hov); }
.iw-curbhead .iw-eyebrow { flex: 1 1 auto; text-align: left; white-space: nowrap; }
.iw-curbstate {
  font-family: var(--iw-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--iw-ink-faint); min-width: 30px; text-align: right;
}
#iw-curb[data-on="true"] .iw-curbstate { color: var(--iw-accent); }
.iw-switch {
  position: relative; width: 26px; height: 15px; flex: 0 0 auto;
  border-radius: 8px; background: rgba(255,255,255,0.10);
  border: 1px solid var(--iw-hair);
  transition: background var(--iw-t) ease, border-color var(--iw-t) ease;
}
.iw-switch i {
  position: absolute; top: 2px; left: 2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--iw-ink-dim);
  transition: transform var(--iw-t) ease, background var(--iw-t) ease;
}
#iw-curb[data-on="true"] .iw-switch { background: var(--iw-accent-wash); border-color: var(--iw-accent-line); }
#iw-curb[data-on="true"] .iw-switch i { transform: translateX(11px); background: var(--iw-accent); }
#iw-curb-body { display: none; padding: 0 8px 10px; border-top: 1px solid var(--iw-hair-soft); }
/* how wide the overlay's bubble is right now -- see CURB_FAR in the page */
#iw-curb-far { padding: 8px 8px 0; font-size: 10.5px; line-height: 1.4;
               color: var(--iw-ink-faint); }
#iw-curb-far:empty { display: none; }
#iw-curb-far b { font-family: var(--iw-mono); font-weight: 600;
                 font-variant-numeric: tabular-nums; color: var(--iw-ink-dim); }
#iw-curb-far span { opacity: .7; }
#iw-curb[data-on="true"] #iw-curb-body { display: block; }
.iw-curbcap { padding: 9px 8px 5px; font-size: 10px; color: var(--iw-ink-faint); letter-spacing: .01em; }
.iw-crow {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 8px 4px; font-size: 11.5px; color: var(--iw-ink-dim);
}
.iw-crow .sw {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.85);
}
.iw-crow .swl {
  width: 10px; height: 3px; border-radius: 2px; flex: 0 0 auto; background: #fff;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.75);
}
.iw-crow .nm { flex: 1 1 auto; }
.iw-crow .pct {
  font-family: var(--iw-mono); font-size: 10.5px; color: var(--iw-ink-faint);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 44px;
}
.iw-crow-line { margin-top: 3px; }
#iw-curb-foot {
  margin: 6px 8px 0; padding-top: 8px; border-top: 1px solid var(--iw-hair-soft);
  font-size: 10px; line-height: 1.5; color: var(--iw-ink-faint);
}
#iw-curb-foot b { color: var(--iw-ink-dim); font-weight: 600; }

/* the evidence view's caption (key M) -- deliberately plain: the picture is
   the argument, the panel only says what you are looking at and how many
   points it is */
#iw-ev {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  max-width: 46rem;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(10, 14, 20, 0.82);
  border: 1px solid rgba(120, 200, 230, 0.28);
  color: #dfe9ef;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1700;          /* over the walker's own panels (1000-1600) */
}
#iw-ev.on { opacity: 1; }
#iw-ev.top { top: 18px; bottom: auto; }

/* while the evidence view is on, everything that is not the points gets out of
   the way -- faded, not removed, so the keyboard and the tests still work */
body.iw-ev-on #iw-col-left,
body.iw-ev-on .iw-panel,
body.iw-ev-on #iw-keys {
  opacity: 0.06;
  pointer-events: none;
  transition: opacity .25s ease;
}
#iw-ev b { color: #6fe3ff; font-weight: 600; }
#iw-ev .n { color: #fff; font-weight: 600; }
#iw-ev .q { color: #93a4ae; }

/* ------------------------------------------------------------------ tour
   A guided drive: the camera follows the survey vehicle's own route, stops
   at each thing worth showing, and says what it is. While it runs the camera
   is not the viewer's, so the tour gets the strip the walker normally has,
   and the walker's is hidden. */
/* the same accent as Share: both are "do this now" buttons, and the four
   band colours in this viewer mean distance to a surveyed line and nothing
   else -- they are data, never decoration on a control. */
.iw-tourbtn { margin-top: 6px; }

#iw-tour {
  left: 50%; transform: translateX(-50%);
  bottom: var(--iw-gap);
  max-width: min(94vw, 1080px);
  padding: 12px 14px;
  overflow: hidden;
}
#iw-tour[hidden] { display: none; }
#iw-tour-progress {
  position: absolute; left: 0; top: 0; right: 0; height: 2px;
  background: rgba(255, 255, 255, 0.06);
  display: block;
}
#iw-tour-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--iw-accent);
}
.iw-tour-row { display: flex; align-items: baseline; gap: 10px; }
.iw-tour-x { margin-left: auto; }
/* while flying, the panels that belong to hand-review get out of the way */
body.iw-tour-on #iw-walk,
body.iw-tour-on #iw-keys { display: none; }
body.iw-tour-on #iw-photos { opacity: .9; }

/* ------------------------------------------------------------------ tour 2
   The guided drive got its own card. Three pieces:

     #iw-tour        the strip, bottom centre: where we are, and the hint for
                     the one key that does everything
     #iw-tour-card   the text, top centre over the sky, so it never covers
                     the thing being shown or the photograph panel (which
                     sits bottom centre at 126 px)
     #iw-veil        near-black, over everything including the chrome, for
                     the four tenths of a second a long leg takes to cut

   The veil's duration is in two places -- here and tour.cfg.veil in the
   page. They have to agree.
   ------------------------------------------------------------------------ */
#iw-veil {
  position: fixed; inset: 0; z-index: 2400; pointer-events: none;
  background: #06070a; opacity: 0;
  transition: opacity .42s linear;
}
#iw-veil.on { opacity: 1; }

#iw-tour-card {
  position: absolute; z-index: 1200;
  left: 50%; top: var(--iw-gap);
  width: min(62vw, 760px);
  padding: 16px 20px 18px;
  border-radius: var(--iw-r);
  background: rgba(9, 10, 13, 0.78);
  border: 1px solid var(--iw-hair);
  box-shadow: var(--iw-shadow);
  backdrop-filter: blur(9px) saturate(130%);
  -webkit-backdrop-filter: blur(9px) saturate(130%);
  color: var(--iw-ink);
  font-family: var(--iw-sans);
  cursor: pointer;
  /* off: a little above where it lands, and out of the hit test entirely */
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
#iw-tour-card.on {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
#iw-tour-card #iw-tour-count {
  display: block; margin-bottom: 7px;
  font-family: var(--iw-mono); font-size: 10.5px; letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
  color: var(--iw-accent);
}
#iw-tour-card h2 {
  margin: 0; font-weight: 650;
  font-size: clamp(21px, 2.05vw, 33px); line-height: 1.04;
  letter-spacing: -.015em; text-wrap: balance;
}
#iw-tour-card p {
  margin: 9px 0 0; max-width: 62ch;
  font-size: clamp(12.5px, 1.05vw, 15px); line-height: 1.42;
  color: var(--iw-ink-dim);
}
@media (prefers-reduced-motion: reduce) {
  #iw-tour-card { transition: opacity .01s linear, visibility .01s; }
  #iw-veil { transition: opacity .01s linear; }
}

/* the strip, now that the title moved out of it */
#iw-tour-where { font-size: 13px; font-weight: 600; white-space: nowrap; }
#iw-tour-pos {
  font-family: var(--iw-mono); font-size: 10.5px; color: var(--iw-ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#iw-tour-hint {
  margin-left: auto; padding-right: 4px;
  font-size: 11px; color: var(--iw-ink-faint); white-space: nowrap;
}
#iw-tour .iw-tour-x { margin-left: 0; }
/* the Play button has nothing to offer once the tour is running */
body.iw-tour-on .iw-tourbtn { display: none; }

/* ------------------------------------------------------------ street view
   Standing inside one panorama. The panel is small on purpose: the picture
   is the thing, and the only control that matters is the slider.
   ------------------------------------------------------------------------ */
.iw-panobtn { margin-top: 6px; }
#iw-pano {
  left: var(--iw-left); bottom: var(--iw-gap);
  width: min(92vw, 360px); padding: 10px 12px 11px;
}
#iw-pano[hidden] { display: none; }
.iw-panohead { display: flex; align-items: baseline; gap: 10px; }
.iw-panofile {
  font-family: var(--iw-mono); font-size: 10.5px; color: var(--iw-ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iw-pano-x { margin-left: auto; }
.iw-panorow { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.iw-panorow input[type="range"] {
  flex: 1 1 auto; min-width: 0; accent-color: var(--iw-accent); height: 18px;
}
.iw-panomix {
  font-family: var(--iw-mono); font-size: 11px; color: var(--iw-ink);
  font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right;
}
.iw-panocap {
  margin-top: 6px; font-size: 10px; color: var(--iw-ink-faint);
  letter-spacing: .01em;
}
.iw-panocap b { color: var(--iw-ink-dim); font-weight: 500; }
/* the walker's strip would sit on top of the panel */
body.iw-pano-on #iw-walk { bottom: calc(var(--iw-gap) + 104px); }

/* ----------------------------------------------------------------- bare
   #bare=1 -- the cloud and nothing else, for embedding. The chrome is
   hidden rather than removed: every key and every overlay still works, so
   the tour drives exactly as it does anywhere else.
   ------------------------------------------------------------------------ */
body.iw-bare #iw-col-left,
body.iw-bare #iw-photos,
body.iw-bare #iw-walk,
body.iw-bare #iw-keys,
body.iw-bare #iw-pano,
body.iw-bare #iw-tour,
body.iw-bare #iw-tour-card,
body.iw-bare #iw-modes,
body.iw-bare #iw-legend,
body.iw-bare #iw-classes,
body.iw-bare #potree_sidebar_container,
body.iw-bare .potree_menu_toggle { display: none !important; }
body.iw-bare #potree_render_area { cursor: default; }