/* ============================================================
   AISTLE CAREER BRIDGE
   Student Learning & Revision Portal

   Extends the Aistle Nova design system (css/styles.css).
   All base tokens (--primary, --accent, --border, --radius-*,
   --shadow-*, Inter) are inherited. This file only adds the
   documentation / code-learning layer.

   Every selector is namespaced `cb-` so nothing here can leak
   into the main marketing site.
   ============================================================ */

:root {
    /* Typography */
    --cb-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono',
               Menlo, Consolas, 'Liberation Mono', monospace;

    /* Code surface — derived from --dark (#0A1628) */
    --cb-code-bg: #0B1B2E;
    --cb-code-bar: #12293F;
    --cb-code-border: #1D3A55;
    --cb-code-fg: #D6E2F0;

    /* Syntax palette — anchored to the Aistle cyan accent.
       All tokens tested >= 5.5:1 against --cb-code-bg. */
    --cb-syn-comment: #8296AC;
    --cb-syn-keyword: #5EC8E5;
    --cb-syn-type:    #F2C97D;
    --cb-syn-string:  #9DE0A8;
    --cb-syn-number:  #F0A868;
    --cb-syn-method:  #C4B5FD;

    /* Learning surfaces */
    --cb-surface: #FFFFFF;
    --cb-surface-alt: #F7F9FC;
    --cb-rule: #E2E8F0;
    --cb-rule-soft: #EDF2F7;

    --cb-toc-top: 95px;   /* sticky header (75px) + breathing room */
}

/* ============================================================
   1. PAGE SHELL
   ============================================================ */
.cb-page {
    background: var(--white);
}

.cb-section {
    padding: 64px 0;
}

.cb-section--tight { padding: 44px 0; }

.cb-section--alt {
    background: var(--cb-surface-alt);
    border-top: 1px solid var(--cb-rule);
    border-bottom: 1px solid var(--cb-rule);
}

/* Section label used above every major block */
.cb-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 10px;
}

.cb-h2 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--primary);
    margin-bottom: 12px;
}

.cb-lede {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.75;
    max-width: 68ch;
}

/* ============================================================
   2. PROGRAM BANNER  (Career Bridge home)
   ============================================================ */
.cb-banner {
    position: relative;
    overflow: hidden;
    padding: 72px 0 64px;
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-blue) 55%, var(--primary) 100%);
}

.cb-banner .hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 60px 60px;
}

.cb-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 25% 45%, rgba(0,180,216,0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 78% 25%, rgba(0,180,216,0.06) 0%, transparent 50%);
}

.cb-banner .container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
}

.cb-banner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(0,180,216,0.12);
    border: 1px solid rgba(0,180,216,0.28);
    color: var(--accent-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.cb-banner h1 {
    font-size: 2.7rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 6px;
}

.cb-banner-sub {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-light);
    margin-bottom: 18px;
}

.cb-banner p.cb-banner-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.72);
    max-width: 56ch;
    margin-bottom: 26px;
}

.cb-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    font-size: 0.82rem;
    font-weight: 500;
}

.cb-chip svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }

/* Project card inside the banner */
.cb-project-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-lg);
    padding: 30px;
    backdrop-filter: blur(6px);
}

.cb-project-card .cb-project-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.cb-project-card h2 {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.cb-project-card p {
    font-size: 0.93rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin-bottom: 22px;
}

.cb-project-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 20px;
}

.cb-project-flow-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cb-project-flow-item:last-child { border-bottom: 0; padding-bottom: 0; }

.cb-project-flow-item .cb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 0 4px rgba(0,180,216,0.15);
}

.cb-flow-body { display: flex; flex-direction: column; min-width: 0; }

.cb-flow-body small {
    font-family: var(--cb-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2px;
}

.cb-flow-body strong {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    line-height: 1.4;
}

/* ============================================================
   3. LEARNING JOURNEY
   ============================================================ */
.cb-journey {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    counter-reset: cb-step;
}

.cb-journey-step {
    position: relative;
    background: var(--cb-surface);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    padding: 18px 16px 16px;
}

.cb-journey-step::before {
    counter-increment: cb-step;
    content: counter(cb-step, decimal-leading-zero);
    display: block;
    font-family: var(--cb-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-light);
    margin-bottom: 8px;
}

.cb-journey-step h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
    line-height: 1.3;
}

.cb-journey-step p {
    font-size: 0.79rem;
    color: var(--gray);
    line-height: 1.5;
}

/* Stage grouping bar above the journey */
.cb-journey-stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.cb-stage {
    border: 1px solid var(--cb-rule);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--cb-surface);
    padding: 14px 16px;
}

.cb-stage span {
    display: block;
    font-family: var(--cb-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-dark);
    font-weight: 600;
    margin-bottom: 4px;
}

.cb-stage strong {
    display: block;
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 700;
}

/* ============================================================
   4. PHASES + SESSION CARDS
   ============================================================ */
.cb-phase { margin-bottom: 44px; }
.cb-phase:last-child { margin-bottom: 0; }

.cb-phase-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--cb-rule);
}

.cb-phase-num {
    font-family: var(--cb-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: rgba(0,180,216,0.08);
    border: 1px solid rgba(0,180,216,0.18);
    border-radius: 4px;
    padding: 4px 10px;
}

.cb-phase-head h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.015em;
}

.cb-phase-head .cb-phase-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--gray);
}

.cb-session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.cb-session-card {
    display: flex;
    flex-direction: column;
    background: var(--cb-surface);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

a.cb-session-card { color: inherit; }

a.cb-session-card:hover,
a.cb-session-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 8px 26px rgba(15,43,70,0.09);
    transform: translateY(-2px);
}

.cb-session-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.cb-session-num {
    font-family: var(--cb-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gray);
}

.cb-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 4px;
    white-space: nowrap;
}

.cb-status--available {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.26);
    color: #0A7C5A;
}

.cb-status--soon {
    background: var(--cb-surface-alt);
    border: 1px solid var(--cb-rule);
    color: var(--gray);
}

.cb-dot-sm {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.cb-session-card h4 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.32;
    margin-bottom: 12px;
}

.cb-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.cb-topic {
    font-size: 0.75rem;
    color: var(--text-light);
    background: var(--cb-surface-alt);
    border: 1px solid var(--cb-rule-soft);
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.4;
}

.cb-session-step {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--cb-rule);
    font-size: 0.8rem;
    color: var(--gray);
}

.cb-session-step strong {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 3px;
}

.cb-session-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--accent-dark);
}

.cb-session-cta svg { width: 15px; height: 15px; transition: transform 0.22s ease; }
a.cb-session-card:hover .cb-session-cta svg { transform: translateX(3px); }

/* Coming soon — deliberately quieter, and never a link */
.cb-session-card.is-soon {
    background: var(--cb-surface-alt);
    border-style: dashed;
    border-color: var(--cb-rule);
}

.cb-session-card.is-soon h4 { color: var(--gray); font-weight: 600; }
.cb-session-card.is-soon .cb-session-num { color: var(--gray-light); }
.cb-session-card.is-soon .cb-soon-note {
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.55;
}

/* Upcoming tracks (not yet scheduled into sessions) */
.cb-track-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

.cb-track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    background: var(--cb-surface);
    border: 1px dashed var(--cb-rule);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--text-light);
    font-weight: 500;
}

.cb-track .cb-dot-sm { background: var(--gray-light); }

/* ============================================================
   5. SESSION PAGE — COMPACT HEADER
   ============================================================ */
.cb-session-header {
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-blue) 100%);
    padding: 36px 0 34px;
    position: relative;
    overflow: hidden;
}

.cb-session-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 60%, rgba(0,180,216,0.10) 0%, transparent 55%);
}

.cb-session-header .container { position: relative; z-index: 2; }

.cb-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    margin-bottom: 16px;
}

.cb-breadcrumb a { color: var(--accent-light); }
.cb-breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.cb-breadcrumb .cb-sep { color: rgba(255,255,255,0.35); }
.cb-breadcrumb [aria-current] { color: rgba(255,255,255,0.75); }

.cb-session-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cb-session-eyebrow {
    font-family: var(--cb-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 5px 11px;
    border: 1px solid rgba(0,180,216,0.3);
    border-radius: 4px;
    background: rgba(0,180,216,0.08);
}

.cb-session-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.cb-session-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* ============================================================
   6. LESSON LAYOUT (sticky TOC + content)
   ============================================================ */
.cb-layout {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding: 44px 0 72px;
}

.cb-toc-wrap { position: sticky; top: var(--cb-toc-top); }

.cb-toc {
    border-left: 2px solid var(--cb-rule);
    padding-left: 0;
    max-height: calc(100vh - var(--cb-toc-top) - 40px);
    overflow-y: auto;
}

.cb-toc-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray);
    padding: 0 0 10px 16px;
}

.cb-toc ul { list-style: none; margin: 0; padding: 0; }

.cb-toc a {
    display: block;
    padding: 6px 12px 6px 16px;
    font-size: 0.855rem;
    line-height: 1.45;
    color: var(--text-light);
    border-left: 2px solid transparent;
    margin-left: -2px;
    border-radius: 0 4px 4px 0;
}

.cb-toc a:hover { color: var(--accent-dark); background: var(--cb-surface-alt); }

.cb-toc a.is-active {
    color: var(--accent-dark);
    font-weight: 600;
    border-left-color: var(--accent);
    background: rgba(0,180,216,0.05);
}

/* Mobile contents — native <details>, no JS required */
.cb-toc-mobile {
    display: none;
    margin: 0 0 28px;
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    background: var(--cb-surface-alt);
    overflow: hidden;
}

.cb-content { min-width: 0; }

/* ============================================================
   7. LESSON CONTENT PRIMITIVES
   ============================================================ */
.cb-block { margin-bottom: 56px; scroll-margin-top: calc(var(--cb-toc-top) + 8px); }
.cb-block:last-child { margin-bottom: 0; }

.cb-block > h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.02em;
    padding-bottom: 12px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--cb-rule);
}

.cb-prose p {
    font-size: 0.98rem;
    line-height: 1.78;
    color: var(--text-light);
    margin-bottom: 16px;
    max-width: 72ch;
}

.cb-prose p:last-child { margin-bottom: 0; }

.cb-prose strong { color: var(--text); font-weight: 600; }

.cb-prose code,
.cb-inline {
    font-family: var(--cb-mono);
    font-size: 0.86em;
    background: rgba(15,43,70,0.055);
    border: 1px solid rgba(15,43,70,0.08);
    color: var(--primary);
    padding: 1.5px 6px;
    border-radius: 4px;
    /* pre-wrap keeps internal spacing and lets a long phrase wrap at its spaces;
       break-word splits a single token only when it cannot fit on a line at all.
       Short tokens still never break, so this reads exactly as `nowrap` did —
       but a 74-character name can no longer push the whole page sideways. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
    /* When a bullet or breakdown cell is nothing but a code token, this span
       becomes a flex item, and a flex item's default min-width:auto refuses to
       shrink below its content - so it would overflow however it wraps. */
    min-width: 0;
}

/* Learning outcomes */
.cb-outcomes {
    background: var(--cb-surface-alt);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    padding: 26px 28px;
}

.cb-outcomes > p {
    font-size: 0.95rem;
    color: var(--text-light);
    margin-bottom: 18px;
}

.cb-outcome-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 0;
}

/* Normal inline flow, not flex. `display: flex` made every text run and every
   <span> in the bullet a separate flex item on one non-wrapping row, so prose
   could not wrap and inline-code spans were squeezed below their own content
   until the text spilled out of the list item. The icon is positioned instead,
   which keeps the identical 25px text offset and 3px optical drop. */
.cb-outcome-list li {
    display: block;
    position: relative;
    padding-left: 25px;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}

.cb-outcome-list li svg {
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px; height: 16px;
    color: var(--accent-dark);
    flex-shrink: 0;
}

/* Quick Recap — what carried over from the previous session.
   Visually quieter than the outcomes box so it never competes with
   today's material. */
.cb-recap {
    border: 1px solid var(--cb-rule);
    border-left: 3px solid var(--gray-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--cb-surface-alt);
    padding: 22px 26px;
}

.cb-recap > p {
    font-size: 0.94rem;
    color: var(--text-light);
    margin-bottom: 16px;
}

.cb-recap .cb-code { margin-top: 0; }
.cb-recap .cb-breakdown:last-child { margin-bottom: 0; }

/* Concept Check — a prediction the student answers before revealing.
   Same disclosure mechanics as an assignment answer, lighter frame. */
.cb-check {
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: rgba(0, 180, 216, 0.035);
    padding: 22px 24px;
    margin: 22px 0;
}

.cb-check > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 12px;
}

.cb-check > h4 svg { width: 15px; height: 15px; flex-shrink: 0; }

.cb-check > p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 14px;
}

.cb-check .cb-disclosure { margin-top: 14px; }

/* Concept card */
.cb-concept {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    background: var(--cb-surface);
    padding: 26px 28px;
    margin-bottom: 22px;
    scroll-margin-top: calc(var(--cb-toc-top) + 8px);
}

.cb-concept:last-child { margin-bottom: 0; }

.cb-concept > h3 {
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.cb-concept > h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 24px 0 10px;
}

/* Short definition — the first thing a reviser reads */
.cb-def {
    border-left: 3px solid var(--accent);
    background: rgba(0,180,216,0.045);
    padding: 13px 18px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 18px;
}

.cb-def strong { font-weight: 700; color: var(--primary); }

/* Key point */
.cb-keypoint {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--cb-surface-alt);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    padding: 14px 17px;
    margin-top: 18px;
}

.cb-keypoint svg { width: 17px; height: 17px; color: var(--accent-dark); flex-shrink: 0; margin-top: 2px; }
.cb-keypoint p { font-size: 0.91rem; line-height: 1.65; color: var(--text-light); margin: 0; }
.cb-keypoint strong { color: var(--primary); font-weight: 700; }

/* Callout — "Important" distinctions */
.cb-callout {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    border: 1px solid #F2C97D;
    background: #FFFBF2;
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    padding: 16px 19px;
    margin: 20px 0;
}

.cb-callout svg { width: 18px; height: 18px; color: #B5761A; flex-shrink: 0; margin-top: 2px; }
.cb-callout-body { min-width: 0; }
.cb-callout-title {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #8A5A12;
    margin-bottom: 6px;
}
.cb-callout p { font-size: 0.93rem; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
.cb-callout p:last-child { margin-bottom: 0; }

/* Plain note callout */
.cb-callout--note { border-color: rgba(0,180,216,0.35); background: rgba(0,180,216,0.045); }
.cb-callout--note svg { color: var(--accent-dark); }
.cb-callout--note .cb-callout-title { color: var(--accent-dark); }

/* ============================================================
   8. CODE BLOCKS
   ============================================================ */
.cb-code {
    border: 1px solid var(--cb-code-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--cb-code-bg);
    margin: 18px 0;
}

.cb-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px 8px 14px;
    background: var(--cb-code-bar);
    border-bottom: 1px solid var(--cb-code-border);
}

.cb-code-meta {
    display: flex;
    align-items: baseline;
    min-width: 0;
}

.cb-code-lang {
    font-family: var(--cb-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #93AEC6;
}

.cb-code-file {
    font-family: var(--cb-mono);
    font-size: 0.72rem;
    color: #6E8AA6;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #C6D8EA;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    min-height: 30px;
}

.cb-copy svg { width: 13px; height: 13px; }
.cb-copy:hover { background: rgba(0,180,216,0.18); border-color: rgba(0,180,216,0.45); color: var(--white); }
.cb-copy.is-copied { background: rgba(16,185,129,0.2); border-color: rgba(16,185,129,0.5); color: #7EE7B8; }
.cb-copy-idle,
.cb-copy-done { display: inline-flex; align-items: center; gap: 6px; }
.cb-copy .cb-copy-done { display: none; }
.cb-copy.is-copied .cb-copy-idle { display: none; }
.cb-copy.is-copied .cb-copy-done { display: inline-flex; }

.cb-code pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cb-code code {
    display: block;
    font-family: var(--cb-mono);
    font-size: 0.855rem;
    line-height: 1.72;
    color: var(--cb-code-fg);
    white-space: pre;
    tab-size: 4;
}

/* Syntax tokens */
.cb-c  { color: var(--cb-syn-comment); font-style: italic; }
.cb-k  { color: var(--cb-syn-keyword); font-weight: 600; }
.cb-t  { color: var(--cb-syn-type); }
.cb-s  { color: var(--cb-syn-string); }
.cb-n  { color: var(--cb-syn-number); }
.cb-fn { color: var(--cb-syn-method); }

/* Console output block */
.cb-code--output { background: #0F2231; }
.cb-code--output code { color: #B9CEE0; }

/* Scrollbar inside code */
.cb-code pre::-webkit-scrollbar { height: 9px; }
.cb-code pre::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.cb-code pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 5px; }
.cb-code pre::-webkit-scrollbar-thumb:hover { background: rgba(0,180,216,0.4); }

/* ============================================================
   9. CODE BREAKDOWN  ( token -> meaning )
   ============================================================ */
.cb-breakdown {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin: 16px 0;
}

.cb-breakdown-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.9fr) 22px minmax(0, 1.6fr);
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--cb-rule-soft);
    background: var(--cb-surface);
}

.cb-breakdown-row:last-child { border-bottom: 0; }
.cb-breakdown-row:nth-child(even) { background: var(--cb-surface-alt); }

.cb-breakdown-token {
    font-family: var(--cb-mono);
    font-size: 0.845rem;
    font-weight: 600;
    color: var(--primary);
    word-break: break-word;
}

.cb-breakdown-arrow {
    color: var(--accent);
    font-size: 0.9rem;
    text-align: center;
    line-height: 1;
}

.cb-breakdown-meaning {
    font-size: 0.885rem;
    color: var(--text-light);
    line-height: 1.5;
}

.cb-breakdown-meaning b { color: var(--text); font-weight: 600; }

/* Reference -> object diagram */
.cb-refdiagram {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    margin: 18px 0;
    padding: 20px;
    background: var(--cb-surface-alt);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
}

.cb-refbox {
    font-family: var(--cb-mono);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: var(--white);
    border: 1px solid var(--cb-rule);
    color: var(--primary);
    text-align: center;
    line-height: 1.35;
}

.cb-refbox small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray);
    letter-spacing: 0.4px;
    margin-top: 3px;
}

.cb-refbox--object { border-color: var(--accent); background: rgba(0,180,216,0.06); }

.cb-refarrow {
    flex: 1 1 60px;
    min-width: 60px;
    height: 2px;
    background: var(--accent);
    position: relative;
    margin: 0 4px;
}

.cb-refarrow::after {
    content: '';
    position: absolute;
    right: -1px; top: 50%;
    transform: translateY(-50%);
    border-left: 8px solid var(--accent);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.cb-refarrow span {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--gray);
    white-space: nowrap;
    letter-spacing: 0.4px;
}

/* ============================================================
   10. KEY PATTERNS
   ============================================================ */
.cb-keypattern {
    border: 1px solid var(--cb-rule);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-md);
    background: var(--cb-surface);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.cb-keypattern:last-child { margin-bottom: 0; }

.cb-keypattern > h3 {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-dark);
    margin-bottom: 12px;
}

.cb-keypattern .cb-code { margin-top: 0; }

/* ============================================================
   11. INCIDENT FLOW PROJECT PROGRESS
   ============================================================ */
.cb-project-progress {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cb-project-progress-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--dark-blue) 100%);
}

.cb-project-progress-head svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }

.cb-project-progress-head h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--white);
}

.cb-project-progress-body { padding: 24px; background: var(--cb-surface); }

/* Little UI preview of the Swing screen */
.cb-ui-preview {
    max-width: 420px;
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    margin: 6px 0 20px;
}

.cb-ui-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--cb-surface-alt);
    border-bottom: 1px solid var(--cb-rule);
}

.cb-ui-titlebar i {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--gray-light); display: block;
}

.cb-ui-titlebar span {
    margin-left: 6px;
    font-size: 0.74rem;
    color: var(--gray);
    font-weight: 500;
}

.cb-ui-body { padding: 18px; display: flex; flex-direction: column; gap: 11px; }

.cb-ui-field { display: flex; flex-direction: column; gap: 5px; }

.cb-ui-field label {
    font-size: 0.78rem;
    color: var(--text-light);
    font-weight: 500;
}

.cb-ui-field i {
    display: block;
    height: 26px;
    border: 1px solid var(--cb-rule);
    border-radius: 3px;
    background: var(--cb-surface-alt);
}

.cb-ui-btn {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--light-alt);
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    padding: 7px 14px;
}

/* ============================================================
   12. ASSIGNMENTS
   ============================================================ */
.cb-assignment {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    background: var(--cb-surface);
    margin-bottom: 20px;
    overflow: hidden;
}

.cb-assignment:last-child { margin-bottom: 0; }

.cb-assignment-head {
    padding: 20px 24px 0;
}

.cb-assignment-num {
    display: inline-block;
    font-family: var(--cb-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-dark);
    background: rgba(0,180,216,0.08);
    border: 1px solid rgba(0,180,216,0.18);
    border-radius: 4px;
    padding: 3px 9px;
    margin-bottom: 10px;
}

.cb-assignment-head h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.35;
}

.cb-assignment-body { padding: 14px 24px 22px; }

.cb-task {
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--text-light);
    margin-bottom: 16px;
}

.cb-subhead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gray);
    margin: 20px 0 10px;
}

.cb-reqs { list-style: none; margin: 0; padding: 0; }

.cb-reqs li {
    position: relative;
    padding-left: 22px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-light);
    margin-bottom: 8px;
}

.cb-reqs li::before {
    content: '';
    position: absolute;
    left: 4px; top: 9px;
    width: 6px; height: 6px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
}

.cb-reqs li:last-child { margin-bottom: 0; }

/* Expected output — plain, screen-like */
.cb-expected {
    font-family: var(--cb-mono);
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--text);
    background: var(--cb-surface-alt);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    white-space: pre-wrap;
    overflow-x: auto;
    margin-bottom: 4px;
}

/* Concepts practised footer */
.cb-practised {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--cb-rule);
}

/* ============================================================
   13. ANSWER DISCLOSURE  (native <details> — no JS needed)
   ============================================================ */
.cb-disclosure {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    background: var(--cb-surface-alt);
    margin-top: 18px;
    overflow: hidden;
}

.cb-disclosure > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    cursor: pointer;
    list-style: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-dark);
    user-select: none;
    min-height: 44px;
    transition: background 0.18s ease;
}

.cb-disclosure > summary::-webkit-details-marker { display: none; }
.cb-disclosure > summary::marker { content: ''; }
.cb-disclosure > summary:hover { background: rgba(0,180,216,0.06); }

.cb-disclosure > summary svg {
    width: 15px; height: 15px;
    flex-shrink: 0;
    transition: transform 0.22s ease;
}

.cb-disclosure[open] > summary svg { transform: rotate(90deg); }
.cb-disclosure[open] > summary { border-bottom: 1px solid var(--cb-rule); }

.cb-disclosure .cb-label-hide { display: none; }
.cb-disclosure[open] .cb-label-show { display: none; }
.cb-disclosure[open] .cb-label-hide { display: inline; }

.cb-disclosure-body {
    padding: 18px 20px 20px;
    background: var(--cb-surface);
}

.cb-disclosure-body > *:first-child { margin-top: 0; }
.cb-disclosure-body > *:last-child { margin-bottom: 0; }

/* ============================================================
   14. INTERVIEW QUESTIONS
   ============================================================ */
.cb-iq-grid { display: grid; gap: 14px; }

.cb-iq {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    background: var(--cb-surface);
    overflow: hidden;
}

.cb-iq > summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
    transition: background 0.18s ease;
}

.cb-iq > summary::-webkit-details-marker { display: none; }
.cb-iq > summary::marker { content: ''; }
.cb-iq > summary:hover { background: var(--cb-surface-alt); }

.cb-iq-q {
    flex: 1;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.5;
    min-width: 0;
    overflow-wrap: break-word;
}

.cb-iq-num {
    font-family: var(--cb-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-dark);
    background: rgba(0,180,216,0.08);
    border-radius: 4px;
    padding: 3px 7px;
    flex-shrink: 0;
    margin-top: 1px;
}

.cb-iq-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-dark);
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.cb-iq-toggle svg { width: 14px; height: 14px; transition: transform 0.22s ease; }
.cb-iq[open] .cb-iq-toggle svg { transform: rotate(90deg); }
.cb-iq .cb-label-hide { display: none; }
.cb-iq[open] .cb-label-show { display: none; }
.cb-iq[open] .cb-label-hide { display: inline; }

.cb-iq-answer {
    padding: 0 18px 18px;
    border-top: 1px solid var(--cb-rule-soft);
    padding-top: 16px;
}

.cb-iq-answer p {
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--text-light);
    margin-bottom: 12px;
}

.cb-iq-answer > *:last-child { margin-bottom: 0; }

/* ============================================================
   15. SESSION SUMMARY
   ============================================================ */
.cb-summary {
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-md);
    background: var(--cb-surface-alt);
    padding: 28px;
}

.cb-summary > p { font-size: 0.97rem; color: var(--text-light); margin-bottom: 18px; }

.cb-checklist {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 9px 20px;
    margin: 0 0 24px;
    padding: 0;
}

/* Same fix as .cb-outcome-list above, and for the same reason. */
.cb-checklist li {
    display: block;
    position: relative;
    padding-left: 24px;
    font-size: 0.9rem;
    color: var(--text);
}

.cb-checklist li svg {
    position: absolute;
    left: 0;
    top: 4px;
    width: 15px; height: 15px;
    color: var(--success);
    flex-shrink: 0;
}

.cb-final-note {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--primary);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    margin-top: 24px;
}

.cb-final-note svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.cb-final-note p {
    font-size: 0.97rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
    margin: 0;
    font-weight: 500;
}

/* ============================================================
   16. SESSION NAVIGATION
   ============================================================ */
.cb-sessionnav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--cb-rule);
}

.cb-navlink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-sm);
    background: var(--cb-surface);
    min-height: 64px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

a.cb-navlink:hover,
a.cb-navlink:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(15,43,70,0.07);
}

.cb-navlink svg { width: 17px; height: 17px; color: var(--accent-dark); flex-shrink: 0; }

.cb-navlink-text { display: flex; flex-direction: column; min-width: 0; }

.cb-navlink-text small {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 2px;
}

.cb-navlink-text strong {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cb-navlink--next { justify-content: flex-end; text-align: right; }
.cb-navlink--next .cb-navlink-text { align-items: flex-end; }
.cb-navlink--all { justify-content: center; }

.cb-navlink.is-disabled {
    opacity: 0.45;
    background: var(--cb-surface-alt);
    cursor: not-allowed;
}

/* ============================================================
   17. FOCUS + MOTION
   ============================================================ */
.cb-page a:focus-visible,
.cb-page button:focus-visible,
.cb-page summary:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cb-page *,
    .cb-page *::before,
    .cb-page *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    .cb-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 32px 0 60px;
    }
    .cb-toc-wrap { display: none; }
    .cb-toc-mobile { display: block; }
}

@media (max-width: 900px) {
    .cb-banner .container {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }
    .cb-banner { padding: 52px 0 48px; }
    .cb-banner h1 { font-size: 2.1rem; }
}

@media (max-width: 768px) {
    /* The code-bar chip carries the filename and, from Session 07, assembly
       instructions ("typed once, in Step 5 below"). On a phone the single-line
       chip truncated to ~18 characters, hiding exactly that. Let it wrap under
       the language tag instead of being clipped. */
    .cb-code-bar { align-items: flex-start; }
    .cb-code-meta { flex-direction: column; align-items: flex-start; }
    .cb-code-file {
        margin-left: 0;
        margin-top: 2px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.35;
        /* The chip sits in a column flex container with align-items:flex-start,
           which sizes it to its content - so it needs an explicit ceiling to
           wrap against, not just permission to wrap. */
        min-width: 0;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    .cb-section { padding: 44px 0; }
    .cb-section--tight { padding: 34px 0; }

    .cb-banner h1 { font-size: 1.85rem; }
    .cb-banner-sub { font-size: 1rem; }
    .cb-project-card { padding: 22px; }
    .cb-project-card h2 { font-size: 1.5rem; }

    .cb-h2 { font-size: 1.35rem; }

    .cb-session-header { padding: 26px 0 26px; }
    .cb-session-header h1 { font-size: 1.5rem; }
    .cb-session-title-row { gap: 10px; }

    .cb-block { margin-bottom: 42px; }
    .cb-block > h2 { font-size: 1.22rem; }

    .cb-concept { padding: 20px 18px; }
    .cb-outcomes { padding: 20px 18px; }
    .cb-summary { padding: 20px 18px; }
    .cb-assignment-head { padding: 18px 18px 0; }
    .cb-assignment-body { padding: 12px 18px 20px; }
    .cb-project-progress-body { padding: 18px; }

    .cb-code pre { padding: 15px 16px; }
    .cb-code code { font-size: 0.8rem; }

    /* Breakdown rows stack, arrow becomes a leading marker */
    .cb-breakdown-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        padding: 11px 15px;
    }
    .cb-breakdown-arrow { display: none; }
    .cb-breakdown-meaning { padding-left: 0; }
    .cb-breakdown-meaning::before {
        content: '\2192';
        color: var(--accent);
        margin-right: 7px;
    }

    /* Reference diagram goes vertical */
    .cb-refdiagram { flex-direction: column; align-items: stretch; gap: 0; }
    .cb-refbox { width: 100%; }
    .cb-refarrow {
        width: 2px; height: 40px; min-width: 2px;
        flex: 0 0 40px; margin: 6px auto;
    }
    .cb-refarrow::after {
        right: auto; bottom: -1px; top: auto;
        left: 50%; transform: translateX(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid var(--accent);
        border-bottom: 0;
    }
    .cb-refarrow span {
        top: 50%; left: 14px;
        transform: translateY(-50%);
    }

    .cb-sessionnav { grid-template-columns: minmax(0, 1fr); }
    .cb-navlink--next { justify-content: flex-start; text-align: left; }
    .cb-navlink--next .cb-navlink-text { align-items: flex-start; }
    .cb-navlink--all { justify-content: flex-start; }

    .cb-iq > summary { flex-wrap: wrap; }
    .cb-iq-q { flex: 1 1 100%; order: 2; }
    .cb-iq-toggle { order: 3; flex: 1 1 100%; margin-top: 8px; }
}

@media (max-width: 420px) {
    .cb-session-grid { grid-template-columns: minmax(0, 1fr); }
    .cb-outcome-list,
    .cb-checklist { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   19. PRINT — students revise from paper too
   ============================================================ */
@media print {
    .top-bar, .header, .footer, .scroll-top,
    .cb-toc-wrap, .cb-toc-mobile, .cb-copy, .cb-sessionnav { display: none !important; }
    .cb-layout { display: block; padding: 0; }
    /* All <details> are force-opened by JS on `beforeprint` (see careerbridge.js). */
    .cb-code { border: 1px solid #999; }
    .cb-code, .cb-code pre { background: #fff !important; }
    .cb-code code, .cb-c, .cb-k, .cb-t, .cb-s, .cb-n, .cb-fn { color: #000 !important; }
    .cb-session-header { background: none; padding: 0 0 20px; }
    .cb-session-header h1, .cb-breadcrumb a { color: #000 !important; }
}

/* ============================================================
   STUDENT PORTAL — login page and dashboard
   (temporary mock login; see js/auth.js)
   ============================================================ */

/* ---- Login ---- */
.cb-auth {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--dark, #0b1a2b) 0%, var(--primary) 60%, var(--primary-light) 100%);
    padding: 72px 0 88px;
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
}

.cb-auth .hero-grid { opacity: 0.35; }

.cb-auth-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.cb-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--cb-surface);
    border: 1px solid var(--cb-rule);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    padding: 36px 36px 28px;
}

.cb-auth-brand { margin-bottom: 26px; }
.cb-auth-brand .cb-banner-kicker { margin-bottom: 14px; }
.cb-auth-brand h1 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}
.cb-auth-brand p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; }

.cb-auth-form { display: flex; flex-direction: column; gap: 18px; }

.cb-field { display: flex; flex-direction: column; gap: 7px; }
.cb-field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary);
}
.cb-field input {
    width: 100%;
    font: inherit;
    font-size: 0.97rem;
    color: var(--text);
    background: var(--cb-surface-alt);
    border: 1.5px solid var(--cb-rule);
    border-radius: var(--radius-sm, 8px);
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cb-field input::placeholder { color: var(--gray-light); }
.cb-field input:focus {
    outline: none;
    background: var(--cb-surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(0,180,216,0.16);
}
.cb-auth-form.has-error .cb-field input { border-color: #DC2626; }

.cb-password-wrap { position: relative; }
.cb-password-wrap input { padding-right: 46px; }
.cb-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: 50%;
    color: var(--gray);
    cursor: pointer;
}
.cb-password-toggle:hover, .cb-password-toggle.is-on { color: var(--accent-dark); background: rgba(0,180,216,0.10); }
.cb-password-toggle svg { width: 18px; height: 18px; }

.cb-auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #991B1B;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-sm, 8px);
    padding: 11px 13px;
}
.cb-auth-alert[hidden] { display: none; }
.cb-auth-alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

.cb-auth-submit { justify-content: center; width: 100%; margin-top: 4px; }
.cb-auth-submit.is-busy { opacity: 0.7; pointer-events: none; }

.cb-auth-foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--cb-rule-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.cb-auth-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--accent-dark);
}
.cb-auth-back svg { width: 15px; height: 15px; }
.cb-auth-help { color: var(--gray); }
.cb-auth-help a { color: var(--primary); font-weight: 600; }

/* ---- Dashboard ---- */
.cb-chip--action {
    cursor: pointer;
    background: rgba(0,180,216,0.18);
    border-color: rgba(0,180,216,0.45);
}
.cb-chip--action:hover { background: var(--accent); color: var(--white); }

.cb-progress {
    margin-top: 14px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
}
.cb-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: width 0.6s ease;
}

.cb-dash-progress h2 { font-family: var(--cb-mono); letter-spacing: -0.5px; }

.cb-dash-continue {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm, 8px);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--white);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cb-dash-continue:hover { background: rgba(0,180,216,0.22); border-color: var(--accent); color: var(--white); }
.cb-dash-continue-text { display: flex; flex-direction: column; min-width: 0; }
.cb-dash-continue-text small { font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; opacity: 0.7; }
.cb-dash-continue-text strong { font-size: 0.9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-dash-continue svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 768px) {
    .cb-auth { padding: 40px 0 56px; min-height: 0; }
    .cb-auth-card { padding: 26px 20px 22px; }
    .cb-auth-brand h1 { font-size: 1.45rem; }
}

/* ============================================================
   STUDENT PORTAL CHROME
   Protected pages (dashboard, sessions) and the login page use
   this slim header/footer instead of the public website's top
   bar, marketing nav and footer. `.header` is kept on the
   element so the sticky/scrolled behaviour and --cb-toc-top
   offset from the public site still apply.
   ============================================================ */
.cb-portal-header .container { gap: 16px; }
.cb-portal-header .logo-text .company-name { font-size: 1.15rem; }

.cb-portal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cb-portal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    transition: background 0.2s ease, color 0.2s ease;
}
.cb-portal-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.cb-portal-link:hover { background: rgba(0,180,216,0.10); color: var(--accent-dark); }
.cb-portal-link.is-active { background: rgba(0,180,216,0.12); color: var(--accent-dark); }
.cb-portal-link--icon { width: 40px; height: 40px; padding: 0; justify-content: center; color: var(--gray); }
.cb-portal-link--icon svg { width: 18px; height: 18px; }

.cb-portal-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    padding: 9px 18px;
    border-radius: 50px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--white);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: 0 4px 15px rgba(0,180,216,0.3);
    white-space: nowrap;
    transition: var(--transition);
}
.cb-portal-logout svg { width: 16px; height: 16px; }
.cb-portal-logout:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0,180,216,0.4); color: var(--white); }

.cb-portal-footer {
    background: var(--dark, #0b1a2b);
    color: rgba(255,255,255,0.65);
    font-size: 0.84rem;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.cb-portal-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
}
.cb-portal-footer a { color: rgba(255,255,255,0.85); font-weight: 500; }
.cb-portal-footer a:hover { color: var(--accent); }
.cb-portal-footer .cb-sep { margin: 0 8px; opacity: 0.5; }

@media (max-width: 768px) {
    .cb-portal-header .container { height: 65px; }
    .cb-portal-header .logo-text .company-name { font-size: 1rem; }
    .cb-portal-header .logo-text .company-tagline { display: none; }
    .cb-portal-header .logo { min-width: 0; }
    .cb-portal-header .logo-icon { width: 36px; height: 36px; }
    .cb-portal-nav { flex-shrink: 0; gap: 2px; }
    .cb-portal-link span { display: none; }
    .cb-portal-link { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .cb-portal-logout span { display: none; }
    .cb-portal-logout { width: 40px; height: 40px; padding: 0; justify-content: center; margin-left: 2px; }
    .cb-portal-footer .container { flex-direction: column; text-align: center; }
}

@media print {
    .cb-portal-header, .cb-portal-footer { display: none; }
}