/* Serve IQ method page. Loaded after css/site.css and uses its tokens (--ink, --muted, --rule, --blue).
   The navy header band comes from site.css (.head); below it one column, with each formula folded in a
   light box. KaTeX brings its own stylesheet. */

/* the column starts at the same left edge as the top bar's "Serve IQ" (.wrap) and is 720px wide */
.method { padding-top: 32px; padding-bottom: 56px; }
.method > * { max-width: 720px; }
.m-lede { margin-top: 10px; font-size: 18px; }
.method section { margin-top: 40px; }
.method section + section { border-top: 1px solid var(--rule); padding-top: 32px; }
.method h2 { font-size: 24px; line-height: 1.25; }
.method h3 { font-size: 18px; line-height: 1.3; margin-top: 28px; }
.method p, .method li { font-size: 16px; line-height: 1.6; }
.method h2 + p, .method h2 + ol, .method h2 + ul, .method h3 + p, .method h3 + .fx { margin-top: 10px; }
.method p + p { margin-top: 12px; }
.method [data-h], .method [data-b], .tnum { font-variant-numeric: tabular-nums; }
.m-note { margin-top: 14px; color: var(--muted); }
.method .m-note { font-size: 15px; }
.m-muted { color: var(--muted); }

.m-steps, .m-list { margin: 10px 0 0; padding-left: 1.4em; }
.m-steps li + li, .m-list li + li { margin-top: 4px; }

.m-group .m-range { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 6px; }

/* formulas: plain blocks with a numbered heading, open by default; the heading folds one away */
.fcard { margin-top: 22px; }
.fcard summary { cursor: pointer; font-weight: 700; font-size: 16px; line-height: 1.4; width: max-content; max-width: 100%; }
.fcard summary:hover { color: var(--blue); }
.fnum { display: inline-block; min-width: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fcard > p { margin-top: 8px; }
.fcode { font-size: 14px; color: var(--muted); }
.fcode code, .method p code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }

.fx { margin: 10px 0 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.fx .katex-display { margin: 0; text-align: left; }
.fx .katex-display > .katex { text-align: left; }
.fx.tex-raw code { display: block; white-space: pre-wrap; word-break: break-word; font-size: 14px; color: var(--muted); }
.fx.is-scrollable:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* photo credits: one plain table */
.m-credits { margin-top: 14px; }
.credit-scroll { overflow-x: auto; }
.credit-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.credit-table th, .credit-table td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.credit-table thead th { font-weight: 600; color: var(--muted); }
.credit-table tbody th { font-weight: 600; white-space: nowrap; }

@media (max-width: 600px) {
  .method { padding-top: 20px; padding-bottom: 40px; }
  .m-lede { font-size: 16px; }
  .method section { margin-top: 32px; }
  .method section + section { padding-top: 26px; }
  .method h2 { font-size: 21px; }
  .method h3 { font-size: 17px; }
  .method p, .method li { font-size: 15.5px; }
  .credit-table { font-size: 13px; }
  .credit-table tbody th { white-space: normal; }
  .credit-table th, .credit-table td { padding-right: 8px; }
}
.credit-table td:nth-child(3), .credit-table td:nth-child(4) { white-space: nowrap; }

/* v5: header band (css/site.css .head) and folded blocks */
.m-head h1 { font-size: clamp(32px, 4.4vw, 54px); }
.method { padding-top: 28px; }
.method h1, .method h2, .method h3 { font-stretch: 90%; }
.method h2 { font-weight: 850; }
.fcard { margin-top: 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 16px; }
.fcard[open] { padding-bottom: 16px; }
.fcard summary { width: auto; }
.fnum { color: var(--blue); font-weight: 800; }
.m-fold { margin-top: 12px; }
.m-fold summary { cursor: pointer; font-weight: 700; color: var(--blue); }