/* Transformer control material: one frame, 12 px radius, restrained Liquid Glass
   (8 px blur, 110% saturation) with a solid fallback. Reading groups stay opaque.
   Screen only. Calculation, document and printed-report behaviour is unchanged. */
@media screen {
  body.page-transformer {
    --txg-surface: #fff;
    --txg-tint: rgba(255,255,255,.88);
    --txg-highlight: rgba(255,255,255,.98);
    --txg-edge: #8996a8;
    --txg-shadow: 0 2px 6px rgba(30,45,70,.06);
    --txg-group: #f6f7fa;
    --txg-group-edge: #e1e5ed;
    --txg-selected: #dcecff;
    --txg-selected-ink: #0055a4;
  }
  html[data-theme="night"] body.page-transformer {
    --txg-surface: #2b2e39;
    --txg-tint: rgba(43,46,57,.94);
    --txg-highlight: rgba(62,66,82,.9);
    --txg-edge: #7d879c;
    --txg-shadow: 0 2px 6px rgba(0,0,0,.16);
    --txg-group: #22242e;
    --txg-group-edge: #414654;
    --txg-selected: #354f70;
    --txg-selected-ink: #d1e8ff;
  }
  body.page-transformer :is(#transformer-inputs, #adv-panel) > .vd-card {
    background: var(--txg-group) !important;
    border-color: var(--txg-group-edge) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* One selector list for every framed control, so each fallback below overrides
     the same rule at the same specificity. */
  body.page-transformer [data-role="calc"] :is(.field, select.dd),
  body.page-transformer [data-role="calc"] .vd-adv-toggle,
  body.page-transformer #transformer-analysis :is(.vd-tab, .transformer-review-input),
  body.page-transformer #transformer-document :is(.add-btn, .transformer-document-button),
  body.page-transformer [data-role="calc"] .vd-head .vd-pdf-btn,
  body.page-transformer #amp-workspace button {
    background: var(--txg-surface) !important;
    border: 1px solid var(--txg-edge) !important;
    border-radius: 12px !important;
    box-shadow: var(--txg-shadow) !important;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.page-transformer [data-role="calc"] :is(.field, select.dd),
    body.page-transformer [data-role="calc"] .vd-adv-toggle,
    body.page-transformer #transformer-analysis :is(.vd-tab, .transformer-review-input),
    body.page-transformer #transformer-document :is(.add-btn, .transformer-document-button),
    body.page-transformer [data-role="calc"] .vd-head .vd-pdf-btn,
    body.page-transformer #amp-workspace button {
      background: linear-gradient(160deg,var(--txg-highlight),var(--txg-tint)) !important;
      backdrop-filter: blur(8px) saturate(110%);
      -webkit-backdrop-filter: blur(8px) saturate(110%);
    }
  }
  body.page-transformer [data-role="calc"] .field > input {
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
  }
  body.page-transformer #transformer-analysis .vd-tab.active {
    background: var(--txg-selected) !important;
    color: var(--txg-selected-ink) !important;
    border-color: var(--txg-edge) !important;
  }
  /* Document section: Save is the blue-filled primary (as the header Save), Print
     stays the secondary glass control. Higher specificity than the frame list, so
     the reduced-transparency fallback below keeps it filled too. */
  body.page-transformer #transformer-document #transformer-document-save {
    background: var(--tx-accent, #0060b9) !important;
    color: var(--tx-on-accent, #fff) !important;
    border-color: var(--tx-accent, #0060b9) !important;
  }
  body.page-transformer #transformer-document #transformer-document-save:hover:not(:disabled) {
    background: var(--tx-accent-hover, #004f99) !important;
    border-color: var(--tx-accent-hover, #004f99) !important;
  }
  body.page-transformer [data-role="calc"] .field:has(:focus-visible) {
    outline: 2px solid var(--tx-accent, #0060b9) !important;
    outline-offset: 3px;
  }
  body.page-transformer [data-role="calc"] .field:has([aria-invalid=true]),
  body.page-transformer [data-role="calc"] select.dd[aria-invalid=true] {
    border-color: var(--tx-fail, #b4233d) !important;
  }
  body.page-transformer :is(#amp-workspace-dialog, dialog.amp-workspace-dialog) {
    --aw-bg: var(--txg-surface);
    --aw-soft: var(--txg-group);
    --aw-line: var(--txg-edge);
  }
  @media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
    body.page-transformer [data-role="calc"] :is(.field, select.dd),
    body.page-transformer [data-role="calc"] .vd-adv-toggle,
    body.page-transformer #transformer-analysis :is(.vd-tab, .transformer-review-input),
    body.page-transformer #transformer-document :is(.add-btn, .transformer-document-button),
    body.page-transformer [data-role="calc"] .vd-head .vd-pdf-btn,
    body.page-transformer #amp-workspace button {
      background: var(--txg-surface) !important;
      backdrop-filter: none; -webkit-backdrop-filter: none;
      box-shadow: none !important;
    }
    body.page-transformer #transformer-analysis .vd-tab.active { background: var(--txg-selected) !important; }
  }
  @media (forced-colors:active) {
    /* Invalid fields and groups keep a non-colour frame: the forced frame above replaces the red border. */
    body.page-transformer :is(.field:has([aria-invalid="true"]), select[aria-invalid="true"], [data-invalid="true"]) { outline: 2px solid Mark !important; outline-offset: 1px; }
    body.page-transformer [data-role="calc"] :is(.field, select.dd),
    body.page-transformer [data-role="calc"] .vd-adv-toggle,
    body.page-transformer #transformer-analysis :is(.vd-tab, .transformer-review-input),
    body.page-transformer #transformer-document :is(.add-btn, .transformer-document-button),
    body.page-transformer [data-role="calc"] .vd-head .vd-pdf-btn,
    body.page-transformer #amp-workspace button {
      background: Canvas !important; border-color: ButtonText !important;
      box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    body.page-transformer #transformer-analysis .vd-tab.active { background: Highlight !important; color: HighlightText !important; forced-color-adjust: none; }
    body.page-transformer [data-role="calc"] .field:has(:focus-visible) { outline-color: Highlight !important; }
  }
}