.bte-tool-page .wp-block-post-excerpt:empty { display:none; }

.bte-calculator {
  margin: 2rem 0 3rem;
  --bte-border: color-mix(in srgb, currentColor 16%, transparent);
  --bte-muted: color-mix(in srgb, currentColor 64%, transparent);
  --bte-soft: color-mix(in srgb, currentColor 5%, transparent);
}

.bte-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid var(--bte-border);
  border-radius:18px;
  overflow:hidden;
}

.bte-input-panel,
.bte-result-panel {
  padding:clamp(1.25rem,3vw,2.1rem);
}

.bte-result-panel {
  background:var(--bte-soft);
  border-left:1px solid var(--bte-border);
}

.bte-section-kicker {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bte-muted);
  margin-bottom:1rem;
}

.bte-field-group {
  border:0;
  padding:0;
  margin:0 0 1.35rem;
  min-width:0;
}

.bte-field-group legend {
  font-size:1rem;
  font-weight:700;
  margin-bottom:.75rem;
}

.bte-fields { display:grid; gap:1rem; }

.bte-field label {
  display:block;
  font-weight:650;
  margin-bottom:.45rem;
}

.bte-input-wrap {
  position:relative;
  display:flex;
  align-items:center;
}

.bte-field input[type="number"],
.bte-field input[type="range"],
.bte-field select {
  width:100%;
  min-height:48px;
  font:inherit;
  border:1px solid var(--bte-border);
  border-radius:10px;
  background:transparent;
  color:inherit;
  padding:.75rem .85rem;
  box-sizing:border-box;
}

.bte-field input[type="range"] {
  padding:0;
  border:0;
}

.bte-field input:focus,
.bte-field select:focus {
  outline:2px solid currentColor;
  outline-offset:2px;
}

.bte-prefix,
.bte-suffix {
  position:absolute;
  color:var(--bte-muted);
  pointer-events:none;
}

.bte-prefix { left:.85rem; }
.bte-suffix { right:.85rem; }

.bte-prefix + input { padding-left:1.8rem !important; }
.bte-field input:has(+ .bte-suffix) { padding-right:2rem; }

.bte-help {
  display:block;
  margin-top:.4rem;
  color:var(--bte-muted);
}

.bte-form-actions { margin-top:.25rem; }

.bte-clear {
  min-height:42px;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid var(--bte-border);
  background:transparent;
  color:inherit;
  cursor:pointer;
}

.bte-clear:hover { background:var(--bte-soft); }

.bte-empty-state {
  color:var(--bte-muted);
  font-size:1.05rem;
  line-height:1.55;
  max-width:28ch;
  padding:1rem 0 2rem;
}

.bte-results { display:grid; gap:.75rem; }

.bte-result {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--bte-border);
}

.bte-result.is-primary {
  display:block;
  padding:0 0 1.2rem;
}

.bte-result.is-primary .bte-result-label {
  display:block;
  color:var(--bte-muted);
  margin-bottom:.2rem;
}

.bte-result.is-primary .bte-result-value {
  display:block;
  font-size:clamp(2rem,7vw,3.6rem);
  line-height:1;
  letter-spacing:-.04em;
}

.bte-breakdown { margin-top:1.75rem; }
.bte-breakdown h3 { font-size:1rem; margin-bottom:.6rem; }

.bte-breakdown-row {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem 0;
}

.bte-validation {
  min-height:1.4em;
  color:#b42318;
  font-size:.9rem;
}

.bte-error {
  padding:1rem;
  border:1px solid #b42318;
  border-radius:10px;
}

@media (max-width:700px) {
  .bte-grid { grid-template-columns:1fr; }
  .bte-result-panel {
    border-left:0;
    border-top:1px solid var(--bte-border);
  }
}


/* v0.2.1 tool-page refinements */
.bte-tool-page .wp-block-post-title {
  max-width: 18ch;
}

.bte-tool-page .wp-block-post-content {
  width: 100%;
}

.bte-tool-page .bte-calculator {
  max-width: 860px;
}


/* v0.2.2 subtitle */
.bte-tool-page .wp-block-post-excerpt {
  max-width: 60ch;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.bte-tool-page .wp-block-post-excerpt__excerpt {
  margin: 0;
}


/* v0.2.4 dedicated tool subtitle */
.bte-tool-subtitle {
  max-width: 60ch;
  margin: 0 0 30px;
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-size: 1.08rem;
  line-height: 1.5;
}


/* v0.2.5 adaptive desktop layout */
@media (min-width: 901px) {
  .bte-tool-page .bte-calculator {
    max-width: 1160px;
  }

  .bte-layout-dense .bte-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, .9fr);
    gap: 24px;
    align-items: start;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .bte-layout-dense .bte-input-panel,
  .bte-layout-dense .bte-result-panel {
    border: 1px solid var(--bte-border);
    border-radius: 18px;
  }

  .bte-layout-dense .bte-result-panel {
    border-left: 1px solid var(--bte-border);
    position: sticky;
    top: 56px;
    min-height: 0;
  }

  .bte-layout-dense .bte-field-group {
    padding-top: 1.1rem;
    border-top: 1px solid var(--bte-border);
  }

  .bte-layout-dense .bte-field-group:first-of-type {
    padding-top: 0;
    border-top: 0;
  }

  .bte-layout-dense .bte-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 15px;
  }

  .bte-layout-dense .bte-field {
    min-width: 0;
  }

  .bte-layout-dense .bte-help {
    font-size: .9rem;
    line-height: 1.35;
  }

  .bte-layout-dense .bte-form-actions {
    margin-top: .5rem;
  }

  .bte-layout-compact .bte-grid {
    max-width: 760px;
  }
}

@media (min-width: 1200px) {
  .bte-layout-dense .bte-grid {
    grid-template-columns: minmax(0, 2fr) minmax(320px, .85fr);
  }
}

/* Keep the mobile/tablet form comfortably single-column. */
@media (max-width: 900px) {
  .bte-layout-dense .bte-fields {
    grid-template-columns: 1fr;
  }

  .bte-layout-dense .bte-result-panel {
    position: static;
  }
}


/* v0.3 measurement toggle + wide-theme compatibility */
.bte-input-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:1rem;
}

.bte-input-head .bte-section-kicker {
  margin-bottom:0;
}

.bte-unit-toggle {
  display:inline-flex;
  padding:3px;
  border:1px solid var(--bte-border);
  border-radius:999px;
  background:var(--bte-soft);
}

.bte-unit-option {
  min-height:34px;
  padding:4px 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font:inherit;
  font-size:.86rem;
  cursor:pointer;
}

.bte-unit-option.is-active {
  background:#111;
  color:#fff;
}

.bte-dynamic-unit {
  position:absolute;
  right:.85rem;
  color:var(--bte-muted);
  pointer-events:none;
  font-size:.9rem;
}

.bte-field:has(.bte-dynamic-unit) input {
  padding-right:4.6rem;
}

@media (min-width: 901px) {
  .bte-layout-dense {
    width:min(1160px, calc(100vw - 48px));
    margin-left:auto;
    margin-right:auto;
  }

  .bte-layout-dense .bte-input-panel {
    min-width:0;
  }

  .bte-layout-dense .bte-fields {
    grid-template-columns:repeat(2,minmax(220px,1fr));
  }
}

@media (max-width: 900px) {
  .bte-input-head {
    align-items:flex-start;
    flex-direction:column;
  }
}

/* v0.4.0 toolbar, currency and PDF actions */
.bte-toolbar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.bte-currency-control {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.86rem;
  color:var(--bte-muted);
}

.bte-currency-control select {
  min-height:36px;
  padding:5px 28px 5px 10px;
  border:1px solid var(--bte-border);
  border-radius:999px;
  background:transparent;
  color:inherit;
  font:inherit;
}

.bte-result-actions {
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--bte-border);
}

.bte-save-pdf {
  min-height:42px;
  padding:.58rem .95rem;
  border-radius:999px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:inherit;
  cursor:pointer;
}

.bte-save-pdf:hover { opacity:.88; }

@media (max-width:700px) {
  .bte-toolbar {
    width:100%;
    justify-content:space-between;
  }
}


/* v0.5.1 result readability */
.bte-breakdown-row {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:baseline;
  column-gap:.7rem;
}

.bte-breakdown-row > strong {
  white-space:nowrap;
  text-align:right;
}

@media (min-width: 901px) {
  .bte-layout-dense .bte-breakdown-row > span {
    white-space:nowrap;
    font-size:.94rem;
  }

  .bte-layout-dense .bte-breakdown-row {
    column-gap:.55rem;
  }
}

@media (max-width: 900px) {
  .bte-breakdown-row > span {
    min-width:0;
  }
}


/* v0.6.0 unified calculator design system */
.bte-calculator {
  width: min(1160px, calc(100vw - 48px));
  max-width: 1160px !important;
  margin-left: auto;
  margin-right: auto;
}

.bte-grid {
  background: transparent;
}

.bte-input-panel,
.bte-result-panel {
  background: #fff;
}

.bte-result-panel {
  background: var(--bte-soft);
}

.bte-layout-compact .bte-grid {
  max-width: 900px;
  margin-left: 0;
  margin-right: auto;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 24px;
  border: 0;
  overflow: visible;
}

.bte-layout-compact .bte-input-panel,
.bte-layout-compact .bte-result-panel {
  border: 1px solid var(--bte-border);
  border-radius: 18px;
}

.bte-layout-compact .bte-result-panel {
  border-left: 1px solid var(--bte-border);
}

.bte-layout-compact .bte-input-panel {
  padding: clamp(1.4rem, 2.2vw, 2rem);
}

.bte-layout-compact .bte-result-panel {
  padding: clamp(1.4rem, 2.2vw, 2rem);
}

.bte-layout-compact .bte-fields {
  gap: 1rem;
}

.bte-layout-compact .bte-result.is-primary {
  padding-bottom: 1.35rem;
}

.bte-layout-compact .bte-breakdown {
  margin-top: 1.5rem;
}

.bte-layout-compact .bte-breakdown-row {
  padding: .55rem 0;
}

.bte-layout-dense .bte-input-panel,
.bte-layout-dense .bte-result-panel,
.bte-layout-compact .bte-input-panel,
.bte-layout-compact .bte-result-panel {
  box-shadow: none;
}

.bte-layout-dense .bte-result-panel,
.bte-layout-compact .bte-result-panel {
  align-self: start;
}

@media (max-width: 900px) {
  .bte-calculator {
    width: min(100%, calc(100vw - 32px));
  }

  .bte-layout-compact .bte-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--bte-border);
    border-radius: 18px;
    overflow: hidden;
  }

  .bte-layout-compact .bte-input-panel,
  .bte-layout-compact .bte-result-panel {
    border: 0;
    border-radius: 0;
  }

  .bte-layout-compact .bte-result-panel {
    border-top: 1px solid var(--bte-border);
  }
}


/* v0.6.1 tool heading: exact same canvas as calculator */
.bte-tool-page-heading {
  width: min(1160px, calc(100vw - 48px));
  max-width: 1160px;
  margin: 0 auto 28px;
}

.bte-tool-page-title {
  margin: 0 0 12px;
  max-width: 900px;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.bte-tool-page-subtitle {
  margin: 0;
  max-width: 760px;
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-size: 1.08rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .bte-tool-page-heading {
    width: min(100%, calc(100vw - 32px));
  }
}


/* v0.6.2: heading and calculator are siblings in the same post-content flow */
.bte-tool-page-heading,
.bte-calculator {
  width: min(1160px, calc(100vw - 48px));
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bte-tool-page-heading {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}

.bte-tool-page-title {
  margin: 0 0 12px !important;
  max-width: 900px;
}

.bte-tool-page-subtitle {
  margin: 0 !important;
  max-width: 760px;
}

@media (max-width: 900px) {
  .bte-tool-page-heading,
  .bte-calculator {
    width: min(100%, calc(100vw - 32px));
  }
}


/* v0.6.3 dynamic currency/unit affix spacing */
.bte-input-wrap {
  --bte-prefix-width: 0px;
  --bte-suffix-width: 0px;
}

.bte-input-wrap .bte-prefix {
  left: .85rem;
  white-space: nowrap;
}

.bte-input-wrap .bte-suffix,
.bte-input-wrap .bte-dynamic-unit {
  right: .85rem;
  white-space: nowrap;
}

.bte-input-wrap:has(.bte-prefix) input {
  padding-left: calc(.85rem + var(--bte-prefix-width) + .45rem) !important;
}

.bte-input-wrap:has(.bte-suffix) input,
.bte-input-wrap:has(.bte-dynamic-unit) input {
  padding-right: calc(.85rem + var(--bte-suffix-width) + .45rem) !important;
}


/* v0.6.4 primary result overflow protection */
.bte-result.is-primary {
  min-width: 0;
}

.bte-result.is-primary .bte-result-value {
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  box-sizing: border-box;
}


/* v0.6.8 required-field convention */
.bte-field-label.is-required::after {
  content: " *";
  font-weight: 600;
}



/* v0.6.9 PDF download state */
.bte-save-pdf:disabled {
  cursor: wait;
  opacity: .62;
}



/* v0.7.2 contextual info popups */
.bte-label-row {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-bottom: .45rem;
}

.bte-label-row .bte-field-label {
  margin-bottom: 0 !important;
}

.bte-info-button {
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, currentColor 68%, transparent);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.bte-info-button:hover,
.bte-info-button:focus-visible {
  border-color: currentColor;
  color: currentColor;
}

.bte-info-modal[hidden] {
  display: none;
}

.bte-info-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
}

.bte-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
}

.bte-info-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  box-sizing: border-box;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 18px;
  background: #fff;
  color: #111;
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.bte-info-title {
  margin: 0 42px 12px 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.bte-info-body,
.bte-info-example p {
  margin: 0;
  line-height: 1.6;
}

.bte-info-example {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,.12);
}

.bte-info-example strong {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bte-info-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.bte-info-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .bte-info-modal {
    padding: 16px;
  }

  .bte-info-dialog {
    padding: 22px 20px;
    border-radius: 15px;
  }
}


/* v0.7.3 contextual info on result rows */
.bte-breakdown-label {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
}

.bte-result-info-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  font-size: .68rem;
  vertical-align: middle;
}


/* v0.7.4 robust result-row wrapping */
.bte-breakdown-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: start;
}

.bte-breakdown-label {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.bte-breakdown-row > strong {
  min-width: max-content;
  max-width: 46%;
  text-align: right;
  white-space: nowrap;
  align-self: start;
}

.bte-breakdown-label .bte-info-button {
  display: inline-grid;
  vertical-align: text-bottom;
  margin-left: .08rem;
}

@media (max-width: 420px) {
  .bte-breakdown-row {
    column-gap: .65rem;
  }

  .bte-breakdown-row > strong {
    max-width: 42%;
  }
}


/* v0.7.5 final long result-label wrapping */
.bte-breakdown-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 1rem;
  align-items: start;
}

.bte-breakdown-label {
  display: flex !important;
  align-items: flex-start;
  gap: .38rem;
  min-width: 0;
  max-width: 100%;
}

.bte-breakdown-label-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.4;
}

.bte-result-info-button {
  flex: 0 0 auto;
  margin-top: .08rem;
}

.bte-breakdown-row > strong {
  justify-self: end;
  min-width: max-content;
  max-width: none;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 420px) {
  .bte-breakdown-row {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: .6rem;
  }
}