.stretches-workbench .arch-tab { font: inherit; font-size: .68rem; cursor: pointer; }
.stretches-workbench .input-form { display: grid; gap: 14px; }
.stretches-workbench .field-error:empty { display: none; }

.stretch-shape-choice {
  display: grid;
  gap: 7px;
}

.stretch-shape-choice > span {
  color: var(--text-soft);
  font-size: .57rem;
  font-weight: 820;
}

.stretch-execution-note {
  color: var(--text-soft);
  font-size: .55rem;
  line-height: 1.45;
}

.work-view-tabs {
  display: inline-flex;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(70, 116, 164, .14);
  border-radius: 14px;
  background: rgba(224, 239, 250, .72);
}

.work-view-tabs button,
.work-view-tabs > a,
.work-view-tabs > span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: .59rem;
  font-weight: 820;
  white-space: nowrap;
}

.work-view-tabs button .material-symbols-outlined,
.work-view-tabs > a .material-symbols-outlined,
.work-view-tabs > span .material-symbols-outlined { font-size: 16px; }

.work-view-tabs button.is-active,
.work-view-tabs > span.is-active {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(238, 248, 255, .92));
  box-shadow: 0 4px 12px rgba(43, 91, 132, .12);
  color: #245f8a;
}

.work-view-tabs > span { cursor: default; }

.drawing-panel__heading .work-view-tabs--panel {
  margin-left: auto;
}

.drawing-panel__heading .work-view-tabs--panel button,
.drawing-panel__heading .work-view-tabs--panel > a,
.drawing-panel__heading .work-view-tabs--panel > span {
  min-height: 32px;
  padding-inline: 9px;
}

.automatic-joint-policy {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(58, 142, 195, .2);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(214, 241, 255, .82), rgba(230, 239, 255, .72)),
    var(--surface-blue);
}

.automatic-joint-policy > .material-symbols-outlined {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: #267cae;
  font-size: 19px;
}

.automatic-joint-policy div { display: grid; gap: 4px; }
.automatic-joint-policy strong { color: var(--text); font-size: .64rem; }
.automatic-joint-policy small,
.automatic-joint-policy p { margin: 0; color: var(--muted); font-size: .54rem; line-height: 1.45; }
.automatic-joint-policy p { color: #24678f; font-weight: 780; }
.stretch-profile-settings {
  padding: 12px;
  border: 1px solid rgba(68, 152, 202, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(248, 252, 255, .92), rgba(232, 244, 252, .68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.stretch-profile-settings__title {
  color: var(--text-soft);
  font-size: .61rem;
  font-weight: 850;
}
.stretch-profile-settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  color: var(--text-soft);
  cursor: pointer;
  font-size: .57rem;
  font-weight: 820;
  list-style: none;
}
.stretch-profile-settings summary::-webkit-details-marker { display: none; }
.stretch-profile-settings__chevron {
  font-size: 18px;
  transition: transform .2s ease;
}
.stretch-profile-settings[open] .stretch-profile-settings__chevron { transform: rotate(180deg); }
.stretch-profile-settings__content {
  display: grid;
  gap: 8px;
  padding-top: 11px;
}
.stretch-profile-settings__content > p {
  margin: 0;
  color: var(--muted);
  font-size: .5rem;
  line-height: 1.45;
}
.stretch-profile-visibility {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(76, 156, 202, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: var(--text-soft);
  text-align: left;
}
.stretch-profile-visibility > .material-symbols-outlined {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgba(54, 155, 211, .12);
  color: #277ead;
  font-size: 17px;
}
.stretch-profile-visibility > span:nth-child(2) { display: grid; gap: 2px; }
.stretch-profile-visibility strong { font-size: .56rem; }
.stretch-profile-visibility small { color: var(--muted); font-size: .46rem; }
.stretch-profile-visibility__state {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(70, 128, 164, .2);
  border-radius: 10px;
  background: rgba(230, 238, 244, .8);
  color: #688091;
  font-size: 18px;
  transition: .18s ease;
}
.stretch-profile-visibility.is-active .stretch-profile-visibility__state {
  border-color: rgba(53, 169, 213, .4);
  background: #dff5ff;
  color: #277ead;
  box-shadow: inset 0 0 0 2px rgba(53, 169, 213, .08);
}
.stretch-auto-joint { cursor: pointer; }
.stretch-automatic-joint-value {
  align-content: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(48, 151, 208, .24);
  border-radius: 12px;
  background: rgba(226, 244, 255, .72);
}
.stretch-automatic-joint-value output {
  color: #246f9c;
  font-size: .72rem;
  font-weight: 880;
}
.stretch-profile-settings .measurement-grid { padding: 2px 0 0; }
.stretch-advised-field { display: grid; gap: 6px; }
.stretch-input-advice {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(48, 151, 208, .24);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(222, 244, 255, .84), rgba(231, 238, 255, .72));
  color: #236c98;
  font-size: .57rem;
  font-weight: 780;
  line-height: 1.45;
}
.stretch-input-advice:empty { display: none; }
.stretches-drawing .arch-canvas { min-height: 610px; }
.stretches-drawing .arch-canvas .drawing-zoom-surface > svg { width: 100%; height: 100%; min-height: 570px; }
.stretches-drawing .arch-canvas.is-three-d {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: stretch;
}

.jack-arch-depth-preview {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.jack-arch-depth-preview .arch-depth-preview__stage,
.jack-arch-depth-preview .arch-depth-preview__stage > svg {
  min-height: clamp(430px, 48vw, 650px);
}

.jack-arch-three-d__grid path {
  fill: none;
  opacity: .42;
  stroke: #8baebd;
  stroke-dasharray: 3 8;
  stroke-width: .8;
}

.jack-arch-three-d__face {
  cursor: pointer;
  transition: filter 150ms ease, stroke 150ms ease, stroke-width 150ms ease;
}

.jack-arch-three-d__face:hover {
  filter: saturate(1.08) brightness(1.06);
  stroke: rgba(31, 104, 137, .9);
  stroke-width: 1.12;
}

.jack-arch-three-d__face.is-selected {
  filter: saturate(1.16) brightness(1.11) drop-shadow(0 0 5px rgba(41, 143, 182, .5));
  stroke: #176f99;
  stroke-width: 1.45;
}

.jack-arch-three-d__face.is-keystone {
  fill: url("#jack-arch-3d-keystone");
  stroke: rgba(31, 105, 132, .75);
}

.jack-arch-three-d__face.is-depth-phase-one:not(.is-keystone, .is-natural-stone) {
  filter: hue-rotate(-5deg) saturate(.92) brightness(.98);
}

.jack-arch-three-d__face.is-depth-fitting:not(.is-natural-stone) {
  stroke: rgba(53, 117, 145, .72);
}

.jack-arch-three-d__numbers circle {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(69, 84, 96, .5);
  stroke-width: .75;
}

.jack-arch-three-d__numbers text {
  fill: #334956;
  font: 850 9px/1 var(--font-mono);
  text-anchor: middle;
}

.jack-arch-three-d__axis path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.1;
}

.jack-arch-three-d__axis path.is-width { stroke: #da7957; }
.jack-arch-three-d__axis path.is-height { stroke: #3e9fbf; }
.jack-arch-three-d__axis path.is-depth { stroke: #7c6dc2; }
.jack-arch-three-d__axis text {
  font: 850 11px/1 var(--font-mono);
}
.jack-arch-three-d__axis text.is-width { fill: #b55339; }
.jack-arch-three-d__axis text.is-height { fill: #237895; }
.jack-arch-three-d__axis text.is-depth { fill: #6557a7; }

.jack-arch-three-d__explode {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(49, 104, 130, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 8px 22px rgba(38, 70, 91, .12);
  color: #41677a;
  cursor: pointer;
  font: 820 .5rem/1 var(--font-sans);
  backdrop-filter: blur(10px);
}

.jack-arch-three-d__explode .material-symbols-outlined { font-size: 17px; }
.jack-arch-three-d__explode.is-active {
  border-color: rgba(43, 144, 184, .42);
  background: #e4f7ff;
  color: #216f91;
}

.jack-arch-three-d__inspector {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: grid;
  min-width: 168px;
  gap: 3px;
  padding: 12px 36px 12px 13px;
  border: 1px solid rgba(49, 104, 130, .2);
  border-radius: 13px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(34, 64, 82, .16);
  color: #536b78;
  font-size: .49rem;
  backdrop-filter: blur(12px);
}

.jack-arch-three-d__inspector > button {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: rgba(72, 117, 139, .08);
  color: #527286;
  cursor: pointer;
}

.jack-arch-three-d__inspector small {
  color: #2c88ad;
  font-size: .4rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.jack-arch-three-d__inspector strong {
  color: #293f4d;
  font-size: .67rem;
}

.jack-arch-three-d__facts {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

:root[data-theme="dark"] .jack-arch-three-d__explode,
:root[data-theme="dark"] .jack-arch-three-d__inspector {
  border-color: rgba(104, 180, 211, .25);
  background: rgba(15, 28, 37, .86);
  color: #aac5d1;
}

:root[data-theme="dark"] .jack-arch-three-d__explode.is-active {
  background: rgba(38, 124, 158, .32);
  color: #bde9fa;
}

:root[data-theme="dark"] .jack-arch-three-d__inspector strong { color: #edf6f9; }
:root[data-theme="dark"] .jack-arch-three-d__numbers circle { fill: rgba(13, 25, 33, .9); stroke: rgba(190, 220, 231, .52); }
:root[data-theme="dark"] .jack-arch-three-d__numbers text { fill: #e8f3f7; }

@media (max-width: 760px) {
  .jack-arch-three-d__facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .jack-arch-three-d__facts > span:last-child { grid-column: auto !important; }
  .jack-arch-three-d__explode { top: 9px; left: 9px; }
  .jack-arch-three-d__inspector { right: 9px; bottom: 54px; left: 9px; min-width: 0; }
}

.weaving-course-count { display: grid; gap: 6px; }
.weaving-course-count select { cursor: pointer; }
.weaving-course-count > small { color: var(--muted); font-size: .49rem; line-height: 1.45; }
.weaving-bond-choice > small { color: var(--muted); font-size: .49rem; line-height: 1.45; }

.weaving-drawing .arch-canvas {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .98), transparent 48%),
    linear-gradient(180deg, #fbfcfd, #f2f6f8);
}

.weaving-gable-svg {
  display: block;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.weaving-mortar-field { fill: #eee9e2; stroke: none; }
.weaving-tooth-reserve { fill: #eee9e2; stroke: none; }
.weaving-brick polygon {
  stroke: rgba(103, 57, 47, .72);
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.weaving-brick.is-normal polygon { fill: url(#weaving-wall-granite); }
.weaving-chimney-bricks .weaving-brick polygon { fill: url(#weaving-chimney-granite); }
.weaving-brick.is-weaving polygon { fill: url(#weaving-granite); }
.weaving-brick.is-ridge-closure polygon { fill: #9f5545; stroke: #743d32; stroke-width: 1.4; }

.weaving-setting-out-layer.is-hidden,
.weaving-profile-layer.is-hidden { display: none; }

.weaving-profile-line {
  fill: none;
  stroke: #171b1d;
  stroke-linecap: round;
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.weaving-profile-marks path {
  fill: none;
  stroke: #477283;
  stroke-width: .68;
  vector-effect: non-scaling-stroke;
}
.weaving-profile-marks--wall path { stroke: #dbe8ec; stroke-width: .62; }
.weaving-profile-marks--inclined path { stroke: #171b1d; stroke-width: .78; }

.weaving-wall-course-guide path {
  fill: none;
  opacity: .88;
  stroke: #2d91c9;
  stroke-dasharray: 5 4;
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
}
.weaving-wall-course-guide.is-reference path {
  opacity: .9;
  stroke: #101718;
  stroke-dasharray: none;
  stroke-width: 1.05;
}

.weaving-wire-label {
  fill: #eaf7fb;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .6px;
  paint-order: stroke;
  stroke: rgba(32, 34, 35, .92);
  stroke-width: 4px;
}

.weaving-station-shape {
  fill: none;
  stroke: rgba(45, 145, 201, .9);
  stroke-linejoin: round;
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
}
.weaving-station-interlock {
  fill: none;
  stroke: rgba(128, 79, 49, .88);
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}
.weaving-station circle {
  fill: #fff;
  stroke: #2d7fac;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.weaving-station text {
  fill: #1d5f83;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 950;
  text-anchor: middle;
}
.weaving-station .weaving-station-callout {
  font-size: 12px;
  letter-spacing: .4px;
  text-anchor: start;
}
.weaving-station .weaving-station-callout.is-right { text-anchor: end; }
.weaving-station.is-crown circle { stroke: #265d6f; }
.weaving-station.is-crown text { fill: #265d6f; }
.weaving-mould-overlay {
  fill: rgba(244, 193, 105, .1);
  stroke: #f2c36f;
  stroke-linejoin: round;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

.weaving-chimney-label text {
  fill: #594a40;
  font-size: 34px;
  font-weight: 850;
  text-anchor: middle;
}

.weaving-gable-outline {
  fill: none;
  stroke: #171a1b;
  stroke-linejoin: round;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}
.weaving-ridge-joint {
  fill: #eee9e2;
  stroke: none;
  pointer-events: none;
}

.weaving-dimensions { color: #356879; }
.weaving-dimensions path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  vector-effect: non-scaling-stroke;
}
.weaving-dimensions .weaving-dimension-extension {
  opacity: .62;
  stroke-dasharray: 5 4;
}
.weaving-dimensions text {
  fill: #244d5d;
  font-family: var(--font-mono);
  font-size: 54px;
  font-weight: 850;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 13px;
  stroke-linejoin: round;
}
.weaving-dimensions .weaving-angle-label { text-anchor: start; }
.weaving-gable-svg marker path { fill: #356879; }

.weaving-build-aid { display: grid; gap: 12px; padding: 15px; border-top: 1px solid var(--line-soft); background: #fff; }
.weaving-build-aid > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.weaving-build-aid > header > div { display: flex; min-width: 0; align-items: center; gap: 9px; }
.weaving-build-aid > header .material-symbols-outlined { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 10px; background: #eef5f7; color: #39758a; font-size: 18px; white-space: nowrap; }
.weaving-build-aid > header div div { display: grid; gap: 2px; }
.weaving-build-aid > header strong { color: var(--text); font-size: .64rem; }
.weaving-build-aid > header small { color: var(--muted); font-size: .49rem; line-height: 1.4; }
.weaving-build-aid > header > span { flex: 0 0 auto; padding: 6px 9px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; color: #3d6877; font-size: .49rem; font-weight: 850; }
.weaving-build-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.weaving-build-gauges > span { display: grid; gap: 4px; min-height: 48px; align-content: center; padding: 5px 10px; border-left: 1px solid var(--line-soft); }
.weaving-build-gauges > span:first-child { border-left: 0; }
.weaving-build-gauges small { color: var(--muted); font-size: .4rem; font-weight: 850; line-height: 1.25; }
.weaving-build-gauges b { color: var(--text); font-size: .57rem; line-height: 1.3; }
.weaving-station-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: #f7f9fa; }
.weaving-station-strip > strong { color: var(--text); font-size: .5rem; }
.weaving-station-strip > div { display: flex; min-width: 0; align-items: center; gap: 5px; overflow: hidden; }
.weaving-station-strip > div::before { height: 2px; flex: 1 1 12px; background: #47798a; content: ""; }
.weaving-station-strip span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border: 2px solid #47798a; border-radius: 50%; background: #fff; color: #315f70; font-size: .46rem; }
.weaving-station-strip span.is-crown { border-color: #35758a; color: #286477; }
.weaving-station-strip > small { color: #776a61; font-size: .43rem; }
.weaving-build-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.weaving-build-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 7px; align-items: start; padding: 4px 9px; border-left: 1px solid var(--line-soft); color: var(--muted); font-size: .47rem; line-height: 1.42; }
.weaving-build-steps li:first-child { border-left: 0; }
.weaving-build-steps li b { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #47798a; color: #fff; font-size: .45rem; }

.standing-bond-piece rect {
  fill: url("#standing-bond-whole");
  stroke: rgba(103, 57, 47, .72);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}
.standing-bond-piece.is-header rect { fill: url("#standing-bond-header"); }
.standing-bond-piece.is-fitting rect {
  fill: url("#standing-bond-fitting");
  stroke: rgba(103, 57, 47, .78);
}
.standing-bond-piece text {
  fill: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(38, 44, 61, .32);
  stroke-width: 2px;
}
.standing-bond-piece.is-fitting text { font-size: 10px; }
.standing-bond-ground,
.standing-bond-dimension path {
  fill: none;
  stroke: #384c5d;
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
}
.standing-bond-ground { stroke-width: 1.2; }
.standing-bond-dimension__extension { stroke: #7e96a8 !important; stroke-dasharray: 5 4 !important; }
.standing-bond-dimension text {
  fill: #172735;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 850;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 4px;
}
#standing-bond-arrow path { fill: context-stroke; }
.standing-bond-legend__items { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.standing-bond-legend__items span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .54rem; }
.standing-bond-legend__items i { width: 18px; height: 12px; border: 1px solid rgba(103, 57, 47, .55); border-radius: 3px; background: #c97961; }
.standing-bond-legend__items i.is-header { background: #b85f4b; }
.standing-bond-legend__items i.is-fitting { background: #d1825f; }
.standing-bond-legend__items b { color: var(--text); }

.stretch-stone-number {
  pointer-events: none;
  fill: #fff;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 850;
  text-anchor: middle;
  dominant-baseline: middle;
}

.stretch-centre { color: #149a96; }
.stretch-centre path,
.stretch-centre circle { fill: #fff; stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.stretch-centre text { fill: currentColor; font-size: 14px; font-weight: 900; }
.stretch-setting-lines.is-hidden,
.stretch-profile-boards.is-hidden { display: none; }
.stretch-profile-board > rect {
  fill: url("#stretch-profile-glass");
  filter: drop-shadow(0 8px 14px rgba(39, 114, 158, .2));
  stroke: #3d9ccd;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.stretch-profile-board__centre,
.stretch-profile-mark path,
.stretch-profile-dimension path {
  fill: none;
  stroke: #256b94;
  stroke-width: .62;
  vector-effect: non-scaling-stroke;
}
.stretch-setting-ray path {
  fill: none;
  opacity: .72;
  stroke: #2d91c9;
  stroke-linecap: butt;
  stroke-width: .28;
  vector-effect: non-scaling-stroke;
}
.stretch-reveal-references.is-hidden { display: none; }
.stretch-reveal-references path {
  fill: none;
  opacity: .72;
  stroke: #2d91c9;
  stroke-linecap: butt;
  stroke-width: .28;
  vector-effect: non-scaling-stroke;
}

.stretches-drawing .setting-out-center-vector {
  stroke-width: .32;
  vector-effect: non-scaling-stroke;
}
.stretch-profile-dimension__extension {
  stroke: #76a8c4 !important;
  stroke-dasharray: 5 4;
  stroke-width: .68 !important;
}
.stretch-profile-dimension__extension--vertical { opacity: .95; }
.stretch-profile-board__centre {
  stroke: #176c9c;
  stroke-width: .8;
}
.stretch-profile-mark circle {
  fill: #247fb6;
  stroke: #fff;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}
.stretch-profile-board__midpoint {
  fill: #fff;
  stroke: #247fb6;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}
.stretch-profile-board__midpoint-label {
  fill: #15577d;
  stroke: #fff;
}
.stretch-profile-dimension text,
.stretch-profile-board__title,
.stretch-profile-board__midpoint-label {
  fill: #174f70;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 850;
  text-anchor: middle;
}
.stretch-profile-mark text {
  font-family: var(--font-mono);
  font-weight: 900;
  text-anchor: middle;
}
.stretch-profile-mark__number { fill: #fff; font-size: 14px; }
.stretch-profile-board__title { text-anchor: start; font-size: 22px; }
.stretch-profile-board__midpoint-label { font-size: 18px; }
.stretch-profile-dimension text {
  fill: #111827;
  font-size: 18px;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .94);
  stroke-linejoin: round;
  stroke-width: 4px;
}
.stretch-profile-board__title,
.stretch-profile-board__midpoint-label {
  fill: #15577d;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 4px;
}
.stretch-profile-board__title { font-size: 24px; }

.stretch-stone-method {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}
.stretch-stone-method .stone-method-options { min-width: 0; width: 100%; }
.stretch-dimension--rise { color: #0f9ea0; }
.stretch-dimension--rise text { text-anchor: start; }
.stretch-dimension__extension,
.roll-layer-dimension__extension {
  fill: none;
  stroke: #7894a8 !important;
  stroke-dasharray: 5 5;
  stroke-width: .62 !important;
  vector-effect: non-scaling-stroke;
}
#stretch-arrow path { fill: context-stroke; }

.soldier-module-choice {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white);
}

.soldier-module-choice legend {
  padding-inline: 5px;
  color: var(--text-soft);
  font-size: .57rem;
  font-weight: 820;
}

.soldier-module-choice > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-raised) 82%, #dcebf2);
}

.soldier-module-choice button {
  display: grid;
  min-width: 0;
  min-height: 43px;
  place-content: center;
  gap: 1px;
  padding: 5px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.soldier-module-choice button.is-active {
  border-color: rgba(80, 147, 178, .23);
  background: linear-gradient(135deg, rgba(231, 248, 253, .98), rgba(255, 242, 215, .92));
  box-shadow: 0 4px 12px rgba(43, 87, 109, .1), inset 0 1px rgba(255, 255, 255, .92);
  color: #245f8a;
}

.soldier-module-choice strong { font-size: .62rem; font-weight: 900; }
.soldier-module-choice small { font-size: .42rem; font-weight: 750; }

.roll-layer-stone rect {
  fill: #ed9678;
  filter: drop-shadow(0 .7px .45px rgba(75, 52, 70, .2));
  stroke: rgba(48, 55, 78, .38);
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
}
.roll-layer-stone text {
  fill: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}
.roll-layer-stone.is-cut rect {
  fill: #ed9678;
  stroke: rgba(14, 112, 124, .82);
  stroke-width: 1.05;
}
.roll-layer-module-dimension path {
  fill: none;
  stroke: #111827;
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}
.roll-layer-module-dimension text {
  fill: #111827;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 850;
  text-anchor: middle;
}
.roll-layer-setting-mark path {
  display: none;
  fill: none;
  opacity: .62;
  stroke: #4978cc;
  stroke-dasharray: 4 4;
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}
.roll-layer-setting-mark.is-guide path { display: initial; }
.roll-layer-setting-mark circle {
  fill: #258ebd;
  stroke: #fff;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.roll-layer-setting-mark text {
  fill: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  text-anchor: middle;
}
.roll-layer-setting-mark__value {
  fill: #155f91 !important;
  font-size: 9px !important;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 3px;
}
.roll-layer-height-dimension text { text-anchor: middle; }
#roll-layer-arrow path { fill: context-stroke; }

.roll-layer-drawing .arch-canvas.is-three-d {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: stretch;
}

.roll-layer-depth-preview {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.roll-layer-depth-preview .arch-depth-preview__stage,
.roll-layer-depth-preview .arch-depth-preview__stage > svg {
  min-height: clamp(400px, 47vw, 610px);
}

.roll-layer-three-d-svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

.roll-layer-three-d-ground-shadow {
  fill: rgba(40, 61, 78, .13);
  filter: blur(7px);
}

.roll-layer-three-d-back,
.roll-layer-three-d-mortar-front,
.roll-layer-three-d-mortar-top,
.roll-layer-three-d-mortar-side {
  fill: url("#roll-layer-3d-mortar");
  stroke: rgba(74, 91, 101, .52);
  stroke-width: .62;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.roll-layer-three-d-back { opacity: .88; }
.roll-layer-three-d-mortar-side { filter: brightness(.88); }
.roll-layer-three-d-stone-top { fill: url("#roll-layer-3d-brick-top"); }
.roll-layer-three-d-stone-side { fill: url("#roll-layer-3d-brick-side"); }
.roll-layer-three-d-stone-front rect { fill: url("#roll-layer-3d-brick-front"); }
.roll-layer-three-d-stone-top,
.roll-layer-three-d-stone-side,
.roll-layer-three-d-stone-front rect {
  stroke: rgba(82, 45, 37, .67);
  stroke-width: .6;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.roll-layer-three-d-stone-top.is-cut,
.roll-layer-three-d-stone-side.is-cut,
.roll-layer-three-d-stone-front.is-cut rect {
  stroke: rgba(20, 116, 130, .9);
  stroke-width: .9;
}

.roll-layer-three-d-stone-front text {
  fill: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(76, 49, 42, .42);
  stroke-width: 1.5px;
}

.roll-layer-three-d-outline {
  fill: none;
  stroke: rgba(51, 65, 78, .7);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}

.roll-layer-three-d-depth-dimension path {
  fill: none;
  stroke: #3c728c;
  stroke-width: .68;
  vector-effect: non-scaling-stroke;
}

.roll-layer-three-d-depth-dimension .roll-layer-three-d-arrow-line {
  marker-start: url("#roll-layer-3d-arrow");
  marker-end: url("#roll-layer-3d-arrow");
}

.roll-layer-three-d-card rect {
  fill: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  stroke: color-mix(in srgb, #668698 38%, var(--line));
  stroke-width: .75;
}

.roll-layer-three-d-card text {
  fill: var(--muted);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .06em;
}

.roll-layer-three-d-card .roll-layer-three-d-card__value {
  fill: #447c98;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.roll-layer-three-d-card path {
  fill: none;
  stroke: color-mix(in srgb, #668698 28%, var(--line));
  stroke-width: .7;
}

.stretches-drawing .setting-out-menu__steps {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.stretches-drawing .setting-out-menu__steps span {
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.25;
}
.stretches-drawing .setting-out-menu__steps b {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  font-size: .8rem;
}
.stretch-setting-out-menu {
  border-top-color: rgba(66, 155, 207, .28);
  background:
    linear-gradient(118deg, rgba(205, 239, 255, .58), rgba(221, 232, 255, .52)),
    rgba(255, 255, 255, .78);
}

.arch-canvas.is-saw-view {
  min-height: 0;
  align-items: stretch;
  padding: clamp(16px, 2.4vw, 28px);
}

.work-saw-view {
  display: grid;
  align-content: start;
  gap: 18px;
  width: 100%;
  color: var(--text);
}

.work-saw-view > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(51, 135, 187, .2);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(215, 241, 255, .76), rgba(231, 239, 255, .7));
}

.work-saw-view > header > .material-symbols-outlined {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #2f8cbd;
  color: #fff;
  font-size: 20px;
}

.work-saw-view h3,
.work-saw-view p { margin: 0; }
.work-saw-view h3 { font-size: .76rem; }
.work-saw-view p { margin-top: 3px; color: var(--muted); font-size: .57rem; line-height: 1.5; }

.work-saw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 11px;
}

.work-saw-card {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 8px 22px rgba(50, 80, 112, .06);
}

.work-saw-card > header {
  display: flex;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(226, 241, 251, .62);
}

.work-saw-card header b { font-size: .61rem; }
.work-saw-card header span { color: #25749f; font-family: var(--font-mono); font-size: .6rem; font-weight: 850; }
.work-saw-card dl { display: grid; gap: 0; margin: 0; }
.work-saw-card dl > div {
  display: grid;
  grid-template-columns: minmax(90px, .75fr) minmax(0, 1.4fr);
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.work-saw-card dl > div:last-child { border-bottom: 0; }
.work-saw-card dt,
.work-saw-card dd { margin: 0; font-size: .53rem; line-height: 1.45; }
.work-saw-card dt { color: var(--muted); font-weight: 760; }
.work-saw-card dd { color: var(--text); font-weight: 700; }
.work-saw-card .is-cut dd { color: #1e6f9b; }

:root[data-theme="dark"] .work-view-tabs {
  border-color: rgba(121, 191, 235, .18);
  background: linear-gradient(145deg, rgba(25, 43, 58, .88), rgba(34, 36, 62, .82));
}

:root[data-theme="dark"] .weaving-enable {
  border-color: rgba(111, 190, 213, .22);
  background: linear-gradient(145deg, rgba(22, 38, 49, .96), rgba(30, 44, 57, .9));
}
:root[data-theme="dark"] .weaving-enable.is-active { border-color: rgba(80, 192, 191, .4); }
:root[data-theme="dark"] .weaving-drawing .arch-canvas {
  background: linear-gradient(180deg, rgba(19, 29, 37, .98), rgba(26, 36, 43, .95));
}
:root[data-theme="dark"] .weaving-dimensions text { fill: #b9e6ef; stroke: rgba(20, 29, 36, .96); }
:root[data-theme="dark"] .weaving-gable-outline { stroke: #c8dce5; }

:root[data-theme="dark"] .work-view-tabs button.is-active,
:root[data-theme="dark"] .work-view-tabs > span.is-active,
:root[data-theme="dark"] .automatic-joint-policy > .material-symbols-outlined {
  background: linear-gradient(145deg, rgba(54, 83, 105, .92), rgba(48, 55, 84, .92));
  color: #9bd8ff;
}

:root[data-theme="dark"] .soldier-module-choice {
  border-color: var(--line);
  background: rgba(21, 30, 38, .88);
}

:root[data-theme="dark"] .soldier-module-choice > div {
  background: rgba(8, 17, 24, .46);
}

:root[data-theme="dark"] .soldier-module-choice button.is-active {
  border-color: rgba(117, 190, 229, .34);
  background: linear-gradient(135deg, rgba(35, 91, 112, .72), rgba(103, 76, 38, .52));
  color: #d7f3fb;
}

:root[data-theme="dark"] .automatic-joint-policy,
:root[data-theme="dark"] .work-saw-view > header {
  border-color: rgba(111, 190, 235, .22);
  background: linear-gradient(135deg, rgba(27, 55, 72, .9), rgba(39, 40, 69, .88));
}

:root[data-theme="dark"] .automatic-joint-policy p { color: #8bd3ff; }
:root[data-theme="dark"] .stretch-input-advice {
  border-color: rgba(111, 190, 235, .25);
  background: linear-gradient(135deg, rgba(26, 65, 87, .7), rgba(48, 45, 82, .66));
  color: #a8dcfb;
}
:root[data-theme="dark"] .stretch-profile-visibility {
  border-color: rgba(111, 190, 235, .2);
  background: rgba(40, 57, 72, .62);
  color: var(--text);
}
:root[data-theme="dark"] .stretches-workbench .field__control,
:root[data-theme="dark"] .stretches-workbench .brick-picker__selected,
:root[data-theme="dark"] .stretches-workbench .natural-stone-control,
:root[data-theme="dark"] .stretch-profile-settings {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(16, 24, 32, .96), rgba(31, 29, 46, .92));
  color: var(--text);
}
:root[data-theme="dark"] .work-saw-card {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(24, 31, 40, .96), rgba(28, 30, 46, .94));
}
:root[data-theme="dark"] .work-saw-card > header { background: rgba(72, 129, 162, .14); }
:root[data-theme="dark"] .roll-layer-setting-mark__value {
  fill: #92d7ff !important;
  stroke: rgba(12, 17, 23, .96);
}

@media (max-width: 760px) {
  .soldier-module-choice > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calculator-topbar:has(.work-view-tabs) { align-items: stretch; flex-direction: column; gap: 8px; }
  .calculator-topbar:has(.work-view-tabs) .arch-tabs,
  .calculator-topbar:has(.work-view-tabs) .work-view-tabs { width: 100%; overflow-x: auto; }
  .work-view-tabs button { flex: 1; justify-content: center; }
  .stretches-drawing .arch-canvas { min-height: 360px; }
  .stretches-drawing .arch-canvas .drawing-zoom-surface > svg { min-height: 340px; }
  .stretches-results .result-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .stretches-results .result-row > span { min-width: 0; font-size: .62rem; }
  .stretches-results .result-row output { white-space: nowrap; font-size: .67rem; }
  .weaving-results .result-list { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .weaving-results .result-row { min-width: 0; }
  .weaving-results .result-row output { white-space: normal; }
  .stretches-drawing .setting-out-menu__steps { grid-template-columns: 1fr; }
  .weaving-build-aid > header { align-items: flex-start; flex-direction: column; }
  .weaving-build-gauges,
  .weaving-build-steps { grid-template-columns: 1fr 1fr; }
  .weaving-station-strip { grid-template-columns: 1fr; }
  .weaving-three-mf__popover { right: -44px; width: min(330px, calc(100vw - 28px)); }
  .weaving-three-mf__controls,
  .weaving-three-mf__locked { justify-content: space-between; }
  .work-saw-grid { grid-template-columns: 1fr; }
  .work-saw-card dl > div { grid-template-columns: 1fr; gap: 3px; }
}

.work-view-tabs > a.calculator-print-button { width: auto; min-width: 0; box-shadow: none; background: transparent; color: var(--text); text-decoration: none; }
.work-view-tabs > a.calculator-print-button:hover { background: var(--surface-raised); transform: none; }
.work-view-tabs > a.calculator-print-button.is-disabled { opacity: .45; cursor: not-allowed; }

/* Keep the model at the top of its column, independent of result length. */
.calculator-grid:has(.jack-arch-input) .stretches-drawing { align-self: start; min-height: 0; }
.calculator-grid:has(.jack-arch-input) .stretches-drawing .arch-canvas { flex: none; height: 570px; min-height: 0; align-content: start; }
.calculator-grid:has(.jack-arch-input) .stretches-drawing .arch-canvas .drawing-zoom-surface { height: 100%; min-height: 0; }
.calculator-grid:has(.jack-arch-input) .stretches-drawing .arch-canvas .drawing-zoom-surface > svg { min-height: 0; }
.calculator-grid:has(.jack-arch-input) .stretches-drawing .arch-canvas.is-three-d { height: auto; }
.jack-arch-depth-preview { height: auto; }
.jack-arch-primary-input, .jack-arch-advanced-input { display: grid; gap: 14px; min-width: 0; }
.stretch-profile-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 18px; border-bottom: 1px solid var(--line-soft); }
.stretch-profile-toolbar button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; background: var(--surface); color: var(--text); font: inherit; font-size: .6rem; cursor: pointer; }
.stretch-profile-toolbar button[aria-pressed="true"] { color: #175d83; background: #e1f2fa; border-color: #6baccb; }
.stretch-profile-toolbar .material-symbols-outlined { font-size: 18px; }
.stretch-profile-toolbar > span { font-size: .52rem; color: var(--text-soft); }
.stretch-profile-mark__number { fill: #174f70; font-size: 15px; paint-order: stroke; stroke: #f5fbff; stroke-width: 2px; }
.stretch-profile-mark.is-selected circle { fill: #ce641f; stroke: #fff; r: 9px; }
.stretch-profile-mark.is-selected text { fill: #993d08; font-weight: 950; }
.stretch-setting-ray.is-selected path { stroke: #c66426; stroke-width: 1.3; opacity: 1; }
.stretch-profile-readout { padding: 16px 20px 20px; border-top: 1px solid var(--line); background: var(--surface); color: var(--text); }
.stretch-profile-readout summary { cursor: pointer; font-size: .68rem; font-weight: 800; }
.stretch-profile-readout > p { font-size: .57rem; line-height: 1.6; color: var(--text-soft); margin: 12px 0; }
.stretch-profile-readout__positions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.stretch-profile-readout__positions > span { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; font-size: .6rem; background: var(--surface-blue); }
.stretch-profile-readout table { border-collapse: collapse; width: 100%; font-size: .58rem; font-variant-numeric: tabular-nums; }
.stretch-profile-readout th, .stretch-profile-readout td { padding: 8px 5px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.stretch-profile-readout th:first-child { text-align: left; }
.stretch-profile-readout td { font-family: var(--font-mono); }
.stretch-profile-readout tr.is-selected { background: #fff0df; color: #793c13; }
.stretch-profile-readout button { min-height: 36px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: inherit; cursor: pointer; font: inherit; font-weight: 750; }
.stretch-profile-readout button[aria-pressed="true"] { background: #984618; color: #fff; border-color: #984618; }
@media screen and (max-width: 1080px) {
 .stretches-workbench .calculator-grid:has(.jack-arch-input) { grid-template-columns: minmax(0,1fr); min-height: 0; }
 .jack-arch-input, .jack-arch-input > .input-form { display: contents; }
 .jack-arch-input > .panel-heading { display: none; }
 .jack-arch-primary-input { grid-column: 1; grid-row: 1; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
 .jack-arch-advanced-input { grid-column: 1; grid-row: 3; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
 .calculator-grid:has(.jack-arch-input) .stretches-drawing { grid-column: 1; grid-row: 2; }
 .calculator-grid:has(.jack-arch-input) .stretches-results { grid-column: 1; grid-row: 4; }
 .calculator-grid:has(.jack-arch-input) .stretches-drawing .arch-canvas { height: 470px; }
}
@media screen and (max-width: 620px) {
 .calculator-grid:has(.jack-arch-input) .stretches-drawing .arch-canvas { height: 400px; }
 .stretch-profile-readout { padding-inline: 12px; }
 .stretch-profile-toolbar { padding-inline: 12px; }
 .jack-arch-depth-preview .arch-depth-preview__stage, .jack-arch-depth-preview .arch-depth-preview__stage > svg { min-height: 300px; }
}
.stretch-profile-settings { border-radius: 8px; }
.stretch-profile-settings__title { font-size: .66rem; }
.stretch-profile-settings__content > p { font-size: .58rem; line-height: 1.6; }
.stretch-profile-visibility { border-radius: 7px; cursor: pointer; }
.stretch-profile-visibility strong { font-size: .6rem; }
.stretch-profile-visibility small { font-size: .52rem; }
.stretch-profile-readout__positions { grid-template-columns: minmax(0,1fr); }
.stretch-profile-detail { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.stretch-profile-detail header { display: flex; justify-content: space-between; gap: 8px; font-size: .62rem; }
.stretch-profile-detail header > span { color: var(--text-soft); font-weight: 500; }
.stretch-profile-detail svg { display: block; width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.stretch-profile-detail__board { fill: #e1f0f7; stroke: #4c94ba; stroke-width: 1; }
.stretch-profile-detail__centre { stroke: #318e99; stroke-width: 2; stroke-dasharray: 4 3; }
.stretch-profile-detail text { fill: var(--text); text-anchor: middle; font: 20px var(--font-mono); }
.stretch-profile-detail__mark path { stroke: #6795ac; stroke-width: 1.2; }
.stretch-profile-detail__mark circle { fill: #447e9d; }
.stretch-profile-detail__mark.is-selected path { stroke: #c66321; stroke-width: 3; }
.stretch-profile-detail__mark.is-selected circle { fill: #c66321; r: 6px; }
.stretch-profile-detail .stretch-profile-detail__hint { fill: var(--text-soft); font: 18px var(--font-sans, sans-serif); }

.stretch-wire-picker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0 16px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-subtle); }
.stretch-wire-picker__controls { display: flex; align-items: end; gap: 6px; }
.stretch-wire-picker__controls button { display: grid; place-items: center; width: 34px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-strong); color: var(--text); cursor: pointer; }
.stretch-wire-picker label { display: grid; gap: 5px; font-size: .65rem; color: var(--muted); }
.stretch-wire-picker select { min-height: 36px; min-width: 100px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: .8rem; background: var(--surface-strong); color: var(--text); }
.stretch-wire-picker__measurements { display: flex; gap: 22px; }
.stretch-wire-picker__measurements > span { display: grid; gap: 4px; }
.stretch-wire-picker__measurements small { font-size: .64rem; color: var(--muted); }
.stretch-wire-picker__measurements strong { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--sapphire); }
.stretch-profile-instructions { padding-left: 20px; display: grid; gap: 7px; color: var(--text-soft); font-size: .75rem; line-height: 1.6; }
.stretch-profile-scale { font-size: .67rem; color: var(--muted); line-height: 1.6; }
@media(max-width:620px) { .stretch-wire-picker { margin-inline: 10px; } .stretch-wire-picker__measurements { gap: 18px; } .stretch-wire-picker__controls button { width: 40px; height: 40px; } .stretch-wire-picker select { min-height: 40px; } }
/* Interactive setting-out canvas, sharing the exact profile/stone SVG with print. */
brickcore-drawing-view { display:block; position:relative; width:100%; height:100%; min-width:0; min-height:460px; background:var(--surface,#fff); border:1px solid var(--line,#d4dfe7); border-radius:8px; overflow:hidden; }
brickcore-drawing-view:fullscreen { height:100dvh; background:var(--surface,#fff); border:0; border-radius:0; }
.setting-out-viewport { position:absolute; inset:0; touch-action:none; user-select:none; cursor:grab; outline-offset:-3px; }
brickcore-drawing-view[data-dragging=true] .setting-out-viewport { cursor:grabbing; }
.stretches-drawing .setting-out-viewport > svg { display:block; width:100%; height:100%; min-height:0; max-width:none; }
.setting-out-viewport__controls { position:absolute; right:14px; top:14px; display:flex; gap:1px; padding:3px; border:1px solid var(--line,#c9d7e1); border-radius:7px; background:var(--surface,#fff); box-shadow:0 3px 14px #24384d14; }
.setting-out-viewport__controls button { min-width:44px; min-height:44px; border:0; border-radius:4px; background:transparent; color:var(--text,#203547); font:600 .78rem var(--font-sans,system-ui); cursor:pointer; }
.setting-out-viewport__controls button[data-action=fit] { min-width:64px; }
.setting-out-viewport__controls button:hover { background:var(--surface-blue,#eaf2f7); }
.setting-out-viewport__controls button:focus-visible { outline:2px solid #287bac; outline-offset:1px; }
.setting-out-viewport__hint { position:absolute; bottom:10px; left:12px; max-width:calc(100% - 24px); margin:0; padding:6px 10px; border-radius:4px; background:var(--surface,#fff); color:var(--text-soft,#607486); font-size:.62rem; pointer-events:none; }
.stretches-drawing:has(brickcore-drawing-view) .arch-canvas { display:block; padding:12px; min-height:500px; overflow:hidden; }
.stretch-profile-toolbar { padding:12px 16px; background:var(--surface,#fff); }
.stretch-profile-toolbar button { min-height:44px; font-size:.72rem; }
.stretch-profile-toolbar>span { font-size:.66rem; }
.stretch-wire-picker { gap:12px; padding:12px 16px; background:var(--surface-blue,#eef4f8); }
.stretch-wire-picker__controls button { min-width:44px; min-height:44px; }
.stretch-wire-picker__controls select { min-height:44px; font-size:.76rem; }
.stretch-wire-picker__measurements small { font-size:.62rem; }
.stretch-wire-picker__measurements strong { font-size:.88rem; }
.stretch-profile-readout summary { font-size:.8rem; }
.stretch-profile-readout table { font-size:.76rem; }
/* Opaque materials: the shared header-gradient IDs do not exist in this model. */
.jack-arch-depth-preview .arch-depth-preview__background { fill:#f6f8fa; }
.jack-arch-depth-preview .jack-arch-three-d__face { fill:#b68464; fill-opacity:1; opacity:1; stroke:#654c3e; stroke-opacity:1; stroke-width:.65; filter:none; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-front { fill:#bb8b6c; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-rear { fill:#a17152; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-side { fill:#8e6148; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-top-face { fill:#d4ac8b; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-natural-stone { fill:#abb5b5; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-keystone { fill:#9a745b; }
.jack-arch-depth-preview .jack-arch-three-d__face.is-selected { fill:#347ca4; stroke:#143e56; stroke-width:1.2; filter:none; }
.jack-arch-depth-preview .jack-arch-three-d__face:hover { stroke:#173d56; stroke-width:1.2; filter:brightness(1.07); }
.jack-arch-depth-preview>header { background:var(--surface,#fff); padding:16px; }
.jack-arch-depth-preview>header strong { font-size:.9rem; }
.jack-arch-depth-preview>header small { font-size:.67rem; line-height:1.5; }
.jack-arch-depth-preview .arch-depth-preview__views button { min-height:44px; font-size:.7rem; }
.jack-arch-three-d__tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-block:1px solid var(--line-soft,#d7e0e7); background:var(--surface,#fff); }
.jack-arch-three-d__tools>div { display:flex; gap:5px; }
.jack-arch-three-d__tools button { min-height:44px; padding:7px 10px; font:inherit; font-size:.68rem; border:1px solid var(--line,#c7d4de); border-radius:5px; color:var(--text,#203547); background:var(--surface,#fff); cursor:pointer; }
.jack-arch-three-d__tools button[aria-pressed=true] { background:#e4f0f7; color:#145981; border-color:#75a3c1; }
.jack-arch-three-d__tools label { display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:.67rem; color:var(--text-soft,#607486); }
.jack-arch-three-d__tools select { min-height:44px; max-width:100%; padding:7px; font:inherit; color:var(--text,#203547); background:var(--surface,#fff); border:1px solid var(--line,#c7d4de); border-radius:5px; }
.jack-arch-three-d__dimensions { pointer-events:none; }
.jack-arch-three-d__dimensions path { fill:none; stroke:#286a90; stroke-width:1; vector-effect:non-scaling-stroke; }
.jack-arch-three-d__dimensions circle { fill:#286a90; }
.jack-arch-three-d__dimensions text { fill:#1c4e6b; font:600 18px system-ui,sans-serif; text-anchor:middle; paint-order:stroke; stroke:#f6f8fa; stroke-width:6px; stroke-linejoin:round; }
.jack-arch-depth-preview .arch-depth-preview__zoom button { min-width:44px; min-height:44px; font-size:.76rem; }
.jack-arch-depth-preview .jack-arch-three-d__inspector { padding:14px 36px 14px 16px; border-radius:6px; background:#fff; color:#203547; font-size:.7rem; gap:6px; }
.jack-arch-depth-preview .jack-arch-three-d__inspector strong { font-size:.9rem; }
.jack-arch-depth-preview .jack-arch-three-d__facts small { font-size:.6rem; }
.jack-arch-depth-preview .jack-arch-three-d__facts b { font-size:.8rem; }
@media(max-width:600px){
 brickcore-drawing-view { min-height:430px; }
 .stretches-drawing:has(brickcore-drawing-view) .arch-canvas { min-height:450px; padding:8px; }
 .setting-out-viewport__controls { top:8px; right:8px; }
 .setting-out-viewport__hint { font-size:.57rem; left:8px; bottom:8px; }
 .stretch-wire-picker__measurements { flex:1 1 100%; }
 .jack-arch-three-d__tools { padding:10px; gap:8px; }
 .jack-arch-depth-preview .arch-depth-preview__stage, .jack-arch-depth-preview .arch-depth-preview__stage>svg { min-height:410px; }
 .jack-arch-depth-preview .jack-arch-three-d__inspector { position:relative; inset:auto; margin:0 10px 12px; }
}
@media(max-width:700px) {
 .jack-arch-three-d__dimensions text { font-size:30px; stroke-width:7px; }
 .jack-arch-three-d__tools label { font-size:.75rem; }
 .jack-arch-three-d__tools button { font-size:.74rem; }
 .jack-arch-depth-preview .jack-arch-three-d__inspector strong { color:#203547; }
}
/* Keep controls and the selected-stone card clear of the measured drawing. */
.setting-out-viewport { inset:68px 0 38px; }
.setting-out-viewport__controls { top:10px; right:10px; box-shadow:none; }
.setting-out-viewport__hint { bottom:5px; }
.jack-arch-depth-preview { background:#f6f8fa; }
.jack-arch-depth-preview .arch-depth-preview__stage { min-height:0; grid-template-columns:minmax(0,1fr); }
.jack-arch-depth-preview .arch-depth-preview__stage>svg { height:440px; min-height:0; }
.jack-arch-depth-preview .arch-depth-preview__zoom { position:static; justify-self:end; margin:0 14px 14px; }
.jack-arch-depth-preview .jack-arch-three-d__inspector { position:relative; inset:auto; min-width:0; margin:0 14px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; line-height:1.5; box-shadow:none; }
.jack-arch-depth-preview .jack-arch-three-d__inspector>small,
.jack-arch-depth-preview .jack-arch-three-d__inspector>strong { grid-column:1/-1; }
@media(max-width:600px) {
 .setting-out-viewport { inset:62px 0 34px; }
 .jack-arch-depth-preview .arch-depth-preview__stage>svg { height:330px; }
 .jack-arch-depth-preview .jack-arch-three-d__inspector { margin-inline:10px; }
}
.calculator-grid:has(.jack-arch-input) .stretches-drawing:has(brickcore-drawing-view) .arch-canvas { height:570px; min-height:0; }
@media(max-width:900px) { .calculator-grid:has(.jack-arch-input) .stretches-drawing:has(brickcore-drawing-view) .arch-canvas { height:510px; } }
@media(max-width:600px) { .calculator-grid:has(.jack-arch-input) .stretches-drawing:has(brickcore-drawing-view) .arch-canvas { height:480px; } }
@media(max-width:700px) {
 .jack-arch-three-d__dimensions>g:nth-child(2) text { text-anchor:end; }
}
@media(max-width:700px) {
 .jack-arch-depth-preview:has(.arch-depth-preview__views button:nth-child(3).is-active) .jack-arch-three-d__dimensions>g:nth-child(2) text,
 .jack-arch-depth-preview:has(.arch-depth-preview__views button:nth-child(4).is-active) .jack-arch-three-d__dimensions>g:nth-child(2) text { text-anchor:start; }
 .jack-arch-depth-preview:not(:has(.arch-depth-preview__views button:nth-child(4).is-active)) .jack-arch-three-d__dimensions>g:nth-child(2) text { transform:translateY(-65px); }
}