/* Methods page (Claude). Uses the site tokens from styles.css. */
.methods { max-width: 760px; margin: 0 auto; padding: 40px 0 96px; }
.methods .eyebrow { margin: 0 0 10px; color: var(--brand); font: 700 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.methods h1 { margin: 0 0 16px; font: 400 clamp(38px, 6vw, 60px)/1.02 var(--serif); letter-spacing: -.02em; }
.methods .lede { margin: 0 0 28px; font: 400 21px/1.5 var(--serif); }
.methods h2 { margin: 52px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); font: 400 30px/1.15 var(--serif); }
.methods h3 { margin: 28px 0 6px; font: 700 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.methods p, .methods li { font: 400 17px/1.62 var(--serif); }
.methods ul { padding-left: 1.2em; }
.methods li + li { margin-top: 6px; }
.methods a { color: var(--brand); }
.methods code { font-size: .88em; }
.methods .toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 12px 0; border-block: 1px solid var(--line); font: 600 13px var(--sans); }
.methods .toc a { display: inline-flex; min-height: 24px; align-items: center; text-decoration: none; }
.methods .toc a:hover { text-decoration: underline; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 22px 0; border-top: 3px solid var(--brand); background: var(--paper-deep); }
.stat-row > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--line); }
.stat-row > div:last-child { border-right: 0; }
.stat-row strong { font: 400 32px/1 var(--serif); }
.stat-row span { color: var(--muted); font: 700 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.stat-row strong .stat-value { color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }
.methods .note { color: var(--muted); font: 400 14px/1.5 var(--sans); }
.methods .callout { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--brand); background: var(--paper-deep); }
.methods .callout p { margin: 0; }
.seg-bars { display: grid; gap: 8px; margin: 18px 0; }
.seg-bars div { display: grid; grid-template-columns: 170px 1fr 52px; align-items: center; gap: 10px; font: 600 13px var(--sans); }
.seg-bars i { display: block; height: 12px; background: var(--brand); min-width: 2px; }
.seg-bars b { font-weight: 700; text-align: right; }
@media (max-width: 600px) {
  .methods { padding: 24px 16px 72px; }
  .methods .lede { font-size: 19px; }
  .seg-bars div { grid-template-columns: 110px 1fr 44px; font-size: 12px; }
}
.methods .toc + h2 { margin-top: 28px; padding-top: 0; border-top: 0; }

/* Citations (Claude, T-083). Chicago numbered notes, generated by scripts/build-methods-notes.py.
   Gutter mode (main >= 888px wide, about 945px of viewport): prose 660-760px, a 28px gap, and a 200-240px
   citation gutter. Notes float into the gutter from the line their number sits on; `clear: right` stacks them
   with no overlap and no JavaScript measurement (the Tufte sidenote technique). The prose stays centred
   whenever the gutter fits, and slides left only as far as it must.
   Narrow mode: no gutter; a number opens its full note inline below the line. */
body > main { container-type: inline-size; }
.methods { position: relative; }

/* The number in the text: red, lining figures, a real box (not zero-height), and a 24px+ hit area. */
.methods .fn-mark {
  appearance: none;
  position: relative;
  margin: 0 0 0 .04em;
  padding: 0 .12em;
  border: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font: 700 .68em/1 var(--sans);
  font-variant-numeric: lining-nums;
  vertical-align: super;
  scroll-margin-top: 80px;
}
.methods .fn-mark::before { content: ""; position: absolute; inset: -8px -7px; }
.methods .fn-mark:hover { color: var(--ink); }
.methods .fn-mark:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
.methods .fn-glue { white-space: nowrap; }

/* A note. Narrow mode default: inline box under the line, full note shown. */
.methods .fn-note[hidden] { display: none; }
.methods .fn-note {
  display: block;
  margin: 8px 0 10px;
  padding: 10px 12px 10px 14px;
  border-left: 2px solid var(--brand);
  background: var(--paper-deep);
  color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  font-variant-numeric: oldstyle-nums;
  text-indent: 0;
  white-space: normal;
}
.methods .fn-sym { color: var(--brand); font-weight: 700; font-variant-numeric: lining-nums; margin-right: .2em; }
.methods .fn-note a { overflow-wrap: anywhere; }
/* The "Citations" master control: hidden in narrow mode. */
.methods .fn-toggle-rail { display: none; }

@container (min-width: 888px) {
  .methods {
    --gap: 28px;
    --note-w: clamp(200px, calc(100cqw - 788px), 240px);
    --fn-marker-col: 18px;
    --fn-note-gap: 5px;
    width: min(760px, calc(100cqw - var(--gap) - var(--note-w)));
    max-width: none;
    margin-left: max(0px, min(calc((100cqw - 760px) / 2), calc(100cqw - 760px - var(--gap) - var(--note-w))));
    margin-right: 0;
  }
  .methods .fn-note {
    float: right;
    clear: right;
    width: var(--note-w);
    margin: .3em calc(-1 * (var(--note-w) + var(--gap))) 8px 0;
    padding: 0 0 0 10px;
    background: none;
    color: var(--muted);
    font: 400 12.5px/1.4 var(--sans);
  }
  .methods .fn-note:not([hidden]) {
    display: grid;
    grid-template-columns: var(--fn-marker-col) minmax(0, 1fr);
    column-gap: var(--fn-note-gap);
    align-items: baseline;
  }
  .methods .fn-note .fn-sym { margin: 0; justify-self: end; text-align: right; }
  .methods .fn-note .fn-body { grid-column: 2; }

  .methods .fn-toggle-rail {
    display: block; position: absolute; top: var(--fn-toggle-start, 40px); bottom: 96px; left: calc(100% + var(--gap));
    width: var(--note-w); z-index: 30; pointer-events: none;
  }
  .methods .fn-toggle {
    -webkit-appearance: none;
    appearance: none;
    position: sticky; top: 0; display: grid;
    grid-template-columns: var(--fn-marker-col) minmax(0, 1fr); column-gap: var(--fn-note-gap); align-items: center;
    width: 100%; min-height: 32px; box-sizing: border-box; padding: 6px 0 6px 12px; border: 0; background: var(--paper);
    color: var(--muted); font: 700 9.5px/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
    text-align: left; text-decoration: none; box-shadow: none; cursor: pointer; pointer-events: auto;
  }
  /* State by fill; the label never changes: filled = all, half = mixed, hollow = none. */
  .methods .fn-toggle::before {
    content: ""; justify-self: end; width: 7px; height: 7px; margin-right: 3px;
    border: 1px solid currentColor; border-radius: 50%;
  }
  .methods .fn-toggle::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--muted);
    opacity: 0;
    transition: opacity 120ms ease;
  }
  .methods .fn-toggle.is-over-content::after { opacity: .72; }
  .methods .fn-toggle[aria-pressed="true"]::before { border-color: var(--brand); background: var(--brand); }
  .methods .fn-toggle[aria-pressed="mixed"]::before {
    border-color: var(--brand); background: linear-gradient(90deg, var(--brand) 50%, transparent 50%);
  }
  .methods .fn-toggle:hover { color: var(--ink); text-decoration: none; }
  .methods .fn-toggle:active { text-decoration: none; }
  .methods .fn-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

}

/* The Notes list at the end: always complete, unaffected by the toggles. */
.methods .fn-list ol { margin: 14px 0 0; padding-left: 2em; }
.methods .fn-list li { font: 400 14px/1.5 var(--sans); font-variant-numeric: oldstyle-nums; scroll-margin-top: 80px; }
.methods .fn-list li::marker { color: var(--brand); font-weight: 700; font-variant-numeric: lining-nums; }
.methods .fn-list li + li { margin-top: 8px; }
.methods .fn-list li a { overflow-wrap: anywhere; }
.methods .fn-list li:target { background: var(--paper-deep); }
.methods .fn-list .fn-back { text-decoration: none; }

/* Print: the Notes list serves as endnotes. */
@media print {
  .methods .fn-note, .methods .fn-toggle-rail { display: none !important; }
  .methods .fn-mark { color: #000; }
}