/* ============================================================
   RAR MEDICAL MICROBIOLOGY · AirwayFeaturePicker (window.AirwayFeaturePicker)
   Faithful port of AirwayFeaturePicker_prototype.html. Internal two-column
   layout, the six clue→diagnosis mappings, the AIRWAY EMERGENCY flag, and the
   two-tone coding (calm = cyan, emerg = red) are the LOCKED spec — only the
   outer chrome is dropped (the site's section-card wraps it). All classes
   prefixed .afp- and scoped to .afp. Reader text #111111.
   ============================================================ */

.afp {
    --afp-ink: #111111; --afp-muted: #64748b; --afp-line: #e5e7eb; --afp-blue: #2563eb;
    --afp-emerg: #b91c1c; --afp-emerg-bg: #fef4f4; --afp-emerg-line: #fecaca;
    --afp-calm: #0e7490; --afp-calm-bg: #ecfeff;
    color: var(--afp-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
}
.afp *, .afp *::before, .afp *::after { box-sizing: border-box; }

.afp-lede { color: #334155; font-size: 15.5px; margin: 0 0 22px; max-width: 62ch; }
.afp-lede b { color: var(--afp-ink); }

.afp-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; }
.afp-colhead { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--afp-muted); font-weight: 700; margin: 0 0 10px; }

/* compact clues — 2 rows each (title, then sub + location inline) so the 6 stacked
   cards read at roughly the height of the single reveal panel on the right */
.afp-clues { display: flex; flex-direction: column; gap: 6px; }
.afp-clue { text-align: left; border: 1.5px solid var(--afp-line); background: #fff; border-radius: 11px; padding: 8px 13px; cursor: pointer; transition: border-color .12s, background .12s;
    color: var(--afp-ink); font-family: inherit; }   /* explicit — a global button rule otherwise makes the title white */
.afp-clue:hover { border-color: #cbd5e1; background: #fafcff; }
.afp-clue.on { border-color: var(--afp-blue); background: #f5f8ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
.afp-clue:focus-visible { outline: 2px solid var(--afp-blue); outline-offset: 2px; }
.afp .afp-clue .c-t { font-weight: 800; font-size: 14.5px; color: var(--afp-ink); }
.afp-clue .c-s { display: inline-block; vertical-align: middle; font-size: 12px; color: var(--afp-muted); font-weight: 600; margin-top: 2px; }
.afp-clue .loc { display: inline-block; vertical-align: middle; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #475569; background: #eef2f7; border-radius: 5px; padding: 1px 6px; margin-top: 2px; margin-left: 8px; }

/* reveal */
.afp-reveal { border: 1px solid var(--afp-line); border-radius: 14px; padding: 18px 20px; min-height: 320px; display: flex; flex-direction: column; }
.afp-empty { margin: auto; text-align: center; color: var(--afp-muted); max-width: 34ch; }
.afp-empty .big { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.afp-r-syn { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--afp-muted); }
.afp-r-name { font-size: 23px; font-weight: 900; letter-spacing: -.01em; margin: 2px 0 2px; }
.afp-r-bug { font-size: 15px; font-weight: 700; font-style: italic; color: #334155; margin-bottom: 14px; }
.afp-r-emerg { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; background: var(--afp-emerg); color: #fff; border-radius: 6px; padding: 2px 8px; margin-left: 8px; vertical-align: 3px; font-style: normal; }
.afp-facts { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--afp-line); }
.afp-fact { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--afp-line); font-size: 14.5px; }
.afp-fact .k { color: var(--afp-muted); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; padding-top: 1px; }
.afp-fact .v b { font-weight: 800; }
.afp-r-why { margin-top: 14px; font-size: 14px; border-radius: 10px; padding: 12px 14px; }
.afp-r-why.calm { background: var(--afp-calm-bg); color: #0b3f4a; }
.afp-r-why.emerg { background: var(--afp-emerg-bg); color: #5c1414; border-left: 4px solid var(--afp-emerg); }
.afp-r-why b { font-weight: 800; }
.afp-hidden { display: none; }

@media (max-width: 680px) { .afp-layout { grid-template-columns: 1fr; } }