.calculator-page {
  padding-top: max(18px, calc(var(--safe-top) + 12px));
}

.calculator-access {
  display: grid;
  min-height: calc(100vh - 250px);
  place-items: center;
  padding-block: 72px;
}

.calculator-access__card {
  width: min(590px, 100%);
  padding: clamp(30px, 6vw, 55px);
  border: 1px solid rgba(110, 77, 196, 0.17);
  border-radius: 36px;
  background:
    radial-gradient(circle at 100% 0%, rgba(82, 175, 238, 0.16), transparent 19rem),
    radial-gradient(circle at 0% 100%, rgba(190, 95, 216, 0.14), transparent 18rem),
    rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow);
  text-align: center;
}

.calculator-access__card > span {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  place-items: center;
  border-radius: 21px;
  background: linear-gradient(145deg, #7a52d1, #b44dce 52%, #3d88df);
  box-shadow: 0 15px 32px rgba(100, 64, 180, 0.22);
  color: #ffffff;
}

.calculator-access__card h1,
.calculator-access__card h2 {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.8rem);
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.calculator-access__card p {
  margin: 17px auto 25px;
  color: var(--muted);
}

.calculator-access__actions {
  display: grid;
  justify-items: center;
  gap: 15px;
}

.calculator-access__login {
  color: #6753ad;
  font-size: 0.79rem;
  font-weight: 750;
  text-decoration: none;
}

.calculator-access__login:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.calculator-workbench {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 55% 70% at -4% 0%, rgba(128, 104, 216, 0.09), transparent 72%),
    radial-gradient(ellipse 52% 66% at 104% 14%, rgba(100, 181, 246, 0.11), transparent 73%),
    rgba(255, 255, 255, 0.88);
  box-shadow:
    var(--shadow),
    inset 0 1px rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(124%);
}

.calculator-workbench::before {
  position: absolute;
  z-index: 10;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 3%, var(--navy) 15%, var(--sky) 28%, var(--violet) 43%, var(--sapphire) 59%, var(--violet-deep) 76%, transparent 95%);
  background-size: 320% 320%;
  content: "";
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gemstone-edge 9s linear infinite;
}

.calculator-topbar {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.58), rgba(241, 245, 252, 0.38)),
    rgba(250, 251, 253, 0.64);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.calculator-workbench[data-calculation-state="pending"] :is(.drawing-panel, .results-panel) {
  opacity: 0.9;
  transition: opacity 160ms ease;
}

.arch-tabs {
  display: flex;
  min-width: 0;
  gap: 5px;
}

.circle-window-choice {
  display: grid;
  gap: 9px;
}

.circle-window-choice > strong {
  font-size: .66rem;
  font-weight: 830;
}

.circle-window-choice > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.circle-window-choice button {
  min-height: 43px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-size: .62rem;
  font-weight: 800;
}

.circle-window-choice button.is-active {
  border-color: rgba(99,75,172,.32);
  background: linear-gradient(145deg, rgba(122,82,209,.13), rgba(61,136,223,.1));
  color: var(--text);
}

.circle-window-choice > small {
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.55;
}

.circle-window-canvas {
  position: relative;
  display: grid;
  min-height: 620px;
  place-items: center;
  padding: 18px;
  overflow: auto;
}

.circle-window-canvas .drawing-zoom-surface > svg {
  width: min(100%, 680px);
  height: auto;
}

.circle-window-empty-ring {
  fill: none;
  stroke: rgba(109,88,183,.12);
  stroke-width: 52;
}

.circle-window-canvas:not(.is-empty) .circle-window-empty-ring { display: none; }
.circle-window-stone { fill: url(#circle-window-brick); stroke: rgba(75,52,86,.72); stroke-width: 1.1; }
.circle-window-outline { fill: none; stroke: #263f51; stroke-width: 1.5; }
.circle-window-outline.is-outer { stroke: #7552ae; }
.circle-window-centrelines line { stroke: rgba(57,71,91,.52); stroke-width: .7; stroke-dasharray: 3 3; }
.circle-window-centrelines.is-hidden { display: none; }
.circle-window-numbers circle { fill: rgba(255,255,255,.88); stroke: rgba(73,82,101,.4); stroke-width: .7; }
.circle-window-numbers text { fill: #263746; font-size: 8px; font-weight: 900; dominant-baseline: central; }
.circle-window-dimension line { stroke: #684ba8; stroke-width: 1; marker-start: url(#circle-window-arrow); marker-end: url(#circle-window-arrow); }
.circle-window-dimension marker path { fill: #684ba8; }
.circle-window-dimension text { fill: #463663; font-size: 14px; font-weight: 800; paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: 4px; }
.circle-window-dimension.is-hidden { display: none; }
.circle-window-dimension .circle-window-course-label { font-size: 12px; }
.circle-window-dimension .circle-window-kim-label { fill: #687180; font-size: 9px; font-weight: 700; }

.circle-window-print-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.circle-window-document-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
}

.circle-window-print-actions .is-disabled {
  opacity: .42;
  pointer-events: none;
}

.circle-window-results .result-list { grid-template-columns: 1fr; }

.arch-tab {
  display: inline-flex;
  height: 43px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.arch-tab.is-active {
  border-color: rgba(76, 89, 158, 0.26);
  background:
    linear-gradient(145deg, rgba(120, 89, 189, 0.11), rgba(89, 166, 223, 0.13)),
    rgba(248, 251, 255, 0.56);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.86),
    0 5px 14px rgba(48, 72, 148, 0.1);
  color: var(--text);
}

.calculator-kind-note {
  min-width: 0;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.arch-tab small {
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(75, 91, 160, 0.09);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-gable-topbar {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
}

.top-gable-workarea-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 15px;
  background: rgba(226, 230, 239, 0.72);
}

.top-gable-workarea-label {
  padding: 0 10px;
  color: #667085;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.top-gable-workarea-tabs a {
  display: grid;
  gap: 1px;
  min-width: 118px;
  padding: 8px 12px;
  border-radius: 11px;
  color: #344054;
  text-decoration: none;
}

.top-gable-workarea-tabs a.is-active {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 13px rgba(50, 55, 75, 0.12);
  color: #573ca3;
}

.top-gable-workarea-tabs strong {
  font-size: 0.67rem;
}

.top-gable-workarea-tabs small {
  color: var(--muted);
  font-size: 0.49rem;
}

.top-gable-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.top-gable-title > span {
  color: #7056ba;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.top-gable-title h1,
.top-gable-title p {
  margin: 0;
}

.top-gable-title h1 {
  font-size: 0.86rem;
}

.top-gable-title p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.57rem;
}

.top-gable-live-status {
  display: grid;
  gap: 2px;
  min-width: 140px;
  text-align: right;
}

.top-gable-live-status small {
  color: var(--muted);
  font-size: 0.48rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.top-gable-live-status strong {
  color: #5d45ac;
  font-size: 0.64rem;
}

.top-gable-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.86fr) minmax(540px, 1.55fr) minmax(305px, 0.76fr);
  min-height: 780px;
}

.top-gable-input,
.top-gable-drawing-panel,
.top-gable-results {
  min-width: 0;
}

.top-gable-input {
  padding: 23px;
}

.top-gable-drawing-panel {
  padding: 0;
}

.top-gable-workbench .panel-heading__title p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.5;
}

.top-gable-form {
  gap: 16px;
}

.top-gable-choice {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.top-gable-choice legend {
  margin-bottom: 7px;
  color: #59657a;
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.top-gable-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(222, 226, 235, 0.72);
}

.top-gable-segmented button,
.top-gable-option {
  border: 0;
  color: #626b7b;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.top-gable-segmented button {
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
}

.top-gable-segmented button.is-active {
  background: #fff;
  box-shadow: 0 3px 11px rgba(52, 58, 78, 0.12);
  color: #5d45ac;
}

.top-gable-segmented strong {
  font-size: 0.57rem;
}

.top-gable-segmented small {
  font-size: 0.48rem;
}

.skew-higher-side-choice {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.skew-higher-side-choice legend {
  margin-bottom: 7px;
  color: #59657a;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.skew-higher-side-choice__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white);
}

.skew-higher-side-choice__buttons button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.skew-higher-side-choice__buttons button.is-active {
  border-color: rgba(80, 147, 178, .2);
  background: linear-gradient(135deg, rgba(230, 247, 253, .95), rgba(255, 244, 219, .88));
  box-shadow: 0 5px 14px rgba(43, 87, 109, .09), inset 0 1px rgba(255, 255, 255, .9);
  color: var(--sapphire);
}

.skew-higher-side-choice__buttons strong { font-size: .66rem; }

:root[data-theme="dark"] .skew-higher-side-choice legend { color: #aeb8be; }
:root[data-theme="dark"] .skew-higher-side-choice__buttons { background: rgba(8, 17, 24, .42); }
:root[data-theme="dark"] .skew-higher-side-choice__buttons button.is-active {
  border-color: rgba(123, 201, 226, .3);
  background: linear-gradient(135deg, rgba(35, 91, 112, .72), rgba(103, 76, 38, .52));
  color: #d7f3fb;
}

.top-gable-measurements {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.top-gable-measurements .field:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.top-gable-orientation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.top-gable-finish-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.top-gable-option {
  display: flex;
  min-height: 74px;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(77, 89, 117, 0.13);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.69);
}

.top-gable-option i {
  position: relative;
  flex: 0 0 19px;
  width: 19px;
  height: 26px;
  border: 1px solid #9aa4b4;
  border-radius: 3px;
  background: repeating-linear-gradient(to bottom, #d8a87e 0 7px, #f8f4ee 7px 8px);
}

.top-gable-option[data-orientation="stretcher"] i {
  width: 25px;
  height: 13px;
  flex-basis: 25px;
}

.top-gable-option[data-orientation="header"] i {
  width: 17px;
  height: 13px;
  flex-basis: 17px;
}

.top-gable-option[data-orientation="soldier"] i {
  width: 10px;
  height: 27px;
  flex-basis: 10px;
}

.top-gable-option[data-finish="cut"] i {
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
}

.top-gable-option[data-finish="roll-course"] i {
  width: 28px;
  height: 14px;
  flex-basis: 28px;
  transform: rotate(-24deg);
  background: repeating-linear-gradient(to right, #d8a87e 0 5px, #f8f4ee 5px 6px);
}

.top-gable-option > span {
  display: grid;
  gap: 3px;
}

.top-gable-option strong {
  font-size: 0.57rem;
  line-height: 1.25;
}

.top-gable-option small {
  font-size: 0.47rem;
  line-height: 1.35;
}

.top-gable-option.is-active {
  border-color: rgba(102, 75, 182, 0.42);
  background: linear-gradient(145deg, rgba(242, 237, 255, 0.96), rgba(237, 246, 255, 0.9));
  box-shadow: 0 6px 16px rgba(69, 57, 110, 0.08);
  color: #513a99;
}

.top-gable-option.is-active i {
  border-color: #7252c2;
  box-shadow: 0 0 0 2px rgba(114, 82, 194, 0.12);
}

.top-gable-brick-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 15px;
  background: rgba(233, 238, 248, 0.78);
}

.top-gable-brick-summary span {
  display: grid;
  gap: 3px;
}

.top-gable-brick-summary small,
.top-gable-construction-summary small {
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.top-gable-brick-summary strong {
  font-size: 0.64rem;
  line-height: 1.4;
}

.top-gable-brick-summary a {
  flex: none;
  color: #6147a7;
  font-size: 0.59rem;
  font-weight: 800;
}

.top-gable-calculate {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  margin-top: 2px;
}

.top-gable-brick-picker {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.top-gable-brick-picker .brick-picker__selected { margin-bottom: 0; }

.top-gable-face-summary {
  margin: 7px 3px 0;
  color: var(--muted);
  font-size: .54rem;
  font-weight: 720;
  line-height: 1.45;
}

.top-gable-canvas {
  display: grid;
  min-height: 610px;
  align-content: center;
  gap: 12px;
  padding: 18px 20px 22px;
}

.top-gable-canvas svg {
  width: 100%;
  max-height: 650px;
  overflow: visible;
}

.top-gable-brick-layer polygon {
  fill: rgba(207, 153, 108, 0.23);
}

.top-gable-brick-layer.is-alternate polygon {
  fill: rgba(196, 137, 91, 0.17);
}

.top-gable-outline {
  fill: none;
  stroke: #202838;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.top-gable-course,
.top-gable-head-joint,
.top-gable-placeholder-course,
.top-gable-placeholder-joint {
  fill: none;
  stroke: rgba(67, 75, 91, 0.6);
  stroke-width: 0.9;
}

.top-gable-placeholder-course,
.top-gable-placeholder-joint,
.top-gable-gauge-placeholder {
  fill: none;
  stroke: rgba(91, 99, 116, 0.34);
  stroke-dasharray: 7 7;
  stroke-width: 1.2;
}

circle.top-gable-gauge-placeholder {
  fill: rgba(91, 99, 116, 0.22);
  stroke-dasharray: none;
}

.top-gable-roll-course > path {
  fill: none;
  stroke: rgba(114, 76, 185, 0.23);
  stroke-linejoin: round;
}

.top-gable-roll-joints path {
  fill: none;
  stroke: #6849aa;
  stroke-width: 1;
}

.top-gable-dimension path,
.top-gable-angle path {
  fill: none;
  stroke: #1c2533;
  stroke-dasharray: 5 4;
  stroke-width: 1.15;
}

.top-gable-dimension text,
.top-gable-angle text,
.top-gable-slope-mark text {
  fill: #182231;
  font-size: 13px;
  font-weight: 770;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 4px;
}

.top-gable-dimension text {
  text-anchor: middle;
}

.top-gable-slope-mark path {
  fill: none;
  stroke: #5e469f;
  stroke-width: 1;
}

.top-gable-slope-mark circle {
  fill: #258ebd;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1.5;
}

.top-gable-slope-mark__number {
  fill: #fff !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  stroke: none !important;
}

.top-gable-slope-mark__measure {
  fill: #28566a;
  font-size: 7px;
  font-weight: 800;
}

.top-gable-slope-mark text {
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}

.top-gable-slope-mark.is-minor text {
  font-size: 7px;
  font-weight: 650;
}

.top-gable-slope-mark.is-apex circle {
  fill: #258ebd;
}

.top-gable-setting-marks.is-hidden { display: none; }

.top-gable-canvas--empty p,
.top-gable-empty-result {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.65;
  text-align: center;
}

.top-gable-drawing-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 0.55rem;
  font-weight: 700;
}

.top-gable-drawing-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-gable-drawing-legend i {
  width: 18px;
  border-top: 1px solid #536078;
}

.top-gable-drawing-legend b {
  width: 7px;
  height: 7px;
  border: 1px solid #6147a7;
  border-radius: 50%;
  background: #fff;
}

.top-gable-drawing-legend em {
  width: 18px;
  height: 6px;
  border-radius: 2px;
  background: rgba(114, 76, 185, 0.28);
}

.top-gable-construction-summary {
  display: grid;
  gap: 3px;
  margin-bottom: 11px;
  padding: 13px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(239, 235, 253, 0.9), rgba(234, 244, 252, 0.8));
}

.top-gable-construction-summary strong {
  color: #553d99;
  font-size: 0.7rem;
}

.top-gable-construction-summary span {
  color: var(--muted);
  font-size: 0.55rem;
}

.top-gable-result-list {
  display: grid;
  gap: 7px;
}

.top-gable-result {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(244, 246, 250, 0.85);
}

.top-gable-result span {
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 760;
}

.top-gable-result strong {
  font-size: 0.75rem;
  line-height: 1.35;
}

.top-gable-result.is-emphasis {
  background: linear-gradient(145deg, rgba(122, 82, 209, 0.11), rgba(61, 136, 223, 0.09));
}

.top-gable-print {
  width: 100%;
  min-height: 45px;
  justify-content: center;
  margin-top: 15px;
}

.top-gable-table-panel {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-content: start;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
  background: transparent;
}

.top-gable-table-panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 0;
}

.top-gable-table-panel small {
  color: #6250ac;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.top-gable-table-panel h2,
.top-gable-table-panel p {
  margin: 3px 0 0;
}

.top-gable-table-panel p {
  max-width: 650px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.5;
}

.top-gable-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 680px;
  overflow: auto;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(71, 84, 110, 0.11);
}

.top-gable-saw-empty {
  min-height: 420px;
  align-content: center;
  padding: 20px;
}

.top-gable-table-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.top-gable-table-panel th,
.top-gable-table-panel td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(76, 89, 158, 0.1);
  text-align: right;
  white-space: nowrap;
}

.top-gable-table-panel .top-gable-cut-cell {
  min-width: 330px;
  text-align: left;
  white-space: normal;
}

.top-gable-table-panel thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #f1f4fa;
  color: #4b5870;
  font-size: 0.53rem;
  text-transform: uppercase;
}

.top-gable-table-panel th:first-child,
.top-gable-table-panel td:first-child {
  text-align: left;
}

@media (max-width: 1280px) {
  .top-gable-grid {
    grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.35fr);
  }

  .top-gable-results {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }

  .top-gable-result-list {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
  }
}

@media (max-width: 900px) {
  .top-gable-topbar {
    grid-template-columns: auto 1fr;
  }

  .top-gable-title {
    display: none;
  }

  .top-gable-grid {
    display: block;
  }

  .top-gable-input,
  .top-gable-drawing-panel {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .top-gable-canvas {
    min-height: auto;
  }

  .top-gable-slope-mark.is-minor text {
    display: none;
  }

  .top-gable-result-list {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .top-gable-table-panel > header {
    display: block;
  }
}

@media (max-width: 560px) {
  .top-gable-topbar {
    display: flex;
    padding: 8px 10px;
  }

  .top-gable-workarea-tabs {
    flex: 1;
  }

  .top-gable-workarea-tabs a {
    flex: 1;
  }

  .top-gable-live-status {
    min-width: auto;
  }

  .top-gable-input,
  .top-gable-results {
    padding: 17px 15px;
    border: 0;
  }

  .top-gable-drawing-panel { padding: 0; border: 0; }
  .top-gable-table-panel { padding: 15px; }

  .top-gable-orientation-grid {
    grid-template-columns: 1fr;
  }

  .top-gable-option {
    min-height: 54px;
  }

  .top-gable-result-list {
    grid-template-columns: 1fr;
  }

  .top-gable-canvas svg {
    margin: -12px 0;
  }

  .top-gable-canvas { padding: 12px 10px 17px; }

  .top-gable-drawing-legend {
    justify-content: flex-start;
  }
}

:root[data-theme="dark"] .top-gable-segmented {
  background: linear-gradient(145deg, rgba(23, 33, 43, .92), rgba(34, 32, 53, .9));
}

:root[data-theme="dark"] .top-gable-segmented button,
:root[data-theme="dark"] .top-gable-option {
  color: var(--muted);
}

:root[data-theme="dark"] .top-gable-segmented button.is-active,
:root[data-theme="dark"] .top-gable-option.is-active {
  border-color: rgba(136, 184, 230, .3);
  background: linear-gradient(145deg, rgba(48, 65, 82, .94), rgba(49, 43, 75, .92));
  color: #b9ddff;
}

:root[data-theme="dark"] .top-gable-option,
:root[data-theme="dark"] .top-gable-brick-summary,
:root[data-theme="dark"] .top-gable-result,
:root[data-theme="dark"] .top-gable-construction-summary {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(24, 32, 41, .94), rgba(31, 30, 47, .92));
}

:root[data-theme="dark"] .top-gable-workbench .field__control,
:root[data-theme="dark"] .top-gable-workbench .brick-picker__selected,
:root[data-theme="dark"] .top-gable-table-scroll {
  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"] .top-gable-construction-summary strong,
:root[data-theme="dark"] .top-gable-table-panel small,
:root[data-theme="dark"] .top-gable-brick-summary a {
  color: #b7a8f4;
}

:root[data-theme="dark"] .top-gable-dimension text,
:root[data-theme="dark"] .top-gable-angle text,
:root[data-theme="dark"] .top-gable-slope-mark text {
  fill: var(--text);
  stroke: rgba(17, 22, 29, .96);
}

:root[data-theme="dark"] .top-gable-outline,
:root[data-theme="dark"] .top-gable-dimension path,
:root[data-theme="dark"] .top-gable-angle path {
  stroke: #d9e2ec;
}

:root[data-theme="dark"] .top-gable-slope-mark circle {
  fill: #203a4c;
  stroke: #8cccf2;
}

:root[data-theme="dark"] .top-gable-table-panel td,
:root[data-theme="dark"] .top-gable-table-panel th {
  border-color: var(--line-soft);
  color: var(--text-soft);
}

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.62fr) minmax(335px, 0.96fr);
  min-height: clamp(820px, calc(100svh - 130px), 1120px);
}

.input-panel,
.drawing-panel,
.results-panel {
  min-width: 0;
}

.input-panel {
  grid-column: 1;
  grid-row: 1;
  padding: 23px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(ellipse 72% 56% at 0% 0%, rgba(128, 104, 216, 0.08), transparent 72%),
    rgba(250, 251, 253, 0.74);
}

.input-form {
  margin-top: 21px;
}

.measurement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

.head-placement-grid {
  margin-top: 13px;
}

.field {
  display: block;
  min-width: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: 0.64rem;
  font-weight: 800;
}

.field__control {
  position: relative;
  display: flex;
  height: 49px;
  overflow: hidden;
  align-items: stretch;
  border: 1px solid rgba(87, 67, 113, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.94);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field__control:focus-within {
  border-color: var(--amethyst);
  box-shadow: 0 0 0 3px rgba(141, 87, 197, 0.1), 0 0 18px rgba(67, 121, 212, 0.1);
}

.field.is-invalid .field__control {
  border-color: rgba(188, 73, 96, 0.66);
  box-shadow: 0 0 0 3px rgba(188, 73, 96, 0.08);
}

.field__control input,
.field__control select {
  width: 100%;
  min-width: 0;
  padding: 0 11px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.field__control input {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.field__control output {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  padding: 0 11px;
  background: linear-gradient(145deg, rgba(233, 247, 255, 0.72), rgba(243, 239, 255, 0.68));
  color: #536c8c;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.field__control input[readonly] {
  background: linear-gradient(145deg, rgba(233, 247, 255, 0.72), rgba(243, 239, 255, 0.68));
  color: #536c8c;
  cursor: default;
}

.field__control select {
  cursor: pointer;
  font-size: 0.71rem;
  font-weight: 750;
}

.field__unit {
  display: grid;
  width: 43px;
  flex: 0 0 auto;
  place-items: center;
  border-left: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(120, 89, 189, 0.09), rgba(89, 166, 223, 0.11));
  color: var(--amethyst);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

.field > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.54rem;
  line-height: 1.4;
}

.brick-picker {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.brick-picker__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(246, 249, 255, 0.78);
}

.brick-picker__selected span,
.brick-picker__selected small,
.brick-picker__selected strong {
  display: block;
}

.brick-picker__selected label {
  display: grid;
  min-width: 0;
  flex: 1;
}

.brick-picker__selected select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  font: 750 0.65rem/1.2 var(--font-body);
}

.brick-picker__selected small {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.brick-picker__selected strong {
  color: var(--text);
  font-size: 0.62rem;
}

.brick-picker__selected a {
  color: var(--amethyst);
  font-size: 0.58rem;
  font-weight: 800;
}

.brick-catalog-country {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 7px 9px;
  border: 1px solid rgba(90, 102, 182, 0.11);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(84, 184, 220, 0.07), rgba(122, 91, 196, 0.07));
  color: var(--muted);
  font-size: 0.52rem;
}

.brick-catalog-country b {
  color: #554a98;
  font-size: 0.56rem;
}

.brick-catalog-country a {
  margin-left: auto;
  color: #654db2;
  font-weight: 800;
}

.brick-catalog-country a:hover {
  color: #3b83b9;
}

.brick-picker > .field {
  margin-bottom: 14px;
}

.arch-height-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arch-height-presets button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: transparent;
  color: var(--amethyst);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.arch-height-presets button:hover,
.arch-height-presets button:focus-visible {
  border-color: var(--amethyst);
}

.arch-height-presets + .field-hint {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.5;
}

.brick-depth-choice {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--line-soft);
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(100, 181, 246, 0.06), rgba(128, 104, 216, 0.05)),
    rgba(255, 255, 255, 0.55);
}

.brick-depth-choice legend {
  padding-inline: 6px;
  color: var(--amethyst);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brick-depth-choice .field__control {
  height: 43px;
}

.custom-depth-field {
  padding-top: 2px;
}

.brick-orientation-map {
  margin-top: 11px;
  padding: 12px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: rgba(247, 249, 255, 0.68);
}

.brick-orientation-map > strong {
  color: var(--text);
  font-size: 0.58rem;
}

.brick-orientation-map dl {
  display: grid;
  gap: 6px;
  margin: 9px 0 7px;
}

.brick-orientation-map dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.brick-orientation-map dt,
.brick-orientation-map dd,
.brick-orientation-map small {
  margin: 0;
  color: var(--muted);
  font-size: 0.5rem;
  line-height: 1.45;
}

.brick-orientation-map dd {
  flex: none;
  color: var(--text);
  font-weight: 800;
}

.brick-preset-summary {
  margin: 10px 3px 0;
  color: var(--muted);
  font-size: 0.54rem;
  line-height: 1.45;
}

.joint-field {
  margin-top: 14px;
}

.field-error {
  display: none;
  margin: 10px 0 0;
  color: var(--error);
  font-size: 0.61rem;
  line-height: 1.4;
}

.field-error.is-visible {
  display: block;
}

.drawing-panel {
  display: flex;
  min-height: 100%;
  grid-column: 2;
  grid-row: 1;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(ellipse 68% 54% at 17% 8%, rgba(100, 181, 246, 0.1), transparent 74%),
    radial-gradient(ellipse 72% 58% at 91% 92%, rgba(128, 104, 216, 0.09), transparent 74%),
    rgba(249, 251, 254, 0.76);
}

.drawing-panel__heading {
  min-height: 76px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.drawing-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-out-toggle {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(112, 87, 199, 0.21);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.56rem;
  font-weight: 800;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.setting-out-toggle > span {
  width: 7px;
  height: 7px;
  border: 1px solid currentcolor;
  border-radius: 50%;
  background: transparent;
}

.setting-out-toggle.is-active {
  border-color: rgba(90, 86, 205, 0.3);
  background: linear-gradient(125deg, rgba(98, 210, 244, 0.12), rgba(146, 92, 224, 0.12));
  color: #614fbd;
}

.setting-out-toggle.is-active > span {
  background: currentcolor;
  box-shadow: 0 0 9px rgba(102, 87, 201, 0.55);
}

.stone-method-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(104, 84, 176, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(239, 244, 255, 0.62)),
    rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.basket-definition-picker {
  align-items: stretch;
  margin-top: 14px;
}

.basket-definition-picker .field {
  min-width: min(100%, 280px);
}

.calculator-structural-disclaimer {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(112, 92, 176, 0.07);
  color: var(--muted);
  font-size: 0.52rem;
  line-height: 1.45;
}

.stone-method-picker.is-required {
  border-color: rgba(123, 86, 194, 0.2);
  background: linear-gradient(135deg, rgba(239, 247, 255, 0.82), rgba(244, 235, 255, 0.74));
}

.stone-method-picker__copy {
  display: grid;
  gap: 4px;
}

.stone-method-picker__copy strong {
  color: #4c425c;
  font-size: 0.64rem;
}

.stone-method-picker__copy small {
  max-width: 330px;
  color: var(--muted);
  font-size: 0.52rem;
  line-height: 1.45;
}

.stone-method-options {
  display: grid;
  min-width: 210px;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(103, 82, 169, 0.18);
  border-radius: 999px;
  background: rgba(224, 226, 235, 0.68);
}

.stone-method-options button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b6377;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.54rem;
  font-weight: 800;
  white-space: nowrap;
}

.stone-method-options button.is-active {
  background: #fff;
  box-shadow: 0 3px 10px rgba(54, 49, 72, 0.13);
  color: #5d45ac;
}

.stone-method-required {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(100, 75, 188, 0.24);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(223, 243, 255, 0.95), rgba(237, 222, 255, 0.94));
  color: #5d45ac;
  font-size: 0.54rem;
  font-weight: 850;
  white-space: nowrap;
}

.stone-method-required i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #53b9dd, #8660d2);
  box-shadow: 0 0 0 4px rgba(105, 102, 208, 0.1);
}

.natural-stone-control {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(44, 128, 154, .18);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(231, 249, 251, .88), rgba(239, 239, 255, .8));
}
.calculator-input-advice {
  margin: -7px 2px 0;
  color: #a83232;
  font-size: .53rem;
  font-weight: 820;
  line-height: 1.45;
}
.calculator-input-advice:empty { display: none; }
.natural-stone-control button { font: inherit; }
.natural-stone-control__switch {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 3px 4px;
  border: 0;
  background: transparent;
  color: #384653;
  cursor: pointer;
  text-align: left;
}
.natural-stone-control__switch > span:nth-child(2) { display: grid; gap: 2px; }
.natural-stone-control__switch strong { font-size: .67rem; }
.natural-stone-control__switch small { color: #647583; font-size: .51rem; }
.natural-stone-control__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #67c7c5, #617de1);
  color: #fff;
  box-shadow: 0 7px 16px rgba(64, 133, 165, .2);
}
.natural-stone-control__state {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(56, 111, 150, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  color: #6e7f8d;
  transition: .18s ease;
}
.natural-stone-control__state .material-symbols-outlined { font-size: 19px; }
.natural-stone-control__switch.is-active .natural-stone-control__state {
  border-color: rgba(35, 149, 155, .5);
  background: #dff7f8;
  color: #147980;
  box-shadow: inset 0 0 0 2px rgba(35, 149, 155, .08);
}
.natural-stone-control__positions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.natural-stone-control__positions button {
  display: grid;
  grid-template-columns: 29px 1fr;
  align-items: center;
  gap: 0 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(63, 111, 141, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .66);
  color: #54616d;
  cursor: pointer;
  text-align: left;
}
.natural-stone-control__positions button.is-active {
  border-color: rgba(35, 149, 155, .55);
  background: #fff;
  color: #126b73;
  box-shadow: 0 5px 14px rgba(51, 125, 149, .12);
}
.natural-stone-control__positions b {
  display: grid;
  grid-row: 1 / span 2;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: #e4f5f5;
  font-size: .62rem;
}
.natural-stone-control__positions span { font-size: .57rem; font-weight: 850; }
.natural-stone-control__positions small { overflow: hidden; color: #7b8791; font-size: .45rem; text-overflow: ellipsis; white-space: nowrap; }
.natural-stone-control__summary { margin: 0 3px 2px; color: #526d78; font-size: .5rem; line-height: 1.4; }

.natural-stone-dialog-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(20, 31, 47, .42);
  backdrop-filter: blur(7px);
}
.natural-stone-dialog {
  width: min(560px, 100%);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(237, 248, 252, .98));
  box-shadow: 0 28px 80px rgba(22, 41, 60, .28);
}
.natural-stone-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.natural-stone-dialog header span { color: #258d96; font-size: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.natural-stone-dialog h2 { margin: 3px 0 0; color: #243746; font-size: 1.22rem; }
.natural-stone-dialog header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e9f0f3; color: #536470; cursor: pointer; font-size: 1.25rem; }
.natural-stone-dialog > p { margin: 13px 0 18px; color: #667783; font-size: .68rem; line-height: 1.55; }
.natural-stone-dialog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.natural-stone-dialog footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; }
.natural-stone-dialog__remove { margin-right: auto; color: #a33c4b; }
.calculator-stone.is-natural-stone { cursor: pointer; fill: url("#calculator-natural-stone"); }
.calculator-stone.is-natural-stone:hover { filter: brightness(1.06) drop-shadow(0 0 7px rgba(42, 151, 155, .45)); }

@media (max-width: 620px) {
  .natural-stone-dialog__grid { grid-template-columns: 1fr; }
  .natural-stone-dialog { padding: 18px; }
}

/* Muur en topgevel zijn compacte invoer/resultaat-calculators, zonder tekenpaneel. */
.plain-wall-grid,
.top-gable-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  align-items: start;
}

.plain-wall-input,
.top-gable-input { grid-column: 1; }
.plain-wall-results,
.top-gable-results { grid-column: 2; position: sticky; top: 92px; }

.wall-clamp-control {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #d9edf5);
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
}

.wall-clamp-control__title { color: var(--text-primary); font-size: .67rem; }
.wall-clamp-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white);
}
.wall-clamp-choice button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.wall-clamp-choice button.is-active {
  border-color: rgba(80, 147, 178, .2);
  background: linear-gradient(135deg, rgba(230, 247, 253, .95), rgba(255, 244, 219, .88));
  box-shadow: 0 5px 14px rgba(43, 87, 109, .09), inset 0 1px rgba(255, 255, 255, .9);
  color: var(--sapphire);
}
.wall-clamp-choice strong { font-size: .66rem; }

.course-height-choice {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #d9edf5);
  border-radius: 17px;
  background: rgba(255, 255, 255, .72);
}
.course-height-choice legend {
  padding: 0 5px;
  color: var(--muted);
  font-size: .56rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.course-height-choice__modes,
.layer-gauge__modes,
.top-gable-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-muted) 78%, white);
}
.course-height-choice__modes button,
.layer-gauge__modes button,
.top-gable-segmented button {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.course-height-choice__modes button.is-active,
.layer-gauge__modes button.is-active,
.top-gable-segmented button.is-active {
  border-color: rgba(80, 147, 178, .2);
  background: linear-gradient(135deg, rgba(230, 247, 253, .95), rgba(255, 244, 219, .88));
  box-shadow: 0 5px 14px rgba(43, 87, 109, .09), inset 0 1px rgba(255, 255, 255, .9);
  color: var(--sapphire);
}
.course-height-choice__modes strong,
.top-gable-segmented strong { font-size: .66rem; }
.course-height-choice__modes small,
.course-height-choice__hint { color: var(--muted); font-size: .53rem; line-height: 1.4; }
.plain-wall-slope-sides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plain-wall-slope-settings > .field { margin-inline: 1px; }

.layer-gauge {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #d9edf5);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(238, 247, 250, .72));
}
.layer-gauge > header { display: grid; gap: 9px; }
.layer-gauge h3 { margin: 0; color: var(--text-primary); font-size: .78rem; }
.layer-gauge__modes button { display: block; font-size: .55rem; font-weight: 820; text-align: center; }
.layer-gauge__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.layer-gauge__mark {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 4px 8px 4px 5px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  color: var(--text-primary);
}
.layer-gauge__number {
  display: grid;
  width: 24px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  background: #5f7885;
  color: #fff;
  font-size: .53rem;
  font-weight: 900;
}
.layer-gauge__mark strong { font-size: .57rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.plain-wall-print { width: 100%; min-height: 44px; justify-content: center; margin-top: 14px; }

:root[data-theme="dark"] .wall-clamp-control {
  border-color: var(--line);
  background: rgba(21, 30, 38, .88);
}
:root[data-theme="dark"] .wall-clamp-control__title { color: #d7dde1; }
:root[data-theme="dark"] .wall-clamp-choice button { color: #aeb8be; }
:root[data-theme="dark"] .wall-clamp-choice button.is-active { border-color: rgba(123, 201, 226, .3); background: linear-gradient(135deg, rgba(35, 91, 112, .72), rgba(103, 76, 38, .52)); color: #d7f3fb; }
:root[data-theme="dark"] .course-height-choice,
:root[data-theme="dark"] .layer-gauge {
  border-color: var(--line);
  background: rgba(21, 30, 38, .88);
}
:root[data-theme="dark"] .course-height-choice__modes,
:root[data-theme="dark"] .layer-gauge__modes,
:root[data-theme="dark"] .top-gable-segmented,
:root[data-theme="dark"] .wall-clamp-choice { background: rgba(8, 17, 24, .42); }
:root[data-theme="dark"] .course-height-choice__modes button.is-active,
:root[data-theme="dark"] .layer-gauge__modes button.is-active,
:root[data-theme="dark"] .top-gable-segmented button.is-active { background: linear-gradient(135deg, rgba(35, 91, 112, .72), rgba(103, 76, 38, .52)); color: #d7f3fb; }
:root[data-theme="dark"] .layer-gauge__mark { border-color: var(--line); background: rgba(11, 20, 27, .68); color: var(--text); }

@media (max-width: 900px) {
  .plain-wall-grid,
  .top-gable-grid { grid-template-columns: 1fr; }
  .plain-wall-results,
  .top-gable-results { grid-column: 1; position: static; }
}

@media (max-width: 560px) {
  .course-height-choice { padding: 11px; }
  .layer-gauge { margin-top: 12px; padding: 11px; }
  .layer-gauge__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-gauge__mark { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; }
}

/* Gewone muur: dezelfde rustige werkplaatsopbouw als topgevel. */
.plain-wall-grid { align-items: start; }
.wall-openings-editor { display: grid; gap: 10px; margin-top: 6px; }
.wall-openings-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wall-openings-editor > header div { display: grid; gap: 2px; }
.wall-openings-editor > header strong { color: var(--text-primary); font-size: .72rem; }
.wall-openings-editor > header small { color: var(--text-muted); font-size: .54rem; }
.wall-openings-editor > header button { padding: 7px 11px; border: 1px solid rgba(46, 151, 184, .25); border-radius: 999px; background: rgba(80, 187, 220, .1); color: var(--text-primary); cursor: pointer; font: inherit; font-size: .6rem; font-weight: 800; }
.wall-opening-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 7px; padding: 10px; border: 1px solid rgba(58, 145, 174, .16); border-radius: 14px; background: rgba(224, 246, 252, .32); }
.wall-opening-row--area { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.wall-opening-row .field__label { font-size: .5rem; }
.wall-opening-row__remove { align-self: end; width: 30px; height: 30px; margin-bottom: 2px; border: 0; border-radius: 50%; background: rgba(180, 61, 72, .1); color: #a23a48; cursor: pointer; font-size: 1.1rem; }
.plain-wall-canvas { min-height: 420px; overflow: hidden; }
.plain-wall-canvas svg { display: block; width: 100%; height: auto; min-height: 420px; }
.plain-wall-outline { fill: rgba(95, 190, 218, .055); stroke: rgba(36, 111, 137, .55); stroke-width: 2; }
.plain-wall-piece { fill: rgba(78, 176, 205, .17); stroke: rgba(34, 116, 144, .58); stroke-width: 1; }
.plain-wall-piece.is-cut { fill: rgba(121, 113, 211, .2); stroke: rgba(92, 79, 174, .66); }
.plain-wall-opening { fill: rgba(255, 255, 255, .72); stroke: rgba(39, 108, 132, .72); stroke-width: 2; stroke-dasharray: 7 5; }
.top-gable-opening { fill: rgba(255, 255, 255, .88); stroke: rgba(39, 108, 132, .82); stroke-width: 2; stroke-dasharray: 7 5; }
.plain-wall-layer-mark path { stroke: #258ebd; stroke-width: 1.5; }
.plain-wall-layer-mark circle { fill: #258ebd; stroke: #fff; stroke-width: 2; }
.plain-wall-layer-mark text { fill: #fff; font-size: 8px; font-weight: 900; text-anchor: middle; }
.plain-wall-layer-mark .plain-wall-layer-mark__value { fill: var(--text-secondary); font-size: 9px; font-weight: 750; text-anchor: start; }
:root[data-theme="dark"] .wall-opening-row { background: linear-gradient(145deg, rgba(29, 53, 67, .72), rgba(34, 35, 66, .68)); border-color: rgba(99, 191, 220, .19); }
:root[data-theme="dark"] .plain-wall-opening { fill: rgba(8, 15, 23, .84); stroke: rgba(113, 206, 232, .78); }
:root[data-theme="dark"] .top-gable-opening { fill: rgba(8, 15, 23, .9); stroke: rgba(113, 206, 232, .82); }
:root[data-theme="dark"] .plain-wall-piece { fill: rgba(69, 176, 211, .19); stroke: rgba(104, 202, 231, .55); }
:root[data-theme="dark"] .plain-wall-piece.is-cut { fill: rgba(132, 106, 220, .24); stroke: rgba(165, 146, 239, .66); }
@media (max-width: 760px) {
  .wall-opening-row { grid-template-columns: 1fr 1fr; }
  .wall-opening-row__remove { position: absolute; top: 7px; right: 7px; }
  .plain-wall-canvas, .plain-wall-canvas svg { min-height: 320px; }
}

/* Braziliaans / claustraverband: dezelfde driedelige werkplaats als de bogen. */
.brazilian-grid {
  min-height: 780px;
}

.brazilian-input .input-form {
  display: grid;
  gap: 15px;
}

.brazilian-style-choice {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.brazilian-style-choice__label {
  color: var(--text-soft);
  font-size: .57rem;
  font-weight: 850;
}

.brazilian-style-choice .course-height-choice__modes {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface-muted);
}

.brazilian-style-choice .course-height-choice__modes button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 5px;
}

.brazilian-style-choice .course-height-choice__modes button.is-active,
.brazilian-results .layer-gauge__modes button.is-active {
  border-color: rgba(66, 139, 190, .3);
  background: #e9f4fb;
  box-shadow: none;
  color: #2f6f99;
}

.brazilian-connection {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid rgba(62, 151, 181, .18);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(225, 246, 252, .72), rgba(255, 244, 218, .66));
}

.brazilian-connection > span {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #65bbdc, #7764bd);
  color: #fff;
  font-size: 19px;
}

.brazilian-connection > div {
  display: grid;
  gap: 2px;
}

.brazilian-connection strong {
  color: var(--text-primary);
  font-size: .66rem;
}

.brazilian-connection small {
  color: var(--muted);
  font-size: .53rem;
}

.brazilian-drawing-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--surface);
}

.brazilian-drawing-panel .drawing-panel__heading {
  flex-wrap: wrap;
}

.brazilian-drawing-panel .workbench-output-tabs .is-disabled {
  opacity: .42;
}

.brazilian-canvas {
  display: grid;
  height: 640px;
  min-height: 640px;
  max-height: 640px;
  flex: 0 0 640px;
  overflow: hidden;
  place-items: center;
  padding: 13px;
  contain: layout paint;
}

.brazilian-canvas.is-empty::before {
  width: min(82%, 480px);
  aspect-ratio: 1.9;
  border: 1px dashed color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 10px;
  background: var(--surface-muted);
  content: "";
}

.brazilian-bond-svg,
.brazilian-setting-svg,
.brazilian-three-d-svg {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.brazilian-wall-field {
  fill: #eee9e2;
}

.brazilian-wall-outline {
  fill: none;
  stroke: rgba(86, 61, 52, .72);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.brazilian-brick {
  vector-effect: non-scaling-stroke;
}

.brazilian-brick--face {
  stroke: rgba(103, 57, 47, .58);
  stroke-width: .42;
}

.brazilian-brick--recessed {
  stroke: rgba(84, 43, 35, .62);
  stroke-width: .42;
}

.brazilian-bond-svg .brazilian-brick--face { fill: url("#brazilian-wall-stone"); }
.brazilian-bond-svg .brazilian-brick--recessed { fill: url("#brazilian-header-stone"); }
.brazilian-setting-svg .brazilian-brick--face { fill: url("#brazilian-detail-wall-stone"); }
.brazilian-setting-svg .brazilian-brick--recessed { fill: url("#brazilian-detail-header-stone"); }
.brazilian-three-d-svg .brazilian-brick--face { fill: url("#brazilian-3d-wall-stone"); }
.brazilian-three-d-svg .brazilian-brick--recessed { fill: url("#brazilian-3d-header-stone"); }

.brazilian-three-d-opening {
  fill: url("#brazilian-3d-opening-depth");
  stroke: rgba(12, 31, 42, .78);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}

.brazilian-side-connections path {
  stroke: #527e91;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.brazilian-dimension path,
.brazilian-detail-dimension path,
.brazilian-header-dimension path {
  fill: none;
  stroke: #3f5661;
  stroke-width: .62;
  vector-effect: non-scaling-stroke;
}

.brazilian-dimension .brazilian-arrow-line,
.brazilian-detail-dimension .brazilian-arrow-line,
.brazilian-header-dimension .brazilian-arrow-line {
  marker-start: url("#brazilian-arrow");
  marker-end: url("#brazilian-arrow");
}

.brazilian-dimension .brazilian-dimension-guide,
.brazilian-detail-dimension .brazilian-dimension-guide {
  stroke: color-mix(in srgb, #3f5661 58%, transparent);
  stroke-width: .45;
}

.brazilian-dimension text,
.brazilian-detail-dimension text,
.brazilian-header-dimension text {
  fill: #344953;
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .94);
  stroke-width: 2px;
  stroke-linejoin: round;
}

.brazilian-detail-dimension text { font-size: 8.5px; }

.brazilian-header-setting-dimension .brazilian-header-joint-label {
  font-size: 9px;
}

.brazilian-setting-title {
  fill: var(--text-primary);
  font-size: 15px;
  font-weight: 850;
}

.brazilian-course-label {
  fill: #537b95;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 900;
  dominant-baseline: middle;
  text-anchor: middle;
}

.brazilian-setting-dimensions .brazilian-arrow-line,
.brazilian-header-setting-dimension .brazilian-arrow-line {
  marker-start: url("#brazilian-detail-arrow");
  marker-end: url("#brazilian-detail-arrow");
}

.brazilian-header-summary rect,
.brazilian-measure-cards rect,
.brazilian-three-d-caption rect {
  fill: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  stroke: color-mix(in srgb, #668698 38%, var(--line));
  stroke-width: .75;
}

.brazilian-header-summary text {
  fill: var(--text-soft);
  font-size: 9px;
  font-weight: 800;
  paint-order: normal;
  stroke: none;
}

.brazilian-measure-cards text,
.brazilian-three-d-caption text {
  fill: var(--muted);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .08em;
}

.brazilian-measure-cards .brazilian-measure-value,
.brazilian-three-d-caption .brazilian-three-d-caption__value {
  fill: var(--text-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.brazilian-three-d-back {
  fill: url("#brazilian-3d-wall-stone");
  stroke: rgba(82, 45, 37, .62);
  stroke-width: .65;
}

.brazilian-three-d-top,
.brazilian-three-d-detail-top { fill: url("#brazilian-3d-top-stone"); }
.brazilian-three-d-side,
.brazilian-three-d-detail-side { fill: url("#brazilian-3d-side-stone"); }
.brazilian-three-d-top,
.brazilian-three-d-side,
.brazilian-three-d-detail-top,
.brazilian-three-d-detail-side,
.brazilian-three-d-detail-front {
  stroke: rgba(82, 45, 37, .62);
  stroke-width: .65;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.brazilian-three-d-detail-front { fill: url("#brazilian-3d-wall-stone"); }

.brazilian-three-d-top-joints path,
.brazilian-three-d-side-joints path {
  fill: none;
  stroke: rgba(255, 230, 216, .72);
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}

.brazilian-three-d-top-joints path {
  stroke: rgba(117, 58, 47, .48);
}

.brazilian-three-d-depth-dimension path {
  fill: none;
  stroke: #3f718a;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

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

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

.brazilian-three-d-card-label {
  fill: var(--muted);
  font-size: 7.5px;
  font-weight: 850;
  letter-spacing: .08em;
}

.brazilian-three-d-brick-size {
  fill: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
}

.brazilian-three-d-caption .brazilian-three-d-caption__depth {
  fill: #447c98;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.brazilian-three-d-caption .brazilian-three-d-caption__rule {
  fill: none;
  stroke: color-mix(in srgb, #668698 28%, var(--line));
  stroke-width: .7;
}

.brazilian-brick--three-d-header {
  opacity: .82;
}

.brazilian-setting-out-menu {
  gap: 10px;
  padding-block: 14px 17px;
}

.brazilian-setting-out-menu > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.brazilian-setting-out-menu small {
  color: var(--muted);
  font-size: .52rem;
}

.brazilian-setting-out-rows {
  display: grid;
  gap: 7px;
}

.brazilian-setting-out-rows > span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
}

.brazilian-setting-out-rows b {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 5px;
  background: #557f9a;
  color: white;
  font-size: .6rem;
}

.brazilian-setting-out-rows output {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: .55rem;
  line-height: 1.65;
}

.brazilian-drawing-chips rect {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(88, 78, 142, .2);
}

.brazilian-drawing-chips text {
  fill: #4c5260;
  font-size: 9px;
  font-weight: 750;
}

.brazilian-result-list .result-row {
  min-height: 51px;
}

.brazilian-key-measures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.brazilian-key-measures > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, #5c96b0 28%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-muted) 82%, #e5f4f8);
}

.brazilian-key-measures span {
  color: var(--muted);
  font-size: .49rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brazilian-key-measures strong {
  color: var(--text-primary);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.brazilian-overlap-status,
.brazilian-print-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid;
  border-radius: 13px;
  font-size: .61rem;
}

.brazilian-overlap-status.is-valid,
.brazilian-print-check.is-valid {
  border-color: rgba(36, 152, 133, .24);
  background: rgba(217, 247, 239, .72);
  color: #197b6c;
}

.brazilian-overlap-status.is-invalid,
.brazilian-print-check.is-invalid {
  border-color: rgba(189, 73, 79, .25);
  background: rgba(255, 230, 230, .72);
  color: #a13c47;
}

.brazilian-alternatives {
  margin-top: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
}

.brazilian-alternatives summary {
  padding: 11px 12px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: .58rem;
  font-weight: 800;
}

.brazilian-alternatives > div {
  display: grid;
  gap: 5px;
  padding: 0 9px 9px;
}

.brazilian-alternatives > div > div {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: .54rem;
}

.brazilian-alternatives > div > div > :is(strong, span) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.brazilian-alternatives > div > div > span {
  text-align: right;
}

.brazilian-alternatives .does-not-comply {
  color: var(--error);
}

.brazilian-safety-note {
  margin: 12px 0 0;
  padding: 10px 11px;
  border-left: 3px solid #58a8c9;
  border-radius: 4px 10px 10px 4px;
  background: rgba(221, 243, 251, .54);
  color: var(--muted);
  font-size: .55rem;
  line-height: 1.5;
}

.brazilian-print {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin-top: 13px;
}

:root[data-theme="dark"] .brazilian-connection {
  border-color: rgba(101, 188, 220, .22);
  background: linear-gradient(135deg, rgba(31, 67, 82, .72), rgba(72, 53, 33, .68));
}

:root[data-theme="dark"] .brazilian-drawing-panel {
  background: var(--surface);
}

:root[data-theme="dark"] .brazilian-wall-field { fill: rgba(12, 28, 38, .88); }
:root[data-theme="dark"] .brazilian-wall-outline { stroke: rgba(191, 218, 230, .78); }
:root[data-theme="dark"] .brazilian-dimension text,
:root[data-theme="dark"] .brazilian-detail-dimension text { fill: #ddd4ff; stroke: rgba(17, 22, 29, .96); }
:root[data-theme="dark"] .brazilian-drawing-chips rect { fill: rgba(18, 30, 41, .96); stroke: rgba(128, 168, 211, .27); }
:root[data-theme="dark"] .brazilian-drawing-chips text { fill: #d7e2ea; }
:root[data-theme="dark"] .brazilian-overlap-status.is-valid { background: rgba(27, 87, 76, .52); color: #9de3d7; }
:root[data-theme="dark"] .brazilian-overlap-status.is-invalid { background: rgba(100, 36, 45, .52); color: #ffb7bf; }
:root[data-theme="dark"] .brazilian-safety-note { background: rgba(24, 62, 78, .58); }
:root[data-theme="dark"] .brazilian-style-choice .course-height-choice__modes button.is-active,
:root[data-theme="dark"] .brazilian-results .layer-gauge__modes button.is-active {
  border-color: rgba(117, 190, 229, .34);
  background: rgba(35, 79, 105, .72);
  color: #b7e2f7;
}

@media (max-width: 1080px) {
  .brazilian-grid {
    grid-template-columns: minmax(300px, .82fr) minmax(480px, 1.35fr);
  }
  .brazilian-results {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 0 22px;
  }
  .brazilian-results > .panel-heading { grid-column: 1 / -1; }
  .brazilian-results > .result-list { grid-column: 1; grid-row: 2 / span 5; }
}

@media (max-width: 760px) {
  .brazilian-grid { grid-template-columns: 1fr; min-height: 0; }
  .brazilian-input,
  .brazilian-drawing-panel,
  .brazilian-results { grid-column: 1; grid-row: auto; }
  .brazilian-results { display: flex; }
  .brazilian-drawing-panel .drawing-panel__heading {
    align-items: stretch;
    flex-direction: column;
  }
  .brazilian-drawing-panel .drawing-panel__actions { width: 100%; }
  .brazilian-drawing-panel .workbench-output-tabs--panel {
    display: grid;
    width: 100%;
    grid-template-columns: 1.2fr 1.2fr .65fr .65fr;
    margin-left: 0;
  }
  .brazilian-drawing-panel .workbench-output-tabs--panel > :is(button, a, span) {
    min-width: 0;
    justify-content: center;
    padding-inline: 5px;
  }
  .brazilian-canvas { height: 410px; min-height: 410px; max-height: 410px; flex-basis: 410px; padding: 7px; }
  .brazilian-bond-svg { min-width: 0; }
  .brick-plus-tabs .arch-tab { padding-inline: 9px; font-size: .55rem; }
  .brazilian-style-choice .course-height-choice__modes button { padding-inline: 7px; }
  .brazilian-style-choice .course-height-choice__modes strong { overflow-wrap: anywhere; }
}

.wall-masonry-picker {
  margin-top: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(62, 75, 119, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  transition: border-color 160ms ease, background 160ms ease;
}

.wall-masonry-picker.is-active {
  border-color: rgba(83, 102, 194, 0.25);
  background:
    linear-gradient(135deg, rgba(224, 246, 250, 0.62), rgba(239, 232, 251, 0.62)),
    rgba(255, 255, 255, 0.68);
}

.wall-masonry-picker > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wall-masonry-picker > header > div {
  display: grid;
  gap: 4px;
}

.wall-masonry-picker > header strong {
  color: #45495a;
  font-size: 0.64rem;
}

.wall-masonry-picker > header small {
  max-width: 350px;
  color: var(--muted);
  font-size: 0.52rem;
  line-height: 1.45;
}

.wall-masonry-toggle {
  display: inline-flex;
  min-width: 112px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(81, 86, 116, 0.17);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  color: #6f7280;
  cursor: pointer;
  font-size: 0.53rem;
  font-weight: 820;
}

.wall-masonry-toggle .material-symbols-outlined {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(103, 116, 133, .1);
  font-size: 17px;
}

.wall-masonry-toggle.is-active {
  border-color: rgba(88, 91, 187, 0.25);
  background: #fff;
  color: #584dae;
}

.wall-masonry-toggle.is-active .material-symbols-outlined {
  background: #e0f6fb;
  color: #287ca7;
}

.top-gable-calculator-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(56, 143, 190, .18);
  border-radius: 14px;
  background: rgba(226, 245, 255, .64);
  color: var(--text-soft);
  font-size: .56rem;
  line-height: 1.5;
}
.top-gable-calculator-note .material-symbols-outlined { color: #388ebc; font-size: 20px; }

.wall-masonry-picker__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(75, 84, 123, 0.1);
}

.wall-masonry-picker__fields .field__control {
  height: 43px;
}

.wall-masonry-picker__dimensions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(75, 84, 123, 0.1);
}

.wall-masonry-picker__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 2px 0;
  color: #5c6170;
  font-size: 0.51rem;
  line-height: 1.45;
}

.wall-masonry-picker__note i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-top: 0.35em;
  background: linear-gradient(135deg, #49bfd1, #8062d1);
  transform: rotate(45deg);
}

.wall-masonry-picker__scope {
  margin: 8px 2px 0 17px;
  color: #777b89;
  font-size: 0.49rem;
  line-height: 1.45;
}

.arch-canvas {
  position: relative;
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  padding: 10px 12px 14px;
  overflow: auto;
}

.arch-canvas.is-depth-hidden {
  display: none;
}

.arch-depth-preview {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin: 0;
  background:
    radial-gradient(circle at 16% 12%, rgba(72, 181, 226, .1), transparent 24rem),
    radial-gradient(circle at 86% 88%, rgba(239, 151, 70, .11), transparent 23rem),
    #fbfdff;
}

.arch-depth-preview > header {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .48);
}

.arch-depth-preview > header > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.arch-depth-preview > header strong {
  color: var(--text);
  font-size: .66rem;
}

.arch-depth-preview > header small {
  color: var(--muted);
  font-size: .49rem;
  line-height: 1.4;
}

.arch-depth-preview__views {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(210, 220, 229, .68);
}

.arch-depth-preview__views button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5f6d76;
  cursor: pointer;
  font: inherit;
  font-size: .5rem;
  font-weight: 820;
}

.arch-depth-preview__views button.is-active {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 3px 10px rgba(45, 66, 82, .12);
  color: #2b738f;
}

.arch-depth-preview__stage {
  position: relative;
  display: grid;
  min-height: 610px;
  flex: 1;
  place-items: stretch;
  overflow: hidden;
}

.arch-depth-preview__stage > svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 610px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.arch-depth-preview__stage > svg:active {
  cursor: grabbing;
}

.arch-depth-preview__background {
  fill: url("#arch-depth-sky");
}

.arch-depth-preview__face {
  stroke: rgba(91, 57, 52, .48);
  stroke-linejoin: round;
  stroke-width: .78;
}

.arch-depth-preview__face.is-front {
  fill: url("#arch-depth-header-front");
}

.arch-depth-preview__face.is-side {
  fill: url("#arch-depth-header-side");
}

.arch-depth-preview__face.is-rear {
  fill: url("#arch-depth-header-rear");
}

.arch-depth-preview__face.is-lying.is-front {
  fill: url("#arch-depth-brick-front");
}

.arch-depth-preview__face.is-lying.is-side {
  fill: url("#arch-depth-brick-side");
}

.arch-depth-preview__face.is-lying.is-rear {
  fill: url("#arch-depth-brick-rear");
}

.arch-depth-preview__face.is-fitting,
.arch-depth-preview__face.is-cross-section-fitting {
  filter: saturate(.76) brightness(1.09);
  stroke: rgba(64, 117, 140, .68);
}

.arch-depth-preview__face.is-natural-stone {
  fill: url("#arch-depth-natural-stone");
  stroke: rgba(22, 103, 119, .82);
  stroke-width: 1.05;
}

.arch-depth-preview__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(55, 93, 117, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 22px rgba(38, 70, 91, .14);
  backdrop-filter: blur(10px);
}

.arch-depth-preview__zoom button {
  min-width: 37px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-right: 1px solid rgba(55, 93, 117, .14);
  background: transparent;
  color: #355f75;
  cursor: pointer;
  font: 800 .55rem/1 var(--font-mono);
}

.arch-depth-preview__zoom button:nth-child(2) {
  min-width: 58px;
}

.arch-depth-preview__zoom button:last-child {
  border-right: 0;
}

.arch-depth-preview figcaption {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, .62);
}

.arch-depth-preview figcaption > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 11px 12px;
  border-right: 1px solid var(--line-soft);
}

.arch-depth-preview figcaption > span:last-child {
  border-right: 0;
}

.arch-depth-preview figcaption small {
  color: var(--muted);
  font-size: .43rem;
  font-weight: 850;
  letter-spacing: .08em;
}

.arch-depth-preview figcaption b {
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .58rem;
}

.arch-depth-section {
  display: grid;
  gap: 14px;
  margin: 14px;
  overflow: hidden;
  border: 1px solid rgba(75, 139, 177, .2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 4%, rgba(247, 167, 77, .15), transparent 18rem),
    radial-gradient(circle at 91% 100%, rgba(69, 171, 219, .14), transparent 20rem),
    linear-gradient(145deg, rgba(255, 253, 249, .98), rgba(242, 249, 253, .96));
  box-shadow: 0 12px 34px rgba(52, 84, 109, .09);
}

.arch-depth-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 0;
}

.arch-depth-section > header > div { display: grid; gap: 3px; }
.arch-depth-section > header strong { color: var(--text); font-size: .7rem; }
.arch-depth-section > header small { color: var(--muted); font-size: .49rem; }
.arch-depth-section > header > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(213, 236, 247, .74);
  color: #246e8c;
  font: 850 .52rem/1 var(--font-mono);
}

.arch-depth-section__phases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px;
}

.arch-depth-section__phases > section {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(93, 133, 157, .17);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
}

.arch-depth-section__phases > section > b {
  color: #536a77;
  font-size: .48rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.arch-depth-section__diagram {
  display: block;
  width: 100%;
  min-height: 240px;
  max-height: 430px;
}

.arch-depth-section__field {
  fill: rgba(232, 239, 242, .68);
  stroke: rgba(71, 94, 107, .48);
  stroke-width: .75;
  vector-effect: non-scaling-stroke;
}

.arch-depth-section__cell {
  stroke: rgba(92, 63, 48, .55);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

.arch-depth-section__cell.is-standing { fill: #b9dff1; }
.arch-depth-section__cell.is-lying { fill: #efa968; }
.arch-depth-section__cell.is-fitting { stroke: #475569; stroke-dasharray: 3 2; }

.arch-depth-section__cell-code {
  fill: #3f3029;
  font: 900 1.65px/1 Arial, sans-serif;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(255, 255, 255, .82);
  stroke-width: .45px;
}

.arch-depth-section__dimension line {
  stroke: #617783;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.arch-depth-section__dimension text {
  fill: #435c68;
  font-family: var(--font-mono);
  font-size: 1.25px;
  font-weight: 850;
}

.arch-depth-section > figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 10px 14px 13px;
  color: var(--muted);
  font-size: .47rem;
  font-weight: 760;
}

.arch-depth-section > figcaption span {
  width: 11px;
  height: 11px;
  margin-left: 8px;
  border-radius: 3px;
}

.arch-depth-section > figcaption span:first-child { margin-left: 0; }
.arch-depth-section > figcaption .is-standing { background: #b9dff1; }
.arch-depth-section > figcaption .is-lying { background: #efa968; }
.arch-depth-section > figcaption .is-fitting { background: transparent; border: 1.5px dashed currentColor; }

:root[data-theme="dark"] .arch-depth-preview {
  border-color: rgba(106, 185, 216, .2);
  background:
    radial-gradient(circle at 100% 0%, rgba(52, 136, 172, .18), transparent 18rem),
    linear-gradient(145deg, rgba(20, 32, 42, .98), rgba(43, 34, 43, .96));
}

:root[data-theme="dark"] .arch-depth-preview > header,
:root[data-theme="dark"] .arch-depth-preview figcaption {
  background: rgba(12, 20, 27, .4);
}

:root[data-theme="dark"] .arch-depth-preview__zoom {
  border-color: rgba(122, 187, 211, .2);
  background: rgba(13, 23, 30, .72);
  color: #b5d2df;
}

:root[data-theme="dark"] .arch-depth-section {
  border-color: rgba(96, 174, 211, .17);
  background:
    radial-gradient(circle at 9% 0%, rgba(222, 135, 57, .14), transparent 18rem),
    radial-gradient(circle at 100% 100%, rgba(47, 142, 184, .16), transparent 20rem),
    linear-gradient(145deg, rgba(15, 25, 34, .98), rgba(31, 29, 47, .97));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

:root[data-theme="dark"] .arch-depth-section > header > span {
  background: rgba(43, 115, 151, .26);
  color: #a9dcf0;
}

:root[data-theme="dark"] .arch-depth-section__phases > section {
  border-color: rgba(94, 157, 190, .14);
  background: rgba(8, 16, 23, .38);
}

:root[data-theme="dark"] .arch-depth-section__phases > section > b,
:root[data-theme="dark"] .arch-depth-section__dimension text { color: #b7cfda; fill: #b7cfda; }
:root[data-theme="dark"] .arch-depth-section__field { fill: rgba(9, 17, 24, .74); stroke: rgba(136, 183, 205, .42); }
:root[data-theme="dark"] .arch-depth-section__dimension line { stroke: #8eb3c4; }
:root[data-theme="dark"] .arch-depth-section__cell-code {
  fill: #10212c;
  stroke: rgba(239, 248, 251, .72);
}

@media (max-width: 760px) {
  .arch-depth-preview > header {
    align-items: stretch;
    flex-direction: column;
  }

  .arch-depth-preview__views {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .arch-depth-preview__stage,
  .arch-depth-preview__stage > svg {
    min-height: 390px;
  }

  .arch-depth-preview figcaption {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arch-depth-preview figcaption > span {
    border-bottom: 1px solid var(--line-soft);
  }

  .arch-depth-preview figcaption > span:last-child {
    grid-column: 1 / -1;
  }

  .arch-depth-section { margin: 10px; }
  .arch-depth-section > header { align-items: flex-start; flex-direction: column; }
  .arch-depth-section__phases { grid-template-columns: 1fr; }
  .arch-depth-section__diagram { min-height: 210px; max-height: 340px; }
}

.arch-canvas .drawing-zoom-surface > svg {
  width: 100%;
  max-width: 1180px;
  height: auto;
  transition: opacity 180ms ease;
}

.arch-canvas.is-empty .drawing-zoom-surface > svg {
  display: none;
}

.drawing-zoom-surface {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  place-items: center;
  transform-origin: top left;
  transition: transform 160ms ease;
}

.drawing-zoom-surface--50 { transform: scale(.5); }
.drawing-zoom-surface--75 { transform: scale(.75); }
.drawing-zoom-surface--100 { transform: scale(1); }
.drawing-zoom-surface--125 { transform: scale(1.25); }
.drawing-zoom-surface--150 { transform: scale(1.5); }
.drawing-zoom-surface--175 { transform: scale(1.75); }
.drawing-zoom-surface--200 { transform: scale(2); }
.drawing-zoom-surface--225 { transform: scale(2.25); }
.drawing-zoom-surface--250 { transform: scale(2.5); }

.drawing-zoom-controls {
  position: absolute;
  z-index: 12;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(59, 82, 111, .22);
  border-radius: 8px;
  background: rgba(246, 250, 253, .8);
  box-shadow: 0 8px 24px rgba(31, 55, 82, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.drawing-zoom-controls button {
  display: grid;
  min-width: 34px;
  height: 32px;
  place-items: center;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid rgba(59, 82, 111, .15);
  background: transparent;
  color: #29435d;
  cursor: pointer;
  font: inherit;
  font-size: .57rem;
  font-weight: 850;
}

.drawing-zoom-controls button:last-child { border-right: 0; }
.drawing-zoom-controls button:hover { background: rgba(77, 143, 194, .13); }
.drawing-zoom-controls button:focus-visible { outline: 2px solid #308ec3; outline-offset: -2px; }
.drawing-zoom-controls button:disabled { opacity: .35; cursor: default; }
.drawing-zoom-controls .material-symbols-outlined { font-size: 17px; }
.drawing-zoom-controls__sign { font-size: 18px; font-weight: 650; line-height: 1; }
.drawing-zoom-controls__percentage { min-width: 58px !important; font-family: var(--font-mono) !important; }

:root[data-theme="dark"] .drawing-zoom-controls {
  border-color: rgba(149, 192, 222, .23);
  background: rgba(24, 34, 45, .78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
:root[data-theme="dark"] .drawing-zoom-controls button {
  border-color: rgba(149, 192, 222, .18);
  color: #c4e6fb;
}

.drawing-empty {
  display: none;
  width: min(780px, calc(100% - 32px));
  place-items: center;
  padding: 12px;
}

.arch-canvas.is-empty .drawing-empty {
  display: grid;
}

.drawing-empty__ghost {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 30px rgba(77, 72, 151, 0.09));
}

.drawing-empty__band {
  fill: url(#empty-arch-fill);
  stroke: url(#empty-arch-line);
  stroke-width: 1.2;
}

.drawing-empty__outline,
.drawing-empty__joints path {
  fill: none;
  stroke: url(#empty-arch-line);
  stroke-linecap: round;
  stroke-width: 1.25;
}

.drawing-empty__outline--inner {
  stroke-dasharray: 3 7;
}

.drawing-empty__joints {
  opacity: 0.68;
}

.drawing-empty__baseline {
  fill: none;
  stroke: rgba(96, 88, 163, 0.16);
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.drawing-empty__point {
  fill: rgba(111, 91, 190, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .drawing-empty__band {
    animation: empty-arch-breathe 4.8s ease-in-out infinite;
  }
}

@media (min-width: 901px) {
  .calculator-workbench .plain-wall-grid,
  .calculator-workbench .top-gable-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  }

  .plain-wall-grid > .plain-wall-input,
  .top-gable-grid > .top-gable-input { grid-column: 1; }

  .plain-wall-grid > .plain-wall-results,
  .top-gable-grid > .top-gable-results {
    grid-column: 2;
    position: sticky;
    top: 92px;
  }
}

@keyframes empty-arch-breathe {
  0%, 100% { opacity: 0.56; }
  50% { opacity: 0.92; }
}

.calculator-grid-lines {
  display: none;
}

.calculator-arch-shadow {
  fill: rgba(47, 61, 92, 0.1);
  filter: blur(5px);
  transform: translateY(8px);
}

.calculator-stone,
.calculator-joint {
  stroke: rgba(48, 55, 78, 0.38);
  stroke-width: 0.72;
}

.calculator-stone {
  /* Every ordinary arch brick uses one local material colour. A diagonal
     SVG gradient was evaluated against each differently rotated bounding box;
     together those boxes made the left arch half look orange and the mirrored
     right half purple even though their geometry was identical. */
  fill: #ed9678;
  filter: drop-shadow(0 0.7px 0.45px rgba(75, 52, 70, 0.2));
}

.calculator-joint {
  fill: url("#calculator-mortar");
}

.calculator-stone.is-keystone {
  fill: url("#calculator-keystone");
  stroke: rgba(14, 112, 124, 0.72);
  stroke-width: 1.15;
  filter: drop-shadow(0 0 7px rgba(28, 145, 163, 0.34));
}

.calculator-wall-brick {
  fill: url("#calculator-wall-brick");
  fill-opacity: 0.72;
  stroke: rgba(75, 70, 84, 0.46);
  stroke-width: 0.62;
}

.calculator-wall-brick.is-cut {
  fill: url("#calculator-wall-cut");
  fill-opacity: 0.8;
  stroke: rgba(72, 66, 143, 0.78);
  stroke-width: 0.9;
}

.calculator-wall-brick.is-header:not(.is-cut) {
  fill: #d9a8b9;
}

.calculator-wall-brick.is-three-quarter:not(.is-cut) {
  fill: #e8b69f;
}

.calculator-wall-masonry {
  filter: drop-shadow(0 2px 2px rgba(51, 54, 73, 0.08));
}

.calculator-string-lines {
  fill: none;
  opacity: 0.56;
  stroke: #4978cc;
  stroke-linecap: round;
  stroke-width: 0.95;
}

.calculator-construction-circles {
  fill: none;
  stroke: #319ed0;
  stroke-dasharray: 5 5;
  stroke-width: 0.85;
  vector-effect: non-scaling-stroke;
}

.calculator-construction-circles > g > circle {
  opacity: 0.34;
}

.calculator-construction-centre {
  opacity: 0.78;
  stroke-dasharray: none;
  stroke-width: 1.15;
}

.calculator-construction-centre-label {
  fill: #237aa7;
  font-size: 9px;
  font-weight: 850;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-dasharray: none;
  stroke-width: 3px;
}

.calculator-construction-circles.is-hidden {
  display: none;
}

.calculator-string-lines.is-hidden,
.setting-out-center-vector.is-hidden,
.setting-out-labels.is-hidden,
.calculator-dimension--porring.is-hidden,
.porring-point.is-hidden,
.drawing-legend.is-hidden {
  display: none;
}

.setting-out-center-vector {
  fill: none;
  opacity: 0.74;
  stroke: #6b4fca;
  stroke-dasharray: 4 3;
  stroke-linecap: round;
  stroke-width: 1.15;
}

.setting-out-labels circle {
  fill: rgba(255, 255, 255, 0.94);
  stroke: rgba(94, 74, 184, 0.58);
  stroke-width: 0.8;
}

.setting-out-labels text {
  fill: #5f4ab9;
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 850;
}

.drawing-legend {
  fill: none;
  stroke: #0066cc;
  stroke-linecap: round;
  stroke-width: 0.9;
}

.porring-point {
  fill: #7258d5;
  stroke: #7258d5;
  stroke-width: 0.9;
}

.porring-point circle {
  fill: #ffffff;
  stroke-width: 1.6;
}

.porring-point__leader {
  fill: none;
  opacity: 0.68;
  stroke-dasharray: 2 3;
  stroke-linecap: round;
  stroke-width: 0.85;
}

.porring-point text,
.outer-stone-angle text {
  fill: #5d4ab1;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.porring-point text {
  stroke: none;
}

.outer-stone-angle text {
  paint-order: stroke fill;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 3px;
  font-size: 10px;
}

.outer-stone-angle {
  fill: none;
  stroke: #795fcf;
  stroke-width: 0.85;
}

.calculator-dimension--porring {
  stroke: #765bd0;
}

.drawing-legend text {
  fill: var(--muted);
  stroke: none;
  font-family: var(--font-sans);
  font-size: 7.5px;
  letter-spacing: 0.02em;
}

.setting-out-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  padding: 19px 22px 23px;
  border-top: 1px solid var(--line-soft);
  background:
    linear-gradient(118deg, rgba(100, 181, 246, 0.1), rgba(128, 104, 216, 0.09)),
    rgba(255, 255, 255, 0.62);
}

.setting-out-menu strong,
.setting-out-menu small {
  display: block;
}

.setting-out-menu strong {
  color: #4f416d;
  font-size: 0.94rem;
}

.setting-out-menu small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.setting-out-menu__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.setting-out-menu__steps span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  border: 1px solid rgba(98, 78, 176, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #443b58;
  font-family: var(--font-mono);
  font-size: 0.79rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.setting-out-menu__steps b {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b78d7, #8659cf);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.calculator-arch-outline,
.calculator-spring,
.calculator-wall {
  fill: none;
}

.calculator-arch-outline {
  stroke: rgba(112, 65, 153, 0.65);
  stroke-width: 1;
}

.calculator-spring,
.calculator-wall {
  stroke: rgba(67, 121, 212, 0.34);
  stroke-dasharray: 4 6;
  stroke-width: 1;
}

.calculator-dimension {
  fill: none;
  stroke: var(--sapphire);
  stroke-width: 0.85;
}

.calculator-dimension__guides {
  opacity: 0.46;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
  stroke-width: 0.72;
}

.calculator-skew-angles {
  fill: none;
  stroke: color-mix(in srgb, var(--sapphire) 78%, var(--turquoise) 22%);
  stroke-linecap: round;
  stroke-width: 0.8;
}

.calculator-skew-angle__baseline {
  opacity: 0.5;
  stroke-dasharray: 2 3;
}

.calculator-skew-angle__arc {
  stroke-width: 1;
}

.calculator-skew-angles text {
  fill: #315f92;
  stroke: none;
  font-family: var(--font-sans);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

:root[data-theme="dark"] .calculator-skew-angles text {
  fill: #9bdcff;
}

.calculator-topbar__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.calculator-topbar__actions .info-trigger {
  min-height: 40px;
  flex: 0 0 auto;
  padding-inline: 14px;
  border-color: rgba(80, 98, 161, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(225, 236, 251, 0.48)),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    0 8px 22px rgba(47, 67, 117, 0.09),
    inset 0 1px rgba(255, 255, 255, 0.88);
}

.calculator-topbar__actions .info-trigger .icon {
  width: 16px;
  height: 16px;
}

.calculator-print-button {
  display: inline-flex;
  width: 34px;
  min-width: 34px;
  min-height: 32px;
  justify-content: center;
  align-items: center;
  padding: 0;
  border: 1px solid rgba(107, 78, 190, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(235, 228, 251, 0.72));
  box-shadow: 0 8px 20px rgba(81, 57, 126, 0.08);
  color: #5c43ad;
  font-size: 0.56rem;
  font-weight: 850;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.calculator-print-button .material-symbols-outlined {
  font-size: 19px;
}

.workbench-output-tabs > .calculator-print-button.workbench-output-pdf {
  width: auto;
  min-width: 0;
  min-height: 30px;
  gap: 6px;
  padding-inline: 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

.workbench-output-tabs > .calculator-print-button.workbench-output-pdf:hover {
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  transform: none;
}

.calculator-print-button:hover {
  border-color: rgba(107, 78, 190, 0.34);
  transform: translateY(-1px);
}

.calculator-print-button.is-disabled {
  pointer-events: none;
  opacity: 0.42;
}

.calculator-print-button .icon {
  width: 14px;
  height: 14px;
}

.result-row--action {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.result-row--action::after {
  color: #7657c9;
  content: "↗";
  font-size: 0.58rem;
}

.result-row--action:hover {
  background: rgba(116, 84, 199, 0.08);
  transform: translateX(2px);
}

.calculator-dimension rect {
  fill: #edf3fc;
  stroke: rgba(71, 91, 159, 0.22);
}

.calculator-dimension text,
.drawing-label text {
  fill: #7150a1;
  stroke: none;
  font-family: var(--font-sans);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.drawing-brick-measures rect {
  fill: color-mix(in srgb, var(--surface-raised) 94%, #dff4ff 6%);
  stroke: rgba(63, 133, 183, 0.28);
  stroke-width: 0.8;
}

.drawing-brick-measures text {
  fill: #285f85;
  font-family: var(--font-sans);
  font-size: 7.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
  letter-spacing: 0.01em;
}

:root[data-theme="dark"] .drawing-brick-measures rect {
  fill: rgba(20, 42, 59, 0.94);
  stroke: rgba(115, 198, 239, 0.34);
}

:root[data-theme="dark"] .drawing-brick-measures text {
  fill: #9bdcff;
}

.calculator-dimension marker path {
  fill: var(--sapphire);
}

.drawing-label {
  fill: none;
  stroke: var(--turquoise);
  stroke-width: 0.8;
}

.drawing-label--keystone path {
  opacity: 0.72;
  stroke-dasharray: 2 3;
  stroke-linecap: round;
}

.drawing-label text {
  fill: #147b76;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.results-panel {
  display: flex;
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  padding: 23px 21px;
  background:
    radial-gradient(ellipse 76% 54% at 100% 0%, rgba(100, 181, 246, 0.1), transparent 74%),
    radial-gradient(ellipse 72% 54% at 0% 100%, rgba(128, 104, 216, 0.08), transparent 74%),
    rgba(250, 251, 253, 0.76);
}

.results-panel__check {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(29, 158, 152, 0.29);
  border-radius: 50%;
  background: rgba(29, 158, 152, 0.09);
  color: var(--turquoise);
  box-shadow: 0 0 12px rgba(29, 158, 152, 0.12);
}

.results-panel.is-invalid .results-panel__check {
  border-color: rgba(188, 73, 96, 0.25);
  background: rgba(188, 73, 96, 0.07);
  color: var(--error);
}

.results-panel__check .icon {
  width: 15px;
}

.result-list {
  display: grid;
  margin-top: 17px;
  border-top: 1px solid var(--line);
}

.result-row {
  display: flex;
  min-height: 61px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.result-row > span {
  min-width: 0;
  max-width: 132px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.35;
}

.result-row output {
  min-width: 0;
  max-width: 58%;
  overflow-wrap: anywhere;
  text-align: right;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(0.84rem, 1.15vw, 1.03rem);
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  letter-spacing: -0.035em;
  white-space: normal;
}

.results-panel.is-invalid .result-row output {
  color: #91879a;
}

.result-list__warning {
  margin: 10px 0;
  padding: 9px 10px;
  border: 1px solid rgba(190, 119, 48, 0.22);
  border-radius: 10px;
  background: rgba(255, 244, 223, 0.78);
  color: #8b5b28;
  font-size: 0.5rem;
  line-height: 1.45;
}

.results-summary {
  margin-top: auto;
  padding-top: 18px;
}

.keystone-summary {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border: 1px solid rgba(29, 158, 152, 0.18);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(29, 158, 152, 0.08), rgba(67, 121, 212, 0.07));
}

.keystone-summary strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #176f75;
  font-size: 0.61rem;
}

.keystone-summary strong .icon {
  width: 14px;
}

.keystone-summary p,
.results-fit-note {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.54rem;
  line-height: 1.45;
}

.results-fit-note {
  padding-inline: 3px;
}

/* De werkplaats is één open pagina. Alleen de inhoudspanelen krijgen een
   rustige begrenzing; de oude gekleurde rand en ronde buitencontainer zijn
   bewust verwijderd. */
.calculator-page.container {
  width: min(1560px, calc(100% - max(32px, var(--safe-left)) - max(32px, var(--safe-right))));
}

.calculator-workbench {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.calculator-workbench::before {
  display: none;
  animation: none;
  content: none;
}

.calculator-topbar {
  margin-bottom: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background:
    linear-gradient(125deg, rgba(235, 247, 255, 0.9), rgba(241, 240, 255, 0.82)),
    var(--surface);
  box-shadow: 0 9px 26px rgba(56, 82, 118, 0.08);
}

.calculator-grid,
.top-gable-grid {
  gap: 12px;
}

.input-panel,
.drawing-panel,
.results-panel,
.top-gable-input,
.top-gable-drawing-panel,
.top-gable-results,
.top-gable-table-panel {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background-color: var(--surface);
  box-shadow: 0 9px 26px rgba(48, 69, 97, 0.06);
}

.calculator-structural-disclaimer,
.keystone-summary {
  margin-top: 14px;
  border: 1px solid rgba(66, 151, 205, 0.2);
  background:
    linear-gradient(135deg, rgba(219, 242, 255, 0.86), rgba(231, 240, 255, 0.76)),
    var(--surface-blue);
}

:root[data-theme="dark"] .calculator-workbench {
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .calculator-topbar,
:root[data-theme="dark"] .input-panel,
:root[data-theme="dark"] .drawing-panel,
:root[data-theme="dark"] .results-panel,
:root[data-theme="dark"] .top-gable-input,
:root[data-theme="dark"] .top-gable-drawing-panel,
:root[data-theme="dark"] .top-gable-results,
:root[data-theme="dark"] .top-gable-table-panel {
  border-color: var(--line);
  background:
    radial-gradient(circle at 100% 0%, rgba(71, 125, 184, 0.13), transparent 25rem),
    linear-gradient(145deg, rgba(20, 29, 38, 0.98), rgba(31, 29, 47, 0.96));
  box-shadow: 0 10px 30px rgba(3, 8, 15, 0.24);
}

:root[data-theme="dark"] .field__control,
:root[data-theme="dark"] .setting-out-menu,
:root[data-theme="dark"] .setting-out-menu__steps span {
  border-color: var(--line);
  background:
    linear-gradient(145deg, rgba(14, 23, 32, 0.98), rgba(34, 30, 50, 0.95)),
    var(--field-bg);
  color: var(--text);
}

:root[data-theme="dark"] .field__control input[readonly] {
  background: linear-gradient(145deg, rgba(25, 46, 61, 0.92), rgba(43, 35, 62, 0.92));
  color: var(--text-soft);
}

:root[data-theme="dark"] .field__control output {
  background: linear-gradient(145deg, rgba(18, 34, 46, .96), rgba(37, 31, 55, .94));
  color: #c8daf0;
}

:root[data-theme="dark"] .calculator-structural-disclaimer,
:root[data-theme="dark"] .keystone-summary {
  border-color: rgba(103, 178, 224, 0.24);
  background: linear-gradient(135deg, rgba(24, 56, 74, 0.82), rgba(43, 37, 70, 0.82));
}

@media (max-width: 1080px) {
  .calculator-grid,
  .top-gable-grid {
    gap: 10px;
  }
}

@media (max-width: 620px) {
  .calculator-page.container {
    width: 100%;
  }

  .calculator-topbar {
    margin-inline: 0;
    border-radius: 13px;
  }

  .input-panel,
  .drawing-panel,
  .results-panel,
  .top-gable-input,
  .top-gable-drawing-panel,
  .top-gable-results,
  .top-gable-table-panel {
    border-radius: 14px;
  }
}

@media (min-width: 901px) {
  .calculator-workbench .plain-wall-grid,
  .calculator-workbench .top-gable-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  }

  .plain-wall-grid > .plain-wall-input,
  .top-gable-grid > .top-gable-input { grid-column: 1; }

  .plain-wall-grid > .plain-wall-results,
  .top-gable-grid > .top-gable-results {
    grid-column: 2;
    position: sticky;
    top: 92px;
  }
}

.workbench-output-tabs > span.is-active { display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; min-height: 32px; font-size: .68rem; font-weight: 750; }
.workbench-output-tabs > span.is-active .material-symbols-outlined { font-size: 16px; }

.calculator-heading { padding-top: 1.25rem; padding-bottom: .25rem; }
.calculator-heading h1 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.3; }

.arch-depth-preview__legend {display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text);}
.arch-depth-preview__legend span {display:inline-flex;align-items:center;gap:6px;}
.arch-depth-preview__legend i {width:14px;height:14px;border:1px solid #526774;border-radius:3px;}
.arch-depth-preview__legend .is-standing {background:#b9dff1;}
.arch-depth-preview__legend .is-lying {background:#efa968;}
.arch-depth-section__cell-code {font-size:1.05px;stroke:none;}
.arch-depth-section__side-labels {font:1.05px Arial,sans-serif;fill:#526774;}

.calculator-stone.is-depth-standing {fill:#b9dff1;}
.calculator-stone.is-depth-lying {fill:#efa968;}

.arch-depth-section > header strong {font-size:.9rem;}
.arch-depth-section > header small {font-size:.7rem;line-height:1.45;}
.arch-depth-section__phases > section > b {font-size:.75rem;letter-spacing:0;text-transform:none;}
.arch-depth-section > figcaption {flex-wrap:wrap;row-gap:8px;font-size:.68rem;font-weight:500;}
@media (max-width:620px) {
  .arch-depth-section > figcaption {display:grid;grid-template-columns:12px max-content;justify-content:start;gap:8px;padding-inline:18px;}
  .arch-depth-section > figcaption span {margin-left:0;}
}