/* Rhema LMS - single stylesheet, mobile-first, no build step.
   Theme: Calvary Leadership College (verde / mint). Palette + wordmark from
   the CLC brand guide (clc-graphic-assets.pdf). Colours live as tokens on
   :root; swap the values here to re-skin for another tenant. */

/* Plus Jakarta Sans - CLC wordmark typeface, self-hosted (no build, offline-ok).
   Variable weight 200-800; latin + latin-ext subsets from Google Fonts v12. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* CLC brand core */
  --verde-900: #182d2b;   /* deep green - dark ground, nav rail, primary btn */
  --verde-800: #21403c;   /* hover on dark surfaces */
  --mint: #b2daa6;         /* light green - accent on dark, primary btn text */
  --mint-100: #e7f2e2;     /* faint mint - tag/well backgrounds */
  --cream: #e3d5c0;
  --navy: #0a2d3f;         /* brand navy - stat figures, headings on light */

  --ink: #1e2c2a;          /* body text (verde-tinted near-black) */
  --ink-soft: #5c6b68;     /* secondary text */
  --line: #e3ded3;         /* hairlines / borders (warm) */
  --bg: #f4f2ec;           /* page ground (warm paper) */
  --card: #ffffff;
  --navy-600: #12405a;

  --rail: var(--verde-900);
  --rail-ink: #c7d8c2;     /* mint-grey, readable on verde */

  --accent: #0e5994;       /* links / focus - CLC blue, AA on white */
  --accent-600: #0a4674;
  --danger: #a5382e;
  --danger-bg: #f7e7e5;
  --ok: #1f7a4d;
  --ok-bg: #e4f1e6;
  --info: #0e5994;
  --info-bg: #e4eef6;
  --warn: #8a5a12;
  --warn-bg: #fbf0d8;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(24, 45, 43, .06), 0 8px 24px rgba(24, 45, 43, .08);
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.125rem; margin: 0 0 .5rem; }
a { color: var(--accent); }
.muted { color: var(--ink-soft); }

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand img { height: 24px; width: auto; display: block; }

.icon { width: 20px; height: 20px; flex: none; }

/* ---- App shell: persistent left nav rail (Blackboard Ultra style) ---- */
.app { min-height: 100vh; }
body.rail-locked { overflow: hidden; }

.rail {
  background: var(--rail);
  color: var(--rail-ink);
  display: flex;
  flex-direction: column;
}
.rail-brand {
  display: block;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rail-brand img { height: 30px; width: auto; display: block; }

.rail-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: .6rem; }
.rail-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .7rem;
  min-height: 44px;
  border-radius: 8px;
  color: var(--rail-ink);
  text-decoration: none;
  font-size: .925rem;
}
.rail-link .icon { opacity: .85; }
.rail-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.rail-link.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.rail-link.is-disabled { opacity: .38; cursor: default; }
.rail-group {
  padding: 1rem .8rem .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #83a97c;
}
.rail-foot {
  padding: .9rem 1.1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.rail-foot .who { color: #fff; font-size: .92rem; font-weight: 600; }
.rail-foot .role { color: #83a97c; font-size: .78rem; text-transform: capitalize; margin-bottom: .4rem; }
.rail-foot a { color: var(--mint); font-size: .86rem; text-decoration: none; }
.rail-foot a:hover { text-decoration: underline; }

/* Admin "act as user" banner — deliberately loud (amber, the same
   --warn/--warn-bg pair as the admin ops dashboard's "attention" pills) and
   NOT position:sticky: it sits above .topbar-mobile/.appbar, which already
   fight over their own sticky top:0, and stacking a third sticky element on
   the same edge without a JS-measured offset is fragile. Reappearing on
   every page load is what actually matters here — you can't navigate your
   way into forgetting you're impersonating — scrolling it out of view
   within one long page is an acceptable trade for not fighting that stack. */
.imperso-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem;
  padding: .6rem 1rem;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #f0dcae;
}
.imperso-bar form { margin: 0; }

.topbar-mobile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  background: var(--rail);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.rail-toggle {
  display: inline-flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}
.rail-toggle svg { width: 20px; height: 20px; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }

/* Mobile: rail is an off-canvas drawer. */
@media (max-width: 959px) {
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    max-width: 82vw;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .rail.open { transform: none; }
}

/* Desktop: fixed two-column layout, rail always visible. */
@media (min-width: 960px) {
  .app { display: grid; grid-template-columns: 256px 1fr; }
  .topbar-mobile, .scrim { display: none; }
  .rail { position: sticky; top: 0; height: 100vh; }
  .app-main { min-width: 0; }
}

/* ---- Layout ---- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}
@media (min-width: 960px) { .container { padding: 2rem 2.25rem 4rem; } }

.page-head { margin-bottom: 1.25rem; }
.page-head h1 { margin-bottom: .2rem; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.auth-card {
  max-width: 400px;
  margin: 2rem auto;
}
/* a collapsible card standing on its own needs space before what follows it */
details.card { margin-bottom: 1.25rem; }
details.card > summary { cursor: pointer; }
.auth-logo { display: block; width: 132px; height: auto; margin: .25rem auto 1.25rem; }

.hero {
  text-align: center;
  padding: 3rem 1rem;
}
.hero h1 { font-size: 1.9rem; }
.hero-logo { display: block; width: 200px; max-width: 60vw; height: auto; margin: 0 auto 1.25rem; }

/* ---- Stat cards ---- */
.stat-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
.stat { text-align: center; padding: 1rem; }
.stat-value { font-size: 1.9rem; font-weight: 700; color: var(--navy); }
.stat-label { color: var(--ink-soft); text-transform: capitalize; font-size: .9rem; }

/* ---- Forms ---- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-weight: 600;
  font-size: .9rem;
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
  font: inherit;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  min-height: 44px;
  width: 100%;
}
textarea { min-height: 88px; resize: vertical; }
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
label.check {
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
}
label.check input { min-height: 0; width: auto; }
.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row > label { flex: 1 1 12rem; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 .6rem;
}
.section-head h2 { margin: 0; }

/* ---- Public profile ---- */
.pf { max-width: 940px; }
.pf-head { position: relative; }
.pf .stream-layout { margin-top: 1.25rem; }
.pf-contact { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .5rem; }
.pf-contact div { font-size: .92rem; }
.pf-contact dt { color: var(--ink-soft); margin: 0 0 .1rem; }
.pf-contact dd { margin: 0; overflow-wrap: anywhere; }
.pf-edit-btn { position: absolute; top: 1rem; right: 1rem; }
.pf-summary { display: flex; gap: 1.25rem; align-items: center; }
.pf-avatar { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--course, #4a6a5f); color: #fff;
  font-size: 2rem; font-weight: 600;
}
.pf-id h1 { margin: 0; font-size: 1.4rem; }
.pf-headline { margin: .15rem 0 0; }
.pf-badges { margin: .4rem 0 0; }
.pf-form { display: none; }
.is-editing .pf-form {
  display: flex; flex-direction: column; gap: 1.25rem; max-width: 640px;
}
.pf-form-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pf-form-bar strong { font-size: 1.05rem; }
.pf-form label > span:first-child { font-weight: 600; }   /* keep hint inline */
.pf-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  padding-top: .7rem; border-top: 1px solid var(--line); font-size: .9rem;
}
.pf-sub > span:first-child { flex: 1 1 12rem; font-weight: 600; }
.is-editing .pf-head,
.is-editing .stream-layout { display: none; }
@media (max-width: 560px) {
  .pf-summary { flex-direction: column; text-align: center; }
  .pf-edit-btn { position: static; margin-bottom: .8rem; }
}

/* ---- Announcements ---- */
/* Same card language as the dashboard's stream items / discussion posts,
   rather than a bare bottom-bordered list — a colour bar (brand on unread,
   a plain hairline once read), a title that reads as a link without an
   underline shouting over it, and a small dot to flag "new" independent of
   font-weight (which pinned + unread could otherwise fight over visually). */
.ann-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ann-card {
  display: flex; gap: .9rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .9rem 1rem;
}
.ann-card__bar { flex: none; width: 4px; border-radius: 4px; background: var(--line); }
.ann-card.is-unread .ann-card__bar { background: var(--brand, #182d2b); }
.ann-card__body { min-width: 0; flex: 1; }
.ann-card__title { margin: 0; display: flex; align-items: center; gap: .5rem; }
.ann-card.is-unread .ann-card__title a { font-weight: 700; }
.ann-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.ann-card__meta { font-size: .85rem; margin-top: .3rem; }
.stream-item--ann .stream-item__bar { background: var(--brand, #182d2b); }

/* ---- Enrolment list (person detail) ---- */
.enrol-list { list-style: none; margin: 0; padding: 0; }
.enrol-list li {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}
.enrol-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.enrol-list__main { min-width: 0; }
.enrol-list__main a { font-weight: 600; }
.enrol-list__meta { font-size: .85rem; margin-top: .15rem; }
.enrol-list form { flex: none; }

/* ---- Key / value list ---- */
.kv { margin: .25rem 0 .5rem; display: grid; gap: .35rem; }
.kv > div { display: flex; gap: .75rem; font-size: .92rem; }
.kv dt { flex: 0 0 9rem; color: var(--ink-soft); margin: 0; }
.kv dd { margin: 0; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .65rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #efece3; }
.btn-sm { min-height: 0; padding: .35rem .8rem; border-radius: 8px; font-size: .85rem; }
.btn-primary {
  background: var(--verde-900);
  border-color: var(--verde-900);
  color: var(--mint);
}
.btn-primary:hover { background: var(--verde-800); border-color: var(--verde-800); }
.btn-microsoft {
  width: 100%;
  background: #fff;
  border-color: #8c8c8c;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
  margin: .25rem 0;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--line);
}
.divider span { padding: 0 .75rem; }

/* ---- Flash messages ---- */
.flashes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.flash {
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: .92rem;
}
.flash-error { background: var(--danger-bg); border-color: #e6c3bf; color: var(--danger); }
.flash-info { background: var(--info-bg); border-color: #bcd4e6; color: var(--info); }
.flash-success { background: var(--ok-bg); border-color: #c2e0c9; color: var(--ok); }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.table th,
.table td {
  text-align: left;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table th {
  background: #efece3;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft);
}
.table tr:last-child td { border-bottom: none; }

/* ---- CSV import ---- */
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.tag {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  border: 1px solid transparent;
}
.tag-create { background: var(--ok-bg); color: var(--ok); border-color: #c2e0c9; }
.tag-update { background: var(--info-bg); color: var(--info); border-color: #bcd4e6; }
.tag-skip { background: #efece3; color: var(--ink-soft); border-color: var(--line); }
.tag-error { background: var(--danger-bg); color: var(--danger); border-color: #e6c3bf; }
.tag-warn { background: var(--warn-bg); color: var(--warn); border-color: #f0dcae; }

/* ---- Activity Stream (dashboard) ---- */
.stream-layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .stream-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
/* stacked cards/sections in either column get their own vertical rhythm */
.stream-layout > aside,
.stream-layout > .stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* Dashboard greeting + stat row */
.dash-hello { margin-bottom: 1.4rem; }
.dash-hello h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.15rem); margin: 0 0 .25rem; }
.dash-hello p { margin: 0; font-size: .95rem; }
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.9rem;
}
.dash-stats .stat { padding: 1.1rem 1rem; }
.dash-stats a.stat { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.dash-stats a.stat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(24, 45, 43, .1); }
.dash-stats .stat-value { color: var(--navy); }

.stream-group { margin-bottom: 0; }
.stream-group > h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-bottom: .6rem;
}
.stream-empty {
  color: var(--ink-soft);
  font-size: .92rem;
  padding: .3rem 0;
  margin: 0;
}
.stream-item {
  display: flex;
  gap: .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin-bottom: .6rem;
}
.stream-item__bar {
  flex: none;
  width: 4px;
  border-radius: 4px;
  background: var(--course, var(--accent));
}
.stream-item__body { min-width: 0; flex: 1; }
.stream-item__body p { margin: .3rem 0; }
.stream-item__body time { font-size: .82rem; }
/* Every stream-item link (a due date, an active thread, "N submissions
   waiting") is the whole point of the row, not incidental body-text prose —
   the underline just reads as clutter at a glance across a list of them. */
.stream-item__body p a { text-decoration: none; }
.stream-item__body p a:hover { text-decoration: underline; }

.ann-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem .5rem;
  flex-wrap: wrap;
}
.ann-row__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  min-width: 0;
}
.ann-row__title a {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.ann-row__title a:hover { color: var(--accent); text-decoration: underline; }
.stream-item--ann.is-unread .ann-row__title a { font-weight: 700; }
.ann-row__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}
.ann-row__meta time { white-space: nowrap; }

.course-pill, .dot { --course: var(--accent); }
.course-pill {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: var(--course);
}
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--course);
  margin-right: .5rem;
}

.da-list { list-style: none; padding: 0; margin: .3rem 0; }
.da-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
  /* An audit-log detail (someone's email, a long title) is one unbroken
     "word" with no natural break point, so the browser would rather let it
     overflow the flex row — and the card — than break it. overflow-wrap
     lets it break anywhere as a last resort; min-width:0 is needed too,
     since a flex item's *default* minimum size is its content's unbroken
     width regardless of overflow-wrap, unless something also allows it to
     shrink below that. */
  overflow-wrap: anywhere;
}
.da-list li > * { min-width: 0; }
.da-list li:last-child { border-bottom: none; }
.da-list a { text-decoration: none; }
.da-num { font-weight: 700; }

.mini-course-list { list-style: none; padding: 0; margin: 0 0 .75rem; }
.mini-course-list li { padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.mini-course-list li:last-child { border-bottom: none; }
.mini-course-list a { text-decoration: none; color: var(--ink); display: flex; align-items: center; }
.mini-course-list a:hover { color: var(--accent); }

.btn-quiet {
  padding: .4rem .7rem;
  min-height: 0;
  font-size: .85rem;
  font-weight: 600;
}

/* ---- Top app bar with universal search ---- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr minmax(0, 540px) 1fr;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(6px);
}
@media (min-width: 960px) { .appbar { padding: .7rem 2.25rem; } }
.appbar-help {
  display: inline-flex; align-items: center; justify-content: flex-start;
  color: var(--muted); border-radius: 8px; width: 2rem; height: 2rem;
}
.appbar-help:hover { color: var(--text); background: var(--surface-2, #eee); }
.appbar-help .icon { width: 1.15rem; height: 1.15rem; }
/* Mobile: search + bell share one row (grid-template-columns has only two
   tracks — 1fr for search, auto for the bell), so the Help icon has to go
   or it becomes an unplaced third item that wraps onto its own row below.
   This has to come *after* the unconditional .appbar-help rule above: same
   specificity either way, so being inside a @media block doesn't help it
   win against a same-specificity rule that simply comes later in the file —
   only source order decides that tie, which is exactly how this broke the
   first time (this block used to sit above, and silently lost). */
@media (max-width: 959px) {
  .appbar { position: static; grid-template-columns: 1fr auto; }
  .appbar-help { display: none; }
}

/* ---- Help guide ---- */
.help-group { margin-bottom: 1.5rem; }
.help-group h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 .5rem; }
.help-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.help-list a { display: block; padding: .8rem 1rem; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; background: var(--surface, #fff); }
.help-list a:hover { border-color: var(--accent, #888); }
.help-list strong { display: block; }
.help-list .muted { font-size: .88rem; }
.help-layout { display: grid; gap: 1.5rem; }
.help-article h1 { margin-top: 0; }
.help-article h2 { margin-top: 1.6rem; }
.help-nav { font-size: .9rem; }
.help-nav-cat { text-transform: uppercase; letter-spacing: .04em; font-size: .78rem;
  color: var(--muted); margin: 1rem 0 .3rem; }
.help-nav ul { list-style: none; padding: 0; margin: 0; }
.help-nav li { padding: .2rem 0; }
.help-nav li.is-current a { font-weight: 700; }
@media (min-width: 900px) {
  .help-layout { grid-template-columns: 1fr 15rem; align-items: start; }
  .help-nav { order: 2; position: sticky; top: 5rem; }
}

/* notification bell */
.bell-wrap { position: relative; justify-self: end; }
.bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.bell:hover { background: #efece3; }
.bell svg { width: 19px; height: 19px; }
.bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.bell-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(360px, 88vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 40;
}
.bell-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: .9rem;
}
.bell-menu__head button {
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.bell-menu__list { max-height: min(60vh, 420px); overflow-y: auto; }
.bell-item {
  display: block;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-size: .88rem;
}
.bell-item:last-child { border-bottom: 0; }
.bell-item:hover { background: var(--mint-100); }
.bell-item.is-unread { background: color-mix(in srgb, var(--mint-100) 60%, transparent); }
.bell-item time { display: block; color: var(--ink-soft); font-size: .78rem; margin-top: .15rem; }
.bell-menu__foot { padding: .55rem .8rem; text-align: center; border-top: 1px solid var(--line); }
.bell-menu__foot a { font-size: .84rem; text-decoration: none; }
.bell-empty { padding: 1.2rem .8rem; text-align: center; color: var(--ink-soft); font-size: .88rem; }

/* notifications page */
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { border-bottom: 1px solid var(--line); }
.notif-list li:last-child { border-bottom: 0; }
.notif-list a {
  display: flex;
  gap: .7rem;
  padding: .85rem 1rem;
  text-decoration: none;
  color: var(--ink);
}
.notif-list a:hover { background: var(--mint-100); }
.notif-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: .5rem; background: transparent; }
.notif-list li.is-unread .notif-dot { background: var(--accent); }
.notif-body { min-width: 0; }
.notif-body time { display: block; font-size: .8rem; margin-top: .15rem; }
.appsearch {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  max-width: 540px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .9rem;
}
.appsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(14, 89, 148, .12); }
.appsearch svg { width: 17px; height: 17px; color: var(--ink-soft); flex: none; }
.appsearch input {
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  width: 100%;
  color: var(--ink);
}
.appsearch-wrap { position: relative; width: 100%; max-width: 540px; }
.appsearch-wrap .appsearch { max-width: none; }
.ac-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .3rem;
  z-index: 40;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.ac-group {
  padding: .4rem .6rem .2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ac-item {
  display: block;
  padding: .45rem .6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
}
.ac-item small { display: block; color: var(--ink-soft); font-size: .8rem; }
.ac-item:hover,
.ac-item.is-active { background: var(--mint-100); }
.ac-empty { padding: .6rem; color: var(--ink-soft); font-size: .9rem; }

/* @mention autocomplete dropdown in the discussion rich-text editor. Appended
   to <body> (not inside .rte) and positioned by JS, because .rte now clips
   its contents with overflow:hidden for the toolbar/editor border seam —
   a child dropdown would be cut off at the box's edge. Reuses .ac-item /
   .ac-empty from the search box above; only the menu shell differs. */
.mention-menu {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .3rem;
  z-index: 60;
  min-width: 200px;
  max-width: 320px;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}
.mention-menu[hidden] { display: none; }
.mention-menu .ac-item { cursor: pointer; }

/* A person's name rendered as a link (discussion byline, announcement
   author) but styled to disappear into the surrounding text until you
   interact with it — the hover card + profile link are a bonus, not a
   "this is a link" shout. */
.person-link { color: inherit; text-decoration: none; }
.person-link:hover, .person-link:focus-visible { text-decoration: underline; }

/* A link that keeps its accent colour (so it still reads as a link at a
   glance) but drops the default underline until hover/focus — for a link
   that's the whole point of its row (a "See all" trailer, a list item)
   rather than a word inline in a sentence, where an underline earns its
   keep as a "there's more here" cue. */
.quiet-link { text-decoration: none; }
.quiet-link:hover, .quiet-link:focus-visible { text-decoration: underline; }

/* Hover card for any a[href^="/people/"] — an @mention, a byline, a search
   result. Appended to <body> and positioned by JS, same reasoning as
   .mention-menu above. GET /people/<id>/card backs it. */
.person-card {
  position: absolute;
  z-index: 70;
  width: 250px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: .8rem .9rem;
}
.person-card[hidden] { display: none; }
.person-card__top { display: flex; gap: .6rem; align-items: center; }
.person-card__avatar {
  flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 50%; overflow: hidden;
}
.person-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-card__avatar span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--course, #4a6a5f); color: #fff;
  font-weight: 600; font-size: .9rem;
}
.person-card__name { font-weight: 700; font-size: .92rem; line-height: 1.25; }
.person-card__headline { color: var(--ink-soft); font-size: .78rem; margin-top: .1rem; }
.person-card__bio {
  margin: .6rem 0 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.4;
}
.person-card__link {
  display: inline-block; margin-top: .6rem;
  font-size: .8rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.person-card__link:hover { text-decoration: underline; }

/* ---- Calendar ---- */
.cal-monthbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
}
.cal-monthbar strong { font-size: 1.05rem; }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-head {
  background: var(--card);
  padding: .4rem .5rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  text-align: center;
}
.cal-cell {
  background: var(--card);
  min-height: 96px;
  padding: .3rem .35rem .4rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-cell.cal-out { background: var(--bg); }
.cal-cell.cal-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-daynum { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.cal-today .cal-daynum { color: var(--accent); }
.cal-chip {
  display: block;
  font-size: .74rem;
  line-height: 1.25;
  padding: .1rem .35rem;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  background: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-chip .cal-t { opacity: .8; font-variant-numeric: tabular-nums; }
.cal-chip .muted { color: rgba(255, 255, 255, .75); }
.cal-due     { background: var(--danger); }
.cal-lecture { background: var(--accent); }
.cal-key_date{ background: #7a4326; }
.cal-personal{ background: var(--navy); }
@media (max-width: 640px) {
  .cal-cell { min-height: 64px; }
  .cal-chip { font-size: .68rem; }
}

/* ---- Course cards ---- */
.course-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .course-grid { grid-template-columns: repeat(3, 1fr); } }

.course-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.course-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 24, 40, .12); }
.course-card__banner {
  height: 96px;
  background: var(--course, var(--accent));
  display: flex;
  align-items: flex-end;
  padding: .7rem .9rem;
}
.course-card__code {
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  background: rgba(0, 0, 0, .22);
  padding: .15rem .5rem;
  border-radius: 6px;
}
.course-card__body { padding: .9rem 1rem 1.1rem; }
.course-card__body h2 { font-size: 1rem; margin-bottom: .25rem; }
.course-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

.role-badge {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: capitalize;
  background: #efece3;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.role-teacher { background: var(--info-bg); color: var(--info); border-color: #bcd4e6; }

.eng {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; border: 1px solid transparent;
}
.eng--high { background: #e3f0e6; color: #1f6b3a; border-color: #bfe0c8; }
.eng--medium { background: #fbf0d8; color: #8a5a12; border-color: #f0dcae; }
.eng--low { background: #f7e0dd; color: #a3352c; border-color: #eec4bf; }
.eng--none { background: var(--surface-2, #f0f0f0); color: var(--muted); border-color: var(--line); }
.role-student { background: var(--ok-bg); color: var(--ok); border-color: #c2e0c9; }

.eng-key { margin: .3rem 0 .8rem; display: grid; gap: .3rem; }
.eng-key > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; align-items: baseline; }
.eng-key dt { margin: 0; }
.eng-key dd { margin: 0; font-size: .85rem; color: var(--muted); }

.course-hero {
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  background: var(--course, var(--accent));
  color: #fff;
  margin-bottom: 1.5rem;
}
.course-hero__code {
  display: inline-block;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  background: rgba(0, 0, 0, .22);
  padding: .15rem .55rem;
  border-radius: 6px;
  margin-bottom: .5rem;
}
.course-hero h1 { color: #fff; margin: 0 0 .3rem; }
.course-hero p { margin: 0; opacity: .9; font-size: .9rem; }

/* ---- Breadcrumb ---- */
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: .75rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { margin: 0 .4rem; opacity: .55; }

/* ---- In-course nav ---- */
/* A staff member can see up to six tabs (Content/Assessments/Needs marking/
   Gradebook/Discussion/Insights) — plain flex has nowhere to put the
   overflow on a phone, so items either got clipped past the viewport edge
   or (since flex items shrink below their content width before wrapping)
   had their own label wrap onto two lines, e.g. "Needs marking" breaking
   mid-row. Scroll horizontally instead: nothing shrinks or wraps, and a
   tab bar swiping sideways is a familiar enough mobile pattern on its own
   that it doesn't need its own visible scrollbar to read as scrollable. */
.course-nav {
  display: flex;
  gap: .25rem;
  margin: -0.5rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.course-nav::-webkit-scrollbar { display: none; }
.course-nav a {
  padding: .6rem .9rem;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .92rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: none;
}
.course-nav a:hover { color: var(--ink); }
.course-nav a.active { color: var(--accent); border-bottom-color: var(--accent); }

.cat-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.cat-row:last-of-type { border-bottom: none; }
.cat-edit { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cat-edit input[type="text"] { max-width: 12rem; }

/* ---- Rubrics ---- */
.rubric-grid { display: flex; flex-direction: column; gap: .9rem; }
.rubric-crit {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem .9rem;
}
.rubric-crit__head { margin-bottom: .5rem; }
.rubric-levels { display: flex; flex-wrap: wrap; gap: .5rem; }
.rubric-level {
  flex: 1 1 9rem;
  min-width: 9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .6rem;
  font-size: .88rem;
}
.rubric-level__pts {
  display: inline-block;
  background: #efece3;
  color: var(--ink-soft);
  font-weight: 700;
  border-radius: 6px;
  padding: 0 .4rem;
  margin-bottom: .2rem;
}

/* builder */
.crit .crit-title { font-weight: 600; max-width: 22rem; }
.crit .crit-desc { width: 100%; }
.lvl { flex: 1 1 12rem; min-width: 11rem; }
.lvl-row { display: flex; gap: .4rem; align-items: center; }
.lvl-row .lvl-title { flex: 1; }
.lvl-row .lvl-points { width: 4.5rem; }
.lvl .lvl-desc { width: 100%; margin-top: .3rem; font-size: .85rem; }
.rubric-level.is-picked, .lvl.is-picked { outline: 2px solid var(--accent); border-radius: 8px; }

/* grading grid */
.grade-grid fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .8rem .9rem;
  margin: 0 0 .9rem;
}
.grade-grid legend { padding: 0 .3rem; }
.grade-grid .rubric-level { cursor: pointer; display: block; }
.grade-grid .rubric-level input[type="radio"] { position: absolute; opacity: 0; }
.grade-grid .rubric-level:hover { border-color: var(--accent); }

.grade-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .8rem;
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .9rem;
}
.grade-nav a { text-decoration: none; font-weight: 600; }

/* student assessment task list */
.task-list { list-style: none; padding: 0; margin: 0; }
.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: .6rem;
}
.task__title { font-weight: 600; text-decoration: none; color: var(--ink); }
.task__title:hover { color: var(--accent); }
.task__meta { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .15rem; }
.task__due.due-soon { color: var(--info); font-weight: 600; }
.task__due.overdue { color: var(--danger); font-weight: 600; }
.task__due.closed { color: var(--ink-soft); }
.task__status {
  font-size: .82rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
  background: #efece3;
  color: var(--ink-soft);
}
.task__status.status-ok { background: var(--ok-bg); color: var(--ok); }
.task__status.status-sub { background: var(--info-bg); color: var(--info); }
.task__status.status-muted { background: transparent; color: var(--ink-soft); font-weight: 500; }

/* gradebook */
.gradebook th, .gradebook td { white-space: normal; vertical-align: top; }
.gradebook th { min-width: 5.5rem; }
.gradebook td:first-child, .gradebook th:first-child {
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 1px 0 0 var(--line);
}
.gradebook td:first-child { background: var(--card); }
.gradebook th:first-child { background: #efece3; }
.gradebook .gb-final { font-weight: 700; background: #eef3ea; }
.gradebook .gb-draft { font-style: italic; color: var(--ink-soft); }

/* ---- Course content ---- */
.editbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  background: var(--info-bg);
  border: 1px solid #bcd4e6;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: .88rem;
}
.module {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.module-head h2 { margin: 0; display: flex; align-items: center; gap: .5rem; }

.item-list { list-style: none; padding: 0; margin: .6rem 0 0; }
.item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .5rem 0;
  border-top: 1px solid var(--line);
}
.item-list .item-row:first-child { border-top: none; }
.item-link { text-decoration: none; color: var(--ink); font-weight: 600; }
.item-link:hover { color: var(--accent); }
.item-heading {
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: .78rem; color: var(--ink-soft); padding-top: .9rem;
}
.item-due {
  font-size: .78rem; color: var(--info); font-weight: 600;
  white-space: nowrap;
}
.item-kind {
  display: inline-block;
  min-width: 3.2rem;
  margin-right: .6rem;
  padding: .05rem .45rem;
  border-radius: 6px;
  background: #efece3;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}
.rowbtns { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.inline-form { display: inline; }
.linkbtn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .2rem .5rem;
  font: inherit;
  font-size: .8rem;
  color: var(--ink-soft);
  cursor: pointer;
  min-height: 0;
}
.linkbtn:hover { background: #efece3; color: var(--ink); }
.add-item { margin-top: .7rem; font-size: .85rem; color: var(--ink-soft); }
.add-item a { margin-left: .5rem; }

.prose { line-height: 1.65; }
.prose h1, .prose h2, .prose h3 { margin: 1.2em 0 .4em; }
.prose h1:first-child, .prose h2:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose pre, .prose table { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose code {
  background: #efece3;
  padding: .1em .35em;
  border-radius: 4px;
  font-size: .92em;
}
.prose pre {
  background: var(--verde-900);
  color: #e8efe4;
  padding: .9rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose table { border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--line); padding: .4rem .6rem; }
.prose blockquote {
  margin: 0 0 1em;
  padding-left: 1rem;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}
.prose-tight { line-height: 1.5; }
.prose-tight p:last-child, .prose-tight ul:last-child, .prose-tight ol:last-child { margin-bottom: 0; }

/* ---- Rich text editor (Quill) ---- */
/* Quill's Snow theme renders the toolbar as a sibling *before* the editor
   container, not a child of it — `.rte` (below) is the class we hand to
   `new Quill()`, and Quill turns that very element into `.ql-container`
   itself rather than nesting a container inside it. So the toolbar can't be
   reached with a `.rte .ql-toolbar` descendant selector (there's no such
   descendant); app.js instead tags the toolbar element it creates with
   `.rte-toolbar` directly, and wraps both in a real `.rte-wrap` div — most
   `[data-rich]` textareas live inside a `<label>`, and `label`'s own
   `display:flex; gap:.35rem` (for stacking a field's label above its input)
   would otherwise land squarely *between* the toolbar and the editor too,
   since both would be direct flex children of the label. The wrap keeps
   that gap outside the control, and the two pieces read as one connected
   box by rounding only the outer corners — square top on the container,
   square bottom on the toolbar — rather than each rounding all four of its
   own corners, which is what read as "not connecting properly". */
.rte-wrap {
  margin-bottom: .2rem;
}
/* Vendor CSS's own `.ql-container.ql-snow{border:1px solid #ccc}` carries
   two classes (specificity 0,2,0) — a plain `.rte{border:...}` (0,1,0) loses
   to it on every side but top (which a *more* specific vendor rule already
   zeroes, see above). Matching all three classes here beats it outright. */
.rte.ql-container.ql-snow {
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: var(--card);
  font: inherit;
}
.rte-toolbar.ql-toolbar.ql-snow {
  border: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  background: var(--surface-2, #faf8f2);
}
.rte .ql-editor { min-height: 8rem; font-size: .95rem; line-height: 1.6; }
.rte .ql-editor.ql-blank::before { color: var(--ink-soft); font-style: normal; left: 15px; }
/* Toolbar icon colours — same fix as above: these were written as `.rte
   .ql-snow ...` descendant selectors, but the icons live in the toolbar
   (`.rte-toolbar`), a sibling of `.rte`, not a descendant of it, so they
   never matched and every icon has been Quill's default grey/hover-blue. */
.rte-toolbar .ql-stroke { stroke: var(--ink-soft); }
.rte-toolbar .ql-fill { fill: var(--ink-soft); }
.rte-toolbar button:hover .ql-stroke,
.rte-toolbar button.ql-active .ql-stroke { stroke: var(--verde-900, #182d2b); }

.embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- Discussion board ---- */
.disc-list { list-style: none; padding: 0; margin: 0; }
.disc-row {
  padding: .8rem 1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; margin-bottom: .6rem;
}
.disc-row__title { font-weight: 500; text-decoration: none; color: var(--ink); }
.disc-row__title:hover { color: var(--accent); }
.disc-row.is-unread .disc-row__title { font-weight: 700; }
.disc-row__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-right: .3rem; vertical-align: middle;
}
.disc-row__meta { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .15rem; }
.disc-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: .05rem .4rem; border-radius: 999px;
  background: var(--surface-2, #eee); color: var(--ink-soft); margin-left: .35rem;
  vertical-align: middle;
}
.disc-mod { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.disc-post { margin-bottom: .8rem; }
.disc-post__by { font-size: .9rem; margin-bottom: .35rem; }
.disc-post__by time { margin-left: .4rem; }
.disc-post__act {
  margin-top: .6rem; display: flex; align-items: center; gap: .5rem;
}
.disc-like {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .65rem; font: inherit; font-size: .82rem;
  color: var(--ink-soft); cursor: pointer;
}
.disc-like:hover { border-color: var(--accent); color: var(--ink); }
.disc-like.is-liked {
  background: var(--info-bg, #e4eef6); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.disc-like__n { font-weight: 700; }
.disc-like--sm { padding: .05rem .5rem; font-size: .78rem; }
.disc-edited { margin-left: .4rem; }

/* Icon-only actions (a discussion post's like/reply/edit/delete row, an
   admin's per-row or per-record actions) — condensed to a small round
   button so a row of them doesn't read as noisy. Text labels move to a
   title/aria-label. .disc-icon is kept as the original, discussion-specific
   name; .icon-btn is the same look for everywhere else. */
.disc-icon, .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .2rem; min-width: 2.1rem; height: 2rem; padding: 0 .5rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-soft); font-size: .95rem; line-height: 1; cursor: pointer;
}
.disc-icon:hover, .icon-btn:hover { border-color: var(--accent); color: var(--ink); }
.disc-icon.is-liked {
  background: var(--info-bg, #e4eef6); border-color: var(--accent);
  color: var(--accent);
}
.disc-icon.is-danger:hover, .icon-btn.is-danger:hover { border-color: var(--danger); color: var(--danger); }
.disc-icon__n { font-size: .78rem; font-weight: 700; }

/* A labelled cluster of icon-btns, e.g. a person's account actions. */
.icon-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.icon-btn-row__label { font-size: .8rem; color: var(--ink-soft); margin-right: .1rem; }
/* A visually set-off cluster for irreversible actions (archive/delete) —
   the icon + confirm dialog are already a safety net; this is about making
   "you're now in the risky part of the page" obvious at a glance too. */
.danger-zone {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .7rem; padding: .6rem .7rem;
  background: var(--danger-bg); border-radius: 10px;
}

/* "Liked by" avatar cascade beside the Like button — a stack of overlapping
   circles (first three likers, then a +N bubble), title attribute carries
   the "Grace Mwangi, Laura Thompson and 3 others liked this" summary so it
   shows as the native tooltip on hover. Purely a display, not a control —
   the Like button beside it is still the only click target. */
.like-wrap { display: inline-flex; align-items: center; gap: .3rem; }
.like-avatars { display: inline-flex; align-items: center; }
.like-avatars__item {
  width: 22px; height: 22px; margin-left: -8px;
  border-radius: 50%; border: 2px solid var(--card);
  overflow: hidden; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--course, #4a6a5f); color: #fff;
  font-size: .6rem; font-weight: 700;
}
.like-avatars__item:first-child { margin-left: 0; }
.like-avatars__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.like-avatars__more { background: var(--surface-2, #eee); color: var(--ink-soft); }

.disc-editbox { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line); }
.disc-editbox[hidden] { display: none; }   /* .stack's display:flex would otherwise win */
.disc-replies-h { margin: 1.4rem 0 .6rem; }
.disc-poll-add summary { cursor: pointer; font-weight: 600; }
.disc-pollcard h3 { margin-top: 0; }
.disc-pollform .check { display: block; margin: .3rem 0; }
.disc-pollresults { list-style: none; padding: 0; margin: .4rem 0; }
.disc-pollresults li { margin-bottom: .55rem; }
.disc-pollresults__row { display: flex; justify-content: space-between; font-size: .9rem; }
.disc-pollbar {
  height: 8px; border-radius: 999px; background: var(--surface-2, #eee);
  overflow: hidden; margin-top: .2rem;
}
.disc-pollbar span { display: block; height: 100%; background: var(--accent); }

/* discussion attachments + lightbox */
.disc-fileadd { display: block; }
.disc-fileadd input[type="file"] { display: block; margin-top: .3rem; }

/* Native file inputs render an unstyled OS button everywhere in the app;
   restyle just the button part (the "no file chosen" text stays native —
   there's no cross-browser way to touch that without JS). */
input[type="file"] {
  font: inherit; font-size: .88rem; color: var(--ink-soft);
}
input[type="file"]::file-selector-button {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: .7rem; padding: .5rem 1rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600;
  font-size: .85rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: #efece3; }
.disc-attach { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.disc-att { position: relative; }
.disc-thumb {
  display: block; width: 120px; height: 120px; border-radius: 8px;
  overflow: hidden; border: 1px solid var(--line); background: var(--surface-2, #eee);
}
.disc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disc-file {
  display: inline-block; font-size: .88rem; padding: .35rem .6rem;
  border: 1px solid var(--line); border-radius: 8px; text-decoration: none;
  color: var(--ink); background: var(--card);
}
.disc-file:hover { border-color: var(--accent); }
.disc-att__x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink-soft); font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
}
.disc-att__x:hover { color: var(--danger); }
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex; padding: 2rem;
  align-items: center; justify-content: center; cursor: zoom-out;
  background: rgba(0, 0, 0, .85);
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* @mentions in discussion prose */
.prose a[href^="/people/"] {
  font-weight: 600; text-decoration: none;
  background: var(--info-bg, #e6eef5); color: var(--info, #2b5c8a);
  padding: 0 .25rem; border-radius: 4px;
}