/* ==========================================================================
   CSIP12 Career Guidance (2026-10-06) — the career hub and the career / course / exam pages
   in the same design as the notes: the hub reuses csip-hub.css (chapter-list pages), the detail
   pages reuse csip-reader.css (chapter pages). Only csip-ui.css tokens; light + dark.
   ========================================================================== */

/* ---------- Hub: header search ---------- */
.csip-career__search { position: relative; width: 100%; }
@media (min-width: 900px) { .csip-career__search { width: 280px; flex-shrink: 0; } }
.csip-career__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--c-ink-3); pointer-events: none; }
.csip-career__search input {
    width: 100%; height: 36px; padding: 0 34px 0 34px; border-radius: var(--r-md); box-sizing: border-box;
    border: 1px solid var(--c-rule-2); background: var(--c-surface); color: var(--c-ink); font: 500 12.5px/1 var(--f-sans);
}
.csip-career__search input::placeholder { color: var(--c-ink-3); }
.csip-career__search input:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px var(--c-teal-tint); }
.csip-career__search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; background: none; color: var(--c-ink-3); cursor: pointer; border-radius: 6px; }
.csip-career__search button:hover { color: var(--c-ink); background: var(--c-band); }
.csip-career__noresult { margin: 16px 0 0; font-size: 13px; color: var(--c-ink-2); }

/* ---------- Hub: section chips (phones and tablets; the spine replaces them on desktop) ---------- */
.csip-career__chips {
    position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px; padding: 10px 18px;
    background: var(--c-paper); border-bottom: 1px solid var(--c-rule); scrollbar-width: none; -ms-overflow-style: none;
}
.csip-career__chips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .csip-career__chips { margin: 0 -40px; padding: 10px 40px; } }
@media (min-width: 1024px) { .csip-career__chips { display: none; } }
.csip-career__chips a { flex-shrink: 0; padding: 5px 11px; border-radius: 4px; font-size: 11.5px; font-weight: 600; color: var(--c-ink-3); border-left: 2px solid transparent; }
.csip-career__chips a.is-current { color: var(--c-ink); border-left-color: var(--c-teal); background: var(--c-surface); }

/* ---------- Hub: sections ---------- */
.csip-career .csip-unit { margin-top: 32px; scroll-margin-top: 16px; }
@media (max-width: 1023.98px) { .csip-career .csip-unit { scroll-margin-top: 56px; } }
.csip-career__lead { font-size: 13px; line-height: 1.65; color: var(--c-ink-2); margin: 2px 0 10px; max-width: 760px; }
.csip-career .csip-career__sub {
    font-family: var(--f-serif) !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important;
    color: var(--c-ink) !important; margin: 28px 0 6px !important;
}
.csip-career__note { font-size: 11.5px; line-height: 1.55; color: var(--c-ink-3); margin: 10px 0 0; }
.csip-career__note i { margin-right: 4px; }

/* Rows: chapter-row layout, with a small facts line under the description */
.csip-career .csip-chrow__num { font-size: 17px; }
@media (min-width: 768px) { .csip-career .csip-chrow__num { font-size: 22px; } }
.csip-chrow__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 5px; font-size: 11.5px; color: var(--c-ink-2); }
.csip-chrow__facts strong { color: var(--c-ink); font-weight: 600; }
.csip-chrow__facts .csip-badge { height: 20px; font-size: 10px; }
.csip-career .csip-chrow.is-dimmed { opacity: 0.35; }
.csip-career .is-filtered-out { display: none !important; }

/* Interest filter */
.csip-career__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.csip-career__filter-label { font-size: 11.5px; font-weight: 600; color: var(--c-ink-3); margin-right: 4px; }
.csip-career__filter .csip-chip { height: 30px; padding: 0 11px; font-size: 11.5px; cursor: pointer; }
.csip-career__filter-status { font-size: 12px; color: var(--c-teal-text); font-weight: 600; margin: 4px 0 0; }

/* Form controls (compare, roadmap) */
.csip-career__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0 14px; }
.csip-career__controls span { font-size: 11px; font-weight: 700; color: var(--c-ink-3); letter-spacing: 0.06em; }
.csip-career select {
    height: 36px; padding: 0 30px 0 12px; border-radius: var(--r-md); border: 1px solid var(--c-rule-2); background-color: var(--c-surface);
    color: var(--c-ink); font: 600 12.5px/1 var(--f-sans); max-width: 100%;
}
.csip-career select:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 3px var(--c-teal-tint); }

/* Tables (compare, college tiers, salary, facts) */
.csip-career__tablewrap { overflow-x: auto; border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-surface); }
.csip-career__table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; color: var(--c-ink-2); }
.csip-career__table th, .csip-career__table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-rule); }
.csip-career__table tr:last-child > * { border-bottom: 0; }
.csip-career__table thead th { background: var(--c-band); color: var(--c-ink); font-weight: 700; font-size: 12px; }
.csip-career__table tbody th { color: var(--c-ink-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.csip-career__table td strong { color: var(--c-ink); font-weight: 600; }
.csip-career__table a { color: var(--c-teal); font-weight: 600; }
html.dark .csip-career__table a { color: var(--c-teal-text); }
@media (min-width: 768px) { .csip-career__table { font-size: 13px; } }
.csip-career__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.csip-career__tag { display: inline-block; padding: 2px 8px; border-radius: 4px; background: var(--c-band); color: var(--c-ink-2); font-size: 11px; font-weight: 600; line-height: 1.5; }

/* Roadmap timeline (hub + career pages) */
.csip-roadmap { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--c-rule); }
.csip-roadmap > li { position: relative; padding: 0 0 18px 14px; }
.csip-roadmap > li:last-child { padding-bottom: 0; }
.csip-roadmap > li::before {
    content: ''; position: absolute; left: -31px; top: 3px; width: 12px; height: 12px; border-radius: 999px;
    background: var(--c-paper); border: 2px solid var(--c-teal);
}
.csip-roadmap__step { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-amber-text); }
.csip-roadmap__title { display: block; font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.35; margin-top: 2px; }
.csip-roadmap__subtitle { display: block; font-size: 12px; color: var(--c-ink-3); margin-top: 1px; }
.csip-roadmap__desc { font-size: 13px; line-height: 1.65; color: var(--c-ink-2); margin: 6px 0 4px; }
.csip-roadmap__ms { margin: 0; padding-left: 18px; list-style: disc; font-size: 12.5px; line-height: 1.6; color: var(--c-ink-2); }

/* FAQ */
.csip-faq__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.csip-faq__cats .csip-chip { height: 30px; padding: 0 11px; font-size: 11.5px; cursor: pointer; }
.csip-faq__list { border-top: 1px solid var(--c-rule); }
.csip-faq__item { border-bottom: 1px solid var(--c-rule); }
.csip-faq__item summary {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 4px; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--c-ink);
}
.csip-faq__item summary::-webkit-details-marker { display: none; }
.csip-faq__item summary::after { content: '+'; flex-shrink: 0; font: 400 20px/1 var(--f-sans); color: var(--c-ink-3); margin-top: -1px; }
.csip-faq__item[open] summary::after { content: '\2212'; color: var(--c-teal); }
.csip-faq__item summary:hover { background: var(--c-band); }
.csip-faq__item summary:focus-visible { outline: 2px solid var(--c-teal); outline-offset: -2px; border-radius: 4px; }
.csip-faq__a { padding: 0 4px 14px; font-size: 13px; line-height: 1.7; color: var(--c-ink-2); max-width: 780px; }
.csip-faq__est { font-size: 10.5px; color: var(--c-ink-3); white-space: nowrap; }

.csip-career__sources { margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--c-rule); font-size: 11.5px; line-height: 1.6; color: var(--c-ink-3); }
.csip-career__sources strong { color: var(--c-ink-2); font-weight: 600; }

/* ---------- Detail pages (career / course / exam), on the chapter-page layout ---------- */
.csip-career-page .csip-eyebrow { font-size: 10.5px; margin-bottom: 6px; }
.csip-career-page .csip-reader__title { margin-top: 0 !important; }
.csip-career-page__lead { font-size: 15.5px; line-height: 1.75; color: var(--c-ink-2); margin: 0 0 16px; }
@media (min-width: 768px) { .csip-career-page__lead { font-size: 16px; } }
.csip-career-page .csip-reader__meta .csip-badge { height: 22px; }

/* Key facts: a two-column list */
.csip-facts { display: grid; grid-template-columns: 1fr; margin: 0 0 1.2em; border: 1px solid var(--c-rule); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
@media (min-width: 640px) { .csip-facts { grid-template-columns: 1fr 1fr; } }
.csip-facts > div { padding: 12px 16px; border-bottom: 1px solid var(--c-rule); }
.csip-facts > div:last-child { border-bottom: 0; }
@media (min-width: 640px) {
    .csip-facts > div:nth-child(odd) { border-right: 1px solid var(--c-rule); }
    .csip-facts > div:nth-child(odd):nth-last-child(2) { border-bottom: 0; }
}
.csip-facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 3px; }
.csip-facts dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--c-ink); }
.csip-facts dd.is-long { font-size: 13px; font-weight: 500; color: var(--c-ink-2); }

/* Two remarks side by side: good fit / not a good fit */
.csip-fit { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 1.2em; }
@media (min-width: 768px) { .csip-fit { grid-template-columns: 1fr 1fr; } }
.csip-reader .csip-article .csip-fit .csip-remark { padding: 14px 18px; }
.csip-fit__label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-teal-text); margin-bottom: 6px; }
.csip-remark--warn .csip-fit__label { color: var(--c-rust); }
.csip-reader .csip-article .csip-fit ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.65; }
.csip-reader .csip-article .csip-fit li { margin: 0 0 4px; }

/* Ratings */
.csip-ratings { display: grid; grid-template-columns: 1fr; gap: 12px 28px; margin: 0 0 1.2em; }
@media (min-width: 640px) { .csip-ratings { grid-template-columns: 1fr 1fr; } }
.csip-ratings__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-ink-2); margin-bottom: 5px; }
.csip-ratings__row strong { color: var(--c-ink); font-weight: 700; }

/* Tags and numbered lists inside the article */
.csip-reader .csip-article .csip-career__tags { margin: 0 0 1.2em; gap: 6px; }
.csip-reader .csip-article .csip-career__tag { font-size: 12.5px; padding: 4px 10px; }
.csip-reader .csip-article .csip-roadmap { margin: 0 0 1.2em; padding-left: 22px; list-style: none; }
.csip-reader .csip-article .csip-roadmap .csip-roadmap__ms { padding-left: 18px; margin: 0; }
.csip-reader .csip-article .csip-roadmap__desc { font-size: 14px; margin: 6px 0 4px; }
.csip-reader .csip-article .csip-career__tablewrap { margin: 0 0 1.2em; }
.csip-reader .csip-article .csip-career__table th, .csip-reader .csip-article .csip-career__table td { font-size: 13px; }
.csip-reader .csip-article p.csip-career__note { margin: -0.6em 0 1.2em; font-size: 12px; line-height: 1.55; color: var(--c-ink-3); }

/* Related links at the end of the article */
.csip-related { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0 0 1em; }
@media (min-width: 768px) { .csip-related { grid-template-columns: repeat(3, 1fr); } }
.csip-related__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-amber-text); margin-bottom: 6px; }
.csip-reader .csip-article .csip-related ul { list-style: none; padding: 0; margin: 0; }
.csip-reader .csip-article .csip-related li { margin: 0; border-bottom: 1px solid var(--c-rule); }
.csip-reader .csip-article .csip-related a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px; font-size: 13.5px; font-weight: 600; color: var(--c-ink); text-decoration: none; line-height: 1.4; }
.csip-reader .csip-article .csip-related a::after { content: '\2192'; color: var(--c-teal); }
.csip-reader .csip-article .csip-related a:hover { color: var(--c-teal); }
html.dark .csip-reader .csip-article .csip-related a:hover { color: var(--c-teal-text); }

/* Right rail: quick facts under the call-to-action */
.csip-rail__facts { border-top: 1px solid var(--c-rule); padding-top: 12px; margin-top: 4px; }
.csip-rail__facts dt { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-3); }
.csip-rail__facts dd { margin: 2px 0 12px; font-size: 12.5px; font-weight: 600; line-height: 1.45; color: var(--c-ink); }