/* Compass overlay. Prototype styles for the Compass hackday mockup. */

:root {
  color-scheme: light;
  --compass-page: #FAFAFA;
  --compass-surface: #FFFFFF;
  --compass-ink: #000000;
  --compass-heading: #191919;
  --compass-secondary: #6F6F6F;
  --compass-faint: #6F6F6F;
  --compass-border: #CFCFCF;
  --compass-hairline: rgba(0, 0, 0, 0.1);
  --compass-accent: #8C1D40;
  --compass-maroon: #8C1D40;
  --compass-maroon-hover: #6C102D;
  --compass-on-maroon: #FFFFFF;
  --compass-gold: #FFC627;
  --compass-focus: var(--compass-ink);
  --compass-focus-inner: var(--compass-surface);
  --compass-accent-tint: #F5F5F5;
  --compass-add: #E9F3DC;
  --compass-del: #FBE7EA;
  --compass-good: #446E12;
  --compass-green: #78BE20;
  --compass-accent-track: #E8E8E8;
  --compass-font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --compass-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --compass-type-12: 12px;
  --compass-type-13: 13px;
  --compass-type-14: 14px;
  --compass-type-16: 16px;
  --compass-type-18: 18px;
  --compass-type-22: 22px;
  --compass-weight-strong: 700;
  --compass-space-1: 4px;
  --compass-space-2: 8px;
  --compass-space-3: 12px;
  --compass-space-4: 16px;
  --compass-space-6: 24px;
  --compass-space-8: 32px;
  --compass-radius-control: 0;
  --compass-radius-card: 0;
  --compass-shadow-low: 0 1px 3px hsl(30 10% 20% / 0.08);
  --compass-shadow-high: 0 4px 16px hsl(30 10% 20% / 0.12);
  --compass-shadow-lift: 0 6px 18px hsl(30 10% 20% / 0.18);
  --compass-shadow-rail: 10px 0 28px hsl(220 15% 10% / 0.45);
  --compass-scrim: hsl(220 15% 10% / 0.28);
  --compass-control: 44px;
  --compass-motion-fast: 150ms;
  --compass-motion-rail: 180ms;
  --compass-reading-measure: 70ch;
  /* Grid columns, driven by data attributes on html. */
  --compass-w-rail: 5.25rem;
  --compass-w-outline: 20rem;
  --compass-w-panel: 2.75rem;
}
:root[data-compass-rail="pinned"] { --compass-w-rail: 11rem; }
:root[data-compass-outline="collapsed"] { --compass-w-outline: 2.75rem; }
:root[data-compass-outline="none"] { --compass-w-outline: 0px; }
:root[data-compass-panel="open"] { --compass-w-panel: 380px; }
:root[data-compass-panel="none"] { --compass-w-panel: 0px; }


/* Base */
html.compass-theme body {
  margin: 0; height: 100vh; overflow: hidden;
  background: var(--compass-page); color: var(--compass-ink);
  font: 14px/1.55 var(--compass-font-sans);
}
html.compass-theme *, html.compass-theme *::before { box-sizing: border-box; }
html.compass-theme [hidden] { display: none !important; }
.compass-theme h1, .compass-theme h2, .compass-theme h3, .compass-theme h4 { line-height: 1.1; margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--compass-heading); }
/* Gold highlight block: a hard-edged gold rectangle behind one key word. */
.compass-hl { background: var(--compass-gold); color: #000000; padding-inline: 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.compass-theme a { color: var(--compass-accent); }
.compass-theme :focus-visible:focus-visible { outline: 3px solid var(--compass-focus); outline-offset: 4px; box-shadow: 0 0 0 4px var(--compass-focus-inner); }
/* Rings inside scrolling lists sit inset so the scroller cannot clip them. */
.compass-theme :is(.compass-outline, .compass-shortcut, .compass-tool-search-wrap) :focus-visible:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: -2px; box-shadow: none; }
#skip_navigation_link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; z-index: 1000; padding: 8px 16px; background: var(--compass-surface); color: var(--compass-ink); border-radius: var(--compass-radius-control); }
.compass-glyph { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.compass-glyph-sm { width: 13px; height: 13px; }
.compass-icon-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--compass-control); min-height: var(--compass-control);
  border-radius: var(--compass-radius-control); color: var(--compass-secondary);
}
.compass-icon-btn:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-theme .btn, .compass-button {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--compass-space-1);
  min-height: var(--compass-control); padding-inline: var(--compass-space-4);
  border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control);
  background: var(--compass-surface); color: var(--compass-ink); font-size: var(--compass-type-14);
}
.compass-theme .btn:hover, .compass-button:hover { background: var(--compass-accent-tint); }
.compass-theme .btn-primary, .compass-button-primary { background: var(--compass-maroon); color: var(--compass-on-maroon); border-color: var(--compass-accent); font-weight: var(--compass-weight-strong); }
.compass-theme .btn-primary:hover, .compass-button-primary:hover { background: var(--compass-maroon-hover); }
.compass-button:disabled, .compass-theme .btn:disabled { opacity: .5; cursor: not-allowed; }
.compass-link-button { all: unset; cursor: pointer; color: var(--compass-accent); text-decoration: underline; }

/* Workspace grid on Canvas's #application. Wrappers flatten so Canvas regions become columns. */
.compass-theme #application {
  display: grid; height: 100vh;
  grid-template-columns: var(--compass-w-rail) var(--compass-w-outline) minmax(0, 1fr) var(--compass-w-panel);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  background: var(--compass-page);
}
.compass-theme #wrapper, .compass-theme #main, .compass-theme #left-side,
.compass-theme #sticky-container, .compass-theme #content-wrapper { display: contents; }
.compass-theme .ic-app-nav-toggle-and-crumbs { display: none; }

/* Rail: #header */
.compass-theme #header.ic-app-header {
  grid-column: 1; grid-row: 1 / -1; position: relative; z-index: 4; width: 100%;
  display: flex; flex-direction: column; gap: var(--compass-space-1);
  padding: var(--compass-space-3) var(--compass-space-2);
  background: var(--compass-maroon); color: var(--compass-on-maroon);
  transition: width var(--compass-motion-rail) ease-out;
}
:root[data-compass-rail="hover"] #header.ic-app-header { width: 11rem; box-shadow: var(--compass-shadow-rail); }
.compass-rail-scrim { position: fixed; inset: 0; z-index: 3; background: var(--compass-scrim); opacity: 0; pointer-events: none; transition: opacity var(--compass-motion-fast) linear; }
:root[data-compass-rail="hover"] .compass-rail-scrim { opacity: 1; transition-delay: 120ms; }
:root:has(.compass-shortcut:not([hidden])) .compass-rail-scrim { z-index: 19; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .compass-rail-scrim, .compass-theme #header.ic-app-header { transition: none; } }
.compass-theme .ic-app-header__main-navigation { display: contents; }
.compass-theme .ic-app-header__logomark-container { padding: var(--compass-space-1) var(--compass-space-2) var(--compass-space-3); }
.compass-theme .ic-app-header__logomark { display: flex; text-decoration: none; }
.compass-brand-mark { display: flex; align-items: center; gap: 8px; overflow: hidden; background: #FFFFFF; border-radius: var(--compass-radius-card); padding: var(--compass-space-1); flex: none; }
.compass-brand-full { display: block; width: 104px; font: 700 22px/1.2 var(--compass-font-sans); color: var(--compass-maroon); }
.compass-brand-rose { display: block; width: 28px; height: 28px; }
:root[data-compass-rail="collapsed"] .compass-brand-mark { width: 44px; height: 44px; padding: 0; }
:root[data-compass-rail="collapsed"] .compass-brand-full { display: none; }
:root[data-compass-rail="collapsed"] .compass-brand-rose { display: block; width: 44px; height: 44px; }
.compass-theme .ic-app-header__menu-list { display: contents; list-style: none; }
.compass-theme .ic-app-header__menu-list-item { display: block; }
.compass-rail-pin, .compass-theme .ic-app-header__menu-list-link, .compass-shortcut-open {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative; flex: none;
  display: flex; align-items: center; gap: var(--compass-space-3); width: 100%;
  min-height: var(--compass-control); padding-inline: var(--compass-space-2);
  border-radius: var(--compass-radius-control);
  color: var(--compass-on-maroon); font-size: var(--compass-type-12); white-space: nowrap;
}
.compass-rail-pin { gap: var(--compass-space-2); margin-block-end: var(--compass-space-2); }
.compass-rail-pin:hover, .compass-theme .ic-app-header__menu-list-link:hover, .compass-shortcut-open:hover { background: var(--compass-maroon-hover); }
.compass-rail-pin[aria-pressed="true"], .compass-shortcut-open[aria-expanded="true"],
.compass-theme .ic-app-header__menu-list-item--active .ic-app-header__menu-list-link {
  background: var(--compass-maroon-hover); font-weight: var(--compass-weight-strong);
}
.compass-theme .menu-item-icon-container { display: contents; }
.compass-theme .menu-item__badge {
  margin-inline-start: auto; padding-inline: var(--compass-space-1);
  background: var(--compass-gold); color: #000000; border-radius: var(--compass-radius-control);
  font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); font-variant-numeric: tabular-nums;
}
:root[data-compass-rail="collapsed"] .menu-item__text,
:root[data-compass-rail="collapsed"] .compass-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-compass-rail="collapsed"] .ic-app-header__menu-list-link,
:root[data-compass-rail="collapsed"] .compass-rail-pin,
:root[data-compass-rail="collapsed"] .compass-shortcut-open { justify-content: center; }
:root[data-compass-rail="collapsed"] .menu-item__badge { position: absolute; top: var(--compass-space-1); right: 0; margin: 0; }

/* Jump to course: centered overlay */
.compass-shortcut {
  position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; width: min(32rem, calc(100vw - 32px)); max-height: 70vh;
  background: var(--compass-surface); color: var(--compass-ink);
  border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high);
}
.compass-shortcut-head { padding: var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-shortcut-title { margin: 0; font-size: var(--compass-type-13); font-weight: var(--compass-weight-strong); }
.compass-sc-field { position: relative; margin-top: var(--compass-space-2); }
.compass-shortcut-search {
  display: block; width: 100%; min-height: var(--compass-control); padding: var(--compass-space-2) 48px var(--compass-space-2) var(--compass-space-2);
  font: inherit; font-size: var(--compass-type-13); color: var(--compass-ink); background: var(--compass-surface);
  border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control);
}
.compass-sc-kbd {
  position: absolute; right: var(--compass-space-2); top: 50%; transform: translateY(-50%); pointer-events: none;
  padding-inline: var(--compass-space-1); font: var(--compass-type-12) var(--compass-font-mono); color: var(--compass-secondary);
  background: var(--compass-page); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control);
}
.compass-shortcut-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: var(--compass-space-2) 0; overflow-y: auto; list-style: none; }
.compass-shortcut-group { padding: var(--compass-space-2) var(--compass-space-3) var(--compass-space-1); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); letter-spacing: .04em; color: var(--compass-secondary); }
.compass-sc-count { margin: var(--compass-space-2) 0 0; font-size: var(--compass-type-12); color: var(--compass-secondary); font-variant-numeric: tabular-nums; }
.compass-sc-main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.compass-shortcut-option { display: flex; align-items: center; gap: var(--compass-space-3); min-width: 0; min-height: var(--compass-control); padding-inline: var(--compass-space-3) var(--compass-space-2); cursor: pointer; }
.compass-sc-main:has(.compass-shortcut-option:hover, .compass-shortcut-option[aria-selected="true"]) { background: var(--compass-accent-tint); }
.compass-sc-text { min-width: 0; }
.compass-sc-text b { font-size: var(--compass-type-13); }
.compass-sc-text span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-sc-dest { display: flex; align-items: center; gap: var(--compass-space-1); flex: none; margin-inline-start: auto; font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-sc-toggle, .compass-sc-pin { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; width: var(--compass-control); min-height: var(--compass-control); border-radius: var(--compass-radius-control); color: var(--compass-secondary); }
.compass-sc-toggle:hover, .compass-sc-pin:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-sc-toggle[aria-expanded="true"] .compass-glyph { transform: rotate(180deg); }
.compass-sc-pin[aria-pressed="true"] { color: var(--compass-accent); }
.compass-sc-pin[aria-pressed="true"] .compass-glyph { fill: currentColor; }
.compass-sc-pages { margin: 0; padding: 0 0 var(--compass-space-2); list-style: none; background: var(--compass-page); }
.compass-theme a.compass-sc-page { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--compass-space-2); min-height: var(--compass-control); padding-inline: var(--compass-space-8) var(--compass-space-3); color: var(--compass-ink); text-decoration: none; }
.compass-sc-page:hover { background: var(--compass-accent-tint); }
.compass-sc-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--compass-type-13); }
.compass-sc-page-when { font-size: var(--compass-type-12); color: var(--compass-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Course head: title, Canvas term line, Canvas course nav strip */
.compass-course-head, .compass-theme #section-tabs-header-subtitle, .compass-theme #sticky-container > nav { grid-column: 2 / 4; background: var(--compass-surface); }
.compass-course-head { grid-row: 1; display: flex; align-items: center; gap: var(--compass-space-3); padding: var(--compass-space-4) var(--compass-space-6) 0; }
.compass-course-title { margin-inline-end: auto; font-size: var(--compass-type-22); font-weight: var(--compass-weight-strong); }
.compass-view-as, .compass-phone { all: unset; cursor: pointer; padding: var(--compass-space-1) var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-view-as[aria-pressed="true"], .compass-phone[aria-pressed="true"] { border-color: var(--compass-accent); color: var(--compass-accent); background: var(--compass-accent-tint); }
.compass-theme #section-tabs-header-subtitle { grid-row: 2; display: block; padding: var(--compass-space-1) var(--compass-space-6) var(--compass-space-3); font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-theme #sticky-container > nav { grid-row: 3; padding-inline: var(--compass-space-6); }
.compass-theme #section-tabs { display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.compass-theme #section-tabs li { position: relative; padding: 0 var(--compass-space-1); }
.compass-theme #section-tabs li > a, .compass-more-btn {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--compass-space-1);
  padding: var(--compass-space-2) var(--compass-space-2) var(--compass-space-1);
  font-size: var(--compass-type-16); color: var(--compass-ink);
}
.compass-theme #section-tabs li > a:hover, .compass-more-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.compass-theme #section-tabs li > a.active { font-weight: var(--compass-weight-strong); }
.compass-theme #section-tabs li:has(> a.active)::after, .compass-theme #section-tabs li.compass-more:has(a.active)::after { content: ""; position: absolute; bottom: 0; left: var(--compass-space-3); right: var(--compass-space-3); height: 8px; background: var(--compass-accent); }
.compass-more-btn[aria-expanded="true"] .compass-glyph { transform: rotate(180deg); }
.compass-more-list {
  position: absolute; top: 100%; right: 0; z-index: 3; width: 18rem; max-height: 60vh; overflow-y: auto;
  margin: 0; padding: var(--compass-space-1); list-style: none;
  background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high);
}
.compass-more-list a { display: block; min-height: var(--compass-control); padding: var(--compass-space-2) var(--compass-space-3); border-radius: var(--compass-radius-control); color: var(--compass-ink); text-decoration: none; }
.compass-more-list a:hover { background: var(--compass-accent-tint); }
.compass-more-note { display: block; font-size: var(--compass-type-12); color: var(--compass-faint); }

/* Outline */
.compass-outline, .compass-outline-edge { grid-column: 2; grid-row: 4; background: var(--compass-surface); border-inline-end: 1px solid var(--compass-border); min-width: 0; }
.compass-outline { display: flex; flex-direction: column; overflow: hidden; }
.compass-outline-edge { display: flex; flex-direction: column; align-items: center; gap: var(--compass-space-3); padding-top: var(--compass-space-3); }
:root:not([data-compass-outline="open"]) .compass-outline,
:root:not([data-compass-outline="collapsed"]) .compass-outline-edge { display: none; }
.compass-outline-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-outline-head h3 { font-size: var(--compass-type-12); text-transform: uppercase; letter-spacing: 0.15em; color: var(--compass-secondary); }
.compass-outline-summary { margin: 0; font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-outline-tools { display: grid; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-outline-find { position: relative; display: flex; align-items: center; color: var(--compass-secondary); }
.compass-outline-find > .compass-glyph { position: absolute; left: var(--compass-space-2); }
.compass-outline-search { width: 100%; min-height: 36px; padding: var(--compass-space-1) 32px var(--compass-space-1) 28px; font: inherit; font-size: var(--compass-type-13); color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); }
.compass-outline-ctl { display: flex; justify-content: space-between; gap: var(--compass-space-2); font-size: var(--compass-type-12); }
.compass-due-soon { margin-inline-start: var(--compass-space-1); padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-gold); color: #000000; font-weight: var(--compass-weight-strong); }
.compass-mini-btn[data-published="false"] { color: var(--compass-faint); }
.compass-toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: var(--compass-space-3); padding: var(--compass-space-2) var(--compass-space-2) var(--compass-space-2) var(--compass-space-4); border-radius: var(--compass-radius-card); background: var(--compass-ink); color: var(--compass-surface); font-size: var(--compass-type-13); box-shadow: var(--compass-shadow-high); }
.compass-toast .compass-button { min-height: 32px; padding-inline: var(--compass-space-3); }
.compass-add-module { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--compass-space-2); width: 100%; min-height: 36px; padding-inline: var(--compass-space-3); border-bottom: 1px solid var(--compass-border); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-add-module:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-outline-scroll { flex: 1; overflow-y: auto; }
.compass-module { border-bottom: 1px solid var(--compass-border); }
.compass-module-head { position: relative; }
.compass-module-row {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--compass-space-2); width: 100%; min-height: var(--compass-control);
  padding: var(--compass-space-2) var(--compass-space-3); background: var(--compass-surface);
  transition: color var(--compass-motion-fast), background-color var(--compass-motion-fast);
}
.compass-module-row:hover { background: var(--compass-accent-tint); }
.compass-module-row .compass-glyph { transition: transform var(--compass-motion-fast); }
.compass-module-row[aria-expanded="true"] > .compass-glyph { transform: rotate(180deg); }
.compass-module-mid { display: grid; min-width: 0; }
.compass-module-title { font-size: var(--compass-type-13); font-weight: var(--compass-weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compass-module-sub { font-size: var(--compass-type-12); color: var(--compass-faint); font-variant-numeric: tabular-nums; }
.compass-chip-now { padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-gold); color: #000000; font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); white-space: nowrap; }
.compass-item-list { margin: 0; padding: 0 0 var(--compass-space-2); list-style: none; }
.compass-item-li { position: relative; }
.compass-item-li:has(.compass-item-actions) .compass-item-link { padding-inline-end: 72px; }
.compass-item-link {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--compass-space-2);
  min-height: var(--compass-control); padding: var(--compass-space-1) var(--compass-space-3) var(--compass-space-1) var(--compass-space-6);
  text-decoration: none;
}
.compass-theme a.compass-item-link { color: var(--compass-ink); }
.compass-item-link:hover { background: var(--compass-accent-tint); }
.compass-item-link[aria-current="page"] { background: var(--compass-accent-tint); font-weight: var(--compass-weight-strong); }
.compass-item-main { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.compass-item-title { font-size: var(--compass-type-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compass-item-due { font-size: var(--compass-type-12); font-weight: 400; color: var(--compass-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compass-item-type { display: inline-flex; color: var(--compass-secondary); }
.compass-item-type .compass-glyph { width: 20px; height: 20px; stroke-width: 1.75; }
.compass-item-link[aria-current="page"] .compass-item-type { color: var(--compass-accent); }
.compass-state { display: inline-flex; color: var(--compass-faint); }
.compass-state[data-state="done"] { color: var(--compass-accent); }
.compass-state[data-state="progress"] { color: var(--compass-accent); }
.compass-item-link[data-published="false"] .compass-item-title { color: var(--compass-faint); }
/* Authoring handoffs: quiet until the row is hovered or holds focus. */
.compass-item-actions, .compass-module-actions {
  position: absolute; top: 50%; right: var(--compass-space-2); transform: translateY(-50%);
  display: flex; gap: 2px; padding: 2px; border-radius: var(--compass-radius-control); background: var(--compass-accent-tint);
  opacity: 0; pointer-events: none;
}
.compass-module-head .compass-module-actions { top: var(--compass-space-2); transform: none; }
.compass-item-li:hover .compass-item-actions, .compass-item-li:focus-within .compass-item-actions,
.compass-module-head:hover .compass-module-actions, .compass-module-head:focus-within .compass-module-actions { opacity: 1; pointer-events: auto; }
@media (hover: none) { .compass-item-actions, .compass-module-actions, .compass-drag { opacity: 1; pointer-events: auto; } } /* touch has no hover to reveal them */
.compass-mini-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 28px; height: 28px; padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); color: var(--compass-secondary); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
.compass-mini-btn:hover { background: var(--compass-surface); color: var(--compass-accent); }
.compass-mini-btn[data-published="true"] { color: var(--compass-good); }
/* Outline editing (staff): a quiet dotted grip on hover or focus, drop lines, indent controls. */
.compass-mini-btn:disabled { opacity: .35; cursor: default; }
.compass-drag { all: unset; box-sizing: border-box; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 1; width: 12px; height: 24px; cursor: grab; border-radius: var(--compass-radius-control); opacity: 0;
  background: radial-gradient(circle, var(--compass-secondary) 1.2px, transparent 1.7px) 0 0 / 6px 6px content-box; padding: 3px 0; }
.compass-module-head > .compass-drag { top: 22px; left: 0; } /* clears the chevron, which starts 12px in */
.compass-item-li:hover > .compass-drag, .compass-header-li:hover > .compass-drag, .compass-module-head:hover > .compass-drag, .compass-drag:focus-visible { opacity: 1; }
.compass-drag:active { cursor: grabbing; }
.compass-header-li { position: relative; padding: var(--compass-space-2) var(--compass-space-3) var(--compass-space-1) var(--compass-space-6); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-drop-after::after, .compass-drop-start > .compass-module-head::after { content: ''; position: absolute; inset-inline: 0; height: 2px; background: var(--compass-accent); pointer-events: none; z-index: 2; } /* a pseudo line paints above row backgrounds; an inset shadow hid under the current row */
.compass-drop-after::after { bottom: -1px; }
.compass-drop-start > .compass-module-head::after { bottom: 0; } /* under the header, so a collapsed module still shows where the row lands */
.compass-drop-over { background: var(--compass-accent-tint); outline: 2px solid var(--compass-accent); outline-offset: -2px; }
.compass-item-menu {
  position: absolute; right: var(--compass-space-2); top: 100%; z-index: 3; min-width: 9rem; margin: 0; padding: var(--compass-space-1); list-style: none;
  background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high);
}
.compass-item-menu button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; padding: var(--compass-space-2) var(--compass-space-3); border-radius: var(--compass-radius-control); font-size: var(--compass-type-13); color: var(--compass-ink); }
.compass-item-menu button:hover, .compass-item-menu button:focus-visible { background: var(--compass-accent-tint); }
.compass-item-menu button:disabled { opacity: .35; cursor: default; background: none; }
.compass-preview {
  position: fixed; z-index: 15; width: 22rem; padding: var(--compass-space-4);
  background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high);
}
.compass-preview h3 { margin-bottom: var(--compass-space-1); font-size: var(--compass-type-16); }
.compass-preview p { margin: var(--compass-space-2) 0 0; color: var(--compass-secondary); font-size: var(--compass-type-13); }
.compass-meta { color: var(--compass-secondary); font-size: var(--compass-type-12); }

/* Middle column */
.compass-theme #not_right_side.ic-app-main-content { grid-column: 3; grid-row: 4; min-width: 0; overflow-y: auto; background: var(--compass-page); }
.compass-theme #content.ic-Layout-contentMain { padding: var(--compass-space-8) var(--compass-space-8) 96px; }
:root[data-compass-outline="none"] #not_right_side.ic-app-main-content { grid-row: 1 / -1; }
:root[data-compass-outline="none"] .compass-course-head,
:root[data-compass-outline="none"] #section-tabs-header-subtitle,
:root[data-compass-outline="none"] #sticky-container > nav { display: none; }
.compass-banner, .compass-viewas-bar { display: flex; gap: var(--compass-space-2); max-width: 62rem; margin: 0 auto var(--compass-space-4); padding: var(--compass-space-2) var(--compass-space-4); border-radius: var(--compass-radius-card); background: var(--compass-gold); color: #000000; font-weight: var(--compass-weight-strong); }
.compass-viewas-bar { position: sticky; top: 0; z-index: 2; }
:root:has([data-screen~="page"]:not([hidden])):not(.compass-diff-open) :is(.compass-banner, .compass-viewas-bar) { max-width: var(--compass-reading-measure); }
/* Phone width: a browser at 390px, not the Canvas Student app. */
:root[data-compass-phone="on"] #content { box-sizing: border-box; max-width: 390px; margin: var(--compass-space-4) auto; padding: var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: 0; background: var(--compass-page); box-shadow: var(--compass-shadow-high); }
:root[data-compass-phone="on"] :is(.show-content.user_content, .compass-tab-card) { padding: var(--compass-space-4); }
.compass-theme .compass-viewas-exit { color: #000000; }
.compass-banner a { color: #000000; }

/* Wiki page: v0.5 page card */
.compass-theme .header-bar-outer-container, .compass-diff { max-width: var(--compass-reading-measure); margin-inline: auto; }
.compass-theme .header-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--compass-space-2); margin-block-end: var(--compass-space-3); }
.compass-theme .page-toolbar-end, .compass-theme .page-toolbar-end .buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-2); }
.compass-theme .page-toolbar .btn { min-height: 36px; padding-inline: var(--compass-space-3); font-size: var(--compass-type-13); }
.compass-theme .btn-published { color: var(--compass-good); }
.compass-theme .inline-block { position: relative; }
.compass-theme .al-options.ui-menu-open { position: absolute; right: 0; top: 100%; z-index: 3; min-width: 12rem; margin: var(--compass-space-1) 0 0; padding: var(--compass-space-1); list-style: none; background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high); }
.compass-theme .al-options a { display: block; padding: var(--compass-space-2) var(--compass-space-3); border-radius: var(--compass-radius-control); color: var(--compass-ink); text-decoration: none; font-size: var(--compass-type-13); }
.compass-theme .al-options a:hover { background: var(--compass-accent-tint); }
.compass-theme .show-content.user_content, .compass-tab-card {
  max-width: var(--compass-reading-measure); margin-inline: auto; padding: var(--compass-space-8);
  background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-low);
}
.compass-crumb { margin: 0 0 var(--compass-space-2); font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-theme .show-content h1.page-title { font-size: var(--compass-type-22); }
.compass-page-meta { display: flex; flex-wrap: wrap; gap: var(--compass-space-3); margin-block: var(--compass-space-2) var(--compass-space-4); padding-block-end: var(--compass-space-3); border-bottom: 1px solid var(--compass-border); font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-theme .show-content h2 { margin-top: var(--compass-space-6); font-size: var(--compass-type-18); }
.compass-theme .show-content h3 { margin-top: var(--compass-space-4); font-size: var(--compass-type-16); }
.compass-theme .show-content p { margin-block: var(--compass-space-3); }
.compass-theme .show-content ol { margin-block: var(--compass-space-3); padding-inline-start: var(--compass-space-6); }
.compass-theme .show-content li { margin-block: var(--compass-space-1); }
.compass-theme .show-content table, .compass-tab-card table { border-collapse: collapse; width: 100%; margin-block: var(--compass-space-4); font-size: var(--compass-type-13); font-variant-numeric: tabular-nums; }
.compass-theme .show-content :is(th, td), .compass-tab-card :is(th, td) { border: 1px solid var(--compass-border); padding: var(--compass-space-2) var(--compass-space-3); text-align: start; }
.compass-theme .show-content th, .compass-tab-card th { background: var(--compass-page); font-weight: var(--compass-weight-strong); }
.compass-callout { margin-block: var(--compass-space-4); padding: var(--compass-space-4); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); }
.compass-theme .compass-callout h3 { margin-top: 0; }
.compass-theme .compass-callout p:last-child { margin-bottom: 0; }
.compass-page-foot { display: flex; justify-content: space-between; gap: var(--compass-space-3); margin-block-start: var(--compass-space-8); padding-block-start: var(--compass-space-4); border-top: 1px solid var(--compass-border); font-size: var(--compass-type-13); }
/* Read Module View */
.compass-read-toggle { display: inline-flex; margin-inline-start: var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); overflow: hidden; vertical-align: middle; height: 36px; box-sizing: border-box; }
.compass-read-toggle[hidden] { display: none; }
.compass-theme .page-toolbar-start { display: flex; align-items: center; }
.compass-read-toggle button { all: unset; display: inline-flex; align-items: center; cursor: pointer; padding: var(--compass-space-1) var(--compass-space-3); font-size: var(--compass-type-13); color: var(--compass-secondary); }
.compass-read-toggle button[aria-pressed="true"] { color: var(--compass-accent); background: var(--compass-accent-tint); font-weight: var(--compass-weight-strong); }
.compass-read-toggle button:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: -2px; }
.compass-read-card { padding-block: var(--compass-space-8) var(--compass-space-4); border-top: 1px solid var(--compass-border); scroll-margin-top: var(--compass-space-4); }
.compass-read-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--compass-space-2); }
.compass-theme .compass-read-head h2 { margin: 0; margin-inline-end: auto; }
.compass-theme .compass-read-section { margin-block: var(--compass-space-8) var(--compass-space-2); padding-bottom: var(--compass-space-1); border-bottom: 1px solid var(--compass-hairline); font-size: var(--compass-type-12); text-transform: uppercase; letter-spacing: 0.15em; color: var(--compass-secondary); }
.compass-read-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--compass-space-1) var(--compass-space-3); font-size: var(--compass-type-13); }
.compass-read-facts dt { color: var(--compass-secondary); }
.compass-read-facts dd { margin: 0; }
.compass-read-replies { list-style: none; padding: 0; }
.compass-read-replies > li { padding: var(--compass-space-2) var(--compass-space-3); }
.compass-read-quiz [data-correct] { color: var(--compass-accent); }

/* Course tab pages: collection, document, sheet, inside the same page card. */
.compass-tab-card { display: block; }
.compass-tab-card[data-wide="true"] { max-width: 62rem; }
.compass-tab-card h1 { font-size: var(--compass-type-22); }
.compass-tab-card > h2 { margin-top: var(--compass-space-6); font-size: var(--compass-type-18); }
.compass-tab-card p { margin-block: var(--compass-space-3); }
.compass-tab-card ul { margin-block: var(--compass-space-3); padding-inline-start: var(--compass-space-6); }
.compass-coll-section { margin-block-start: var(--compass-space-6); }
.compass-coll-section h2 { margin-block-end: var(--compass-space-1); font-size: var(--compass-type-16); }
.compass-theme .compass-coll-note { margin: 0; font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-tab-card .compass-coll-list { margin: var(--compass-space-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--compass-border); }
.compass-coll-row { display: grid; gap: var(--compass-space-1); min-height: var(--compass-control); padding: var(--compass-space-3) var(--compass-space-1); border-bottom: 1px solid var(--compass-border); }
.compass-tab-card .compass-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-2); margin: 0; }
.compass-row-title { font-size: var(--compass-type-14); font-weight: var(--compass-weight-strong); }
.compass-tab-card .compass-row-meta { display: flex; flex-wrap: wrap; gap: var(--compass-space-4); margin: 0; font-size: var(--compass-type-12); color: var(--compass-secondary); font-variant-numeric: tabular-nums; }
.compass-row-mark, .compass-row-flag { display: inline-flex; align-items: center; gap: var(--compass-space-1); padding: 0 var(--compass-space-2); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-row-flag { border-color: var(--compass-accent); color: var(--compass-accent); font-weight: var(--compass-weight-strong); }
.compass-dot { width: 8px; height: 8px; border-radius: 0; background: currentColor; }
.compass-theme a.compass-row-link { color: var(--compass-ink); text-decoration: none; }
.compass-theme a.compass-row-link { cursor: pointer; }
.compass-theme a.compass-row-link:is(:hover, :focus-visible) { color: var(--compass-accent); text-decoration: underline; }
.compass-tab-card td.compass-num { text-align: end; font-variant-numeric: tabular-nums; }
.compass-sheet-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--compass-space-3); margin-block: var(--compass-space-4); }

/* Modules page: CSS only. Every native control keeps its place and behavior. */
.compass-theme [data-screen="modules"] { max-width: 60rem; margin-inline: auto; }
.compass-theme .header-bar-right { width: 100%; }
.compass-theme .header-bar-right__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--compass-space-2); }
.compass-theme .header-bar-right__buttons .btn { min-height: 36px; padding-inline: var(--compass-space-3); font-size: var(--compass-type-13); }
.compass-theme .context_module { margin-block-end: var(--compass-space-3); overflow: visible; background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-low); }
.compass-theme .context_module .ig-header { display: flex; align-items: center; gap: var(--compass-space-2); min-height: var(--compass-control); padding: var(--compass-space-2) var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-theme .ig-header-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--compass-space-2); cursor: pointer; font-size: var(--compass-type-14); font-weight: var(--compass-weight-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compass-theme .ig-header-title .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.compass-theme .module_header_items, .compass-theme .ig-header-admin { display: flex; align-items: center; gap: var(--compass-space-1); }
.compass-theme .requirements_message .pill { display: flex; margin: 0; padding: 0; list-style: none; }
.compass-theme .requirements_message .pill li { padding-inline: var(--compass-space-1); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); color: var(--compass-secondary); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
.compass-theme .Button--icon-action, .compass-theme .context_module .al-trigger, .compass-theme .module-publish-icon button, .compass-theme .publish-icon {
  all: unset; box-sizing: border-box; display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
  border-radius: var(--compass-radius-control); color: var(--compass-secondary); cursor: pointer;
}
.compass-theme .Button--icon-action:hover, .compass-theme .context_module .al-trigger:hover, .compass-theme .publish-icon:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-theme .ig-list { margin: 0; padding: 0; list-style: none; }
.compass-theme .context_module_item + .context_module_item { border-top: 1px solid var(--compass-border); }
.compass-theme .context_module_item .ig-row { display: flex; align-items: center; gap: var(--compass-space-2); min-height: var(--compass-control); padding: var(--compass-space-1) var(--compass-space-3); }
.compass-theme .context_module_item .ig-row:hover, .compass-theme .context_module_item.compass-handoff .ig-row { background: var(--compass-accent-tint); }
.compass-theme .ig-handle, .compass-theme .sortable-handle { color: var(--compass-faint); cursor: grab; }
.compass-theme .type_icon { display: inline-flex; flex: none; width: 20px; color: var(--compass-secondary); }
.compass-theme .type_icon .compass-glyph { width: 20px; height: 20px; stroke-width: 1.75; }
.compass-theme .ui-dialog-content select[size] { width: 100%; }
.compass-theme .ig-info { flex: 1; min-width: 0; }
.compass-theme .module-item-title { font-size: var(--compass-type-13); }
.compass-theme .ig-title { color: var(--compass-ink); text-decoration: none; }
.compass-theme .ig-title:hover { color: var(--compass-accent); text-decoration: underline; }
.compass-theme .ig-details { display: flex; gap: var(--compass-space-3); color: var(--compass-secondary); font-size: var(--compass-type-12); font-variant-numeric: tabular-nums; }
.compass-theme .ig-admin { display: flex; align-items: center; gap: var(--compass-space-1); }
.compass-theme .publish-icon.published { color: var(--compass-good); }
.compass-theme .indent_1 .ig-row { padding-inline-start: calc(var(--compass-space-3) + 24px); }
.compass-theme .indent_2 .ig-row { padding-inline-start: calc(var(--compass-space-3) + 48px); }
.compass-theme .context_module_sub_header .module-item-title { margin: 0; font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); letter-spacing: .04em; color: var(--compass-secondary); }

/* Canvas native dialogs (jQuery UI), restyled only */
.compass-theme .ui-widget-overlay { position: fixed; inset: 0; z-index: 40; background: hsl(220 15% 10% / 0.55); }
.compass-theme .ui-dialog {
  position: fixed; top: 10vh; left: 50%; transform: translateX(-50%); z-index: 41;
  display: flex; flex-direction: column; width: min(34rem, calc(100vw - 32px)); max-height: 80vh;
  background: var(--compass-surface); color: var(--compass-ink);
  border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high);
}
.compass-theme .ui-dialog-titlebar { display: flex; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-2) var(--compass-space-2) var(--compass-space-4); border-bottom: 1px solid var(--compass-border); }
.compass-theme .ui-dialog-title { flex: 1; font-size: var(--compass-type-16); font-weight: var(--compass-weight-strong); }
.compass-theme .ui-dialog-titlebar-close { all: unset; cursor: pointer; display: grid; place-items: center; width: var(--compass-control); height: var(--compass-control); border-radius: var(--compass-radius-control); color: var(--compass-secondary); font-size: 20px; }
.compass-theme .ui-dialog-titlebar-close:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-theme .ui-dialog-content { display: grid; gap: var(--compass-space-3); padding: var(--compass-space-4); overflow-y: auto; }
.compass-theme .ui-dialog-content label { display: grid; gap: var(--compass-space-1); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-theme .ui-dialog-content select, .compass-theme .ui-dialog-content input[type="text"] {
  font: inherit; font-size: var(--compass-type-13); font-weight: 400; min-height: var(--compass-control); padding: var(--compass-space-2);
  color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control);
}
.compass-theme .ui-dialog-buttonpane { display: flex; justify-content: flex-end; gap: var(--compass-space-2); padding: var(--compass-space-3) var(--compass-space-4); border-top: 1px solid var(--compass-border); }
.compass-tool-search-wrap { position: relative; display: flex; align-items: center; color: var(--compass-secondary); }
.compass-tool-search-wrap .compass-glyph { position: absolute; left: var(--compass-space-3); }
.compass-theme .ui-dialog-content input[type="text"].compass-tool-search { width: 100%; padding-left: 34px; }
.compass-theme #context_external_tools_select { display: grid; gap: var(--compass-space-3); }
.compass-theme .tools { max-height: 16rem; margin: 0; padding: var(--compass-space-1) 0; overflow-y: auto; list-style: none; border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); }
.compass-tool-group { padding: var(--compass-space-2) var(--compass-space-3) var(--compass-space-1); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); letter-spacing: .04em; color: var(--compass-secondary); }
.compass-theme .tools .tool { display: flex; align-items: center; min-height: 36px; padding-inline: var(--compass-space-3); font-size: var(--compass-type-13); cursor: pointer; }
.compass-theme .tools .tool:hover { background: var(--compass-accent-tint); }
.compass-theme .tools .tool[aria-selected="true"] { background: var(--compass-accent-tint); font-weight: var(--compass-weight-strong); }

/* Dashboard */
.compass-theme .ic-Dashboard-header h1 { font-size: var(--compass-type-22); margin-block-end: var(--compass-space-3); }
.compass-finder { margin-block-end: var(--compass-space-4); padding: var(--compass-space-4); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-low); }
.compass-finder-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--compass-space-3); }
.compass-field { display: flex; flex-direction: column; gap: var(--compass-space-1); min-width: 9rem; }
.compass-field-grow { flex: 1 1 var(--compass-reading-measure); }
.compass-field > label { font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-field input, .compass-field select {
  font: inherit; font-size: var(--compass-type-13); min-height: var(--compass-control); padding: var(--compass-space-2);
  color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control);
}
.compass-count { margin: var(--compass-space-3) 0 0; font-size: var(--compass-type-13); color: var(--compass-secondary); font-variant-numeric: tabular-nums; }
.compass-count:empty { display: none; }
.compass-dash-section { margin-block-end: var(--compass-space-6); }
.compass-dash-section h2 { margin-block-end: var(--compass-space-3); font-size: var(--compass-type-16); }
.compass-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--compass-space-3); }
.compass-theme .ic-DashboardCard__box__container { display: contents; }
.compass-theme .ic-DashboardCard {
  position: relative; display: flex; flex-direction: column; gap: var(--compass-space-2); padding: var(--compass-space-3);
  background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-low);
  transition: box-shadow var(--compass-motion-fast), transform var(--compass-motion-fast);
}
.compass-theme .compass-dash-grid .ic-DashboardCard:hover, .compass-theme .compass-dash-grid .ic-DashboardCard:focus-within { box-shadow: var(--compass-shadow-lift); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .compass-theme .ic-DashboardCard:hover { transform: none; } }
.compass-theme .ic-DashboardCard__header { display: contents; }
.compass-theme .ic-DashboardCard__header_image, .compass-theme .ic-DashboardCard__header > div:has(> .ic-DashboardCard__header-button) { display: none; }
.compass-theme .ic-DashboardCard__link { display: flex; flex-direction: column; gap: var(--compass-space-2); padding-right: 36px; color: var(--compass-ink); text-decoration: none; }
.compass-theme .ic-DashboardCard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.compass-theme .ic-DashboardCard__header_content { display: flex; flex-direction: column; gap: var(--compass-space-1); }
.compass-theme .ic-DashboardCard__header-title { font-size: var(--compass-type-16); font-weight: var(--compass-weight-strong); }
.compass-theme .ic-DashboardCard__header-subtitle { font-size: var(--compass-type-13); color: var(--compass-secondary); }
.compass-theme .ic-DashboardCard__header-term { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-2); margin-top: var(--compass-space-1); font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-theme .ic-DashboardCard__action-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-3); min-height: var(--compass-space-6); }
.compass-theme .ic-DashboardCard__action-container:empty { display: none; }
.compass-theme .ic-DashboardCard__action { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--compass-space-1); color: var(--compass-secondary); text-decoration: none; font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); font-variant-numeric: tabular-nums; }
.compass-theme .ic-DashboardCard__action.assignments { color: var(--compass-accent); }
.compass-role { display: inline-flex; padding-inline: var(--compass-space-1); border: 1px solid var(--compass-accent); border-radius: var(--compass-radius-control); background: var(--compass-accent); color: var(--compass-surface); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); white-space: nowrap; }
.compass-role[data-role="designer"] { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-role[data-role="student"] { background: transparent; color: var(--compass-secondary); border-color: var(--compass-border); }
.compass-pin { all: unset; position: absolute; top: var(--compass-space-3); right: var(--compass-space-3); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--compass-radius-control); color: var(--compass-secondary); cursor: pointer; }
.compass-pin:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-pin[aria-pressed="true"] { color: var(--compass-accent); }
.compass-pin[aria-pressed="true"] .compass-glyph { fill: currentColor; }
/* All Courses and search results: one row per course, fixed columns. */
.compass-dash-list { display: grid; background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); overflow: hidden; }
.compass-dash-list .ic-DashboardCard { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; align-items: center; gap: var(--compass-space-2); min-height: 36px; padding: 0 44px 0 var(--compass-space-2); border: 0; border-bottom: 1px solid var(--compass-border); border-radius: 0; box-shadow: none; }
.compass-dash-list .ic-DashboardCard:hover { background: var(--compass-accent-tint); }
.compass-dash-list .ic-DashboardCard__link { padding: 0; }
.compass-dash-list .ic-DashboardCard__header_content { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--compass-space-2); }
.compass-dash-list .ic-DashboardCard__header-title, .compass-dash-list .ic-DashboardCard__header-subtitle { font-size: var(--compass-type-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compass-dash-list .ic-DashboardCard__header-subtitle { color: var(--compass-ink); }
.compass-dash-list .ic-DashboardCard__header-term { margin: 0; flex-wrap: nowrap; }
.compass-dash-list .ic-DashboardCard__action-container { flex-wrap: nowrap; gap: var(--compass-space-2); min-height: 0; }
.compass-dash-list .compass-pin { top: 2px; right: var(--compass-space-2); }

/* All Courses: term sections, newest first, sticky headers. */
.compass-term-count { font-weight: 400; color: var(--compass-secondary); font-variant-numeric: tabular-nums; }
.compass-term { border-bottom: 1px solid var(--compass-border); }
.compass-term-summary { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--compass-space-2); min-height: var(--compass-control); padding-inline: var(--compass-space-2); list-style: none; cursor: pointer; background: var(--compass-page); border-bottom: 1px solid var(--compass-border); font-size: var(--compass-type-14); font-weight: var(--compass-weight-strong); }
.compass-term-summary::-webkit-details-marker { display: none; }
.compass-term[open] > .compass-term-summary .compass-glyph { transform: rotate(180deg); }
.compass-term > .compass-dash-list { margin-block: var(--compass-space-2); }
.compass-dash-list .ic-DashboardCard { min-height: 28px; grid-template-columns: minmax(0, 1fr); }
.compass-card-more { all: unset; position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--compass-control); padding-inline: var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); font-size: var(--compass-type-13); font-weight: var(--compass-weight-strong); color: var(--compass-ink); cursor: pointer; }
.compass-card-more:hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
.compass-dash-grid .compass-card-more { margin-top: auto; }
.compass-cue { display: inline-flex; align-items: center; gap: var(--compass-space-1); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--compass-secondary); }
.compass-cue[data-state="missing"] { color: var(--compass-accent); }
.compass-cue[data-state="clear"] { color: var(--compass-good); }
.compass-ring { display: block; flex: none; width: 24px; height: 24px; }
.compass-ring-track { fill: none; stroke: var(--compass-accent-track); stroke-width: 3px; }
.compass-ring-fill { fill: none; stroke: var(--compass-accent); stroke-width: 3px; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
.compass-ring[data-complete="true"] .compass-ring-fill { stroke: var(--compass-green); }
/* View More overlay (native dialog) */
.compass-course-dialog { width: min(40rem, 92vw); max-height: 85vh; overflow-y: auto; padding: var(--compass-space-6); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); background: var(--compass-surface); color: var(--compass-ink); box-shadow: var(--compass-shadow-high); font: 14px/1.55 var(--compass-font-sans); }
.compass-course-dialog::backdrop { background: hsl(220 15% 10% / 0.55); }
.compass-cd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--compass-space-3); }
.compass-cd-head h2 { margin: 0; font-size: var(--compass-type-18); }
.compass-cd-head .compass-icon-btn { font-size: 20px; }
.compass-cd-body h3 { margin: var(--compass-space-4) 0 var(--compass-space-2); padding-bottom: var(--compass-space-1); border-bottom: 1px solid var(--compass-hairline); font-size: var(--compass-type-12); text-transform: uppercase; letter-spacing: 0.15em; color: var(--compass-secondary); }
.compass-cd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--compass-space-2); margin: var(--compass-space-3) 0 0; padding: 0; list-style: none; font-size: var(--compass-type-13); color: var(--compass-secondary); }
.compass-cd-facts b { display: block; color: var(--compass-ink); }
.compass-cd-due { display: grid; gap: var(--compass-space-1); margin: 0; padding: 0; list-style: none; }
.compass-cd-due li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); font-size: var(--compass-type-13); }
.compass-cd-line, .compass-cd-brief { margin: var(--compass-space-1) 0 0; font-size: var(--compass-type-13); color: var(--compass-secondary); }
.compass-cd-brief { color: var(--compass-ink); }
.compass-bar-head { display: flex; justify-content: space-between; font-size: var(--compass-type-12); color: var(--compass-secondary); font-variant-numeric: tabular-nums; }
.compass-bar-track { height: 8px; margin-top: var(--compass-space-1); border-radius: 0; background: var(--compass-accent-track); overflow: hidden; }
.compass-bar-fill { height: 100%; background: var(--compass-accent); }
.compass-cd-links { display: flex; flex-wrap: wrap; gap: var(--compass-space-2); }
.compass-theme a.compass-cd-link { display: inline-flex; align-items: center; min-height: var(--compass-control); padding-inline: var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); font-size: var(--compass-type-13); text-decoration: none; }
.compass-cd-link:hover { background: var(--compass-accent-tint); }

/* Loading and empty */
.compass-skeleton { border-radius: var(--compass-radius-card); background: linear-gradient(90deg, var(--compass-page), var(--compass-border), var(--compass-page)) 0 0 / 200% 100%; animation: compass-shimmer 1.2s linear infinite; }
@keyframes compass-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .compass-skeleton { animation: none; } }
.compass-empty { padding: var(--compass-space-4) var(--compass-space-3); font-size: var(--compass-type-13); color: var(--compass-secondary); }
.ic-DashboardCard__box > .compass-empty, .compass-tab-card .compass-empty { padding-inline: 0; }
.compass-dash-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Compass panel and its edge */
#compass-side-panel, .compass-panel-edge { grid-column: 4; grid-row: 1 / -1; min-width: 0; background: var(--compass-surface); border-inline-start: 1px solid var(--compass-border); color: var(--compass-ink); }
#compass-side-panel { display: flex; flex-direction: column; overflow: hidden; }
.compass-panel-edge { display: flex; flex-direction: column; align-items: center; gap: var(--compass-space-3); padding-top: var(--compass-space-3); }
:root:not([data-compass-panel="open"]) #compass-side-panel,
:root:not([data-compass-panel="collapsed"]) .compass-panel-edge { display: none; }
.compass-panel-header { display: flex; justify-content: flex-end; align-items: center; gap: var(--compass-space-1); padding: var(--compass-space-1) var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-panel-tab[aria-selected="true"] { background: var(--compass-accent-tint); color: var(--compass-accent); font-weight: var(--compass-weight-strong); box-shadow: inset 0 -3px var(--compass-accent); }
.compass-panel-body { flex: 1; min-height: 0; overflow-y: auto; }
.compass-panel-body[data-tab="ask"] { display: flex; flex-direction: column; overflow: hidden; }
.compass-panel-body::before { content: attr(aria-label); display: block; padding: var(--compass-space-2) var(--compass-space-3) 0; font-size: var(--compass-type-12); text-transform: uppercase; letter-spacing: 0.15em; font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-panel-body .compass-button, .compass-panel-body :is(.compass-ck-acts, .compass-fix-actions) .compass-button { min-height: 36px; }
@media (pointer: coarse), (max-width: 768px) { .compass-panel-body .compass-button, .compass-panel-body :is(.compass-ck-acts, .compass-fix-actions) .compass-button { min-height: 44px; } }
.compass-tool-label { display: block; margin-bottom: calc(-1 * var(--compass-space-1)); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-filter-toggle { display: none; }

/* Edit History feed */
.compass-feed { margin: 0; padding: 0; list-style: none; }
.compass-change { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--compass-space-3); padding: var(--compass-space-3); border-bottom: 1px solid var(--compass-border); cursor: pointer; }
.compass-change:hover, .compass-change[aria-current="true"] { background: var(--compass-accent-tint); }
.compass-change[aria-current="true"] b { color: var(--compass-accent); }
.compass-change b { display: block; font-size: var(--compass-type-13); }
.compass-change .compass-meta { display: block; }
.compass-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 0; background: var(--compass-maroon); color: var(--compass-on-maroon); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
.compass-tags { display: flex; flex-wrap: wrap; gap: var(--compass-space-1); margin-top: var(--compass-space-1); }
.compass-tag { padding-inline: var(--compass-space-1); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); color: var(--compass-secondary); font-size: var(--compass-type-12); }
.compass-feed-heading { margin: 0; padding: var(--compass-space-3) var(--compass-space-3) var(--compass-space-1); border-bottom: 1px solid var(--compass-hairline); font-size: var(--compass-type-12); text-transform: uppercase; letter-spacing: 0.15em; color: var(--compass-secondary); }
.compass-other { display: flex; justify-content: space-between; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-3); font-size: var(--compass-type-13); }

/* Health: 15 deterministic criteria, read-only. */
.compass-solo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-solo-id b { display: block; font-size: var(--compass-type-16); }
.compass-solo-id span { font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-row-right { display: inline-flex; align-items: center; gap: var(--compass-space-2); }
.compass-health-detail { padding: var(--compass-space-3); background: var(--compass-page); }
.compass-tier + .compass-tier { margin-top: var(--compass-space-3); }
.compass-tier-head { display: flex; align-items: center; gap: var(--compass-space-2); }
.compass-pn-label { font-size: var(--compass-type-12); text-transform: uppercase; letter-spacing: 0.15em; color: var(--compass-secondary); font-weight: var(--compass-weight-strong); }
.compass-tier-score { font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); font-variant-numeric: tabular-nums; }
.compass-tier-note { margin: var(--compass-space-1) 0 0; font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-ck-list { display: flex; flex-direction: column; gap: var(--compass-space-1); margin: var(--compass-space-2) 0 0; padding: 0; list-style: none; }
.compass-ck-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-surface); font-size: var(--compass-type-13); }
.compass-ck-mark { display: inline-flex; color: var(--compass-faint); }
.compass-ck-mark .compass-glyph { width: 18px; height: 18px; }
.compass-ck-item[data-mark="pass"] .compass-ck-mark { color: var(--compass-green); }
.compass-ck-item[data-mark="fail"] .compass-ck-mark { color: var(--compass-accent); }
.compass-ck-text { min-width: 0; }
.compass-ck-why { display: block; font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-theme a.compass-ck-btn { display: inline-flex; align-items: center; min-height: var(--compass-control); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-accent); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
/* Fix leads; the link steps back to tertiary so the row has one obvious action. */
.compass-theme .compass-fix + a.compass-ck-btn, .compass-theme .compass-fix-undo + a.compass-ck-btn, .compass-theme .compass-ck-acts > button + a.compass-ck-btn, .compass-theme a.compass-ck-btn + a.compass-ck-btn { color: var(--compass-secondary); font-weight: 400; }
.compass-ck-acts { display: inline-flex; align-items: center; gap: var(--compass-space-2); }
/* Open in Canvas and How to fix are icon links: Fix stays the one labelled action per row. */
.compass-theme a.compass-ck-btn:has(> .compass-glyph) { justify-content: center; width: 36px; min-height: 36px; border-radius: var(--compass-radius-control); color: var(--compass-secondary); text-decoration: none; }
.compass-theme a.compass-ck-btn:has(> .compass-glyph):hover { background: var(--compass-accent-tint); color: var(--compass-accent); }
@media (pointer: coarse), (max-width: 768px) { .compass-theme a.compass-ck-btn:has(> .compass-glyph) { width: 44px; min-height: 44px; } }
.compass-ck-acts .compass-button, .compass-fix-actions .compass-button { min-height: 28px; padding-inline: var(--compass-space-3); font-size: var(--compass-type-12); }
.compass-fix-review { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--compass-space-2); padding: var(--compass-space-2) var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-page, var(--compass-surface)); font-size: var(--compass-type-12); }
.compass-fix-who { font-weight: var(--compass-weight-strong); color: var(--compass-accent); }
.compass-fix-line { margin: 0; display: flex; align-items: center; gap: var(--compass-space-2); overflow-wrap: anywhere; }
.compass-fix-confirm { font-weight: var(--compass-weight-strong); }
.compass-fix-text { font: inherit; font-size: var(--compass-type-13); padding: var(--compass-space-2); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-surface); color: inherit; resize: vertical; }
.compass-fix-text:disabled { color: var(--compass-secondary); background: var(--compass-sunken, var(--compass-bg)); cursor: not-allowed; }
.compass-fix-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--compass-space-2); }
.compass-fix-opt { display: flex; flex-direction: column; gap: 2px; padding: var(--compass-space-2); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); cursor: pointer; }
.compass-fix-opt:has(input:checked) { border-color: var(--compass-accent); }
.compass-fix-actions { display: flex; gap: var(--compass-space-2); }
.compass-good-toggle, .compass-a11y-type { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: var(--compass-space-2); width: 100%; min-height: var(--compass-control); padding-inline: var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-surface); font-size: var(--compass-type-13); font-weight: var(--compass-weight-strong); color: var(--compass-good); }
.compass-good-toggle:hover, .compass-a11y-type:hover { background: var(--compass-accent-tint); }
.compass-good-toggle[aria-expanded="true"] .compass-glyph { transform: rotate(180deg); }

/* Version compare: splits the page center. */
html.compass-theme.compass-diff-open #wiki_page_show .show-content { display: none; }
.compass-diff { background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-low); overflow: hidden; }
:root.compass-diff-open .compass-diff, :root.compass-diff-open .header-bar-outer-container { max-width: 64rem; }
.compass-diff-head, .compass-diff-row { display: grid; grid-template-columns: 1fr 1fr; }
.compass-diff-head > div { padding: var(--compass-space-3) var(--compass-space-4); background: var(--compass-page); border-bottom: 1px solid var(--compass-border); font-size: var(--compass-type-13); }
.compass-diff-head > div + div, .compass-diff-row > div + div { border-inline-start: 1px solid var(--compass-border); }
.compass-diff-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-3) var(--compass-space-4); border-bottom: 1px solid var(--compass-border); font-size: var(--compass-type-13); }
.compass-inferred { padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-accent-tint); color: var(--compass-accent); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
.compass-axe-tag { white-space: nowrap; }
.compass-diff-row > div { padding: var(--compass-space-2) var(--compass-space-4); font-size: var(--compass-type-14); }
.compass-diff-row del { background: var(--compass-del); text-decoration: line-through; }
.compass-diff-row ins { background: var(--compass-add); text-decoration: none; }
.compass-diff-fold { all: unset; box-sizing: border-box; display: block; width: 100%; padding: var(--compass-space-2); border-block: 1px solid var(--compass-border); background: var(--compass-page); color: var(--compass-secondary); font-size: var(--compass-type-13); text-align: center; cursor: pointer; }
.compass-diff-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-2); padding: var(--compass-space-3) var(--compass-space-4); border-top: 1px solid var(--compass-border); }
.compass-status { margin-inline-end: auto; font-weight: var(--compass-weight-strong); }
.compass-status-bad { color: var(--compass-accent); }
.compass-status-good { color: var(--compass-good); }

/* Ask */
.compass-ask { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.compass-ask-context { margin: 0; padding: var(--compass-space-3); border-bottom: 1px solid var(--compass-border); background: var(--compass-page); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); color: var(--compass-secondary); }
.compass-panel-body[data-tab="ask"]::before { content: none; } .compass-ask-context::before { content: "Ask \00B7  "; } /* one band: panel name joins the context line */
.compass-ai-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--compass-space-3); padding: var(--compass-space-3); }
.compass-suggestions { display: grid; gap: var(--compass-space-2); }
.compass-suggestion { all: unset; box-sizing: border-box; cursor: pointer; min-height: var(--compass-control); padding: var(--compass-space-2) var(--compass-space-3); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-surface); font-size: var(--compass-type-13); color: var(--compass-ink); }
.compass-suggestion:not(:disabled):hover { background: var(--compass-accent-tint); }
.compass-suggestion:disabled { cursor: not-allowed; color: var(--compass-secondary); }
.compass-thread { display: flex; flex-direction: column; gap: var(--compass-space-3); }
.compass-q, .compass-a { max-width: 90%; padding: var(--compass-space-2) var(--compass-space-3); border-radius: var(--compass-radius-card); font-size: var(--compass-type-13); }
.compass-q { align-self: flex-end; background: var(--compass-page); border: 1px solid var(--compass-border); }
.compass-a { align-self: flex-start; background: var(--compass-surface); border: 1px solid var(--compass-border); }
.compass-a.compass-a-error { background: var(--compass-accent-tint); border-color: var(--compass-accent); }
.compass-a p + .compass-activity { margin-bottom: var(--compass-space-1); font-weight: 400; }
.compass-a p { margin: 0 0 var(--compass-space-2); }
.compass-activity { font-size: var(--compass-type-12); color: var(--compass-secondary); }
.compass-cite { font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); vertical-align: super; }
.compass-cite:not([href]) { color: var(--compass-faint); }
.compass-sources { margin: var(--compass-space-2) 0 0; padding: var(--compass-space-2) 0 0; border-top: 1px solid var(--compass-border); list-style: none; font-size: var(--compass-type-12); }
.compass-sources li { display: flex; gap: var(--compass-space-2); }
.compass-sources span { color: var(--compass-secondary); }
.compass-ask-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--compass-space-2); padding: var(--compass-space-3); border-top: 1px solid var(--compass-border); }
.compass-ask-form textarea { height: 4.5rem; padding: var(--compass-space-2); resize: none; font: inherit; font-size: var(--compass-type-13); color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); }
.compass-send { all: unset; cursor: pointer; align-self: end; display: inline-flex; align-items: center; justify-content: center; min-width: var(--compass-control); height: var(--compass-control); border-radius: var(--compass-radius-control); background: var(--compass-maroon); color: var(--compass-on-maroon); }
.compass-send:hover { background: var(--compass-maroon-hover); }
.compass-send:disabled { opacity: .5; cursor: not-allowed; }

/* Narrow: one column. Outline and panel are drawers; opening one closes the other. */
@media (max-width: 768px) {
  /* The document scrolls, so the course header scrolls away under a sticky top bar. */
  html.compass-theme body { height: auto; overflow: visible; }
  .compass-theme #application { height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; }
  .compass-theme #header.ic-app-header, .compass-rail-scrim { display: none; }
  :root:has(.compass-shortcut:not([hidden])) .compass-rail-scrim { display: block; z-index: 19; }
  .compass-term-summary, .compass-viewas-bar { top: 52px; }
  .compass-filter-toggle { display: inline-flex; align-self: flex-end; }
  .compass-finder-controls:not(.compass-filters-open) .compass-field:not(.compass-field-grow) { display: none; }
  #dashboard_header_container h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compass-field:not(.compass-field-grow) { flex: 1 1 9rem; } /* filters fill the row instead of stopping short */
  .compass-course-title { font-size: var(--compass-type-18); }
  .compass-theme #breadcrumbs li:not(:nth-last-child(2)):not(:only-child) { display: none; }
  .compass-theme .ic-app-nav-toggle-and-crumbs { position: sticky; top: 0; z-index: 10; grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: var(--compass-space-2); height: 52px; padding: 0 60px 0 var(--compass-space-2); background: var(--compass-surface); border-bottom: 1px solid var(--compass-border); }
  .compass-theme #courseMenuToggle { all: unset; cursor: pointer; display: grid; place-items: center; width: var(--compass-control); height: var(--compass-control); border-radius: var(--compass-radius-control); color: var(--compass-secondary); }
  .compass-theme .ic-app-crumbs { flex: 1; min-width: 0; }
  .compass-theme #breadcrumbs ol { display: flex; margin: 0; padding: 0; list-style: none; font-size: var(--compass-type-13); }
  .compass-theme .right-of-crumbs { display: none; }
  .compass-theme #breadcrumbs a { color: var(--compass-ink); font-weight: var(--compass-weight-strong); text-decoration: none; }
  .compass-course-head, .compass-theme #section-tabs-header-subtitle, .compass-theme #sticky-container > nav { grid-column: 1; }
  .compass-course-head { grid-row: 2; padding: var(--compass-space-3) var(--compass-space-3) 0; }
  .compass-theme #section-tabs-header-subtitle { grid-row: 3; padding-inline: var(--compass-space-3); }
  .compass-theme #sticky-container > nav { grid-row: 4; padding-inline: var(--compass-space-1); }
  .compass-theme #not_right_side.ic-app-main-content, :root[data-compass-outline="none"] #not_right_side.ic-app-main-content { grid-column: 1; grid-row: 5; overflow: visible; }
  .compass-theme #content.ic-Layout-contentMain { padding: var(--compass-space-4) var(--compass-space-3) 120px; }
  .compass-theme .show-content.user_content, .compass-tab-card { padding: var(--compass-space-4); }
  .compass-outline-edge { display: none !important; }
  .compass-outline { display: none; }
  html.compass-theme.compass-outline-open .compass-outline { display: flex !important; position: fixed; top: 52px; bottom: 0; left: 0; z-index: 12; width: 85vw; box-shadow: var(--compass-shadow-high); }
  .compass-panel-edge { position: fixed; top: 4px; right: 4px; z-index: 11; flex-direction: row; gap: 0; padding: 0 var(--compass-space-2) 0 0; border: 0; background: none; }
  #compass-side-panel { position: fixed; inset: 0; z-index: 13; border: 0; }
  .compass-diff-head, .compass-diff-row { grid-template-columns: 1fr; }
  .compass-diff-head > div + div, .compass-diff-row > div + div { border-inline-start: 0; border-top: 1px solid var(--compass-border); }
  .compass-theme .requirements_message, .compass-theme .hide-when-small { display: none; }
  .compass-item-actions, .compass-module-actions { opacity: 1; pointer-events: auto; }
  .compass-module-head:has(.compass-module-actions) .compass-module-title { padding-inline-end: 80px; } /* always-on Add item no longer covers the name */
}

/* Edit History: locked until Phase 2. */
.compass-locked { display: flex; align-items: center; gap: var(--compass-space-2); }
/* Accessibility: reuses Health rows. */
.compass-img-row { grid-template-columns: minmax(0, 1fr) auto; }
.compass-img-row[data-done="true"] { grid-template-columns: auto minmax(0, 1fr) auto; }
.compass-img-toggle { all: unset; grid-column: 1 / -1; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--compass-space-2); align-items: start; cursor: pointer; }
.compass-img-toggle:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: 2px; }
.compass-thumb { width: 64px; height: 48px; border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-surface); color: var(--compass-secondary); }
.compass-thumb[data-big] { width: 100%; max-width: 320px; height: auto; max-height: 120px; }
.compass-img-toggle[aria-expanded="true"] { grid-template-columns: minmax(0, 1fr); }
.compass-img-toggle[aria-expanded="true"] > .compass-thumb { display: none; }
.compass-img-where { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--compass-space-2); margin: 0; font-size: var(--compass-type-12); }
.compass-img-where dt { font-weight: var(--compass-weight-strong); }
.compass-img-where dd { margin: 0; }
.compass-img-pick { grid-template-columns: 1fr; margin: 0; padding: 0; border: 0; }
.compass-a11y-type { color: inherit; font-weight: normal; }
.compass-a11y-type > span:first-of-type { flex: 1; }
.compass-a11y-type > .compass-glyph:first-child { color: var(--compass-secondary); }
.compass-a11y-back { display: inline-flex; align-items: center; gap: var(--compass-space-1); margin-bottom: var(--compass-space-3); font-size: var(--compass-type-13); }
.compass-solo-row > .compass-bar-track { width: 96px; }
.compass-a11y-type:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: 2px; }
.compass-axe-row { padding: var(--compass-space-2) var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }
.compass-axe-row .compass-button { display: inline-flex; align-items: center; gap: var(--compass-space-1); }
.compass-axe-status { padding: var(--compass-space-2) var(--compass-space-3); border-bottom: 1px solid var(--compass-border); }

/* To Do and Notes tabs: course dropdowns reuse the Health toggle and check rows. */
.compass-dd + .compass-dd { margin-top: var(--compass-space-2); }
.compass-dd-toggle { color: var(--compass-ink); }
.compass-dd-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compass-dd-body > .compass-ck-list { margin-top: var(--compass-space-1); }
.compass-td-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.compass-td-row .compass-ck-text, .compass-note .compass-ck-text { display: flex; flex-direction: column; gap: 2px; }
.compass-td-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-1); }
.compass-td-row[data-struck] .compass-td-title { text-decoration: line-through; color: var(--compass-secondary); font-weight: 400; }
.compass-td-done[aria-pressed="true"] { color: var(--compass-good); }
.compass-td-missed { padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-del); color: var(--compass-accent); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
.compass-td-consequence { font-size: var(--compass-type-12); color: var(--compass-ink); }
.compass-td-msg, .compass-note-page { display: inline-flex; align-items: center; gap: var(--compass-space-1); width: fit-content; font-size: var(--compass-type-12); color: var(--compass-accent); }
.compass-td-sub { display: flex; align-items: center; gap: var(--compass-space-1); min-height: 36px; margin-top: var(--compass-space-1); padding-inline: var(--compass-space-2); font-size: var(--compass-type-13); color: var(--compass-secondary); text-decoration: none; }
.compass-td-sub[aria-expanded="true"] .compass-glyph { transform: rotate(180deg); }
.compass-td-sub:focus-visible, .compass-dd-toggle:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: 2px; }
.compass-note { align-items: start; }
.compass-note-details { color: var(--compass-secondary); }
.compass-note .compass-ck-acts { display: flex; gap: var(--compass-space-1); }
.compass-note-form { grid-column: 1 / -1; display: grid; gap: var(--compass-space-2); font-size: var(--compass-type-13); }
.compass-note-field { display: grid; gap: 2px; font-weight: var(--compass-weight-strong); }
.compass-note-field .compass-ck-why { font-weight: 400; }
.compass-note-field .compass-fix-text { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); padding: var(--compass-space-1) var(--compass-space-2); color-scheme: light; }
.compass-note-field .compass-fix-text[aria-invalid="true"] { border-color: var(--compass-accent); }
.compass-note-err { margin: 0; font-size: var(--compass-type-12); color: var(--compass-accent); font-weight: var(--compass-weight-strong); }
.compass-note-add { display: inline-flex; align-items: center; gap: var(--compass-space-1); }
.compass-sample { display: contents; }
.compass-panel-tab[hidden] { display: none; }
.compass-td-soon { padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-gold); color: #000000; font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
/* UI review fixes: lock badge on locked tabs, header status, one-line note labels. */
.compass-panel-tab { position: relative; }
.compass-tab-lock { position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; padding: 1px; border-radius: 0; background: var(--compass-surface); color: var(--compass-secondary); stroke-width: 2; }
.compass-tab-lock[hidden] { display: none; }
.compass-td-status { font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); white-space: nowrap; }
.compass-td-status[data-kind="missed"] { padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-del); color: var(--compass-accent); }
.compass-td-status[data-kind="soon"] { padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-gold); color: #000000; }
.compass-note-label { display: flex; align-items: baseline; gap: var(--compass-space-1); }
.compass-note-page { text-decoration: underline; font-weight: var(--compass-weight-strong); }
/* Spec 24: tab order Health, To Do, then the locked tabs (DOM order kept), quick add, own tasks, AI inside To Do. */
:root[data-compass-s24] .compass-panel-tab[data-tab="health"] { order: 1; }
:root[data-compass-s24] .compass-panel-tab[data-tab="todo"] { order: 2; }
:root[data-compass-s24] .compass-panel-tab[data-tab="ask"] { order: 3; }
:root[data-compass-s24] .compass-panel-tab[data-tab="notes"] { order: 4; }
:root[data-compass-s24] .compass-panel-tab[data-tab="a11y"] { order: 5; }
:root[data-compass-s24] .compass-panel-tab[data-tab="changes"] { order: 6; }
:root[data-compass-s24] .compass-panel-close { order: 7; }
.compass-td-add { display: flex; gap: var(--compass-space-2); align-items: center; }
.compass-td-add input[name="title"] { flex: 1; min-width: 0; }
.compass-td-add .compass-fix-text { box-sizing: border-box; min-height: 36px; font: inherit; font-size: var(--compass-type-13); color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); padding: var(--compass-space-1) var(--compass-space-2); color-scheme: light; }
.compass-td-add input[type="date"] { width: 9.5rem; }
.compass-td-edit { grid-column: 1 / -1; }
.compass-td-own-acts { display: flex; gap: var(--compass-space-3); font-size: var(--compass-type-12); }
.compass-hd, .compass-help { display: grid; gap: var(--compass-space-1); margin-top: var(--compass-space-1); padding: var(--compass-space-2); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); background: var(--compass-page); font-size: var(--compass-type-12); }
.compass-hd .compass-button, .compass-help .compass-button { width: fit-content; }
.compass-quote { display: block; padding-inline-start: var(--compass-space-2); color: var(--compass-secondary); font-style: italic; }
.compass-help p { margin: 0; }
.compass-help-steps { margin: 0; padding-inline-start: var(--compass-space-4); display: grid; gap: var(--compass-space-1); }
.compass-help-btn { display: inline-flex; align-items: center; gap: var(--compass-space-1); width: fit-content; font-size: var(--compass-type-12); }
.compass-help-ask { display: flex; gap: var(--compass-space-1); }
.compass-help-ask .compass-fix-text { flex: 1; min-width: 0; font: inherit; color: var(--compass-ink); background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); padding: var(--compass-space-1) var(--compass-space-2); }
.compass-help-reply { font-weight: var(--compass-weight-strong); }
.compass-pin[aria-pressed="true"], .compass-sc-pin[aria-pressed="true"] { color: var(--compass-accent); }
/* Spec 24 review: one-line hidden deadline, Source disclosure, row menu, Coming soon overflow. */
.compass-hd-line { border: 0; background: none; padding: 0; margin-top: var(--compass-space-1); gap: 2px; }
.compass-hd-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--compass-space-1); font-size: var(--compass-type-13); }
.compass-hd-main > .compass-glyph { color: var(--compass-accent); }
.compass-hd-add { color: var(--compass-accent); border: 1px solid var(--compass-border); }
.compass-hd-added { display: inline-flex; align-items: center; gap: 2px; padding-inline: var(--compass-space-1); border-radius: var(--compass-radius-control); background: var(--compass-add); color: var(--compass-good); font-size: var(--compass-type-12); font-weight: var(--compass-weight-strong); }
.compass-hd-src summary { cursor: pointer; width: fit-content; font-size: var(--compass-type-12); color: var(--compass-secondary); text-decoration: underline; }
.compass-hd-src .compass-quote { margin-top: 2px; }
.compass-td-row .compass-ck-text { position: relative; }
.compass-td-menu-wrap { position: absolute; top: 0; right: 0; }
.compass-td-menu { position: absolute; right: 0; top: 30px; z-index: 5; min-width: 9rem; margin: 0; padding: var(--compass-space-1) 0; list-style: none; background: var(--compass-surface); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-control); box-shadow: var(--compass-shadow-high); }
.compass-td-menu button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: var(--compass-space-1) var(--compass-space-3); cursor: pointer; font-size: var(--compass-type-13); color: var(--compass-ink); }
.compass-td-menu button:hover, .compass-td-menu button:focus-visible { background: var(--compass-accent-tint); outline: none; }
.compass-td-menu [role="separator"] { height: 1px; margin: var(--compass-space-1) 0; background: var(--compass-border); }
.compass-td-menu .compass-td-menu-del { color: var(--compass-accent); font-weight: var(--compass-weight-strong); }
.compass-panel-header { position: relative; }
:root[data-compass-s24] .compass-soon-btn { order: 6; }
.compass-soon-list { position: absolute; top: 100%; right: var(--compass-space-2); z-index: 6; width: 300px; padding: var(--compass-space-2) var(--compass-space-3); background: var(--compass-surface); color: var(--compass-ink); border: 1px solid var(--compass-border); border-radius: var(--compass-radius-card); box-shadow: var(--compass-shadow-high); }
.compass-soon-list ul { margin: var(--compass-space-1) 0 0; padding: 0; list-style: none; display: grid; gap: var(--compass-space-2); }
.compass-soon-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--compass-space-2); align-items: start; font-size: var(--compass-type-13); }
.compass-soon-list li > .compass-glyph { margin-top: 2px; color: var(--compass-secondary); }
.compass-soon-list li > span { display: grid; }
/* s24c: Coming soon popover sits in flow under the tab row at the right edge, so it never covers the quick add bar. */
:root[data-compass-s24] .compass-panel-header { flex-wrap: wrap; }
.compass-soon-list { position: static; order: 8; flex-basis: 100%; width: auto; max-width: 260px; margin: var(--compass-space-1) 0 var(--compass-space-2) auto; }
.compass-soon-list li { font-size: var(--compass-type-12); }
#compass-soon-head:focus { outline: none; }
#compass-soon-head:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: 2px; }
.compass-help-pages a { color: var(--compass-accent); text-decoration: underline; }
.compass-help a:focus-visible, .compass-help .compass-button:focus-visible, .compass-help-btn:focus-visible, .compass-hd-src summary:focus-visible, .compass-td-more:focus-visible, .compass-hd-add:focus-visible { outline: 2px solid var(--compass-accent); outline-offset: 2px; box-shadow: none; }
.compass-help-btn:focus:not(:focus-visible), .compass-help a:focus:not(:focus-visible), .compass-help .compass-button:focus:not(:focus-visible), .compass-td-more:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.compass-theme .compass-help .compass-help-pages a.compass-row-link { color: var(--compass-accent); text-decoration: underline; }