/* ============================================================
   ENTEROHEPATIC CIRCULATION LOOP  ·  styles for window.EnterohepaticLoop
   GIN Physiology · Liver and Gallbladder · lv-enterohepatic

   §4.2 of the integration prompt: the prototype's <style> block moved
   here verbatim and scoped under the single root class .ehloop, which
   mount() applies to the host. NO VALUE WAS CHANGED — every length,
   colour, weight, radius and breakpoint is the approved prototype's.

   Two things the prototype's body rule carried are deliberately NOT
   reproduced: `margin: 0; padding: 24px` and the page background, which
   belong to a standalone document and would fight the topic card. The
   colour and font-family from that rule ARE kept, on .ehloop.

   §4.7: the font stack is character-for-character identical to the
   platform's, so it is written once here rather than repeated; no hex
   was swapped for a kit variable, because none matched exactly.

   §4.6: the prototype has no animation and none was added, so there is
   nothing for prefers-reduced-motion to disable — the guard is present
   anyway, so that any future transition added here is covered by
   default rather than by memory.
   ============================================================ */

.ehloop, .ehloop * { box-sizing: border-box; }

.ehloop {
    color: #111111;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ehloop .wrap { max-width: 980px; margin: 0 auto; }
.ehloop h1 { font-size: 21px; margin: 0 0 4px; }
.ehloop .sub { font-size: 14px; margin: 0 0 20px; }

.ehloop .panel { border: 2px solid #D8D2C7; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.ehloop svg.loop { width: 100%; height: auto; display: block; }

.ehloop .controlrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ehloop .controlrow .lab { font-size: 13px; font-weight: 700; white-space: nowrap; }
.ehloop input[type=range] { flex: 1 1 300px; accent-color: #4B7B3F; }
.ehloop .cap { font-size: 28px; font-weight: 700; min-width: 96px; text-align: right; }

.ehloop .presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ehloop button.preset {
    font: inherit; font-size: 13px; font-weight: 700;
    padding: 8px 15px; border-radius: 9px; cursor: pointer;
    background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8;
}
.ehloop button.preset.on { background: #EFF4EC; border-color: #4B7B3F; }

.ehloop .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 760px) { .ehloop .cards { grid-template-columns: 1fr 1fr; } }
.ehloop .card { border: 2px solid #B8B8B8; border-left-width: 6px; border-radius: 10px; padding: 10px 12px; }
.ehloop .card .k { font-size: 10.5px; font-weight: 700; }
.ehloop .card .v { font-size: 19px; font-weight: 700; margin-top: 3px; }
.ehloop .card .n { font-size: 10.5px; margin-top: 2px; }

.ehloop .enzyme { border: 2px solid #C9922A; background: #FFF1D2; border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.ehloop .enzyme .h { font-size: 13px; font-weight: 700; }
.ehloop .enzyme .b { font-size: 13px; margin-top: 3px; }

.ehloop .verdict { border: 2px solid #4B7B3F; background: #EFF4EC; border-radius: 10px; padding: 13px 15px; margin-top: 16px; }
.ehloop .verdict.warn { border-color: #C9922A; background: #FFF1D2; }
.ehloop .verdict.bad { border-color: #B4362F; background: #FAEDEC; }
.ehloop .verdict .h { font-size: 15px; font-weight: 700; }
.ehloop .verdict .b { font-size: 14px; margin-top: 4px; }

.ehloop .locked { border: 2px solid #B4362F; background: #FAEDEC; border-radius: 10px; padding: 13px 15px; margin-top: 20px; }
.ehloop .locked .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.ehloop .locked ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.ehloop .locked li { margin-bottom: 5px; }
.ehloop .foot { font-size: 12px; margin-top: 8px; }

/* ------------------------------------------------------------------
   §4.4 — THE REQUIRED NARROW-SCREEN FIX.

   The prompt-01 audit found that existing interactives shrink to about
   0.29 scale in a narrow column because they are not .mk-fig--dense,
   while authored figures floor at 640px inside a horizontally scrolling
   band and stay readable. This component is made to behave like the
   figures instead of shrinking.

   FLOOR = 620px, and it is derived rather than guessed. Two things set
   it. (a) The readout cards: at their 760px breakpoint they go 2-up,
   and each card has to hold "RETURNED TO THE LIVER" on one line at
   10.5px bold plus 24px of padding and 6px of border — about 290px per
   card, so 2 x 290 + 10px gap = 590px. (b) The loop diagram: its
   viewBox is 880 units wide and the smallest type in it is 10.5px, so
   at 620px it renders at 0.705 scale and that type lands at 7.4px —
   the same scale the module's .mk-fig--dense figures sit at on a phone,
   which is the legibility bar this fix is written against. 620 clears
   both, so nothing inside is ever laid out narrower than it was
   designed for.

   Above 620px the component is fluid exactly as the prototype is.
   ------------------------------------------------------------------ */
@media (max-width: 660px) {
    .ehloop { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ehloop > .wrap { min-width: 620px; }
}

/* §4.6 — no animation exists to disable, but the guard is here so that
   any transition added to the pool bar or a card value later is covered
   without anyone having to remember this rule. */
@media (prefers-reduced-motion: reduce) {
    .ehloop .card,
    .ehloop .verdict,
    .ehloop .enzyme,
    .ehloop svg.loop rect { transition: none !important; }
}