/* How we calculate. Hairlines between sections and rows, no boxes. Phone: one column. */
.method-top { padding: 12px 0 28px; }
.method-top + .method-section .method-grid::before { display: none; }
.method-section { padding: 32px 0; }
.method-grid { position: relative; }
.method-section .method-grid::before {
  content: "";
  position: absolute;
  top: -32px;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line);
}
.method-body { margin-top: 16px; max-width: 640px; }
.method-body > p + p { margin-top: 4px; }
.method-body > .muted { margin-top: 16px; }

.lines { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); }
.lines li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lines-first { margin-top: 0; }
/* A list or table that ends its section leaves its last line to the next section's rule, so no two rules sit 32px apart. */
.method-body > .lines:last-child li:last-child,
.method-body > .assumptions:last-child tr:last-child > * { border-bottom: 0; }

.example, .assumptions { width: 100%; margin-top: 20px; border-collapse: collapse; }
.example th, .example td,
.assumptions th, .assumptions td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.example thead th { padding-top: 0; font-size: 15px; font-weight: 600; text-align: right; vertical-align: bottom; }
.example thead td { padding-top: 0; }
/* 44px tap area from the link's own box; the margin gives the padding back so the header row stays tight. */
.example thead th { text-wrap: balance; }
.example thead a { display: inline-block; padding: 11px 0; margin: -11px 0; line-height: 22px; }
.example tbody th { padding-right: 12px; }
.example tbody td {
  padding-left: 12px;
  text-align: right;
  white-space: normal;
  font-variant-numeric: tabular-nums;
}
.example thead th { padding-left: 12px; }
.example .how { display: block; color: var(--muted); font-size: 14px; line-height: 1.3; }
.example [data-row="yearlyCost"] td,
.example [data-row="payback"] td { font-weight: 600; }

.assumptions { border-top: 1px solid var(--line); }
.assumptions th { width: 44%; padding-right: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 44px tap area from the link's own box; the margin gives the padding back so the row stays tight. */
.assumptions a { display: inline-block; padding: 11px 0; margin: -11px 0; white-space: nowrap; }

/* A list of links, not a sentence: each row is a 44px tap. That makes the list 6 x 19px taller than a text list; the underline stays.
   No bullets and no indent: the links start on the text's left edge. */
.method-links { list-style: none; margin: 0; padding: 0; }
.method-links a { display: flex; align-items: center; min-height: 44px; }
/* A source a tap opens: one 44px row each. */
.method-sources { list-style: none; margin: 12px 0 0; padding: 0; }
.method-sources a { display: flex; align-items: center; min-height: 44px; }

/* Card #128: a category's section. Small headings over its four parts; a row with no link keeps the 44px rhythm. */
.method-sub { margin: 24px 0 0; font-size: 17px; font-weight: 600; }
.method-sub + p, .method-sub + .lines, .method-sub + .method-sources, .method-sub + .method-links { margin-top: 8px; }
.method-body > [data-asks] + [data-method-formula] { margin-top: 12px; }
.method-rows a { padding: 6px 0; }
.method-rows li > span { display: flex; align-items: center; min-height: 44px; padding: 10px 0; color: var(--muted); }
.method-sources + .method-links { margin-top: 0; }
.method-body > .method-sub + .lines { border-top: 1px solid var(--line); }

.method-next, .method-go { margin-top: 24px; }  /* .method-go: a category section's way to its calculator, card #128. */
.method-next a, .method-go a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }

/* The two number columns don't wrap, so the narrowest phones get smaller type and gaps. */
@media (max-width: 374px) {
  .example { font-size: 15px; }
  .example thead th { font-size: 14px; }
  .example tbody th { padding-right: 4px; }
  .example tbody td, .example thead th { padding-left: 8px; }
  .example .how { font-size: 13px; }
}

@media (min-width: 768px) {
  .method-top { padding: 44px 0 56px; }
  .method-section { padding: 48px 0; }
  .method-section .method-grid::before { top: -48px; }
  .method-grid { display: grid; grid-template-columns: 260px minmax(0, 640px); column-gap: 56px; }
  .method-grid h2 { font-size: 24px; }
  .method-body { margin-top: 0; }
  /* Beside the heading, a list that opens its section sits right under the section rule: that rule is its top line. */
  .method-body > .lines-first:first-child { border-top: 0; }
  .assumptions th { width: 200px; }
}