/* VendoWorks homepage kit — structure for the 3D building and the plan explorer.
   Each page sets the --vw-* tokens; nothing here picks a colour of its own.        */

[hidden] { display: none !important; }

/* ── Plan drawing ──────────────────────────────────────────────────────── */
.vw-plan { display: block; overflow: visible; }
.vw-plan .vw-slabfill { fill: var(--vw-slab); stroke: var(--vw-line); stroke-width: 1; }
.vw-plan .vw-ext { stroke: var(--vw-line); stroke-width: 4; stroke-linecap: square; fill: none; }
.vw-plan .vw-int { stroke: var(--vw-line); stroke-width: 1.7; fill: none; }
.vw-plan .vw-door { stroke: var(--vw-line3); stroke-width: .9; fill: none; }
.vw-plan .vw-rooms text { font-family: var(--vw-mono); font-size: 10px; letter-spacing: .08em; fill: var(--vw-ink3); text-anchor: middle; }
.vw-plan .vw-grid circle { fill: var(--vw-ground); stroke: var(--vw-line3); stroke-width: 1; }
.vw-plan .vw-grid text { font-family: var(--vw-mono); font-size: 10px; fill: var(--vw-ink2); text-anchor: middle; }
.vw-plan .vw-grid .vw-gl { stroke: var(--vw-line3); stroke-width: .6; stroke-dasharray: 10 4 2 4; }
.vw-plan .vw-dim line, .vw-plan .vw-dim path { stroke: var(--vw-line3); stroke-width: 1; fill: none; }
.vw-plan .vw-dim text { font-family: var(--vw-mono); font-size: 10px; fill: var(--vw-ink3); text-anchor: middle; }

.vw-dev .vw-sh { fill: var(--vw-slab); stroke: var(--vw-line2); stroke-width: 1.2; transition: fill .35s, stroke .35s; }
.vw-dev .vw-cone { fill: none; stroke-dasharray: 2 2; }
.vw-dev .vw-sym { font-family: var(--vw-mono); font-size: 7.5px; font-weight: 600; fill: var(--vw-ink2); text-anchor: middle; pointer-events: none; transition: fill .35s; }
.vw-t-FACP .vw-sym { font-size: 8px; }
.vw-t-SD .vw-sym { font-size: 6.8px; letter-spacing: -.03em; }
.vw-dev .vw-ping { fill: none; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.vw-dev:focus { outline: none; }
.vw-dev:focus-visible .vw-sh { stroke-width: 2.4; }

/* lit = the device belongs to a layer that is on */
.is-lit .vw-tr-fire .vw-sh, .vw-dev.vw-tr-fire.is-on .vw-sh { fill: var(--vw-fire-soft); stroke: var(--vw-fire); }
.is-lit .vw-tr-sec .vw-sh, .vw-dev.vw-tr-sec.is-on .vw-sh { fill: var(--vw-sec-soft); stroke: var(--vw-sec); }
.is-lit .vw-tr-fire .vw-sym, .vw-dev.vw-tr-fire.is-on .vw-sym { fill: var(--vw-fire); }
.is-lit .vw-tr-sec .vw-sym, .vw-dev.vw-tr-sec.is-on .vw-sym { fill: var(--vw-sec); }
.is-lit .vw-tr-fire .vw-ping { stroke: var(--vw-fire); stroke-width: 1.4; animation: vw-ping 2.4s ease-out infinite; }
.is-lit .vw-tr-sec .vw-ping { stroke: var(--vw-sec); stroke-width: 1.4; animation: vw-ping 2.4s ease-out .6s infinite; }
.is-lit .vw-cone { fill: none !important; }
@keyframes vw-ping { 0% { opacity: .9; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

/* the explorer hides what is off */
.vw-ex .vw-dev { transition: opacity .25s; }
.vw-ex .vw-dev:not(.is-on) { opacity: 0; pointer-events: none; }
.vw-ex .vw-dev.is-on { cursor: default; }

/* ── 3D building ───────────────────────────────────────────────────────── */
.vw-bld { position: relative; overflow: hidden; }
.vw-bld-view { position: absolute; inset: 0; touch-action: pan-y; }
.vw-scene { position: absolute; left: 50%; top: 50%; width: 600px; height: 360px; transform-style: preserve-3d; }
.vw-floor, .vw-roof { position: absolute; inset: 0; transform-style: preserve-3d; }
.vw-slab { position: absolute; inset: 0; }
.vw-slab svg, .vw-roofsvg { width: 600px; height: 360px; display: block; overflow: visible; }
.vw-face {
  position: absolute; box-sizing: border-box; border: 1px solid var(--vw-line2);
  background:
    linear-gradient(to bottom, transparent 30%, var(--vw-glass) 30%, var(--vw-glass) 70%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--vw-line3) 46px 47px),
    var(--vw-face);
  backface-visibility: visible;
}
.vw-face-n, .vw-face-s { left: 0; width: 600px; height: var(--h); transform-origin: 50% 100%; }
.vw-face-n { top: calc(-1 * var(--h)); }
.vw-face-s { top: calc(360px - var(--h)); }
.vw-face-e, .vw-face-w {
  top: 0; width: var(--h); height: 360px;
  background:
    linear-gradient(to right, transparent 30%, var(--vw-glass) 30%, var(--vw-glass) 70%, transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 46px, var(--vw-line3) 46px 47px),
    var(--vw-face);
}
.vw-face-e { left: 600px; transform-origin: 0 50%; }
.vw-face-w { left: calc(-1 * var(--h)); transform-origin: 100% 50%; }
.vw-roof-fill { fill: var(--vw-face); stroke: var(--vw-line2); stroke-width: 1.5; }
.vw-roof-line { fill: none; stroke: var(--vw-line3); stroke-width: 1; }
.vw-roof-seam { stroke: var(--vw-line3); stroke-width: .6; }
.vw-roof-rtu { fill: var(--vw-slab); stroke: var(--vw-line2); stroke-width: 1; }
.vw-bld.is-dragging { cursor: grabbing; }

/* callouts over the 3D view */
.vw-co-layer { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s; }
.vw-co-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vw-co-path { fill: none; stroke: var(--vw-fire); stroke-width: 1.2; }
.vw-co-dot { fill: var(--vw-fire); }
.vw-co {
  position: absolute; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: baseline;
  padding: 8px 12px 9px; background: var(--vw-co-bg); border: 1px solid var(--vw-fire); max-width: 230px;
}
.vw-co-l { left: 0; }
.vw-co-r { right: 0; }
.vw-co-k { grid-column: 1 / -1; font-family: var(--vw-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--vw-fire); }
.vw-co-t { grid-column: 1 / -1; font-family: var(--vw-body); font-size: 13.5px; font-weight: 600; color: var(--vw-ink); line-height: 1.25; margin-top: 2px; }
.vw-co-q { font-family: var(--vw-mono); font-size: 20px; font-weight: 700; color: var(--vw-fire); margin-top: 4px; font-variant-numeric: tabular-nums; }
.vw-co-s { font-family: var(--vw-mono); font-size: 10.5px; color: var(--vw-ink2); }
@media (max-width: 720px) { .vw-co-layer { display: none; } }

/* ── Plan explorer ─────────────────────────────────────────────────────── */
.vw-ex { color: var(--vw-ink); font-family: var(--vw-body); }
.vw-ex button { font: inherit; color: inherit; cursor: pointer; }
.vw-ex button:focus-visible { outline: 2px solid var(--vw-fire); outline-offset: 2px; }
.vw-ex-bar { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start; padding-bottom: 18px; }
.vw-ex-tabs { display: flex; border: 1px solid var(--vw-rule2); }
.vw-ex-tab { background: transparent; border: 0; padding: 8px 14px; font-family: var(--vw-mono) !important; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--vw-ink2) !important; }
.vw-ex-tab + .vw-ex-tab { border-left: 1px solid var(--vw-rule2); }
.vw-ex-tab[aria-pressed="true"] { background: var(--vw-ink); color: var(--vw-ground) !important; }
.vw-ex-groups { display: flex; flex-wrap: wrap; gap: 14px 28px; flex: 1 1 520px; }
.vw-ex-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vw-ex-trade { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-family: var(--vw-mono) !important; font-size: 11.5px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--vw-ink2) !important; }
.vw-ex-trade:hover { color: var(--vw-ink) !important; }
.vw-sw { display: inline-block; width: 10px; height: 10px; flex: none; border: 1.5px solid currentColor; }
.vw-tr-fire .vw-sw { color: var(--vw-fire); }
.vw-tr-sec .vw-sw { color: var(--vw-sec); }
.vw-ex-trade[aria-pressed="true"] .vw-sw { background: currentColor; }
.vw-ex-trade[aria-pressed="mixed"] .vw-sw { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.vw-ex-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-ex-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 6px 11px; font-size: 13.5px !important;
  background: transparent; border: 1px dashed var(--vw-rule2); color: var(--vw-ink3) !important;
  transition: background .2s, border-color .2s, color .2s;
}
.vw-ex-cq { font-family: var(--vw-mono); font-size: 11.5px; font-weight: 600; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; padding: 1px 5px; border: 1px solid var(--vw-rule2); }
.vw-ex-chip[aria-pressed="true"] { border-style: solid; color: var(--vw-ink) !important; }
.vw-tr-fire .vw-ex-chip[aria-pressed="true"] { border-color: var(--vw-fire); background: var(--vw-fire-soft); }
.vw-tr-sec .vw-ex-chip[aria-pressed="true"] { border-color: var(--vw-sec); background: var(--vw-sec-soft); }
.vw-tr-fire .vw-ex-chip[aria-pressed="true"] .vw-ex-cq { color: var(--vw-fire); border-color: var(--vw-fire); }
.vw-tr-sec .vw-ex-chip[aria-pressed="true"] .vw-ex-cq { color: var(--vw-sec); border-color: var(--vw-sec); }
.vw-ex-chip:disabled { opacity: .35; cursor: default; }

.vw-ex-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 0; border: 1px solid var(--vw-rule2); }
@media (max-width: 900px) { .vw-ex-body { grid-template-columns: 1fr; } }
.vw-ex-plan { position: relative; border-right: 1px solid var(--vw-rule2); background: var(--vw-sheet); min-width: 0; }
@media (max-width: 900px) { .vw-ex-plan { border-right: 0; border-bottom: 1px solid var(--vw-rule2); } }
.vw-ex-sheet { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--vw-rule); font-family: var(--vw-mono); font-size: 11px; letter-spacing: .05em; color: var(--vw-ink3); }
.vw-ex-sheet span:first-child { color: var(--vw-ink); }
.vw-ex-svg { padding: 8px 10px 4px; overflow-x: auto; }
.vw-ex-svgel { width: 100%; min-width: 520px; height: auto; }
.vw-ex-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; z-index: 3;
  display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; min-width: 170px;
  background: var(--vw-ink); color: var(--vw-ground); font-size: 12.5px; line-height: 1.35;
}
.vw-ex-tip b { font-family: var(--vw-mono); font-size: 11.5px; letter-spacing: .04em; }
.vw-ex-tsrc { font-family: var(--vw-mono); font-size: 11px; opacity: .75; }

.vw-ex-table { display: flex; flex-direction: column; min-width: 0; }
.vw-ex-thd, .vw-ex-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, .9fr); gap: 10px; padding: 11px 14px; align-items: baseline; }
.vw-ex-thd { border-bottom: 1px solid var(--vw-rule2); font-family: var(--vw-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--vw-ink3); }
.vw-ex-row { border-bottom: 1px solid var(--vw-rule); animation: vw-in .3s ease-out; }
@keyframes vw-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.vw-ex-i { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.3; }
.vw-ex-i .vw-sw { width: 8px; height: 8px; background: currentColor; transform: translateY(-1px); }
.vw-ex-q { font-family: var(--vw-mono); font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.vw-ex-s { font-family: var(--vw-mono); font-size: 11px; color: var(--vw-ink3); }
.vw-ex-row.is-flag { background: var(--vw-fire-soft); }
.vw-ex-row.is-flag .vw-ex-q { color: var(--vw-fire); }
.vw-ex-note { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; color: var(--vw-ink2); padding-left: 16px; border-left: 2px solid var(--vw-fire); }
.vw-ex-empty { padding: 22px 14px; font-size: 14px; color: var(--vw-ink3); }
.vw-ex-tft { margin-top: auto; display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--vw-rule2); font-family: var(--vw-mono); font-size: 11px; color: var(--vw-ink3); }

/* disc mode: the application's own highlight language, a soft filled disc under the symbol */
.vw-ex--disc .vw-dev.is-on .vw-ping { opacity: 1; r: 15px; fill: var(--vw-fire-disc, rgba(255, 214, 90, .55)); stroke: var(--vw-fire); stroke-width: .8; }
.vw-ex--disc .vw-dev.vw-tr-sec.is-on .vw-ping { fill: var(--vw-sec-disc, rgba(127, 208, 230, .45)); stroke: var(--vw-sec); }
.vw-ex--disc .vw-dev.is-on .vw-sh { fill: transparent; }
.vw-dev.is-sel .vw-ping { opacity: 1; r: 19px; stroke-width: 2 !important; }
.vw-ex:not(.vw-ex--disc) .vw-dev.is-sel .vw-ping { fill: none; stroke: var(--vw-ink); }

.vw-ex-nav { display: flex; align-items: center; gap: 8px; }
.vw-ex-nav button { width: 26px; height: 24px; display: grid; place-items: center; background: transparent; border: 1px solid var(--vw-rule2); color: var(--vw-ink) !important; font-size: 16px !important; line-height: 1; padding: 0; }
.vw-ex-nav button:hover { border-color: var(--vw-fire); }
.vw-ex-pos { font-family: var(--vw-mono); font-size: 11px; color: var(--vw-ink3); min-width: 26ch; text-align: center; }
.vw-ex-pos b { color: var(--vw-ink); font-weight: 600; margin-right: 4px; }

@media (prefers-reduced-motion: reduce) {
  .vw-ping { animation: none !important; }
  .vw-ex-row { animation: none; }
}