/* ═══════════════════════════════════════════════════════════
   THE SITE PLAN — THE BENCH, DRESSED

   A drawing program inside an event manager, and the two want
   different things from a screen. The app is dark, roomy and made of
   cards; a drawing bench is a rail, a sheet of white paper and a
   column of small controls, with everything else out of the way.

   So this file does three things and no more: it makes the middle of
   the screen a piece of paper on a grey table, it puts the tools
   where a hand looks for them, and it packs the panel tighter than
   anything else in the app — because a plan is drawn with twenty
   settings open, not with three.
   ═══════════════════════════════════════════════════════════ */

.vp-hd .vp-hd-sheets{display:inline-flex;gap:4px;margin-left:10px;flex-wrap:wrap;vertical-align:middle}
/* ONE ROW OF CHROME. Back, the plan's name and its sheets used to stack
   on three lines above the bar, and every one of them was height the
   sheet did not get (Janny, 25 Sep 2026: "te veel witruimte bovenaan").
   Side by side now, the way the course print's heading sits. */
.page-hd.vp-hd{margin-bottom:6px;align-items:center;max-width:none}
.vp-hd .page-hd-text{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:none}
.vp-hd .page-hd-text h2{margin:0;font-size:17px}
.vp-hd .vp-hd-sheets{margin-left:2px}
.vp-hd .page-hd-actions{gap:6px}
.vp-tab{background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.4}
.vp-tab:hover{color:var(--text);border-color:var(--border2)}
.vp-tab.on{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold2)}
.vp-tab.add{padding:4px 7px;display:inline-flex;align-items:center}
.vp-tab.add svg{width:13px;height:13px}
.vp-zoombar{display:inline-flex;gap:2px;margin-right:6px}

/* ── THE THREE COLUMNS ──
   The rail is as wide as a button, the panel is as wide as a form,
   and everything left over is paper. On a laptop that is most of the
   screen, which is the point. */
.vp-wrap{display:grid;grid-template-columns:46px 1fr 300px;grid-template-rows:auto 1fr;gap:0;position:relative;
  height:calc(100vh - 168px);min-height:440px;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg2)}
/* THE BENCH ENDS WHERE THE WINDOW DOES. The height above guessed at
   168 px of header and title over the bench, and on a screen where the
   title block ran taller the bench ran off the bottom of the window by
   that much — taking the canvas's horizontal scrollbar with it. Zoom in
   on an A3 and there was no way to reach the right-hand side: the bar
   that would have got you there was below the fold, behind a #content
   that scrolls only reluctantly. So the view becomes a column that is
   as tall as the content area and the bench takes what the title
   leaves, whatever the title turns out to be. The fixed height stays
   as the fallback for a browser without :has(). Not on a phone, where
   the panel goes under the paper and the page is meant to scroll. */
@media (min-width:761px){
  #v-venueplan.active:has(.vp-wrap){display:flex;flex-direction:column;height:calc(100% - 12px)}
  #v-venueplan:has(.vp-wrap) .page-hd{flex:0 0 auto}
  #v-venueplan:has(.vp-wrap) .vp-wrap{height:auto;flex:1 1 auto;min-height:0}
}

.vp-rail{background:var(--bg3);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;overflow-y:auto}
.vp-tool{width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.vp-tool:hover{background:var(--bg4);color:var(--text)}
.vp-tool.on{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold2)}
.vp-rail-sep{width:22px;height:1px;background:var(--border);margin:4px 0;flex:0 0 auto}

/* ── THE TABLE THE PAPER LIES ON ──
   Grey, so that white paper reads as paper. It scrolls in both
   directions, because an A2 at 100 % is bigger than any screen and
   somebody working on the corner of it wants to be able to get there. */
.vp-canvas{background:repeating-conic-gradient(#0000 0% 25%, rgba(148,163,184,.05) 0% 50%)
  50%/18px 18px, var(--bg);
  overflow:auto;position:relative;padding:18px;display:flex;align-items:flex-start;
  justify-content:center}
/* A2 AT FULL SIZE IS WIDER THAN THE WINDOW, and a centred flex item that
   overflows cannot be scrolled back to on its leading edge — the left
   third of the sheet becomes unreachable. `safe` centring drops to
   flex-start the moment it would cost content, which is exactly the
   trade wanted here. Left as a second rule so a browser that does not
   know the keyword keeps the plain centring. */
.vp-canvas{justify-content:safe center}
.vp-canvas.working::after{content:'';position:absolute;inset:0;background:rgba(6,10,20,.35);
  backdrop-filter:blur(1px);pointer-events:none}
.vp-stage{position:relative;flex:0 0 auto}
.vp-sheet{background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.45);position:relative;
  touch-action:none;user-select:none;-webkit-user-select:none}
.vp-sheet.panning{cursor:grabbing}
.vp-sheet svg{display:block}
.vp-busy{padding:40px;text-align:center;color:var(--text3);font-size:13px}

/* What the pointer may catch. Furniture and marks are grabbable;
   the street plan under them never is, or a click meant for a route
   would land on a hedge. */
.vp-sheet .vp-base{pointer-events:none}
/* visiblePainted, not all: with "all", a barrier line bent round a
   zone also caught every click INSIDE the shape it encloses — its
   invisible fill — and the tent standing there could not be picked
   (Janny, 29 Sep 2026). A mark now answers where it is painted, and a
   line carries its own invisible grip band (.vp-hit, js/venue-plan.js). */
.vp-sheet .vp-it{pointer-events:visiblePainted;cursor:move}
.vp-sheet .vp-furniture > g{pointer-events:all;cursor:move}
.vp-sheet .vp-ui{pointer-events:none}
.vp-sheet .vp-ui .vp-georef{fill:none;stroke:#d946ef;stroke-width:2}
.vp-sheet .vp-ui .vp-georef.tie{stroke-width:1;stroke-dasharray:4 3}
.vp-wrap.georef .vp-sheet{cursor:crosshair}
.vp-sheet .vp-ui .vp-node,.vp-sheet .vp-ui .vp-grip{pointer-events:all;cursor:crosshair}
/* The dashed box that says what a detail window is looking at: its
   EDGE is a handle and its inside is not, so the marks it is drawn
   over can still be picked up through it. */
.vp-sheet .vp-insbox{pointer-events:none}
.vp-sheet .vp-insbox .vp-grab{pointer-events:stroke;cursor:move}

/* The bench's own marks: an outline round what is selected, grips in
   the accent colour, and a ghost of what is being drawn. Everything
   here is stripped out of the exported file — see vpSheetSvgText(). */
.vp-selbox{fill:none;stroke:#2563eb;stroke-width:1;stroke-dasharray:4 3;opacity:.9;vector-effect:non-scaling-stroke}
/* thin outlines at a constant screen size (vpPaintUi); what they sit on shows through */
.vp-node{fill:rgba(255,255,255,.25);stroke:#2563eb;stroke-width:1.6;vector-effect:non-scaling-stroke}
.vp-node.on{fill:#2563eb}
.vp-grip{fill:#2563eb;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke}
/* the invisible pad behind each handle that takes the hand */
.vp-node.vp-hitpad,.vp-grip.vp-hitpad{fill:transparent;stroke:none}
.vp-ghost{fill:rgba(37,99,235,.10);stroke:#2563eb;stroke-width:1.6;stroke-dasharray:5 4}
.vp-ghostpt{fill:#2563eb}
.vp-snap{fill:none;stroke:#16a34a;stroke-width:1.6}
.vp-tape{stroke:#dc2626;stroke-width:1.6;stroke-dasharray:6 4;fill:none}
.vp-tape-t{fill:#dc2626;font:700 11px system-ui,sans-serif;paint-order:stroke;
  stroke:#fff;stroke-width:3;stroke-linejoin:round}

/* Which cursor says what the tool will do. */
.vp-wrap .vp-canvas{cursor:default}
.vp-wrap[data-tool="hand"] .vp-sheet{cursor:grab}

/* ── THE PANEL ──
   Denser than anything else in the app: a label, a control, one line.
   Five drawers, each foldable, because a laptop is not five drawers
   tall and the one being worked in is the one that matters. */
.vp-side{background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;
  font-size:12px;padding-bottom:20px}
.vp-sec{border-bottom:1px solid var(--border)}
.vp-sec > h4{margin:0;padding:9px 12px;font-size:11px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text3);cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;background:var(--bg3);user-select:none}
.vp-sec > h4::after{content:'▾';font-size:10px;opacity:.6}
.vp-sec.fold > h4::after{content:'▸'}
.vp-sec.fold .vp-sec-b{display:none}
.vp-sec-b{padding:8px 12px 12px}
.vp-h5{margin:12px 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text3)}

.vp-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.vp-row > span{flex:0 0 44%;color:var(--text2);font-size:11.5px;line-height:1.25}
.vp-row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vp-row2 .vp-row{display:block;margin:5px 0}
.vp-row2 .vp-row > span{display:block;margin-bottom:3px}
.vp-in{flex:1 1 auto;width:100%;background:var(--bg3);border:1px solid var(--border);
  color:var(--text);border-radius:7px;padding:4px 7px;font:inherit;font-size:12px;min-width:0}
.vp-in:focus{outline:none;border-color:var(--gold-border);background:var(--bg4)}
textarea.vp-in{resize:vertical;line-height:1.35}
input[type="range"].vp-in{padding:0;background:none;border:0}
.vp-val{flex:0 0 34px;text-align:right;color:var(--text2);font-size:11px}
.vp-col{flex:1 1 auto;height:24px;padding:0;border:1px solid var(--border);border-radius:6px;
  background:var(--bg3);cursor:pointer}
.vp-chks{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0}
.vp-chk{display:inline-flex;align-items:center;gap:5px;color:var(--text2);cursor:pointer;
  font-size:11.5px}
.vp-chk input{accent-color:var(--gold);width:13px;height:13px}
.vp-chk.sm{font-size:11px}
.vp-btns{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.vp-btns .btn{font-size:11px;padding:4px 8px}
.btn.wide{width:100%;justify-content:center;margin-top:6px}
.vp-hint{color:var(--text3);font-size:11px;line-height:1.45;margin:6px 0}
.vp-hint.strong{color:var(--gold2);font-weight:700;font-size:12px}
.vp-insp-hd{font-weight:800;color:var(--bright);font-size:12.5px;margin-bottom:6px}

/* The six global colours. A row of chips, and the one in use has a
   ring — the whole point of a swatch is that you can see at a glance
   which of them a mark is wearing. */
.vp-swatches{display:flex;gap:5px;margin:2px 0 8px;flex-wrap:wrap}
.vp-sw{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.vp-sw.on{border-color:var(--bright)}
.vp-sw.edit{background:var(--bg3);color:var(--text3);display:flex;align-items:center;
  justify-content:center;border-color:var(--border)}
.vp-sw.edit svg{width:12px;height:12px}

/* ── LAYERS ── */
.vp-lay-list{display:flex;flex-direction:column;gap:2px}
.vp-lay{display:flex;align-items:center;gap:2px;background:var(--bg3);border:1px solid transparent;
  border-radius:7px;padding:2px}
.vp-lay.on{border-color:var(--gold-border);background:var(--gold-bg)}
.vp-lay-name{flex:1 1 auto;text-align:left;background:none;border:0;color:var(--text);
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:3px 4px;
  display:flex;justify-content:space-between;gap:6px;min-width:0}
.vp-lay-name em{color:var(--text3);font-style:normal;font-size:10px}
.vp-lay-eye,.vp-lay-ic{background:none;border:0;color:var(--text3);cursor:pointer;padding:3px;
  display:flex;align-items:center;border-radius:5px}
.vp-lay-eye:hover,.vp-lay-ic:hover{color:var(--text);background:var(--bg4)}
.vp-lay-ic[disabled]{opacity:.25;cursor:default}
.vp-lay-eye svg,.vp-lay-ic svg{width:13px;height:13px}
.vp-lay-body{padding:6px 8px 8px;background:var(--bg3);border-radius:0 0 7px 7px;margin-bottom:4px}
.vp-only{display:flex;flex-direction:column;gap:3px;flex:1 1 auto}

.vp-vars{display:flex;flex-wrap:wrap;gap:4px}
.vp-var{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer}
.vp-var.on{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold2)}
.vp-var.add{padding:3px 7px;display:inline-flex;align-items:center}
.vp-var.add svg{width:12px;height:12px}

/* ── THE LEGEND, AS A LIST TO EDIT ── */
.vp-leg-list{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.vp-leg-row{display:flex;align-items:center;gap:5px}
.vp-leg-sw{flex:0 0 18px;background:#fff;border-radius:4px}
.vp-leg-row .vp-in{font-size:11.5px;padding:3px 6px}

/* ── THE PICKERS ──
   Fifty-seven signs and twenty-three objects want to be seen, not
   read off a list: a grid of glyphs with their names under them. */
.vp-pick{max-height:60vh;overflow-y:auto}
.vp-pick h5{margin:12px 0 6px;font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text3)}
.vp-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:5px}
.vp-pick-grid.wide{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.vp-pick-grid.rb{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
.vp-pick-b{background:var(--bg3);border:1px solid var(--border);border-radius:9px;
  color:var(--text2);cursor:pointer;padding:7px 4px;display:flex;flex-direction:column;
  align-items:center;gap:4px;font-size:9.5px;line-height:1.2;text-align:center}
.vp-pick-b:hover{border-color:var(--gold-border);color:var(--text);background:var(--bg4)}
.vp-pick-b span{display:block}
.vp-pick-b em{display:block;font-style:normal;color:var(--text3);font-size:9px}
.vp-pick-b img{width:26px;height:26px;object-fit:contain}
/* "My objects": the saved object, with its own way out in the corner. */
.vp-pick-own{position:relative;display:flex}
.vp-pick-own .vp-pick-b{flex:1}
.vp-pick-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg2);color:var(--text3);font-size:12px;
  line-height:1;cursor:pointer;padding:0}
.vp-pick-x:hover{color:var(--red,#dc2626);border-color:currentColor}

/* ── THE READER ──
   A link opens the finished sheets and nothing else: no rail, no
   panel, the paper scaled to the phone. */
.vp-read-card{padding:14px}
.vp-read-sheet{overflow:hidden;margin:10px 0}
.vp-read-sheet .vp-sheet{box-shadow:0 2px 12px rgba(0,0,0,.25)}
.vp-read-name{font-size:12px;font-weight:700;color:var(--text2);margin-bottom:6px}

.vp-readout{position:absolute;left:10px;bottom:8px;font-size:10.5px;color:var(--text3);
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;
  pointer-events:none;font-variant-numeric:tabular-nums}

.vp-card{cursor:pointer}
.vp-card:hover{border-color:var(--gold-border)}

/* ── ON PAPER ──
   The same arrangement the course print uses: the sheets are moved to
   a container of their own and everything else on the page is taken
   out of the flow, with @page written by vpPrintSheets() because the
   size depends on the plan. */
#vprint-sheet{display:none}
body.vprint-on > *:not(#vprint-sheet){display:none!important}
body.vprint-on #vprint-sheet{display:block}
body.vprint-on #vprint-sheet .vp-sheet{box-shadow:none;transform:none}
#vprint-sheet,.vp-sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media print{
  body.vprint-on{background:#fff!important;margin:0;padding:0}
  #vprint-sheet .vp-sheet{box-shadow:none;break-after:page;page-break-after:always;
    break-inside:avoid;page-break-inside:avoid}
  #vprint-sheet .vp-sheet:last-child{break-after:auto;page-break-after:auto}
  #vprint-sheet .vp-tile{overflow:hidden}
}

@media (max-width:980px){
  .vp-wrap{grid-template-columns:42px 1fr 260px}
}

/* ── THE BAR OVER THE BENCH ──
   A row across all three columns: groups of icon buttons, a thin rule
   between the groups, two or three small selects where a word is the
   value. A button that is ON wears the accent, like a tool on the
   rail; one that has a popover open is outlined. See vpTopbarHtml(). */
.vp-top{grid-column:1 / -1;display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;padding:4px 8px;
  background:var(--bg3);border-bottom:1px solid var(--border);min-height:40px}
.vp-top-g{display:inline-flex;align-items:center;gap:2px}
.vp-top-sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex:0 0 auto}
.vp-top-btn{height:30px;min-width:30px;padding:0 5px;border-radius:7px;border:1px solid transparent;background:none;
  color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto}
.vp-top-btn svg{width:17px;height:17px}
.vp-top-btn span{font-size:11.5px;font-weight:700}
.vp-top-btn:hover{background:var(--bg4);color:var(--text)}
.vp-top-btn.on{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold2)}
.vp-top-btn.open{border-color:var(--accent2);color:var(--text)}
.vp-top-btn.danger:hover{color:#f87171}
.vp-top-btn:disabled{opacity:.4;cursor:default}
.vp-top-sel,.vp-top-num{height:30px;border-radius:7px;border:1px solid var(--border);background:var(--bg2);color:var(--text);
  font-size:11.5px;font-weight:700;padding:0 6px}
.vp-top-sel{max-width:150px}
.vp-top-num{width:60px;text-align:center}
.vp-wrap.ro .vp-top-btn,.vp-wrap.ro .vp-top-sel,.vp-wrap.ro .vp-top-num{pointer-events:none;opacity:.6}

/* A popover: the same small controls the panel uses, on a card under
   the button that opened it, over the paper. */
.vp-pop{position:absolute;z-index:40;width:280px;padding:10px 12px 12px;background:var(--bg2);color:var(--text);
  border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow-md)}
.vp-pop .vp-h5{margin-top:0}

/* The balloon: one for the whole bench, fixed to the window, a beat
   after the pointer rests. Below its button, or beside the rail's. */
.vp-tip{position:fixed;z-index:1200;max-width:260px;padding:5px 9px;border-radius:7px;pointer-events:none;
  background:#0f172a;color:#fff;font-size:11.5px;font-weight:600;line-height:1.35;
  box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s}
.vp-tip.show{opacity:1;transform:none}
.vp-tip.right{transform:translateX(-2px)}
.vp-tip.right.show{transform:none}
/* A phone is not a drawing bench, and pretending otherwise gives a
   sheet the size of a stamp between two columns of controls. The panel
   goes under the paper and the rail stays where a thumb can reach it. */
@media (max-width:760px){
  .vp-wrap{grid-template-columns:42px 1fr;height:auto}
  .vp-top{position:sticky;top:0;z-index:5}
  .vp-side{grid-column:1 / -1;border-left:0;border-top:1px solid var(--border);max-height:none}
  .vp-canvas{min-height:52vh}
}

/* ── THE RIGHT BUTTON'S MENU ──────────────────────────────────
   Fixed to the window rather than to the sheet, because the sheet is
   scaled and scrolled and a menu that came along for the ride would
   be drawn at whatever magnification the paper happens to be at. It
   lives inside the view all the same — see vpMenuOpen(), which needs
   the screen's own click delegate to reach its rows. */
.vp-menu{position:fixed;z-index:60;min-width:186px;padding:5px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 12px 34px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:1px}
.vp-menu-row{display:block;width:100%;text-align:left;background:none;border:0;
  padding:7px 10px;border-radius:6px;font:inherit;font-size:13px;color:var(--text);
  cursor:pointer;white-space:nowrap}
.vp-menu-row:hover{background:var(--bg4)}
.vp-menu-row.danger{color:var(--red,#dc2626)}
.vp-menu-row.danger:hover{background:rgba(220,38,38,.12)}
.vp-menu-sep{height:1px;background:var(--border);margin:4px 2px}

/* A tool that cannot do anything says so — Undo with nothing behind
   it and Redo with nothing ahead of it. */
.vp-tool[disabled]{opacity:.32;cursor:default}
.vp-tool[disabled]:hover{background:none;color:var(--text2)}

/* The guide that appears while a mark is dragged, saying what it just
   lined up with. Magenta because that is what every drawing program
   has used for it since the nineties, and nothing else on this sheet
   is anywhere near that colour. */
.vp-guide{stroke:#e11d8f;stroke-width:1;fill:none;stroke-dasharray:none;shape-rendering:crispEdges}

/* The layer switches on a share link: a row of ticks over the sheets
   they hide, close enough to read as belonging to them. */
.vp-read-lays{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 10px}

/* The waypoints offered for the sheet (vpAskWaypoints): one per line,
   the badge the map shows beside the name. */
.vp-wps{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;margin-top:8px}
.vp-wps .vp-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.vp-wps .vp-chk > span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vp-wps small{color:var(--text3);font-size:11.5px}
.vp-wp-ico{width:20px;height:20px;object-fit:contain;flex:none}
.vp-wps-how{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.vp-wps-how input[type=number]{width:72px;margin:0}

/* ── LENGTHS ON THIS PLAN ──
   Every kind of line added up, on the panel when nothing is selected. */
.vp-tot{width:100%;border-collapse:collapse;font-size:11.5px;margin:2px 0 8px}
.vp-tot td{padding:4px 0;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:top}
.vp-tot td:last-child{text-align:right;font-weight:700;color:var(--text);white-space:nowrap;padding-left:8px}
.vp-tot em{font-style:normal;color:var(--text3);font-size:10.5px}

/* ── THE BUILD-UP ──
   The folded drawer on the panel, the clock's popover, and the
   schedule window. js/venue-buildup.js */
.vp-wrap.ro .vp-top-btn.vp-bu-btn{pointer-events:auto;opacity:1}
.vp-bu{margin:10px 0 6px;border:1px solid var(--border);border-radius:8px;padding:0 10px;background:var(--bg3)}
.vp-bu > summary{cursor:pointer;list-style:none;padding:8px 0;display:flex;flex-direction:column;gap:2px}
.vp-bu > summary::-webkit-details-marker{display:none}
.vp-bu > summary b{font-size:12px;color:var(--text)}
.vp-bu > summary b::before{content:'\25B8';display:inline-block;width:14px;color:var(--text3)}
.vp-bu[open] > summary b::before{content:'\25BE'}
.vp-bu[open] > summary{border-bottom:1px solid var(--border);margin-bottom:6px}
.vp-bu-say{font-size:11px;color:var(--text3);padding-left:14px;overflow-wrap:anywhere}
.vp-bu .vp-bu-warn{color:var(--red)}
.vp-bu input[type=datetime-local]{min-width:0}
.vp-bu-moments{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;max-height:150px;overflow:auto}
.vp-bu-moments button{font:inherit;font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);cursor:pointer}
.vp-bu-moments button.on,.vp-bu-moments button:hover{border-color:var(--gold-border);background:var(--gold-bg);color:var(--text)}
.vp-bu-tabs{display:flex;gap:6px;margin-bottom:10px}
.vp-bu-tabs button{font:inherit;font-size:13px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text2);cursor:pointer}
.vp-bu-tabs button.on{border-color:var(--gold-border);background:var(--gold-bg);color:var(--text);font-weight:700}
.vp-bu-at{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:12.5px;color:var(--text2)}
.vp-bu-at input{margin-left:6px}
.vp-bu-wrap{overflow-x:auto;max-height:60vh;overflow-y:auto}
.vp-bu-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.vp-bu-tab th,.vp-bu-tab td{padding:5px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
.vp-bu-tab thead th{font-size:11px;color:var(--text3);font-weight:600;white-space:nowrap;position:sticky;top:0;background:var(--bg2)}
.vp-bu-tab td{color:var(--text2)}
.vp-bu-tab td:first-child{white-space:nowrap;font-weight:700;color:var(--text)}
.vp-bu-tab tr.vp-bu-day th{padding-top:12px;font-size:12.5px;color:var(--gold2)}
.vp-bu-tab tr.vp-bu-day em{font-style:normal;color:var(--text3);font-weight:400;margin-left:4px}
.vp-bu-tab tr[data-bu-id]{cursor:pointer}
.vp-bu-tab tr[data-bu-id]:hover,.vp-bu-tab tr[data-bu-id]:focus{background:var(--bg3);outline:none}
.vp-bu-tab tr.on td:first-child{box-shadow:inset 3px 0 0 var(--gold2)}

/* ── A PLAN PER SUPPLIER ── js/venue-supplier.js
   The button on each firm's heading in the schedule, and the dialogue:
   every answer a row of buttons, the chosen one lit. The pages it
   prints are ink on white and carry no styles of their own. */
.vp-bu-tab tr.vp-bu-day .vp-bu-supplan{float:right;margin-top:-4px;font-weight:600}
.vp-sup-ask{display:flex;flex-direction:column;gap:4px;min-width:min(460px,100%)}
.vp-sup-row{display:flex;flex-direction:column;gap:5px;margin-top:8px;font-size:12.5px;color:var(--text2)}
.vp-sup-row > span{font-weight:700;color:var(--text)}
.vp-sup-sel{font:inherit;font-size:13px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text);max-width:100%}
.vp-sup-seg{display:flex;flex-wrap:wrap;gap:6px}
.vp-sup-seg button{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);cursor:pointer}
.vp-sup-seg button.on{border-color:var(--gold-border);background:var(--gold-bg);color:var(--text);font-weight:700}
.vp-sup-ask .vp-hint{margin:2px 0 0}

/* ── THE 3D VIEW ── js/venue-3d.js
   The plan stood up on the aerial photograph, full screen over the
   app like the course film's studio, and as dark as it — a photograph
   reads best on black. The bar's 3D button is a viewer, so it stays
   live on a bench that is read-only. */
.vp-wrap.ro .vp-top-btn[data-vp="3d"]{pointer-events:auto;opacity:1}
body.vp3d-open{overflow:hidden}
.vp3d{position:fixed;inset:0;z-index:4000;display:grid;grid-template-rows:52px minmax(0,1fr);
  background:#060a14;color:#e8eefc;font-family:var(--font-body);outline:none}
.vp3d-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px 0 16px;
  background:rgba(232,238,252,.035);border-bottom:1px solid rgba(232,238,252,.09);min-width:0}
.vp3d-name{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.vp3d-name svg{width:18px;height:18px;color:#f59e0b;flex:none}
.vp3d-name b{font-family:var(--font-display);font-size:15px;overflow:hidden;text-overflow:ellipsis}
.vp3d-name span{font-size:12.5px;color:rgba(232,238,252,.6);overflow:hidden;text-overflow:ellipsis}
.vp3d-btns{display:flex;align-items:center;gap:6px;flex:none}
.vp3d-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:800;color:#e8eefc;background:rgba(232,238,252,.08);border:1px solid rgba(232,238,252,.16)}
.vp3d-btn svg{width:15px;height:15px}
.vp3d-btn:hover{background:rgba(232,238,252,.14)}
.vp3d-btn.on{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.55);color:#fcd34d}
.vp3d-x{padding:0 9px}
.vp3d-map{position:relative;min-height:0}
.vp3d-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;
  background:rgba(6,10,20,.72);color:#e8eefc;font-size:11.5px;pointer-events:none;white-space:nowrap}
.vp3d-empty{position:absolute;left:50%;top:76px;transform:translateX(-50%);max-width:min(92vw,520px);padding:8px 14px;
  border-radius:10px;background:rgba(6,10,20,.82);color:#e8eefc;font-size:12.5px;text-align:center;pointer-events:none}
@media (max-width:720px){
  .vp3d-btn span{display:none}
  .vp3d-btn{padding:0 9px}
  .vp3d-name span{display:none}
  .vp3d-hint{white-space:normal;width:calc(100vw - 32px);text-align:center}
}

/* ── THE SAFETY CHECK (js/venue-safety.js) ── */
.vp-safe-ok{color:var(--green,#16a34a)}
.vp-safe-bad{color:var(--red,#dc2626)}
.vp-safe-list{display:grid;gap:4px;margin:4px 0 8px}
.vp-safe-row{text-align:left;font:inherit;font-size:11.5px;line-height:1.35;padding:6px 8px;border-radius:7px;cursor:pointer;
  border:1px solid var(--red-border,#fca5a5);background:var(--red-bg,rgba(220,38,38,.06));color:var(--text)}
.vp-safe-row:hover{border-color:var(--red,#dc2626)}
/* the power plan's rows (js/venue-power.js): a generator within its load is not a warning */
.vp-pow-ok{border-color:var(--green-border,#86efac);background:var(--green-bg,rgba(22,163,74,.06))}
.vp-pow-amber{border-color:var(--amber-border,#fcd34d);background:var(--amber-bg,rgba(217,119,6,.08))}