/* ============================================================
   RAR PHYSIOLOGY · Kidney Simulator page
   Styles the iframe shell and the guided-experiment lists only.
   The simulator's own styling lives inside the iframe document
   (kidney-simulator/dist) and is deliberately NOT reachable from
   here — that isolation is the reason it is an iframe at all.
   ============================================================ */

/* ── The simulator shell ─────────────────────────────────────── */
#rarKidneySimTopicContent .ksim-frame {
    position: relative;
    width: 100%;
    /* The simulator stacks a graph row, the anatomy stage and a readout
       strip, so it needs real height. Tall enough to breathe, capped so
       it never outruns the viewport on a laptop. */
    height: min(1040px, 82vh);
    min-height: 620px;
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-md);
}

#rarKidneySimTopicContent .ksim-frame__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Fullscreen API: the wrapper becomes the whole screen, so drop the
   decorative chrome and let the iframe fill it edge to edge. */
#rarKidneySimTopicContent .ksim-frame:fullscreen {
    height: 100%;
    max-height: none;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#rarKidneySimTopicContent .ksim-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* The "open in new tab" action is an <a>, so give it the button's
   line-height behaviour without depending on the anchor reset. */
#rarKidneySimTopicContent .ksim-actions a.button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ── Guided-experiment / reference lists ─────────────────────── */
#rarKidneySimTopicContent .ksim-try {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

#rarKidneySimTopicContent .ksim-try li {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
}

#rarKidneySimTopicContent .ksim-try .nbme-flag {
    margin-left: 4px;
    vertical-align: middle;
}

@media (max-width: 720px) {
    #rarKidneySimTopicContent .ksim-frame {
        height: min(760px, 78vh);
        min-height: 520px;
    }
}