/* ============================================================
   SHARED · ToxMap — clickable toxicity cards with reveal panels
   (prefix: toxmap-)

   Promoted from the CAV Class-3 Amiodarone multi-system toxicity map
   (.cav-c3-tox*) so every pharmacology module can use the same pattern:
   each toxicity is a card — emoji + bold BLACK title + optional tags —
   that expands to reveal the "why". Replaces the flat .mk-symptoms
   stack on pharm Toxicity sections.

   Differences from the CAV original (deliberate):
     · neutral accent (themable via --toxmap-accent) — the CAV one is
       amiodarone-orange; pharm pages have no orange theme.
     · auto-fit grid — always FILLS the card at any width (the flat list
       stranded ~40% of a full-width card).
     · multi-tag slot (Most common / ⚠️ NBME / Most dangerous) instead of
       the single hardcoded danger flag.
     · roomier panel max-height — pharm reveals run longer than "Thyroid".

   Markup contract:
     <div class="toxmap" data-toxmap>
       <div class="toxmap__grid">
         <div class="toxmap-tox" data-tox>            (+ is-danger)
           <button type="button" class="toxmap-tox__btn" aria-expanded="false">
             <span class="toxmap-tox__icon">🧪</span>
             <span class="toxmap-tox__name">Hepatotoxicity</span>
             <span class="toxmap-tox__tags">…optional chips…</span>
             <span class="toxmap-tox__chevron" aria-hidden="true">▾</span>
           </button>
           <div class="toxmap-tox__panel"><div class="toxmap-tox__panel-inner">…why…</div></div>
         </div>
       </div>
     </div>
   Companion: tox-map.js (window.ToxMap.mount(root)).
   ============================================================ */

.toxmap {
    --toxmap-accent: 10, 132, 255;      /* rgb triplet, themable per page */
    --toxmap-danger: 211, 64, 63;
    margin-top: 12px;
}
.toxmap__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 12px;
    /* MUST be start, not stretch: with stretch, a grid row is as tall as its tallest
       card, so opening ONE card's panel inflates every sibling in that row. start keeps
       each card independent — only the card you open grows. Closed cards are kept
       roughly level by the min-height on the header below, not by stretching. */
    align-items: start;
}

.toxmap-tox {
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.toxmap-tox:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--toxmap-accent), 0.45);
    box-shadow: 0 10px 22px rgba(var(--toxmap-accent), 0.14);
}
.toxmap-tox.is-open {
    border-color: rgba(var(--toxmap-accent), 0.45);
    box-shadow: 0 4px 14px rgba(var(--toxmap-accent), 0.10);
}
.toxmap-tox.is-danger:hover,
.toxmap-tox.is-danger.is-open {
    border-color: rgba(var(--toxmap-danger), 0.55);
    box-shadow: 0 4px 14px rgba(var(--toxmap-danger), 0.12);
}

/* Header arrangement. DOM order is icon → name → tags → chevron, but we lay it out as:
      row 1:  [icon]  Title (takes the whole line, wraps freely)   [▾]
      row 2:           [tag] [tag]        (indented under the title)
   `order` pulls the chevron up beside the title and pushes the tags to their own row,
   so a long name never gets squeezed into a narrow column beside a chip. */
.toxmap-tox__btn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    /* center the rows in the min-height box: with flex-start, a 1-line card left its
       title stranded at the top over a slab of dead white. Centering makes the floor
       read as intentional padding instead of empty space. */
    align-content: center;
    row-gap: 6px;
    column-gap: 10px;
    padding: 12px 13px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    /* Levels the CLOSED cards without align-items:stretch (which coupled every card in
       a row to whichever one was open). Sized for the worst case a header can hold —
       a 2-line title PLUS a tag row (~88px) — so a short "Seizures" card sits exactly
       as tall as "Drug-induced SLE-like syndrome". A floor UNDER the worst case leaves
       exactly one card sticking out, so keep a couple px of headroom. */
    min-height: 90px;
}
.toxmap-tox__btn:focus-visible {
    outline: 2px solid rgba(var(--toxmap-accent), 0.9);
    outline-offset: -2px;
}
.toxmap-tox__icon { order: 1; font-size: 21px; line-height: 1.3; flex: 0 0 auto; }

/* the toxicity name is a TITLE: bold + BLACK, always outranking the panel copy.
   flex:1 => it owns the rest of row 1, so it wraps naturally instead of being
   crushed into a column beside a tag chip. */
.toxmap-tox__name {
    order: 2;
    /* basis 0 (NOT auto) is load-bearing: flexbox wraps items before shrinking them, so
       an `auto` basis = the title's full text width, which left no room for the chevron
       and dropped it onto its own line on long titles. Basis 0 lets the title claim the
       leftover space and wrap INTERNALLY, keeping the chevron up on row 1. */
    flex: 1 1 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text, #111111);
    line-height: 1.35;
    min-width: 0;
    /* keep multi-word toxicity names from breaking mid-word */
    overflow-wrap: break-word;
}
/* a name carrying a hover definition stays black + dotted — never blue, never a pill */
.toxmap-tox__name .cav-term {
    color: var(--text, #111111);
    font-weight: 800;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    border-bottom: 2px dotted rgba(17, 17, 17, 0.5);
}

/* tags drop to their own row, indented past the icon (21px icon + 10px gap) */
.toxmap-tox__tags {
    order: 4;
    flex: 0 0 100%;
    margin-left: 31px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.toxmap-tox__tag {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: #fff;
    background: #6b7280;
}
.toxmap-tox__tag--danger { background: rgb(var(--toxmap-danger)); }
.toxmap-tox__tag--common { background: #0a6cff; }
.toxmap-tox__tag--nbme   { background: #fdeecb; color: #8a5a12; border: 1px solid #e6b24d; }

/* chevron rides row 1 at the top-right, regardless of how many lines the title takes */
.toxmap-tox__chevron {
    order: 3;
    flex: 0 0 auto;
    font-size: 13px;
    color: #8a93a0;
    line-height: 1.35;
    transition: transform 0.18s ease;
}
.toxmap-tox.is-open .toxmap-tox__chevron { transform: rotate(180deg); }

.toxmap-tox__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}
.toxmap-tox.is-open .toxmap-tox__panel { max-height: 520px; }
.toxmap-tox__panel-inner {
    margin: 0 14px;
    padding: 11px 0 14px;
    border-top: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    font-size: 13px;
    line-height: 1.55;
    color: #111111;
}
.toxmap-tox__panel-inner strong { color: var(--text, #111111); font-weight: 800; }

.toxmap__note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #111111;
}

@media (prefers-reduced-motion: reduce) {
    .toxmap-tox,
    .toxmap-tox__panel,
    .toxmap-tox__chevron { transition: none; }
    .toxmap-tox:hover { transform: none; }
}