.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;
}

.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 > 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 > 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 > 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: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(246, 249, 252, .7);
}
.stretch-profile-settings summary {
  padding: 11px 0;
  color: var(--text-soft);
  cursor: pointer;
  font-size: .57rem;
  font-weight: 820;
}
.stretch-profile-settings > p {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: .5rem;
  line-height: 1.45;
}
.stretch-profile-settings .measurement-grid { padding-bottom: 12px; }
.stretch-advised-field { display: grid; gap: 6px; }
.stretch-input-advice {
  margin: 0 2px;
  background: linear-gradient(90deg, #991b1b, #dc2626 52%, #c2410c);
  background-clip: text;
  color: transparent;
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.35;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stretch-input-advice:empty { display: none; }
.stretches-drawing .arch-canvas { min-height: 610px; }
.stretches-drawing .arch-canvas > svg { width: 100%; height: 100%; min-height: 570px; }

.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 7px 12px rgba(55, 139, 187, .2));
  stroke: #69b5df;
  stroke-width: 1.2;
  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 {
  opacity: .88;
  stroke: #2d91c9;
  stroke-linecap: round;
  stroke-width: .72;
  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; }

.roll-layer-stone rect {
  fill: url("#roll-layer-brick");
  stroke: rgba(48, 55, 78, .48);
  stroke-width: .7;
  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: url("#roll-layer-brick");
  stroke: #1c6f9f;
  stroke-dasharray: 3 2;
}
.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; }

.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"] .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"] .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"] .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) {
  .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 > 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; }
  .stretches-drawing .setting-out-menu__steps { grid-template-columns: 1fr; }
  .work-saw-grid { grid-template-columns: 1fr; }
  .work-saw-card dl > div { grid-template-columns: 1fr; gap: 3px; }
}