/* One consistent inactive/active control language for every private tool.
   The blue-tinted edge removes the bright hairlines visible in dark mode. */
:root[data-theme="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
) {
  border-color: var(--control-border);
  background: var(--control-bg);
  box-shadow:
    inset 0 1px rgba(115, 190, 255, .07),
    0 0 0 1px rgba(31, 104, 175, .035);
  color: var(--text);
}

:root[data-theme="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
):hover {
  border-color: rgba(75, 162, 245, .48);
  background: var(--control-bg-hover);
}

:root[data-theme="dark"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea
):focus {
  border-color: #59aaff;
  outline: none;
  box-shadow:
    0 0 0 3px rgba(48, 135, 225, .19),
    inset 0 1px rgba(130, 200, 255, .09);
}

:root[data-theme="dark"] :where(
  .top-gable-segmented,
  .course-height-choice__modes,
  .circle-window-choice,
  .execution-choice,
  .wall-clamp-choice,
  .workbench-output-tabs
) > button,
:root[data-theme="dark"] .arch-tab,
:root[data-theme="dark"] .circle-window-choice button {
  border-color: var(--control-border);
  background: var(--control-bg);
  color: var(--text-soft);
  box-shadow: inset 0 1px rgba(117, 190, 255, .055);
}

:root[data-theme="dark"] :where(
  .top-gable-segmented,
  .course-height-choice__modes,
  .circle-window-choice,
  .execution-choice,
  .wall-clamp-choice,
  .workbench-output-tabs
) > button:hover,
:root[data-theme="dark"] .arch-tab:hover,
:root[data-theme="dark"] .circle-window-choice button:hover {
  border-color: rgba(78, 167, 250, .5);
  background: var(--control-bg-hover);
}

:root[data-theme="dark"] :where(
  .top-gable-segmented,
  .course-height-choice__modes,
  .circle-window-choice,
  .execution-choice,
  .wall-clamp-choice,
  .workbench-output-tabs
) > button.is-active,
:root[data-theme="dark"] .arch-tab.is-active,
:root[data-theme="dark"] .circle-window-choice button.is-active {
  border-color: rgba(121, 187, 255, .52);
  background: var(--control-bg-active);
  color: var(--text);
  box-shadow:
    0 8px 20px rgba(16, 72, 151, .28),
    inset 0 1px rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] button {
  border-color: color-mix(in srgb, var(--sapphire) 34%, transparent);
}

/* Remove the remaining light cards inside calculators. These nested surfaces
   keep a small blue edge for orientation without turning every field into a
   separate bright box. */
:root[data-theme="dark"] :where(
  .top-gable-workarea-tabs,
  .top-gable-option,
  .top-gable-table-scroll,
  .brick-picker__selected,
  .brick-depth-choice,
  .stone-method-picker,
  .natural-stone-control,
  .wall-clamp-control,
  .course-height-choice,
  .wall-masonry-picker,
  .automatic-joint-policy,
  .stretch-profile-visibility,
  .weaving-three-mf__popover,
  .weaving-build-aid,
  .weaving-station-strip,
  .work-saw-card
) {
  border-color: rgba(75, 157, 225, .14);
  background:
    radial-gradient(circle at 100% 0%, rgba(52, 126, 174, .1), transparent 18rem),
    linear-gradient(145deg, rgba(16, 27, 37, .92), rgba(28, 27, 43, .9));
  box-shadow: none;
  color: var(--text-soft);
}

:root[data-theme="dark"] :where(
  .top-gable-workarea-tabs a.is-active,
  .top-gable-segmented button.is-active,
  .top-gable-option.is-active,
  .stone-method-options button.is-active,
  .natural-stone-control__positions button.is-active,
  .wall-masonry-toggle.is-active
) {
  border-color: rgba(95, 171, 239, .31);
  background: linear-gradient(135deg, rgba(48, 93, 153, .78), rgba(74, 59, 128, .72));
  box-shadow: 0 7px 18px rgba(2, 8, 16, .22);
  color: var(--text);
}

:root[data-theme="dark"] :where(
  .automatic-joint-policy > .material-symbols-outlined,
  .natural-stone-control__state,
  .weaving-three-mf__identity > .material-symbols-outlined,
  .weaving-build-aid > header .material-symbols-outlined,
  .weaving-build-aid > header > span,
  .weaving-station-strip span
) {
  border-color: rgba(77, 161, 220, .2);
  background: rgba(32, 59, 76, .66);
  color: #9bd4ea;
}

:root[data-theme="dark"] .weaving-drawing .arch-canvas {
  background:
    radial-gradient(circle at 50% 8%, rgba(56, 118, 151, .13), transparent 48%),
    linear-gradient(180deg, #121c24, #0d151c);
}

:root[data-theme="dark"] :where(
  .weaving-mortar-field,
  .weaving-tooth-reserve,
  .weaving-ridge-joint
) {
  fill: #26323a;
}

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

:root[data-theme="dark"] :where(
  .top-gable-dimension text,
  .top-gable-angle text,
  .top-gable-slope-mark text,
  .calculator-construction-centre-label
) {
  fill: #c8dbe5;
  stroke: rgba(12, 20, 28, .88);
}

:root[data-theme="dark"] :where(.setting-out-labels circle, .porring-point circle) {
  fill: #152531;
  stroke: #75b6d2;
}