/* ==========================================================================
   CSIP12 Important Programs pages — same look as the notes chapter lists (csip-hub.css),
   plus an expandable code panel per program. Scoped under .csip-progs.
   ========================================================================== */

/* Topic spine: numbered tabs (there can be up to ~13 topics, too many for vertical labels) */
.csip-spine--topics .csip-spine__tab { writing-mode: horizontal-tb; width: 34px; padding: 8px 0; font-size: 12px; letter-spacing: 0; }

/* Rows open a code panel instead of linking to a page */
.csip-progs .csip-prog { scroll-margin-top: 16px; }
@media (max-width: 767.98px) { .csip-progs .csip-prog { scroll-margin-top: 80px; } }
.csip-progs .csip-prog__toggle { width: 100%; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font-family: var(--f-sans); }
.csip-progs .csip-chrow { cursor: pointer; }
/* Phones hide chapter descriptions; a program's one-line description is short, so keep it */
@media (max-width: 767.98px) { .csip-progs .csip-chrow__desc { display: block; margin: 2px 0 0; font-size: 11.5px; color: var(--c-ink-3); line-height: 1.45; } }
.csip-progs .csip-chrow__cta { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.csip-prog__arrow { font-size: 10px; transition: transform 0.2s ease; }
.csip-prog.is-open .csip-prog__arrow { transform: rotate(180deg); }
.csip-prog.is-open .csip-chrow { background: var(--c-band); border-bottom-color: transparent; }
.csip-prog.is-open .csip-chrow__num { color: var(--c-teal); }
html.dark .csip-prog.is-open .csip-chrow__num { color: var(--c-teal-text); }
@media (max-width: 479.98px) { .csip-progs .csip-prog__cta-text { display: none; } }

/* Code panel */
.csip-prog__code { margin: 0 0 14px; border-radius: 8px; overflow: hidden; background: #282c34; border: 1px solid var(--c-rule); }
@media (min-width: 768px) { .csip-prog__code { margin-left: 76px; } }
.csip-prog__code[hidden] { display: none; }
.csip-prog__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #3a3f4b; }
.csip-prog__lang { font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #9aa3b2; }
.csip-prog__actions { display: flex; gap: 8px; }
.csip-prog__btn {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 5px; cursor: pointer;
    font: 700 11.5px/1 var(--f-sans); color: #d7dce4; background: #3a3f4b; border: 1px solid #4b5162;
}
.csip-prog__btn:hover { background: #4b5162; }
.csip-prog__btn--run { background: var(--c-teal); border-color: var(--c-teal); color: #fff; }
.csip-prog__btn--run:hover { background: var(--c-teal-hover); }
.csip-prog__btn i { font-size: 10px; }
.csip-prog__code pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: #282c34; font-size: 13px; line-height: 1.6; }
.csip-prog__code pre code.hljs { background: transparent; padding: 0; }

/* Level, Rare and source tags under each program (Class 12 CS data file sets them) */
.csip-progs__legend { margin: -4px 0 18px; font-size: 12.5px; line-height: 1.9; color: var(--c-ink-3); max-width: 760px; }
.csip-prog__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.csip-prog__lvl, .csip-prog__rare, .csip-prog__src {
    display: inline-block; font: 700 10px/1.3 var(--f-sans); letter-spacing: 0.03em; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.csip-prog__lvl { text-transform: uppercase; }
.csip-prog__lvl--easy { color: var(--c-teal-text); background: var(--c-teal-tint); }
.csip-prog__lvl--medium { color: var(--c-amber-text); background: var(--c-amber-tint); }
.csip-prog__lvl--hard { color: var(--c-rust); background: var(--c-rust-tint); }
.csip-prog__rare { text-transform: uppercase; color: var(--c-ink-2); border: 1px dashed var(--c-rule-2); }
.csip-prog__src { color: var(--c-ink-2); border: 1px solid var(--c-rule-2); text-decoration: none; }
a.csip-prog__src:hover { color: var(--c-teal); border-color: var(--c-teal); }
html.dark a.csip-prog__src:hover { color: var(--c-teal-text); border-color: var(--c-teal-text); }