/* Year 9 Science unit page — Read · Watch · Play · Check as tabs inside a
 * section (unit-tabs.js). Everything is scoped to `.sci-unit.sci-tabs`, which
 * unit-phone.js sets in the phone layout; without it the page is exactly as
 * the other sheets draw it. Tokens only; same ink, teal, mint, tangerine,
 * cream and paper as the rest of the page.
 *
 *  - Only the chosen step shows. The section's title, objectives, "set by
 *    your teacher" banner, booklet links and lock message belong to Read.
 *  - The tabs are the pinned bar's pills: flat, the chosen one underlined in
 *    tangerine ("you are here", as the staff pages do), a locked one dimmed
 *    with a lock, a done one keeping its tick.
 *  - Check: each quiz is a row with Start on the right. */

/* A tab section is a `.sci-sec` of the unit page or any element unit-tabs.js
   marks [data-tab] (a lab page's article); a panel is a `.sci-step` or any
   [data-sci-panel] child. */
.sci-tabs [data-tab] > .sci-step:not(.is-tab-on),
.sci-tabs [data-tab] > [data-sci-panel]:not(.is-tab-on) { display: none; }
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-sec-head,
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-goals,
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-setby,
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-links,
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-lockmsg,
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-locked-note { display: none; }
/* a panel starts right under the pinned bar */
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) > .sci-step.is-tab-on { padding-top: 14px; }
.sci-tabs .sci-sec[data-tab="read"] > .sci-step-read { padding-top: 18px; }

.sci-tabs .sci-steps { gap: 0; }
.sci-tabs .sci-pill {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    gap: 5px;
    padding: 0 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.2;
}
.sci-tabs .sci-pill::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 2px;
    height: 3px;
    border-radius: 3px;
    background: transparent;
}
@media (hover: hover) {
    .sci-tabs .sci-pill:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
}
.sci-tabs .sci-pill.is-on { color: var(--ink); font-weight: 800; }
.sci-tabs .sci-pill.is-on::after { background: var(--tangerine); }
.sci-tabs .sci-pill.is-done { color: var(--teal-deep); background: transparent; }
.sci-tabs .sci-pill.is-done.is-on { color: var(--ink); }
.sci-tabs .sci-pill-quiz { background: transparent; color: var(--muted); }
.sci-tabs .sci-pill-quiz.is-on { color: var(--ink); }
.sci-tabs .sci-pill.is-locked { color: var(--muted); opacity: 0.55; }
.sci-tabs .sci-pill > .sci-pill-lock { display: inline-block !important; font-size: 0.7em; }
.sci-tabs .sci-pill > .sci-pill-lock[hidden] { display: none !important; }
.sci-tabs .sci-pill > * { flex: none; }
.sci-tabs .sci-pill > span:not(.sci-sr) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sci-tabs .sci-pill.is-done .sci-pill-tick { width: 14px; height: 14px; font-size: 0.5rem; }
.sci-tabs .sci-pill.is-locked .sci-pill-tick { display: none; }
.sci-tabs .sci-pill:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: -3px; }

/* why a locked tab did not open: one line under the bar, then it goes */
.sci-tabmsg {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
    padding: 10px 14px;
    border: 2px dashed var(--gold);
    border-radius: 12px;
    background: var(--sci-gold-soft, color-mix(in srgb, var(--gold) 14%, var(--paper)));
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}
.sci-tabs .sci-sec[data-tab]:not([data-tab="read"]) .sci-tabmsg { display: none; }
/* the section's own lock message, lit when a locked tab was tapped */
.sci-tabs .sci-lockmsg { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.sci-tabs .sci-lockmsg.is-flash { border-color: var(--tangerine); border-style: solid; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tangerine) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .sci-tabs .sci-lockmsg { transition: none; } }

/* Check: the quizzes as rows, Start on the right */
.sci-tabs .sci-qcards { display: grid; gap: 8px; }
.sci-tabs .sci-qcard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border: 2px solid var(--sci-peach-line, var(--line));
    border-radius: 14px;
    background: var(--paper);
}
.sci-tabs .sci-qcard-name { min-width: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.3; }
.sci-tabs .sci-qcard .sci-btn-quiz {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    white-space: nowrap;
}
.sci-tabs .sci-chk-q { background: var(--paper); border-color: var(--line); }
.sci-tabs .sci-chk > p .sci-score:empty { display: none; }

@media print { .sci-tabs [data-tab] > .sci-step, .sci-tabs [data-tab] > [data-sci-panel] { display: block; } }