.lyfcalc-instance {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: visible;
}

.lyfcalc-instance__header {
  border-bottom: 1px solid var(--line, #e4e6e6);
  padding: 24px;
}

.lyfcalc-instance__header h2 {
  font-size: var(--fs-h5, 18.98px);
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}

.lyfcalc-instance__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0;
  align-items: stretch;
}

.lyfcalc-inputs {
  display: grid;
  /* Between sections. Rows within a section are spaced by the rule further
     down; a section heading is separation enough without a rule drawn across
     the form. */
  gap: 32px;
}

.lyfcalc-field {
  display: block;
}
/*
.lyfcalc-field label {
  color: var(--ink-3, #5f6768);
  display: block;
  font-size: var(--fs-sm, 13.33px);
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 4px;
}*/

.lyfcalc-control,
.lyfcalc-choice-control {
  align-items: center;
  background: var(--surface, #fff);
  border: 1px solid var(--line-strong, #d2d6d6);
  border-radius: var(--radius, 4px);
  display: flex;
  min-height: 40px;
}

.lyfcalc-control .select {
  border: 0;
  height: 38px;
  padding-left: 0;
  padding-right: 0;
}

.lyfcalc-control:focus-within,
.lyfcalc-choice-control:focus-within,
.input-wrap:focus-within {
  outline: 2px solid var(--primary, #233e78);
  outline-offset: -1px;
}

/* Only controls sitting inside a bordered wrapper drop their own border — a
   standalone select keeps the theme's .select border. */
.lyfcalc-control input,
.lyfcalc-control select,
.input-wrap input,
.input-wrap select {
  background: transparent;
  border: 0;
  color: var(--ink, #1f2223);
  flex: 1 1 auto;
  font: inherit;
  min-height: 38px;
  min-width: 0;
  width: 100%;
}

.lyfcalc-field input:focus,
.lyfcalc-field select:focus,
.input-wrap input:focus {
  outline: 0;
}

.lyfcalc-field > .select {
  color: var(--ink, #1f2223);
  font: inherit;
}

.lyfcalc-field > .select:focus-visible {
  outline: 2px solid var(--primary, #233e78);
  outline-offset: -1px;
}

.input-stepper {
  align-self: stretch;
  border-left: 1px solid var(--line, #e4e6e6);
  display: grid;
  flex: 0 0 24px;
}

.input-stepper button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--ink-4, #8b9393);
  cursor: pointer;
  display: flex;
  font: 600 9px/1 var(--font, system-ui, sans-serif);
  justify-content: center;
  padding: 0;
}

.input-stepper button:first-child {
  border-bottom: 1px solid var(--line, #e4e6e6);
}

.input-stepper button:hover {
  background: var(--placeholder, #f2f3f3);
  color: var(--primary, #233e78);
}

.input-stepper button:focus-visible {
  outline: 1px solid var(--primary, #233e78);
  outline-offset: -1px;
}

.lyfcalc-control__suffix {
  align-items: center;
  color: var(--ink-4, #8b9393);
  display: inline-flex;
  flex: none;
  font-size: var(--fs-p, 15px);
  justify-content: center;
  min-width: 32px;
  padding: 0 8px;
}

.lyfcalc-choice-control {
  gap: 8px;
  padding: 0 12px;
}

.lyfcalc-choice-control input {
  accent-color: var(--primary, #233e78);
  min-height: 16px;
  width: auto;
}

.lyfcalc-field-help {
  align-items: center;
  color: var(--ink-4, #8b9393);
  display: flex;
  gap: 6px;
  font-size: var(--fs-sm, 13.33px);
  line-height: 1.4;
  margin-top: 4px;
}

.lyfcalc-tooltip {
  display: inline-flex;
  position: relative;
}

.lyfcalc-info-toggle {
  align-items: center;
  background: var(--surface, #fff);
  border: 1px solid var(--ink-5, #9aa2a2);
  border-radius: 50%;
  color: var(--ink-3, #5f6768);
  cursor: help;
  display: inline-flex;
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  height: 16px;
  justify-content: center;
  line-height: 1;
  min-height: 16px;
  min-width: 16px;
  padding: 0;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  width: 16px;
}

/* Filling the icon on hover makes it read as something you can interact with,
   and confirms which one you are on when several sit close together. */
.lyfcalc-info-toggle:hover,
.lyfcalc-info-toggle:focus-visible {
  background: var(--line-strong, #d2d6d6);
  border-color: var(--ink-4, #8b9393);
  color: var(--ink, #1f2223);
}

.lyfcalc-tooltip-content {
  background: var(--ink, #1f2223);
  border-radius: var(--radius, 4px);
  bottom: calc(100% + 8px);
  color: var(--surface, #fff);
  display: none;
  font-size: var(--fs-sm, 13.33px);
  left: 50%;
  line-height: 1.4;
  max-width: min(260px, 80vw);
  padding: 8px 10px;
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  z-index: 5;
}

.lyfcalc-info-toggle[aria-expanded="true"] + .lyfcalc-tooltip-content,
.lyfcalc-info-toggle:focus + .lyfcalc-tooltip-content,
.lyfcalc-tooltip:hover .lyfcalc-tooltip-content {
  display: block;
}

.lyfcalc-actions {
  display: flex;
  gap: 8px;
  /* No rule above the buttons: the form separates its groups with headings and
     space rather than lines, and a single line here would be the only one left. */
  margin-top: 32px;
}

.lyfcalc-actions button {
  align-items: center;
  background: var(--primary, #233e78);
  border: 1px solid var(--primary, #233e78);
  border-radius: var(--radius, 4px);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  height: 44px;
  justify-content: center;
  padding: 0 24px;
}

/* :not() so this stops at the primary button. Without it the rule also caught
   Reset, which is the secondary below: the hover set a dark navy background but
   no colour, so the text kept the secondary's --ink-2 and the button hovered to
   dark grey on dark navy, measured at 1.25:1. The resting state is 10.23:1, so
   the button was legible until you pointed at it. */
.lyfcalc-actions button:not(.lyfcalc-button-secondary):hover {
  background: var(--primary-dark, #1b3060);
  border-color: var(--primary-dark, #1b3060);
}

.lyfcalc-actions .lyfcalc-button-secondary {
  background: var(--surface, #fff);
  border-color: var(--line-strong, #d2d6d6);
  color: var(--ink-2, #3c4243);
}

/* Reset carries .btn--ghost from the theme, so it hovers the way every other
   ghost button on the site does: the border darkens, nothing else moves. */
.lyfcalc-actions .lyfcalc-button-secondary:hover {
  background: var(--surface, #fff);
  border-color: var(--ink-4, #676f6f);
  color: var(--ink-2, #3c4243);
}

.lyfcalc-results {
  background: transparent;
  display: grid;
  gap: 24px;
  align-content: start;
}

.lyfcalc-results__summary {
  display: grid;
  gap: 4px;
}

.lyfcalc-results__details {
  display: grid;
  gap: 8px;
}

.lyfcalc-result {
  align-items: center;
  border-bottom: 0;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 0;
}

.lyfcalc-result:last-child {
  border-bottom: 0;
}

.lyfcalc-result__label {
  color: var(--ink-3, #5f6768);
  min-width: 0;
  overflow-wrap: anywhere;
}

.lyfcalc-result__value {
  color: var(--ink, #1f2223);
  font-variant-numeric: tabular-nums;
  max-width: 55%;
  overflow-wrap: anywhere;
  text-align: right;
}

.lyfcalc-result--primary {
  align-items: flex-start;
  border-bottom: 0;
  display: grid;
  gap: 4px;
  padding: 0;
}

.lyfcalc-result--primary .lyfcalc-result__label {
  color: var(--ink-3, #5f6768);
  font-size: var(--fs-sm, 13.33px);
}

.lyfcalc-result--primary .lyfcalc-result__value {
  color: var(--ink, #1f2223);
  font-size: var(--fs-h1, 30.41px);
  font-weight: 680;
  line-height: 1.15;
  max-width: 100%;
  text-align: left;
}

.lyfcalc-feedback,
.lyfcalc-error {
  color: #9f2a2a;
  margin-top: 12px;
}

.lyfcalc-feedback:not(:empty),
.lyfcalc-error {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e4e6e6);
  border-left: 2px solid #9f2a2a;
  border-radius: var(--radius, 4px);
  padding: 12px;
}

@media (max-width: 760px) {
  .lyfcalc-form {
    border-bottom: 1px solid var(--line, #e4e6e6);
  }
}

@media (max-width: 430px) {
  .lyfcalc-instance__header,
  .lyfcalc-form,
  .lyfcalc-results__summary,
  .lyfcalc-results__details {
    padding: 16px;
  }

  .lyfcalc-instance__body {
    grid-template-columns: 1fr;
  }

  .lyfcalc-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .lyfcalc-actions button {
    width: 100%;
  }

  .lyfcalc-result {
    align-items: flex-start;
    display: grid;
    gap: 4px;
  }

  .lyfcalc-result__value {
    max-width: 100%;
    text-align: left;
  }

  .lyfcalc-tooltip-content {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * Layout-schema rendering
 *
 * These carry the styles the mortgage results panel used to hold as inline
 * markup. Every engine that declares a `layout` group renders through them.
 * ---------------------------------------------------------------------- */

.lyfcalc-instance {
  --lyfcalc-series-1: var(--primary, #233e78);
  --lyfcalc-series-2: var(--accent-2, #5f77ad);
  --lyfcalc-series-3: var(--accent-3, #b9c5df);
  --lyfcalc-series-4: #8fa0c6;
  --lyfcalc-series-5: #dfe4ef;
}

.lyfcalc-form__title,
.lyfcalc-card__title {
  font-size: var(--fs-h5, 18.98px);
  font-weight: 650;
  line-height: 1.3;
  margin: 0 0 16px;
}

.lyfcalc-card__title {
  font-size: var(--fs-h6, 16.88px);
  margin: 0;
}

.lyfcalc-card__head {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.lyfcalc-input-row {
  min-width: 0;
}

/* The summary card stacks hero, bar, rows and footer; its children carry their
   own spacing, so it must not impose a grid gap of its own. */
.lyfcalc-results__summary {
  display: block;
}

.lyfcalc-results__label {
  margin-bottom: 4px;
}

.lyfcalc-results__figure {
  font-size: var(--fs-h5, 18.98px);
  font-weight: 650;
}

.lyfcalc-results__details .lyfcalc-card__title {
  margin-bottom: 8px;
}

.lyfcalc-field--range .range {
  margin-top: 8px;
}

.lyfcalc-field--select .select {
  width: 100%;
}

/* -------------------------------------------------------------------------
 * Chart bars and tooltips
 *
 * A chart draws one bar per period, so a 30 year mortgage draws 30 bars. Each
 * carries its own label; the chart element itself has role="img" and an
 * aria-label summary, since the bars hold no text of their own.
 * ---------------------------------------------------------------------- */

.chart {
  overflow: visible;
  position: relative;
}

.chart--dense {
  gap: 2px;
}

.lyfcalc-results__chart .chart i {
  position: relative;
  transition: background-color .12s ease;
}

.lyfcalc-results__chart .chart i:hover {
  background: var(--primary, #233e78);
}

.lyfcalc-results__chart .chart i[data-tip]::after {
  background: var(--ink, #1f2223);
  border-radius: var(--radius, 4px);
  bottom: calc(100% + 8px);
  color: var(--surface, #fff);
  content: attr(data-tip);
  font-size: var(--fs-sm, 13.33px);
  font-variant-numeric: tabular-nums;
  left: 50%;
  line-height: 1.35;
  opacity: 0;
  padding: 6px 9px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity .12s ease;
  white-space: nowrap;
  z-index: 6;
}

.lyfcalc-results__chart .chart i[data-tip]:hover::after {
  opacity: 1;
}

/* Keep the first and last tooltips inside the card. */
.lyfcalc-results__chart .chart i[data-tip]:first-child::after {
  left: 0;
  transform: none;
}

.lyfcalc-results__chart .chart i[data-tip]:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lyfcalc-results__chart .chart i,
  .lyfcalc-results__chart .chart i[data-tip]::after {
    transition: none;
  }
}

/* Coarse pointers get no hover, so show every label as a native tooltip target
   instead of a bar that appears inert. */
@media (hover: none) {
  .lyfcalc-results__chart .chart i[data-tip]::after {
    display: none;
  }
}

/* The line under the results naming a local tax this calculator does not cover.
   Deliberately quiet: it is a caveat, not a warning, and it should not compete
   with the figures above it. */
.lyfcalc-local-note {
  border-left: 2px solid var(--border, #e2e5ec);
  color: var(--muted, #5b6472);
  font-size: var(--fs-sm, 13.33px);
  line-height: 1.5;
  margin: 0;
  padding-left: 12px;
}

.lyfcalc-local-note[hidden] {
  display: none;
}

/* Link from the national calculator to a state's own page, revealed once the
   visitor picks a state that has one. */
.lyfcalc-state-link {
  margin: 0;
}

.lyfcalc-state-link[hidden] {
  display: none;
}

.lyfcalc-state-link a {
  align-items: center;
  color: var(--primary, #233e78);
  display: inline-flex;
  font-size: var(--fs-sm, 13.33px);
  font-weight: 600;
  gap: 6px;
  text-decoration: none;
}

.lyfcalc-state-link a::after {
  content: "\2192";
}

.lyfcalc-state-link a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Field heads, sections and donuts
 *
 * Help moved out from under each input and behind the info button beside its
 * label, so a fifteen-field form is scannable. Sections group what is left.
 * ------------------------------------------------------------------------ */

.lyfcalc-field .field__head {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 20px;
}

.lyfcalc-field .field__head .field__label {
  margin: 0;
}

/* A live value shown beside the label — the annual equivalent of a paycheck,
   say — sits at the far end of the row. */
.lyfcalc-field .field__inline-output {
  color: var(--ink, #1f2223);
  margin-left: auto;
}

/* The popover is anchored to a 16px button near the left edge of the field, so
   centring it on the button pushes it off the card. Pin it to the left instead
   and let it grow rightwards. */
.lyfcalc-field .field__head .lyfcalc-tooltip-content {
  left: -8px;
  transform: none;
}

/*
 * Rows used to be direct children of the .lyfcalc-inputs grid and took their
 * spacing from its gap. Now that sections wrap them, the gap falls between
 * sections instead, so the rows inside one need their own rhythm.
 */
.lyfcalc-section .lyfcalc-input-row + .lyfcalc-input-row {
  margin-top: 24px;
}

.lyfcalc-section__title {
  color: var(--ink);
  font-size: var(--fs-sm, 13.33px);
  font-weight: 650;
  letter-spacing: .04em;
  margin: 0 0 12px;
}

/* A collapsible section is a native <details>; style its marker as a chevron so
   it reads as a control without any script. */
.lyfcalc-section--collapsible > .lyfcalc-section__title {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  list-style: none;
  margin-bottom: 0;
}

.lyfcalc-section--collapsible > .lyfcalc-section__title::-webkit-details-marker {
  display: none;
}

.lyfcalc-section--collapsible > .lyfcalc-section__title::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 6px;
  transform: rotate(45deg);
  transition: transform .15s ease;
  width: 6px;
}

.lyfcalc-section--collapsible[open] > .lyfcalc-section__title::after {
  transform: rotate(-135deg);
}

.lyfcalc-section--collapsible[open] > .lyfcalc-section__title {
  margin-bottom: 12px;
}

.lyfcalc-section--collapsible > .lyfcalc-section__title:focus-visible {
  outline: 2px solid var(--primary, #233e78);
  outline-offset: 2px;
}

/* --- Donut ------------------------------------------------------------- */

.lyfcalc-donut {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 auto 24px;
  max-width: 200px;
  position: relative;
}

.lyfcalc-donut__svg {
  display: block;
  height: auto;
  transform: rotate(-90deg);
  width: 100%;
}

.lyfcalc-donut__track {
  fill: none;
  stroke: var(--line-soft, #eceeee);
  stroke-width: 5;
}

.lyfcalc-donut__slice {
  fill: none;
  stroke-width: 5;
  transition: stroke-dasharray .25s ease, stroke-dashoffset .25s ease,
              stroke-width .12s ease, opacity .12s ease;
}

/* Fade everything except the slice under the cursor, and thicken that one, so
   it is obvious which part of the paycheck the tooltip is describing. */
.lyfcalc-donut.is-hovering .lyfcalc-donut__slice {
  opacity: .3;
}

.lyfcalc-donut.is-hovering .lyfcalc-donut__slice:hover {
  opacity: 1;
  stroke-width: 6.4;
}

.lyfcalc-donut__tip {
  background: var(--ink, #1f2223);
  border-radius: var(--radius, 4px);
  color: var(--surface, #fff);
  font-size: var(--fs-sm, 13.33px);
  line-height: 1.4;
  opacity: 0;
  padding: 6px 9px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity .12s ease;
  white-space: nowrap;
  z-index: 4;
}

.lyfcalc-donut__tip.is-visible {
  opacity: 1;
}

/* The centre is text, so it must not inherit the rotation applied to the SVG. */
.lyfcalc-donut__center {
  left: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.lyfcalc-donut__figure {
  color: var(--ink, #1f2223);
  font-size: var(--fs-h4, 21.36px);
  font-weight: 660;
  letter-spacing: -.01em;
  line-height: 1.2;
}

@media (prefers-reduced-motion: reduce) {
  .lyfcalc-donut__slice {
    transition: none;
  }
}

/* A popover on the right-hand field of a two-column row would otherwise run off
   the edge of the card, so anchor that one to its right instead. .field-row only
   exists when a row holds more than one field, which makes :last-child there a
   reliable "this is the right column". */
.field-row > .lyfcalc-field:last-child .field__head .lyfcalc-tooltip-content {
  left: auto;
  right: -8px;
}

/* ==========================================================================
   Export: printing and PDF download
   ========================================================================== */

.lyfcalc-export {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The theme's .btn is already a centred inline-flex, so an icon needs only a
   gap. Everything else about the button is left to the theme, so these follow
   the site's buttons if those ever change. */
.lyfcalc-export__button {
  gap: 8px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Optical, not mathematical: both glyphs read a touch high against a cap
   height, and the printer's tray is heavier at the bottom than the top. */
.lyfcalc-export__icon {
  flex: 0 0 auto;
  transform: translateY(0.5px);
}

.lyfcalc-export__button:hover {
  background: var(--primary-tint, #eef1f8);
  border-color: var(--primary-tint-border, #d3dbec);
  color: var(--ink-on-tint, #22376b);
}

/* Only for a pointer. A keyboard user gets the focus ring, and adding the tint
   there as well makes it harder to tell focus from hover. */
.lyfcalc-export__button:focus-visible {
  outline: 2px solid var(--primary, #233e78);
  outline-offset: 2px;
}

/* Set while a file is being built. Without a visible change the button looks
   simply unresponsive, which invites a second click. */
.lyfcalc-export__button[disabled] {
  cursor: default;
  opacity: 0.55;
}

.lyfcalc-export__button[disabled]:hover {
  background: var(--surface, #fff);
  border-color: var(--line-strong, #d2d6d6);
  color: var(--ink-2, #3c4243);
}

.lyfcalc-export__status:empty {
  display: none;
}

/* Carried onto the page only when printing. Not display:none, because a
   screen reader should still be able to reach the disclaimer. */
.lyfcalc-print-only {
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   How a calculator prints
   ==========================================================================
   The visitor is printing an answer, not a tool, so the controls go and the
   figures stay. Inputs are kept but flattened, because a result without the
   assumptions that produced it is not worth keeping.
   ========================================================================== */

@media print {
  .lyfcalc-print-only {
    clip: auto;
    clip-path: none;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
    white-space: normal;
    margin-top: 16px;
  }

  /* Controls that cannot do anything on paper. */
  .lyfcalc-export,
  .lyfcalc-actions,
  .lyfcalc-feedback,
  .lyfcalc-info-toggle,
  .lyfcalc-tooltip-content,
  .lyfcalc-donut__tip,
  .lyfcalc-state-link {
    display: none !important;
  }

  /* Two columns rarely survive a page width; one always does. The form and the
     results sit in .lyfcalc-preferred-grid, so that is the one that has to
     collapse. Paired fields inside a row are short enough to stay side by side
     and save vertical space, so .field-row is deliberately left alone. */
  .lyfcalc-preferred-grid,
  .lyfcalc-instance__body {
    display: block !important;
  }

  .lyfcalc-preferred-grid > * + * {
    margin-top: 24px;
  }

  .lyfcalc-instance {
    border: 0;
    box-shadow: none;
  }

  /* A form field on paper is a label and a value, not a control.
     !important throughout because the on-screen field rules are more specific
     than these, and without it the boxes and their borders survive onto the
     page, which is what the first version did. */
  .lyfcalc-inputs input,
  .lyfcalc-inputs select,
  .lyfcalc-inputs textarea,
  .lyfcalc-field input,
  .lyfcalc-field select,
  .lyfcalc-field textarea {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    min-height: 0 !important;
    padding: 0 0 2px !important;
  }

  /* The up/down steppers are real buttons, not native spinners, so they need
     hiding by hand. Same for the affix chips and the choice control's chrome. */
  .lyfcalc-stepper,
  .lyfcalc-field__stepper,
  .lyfcalc-field button,
  .lyfcalc-choice-control button {
    display: none !important;
  }

  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }

  .lyfcalc-inputs details {
    display: block;
  }

  /* An open <details> prints its contents; a closed one hides the numbers the
     reader is trying to keep. */
  .lyfcalc-inputs details > summary {
    list-style: none;
  }

  .lyfcalc-inputs details:not([open]) > *:not(summary) {
    display: block !important;
  }

  .lyfcalc-results,
  .lyfcalc-inputs {
    display: block;
  }

  .lyfcalc-results > * {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 12px;
  }

  .card {
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }

  /* Browsers drop background colors when printing unless told otherwise, which
     would leave the donut and the bar charts as blank shapes. These are the
     only places the color carries meaning rather than decoration. */
  .lyfcalc-donut__slice,
  .lyfcalc-donut__track,
  .lyfcalc-results__bar i,
  .lyfcalc-results__chart .chart i,
  .lyfcalc-results__legend i {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Hover states have no meaning on paper and would fade the slices. */
  .lyfcalc-donut.is-hovering .lyfcalc-donut__slice {
    opacity: 1;
  }

  .lyfcalc-donut {
    max-width: 220px;
  }

  /* The chart tooltips are ::after content on every bar; on paper they would
     all render at once. */
  .lyfcalc-results__chart .chart i[data-tip]::after {
    display: none !important;
  }
}

/* Scale drawings. The SVG carries a viewBox and no fixed size, so it fills the
   card and keeps its proportions on a phone. Colors come from the page rather
   than the markup, so a diagram follows the theme instead of fighting it. */
.lyfcalc-results__diagram .lyfcalc-diagram {
	margin-top: 4px;
}

.lyfcalc-diagram svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	color: var(--ink-3, #5f6768);
}

.lyfcalc-diagram .diagram__profile {
	stroke: var(--primary, #233E78);
	stroke-width: 2.5;
	fill: none;
	stroke-linejoin: round;
}

.lyfcalc-diagram .diagram__fill {
	fill: var(--primary-tint, #eef1f8);
	stroke: none;
}

.lyfcalc-diagram .diagram__stringer {
	stroke: var(--primary, #233E78);
	stroke-width: 1.25;
	stroke-dasharray: 5 4;
	fill: none;
	opacity: .75;
}

.lyfcalc-diagram .diagram__rule {
	stroke: currentColor;
	stroke-width: 1;
	fill: none;
	opacity: .85;
}

.lyfcalc-diagram .diagram__ground {
	stroke: var(--line-strong, #d2d6d6);
	stroke-width: 2;
}

.lyfcalc-diagram .diagram__plate {
	fill: var(--surface, #fff);
	stroke: none;
	opacity: .94;
}

.lyfcalc-diagram .diagram__label {
	fill: currentColor;
	font-family: var(--mono, ui-monospace, monospace);
	/* The viewBox is 720 wide and the card renders it around 470, so anything
	   under about 15 here arrives on screen smaller than the body text. */
	font-size: 16px;
}

.lyfcalc-diagram .diagram__label--key {
	fill: var(--ink, #1f2223);
	font-weight: 600;
}