/* Keep tables and their interpretations together without making paragraphs wider. */
.case-note {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--blue-mid);
  border-radius: var(--panel-radius);
  background: var(--blue-soft);
}
.term-anniversaries { margin: .6rem 0 0; container: milestones / inline-size; }
.term-anniversaries > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, .4fr) minmax(0, 1fr);
  gap: .5rem .85rem;
  padding-block: .55rem;
  border-block-start: 1px solid var(--blue-mid);
}
.term-anniversaries dt { font-weight: 650; color: var(--ink); }
.term-anniversaries dd { margin: 0; color: var(--secondary); }
@container milestones (max-width: 13rem) {
  .term-anniversaries > div { grid-template-columns: minmax(0,1fr); gap: .15rem; }
}
.term-short-case { margin-top: 1.5rem; padding-block-start: 1.3rem; border-top: 1px solid var(--rule); }
.term-case + .term-short-case > :first-child { padding-top: .2rem; }
.term-case .case-note > :last-child, .term-short-case p:last-child { margin-bottom: 0; }
.term-pension > div { border-color: var(--rule); }
.term-case .term-example-table { table-layout: fixed; }
.term-case .term-example-table tr > :first-child { width: 46%; }
.term-map, .whole-slip { container: policy-example / inline-size; }
@container policy-example (max-width: 12rem) {
  .term-map dl > div, .whole-slip dl { grid-template-columns: minmax(0,1fr); }
  .whole-slip dl div + div { border-left: 0; border-top: 1px dashed var(--blue-mid); padding-left: 4px; }
}
.property-notes > section, .mortgage-notes > section, .editorial-followup > section {
  margin-block: 1.6rem;
  padding-top: .8rem;
  border-top: 1px solid var(--rule);
}

.guide-section-intro { margin-bottom: 1.25rem; }
.guide-section-intro > p { max-width: var(--reading-measure); }
.method-ledger { margin: 0; }
.method-ledger > div { border-top: 1px solid var(--rule); padding-block: 1rem; }
.method-ledger dt { margin-bottom: .35rem; font-weight: 650; color: var(--ink); }
.method-ledger dd { max-width: var(--reading-measure); margin: 0; line-height: var(--reading-leading); color: var(--secondary); }
.auto-price-pair, .auto-buying-notes { display: grid; gap: 1.25rem; }
.auto-price-example { padding: clamp(1rem,2vw,1.5rem); background: var(--blue-soft); border-radius: var(--panel-radius); }
.auto-buying-notes { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.auto-guide :is(.auto-price-pair,.auto-buying-notes) h3 { margin: 0 0 .65rem; }
.auto-guide :is(.auto-price-pair,.auto-buying-notes) > div > p:last-child { margin-bottom: 0; }
/* Prose and evidence have different useful widths. The table or timeline
   still uses the full section, regardless of how its introduction wraps. */
.auto-guide > header > p, .auto-example > p, .life-guide-opening > p,
:is(.auto-guide, .term-guide, .whole-guide, .life-guide, .plan-guide) > section > p,
.guide-section-intro > p { max-width: var(--reading-measure); line-height: var(--reading-leading); }

@media screen and (min-width: 960px) {
  .auto-price-pair, .auto-buying-notes {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(1.5rem,3vw,2.5rem);
    align-items: start;
  }
  :is(.life-guide,.whole-guide,.auto-guide) .guide-section-intro {
    display: grid;
    grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
    align-items: start;
    column-gap: clamp(1.5rem,3vw,2.5rem);
  }
  :is(.life-guide,.whole-guide,.auto-guide) .guide-section-intro > :is(h2,p) { margin-block: 0; }
  .case-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
  }
  .case-split > *, .case-comparison > * { min-width: 0; }
  .case-comparison {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-areas: "prompt evidence" "meaning evidence";
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  .case-prompt { grid-area: prompt; }
  .case-evidence { grid-area: evidence; }
  .case-meaning { grid-area: meaning; }
  .case-prompt > p:first-child, .case-evidence > table:first-child,
  .case-split > div > p:first-child { margin-top: 0; }
  .case-comparison table { width: 100%; }

  /* Guides can use the working width when examples genuinely use both sides. */
  .term-guide, .whole-guide, .life-guide, .auto-guide, .plan-guide { max-width: 68rem; }
  .term-guide :is(#term-example, #term-quote-example) > h2,
  .whole-guide #whole-example > h2, .life-guide :is(#life-example, #life-care) > h2,
  .plan-guide section:has(.case-comparison) > h2 { max-width: 56ch; }
  .term-case { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .term-short-case { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .term-short-case .term-pension { margin-top: 0; }
  .term-quote-example .term-prices { max-width: 54rem; }
  .term-guide-header, .whole-guide-opening, .life-guide-opening,
  #term-method, #term-sources, .term-questions, .life-questions, #whole-faq {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
  }
  :is(.term-guide-header, .whole-guide-opening, .life-guide-opening,
      #term-method, #term-sources, .term-questions, .life-questions, #whole-faq) > :not(h2) {
    grid-column: 2;
  }
  :is(.term-guide-header, .whole-guide-opening, .life-guide-opening, #term-method, #term-sources) > h2 + p {
    margin-top: 0;
  }
  .term-quote-example { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 2.5rem; align-items: start; }
  .term-quote-example > h2 { grid-column: 1/-1; }
  .term-quote-example > p { grid-column: 1; }
  .term-quote-example > .term-prices { grid-column: 2; grid-row: 2; margin-top: 0; }
  .term-quote-example > .term-prices + p { grid-column: 2; grid-row: 3 / span 2; margin-top: 0; }
  .evidence-pair { grid-template-columns: minmax(0, .79fr) minmax(0, 1.21fr); align-items: start; }
  .evidence-pair .guide-visual { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .evidence-pair table { margin-top: 0; width: 100%; }
  .auto-limit-cases { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .auto-limit-cases .auto-example { margin: 0; }
  .auto-guide .auto-loss-table th, .auto-guide .auto-loss-table td { text-align: left; }
  .auto-guide > #auto-examples > .case-split { margin-top: 1rem; }

  .property-notes, .mortgage-notes { margin-top: 2.4rem; }
  .property-notes > section, .mortgage-notes > section, .editorial-followup > section {
    margin: 0;
    padding-top: 1rem;
  }
  .property-notes h2, .mortgage-notes h2, .editorial-followup h2 { margin-top: 0; }
  .home-inventory-pair { gap: 1.5rem; }
  .reading-column .home-inventory-pair > section { padding-top: 1.25rem; }

  /* The cost guide is a set of independent questions, unlike the consecutive
     phases in the disability case or the tables in the property guides. */
  .cost-guide { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.65rem 2.25rem; }
  .cost-guide > section, .cost-guide > section + section {
    margin: 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--rule);
  }
  .cost-guide > section > h2 { margin-top: 0; }

  .privacy-page { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 2.5rem; }
  .privacy-page > header, .privacy-page > nav, .privacy-page > #worksheet-inputs { grid-column: 1 / -1; }
  .privacy-page > :is(header, nav, section) { margin-block: 0; }
  .privacy-page > section + section { padding-top: .5rem; }
  .about-end { margin-top: 2.5rem; }
  .editorial-followup { align-items: start; margin-block: 2rem; }
  .contact-page .contact-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 2rem;
    align-content: start;
  }
  .contact-page .contact-example h2 { grid-column: 1 / -1; }
  .contact-page .contact-example blockquote { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
  .contact-page .contact-example p { margin: 0 0 .7rem; }
}
/* On a tablet these diagrams have room for their labels beside the drawing,
   even though the page intro has already collapsed to a single column. */
@media screen and (min-width: 40rem) and (max-width: 50rem) {
  .auto-intro .limit-plate {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    gap: .5rem 1.5rem;
    align-items: start;
  }
  .auto-intro .limit-plate dl {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block: 0;
  }
  .auto-intro .limit-plate p { grid-column: 1; }
  .whole-intro .whole-slip { max-width: none; }
}
@media screen and (min-width: 40rem) and (max-width: 47.5rem) {
  .life-intro .life-horizons {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    gap: .5rem 1.5rem;
    align-items: start;
  }
  .life-horizons dl { grid-column: 2; grid-row: 1 / span 2; margin-block: 0; }
  .life-horizons p { grid-column: 1; }
}
@media screen and (min-width: 40rem) and (max-width: 51.875rem) {
  .term-intro .term-map {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .65rem 1.25rem;
    align-items: center;
  }
  .term-map figcaption, .term-map p { grid-column: 1 / -1; }
  .term-map svg, .term-map dl, .term-map p { margin-block: 0; }
}
@media screen and (min-width: 40rem) and (max-width: 48.75rem) {
  .plan-intro :is(.property-figure, .mi-ticket) {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: .4rem 1.5rem;
  }
  .plan-intro :is(.property-figure, .mi-ticket) svg {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block: 0;
  }
  .plan-intro :is(.property-figure, .mi-ticket) p { grid-column: 1; margin: 0; }
}

/* Let the existing case-study pairs work between the tablet and desktop
   breakpoints. Tables retain a full column and the source order on phones. */
@media screen and (min-width: 52rem) and (max-width: 959px) {
  :is(.auto-guide, .life-guide, .whole-guide, .term-guide, .plan-guide) .case-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
    align-items: start;
  }
  :is(.life-guide, .plan-guide) .case-comparison {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-areas: "prompt evidence" "meaning evidence";
    grid-template-rows: auto 1fr;
    column-gap: 1.3rem;
    align-items: start;
  }
  :is(.life-guide, .plan-guide) .case-prompt { grid-area: prompt; }
  :is(.life-guide, .plan-guide) .case-evidence { grid-area: evidence; }
  :is(.life-guide, .plan-guide) .case-meaning { grid-area: meaning; }
  :is(.life-guide, .whole-guide) .evidence-pair .guide-visual { grid-template-columns: minmax(0, 1fr); margin: 0; }
  :is(.life-guide, .plan-guide) .case-evidence > table { width: 100%; margin-block-start: 0; }
  .auto-limit-cases .auto-example, .plan-guide .property-notes > section,
  .plan-guide .mortgage-notes > section { margin-block: 0; }
  .cost-guide { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
  .cost-guide > section { margin: 0; border-block-start: 1px solid var(--rule); padding-top: 1rem; }
}

/* The full-width auto table stays intact. Its introduction occupies the
   space beside the cells, not a blank band below the table heading. */
@media screen and (min-width: 64rem) {
  #auto-examples > .auto-example {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    grid-template-areas: "title title" "intro table" "finding table";
    gap: .35rem 1.6rem;
    align-items: start;
  }
  #auto-examples > .auto-example h3 { grid-area: title; }
  #auto-examples > .auto-example p:first-of-type { grid-area: intro; }
  #auto-examples > .auto-example p:last-of-type { grid-area: finding; }
  #auto-examples > .auto-example table { grid-area: table; margin-top: 0; }
}
@media screen and (min-width: 52rem) {
  #auto-method, #life-method, #auto-total-loss-example {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: .45rem clamp(1.35rem, 3vw, 2.5rem);
    align-items: start;
  }
  :is(#auto-method, #life-method, #auto-total-loss-example) > h2 { grid-column: 1 / -1; }
  :is(#auto-method, #life-method) > ol { grid-column: 1; grid-row: 2 / span 3; margin-top: 0; }
  :is(#auto-method, #life-method) > p { grid-column: 2; margin-top: 0; }
  #auto-total-loss-example > p { grid-column: 1; margin-top: 0; }
  #auto-total-loss-example > .guide-visual {
    grid-column: 2; grid-row: 2 / span 3;
    grid-template-columns: minmax(0,1fr);
    margin: 0;
  }
  #auto-total-loss-example > p:last-child { grid-column: 1 / -1; max-width: var(--reading-measure); }

  :is(#auto-sources, #whole-sources, #cost-sources) {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    column-gap: clamp(1.35rem, 3vw, 2.5rem);
    align-items: start;
  }
  :is(#auto-sources, #whole-sources, #cost-sources) > :is(h2,p) { grid-column: 1; margin-top: 0; }
  :is(#auto-sources, #whole-sources, #cost-sources) > ul { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .life-provenance, .mi-guide #mortgage-sources {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
    column-gap: clamp(1.35rem,3vw,2.5rem);
    align-items: start;
  }
  :is(.life-provenance, .mi-guide #mortgage-sources) > p { grid-column: 2; margin-top: 0; }

  :is(#whole-method, #mortgage-method, #disability-method, .renters-guide > section:last-child) {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .4rem clamp(1.35rem,3vw,2.5rem);
    align-items: start;
  }
  :is(#whole-method, #mortgage-method, #disability-method, .renters-guide > section:last-child) > h2 { grid-column: 1 / -1; }
  :is(#whole-method, #mortgage-method, #disability-method, .renters-guide > section:last-child) > p { margin-block-start: 0; }
  #whole-method > p:last-child { grid-column: 1 / -1; }
  .plan-guide:has(> #disability-example) {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    column-gap: clamp(1.35rem,3vw,2.5rem);
  }
  .plan-guide:has(> #disability-example) > :is(#disability-example, #disability-method) { grid-column: 1/-1; }
  .plan-guide:has(> #disability-example) > section { margin-block: 1.3rem; }

  :is(.life-questions, .whole-questions, .term-questions, .mi-guide) details p {
    max-width: var(--reading-measure);
    margin: 0 0 1rem;
    line-height: var(--reading-leading);
  }

  #whole-readout:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    gap: .5rem clamp(1.15rem,2.5vw,2rem);
    align-items: start;
  }
  #whole-readout > :is(table, .wh-notice) { grid-column: 1/-1; }
  #whole-readout > .wh-observed:only-of-type { grid-column: 1/-1; }
  #whole-readout > .wh-benefit { grid-column: 2; }
  #whole-readout > button { justify-self: start; }
  .condo-plan #condo-form .condo-boundary {
    display: grid;
    grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr);
    gap: .75rem clamp(1.15rem,2.5vw,2rem);
    align-items: start;
  }
  .condo-boundary > .plan-field { grid-column: 1; }
  .condo-plan .condo-boundary .plan-grid { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .condo-plan .property-optional[open] {
    display: grid;
    grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr);
    column-gap: clamp(1.15rem,2.5vw,2rem);
    align-items: center;
  }
  #condo-documents > p, #condo-results > [data-plan-output] > p { max-width: none; }
}
@media screen and (min-width: 68rem) {
  #whole-method { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #whole-method > p:last-child { grid-column: auto; }
}

@media screen and (min-width: 52rem) and (max-width: 63.9375rem) {
  #auto-total-loss-example > .guide-visual { grid-row: 2 / span 2; }
  #auto-total-loss-example > p:nth-of-type(3) { grid-column: 1 / -1; max-width: var(--reading-measure); }
}