/* ==========================================================================
   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: 0.875rem; /* 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; }
}