/* Guide pages: additions on top of legal.css */
.wrap { width: min(100% - 2.5rem, 46rem); }
.eyebrow a { color: var(--faint); text-decoration: none; }
.eyebrow a:hover { color: var(--ink); }
.toc { background: var(--card); border: 1px solid var(--rule); border-radius: 3px; padding: 1rem 1.3rem; margin: 1.6rem 0 0; }
.toc-title { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 .4rem; }
.toc ol { margin: 0; padding-left: 1.2rem; } .toc li { margin-bottom: .25rem; }
.toc a { text-decoration: none; color: var(--ink); } .toc a:hover { text-decoration: underline; }
.btn { display: inline-block; background: var(--rec); color: #fff; text-decoration: none; font-family: "IBM Plex Sans", sans-serif; font-weight: 600; padding: .75rem 1.4rem; border-radius: 3px; box-shadow: var(--shadow); }
.btn:hover { text-decoration: none; filter: brightness(.95); }
.cta-sub { font-family: "IBM Plex Mono", monospace; font-size: var(--step--1); color: var(--faint); margin-top: .7rem; }
ol { margin: 0 0 1rem; padding-left: 1.3rem; } ol li { color: var(--muted); margin-bottom: .5rem; }
blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--rule); }
blockquote p { color: var(--ink); font-style: italic; margin-bottom: .3rem; }
blockquote cite { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: var(--step--1); color: var(--faint); }
tr.hi td { color: var(--ink); background: color-mix(in srgb, var(--rec) 7%, transparent); }
.tnote { font-size: var(--step--1); color: var(--faint); margin-top: -.6rem; }
.hublist { padding-left: 1.3rem; } .hublist li { margin-bottom: .7rem; }
.hublist a { font-weight: 600; color: var(--ink); } .hublist .sub { display: block; font-size: var(--step--1); color: var(--faint); }
.hublist.compact li { margin-bottom: .3rem; } .hublist.compact a { font-weight: 500; }
.sources { font-size: var(--step--1); }
.author { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: var(--step--1); }
.author p { color: var(--faint); }

/* Readability: darker body and table text in light mode (dark mode keeps legal.css values). */
:root { --muted: #45403B; --faint: #6F6862; }
p, li, td { color: var(--muted); }

/* Tables break out of the 46rem text column so every column fits without horizontal scrolling. */
.table-scroll {
  width: min(100vw - 2.5rem, 72rem);
  position: relative; left: 50%; transform: translateX(-50%);
  overflow-x: visible;
}
.table-scroll table { table-layout: auto; font-size: .92rem; }
.table-scroll th { white-space: normal; line-height: 1.3; font-size: .72rem; color: var(--muted); }
.table-scroll th, .table-scroll td { padding: .55rem .7rem; }
.table-scroll td:first-child { color: var(--ink); font-weight: 500; }
.tnote { transform: none; }

/* Phones: each row becomes a labelled block, no scrolling at all. */
@media (max-width: 720px) {
  .table-scroll { width: 100%; left: 0; transform: none; }
  .table-scroll thead { display: none; }
  .table-scroll tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  .table-scroll tr.hi { background: color-mix(in srgb, var(--rec) 7%, transparent); padding-inline: .5rem; border-radius: 3px; }
  .table-scroll tr.hi td { background: transparent; }
  .table-scroll td { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; border: 0; padding: .2rem 0; }
  .table-scroll td::before {
    content: attr(data-label); font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-top: .15rem;
  }
  .table-scroll td:first-child { grid-template-columns: 1fr; font-size: 1rem; padding-bottom: .35rem; }
  .table-scroll td:first-child::before { display: none; }
}

/* Below-the-fold blocks are laid out and painted only as they approach the viewport (measured 2026-09-03: guide LCP 1.9 s -> ~1.0 s). */
main > section { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* Link lists (sources, related, hub lists): every link is a 24px+ touch target with breathing room. */
main > section > ul > li, main > section > ol > li, ul.sources > li { padding: .3rem 0; line-height: 1.5; }
main > section > ul > li > a, main > section > ol > li > a { display: inline-block; min-height: 24px; padding: .1rem 0; }
ul.sources > li { padding: .45rem 0; }
ul.sources > li > a { display: block; padding: .3rem 0; line-height: 1.5; overflow-wrap: anywhere; }