/* Answer pages, pre-launch layout pass (2026-11-12, Daniel: "on the desktop the organization of it is kinda bad... please review each page
   and reorganize"). Loaded after every other answer stylesheet. answer.js builds #main as two blocks: .ans-body (quick answer, sections,
   charts, drawings, quote, quick answers) and .ans-side (contents list, podcast card, Read next). Below 1024px they stack in that order,
   which is the order the page always had; from 1024px they sit side by side. No words change here. */

/* Title band. The back pill is fixed at 84px from the top of the window (about 40px tall), so the band's first line starts below it at
   every width; before, it sat on top of the "Answers · ..." line on phones and on every page without a clip. */
section.answer-band{padding-top:68px}
@media(min-width:821px){section.answer-band{padding:56px 0 48px}}
/* A page with no picked clip, photo or header drawing (21 of the 40 at launch). Below 1024px: the title alone on the light arch field,
   then the quick answer first in the reading column, as before. From 1024px answer.js moves the quick answer up into the band's right
   half: a white card on the DIO orange frame beside the question, like the card beside the Answers hub's title, so the band is
   balanced and the answer is read first. Nothing in the band is a stand-in for a picture. */
section.answer-band--text .answer-band-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:821px){
  section.answer-band.answer-band--text{padding:80px 0 56px}
  section.answer-band--text .answer-band-grid>div:first-child{max-height:none}
}
@media(min-width:1024px){
  section.answer-band--text .answer-band-grid:has(>.short){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
  section.answer-band--text h1{font-size:clamp(30px,2.7vw,40px);line-height:1.15}
  section.answer-band .answer-band-grid>.short{position:relative;margin:0;max-width:none;background:#fff;padding:24px 28px 22px 32px;box-shadow:0 22px 44px -26px rgba(16,32,42,.45)}
  section.answer-band .answer-band-grid>.short::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--orange,#ED873C)}
  section.answer-band .answer-band-grid>.short h2{color:#A8521A}
  section.answer-band .answer-band-grid>.short>p{font-size:17px;line-height:1.6;color:#33444F}
  section.answer-band .answer-band-grid>.short .facts{margin-bottom:0}
}

/* side-column copy of the contents list: only from 1024px */
.ans-toc{display:none}

@media(min-width:1024px){
  #main:has(>.ans-side){display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,25vw,340px);column-gap:clamp(48px,5vw,80px);align-items:stretch;padding-top:44px;--measure:720px}
  .ans-body{min-width:0}
  /* the reading column: text to about 80 characters, boxes and figures to the column's full width */
  #main .ans-body>.short{max-width:none}
  #main .ans-body>.ans-faq{max-width:none}
  .ans-body>.toc{display:none}
  section.part{scroll-margin-top:104px}
  .ans-body>#mid-cta{padding-inline:clamp(24px,3vw,40px);background:var(--mineral);border-top:0;gap:24px}

  .ans-side{display:flex;flex-direction:column;gap:44px;min-width:0}
  .ans-side-track{flex:1 0 auto}
  /* contents: always open, follows the reader, the section being read marked in DIO orange */
  .ans-toc{display:block;position:sticky;top:106px;max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain;background:var(--mineral);border-top:4px solid var(--orange);padding:20px 22px 16px}
  .ans-toc-h{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
  .ans-toc ol{list-style:none;margin:0;padding:0}
  .ans-toc li{margin:0}
  .ans-toc a{display:block;padding:8px 0 8px 14px;border-left:3px solid var(--line);font-size:15px;line-height:1.38;font-weight:500;color:#33444F;text-decoration:none;transition:border-color .2s,color .2s}
  .ans-toc a:hover{color:var(--ink);border-left-color:#9FB3C1}
  .ans-toc a[aria-current]{border-left-color:var(--orange);color:var(--ink);font-weight:600}
  .ans-toc a:focus-visible{outline-offset:-3px}

  /* podcast card and Read next close the side column, beside the end of the answer */
  .ans-side>.src,.ans-side>.rel{margin:0}
  .ans-side .src .bta-solo{max-width:none;margin-top:10px}
  .ans-side .rel h2{margin-bottom:8px}
  .ans-side .rel .dio-answer-row>summary{font-size:16px;line-height:1.38;min-height:52px;padding:13px 0;gap:14px}
  .ans-side .rel .dio-answer-row>div{font-size:15px;line-height:1.55;padding-bottom:16px}
  .ans-side .rel .dio-answer-row>div p{font-size:15px}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){.ans-toc a{transition:none}}