/* Anchor links land under the fixed header without this. The header is
   position:fixed via the site's custom CSS, so every #group- jump from the
   study cards needs the offset. */
html { scroll-padding-top: var(--sp-4xl); }

.stx-calc {
  font-family: inherit;
  color: var(--brand-dark);
  /* the accordion's own content padding doesn't reach the mount point,
     so the form carries it */
  padding: 4px 26px 26px;
}

.stx-calc .form-container { padding-top: 4px; }
.stx-calc .form-container { display: flex; flex-wrap: wrap; gap: 28px; width: 100%; }
.stx-calc .column { flex: 1; min-width: 190px; }
.stx-calc .full-width { flex-basis: 100%; }
.stx-calc h3, .stx-calc h4 {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: hsla(230, 14%, 9%, 0.45); margin: 0 0 10px;
}
.stx-calc .form-group { margin-bottom: 12px; }
.stx-calc .form-group label {
  display: block; margin-bottom: 5px; font-size: var(--fs-xs);
  font-weight: 700; color: hsla(230, 14%, 9%, 0.7);
}
.stx-calc input[type="number"], .stx-calc input[type="text"], .stx-calc select {
  width: 120px; max-width: 100%; padding: 9px 12px; font-size: var(--fs-sm);
  font-family: inherit; color: var(--brand-dark); background: var(--White);
  border: 1px solid var(--brand-line); border-radius: 10px; box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.stx-calc input:focus, .stx-calc select:focus {
  outline: none; border-color: var(--brand-dark-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-dark-blue) 18%, transparent);
}
.stx-calc input[type="number"]::-webkit-outer-spin-button,
.stx-calc input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.stx-calc input[type="number"] { -moz-appearance: textfield; }
.stx-calc .button-container, .stx-calc .button-container-first,
.stx-calc .button-container-detailed {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px;
}
.stx-calc .btn {
  display: inline-block; padding: 12px 26px; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em;
  color: var(--White); background: var(--brand-dark); border: none;
  border-radius: 999px; cursor: pointer; transition: opacity .2s ease;
}
.stx-calc .btn:hover { opacity: .85; }
.stx-calc .clear-text {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 700; color: hsla(230, 14%, 9%, 0.5);
}
.stx-calc .clear-text:hover { color: var(--brand-red); }
.stx-calc .clear-text span { font-size: var(--fs-md); font-weight: 700; }
.stx-calc .results {
  flex-basis: 100%; margin-top: 24px; padding: 20px; background: var(--brand-grey);
  border: 1px solid var(--brand-line); border-left: 4px solid var(--brand-dark-blue);
  border-radius: 12px;
}
.stx-calc .results p, .stx-calc .result-line { font-size: var(--fs-sm); margin: 0 0 8px; }
.stx-calc .results-container { display: flex; flex-wrap: wrap; gap: 24px; width: 100%; margin-top: 20px; }
.stx-calc .results-column { flex: 1; min-width: 200px; }
.stx-calc .result-section { margin-bottom: 20px; }
.stx-calc .result-item, .stx-calc .spacer-between { margin-top: 10px; }
.stx-calc .result-label, .stx-calc .bold, .stx-calc .bold-text { font-weight: 700; }
.stx-calc .result-value { margin-left: 10px; }
.stx-calc .result-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  background: var(--White); border-radius: 10px; overflow: hidden;
}
.stx-calc .result-table th, .stx-calc .result-table td {
  border: 1px solid var(--brand-line); padding: 9px 12px; text-align: center;
}
.stx-calc .result-table td:first-child { text-align: left; }
.stx-calc .result-table th {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: hsla(230, 14%, 9%, 0.5); background: var(--brand-grey);
}
.stx-calc .result-table .centered-text {
  text-align: center; font-weight: 700;
  background: color-mix(in srgb, var(--brand-light-blue) 30%, var(--White));
}
.stx-calc .error-banner, .stx-calc .error {
  display: none; width: 100%; box-sizing: border-box; padding: 12px 16px;
  margin-bottom: 16px; font-size: var(--fs-sm); border-radius: 10px;
  background: color-mix(in srgb, var(--brand-red) 10%, var(--White));
  border: 1px solid color-mix(in srgb, var(--brand-red) 35%, var(--brand-line));
  color: var(--brand-dark);
}
.stx-calc .loading-banner {
  display: none; width: 100%; box-sizing: border-box; padding: 12px 16px;
  margin: 10px 0 16px; font-size: var(--fs-sm); border-radius: 10px;
  background: color-mix(in srgb, var(--brand-light-blue) 22%, var(--White));
  border: 1px solid color-mix(in srgb, var(--brand-light-blue) 45%, var(--brand-line));
}
.stx-calc .hidden { display: none; }
.stx-calc .ok { color: #1B7F4B; font-weight: 700; }
.stx-calc .invalid { color: var(--brand-red); }
.stx-calc .validity { margin-bottom: 0; display: inline-block; }
.stx-calc .spacer { margin-top: 20px; }
.stx-calc .spacer-extra { margin-bottom: 15px; }
.stx-calc .lowercase-subscript { vertical-align: sub; font-size: 80%; }
/* give the fields room to breathe and let columns share the width evenly */
.stx-calc .column { min-width: 210px; }
.stx-calc input[type="number"],
.stx-calc input[type="text"],
.stx-calc select { width: 100%; max-width: 220px; }

@media screen and (max-width: 768px) {
  .stx-calc { padding: 4px 18px 20px; }
  .stx-calc .form-container { flex-direction: column; gap: 20px; }
  .stx-calc .column { margin-right: 0; min-width: 0; }
  .stx-calc input[type="number"],
  .stx-calc input[type="text"],
  .stx-calc select { max-width: 100%; }
}

.stx-calc, .stx-calc * { box-sizing: border-box; max-width: 100%; }
.brxe-accordion-nested, .brxe-accordion-nested > .brxe-block { max-width: 100%; }
.brxe-accordion-nested .accordion-content-wrapper { overflow-x: hidden; }