/* ============================================================
   ACADEMY SYSTEMS — calendar, grades sheet, notebook, notepad
   Loaded on top of academy.css by the four system pages.
   ============================================================ */

/* ---- shared bits ---- */

.panel {
    background: #fff;
    border: 1px solid #E6E9F0;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 0 0 22px;
    box-shadow: 0 2px 14px rgba(19, 26, 51, 0.04);
}

.panel-h { margin: 0 0 6px; font-size: 1.05rem; }
.panel-note { color: #6B7280; font-size: 0.86rem; margin: 6px 0 0; }
.panel-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.field-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.field > span, .field > legend { font-weight: 600; font-size: 0.85rem; color: #374151; }
.field input, .field select, .field textarea {
    padding: 10px 12px;
    border: 1px solid #D5DAE5;
    border-radius: 10px;
    font: inherit;
    background: #fff;
    color: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid #F2B33D; outline-offset: 1px; border-color: #F2B33D;
}

fieldset.field.days {
    border: 1px solid #E6E9F0; border-radius: 12px; padding: 12px 16px;
    flex-direction: row; flex-wrap: wrap; gap: 14px; align-items: center;
}
fieldset.field.days label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }

.notice { border-radius: 12px; padding: 14px 16px; margin: 16px 0; font-size: 0.92rem; line-height: 1.55; }
.notice.info { background: rgba(46, 134, 193, 0.08); border: 1px solid rgba(46, 134, 193, 0.35); }
.notice.warn { background: rgba(242, 179, 61, 0.12); border: 1px solid rgba(242, 179, 61, 0.5); }
.notice.miss { background: rgba(192, 57, 43, 0.07); border: 1px solid rgba(192, 57, 43, 0.35); }
.notice-actions { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; flex-wrap: wrap; }

.btn-xs { padding: 4px 10px; font-size: 0.75rem; border-radius: 999px; }

/* ---- calendar ---- */

.plan-line { font-size: 1rem; margin: 0 0 10px; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 18px; font-size: 0.85rem; color: #4B5563; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.sq { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.sq.done { background: #27AE60; }
.sq.due { background: #F2B33D; }
.sq.missed { background: #C0392B; }
.sq.upcoming { background: #C9CFDB; }

.cal-month { margin: 0 0 30px; }
.cal-month-h { margin: 0 0 10px; font-size: 1rem; letter-spacing: 0.02em; }

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.cal-dow {
    font-size: 0.72rem; font-weight: 700; color: #6B7280;
    text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: 0.04em;
}
.cal-blank { min-height: 76px; }
.cal-day {
    min-height: 76px;
    border: 1px solid #EBEEF4;
    border-radius: 10px;
    padding: 5px 6px;
    background: #FCFDFF;
}
.cal-num { font-size: 0.72rem; color: #9AA1AE; font-weight: 600; }

.cal-card {
    display: block; margin-top: 4px; padding: 5px 7px;
    border-radius: 7px; text-decoration: none; font-size: 0.72rem; line-height: 1.25;
    border: 1px solid transparent;
}
.cal-card .cc-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cal-card .cc-grade { display: block; font-weight: 800; margin-top: 2px; }

.cal-card.done     { background: rgba(39,174,96,0.14);  border-color: rgba(39,174,96,0.45);  color: #1E7E43; }
.cal-card.due      { background: rgba(242,179,61,0.18); border-color: rgba(242,179,61,0.6);  color: #8A6410; font-weight: 700; }
.cal-card.missed   { background: rgba(192,57,43,0.12);  border-color: rgba(192,57,43,0.45);  color: #96291D; }
.cal-card.upcoming { background: #F1F3F7;               border-color: #E1E5EE;               color: #4B5563; }
.cal-card:hover { filter: brightness(0.97); }

/* ---- grades ---- */

.grades-count { margin: 14px 0 10px; color: #4B5563; }

.grades-table { width: 100%; border-collapse: collapse; background: #fff;
                border: 1px solid #E6E9F0; border-radius: 14px; overflow: hidden; }
.grades-table th, .grades-table td {
    text-align: left; padding: 12px 16px; border-bottom: 1px solid #EEF1F6; font-size: 0.92rem;
}
.grades-table th { background: #F7F9FC; font-size: 0.78rem; text-transform: uppercase;
                   letter-spacing: 0.05em; color: #6B7280; }
.grades-table tr:last-child td { border-bottom: 0; }
.grades-table tr.is-empty td { color: #9AA1AE; }
.g-lesson a { color: inherit; text-decoration: none; font-weight: 600; }
.g-lesson a:hover { text-decoration: underline; }
.g-score { white-space: nowrap; }
.g-att { color: #6B7280; font-size: 0.78rem; }

.g-state { display: inline-block; padding: 4px 12px; border-radius: 999px;
           font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.g-none { background: #F1F3F7; color: #6B7280; }
.g-part { background: rgba(46,134,193,0.12); color: #21618C; }
.g-wait { background: rgba(242,179,61,0.18); color: #8A6410; }
.g-done { background: rgba(39,174,96,0.16); color: #1E7E43; }
.g-redo { background: rgba(214,69,65,0.14); color: #A3302C; }

.g-comment-row td { padding-top: 0; }
.g-comment { background: #F7F9FC; border-left: 3px solid #F2B33D;
             border-radius: 0 10px 10px 0; padding: 12px 16px; }
.g-comment-h { font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
               letter-spacing: 0.05em; color: #8A6410; }
.g-comment p { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.6; }

/* ---- notebook ---- */

.nb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.nb-nav { display: flex; gap: 8px; flex-wrap: wrap; }

.nb-text { width: 100%; font: inherit; padding: 12px 14px;
           border: 1px solid #D5DAE5; border-radius: 12px; resize: vertical; }

.nb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: 14px; margin-top: 14px; }
.nb-photo { margin: 0; border: 1px solid #E6E9F0; border-radius: 12px; overflow: hidden; background: #fff; }
.nb-photo img { width: 100%; height: 130px; object-fit: cover; display: block; }
.nb-photo-missing { height: 130px; display: flex; align-items: center; justify-content: center;
                    background: #F1F3F7; color: #9AA1AE; font-size: 0.8rem; }
.nb-photo figcaption { display: flex; align-items: center; justify-content: space-between;
                       gap: 8px; padding: 7px 10px; font-size: 0.75rem; color: #6B7280; }

.nb-note, .nb-answer { border: 1px solid #EEF1F6; border-radius: 12px;
                       padding: 14px 16px; margin: 0 0 12px; background: #FCFDFF; }
.nb-note h4, .nb-answer h4 { margin: 0 0 6px; font-size: 0.95rem; }
.nb-note a, .nb-answer a { color: inherit; }
.nb-prompt { color: #6B7280; font-size: 0.85rem; margin: 0 0 8px; font-style: italic; }

/* The handed-in answer. Rendered as plain text, never an input —
   there is deliberately no way to edit it from the notebook. */
.nb-answer-text {
    white-space: pre-wrap;
    background: #fff;
    border: 1px solid #E6E9F0;
    border-left: 3px solid #27AE60;
    border-radius: 0 10px 10px 0;
    padding: 12px 14px;
    font-size: 0.92rem;
    line-height: 1.65;
}

/* ---- notepad ---- */

.notepad-btn {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 14px;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    background: rgba(242, 179, 61, 0.14); border: 1px solid rgba(242, 179, 61, 0.5);
    color: #8A6410; font: 600 0.82rem/1 inherit;
}
.notepad-btn:hover { background: #F2B33D; color: #1a2238; }

.notepad {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(390px, 92vw);
    background: #fff; border-left: 1px solid #E6E9F0;
    box-shadow: -14px 0 40px rgba(19, 26, 51, 0.13);
    z-index: 9000; padding: 20px 22px; overflow-y: auto;
}
.notepad-head { display: flex; align-items: center; justify-content: space-between; }
.notepad-head h3 { margin: 0; font-size: 1.05rem; }
.notepad-close { background: none; border: 0; font-size: 1.6rem; line-height: 1;
                 cursor: pointer; color: #6B7280; }
.notepad-why { font-size: 0.83rem; color: #4B5563; line-height: 1.55;
               background: #F7F9FC; border-radius: 10px; padding: 11px 13px; margin: 12px 0; }
.notepad textarea { width: 100%; font: inherit; padding: 12px 14px;
                    border: 1px solid #D5DAE5; border-radius: 12px; resize: vertical; }
/* October 2026: the note box fills the column down to just above the
   saved / kept-for-a-year lines, whatever the window height. */
.notepad:not([hidden]) { display: flex; flex-direction: column; }
.notepad > * { flex: none; }
.notepad > textarea { flex: 1 1 auto; min-height: 160px; resize: none; }
/* On a lesson page the button sits at the far right of the title row. */
.lesson-title-row .notepad-btn { margin: 6px 0 0 auto; flex: none; }
.notepad-saved { font-size: 0.78rem; color: #6B7280; min-height: 1.1em; margin: 8px 0 0; }
.notepad-keep { font-size: 0.75rem; color: #9AA1AE; margin: 4px 0 0; }

/* ---- side dock: the notepad + the vocabulary card (20 Oct 2026) ----
   js/sidedock.js. The dock never covers the lesson.

   With a mouse (any window width): the dock is a column joined to the
   RIGHT SIDE OF THE PAGE, not pinned to the browser's edge (Zack). The
   page becomes two columns — the lesson, never narrower than
   --page-min, and the dock — so a narrow window scrolls sideways to
   reach the dock instead of squeezing or covering the text. The dock
   stays in view as the page scrolls down (sticky).

   On a phone or tablet (touch, 980px or less): a sheet along the
   bottom, and the page gets the same height added at its foot. */

:root { --dock-w: 380px; --page-min: 680px; --dock-h: min(48vh, 440px); }
@supports (height: 1dvh) { :root { --dock-h: min(48dvh, 440px); } }

.side-dock {
    z-index: 40; background: #fff; border-left: 1px solid #E6E9F0;
    box-shadow: -14px 0 40px rgba(19, 26, 51, 0.10);
    display: flex; flex-direction: column; overflow: hidden;
}
.side-dock[hidden] { display: none; }

body.dock-open {
    display: grid; grid-template-columns: minmax(var(--page-min), 1fr) var(--dock-w);
    align-items: start;
}
body.dock-open > * { grid-column: 1; min-width: 0; }
body.dock-open > .side-dock {
    grid-column: 2; grid-row: 1 / span 20;
    position: sticky; top: 0; height: 100vh; width: var(--dock-w);
}

/* Inside the dock the notepad is a part of it, not its own overlay. */
.side-dock .notepad {
    position: static; width: auto; box-shadow: none; border: 0; z-index: auto;
    flex: 1 1 auto; min-height: 240px;
}

.vocab-card {
    flex: 0 1 auto; min-height: 0; overflow-y: auto;
    padding: 18px 22px 16px; border-bottom: 1px solid #E6E9F0;
}
.vocab-card[hidden] { display: none; }
.vc-head { display: flex; align-items: center; justify-content: space-between; }
.vc-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8A6410; }
.vc-close { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #6B7280; }
.vc-word { margin: 4px 0 6px; font-size: 1.25rem; outline: none; }
.vc-def { margin: 0 0 12px; color: #334155; line-height: 1.55; font-size: 0.95rem; }
.vc-ex { background: #F7F9FC; border-left: 3px solid #F2B33D; border-radius: 0 10px 10px 0; padding: 10px 12px; }
.vc-ex[hidden] { display: none; }
.vc-sent { margin: 5px 0 0; font-style: italic; color: #1F2937; line-height: 1.55; font-size: 0.93rem; }
.vc-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.vc-nav button { background: none; border: 0; padding: 4px 0; cursor: pointer; color: #1d4ed8; font: inherit; font-size: 0.8rem; font-weight: 600; }
.vc-pos { font-size: 0.75rem; color: #9AA1AE; }

/* A vocabulary word in the lesson text: a real-looking hyperlink. */
.vlink { color: #1d4ed8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
.vlink:hover, .vlink:focus-visible { color: #1e3a8a; text-decoration-thickness: 2px; }
.vlink.on { background: rgba(242, 179, 61, 0.28); border-radius: 3px; }

/* The hover box. */
.vtip {
    position: fixed; z-index: 9500; pointer-events: none;
    background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 10px 12px;
    font-size: 0.84rem; line-height: 1.45; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}
.vtip[hidden] { display: none; }
.vtip b { display: block; color: #F2B33D; margin-bottom: 3px; }
.vtip-d b, .vtip-d i { display: inline; color: inherit; margin: 0; }
.vtip-more { display: block; margin-top: 6px; font-size: 0.74rem; color: #94a3b8; }

/* Phones and tablets (touch): the dock is a sheet along the bottom.
   Keep this media query in step with NARROW in js/sidedock.js. */
@media (max-width: 980px) and (pointer: coarse) {
    body.dock-open { display: block; padding-bottom: var(--dock-h); }
    body.dock-open > .side-dock {
        position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--dock-h);
        z-index: 9000; border-left: 0; border-top: 1px solid #E6E9F0; border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 34px rgba(19, 26, 51, 0.16); overflow-y: auto;
    }
    .side-dock > * { flex: none; }
    .side-dock .notepad { min-height: 0; padding: 14px 18px; }
    .side-dock .notepad > textarea { min-height: 140px; }
    .side-dock .notepad-why { font-size: 0.78rem; padding: 8px 10px; margin: 8px 0; }
    .vocab-card { padding: 14px 18px; }
}

@media (max-width: 700px) {
    .cal-day, .cal-blank { min-height: 62px; }
    .cal-card { font-size: 0.66rem; }
    .grades-table th, .grades-table td { padding: 10px 11px; font-size: 0.86rem; }
}

/* ---- my journal ---- */

.j-bar { display: flex; flex-direction: column; gap: 6px; }
.j-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.j-filter {
    border: 1px solid #D5DAE5; background: #fff; color: #374151;
    border-radius: 999px; padding: 7px 16px; cursor: pointer;
    font: 600 0.84rem/1 inherit;
}
.j-filter:hover { border-color: #F2B33D; }
.j-filter.is-on { background: #F2B33D; border-color: #F2B33D; color: #1a2238; }
.j-count { margin: 10px 0 0; color: #4B5563; font-size: 0.92rem; }

.j-card {
    background: #fff; border: 1px solid #E6E9F0; border-radius: 14px;
    padding: 18px 20px; margin: 0 0 14px;
    box-shadow: 0 2px 14px rgba(19, 26, 51, 0.04);
}
/* A private note is visibly a different kind of thing from handed-in
   work. A student unsure whether a note is private writes nothing
   useful in it. */
.j-card.note { border-left: 4px solid #8E44AD; background: #FDFCFF; }
.j-card.answer { border-left: 4px solid #27AE60; }

.j-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.j-meta { display: flex; flex-direction: column; gap: 2px; }
.j-lesson { font-weight: 700; color: inherit; text-decoration: none; }
.j-lesson:hover { text-decoration: underline; }
.j-when { font-size: 0.78rem; color: #9AA1AE; }

.j-tag {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.j-tag.private  { background: rgba(142, 68, 173, 0.13); color: #6C3483; }
.j-tag.activity { background: rgba(39, 174, 96, 0.14);  color: #1E7E43; }
.j-tag.exam     { background: rgba(46, 134, 193, 0.13); color: #21618C; }
.j-tag.venture  { background: rgba(230, 126, 34, 0.14); color: #A04000; }

.j-prompt { color: #6B7280; font-size: 0.85rem; font-style: italic; margin: 10px 0 8px; }

/* Plain text, never an input — a handed-in answer must stay exactly as
   the parent read it. */
.j-text {
    white-space: pre-wrap;
    font-size: 0.94rem;
    line-height: 1.68;
    color: #1F2937;
}

.j-foot { margin: 12px 0 0; font-size: 0.78rem; color: #9AA1AE; }
.j-pending { color: #8A6410; font-weight: 700; }

/* ============================================================
   BUS 101 WORKSHOP — the lesson mini-programs
   ============================================================ */

.workshop { margin: 10px 0 0; }

.ws-head h3 { margin: 0 0 6px; font-size: 1.1rem; }
.ws-note { color: #4B5563; font-size: 0.9rem; line-height: 1.6; margin: 8px 0; }
.ws-note.warn { color: #8A6410; background: rgba(242,179,61,0.12);
                border-left: 3px solid #F2B33D; padding: 10px 14px; border-radius: 0 8px 8px 0; }
.ws-note.good { color: #1E7E43; background: rgba(39,174,96,0.10);
                border-left: 3px solid #27AE60; padding: 10px 14px; border-radius: 0 8px 8px 0; }
.ws-empty { color: #9AA1AE; font-style: italic; padding: 14px 0; }
.ws-err { color: #96291D; font-size: 0.88rem; min-height: 1.2em; margin: 6px 0; }
.ws-saved { font-size: 0.78rem; color: #6B7280; min-height: 1.2em; margin: 10px 0 0; }
.ws-saved.warn { color: #96291D; }
.ws-sub { color: #6B7280; font-size: 0.86rem; margin: 4px 0; }

.ws-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
           background: #F7F9FC; border: 1px solid #E6E9F0; border-radius: 12px;
           padding: 14px 16px; margin: 14px 0; }
.ws-form.wrap { align-items: flex-start; }
.ws-f { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; min-width: 130px; }
.ws-f.grow { flex: 1 1 220px; }
.ws-f.money { min-width: 110px; }
.ws-f > span { font-size: 0.76rem; font-weight: 700; color: #4B5563; }
.ws-f input, .ws-f select, .ws-f textarea {
    padding: 9px 11px; border: 1px solid #D5DAE5; border-radius: 9px; font: inherit; background: #fff;
}
.ws-f input:focus, .ws-f select:focus, .ws-f textarea:focus {
    outline: 2px solid #F2B33D; outline-offset: 1px; border-color: #F2B33D;
}

.ws-tag { display: inline-block; padding: 3px 10px; border-radius: 999px;
          background: #EEF1F6; color: #4B5563; font-size: 0.72rem; font-weight: 700; }
.ws-tag.warn { background: rgba(242,179,61,0.2); color: #8A6410; }

.ws-del { border: 0; background: none; color: #9AA1AE; font-size: 1.15rem;
          cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.ws-del:hover { background: rgba(192,57,43,0.1); color: #C0392B; }

.ws-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ws-card { position: relative; background: #fff; border: 1px solid #E6E9F0;
           border-radius: 12px; padding: 14px 16px; }
.ws-card h4 { margin: 0 0 4px; font-size: 0.95rem; }
.ws-card .ws-del { position: absolute; top: 8px; right: 8px; }
.ws-score { display: inline-block; margin-top: 8px; font-weight: 800; font-size: 1.1rem; color: #6B7280; }
.ws-score i { font-size: 0.72rem; font-weight: 600; font-style: normal; color: #9AA1AE; }
.ws-score.warn { color: #8A6410; }
.ws-score.good { color: #1E7E43; }
.ws-quote { margin: 8px 0; padding-left: 12px; border-left: 3px solid #D5DAE5;
            color: #374151; font-style: italic; font-size: 0.9rem; }
.ws-gap { color: #96291D; font-size: 0.86rem; margin: 6px 0 0; }

.test-card.ok { border-left: 4px solid #27AE60; }
.test-card.bad { border-left: 4px solid #C0392B; }
.test-result { display: flex; gap: 8px; margin-top: 10px; }
.test-result input { width: 90px; padding: 7px 9px; border: 1px solid #D5DAE5; border-radius: 8px; font: inherit; }
.test-verdict { margin: 10px 0 0; font-size: 0.88rem; }
.test-verdict.ok { color: #1E7E43; }
.test-verdict.bad { color: #96291D; }

.risk-card { background: #fff; border: 1px solid #E6E9F0; border-radius: 12px;
             padding: 14px 16px; margin: 0 0 12px; }
.risk-card.ok { border-left: 4px solid #27AE60; }
.risk-card.warn { border-left: 4px solid #F2B33D; }
.risk-card.bad { border-left: 4px solid #C0392B; }
.risk-card h4 { margin: 0 0 4px; }

.ledger-form { align-items: flex-end; }
.ledger-table-wrap { overflow-x: auto; margin: 14px 0; }
.ledger-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff;
                border: 1px solid #E6E9F0; border-radius: 12px; overflow: hidden; }
.ledger-table th, .ledger-table td { padding: 10px 13px; border-bottom: 1px solid #EEF1F6;
                                     font-size: 0.88rem; text-align: left; }
.ledger-table th { background: #F7F9FC; font-size: 0.72rem; text-transform: uppercase;
                   letter-spacing: 0.05em; color: #6B7280; }
.ledger-table td.r, .ledger-table th.r { text-align: right; }
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table .in { color: #1E7E43; font-weight: 700; }
.ledger-table .out { color: #96291D; font-weight: 700; }
.ledger-table .bal { font-weight: 800; font-variant-numeric: tabular-nums; }
.ledger-table .bal.neg { color: #C0392B; }

.ledger-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                  gap: 12px; margin: 16px 0 0; }
.ledger-summary > div { background: #F7F9FC; border: 1px solid #E6E9F0;
                        border-radius: 12px; padding: 12px 14px; }
.ledger-summary span { display: block; font-size: 0.72rem; text-transform: uppercase;
                       letter-spacing: 0.04em; color: #6B7280; font-weight: 700; }
.ledger-summary b { display: block; font-size: 1.3rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ledger-summary b.in, .ledger-summary b.pos { color: #1E7E43; }
.ledger-summary b.out, .ledger-summary b.neg { color: #C0392B; }
.ledger-summary .bal-box { background: #1e1b4b; border-color: #1e1b4b; }
.ledger-summary .bal-box span { color: rgba(255,255,255,0.6); }
.ledger-summary .bal-box b.pos { color: #4ADE80; }
.ledger-summary .bal-box b.neg { color: #FCA5A5; }

.cost-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.cost-col { background: #fff; border: 1px solid #E6E9F0; border-radius: 12px; padding: 16px 18px; }
.cost-col.fixed { border-top: 4px solid #2E86C1; }
.cost-col.variable { border-top: 4px solid #F2B33D; }
.cost-col h4 { margin: 0 0 4px; font-size: 0.98rem; }
.cost-list { list-style: none; padding: 0; margin: 12px 0; }
.cost-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0;
                border-bottom: 1px solid #F1F3F7; font-size: 0.9rem; }
.cost-list li span { flex: 1; }
.cost-list li b { font-variant-numeric: tabular-nums; }
.cost-list li i { font-style: normal; font-weight: 500; color: #9AA1AE; font-size: 0.78rem; }
.cost-total { margin: 10px 0 0; font-size: 0.88rem; color: #4B5563; }

.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 16px 0; }
.price-card { background: #fff; border: 1px solid #E6E9F0; border-radius: 12px; padding: 16px; }
.pc-t { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
        font-weight: 800; color: #6B7280; }
.pc-n { display: block; font-size: 1.6rem; margin: 6px 0; font-variant-numeric: tabular-nums; }
.pc-d { display: block; font-size: 0.8rem; color: #6B7280; line-height: 1.5; }
.pc-d b.pos { color: #1E7E43; }
.pc-d b.neg { color: #C0392B; }
.price-card.fc-bad { border-top: 4px solid #C0392B; }
.price-card.fc-mid { border-top: 4px solid #F2B33D; }
.price-card.fc-good { border-top: 4px solid #27AE60; }

.price-verdict { padding: 12px 15px; border-radius: 10px; font-size: 0.9rem; line-height: 1.6; }
.price-verdict.good { background: rgba(39,174,96,0.1); color: #1E7E43; }
.price-verdict.warn { background: rgba(242,179,61,0.14); color: #8A6410; }
.price-verdict.bad { background: rgba(192,57,43,0.1); color: #96291D; }

.be-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 16px 0; }
.be-grid > div { background: #F7F9FC; border: 1px solid #E6E9F0; border-radius: 12px; padding: 14px; }
.be-grid span { display: block; font-size: 0.75rem; color: #6B7280; }
.be-grid b { display: block; font-size: 1.5rem; margin: 4px 0; font-variant-numeric: tabular-nums; }
.be-grid .be-big { background: #1e1b4b; border-color: #1e1b4b; color: #fff; }
.be-grid .be-big span { color: rgba(255,255,255,0.65); }
.be-grid .be-big b { color: #F2B33D; font-size: 2.2rem; }

.margin-out { margin-top: 10px; }
.price-out { margin-top: 10px; }

@media (max-width: 700px) {
  .ws-form { padding: 12px; }
  .ws-f, .ws-f.grow, .ws-f.money { flex: 1 1 100%; min-width: 0; }
  .pc-n { font-size: 1.35rem; }
}

/* ============================================================
   BUS 101 · Units 6–10 mini-programs (Lessons 21–40)
   Appended for tools-legal.js, tools-selling.js, tools-future.js
   ============================================================ */

/* --- choices: radio and checkbox rows ------------------------ */
.ws-radio, .ws-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.95rem; line-height: 1.5; cursor: pointer;
  padding: 8px 10px; border-radius: 8px;
}
.ws-radio:hover, .ws-check:hover { background: rgba(44,90,160,0.05); }
.ws-radio input, .ws-check input {
  flex: 0 0 auto; margin: 3px 0 0; width: 16px; height: 16px; cursor: pointer;
}
.ws-radio b, .ws-check b { font-weight: 650; }

/* --- Lesson 22 · Compliance Checklist ------------------------ */
.check-item { padding: 12px 14px; margin: 10px 0; transition: opacity .15s, border-color .15s; }
.check-item .ws-note { margin: 6px 0 0 26px; }
.check-item.is-done { border-color: rgba(39,174,96,0.45); background: rgba(39,174,96,0.05); }
.check-item.is-done .ws-check b { text-decoration: line-through; opacity: 0.65; }

/* --- Lesson 24 · Invoice Builder ----------------------------- */
.invoice-preview {
  background: #fff; border: 1px solid #E6E9F0; border-radius: 10px;
  padding: 18px 20px; margin: 14px 0;
  font-size: 0.92rem; box-shadow: 0 1px 3px rgba(16,24,40,0.05);
}
.inv-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid #1F2937; padding-bottom: 8px; margin-bottom: 12px;
}
.inv-head b { letter-spacing: 0.12em; font-size: 0.95rem; }
.inv-head span { color: #6B7280; font-variant-numeric: tabular-nums; }
.inv-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0; border-bottom: 1px dashed #EEF0F4;
}
.inv-row span { color: #6B7280; }
.inv-row b { text-align: right; font-weight: 600; }
.inv-amt { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.inv-pay {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF0F4;
  color: #4B5563; font-size: 0.88rem; white-space: pre-wrap;
}

/* --- Lesson 30 · Process Builder ----------------------------- */
.process-list { margin: 10px 0 0; padding-left: 0; list-style: none; counter-reset: step; }
.process-list li {
  counter-increment: step; position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 40px; margin: 6px 0;
  background: #fff; border: 1px solid #E6E9F0; border-radius: 8px;
  font-size: 0.93rem;
}
.process-list li::before {
  content: counter(step); position: absolute; left: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #2C5AA0; color: #fff;
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.process-list li > span { flex: 1 1 auto; min-width: 0; }
.process-list li > b {
  margin-left: auto; color: #6B7280; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.process-list li > .ws-del { position: static; flex: 0 0 auto; }

/* --- Lesson 33 · Funding Comparer ---------------------------- */
.panel.is-best { border-color: rgba(39,174,96,0.5); background: rgba(39,174,96,0.05); }

/* --- Lesson 35 · Equity Splitter ----------------------------- */
.equity-bar {
  display: flex; width: 100%; height: 30px; margin: 14px 0 6px;
  border-radius: 8px; overflow: hidden; background: #EEF0F4;
}
.eq-seg { display: block; height: 100%; min-width: 2px; transition: width .2s; }
.eq-0 { background: #2C5AA0; }
.eq-1 { background: #27AE60; }
.eq-2 { background: #F2B33D; }
.eq-3 { background: #8E44AD; }
.eq-4 { background: #E67E22; }

/* --- Lesson 36 · Pitch Builder ------------------------------- */
.pitch-out { padding: 16px 18px; }
.pitch-out p { margin: 0 0 10px; font-size: 1rem; line-height: 1.65; }
.pitch-out p:last-child { margin-bottom: 0; }
.pitch-out .ws-sub { color: #6B7280; font-size: 0.85rem; }

/* --- Lesson 38 · Business Dashboard -------------------------- */
.dash-grid {
  display: grid; gap: 12px; margin: 12px 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dash-card {
  background: #fff; border: 1px solid #E6E9F0; border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.dash-card .dc-t {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7280;
}
.dash-card .dc-n {
  font-size: 1.6rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: #1F2937;
}
.dash-card .dc-d { font-size: 0.82rem; color: #6B7280; line-height: 1.45; }
.dash-card.pos .dc-n { color: #1E7E43; }
.dash-card.neg .dc-n { color: #C0392B; }
.dash-card.warn { border-color: rgba(242,179,61,0.6); background: rgba(242,179,61,0.07); }
.dash-card.warn .dc-n { color: #8A6410; }

.dash-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 0.9rem;
}
.dash-bar > span { flex: 0 0 34%; color: #4B5563; }
.dash-bar > i {
  display: block; height: 10px; border-radius: 5px;
  background: #2C5AA0; min-width: 3px;
}
.dash-bar > b {
  margin-left: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.dash-bar > b small { color: #6B7280; font-weight: 400; }

/* --- Lesson 40 · Next-Step Planner --------------------------- */
.next-option { padding: 12px 14px; margin: 10px 0; }
.next-option .ws-note { margin: 4px 0 0 26px; }
.next-option.is-chosen { border-color: rgba(44,90,160,0.55); background: rgba(44,90,160,0.06); }

@media (max-width: 700px) {
  .dash-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .dash-card .dc-n { font-size: 1.35rem; }
  .dash-bar { flex-wrap: wrap; }
  .dash-bar > span { flex: 0 0 100%; }
  .invoice-preview { padding: 14px; }
}

/* ============================================================
   THE VENTURE BUILD — BUS 101's parallel track
   ============================================================ */

.v-head { margin-bottom: 18px; }
.v-step {
  display: inline-block; margin-bottom: 8px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #6B7280; background: #EEF0F4; border-radius: 999px; padding: 4px 12px;
}
.v-step b { color: #2C5AA0; font-size: 0.85rem; }

/* --- the founder's story --- */
.v-story {
  border-left: 4px solid #2C5AA0;
  background: linear-gradient(180deg, rgba(44,90,160,0.06), rgba(44,90,160,0.02));
  padding: 18px 20px; margin: 0 0 16px;
}
.v-story-tag {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: #2C5AA0; font-weight: 700; margin-bottom: 6px;
}
.v-story h3 { margin: 0 0 10px; font-size: 1.15rem; }
.v-story p { margin: 0 0 11px; line-height: 1.7; font-size: 0.97rem; }
.v-story p:last-child { margin-bottom: 0; }

/* --- what to do --- */
.v-work { padding: 16px 20px; margin: 0 0 16px; }
.v-work h3 { margin: 0 0 8px; font-size: 1.1rem; }

/* --- the inputs --- */
.v-form { padding: 16px 20px; margin: 0 0 6px; }
.v-form h4 { margin: 0 0 14px; font-size: 1rem; }

.v-field { display: block; margin: 0 0 18px; }
.v-field > span, .v-field > legend {
  display: block; font-weight: 650; font-size: 0.92rem; margin-bottom: 4px; padding: 0;
}
.v-field .ws-note { margin: 0 0 8px; }
.v-field input, .v-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; font: inherit; font-size: 0.95rem;
  border: 1px solid #D7DCE5; border-radius: 8px; background: #fff;
}
.v-field textarea { resize: vertical; line-height: 1.6; }
.v-field input:focus, .v-field textarea:focus {
  outline: none; border-color: #2C5AA0; box-shadow: 0 0 0 3px rgba(44,90,160,0.12);
}
fieldset.v-field { border: 0; margin: 0 0 18px; padding: 0; }

.v-choices { display: grid; gap: 6px; }
.v-choices .ws-radio { align-items: flex-start; flex-wrap: wrap; }
.v-note {
  flex: 1 1 100%; margin-left: 26px;
  color: #6B7280; font-size: 0.85rem; line-height: 1.5;
}

/* --- carried forward from earlier steps --- */
.v-recall { padding: 14px 18px; margin: 0 0 16px; background: rgba(39,174,96,0.05);
  border-color: rgba(39,174,96,0.35); }
.v-recall h4 { margin: 0 0 8px; font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: #1E7E43; }

/* --- the accumulating record --- */
.venture-book { padding: 16px 20px; margin: 16px 0 0; }
.vb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vb-head h3 { margin: 0; font-size: 1rem; flex: 0 0 auto; }
.vb-head b { font-size: 0.85rem; color: #6B7280; font-weight: 600; white-space: nowrap; }
.vb-meter {
  flex: 1 1 120px; min-width: 80px; height: 8px;
  background: #EEF0F4; border-radius: 4px; overflow: hidden;
}
.vb-meter i { display: block; height: 100%; background: #27AE60; transition: width .25s; }

.vb-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0; border-top: 1px solid #EEF0F4;
}
.vb-row:first-of-type { border-top: 0; }
.vb-step {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #EEF0F4; color: #4B5563;
  font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.vb-row.is-now .vb-step { background: #2C5AA0; color: #fff; }
.vb-lab {
  display: block; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: #6B7280;
}
.vb-val { margin: 2px 0 0; font-size: 0.94rem; line-height: 1.55; white-space: pre-wrap; }

@media (max-width: 700px) {
  .v-story, .v-work, .v-form, .venture-book { padding: 14px; }
  .vb-head h3 { flex: 1 1 100%; }
  .v-note { margin-left: 0; }
}

/* ---- My Notepads ----
   One notepad per class, then a folded list of days. A closed day shows
   only its date and counts, so a term reads as a list of dates. */
.np-h { margin: 0 0 6px; font-size: 1.35rem; }
.np-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.np-book {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 20px 18px;
  border-radius: 16px; text-decoration: none; color: inherit; background: #fff;
  border: 1.5px solid #E6E9F0; border-top: 6px solid var(--np, #F2B33D);
  box-shadow: 0 2px 14px rgba(19, 26, 51, 0.05); transition: transform 0.18s, box-shadow 0.18s;
}
.np-book:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(19, 26, 51, 0.1); }
.np-book:focus-visible { outline: 3px solid #F2B33D; outline-offset: 2px; }
.np-book-ic { font-size: 30px; line-height: 1.1; }
.np-book-code { font-weight: 800; font-size: 1.1rem; }
.np-book-title { color: #4B5563; font-size: 0.9rem; }
.np-book-stats { color: #6B7280; font-size: 0.8rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
.np-empty { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.np-other-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: 0.92rem; }
.np-bar { border-top: 5px solid var(--np, #F2B33D); }
.np-back { font-size: 0.86rem; font-weight: 600; color: #4B5563; text-decoration: none; display: inline-block; margin-bottom: 8px; }
.np-back:hover { text-decoration: underline; }
.np-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.np-days { display: grid; gap: 12px; }
.np-day { background: #fff; border: 1px solid #E6E9F0; border-radius: 14px; box-shadow: 0 2px 10px rgba(19, 26, 51, 0.04); }
.np-day-sum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 16px 20px;
}
.np-day-sum::-webkit-details-marker { display: none; }
.np-day-sum::before { content: "\25B8"; color: #9AA1AE; transition: transform 0.15s; }
.np-day[open] > .np-day-sum::before { transform: rotate(90deg); }
.np-day-sum:focus-visible { outline: 3px solid #F2B33D; outline-offset: -3px; border-radius: 14px; }
.np-date { font-weight: 700; flex: 1 1 auto; }
.np-counts { font-size: 0.8rem; color: #6B7280; font-variant-numeric: tabular-nums; }
.np-day-body { padding: 4px 20px 20px; border-top: 1px solid #EEF1F6; }
.np-sec { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: #6B7280; margin: 16px 0 8px; }
.np-entry { border: 1px solid #EEF1F6; border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; }
.np-entry.note { border-left: 4px solid #8E44AD; background: #FDFCFF; }
.np-entry.journal { border-left: 4px solid #27AE60; }
.np-entry-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.np-text { white-space: pre-wrap; margin-top: 8px; line-height: 1.6; font-size: 0.95rem; overflow-wrap: anywhere; }
.np-foot { margin: 10px 0 0; font-size: 0.78rem; color: #9AA1AE; }
.np-none { margin: 0 0 6px; }
@media (prefers-reduced-motion: reduce) {
  .np-book, .np-day-sum::before { transition: none; }
  .np-book:hover { transform: none; }
}

/* ---- calendar: plan does not fit the finish date ---- */
.fit-warn p { margin: 0 0 10px; }
.fit-head { font-size: 1rem; }
.fit-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; }
.fit-opt { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #E6E9F0; border-radius: 12px; padding: 14px 16px; }
.fit-opt h4 { margin: 0; font-size: 0.95rem; }
.fit-opt p { margin: 0; font-size: 0.88rem; color: #374151; }
.fit-opt .btn { margin-top: auto; align-self: flex-start; }
.fit-opt.is-off { background: #F9FAFB; }
.fit-opt.is-off p { color: #6B7280; }
#p-deadline-wrap small { font-weight: 400; color: #6B7280; }

/* ---- calendar: time away, the i icon, the notes pop-up ---- */
fieldset.field.away { border: 1px solid #E6E9F0; border-radius: 12px; padding: 12px 16px; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
fieldset.field.away legend small { font-weight: 400; color: #6B7280; }
.away-list { display: grid; gap: 10px; }
.away-list:empty { display: none; }
.away-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.away-row .field { flex: 1 1 160px; }
fieldset.field.away > .btn { align-self: flex-start; }
.sq.away { background: repeating-linear-gradient(45deg, #CBD5E1 0 3px, #F1F5F9 3px 6px); }
.sq.info { background: #fff; border: 1px solid #94A3B8; border-radius: 50%; font: italic 700 9px/11px Georgia, "Times New Roman", serif; text-align: center; color: #475569; }
.cal-day.is-away { background: repeating-linear-gradient(45deg, #F1F5F9 0 6px, #FFFFFF 6px 12px); }
.cal-away-tag { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748B; }
.cal-item { position: relative; }
.cal-item + .cal-item { margin-top: 3px; }
.cal-item .cal-card { padding-right: 21px; }
.cal-info {
  position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid #94A3B8;
  background: #fff; color: #475569; font: italic 700 11px/1 Georgia, "Times New Roman", serif; cursor: pointer;
}
.cal-info:hover { background: #F2B33D; border-color: #F2B33D; color: #1a2238; }
.cal-info:focus-visible { outline: 2px solid #F2B33D; outline-offset: 1px; }
.note-pop-wrap { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.5); }
.note-pop {
  position: relative; width: 100%; max-width: 560px; max-height: 80vh; overflow: auto;
  background: #FFFDF5; border-radius: 16px; padding: 30px 28px 24px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.note-pop-text { white-space: pre-wrap; line-height: 1.7; font-size: 1rem; color: #1F2937; overflow-wrap: anywhere; }
.note-pop-text.is-empty { color: #6B7280; font-style: italic; }
.note-pop-close { position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; font-size: 22px; color: #6B7280; cursor: pointer; }
.note-pop-close:hover { background: #F3F4F6; color: #111827; }
.note-pop-close:focus-visible { outline: 2px solid #F2B33D; }
@media (max-width: 560px) {
  .cal-info { width: 15px; height: 15px; font-size: 10px; top: 2px; right: 2px; }
  .cal-item .cal-card { padding-right: 17px; }
}

/* ---- notepads: plain view ---- */
.np-plain { display: grid; gap: 16px; }
.np-format {
  position: sticky; top: 76px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid #E6E9F0; border-radius: 12px; padding: 8px 10px; box-shadow: 0 4px 14px rgba(19, 26, 51, 0.06);
}
.np-format button { font: inherit; font-size: 0.9rem; min-width: 40px; padding: 6px 12px; border-radius: 8px; border: 1px solid #D5DAE5; background: #fff; color: #1F2937; cursor: pointer; }
.np-format button:hover { border-color: #F2B33D; }
.np-format button:focus-visible { outline: 2px solid #F2B33D; outline-offset: 1px; }
.np-format-hint, .np-format-status { margin: 0; font-size: 0.82rem; color: #6B7280; }
.np-format-status:empty { display: none; }
.np-p-note { white-space: pre-wrap; line-height: 1.75; font-size: 1.02rem; color: #1F2937; padding: 4px 2px 18px; border-bottom: 1px dashed #E2E8F0; overflow-wrap: anywhere; }
.np-p-journal { background: #fff; border: 1px solid #E6E9F0; border-left: 4px solid #27AE60; border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(19, 26, 51, 0.05); }
.np-p-text { white-space: pre-wrap; line-height: 1.75; font-size: 1.02rem; color: #1F2937; overflow-wrap: anywhere; }
.np-plain mark, .np-format mark { background: #FDE68A; color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---- course notes (notes.html, October 2026): text first, little else ---- */
.cn-wrap { max-width: 820px; padding: 34px 20px 70px; }
.cn-h { font-size: clamp(24px, 3.6vw, 34px); margin: 0 0 6px; }
.cn-status { font-size: 0.85rem; color: #6B7280; min-height: 1.2em; }
.cn-card { background: #fff; border: 1px solid #E6E9F0; border-radius: 14px; padding: 16px 20px; margin: 12px 0; }
.cn-card.journal { border-left: 4px solid #10A36C; }
.cn-card.note { border-left: 4px solid #F2B33D; }
.cn-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cn-line a { font-weight: 700; color: #14243C; text-decoration: none; }
.cn-line a:hover { text-decoration: underline; }
.cn-kind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7280; }
.cn-date { margin-left: auto; font-size: 0.8rem; color: #6B7280; }
.cn-text { white-space: pre-wrap; line-height: 1.6; color: #1F2937; }
.cn-empty { color: #6B7280; }
.course-notes-btn { margin-left: 10px; }

/* ---- calendar: one month at a time + the lesson list (October 2026) ---- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 4px; }
.cal-nav-label { font-size: 0.85rem; color: #6B7280; }
.plan-basis { margin: 6px 0 0; }
.pick-view { margin: 34px 0 10px; }
.pick-h { font-size: 1.35rem; margin: 0 0 4px; }
.pick-tabs { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.pick-tab { border: 1px solid #D5DAE5; background: #fff; border-radius: 999px; padding: 7px 16px; font: 600 0.88rem/1 inherit; cursor: pointer; color: #374151; }
.pick-tab.active { background: #0B1D3A; border-color: #0B1D3A; color: #fff; }
.pick-month { background: #fff; border: 1px solid #E6E9F0; border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
.pick-month-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pick-month-h span:not(.pick-pill) { color: #6B7280; font-size: 0.86rem; }
.pick-month-h .pick-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid #F1F3F8; cursor: pointer; }
.pick-row input { width: 18px; height: 18px; accent-color: #10A36C; flex: none; }
.pick-kind { flex: none; width: 70px; font-size: 0.74rem; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; }
.pick-row a { color: #14243C; text-decoration: none; }
.pick-row a:hover { text-decoration: underline; }
.pick-done { margin-left: auto; font-size: 0.75rem; color: #065F46; background: #D1FAE5; border-radius: 999px; padding: 2px 9px; }
.pick-row.is-done { opacity: 0.85; }

/* --- private notebook (Oct 2026): nothing on this tab goes to parents --- */
.v-private {
  display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0;
  padding: 10px 14px; border-radius: 10px; font-size: 0.93rem; line-height: 1.5;
  background: #EEF6EE; border: 1px solid #CFE6CF; color: #1E4620;
}
.v-lock { flex: none; font-size: 1.05rem; line-height: 1.3; }
.v-notes { padding: 16px 20px; margin: 0 0 10px; }
.v-notes h4 { margin: 0 0 6px; font-size: 1rem; }
.v-notes .ws-note { margin: 0 0 10px; }
.v-notes-text {
  width: 100%; box-sizing: border-box; min-height: 260px; resize: vertical;
  padding: 12px 14px; font: inherit; font-size: 0.97rem; line-height: 1.65;
  border: 1px solid #D7DCE5; border-radius: 8px; background: #fff;
}
.v-notes-text:focus { outline: none; border-color: #2C5AA0; box-shadow: 0 0 0 3px rgba(44,90,160,0.12); }

/* ---------- Teachers and classes (Oct 2026: classes.html, teacher.html) ---------- */
.tc-wrap { max-width: 1100px; padding: 34px 20px 70px; }
.tc-intro { color: #4B5563; margin: 0 0 18px; }
.tc-card { padding: 20px 22px; margin: 0 0 18px; }
.tc-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.tc-card h2 { font-size: 1.25rem; margin: 0 0 10px; }
.tc-muted { color: #6B7280; font-size: 0.92rem; }
.tc-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.tc-row input, .tc-row select { min-height: 44px; padding: 8px 12px; border: 1px solid #D1D5DB; border-radius: 10px; font: inherit; flex: 1 1 220px; }
.tc-code-in { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; max-width: 220px; }
.tc-msg { min-height: 1.3em; margin: 8px 0 0; font-weight: 600; }
.tc-item { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid #EEF0F4; }
.tc-item:first-of-type { border-top: 0; }
.tc-code { font-family: ui-monospace, Consolas, monospace; font-weight: 800; letter-spacing: 0.15em; color: #065F46; }
.tc-big { font-size: 1.8rem; display: block; margin: 2px 0 6px; }
.tc-id { font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; font-weight: 800; background: #F3F4F6; display: inline-block; padding: 6px 12px; border-radius: 8px; }
.tc-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.tc-codebox { background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 12px; padding: 10px 16px; text-align: center; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tc-scroll { overflow-x: auto; border: 1px solid #E5E7EB; border-radius: 12px; }
.tc-table { border-collapse: collapse; font-size: 0.88rem; min-width: 100%; }
.tc-table th, .tc-table td { padding: 8px 10px; border-bottom: 1px solid #EEF0F4; text-align: left; white-space: nowrap; }
.tc-table thead th { background: #F9FAFB; position: sticky; top: 0; }
.tc-table tbody th { position: sticky; left: 0; background: #fff; }
.tc-c { text-align: center !important; min-width: 52px; }
.tc-done { background: #ECFDF5; color: #065F46; font-weight: 700; }
.tc-try { background: #FFFBEB; color: #92400E; }
.tc-nowrap { white-space: nowrap; }
.tc-w { border-top: 1px solid #EEF0F4; padding: 12px 0; }
.tc-prompt { font-style: italic; color: #4B5563; margin: 6px 0; }
.tc-resp { white-space: pre-wrap; line-height: 1.6; }
.tc-soon ul { margin: 6px 0 0 20px; color: #4B5563; }
.tc-arch summary { cursor: pointer; margin-top: 10px; color: #4B5563; }
.tc-wrap .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }