.calculator-page {
  padding-top: 18px;
}

.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 {
  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%);
}

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

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

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

.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__switch > i {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5df;
  transition: .18s ease;
}
.natural-stone-control__switch > i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30, 41, 59, .24);
  content: "";
  transition: .18s ease;
}
.natural-stone-control__switch.is-active > i { background: #2799a0; }
.natural-stone-control__switch.is-active > i::after { transform: translateX(16px); }
.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: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--surface-blue);
}

.wall-clamp-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.wall-clamp-toggle input { width: 20px; height: 20px; margin: 0; accent-color: #367fa9; }
.wall-clamp-toggle span { display: grid; gap: 3px; }
.wall-clamp-toggle strong { font-size: .76rem; }
.wall-clamp-toggle small { color: var(--muted); font-size: .65rem; line-height: 1.4; }

:root[data-theme="dark"] .wall-clamp-control {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(22, 45, 61, .9), rgba(42, 35, 64, .9));
}

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

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

.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: 104px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(81, 86, 116, 0.17);
  border-radius: 999px;
  background: rgba(229, 230, 236, 0.82);
  color: #6f7280;
  cursor: pointer;
  font-size: 0.53rem;
  font-weight: 820;
}

.wall-masonry-toggle i {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 99px;
  background: #bbbfc9;
}

.wall-masonry-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 160ms ease;
}

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

.wall-masonry-toggle.is-active i {
  background: linear-gradient(90deg, #48bfd0, #7667d3);
}

.wall-masonry-toggle.is-active i::after {
  transform: translateX(10px);
}

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

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

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

.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 {
  fill: url("#calculator-brick");
}

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

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