/* ======================================================================
   rooms.css, the room language, shared. September 2026 (Arnold).

   The eight-room homepage (September 2026) introduced it: one idea per room,
   ruled lines instead of boxes, large type, and space between ideas. The
   primitives lived inline in index.html. They live here now so the hub
   pages (learn, tools, how-grades-work, testing) use the same rules, and a
   change to the room language is made once.

   :root tokens from assets/styles.css only. No Tailwind arbitrary classes,
   so gate_g20 and gate_g21 have nothing new to reconcile.
   ====================================================================== */

/* ---------- primitives (moved from index.html) ---------- */
.ebl-room { position: relative; padding: 5.5rem 0; }
.ebl-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.4rem; }
.ebl-narrow { max-width: 44rem; }
.ebl-mid { max-width: 52rem; }
.ebl-pause { min-height: min(78svh, 760px); display: flex; align-items: center; }
.ebl-pause > .ebl-wrap, .ebl-pause > section { width: 100%; }
.ebl-rule { height: 1px; background: var(--line); max-width: 68rem; margin: 0 auto; }
.ebl-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
/* October 2026: height 0 and overflow hidden added. On learn.html app.js rendered all 238
   evidence-log entries into the hidden #evidence-log anchor as well as the real host,
   and a hidden block still takes its height: 48,000 px of black between the FAQ and
   the Evidence Log. An anchor now has no footprint whatever is written into it.
   gate_g202_anchor_host_collision.py holds this rule. */
.ebl-anchor { display: block; position: relative; top: -5rem; height: 0; overflow: hidden; visibility: hidden; }

@media (min-width: 900px) {
  .ebl-room { padding: 7.5rem 0; }
  .ebl-wrap { padding: 0 2.5rem; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ebl-rv { animation: ebl-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes ebl-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  }
}

/* ---------- hub rooms ---------- */

/* Room 1 of a hub: the page's one sentence, alone on the screen. */
.ebl-hub-open { min-height: min(72svh, 720px); display: flex; flex-direction: column; justify-content: center; padding: 4rem 0 3rem; overflow: hidden; }
.ebl-hub-open::before { content: ""; position: absolute; inset: -25% -30% auto auto; width: 62vw; height: 62vw; max-width: 720px; max-height: 720px; background: radial-gradient(closest-side, var(--lime-glow), transparent 70%); opacity: .55; pointer-events: none; }
.ebl-hub-open > .ebl-wrap { position: relative; width: 100%; min-width: 0; }
.ebl-hub-h { margin-top: 1.1rem; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: clamp(2.4rem, 5vw + .5rem, 4.8rem); line-height: 1.03; letter-spacing: -.035em; color: var(--ink-0); max-width: 17ch; text-wrap: balance; }
.ebl-hub-h em { font-style: normal; color: var(--lime); }
.ebl-hub-sub { margin-top: 1.5rem; font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); line-height: 1.55; color: var(--ink-1); max-width: 38rem; text-wrap: pretty; }
.ebl-hub-btn { margin-top: 2.2rem; display: inline-flex; max-width: 100%; align-items: center; gap: .75rem; background: var(--lime); color: var(--bg-0); font-weight: 600; font-size: 1.1rem; padding: 1rem 1.5rem; border-radius: 10px; box-shadow: 0 0 36px var(--lime-glow); transition: box-shadow .25s ease, transform .25s ease; }
.ebl-hub-btn:hover { transform: translateY(-1px); }
.ebl-hub-btn:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; }

/* A room's title. Serif, large, one line of thought. */
.ebl-hub-title { margin-top: .9rem; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 2vw + 1.2rem, 2.9rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink-0); max-width: 26ch; text-wrap: balance; }
.ebl-hub-title em { font-style: normal; color: var(--lime); }
.ebl-hub-lede { margin-top: 1.2rem; font-size: 17px; line-height: 1.6; color: var(--ink-1); max-width: 40rem; }

/* The statement room: a few serif lines, nothing else. */
.ebl-hub-lines { display: grid; gap: 2.2rem; }
.ebl-hub-lines p { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink-0); text-wrap: balance; }
.ebl-hub-lines .is-lime { color: var(--lime); }
.ebl-hub-lines .ebl-hub-small { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Doors: ruled rows that go somewhere. Same drawing as homepage Room 3. */
.ebl-doors { margin-top: 1.8rem; border-top: 1px solid var(--line-strong); }
.ebl-door { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line-strong); color: var(--ink-1); transition: color .2s ease, padding .25s ease; }
.ebl-door:hover { color: var(--ink-0); padding-left: .4rem; }
.ebl-door:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ebl-door-t { display: block; font-size: clamp(1.2rem, .8vw + 1rem, 1.55rem); font-weight: 500; color: var(--ink-0); }
.ebl-door-n { margin-right: .7rem; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.ebl-door-s { display: block; margin-top: .3rem; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ebl-door svg { color: var(--ink-3); transition: transform .25s ease, color .2s ease; }
.ebl-door:hover svg { color: var(--lime); transform: translateX(6px); }
.ebl-door.is-lead .ebl-door-t, .ebl-door.is-lead svg { color: var(--lime); }

/* The close: one line, then the boundary. */
.ebl-hub-close { font-family: 'Newsreader', Georgia, serif; font-size: clamp(2rem, 3vw + 1rem, 3.6rem); line-height: 1.08; letter-spacing: -.015em; color: var(--ink-0); max-width: 20ch; text-wrap: balance; }
.ebl-hub-close em { font-style: normal; color: var(--lime); }
.ebl-hub-disc { margin-top: 1.4rem; font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 40rem; }

/* ---------- existing hub markup, unboxed ----------
   Inside a room marked .ebl-unbox, the cards the hub already carries lose
   their box and become ruled items, which is what the room language is.
   Content, ids and data-testids are untouched; only the drawing changes. */
.ebl-unbox .card { background: transparent; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
.ebl-unbox .card:hover { transform: none; }
.ebl-unbox .space-y-4 > .card + .card, .ebl-unbox .space-y-3 > .card + .card { margin-top: 0; }
.ebl-unbox .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ebl-unbox .h-section { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(1.9rem, 2vw + 1.2rem, 2.9rem); line-height: 1.1; letter-spacing: -.01em; }
.ebl-unbox details.card > summary { padding: .2rem 0; }

/* Catalog rooms keep their product cards, drawn quieter. */
.ebl-catalog .card { background: transparent; border-color: var(--line-strong); }
.ebl-catalog h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; }

/* The grade ladder, one letter per room. */
.ebl-ladder > section { margin-top: 0; padding: 4.5rem 0; border-top: 1px solid var(--line); }
.ebl-ladder > section:first-of-type { border-top: 0; }
.ebl-ladder .ebl-sr-grade { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(5rem, 9vw, 8rem); line-height: .8; padding: 0; border: 0; background: none; margin-right: .6rem; }
.ebl-ladder > section > .flex { flex-wrap: wrap; row-gap: .4rem; }
.ebl-ladder h2 { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: clamp(1.7rem, 1.4vw + 1.2rem, 2.4rem); letter-spacing: -.02em; }
.ebl-ladder > section > p { font-size: 17px; line-height: 1.65; }
.ebl-ladder ol li { padding: 1.1rem 0; border-top: 1px solid var(--line); margin-top: 0; }

@media print {
  .ebl-hub-open { min-height: 0; padding: 1rem 0; }
  .ebl-hub-open::before { display: none; }
  .ebl-room { padding: 1.2rem 0; }
  .ebl-door svg { display: none; }
}

/* learn.html: the seven former tab panels, one room each, ruled apart. */
.ebl-learn-rooms > .learn-panel { border-top: 1px solid var(--line); }
.ebl-learn-rooms > .learn-panel:first-of-type { border-top: 0; }

/* Homepage Room 4 "try it" (render_try_it.py, assets/try-it.js), September 2026.
   Hidden until its script has run, so a reader without JavaScript never meets
   a search box that does nothing. */
.ebl-try { max-width: 30rem; margin: 2.4rem auto 0; display: none; }
.ebl-try.is-ready { display: block; }
.ebl-try-k { text-align: center; }
.ebl-try-lab { display: block; margin-top: .5rem; text-align: center; font-size: 16px; color: var(--ink-1); }
.ebl-try-box { position: relative; margin-top: .9rem; }
.ebl-try-box input { width: 100%; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 10px; padding: .85rem 1rem; color: var(--ink-0); outline: none; }
.ebl-try-box input:focus { border-color: var(--lime); }
.ebl-try-box input:disabled { opacity: .5; }
.ebl-try-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 12px; padding: .3rem; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.ebl-try-hit { display: flex; width: 100%; justify-content: space-between; gap: 1rem; align-items: baseline; text-align: left; padding: .6rem .7rem; border-radius: 8px; background: none; border: 0; color: var(--ink-0); cursor: pointer; font-size: 15px; }
.ebl-try-hit:hover, .ebl-try-hit:focus-visible { background: rgba(255,255,255,.06); outline: none; }
.ebl-try-hit-k { flex: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ebl-try-none { padding: .7rem; font-size: 14px; color: var(--ink-2); }
.ebl-try-note { margin-top: .6rem; text-align: center; font-size: 13px; color: var(--ink-3); }
.ebl-try-go { margin-top: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ebl-try-go[hidden] { display: none; }
.ebl-try-btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--lime); color: var(--bg-0); font-weight: 600; font-size: 1rem; padding: .85rem 1.3rem; border-radius: 10px; }
.ebl-try-btn:focus-visible { outline: 2px solid var(--ink-0); outline-offset: 3px; }
.ebl-try-clear { background: none; border: 0; color: var(--ink-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ======================================================================
   Supplement pages in rooms (render_supp_rooms.py), September 2026.
   Keyed to main.ebl-sp-rooms, so nothing changes on a page the renderer
   has not reached. Unboxes the cards the pages already carry; the safety
   block keeps its own color and is never unboxed.
   ====================================================================== */
.ebl-sp-rooms .ebl-wrap { padding: 0; }
.ebl-sp-rooms > nav:first-child { margin-bottom: 0; }
.ebl-sp-r1 { min-height: min(72svh, 700px); display: flex; align-items: center; padding: 3rem 0 4rem; overflow: visible; }
.ebl-sp-r1::before { content: ""; position: absolute; inset: -10% -20% auto auto; width: 56vw; height: 56vw; max-width: 640px; max-height: 640px; background: radial-gradient(closest-side, var(--lime-glow), transparent 70%); opacity: .5; pointer-events: none; }
.ebl-sp-r1-grid { position: relative; display: grid; gap: 1.6rem; align-items: end; width: 100%; }
@media (min-width: 900px) { .ebl-sp-r1-grid { grid-template-columns: auto minmax(0, 1fr); gap: 3.2rem; } }
.ebl-sp-letter { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(8rem, 17vw, 14rem); line-height: .74; }
.ebl-sp-letter.g-a { color: var(--lime); } .ebl-sp-letter.g-b { color: var(--blue); } .ebl-sp-letter.g-c { color: var(--amber); } .ebl-sp-letter.g-d { color: var(--rust); }
.ebl-sp-r1-id { min-width: 0; }
.ebl-sp-r1 h1 { overflow-wrap: anywhere; hyphens: auto; margin-top: .7rem; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important; font-weight: 700; font-size: clamp(2.3rem, 3.6vw + .6rem, 4rem) !important; line-height: 1.03 !important; letter-spacing: -.03em; color: var(--ink-0); text-wrap: balance; }
.ebl-sp-for { margin-top: 1rem; font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); line-height: 1.45; color: var(--ink-1); max-width: 34rem; }
.ebl-sp-scope { margin-top: 1.2rem; font-size: 14px; line-height: 1.55; color: var(--ink-3); max-width: 34rem; }
.ebl-sp-r1 .ebl-sp-jump { margin-top: 1.6rem; }
.ebl-sp-state { min-height: min(46svh, 460px); display: flex; align-items: center; }
.ebl-sp-state-t { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height: 1.15; color: var(--ink-0); text-wrap: balance; }
.ebl-sp-state-t em { font-style: normal; color: var(--lime); }
.ebl-sp-uses { padding-top: 2rem; }
/* space between the sections the pages already carry */
.ebl-sp-rooms > div, .ebl-sp-rooms > details, .ebl-sp-rooms > section:not(.ebl-room) { margin-top: 4rem; }
/* unbox: bordered cards become ruled sections */
.ebl-sp-rooms .rounded-xl.border, .ebl-sp-rooms .card { background: transparent !important; border-width: 1px 0 0 0 !important; border-color: var(--line-strong) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-shadow: none !important; }
.ebl-sp-rooms .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-size: 12px; }
.ebl-sp-rooms .text-\[14px\] { font-size: 16px; line-height: 1.65; }
.ebl-sp-rooms .text-\[13px\] { font-size: 15px; line-height: 1.6; }
.ebl-sp-rooms .text-\[12\.5px\], .ebl-sp-rooms .text-\[12px\] { font-size: 14px; }
@media (max-width: 640px) { .ebl-sp-r1 { min-height: 0; padding: 2rem 0 3rem; } .ebl-sp-state { min-height: 0; padding: 3rem 0; } }
@media print { .ebl-sp-r1, .ebl-sp-state { min-height: 0; padding: 1rem 0; } .ebl-sp-r1::before { display: none; } }
/* the per-use block, drawn like the prototype: big letters, no inner boxes */
.ebl-sp-rooms [data-ebl-usegrades] > .grid { gap: 0; }
.ebl-sp-rooms [data-ebl-usegrades] > .grid > div { padding: 1.6rem 0 !important; }
.ebl-sp-rooms [data-ebl-usegrades] .tier { font-family: 'Newsreader', Georgia, serif; font-size: 3rem; line-height: .8; background: none !important; border: 0 !important; padding: 0 .4rem 0 0; min-width: 2.6rem; }
.ebl-sp-rooms [data-ebl-usegrades] .tier-A { color: var(--lime); } .ebl-sp-rooms [data-ebl-usegrades] .tier-B { color: var(--blue); }
.ebl-sp-rooms [data-ebl-usegrades] .tier-C { color: var(--amber); } .ebl-sp-rooms [data-ebl-usegrades] .tier-D { color: var(--rust); }
.ebl-sp-rooms [data-ebl-usegrades] .text-\[15px\] { font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); }
.ebl-sp-rooms [data-ebl-usegrades] .rounded-lg { background: transparent !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.ebl-sp-rooms [data-ebl-usegrades] .text-\[9\.5px\], .ebl-sp-rooms [data-ebl-usegrades] .text-\[10px\] { font-size: 12px; }
.ebl-sp-rooms [data-ebl-usegrades] .text-\[12\.5px\] { font-size: 15px; }
.ebl-sp-rooms [data-ebl-usegrades] > .eyebrow { margin-bottom: 1rem; }
/* Lower rooms (September 2026). Room 1 carries the letter, so the small chip row that
   opened the old top card repeats it; it stays in the source and is hidden here. */
.ebl-sp-rooms .md\:col-span-7 > div.flex.items-center.gap-3.mb-3:first-child:has(> .tier) { display: none; }
.ebl-sp-rooms .text-\[9\.5px\], .ebl-sp-rooms .text-\[10px\], .ebl-sp-rooms .text-\[10\.5px\] { font-size: 12px; }
.ebl-sp-rooms .text-\[11px\], .ebl-sp-rooms .text-\[11\.5px\] { font-size: 13px; }
.ebl-sp-rooms .text-\[16px\] { font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem); line-height: 1.55; }
.ebl-sp-rooms > .grid { margin-top: 4.5rem; row-gap: 3rem; }
@media print { .ebl-sp-rooms .md\:col-span-7 > div.flex.items-center.gap-3.mb-3:first-child:has(> .tier) { display: flex; } }

/* ======================================================================
   Drug pages in rooms (render_drug_rooms.py), September 2026.
   Keyed to main.ebl-d-rooms. Room 1 shares the supplement room's grid;
   the numeral is the count of depletion rows, colored by the most severe.
   ====================================================================== */
.ebl-d-rooms .ebl-wrap { padding: 0; }
.ebl-d-r1 { min-height: min(64svh, 620px); display: flex; align-items: center; padding: 2.5rem 0 3.5rem; overflow: visible; }
.ebl-d-r1::before { content: ""; position: absolute; inset: -10% -20% auto auto; width: 56vw; height: 56vw; max-width: 640px; max-height: 640px; background: radial-gradient(closest-side, var(--lime-glow), transparent 70%); opacity: .35; pointer-events: none; }
.ebl-d-num { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(8rem, 17vw, 14rem); line-height: .74; }
.ebl-d-num.s-crit { color: #ff6b4a; } .ebl-d-num.s-mod { color: #ffb547; } .ebl-d-num.s-mild { color: #7cc5ff; }
.ebl-d-r1 h1 { overflow-wrap: anywhere; hyphens: auto; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important; font-weight: 700; font-size: clamp(2.3rem, 3.6vw + .6rem, 4rem) !important; line-height: 1.03 !important; letter-spacing: -.03em; color: var(--ink-0); text-wrap: balance; }
.ebl-d-r1 .text-\[15px\] { font-size: 17px; }
.ebl-d-state { min-height: min(40svh, 400px); display: flex; align-items: center; }
.ebl-d-rooms .ebl-sp-state-t em { font-style: normal; color: var(--lime); }
.ebl-d-rooms > .space-y-4 { margin-top: 3rem; }
.ebl-d-rooms > .space-y-4 > * + * { margin-top: 0 !important; }
.ebl-d-rooms .card, .ebl-d-rooms .rounded-xl.border { background: transparent !important; border-width: 1px 0 0 0 !important; border-color: var(--line-strong) !important; border-radius: 0 !important; padding: 2.4rem 0 !important; box-shadow: none !important; }
.ebl-d-rooms .card .font-display.text-\[22px\] { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.9rem, 1.6vw + 1.2rem, 2.6rem); line-height: 1.1; }
.ebl-d-rooms .text-\[14px\] { font-size: 16px; line-height: 1.65; }
.ebl-d-rooms .text-\[12px\], .ebl-d-rooms .text-\[12\.5px\] { font-size: 14px; }
.ebl-d-rooms .text-\[10px\], .ebl-d-rooms .text-\[11px\] { font-size: 12px; }
.ebl-d-rooms .card .rounded-lg { padding: 1.1rem 1.25rem; }
.ebl-d-rooms > .mt-10.card { margin-top: 4rem; }
@media (max-width: 640px) { .ebl-d-r1 { min-height: 0; padding: 2rem 0 3rem; } .ebl-d-state { min-height: 0; padding: 3rem 0; } }
@media print { .ebl-d-r1, .ebl-d-state { min-height: 0; padding: 1rem 0; } .ebl-d-r1::before { display: none; } }

/* ======================================================================
   Condition pages in rooms (render_condition_rooms.py), September 2026.
   Keyed to main.ebl-c-rooms. Room 1 is the title; Room 2 counts the letters
   the rows below print. Cautions (a card with an inline color) keep their box.
   ====================================================================== */
.ebl-c-rooms .ebl-wrap { padding: 0; }
.ebl-c-r1 { min-height: min(52svh, 520px); display: flex; align-items: center; padding: 2.5rem 0 3rem; overflow: visible; }
.ebl-c-r1::before { content: ""; position: absolute; inset: -10% -20% auto auto; width: 56vw; height: 56vw; max-width: 640px; max-height: 640px; background: radial-gradient(closest-side, var(--lime-glow), transparent 70%); opacity: .35; pointer-events: none; }
.ebl-c-r1-id { position: relative; min-width: 0; }
.ebl-c-r1 h1 { overflow-wrap: anywhere; hyphens: auto; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important; font-weight: 700; font-size: clamp(2.6rem, 4.4vw + .6rem, 5rem) !important; line-height: 1.02 !important; letter-spacing: -.035em; color: var(--ink-0); text-wrap: balance; }
.ebl-c-r1 .text-\[18px\] { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.35rem, 1vw + 1.1rem, 1.8rem); line-height: 1.35; color: var(--ink-1); }
.ebl-c-tally { padding: 3rem 0 3.5rem; border-top: 1px solid var(--line-strong); }
.ebl-c-cells { display: flex; flex-wrap: wrap; gap: 1.2rem 2.8rem; margin-top: 1.4rem; }
.ebl-c-cell { display: flex; align-items: baseline; gap: .7rem; }
.ebl-c-l { font-family: 'Newsreader', Georgia, serif; font-size: clamp(3.4rem, 5vw, 5.2rem); line-height: .9; }
.ebl-c-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.4rem; color: var(--ink-1); }
.ebl-c-cell.g-a .ebl-c-l { color: var(--lime); } .ebl-c-cell.g-b .ebl-c-l { color: var(--blue); }
.ebl-c-cell.g-c .ebl-c-l { color: var(--amber); } .ebl-c-cell.g-d .ebl-c-l { color: var(--rust); }
.ebl-c-cell.g-ng .ebl-c-l { color: var(--ink-3); font-size: clamp(2rem, 3vw, 3rem); }
.ebl-c-cell.is-zero { opacity: .28; }
.ebl-c-say { margin-top: 1.6rem; font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem); line-height: 1.5; color: var(--ink-1); max-width: 40rem; }
.ebl-c-rooms > .mt-10 { margin-top: 4rem; }
.ebl-c-rooms .card:not([style]) { background: transparent !important; border-width: 1px 0 0 0 !important; border-color: var(--line-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.ebl-c-rooms .card:not([style]) > .flex, .ebl-c-rooms .card:not([style]) > .block > .flex, .ebl-c-rooms .card:not([style]) > a > .flex { padding: 1.5rem 0; }
.ebl-c-rooms .font-display.text-\[16px\] { font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); }
.ebl-c-rooms .tier { width: auto; height: auto; font-family: 'Newsreader', Georgia, serif; font-size: 2.2rem; line-height: .9; background: none !important; border: 0 !important; padding: 0 .3rem 0 0; min-width: 2.4rem; }
.ebl-c-rooms .tier-A { color: var(--lime); } .ebl-c-rooms .tier-B { color: var(--blue); } .ebl-c-rooms .tier-C { color: var(--amber); } .ebl-c-rooms .tier-D { color: var(--rust); }
.ebl-c-rooms .tier-NA { color: var(--ink-3); font-size: 1.3rem; padding-top: .35rem; }
.ebl-c-rooms .text-\[14px\] { font-size: 16px; line-height: 1.65; }
.ebl-c-rooms .text-\[13px\] { font-size: 15px; line-height: 1.6; }
.ebl-c-rooms .text-\[12px\], .ebl-c-rooms .text-\[12\.5px\] { font-size: 14px; }
.ebl-c-rooms .text-\[10px\], .ebl-c-rooms .text-\[11px\] { font-size: 12px; }
@media (max-width: 640px) { .ebl-c-r1 { min-height: 0; padding: 2rem 0 2.5rem; } .ebl-c-cells { gap: 1rem 1.8rem; } }
@media print { .ebl-c-r1 { min-height: 0; padding: 1rem 0; } .ebl-c-r1::before { display: none; } }

/* ======================================================================
   Device and protocol pages in rooms (render_device_rooms.py), September 2026.
   Main carries ebl-dv-rooms AND ebl-sp-rooms, so the supplement room styles
   apply; these rules hide the small chip the letter room now repeats.
   ====================================================================== */
.ebl-dv-rooms .flex.items-start.gap-4.mb-4 > .tier.shrink-0:first-child { display: none; }
.ebl-dv-rooms .flex.items-center.gap-3.mt-5.mb-1:has(> .tier) { display: none; }
.ebl-dv-rooms .text-\[15px\] { font-size: 17px; line-height: 1.6; }
@media print { .ebl-dv-rooms .flex.items-start.gap-4.mb-4 > .tier.shrink-0:first-child { display: flex; } .ebl-dv-rooms .flex.items-center.gap-3.mt-5.mb-1:has(> .tier) { display: flex; } }
/* the per-use block on device and protocol pages, unboxed with large letters */
.ebl-dv-uses .card, .ebl-dv-uses .rounded-xl { background: transparent !important; border: 0 !important; border-top: 1px solid var(--line-strong) !important; border-radius: 0 !important; padding: 1.5rem 0 !important; margin: 0 !important; }
.ebl-dv-uses > .ebl-wrap > .card { border-top: 0 !important; padding-top: 0 !important; }
.ebl-dv-uses .tier { width: auto !important; height: auto !important; font-family: 'Newsreader', Georgia, serif; font-size: 2.6rem !important; line-height: .9; background: none !important; border: 0 !important; padding: 0 .4rem 0 0; min-width: 2.4rem; }
.ebl-dv-uses .tier-A { color: var(--lime); } .ebl-dv-uses .tier-B { color: var(--blue); } .ebl-dv-uses .tier-C { color: var(--amber); } .ebl-dv-uses .tier-D { color: var(--rust); }
.ebl-dv-uses .text-\[14px\].text-ink-0 { font-size: clamp(1.1rem, .6vw + 1rem, 1.35rem); }
.ebl-dv-uses .text-\[13px\] { font-size: 15px; line-height: 1.6; }
/* tighter rhythm on these pages: the statement room does not need half a screen */
.ebl-dv-rooms .ebl-sp-state { min-height: 0; padding: 3.5rem 0; }
.ebl-dv-rooms .ebl-dv-r1 { min-height: min(60svh, 600px); }

/* ======================================================================
   Hand-written pages in rooms (render_page_rooms.py), October 2026.
   main.ebl-pg-rooms; the section holding the <h1> is .ebl-pg-hero.
   ====================================================================== */
.ebl-pg-rooms .ebl-pg-hero { position: relative; min-height: min(62svh, 620px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left !important; max-width: 72rem !important; padding-top: 4rem !important; padding-bottom: 4rem !important; overflow: visible; }
.ebl-pg-rooms .ebl-pg-hero::before { content: ""; position: absolute; inset: -10% 0 auto auto; width: 56vw; height: 56vw; max-width: 640px; max-height: 640px; background: radial-gradient(closest-side, var(--lime-glow), transparent 70%); opacity: .4; pointer-events: none; z-index: -1; }
.ebl-pg-rooms .ebl-pg-hero > .inline-flex.rounded-full { border: 0 !important; background: none !important; padding: 0 !important; margin-bottom: 1rem; }
.ebl-pg-rooms .ebl-pg-hero > .inline-flex.rounded-full > .rounded-full { display: none; }
.ebl-pg-rooms .ebl-pg-hero h1 { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important; font-weight: 700 !important; font-size: clamp(2.6rem, 4.6vw + .6rem, 5rem) !important; line-height: 1.02 !important; letter-spacing: -.035em; color: var(--ink-0); max-width: 18ch; text-wrap: balance; margin-left: 0 !important; overflow-wrap: anywhere; }
.ebl-pg-rooms .ebl-pg-hero h1 .text-ink-2 { color: var(--ink-2); }
.ebl-pg-rooms .ebl-pg-hero h1 + p { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.3rem, 1vw + 1.1rem, 1.75rem) !important; line-height: 1.4 !important; color: var(--ink-1) !important; max-width: 40rem !important; margin-left: 0 !important; margin-top: 1.6rem !important; }
.ebl-pg-rooms .ebl-pg-hero > p:not(:first-of-type) { font-size: 17px; max-width: 40rem; margin-left: 0 !important; }
.ebl-pg-rooms .ebl-pg-hero .justify-center { justify-content: flex-start !important; }
.ebl-pg-rooms .ebl-pg-hero .mx-auto { margin-left: 0 !important; }
.ebl-pg-rooms .glow { display: none; }
/* single feature boxes become ruled sections; grids of cards keep their boxes */
.ebl-pg-rooms section > .rounded-2xl.border, .ebl-pg-rooms section > .rounded-xl.border, .ebl-pg-rooms section > .card:not([style]) { background: transparent !important; border-width: 1px 0 0 0 !important; border-color: var(--line-strong) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-shadow: none !important; }
.ebl-pg-rooms section > .rounded-2xl.border p.font-display { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem) !important; line-height: 1.3 !important; }
.ebl-pg-rooms .text-\[14px\] { font-size: 16px; line-height: 1.65; }
.ebl-pg-rooms .text-\[15px\] { font-size: 17px; line-height: 1.65; }
.ebl-pg-rooms .text-\[13px\] { font-size: 15px; }
.ebl-pg-rooms .text-\[12px\] { font-size: 14px; }
.ebl-pg-rooms .text-\[10px\], .ebl-pg-rooms .text-\[9px\] { font-size: 12px; }
@media (max-width: 640px) { .ebl-pg-rooms .ebl-pg-hero { min-height: 0; padding-top: 2.5rem !important; padding-bottom: 3rem !important; } }
@media print { .ebl-pg-rooms .ebl-pg-hero { min-height: 0; } .ebl-pg-rooms .ebl-pg-hero::before { display: none; } }
/* lighter treatment: the <h1> sits directly in <main> (render_page_rooms.py flat mode) */
.ebl-pg-rooms h1.ebl-pg-title { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important; font-weight: 700 !important; font-size: clamp(2.3rem, 3.6vw + .6rem, 4.2rem) !important; line-height: 1.04 !important; letter-spacing: -.03em; color: var(--ink-0); text-wrap: balance; overflow-wrap: anywhere; margin-top: 2.5rem; margin-bottom: 1.4rem; }
.ebl-pg-rooms h1.ebl-pg-title + p { font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.2rem, .8vw + 1.05rem, 1.55rem) !important; line-height: 1.45 !important; color: var(--ink-1) !important; max-width: 42rem; }
/* figures set never to wrap must wrap on a phone, or the page scrolls sideways */
@media (max-width: 640px) { .ebl-pg-rooms .whitespace-nowrap { white-space: normal; } }


/* ---------- latest-changes ticker (restored October 2026, homepage) ----------
   One thin line under the top menu. The scrolling itself is the existing
   .marquee / .marquee__track in styles.css; this adds the frame, the label,
   the pause control and the reduced-motion fallback. gate_g199. */
.ebl-ticker { display: flex; align-items: center; gap: .9rem; padding: .45rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--bg-1); font-size: 13.5px; line-height: 1.4; color: var(--ink-1); }
.ebl-ticker-k { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.ebl-ticker-k:hover { text-decoration: underline; }
.ebl-ticker-view { flex: 1 1 auto; min-width: 0; }
.ebl-ticker-view .marquee__track { gap: 2.6rem; white-space: nowrap; animation-duration: 192s !important; } /* October 2026 (Arnold): about 17% slower than the 160s every other marquee uses (styles.css, also !important) */
.ebl-ticker-view a { color: var(--ink-1); }
.ebl-ticker-view a:hover { color: var(--lime); }
/* October 2026: keyboard focus pauses the strip only when it is on a link INSIDE the strip.
   It used to be focus anywhere in .ebl-ticker, which included the Pause button itself:
   after a click the button kept focus, so Play changed the label and the strip stayed paused. */
.ebl-ticker.is-paused .marquee__track, .ebl-ticker-view:focus-within .marquee__track { animation-play-state: paused; }
.ebl-ticker-pause { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
.ebl-ticker-pause:hover { color: var(--ink-0); border-color: var(--ink-3); }
/* October 2026: with JavaScript the strip is a native horizontal scroller that app.js nudges
   (startTickerScroll), so a finger or trackpad can move it. The CSS transform is switched off
   and the scrollbar hidden; the edge fade from .marquee stays. */
.ebl-ticker.is-js .ebl-ticker-view { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.ebl-ticker.is-js .ebl-ticker-view::-webkit-scrollbar { display: none; }
.ebl-ticker.is-js .ebl-ticker-view .marquee__track { animation: none !important; transform: none !important; }
/* October 2026: an empty strip (no JavaScript, or an empty log) is not drawn at all, rather than a label beside a blank track and a Pause button for nothing. */
.ebl-ticker:not(:has(#ticker-track > *)) { display: none; }
.ebl-ticker-pause:focus-visible, .ebl-ticker-k:focus-visible, .ebl-ticker-view a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
@media (max-width: 639px) { .ebl-ticker { gap: .6rem; padding: .4rem .8rem; font-size: 13px; } .ebl-ticker-k { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ebl-ticker-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ebl-ticker-view .marquee__track { animation: none !important; transform: none !important; }
  .ebl-ticker-view [aria-hidden="true"] { display: none; }
  .ebl-ticker-pause { display: none; }
}


/* ---------- chapters (homepage, October 2026, Arnold: "Chapters Lite") ----------
   Every top-level homepage room carries .ebl-chaptered and a small chapter
   number; every second room also carries .ebl-band, a lifted charcoal, so
   the rooms can be counted at a glance. The bands do the separating; the
   boundary is a faint neutral line, not lime. No glow, no outer container.
   The number is decorative (aria-hidden): the room headings already carry
   the structure for assistive technology. gate_g200 holds the sequence. */
:root { --band: #111815; --chap: rgba(198, 255, 58, 0.5); }
.ebl-chaptered { position: relative; }
/* Room padding is raised so every room clears its number and gets more air.
   The hero keeps its own vertical centering; it only gains top room. */
.ebl-chaptered.ebl-room:not(.ebl-hero):not(.ebl-hub-open) { padding-top: 4.75rem; padding-bottom: 4.75rem; }
.ebl-hero.ebl-chaptered { padding-top: 4.25rem; }
.ebl-band { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ebl-chap { position: absolute; top: 2rem; left: max(1.4rem, calc((100% - 68rem) / 2 + 1.4rem)); z-index: 2; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; color: var(--chap); pointer-events: none; }
@media (min-width: 900px) {
  .ebl-chaptered.ebl-room:not(.ebl-hero):not(.ebl-hub-open) { padding-top: 8.5rem; padding-bottom: 8.25rem; }
  .ebl-hero.ebl-chaptered { padding-top: 5rem; }
  .ebl-chap { top: 2.6rem; left: max(2.5rem, calc((100% - 68rem) / 2 + 2.5rem)); }
}

/* Hub pages (October 2026). render_room_chapters.py stamps the numbers and bands
   on every room page. A room inside a narrower container (Learn's former tab
   panels, Testing's catalog) gets .ebl-bleed: the band is drawn edge to edge
   with a box-shadow and clipped to the room's own height, so it reads as a
   full-width band, never as a box. Its number sits on the container's edge. */
.ebl-band.ebl-bleed { border-top: 0; border-bottom: 0; box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.ebl-wrap .ebl-chaptered > .ebl-chap { left: 0; }
.ebl-catalog.ebl-chaptered > .ebl-chap { left: 1.25rem; }
@media (min-width: 768px) { .ebl-catalog.ebl-chaptered > .ebl-chap { left: 2rem; } }
.ebl-hub-open.ebl-chaptered > .ebl-chap, .ebl-hero.ebl-chaptered > .ebl-chap { top: 1.6rem; }

/* Fade-up for browsers without scroll-driven animation (Safari, Firefox),
   October 2026. assets/app.js adds .ebl-rv-io to <html> only where
   animation-timeline is unsupported and motion is allowed, then marks each
   .ebl-rv .is-in as it scrolls into view. Without JavaScript nothing is
   hidden. Chrome and Edge keep the scroll-driven version above. */
@media (prefers-reduced-motion: no-preference) {
  .ebl-rv-io .ebl-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
  .ebl-rv-io .ebl-rv.is-in { opacity: 1; transform: none; }
}
@media print { .ebl-rv-io .ebl-rv { opacity: 1 !important; transform: none !important; } .ebl-chap { display: none; } }

/* Drug-nutrient picture, added 2026-10, written by render_drug_rooms.depletion_map.
   HTML rather than an image so it uses the page fonts, reflows on a phone and
   reads aloud in order. Colors are the severity colors the cards below use. */
.ebl-d-map { padding: 2.5rem 0 3rem; }
.ebl-dmap-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 1rem; }
.ebl-dmap { display: grid; grid-template-columns: minmax(0, 14rem) auto minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.ebl-dmap-drug { border: 1px solid var(--line-strong); border-radius: 14px; padding: 1.1rem 1.25rem; background: var(--bg-2); color: var(--ink-0); font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; }
.ebl-dmap-arrow { position: relative; min-width: 6.5rem; height: 2rem; display: flex; align-items: flex-start; justify-content: center; }
.ebl-dmap-arrow::before { content: ""; position: absolute; left: 0; right: 10px; top: 1.45rem; border-top: 1.5px solid var(--ink-2); }
.ebl-dmap-arrow::after { content: ""; position: absolute; right: 0; top: calc(1.45rem - 5px); border-left: 10px solid var(--ink-2); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ebl-dmap-arrow span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-3); }
.ebl-dmap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ebl-dmap-row { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: .75rem; align-items: baseline; border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; background: var(--bg-2); }
.ebl-dmap-dot { width: 12px; height: 12px; border-radius: 999px; grid-row: span 2; align-self: center; }
.ebl-dmap-n { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 17px; color: var(--ink-0); }
.ebl-dmap-m { font-size: 14px; color: var(--ink-2); }
.ebl-dmap-row.s-crit .ebl-dmap-dot { background: #ff6b4a; } .ebl-dmap-row.s-crit { border-color: rgba(255,107,74,0.35); }
.ebl-dmap-row.s-mod .ebl-dmap-dot { background: #ffb547; } .ebl-dmap-row.s-mod { border-color: rgba(255,181,71,0.35); }
.ebl-dmap-row.s-mild .ebl-dmap-dot { background: #7cc5ff; } .ebl-dmap-row.s-mild { border-color: rgba(124,197,255,0.30); }
.ebl-dmap-note { margin-top: 1.1rem; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 46rem; }
@media (max-width: 640px) {
  .ebl-dmap { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .ebl-dmap-arrow { min-width: 0; height: 2.2rem; justify-content: flex-start; padding-left: 1.6rem; }
  .ebl-dmap-arrow::before { left: .55rem; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px solid var(--ink-2); }
  .ebl-dmap-arrow::after { left: calc(.55rem - 5px); right: auto; top: auto; bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid var(--ink-2); border-bottom: 0; }
  .ebl-dmap-arrow span { line-height: 2.2rem; }
}

/* COMPACT RECORD PAGES: the rules written here in October 2026 moved to
   assets/compact.css the same day, because /rx/ pages are compacted too and
   do not load this sheet. render_supp_compact.py links compact.css on every
   page it compacts. */