/* ---------------------------------------------------------------------------
   csnb — the floating notebook.

   Every selector is prefixed csnb-. The panel is injected into pages that
   already carry the syllabus notes, the video stage and the tutor styles, so
   an unprefixed rule here would leak straight into a lesson.

   Stacking, for reference:
     9999  cookie banner      (must stay on top)
     3000  soft-nav progress bar
     2100  this panel
     2050  this handle
     2000  mobile syllabus sidebar (slides from the LEFT, so no overlap)
     1200  video stage
     1199  video launch button (bottom-right; the handle avoids that corner)
--------------------------------------------------------------------------- */

.csnb {
    --csnb-navy: #1a1d23;
    --csnb-green: #2ecc71;
    --csnb-line: #e3e9ef;
    --csnb-ink: #1f2933;
    --csnb-mute: #5c6b7a;
    --csnb-w: 390px;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------- handle */
.csnb-handle {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2050;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--csnb-navy);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-right: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    box-shadow: -3px 0 14px rgba(0, 0, 0, .18);
    transition: background .2s, padding .2s;
}
.csnb-handle:hover { background: #23272f; padding-right: 14px; }
.csnb-handle i { color: var(--csnb-green); writing-mode: horizontal-tb; font-size: .95rem; }
.csnb-handle:focus-visible { outline: 2px solid var(--csnb-green); outline-offset: 2px; }
/* A dot appears when this page has notes but the panel is shut. */
.csnb-handle .csnb-dot {
    writing-mode: horizontal-tb;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--csnb-green);
    display: none;
}
.csnb-handle.has-notes .csnb-dot { display: block; }
.csnb-open .csnb-handle { display: none; }

/* The mobile nav drawer slides in from the same edge at a lower z-index, so
   the handle would sit on top of the menu items. Stand down while it is open.
   notebook.js watches #main-nav and sets this class. */
.csnb-navopen .csnb-handle { display: none; }

/* ----------------------------------------------------------------- panel */
.csnb-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--csnb-w);
    max-width: 100vw;
    z-index: 2100;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-left: 1px solid var(--csnb-line);
    box-shadow: -10px 0 34px rgba(0, 0, 0, .16);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
}
.csnb-open .csnb-panel { transform: translateX(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .csnb-panel { transition: none; }
}

.csnb-head {
    flex: 0 0 auto;
    background: var(--csnb-navy);
    color: #fff;
    padding: 14px 16px;
}
.csnb-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.csnb-title { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.csnb-title i { color: var(--csnb-green); }
.csnb-close {
    background: none; border: none; color: #fff; opacity: .7;
    font-size: 1.15rem; cursor: pointer; padding: 4px 6px; line-height: 1; border-radius: 6px;
}
.csnb-close:hover { opacity: 1; background: rgba(255, 255, 255, .12); }

/* Which page this note belongs to */
.csnb-context {
    margin-top: 8px;
    font-size: .74rem;
    color: #9fb0bf;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.csnb-context b {
    color: #fff; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------------------------ guest note */
.csnb-guest {
    flex: 0 0 auto;
    background: #fff5e8;
    border-bottom: 1px solid #f3d9b8;
    color: #8a4b08;
    padding: 10px 16px;
    font-size: .8rem;
    line-height: 1.5;
}
.csnb-guest a { color: #8a4b08; font-weight: 700; }

/* ------------------------------------------------------------------ body */
.csnb-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }

.csnb-area {
    width: 100%;
    min-height: 190px;
    border: 1px solid var(--csnb-line);
    border-radius: 10px;
    padding: 12px 13px;
    font: inherit;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--csnb-ink);
    resize: vertical;
    background: #fbfdfe;
}
.csnb-area:focus { outline: none; border-color: var(--csnb-green); background: #fff; }
.csnb-area::placeholder { color: #9aa8b5; }

.csnb-hint { margin: 8px 2px 0; font-size: .74rem; color: var(--csnb-mute); }

/* --------------------------------------------------------------- images */
.csnb-shots { margin-top: 14px; }
.csnb-shots-head {
    font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--csnb-mute); margin-bottom: 8px;
}
.csnb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.csnb-shot {
    position: relative; border: 1px solid var(--csnb-line); border-radius: 8px;
    overflow: hidden; background: #f4f7f6; aspect-ratio: 4 / 3;
}
.csnb-shot img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.csnb-shot-del {
    position: absolute; top: 4px; right: 4px;
    width: 24px; height: 24px; border-radius: 50%;
    border: none; background: rgba(0, 0, 0, .62); color: #fff;
    font-size: .78rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s;
}
.csnb-shot:hover .csnb-shot-del,
.csnb-shot-del:focus-visible { opacity: 1; }
.csnb-shot.is-busy { opacity: .5; }

/* drop target feedback */
.csnb-panel.is-dropping .csnb-body { background: #eafaf1; }
.csnb-drop {
    display: none; margin-top: 12px; padding: 18px; text-align: center;
    border: 2px dashed var(--csnb-green); border-radius: 10px;
    color: #1e8449; font-size: .85rem; font-weight: 600;
}
.csnb-panel.is-dropping .csnb-drop { display: block; }

/* ------------------------------------------------------------------ foot */
.csnb-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--csnb-line);
    padding: 10px 16px;
    background: #f8fafb;
}
.csnb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.csnb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--csnb-line); background: #fff; color: var(--csnb-ink);
    font: inherit; font-size: .8rem; font-weight: 600;
    text-decoration: none; transition: .2s;
}
.csnb-btn:hover:not(:disabled) { border-color: var(--csnb-green); color: #1e8449; }
.csnb-btn:disabled { opacity: .45; cursor: not-allowed; }
.csnb-btn i { font-size: .85rem; }
.csnb-btn.is-danger:hover:not(:disabled) { border-color: #e74c3c; color: #c0392b; }

.csnb-status {
    margin-top: 8px; font-size: .74rem; min-height: 1.1em;
    color: var(--csnb-mute); display: flex; align-items: center; gap: 6px;
}
.csnb-status.is-ok   { color: #1e8449; }
.csnb-status.is-busy { color: var(--csnb-mute); }
.csnb-status.is-err  { color: #c0392b; }

/* --------------------------------------------------------- image viewer */
.csnb-viewer {
    position: fixed; inset: 0; z-index: 2200;
    background: rgba(0, 0, 0, .82);
    display: none; align-items: center; justify-content: center; padding: 30px;
}
.csnb-viewer.is-open { display: flex; }
.csnb-viewer img { max-width: 100%; max-height: 100%; border-radius: 6px; }
.csnb-viewer-close {
    position: absolute; top: 18px; right: 22px;
    background: none; border: none; color: #fff; font-size: 1.8rem; cursor: pointer; line-height: 1;
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 640px) {
    .csnb { --csnb-w: 100vw; }
    .csnb-handle { padding: 12px 8px; font-size: .72rem; }
    .csnb-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The panel is furniture, not content. */
@media print {
    .csnb-handle, .csnb-panel, .csnb-viewer { display: none !important; }
}