/* The worksheets use the full workspace. In the guide below each worksheet,
   explanatory text, worked figures and their interpretation share one axis. */
@media screen {
  #main :is(.guide-layout, .auto-guide, .life-guide, .term-guide, .whole-guide, .plan-guide) {
    width: min(100%, 65ch);
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1rem, .98rem + .14vw, 1.075rem);
  }

  #main :is(.guide-layout, .auto-guide, .life-guide, .term-guide, .whole-guide, .plan-guide),
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) > :is(header, section, footer),
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide)
        :is(.guide-section-intro, .case-split, .case-comparison, .auto-price-pair,
            .auto-buying-notes, .auto-example, .whole-documents, .term-data-list,
            .home-case-body, .home-method-grid, .home-source-pair, .home-review-pair,
            .home-price-readings, .home-question-groups, .illustration-layout) {
    display: block;
  }

  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) :is(p, li, dd) {
    max-width: 100%;
    line-height: 1.65;
    text-align: start;
    hyphens: manual;
  }
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) p {
    font-size: 1em;
    margin-block: .75em;
  }
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) :is(h2, h3) {
    max-width: none;
    text-align: start;
    text-wrap: pretty;
    margin-block: 0 .5em;
  }
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) h2 {
    line-height: 1.23;
  }
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) table {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }

  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) > section,
  #main :is(.home-price-readings, .home-review-pair, .home-inventory-pair, .property-notes,
            .mortgage-notes, .fha-pair) > section {
    margin-block: 0;
    padding-block: clamp(1.4rem, 3vw, 2.15rem);
    border-block-start: 1px solid var(--rule);
  }
  #main :is(.reading-column, .life-guide, .term-guide, .whole-guide, .plan-guide) :is(.case-note, .case-evidence, .auto-price-example, .guide-visual) {
    margin-block: 1.15rem;
  }
  #main .reading-column :is(.home-case-body .equation, .deductible-diagram, .house-figure) {
    margin-block: 1rem;
  }
  #main .reading-column .home-case-body { container-type: normal; }
  #main :is(.case-comparison, .case-split) > :last-child > :last-child { margin-bottom: 0; }
  #main :is(.auto-buying-notes, .home-source-pair, .whole-documents, .home-question-groups) > :not(:first-child) {
    margin-top: 1.4rem;
  }
  #main .term-data-list li { display: block; }
  #main .term-data-list li + li { border-inline-start: 0; border-top: 1px solid var(--rule); }
  #main .guide-layout > .reading-column { width: 100%; max-width: none; }
  #main .guide-nav { position: static; margin-bottom: 1.5rem; }
  #main .guide-nav .link-list { display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
}

@media screen {
  #main .guide-spread {
    width: 100%;
    max-width: none;
    margin-block: clamp(2.25rem, 5vw, 4rem);
    font-size: clamp(1rem, .95rem + .3vw, 1.16rem);
  }
  #main .guide-spread :is(.reading-column, .auto-guide, .life-guide, .term-guide, .whole-guide, .plan-guide) {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: inherit;
  }
  #main .calc-guide-index {
    margin: 0 0 1.35rem;
    padding: .8rem 0;
    border: 0;
    border-block: 1px solid var(--rule);
    color: var(--ink);
  }
  #main .calc-guide-index strong {
    display: block;
    margin: 0 0 .35rem;
    font-size: 1rem;
  }
  #main .calc-guide-index .link-list {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1.1rem;
  }
  #main .calc-guide-index a {
    display: block;
    padding: .36rem 0;
    color: var(--blue);
    font-size: .94rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: var(--blue-mid);
    text-underline-offset: .16em;
  }
  #main .calc-guide-index a:hover { text-decoration-color: currentColor; }
  #main .cost-guide-body { min-width: 0; }
  #main .cost-guide-body .cost-sources { display: block; padding-block: 1.5rem; border-top: 1px solid var(--rule); }
}

/* The section index uses the right side of the worksheet's desktop shell.
   Below it, each heading, paragraph and worked example stays in reading order. */
@media screen and (min-width: 56rem) {
  #main .guide-spread {
    display: grid;
    grid-template-columns: minmax(0, 2.55fr) minmax(12.75rem, 1fr);
    grid-template-areas: "body index";
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  #main .guide-spread > :not(.calc-guide-index) { grid-area: body; min-width: 0; }
  #main .guide-spread > .calc-guide-index {
    grid-area: index;
    align-self: start;
    margin: 0;
    padding: 1.1rem clamp(1rem, 2vw, 1.6rem);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--blue);
    border-radius: var(--panel-radius);
    background: var(--surface);
  }
  #main .calc-guide-index .link-list { display: block; }
  #main .calc-guide-index a { padding: .52rem 0; }
  #main .calc-guide-index a + a { border-top: 1px solid var(--rule); }
}
@media screen and (min-width: 56rem) and (min-height: 36rem) {
  #main .guide-spread > .calc-guide-index {
    position: sticky;
    top: 1.25rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
  }
}
@media print {
  .calc-guide-index { display: none; }
}

/* Give each worksheet panel a usable width for controls and numeric tables. */
@media screen and (min-width: 45rem) and (max-width: 63.99rem) {
  #main :is(.worksheet-layout, .au-layout, .lf-layout, .tm-layout, .plan-layout) {
    grid-template-columns: minmax(0, 1fr);
  }
}