/* ==========================================================================
   interview.css — shared "Interview — pick your bar" panel.
   Pairs with interview.js. A lesson includes both, sets its track --accent
   (via tokens.css), and authors a flat list:

     <div data-interview>
       <details class="iq" data-level="core">…</details>
       <details class="iq" data-level="senior">…</details>
       <div class="designrubric" data-level="design">…</div>
       <details class="iq" data-level="design">…</details>
     </div>

   interview.js groups by data-level and builds the tab bar automatically.
   With JS off (or in the EPUB/print) the items render as a plain labelled
   list — nothing is hidden, so SEO and the Kindle build still see every Q&A.
   ========================================================================== */

.iqpanel{border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:1rem 0}
.iqtabs{display:flex; flex-wrap:wrap; gap:.3rem; padding:.5rem; background:var(--card); border-bottom:1px solid var(--line)}
.iqtab{font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; border:1px solid var(--line);
  background:var(--bg); color:var(--muted); border-radius:8px; padding:.4rem .85rem}
.iqtab:hover{background:var(--chip)}
.iqtab.is-active{background:var(--accent-soft); color:var(--on-accent); border-color:var(--accent-soft)}
.iqtab.design{margin-left:auto}                 /* push the design axis to the right */
.iqtab.design.is-active{background:var(--track-rest); color:var(--on-accent); border-color:var(--track-rest)}
.iqgroup{padding:.7rem .8rem}
.iqgroup[hidden]{display:none}
.iqgroup details.iq{margin:.5rem 0}

/* breathing room between the 💬 marker and the question text */
details.iq summary::before{margin-right:.4em}

/* the native <details> drives reveal in the panel — override any page-level
   ".a{display:none}" (e.g. the REST interview banks' legacy flashcard CSS) so
   answers show when an item is open. Higher specificity than a bare `.a`. */
[data-interview] details.iq .a{display:block}

/* design-round rubric (used in the System Design group) */
.designrubric{background:color-mix(in srgb,var(--track-rest) 8%,transparent); border-left:3px solid var(--track-rest);
  border-radius:8px; padding:.6rem .85rem; margin:.1rem 0 .7rem; font-size:.85rem}
.designrubric b{color:var(--track-rest)}
.designrubric ol{margin:.4rem 0 0; padding-left:1.15rem} .designrubric li{margin:.18rem 0}

/* pre-enhancement / no-JS fallback: a labelled flat list (chip shows the level) */
[data-interview]:not(.is-enhanced) > [data-level]{position:relative; margin:.5rem 0}
[data-interview]:not(.is-enhanced) > [data-level]::before{
  content:attr(data-level); display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:4px;
  padding:.05rem .3rem; margin-right:.4rem; vertical-align:middle}