/* ============================================================
   RAR MEDICAL MICROBIOLOGY · CroupEpiglottitisFork (window.CroupEpiglottitisFork)
   Faithful port of CroupEpiglottitisFork_prototype.html. Internal layout,
   two-color semantic coding (croup = cyan, epiglottitis = red = the
   emergency), rows, clues, and quiz behavior are the LOCKED spec — only the
   outer chrome is dropped (the site's .topic-section-card + .section-label +
   <h3> already wrap it). All classes prefixed .cef- and scoped to .cef.
   ============================================================ */

.cef {
    --cef-ink: #111111; --cef-muted: #64748b; --cef-line: #e5e7eb; --cef-card: #ffffff;
    --cef-blue: #2563eb;
    --croup-ink: #0e7490; --croup-bg: #ecfeff; --croup-line: #a5f3fc;
    --epi-ink: #b91c1c; --epi-bg: #fef4f4; --epi-line: #fecaca;
    --cef-ok: #15803d; --cef-ok-bg: #f0fdf4; --cef-no: #b91c1c; --cef-no-bg: #fef2f2;
    color: var(--cef-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
}
.cef *, .cef *::before, .cef *::after { box-sizing: border-box; }

/* header row: mode toggle left, lede to its right — pulls the table up */
.cef-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 16px; }
.cef-lede { color: #334155; font-size: 14.5px; margin: 0; flex: 1 1 340px; min-width: 0; }
.cef-lede b { color: var(--cef-ink); }

.cef-modes { display: inline-flex; background: #eef2f7; border-radius: 11px; padding: 4px; margin-bottom: 0; gap: 2px; flex: 0 0 auto; }
.cef-modes button { border: 0; background: transparent; color: #475569; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
.cef-modes button.on { background: #fff; color: var(--cef-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.cef-modes button:focus-visible { outline: 2px solid var(--cef-blue); outline-offset: 2px; }

/* ---- compare ---- */
.cef-headrow { display: grid; grid-template-columns: 1fr 128px 1fr; gap: 10px; align-items: end; margin-bottom: 8px; }
.cef-side-h { border-radius: 12px; padding: 12px 14px; font-weight: 800; }
.cef-side-h .k { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; opacity: .8; }
.cef-side-h .n { font-size: 17px; }
.cef-side-h .b { font-size: 12.5px; font-weight: 600; opacity: .85; font-style: italic; }
.cef-h-croup { background: var(--croup-bg); border: 1px solid var(--croup-line); color: var(--croup-ink); }
.cef-h-epi { background: var(--epi-bg); border: 1px solid var(--epi-line); color: var(--epi-ink); }
.cef-h-epi .flag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; background: var(--epi-ink); color: #fff; border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.cef-axis-h { text-align: center; color: var(--cef-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 12px; }

.cef-grid { display: flex; flex-direction: column; gap: 7px; }
.cef-row { display: grid; grid-template-columns: 1fr 128px 1fr; gap: 10px; align-items: stretch; }
.cef-cell { padding: 11px 13px; border-radius: 10px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; }
.cef-c-croup { background: var(--croup-bg); border-color: var(--croup-line); color: #0b3f4a; }
.cef-c-epi { background: var(--epi-bg); border-color: var(--epi-line); color: #5c1414; }
.cef-axis { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12.5px; font-weight: 700; color: #475569; }
.cef-row.hot .cef-c-epi { outline: 2px solid var(--epi-ink); outline-offset: -1px; }
.cef-row .cef-cell b { font-weight: 800; }

.cef-never { margin-top: 18px; background: var(--epi-bg); border: 1px solid var(--epi-line); border-left: 4px solid var(--epi-ink); border-radius: 10px; padding: 13px 15px; color: #5c1414; font-size: 14px; }
.cef-never b { color: var(--epi-ink); }

/* ---- quiz ---- */
.cef-quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--cef-muted); font-size: 13.5px; font-weight: 600; }
.cef-bar { height: 6px; background: #eef2f7; border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.cef-bar > i { display: block; height: 100%; background: var(--cef-blue); width: 0; transition: width .35s ease; }
.cef-clue { background: #fff; border: 1px solid var(--cef-line); border-radius: 14px; padding: 26px 22px; text-align: center; margin-bottom: 18px; box-shadow: 0 6px 18px rgba(15, 23, 42, .05); }
.cef-clue .q-k { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cef-muted); font-weight: 700; margin-bottom: 10px; }
.cef-clue .q-t { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.cef-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.cef-pick { border: 1.5px solid; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 800; cursor: pointer; background: #fff; transition: transform .05s; }
.cef-pick:active { transform: translateY(1px); }
.cef-pick.croup { border-color: var(--croup-line); color: var(--croup-ink); }
.cef-pick.croup:hover { background: var(--croup-bg); }
.cef-pick.epi { border-color: var(--epi-line); color: var(--epi-ink); }
.cef-pick.epi:hover { background: var(--epi-bg); }
.cef-pick[disabled] { cursor: default; opacity: .75; }
.cef-pick.right { background: var(--cef-ok-bg); border-color: var(--cef-ok); color: var(--cef-ok); }
.cef-pick.wrong { background: var(--cef-no-bg); border-color: var(--cef-no); color: var(--cef-no); }
.cef-pick:focus-visible, .cef-next:focus-visible, .cef-restart:focus-visible { outline: 2px solid var(--cef-blue); outline-offset: 2px; }
.cef-fb { border-radius: 11px; padding: 14px 16px; font-size: 14.5px; margin-bottom: 16px; display: none; }
.cef-fb.show { display: block; }
.cef-fb.good { background: var(--cef-ok-bg); border: 1px solid #bbf7d0; color: #14532d; }
.cef-fb.bad { background: var(--cef-no-bg); border: 1px solid var(--epi-line); color: #7f1d1d; }
.cef-fb b { font-weight: 800; }
.cef-next { display: block; width: 100%; border: 0; background: var(--cef-blue); color: #fff; font-weight: 800; font-size: 15px; padding: 13px; border-radius: 11px; cursor: pointer; }
.cef-next[disabled] { background: #c7d2fe; cursor: default; }
.cef-done { text-align: center; padding: 16px 8px; }
.cef-done .score { font-size: 40px; font-weight: 900; letter-spacing: -.02em; }
.cef-done .sub { color: var(--cef-muted); margin: 4px 0 18px; }
.cef-restart { border: 1.5px solid var(--cef-line); background: #fff; color: var(--cef-ink); font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: 10px; cursor: pointer; }
.cef-hidden { display: none; }

@media (max-width: 640px) {
    .cef-headrow, .cef-row { grid-template-columns: 1fr 74px 1fr; gap: 6px; }
    .cef-cell { font-size: 13px; padding: 9px 10px; }
    .cef-axis { font-size: 11px; }
}