/* staged-content.css — three-tier learning panels.
 *
 * Lets a single page present its content at three depths so the same
 * topic works for a 6-year-old and a 13-year-old:
 *
 *   • Basic     — short, simple sentences. ~80 words.
 *   • Standard  — typical kids'-encyclopedia depth. ~150 words.
 *   • Detailed  — for confident readers who want more. ~250 words.
 *
 * Implementation: CSS-only tabs using the radio + label trick. No JS
 * dependency means it works on every browser, every CDN failure, every
 * device. Tabs are keyboard-navigable (label clicks toggle the radios),
 * screen readers announce them as a labelled fieldset, and tabbing
 * lands on the radios themselves with visible focus rings.
 *
 * Markup contract:
 *   <div class="fm-staged">
 *     <fieldset class="fm-staged__tabs">
 *       <legend>Choose a reading level</legend>
 *       <input type="radio" id="fm-staged-{slug}-basic" name="fm-staged-{slug}" checked>
 *       <label for="fm-staged-{slug}-basic">Basic <span class="fm-staged__age">5–8</span></label>
 *       <input type="radio" id="fm-staged-{slug}-std"   name="fm-staged-{slug}">
 *       <label for="fm-staged-{slug}-std">Standard <span class="fm-staged__age">9–12</span></label>
 *       <input type="radio" id="fm-staged-{slug}-det"   name="fm-staged-{slug}">
 *       <label for="fm-staged-{slug}-det">Detailed <span class="fm-staged__age">13+</span></label>
 *     </fieldset>
 *     <div class="fm-staged__panels">
 *       <div class="fm-staged__panel" data-level="basic">…</div>
 *       <div class="fm-staged__panel" data-level="std">…</div>
 *       <div class="fm-staged__panel" data-level="det">…</div>
 *     </div>
 *   </div>
 */

.fm-staged {
    margin: 1.5rem 0 2rem;
    border: 1px solid #d8dee5;
    border-radius: 12px;
    background: #fbfcfd;
    overflow: hidden;
}

/* Tab bar */
.fm-staged__tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 0;
    background: #f1f4f7;
    border-bottom: 1px solid #d8dee5;
}
.fm-staged__tabs legend {
    /* Visually hidden but read by screen readers */
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Hide the actual radios visually but keep them tab-focusable */
.fm-staged__tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}

.fm-staged__tabs label {
    flex: 1 1 auto;
    padding: 0.85rem 1rem;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a5660;
    cursor: pointer;
    user-select: none;
    border-bottom: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fm-staged__tabs label:hover { background: #e6ebef; color: #1f2933; }

.fm-staged__age {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7785;
    letter-spacing: 0.3px;
}

/* Active-tab highlight when its radio is checked */
.fm-staged__tabs input:checked + label {
    color: #4A7286;
    background: #ffffff;
    border-bottom-color: #4A7286;
}
.fm-staged__tabs input:focus-visible + label {
    outline: 2px solid #4A7286;
    outline-offset: -3px;
}

/* Panels — all hidden by default */
.fm-staged__panels { padding: 1.5rem 1.5rem 0.5rem; }
.fm-staged__panel  { display: none; }

/* Each tab reveals its panel via input:checked ~ panels selector.
 *
 * Because the input names are per-page (fm-staged-{slug}-…), each
 * .fm-staged instance has its own radio group and toggles independently.
 * The pattern relies on the input being a sibling of .fm-staged__panels;
 * the markup contract above puts the inputs inside .fm-staged__tabs
 * which is a sibling of .fm-staged__panels — sibling selector works. */
.fm-staged__tabs input[id$="-basic"]:checked ~ * .fm-staged__panel[data-level="basic"],
.fm-staged input[id$="-basic"]:checked ~ .fm-staged__panels .fm-staged__panel[data-level="basic"] {
    display: block;
}
.fm-staged__tabs input[id$="-std"]:checked ~ * .fm-staged__panel[data-level="std"],
.fm-staged input[id$="-std"]:checked ~ .fm-staged__panels .fm-staged__panel[data-level="std"] {
    display: block;
}
.fm-staged__tabs input[id$="-det"]:checked ~ * .fm-staged__panel[data-level="det"],
.fm-staged input[id$="-det"]:checked ~ .fm-staged__panels .fm-staged__panel[data-level="det"] {
    display: block;
}

.fm-staged__panel p:first-child { margin-top: 0; }
.fm-staged__panel p:last-child  { margin-bottom: 0; }
.fm-staged__panel ul            { padding-left: 1.2rem; }

/* Mobile — stack tabs vertically if they don't fit */
@media (max-width: 480px) {
    .fm-staged__tabs label { font-size: 0.85rem; padding: 0.65rem 0.5rem; }
    .fm-staged__age        { font-size: 0.7rem; }
    .fm-staged__panels     { padding: 1rem 1rem 0.25rem; }
}

[data-theme="dark"] .fm-staged             { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .fm-staged__tabs       { background: #0f172a; border-bottom-color: #334155; }
[data-theme="dark"] .fm-staged__tabs label { color: #cbd5e1; }
[data-theme="dark"] .fm-staged__tabs label:hover { background: #1e293b; color: #f1f5f9; }
[data-theme="dark"] .fm-staged__tabs input:checked + label { background: #1e293b; color: #93c5fd; border-bottom-color: #93c5fd; }