/* ==========================================================================
   CSIP12 Note Reader (Phase 3D) — frozen Phase 2 "NoteReader" design.
   Chrome + approved styling of the renderer's EXISTING hooks ([data-callout], card grids, tables,
   code, Mermaid, numbered headings). No content, markup or renderer changes. Light + dark via tokens.
   ========================================================================== */

:root { --c-code-bg: #FBF8F1; --c-mermaid-bg: #FFFFFF; }
html.dark { --c-code-bg: #0B1220; --c-mermaid-bg: #FFFFFF; }

.csip-reader { background: var(--c-paper); color: var(--c-ink); font-family: var(--f-sans); }
.csip-reader a { text-decoration: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reading progress: a thin teal line directly under the top bar */
.csip-readbar { position: fixed; top: var(--bar-h); left: 0; height: 3px; background: var(--c-teal); z-index: 44; transition: width .1s linear; }
html.dark .csip-readbar { background: var(--c-teal-text); }

.csip-reader__layout { display: flex; min-height: 100%; }
@media (min-width: 768px) { .csip-reader__layout.has-pane { padding-right: 52px; } }        /* collapsed study-pane tab */
@media (min-width: 1536px) { .csip-reader__layout.has-pane { padding-right: 380px; } }      /* study pane opens here */
.csip-reader__col { flex: 1; min-width: 0; }

/* Unit spine (same look as the chapter-list pages) */
.csip-spine { display: none; }
@media (min-width: 1024px) {
    .csip-spine {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        position: sticky; top: 0; align-self: flex-start; height: calc(100vh - var(--bar-h));
        width: 64px; flex-shrink: 0; padding: 22px 0; background: #1B2A41; box-sizing: border-box;
    }
    html.dark .csip-spine { background: #0B1220; border-right: 1px solid var(--c-rule); }
}
.csip-spine__tab { writing-mode: vertical-rl; padding: 14px 0; width: 34px; border-radius: 4px; text-align: center; color: #B9C2CE; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.csip-spine__tab:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.06); }
.csip-spine__tab.is-active { background: var(--c-teal); color: #FFFFFF; }

/* Sub-header: back to chapter list + chapter / reading time */
.csip-reader__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--c-rule); font-size: 12px; }
@media (min-width: 768px) { .csip-reader__bar { padding: 14px 32px; } }
.csip-reader__back { display: inline-flex; align-items: center; gap: 8px; color: var(--c-ink-2); font-weight: 600; min-width: 0; }
.csip-reader__back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csip-reader__back:hover { color: var(--c-teal); }
.csip-reader__time { color: var(--c-ink-3); white-space: nowrap; flex-shrink: 0; }

/* In-page contents as chips (phones, tablets, and wide screens without room for the column).
   The chip bar sticks to the top of the scroll area; js/csip-reader.js writes its rendered height to --reader-sticky-top
   (0 while it is hidden) so the sticky contents column and right rail stop below it instead of sliding underneath. */
.csip-tocchips {
    position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 18px; /* top:0 = just under the fixed bar (main already has 64px top padding) */
    background: var(--c-paper); border-bottom: 1px solid var(--c-rule); scrollbar-width: none; -ms-overflow-style: none;
}
.csip-tocchips::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .csip-tocchips { padding: 10px 32px; } }
.csip-tocchips[hidden] { display: none; }
.csip-tocchips__chip { flex-shrink: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 11px; border-radius: 4px; font-size: 11.5px; font-weight: 600; color: var(--c-ink-3); border-left: 2px solid transparent; }
.csip-tocchips__chip.is-current { color: var(--c-ink); border-left-color: var(--c-teal); background: var(--c-surface); }

/* Main grid: 1 column → article + rail (≥1280) → contents + article + rail (≥1440) */
.csip-reader__grid { display: block; padding: 20px 18px 24px; }
@media (min-width: 768px) { .csip-reader__grid { padding: 32px 32px 88px; max-width: 840px; margin: 0 auto; } }
.csip-toc, .csip-rail { display: none; }
@media (min-width: 1280px) {
    .csip-reader__grid { display: grid; grid-template-columns: minmax(0, 840px) 230px; gap: 36px; justify-content: center; max-width: none; }
    .csip-rail { display: block; }
}
@media (min-width: 1440px) {
    .csip-reader__grid { grid-template-columns: 190px minmax(0, 840px) 230px; }
    .csip-toc:not([hidden]) { display: block; }
    .csip-toc:not([hidden]) ~ .csip-reader__main { grid-column: 2; }
    .csip-reader__col:has(.csip-toc:not([hidden])) .csip-tocchips { display: none; }
}
/* With the study pane open (≥1536) there is room for all three columns only on very wide screens */
@media (min-width: 1536px) and (max-width: 1879.98px) {
    .has-pane .csip-reader__grid { grid-template-columns: minmax(0, 840px) 230px; }
    .has-pane .csip-toc:not([hidden]) { display: none; }
    .has-pane .csip-toc:not([hidden]) ~ .csip-reader__main { grid-column: auto; }
    .has-pane .csip-reader__col .csip-tocchips:not([hidden]) { display: flex; }
}
.csip-reader__main { min-width: 0; }

.csip-reader__col { --reader-sticky-top: 0px; --reader-sticky-gap: 24px; }
.csip-toc { position: sticky; top: calc(var(--reader-sticky-top) + var(--reader-sticky-gap)); align-self: start; max-height: calc(100vh - var(--bar-h) - var(--reader-sticky-top) - 2 * var(--reader-sticky-gap)); overflow-y: auto; padding-right: 8px; border-right: 1px solid var(--c-rule); }
.csip-toc__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-amber-text); margin-bottom: 12px; }
.csip-toc__list { list-style: none; margin: 0; padding: 0; }
.csip-toc__list a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid transparent; font-size: 12.5px; line-height: 1.4; color: var(--c-ink-2); }
.csip-toc__list a:hover { color: var(--c-ink); }
.csip-toc__list a.is-current { color: var(--c-ink); font-weight: 700; border-left-color: var(--c-teal); }

.csip-rail { position: sticky; top: calc(var(--reader-sticky-top) + var(--reader-sticky-gap)); align-self: start; }
.csip-rail__cta { display: block; background: var(--c-teal); color: #FFFFFF; border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.csip-rail__cta:hover { background: var(--c-teal-hover); }
.csip-rail__cta-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.csip-rail__cta-sub { display: block; font-size: 11.5px; color: #D5E7E1; }
.csip-rail__list { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--c-rule); padding-top: 10px; }
.csip-rail__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: 500 12.5px/1.3 var(--f-sans); color: var(--c-ink-2); text-align: left; }
.csip-rail__item:hover { background: var(--c-band); color: var(--c-ink); }
.csip-rail__item i { width: 16px; text-align: center; color: var(--c-ink-3); }
.csip-rail__item.is-saved, .csip-rail__item.is-saved i { color: var(--c-amber-text); }

/* Chapter header */
.csip-reader__crumbs { display: none; }
@media (min-width: 768px) { .csip-reader__crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--c-ink-3); margin-bottom: 12px; } }
.csip-reader__crumbs a { color: var(--c-ink-3); }
.csip-reader__crumbs a:hover { color: var(--c-teal); }
.csip-reader__crumbs [aria-current] { color: var(--c-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.csip-reader__num { font-family: var(--f-serif); font-weight: 700; font-size: 34px; line-height: 1; color: var(--c-rule-2); }
@media (min-width: 768px) { .csip-reader__num { font-size: 44px; } }
.csip-reader .csip-reader__title { font-family: var(--f-serif) !important; font-weight: 600 !important; font-size: 24px !important; line-height: 1.25 !important; color: var(--c-ink) !important; margin: 4px 0 10px !important; letter-spacing: 0; }
@media (min-width: 768px) { .csip-reader .csip-reader__title { font-size: 32px !important; } }
.csip-reader__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; color: var(--c-ink-3); margin-bottom: 16px; }
.csip-reader__strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--c-rule); }
@media (min-width: 1280px) { .csip-reader__strip { display: none; } }
@media (max-width: 767.98px) { .csip-reader__strip .csip-btn--primary { flex: 1 1 100%; } }
.csip-reader__strip [data-csip-save].is-saved { border-color: var(--c-amber); color: var(--c-amber-text); }

.csip-likebtn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--c-rule-2); background: transparent; color: var(--c-ink-2); cursor: pointer; font: 600 12.5px/1 var(--f-sans); }
.csip-likebtn i { color: var(--c-ink-3); transition: transform .15s; }
.csip-likebtn:hover { border-color: var(--c-rust); color: var(--c-rust); }
.csip-likebtn.is-liked { border-color: var(--c-rust); background: var(--c-rust-tint); color: var(--c-rust); }
.csip-likebtn.is-liked i { color: var(--c-rust); }
.csip-rail__item.csip-likebtn { height: auto; border: 0; padding: 8px 6px; }

/* ---------- Article: approved styling of the rendered content (hooks only) ---------- */
.csip-reader .csip-article { max-width: none; font-size: 15.5px; line-height: 1.8; color: var(--c-ink-2); overflow-wrap: break-word; }
@media (min-width: 768px) { .csip-reader .csip-article { font-size: 16px; } }
.csip-reader .csip-article p { color: var(--c-ink-2); font-size: inherit; line-height: 1.8; margin: 0 0 1.05em; }
.csip-reader .csip-article strong { color: var(--c-ink); }
.csip-reader .csip-article a { color: var(--c-teal); text-decoration: underline; text-underline-offset: 3px; }
html.dark .csip-reader .csip-article a { color: var(--c-teal-text); }
.csip-reader .csip-article h2 { font-family: var(--f-serif) !important; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--c-ink) !important; margin: 1.9em 0 .7em; padding-bottom: .35em; border-bottom: 1px solid var(--c-rule); }
@media (min-width: 768px) { .csip-reader .csip-article h2 { font-size: 23px; } }
.csip-reader .csip-article h3:not(.grid *) { font-family: var(--f-serif) !important; font-size: 18px; font-weight: 600; color: var(--c-ink) !important; margin: 1.6em 0 .5em; }
.csip-reader .csip-article h4 { font-size: 15.5px; font-weight: 700; color: var(--c-ink); margin: 1.4em 0 .4em; }
.csip-reader .csip-article .csip-anchor { scroll-margin-top: 72px; }
@media (max-width: 767.98px) { .csip-reader .csip-article .csip-anchor { scroll-margin-top: 128px; } }
/* Numbered headings rebuilt by the page script: keep the number badge, in brand teal */
.csip-reader .csip-article [class*="from-teal-600"] { background: var(--c-teal) !important; box-shadow: none !important; }
.csip-reader .csip-article .border-b.border-slate-100 { border-color: var(--c-rule) !important; }
.csip-reader .csip-article ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1.1em; }
.csip-reader .csip-article ol { list-style: decimal; padding-left: 1.5em; margin: 0 0 1.1em; }
.csip-reader .csip-article li { margin: .3em 0; }
.csip-reader .csip-article li::marker { color: var(--c-ink-3); }
.csip-reader .csip-article hr { border: 0; border-top: 1px solid var(--c-rule); margin: 2em 0; }
.csip-reader .csip-article blockquote:not([data-callout]) { border-left: 3px solid var(--c-rule-2); margin: 1.2em 0; padding: .2em 0 .2em 1em; color: var(--c-ink-2); }

/* Inline code and code blocks (highlight.js keeps its token colours; theme follows light/dark) */
.csip-reader .csip-article :not(pre) > code { font-family: 'JetBrains Mono', monospace; font-size: .86em; background: var(--c-band); color: var(--c-ink); padding: .12em .4em; border-radius: 4px; }
.csip-reader .csip-article pre { position: relative; background: var(--c-code-bg) !important; color: var(--c-ink); border: 1px solid var(--c-rule) !important; border-radius: 10px; padding: 16px 18px; margin: 1.2em 0 1.5em; overflow-x: auto; font: 13.5px/1.7 'JetBrains Mono', monospace; }
.csip-reader .csip-article pre code, .csip-reader .csip-article pre code.hljs { background: transparent !important; padding: 0 !important; font-size: inherit; color: inherit; }
/* Run buttons: always visible (they were hover-only, so touch screens never saw them) */
.csip-reader .csip-article pre > button { opacity: 1 !important; top: 8px !important; right: 8px !important; background: var(--c-teal) !important; color: #FFFFFF !important; border-radius: 4px !important; padding: 4px 10px !important; font: 700 11px/1.4 var(--f-sans) !important; box-shadow: none !important; }
.csip-reader .csip-article pre > button:hover { background: var(--c-teal-hover) !important; }
.csip-reader .csip-article pre:has(> button) { padding-top: 40px; }

/* Tables: scroll inside themselves on narrow screens instead of widening the page */
.csip-reader .csip-article table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.2em 0 1.5em; font-size: 14px; line-height: 1.5; }
.csip-reader .csip-article th, .csip-reader .csip-article td { border: 1px solid var(--c-rule); padding: 8px 12px; text-align: left; vertical-align: top; color: var(--c-ink-2); }
.csip-reader .csip-article th { background: var(--c-band); color: var(--c-ink); font-weight: 700; }

/* Mermaid diagrams: light card in both themes (the diagrams use Mermaid's light "neutral" theme) */
.csip-reader .csip-article .mermaid { background: var(--c-mermaid-bg) !important; border: 1px solid var(--c-rule) !important; border-radius: 12px !important; box-shadow: none !important; overflow-x: auto; }
.csip-reader .csip-article .mermaid svg { max-width: 100%; height: auto; }

/* Callouts (renderer: [data-callout] = tip | important | warning | note | rule | beyond) */
.csip-reader .csip-article [data-callout] { border-radius: 0 10px 10px 0 !important; border-width: 0 0 0 4px !important; border-style: solid !important; box-shadow: none !important; color: var(--c-ink) !important; padding: 14px 18px !important; margin: 1.4em 0 !important; }
.csip-reader .csip-article [data-callout] > div:first-child { font-size: 11px !important; letter-spacing: .06em !important; margin-bottom: 6px !important; }
.csip-reader .csip-article [data-callout] p, .csip-reader .csip-article [data-callout] li { color: var(--c-ink) !important; }
.csip-reader .csip-article [data-callout="tip"] { background: var(--c-teal-tint) !important; border-color: var(--c-teal) !important; }
.csip-reader .csip-article [data-callout="tip"] > div:first-child { color: var(--c-teal-text) !important; }
.csip-reader .csip-article [data-callout="important"] { background: var(--c-amber-tint) !important; border-color: var(--c-amber) !important; }
.csip-reader .csip-article [data-callout="important"] > div:first-child { color: var(--c-amber-text) !important; }
.csip-reader .csip-article [data-callout="warning"] { background: var(--c-rust-tint) !important; border-color: var(--c-rust) !important; }
.csip-reader .csip-article [data-callout="warning"] > div:first-child { color: var(--c-rust) !important; }
.csip-reader .csip-article [data-callout="note"] { background: var(--c-band) !important; border-color: var(--c-ink-2) !important; }
.csip-reader .csip-article [data-callout="note"] > div:first-child { color: var(--c-ink) !important; }
.csip-reader .csip-article [data-callout="rule"] { background: var(--c-surface) !important; border-color: var(--c-teal) !important; outline: 1px solid var(--c-rule); }
.csip-reader .csip-article [data-callout="rule"] > div:first-child { color: var(--c-teal-text) !important; }
.csip-reader .csip-article [data-callout="beyond"] { background: transparent !important; border: 1px dashed var(--c-rule-2) !important; border-radius: 10px !important; }
.csip-reader .csip-article [data-callout="beyond"] > div:first-child { color: var(--c-ink-2) !important; }

/* Card grids (::: grid / ::: card) — keep the structure, apply the paper/teal styling */
.csip-reader .csip-article .grid > div { background: var(--c-surface) !important; border: 1px solid var(--c-rule) !important; border-radius: 12px !important; box-shadow: none !important; transform: none !important; }
.csip-reader .csip-article .grid > div:hover { border-color: var(--c-teal) !important; }
.csip-reader .csip-article .grid > div h3 { color: var(--c-teal-text) !important; }
html.dark .csip-reader .csip-article .grid > div h3 { color: var(--c-teal-text) !important; }
.csip-reader .csip-article .grid > div p { color: var(--c-ink-2) !important; }
.csip-reader .csip-article .grid > div code { background: var(--c-teal-tint) !important; color: var(--c-teal-text) !important; border-color: transparent !important; }
.csip-reader .csip-article .grid > div > .csip-cardnum { font-family: var(--f-serif); font-weight: 700; font-size: 24px !important; color: var(--c-amber-text); }

/* ---------- Below the article ---------- */
.csip-chapnav { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 36px 0 20px; padding-top: 20px; border-top: 1px solid var(--c-rule); }
@media (min-width: 640px) { .csip-chapnav { grid-template-columns: 1fr 1fr; } }
.csip-chapnav__link { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--c-rule); border-radius: 10px; background: var(--c-surface); color: var(--c-ink); min-width: 0; }
.csip-chapnav__link:hover { border-color: var(--c-teal); }
.csip-chapnav__link--next { text-align: right; }
@media (min-width: 640px) { .csip-chapnav__link--next { grid-column: 2; } }
.csip-chapnav__dir { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-teal); }
html.dark .csip-chapnav__dir { color: var(--c-teal-text); }
.csip-chapnav__title { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.csip-reader__end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 20px; }
@media (max-width: 767.98px) { .csip-reader__end .csip-btn--lg { flex: 1 1 100%; } }
.csip-reader__end .csip-likebtn { height: 40px; }

.csip-reader__solved { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 24px; }
@media (min-width: 640px) { .csip-reader__solved { flex-direction: row; align-items: center; justify-content: space-between; } }
.csip-reader__solved-title { font-weight: 700; font-size: 14px; color: var(--c-ink); display: flex; align-items: center; gap: 8px; }
.csip-reader__solved p { margin: 2px 0 0; font-size: 12.5px; color: var(--c-ink-2); }
.csip-reader__solved .csip-btn { white-space: normal; height: auto; min-height: 34px; padding-top: 8px; padding-bottom: 8px; }

/* Support card (existing component): brand navy panel instead of the old slate/teal gradient */
.csip-reader #student-support-container > div:first-child { background: #1B2A41 !important; border-color: transparent !important; }
html.dark .csip-reader #student-support-container > div:first-child { background: #16233A !important; border: 1px solid var(--c-rule) !important; }
.csip-reader #approved-doubts-stream h4 { color: var(--c-ink) !important; }

/* ---------- Mobile action bar (replaces the bottom nav on chapter pages) ---------- */
.csip-actionbar { display: none; }
@media (max-width: 767.98px) {
    .csip-actionbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        display: flex; align-items: center; gap: 8px;
        height: calc(64px + env(safe-area-inset-bottom)); padding: 0 12px env(safe-area-inset-bottom);
        background: var(--c-surface); border-top: 1px solid var(--c-rule);
    }
    /* keep floating popups (like feedback, XP reward) clear of the bar */
    #like-feedback-popover, #xp-popup { bottom: calc(80px + env(safe-area-inset-bottom)) !important; right: 12px !important; left: 12px !important; max-width: none !important; }
}
.csip-actionbar__icon { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--c-rule); border-radius: 8px; background: transparent; color: var(--c-ink-2); font-size: 16px; cursor: pointer; padding: 0; }
.csip-actionbar__icon.is-saved { color: var(--c-amber-text); border-color: var(--c-amber); }
.csip-actionbar__icon.csip-likebtn { height: 42px; }
.csip-actionbar__cta { flex: 1; min-width: 0; height: 42px; overflow: hidden; text-overflow: ellipsis; }