/* Academic arm — portal stylesheet (Academic arm, Wave 1).
 *
 * Loaded ONLY by academic.html, AFTER main.css. The arm is a full re-skin, so
 * this file (a) redefines the core token VALUES for the A&M palette and (b)
 * lays out the portal chrome (header band, cards, dense tables, rail) that
 * main.css has no equivalent for.
 *
 * DUAL THEME (Steven's 2026-07-26 ruling, supersedes the recon's light-only
 * recommendation). Two palettes swapped at the SAME seam the recon identified
 * — a root attribute — mirroring CC's existing [data-theme] token-override
 * mechanism (main.css :root vs [data-theme="light"]):
 *
 *   [data-acad-theme="cc"]  (default) — the Command Center dark look. Core
 *       tokens come straight from main.css :root (dark bg, blue/red accents).
 *       This is what Steven uses by default everywhere.
 *   [data-acad-theme="am"]            — Aggie Maroon #500000 on white. Maroon
 *       header band, white cards on a light neutral field, dense tables.
 *
 * Because academic.css is never linked by the ops cockpit, even the A&M token
 * block cannot leak into CC. The maroon override is additionally keyed on the
 * arm attribute so a future accidental co-load still can't reach the cockpit.
 *
 * A&M SCALE IS DERIVED, NOT OFFICIAL. Maroon #500000 is certain; every other
 * hex below is a working scale for the Howdy/portal feel and is PENDING
 * Steven's confirmation against official Texas A&M brand guidance.
 */

/* --- Portal chrome tokens (default = CC-dark) ------------------------------ */
:root {
  --acad-header-bg: var(--panel, #161b22);
  --acad-header-text: var(--text, #c9d1d9);
  --acad-header-border: var(--border, #30363d);
  --acad-card-bg: var(--panel, #161b22);
  --acad-border-strong: var(--border, #30363d);
  --acad-radius: 8px;
  --acad-row-hover: rgba(255, 255, 255, 0.05);
  --acad-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px var(--border, #30363d);
  --acad-focus-ring: rgba(88, 166, 255, 0.4);
  --acad-warn: #d9a521;
  --acad-success: #6cbf73;
  --acad-danger: var(--danger, #f85149);

  /* Head-band controls: pills/tabs that sit ON a panel-head band (the semester
     tabs are the case). Foreground derives from the HEAD's own text token, not
     the body --text. In CC-dark the head is transparent over the dark card, so
     --acad-panel-head-text is unset and this falls back to the (light) body text
     — readable. In A&M the head is maroon and --acad-panel-head-text is white, so
     these resolve to white — which is the fix for the "black on dark red"
     unreadable-inactive-tab bug (a near-black pill on the maroon band, ~1.1:1).
     The active pill is inverted in A&M (cream fill + maroon text) so the current
     tab pops off the maroon band and is unmistakable against the white inactives. */
  --acad-headctl-fg: var(--acad-panel-head-text, var(--text));
  --acad-headctl-border: color-mix(in srgb, var(--acad-panel-head-text, var(--text)) 42%, transparent);
  --acad-headctl-active-bg: var(--accent);
  --acad-headctl-active-fg: #fff;
  --acad-headctl-active-border: var(--accent);
}

/* --- A&M palette override (maroon on white) -------------------------------- */
html[data-acad-theme="am"] {
  /* Core tokens — reusing the EXISTING names is what re-skins every reused
     main.css component (windows, buttons, tables) for free.
     Task #793 (2026-08-04): softened the whites — the field and card fills were
     pure/near-pure white and read as glary ("a lot of white"). Fills dropped to
     a warm cream and the field to a warm greige so the surface reads calmer
     while the Aggie Maroon identity is untouched. */
  --bg: #e7e1d8;          /* warm greige field (was #f5f4f2 — brighter) */
  --panel: #f7f3ee;       /* soft cream content cards (was pure #ffffff) */
  --panel-bg: #f7f3ee;
  --border: #d8d2c9;      /* hairline card + table borders (a touch stronger) */
  --text: #201a1a;        /* near-black, faintly warm */
  --text-muted: #6b6560;
  --accent: #500000;      /* Aggie Maroon — primary action + links */
  --danger: #b3261e;
  --error: #b3261e;

  /* Portal chrome */
  --acad-header-bg: #500000;
  --acad-header-text: #ffffff;
  --acad-header-border: #3d0000;
  --acad-card-bg: #f7f3ee;   /* match --panel (was pure white) */
  --acad-border-strong: #cfc9c2;
  --acad-row-hover: rgba(80, 0, 0, 0.05);
  --acad-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--border);
  --acad-focus-ring: rgba(80, 0, 0, 0.35);
  --acad-warn: #a86500;
  --acad-success: #2e7d32;
  --acad-danger: #b3261e;

  /* Task #793: each panel/tab header is maroon (was white — the source of the
     "lot of white"). Default (CC-dark) leaves the head token unset so it stays
     transparent over the dark card. */
  --acad-panel-head-bg: #500000;
  --acad-panel-head-text: #ffffff;
  --acad-panel-head-border: #3d0000;

  /* Inverted active head control so the current semester tab is legible AND
     separated from the maroon band (white-text inactives vs cream-fill/maroon
     active). Inactive fg/border resolve to white via --acad-panel-head-text. */
  --acad-headctl-active-bg: #f7f3ee;
  --acad-headctl-active-fg: #500000;
  --acad-headctl-active-border: #f7f3ee;
}

/* --- Page skeleton -------------------------------------------------------- */
html, body { height: 100%; margin: 0; }
body.acad-body-page {
  background: var(--bg, #0e1116);
  color: var(--text, #e6e6e6);
  font-family: var(--font-sans, system-ui, sans-serif);
  display: flex;
  flex-direction: column;
}

/* --- Header band ---------------------------------------------------------- */
.acad-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--acad-header-bg);
  color: var(--acad-header-text);
  border-bottom: 1px solid var(--acad-header-border);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.acad-title { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; }
.acad-sub { font-size: 12px; opacity: 0.72; }
.acad-header-spacer { flex: 1 1 auto; }

/* Back-to-Command-Center control — same affordance as finance's .fin-back,
   restyled onto the (maroon in A&M) header band. A real anchor: middle-click /
   ctrl-click open a tabbable browser tab; href="./" resolves to the CC root via
   the injected <base href>. */
.acad-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--acad-header-text);
  border: 1px solid color-mix(in srgb, var(--acad-header-text) 45%, transparent);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.acad-back:hover { background: color-mix(in srgb, var(--acad-header-text) 14%, transparent); }

.acad-theme-toggle {
  color: var(--acad-header-text);
  border: 1px solid color-mix(in srgb, var(--acad-header-text) 45%, transparent);
  background: transparent;
  white-space: nowrap;
}
.acad-theme-toggle:hover { background: color-mix(in srgb, var(--acad-header-text) 14%, transparent); }

.acad-version {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--acad-header-text);
  opacity: 0.72;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.acad-version:hover { opacity: 1; }

/* --- Body + panels -------------------------------------------------------- */
.acad-body {
  flex: 1 1 auto;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px 18px 28px;
  align-items: start;
}
.acad-panel {
  border: 1px solid var(--border, #2a2a2a);
  border-radius: var(--acad-radius);
  background: var(--acad-card-bg);
  box-shadow: var(--acad-shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.acad-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  /* Task #793: head is maroon in A&M (token set), transparent/inherited in
     CC-dark (token unset → falls back). border-top-radius so the maroon band
     follows the card's rounded top corners. */
  background: var(--acad-panel-head-bg, transparent);
  color: var(--acad-panel-head-text, inherit);
  border-bottom: 1px solid var(--acad-panel-head-border, var(--border, #262626));
  border-top-left-radius: var(--acad-radius);
  border-top-right-radius: var(--acad-radius);
  flex-wrap: wrap;
}
.acad-panel-title { font-size: 14px; font-weight: 600; color: inherit; }
.acad-panel-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acad-panel-body { padding: 12px 14px 14px; flex: 1 1 auto; overflow: auto; }
.acad-muted { opacity: 0.62; font-size: 12px; }

/* Windowing: the in-window dock (⤢) glyph is hidden — the left rail is the
   hide/re-open path (same discipline as finance). Collapse (▾) stays. */
.acad-panel .window-popout-btn { display: none; }
.acad-panel.window-floating { min-height: 0; background: var(--acad-card-bg); }
.acad-panel.window-floating > .acad-panel-body { display: flex; flex-direction: column; min-height: 0; }

/* --- Dense information tables --------------------------------------------- */
.acad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.acad-table th, .acad-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.acad-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--acad-border-strong);
  position: sticky;
  top: 0;
  background: var(--acad-card-bg);
  z-index: 1;
}
.acad-table tbody tr:hover { background: var(--acad-row-hover); }
.acad-row-clickable { cursor: pointer; }

/* --- Term / course selectors --------------------------------------------- */
.acad-term-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.acad-term-btn {
  /* Head-band control: foreground/border derive from the panel-head text token
     (white on the A&M maroon band, light on CC-dark) — NOT the near-black body
     --text, which was the "black on dark red" unreadable-inactive-tab bug. */
  border: 1px solid var(--acad-headctl-border);
  background: transparent;
  color: var(--acad-headctl-fg);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.acad-term-btn:hover { border-color: var(--acad-headctl-fg); }
.acad-term-btn[aria-pressed="true"] {
  background: var(--acad-headctl-active-bg);
  color: var(--acad-headctl-active-fg);
  border-color: var(--acad-headctl-active-border);
  font-weight: 600;
}
.acad-term-meta { font-size: 11px; color: var(--text-muted); }

.acad-crumbs { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.acad-crumbs a { color: var(--accent); cursor: pointer; text-decoration: none; }
.acad-crumbs a:hover { text-decoration: underline; }

.acad-code { font-weight: 600; white-space: nowrap; }

/* --- Confidence surfacing (honest uncertainty) ---------------------------- */
/* high = confident, rendered plainly; medium = amber; low = LOOKS uncertain
   (dashed outline + warning tint + an explicit label) so a low-confidence
   course assignment never reads silently as fact. */
.acad-conf {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.acad-conf-high { color: var(--acad-success); border-color: color-mix(in srgb, var(--acad-success) 45%, transparent); }
.acad-conf-medium { color: var(--acad-warn); border-color: color-mix(in srgb, var(--acad-warn) 55%, transparent); }
.acad-conf-low {
  color: var(--acad-danger);
  border-style: dashed;
  border-color: var(--acad-danger);
  background: color-mix(in srgb, var(--acad-danger) 8%, transparent);
}
/* A whole row/card whose course assignment is low-confidence gets a dashed
   left edge so uncertainty is visible at a glance, not only in the badge. */
.acad-uncertain { border-left: 3px dashed var(--acad-danger); }

/* A null title is "unknown, ask Steven" — never blank, never "Unknown". */
.acad-null-title {
  font-style: italic;
  color: var(--acad-danger);
}

/* --- Artifact groups (course detail) ------------------------------------- */
.acad-artgroup { margin-top: 14px; }
.acad-artgroup-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: capitalize;
  margin-bottom: 4px;
}
.acad-artgroup-count { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.acad-badge {
  display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 3px;
  border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.acad-badge-designated {
  color: var(--acad-success);
  border-color: color-mix(in srgb, var(--acad-success) 55%, transparent);
}

/* --- "Needs a decision" prompts ------------------------------------------ */
.acad-prompt {
  border: 1px solid var(--acad-border-strong);
  border-left: 3px solid var(--acad-warn);
  border-radius: var(--acad-radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--acad-warn) 5%, transparent);
}
.acad-prompt-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.acad-prompt-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.acad-prompt-q { font-size: 12px; margin-bottom: 8px; }
.acad-prompt-members { max-height: 240px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.acad-member-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; }
.acad-member-row:hover { background: var(--acad-row-hover); }
.acad-member-row input[type="radio"] { margin: 0; }
.acad-member-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-member-vlabel { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.acad-intent-note {
  margin-top: 8px; font-size: 11px; color: var(--acad-warn); font-weight: 600;
}
.acad-prompt-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.acad-prompt-saved { font-size: 11px; color: var(--acad-success); }

/* "Could not determine resolution state" — the THIRD outcome (distinct from the
   amber "needs a decision" prompt and the muted "nothing unresolved"). A solid
   danger edge + danger-tinted field so an unknown never reads as resolved. */
.acad-prompt-undetermined {
  border-left-color: var(--acad-danger);
  background: color-mix(in srgb, var(--acad-danger) 6%, transparent);
}
.acad-prompt-undetermined .acad-prompt-title { color: var(--acad-danger); }

/* --- Search -------------------------------------------------------------- */
.acad-search-summary { font-size: 12px; color: var(--text-muted); margin: 8px 0; }

/* --- Native form controls (contrast pass, both palettes) ------------------
   The shared filter bar (finance_filter.js) styles its select/input with
   `color: inherit` and a bare `--input-bg` fallback (#2a2a2a) that is undefined
   arm-wide, so the A&M palette rendered near-black text on dark gray and CC-dark
   leaned on inheritance the native <select> does not reliably honor (unreadable
   dropdowns, 2026-07-26). Pin an explicit fg/bg (and the option popup) from the
   already-themed core tokens so BOTH palettes stay readable. `body.acad-body-page`
   outranks the injected `.ff-bar select` rule so this wins regardless of the
   runtime <style> injection order. Radio/checkbox excluded (they are styled by
   the prompt UI). Contrast pass only, not a restyle.
     CC-dark: text var(--text) #c9d1d9 on bg var(--bg) #0e1116  (~13.6:1)
     A&M:     text var(--text) #201a1a on bg var(--bg) #f5f4f2  (~15:1) */
body.acad-body-page select,
body.acad-body-page input:not([type="radio"]):not([type="checkbox"]),
body.acad-body-page textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
body.acad-body-page select option {
  background: var(--bg);
  color: var(--text);
}
body.acad-body-page input::placeholder,
body.acad-body-page textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
body.acad-body-page select:focus,
body.acad-body-page input:not([type="radio"]):not([type="checkbox"]):focus,
body.acad-body-page textarea:focus {
  border-color: var(--accent);
  outline: none;
}

/* --- LEFT VERTICAL RAIL (cloned from the finance rail, .acad-body-scoped) -- */
.acad-rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 260;
  width: 248px;
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
  padding-top: 6px;
  background: var(--acad-card-bg);
}
.acad-rail.collapsed { width: 44px; box-shadow: none; }
.acad-rail-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0 6px 4px;
  background: transparent; color: var(--text-muted, #9aa0a6);
  border: 1px solid var(--border, #3a3a3a); border-radius: 6px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.acad-rail-toggle:hover { color: var(--text, #e6e6e6); border-color: var(--accent); }
.acad-rail-tablabel {
  display: none; writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted, #9aa0a6); margin: 6px auto 0; user-select: none;
}
.acad-rail.collapsed .acad-rail-tablabel { display: block; }
.acad-rail .rail-section-header { cursor: pointer; }
.acad-rail-actions { display: flex; gap: 8px; padding: 4px 8px 8px; flex-wrap: wrap; }
.acad-rail .acad-pm-list { list-style: none; margin: 0; padding: 0 4px 8px; }
.acad-rail .acad-pm-row {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 4px;
}
.acad-rail .acad-pm-row:hover { background: var(--acad-row-hover); }
.acad-rail .acad-pm-focus {
  display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0;
  background: none; border: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.acad-rail .acad-pm-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-rail .acad-pm-state { font-size: 11px; opacity: 0.6; white-space: nowrap; }
.acad-rail .acad-pm-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-muted, #9aa0a6);
}
.acad-rail .acad-pm-dot[data-state="open"]      { background: #6cbf73; }
.acad-rail .acad-pm-dot[data-state="minimized"] { background: #d9a521; }
.acad-rail .acad-pm-dot[data-state="hidden"]    { background: #6b7280; }
.acad-rail .acad-pm-toggle { flex: 0 0 auto; }
.acad-rail .btn.btn-xs { padding: 2px 8px; font-size: 11px; line-height: 1.5; }
.acad-rail .acad-pm-empty { opacity: 0.6; padding: 6px; list-style: none; }

/* --- Responsive: single-column stack, no floating rail on mobile --------- */
@media (max-width: 768px) {
  .acad-rail { display: none; }
  /* Task #792 — phone card layout. Every School panel becomes a full-width
     stacked CARD (natural height, no fixed/min heights, inner content scrolls
     horizontally instead of spilling), matching the CC mobile surface's card
     feel. Windowing is already disabled at <=768px (main.css), so panels are
     in-flow; this drops the desktop grid + tile sizing that read as frozen,
     unusable tabs on a phone. */
  .acad-body {
    display: block;                /* single-column card stack, not a grid */
    padding: 10px 10px 28px;
    overflow-x: hidden;
  }
  .acad-panel,
  .acad-panel.window-floating,
  .acad-panel.window-docked {
    position: static !important;
    grid-column: auto !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    left: auto !important; top: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px 0;
    box-shadow: none;
    border-radius: 12px;
  }
  .acad-panel-body { overflow-x: auto; padding: 10px 12px 12px; }
  .acad-panel-head {
    position: sticky; top: 0; z-index: 1;
    /* maroon in A&M (token set), card fill in CC-dark (fallback) so the sticky
       header is never see-through while the card body scrolls under it. */
    background: var(--acad-panel-head-bg, var(--acad-card-bg));
    border-top-left-radius: 12px; border-top-right-radius: 12px;
  }
  .window-resize-handle, .window-action-band { display: none !important; }
  .acad-table { font-size: 12px; }
  .acad-table th, .acad-table td { padding: 5px 7px; }
}

/* ==========================================================================
   Wave 2 -- Calendar, work-unit detail, tools shelf.

   Every colour below resolves through the already-themed core / --acad-* tokens
   (never a raw hex), so a control that is readable in CC-dark is readable in A&M
   maroon-on-white by construction -- a calendar has many small coloured elements
   and is the surface easiest to make unreadable in one palette while it looks
   fine in the other. Native form controls are already pinned per palette by the
   `body.acad-body-page select/input` block above; these rules only add chrome.
   ========================================================================== */

/* --- Calendar (a VIEW over work units) ----------------------------------- */
.acad-cal-table .acad-wu-row td { vertical-align: top; }
.acad-wu-due { width: 190px; white-space: nowrap; }
.acad-wu-due-main { font-weight: 600; }
.acad-wu-due-sub { font-size: 11px; color: var(--text-muted); }
/* A loose (null) due date must never read as a false-precise date. */
.acad-wu-due-loose .acad-wu-due-main { font-style: italic; color: var(--text-muted); font-weight: 500; }
.acad-cal-divider td {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); background: var(--acad-row-hover);
  border-top: 1px solid var(--acad-border-strong); padding: 6px 10px;
}
.acad-wu-title { font-weight: 600; }
.acad-wu-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.acad-wu-type {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 0 5px; border: 1px solid var(--border); border-radius: 3px; color: var(--text-muted);
}
.acad-wu-statecell { white-space: nowrap; }
.acad-wu-rowactions { margin-top: 6px; }
.acad-wu-candidate-note { color: var(--acad-warn); font-weight: 600; }

/* Priority pills. urgent=danger, high=warn, normal=neutral, low=muted. */
.acad-prio {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 1px 7px; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap;
}
.acad-prio-urgent { color: #fff; background: var(--acad-danger); border-color: var(--acad-danger); }
.acad-prio-high { color: var(--acad-warn); border-color: color-mix(in srgb, var(--acad-warn) 55%, transparent); }
.acad-prio-normal { color: var(--text-muted); border-color: var(--border); }
.acad-prio-low { color: var(--text-muted); border-color: var(--border); opacity: 0.8; }

/* Candidate / confirmed -- the load-bearing D-004 distinction, three outcomes.
   candidate (raw) = amber, dashed, "unverified"; confirmed-here (intent pending
   lane) = accent, solid; confirmed (lane) = success. They must not look alike. */
.acad-wu-state {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 1px 7px; border-radius: 4px; border: 1px solid transparent;
  white-space: nowrap;
}
.acad-wu-candidate {
  color: var(--acad-warn); border-style: dashed;
  border-color: var(--acad-warn); background: color-mix(in srgb, var(--acad-warn) 8%, transparent);
}
.acad-wu-pending {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.acad-wu-confirmed {
  color: var(--acad-success); border-color: color-mix(in srgb, var(--acad-success) 55%, transparent);
}

/* --- Month grid (2026-07-26: a real calendar, not a spreadsheet) ----------
   Every colour resolves through the already-themed core / --acad-* tokens, so
   CC-dark and A&M maroon are readable BY CONSTRUCTION. The grid is the densest
   surface on the arm, so each event chip pins an explicit fg AND a translucent
   bg from the same token -- never inherit-and-hope where one palette can drop
   out. Candidate chips are dashed + amber-tinted (D-004: unverified must look
   different from confirmed). All-day vs timed is a marker-vs-time distinction. */
.acad-cal-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px;
}
.acad-cal-spacer { flex: 1 1 auto; }
.acad-cal-viewtoggle { display: inline-flex; gap: 4px; }
.acad-viewbtn { color: var(--text); background: transparent; border: 1px solid var(--border); }
.acad-viewbtn-on {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
html[data-acad-theme="am"] .acad-viewbtn-on { color: #fff; }
.acad-cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.acad-cal-monthlabel { font-weight: 700; font-size: 14px; min-width: 130px; text-align: center; }
.acad-cal-histtoggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
}
.acad-cal-histtoggle input { accent-color: var(--accent); }

.acad-cal-monthwrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; align-items: start;
}
.acad-cal-grid { min-width: 0; }
.acad-cal-dowrow, .acad-cal-cells {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.acad-cal-dow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); padding: 2px 4px; text-align: right;
}
.acad-cal-cells { margin-top: 4px; }
.acad-cal-cell {
  min-height: 88px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--acad-card-bg); padding: 3px 4px 4px;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
/* Adjacent-month days are dimmed so the current month reads as the subject. */
.acad-cal-out { background: var(--acad-row-hover); opacity: 0.66; }
/* Today: an accent ring that is legible on both dark and white fields. */
.acad-cal-today {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.acad-cal-daynum { font-size: 11px; color: var(--text-muted); text-align: right; line-height: 1.2; }
.acad-cal-today .acad-cal-daynum { color: var(--accent); font-weight: 700; }
.acad-cal-evs { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }

/* One placed event. A button (keyboard-focusable), full-width, single line. */
.acad-ev {
  display: flex; align-items: center; gap: 5px; width: 100%;
  text-align: left; cursor: pointer; font-size: 11px; line-height: 1.25;
  padding: 2px 6px; border-radius: 4px; border: 1px solid transparent;
  background: var(--acad-row-hover); color: var(--text);
}
.acad-ev:hover { filter: brightness(1.06); border-color: var(--border); }
.acad-ev:focus-visible { outline: 2px solid var(--acad-focus-ring); outline-offset: 1px; }
.acad-ev-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-ev-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 10px; color: var(--text-muted); }
.acad-ev-allday { flex: 0 0 auto; font-size: 8px; line-height: 1; color: currentColor; opacity: 0.8; }

/* Candidate (unverified) vs pending vs confirmed -- the D-004 distinction on
   the grid. Candidate is dashed + amber; confirmed-here is accent; confirmed
   (lane) is success. They must never look alike. */
.acad-ev-candidate {
  color: var(--acad-warn); border-style: dashed;
  border-color: color-mix(in srgb, var(--acad-warn) 55%, transparent);
  background: color-mix(in srgb, var(--acad-warn) 10%, transparent);
}
.acad-ev-pending {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.acad-ev-confirmed {
  color: var(--text);
  border-color: color-mix(in srgb, var(--acad-success) 55%, transparent);
  background: color-mix(in srgb, var(--acad-success) 14%, transparent);
}
.acad-ev-confirmed .acad-ev-time { color: color-mix(in srgb, var(--text) 70%, transparent); }

/* Undated rail -- items with no due date, never faked onto the grid. */
.acad-cal-undated {
  border: 1px solid var(--acad-border-strong); border-radius: var(--acad-radius);
  background: var(--acad-card-bg); padding: 8px 10px; min-width: 0;
}
.acad-cal-undated-head { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.acad-cal-undated-sub { font-size: 10px; font-weight: 400; color: var(--text-muted); text-transform: none; }
.acad-cal-undated-list { display: flex; flex-direction: column; gap: 5px; }
.acad-cal-undated .acad-ev { align-items: flex-start; flex-direction: column; gap: 1px; }
.acad-ev-home { font-size: 10px; color: var(--text-muted); }
.acad-cal-undated-empty { opacity: 0.8; }

.acad-cal-empty { padding: 10px 2px; }
.acad-cal-outhint { margin-top: 8px; font-size: 11px; }
.acad-cal-divider-hist td { color: var(--text-muted); }

@media (max-width: 768px) {
  .acad-cal-monthwrap { grid-template-columns: 1fr; }
  .acad-cal-cell { min-height: 62px; }
  .acad-ev-title { font-size: 10px; }
}

/* --- Work unit detail (assignment-mode scope object) --------------------- */
.acad-wu-empty { padding: 18px 4px; }
.acad-wu-detail { padding-left: 0; }
.acad-wu-detail.acad-uncertain { padding-left: 10px; }
.acad-wu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.acad-wu-detail-title { font-size: 16px; font-weight: 700; }
.acad-wu-statebar { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.acad-wu-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--acad-radius); background: var(--acad-row-hover);
}
.acad-wu-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acad-wu-fact-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.acad-wu-fact-v { font-size: 13px; }
.acad-wu-section { margin-top: 14px; }
.acad-wu-section-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); margin-bottom: 6px; border-bottom: 1px solid var(--border); padding-bottom: 3px;
}
.acad-wu-note { font-size: 13px; }
.acad-wu-collabs { font-size: 13px; }
.acad-wu-artlist { list-style: none; margin: 0; padding: 0; }
.acad-wu-artifact {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: var(--acad-card-bg);
}
.acad-wu-artname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-wu-related .acad-wu-artifact { background: transparent; border-style: dashed; }

/* --- Tools shelf --------------------------------------------------------- */
.acad-tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.acad-tool-card {
  border: 1px solid var(--acad-border-strong); border-radius: var(--acad-radius);
  background: var(--acad-card-bg); box-shadow: var(--acad-shadow-card);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.acad-tool-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.acad-tool-name { font-size: 15px; font-weight: 700; }
.acad-tool-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap;
}
.acad-tool-dormant { color: var(--acad-warn); border-color: color-mix(in srgb, var(--acad-warn) 55%, transparent); }
.acad-tool-tagline { font-size: 12px; color: var(--text-muted); }
.acad-tool-course {
  font-size: 12px; padding: 4px 8px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px;
}
.acad-tool-term {
  display: inline-block; margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted);
}
.acad-tool-desc { font-size: 13px; }
.acad-tool-caps { margin: 2px 0; padding-left: 18px; font-size: 12px; }
.acad-tool-caps li { margin: 1px 0; }
.acad-tool-stack { font-size: 12px; }
.acad-tool-roadmap { font-size: 11px; }
.acad-tool-foot { margin-top: auto; padding-top: 8px; }
.acad-tool-open {
  display: inline-block; background: var(--accent); color: #fff; border: 1px solid var(--accent);
  text-decoration: none;
}
.acad-tool-open:hover { filter: brightness(1.08); }
.acad-tool-launch {
  font-size: 12px; border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px;
  background: var(--acad-row-hover);
}
.acad-tool-launch-label { color: var(--text-muted); margin-bottom: 4px; }
.acad-tool-cmd {
  display: block; font-family: var(--font-mono, monospace); font-size: 12px;
  color: var(--text); word-break: break-all;
}
.acad-tool-path { font-size: 11px; color: var(--text-muted); margin-top: 4px; word-break: break-all; }

@media (max-width: 768px) {
  .acad-wu-due { width: auto; white-space: normal; }
  .acad-tool-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Wave 3 -- intake surfaces (upload, quarantine review, staging promotion).
   Every colour resolves through the already-themed core / --acad-* tokens, so
   CC-dark and A&M maroon are readable BY CONSTRUCTION. The dense status colours
   (upload outcomes, confidence chips) set an explicit fg AND a translucent bg
   from the same token, the discipline the defect-2 fix established for native
   controls -- never inherit-and-hope where one palette can silently drop out.
   ========================================================================== */

/* --- Shared status chips (upload outcomes + row messages) ------------------ */
.acad-up-filed   { color: var(--acad-success); }
.acad-up-deduped { color: var(--accent); }
.acad-up-quar    { color: var(--acad-warn); }
.acad-up-failed  { color: var(--acad-danger); }

/* --- Upload --------------------------------------------------------------- */
.acad-up-wrap { display: flex; flex-direction: column; gap: 12px; }
.acad-up-drop {
  border: 2px dashed var(--acad-border-strong);
  border-radius: var(--acad-radius);
  background: var(--acad-row-hover);
  padding: 28px 16px; text-align: center; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.acad-up-drop:hover, .acad-up-drop:focus { border-color: var(--accent); outline: none; }
.acad-up-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.acad-up-disabled { opacity: 0.6; pointer-events: none; }
.acad-up-drop-big { font-size: 15px; font-weight: 600; color: var(--text); }
.acad-up-drop-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.acad-up-pick { color: var(--accent); text-decoration: underline; }

.acad-up-progress { display: flex; flex-direction: column; gap: 4px; }
.acad-up-bar { height: 8px; border-radius: 4px; background: var(--acad-row-hover); overflow: hidden; border: 1px solid var(--border); }
.acad-up-bar-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.2s ease; }
.acad-up-progress-label { font-size: 11px; color: var(--text-muted); }

.acad-up-summary-head { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.acad-up-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.acad-up-chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent);
}

.acad-up-results { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; }
.acad-up-row {
  display: grid; grid-template-columns: 120px minmax(120px, 1fr) minmax(0, 1.4fr);
  gap: 10px; align-items: baseline; padding: 3px 6px; border-radius: 4px; font-size: 12px;
}
.acad-up-row:nth-child(odd) { background: var(--acad-row-hover); }
.acad-up-status { font-weight: 600; }
.acad-up-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-up-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Per-course upload control (Task #965) -------------------------------- */
.acad-cb-upload { margin: 8px 0 4px; }
.acad-cb-up-toggle { font-size: 11px; }
.acad-cb-up-body {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.acad-cb-up-reconcile { font-size: 12px; color: var(--text-muted); }
.acad-cb-up-recon-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acad-cb-up-recon-sel, .acad-cb-up-course {
  font-size: 12px; padding: 2px 4px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg); color: var(--text); max-width: 220px;
}
.acad-cb-up-drop {
  border: 2px dashed var(--border); border-radius: 8px; padding: 14px; text-align: center;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.acad-cb-up-drop:hover, .acad-cb-up-drop:focus { border-color: var(--accent); outline: none; }
.acad-cb-up-drop-big { font-size: 13px; font-weight: 600; color: var(--text); }
.acad-cb-up-drop-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.acad-cb-up-results { display: flex; flex-direction: column; gap: 2px; }
.acad-cb-up-row { grid-template-columns: 96px minmax(90px, 1fr) minmax(0, 1.6fr); }
.acad-cb-up-working { color: var(--text-muted); font-weight: 600; }
.acad-cb-up-detail { white-space: normal; }
.acad-cb-up-confirm { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: 6px; }
.acad-cb-up-confirm .btn { font-size: 11px; }

/* --- Shared toolbar (review + staging) ------------------------------------ */
.acad-rv-toolbar, .acad-st-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.acad-rv-selectall-wrap { font-size: 12px; color: var(--text); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.acad-rv-count { font-size: 12px; color: var(--text-muted); }
.acad-rv-toolbar-spacer { flex: 1 1 auto; }
.acad-rv-rowmsg { font-size: 11px; margin-left: 6px; }

/* --- Review queue --------------------------------------------------------- */
.acad-rv-list { display: flex; flex-direction: column; gap: 10px; }
.acad-rv-card {
  border: 1px solid var(--border); border-left: 3px solid var(--acad-warn);
  border-radius: var(--acad-radius); background: var(--acad-card-bg); padding: 10px 12px;
}
.acad-rv-head { display: flex; align-items: center; gap: 10px; }
.acad-rv-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-rv-size { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.acad-rv-why { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.acad-rv-confchip {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px;
  color: var(--acad-danger); border: 1px solid currentColor;
  background: color-mix(in srgb, var(--acad-danger) 12%, transparent);
}
.acad-rv-reason { font-size: 12px; color: var(--text-muted); }
.acad-rv-guesswrap { font-size: 12px; margin-bottom: 8px; }
.acad-rv-guesslabel { color: var(--text-muted); }
.acad-rv-guess { display: inline; }
.acad-rv-gk { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.acad-rv-sep { color: var(--text-muted); margin: 0 6px; }
.acad-rv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acad-rv-course { max-width: 320px; }

/* --- Staging (Downloads) -------------------------------------------------- */
.acad-st-banner {
  font-size: 12px; color: var(--text); line-height: 1.5;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--acad-radius); background: var(--acad-row-hover);
  padding: 8px 12px; margin-bottom: 12px;
}
.acad-st-banner code { background: color-mix(in srgb, var(--text) 8%, transparent); padding: 1px 5px; border-radius: 4px; }
.acad-st-list { display: flex; flex-direction: column; gap: 10px; }
.acad-st-card {
  border: 1px solid var(--border); border-radius: var(--acad-radius);
  background: var(--acad-card-bg); padding: 10px 12px;
}
.acad-st-head { display: flex; align-items: center; gap: 10px; }
.acad-st-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-st-size { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.acad-st-meta { font-size: 12px; color: var(--text-muted); margin: 6px 0; }
.acad-st-bucket { color: var(--text); }
.acad-st-term { color: var(--text-muted); }
.acad-st-dup { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.acad-st-net { font-size: 11px; font-weight: 600; color: var(--acad-success); margin-bottom: 8px; }
.acad-st-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Wave 4 -- lecture capture. Dense with status colours (recording / safe /
   review / failed), which is exactly where one palette silently goes unreadable,
   so every chip sets an explicit fg AND a translucent bg from the already-themed
   tokens (the same discipline as the Wave 3 chips + native-control fix). Both
   CC-dark and A&M maroon are readable BY CONSTRUCTION.
   ========================================================================== */
.acad-cap-wrap { display: flex; flex-direction: column; gap: 14px; }

/* Status text colours (shared by the live card + the past-recordings rows). */
.acad-cap-rec    { color: var(--acad-danger); }
.acad-cap-safe   { color: var(--acad-success); }
.acad-cap-warn   { color: var(--acad-warn); }
.acad-cap-failed { color: var(--acad-danger); }
.acad-cap-muted  { color: var(--text-muted); }
/* 'review' -> "needs a course": a TERMINAL state waiting on Steven, not an
   in-flight warning. The arm's action colour (accent), never the amber warn used
   for genuinely-working states, so "your move" never reads as "still processing". */
.acad-cap-needs  { color: var(--accent); }

/* --- Controls ------------------------------------------------------------- */
.acad-cap-controls { display: flex; flex-direction: column; gap: 10px; }
.acad-cap-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.acad-cap-lbl {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-muted);
}
.acad-cap-lbl select, .acad-cap-lbl input {
  /* explicit fg/bg (not inherit-and-hope) so both palettes stay readable */
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px;
}
.acad-cap-grow { flex: 1 1 260px; }
.acad-cap-start {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 6px; padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.acad-cap-start:hover { filter: brightness(1.08); }
/* On-demand "why is this disabled?" affordance for the laptop-agent option. The
   explanation moved off the panel (it was permanent fixed space in a live-lecture
   UI) into this "i" button's tooltip + tap-to-read toast. Only shown when the
   agent is unavailable; the disabled <option> already reads "not running", so the
   state itself stays glance-evident without hovering. */
.acad-cap-source-wrap { display: inline-flex; align-items: center; gap: 6px; }
.acad-cap-info {
  flex: 0 0 auto;
  width: 18px; height: 18px; line-height: 16px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-muted);
  font-size: 11px; font-style: italic; font-weight: 700; text-align: center; cursor: help;
}
.acad-cap-info:hover { color: var(--text); border-color: var(--accent); }
/* Pre-record readiness block message: a dead source is stopped here, in view,
   never console-only (Bug #443). Explicit fg AND translucent bg so it reads on
   both CC-dark and A&M palettes. */
.acad-cap-readiness {
  font-size: 12px; color: var(--acad-danger);
  background: color-mix(in srgb, var(--acad-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acad-danger) 45%, transparent);
  border-radius: 6px; padding: 6px 10px;
}

/* --- Live (in-progress) card ---------------------------------------------- */
.acad-cap-live {
  border: 1px solid color-mix(in srgb, var(--acad-danger) 45%, var(--border));
  background: color-mix(in srgb, var(--acad-danger) 7%, var(--acad-card-bg));
  border-radius: var(--acad-radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.acad-cap-live-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acad-cap-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--acad-danger); box-shadow: 0 0 0 0 color-mix(in srgb, var(--acad-danger) 60%, transparent);
  animation: acad-cap-pulse 1.4s infinite;
}
@keyframes acad-cap-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acad-danger) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acad-danger) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acad-danger) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .acad-cap-dot { animation: none; } }
/* Stalled arm: the session hit the ceiling and was auto-stopped. Kill the live
   "recording" pulse so a stuck arm can never keep reading as a running capture. */
.acad-cap-dot-stalled {
  animation: none; background: var(--acad-danger); box-shadow: none; opacity: 0.5;
}
.acad-cap-stalled .acad-cap-elapsed { color: var(--acad-danger); opacity: 0.75; }
.acad-cap-stallnote {
  margin-top: 8px; font-size: 12px; color: var(--acad-danger);
  background: color-mix(in srgb, var(--acad-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acad-danger) 40%, transparent);
  border-radius: 6px; padding: 6px 10px;
}
.acad-cap-status { font-weight: 700; font-size: 13px; }
.acad-cap-elapsed { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--text); }
.acad-cap-course-chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  color: var(--accent); border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.acad-cap-live-where { font-size: 13px; color: var(--text); }
.acad-cap-live-actions { display: flex; gap: 8px; }
.acad-cap-stop {
  background: var(--acad-danger); color: #fff; border: 1px solid var(--acad-danger);
  border-radius: 6px; padding: 7px 16px; font-weight: 600; cursor: pointer;
}
.acad-cap-stop:hover { filter: brightness(1.08); }
.acad-cap-stop:disabled { opacity: 0.6; cursor: default; }
.acad-cap-reloadnote {
  margin-top: 8px; font-size: 12px; color: var(--acad-warn);
  background: color-mix(in srgb, var(--acad-warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acad-warn) 40%, transparent);
  border-radius: 6px; padding: 6px 10px;
}

/* --- Past recordings ------------------------------------------------------ */
.acad-cap-pasthead { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 4px; }
.acad-cap-group { margin-bottom: 12px; }
.acad-cap-group-head {
  font-size: 12px; font-weight: 700; color: var(--accent);
  padding: 4px 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.acad-cap-rec {
  display: grid; grid-template-columns: 120px minmax(120px, 1fr) minmax(0, 1.1fr) auto auto;
  gap: 10px; align-items: baseline; padding: 5px 6px; border-radius: 4px; font-size: 12px;
}
.acad-cap-rec:nth-child(even) { background: var(--acad-row-hover); }
.acad-cap-recname { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-cap-recmeta { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acad-cap-trchip {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 9px;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent);
  justify-self: start; white-space: nowrap;
}
.acad-cap-recactions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* A recording + its inline affordances (assign-course, transcript reader). The
   wrapper keeps the grid row on one line and lets the sub-panels span full width
   underneath it. */
.acad-cap-recitem { display: block; }

/* Inline assign-course control on a review-state row: the machine is done, this
   is how Steven gives it a course from the row itself (resolves via the lane). */
.acad-cap-assign {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px 8px; margin: 2px 0 6px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 0 6px 6px 0;
}
.acad-cap-assign-lbl { font-size: 12px; color: var(--text); }
.acad-cap-assign-course {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; font-size: 12px;
  max-width: 320px;
}
.acad-cap-assign-go {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 6px; padding: 4px 12px; font-weight: 600; cursor: pointer;
}
.acad-cap-assign-go:hover { filter: brightness(1.08); }
.acad-cap-assign-go:disabled { opacity: 0.6; cursor: default; }

/* Transcript reader panel: the captured lecture, legible in place. Whitespace is
   preserved so paragraph breaks in the transcript survive. */
.acad-cap-transcript {
  margin: 2px 0 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--acad-card-bg);
  display: flex; flex-direction: column; gap: 8px;
}
.acad-cap-transcript-head { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.acad-cap-transcript-note {
  font-size: 12px; color: var(--acad-warn);
  background: color-mix(in srgb, var(--acad-warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--acad-warn) 40%, transparent);
  border-radius: 6px; padding: 6px 10px;
}
.acad-cap-transcript-text {
  font-size: 13px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 340px; overflow-y: auto;
}
.acad-cap-audio { width: 100%; max-width: 480px; }
/* Transcript player mount (Bug #655): createTranscriptPlayer adds `.tp-root`
   directly onto the container element passed to it (not a child), so this
   div ends up as <div class="acad-cap-tplayer tp-root">. academic_transcript_
   player.css's own `.tp-root { height: 100% }` loads AFTER this stylesheet,
   so a same-specificity `.acad-cap-tplayer { height: 420px }` here loses the
   cascade and gets silently overridden -- .tp-root's height:100% then
   resolves against an undefined ancestor height (this panel is otherwise
   auto-height, unlike the standalone demo page's explicitly-sized
   #player-host) and the transcript list renders at full unclipped height
   instead of a scrollable box. The combined selector below outranks the
   plain .tp-root rule regardless of link order. */
.acad-cap-tplayer.tp-root { height: 420px; }

/* ==========================================================================
   TUTOR surface (Wave 5). Every colour resolves through the themed core /
   --acad-* tokens, so CC-dark and A&M maroon are readable by construction.
   Native controls (select/input/textarea) already carry the pinned explicit
   fg/bg from the body.acad-body-page rule above; the classes here only size and
   position them.
   ========================================================================== */
.acad-select, .acad-input, .acad-textarea {
  border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px;
}
.acad-textarea { resize: vertical; width: 100%; box-sizing: border-box; }
.acad-input { width: 100%; box-sizing: border-box; }
.acad-linkish {
  background: none; border: none; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-align: left;
}
.acad-linkish:hover { text-decoration: underline; }

.acad-tutor-studypick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }

.acad-tutor-empty, .acad-tutor-chat-empty { line-height: 1.5; }
.acad-tutor-scopebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.acad-tutor-mode {
  font-size: 10px; font-weight: 800; letter-spacing: 0.6px; padding: 2px 8px;
  border-radius: 4px; border: 1px solid transparent;
}
.acad-tutor-mode-study {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.acad-tutor-mode-assign {
  color: var(--acad-warn); border-color: var(--acad-warn);
  background: color-mix(in srgb, var(--acad-warn) 12%, transparent);
}
.acad-tutor-scope { font-size: 14px; font-weight: 600; }

.acad-tutor-cols { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.acad-tutor-col { min-width: 0; }
.acad-tutor-col-chat { flex: 1 1 380px; }
.acad-tutor-col-side { flex: 1 1 340px; }

.acad-tutor-section {
  border: 1px solid var(--border); border-radius: var(--acad-radius);
  padding: 10px 12px; margin-bottom: 12px; background: var(--acad-card-bg);
}
.acad-tutor-sec-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text); margin-bottom: 8px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.acad-tutor-sub {
  font-size: 11px; font-weight: 700; color: var(--text-muted); margin: 8px 0 3px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.acad-tutor-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.acad-tutor-list li { padding: 2px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.acad-tutor-pos { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.acad-tutor-note {
  font-size: 12px; padding: 6px 8px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px; margin-bottom: 6px;
}

/* The named seam: honest, not hidden. */
.acad-tutor-seam {
  font-size: 11px; color: var(--acad-warn); border: 1px dashed var(--acad-warn);
  background: color-mix(in srgb, var(--acad-warn) 7%, transparent);
  border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; line-height: 1.4;
}
.acad-tutor-looking { margin-bottom: 8px; }
.acad-tutor-attach {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.acad-tutor-attach-row { display: flex; align-items: center; gap: 8px; }
.acad-tutor-attach-row > span { flex: 0 0 96px; }
.acad-tutor-attach-row .acad-select, .acad-tutor-attach-row .acad-input { flex: 1 1 auto; }
.acad-tutor-sees { color: var(--text); }
.acad-tutor-selq { color: var(--accent); font-style: italic; }

.acad-tutor-stream { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.acad-tutor-msg {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.acad-tutor-msg-user { border-left: 3px solid var(--accent); }
.acad-tutor-msg-text { white-space: pre-wrap; word-break: break-word; }
.acad-tutor-remember { margin-top: 6px; }
.acad-tutor-composer { display: flex; gap: 8px; align-items: flex-end; }
.acad-tutor-composer .acad-textarea { flex: 1 1 auto; }

/* Teaching profile inheritance chain — VISIBLE, never implicit. */
.acad-tutor-scopetoggle { display: inline-flex; gap: 4px; }
.acad-tutor-pscope.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.acad-tutor-inherit-legend { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.acad-tutor-dims { display: flex; flex-direction: column; gap: 8px; }
.acad-tutor-dim { border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; }
.acad-tutor-dim.editing { border-color: var(--accent); }
.acad-tutor-dim-head { display: flex; align-items: center; gap: 8px; }
.acad-tutor-dim-name { font-weight: 700; font-size: 12px; text-transform: capitalize; flex: 1 1 auto; }
.acad-tutor-dim-val { font-size: 13px; margin-top: 2px; }
.acad-tutor-dim-desc { font-size: 11px; margin-top: 2px; }
.acad-tutor-src {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.acad-tutor-src-course {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.acad-tutor-src-global {
  color: var(--acad-success); border-color: color-mix(in srgb, var(--acad-success) 55%, transparent);
  background: color-mix(in srgb, var(--acad-success) 8%, transparent);
}
.acad-tutor-src-default { color: var(--text-muted); border-color: var(--border); }
.acad-tutor-nonport { font-size: 10px; color: var(--acad-warn); margin-left: 6px; }

.acad-tutor-dim-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.acad-tutor-f-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.acad-tutor-f-row > span { flex: 0 0 130px; }
.acad-tutor-f-row .acad-select, .acad-tutor-f-row .acad-input { flex: 1 1 auto; }
.acad-tutor-f-quote { align-items: flex-start; }
.acad-tutor-f-quote .acad-textarea { flex: 1 1 auto; }
.acad-tutor-f-hint { font-size: 11px; }
.acad-tutor-f-actions { display: flex; gap: 8px; }

.acad-tutor-signals { list-style: none; margin: 0; padding: 0; }
.acad-tutor-signal { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.acad-tutor-signal-line { display: flex; align-items: baseline; gap: 6px; }
.acad-tutor-signal-dim { font-weight: 700; text-transform: capitalize; }
.acad-tutor-signal-quote {
  font-style: italic; color: var(--text); margin: 2px 0;
  border-left: 2px solid var(--accent); padding-left: 8px;
}
.acad-tutor-signal-when { font-size: 11px; }

/* ==========================================================================
   MAIL REVIEW surface (Wave 5). Honest unconfigured state; account distinctness
   is load-bearing (a TAMU note and a personal bill must not read alike). Both
   palettes token-driven.
   ========================================================================== */
.acad-mail-unavail, .acad-mail-honest {
  border: 1px dashed var(--acad-danger); border-radius: var(--acad-radius);
  padding: 12px 14px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--acad-danger) 6%, transparent);
}
.acad-mail-honest { border-color: var(--acad-warn); background: color-mix(in srgb, var(--acad-warn) 6%, transparent); }

/* --- Reader three-state banners (integrity sweep Finding 1) ----------------
   The false-empty guard, shared by every reader surface (calendar, search,
   courses, review, staging). Three outcomes must READ differently:
     * genuinely empty -> a plain .acad-muted line (each surface's own text);
     * could-not-determine (.acad-unknown) -> warn-tinted, says UNKNOWN;
     * lane unavailable (.acad-unavail) -> danger-tinted, says not reachable.
   Warn vs danger keeps 'unknown' and 'absent' visually apart, and both apart
   from the muted empty. Token-driven so both palettes stay readable. */
.acad-unknown {
  border: 1px dashed var(--acad-warn); border-radius: var(--acad-radius);
  border-left-width: 3px; border-left-style: solid;
  padding: 12px 14px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--acad-warn) 8%, transparent);
}
.acad-unknown-title { font-weight: 700; color: var(--acad-warn); margin-bottom: 3px; }
.acad-unknown-body { color: var(--text); }
.acad-unavail {
  border: 1px dashed var(--acad-danger); border-radius: var(--acad-radius);
  padding: 12px 14px; font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--acad-danger) 6%, transparent);
}

.acad-mail-surface {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  margin-bottom: 10px;
}
.acad-mail-surface-label { font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.4px; color: var(--text-muted); }
.acad-mail-surface-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px;
  border: 1px dashed var(--border); border-radius: 4px; padding: 0 5px;
}
.acad-mail-accounts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.acad-mail-setup {
  border: 1px dashed var(--acad-warn); border-radius: var(--acad-radius);
  padding: 10px 12px; background: color-mix(in srgb, var(--acad-warn) 6%, transparent); flex: 1 1 auto;
}
.acad-mail-setup-head { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.acad-mail-setup code, .acad-mail-acct-note code {
  font-size: 11px; padding: 0 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.acad-mail-acct {
  flex: 1 1 220px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--acad-radius);
  padding: 9px 11px; background: var(--acad-card-bg); color: var(--text);
  border-left-width: 4px;
}
.acad-mail-acct:hover { border-color: var(--accent); }
.acad-mail-acct.active { box-shadow: 0 0 0 2px var(--acad-focus-ring); }
.acad-mail-acct.unconfigured { opacity: 0.92; }
.acad-mail-acct-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acad-mail-acct-email { font-size: 11px; margin-top: 3px; }
.acad-mail-acct-note { font-size: 11px; margin-top: 4px; }

/* Account identity: distinct left edge + badge tint per family. */
.acad-mail-acct-tamu { border-left-color: #7a1f2b; }
.acad-mail-acct-personal { border-left-color: var(--accent); }
.acad-mail-badge {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; white-space: nowrap; border: 1px solid currentColor;
}
.acad-mail-badge.acad-mail-acct-tamu {
  color: #fff; background: #500000; border-color: #500000;
}
.acad-mail-badge.acad-mail-acct-personal {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.acad-mail-status {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 1px 6px; border-radius: 4px; border: 1px solid transparent;
}
.acad-mail-status-active { color: var(--acad-success); border-color: color-mix(in srgb, var(--acad-success) 55%, transparent); }
.acad-mail-status-unconfigured { color: var(--acad-warn); border-color: var(--acad-warn); }
.acad-mail-status-pending { color: var(--acad-warn); border-color: var(--acad-warn); }
.acad-mail-status-error { color: var(--acad-danger); border-color: var(--acad-danger); }
.acad-mail-status-paused { color: var(--text-muted); border-color: var(--border); }

.acad-mail-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.acad-mail-tab {
  border: 1px solid var(--border); background: transparent; color: var(--text);
  border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.acad-mail-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.acad-mail-count { font-size: 11px; opacity: 0.8; }

.acad-mail-viewbody { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1 1 auto; }
/* The shared mail client mounts here. It is a flex column that fills the height
   it is given, so the school panel hands it a usable browsing height (folder
   rail + scrolling message list) rather than letting height:100% collapse to
   content in the docked (non-floating) grid layout. */
.acad-mail-client { display: flex; flex-direction: column; min-height: 460px; flex: 1 1 auto; border: 1px solid var(--border); border-radius: var(--radius, 8px); overflow: hidden; }
.acad-mail-reflist { display: flex; flex-direction: column; gap: 8px; }
.acad-mail-msg {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.acad-mail-refused { border-left: 3px solid var(--acad-warn); }
.acad-mail-msg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.acad-mail-msg-date { margin-left: auto; font-size: 11px; }
.acad-mail-msg-subject { font-weight: 600; }
.acad-mail-msg-from { font-size: 11px; }
.acad-mail-msg-snippet { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.acad-mail-refnote { font-size: 11px; margin-top: 4px; }

.acad-mail-class {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.acad-mail-class-course { color: var(--accent); border-color: var(--accent); }
.acad-mail-class-bucket { color: var(--acad-success); border-color: color-mix(in srgb, var(--acad-success) 55%, transparent); }
.acad-mail-class-unrelated { color: var(--text-muted); border-color: var(--border); }
.acad-mail-class-refused { color: var(--acad-warn); border-color: var(--acad-warn); }
.acad-mail-class-none { color: var(--text-muted); border-style: dashed; border-color: var(--border); }
.acad-mail-chip {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.acad-mail-chip-cand { color: var(--accent); }
.acad-mail-chip-ref { color: var(--acad-warn); }

/* Proposed deadlines = candidates, same visual language as the calendar
   (dashed amber = candidate; solid = confirmed). */
.acad-mail-cand {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.acad-mail-cand-candidate { border-style: dashed; border-color: var(--acad-warn); }
.acad-mail-cand-confirmed, .acad-mail-cand-confirmed-here { border-color: var(--acad-success); }
.acad-mail-cand-rejected-here { border-color: var(--text-muted); opacity: 0.75; }
.acad-mail-cand-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acad-mail-cand-title { font-weight: 600; font-size: 13px; }
.acad-mail-cand-prov {
  font-size: 12px; margin: 6px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.acad-mail-cand-subject { font-style: italic; }
.acad-mail-cand-quote { color: var(--accent); font-style: italic; }
.acad-mail-cand-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.acad-mail-cand-state { font-size: 11px; font-weight: 600; }
.acad-mail-rejected { color: var(--text-muted); }
/* Candidate state tints reuse the work-unit .acad-wu-confirmed / .acad-wu-pending
   rules (defined above) so the two surfaces never drift. */

/* ─── Phone reflow (Item 1, 2026-08-19) ────────────────────────────────────
   Academic shipped with NO responsive treatment — on a phone every windowed
   .acad-panel rendered as a fixed-position desktop window (the "kinda broken"
   Steven reported). This mirrors the finance Task #792 reflow: at <=768px the
   left rail is hidden (the shared mobile button-view replaces it), and each
   panel neutralises windowing.js's fixed geometry to become a full-width
   flow card. mobile_nav_core then shows one card at a time from the button
   grid. Desktop (>768px) is untouched. */
@media (max-width: 768px) {
  .acad-rail { display: none; }
  .acad-body {
    display: block;
    padding: 10px 10px 28px;
    overflow-x: hidden;
  }
  .acad-panel,
  .acad-panel.window-floating,
  .acad-panel.window-docked {
    position: static !important;
    grid-column: auto !important;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 12px 0;
    box-shadow: none;
  }
  .acad-panel-body { overflow-x: auto; }
  .acad-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--acad-panel-head-bg, var(--acad-card-bg));
  }
  /* windowing.js chrome that makes no sense on a stacked phone card. */
  .window-resize-handle,
  .window-action-band { display: none !important; }
}

/* ===========================================================================
 * Due-state chips (shared: course browser + work-unit panel). The THREE stored
 * states plus derived overdue must read DISTINGUISHABLY -- `unknown` is a real
 * deadline not yet known and must never look like `none`/blank (spec item 1).
 * ======================================================================== */
.acad-due-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
}
/* dated: a set date -- calm, factual. */
.acad-due-dated {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
}
/* overdue: dated + past + not done -- danger. */
.acad-due-overdue {
  color: var(--acad-danger);
  background: color-mix(in srgb, var(--acad-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--acad-danger) 45%, transparent);
  font-weight: 700;
}
/* unknown: a deadline EXISTS but is not yet known -- loud amber, its own shape.
   This is the state that must not read as "no deadline" (HW1). */
.acad-due-unknown {
  color: var(--acad-warn);
  background: color-mix(in srgb, var(--acad-warn) 16%, transparent);
  border: 1px dashed color-mix(in srgb, var(--acad-warn) 62%, transparent);
}
/* none: no deadline by nature -- muted, plainly "no deadline", visibly different
   from unknown (solid + neutral vs dashed + amber). */
.acad-due-none {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 22%, transparent);
}

/* ===========================================================================
 * Course browser (Contract 2) — by-course cards.
 * ======================================================================== */
.acad-cb-card {
  border: 1px solid var(--acad-border-strong);
  border-radius: var(--acad-radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--acad-card-bg);
}
.acad-cb-head { margin-bottom: 8px; }
.acad-cb-idline { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acad-cb-title { font-size: 15px; font-weight: 600; }
.acad-cb-meeting { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.acad-cb-office { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.acad-cb-metrics {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 0;
  margin-bottom: 4px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.acad-cb-metric { display: flex; flex-direction: column; gap: 3px; }
.acad-cb-metric-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.acad-cb-metric-v { font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acad-doc-total { font-weight: 600; }
.acad-doc-chip, .acad-cb-rollup-head { font-size: 11px; }
.acad-doc-chip {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 4px;
  padding: 1px 6px;
}
.acad-cb-rollup-head { font-weight: 600; margin-right: 2px; }
.acad-cb-wu-table { margin-top: 6px; }
.acad-cb-wu-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.acad-cb-empty { padding: 8px 2px; }

/* Lifecycle + work-unit state tags (browser + list). */
.acad-lc-badge, .acad-wu-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 4px;
}
.acad-lc-active { color: var(--acad-success); background: color-mix(in srgb, var(--acad-success) 15%, transparent); }
.acad-lc-upcoming { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.acad-lc-archived { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.acad-wu-tag-ok { color: var(--acad-success); background: color-mix(in srgb, var(--acad-success) 15%, transparent); }
.acad-wu-tag-pending { color: var(--acad-warn); background: color-mix(in srgb, var(--acad-warn) 16%, transparent); }
.acad-wu-tag-cand { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.acad-wu-blocked {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 4px;
  color: var(--acad-warn); background: color-mix(in srgb, var(--acad-warn) 16%, transparent);
}

/* ===========================================================================
 * Work-unit panel — LIST mode (standalone, filterable).
 * ======================================================================== */
.acad-wu-listctl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.acad-wu-chk { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.acad-wu-search { min-width: 160px; }
.acad-wu-count { margin-left: auto; font-size: 11px; }
.acad-wu-listtable td { vertical-align: top; }

/* ===========================================================================
 * Work-unit panel — DETAIL blockers / requirements / rubric.
 * ======================================================================== */
.acad-wu-blockers, .acad-wu-reqs { list-style: none; margin: 4px 0 0; padding: 0; }
.acad-wu-blocker, .acad-wu-req { padding: 5px 0; border-bottom: 1px dotted var(--border); font-size: 13px; }
.acad-wu-blocker-mark { color: var(--acad-warn); font-weight: 700; margin-right: 6px; }
.acad-wu-blocker-done { color: var(--text-muted); }
.acad-wu-blocker-done .acad-wu-blocker-mark { color: var(--acad-success); }
.acad-wu-blocker-label, .acad-wu-req-label { font-weight: 600; }
.acad-wu-blocker-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; margin-left: 20px; }
.acad-req-enf, .acad-req-sat {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 4px; margin-left: 6px;
}
.acad-req-enf { color: var(--acad-danger); background: color-mix(in srgb, var(--acad-danger) 12%, transparent); }
.acad-req-soft { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 12%, transparent); }
.acad-req-met { color: var(--acad-success); background: color-mix(in srgb, var(--acad-success) 15%, transparent); }
.acad-req-unmet { color: var(--acad-danger); background: color-mix(in srgb, var(--acad-danger) 12%, transparent); }
.acad-req-none { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.acad-rubric-table { margin-top: 6px; }
.acad-rubric-ord { width: 24px; color: var(--text-muted); }
.acad-rubric-scale { font-size: 11px; color: var(--text-muted); }
.acad-rubric-score { white-space: nowrap; }

/* ==========================================================================
   Daily Classes (Wave 11) -- the live-lecture surface. One surface, two
   palettes: every color resolves from the arm existing tokens (--accent is
   Aggie Maroon under [data-acad-theme="am"], the CC accent in dark), so the
   section is CC-dark and A&M maroon without a separate identity.
   ========================================================================== */
.dc-new {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px; border: 1px solid var(--acad-border-strong);
  border-radius: var(--acad-radius); background: var(--acad-card-bg); margin-bottom: 10px;
}
.dc-course, .dc-date, .dc-title {
  padding: 6px 8px; border: 1px solid var(--acad-border-strong);
  border-radius: 6px; background: var(--panel, #161b22); color: var(--text);
  font-size: 13px;
}
.dc-title { flex: 1 1 180px; min-width: 140px; }
.dc-start { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.dc-recent { margin-bottom: 12px; }
.dc-recent-head { font-size: 12px; opacity: 0.7; margin: 4px 2px; }
.dc-recent-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 6px 8px; margin-bottom: 4px; border: 1px solid var(--acad-border-strong);
  border-radius: 6px; background: var(--acad-card-bg); color: var(--text); cursor: pointer;
}
.dc-recent-row:hover { background: var(--acad-row-hover); border-color: var(--accent); }
.dc-recent-chevron { display: inline-block; width: 1em; text-align: center; opacity: 0.7; }
.dc-recent-open { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--acad-card-bg)); }
.dc-recent-open .dc-recent-chevron { opacity: 1; color: var(--accent); }
.dc-recent-date { font-variant-numeric: tabular-nums; opacity: 0.85; }
.dc-recent-title { flex: 1; }

.dc-active-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px; margin-bottom: 10px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 6px;
}
.dc-active-idn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-active-course { font-weight: 700; color: var(--accent); }
.dc-active-date { font-variant-numeric: tabular-nums; opacity: 0.85; }
.dc-active-title { opacity: 0.9; }

.dc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .dc-cols { grid-template-columns: 1fr; } }
.dc-col {
  border: 1px solid var(--acad-border-strong); border-radius: var(--acad-radius);
  background: var(--acad-card-bg); padding: 10px; min-width: 0;
}
.dc-col-notes { grid-column: 1 / -1; }
.dc-col-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; color: var(--accent); }

.dc-chip {
  display: inline-flex; align-items: center; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--acad-border-strong); background: var(--panel, #161b22); opacity: 0.9;
}
.dc-chip-rec { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dc-chip-ok, .dc-chip-active { color: var(--acad-success); border-color: color-mix(in srgb, var(--acad-success) 45%, transparent); }
.dc-chip-ended, .dc-chip-queue { color: var(--acad-warn); border-color: color-mix(in srgb, var(--acad-warn) 45%, transparent); }
.dc-chip-kind { opacity: 0.7; }

.dc-link-status { margin-top: 8px; font-size: 12px; }
.dc-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-link-id { font-family: ui-monospace, monospace; opacity: 0.7; }
.dc-ts-running, .dc-ts-pending, .dc-ts-queued { color: var(--acad-warn); }
.dc-ts-done { color: var(--acad-success); }
.dc-ts-failed { color: var(--acad-danger); }
#acad-daily-player-slot:empty { display: none; }

.dc-review-form { margin-bottom: 8px; }
.dc-review-input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--acad-border-strong);
  border-radius: 6px; background: var(--panel, #161b22); color: var(--text); font-size: 13px;
}
.dc-review-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--acad-focus-ring); }
.dc-review-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.dc-review-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-bottom: 1px solid var(--acad-border-strong);
}
.dc-review-term { flex: 1; }
.dc-review-pending { opacity: 0.55; }
.dc-review-resolved .dc-review-term { text-decoration: line-through; opacity: 0.6; }
.dc-review-resolve { margin-left: auto; }

.dc-fb-form { margin-bottom: 8px; }
.dc-fb-input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--acad-border-strong);
  border-radius: 6px; background: var(--panel, #161b22); color: var(--text); font-size: 13px;
}
.dc-fb-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--acad-focus-ring); }
.dc-fb-list { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto; }
.dc-fb-item {
  display: flex; align-items: baseline; gap: 6px; padding: 4px 2px; font-size: 12px;
  border-bottom: 1px solid var(--acad-border-strong);
}
.dc-fb-time { opacity: 0.6; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.dc-fb-text { flex: 1; word-break: break-word; }
/* Per-record edit/delete (Bug #714): quiet by default, legible on hover/focus. */
.dc-fb-acts { display: inline-flex; gap: 4px; flex-shrink: 0; align-self: center; }
.dc-fb-acts button {
  border: none; background: transparent; color: var(--text); opacity: 0.4;
  cursor: pointer; font-size: 11px; padding: 1px 4px; border-radius: 4px; line-height: 1.4;
}
.dc-fb-acts button:hover, .dc-fb-acts button:focus-visible { opacity: 1; background: var(--acad-border-strong); outline: none; }
.dc-fb-item:hover .dc-fb-acts button { opacity: 0.75; }
.dc-fb-item.is-confirming .dc-fb-del { opacity: 1; color: var(--danger, #f85149); font-weight: 600; }
.dc-fb-editinput { flex: 1; padding: 3px 6px; font-size: 12px; }

#dc-notes { min-height: 320px; }
#dc-notes .me-root { height: 100%; }

.dc-up-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.dc-up-pick { cursor: pointer; }
.dc-up-hint { margin-bottom: 8px; }
.dc-up-qrwrap { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin: 8px 0; }
.dc-qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
.dc-qr-meta { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.dc-qr-link { word-break: break-all; font-size: 11px; color: var(--accent); }
.dc-qr-actions { display: flex; gap: 6px; }
.dc-up-cam { margin: 8px 0; }
.dc-cam-video { width: 100%; max-width: 360px; border-radius: 8px; background: #000; }
.dc-cam-actions { display: flex; gap: 8px; margin-top: 6px; }
.dc-cam-shots { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dc-cam-thumb, .dc-uppage-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.dc-up-att { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.dc-up-att-name { flex: 1; word-break: break-all; }
.dc-up-athead { font-size: 12px; opacity: 0.7; margin: 8px 0 4px; }

.dc-uppage-main { padding: 16px; display: flex; justify-content: center; }
.dc-uppage-box { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.dc-uppage-title { font-size: 18px; font-weight: 700; color: var(--accent); }
.dc-uppage-pick { text-align: center; cursor: pointer; }
.dc-uppage-list { display: flex; flex-direction: column; gap: 6px; }
.dc-uppage-file { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dc-uppage-fname { flex: 1; word-break: break-all; }
.dc-uppage-upload { padding: 12px; font-size: 16px; }
.dc-uppage-status { font-size: 13px; }
.dc-uppage-ok { color: var(--acad-success); }
.dc-uppage-err { color: var(--acad-danger); }

/* ── Formula Sheet (Task #978) ─────────────────────────────────────────────
   Study tool beside the Tools shelf. Uses the shared arm tokens (--panel,
   --border, --text, --accent, --text-muted) so it re-skins for both the CC-dark
   and A&M themes with no per-theme rule. */
.acad-fs { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.acad-fs-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acad-fs-controls .acad-fs-course { flex: 0 1 auto; max-width: 320px; }
.acad-fs-controls .acad-fs-search { flex: 1 1 160px; min-width: 120px; }
.acad-fs-list { display: flex; flex-direction: column; gap: 12px; }
.acad-fs-empty { padding: 10px 2px; }

.acad-fs-group { display: flex; flex-direction: column; gap: 8px; }
.acad-fs-grouphead {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 3px;
}

.acad-fs-row {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 8px 10px;
}
.acad-fs-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.acad-fs-labelline { display: flex; align-items: center; gap: 8px; }
.acad-fs-label {
  flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 2px 4px;
}
.acad-fs-label:hover { border-color: var(--border); }
.acad-fs-label:focus { border-color: var(--accent); outline: none; background: var(--panel); }
.acad-fs-coursetag {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 10px; padding: 1px 8px;
}
.acad-fs-formula {
  cursor: pointer; padding: 4px 6px; border-radius: 4px; overflow-x: auto;
  border: 1px dashed transparent; font-size: 15px; color: var(--text);
}
.acad-fs-formula:hover { border-color: var(--border); background: var(--acad-row-hover); }
.acad-fs-formula:focus { outline: none; border-color: var(--accent); }
.acad-fs-nolatex { font-style: italic; }
.acad-fs-note { font-size: 12px; color: var(--text-muted); }
.acad-fs-note-input, .acad-fs-group-input { font-size: 12px; }
.acad-fs-editslot { display: flex; flex-direction: column; gap: 8px; }
.acad-fs-loading { font-size: 12px; }
.acad-fs-editfoot { display: flex; align-items: center; gap: 10px; }
.acad-fs-editfoot .acad-fs-spacer { flex: 1 1 auto; }
.acad-fs-displaytoggle { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.acad-fs-rawlatex { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

.acad-fs-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; justify-content: flex-end; max-width: 132px; }
.acad-fs-actions .btn-xs { min-width: 30px; }

@media (max-width: 768px) {
  .acad-fs-row { flex-direction: column; }
  .acad-fs-actions { max-width: none; justify-content: flex-start; }
  .acad-fs-actions .btn-xs { min-height: 34px; }
}

/* Print view — a chrome-free overlay populated on demand. On screen it is a
   full-window preview (so it is drivable/screenshotable); on paper the @media
   print block hides everything except the sheet and drops the toolbar. */
.acad-fs-printview { display: none; }
body.acad-fs-print-open .acad-fs-printview {
  display: block; position: fixed; inset: 0; z-index: 4000; overflow: auto;
  background: #ffffff; color: #111; padding: 24px 28px;
}
.acad-fs-print-bar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 16px; }
.acad-fs-print-doc { max-width: 820px; margin: 0 auto; }
.acad-fs-print-title { font-size: 22px; font-weight: 700; margin: 0 0 14px; color: #500000; }
.acad-fs-print-group { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #500000; margin: 18px 0 8px; border-bottom: 1px solid #ccc; padding-bottom: 3px; }
.acad-fs-print-entry { margin: 0 0 12px; break-inside: avoid; }
.acad-fs-print-label { font-size: 14px; font-weight: 600; color: #111; }
.acad-fs-print-course { font-weight: 400; color: #666; font-size: 12px; }
.acad-fs-print-formula { margin: 4px 0; font-size: 17px; color: #000; }
.acad-fs-print-note { font-size: 12px; color: #444; }
.acad-fs-print-empty { color: #666; }

@media print {
  body.acad-fs-print-open > *:not(.acad-fs-printview) { display: none !important; }
  body.acad-fs-print-open .acad-fs-printview { position: static; inset: auto; padding: 0; background: #fff; }
  .acad-fs-print-bar { display: none !important; }
}

/* ── Graph (Task #982) ─────────────────────────────────────────────────────
   Freeform SVG sketchpad; a drawn graph embeds into a note as an inline object.
   Uses the shared arm tokens so it re-skins for CC-dark and A&M with no per-
   theme rule. `gr-*` classes are shared by the editor surface AND the read-only
   embed rendered into the note preview/print (graph_model.renderGraphSvg). */
.acad-gr { display: flex; flex-direction: column; gap: 8px; min-height: 0; position: relative; }
.acad-gr-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.acad-gr-tools, .acad-gr-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.acad-gr .btn.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.acad-gr-funcrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acad-gr-funclbl { font-style: italic; color: var(--text-muted); }
.acad-gr-funcinput { flex: 1 1 200px; min-width: 140px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.acad-gr-funchint { font-size: 11px; color: var(--text-muted); }
.acad-gr-funcrow.hidden { display: none; }
.acad-gr-surface {
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
  overflow: hidden;
}
.acad-gr-svg { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.acad-gr[data-tool] .acad-gr-svg { cursor: crosshair; }
.acad-gr-hint { font-size: 12px; color: var(--text-muted); min-height: 16px; }

/* SVG scene elements (shared editor + embed). */
.gr-grid { stroke: var(--border); stroke-width: 1; opacity: 0.4; }
.gr-axis { stroke: var(--text-muted); stroke-width: 1.4; opacity: 0.8; }
.gr-func { fill: none; stroke: var(--accent); stroke-width: 2; }
.gr-poly { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.gr-edge { stroke: var(--text); stroke-width: 2; }
.gr-edge-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
.gr-node { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.gr-node-hit { fill: transparent; cursor: pointer; }
.gr-node.gr-selected, .gr-edge.gr-selected, .gr-poly.gr-selected { stroke: #e8a800; stroke-width: 3; }
.gr-node.gr-selected { fill: #e8a800; }
.gr-node.gr-pending { stroke: #e8a800; stroke-width: 3; }
.gr-label-fo { overflow: visible; pointer-events: none; }
.gr-label { font-size: 14px; color: var(--text); line-height: 1; white-space: nowrap; }
.gr-label-raw { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Label editor: a small popover ANCHORED to the element being labeled, inside the
   graph object, so the graph and the surrounding prose stay visible while typing.
   No backdrop, no dimming — it never hides the note. (Task #991) */
.acad-gr-labelpop {
  position: absolute; left: 8px; top: 8px; z-index: 60;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 10px; min-width: 220px; max-width: min(360px, 90%);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
/* A caret pointing back at the anchored element (down when above it, up when below). */
.acad-gr-labelpop::after {
  content: ''; position: absolute; left: 16px; bottom: -7px;
  width: 12px; height: 12px; background: var(--panel);
  border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}
.acad-gr-labelpop.acad-gr-labelpop-below::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.acad-gr-labelmount { min-height: 32px; }
/* Keep the embedded math surface compact so the popover stays a little editor. */
.acad-gr-labelpop .me-wys { min-height: 0; }
.acad-gr-labelpop .me-wys-host { min-height: 32px; max-height: 120px; overflow: auto; padding: 4px 6px; }
.acad-gr-labelraw { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Embedded graph inside a note preview/print (renderGraphSvg output). Width is
   set inline from the model's stored size; cap to the container, not a fixed px. */
.gr-embed { position: relative; display: block; margin: 8px 0; max-width: 100%; }
.gr-embed-svg { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.gr-embed-edit {
  position: absolute; top: 6px; right: 6px; font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--text); cursor: pointer; opacity: 0.85;
}
.gr-embed-edit:hover { border-color: var(--accent); opacity: 1; }
.gr-embed-missing, .gr-embed-broken { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-muted); }

/* Inline note graph OBJECT (Task #982 reshape): a resizable, edit-in-place block
   living INSIDE the rendered note surface, in reading order with the prose. In
   picture mode it shows the read-only SVG (click to edit); in edit mode it hosts
   the graph editor core; the corner grip resizes it in both. */
.me-graph-embed { position: relative; display: inline-block; max-width: 100%; margin: 8px 0; vertical-align: top; }
.me-graph-inner { position: relative; width: 460px; max-width: 100%; }
.me-graph-inner .gr-embed { width: 100% !important; max-width: 100%; margin: 0; }
.me-graph-embed:not(.is-editing) .me-graph-inner { cursor: pointer; }
.me-graph-embed:not(.is-editing):hover .gr-embed-svg { border-color: var(--accent); }
.me-graph-embed.is-editing { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.me-graph-resize {
  position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px;
  border: 2px solid var(--accent); border-radius: 3px; background: var(--panel);
  cursor: nwse-resize; z-index: 3; touch-action: none;
}
.me-graph-resize:hover { background: color-mix(in srgb, var(--accent) 25%, var(--panel)); }

/* Print view — chrome-free overlay, same posture as the Formula Sheet. */
.acad-gr-printview { display: none; }
body.acad-gr-print-open .acad-gr-printview {
  display: block; position: fixed; inset: 0; z-index: 4000; overflow: auto;
  background: #ffffff; color: #111; padding: 24px 28px;
}
.acad-gr-print-bar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 16px; }
.acad-gr-print-doc { max-width: 820px; margin: 0 auto; }
.acad-gr-print-title { font-size: 22px; font-weight: 700; margin: 0 0 14px; color: #500000; }
body.acad-gr-print-open .acad-gr-print-doc .gr-embed-svg { background: #fff; border-color: #999; }
body.acad-gr-print-open .acad-gr-print-doc .gr-embed-edit { display: none; }
body.acad-gr-print-open .acad-gr-print-doc .gr-label { color: #000; }
body.acad-gr-print-open .acad-gr-print-doc .gr-edge { stroke: #000; }
body.acad-gr-print-open .acad-gr-print-doc .gr-node { fill: #000; stroke: #fff; }
body.acad-gr-print-open .acad-gr-print-doc .gr-grid { stroke: #ccc; }
body.acad-gr-print-open .acad-gr-print-doc .gr-axis { stroke: #444; }

@media print {
  body.acad-gr-print-open > *:not(.acad-gr-printview) { display: none !important; }
  body.acad-gr-print-open .acad-gr-printview { position: static; inset: auto; padding: 0; background: #fff; }
  .acad-gr-print-bar { display: none !important; }
}

@media (max-width: 768px) {
  .acad-gr-toolbar { justify-content: flex-start; }
  .acad-gr .btn { min-height: 34px; }
}

/* ==========================================================================
   Task #998 -- course document list, all-courses search, and the viewer.
   Getting a filed document back OUT (open / read / download / search) so
   Steven never re-fetches it from Canvas.
   ========================================================================== */

/* Per-course document list inside the course card. */
.acad-cb-docs { margin: 8px 0 4px; }
.acad-cb-docs-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.acad-cb-docs-title { font-weight: 600; color: var(--text); font-size: 13px; }
.acad-cb-docs-filter {
  flex: 1; min-width: 120px; max-width: 320px;
  padding: 4px 8px; font-size: 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--acad-radius, 6px);
}
.acad-cb-docs-filter:focus { outline: none; border-color: var(--accent); }
.acad-cb-docs-list { display: flex; flex-direction: column; gap: 3px; }

.acad-doc-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 8px; border: 1px solid var(--border);
  border-radius: var(--acad-radius, 6px); background: var(--panel);
  font-size: 12.5px; color: var(--text);
}
.acad-doc-row.acad-row-clickable { cursor: pointer; }
.acad-doc-row.acad-row-clickable:hover { background: var(--acad-row-hover, rgba(127,127,127,0.12)); }
.acad-doc-nofile { opacity: 0.72; }
.acad-doc-icon { flex: 0 0 auto; }
.acad-doc-name { font-weight: 500; word-break: break-word; }
.acad-doc-course {
  flex: 0 0 auto; font-weight: 700; color: var(--accent);
  font-size: 11px; margin-right: 2px;
}
.acad-doc-typechip {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
}
.acad-doc-prov {
  font-size: 10.5px; color: var(--acad-success, #2e7d32);
}
.acad-doc-prov-pending { color: var(--acad-warn, #b26a00); }
.acad-doc-when { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.acad-doc-snippet {
  flex-basis: 100%; font-size: 11.5px; color: var(--text-muted);
  border-left: 2px solid var(--border); padding-left: 8px; margin-top: 2px;
}
.acad-cb-docs-content-search { margin-top: 4px; align-self: flex-start; }

/* All-courses document search bar (rides above the term tabs). */
.acad-docsearch { margin: 0 0 8px; }
.acad-docsearch-input {
  width: 100%; max-width: 520px;
  padding: 6px 10px; font-size: 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--acad-radius, 6px);
}
.acad-docsearch-input:focus { outline: none; border-color: var(--accent); }
.acad-docsearch-results {
  margin-top: 6px; display: flex; flex-direction: column; gap: 3px;
  max-width: 640px;
}
.acad-docsearch-count { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }

/* The document viewer: a draggable floating window (self-contained styles --
   it does not depend on the Files-panel JS-injected preview CSS). */
.acad-doc-viewer {
  position: fixed; top: 8vh; right: 4vw;
  width: min(760px, 92vw); height: min(78vh, 900px);
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--acad-border-strong, var(--border));
  border-radius: 10px; box-shadow: var(--acad-shadow-card, 0 10px 40px rgba(0,0,0,0.4));
  overflow: hidden; resize: both;
}
.acad-doc-viewer .files-doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; cursor: move; user-select: none;
  background: var(--acad-header-bg, var(--bg));
  border-bottom: 1px solid var(--border);
}
.acad-doc-viewer .files-doc-title {
  font-weight: 600; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.acad-doc-viewer .files-doc-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.acad-doc-viewer .files-pv-body {
  flex: 1; overflow: auto; background: var(--bg);
  display: flex; flex-direction: column;
}
.acad-doc-viewer .files-pv-frame { flex: 1; width: 100%; height: 100%; border: 0; background: #fff; }
.acad-doc-viewer .files-pv-img { max-width: 100%; height: auto; margin: auto; display: block; }
.acad-doc-viewer .files-pv-pre {
  margin: 0; padding: 14px; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.acad-doc-viewer .files-pv-loading,
.acad-doc-viewer .acad-dv-noprev {
  margin: auto; padding: 24px; text-align: center; color: var(--text-muted);
}
.acad-dv-noprev-sub { font-size: 12px; margin-top: 6px; }
.acad-doc-viewer .files-error {
  margin: 16px; padding: 12px; border-radius: 6px;
  background: rgba(178,44,44,0.12); color: var(--acad-danger, #c0392b);
  font-size: 12.5px;
}

@media (max-width: 768px) {
  .acad-doc-viewer {
    top: 2vh; right: 2vw; left: 2vw; width: auto; height: 90vh;
  }
  .acad-doc-when { margin-left: 0; }
}