/* Preserved tool controls and report compatibility. Loaded only on individual tools. */
.check-item.is-next-check{outline:2px solid #7c9aab;outline-offset:2px;background:#f1f7fa}
/* These foundations also served the original calculator templates. Keep them
   scoped to main so the shared website navigation can use its own layout. */
:where(.is-tool main) {--shell:1240px;--ink:#17211c;--ink-soft:#536159;--green-950:#102b21;--green-900:#173f31;--green-800:#1f523e;--green-700:#2c684f;--leaf:#9ed388;--leaf-light:#d9efcd;--soft:#f3f6f1;--soft-2:#e9efe8;--line:#d5ded6;line-height:1.65}
:where(.is-tool main) .container,:where(.is-tool main) .shell {width:calc(100% - var(--gutter)*2);max-width:1920px;margin-inline:auto}
:where(.is-tool main) .shell--article {max-width:1920px}
:where(.is-tool main) h1,:where(.is-tool main) h2,:where(.is-tool main) h3,:where(.is-tool main) h4 {font-weight:680;letter-spacing:-.035em;line-height:1.06}
:where(.is-tool main) h1 {font-size:clamp(2rem,2.25vw,2.75rem);margin-bottom:24px}
:where(.is-tool main) h2 {font-size:clamp(1.5rem,1.75vw,2rem);margin-bottom:18px}
:where(.is-tool main) h3 {font-size:clamp(1.1rem,1.4vw,1.35rem);margin-bottom:12px}
:where(.is-tool main) h4 {font-size:1.1rem}
:where(.is-tool main) .lead {max-width:42rem;font-size:clamp(1rem,1.08vw,1.1rem);line-height:1.5}
:where(.is-tool main) .button-row {gap:12px;align-items:center}
:where(.is-tool main) .btn,:where(.is-tool main) .button {display:inline-flex;min-height:48px;padding:12px 20px;border:1px solid var(--green-900);border-radius:999px;align-items:center;justify-content:center;gap:10px;background:var(--green-900);color:var(--white);font-size:.92rem;font-weight:700;line-height:1.2;text-decoration:none}
:where(.is-tool main) .btn:hover,:where(.is-tool main) .button:hover {background:var(--green-800)}
:where(.is-tool main) .button--small {min-height:42px;padding:9px 17px;font-size:.84rem}
:where(.is-tool main) .button--outline,:where(.is-tool main) .btn--ghost,:where(.is-tool main) .btn:not(.btn--primary) {background:transparent;color:var(--green-900)}
:where(.is-tool main) .button--outline:hover,:where(.is-tool main) .btn:not(.btn--primary):hover {background:var(--soft-2);color:var(--green-950)}
:where(.is-tool main) .button--light {background:var(--white);color:var(--green-950);border-color:var(--white)}
:where(.is-tool main) .button--outline-light {background:transparent;color:var(--white);border-color:var(--white)}
.is-tool .calc-col,.is-tool .calc-panel,.is-tool .form-grid > * {min-width:0}
/* Calculation tables retain their columns and scroll inside their panel on a phone. */
.is-tool .calc-panel__body {overflow-x:auto}
@media(max-width:1024px){:where(.is-tool main) .container,:where(.is-tool main) .shell{width:calc(100% - 40px)}}
@media(max-width:520px){:where(.is-tool main) .container,:where(.is-tool main) .shell{width:calc(100% - 32px)}}
@media(max-width:390px){:where(.is-tool main) .container,:where(.is-tool main) .shell{width:calc(100% - 24px)}}
/* Tools */
.tool-status-bar {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.tool-status-bar .shell {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 18px;
}

.tool-status-bar .status-pill {
  margin: 0;
}

.tool-status-bar p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .88rem;
}

.tool-shell {
  max-width: 1040px;
}

.tool-shell--narrow {
  max-width: 840px;
}

.tool-intro {
  max-width: 820px;
  margin-bottom: 42px;
  font-size: 1.05rem;
}

.interactive-tool,
.data-tool,
.checklist-tool {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft);
}

.tool-step + .tool-step {
  margin-top: 42px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}

.tool-step fieldset,
.checklist-tool fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.tool-step legend,
.checklist-tool legend {
  margin-bottom: 22px;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 690;
}

.tool-step legend > span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  place-items: center;
  background: var(--green-900);
  color: var(--white);
  font-size: .75rem;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.choice-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice {
  position: relative;
  display: flex;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  cursor: pointer;
}

.choice:has(input:checked) {
  border-color: var(--green-700);
  box-shadow: inset 0 0 0 1px var(--green-700);
  background: #f2faef;
}

.choice input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--green-800);
  flex: 0 0 auto;
}

.choice span {
  display: grid;
  gap: 4px;
}

.choice strong {
  line-height: 1.35;
}

.choice small {
  color: var(--ink-soft);
  line-height: 1.4;
}

.interactive-tool > .button {
  margin-top: 36px;
}

.tool-result {
  margin-top: 28px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid #a6c59f;
  border-radius: var(--radius-lg);
  background: #edf7e9;
}

.tool-result h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.tool-result ul,
.tool-result ol {
  margin-bottom: 28px;
  padding-left: 1.25em;
}

.tool-result dl {
  display: grid;
  margin: 28px 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #bdd4b8;
  border-radius: 10px;
  background: #bdd4b8;
}

.tool-result dl div {
  padding: 16px;
  background: var(--white);
}

.tool-result dt {
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 680;
  text-transform: uppercase;
}

.tool-result dd {
  margin: 3px 0 0;
  font-weight: 680;
}

.data-tool__controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 16px;
}

.data-table-wrap {
  max-height: 660px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.data-table th,
.data-table td {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--green-900);
  color: var(--white);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.data-table tbody tr:nth-child(even) {
  background: #f8faf7;
}

.result-count {
  margin: 24px 0 12px;
  color: var(--ink-soft);
  font-size: .84rem;
}

.pagination-row {
  display: flex;
  min-height: 48px;
  margin-top: 18px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: .85rem;
  font-weight: 680;
}

.input-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.compact-tool {
  padding: 34px;
}

.checklist-progress {
  margin-bottom: 30px;
}

.checklist-progress > div:first-child {
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: .85rem;
}

.checklist-progress strong {
  color: var(--green-800);
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: #d8e0d8;
}

.progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green-700);
  transition: width .2s ease;
}

.checklist {
  display: grid;
  margin-bottom: 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.check-item {
  display: flex;
  min-height: 82px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.45;
}

.check-item:has(input:checked) {
  border-color: #9bc092;
  background: #edf7e9;
}

.check-item input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--green-700);
  flex: 0 0 auto;
}

.notice {
  padding: 16px 18px;
  border-left: 4px solid var(--green-700);
  background: var(--soft);
  color: var(--ink-soft);
  font-size: .9rem;
}

.empty-state {
  padding: 34px;
  border: 1px dashed #aab9ae;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-align: center;
}

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.form-field,
.field {
  display: grid;
  align-content: start;
  gap: 8px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label,
.field label {
  color: var(--ink);
  font-size: .86rem;
  font-weight: 690;
}

.form-field label > span,
.field label > span {
  color: var(--ink-soft);
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #aebbb1;
  border-radius: 9px;
  background: var(--white);
  font-size: 1rem;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #778a7c;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green-700);
  outline: 3px solid rgba(158, 211, 136, .42);
  outline-offset: 1px;
}

input[type="file"] {
  min-height: auto;
  padding: 11px;
}

.field-hint,
.hint,
.calc-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.45;
}

.field-error {
  margin: 0;
  color: var(--danger);
  font-size: .8rem;
  font-weight: 660;
}

.has-error input,
.has-error select,
.has-error textarea {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* Calculator compatibility */
.calc-hero {
  background: var(--soft);
}

.calc-hero .breadcrumbs {
  margin-bottom: 38px;
}

.section-head {
  max-width: 920px;
}

.section-head h1 {
  font-size: clamp(2rem, 2.2vw, 2.65rem);
}

.calc-actions {
  margin-top: 28px;
}

.alert {
  padding: 14px 16px;
  border-radius: 8px;
  font-size: .9rem;
}

.alert--success {
  border: 1px solid #a5c99c;
  background: #edf7e9;
}

.alert--error {
  border: 1px solid #e0a29c;
  background: var(--danger-soft);
}

.note-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.note-card--light {
  background: var(--soft);
}

.note-card__title {
  font-size: 1.25rem;
}

.note-card__text {
  margin-bottom: 0;
  color: var(--ink-soft);
}

/* Supporting notes below a tool. Left as running text these span the page as a
   narrow ribbon, and split into columns they read as newspaper copy, so each
   note is given its own card instead: the row fills, every line keeps a sane
   measure, and the block reads as reference material rather than body copy.
   The prose wrapper is display:contents so a paragraph written by an editor
   becomes a card in the same grid as the ones written into the page. */
.tool-notes {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.tool-notes__title {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-soft);
}

.tool-notes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr));
  gap: 14px;
}

/* The lead callout carries two paragraphs where the rest carry one, so it takes
   two columns and the row comes out even rather than one tall card beside
   several short ones. */
@media (min-width: 1180px) {
  .tool-notes__grid > .calc-callout { grid-column: span 2; }
  /* The closing note applies to everything above it, so it runs the full row. */
  .tool-notes__grid > aside.calc-callout { grid-column: 1 / -1; }
}

.tool-notes__grid > .prose { display: contents; }

.tool-notes__grid > :not(.prose),
.tool-notes__grid > .prose > * {
  margin: 0;
  padding: 15px 17px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.7;
}

.tool-notes__grid .calc-callout {
  border-left: 3px solid var(--green-700);
  background: #f4f8f1;
}

.tool-notes__grid .calc-callout p + p { margin-top: .9em; }

@media (max-width: 640px) {
  .tool-notes { margin-top: 26px; padding-top: 18px; }
  .tool-notes__grid > :not(.prose),
  .tool-notes__grid > .prose > * { padding: 13px 14px; }
}

.calc-callout {
  margin-top: 24px;
  padding: 18px;
  border-left: 4px solid var(--green-700);
  background: rgba(255, 255, 255, .78);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}


@media(max-width:768px){.choice-grid,.choice-grid--three,.data-tool__controls,.checklist,.form-grid{grid-template-columns:1fr}.form-field--full{grid-column:auto}.checklist-progress>div:first-child{align-items:flex-start;flex-direction:column;gap:3px}}
@media(max-width:520px){.tool-status-bar .shell{align-items:flex-start;flex-direction:column;padding-block:14px;gap:8px}.tool-result dl{grid-template-columns:1fr}.input-action{grid-template-columns:1fr}.interactive-tool,.data-tool,.checklist-tool,.compact-tool{padding:22px 16px}.data-table{min-width:580px}}

/* --------------------------------------------------------- tool page hero */

/* The lead and the summary cards used to stack. On a wide screen that left
   the right-hand half empty and pushed the tool itself below the fold, so
   they share the width instead and the page starts where the work is. */
.tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.92fr);
  gap: 24px 46px;
  align-items: start;
}

.tool-hero > .calc-launch,
.tool-hero > .wuv-intro { max-width: 66ch; }

.tool-hero > .pv-intro__grid,
.tool-hero > .calc-launch__grid,
.tool-hero > .wuv-intro__grid {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (max-width: 1080px) {
  .tool-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tool-hero > .pv-intro__grid,
  .tool-hero > .calc-launch__grid,
  .tool-hero > .wuv-intro__grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}

/* The site hero holds its headline to 22 characters, which is right for an
   editorial page. A tool page has a short factual headline and a workspace
   waiting underneath, so it can use the width and start sooner. */
.is-tool .page-hero h1 { max-width: 34ch; }
.is-tool .page-hero .lead,
.is-tool .page-hero .hero-intro { max-width: 82ch; }

/* ---------------------------------------------------- emailing a report */

/* Shared by every calculator, so it lives with the tool base rather than in
   any one tool's stylesheet. */
.brd { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.brd__backdrop { position: fixed; inset: 0; background: rgba(20, 30, 40, .55); }
.brd__panel {
  position: relative; width: min(460px, 94vw); background: #fff; border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 30, 45, .3); display: flex; flex-direction: column;
  max-height: 92vh; overflow: hidden;
}
.brd__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px 12px; border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.brd__head h2 { margin: 0; font-size: 17px; }
.brd__close {
  background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #5b6875;
}
.brd__body { padding: 16px; overflow-y: auto; }
.brd__lead { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.brd__lead--done { font-size: 15px; }
.brd__result {
  margin: 0 0 12px; padding: 9px 11px; border-radius: 6px; background: #f2f6f9;
  font-size: 13.5px; font-weight: 600; color: #1e3247;
}
.brd__field { display: block; }
.brd__field > span { display: block; font-size: 12px; color: #5b6875; margin-bottom: 4px; }
.brd__field input {
  width: 100%; padding: 9px 11px; border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 5px; font: inherit; font-size: 15px; background: #fff;
}
.brd__field input:focus-visible { outline: 2px solid #274b6d; outline-offset: -1px; }
.brd__note { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: #5b6875; }
.brd__note.is-error { color: #8c2320; font-weight: 600; }
.brd__actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid rgba(0, 0, 0, .1); background: #f7f9fb;
}
.brd__actions .btn { margin: 0; }