/* Minga theme on Tailwind CSS — Google Cloud Console-inspired: full-width white
   app bar, #f8f9fa canvas, flat white panels with #dadce0 hairlines and 8px
   radii, Google Blue #1a73e8 as the main accent, Roboto with medium-weight
   headings, dense sentence-case tables, and tinted status chips. */

:root {
  /* type scale (GCC density: 12/13/14px steps) */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-xl: 1.5rem;
  --fs-display: 2.75rem;

  --ink: #202124;
  --ink-2: #5f6368;
  --ink-3: #80868b;
  --accent: #1a73e8;
  --accent-hover: #1765cc;
  --border: #dadce0;
  --surface: #fff;
  --canvas: #f8f9fa;

  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 4px;
  --elev-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);

  --font-display: 'Google Sans', 'Roboto', system-ui, sans-serif;
  --body-font-family: 'Roboto', system-ui, sans-serif;
  --body-color: #202124;
  --link-color: #1a73e8;
  --link-hover-color: #1765cc;
}

html { min-height: 100%; }
body {
  background: var(--canvas);
  min-height: 100%;
  color: var(--body-color);
  font-family: var(--body-font-family);
  line-height: 1.5;
}
body.app-frame {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
a { color: var(--link-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); text-decoration: none; }
b, strong { font-weight: 500; }

/* full-width app bar */
.app-bar {
  position: sticky; top: 0; z-index: 1020;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.app-bar-inner {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.6rem 1.5rem;
}
.app-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  min-width: 0;
}
.brand { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--ink-2) !important; }
.brand:hover { color: var(--accent) !important; }
.nav-mini { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.nav-mini:hover { color: var(--accent); }
.account-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.account-link:hover {
  color: var(--accent);
}
.account-link span:last-child {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-body {
  width: 100%;
  flex: 1 0 auto;
  display: flex;
  align-items: stretch;
}
.page-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3.5rem;
  flex: 1 0 auto;
}
.has-sidebar .page-shell {
  /* Fluid console layout (Campuswire/GCC style): every in-app section uses
     the full viewport width, so wide screens aren't bracketed by dead canvas
     and section-to-section navigation never shifts the content edges. The
     shell must flex next to the fixed sidebar, not take 100% viewport width. */
  max-width: none;
  margin: 0;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
/* The logged-out course overview has no sidebar, so it would otherwise fall
   back to the narrow centered shell. Give it the same fluid full-width layout
   as the in-app view so the public page uses the whole screen and doesn't
   drift from the signed-in overview. */
.page-shell-fluid {
  max-width: none;
  margin: 0;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
/* The forum fills the remaining viewport height too — its panes scroll
   internally, so reserving space for the page footer just wastes screen. */
.has-sidebar .page-shell:has(.forum-workspace) {
  padding-bottom: 1rem;
}
.content-frame { min-height: 100%; }
.course-sidebar {
  flex: 0 0 232px;
  width: 232px;
  padding: 1rem 0.75rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.course-sidebar-head {
  padding: 0.35rem 0.6rem 0.85rem;
  border-bottom: 1px solid #e8eaed;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.course-sidebar-titles { min-width: 0; flex: 1; }
.course-sidebar-settings {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-top: -0.1rem;
  border-radius: 6px;
  color: var(--ink-3);
  text-decoration: none;
}
.course-sidebar-settings:hover {
  color: var(--accent);
  background: #f1f3f4;
}
.course-sidebar-code {
  display: block;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
}
a.course-sidebar-code:hover { color: var(--accent); }
.course-sidebar-term {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.course-sidebar-nav {
  display: grid;
  gap: 0.15rem;
}
.sidebar-link {
  display: flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.sidebar-link:hover {
  color: var(--ink);
  background: #f1f3f4;
}
.sidebar-link.active {
  color: #1967d2;
  background: #e8f0fe;
}
.sidebar-section {
  margin: 0.85rem 0.65rem 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.4rem;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #e8eaed;
}
.context-crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.context-crumbs a {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-weight: 500;
}
.context-crumbs a:hover { color: var(--accent); }
.context-separator {
  flex: 0 0 auto;
  color: var(--ink-3);
}
.context-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
}
.context-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); color: var(--ink); margin: 1.4rem 0 0.6rem; }
h2, .section h4 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 500; color: var(--ink); margin: 1.4rem 0 0.7rem; }
.muted { color: var(--ink-2); }

/* micro-labels: 12px medium gray, sentence case (GCC table-header style) */
.term-label, .side-label, .data-table thead th {
  font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: 0.02em; text-transform: none;
}

/* surfaces: flat, hairline-bordered */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.alert-dismissable { padding-right: 2.75rem; }
/* .alert sets display:flex, which would otherwise beat the hidden attribute */
.alert[hidden] { display: none; }
.submit-progress {
  flex: 1 1 12rem;
  max-width: 20rem;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.submit-progress[hidden] { display: none; }
.submit-progress-bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 120ms linear;
}
.alert-info {
  color: #174ea6;
  background: #e8f0fe;
  border-color: #d2e3fc;
}
.alert-warning {
  color: #b06000;
  background: #fef7e0;
  border-color: #fce8b2;
}
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.15rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  min-width: 4.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { color: var(--ink); }
.btn-sm {
  min-height: 2rem;
  min-width: 3.75rem;
  padding: 0.32rem 0.65rem;
  font-size: var(--fs-xs);
}
.btn-lg {
  min-height: 2.6rem;
  padding: 0.58rem 1rem;
  font-size: var(--fs-base);
}
.btn-danger {
  color: #fff;
  background: #d93025;
  border-color: #d93025;
}
.btn-danger:hover,
.btn-danger:focus {
  color: #fff;
  background: #c5221f;
  border-color: #c5221f;
}
.btn-primary {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn-secondary {
  color: #3c4043;
  background: #fff;
  border-color: var(--border);
}
.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--ink);
  background: #f8f9fa;
  border-color: #cfd1d4;
}
.btn-link {
  min-height: auto;
  min-width: 0;
  padding: 0.25rem 0.35rem;
  color: var(--accent);
  background: transparent;
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: var(--accent-hover);
  background: transparent;
}
.btn-quiet {
  min-width: 0;
  color: var(--ink-2);
  background: transparent;
  border-color: transparent;
}
.btn-quiet:hover,
.btn-quiet:focus {
  color: var(--ink);
  background: transparent;
  border-color: transparent;
}
.btn-quiet.active {
  color: #1967d2;
  background: transparent;
  border-color: transparent;
}
.btn-quiet.active-success {
  color: #137333;
  background: transparent;
  border-color: transparent;
}
.btn-quiet.active-warning {
  color: #b06000;
  background: transparent;
  border-color: transparent;
}
.btn-quiet.htmx-request,
.htmx-request .btn-quiet,
.htmx-request.btn-quiet {
  opacity: 0.62;
  cursor: wait;
}
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
}
.btn-close::before,
.btn-close::after {
  position: absolute;
  width: 0.85rem;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.btn-close::before { transform: rotate(45deg); }
.btn-close::after { transform: rotate(-45deg); }
.btn-close:hover { background: rgba(60, 64, 67, 0.08); color: var(--ink); }
.alert .btn-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
}
.field-control, .field-select {
  display: block;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background-color: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.field-select {
  padding-right: 2rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #5f6368 50%), linear-gradient(135deg, #5f6368 50%, transparent 50%);
  background-position: calc(100% - 0.95rem) 50%, calc(100% - 0.65rem) 50%;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
}
.field-control-sm,
.field-select-sm {
  min-height: 2rem;
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  font-size: var(--fs-xs);
}
.field-control:focus, .field-select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}
textarea.field-control { min-height: 6rem; resize: vertical; }
.field-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.field-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.4rem;
  min-width: 0;
}
.field-check-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 0.9rem;
}
.field-check-input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: 0;
  vertical-align: top;
  accent-color: var(--accent);
}
.selection-item .field-check-input {
  margin: 0;
}
.field-check-inline .field-check-input {
  margin: 0;
}
.field-check-label {
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.25;
}
.field-check.disabled,
.field-check:has(.field-check-input:disabled) {
  color: var(--ink-3);
  cursor: not-allowed;
}
.field-check:has(.field-check-input:disabled) .field-check-label {
  color: var(--ink-3);
}
.field-help {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

/* shared app primitives */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
}
.page-header-main { min-width: 0; }
.page-kicker {
  margin: 0 0 0.25rem;
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.page-kicker a { font-weight: 500; }
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.page-subtitle {
  margin: 0.35rem 0 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.toolbar .field-control,
.toolbar .field-select { width: auto; }
.toolbar-search { min-width: 16rem; max-width: 24rem; }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.panel-body { padding: 1rem 1.15rem; }
.panel-section + .panel-section { border-top: 1px solid #e8eaed; }
.status-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.4rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.status-blue { color: #1967d2; background: #e8f0fe; }
.status-info { color: #129eaf; background: #e4f7fb; }
.status-green { color: #137333; background: #e6f4ea; }
.status-amber { color: #b06000; background: #fef7e0; }
.status-red { color: #c5221f; background: #fce8e6; }
.status-purple { color: #8430ce; background: #f3e8fd; }
.status-gray { color: var(--ink-2); background: #f1f3f4; }
.status-outline {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
}
.meta-line {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.action-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.action-row-end { margin-left: auto; }
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
}
.form-row {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.form-row > * { min-width: 0; }
.placeholder-frame {
  min-height: 15rem;
  background: #fff;
  border: 1px dashed #dadce0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.placeholder-row {
  display: grid;
  grid-template-columns: 7rem 1fr 10rem;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid #eef0f2;
  background: #fcfcfd;
}
.placeholder-row:last-child { border-bottom: 0; }
.placeholder-line {
  height: 0.65rem;
  border-bottom: 1px solid #dadce0;
  border-radius: 0;
  background: transparent;
}
.data-table-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.data-table-shell .data-table {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
.data-table-shell-flush {
  border-width: 1px 0 0;
  border-radius: 0;
}
.data-table-title {
  font-weight: 500;
  color: var(--ink);
}
.data-table-subtext {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.meta-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}
.meta-list div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
}
.meta-list dt {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.meta-list dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--ink);
}
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1rem;
  align-items: start;
}
.detail-main,
.detail-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.empty-note,
.system-note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  color: var(--ink-2);
  background: #f8f9fa;
  border: 1px dashed #dadce0;
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
}
.placeholder-frame > .empty-note,
.placeholder-frame > .system-note {
  border-width: 1px 0 0;
  border-radius: 0;
  background: #fff;
}
.empty-note::before,
.system-note::before {
  flex: 0 0 auto;
  width: 3px;
  height: 1.4rem;
  border-radius: 999px;
  background: #dadce0;
  content: "";
}
.system-note::before { background: #aecbfa; }
.empty-inline {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.05rem 0 0.05rem 0.55rem;
  border-left: 3px solid #dadce0;
  color: var(--ink-3);
  background: transparent;
  font-size: var(--fs-2xs);
  font-weight: 500;
  font-style: italic;
}
.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grade-table th:not(:first-child),
.grade-table td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.grade-table th:first-child,
.grade-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.grade-table thead th:first-child { z-index: 2; }
.compact-edit-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 5.5rem 4.5rem auto auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.compact-edit-row-4 {
  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, auto) auto auto;
}
.compact-edit-row:last-child { margin-bottom: 0; }
.readonly-field {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-sm);
  background: #f8f9fa;
  color: var(--ink);
  font-size: var(--fs-xs);
}
.selection-list {
  display: grid;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.selection-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #e8eaed;
}
.selection-item:last-child { border-bottom: 0; }
.selection-item.selected {
  grid-template-columns: minmax(0, 1fr) auto;
  background: #f8f9fa;
}
.selection-item.disabled {
  color: var(--ink-3);
  background: #f8f9fa;
}
.selection-item.disabled .data-table-title,
.selection-item.disabled .data-table-subtext {
  color: var(--ink-3);
}
.team-picker-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #f8f9fa;
}
.team-picker-list {
  max-height: 24rem;
}
.selected-team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.selected-team-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid #cfd1d4;
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.selected-team-chip span {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.selected-team-chip-self {
  border-color: #c8e6c9;
  background: #f7fbf8;
}
.modal-subtitle {
  margin: 0.15rem 0 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.25rem;
  background: rgba(32, 33, 36, 0.42);
}
.modal.show {
  display: block;
}
.modal-open {
  overflow: hidden;
}
.modal-dialog {
  position: relative;
  width: min(100%, 34rem);
  margin: 2rem auto;
  pointer-events: none;
}
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 4rem);
}
.modal-lg {
  width: min(100%, 48rem);
}
.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100svh - 4rem);
}
.modal-dialog-scrollable .modal-content {
  max-height: calc(100svh - 4rem);
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(218, 220, 224, 0.95);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(60, 64, 67, 0.24);
  pointer-events: auto;
}
.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}
.modal-header {
  justify-content: space-between;
  border-bottom: 1px solid #e8eaed;
}
.modal-footer {
  justify-content: flex-end;
  border-top: 1px solid #e8eaed;
}
.modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.modal-body {
  padding: 1rem;
}
.person-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.person-cell-main {
  min-width: 0;
}
.person-name {
  display: block;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-meta {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.directory-list {
  display: grid;
  gap: 0.65rem;
}
.directory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e8eaed;
}
.directory-item:last-child { border-bottom: 0; }
/* Dropped/inactive members are shown muted in the People directory */
.directory-item.is-dropped .person-name,
tr.is-dropped td,
tr.is-dropped .person-name { color: var(--ink-3); }
.identity-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.identity-avatar,
.identity-panel .avatar-fallback,
.identity-panel .avatar {
  width: 56px;
  height: 56px;
  font-size: var(--fs-base);
}
.action-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.action-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 1rem;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.action-tile:hover {
  background: #f8f9fa;
  border-color: #cfd1d4;
  box-shadow: var(--elev-1);
}
.action-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: #1967d2;
  background: #e8f0fe;
  font-size: var(--fs-xs);
  font-weight: 700;
}
.action-tile-title {
  display: block;
  color: var(--ink);
  font-weight: 500;
}
.action-tile-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.schedule-title {
  display: block;
  font-weight: 500;
  color: var(--ink);
}
.schedule-notes {
  margin-top: 0.2rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.material-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.material-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-sm);
  background: #f8f9fa;
}
.inline-edit-row {
  display: grid;
  grid-template-columns: 9rem 8rem minmax(12rem, 1fr) minmax(10rem, 0.8fr) minmax(10rem, 0.8fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}

/* dense data tables */
.data-table {
  width: 100%;
  font-size: var(--fs-xs);
  border-collapse: separate; border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.data-table thead th {
  background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--ink-2); padding: 0.7rem 1rem;
}
.data-table td { padding: 0.65rem 1rem; border-bottom: 1px solid #e8eaed; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table-sm thead th,
.data-table-sm td {
  padding: 0.45rem 0.65rem;
}
.data-table-hover tbody tr:hover td {
  background: #f8f9fa;
}
.data-table-striped tbody tr:nth-child(odd) td {
  background: rgba(0, 0, 0, 0.015);
}

details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.8rem 1.1rem; margin-bottom: 0.9rem;
}
details summary { cursor: pointer; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-2); }
details[open] summary { margin-bottom: 0.6rem; }
.list-group-flush {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.35rem 1.25rem;
}

/* ------- course overview ------- */

.course-overview-header {
  align-items: center;
}
.course-institution-logo {
  display: block;
  max-height: 44px;
  max-width: 13rem;
  object-fit: contain;
  margin: 0 0 0.75rem;
}
.course-overview-mark {
  flex: 0 0 auto;
}
.course-overview-mark img {
  width: 88px;
  max-height: 88px;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.course-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1rem;
  align-items: start;
}
.course-overview-main,
.course-overview-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.section-text { font-size: 0.92em; color: #3c4043; }

/* Inline-editable overview regions (instructor edits description/staff/policies
   in place; the Edit pill sits unobtrusively at the top-right of each region). */
.ov-region { display: flow-root; }
.ov-region .section-text { font-size: 0.92em; color: #3c4043; }
/* Float the Edit pill so prose flows beside/below it instead of under it. */
.ov-edit-btn {
  float: right;
  margin: 0.05rem 0 0.35rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  text-decoration: none;
}
/* Keep the first line aligned with the floated pill (reset leading margin). */
.ov-region .section-text > :first-child { margin-top: 0; }
.ov-edit-btn:hover,
.ov-edit-btn:focus { color: var(--accent); border-color: var(--accent); }
.ov-region-empty {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.92em;
  color: var(--ink-3);
  background: #fbfbfc;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}
.ov-region-empty:hover { border-color: var(--accent); color: var(--accent); }
.ov-editing { padding-top: 0.1rem; }

/* Staff-only "Course settings" disclosure on the overview */
.ov-settings { padding: 0; }
.ov-settings-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ov-settings-summary::-webkit-details-marker { display: none; }
.ov-settings-summary::before {
  content: "›";
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.12s ease;
}
.ov-settings[open] .ov-settings-summary::before { transform: rotate(90deg); }
.ov-settings[open] .ov-settings-summary { border-bottom: 1px solid #e8eaed; }

.schedule-section { padding: 0; overflow: hidden; }
.public-schedule { font-size: var(--fs-xs); }
.public-schedule .date {
  width: 8.5rem;
  white-space: nowrap;
  color: var(--ink-2);
  font-weight: 500;
}
.public-schedule .materials {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.schedule .date { white-space: nowrap; color: var(--ink-2); }
tr.assignment td {
  background: #fff8e6 !important;
  border-left: 3px solid #fbbc04;
  font-size: var(--fs-xs);
}
tr.assignment .due-line { color: var(--ink-2); }
.due-callout {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.due-title {
  color: var(--ink);
  font-weight: 500;
}
tr.noclass td { color: var(--ink-3); }
tr.noclass a { color: var(--ink-3); }

.due { font-size: var(--fs-sm); color: #b06000; }
.materials a { margin: 0; font-weight: 500; }
.materials-list { margin: 0.2rem 0; padding-left: 1.2rem; font-size: 0.9em; }

/* --- inline schedule editing on the overview (instructor only) ---
   Goal: editing a row feels like editing it *in place*. The edit form reuses
   the display row's two-cell layout (date cell | topic cell), and fields sit
   exactly where their rendered content sits, with the same typography/rhythm,
   so toggling Edit causes no layout shift and the form is near-WYSIWYG. */
.schedule-act {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  list-style: none;
  border-radius: var(--radius-sm);
}
.schedule-act:hover { text-decoration: underline; }
.schedule-act:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  text-decoration: none;
}
.schedule-act::-webkit-details-marker { display: none; }

/* Per-row Edit / Delete: hidden until the row is hovered or focus is inside it
   (so they never compete with content), then fade in. Kept visible while any
   control in the row has focus, so keyboard users can always reach them. Only
   instructor rows (the ones carrying these actions) get the hover tint, so the
   read-only student schedule is untouched. */
.schedule-row-actions {
  float: right;
  display: inline-flex;
  gap: 0.15rem;
  margin: -0.15rem -0.25rem 0 0.6rem;
  opacity: 0;
  transition: opacity 0.12s ease;
}
tbody#schedule-rows tr:hover .schedule-row-actions,
tbody#schedule-rows tr:focus-within .schedule-row-actions { opacity: 1; }
/* keep them reachable for keyboard users even mid-fade */
.schedule-row-actions .schedule-act:focus-visible { opacity: 1; }
tbody#schedule-rows tr:has(.schedule-row-actions):hover > td { background: #f8f9fa; }
.schedule-row-actions .schedule-act {
  padding: 0.1rem 0.4rem;
  color: var(--ink-2);
  transition: color 0.12s ease, background 0.12s ease;
}
.schedule-row-actions .schedule-act:hover {
  color: var(--accent);
  background: #f1f3f4;
  text-decoration: none;
}
.schedule-row-actions .schedule-act-danger:hover { color: #c5221f; background: #fce8e6; }

/* Materials shown as outline chips. The pill IS the chip; the link sits inside
   it, and (for instructors) the remove "×" sits inside the pill's border too,
   trailing, so it is unambiguously bound to that chip. */
.material-chip { gap: 0.2rem; padding-right: 0.3rem; }
.material-chip:hover { border-color: #c6c9cd; }
.material-chip-link { color: inherit; font-weight: 500; }
.material-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.95rem; height: 0.95rem;
  border: 0; border-radius: 999px;
  background: none; color: var(--ink-3); cursor: pointer;
  font-size: 0.85rem; line-height: 1; padding: 0;
  transition: color 0.12s ease, background 0.12s ease;
}
.material-remove:hover { color: #c5221f; background: #fce8e6; }
.material-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* per-entry "+ Slides" disclosure — an inline trigger, not a boxed panel, so
   reset the global details card chrome. The "Shift dates…" disclosure below the
   table gets the same reset but stays block-level. */
.add-slides,
.schedule-shift {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.add-slides { display: inline-block; vertical-align: middle; }
/* when open, take a full-width line so the form panel left-aligns to the cell's
   content edge (matching the title) instead of trailing the toggle's position */
.add-slides[open] { display: block; width: 100%; }
.add-slides[open] > .add-slides-toggle { margin-left: -0.4rem; }
.schedule-shift { display: block; }
.add-slides-toggle {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.12rem 0.5rem 0.12rem 0.4rem;
  color: var(--accent);
  border: 1px dashed transparent;
  border-radius: 999px;
}
.add-slides-toggle:hover { text-decoration: none; background: #e8f0fe; }
.add-slides[open] > .add-slides-toggle {
  background: #e8f0fe;
  border-color: #c2d7f7;
}
.add-slides-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 0.95rem; height: 0.95rem;
  font-size: 0.85rem; font-weight: 600; line-height: 1;
}
.add-slides-form {
  margin-top: 0.5rem;
  margin-left: -0.4rem;
  padding: 0.6rem 0.7rem;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-md);
}
.add-slides-form,
.schedule-add-form,
.schedule-shift-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
}
.add-slides-form .field-control { margin: 0; width: auto; }
/* styled file picker: a .btn-secondary label wrapping the (hidden) native input,
   with the chosen filename shown as quiet text next to it */
.add-slides-file {
  display: inline-flex; align-items: center;
  flex: 0 0 auto; cursor: pointer; margin: 0;
}
.add-slides-file-input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.add-slides-file-input:focus-visible + .add-slides-file-text,
.add-slides-file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.add-slides-filename {
  flex: 0 1 auto; min-width: 0; max-width: 12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.add-slides-filename:empty { display: none; }
.add-slides-label { flex: 1 1 9rem; min-width: 7rem; }
.add-slides-url { flex: 1 1 9rem; min-width: 7rem; }
.add-slides-or { color: var(--ink-3); font-size: var(--fs-xs); padding: 0 0.05rem; }
.add-slides-public { margin-right: 0.2rem; flex: 0 0 auto; }

/* the add / shift admin strip below the schedule table */
.schedule-admin {
  border-top: 1px solid #e8eaed;
  background: #fbfbfc;
}
.schedule-add-form {
  align-items: center;
}
.schedule-add-form > .field-control,
.schedule-add-form > .field-select { margin: 0; width: auto; }
.schedule-add-form > input[name="date"] { flex: 0 0 auto; }
.schedule-add-form > select[name="kind"] { flex: 0 0 8rem; }
.schedule-add-form > input[name="tags"] { flex: 1 1 8rem; min-width: 6rem; }
.schedule-add-title { flex: 4 1 16rem; min-width: 10rem; }
.schedule-shift { margin-top: 0.7rem; }
.schedule-shift > .schedule-act {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--ink-2);
}
.schedule-shift > .schedule-act::before {
  content: "";
  width: 0.34rem; height: 0.34rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.schedule-shift[open] > .schedule-act::before { transform: rotate(45deg); }
.schedule-shift > .schedule-act:hover { color: var(--accent); text-decoration: none; }
.schedule-shift-form {
  margin-top: 0.55rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  border: 1px solid #e8eaed;
  border-radius: var(--radius-md);
}
.schedule-shift-form .field-label { margin: 0 0.1rem; flex: 0 0 auto; }
.schedule-shift-form .field-control { margin: 0; width: auto; flex: 0 0 auto; }
.schedule-shift-form input[name="from_date"] { flex: 0 0 auto; }

/* ---- inline edit form row: truly in-place, WYSIWYG ----
   The editing row keeps the display row's td padding, so the date input lands
   exactly on the displayed date and the title input lands exactly on the
   displayed .schedule-title (same content-box left edge, same typography). At
   rest the inputs are borderless and padding-free — indistinguishable from the
   rendered text; an edit affordance appears only on :focus. A left accent bar
   (not a fill) flags the row being edited, so there is no background flash. */
tr.schedule-editing > td { position: relative; vertical-align: top; }
tr.schedule-editing > td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
/* shared resets for the borderless, in-place inputs. No border and no left
   padding => zero left offset, so text aligns to the cell's content edge just
   like the displayed values. Focus is drawn with box-shadow only (an inset
   bottom hairline + faint ring), which never shifts layout. */
.sched-edit-input {
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
  appearance: none; -webkit-appearance: none;
  transition: box-shadow 0.12s ease, background 0.12s ease;
}
.sched-edit-input:hover {
  box-shadow: inset 0 -1px 0 0 var(--border);
}
.sched-edit-input:focus {
  outline: 0;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 0 var(--accent), 0 0 0 3px rgba(26, 115, 232, 0.12);
}
/* date editor: occupies the date column, matches the rendered date's muted ink
   and size; the native picker is allowed to recede (quiet glyph, no border). */
.sched-edit-date {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  accent-color: var(--ink-3);
}
/* Keep the date column the same width whether displaying or editing, so the
   topic cell (and the title) don't shift right when entering edit mode. A
   native date input's min-content width would otherwise widen the auto-layout
   column; max-width caps it so the column stays put. */
.public-schedule .date,
tr.schedule-editing > td.date { width: 8.5rem; }
tr.schedule-editing > td.date { max-width: 8.5rem; }
.sched-edit-date::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  padding: 0;
  margin-left: 0.25rem;
  cursor: pointer;
}
.sched-edit-date:hover::-webkit-calendar-picker-indicator,
.sched-edit-date:focus::-webkit-calendar-picker-indicator { opacity: 0.7; }
/* title editor: typographically identical to .schedule-title, zero left inset
   so its text starts exactly where the displayed titles above/below start. */
.sched-edit-title {
  display: block;
  width: 100%;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink);
}
.sched-edit-title::placeholder { font-weight: 500; color: var(--ink-3); }
.schedule-edit-form {
  display: block;
  margin: 0;
}
/* secondary meta line: Type + Tags + Notes + actions on ONE thin, quiet line
   sitting where the chips appear in display mode, so the primary (date|title)
   line keeps the display row's height and the row still reads as itself. */
.sched-edit-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  margin-top: 0.3rem;
}
.sched-edit-select {
  width: auto;
  min-height: 1.7rem;
  padding: 0.08rem 1.5rem 0.08rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  /* custom chevron (appearance:none from .sched-edit-input drops the native one) */
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235f6368' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}
.sched-edit-select:hover { border-color: #c6c9cd; box-shadow: none; }
.sched-edit-select:focus {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
  border-color: var(--accent);
}
.sched-edit-tags,
.sched-edit-notes {
  flex: 1 1 8rem; min-width: 6rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
}
.sched-edit-tags { flex-grow: 0.8; }
.sched-edit-tags:hover,
.sched-edit-notes:hover { box-shadow: none; border-color: #c6c9cd; }
.sched-edit-tags:focus,
.sched-edit-notes:focus {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);
  border-color: var(--accent); background: var(--surface);
}
.sched-edit-tags::placeholder,
.sched-edit-notes::placeholder { color: var(--ink-3); }
.sched-edit-actions {
  display: inline-flex; align-items: center; gap: 0.3rem;
  flex: 0 0 auto; margin-left: auto;
}
.sched-edit-cancel { padding-left: 0.4rem; padding-right: 0.4rem; }
.md img { max-width: 100%; border-radius: var(--radius-sm); }
.md p:last-child { margin-bottom: 0.4rem; }

/* ------- catalog ------- */

.term-section { margin: 2.2rem 0; }
.term-section:first-child { margin-top: 0; }
.term-label { display: flex; align-items: center; gap: 0.8rem; color: var(--ink-2); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.term-label .in-session {
  font-style: normal; font-weight: 500; letter-spacing: 0.01em; text-transform: none;
  color: #137333; background: #e6f4ea;
  border-radius: 999px; padding: 0.12rem 0.7rem; font-size: var(--fs-2xs);
}

.feature-card {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.2rem 2.4rem;
  padding: 1.6rem 1.8rem; margin: 0 0 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: inherit; animation: fadeUp 0.5s ease both;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover { box-shadow: var(--elev-1); border-color: #cfd1d4; }
.feature-main { display: flex; flex-direction: column; gap: 0.4rem; }
.card-code {
  font-size: var(--fs-2xs); font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--card-accent, var(--accent));
}
.card-code::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--card-accent, var(--accent));
  margin-right: 0.5em; vertical-align: 1px;
}
.feature-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.2; color: var(--ink); }
.feature-excerpt { margin: 0.15rem 0 0; font-size: var(--fs-sm); color: #3c4043; line-height: 1.55; }
.feature-meta { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 0.3rem; }
.feature-cta { margin-top: 0.8rem; font-size: var(--fs-sm); font-weight: 500; color: var(--accent); }
.feature-cta .arrow { transition: transform 0.18s ease; display: inline-block; }
.feature-card:hover .feature-cta .arrow { transform: translateX(4px); }
.feature-side { display: flex; flex-direction: column; gap: 0.5rem; border-left: 1px solid #e8eaed; padding-left: 1.8rem; }
.side-label { color: var(--ink-3); margin-top: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; }
.semester-strip { display: flex; flex-wrap: wrap; gap: 3px; }
.semester-strip .tick { width: 9px; height: 16px; border-radius: 2px; display: inline-block; opacity: 0.9; transition: transform 0.12s ease; }
.feature-card:hover .semester-strip .tick { transform: scaleY(1.08); }
.upcoming { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: #3c4043; }
.upcoming li { padding: 0.3rem 0; border-bottom: 1px solid #f1f3f4; line-height: 1.4; }
.upcoming li:last-child { border-bottom: 0; }
.upcoming .up-date { display: inline-block; min-width: 6.4em; margin-right: 0.4em; color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 500; }

.archive-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.archive-row {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid #e8eaed; color: inherit;
  transition: background 0.15s ease;
}
.archive-row:last-child { border-bottom: 0; }
.archive-row:hover { background: #f8f9fa; }
.archive-row .card-code { min-width: 7em; }
.archive-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--ink); }
.archive-row:hover .archive-title { color: var(--accent); }
.archive-meta { font-size: var(--fs-xs); color: var(--ink-2); }
.archive-term { margin-left: auto; font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.archived-pill {
  display: inline-block; margin-left: 0.4em; padding: 0.05em 0.6em;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--fs-2xs); font-weight: 500; color: var(--ink-2);
}
.empty-state { text-align: center; padding: 3rem 0 4rem; color: var(--ink-2); }

@media (max-width: 720px) {
  .feature-card { grid-template-columns: 1fr; }
  .feature-side { border-left: 0; padding-left: 0; border-top: 1px solid #e8eaed; padding-top: 1rem; }
}

/* ------- app pages ------- */

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* center in the viewport below the app bar, footer notwithstanding */
  min-height: calc(100svh - 14rem);
  padding: 2rem 1rem;
}
.login-card {
  width: min(100%, 25rem);
  padding: 2.6rem 2.5rem 2.2rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.login-brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--ink-2);
  margin-bottom: 1.1rem;
}
.login-title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--ink);
}
.login-continue {
  margin: 0 0 1.8rem;
  color: var(--ink-2);
  font-size: var(--fs-base);
}
/* Google-branded sign-in button: white, hairline border, official G mark */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.btn-google:hover {
  color: var(--ink);
  background: #f8faff;
  border-color: #d2e3fc;
  box-shadow: var(--elev-1);
}
.btn-google:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}
.btn-google-logo { width: 18px; height: 18px; flex: 0 0 auto; }
.login-help {
  margin: 1.6rem 0 0;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-2xs); font-weight: 500; flex: 0 0 auto;
}
.avatar-sm {
  width: 24px;
  height: 24px;
}
.avatar-md {
  width: 40px;
  height: 40px;
  font-size: var(--fs-sm);
}
.avatar-anon {
  background: #e8eaed;
  color: var(--ink-3);
}

/* forum author line: small circle picture next to the name/timestamp */
.forum-byline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.forum-byline .meta-line { min-width: 0; }

/* Announcements feed (comms) — read-only for students, managed by staff */
.announcement-feed {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.announcement-card { margin: 0; }
.announcement-subject {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.announcement-body { margin-bottom: 0; }
.announcement-body > :last-child { margin-bottom: 0; }
.announcement-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid #e8eaed;
  font-size: 0.8125rem;
}

/* public course-page staff roster with profile pictures */
.staff-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.staff-member {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.staff-member-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.staff-member-name { font-weight: 500; color: var(--ink); }
.staff-member-role { font-size: var(--fs-xs); color: var(--ink-2); }
.staff-notes { margin-top: 0.25rem; }

/* ------- forum ------- */

.forum-workspace {
  display: grid;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
  /* Constrain the single row to the workspace height so each pane is bounded
     and scrolls internally; without this the row is auto-sized to content,
     the thread pane grows past the workspace, and overflow:hidden clips the
     reply composer at the bottom. */
  grid-template-rows: minmax(0, 1fr);
  min-height: 34rem;
  /* app bar + shell padding + context bar + bottom gap ≈ 10rem of chrome */
  height: calc(100svh - 10rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.forum-pane-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
  background: #fff;
}
.forum-pane-head {
  flex: 0 0 auto;
  padding: 0.85rem;
  border-bottom: 1px solid #e8eaed;
  background: #fff;
}
.forum-compose-row {
  display: flex;
  margin-bottom: 0.65rem;
}
.forum-compose-button {
  width: 100%;
}
.forum-search {
  display: grid;
  gap: 0.55rem;
}
.forum-filter-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.forum-filter-row:last-child {
  justify-content: space-between;
}
.forum-filter-row .field-select {
  min-width: 0;
  flex: 1 1 0;
}
.forum-filter-check {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-2);
}
.forum-filter-check .field-check-label {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.forum-filter-check.disabled .field-check-label {
  color: var(--ink-3);
}
.forum-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.forum-inbox {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}
.forum-inbox-row {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-height: 5rem;
  padding: 0.8rem 0.85rem 0.8rem 0;
  color: inherit;
  border-bottom: 1px solid #e8eaed;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.forum-inbox-row:hover {
  background: #f8f9fa;
}
.forum-inbox-row.active {
  background: #e8f0fe;
  box-shadow: inset 3px 0 0 #1967d2;
}
.forum-inbox-row.unread .forum-title-text {
  font-weight: 700;
}
.forum-inbox-marker {
  width: 0.55rem;
  height: 100%;
}
.forum-inbox-row.unread .forum-inbox-marker {
  background: var(--accent);
}
.forum-inbox-main {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}
.forum-inbox-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.forum-inbox-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-inbox-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.05rem;
}
.forum-inbox-activity {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.forum-inbox-activity > span:first-child {
  color: var(--ink);
  font-weight: 500;
}
.forum-inbox-activity-label,
.forum-inbox-same {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}
.forum-empty-list {
  display: grid;
  place-items: center;
  min-height: 15rem;
  padding: 1rem;
}
.forum-category-manager {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0;
  border: 0;
  border-top: 1px solid #e8eaed;
  border-radius: 0;
  background: transparent;
}
.forum-category-manager summary {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.forum-category-list {
  display: grid;
  gap: 0.15rem;
}
.forum-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.75rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.forum-category-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-category-add {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.forum-pane-thread {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: #f8f9fa;
  padding: 1rem;
  scroll-margin-top: 1rem;
}
.forum-mobile-back {
  display: none;
  margin-bottom: 0.65rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.forum-thread-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.forum-thread-head {
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid #e8eaed;
}
.forum-thread-body {
  padding: 1rem 1.15rem;
  color: #3c4043;
  line-height: 1.6;
}
.forum-thread-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.forum-empty-preview {
  width: min(30rem, 100%);
  color: var(--ink-2);
  text-align: center;
}
.forum-empty-preview h2 {
  margin: 0.8rem 0 0.4rem;
  color: var(--ink);
  font-size: var(--fs-xl);
}
.forum-empty-preview p {
  margin: 0;
  font-size: var(--fs-sm);
}
.forum-empty-card {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  width: min(28rem, 100%);
  padding: 2rem 1.25rem;
  color: var(--ink-2);
  text-align: center;
}
.forum-empty-card-compact {
  margin-top: 0.75rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.forum-empty-card h2 {
  margin: 0.25rem 0 0;
  color: var(--ink);
  font-size: var(--fs-base);
}
.forum-empty-card p {
  max-width: 22rem;
  margin: 0;
  font-size: var(--fs-sm);
}

.forum-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.forum-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 8rem;
  gap: 1rem;
  align-items: center;
  min-height: 4.25rem;
  padding: 0.85rem 1.1rem;
  color: inherit;
  border-bottom: 1px solid #e8eaed;
  transition: background 0.15s ease;
}
.forum-row:last-child { border-bottom: 0; }
.forum-row:hover { background: #f8f9fa; }
.forum-row.unread { box-shadow: inset 3px 0 0 var(--accent); }
.forum-state {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.forum-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
}
.forum-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-row:hover .forum-title-text { color: var(--accent); }
.forum-meta {
  margin-top: 0.25rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-activity {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  text-align: right;
  white-space: nowrap;
}
.forum-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  color: var(--ink-2);
  background: #f1f3f4;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
}
.forum-icon-active {
  color: #1967d2;
  background: #e8f0fe;
}
.forum-article { margin-top: 0.75rem; }
.forum-article .md {
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.forum-thread-body .md {
  overflow-wrap: anywhere;
}
.forum-article pre,
.forum-thread-body pre,
.comment-body pre {
  padding: 0.85rem 1rem;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-sm);
  background: #f8f9fa;
  overflow-x: auto;
}
.forum-thread-title {
  margin: 0.65rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
}
.forum-actionbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.45rem 1.15rem;
  border-top: 1px solid #e8eaed;
  background: #fff;
}
.forum-action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  min-width: 0;
}
.forum-moderation-group {
  padding-left: 0.65rem;
  border-left: 1px solid #e8eaed;
}
.forum-tool {
  min-height: 1.4rem;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1.15;
}
.forum-tool.active {
  font-weight: 600;
}
.forum-tool:hover,
.forum-tool:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18rem;
  background: transparent;
}
.forum-actionbar .action-row-end {
  margin-left: auto;
}
.comments-heading {
  margin: 1.5rem 0 0.65rem;
  font-size: var(--fs-base);
}
.comment-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.comment-item {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid #e8eaed;
}
.comment-item:last-child { border-bottom: 0; }
.comment-item.nested {
  margin-left: 2rem;
  border-left: 2px solid #e8eaed;
  border-bottom: 1px solid #e8eaed;
}
.comment-item.endorsed {
  border-left: 3px solid #34a853;
  background: #f7fbf8;
}
.comment-item.deleted {
  background: #f8f9fa;
  color: var(--ink-3);
}
.comment-tombstone {
  color: var(--ink-3);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.comment-body {
  margin-top: 0.35rem;
  color: #3c4043;
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
  font-size: var(--fs-xs);
}
.comment-actions .btn-link,
.comment-actions a {
  font-size: var(--fs-xs);
  font-weight: 500;
}
.reply-form {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: var(--radius-md);
}
.reply-inline {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.reply-inline textarea { min-height: 4.25rem; }
.composer-panel { max-width: 52rem; }
.forum-thread-card .composer-panel {
  width: 100%;
  max-width: none;
}
.composer-body { min-height: 13rem; }
.similar-posts {
  margin-top: 0.65rem;
  background: #f8fafd;
  border: 1px solid #d2e3fc;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
}
.similar-posts-title {
  margin: 0 0 0.5rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.similar-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.similar-posts-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: var(--fs-xs);
}

.page-footer {
  padding: 2rem 0; color: var(--ink-2); text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-xs);
  flex: 0 0 auto;
}
.page-footer p { margin: 0; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .login-card { animation: none; }
}

@media (max-width: 720px) {
  .app-body { display: block; }
  .course-sidebar {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 0.65rem 1rem;
  }
  .course-sidebar-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0 0 0.5rem;
  }
  .course-sidebar-nav {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }
  .sidebar-link {
    white-space: nowrap;
    min-height: 1.9rem;
    padding: 0.35rem 0.6rem;
  }
  .sidebar-section { display: none; }
  .context-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
  .context-crumbs {
    width: 100%;
    overflow: hidden;
  }
  .context-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .page-shell { padding: 1rem 1rem 2.5rem; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-actions { justify-content: flex-start; }
  .toolbar .field-control,
  .toolbar .field-select,
  .toolbar-search { width: 100%; max-width: none; }
  .forum-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
  .forum-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .forum-pane-list {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    max-height: 28rem;
  }
  .forum-pane-thread {
    min-height: 28rem;
    padding: 0.75rem;
  }
  .forum-mobile-back {
    display: inline-flex;
    align-items: center;
  }
  .forum-mobile-back::before {
    margin-right: 0.35rem;
    content: "\2190";
  }
  .forum-filter-row {
    align-items: stretch;
    flex-wrap: wrap;
  }
  .forum-filter-row .field-select {
    flex-basis: calc(50% - 0.25rem);
  }
  .forum-inbox-row {
    grid-template-columns: 0.45rem minmax(0, 1fr);
  }
  .forum-inbox-activity {
    grid-column: 2;
    justify-items: start;
    display: flex;
    gap: 0.25rem;
  }
  .forum-activity { text-align: left; }
  .forum-title-text { white-space: normal; }
  .comment-item.nested { margin-left: 0.75rem; }
  .reply-inline { flex-direction: column; }
  .reply-inline .btn { align-self: flex-end; }
  .detail-grid { grid-template-columns: 1fr; }
  .course-overview-header {
    align-items: flex-start;
  }
  .course-overview-mark {
    display: none;
  }
  .course-overview-grid {
    grid-template-columns: 1fr;
  }
  .meta-list div { grid-template-columns: 1fr; gap: 0.2rem; }
  .compact-edit-row,
  .compact-edit-row-4 { grid-template-columns: 1fr; }
  .directory-item { align-items: flex-start; flex-direction: column; }
  .inline-edit-row { grid-template-columns: 1fr; }
}

/* ---- rich Markdown editor (EasyMDE) ---- */
.EasyMDEContainer .CodeMirror {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-sm);
  background: var(--surface);
}
.EasyMDEContainer .editor-toolbar {
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: #fafafc;
  opacity: 1;
}
.EasyMDEContainer .editor-toolbar button {
  color: var(--ink-2);
  border-radius: var(--radius-sm);
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background: #f1f3f4;
  border-color: transparent;
  color: var(--accent);
}
.EasyMDEContainer .CodeMirror-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
.EasyMDEContainer .editor-preview {
  background: var(--surface);
  border: 1px solid var(--border);
}
.EasyMDEContainer .editor-statusbar { display: none; }
.editor-toolbar.fullscreen, .CodeMirror-fullscreen, .editor-preview-side { z-index: 1100; }

/* drag-and-drop target feedback on plain inline-reply textareas */
textarea.dropping {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
  background: #f8faff;
}

/* uploaded images inside rendered posts/replies */
.md img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}