/* Change log (newest first)
   v1.0  2026-08-19  Change log started; prior history in git. Latest: the supplement pack
                     loses its title bar and its plugin frame — it is a scrolling stack of
                     canvases now (.pack-*), with a Full screen button and an iOS fallback. */

/* Extension Course — look & feel matched to the reference site's design
   language (header gradient, Montserrat/EB Garamond, dashed answer boxes,
   book + lesson-list sidebar). Uses our own neutral emblem and content, not
   the reference site's trademarked seal, wordmark, or artwork.

   Exact fonts: drop Montserrat*.ttf and EBGaramond*.ttf into static/fonts/
   (see the README there) and they'll be picked up automatically. Until then
   the stacks below fall back to Helvetica/Garamond. */

/* Change log (newest first)
   v1.4  2026-08-19  .draft-wait card for the unsent first email.
   v1.3  2026-08-19  .rail-head and inline .msg-body-text for the glossable thread.
   v1.2  2026-08-19  .tpl-new create forms and the .tpl-pick compose picker.
   v1.1  2026-08-19  Dim for [data-swap] regions while pager.js fetches the next page.
   v1.0  2026-08-19  Change log started; prior history in git.
                     Latest: .cp-link and .recent-lessons for the student page. */

@font-face {
  font-family: "Montserrat";
  font-weight: 300;
  src: local("Montserrat Light"), local("Montserrat"),
       url("/static/fonts/Montserrat-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  src: local("Montserrat Medium"), local("Montserrat"),
       url("/static/fonts/Montserrat-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  font-weight: 400;
  src: local("EB Garamond"),
       url("/static/fonts/EBGaramond-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --brand-navy: #184b7b;
  --brand-teal: #438ca4;
  --header-grad: linear-gradient(to right, #184b7b, #438ca4);

  --ink: #1f2733;
  --heading: #55778d;          /* muted slate-blue lesson headings */
  --muted: #94a3b8;
  --muted-strong: #64748b;

  --page-bg: #ffffff;
  --sidebar-bg-top: #eef3f8;
  --sidebar-bg-bottom: #e4ecf3;

  --answer-border: #cbd5e1;
  --answer-text: #2f6f95;

  --active-bg: #cbe8fa;
  --active-border: #1b7fc4;
  --active-text: #1c7aba;

  --link: #1c7aba;
  --gold: #d8b96a;

  --thankyou-bg: #c4f0d2;
  --supervisor-bg: #fdefc4;
  --supervisor-accent: #e07d1e;
  --grade-bg: #e7f7c9;
  --grade-text: #5a8a1f;

  --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "EB Garamond", Garamond, "Times New Roman", Times, serif;

  --content-max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--header-grad);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 28px;
  max-width: 1400px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
}

.brand-emblem { width: 58px; height: 58px; flex: none; }

/* The Celebrity Centre mark: the wordmark SVG on top, "Extension Course" beneath, so the
   lockup reads "Celebrity Centre Extension Course" as one name. The wordmark is an image
   (it is the church's own typeface, not a web font we have), so it is sized by height and
   the subtitle is set to sit flush under it. */
.brand-word { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.brand-title { height: 17px; width: auto; display: block; }
.brand-sub {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 2.5px;
  line-height: 1;
  color: #e8d6a4;                /* the old emblem's gold, kept for continuity */
  text-transform: uppercase;
  font-weight: 400;
}

.brand-word-legacy {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: 8px;
}

.site-nav a {
  color: #eaf2f6;
  text-decoration: none;
  font-size: 19px;
  font-weight: 300;
}

.site-nav a:hover { color: #fff; text-decoration: underline; }

/* ---------- Staff console chrome ----------
   The staff console is deliberately a different surface from the student site, not a
   student page with extra links: darker bar, a plane tag, and the commands along the top.
   A student session never renders any of this markup — see the comment in base.html. */

.staff-header {
  background: linear-gradient(180deg, #14293f 0%, #0f2033 100%);
  border-bottom: 3px solid #c9a227;
}

/* Two-row staff chrome: identity on top, commands underneath. One row could not hold
   the sections without wrapping the account name mid-word. */
.header-top { padding-bottom: 8px; }
.staff-navbar {
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.staff-navbar .site-nav {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 14px;
  gap: 2px;
  align-items: stretch;
  flex-wrap: wrap;
}

.plane-tag {
  align-self: center;
  margin-left: 12px;
  padding: 2px 9px;
  border: 1px solid #c9a227;
  border-radius: 999px;
  color: #f0d98a;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  white-space: nowrap;
}



.nav-gap { margin-left: auto; }

.staff-nav a {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1;
  display: flex;
  align-items: center;
  padding: 0 14px;
  min-height: 44px;
  border-bottom: 3px solid transparent;
}

.staff-nav a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

/* Selected: filled in the same blue as the bar underneath, so the top item and its row of
   pages read as one piece rather than two unrelated highlights. */
.staff-nav a.on {
  color: #fff;
  font-weight: 700;
  background: #1d4e79;
}

.whoami { white-space: nowrap; }

/* The staff console is a working surface — course stationery would only get in the way. */
body.staff-mode .page-bg { display: none; }

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #eaf2f6;
  font-size: 18px;
}

.lang-select { display: flex; align-items: center; gap: 6px; cursor: default; }
.header-icon { width: 26px; height: 26px; opacity: 0.9; }

/* ---------- Lesson list (home) ---------- */

.page-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 40px;
  color: var(--heading);
  margin: 36px 0 4px;
}

.page-intro { color: var(--muted-strong); margin: 0 0 30px; }

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
  margin-bottom: 60px;
}

.course-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31, 39, 51, 0.08);
  transition: box-shadow 120ms ease, transform 120ms ease;
}

.course-card:hover {
  box-shadow: 0 8px 22px rgba(24, 75, 123, 0.18);
  transform: translateY(-2px);
}

.course-card-art {
  /* The artwork fills the frame's width and keeps its own shape — a squarish cover used
     to letterbox inside a fixed height, small art floating in a big white field. */
  display: block;
  width: 100%;
  height: auto;
  background: #fbfaf6;
  padding: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.course-card-body { padding: 16px 18px 20px; }
.course-tag {
  color: var(--brand-teal);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 8px;
}
.course-card-title { font-weight: 700; font-size: 20px; margin: 0 0 4px; color: var(--brand-navy); }
.course-card-meta { color: var(--muted-strong); margin: 0 0 10px; }
.course-card-count { color: var(--muted); font-size: 15px; margin: 0; }

.progress { margin-top: 12px; }
.progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  background: var(--brand-teal);
  border-radius: 999px;
  transition: width 200ms ease;
}
.progress-text { color: var(--muted-strong); font-size: 14px; margin: 8px 0 0; }

/* ---------- Lesson page: two-column ---------- */

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 44px;
  align-items: start;
  margin: 30px 0 70px;
}

.lesson-title {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 52px;
  line-height: 1.05;
  color: var(--heading);
  margin: 6px 0 22px;
}

.assignment {
  /* Lettered reference lists (A. … B. … C. …) are split onto their own lines by the
     parser; without this they would collapse back into one paragraph in HTML. */
  white-space: pre-line;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 26px;
}
.assignment em { font-style: italic; }
.assignment p { margin: 0 0 14px; }

/* Questions */

.question { margin: 0 0 30px; }
.q-text { white-space: pre-line; }   /* same reason as .assignment above */

.q-text {
  font-size: 20px;
  margin: 0 0 12px;
}
.q-label { font-weight: 700; }

textarea {
  display: block;
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  background: #fff;
  border: 1px dashed var(--answer-border);
  border-radius: 3px;
  color: var(--answer-text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  resize: vertical;
}

textarea::placeholder { color: #b6c2d0; }

textarea:focus {
  outline: none;
  border-style: solid;
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(67, 140, 164, 0.15);
}

textarea[readonly] {
  background: #f8fafc;
  color: var(--ink);
  border-style: solid;
  border-color: #e2e8f0;
  cursor: default;
  resize: none;
}
textarea[readonly]:focus { box-shadow: none; border-color: #e2e8f0; }

.form-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--brand-navy);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 13px 34px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn-primary:hover { background: #123a61; }
/* The course's own title banner, lifted from the printed lesson tablet. */
.course-banner { display: block; width: 100%; max-width: 900px; height: auto;
                 margin: 0 auto 18px; border-radius: 4px; }

/* --- Drawing answers -------------------------------------------------- */
.drawpad { margin: .6rem 0 .2rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; overflow: hidden; }
.drawpad-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
               padding: .45rem .7rem; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.drawpad-label { font-size: .85rem; font-weight: 600; color: #334155; }
.drawpad-tools { display: flex; flex-wrap: wrap; gap: .35rem; }
.drawpad-tools button { font: inherit; font-size: .8rem; padding: .2rem .6rem; border: 1px solid #cbd5e1;
                        background: #fff; color: #334155; border-radius: 5px; cursor: pointer; }
.drawpad-tools button:hover { background: #e2e8f0; }
.drawpad-tools button.is-on { background: #184b7b; border-color: #184b7b; color: #fff; }
.drawpad-canvas { display: block; width: 100%; height: auto; background: #fff;
                  touch-action: none;            /* finger draws instead of scrolling */
                  cursor: crosshair; }
.drawpad[data-readonly="1"] .drawpad-canvas { cursor: default; }
.drawpad-hint { margin: 0; padding: .4rem .7rem; font-size: .8rem; color: #64748b; background: #f8fafc; }

/* A student's drawing, as the grader sees it */
.grade-drawing { display: block; width: 100%; max-width: 620px; margin: .5rem 0;
                 border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; }

/* Course background artwork — stationery for the whole page, not just the text column.
   Fixed so it stays put while the lesson scrolls, and behind everything. */
.page-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
           background-repeat: no-repeat; background-position: center center;
           background-size: cover; opacity: .14; }
body.has-bg > .site-header,
body.has-bg > main,
body.has-bg > .site-footer { position: relative; z-index: 1; }
/* Answer boxes need to stay readable over the artwork. */
body.has-bg textarea { background: rgba(255, 255, 255, .92); }

/* The building itself, behind every page that does not carry a course's own watermark.
   Same mechanism as a course background — fixed, behind, at watermark opacity — so the two
   never stack and a course page looks exactly as it did. A little fainter than course art
   (.11 vs .14): it is the house, not the lesson, and should read as stationery. The night
   photograph is lit warmly and is the stronger image, so it gets the same opacity rather
   than a brighter one; at dusk the page should feel quieter, not busier. */
.page-bg.site-bg { opacity: .11; }
.page-bg.site-bg.night { opacity: .13; }
/* Cards and panels sit on a faint wash so text stays crisp over the photograph. */
body.has-site-bg .course-card,
body.has-site-bg .card,
body.has-site-bg .panel,
body.has-site-bg .course-panel,
body.has-site-bg .all-done-note,
body.has-site-bg .pw-nudge { background-color: rgba(255, 255, 255, .86); }

/* Kill the footer seam over artwork — transparent rather than none, so the 1px of
   layout stays put and nothing shifts between a plain page and a photographed one. */
body.has-bg .site-footer { border-top-color: transparent; }

/* An "explain your drawing" box starts as a single line and grows as you type. */
textarea.autogrow { min-height: 0; height: auto; overflow-y: hidden; resize: vertical; }

/* "Set a password" invitation on the student dashboard */
.pw-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 4px solid #184b7b;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 8px 0 26px;
  color: #1e3a5f;
  line-height: 1.5;
}
.pw-nudge-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pw-nudge-skip { color: #475569; font-size: 0.92rem; text-decoration: underline; }
.pw-nudge-skip:hover { color: #1e3a5f; }

.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--brand-navy); }

.btn-secondary {
  background: #fff;
  color: var(--brand-navy);
  border: 1px solid var(--brand-navy);
  border-radius: 4px;
  padding: 12px 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn-secondary:hover { background: #eef3f8; }

.save-status {
  font-size: 15px;
  color: var(--muted-strong);
  margin-right: auto;           /* push buttons to the right */
  min-width: 130px;
}
.save-status.saving { color: var(--brand-teal); }
.save-status.saved { color: #4d8a2f; }
.save-status.saved::before { content: "✓ "; }
.save-status.editing { color: var(--muted); }
.save-status.error { color: var(--accent, #b3402b); }

/* ---------- Banners & badges ---------- */

.banner-thankyou {
  background: var(--thankyou-bg);
  border-radius: 6px;
  padding: 22px 28px;
  text-align: center;
  font-size: 20px;
  margin: 0 0 30px;
}
.banner-thankyou strong { font-weight: 700; }
.banner-thankyou em { font-style: italic; font-weight: 700; }

.banner-welldone {
  background: #eaf7ee;
  border: 1px solid #b9dfc6;
  border-radius: 6px;
  padding: 20px 28px;
  text-align: center;
  font-size: 21px;
  color: #14532d;
  margin: 0 0 22px;
}
.banner-welldone strong { font-weight: 700; }

.banner-submitted {
  background: #e0f2fe;
  border: 1px solid #b9e0f7;
  border-radius: 6px;
  padding: 14px 20px;
  margin: 0 0 26px;
  color: #235a7d;
  font-size: 18px;
}
.banner-submitted strong { font-weight: 700; }

.banner-supervisor {
  background: var(--supervisor-bg);
  border-radius: 6px;
  padding: 18px 24px;
  margin: 0 0 26px;
}
.banner-supervisor .sup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e07d1e;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 4px;
}
.banner-supervisor .sup-body { color: var(--answer-text); font-size: 19px; }
/* The English original under a translated note — the app's mark for English throughout. */
.supervisor-note .sup-original { display: block; margin-top: .35rem; color: #1d4ed8;
                                 font-style: italic; font-size: .95em; }

.grade-badge {
  float: right;
  background: var(--grade-bg);
  color: var(--grade-text);
  border-radius: 8px;
  padding: 16px 30px;
  text-align: center;
  margin: 8px 0 16px 24px;
}
.grade-badge .g-label { font-size: 17px; }
.grade-badge .g-value { font-size: 44px; font-weight: 700; line-height: 1.1; }
.grade-badge .g-sub { font-size: 16px; }

/* ---------- Sidebar ---------- */

.sidebar {
  background: linear-gradient(to bottom, var(--sidebar-bg-top), var(--sidebar-bg-bottom));
  border-radius: 8px;
  padding: 22px 22px 8px;
}

.sidebar-cover {
  display: block;
  width: 78%;
  margin: 4px auto 18px;
  background: #fff;
  border: 1px solid #d9d2c2;
  border-radius: 2px;
  box-shadow: 0 8px 18px rgba(24, 75, 123, 0.22);
}

.sidebar-course-title {
  font-weight: 700;
  font-size: 19px;
  color: #33475b;
  margin: 0 0 14px;
  line-height: 1.3;
}

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

.lesson-list li { border-top: 1px solid #d7e0ea; }
.lesson-list li:first-child { border-top: none; }

.lesson-list a,
.lesson-list span.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 12px;
  text-decoration: none;
  color: var(--muted);
  font-size: 19px;
}

.lesson-list a:hover { color: var(--muted-strong); }

.lesson-list li.active {
  background: var(--active-bg);
  border-top: none;
  box-shadow: inset 4px 0 0 var(--active-border);
}
.lesson-list li.active a,
.lesson-list li.active span.row { color: var(--active-text); }

.lesson-status { font-weight: 700; white-space: nowrap; }

/* Locked lessons: greyed, not clickable */
.lesson-list li.locked .row.locked-row {
  color: #b3bdc9;
  cursor: not-allowed;
}
.lesson-list li.locked .lesson-status.lock { font-weight: 400; font-size: 15px; opacity: 0.7; }

/* Submitted lessons in the list read a touch stronger than upcoming ones */
.lesson-list li.submitted a { color: var(--muted-strong); }
.lesson-list li.submitted .lesson-status { color: #4d8a2f; font-weight: 700; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid #e2e8f0;
  /* On a page carrying artwork this hairline stops being a divider and becomes a seam:
     the backdrop is position:fixed across the whole viewport, so a 1px rule at whatever
     height the content happens to end draws a line straight across the photograph. Those
     pages separate the footer with space instead. See body.has-bg override below. */
  color: var(--muted-strong);
  font-size: 15px;
  padding: 22px 0 30px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-inner p { margin: 0; }
.reset-btn {
  background: transparent;
  border: 1px solid #d8ccc2;
  color: #9a6b52;
  border-radius: 4px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.reset-btn:hover { background: #fbf2ec; border-color: #c9a992; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; gap: 32px; }
  .sidebar { order: 2; max-width: 420px; }
  .sidebar-cover { width: 150px; }
  .lesson-title { font-size: 42px; }
  .grade-badge { float: none; display: inline-block; margin: 0 0 16px; }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  .header-inner { flex-wrap: wrap; gap: 12px 18px; }
  .brand-title { height: 14px; }
  .brand-sub { font-size: 17px; letter-spacing: 2px; }
  .site-nav { gap: 18px; font-size: 17px; }
  .header-right { font-size: 16px; }
  .lesson-title { font-size: 34px; }
}

/* ===================== Milestone 3 ===================== */

/* Header identity + footer role links */
.whoami { color: #eaf2f6; font-size: 16px; }
.header-link {
  color: #eaf2f6; text-decoration: none; font-size: 16px;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 4px; padding: 5px 12px;
}
.header-link:hover { background: rgba(255,255,255,0.12); }

.dev-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dev-links a { color: var(--muted-strong); text-decoration: none; }
.dev-links a:hover { color: var(--brand-navy); text-decoration: underline; }
.dev-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.dev-links form { margin: 0; }

/* Landing / sign-in */
.landing { max-width: 660px; }
.landing-error { background: #fde8e8; border: 1px solid #f0b4b4; color: #9a2b2b; padding: 12px 16px; border-radius: 6px; }
.landing-dev { margin-top: 26px; padding: 20px 22px; background: #f1f5f9; border-radius: 8px; }
.dev-note { color: var(--muted-strong); font-size: 15px; margin: 8px 0; }

/* Preview banner (future lesson, viewable but not answerable) */
.banner-preview {
  background: #eef2f6; border: 1px solid #d7e0ea; border-radius: 6px;
  padding: 14px 20px; margin: 0 0 22px; color: #4a5a6a; font-size: 18px;
}
.banner-preview strong { font-weight: 700; }

/* Per-question grading marks */
.q-check { color: #4d8a2f; font-weight: 700; margin-left: 6px; }
.question.q-correct textarea { background: #f4faf0; border-style: solid; border-color: #cfe6c0; }
.question.q-revise textarea { border-style: solid; border-color: #e0b455; }

.supervisor-note {
  background: var(--supervisor-bg); border-radius: 6px; padding: 10px 14px; margin: 0 0 10px;
}
.supervisor-note .sup-head { display: block; color: #e07d1e; font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.supervisor-note .sup-body { color: #7a5a1a; font-size: 16px; }

.submit-hint { color: var(--muted-strong); font-size: 15px; }

/* Sidebar lesson statuses (viewable; no hard locks) */
.lesson-list li.complete .lesson-status { color: #4d8a2f; font-weight: 700; }
.lesson-list li.returned .lesson-status { color: #c67a1e; font-weight: 700; }
.lesson-list li.submitted .lesson-status { color: var(--link); font-weight: 700; }
.lesson-list li.draft .lesson-status { color: var(--muted-strong); }
.lesson-list li.preview:not(.active) a { color: #aab6c2; }
.lesson-list li.preview:not(.active) .lesson-status { color: #c2ccd6; }

/* Admin + grader consoles */
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.admin-head .page-title { margin: 0; }

.admin-table { width: 100%; border-collapse: collapse; margin: 10px 0 44px; }
.admin-table th {
  text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted-strong); border-bottom: 2px solid #e2e8f0; padding: 10px 12px;
}
.admin-table td { border-bottom: 1px solid #eef2f6; padding: 14px 12px; vertical-align: top; font-size: 16px; }
.cell-name { font-weight: 700; }
.cell-sub { color: var(--muted-strong); font-size: 14px; }

.mini-progress { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 13px; }
.mini-label { width: 140px; color: var(--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar { flex: 1; max-width: 120px; height: 6px; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: var(--brand-teal); }
.mini-count { color: var(--muted-strong); width: 46px; }

.link-row { display: flex; gap: 8px; align-items: center; }
.link-input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 4px;
  font-family: var(--sans); font-size: 13px; color: var(--ink); background: #f8fafc;
}
.link-open { display: inline-block; margin-top: 6px; text-decoration: none; }

.invite-form { max-width: 460px; display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.invite-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--heading); }
.invite-form input,
.invite-form select { padding: 11px 13px; border: 1px solid #cbd5e1; border-radius: 4px; font-family: var(--sans); font-size: 17px; background: #fff; }
.invite-form button { align-self: flex-start; }

.section-head { font-family: var(--sans); font-weight: 700; font-size: 20px; color: var(--heading); margin: 28px 0 10px; }
.empty-note { color: var(--muted-strong); }
.btn-sm { padding: 7px 16px; font-size: 15px; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pill-green { background: #e7f7c9; color: #4d7c1a; }
.pill-amber { background: #fdefc4; color: #a56a12; }

/* Grader lesson form */
.grade-q { border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px 20px; margin-bottom: 20px; }
.grade-answer {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 12px 14px; margin: 8px 0 14px; white-space: pre-wrap; color: var(--ink);
}
.grade-controls { display: flex; gap: 22px; margin-bottom: 10px; }
.grade-controls label { font-weight: 700; cursor: pointer; }
.radio-correct { color: #4d8a2f; }
.radio-revise { color: #c67a1e; }
.grade-feedback {
  width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid #e0b455;
  border-radius: 4px; font-family: var(--sans); font-size: 16px; resize: vertical;
}

/* ---------- Records office (wide landscape forms) ---------- */

/* The Active Students Log and the Progress Sheet are landscape grids: 52 week columns,
   or 80 lesson boxes. They need the frame, not the reading column. */
.container-wide {
  max-width: min(1840px, 98vw);
  padding: 0 16px;
}

/* A completed course: shown with its artwork, but closed. It is rendered as a <div>,
   not a link, so there is no way into the course from the dashboard at all. */
.course-card-done { cursor: default; border-color: #b9dfc6; background: #fbfffc; }
.course-card-done:hover { box-shadow: 0 1px 3px rgba(31, 39, 51, 0.08); transform: none; }
.course-card-done .course-card-art { opacity: .85; }
.course-tag-done { color: #166534; }
.course-tag-done::before { content: "🎓 "; }
.progress-bar span.done { background: #16a34a; }

/* ---------- Section bar ----------
   Sections with more than one page put those pages in a bar directly under the menu. No
   menu to open: select Progress and its three pages are simply there. Everything here is
   set explicitly — family, size, weight, height — because this bar sits against the main
   nav and any drift between the two rows reads as a mistake. */

.staff-subnav {
  background: #1d4e79;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.subnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-height: 42px;
  flex-wrap: wrap;
}

.subnav-label {
  display: flex;
  align-items: center;
  margin-right: 18px;
  color: #93bcdd;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.subnav-link {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #d8e8f5;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}

.subnav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .09);
  text-decoration: none;
}

.subnav-link.is-disabled { color:#93bcdd; opacity:.65; cursor:default; }
.subnav-link.is-disabled:hover { background:none; }
.subnav-link .soon { font-size:.62rem; font-weight:700; letter-spacing:.06em;
                     text-transform:uppercase; background:rgba(255,255,255,.18);
                     padding:.02rem .3rem; border-radius:999px; vertical-align:middle; }

.subnav-link.on {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, .13);
  border-bottom-color: #c9a227;
}

.form-error {
  max-width: 640px;
  margin: 0 0 1rem;
  padding: .7rem .95rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  color: #991b1b;
  font-size: .93rem;
}

.mail-prefs { max-width:640px; margin:.2rem 0 1.6rem; }
.mail-prefs .check { display:flex; align-items:flex-start; gap:.6rem; margin:.55rem 0;
                     padding:.6rem .8rem; border:1px solid #e2e8f0; border-radius:8px;
                     background:#f8fafc; }
.mail-prefs .check input { width:auto; margin:.15rem 0 0; }
.mail-prefs .check .cell-sub { display:block; margin-top:.15rem; }
.mail-prefs button { margin-top:.6rem; }

/* Help Me — quiet, always available, never mistaken for the submit button. */
.help-me { margin: 1.6rem 0 0; padding: 1rem 1.1rem; border: 1px solid #e2e8f0;
           border-radius: 8px; background: #f8fafc; }
.help-me label { display: block; font-weight: 600; margin-bottom: .35rem; color: #334155; }
.help-me textarea { width: 100%; padding: .5rem .6rem; border: 1px solid #cbd5e1;
                    border-radius: 6px; font: inherit; font-size: .92rem; resize: vertical; }
.help-me button { margin-top: .55rem; }
.help-sent { margin: 0; color: #14532d; font-weight: 600; }

/* ---------- Supplement pack ----------
   The references that sit at the back of the paper lesson tablet. Tall enough to actually
   read a page in, and the browser's own PDF viewer supplies zoom, search and paging. */
/* The supplement pack. No title bar and no plugin toolbar: the pack is drawn onto
   canvases by static/pdfjs/pack-viewer.js, so what follows styles a scrolling stack of
   page images and one Full screen button. The filename used to sit in a blue bar across
   the top; it told the student nothing they needed, and on a phone it wrapped to six
   lines and pushed the controls off the side of the screen. */
.handout { position: relative; margin: 1.6rem 0 2rem; border: 1px solid #cbd5e1;
           border-radius: 10px; overflow: hidden; background: #f1f5f9;
           user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pack-stage { max-height: 78vh; overflow-y: auto; overflow-x: hidden;
              -webkit-overflow-scrolling: touch; padding: .6rem; }
.pack-page { background: #fff; margin: 0 auto .6rem; max-width: 100%;
             box-shadow: 0 1px 4px rgba(15,23,42,.18); }
.pack-page:last-child { margin-bottom: 0; }
.pack-canvas { display: block; }
.pack-note { margin: 0; padding: 1.6rem .9rem; text-align: center; color: #64748b;
             font-size: .9rem; }
.pack-tools { position: absolute; top: .55rem; right: .55rem; z-index: 2; }
.pack-full { padding: .35rem .75rem; border: 1px solid rgba(255,255,255,.55);
             border-radius: 6px; background: rgba(29,78,121,.88); color: #fff;
             font: inherit; font-size: .82rem; cursor: pointer; }
.pack-full:hover { background: rgba(29,78,121,1); }

/* Full screen, three ways. The prefixed selectors are written as separate rules on
   purpose: a browser that does not understand one of them would throw away the whole
   rule if they were combined into one selector list. .pack-pseudo is the stand-in for
   iOS Safari, which has no element fullscreen at all. */
.handout:fullscreen { border: 0; border-radius: 0; }
.handout:fullscreen .pack-stage { max-height: 100vh; height: 100vh; }
.handout:-webkit-full-screen { border: 0; border-radius: 0; }
.handout:-webkit-full-screen .pack-stage { max-height: 100vh; height: 100vh; }
.handout.pack-pseudo { position: fixed; inset: 0; z-index: 900; margin: 0;
                       border: 0; border-radius: 0; }
.handout.pack-pseudo .pack-stage { max-height: 100vh; height: 100vh; }

@media (max-width: 700px) { .pack-stage { max-height: 62vh; padding: .4rem; } }

.roster-search { display:flex; align-items:center; gap:.6rem; margin:.4rem 0 1.2rem; }
.roster-search input[type=search] { flex:0 1 380px; padding:.5rem .7rem;
  border:1px solid #cbd5e1; border-radius:7px; font:inherit; font-size:.92rem; }

.pager { display:flex; align-items:center; gap:1.2rem; margin:1.2rem 0; font-size:.92rem; }
.draft-wait { border:1px solid #f0c36d; background:#fffaf0; border-radius:10px;
              padding:.7rem .9rem; margin:0 0 1rem; }
.draft-wait .dw-head { margin:0 0 .5rem; font-weight:600; color:#8a5a00; }
.draft-wait .write-box { border:0; padding:0; background:transparent; }

.rail-head { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.rail-head .section-head { margin-right:auto; }
/* Inline inbound mail in the thread — grows with its gloss lines. */
.msg-body-text { background:#fff; padding:.5rem .7rem; border:1px solid #eef2f7;
                 border-radius:7px; font-size:.9rem; line-height:1.5;
                 max-height:320px; overflow-y:auto; }
.msg-body-text p { margin:.3rem 0; }

.tpl-new { display:flex; gap:.5rem; margin:.5rem 0 0; }
.tpl-new input[type=text] { padding:.45rem .6rem; border:1px solid #cbd5e1; border-radius:7px;
                            font:inherit; min-width:260px; }
.tpl-pick { display:block; margin:0 0 .5rem; font-size:.85rem; color:#475569; }
.tpl-pick select { display:block; width:100%; margin-top:.25rem; padding:.4rem .5rem;
                   border:1px solid #cbd5e1; border-radius:7px; font:inherit; background:#fff; }

/* While pager.js is fetching the next page the region dims instead of the page flicking. */
[data-swap][aria-busy="true"] { opacity:.55; transition:opacity .15s ease; }
.pager a { color:#184b7b; font-weight:600; text-decoration:none; }
.pager a:hover { text-decoration:underline; }
.pager span { color:#64748b; }

.pick-link { text-decoration: none; display: flex; }
.pick-link:hover { border-color: #1d4e79; background: #f0f6fb; }

.all-done-note { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border: 1px solid #b9dfc6;
                 border-radius: 9px; background: #f0fdf4; color: #14532d; }

.email-change { max-width: 640px; margin: .2rem 0 1rem; }
.email-change input[type=email] { width: 100%; max-width: 380px; display: block;
  padding: .5rem .7rem; border: 1px solid #cbd5e1; border-radius: 7px; font: inherit; }
.email-change .check { display: flex; gap: .55rem; align-items: flex-start; }
.email-change .check input { width: auto; margin-top: .2rem; }
.email-history { list-style: none; margin: 0 0 1.4rem; padding: 0; max-width: 640px; }
.email-history li { display: flex; align-items: center; gap: .9rem; padding: .45rem .2rem;
                    border-bottom: 1px solid #eef2f7; font-size: .92rem; }
.email-history li form { margin-left: auto; }

.lock-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem;
               max-width:640px; margin:.6rem 0 1.2rem; padding:.7rem .95rem;
               background:#fef2f2; border:1px solid #fecaca; border-left:3px solid #dc2626;
               border-radius:8px; color:#991b1b; font-size:.93rem; }
.lock-chip { font-size:.85rem; }

/* ---------- Enrolment: what they're on, plus search-to-add ----------
   The catalogue runs to 80+ courses; a checkbox per course is a wall. So: a short list of
   what this student is actually on, and a search box to add one more. */
.enrolled-list { list-style:none; margin:.2rem 0 .8rem; padding:0; max-width:680px; }
.enrolled-list li { display:flex; align-items:center; gap:.7rem; padding:.55rem .8rem;
                    border:1px solid #e2e8f0; border-radius:8px; background:#fff;
                    margin:.4rem 0; }
.enrolled-list .en-name { flex:1 1 auto; font-weight:500; }
.en-pill { flex:0 0 auto; font-size:.7rem; font-weight:700; letter-spacing:.04em;
           text-transform:uppercase; padding:.12rem .5rem; border-radius:999px;
           background:#f1f5f9; color:#475569; }
.en-pill.done { background:#dcfce7; color:#14532d; }
.en-remove { flex:0 0 auto; padding:.25rem .6rem; border:1px solid #cbd5e1; border-radius:6px;
             background:#fff; font:inherit; font-size:.82rem; color:#475569; cursor:pointer; }
.en-remove:hover { background:#fef2f2; border-color:#fecaca; color:#991b1b; }

.course-add { position:relative; max-width:680px; margin:0 0 1rem; }
.course-add input { width:100%; padding:.55rem .75rem; border:1px solid #cbd5e1;
                    border-radius:8px; font:inherit; }
.course-results { list-style:none; margin:.25rem 0 0; padding:.25rem; position:absolute;
                  z-index:20; left:0; right:0; max-height:300px; overflow:auto;
                  background:#fff; border:1px solid #cbd5e1; border-radius:8px;
                  box-shadow:0 10px 24px rgba(15,32,51,.14); }
.course-results li { display:flex; flex-direction:column; gap:.1rem; padding:.5rem .65rem;
                     border-radius:6px; cursor:pointer; }
.course-results li:hover, .course-results li:focus { background:#eef4f9; outline:none; }
.course-results li.no-hit { color:#94a3b8; cursor:default; }
.course-results li.no-hit:hover { background:none; }

/* ---------- Live student picker ----------
   Results appear as you type; there is no Search button to press. */
.live-pick { position:relative; max-width:520px; margin:.3rem 0 .2rem; }
.live-pick-input { width:100%; padding:.55rem .75rem; border:1px solid #cbd5e1;
                   border-radius:8px; font:inherit; }
.live-pick-input:focus { outline:2px solid #b7d3ea; outline-offset:-1px; }
.live-pick-results { list-style:none; margin:.25rem 0 0; padding:.25rem; position:absolute;
                     z-index:25; left:0; right:0; max-height:340px; overflow:auto;
                     background:#fff; border:1px solid #cbd5e1; border-radius:8px;
                     box-shadow:0 10px 24px rgba(15,32,51,.14); }
.live-pick-results li { display:grid; grid-template-columns:1fr auto; gap:0 .4rem;
                        padding:.45rem .6rem; border-radius:6px; cursor:pointer; }
.live-pick-results li:hover, .live-pick-results li:focus { background:#eef4f9; outline:none; }
.live-pick-results .lp-name { font-weight:600; color:#0f172a; }
.live-pick-results .lp-sub { grid-column:1 / -1; font-size:.8rem; color:#64748b; }
.live-pick-note { display:block; margin-top:.25rem; min-height:1em; }

/* Count badges beside a section heading. Shared, because more than one page counts
   things — they were local to the grading queue and vanished when a block moved. */
.count-pill { display:inline-block; min-width:1.6em; text-align:center; padding:.05rem .45rem;
              border-radius:999px; font-size:.8rem; font-weight:700; margin-left:.35rem; }
.cp-red   { background:#fee2e2; color:#991b1b; }
.cp-amber { background:#fef3c7; color:#92400e; }
.cp-green { background:#dcfce7; color:#166534; }
.cp-slate { background:#e2e8f0; color:#475569; }

/* ---------- The student page: one person, in full ----------
   Working view on top (how they're doing, what they've finished, the conversation);
   account settings folded away underneath, because they are occasional. */
.stu-head { margin-bottom: 1rem; }
.back-link { display:inline-block; margin-bottom:.35rem; font-size:.9rem; color:#184b7b;
             text-decoration:none; font-weight:600; }
.back-link:hover { text-decoration:underline; }
.stu-contact { margin:.2rem 0 0; color:#64748b; }

.stu-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px);
            gap:1.6rem; align-items:start; }
@media (max-width:1100px){ .stu-grid { grid-template-columns:1fr; } }

.stat-row { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1.4rem; }
.stat { flex:1 1 130px; padding:.6rem .8rem; border:1px solid #e2e8f0; border-radius:9px;
        background:#f8fafc; display:flex; flex-direction:column; gap:.1rem; }
.stat strong { font-size:1.4rem; color:#1d4e79; line-height:1.1; }
.stat span { font-size:.78rem; color:#64748b; }

/* The course title on the student page is a way out to the course itself. */
.cp-link { color:#184b7b; text-decoration:none; }
.cp-link:hover { text-decoration:underline; }
.recent-lessons .rl-date { white-space:nowrap; font-variant-numeric:tabular-nums; }

.course-panel { border:1px solid #e2e8f0; border-radius:10px; padding:.8rem 1rem;
                background:#fff; margin:.6rem 0 1rem; }
.course-panel.done { background:#fbfffc; border-color:#b9dfc6; }
/* Courses in progress sit two across as tiles. A student is on nought to three, so they
   fit side by side, and each carries its own artwork — the way the student meets it. */
.cp-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.9rem;
           align-items:start; }
@media (max-width:760px) { .cp-grid { grid-template-columns:1fr; } }
.cp-grid .course-panel { margin:0; }
.cp-head { display:flex; align-items:center; gap:.8rem; justify-content:space-between; }
.cp-grid .cp-head { align-items:flex-start; justify-content:flex-start; }
.cp-headings { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.cp-art { flex:0 0 auto; width:56px; height:56px; object-fit:contain; border-radius:6px;
          background:#fbfaf6; border:1px solid #e2e8f0; padding:3px; }
.cp-art-none { display:flex; align-items:center; justify-content:center; font-size:26px;
               line-height:1; color:#94a3b8; }
.cp-title { font-weight:600; color:#0f172a; }
.cp-count { font-size:.85rem; color:#64748b; white-space:nowrap; }
.cp-foot { margin:.5rem 0 0; font-size:.82rem; color:#64748b; }
.cp-actions { display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap; }
.course-panel .boxes { display:flex; flex-wrap:wrap; gap:2px; margin-top:.6rem; }
.course-panel .boxes i { width:13px; height:13px; border:1px solid #cbd5e1; background:#fff;
                         border-radius:2px; }
.course-panel .boxes i.done { background:#2f6f95; border-color:#2f6f95; }
.course-panel .boxes i.sent { background:#fde68a; border-color:#d9a441; }
.course-panel .boxes i.end  { background:#94a3b8; border-color:#64748b; }

.stu-rail .section-head { margin-top:0; }
.write-box { border:1px solid #cbd5e1; border-radius:10px; padding:.8rem .9rem;
             background:#f8fafc; margin-bottom:1rem; }
.write-box label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.3rem; }
.write-box input[type=text], .write-box textarea {
  width:100%; padding:.5rem .6rem; border:1px solid #cbd5e1; border-radius:7px;
  font:inherit; font-size:.92rem; }
.write-box textarea { margin-top:.45rem; resize:vertical; }
.write-actions { display:flex; gap:.5rem; margin-top:.55rem; }
.write-preview { width:100%; height:320px; border:1px solid #cbd5e1; border-radius:8px;
                 margin-top:.6rem; background:#fff; }

.thread .msg, .thread .msg-slim { border:1px solid #e2e8f0; border-radius:9px; margin:.5rem 0;
                                  overflow:hidden; background:#fff; }
.thread .msg-slim { border-style:dashed; }
.thread .msg-head, .thread .msg-slim summary {
  display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; background:#f8fafc;
  font-size:.85rem; cursor:default; list-style:none; }
/* Every thread message folds to its header now — the header is the tap target. */
.thread details.msg > summary.msg-head { cursor:pointer; }
.thread details.msg > summary.msg-head::-webkit-details-marker { display:none; }
.thread details.msg > summary.msg-head:hover { background:#eff6ff; }
.thread .msg-slim summary { cursor:pointer; background:#fff; color:#64748b; }
.thread .msg-slim summary::-webkit-details-marker { display:none; }
.thread .ms-subj { flex:1 1 auto; font-weight:600; color:#0f172a; min-width:0;
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thread .msg-slim .ms-subj { font-weight:400; }
.thread .ms-date { flex:0 0 auto; color:#94a3b8; font-size:.78rem;
                   font-variant-numeric:tabular-nums; }
.thread .msg-body { width:100%; height:150px; border:0; background:#fff; }
.thread .bulk-tag { font-size:.64rem; font-weight:700; letter-spacing:.05em; padding:.05rem .4rem;
                    border-radius:999px; background:#f1f5f9; color:#475569; text-transform:uppercase; }
.thread .dir { font-size:.66rem; font-weight:700; padding:.05rem .4rem; border-radius:999px; }
.thread .dir.outbound { background:#dbeafe; color:#1e40af; }
.thread .dir.inbound  { background:#ede9fe; color:#6b21a8; }

.acct-settings { margin-top:2.4rem; border-top:1px solid #e2e8f0; padding-top:1rem; }
.acct-settings > summary { cursor:pointer; color:#475569; font-size:.95rem; }
.acct-body { margin-top:1rem; }
.pill-red { background:#fee2e2; color:#991b1b; }

/* Closing a course, offered on the page where the last lesson is marked. Shown greyed
   before it is possible, so the grader sees the goal and the distance to it at once. */
.finish-course { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
                 margin:1.6rem 0 0; padding:.9rem 1.1rem; border:1px solid #e2e8f0;
                 border-radius:10px; background:#f8fafc; }
.finish-course.is-ready { border-color:#b9dfc6; background:#f3fbf6; }
.finish-course .fc-text { flex:1 1 320px; }
.finish-course .fc-text strong { display:block; color:#0f172a; }
.finish-course .fc-text span { font-size:.87rem; color:#64748b; }
.finish-course button[disabled] { opacity:.45; cursor:not-allowed; }

.finished-banner { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
                   margin:0 0 1.2rem; padding:.85rem 1.05rem; border:1px solid #b9dfc6;
                   border-radius:10px; background:#f0fdf4; color:#14532d; }
.finished-banner > div:first-child { flex:1 1 340px; }
.fb-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

.between-courses { margin:.2rem 0 1rem; padding:.6rem .85rem; border:1px dashed #cbd5e1;
                   border-radius:8px; background:#fbfdff; color:#475569; font-size:.94rem; }

/* How many mail-outs have already gone this week — shown before sending another. */
.week-warn { max-width:720px; margin:0 0 1.4rem; padding:.85rem 1.05rem; border-radius:9px;
             background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.week-warn.is-loud { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.week-warn strong { display:block; }
.week-warn ul { margin:.5rem 0 .3rem; padding-left:1.1rem; font-size:.9rem; }
.week-warn .cell-sub { color:inherit; opacity:.8; }

.week-count { max-width:900px; margin:.2rem 0 .9rem; padding:.5rem .85rem; border-radius:8px;
              background:#f1f5f9; border:1px solid #e2e8f0; color:#334155; font-size:.92rem; }
.week-count strong { color:#1d4e79; font-size:1.05rem; }

/* Language popup on a lesson that exists in more than one language. */
.lang-menu { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.lang-menu label { font-size: 15px; color: #475569; }
.lang-menu select {
  font-size: 16px; padding: 6px 34px 6px 12px; border: 1px solid #cbd5e1;
  border-radius: 8px; background: #fff; color: #1d4e79; font-weight: 600;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  /* a chevron drawn with a background image so the control reads as a menu */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231d4e79' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.lang-menu select:hover { border-color: #1d4e79; }
.lang-menu select:focus { outline: 2px solid #1d4e79; outline-offset: 1px; }