/* assets/ebl-tools.css -- the four browser tools (absolute-risk, heart-risk,
   fitness-percentiles, record-summary). EBL 2.0 items 46, 47, 48, 51.
   Colors come from the :root tokens in assets/styles.css. No text under 15px. */
.ebl-tool-h2{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.ebl-tool-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem 1.25rem;padding:1.25rem;border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--bg-1)}
.ebl-tool-field{display:flex;flex-direction:column;gap:.35rem;font-size:15px;color:var(--ink-1)}
.ebl-tool-field small{font-size:15px;color:var(--ink-3);line-height:1.45}
.ebl-tool-wide{grid-column:1/-1}
.ebl-tool-field input,.ebl-tool-field select{font-size:16px;padding:.55rem .75rem;border-radius:10px;border:1px solid var(--line-strong);background:var(--bg-2);color:var(--ink-0)}
.ebl-tool-field input:focus,.ebl-tool-field select:focus{outline:2px solid var(--lime);outline-offset:1px}
.ebl-tool-check{display:flex;align-items:center;gap:.55rem;font-size:15px;color:var(--ink-1)}
.ebl-tool-check input{width:1.15rem;height:1.15rem;accent-color:var(--lime)}
.ebl-tool-go{grid-column:1/-1;justify-self:start}
.ebl-tool-result{margin-top:1.25rem}
.ebl-tool-card{border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--bg-1);padding:1.25rem;margin-bottom:1rem}
.ebl-tool-kicker{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-bottom:.75rem}
.ebl-tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem;margin-bottom:1rem}
.ebl-tool-value{font-family:"Newsreader",serif;font-size:34px;color:var(--ink-0);line-height:1.1}
.ebl-tool-label,.ebl-tool-note,.ebl-tool-source,.ebl-tool-lines li,.ebl-tool-data{font-size:15px;color:var(--ink-2);line-height:1.55}
.ebl-tool-big{font-size:17px;color:var(--ink-0);line-height:1.5;margin:0 0 .75rem}
.ebl-tool-lines{margin:0 0 .75rem 1.1rem;list-style:disc}
.ebl-tool-note,.ebl-tool-source{margin:.6rem 0 0}
.ebl-tool-table{width:100%;border-collapse:collapse;font-size:15px;margin:.5rem 0;color:var(--ink-1)}
.ebl-tool-table th,.ebl-tool-table td{border-bottom:1px solid var(--line);padding:.5rem .4rem;text-align:left;vertical-align:top}
.ebl-tool-table th{color:var(--ink-1);font-weight:500}
.ebl-tool-num{font-family:"JetBrains Mono",ui-monospace,monospace;white-space:nowrap}
.ebl-tool-close{font-size:16px;color:var(--ink-1);border-left:3px solid var(--lime);padding:.35rem 0 .35rem .8rem;margin:.5rem 0 0}
.ebl-tool-problem{border:1px solid var(--amber);border-radius:var(--radius-card);padding:1rem;color:var(--ink-0);font-size:15px}
.ebl-tool-problem p{margin:.2rem 0}
.ebl-tool-how{font-size:15px;color:var(--ink-2);line-height:1.6}
.ebl-tool-how summary{cursor:pointer;color:var(--ink-1);font-size:15px}
.ebl-tool-how p{margin:.75rem 0 0}
.ebl-tool-data{max-width:48rem}
@media (max-width:480px){.ebl-tool-table:not(.ebl-tool-pct){display:block;overflow-x:auto}}
.ebl-tool-pct{max-width:22rem}
/* the printable summary */
.ebl-summary{background:#fff;color:#111;border-radius:var(--radius-card);padding:1.75rem;font-size:15px;line-height:1.55}
.ebl-summary-kicker{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#555}
.ebl-summary-title{font-family:"Newsreader",serif;font-size:30px;margin:.35rem 0 .5rem;color:#111}
.ebl-summary-grade{font-size:17px;margin:0 0 .35rem}
.ebl-summary-letter{font-weight:700}
.ebl-summary-scope{font-size:15px;color:#444;margin:0 0 1rem}
.ebl-summary-sec{border-top:1px solid #ddd;padding-top:.7rem;margin-top:.7rem}
.ebl-summary-sec h3{font-size:15px;font-weight:700;margin:0 0 .3rem;color:#111}
.ebl-summary-sec p,.ebl-summary-sec li{color:#222;margin:0}
.ebl-summary-sec ul,.ebl-summary-refs{margin:.2rem 0 0 1.2rem}
.ebl-summary a{color:#0645ad}
.ebl-summary-foot{border-top:1px solid #ddd;margin-top:1rem;padding-top:.7rem;font-size:15px;color:#444}
@media print{
  body{background:#fff!important}
  body *{visibility:hidden}
  .ebl-summary,.ebl-summary *{visibility:visible}
  .ebl-summary{position:absolute;left:0;top:0;width:100%;padding:0;border-radius:0}
  .ebl-summary a{color:#111;text-decoration:none}
}
.ebl-tool-alt{font-size:15px;color:var(--lime);border:1px solid rgba(198,255,58,.4);border-radius:10px;padding:.45rem .9rem;background:transparent;cursor:pointer}
.ebl-tool-alt:hover{background:rgba(198,255,58,.08)}
/* ==========================================================================
   system.css -- the EBL page system. One grid, one spacing scale, four type
   sizes, seven building blocks. Approved by Arnold October 2026.

   Linked on every served page by render_page_template.py, which also marks
   <body data-ebl-template="home|listing|record|explainer|tool|utility">.

   PACKAGE 1 (foundation): tokens and block classes only. No rule below
   targets an existing element, so nothing on the site moves until a page
   type is converted and its pages are assembled from these blocks.

   Colors come from the :root tokens in styles.css (no new color here, so
   gate_g20_color_tokens has nothing to reconcile). Every size is at or
   above the reading floor in type-floor.css.
   ========================================================================== */

:root {
  /* The grid: three widths, no others */
  --x-w-full: 1200px;     /* page frame (px, not rem: root size differs between pages) */
  --x-w-read: 720px;      /* any running text */
  --x-w-side: 240px;      /* "On this page" column on long pages */
  --x-gutter: 1rem;       /* 16px: phone side margin */

  /* The spacing: two gaps decide the rhythm */
  --x-gap-section: 6rem;  /* 96px between sections */
  --x-gap-block: 1.5rem;  /* 24px between blocks inside a section */
  --x-gap-inner: 1rem;    /* 16px inside a card */
  --x-gap-tight: 0.5rem;  /* 8px inside a card */

  /* The type: four sizes */
  --x-fs-title: clamp(2.25rem, 4.5vw, 3rem);
  --x-fs-h2: clamp(1.5rem, 3vw, 1.75rem);
  --x-fs-body: 1.0625rem; /* 17px */
  --x-fs-label: 17px; /* 14px */
  --x-lh-body: 1.6;

  --x-font-display: 'Newsreader', Georgia, serif;
  --x-font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --x-font-label: 'JetBrains Mono', ui-monospace, monospace;

  --x-radius: var(--radius-card);
}

/* ---- Frame ------------------------------------------------------------- */
.ebl-x-page { max-width: var(--x-w-full); margin: 0 auto; padding: 3rem var(--x-gutter) var(--x-gap-section); }
.ebl-x-layout { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.ebl-x-side { flex: 1 1 13rem; max-width: var(--x-w-side); }
.ebl-x-body { flex: 999 1 35rem; min-width: 0; display: flex; flex-direction: column; gap: 4.5rem; }

/* ---- 1. Page header ---------------------------------------------------- */
.ebl-x-header { display: flex; flex-direction: column; gap: var(--x-gap-inner); margin-bottom: 2.5rem; }
.ebl-x-header .ebl-x-crumb { font-size: var(--x-fs-label); color: var(--ink-2); }
.ebl-x-header h1 { font-family: var(--x-font-display); font-size: var(--x-fs-title); line-height: 1.1; font-weight: 600; margin: 0; color: var(--ink-0); }
.ebl-x-header .ebl-x-lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ink-1); max-width: var(--x-w-read); margin: 0; }

/* ---- 2. Summary panel -------------------------------------------------- */
.ebl-x-summary { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--x-radius); padding: 1.75rem; display: flex; flex-direction: column; gap: var(--x-gap-block); }

/* ---- 3. Section -------------------------------------------------------- */
.ebl-x-section { display: flex; flex-direction: column; gap: var(--x-gap-block); }
.ebl-x-section > h2 { font-family: var(--x-font-display); font-size: var(--x-fs-h2); font-weight: 600; line-height: 1.2; margin: 0; color: var(--ink-0); }
.ebl-x-section > p, .ebl-x-section > ul, .ebl-x-section > ol { max-width: var(--x-w-read); font-size: var(--x-fs-body); line-height: var(--x-lh-body); color: var(--ink-1); margin: 0; }

/* ---- 4. Card grid: equal height, same fields --------------------------- */
.ebl-x-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--x-gap-inner); }
.ebl-x-card { border: 1px solid var(--line-strong); border-radius: var(--x-radius); padding: 1.25rem; display: flex; flex-direction: column; gap: var(--x-gap-tight); min-height: 9rem; }
.ebl-x-card > :last-child { margin-top: auto; }

/* ---- 5. Table ---------------------------------------------------------- */
.ebl-x-table { overflow-x: auto; }
.ebl-x-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ebl-x-table th { text-align: left; font-family: var(--x-font-label); font-size: var(--x-fs-label); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: .625rem .75rem .625rem 0; }
.ebl-x-table td { border-top: 1px solid var(--line-strong); padding: .875rem .75rem .875rem 0; color: var(--ink-1); vertical-align: top; }

/* ---- 6. Note: one style of callout ------------------------------------- */
.ebl-x-note { max-width: var(--x-w-read); border: 1px solid var(--line-strong); border-radius: var(--x-radius); padding: 1.125rem 1.25rem; font-size: var(--x-fs-body); line-height: var(--x-lh-body); color: var(--ink-1); }
.ebl-x-note > .ebl-x-label { display: block; margin-bottom: .375rem; }

/* ---- 7. Collapsed detail ----------------------------------------------- */
.ebl-x-fold { max-width: var(--x-w-read); border: 1px solid var(--line-strong); border-radius: var(--x-radius); padding: 1rem 1.25rem; }
.ebl-x-fold > summary { cursor: pointer; font-weight: 600; color: var(--ink-0); min-height: 1.75rem; }
.ebl-x-fold[open] > summary { margin-bottom: .75rem; }

/* ---- Shared label ------------------------------------------------------ */
.ebl-x-label { font-family: var(--x-font-label); font-size: var(--x-fs-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

@media (max-width: 640px) {
  .ebl-x-body { gap: 3.5rem; }
  .ebl-x-summary { padding: 1.25rem; }
}

/* ==========================================================================
   RECORD PAGES, ASSEMBLED (package 2). Keyed to main.ebl-x-assembled, which
   render_record_assemble.py writes only on pages it has rebuilt into the
   section order: header, then a side menu beside seven sections. Earlier
   layers (rooms.css, compact.css) styled direct children of <main> and the
   old two-column grid; on an assembled page those positions no longer exist,
   and the rules below set one spacing and one width for everything.
   ========================================================================== */
main.ebl-x-assembled { max-width: var(--x-w-full) !important; }
main.ebl-x-assembled > .ebl-x-rec { margin-top: 2.5rem !important; }
main.ebl-x-assembled .ebl-sp-r1 { padding-bottom: 1rem !important; }

/* side menu: one list, beside the sections on wide screens, above them on a phone */
.ebl-x-rec > .ebl-x-side { position: sticky; top: 6.5rem; }
.ebl-x-rec .ebl-x-menu { display: flex !important; flex-direction: column; gap: .125rem !important; border-top: 1px solid var(--line-strong); padding-top: .875rem; }
.ebl-x-rec .ebl-x-menu .ebl-x-label { margin-bottom: .5rem; }
.ebl-x-rec .ebl-x-menu a { display: block; border: 0 !important; background: none !important; border-radius: 0 !important; padding: .375rem 0 !important; font-size: 1rem !important; color: var(--ink-1) !important; text-decoration: none; }
.ebl-x-rec .ebl-x-menu a:hover { color: var(--lime) !important; }

/* sections: same heading, same rule above, same gap, every time */
.ebl-x-rec > .ebl-x-body { gap: 3.5rem; max-width: 52rem; }
.ebl-x-rec-sec { scroll-margin-top: 6rem; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.ebl-x-rec-sec > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ebl-x-rec-sec > .ebl-sp-anchor { display: none; }
.ebl-x-rec-sec > h2.ebl-x-h2 { font-size: var(--x-fs-h2); }

/* blocks that were rooms keep their content, not their room-sized padding or bands */
.ebl-x-rec-sec .ebl-room { padding: 0 !important; min-height: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; }
.ebl-x-rec-sec .ebl-room > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.ebl-x-rec-sec .ebl-sp-state-t { text-align: left !important; }
.ebl-x-rec-sec .ebl-x-h2 + .ebl-room .eyebrow:first-child { display: none; }

/* running text at reading width; grids and cards may use the full body */
.ebl-x-rec-sec > p, .ebl-x-rec-sec > section > p { max-width: var(--x-w-read); }
/* the molecule card: picture and caption on the left, its facts on the right,
   so the card fills the width instead of leaving half of it empty */
.ebl-x-rec-sec > figure { max-width: none; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
.ebl-x-rec-sec > figure > * { grid-column: 2; }
.ebl-x-rec-sec > figure > :first-child { grid-column: 1; grid-row: 1; }
.ebl-x-rec-sec > figure > figcaption { grid-column: 1; grid-row: 2; }
.ebl-x-rec-sec > figure > :nth-child(n+3) { grid-row: 1 / span 3; }
.ebl-x-rec-sec > figure > dl { border-top: 0 !important; }
/* the first block under a heading does not draw a second rule */
.ebl-x-rec-sec > h2 + *, .ebl-x-rec-sec > h2 + * > :first-child { border-top: 0 !important; padding-top: 0 !important; }
/* every fold looks the same, including the hand-authored ones */
.ebl-x-rec-sec > details:not(.ebl-cx-fold):not(.ebl-sp-fold) { border: 1px solid var(--line) !important; border-radius: 12px !important; padding: .75rem 1rem !important; background: transparent !important; }
.ebl-x-rec-sec > details:not(.ebl-cx-fold):not(.ebl-sp-fold) > summary { cursor: pointer; color: var(--ink-0); list-style: none; display: flex; align-items: baseline; gap: .5rem; }
.ebl-x-rec-sec > details:not(.ebl-cx-fold):not(.ebl-sp-fold) > summary::-webkit-details-marker { display: none; }
.ebl-x-rec-sec > details:not(.ebl-cx-fold):not(.ebl-sp-fold) > summary::after { content: "+"; margin-left: auto; font-family: var(--x-font-label); color: var(--lime); }
.ebl-x-rec-sec > details[open]:not(.ebl-cx-fold):not(.ebl-sp-fold) > summary::after { content: "\2212"; }
.ebl-x-rec-sec > details.ebl-cx-fold, .ebl-x-rec-sec > details.ebl-sp-fold { margin-top: 0 !important; }
.ebl-x-rec-sec .ebl-cx-cards > div > .ebl-cx-trials { margin-top: auto !important; }

@media (max-width: 899px) {
  .ebl-x-rec-sec > figure { display: block; }
  .ebl-x-rec > .ebl-x-side { position: static; max-width: none; flex-basis: 100%; }
  .ebl-x-rec .ebl-x-menu { flex-direction: row; flex-wrap: wrap; gap: .25rem 1.25rem !important; }
  .ebl-x-rec .ebl-x-menu .ebl-x-label { flex-basis: 100%; margin-bottom: .25rem; }
  .ebl-x-rec > .ebl-x-body { gap: 2.75rem; }
}

/* grades-by-use cards: even rows (2 across for two or four uses, 3 across otherwise) and a real gap */
@media (min-width: 900px) {
  .ebl-x-rec-sec .ebl-cx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
  .ebl-x-rec-sec .ebl-cx-cards:has(> :nth-child(2):last-child),
  .ebl-x-rec-sec .ebl-cx-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ebl-x-rec-sec .ebl-cx-cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr) !important; }
  .ebl-x-rec-sec .ebl-cx-cards .tier { flex-basis: 100%; width: 100%; text-align: left; justify-content: flex-start; }
}

/* the name card on the older Rx pages sits beside the title's width, not across the page */
main.ebl-x-assembled > div[class*="rounded"] { max-width: 24rem; }

/* ==========================================================================
   LISTING PAGES (package 4, October 2026). Keyed to main.ebl-x-listing, which
   render_listing_frame.py writes on the 34 pages registered as "listing".
   One frame width, one title, one line under it, one gap before the list.
   The title takes the bold sans most listing pages already used (Supplements,
   Devices, Protocols, Tools, Testing); the line under it the serif.
   ========================================================================== */
main.ebl-x-listing { max-width: var(--x-w-full) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; }
main.ebl-x-listing > [class*="max-w-"], main.ebl-x-listing > [class*="mx-auto"],
main.ebl-x-listing > .ebl-room > .ebl-wrap, main.ebl-x-listing .ebl-x-lhead { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
main.ebl-x-listing .ebl-x-lhead { text-align: left !important; padding-top: 3rem !important; padding-bottom: 2.5rem !important; min-height: 0 !important; }
main.ebl-x-listing .ebl-x-title { font-family: var(--x-font-body) !important; font-weight: 700 !important; font-size: clamp(2.5rem, 5.3vw, 4.75rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: var(--ink-0) !important; max-width: 60rem; margin: 0 0 1.25rem !important; text-align: left !important; }
main.ebl-x-listing .ebl-x-lede { font-family: var(--x-font-display) !important; font-size: 1.1875rem !important; line-height: 1.5 !important; color: var(--ink-1) !important; max-width: var(--x-w-read) !important; margin: 0 0 0 !important; text-align: left !important; }
main.ebl-x-listing p { max-width: var(--x-w-read); }
main.ebl-x-listing [class*="grid"] p, main.ebl-x-listing table p, main.ebl-x-listing .card p { max-width: none; }
@media (max-width: 640px) {
  main.ebl-x-listing { padding-left: 1rem !important; padding-right: 1rem !important; }
  main.ebl-x-listing .ebl-x-lhead { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* ==========================================================================
   EXPLAINER PAGES (package 5, October 2026). Keyed to main.ebl-x-explainer,
   written by render_listing_frame.py on the 41 pages registered "explainer".
   The same frame, title and line under it as the listing pages; running text
   held to the reading width; every section heading the same size, with the
   same rule and space above it; one "On this page" menu on pages with four
   or more sections. Cards and grids keep their own headings.
   ========================================================================== */
main.ebl-x-explainer { max-width: var(--x-w-full) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; }
main.ebl-x-explainer > [class*="max-w-"], main.ebl-x-explainer > [class*="mx-auto"],
main.ebl-x-explainer > .ebl-room > .ebl-wrap, main.ebl-x-explainer .ebl-x-lhead { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
main.ebl-x-explainer .ebl-x-lhead { text-align: left !important; padding-top: 3rem !important; padding-bottom: 2.5rem !important; min-height: 0 !important; }
main.ebl-x-explainer .ebl-x-title { font-family: var(--x-font-body) !important; font-weight: 700 !important; font-size: clamp(2.5rem, 5.3vw, 4.75rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: var(--ink-0) !important; max-width: 60rem; margin: 0 0 1.25rem !important; text-align: left !important; }
main.ebl-x-explainer .ebl-x-lede { font-family: var(--x-font-display) !important; font-size: 1.1875rem !important; line-height: 1.5 !important; color: var(--ink-1) !important; max-width: var(--x-w-read) !important; margin: 0 !important; text-align: left !important; }
main.ebl-x-explainer p, main.ebl-x-explainer li { max-width: var(--x-w-read); }
main.ebl-x-explainer [class*="grid"] p, main.ebl-x-explainer [class*="grid"] li, main.ebl-x-explainer table p, main.ebl-x-explainer .card p { max-width: none; }
main.ebl-x-explainer h2:not(.card h2):not([class*="grid"] h2):not(details h2) { font-family: var(--x-font-display) !important; font-weight: 600 !important; font-size: clamp(1.6rem, 2.4vw, 2.125rem) !important; line-height: 1.2 !important; letter-spacing: -.01em !important; color: var(--ink-0) !important; text-align: left !important; max-width: 46rem; margin-top: 3.5rem !important; margin-bottom: 1.25rem !important; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); scroll-margin-top: 6rem; }
main.ebl-x-explainer .ebl-x-emenu { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line-strong); max-width: 60rem; }
main.ebl-x-explainer .ebl-x-emenu .ebl-x-label { flex-basis: 100%; }
main.ebl-x-explainer .ebl-x-emenu a { color: var(--ink-1); text-decoration: none; font-size: .9375rem; }
main.ebl-x-explainer .ebl-x-emenu a:hover { color: var(--lime); }
@media (max-width: 640px) {
  main.ebl-x-explainer { padding-left: 16px !important; padding-right: 16px !important; }
  main.ebl-x-explainer .ebl-x-lhead { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}
/* the name card on the older Rx pages: space between it and the title */
main.ebl-x-assembled > div[class*="rounded"] { margin-bottom: 1.5rem; }

/* ==========================================================================
   TOOL PAGES (October 2026). main.ebl-x-tool, written by render_listing_frame.py
   on the 15 pages registered "tool": the same frame, title and line under it
   as the listing and explainer pages. The tool itself keeps its own layout.
   ========================================================================== */
main.ebl-x-tool { max-width: var(--x-w-full) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px !important; padding-right: 20px !important; }
main.ebl-x-tool > [class*="max-w-"], main.ebl-x-tool > [class*="mx-auto"], main.ebl-x-tool .ebl-x-lhead { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
main.ebl-x-tool .ebl-x-lhead { text-align: left !important; padding-top: 3rem !important; padding-bottom: 2rem !important; min-height: 0 !important; }
main.ebl-x-tool .ebl-x-title { font-family: var(--x-font-body) !important; font-weight: 700 !important; font-size: clamp(2.5rem, 5.3vw, 4.75rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: var(--ink-0) !important; max-width: 60rem; margin: 0 0 1.25rem !important; text-align: left !important; }
main.ebl-x-tool .ebl-x-lede { font-family: var(--x-font-display) !important; font-size: 1.1875rem !important; line-height: 1.5 !important; color: var(--ink-1) !important; max-width: var(--x-w-read) !important; margin: 0 !important; text-align: left !important; }
@media (max-width: 640px) {
  main.ebl-x-tool { padding-left: 16px !important; padding-right: 16px !important; }
  main.ebl-x-tool .ebl-x-lhead { padding-top: 1.5rem !important; padding-bottom: 1.25rem !important; }
}

/* October 2026 (outside review, mobile pass): a grade badge inside a flex row
   shrank to about half its width beside a long label at 360px (devices/hbot.html,
   protocol diet pages). A letter never gives up its space. */
.tier { flex-shrink: 0; }

/* ==========================================================================
   ACCESSIBILITY PASS, October 2026 (EBL 2.0 item 52). Found by axe-core run on
   all 701 built pages; each rule names what it fixes.
   ========================================================================== */
/* 1. A link inside a sentence was marked by colour alone: lime beside light
   grey text is 1.3 to 2.3:1, under the 3:1 WCAG 1.4.1 asks for when colour
   is the only cue (157 pages, 1,358 links). An underline is the cue that does
   not depend on seeing colour. Buttons, cards and block links are left alone. */
main :is(p, td, dd, figcaption, blockquote) a:not([class*="btn"]):not(.block):not(.card):not([class*="inline-flex"]):not([class*="rounded"]),
main :not(nav) > a.text-lime.hover\:underline:not(.block):not([class*="inline-flex"]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* 2. The faded "Disclosure" footer link (text-lime/40) measured 3.3:1 on the
   page background, under the 4.5:1 normal text needs (13 pages). */
a.text-lime\/40 { color: rgba(198, 255, 58, .72); text-decoration: underline; text-underline-offset: 2px; }
/* 3. Stacked PMID links in evidence tables were 23px tall and touching, under
   the 24px target WCAG 2.5.8 asks for (graded-index.html alone held 461). */
td a[href*="pubmed.ncbi.nlm.nih.gov"], li a[href*="pubmed.ncbi.nlm.nih.gov"] {
  display: inline-block;
  min-height: 24px;
  line-height: 24px;
}

/* ==========================================================================
   SEARCH: CHECK A CLAIM (October 2026, EBL 2.0 item 20). search.html, drawn by
   assets/search.js claimHtml().
   ========================================================================== */
.ebl-mode { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; }
.ebl-mode-btn { min-height: 36px; padding: 6px 16px; border-radius: 999px; font-size: 17px; color: var(--ink-1, #c9cfc6); background: transparent; }
.ebl-mode-btn[aria-pressed="true"] { background: #c6ff3a; color: #07090a; font-weight: 600; }
.ebl-mode-btn:focus-visible { outline: 2px solid #c6ff3a; outline-offset: 2px; }
#ebl-claim-results:not(:empty) { padding-bottom: 1rem; }
.ebl-cl-card { border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px 20px; margin: 12px 0; background: rgba(255,255,255,.02); }
.ebl-cl-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #979e95); margin: 0 0 4px; }
.ebl-cl-name { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.ebl-cl-name a { color: var(--ink-0, #f4f6f3); text-decoration: underline; text-underline-offset: 3px; }
.ebl-cl-lead { font-size: 15px; color: var(--ink-1, #c9cfc6); margin: 0 0 8px; line-height: 1.5; }
.ebl-cl-list { list-style: none; margin: 0; padding: 0; }
.ebl-cl-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ebl-cl-letter { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; flex-shrink: 0; }
.ebl-cl-use { font-size: 15px; color: var(--ink-0, #f4f6f3); line-height: 1.45; }
.ebl-cl-gloss { display: block; font-size: 16px; color: var(--ink-2, #aab1a7); margin-top: 2px; }
.ebl-cl-more { margin-top: 8px; font-size: 17px; color: var(--ink-2, #aab1a7); }
.ebl-cl-more summary { cursor: pointer; min-height: 24px; }
.ebl-cl-note { font-size: 16px; color: var(--ink-2, #aab1a7); line-height: 1.55; max-width: 48rem; margin: 10px 0 0; }
[data-ebl-mode-only][hidden] { display: none !important; }

/* ==========================================================================
   COMPARE BY OUTCOME (October 2026, EBL 2.0 item 21). compare-outcomes.html,
   written by render_outcome_compare.py.
   ========================================================================== */
.ebl-oc-jump { margin: 0 0 2rem; }
.ebl-oc-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ebl-oc-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: var(--ink-0, #f4f6f3); text-decoration: none; font-size: 17px; }
.ebl-oc-jump a:hover, .ebl-oc-jump a:focus-visible { border-color: #c6ff3a; color: #c6ff3a; }
.ebl-oc-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #979e95); margin: 0 0 8px; }
.ebl-oc-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15.5px; color: var(--ink-3, #979e95); margin-left: 4px; }
.ebl-oc-topic { margin: 2.5rem 0 0; scroll-margin-top: 96px; }
.ebl-oc-h { font-size: 24px; font-weight: 600; color: var(--ink-0, #f4f6f3); margin: 0 0 4px; }
.ebl-oc-sub { font-size: 17px; color: var(--ink-2, #aab1a7); margin: 0 0 12px; }
.ebl-oc-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
.ebl-oc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ebl-oc-table th, .ebl-oc-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.06); color: var(--ink-1, #c9cfc6); }
.ebl-oc-table thead th { border-top: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #979e95); font-weight: 500; }
.ebl-oc-table tbody th { font-weight: 500; color: var(--ink-0, #f4f6f3); min-width: 12rem; }
.ebl-oc-table tbody th a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ebl-oc-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; border-radius: 8px; font-weight: 700; }
@media (max-width: 640px) { .ebl-oc-table { font-size: 17px; } .ebl-oc-table th, .ebl-oc-table td { padding: 8px 10px; } .ebl-oc-table tbody th { min-width: 9rem; } }
.ebl-oc-none { color: var(--ink-3, #979e95); font-size: 16px; }

/* ==========================================================================
   KEPT APART FROM THE LETTERS (October 2026, EBL 2.0 items 35 and 36). The band
   render_feature_lists.py ends every listing page with.
   ========================================================================== */
.ebl-edges { margin-top: 3rem; margin-bottom: 3rem; }
.ebl-edges-h { font-size: 20px; font-weight: 600; color: var(--ink-0, #f4f6f3); margin: 0 0 12px; }
.ebl-edges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ebl-edges-card { display: block; padding: 18px 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.02); text-decoration: none; }
.ebl-edges-card:hover, .ebl-edges-card:focus-visible { border-color: #c6ff3a; }
.ebl-edges-t { display: block; font-size: 17px; font-weight: 600; color: #c6ff3a; margin-bottom: 6px; }
.ebl-edges-b { display: block; font-size: 15px; line-height: 1.5; color: var(--ink-1, #c9cfc6); }
.ebl-edges-ch { margin: 12px 0 0; font-size: 17px; color: var(--ink-2, #aab1a7); }
.ebl-edges-ch a { color: #c6ff3a; text-decoration: underline; text-underline-offset: 2px; }

/* CHALLENGE A GRADE (October 2026, EBL 2.0 item 58). challenge-grade.html. */
.ebl-ch-steps { margin: 0; padding-left: 1.25rem; list-style: decimal; color: var(--ink-1, #c9cfc6); font-size: 15px; line-height: 1.6; }
.ebl-ch-steps li { margin: 6px 0; }
.ebl-ch-input { width: 100%; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 10px 14px; font-size: 16px; color: #f4f6f3; min-height: 44px; }
.ebl-ch-input:focus { outline: 2px solid #c6ff3a; outline-offset: 1px; border-color: #c6ff3a; }
select.ebl-ch-input option, select.ebl-ch-input optgroup { background: #0b0f0e; color: #f4f6f3; }

/* SIGN-OFF LEDGER (October 2026, EBL 2.0 item 55). signoff-ledger.html; the
   table reuses the .ebl-oc-* table styles of compare-outcomes.html. */
.ebl-so-sum { font-size: 16px; color: var(--ink-1, #c9cfc6); margin: 0 0 16px; line-height: 1.6; }
.ebl-so-n { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #c6ff3a; font-size: 18px; }

/* HOW EBL USES AI (October 2026, EBL 2.0 item 59). ai-use.html. */
.ebl-ai-list { margin: 12px 0 0; padding-left: 1.25rem; list-style: disc; color: var(--ink-1, #c9cfc6); font-size: 16px; line-height: 1.6; }
.ebl-ai-list li { margin: 10px 0; }
.ebl-ai-list strong { color: var(--ink-0, #f4f6f3); }
/* EBL READING FLOOR. Added October 2026 (Arnold).
   Several readers, young and old, said the text was too small. This sheet is
   linked LAST on every published page by render_type_floor.py. Every rule
   carries "html:root" and !important so it outranks the phone, tablet,
   supplement-page and room rules in styles.css and rooms.css, several of
   which are themselves !important. Every value is a raise, never a cut:
   nothing renders under 15px (raised from 14px in October 2026, Arnold: readers still found it small), reading sizes step up 1 to 3px, and headings
   (18px and up) are untouched. Rungs that land above 14.5px skip h1 to h3 so
   no heading carrying a small utility class can ever be shrunk.
   gate_g226_reading_floor.py holds every rung and the page links. */

/* 1. The utility-class ladder */
html:root .text-\[8px\],
html:root .text-\[9px\],
html:root .text-\[9\.5px\],
html:root .text-\[10px\],
html:root .text-\[10\.5px\],
html:root .text-\[11px\],
html:root .text-\[11\.5px\] { font-size: 15px !important; }
html:root .text-\[12px\],
html:root .text-\[12\.5px\] { font-size: 15.5px !important; }
html:root .text-\[13px\]:not(h1):not(h2):not(h3),
html:root .text-\[13\.5px\]:not(h1):not(h2):not(h3) { font-size: 16px !important; }
html:root .text-\[14px\]:not(h1):not(h2):not(h3),
html:root .text-\[14\.5px\]:not(h1):not(h2):not(h3) { font-size: 17px !important; }
html:root .text-\[15px\]:not(h1):not(h2):not(h3),
html:root .text-\[15\.5px\]:not(h1):not(h2):not(h3) { font-size: 17.5px !important; }
html:root .text-\[16px\]:not(h1):not(h2):not(h3),
html:root .text-\[16\.5px\]:not(h1):not(h2):not(h3) { font-size: 18px !important; }
html:root .text-\[17px\]:not(h1):not(h2):not(h3) { font-size: 18.5px !important; }
/* Small prose (not monospace labels) reads at 15px: long passages need more than labels do */
html:root .text-\[8px\]:not(.font-mono):not(.uppercase),
html:root .text-\[9px\]:not(.font-mono):not(.uppercase),
html:root .text-\[9\.5px\]:not(.font-mono):not(.uppercase),
html:root .text-\[10px\]:not(.font-mono):not(.uppercase),
html:root .text-\[10\.5px\]:not(.font-mono):not(.uppercase),
html:root .text-\[11px\]:not(.font-mono):not(.uppercase),
html:root .text-\[11\.5px\]:not(.font-mono):not(.uppercase),
html:root .text-\[12px\]:not(.font-mono):not(.uppercase),
html:root .text-\[12\.5px\]:not(.font-mono):not(.uppercase) { font-size: 16px !important; }
html:root .text-xs { font-size: 15px !important; line-height: 1.45; }
html:root .text-sm:not(h1):not(h2):not(h3) { font-size: 17px !important; line-height: 1.5; }
html:root .text-base:not(h1):not(h2):not(h3) { font-size: 18px !important; }
/* Wide tracking on enlarged uppercase micro labels costs width and legibility */
html:root .tracking-widest.text-\[8px\],
html:root .tracking-wider.text-\[8px\],
html:root .tracking-widest.text-\[9px\],
html:root .tracking-wider.text-\[9px\],
html:root .tracking-widest.text-\[9\.5px\],
html:root .tracking-wider.text-\[9\.5px\],
html:root .tracking-widest.text-\[10px\],
html:root .tracking-wider.text-\[10px\],
html:root .tracking-widest.text-\[10\.5px\],
html:root .tracking-wider.text-\[10\.5px\],
html:root .tracking-widest.text-\[11px\],
html:root .tracking-wider.text-\[11px\],
html:root .tracking-widest.text-\[11\.5px\],
html:root .tracking-wider.text-\[11\.5px\] { letter-spacing: .07em; }
/* 2. Inline style="font-size:Npx" attributes (only !important reaches them) */
html:root [style*="font-size:8px"],
html:root [style*="font-size: 8px"],
html:root [style*="font-size:9px"],
html:root [style*="font-size: 9px"],
html:root [style*="font-size:9.5px"],
html:root [style*="font-size: 9.5px"],
html:root [style*="font-size:10px"],
html:root [style*="font-size: 10px"],
html:root [style*="font-size:10.5px"],
html:root [style*="font-size: 10.5px"],
html:root [style*="font-size:11px"],
html:root [style*="font-size: 11px"],
html:root [style*="font-size:11.5px"],
html:root [style*="font-size: 11.5px"] { font-size: 15px !important; }
html:root [style*="font-size:12px"],
html:root [style*="font-size: 12px"],
html:root [style*="font-size:12.5px"],
html:root [style*="font-size: 12.5px"] { font-size: 15.5px !important; }
html:root [style*="font-size:13px"],
html:root [style*="font-size: 13px"],
html:root [style*="font-size:13.5px"],
html:root [style*="font-size: 13.5px"] { font-size: 16px !important; }
html:root [style*="font-size:14px"],
html:root [style*="font-size: 14px"],
html:root [style*="font-size:14.5px"],
html:root [style*="font-size: 14.5px"] { font-size: 17px !important; }
html:root [style*="font-size:15px"],
html:root [style*="font-size: 15px"],
html:root [style*="font-size:15.5px"],
html:root [style*="font-size: 15.5px"] { font-size: 17.5px !important; }
html:root [style*="font-size:16px"],
html:root [style*="font-size: 16px"],
html:root [style*="font-size:16.5px"],
html:root [style*="font-size: 16.5px"] { font-size: 18px !important; }
html:root [style*="font-size:17px"],
html:root [style*="font-size: 17px"] { font-size: 18.5px !important; }
/* 3. Custom-class micro type found by the full-site crawl of October 2026 */
html:root :is(.eyebrow,.ebl-k,.lbl,.kind,.date) { font-size: 15px !important; letter-spacing: .1em; }
html:root :is(.pm,.pmid,.src,.cap,.meta,.fp-num,.ebl-dmap-k,.ss-foot,.ss-lbl,.ss-dir,.ss-sample,.ss-pill,.ss-dose,.ss-sub,.ebl-ms-go,.ebl-flag-static,.ebl-sample-k,.ebl-chap,.pe-pmid,.evi-chip,.pyramid-row-short,.pyramid-axis-top,.pyramid-axis-bot,.pyramid-rule,.ebl-try-note,.ebl-ways-c,.grade), html:root small { font-size: 15px !important; }
html:root :is(.btn-primary,.btn-ghost,.ebl-tour-tx,.ebl-tour-cap):not(header *) { font-size: 16px !important; }
html:root :is(.why,.ttl,.note) { font-size: 16.5px !important; }

/* 4. TAP TARGETS (October 2026, Arnold). A phone crawl of every published page
   found 5,816 links and buttons standing on their own (not inside a sentence)
   that were under 24px tall: PMID links, footer links, "see the record" lines.
   Four pixels of padding above and below lifts a 15px link line to 24px or
   more. :where() keeps the selector at zero weight, so any element that
   already sets its own padding (buttons, cards, pills) keeps it; only links
   with no padding of their own gain the margin. Padding on an inline link
   enlarges what a finger can hit without moving the text around it.
   gate_g226_reading_floor.py check F holds this rule. */
:where(div, nav, td, th, dd, dt, section, li, footer, header, span, p) > :where(a[href], button, summary) { padding-block: 4px; }
/* Buttons need their own line: the Tailwind base sets button { padding: 0 } at
   element weight, which outranks the zero-weight rule above. This one sits at
   element weight too and comes later, so it wins over that reset, while any
   padding class on a button (.py-2 and the like) still outranks it. Five
   buttons on reading-list.html and timing.html were 23px tall. */
:where(div, nav, td, th, dd, dt, section, li, footer, header, span, p) > button { padding-block: 4px; }

/* 5. Inline rem sizes written by scripts and renderers (October 2026). The list
   in section 2 names px values only; app.js and render_static_lists.py write
   two rem values on the Grade D list cards, which rendered at 11.2px and 14px. */
html:root [style*="font-size:0.7rem"],
html:root [style*="font-size: 0.7rem"] { font-size: 15px !important; }
html:root [style*="font-size:0.875rem"],
html:root [style*="font-size: 0.875rem"] { font-size: 17px !important; }

/* 6. PHONE WIDTH (November 2026, Arnold). The phone check (phone_check.mjs) found
   text running past the right edge of a 390px phone on 264 pages. This site
   hides sideways scrolling, so that text was not scrollable, it was cut off.
   Four causes: rows of label and value that never wrap; text marked never to
   break (whitespace-nowrap); items marked never to shrink (shrink-0); and
   grid or form columns sized to their widest content (a long dropdown option,
   a long word). These rules apply under 640px only, and only change a row that
   does not fit: a row that already fits on the screen lays out exactly as
   before. The zero-weight :where() rules yield to any size or wrap an element
   sets itself. The "Why the current trials fall short" heading is fixed at its
   own rule in compact.css. */
@media (max-width: 639px) {
  :where(main .flex) > :where(*) { min-width: 0; }
  :where(main .flex) { flex-wrap: wrap; }
  :where(main .grid) > :where(*) { min-width: 0; }
  html:root main :is(.shrink-0, .flex-none) { flex-shrink: 1; }
  html:root main .whitespace-nowrap { white-space: normal; }
  html:root main select { max-width: 100%; min-width: 0; }
  html:root main :is(a, .eyebrow, .font-mono) { overflow-wrap: anywhere; }
  html:root main .grid-cols-3 .font-display { font-size: 16px !important; }
}