/* BIO 202 — what a stage keeps off the screen until asked for. Companion to hover.js.
   JM, 2026-10-17: "the R code panels should always be last & default to be collapsed"; "We should more liberally
   use hover text and optional boxes in general ... I want attention drawn and fixed to controls, output, and
   predictions". Colours fall back to the shared palette where a page does not name it. */

/* under a stage's grid: what is read after the work (observed data), then the R code, last */
.tail { display:flex; flex-direction:column; gap:16px; margin-top:16px; }

/* optional boxes, closed until opened: the R code (details.rcode) and secondary material (details.opt) */
details.rcode > summary, details.opt > summary { cursor:pointer; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted, #6b6b68); font-weight:600; list-style:none; }
details.rcode > summary::-webkit-details-marker, details.opt > summary::-webkit-details-marker { display:none; }
details.rcode > summary::before, details.opt > summary::before { content:"\25B8"; display:inline-block; width:14px; }
details.rcode[open] > summary::before, details.opt[open] > summary::before { content:"\25BE"; }
details.rcode[open] > summary, details.opt[open] > summary { margin-bottom:10px; }
details.rcode .code-dl { margin-bottom:10px; }

/* hover text in place of setup bullets: an .info (a heading, a control's label, or a bare mark) carries a hidden
   .tip, or names a shared one with data-tip; hover.js shows it on hover, focus or tap */
.info { cursor:help; }
.info::after { content:"i"; display:inline-block; width:13px; height:13px; margin-left:5px; border:1px solid currentColor; border-radius:50%; font:italic 600 10px/13px Georgia,serif; text-align:center; text-transform:none; letter-spacing:0; vertical-align:1px; opacity:.55; }
.info:hover::after, .info:focus::after { opacity:1; }
.info:focus { outline:none; }
.info .tip, .tip-src { display:none; }
.tip-pop { position:fixed; z-index:50; max-width:360px; background:var(--panel, #fff); color:var(--ink, #1d1d1b); border:1px solid var(--rule, #e2e0d9); border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.13); padding:9px 11px; font-size:13px; line-height:1.4; font-weight:400; text-transform:none; letter-spacing:0; text-align:left; }
.tip-pop > span { display:block; } .tip-pop > span + span { margin-top:6px; }

/* a panel with no heading: its mark sits in the panel's top right corner */
*:has(> .info.corner) { position:relative; }
.info.corner { position:absolute; top:3px; right:4px; z-index:2; color:var(--muted, #6b6b68); font-size:13px; line-height:1; }

/* the intro once its bullets are hover text: the voice alone, at a reading width */
.intro-one .voice { max-width:860px; }

/* a closed box inside a panel (lesson 18's numbers under each plot) */
.panel details.opt:not(.panel) { margin-top:8px; }
.panel details.opt:not(.panel) > summary { font-size:11.5px; }