/* ============================================================================
   04 · BLUEPRINT WORKBENCH — geometry stage anchored beside a live inspector
   The drawing is the index: a persistent dimensioned 2D stage on the left
   (also the graceful 3D-404 fallback) sits beside an always-open parameter
   inspector on the right. Full-height, no page scroll; each pane scrolls on
   its own. Token-driven; shared vocabulary in ../../_shared/base.css.
   ========================================================================== */

.app { display: grid; grid-template-columns: 232px 1fr; height: calc(100vh - 34px); }

h1, h2, h3 { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-regular); color: var(--sds-color-text); }

/* ---- Nav rail ----------------------------------------------------------- */
.rail {
  display: flex; flex-direction: column; gap: var(--sds-space-700);
  padding: var(--sds-space-600) var(--sds-space-400);
  border-right: 1px solid var(--sds-color-border);
  background: var(--sds-color-surface);
  overflow: auto;
}
.brand { display: flex; align-items: center; gap: var(--sds-space-300); --sds-logo-height: 22px; }
.product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }

/* ---- Main column -------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; height: calc(100vh - 34px); }

/* slim identity bar */
.idbar {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-300) var(--sds-space-500);
  border-bottom: 1px solid var(--sds-color-border);
  flex: none;
}
.idbar .back { --sds-button-padding-inline: var(--sds-space-200); }
.idbar .iid {
  font-weight: var(--sds-font-weight-bold);
  color: var(--sds-color-primary);
  font-size: var(--sds-type-body-small-size);
}
.idbar .iname { font-weight: var(--sds-font-weight-bold); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.idbar .idmeta { font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idactions { margin-left: auto; display: flex; align-items: center; gap: var(--sds-space-200); flex: none; }

/* ---- the split: stage + inspector --------------------------------------- */
.split { flex: 1; display: grid; grid-template-columns: 1fr 392px; min-height: 0; }

/* ===== STAGE ===== */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--sds-color-border); }
.stage-tabs {
  display: flex; align-items: center; gap: var(--sds-space-300);
  padding: var(--sds-space-200) var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
  flex: none;
}
.stage-tabs sds-tabs { flex: 1; min-width: 0; }
.stage-tabs .zoom { flex: none; }

/* canvas — blueprint paper drawn from neutral tokens */
.canvas {
  flex: 1; position: relative; min-height: 0; overflow: hidden;
  display: grid; place-items: center;
  padding: var(--sds-space-700);
  background:
    linear-gradient(var(--sds-color-bg), var(--sds-color-bg)) padding-box,
    repeating-linear-gradient(0deg, var(--sds-color-border) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--sds-color-border) 0 1px, transparent 1px 28px);
}
.canvas-note {
  position: absolute; inset-block-start: var(--sds-space-400); inset-inline: 0;
  margin: 0; text-align: center;
  font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted);
}

/* the dimensioned drawing (SVG keyed to tokens) */
.drawing { width: min(100%, 640px); height: auto; }
.drawing .axis { stroke: var(--sds-color-border-strong); stroke-width: 1; stroke-dasharray: 6 5; }
.drawing .body { stroke: var(--sds-color-text); stroke-width: 1.75; fill: var(--sds-color-surface-strong); }
.drawing .flute { stroke: var(--sds-color-text); stroke-width: 1.75; fill: var(--sds-color-surface); }
.drawing .flute-h { stroke: var(--sds-color-text-muted); stroke-width: 1; }
.drawing .dim { stroke: var(--sds-color-primary); stroke-width: 1; }
.drawing .ext { stroke: var(--sds-color-primary); stroke-width: 1; opacity: .45; }
.drawing .dimtext {
  fill: var(--sds-color-primary);
  font-family: var(--sds-font-family-text); font-weight: var(--sds-font-weight-bold);
  font-size: 14px; text-anchor: middle;
}
.drawing .dimtext--v { text-anchor: middle; transform: rotate(-90deg); transform-origin: 26px 130px; }
.drawing .dimtext--vr { text-anchor: end; }

.legend {
  position: absolute; inset-block-end: var(--sds-space-400); inset-inline-start: var(--sds-space-500);
  inset-inline-end: var(--sds-space-500);
  display: flex; gap: var(--sds-space-500); align-items: center;
  font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted);
}
.legend i { display: inline-block; width: 18px; vertical-align: middle; margin-right: var(--sds-space-200); }
.legend .sw-dim { height: 0; border-top: 1.5px solid var(--sds-color-primary); }
.legend .sw-body { height: 8px; border-radius: var(--sds-radius-s); background: var(--sds-color-text); }
.legend .unit { margin-inline-start: auto; }

/* usage strip under the stage */
.usestrip { flex: none; border-top: 1px solid var(--sds-color-border); background: var(--sds-color-surface); }
.us-tabs { padding: 0 var(--sds-space-400); display: block; }
.us-row {
  display: flex; align-items: center; gap: var(--sds-space-400);
  padding: var(--sds-space-300) var(--sds-space-400);
  border-top: 1px solid var(--sds-color-border);
}
.us-row:hover { background: var(--sds-color-surface-hover); }
.us-row .ut {
  width: 42px; height: 32px; flex: none; border-radius: var(--sds-radius-m);
  border: 1px solid var(--sds-color-border);
  background:
    linear-gradient(var(--sds-color-surface-strong), var(--sds-color-surface-strong)) padding-box,
    repeating-linear-gradient(135deg, var(--sds-color-border) 0 1px, transparent 1px 6px);
}
.us-row .um { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.us-row .um b { font-weight: var(--sds-font-weight-bold); font-size: var(--sds-type-body-small-size); }
.us-row .um span { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }
.us-row .ucol { font-size: var(--sds-type-body-small-size); white-space: nowrap; }
.us-row .ago { margin-inline-start: auto; color: var(--sds-color-primary); flex: none; }

/* ===== INSPECTOR ===== */
.inspector { overflow: auto; padding: var(--sds-space-400); background: var(--sds-color-bg); min-height: 0; }
.ins-search {
  display: flex; align-items: center; gap: var(--sds-space-300);
  margin-bottom: var(--sds-space-400);
  position: sticky; inset-block-start: 0; z-index: 2;
  background: var(--sds-color-bg); padding-block: var(--sds-space-100);
}
.ins-search sds-search { flex: 1; min-width: 0; }
.ins-search .ct {
  flex: none; font-size: var(--sds-type-footnote-size); font-weight: var(--sds-font-weight-bold);
  color: var(--sds-color-text-muted);
  background: var(--sds-color-surface); border: 1px solid var(--sds-color-border);
  padding: 2px 9px; border-radius: var(--sds-radius-pill);
}

/* pinned defining dims */
.pinned { display: block; padding: var(--sds-space-400); margin-bottom: var(--sds-space-500); }
.pin-h { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); margin-bottom: var(--sds-space-300); }
.pin-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--sds-color-border);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-m); overflow: hidden;
}
.pin { background: var(--sds-color-surface); padding: var(--sds-space-300) var(--sds-space-400); }
.pin b { font-family: var(--sds-font-family-headline); font-weight: 300; font-size: 22px; line-height: 1; letter-spacing: -.02em; }
.pin small { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); margin-left: 3px; }
.pin span { display: block; margin-top: var(--sds-space-200); font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); }

/* parameter groups */
.igroup { margin-bottom: var(--sds-space-500); }
.ig-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--sds-type-footnote-size); text-transform: uppercase; letter-spacing: .08em;
  color: var(--sds-color-text-muted);
  padding-bottom: var(--sds-space-200); margin-bottom: var(--sds-space-200);
  border-bottom: 1px solid var(--sds-color-border);
}
.ig-h span { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); letter-spacing: 0; }
.irow {
  display: flex; align-items: baseline; gap: var(--sds-space-300);
  padding: var(--sds-space-200) var(--sds-space-300); border-radius: var(--sds-radius-m);
  font-size: var(--sds-type-body-small-size);
}
.irow:hover { background: var(--sds-color-surface-hover); }
.irow.active { background: var(--sds-color-surface); border: 1px solid var(--sds-color-border); }
.irow .ic { width: 48px; flex: none; color: var(--sds-color-text-muted); font-size: var(--sds-type-footnote-size); }
.irow .in { flex: 1; min-width: 0; }
.irow b { font-weight: var(--sds-font-weight-bold); white-space: nowrap; }
.irow b small { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); margin-left: 2px; }

.ins-foot { margin: var(--sds-space-400) 0 0; font-size: var(--sds-type-footnote-size); line-height: 1.5; }
.ins-foot b { color: var(--sds-color-text); font-weight: var(--sds-font-weight-bold); }

/* ---- Responsive: fold the split, let the page scroll -------------------- */
@media (max-width: 1100px) {
  .app { height: auto; grid-template-columns: 1fr; }
  .rail { flex-direction: row; align-items: center; gap: var(--sds-space-600); overflow-x: auto; }
  .main { height: auto; }
  .split { grid-template-columns: 1fr; }
  .stage { border-right: 0; border-bottom: 1px solid var(--sds-color-border); }
  .canvas { min-height: 360px; }
  .idmeta { white-space: normal; }
}
@media (max-width: 620px) {
  .idbar { flex-wrap: wrap; }
  .idactions { margin-left: 0; }
}