/* ---------------------------------------------------------------------------
   Wiring Diagram Generator

   Page chrome only — VRFTools styling built on the base.css tokens.

   The SVG symbol vocabulary from the design study that locked it (V3 IDU ·
   B3 ODU/BC · T1 stat · G2 geometry · L2 Lossnay · A3 TB anchor · D3 dials ·
   P1 drape) lives in wiring_diagram.js instead — see the note at the bottom.
   --------------------------------------------------------------------------- */

/* ─── page chrome ─────────────────────────────────────────────────────────── */

.wd-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.wd-toolbar .wd-spacer { flex: 1 1 auto; }
.wd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}

/* ─── acknowledgement gate ────────────────────────────────────────────────── */

.wd-ack-lede {
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 14px;
}

.wd-ack-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.9em;
  line-height: 1.5;
  cursor: pointer;
}

.wd-ack-check input { margin-top: 3px; flex: 0 0 auto; }
#wd-ack-continue { margin-top: 8px; }
#wd-ack-continue:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── zoom overlay ────────────────────────────────────────────────────────── */

/* The zoom control floats over the top-right of the diagram rather than
   hiding in the toolbar, where it was routinely missed. */
#wd-diagram-area { position: relative; }

.wd-zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.wd-zoom button {
  border: 0;
  background: none;
  padding: 6px 11px;
  cursor: pointer;
  font: 500 13px var(--font-sans);
  color: var(--dark);
}

.wd-zoom button:hover { background: var(--light-gray); }
.wd-zoom .wd-zoom-level {
  min-width: 52px;
  text-align: center;
  font: 500 12px var(--font-mono);
  color: var(--muted);
}

/* Collapsed to just the magnifier until it is asked for. */
.wd-zoom .wd-zoom-controls {
  display: none;
  align-items: center;
  border-left: 1px solid var(--border);
}

.wd-zoom.is-open .wd-zoom-controls { display: inline-flex; }
#wd-zoom-toggle { font-size: 15px; line-height: 1; }

.wd-hint {
  font-size: 0.85em;
  color: var(--muted);
  margin: 0 0 10px;
}

/* One block per refrigerant system, stacked in the shared canvas. No border,
   shadow or separator: these are not sheets, and any rule between them would
   both lie about where the export cuts fall and visually sever the trunk. */
.wd-page { background: var(--white); }

.wd-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--light-gray);
}

.wd-page-title {
  font-weight: 600;
  font-size: 0.95em;
  color: var(--dark);
}

.wd-page-sub {
  font-size: 0.8em;
  color: var(--muted);
}

.wd-page-num {
  margin-left: auto;
  font: 500 0.78em var(--font-mono);
  color: var(--muted);
}

.wd-bus-note {
  flex-basis: 100%;
  font-size: 0.78em;
  font-style: italic;
  color: var(--red);
}

/* ─── full-bleed workspace ────────────────────────────────────────────────── */

/* main.page is a 960px column. The diagram is a wide drawing and needs the
   whole viewport, so this card breaks out of the column and re-centres itself
   against the window. */
.wd-fullbleed {
  width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);
  margin-left: calc(-50vw + 50% + 20px);
}

/* One scrolling canvas holding every system, plus a corral pinned to the
   right. The corral must stay reachable no matter how far the canvas is
   scrolled, which is the whole reason it is DOM and not part of the SVG. */
#wd-workspace {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

#wd-diagram-area { flex: 1 1 auto; min-width: 0; }

#wd-canvas {
  overflow: auto;
  padding: 10px;
  max-height: 76vh;
  background: var(--white);
  border: 1px solid var(--border);
}

#wd-corral {
  flex: 0 0 232px;
  align-self: flex-start;
  position: sticky;
  top: 12px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--light-gray);
}

.wd-corral-head {
  padding: 9px 12px;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
}

.wd-corral-note {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.74em;
  line-height: 1.45;
  color: var(--muted);
}

/* Vertically stacked, per the layout spec — never a horizontal strip. */
#wd-corral-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#wd-corral.hot { border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; }

.wd-corral-card {
  border: 1px dashed var(--border);
  background: var(--white);
  padding: 7px 9px;
  cursor: grab;
  font-size: 0.76em;
  line-height: 1.5;
  touch-action: none;
}

.wd-corral-card .cc-name { font-weight: 600; color: var(--dark); }
.wd-corral-card .cc-meta { color: var(--muted); font-family: var(--font-mono); font-size: 0.92em; }
.wd-corral-card.is-lifted { opacity: 0.35; }
.wd-corral-empty { font-size: 0.78em; color: var(--muted); padding: 4px 2px; }

/* Drag ghost — a DOM element so one drag implementation serves both the
   corral (HTML) and placed units (SVG), and so a re-render cannot destroy it
   mid-drag the way an in-SVG ghost could. */
.wd-ghost {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  border: 1px dashed var(--dark);
  background: var(--white);
  padding: 7px 9px;
  font-size: 0.76em;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Blocks butt together with no padding or gap so the TB7 bus, which runs to
   both edges of every continuing block, reads as one unbroken line. Canvas
   padding is applied once on the scroll container instead. */
.wd-page-body { padding: 0; font-size: 0; }

/* The SVG symbol vocabulary (.ln/.bx/.fillbar/.t-*/.dial-*/.hitbox/...) is NOT
   defined here. It is injected as a <style> element inside each <svg> by
   wiring_diagram.js, so that a serialized SVG rasterizes identically during
   PNG/PDF export without depending on this stylesheet. Single source of truth
   for those rules: SVG_STYLE in web/static/js/wiring_diagram.js. */

/* ─── pan ─────────────────────────────────────────────────────────────────── */

/* Dragging empty canvas scrolls the page container. The grab cursor lives on
   the scroll container, not the SVG. It is shown unconditionally as an
   affordance — the point is to advertise that the canvas is draggable, and at
   Fit the drag is a harmless no-op rather than a broken promise. */
#wd-canvas { cursor: grab; }
#wd-canvas.is-panning { cursor: grabbing; user-select: none; }
#wd-canvas.is-panning svg { pointer-events: none; }

/* Diagram text is a drawing label, never a selection target — highlighting it
   is what a failed pan drag looks like to the user. */
#wd-canvas svg text { user-select: none; -webkit-user-select: none; }

/* Sheet preview: the composed 11x17 sheets, read-only, exactly as exported. */
#wd-sheet-preview {
  max-height: 80vh;
  overflow: auto;
  padding: 12px;
  background: #d9d9d9;
  border: 1px solid var(--border, #ddd);
}
.wd-sheet-wrap {
  max-width: 1500px;
  margin: 0 auto 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
  background: #fff;
}
.wd-sheet-wrap svg { display: block; height: auto; }