/* web-editor/css/editor.css — Solus Web Editor */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:      #2563EB;
  --blue-dark: #1d4ed8;
  --blue-light:#eff6ff;
  --green:     #16a34a;
  --red:       #dc2626;
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-500:  #6b7280;
  --gray-700:  #374151;
  --gray-900:  #111827;
  --page-bg:   #e8eaed;
  --radius:    6px;
  --shadow:    0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.14);
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

[hidden] { display: none !important; }

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--gray-900);
  background: var(--page-bg);
  overflow: hidden; /* body doesn't scroll — inner sections do */
}

/* ── App header ───────────────────────────────────────────────────────────── */
.app-header {
  height: 52px;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.app-logo {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}
.app-logo span { color: var(--gray-400); font-weight: 400; }

.header-spacer { flex: 1; }

.header-assign {
  font-size: .8125rem;
  color: var(--gray-500);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Document name — small filename-style input at the top of the header.
   Kept intentionally unobtrusive so students can format their own title
   inside the writing surface (or skip a title entirely). */
.doc-name-input {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-700);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 10px;
  min-width: 180px;
  max-width: 340px;
  outline: none;
  font-family: inherit;
  transition: background 120ms, border-color 120ms;
}
.doc-name-input::placeholder { color: var(--gray-400); font-weight: 500; font-style: italic; }
.doc-name-input:hover        { background: var(--gray-100); }
.doc-name-input:focus        { background: var(--gray-100); border-color: var(--gray-200); }

.header-autosave {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  color: var(--gray-400);
  white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s, border-color .15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  padding: 11px 20px;
}
.btn-primary:hover:not(:disabled) { background: var(--blue-dark); }

.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  padding: 10px 18px;
}
.btn-ghost:hover:not(:disabled) { background: var(--gray-50); }

.btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 10px 18px;
}
.btn-outline:hover:not(:disabled) { background: var(--blue-light); }

.btn-danger {
  background: var(--red);
  color: #fff;
  padding: 11px 20px;
}

.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: .875rem; }

/* ── Screens ──────────────────────────────────────────────────────────────── */
[data-screen] { display: flex; flex-direction: column; height: calc(100vh - 52px); }
[data-screen][hidden] { display: none; }

/* ── Auth screen ──────────────────────────────────────────────────────────── */
.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}

.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 40px;
  width: 100%;
  max-width: 440px;
}

.auth-card-logo { text-align: center; margin-bottom: 28px; }
.auth-card-logo .wordmark { font-size: 1.5rem; font-weight: 700; color: var(--blue); }
.auth-card-logo .tagline  { font-size: .8125rem; color: var(--gray-400); margin-top: 4px; }

.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.auth-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: .9375rem;
  color: var(--gray-900);
  transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.auth-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: .875rem;
  margin-bottom: 14px;
}

/* ── Picker screen ────────────────────────────────────────────────────────── */
.picker-wrap {
  flex: 1;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
  overflow-y: auto;
}

.picker-header { margin-bottom: 32px; }
.picker-header h2 { font-size: 1.5rem; margin-bottom: 4px; }
.picker-user-line { font-size: .9375rem; color: var(--gray-500); }

.assignment-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.assignment-card:hover {
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(37,99,235,.1);
  transform: translateY(-1px);
}
.assignment-card--free { border-style: dashed; color: var(--gray-500); }
.assignment-card--free .ac-title { color: var(--gray-700); }

.ac-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ac-class  { font-size: .8125rem; font-weight: 600; color: var(--blue); text-transform: uppercase; letter-spacing: .03em; }
.ac-due         { font-size: .8125rem; color: var(--gray-400); margin-left: auto; }
.ac-due--soon   { color: #d97706; font-weight: 600; }
.ac-due--overdue{ color: var(--red); font-weight: 600; }
.ac-title  { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.ac-instructions { font-size: .875rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ac-status { margin-left: auto; flex-shrink: 0; display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.ac-status--submitted { background: #D1FAE5; color: #065F46; }
.ac-status--draft     { background: #EFF6FF; color: #2563EB; }
.ac-status--revision  { background: #FFFBEB; color: #92400E; }
.assignment-card--submitted { opacity: .85; }

.free-drafts-header { font-size: .8125rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: .06em; padding: 8px 0 4px; }

.picker-loading, .picker-empty, .picker-error { text-align: center; padding: 60px 0; color: var(--gray-400); font-size: .9375rem; }
.picker-error { color: var(--red); }

.join-class-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--gray-100); }
.join-class-section h3 { font-size: .9375rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.join-class-form { display: flex; gap: 10px; }
.join-class-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: .9375rem; font-family: inherit; background: #fff; text-transform: uppercase; letter-spacing: .08em; }
.join-class-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.join-class-form button { padding: 10px 20px; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-size: .9375rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s; }
.join-class-form button:hover { background: #1d4ed8; }
.join-class-form button:disabled { opacity: .6; cursor: default; }
.join-error  { margin-top: 8px; font-size: .875rem; color: var(--red); }
.join-success{ margin-top: 8px; font-size: .875rem; color: var(--green, #16a34a); }

/* ── Submissions screen ───────────────────────────────────────────────────── */
.subs-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.sub-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
}
.sub-card-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.sub-card-title { font-size: 1rem; font-weight: 600; color: var(--gray-900, #111); }
.sub-card-meta { font-size: .8125rem; color: var(--gray-500); }
.sub-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.sub-badge--valid   { background: #D1FAE5; color: #065F46; }
.sub-badge--tampered,
.sub-badge--policy-violated { background: #FEE2E2; color: #991B1B; }
.sub-badge--partial { background: #FEF3C7; color: #92400E; }
.sub-badge--error    { background: #F3F4F6; color: #6B7280; }
.sub-badge--revision { background: #FFFBEB; color: #92400E; }
.sub-grade-pill {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: .75rem; font-weight: 700; background: #EDE9FE; color: #5B21B6;
}
.sub-card-notes { font-size: .875rem; color: var(--gray-600, #374151); margin-top: 6px; padding: 8px 12px; background: var(--gray-50, #F9FAFB); border-radius: 6px; }
.subs-empty { text-align: center; padding: 60px 0; color: var(--gray-400); font-size: .9375rem; }

/* ── Home screen (sidebar + main pane) ────────────────────────────────────── */
.home-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.home-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--gray-200);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.home-sidebar-user {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.home-sidebar-user-name { font-size: .9375rem; font-weight: 600; color: var(--gray-900); }
.home-sidebar-user-email { font-size: .75rem; color: var(--gray-400); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-nav-section { padding: 14px 10px 8px; }
.home-nav-heading {
  padding: 4px 10px 8px;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.home-nav-heading--collapsible {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.home-past-caret { display: inline-block; transition: transform .15s; font-size: .875rem; }
.home-nav-heading--collapsible[aria-expanded="true"] .home-past-caret { transform: rotate(90deg); }

.home-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
  color: var(--gray-700);
  text-align: left;
  transition: background .1s;
  position: relative;
}
.home-nav-item:hover { background: var(--gray-50); }
.home-nav-item.active {
  background: var(--blue-light);
  color: var(--blue);
  font-weight: 600;
}
.home-nav-item svg { flex-shrink: 0; opacity: .8; }
.home-nav-item.active svg { opacity: 1; }
.home-nav-item .home-nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 6px;
  height: 18px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-nav-item .home-nav-badge--muted { background: var(--gray-200); color: var(--gray-700); }
.home-nav-item .home-nav-class-code { font-size: .6875rem; color: var(--gray-400); margin-left: 6px; }
.home-nav-item.active .home-nav-class-code { color: var(--blue); }

.home-nav-classes { display: flex; flex-direction: column; gap: 2px; }
.home-nav-classes-empty { padding: 8px 10px; font-size: .8125rem; color: var(--gray-400); font-style: italic; }
.home-nav-classes-subhead {
  padding: 10px 10px 4px;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.home-sidebar-footer {
  margin-top: auto;
  padding: 14px 14px 18px;
  border-top: 1px solid var(--gray-100);
}
.home-join-btn { width: 100%; }

/* Main pane */
.home-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--gray-50);
}
.home-view { padding: 32px 40px; max-width: 900px; margin: 0 auto; }
.home-view[hidden] { display: none; }
.home-empty { padding: 60px 0; text-align: center; color: var(--gray-400); font-size: .9375rem; }

/* View headers */
.home-view-header { margin-bottom: 24px; }
.home-view-crumb { font-size: .75rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.home-view-crumb button { background: none; border: none; padding: 0; color: var(--blue); font-family: inherit; font-size: inherit; cursor: pointer; text-transform: none; letter-spacing: 0; }
.home-view-crumb button:hover { text-decoration: underline; }
.home-view-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 4px; color: var(--gray-900); }
.home-view-subtitle { font-size: .875rem; color: var(--gray-500); }

/* Dashboard */
.home-dash-section { margin-bottom: 28px; }
.home-dash-section h3 {
  font-size: .75rem;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.home-dash-empty { font-size: .875rem; color: var(--gray-400); padding: 10px 0; }

/* Tabs */
.home-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 20px;
}
.home-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .875rem;
  color: var(--gray-500);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.home-tab:hover { color: var(--gray-700); }
.home-tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.home-tab-count { margin-left: 6px; color: var(--gray-400); font-size: .75rem; }
.home-tab.active .home-tab-count { color: var(--blue); }

/* Assignment detail feedback panel */
.home-fb-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.home-fb-panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.home-fb-title { font-size: 1rem; font-weight: 600; margin: 0; }
.home-fb-grade {
  margin-left: auto;
  padding: 6px 14px;
  background: #EDE9FE;
  color: #5B21B6;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  font-family: Georgia, serif;
}
.home-fb-meta { font-size: .8125rem; color: var(--gray-500); margin-bottom: 12px; }
.home-fb-notes {
  padding: 12px 14px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--gray-700);
  white-space: pre-wrap;
}
.home-fb-rubric { margin-top: 14px; }
.home-fb-rubric-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--gray-100);
  font-size: .875rem;
}
.home-fb-rubric-row:last-child { border-bottom: none; }
.home-fb-rubric-label { color: var(--gray-700); }
.home-fb-rubric-score { color: var(--gray-500); font-weight: 600; }

/* Reply thread */
.home-thread {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.home-thread-title { font-size: .9375rem; font-weight: 600; margin: 0 0 14px; color: var(--gray-900); }
.home-thread-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.home-thread-empty { font-size: .8125rem; color: var(--gray-400); font-style: italic; padding: 4px 0; }
.home-thread-msg {
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 85%;
  font-size: .9375rem;
  line-height: 1.5;
}
.home-thread-msg--student {
  background: var(--blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.home-thread-msg--teacher {
  background: var(--gray-100);
  color: var(--gray-900);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}
.home-thread-msg-meta { font-size: .6875rem; margin-top: 4px; opacity: .75; }
.home-thread-form { display: flex; gap: 8px; align-items: flex-end; }
.home-thread-form textarea {
  flex: 1;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: .9375rem;
  resize: vertical;
  background: #fff;
}
.home-thread-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }

/* Verify — drop zone + result panel */
.home-verify-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  color: var(--gray-700);
}
.home-verify-drop {
  border: 2px dashed var(--gray-300);
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  color: var(--gray-500);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
  outline: none;
}
.home-verify-drop:hover, .home-verify-drop:focus-visible, .home-verify-drop.drag-over {
  border-color: var(--blue, #2563eb);
  background: var(--blue-light, #eff6ff);
  color: var(--blue, #2563eb);
}
.home-verify-drop svg { margin-bottom: 10px; }
.home-verify-drop-title { font-size: 1rem; font-weight: 600; color: var(--gray-700); margin-bottom: 4px; }
.home-verify-drop-title code { font-family: var(--font-mono); font-size: .95em; padding: 1px 6px; border-radius: 4px; background: var(--gray-100); }
.home-verify-drop-sub { font-size: .8125rem; }

.home-verify-loading { padding: 24px; color: var(--gray-500); text-align: center; }
.home-verify-error { padding: 16px; color: #b91c1c; background: #fef2f2; border-radius: 8px; margin-top: 14px; }

.home-verify-result { margin-top: 20px; }
.home-verify-verdict {
  font-size: 1.5rem; font-weight: 800; padding: 14px 20px; border-radius: 10px; letter-spacing: .02em;
  text-align: center; margin-bottom: 16px;
}
.home-verify-verdict--valid    { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.home-verify-verdict--tampered { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.home-verify-verdict--partial  { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.home-verify-verdict--error    { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }

.home-verify-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 16px; padding: 14px 16px; background: var(--gray-50, #f9fafb); border-radius: 8px; }
.home-verify-meta > div { display: flex; flex-direction: column; }
.home-verify-meta dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); font-weight: 600; margin-bottom: 3px; }
.home-verify-meta dd { font-size: .875rem; color: var(--gray-700); }
.home-verify-fp { font-family: var(--font-mono); font-size: .75rem; }

.home-verify-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.home-verify-check {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: 8px 12px;
  padding: 8px 12px; align-items: center;
  border: 1px solid var(--gray-100, #f3f4f6); border-radius: 6px;
  font-size: .875rem;
}
.home-verify-check-num { color: var(--gray-400); font-size: .75rem; font-family: var(--font-mono); }
.home-verify-check-name { color: var(--gray-700); font-weight: 500; }
.home-verify-check-detail { color: var(--gray-400); font-size: .75rem; text-align: right; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-verify-check-badge { font-size: .625rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .05em; }
.home-verify-check-badge--pass { background: #d1fae5; color: #065f46; }
.home-verify-check-badge--fail { background: #fee2e2; color: #991b1b; }
.home-verify-check-badge--warn { background: #fef3c7; color: #92400e; }
.home-verify-check-badge--skip { background: var(--gray-100, #f3f4f6); color: var(--gray-500); }
.home-verify-check-badge--limited { background: #FED7AA; color: #7C2D12; }

/* V4 two-axis rendering — spec 12 §5 */
.home-verify-banner {
  padding: 18px 20px; border-radius: 10px; margin-bottom: 16px; border: 1.5px solid transparent;
}
.home-verify-banner--verified { background: #ECFDF5; border-color: #10B981; }
.home-verify-banner--warning  { background: #FFFBEB; border-color: #F59E0B; }
.home-verify-banner--error    { background: #FEF2F2; border-color: #DC2626; }
.home-verify-banner--info     { background: #EFF6FF; border-color: #3B82F6; }
.home-verify-headline { font-size: 1.25rem; font-weight: 700; color: var(--gray-800, #1f2937); margin: 8px 0 4px; }
.home-verify-subtitle { font-size: .875rem; color: var(--gray-600, #4b5563); }
.home-verify-vh {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px;
  border-radius: 999px; font-weight: 700; font-size: .8125rem; letter-spacing: .02em;
}
.home-verify-vh--earned { background: #10B981; color: white; }
.home-verify-vh--unearned { background: #F3F4F6; color: #6B7280; border: 1px dashed #D1D5DB; font-weight: 500; }

.home-verify-axis {
  padding: 12px 14px; margin-bottom: 12px; border-radius: 8px; border: 1px solid var(--gray-100, #f3f4f6);
}
.home-verify-axis--intact, .home-verify-axis--supported { background: #F0FDF4; border-color: #10B981; }
.home-verify-axis--tampered { background: #FEF2F2; border-color: #DC2626; }
.home-verify-axis--limited, .home-verify-axis--unsupported { background: #FFFBEB; border-color: #F59E0B; }
.home-verify-axis--enrolling { background: #EFF6FF; border-color: #3B82F6; }
.home-verify-axis-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .875rem; font-weight: 700; margin-bottom: 4px; color: var(--gray-800, #1f2937);
}
.home-verify-axis-verdict { font-weight: 600; color: var(--gray-700, #374151); }
.home-verify-axis-counts { font-size: .75rem; color: var(--gray-500, #6b7280); margin-bottom: 10px; }
.home-verify-axis .home-verify-checks { margin-bottom: 0; }

.home-verify-reset { margin: 0 auto; display: block; }

/* Writer enrollment progress card (spec 11 §3.2) — appears on the dashboard */
.writer-status {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px; border-radius: 10px; border: 1px solid var(--gray-100, #f3f4f6);
}
.writer-status--enrolled  { background: #F0FDF4; border-color: #10B981; }
.writer-status--enrolling { background: #EFF6FF; border-color: #3B82F6; }
.writer-status--warning   { background: #FFFBEB; border-color: #F59E0B; }
.writer-status--info      { background: var(--gray-50, #f9fafb); border-color: var(--gray-200, #e5e7eb); }
.writer-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; padding: 4px 12px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: none;
}
.writer-status-badge--enrolled   { background: #10B981; color: white; }
.writer-status-badge--enrolling  { background: #3B82F6; color: white; }
.writer-status-badge--warning    { background: #F59E0B; color: white; }
.writer-status-badge--unenrolled { background: var(--gray-200, #e5e7eb); color: var(--gray-700, #374151); }
.writer-status-text { font-size: .875rem; color: var(--gray-700, #374151); line-height: 1.5; }
.writer-status-text strong { color: var(--gray-900, #111827); }

.writer-progress { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.writer-progress-row {
  display: grid; grid-template-columns: 130px 1fr 80px; gap: 10px; align-items: center;
  font-size: .8125rem;
}
.writer-progress-label { color: var(--gray-600, #4b5563); font-weight: 500; }
.writer-progress-bar {
  height: 8px; background: rgba(59, 130, 246, .12); border-radius: 4px; overflow: hidden;
}
.writer-progress-fill { height: 100%; background: #3B82F6; border-radius: 4px; transition: width .3s ease; }
.writer-progress-count { font-family: var(--font-mono); font-size: .75rem; color: var(--gray-600, #4b5563); text-align: right; }

/* Reused: assignment cards inside class views get a bit of tightening */
.home-view .assignment-card { margin-bottom: 10px; }
.home-view .assignment-card-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--gray-400);
  font-size: .875rem;
  border: 1px dashed var(--gray-200);
  border-radius: 10px;
}

/* Responsive: on narrow viewports collapse sidebar to a top strip */
@media (max-width: 720px) {
  .home-layout { flex-direction: column; }
  .home-sidebar {
    width: 100%;
    max-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
  }
  .home-view { padding: 20px 16px; }
}

/* ── Editor screen layout ─────────────────────────────────────────────────── */
.editor-screen {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 52px);
  overflow: hidden;
}
.editor-screen[hidden] { display: none; }

/* Cloud-draft restore banner */
.cloud-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #EFF6FF;
  border-bottom: 1px solid #BFDBFE;
  font-size: .875rem;
  color: #1E40AF;
}
.cloud-banner-msg { flex: 1; }
.btn-cloud { border: none; cursor: pointer; border-radius: 5px; padding: 4px 12px; font-size: .8125rem; font-weight: 600; }
.btn-cloud-restore  { background: #2563EB; color: #fff; }
.btn-cloud-restore:hover { background: #1D4ED8; }
.btn-cloud-dismiss { background: transparent; color: #3B82F6; }
.btn-cloud-dismiss:hover { text-decoration: underline; }

/* Toolbar strip */
.toolbar-bar {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow-x: auto;
  overflow-y: hidden;
}

/* Body: doc + sidebar */
.editor-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* Scrollable center column — gray background behind pages */
.editor-scroll-area {
  flex: 1;
  overflow-y: auto;
  background: var(--page-bg);
  padding: 32px 0 80px;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Page root — relative container, JS sets width/min-height dynamically */
.editor-pages-root {
  position: relative;
  flex-shrink: 0;
  --solus-page-width: 816px;
  --solus-page-height: 1056px;
  --solus-page-gap: 24px;
  --solus-body-top: 96px;
  --solus-body-left: 96px;
  --solus-body-width: 624px;
  --solus-body-height: 864px;
  --solus-margin-top: 96px;
  --solus-margin-right: 96px;
  --solus-margin-bottom: 96px;
  --solus-margin-left: 96px;
  --solus-header-offset: 48px;
  --solus-footer-offset: 48px;
  --solus-title-reserve: 112px;
  --solus-stack-height: 1056px;
  --solus-line-height: 1.9;
  --solus-paragraph-spacing: 1.1em;
  --solus-first-line-indent: 0px;
  --solus-font-family: Georgia, 'Times New Roman', serif;
}

/* Backward-compat alias for any existing code that targets editor-doc-wrap */
.editor-doc-wrap { position: relative; flex-shrink: 0; }

/* Pages layer — holds page boxes */
.editor-pages-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Page-number badge overlays on each page box. Rendered by #renderPageBoxes
   as a floating chip in the bottom-right corner of every page frame. Sits
   inside the .pages-layer so it stacks above the printed page background but
   below the editable content. Header/footer TEXT no longer renders here —
   it's part of the ProseMirror doc now (see .editor-page-header /
   .editor-page-footer inside each .editor-page-node). */
.editor-page-box {
  position: absolute;
  left: 0;
  background: transparent;
}

.editor-page-num-badge {
  position: absolute;
  font-size: .75rem;
  color: var(--gray-400);
  font-family: var(--font-sans);
  white-space: nowrap;
  padding: 2px 6px;
  line-height: 1;
}


/* Content layer — normal flow; ProseMirror owns the real page stack */
.editor-content-layer {
  position: relative;
  width: var(--solus-page-width);
  z-index: 1;
}

/* Status bar */
.status-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 7px 20px;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  font-size: .8125rem;
  color: var(--gray-400);
  flex-shrink: 0;
}
.status-item { display: flex; align-items: center; gap: 6px; }
.status-signing[data-state='active'] { color: var(--green); }
.status-signing[data-state='signed'] { color: var(--blue); }
.status-spacer { flex: 1; }

/* ── Per-page header / footer (in-flow, part of each page's ProseMirror
   DOM) ─────────────────────────────────────────────────────────────────────
   Word/Docs model: header sits in the top margin, body fills the middle,
   footer sits in the bottom margin. All three live in the natural block
   flow of the page node (which is a flex column, see .editor-page-node
   below). No absolute positioning, no measurement race with the JS layout —
   the browser's own layout math handles reflow.

   min-height on the header/footer slots reserves at least the margin-top-
   minus-offset strip; if the actual content is taller, they grow and push
   the body down, matching Word's behavior. */
.editor-page-header,
.editor-page-footer {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  font-size: .875rem;
  font-family: var(--font-sans);
  color: var(--gray-700);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.editor-page-header {
  min-height: var(--solus-header-reserve, 48px);
  /* Cap so a paste of huge text into the header can't consume the body's
     space and trigger the pagination reflow into micro-splitting the last
     body block. Excess is clipped visually via page-node's overflow:hidden;
     the underlying doc still stores the full text. */
  max-height: 120px;
  overflow: hidden;
  padding-bottom: 6px;
  border-bottom: 1px dashed transparent;
}
.editor-page-footer {
  min-height: var(--solus-footer-reserve, 48px);
  max-height: 120px;
  overflow: hidden;
  padding-top: 6px;
  border-top: 1px dashed transparent;
}
.editor-page-header p,
.editor-page-footer p {
  margin: 0 0 2px;
}
.editor-page-header p:last-child,
.editor-page-footer p:last-child {
  margin-bottom: 0;
}

/* Focus/hover states — reveal a dashed divider so the region reads as
   an editable slot without cluttering the page when unfocused. Only the
   first page's header/footer show the guide by default (readers of pages
   2+ should perceive them as passive echoes of page 1). */
.editor-page-node:first-child .editor-page-header:hover,
.editor-page-node:first-child .editor-page-header:focus-within,
.editor-page-node:first-child .editor-page-footer:hover,
.editor-page-node:first-child .editor-page-footer:focus-within {
  border-color: var(--gray-200, #e5e7eb);
}
[data-theme="dark"] .editor-page-node:first-child .editor-page-header:hover,
[data-theme="dark"] .editor-page-node:first-child .editor-page-header:focus-within,
[data-theme="dark"] .editor-page-node:first-child .editor-page-footer:hover,
[data-theme="dark"] .editor-page-node:first-child .editor-page-footer:focus-within {
  border-color: var(--gray-300);
}

/* Placeholder — the TipTap Placeholder extension emits `is-empty` on
   empty pageHeader/pageFooter nodes (with includeChildren:true), and its
   `placeholder` callback returns "Header" / "Footer" strings so users see
   a visible affordance after inserting a slot. Rendered in an italic gray
   that's clearly perceivable but reads as ghost text (dims when the slot
   is focused so it doesn't compete with the user's caret). */
.editor-page-header .is-empty::before,
.editor-page-footer .is-empty::before {
  content: attr(data-placeholder);
  color: var(--gray-400);
  pointer-events: none;
  float: left;
  height: 0;
  font-style: italic;
  transition: color 120ms;
}
[data-theme="dark"] .editor-page-header .is-empty::before,
[data-theme="dark"] .editor-page-footer .is-empty::before {
  color: var(--gray-400);
}
.editor-page-header .ProseMirror-focused .is-empty::before,
.editor-page-footer .ProseMirror-focused .is-empty::before {
  color: var(--gray-300);
}

/* Backward-compat: hide anything that might still be emitted by old code
   paths (the removed sub-editor system). If old cached JS mounts these
   they'll collapse to zero instead of stacking on top of the new layout. */
.editor-header-zone, .editor-footer-zone,
.editor-header-mount, .editor-footer-mount,
.editor-page-hdr-deco, .editor-page-ftr-deco,
.editor-hf-label { display: none !important; }

/* ── Editor content (inside .editor-content-layer — margins come from JS positioning) ──
   The document title is captured in the header's #doc-name input instead of an
   imposed title block on the page. The title element still exists in the DOM
   because editor.js writes to it, but it is visually removed so students can
   format their own title inside the body (MLA header, centered, or none). */
.editor-title-wrap {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
  top: 0;
  left: 0;
}

.editor-title {
  outline: none;
  min-height: 0;
}

.editor-prosemirror-wrap {
  padding: 0;
}

.editor-meta-bar {
  display: flex;
  gap: 20px;
  margin-left: var(--solus-margin-left);
  margin-right: var(--solus-margin-right);
  padding: 10px 0;
  font-size: .8125rem;
  color: var(--gray-400);
  border-top: 1px solid var(--gray-100);
  flex-shrink: 0;
}

/* ── Page-break node ─────────────────────────────────────────────────────── */
/* Structural marker only — visual separation between pages is the gap between
   page cards. Keep the print page-break for exports; suppress all visible
   styling in the editor. */
[data-page-break] {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  break-after: page;
  page-break-after: always;
  user-select: none;
}
[data-page-break].ProseMirror-selectednode {
  outline: none;
}

/* ── Footnote section styles ─────────────────────────────────────────────── */
/* Footnote separator — pinned to bottom of its page via flex + margin-top:auto */
.editor-page-content > hr.fn-sep {
  margin-top: auto;
  flex-shrink: 0;
  border: none;
  border-top: 1px solid var(--gray-300, #d1d5db);
  width: 34%;
  min-width: 80px;
  margin-left: 0;
  margin-bottom: 6px;
  padding: 0;
  box-sizing: border-box;
}
/* Footnote entries */
.editor-page-content > hr.fn-sep ~ p {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--gray-600, #4b5563);
  margin-bottom: .25em;
  flex-shrink: 0;
}
/* Backward-compat: old documents used plain <hr> + Notes heading */
.ProseMirror hr:not(.fn-sep) ~ p {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--gray-600, #4b5563);
  margin-bottom: .5em;
}

/* ── ProseMirror content styles ───────────────────────────────────────────── */
.ProseMirror {
  font-family: var(--solus-font-family);
  font-size: 1.0625rem;
  line-height: var(--solus-line-height);
  color: var(--gray-900);
  outline: none;
  width: var(--solus-page-width);
  min-height: var(--solus-stack-height);
  display: flex;
  flex-direction: column;
  gap: var(--solus-page-gap);
  align-items: stretch;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Page node — Word/Docs frame. Header lives in top margin, footer in bottom
   margin, body fills the middle. Flex column so each child claims its
   natural height (header/footer) or the remainder (body). Padding is the
   page margin, so header/body/footer are left-aligned to margin-left and
   width = body-width via box-sizing. */
.editor-page-node {
  position: relative;
  width: var(--solus-page-width) !important;
  height: var(--solus-page-height) !important;
  min-height: var(--solus-page-height) !important;
  max-height: var(--solus-page-height) !important;
  flex: 0 0 var(--solus-page-height) !important;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 4px 24px rgba(0,0,0,.07);
  overflow: hidden !important;
  box-sizing: border-box;
  padding: var(--solus-header-offset, 48px) var(--solus-margin-right, 96px)
           var(--solus-footer-offset, 48px) var(--solus-margin-left, 96px);
  display: flex;
  flex-direction: column;
}

/* Body — the actual writing rectangle. flex:1 to consume whatever space is
   left between the header and footer slots. overflow:hidden so the
   pagination reflow's scrollHeight-vs-clientHeight overflow check keeps
   working (unchanged from the old model). */
.editor-page-content {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
}
.editor-page-content > * { flex-shrink: 0; }

.editor-page-node:first-child .editor-page-content {
  /* Title block was removed from the writing surface; no reserved space at
     the top of page 1. */
  padding-top: 0 !important;
}

.editor-page-content > :first-child { margin-top: 0 !important; }
.editor-page-content > :last-child { margin-bottom: 0 !important; }
.editor-page-content * { max-width: 100%; }

/* Placeholder */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--gray-300);
  pointer-events: none;
  height: 0;
}

/* Paragraphs */
.ProseMirror p {
  margin-bottom: var(--solus-paragraph-spacing);
}
.ProseMirror p:not(.solus-bibliography-entry) {
  text-indent: var(--solus-first-line-indent);
}
.ProseMirror p:last-child { margin-bottom: 0; }
.ProseMirror p.solus-bibliography-entry {
  padding-left: 48px;
  text-indent: -48px;
}

/* Headings */
.ProseMirror h1 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5em 0 .6em;
  color: var(--gray-900);
}
.ProseMirror h2 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 1.4em 0 .5em;
  color: var(--gray-900);
}
.ProseMirror h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 1.3em 0 .45em;
  color: var(--gray-900);
}
.ProseMirror h1:first-child,
.ProseMirror h2:first-child,
.ProseMirror h3:first-child { margin-top: 0; }

/* Lists */
.ProseMirror ul, .ProseMirror ol {
  padding-left: 1.75em;
  margin-bottom: 1.1em;
}
.ProseMirror li { margin-bottom: .35em; line-height: 1.75; }
.ProseMirror li p { margin-bottom: .35em; }

/* Blockquote */
.ProseMirror blockquote {
  border-left: 4px solid var(--blue);
  margin: 1.2em 0;
  padding: .6em 1.2em;
  color: var(--gray-700);
  background: var(--blue-light);
  border-radius: 0 4px 4px 0;
}

/* Code */
.ProseMirror code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 3px;
  padding: .15em .4em;
  color: #c7254e;
}

.ProseMirror pre {
  font-family: var(--font-mono);
  font-size: .875rem;
  background: var(--gray-900);
  color: #f8f8f2;
  border-radius: 6px;
  padding: 1.1em 1.4em;
  overflow-x: auto;
  margin: 1.2em 0;
  line-height: 1.65;
  white-space: pre;
}
.ProseMirror pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Horizontal rule */
.ProseMirror hr {
  border: none;
  border-top: 2px solid var(--gray-200);
  margin: 2em 0;
}

/* Links */
.ProseMirror a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ProseMirror a:hover { color: var(--blue-dark); }

/* Images */
.ProseMirror img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: .5em 0;
  display: block;
}
.ProseMirror img.ProseMirror-selectednode {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
/* Resizable image wrapper: renders inside solus-image-wrap; the drag handle
   (bottom-right blue square) is shown only when the node is selected via
   the node view's selectNode() adding .is-selected. The wrapper's own
   outline mirrors the standalone-img rule above so selection reads the same
   whether the node view is active or not. */
.ProseMirror .solus-image-wrap { margin: .5em 0; }
.ProseMirror .solus-image-wrap.is-selected { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.ProseMirror .solus-image-wrap img { margin: 0; border-radius: 0; }

/* Tables */
.ProseMirror table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 1.2em 0;
  overflow: hidden;
}
.ProseMirror table td,
.ProseMirror table th {
  border: 1px solid var(--gray-300);
  padding: 8px 12px;
  vertical-align: top;
  position: relative;
  min-width: 60px;
  word-break: break-word;
}
.ProseMirror table th {
  background: var(--gray-50);
  font-weight: 700;
  font-family: var(--font-sans);
  font-size: .9375rem;
}
.ProseMirror table .selectedCell { background: rgba(37,99,235,.08); }
.ProseMirror table .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--blue);
  pointer-events: none;
  z-index: 20;
}
.ProseMirror.resize-cursor { cursor: col-resize; }

/* Selection */
.ProseMirror ::selection { background: rgba(37,99,235,.18); }

/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 5px 14px;
  min-height: 44px;
  overflow-x: auto;
}

.tb-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: .875rem;
  font-family: var(--font-sans);
  color: var(--gray-700);
  cursor: pointer;
  min-width: 28px;
  height: 30px;
  text-align: center;
  transition: background .1s, border-color .1s, color .1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.tb-btn:hover:not(:disabled)   { background: var(--gray-100); border-color: var(--gray-200); }
.tb-btn:active:not(:disabled)  { background: var(--gray-200); }
.tb-btn.active   { background: var(--blue-light); border-color: #bfdbfe; color: var(--blue); }
.tb-btn:disabled { opacity: .35; cursor: default; }

.tb-select {
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: .8125rem;
  color: var(--gray-700);
  background: #fff;
  cursor: pointer;
  max-width: 120px;
  flex-shrink: 0;
}
.tb-select:focus { outline: none; border-color: var(--blue); }

.tb-sep {
  width: 1px;
  height: 20px;
  background: var(--gray-200);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Toolbar popups */
.tb-popup {
  position: absolute;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  padding: 16px;
  z-index: 500;
  min-width: 200px;
  max-width: min(520px, calc(100vw - 24px));
}

.tb-popup-title {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tb-popup-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: .875rem;
  margin-bottom: 12px;
  color: var(--gray-900);
}
.tb-popup-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.tb-popup-grid {
  display: grid;
  grid-template-columns: 112px 180px;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.tb-popup-grid--wide { grid-template-columns: 112px 260px; }
.tb-popup-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gray-500);
}
.tb-popup-grid .tb-popup-input { margin-bottom: 0; }

.tb-popup-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.tb-popup-actions--split { justify-content: flex-start; }
.tb-popup-spacer { flex: 1; }

.tb-popup-btn {
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: var(--blue);
  color: #fff;
  transition: background .15s;
}
.tb-popup-btn:hover { background: var(--blue-dark); }
.tb-popup-btn--ghost {
  background: transparent;
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.tb-popup-btn--ghost:hover { background: var(--gray-100); }

/* Color swatches */
.tb-swatches {
  display: grid;
  grid-template-columns: repeat(8, 22px);
  gap: 4px;
}
.tb-swatch {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .1s;
}
.tb-swatch:hover { transform: scale(1.15); }

/* ── Provenance panel ─────────────────────────────────────────────────────── */
.prov-panel {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: width .2s ease;
  overflow: hidden;
  position: relative;
}

.prov-panel.prov-collapsed {
  width: 36px;
}

.prov-toggle {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  z-index: 1;
  padding: 0;
  transition: color .15s, background .15s;
}
.prov-toggle:hover { color: var(--gray-700); background: var(--gray-100); }

.prov-toggle-icon {
  transition: transform .2s ease;
}
.prov-panel.prov-collapsed .prov-toggle-icon {
  transform: rotate(180deg);
}

.prov-body {
  padding: 36px 14px 20px;
  overflow-y: auto;
  flex: 1;
  opacity: 1;
  transition: opacity .15s;
}
.prov-panel.prov-collapsed .prov-body { opacity: 0; pointer-events: none; }

.prov-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: 14px;
}

.prov-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.prov-stat {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.prov-stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 3px;
}
.prov-stat-val--warn {
  color: var(--red);
}
.prov-stat-lbl {
  font-size: .6875rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.prov-signing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--gray-700);
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.prov-signing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.prov-signing-dot--active { background: var(--green); animation: prov-pulse 2s infinite; }
.prov-signing-dot--signed { background: var(--blue); animation: none; }

@keyframes prov-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.prov-divider {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: 12px 0;
}

.prov-note {
  font-size: .75rem;
  color: var(--gray-500);
  line-height: 1.55;
}

.prov-capabilities { margin-top: 2px; }

.prov-cap-heading {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gray-400);
  margin-bottom: 8px;
}

.prov-cap-list {
  list-style: none;
  margin-bottom: 12px;
}

.prov-cap {
  font-size: .75rem;
  color: var(--gray-600, #4b5563);
  padding: 2px 0 2px 18px;
  position: relative;
  line-height: 1.5;
}
.prov-cap::before {
  position: absolute;
  left: 0;
  font-size: .7rem;
}
.prov-cap--yes { color: var(--gray-700); }
.prov-cap--yes::before { content: '✓'; color: var(--green); }
.prov-cap--no  { color: var(--gray-400); }
.prov-cap--no::before  { content: '—'; color: var(--gray-300); }

.prov-download-link {
  font-size: .75rem;
  color: var(--blue);
  text-decoration: none;
  display: block;
  margin-top: 6px;
}
.prov-download-link:hover { text-decoration: underline; }

/* ── Submit modal ─────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }

.modal {
  background: #fff;
  border-radius: 12px;
  padding: 36px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}
.modal h2   { font-size: 1.25rem; margin-bottom: 8px; }
.modal-sub  { font-size: .9375rem; color: var(--gray-500); margin-bottom: 24px; }
.modal-title { font-weight: 600; }

.submit-stats {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat-item { text-align: center; }
.stat-num  { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); }
.stat-lbl  { font-size: .75rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .04em; }

.modal-actions { display: flex; gap: 12px; justify-content: flex-end; }

.submit-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: .875rem;
  margin-bottom: 16px;
}

/* ── Submitted screen ─────────────────────────────────────────────────────── */
.submitted-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.submitted-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 48px;
  width: 100%;
  max-width: 520px;
  text-align: center;
}
.submitted-icon {
  width: 56px;
  height: 56px;
  background: #dcfce7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--green);
}
.submitted-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.submitted-card p  { color: var(--gray-500); margin-bottom: 4px; }
.submitted-id {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--gray-400);
  word-break: break-all;
  display: block;
  margin: 12px 0 28px;
}

/* ── Help modal sections ──────────────────────────────────────────────────── */
.help-section { margin-bottom: 16px; }
.help-section strong { display: block; font-size: .875rem; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.help-section p { font-size: .875rem; color: var(--gray-500); line-height: 1.55; margin: 0; }

/* ── Toast notification ───────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #111827;
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity .22s, transform .22s;
  z-index: 2000;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--error { background: var(--red); }
.toast--success { background: #15803d; }

/* ── Quarantine overlay & cards ───────────────────────────────────────────── */
.quarantine-overlay {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quarantine-card {
  border: 1px solid var(--gray-200, #e5e7eb);
  border-left: 3px solid var(--blue, #2563EB);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  font-family: var(--font-sans, system-ui, sans-serif);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
/* Sealed-paste inline chip — inserted in-doc for the sealed_until_review
   paste policy. Doesn't render the pasted text; only shows a lock badge
   and char count. Real content lives in editor.getSealedPastes() and is
   revealed to the teacher on submission review. */
.sealed-paste {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  margin: 0 2px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.82em;
  font-weight: 600;
  color: #6B21A8;
  background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1px solid #C4B5FD;
  border-radius: 12px;
  user-select: none;
  cursor: default;
  vertical-align: baseline;
  line-height: 1.5;
  white-space: nowrap;
}
.sealed-paste:hover {
  background: #EDE9FE;
  border-color: #A78BFA;
}
[data-theme="dark"] .sealed-paste {
  color: #C4B5FD;
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.35);
}
[data-theme="dark"] .sealed-paste:hover {
  background: rgba(139,92,246,0.2);
  border-color: rgba(139,92,246,0.55);
}
.quarantine-card--image {
  border-left-color: var(--amber, #d97706);
}
.qc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  background: #f8fafc;
  border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.qc-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4b5563;
  background: #e5e7eb;
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.6;
}
.qc-label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  flex: 1;
}
.qc-dismiss {
  border: none;
  background: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.qc-dismiss:hover { color: #374151; background: #e5e7eb; }
.qc-body {
  padding: 8px 10px 10px;
}
.qc-preview {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  max-height: 64px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  margin-bottom: 6px;
}
.qc-note {
  font-size: 10.5px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 4px;
}
.qc-note::before {
  content: '🔒';
  font-size: 10px;
}
.qc-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.qc-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: background .15s;
}
.qc-btn--accept {
  background: #fff;
  border-color: #d1d5db;
  color: #374151;
}
.qc-btn--accept:hover { background: #f3f4f6; }
.qc-btn--reveal {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.qc-btn--reveal:hover { background: #dbeafe; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .prov-panel { display: none; }
  .editor-doc-wrap { width: 100%; }
}

/* Narrow screen: allow horizontal scroll so the 816px page stays readable */
@media (max-width: 856px) {
  .editor-scroll-area {
    justify-content: flex-start;
    overflow-x: auto;
    padding-left: 8px;
    padding-right: 8px;
  }
  .editor-pages-root,
  .editor-content-layer { flex-shrink: 0; }
}

@media (max-width: 680px) {
  .submit-stats        { grid-template-columns: repeat(2, 1fr); }
  .editor-header-zone,
  .editor-footer-zone   { padding: 6px 0; }
  .editor-header-zone   { padding: 0 0 4px; }
  .editor-title-wrap    { padding: 0; }
  .editor-prosemirror-wrap { padding: 0; }
  .editor-meta-bar      { padding: 8px 0 10px; }
  .editor-scroll-area   { padding: 16px 8px 48px; }
  [data-page-break]     { width: 0; height: 0; margin: 0; }
  .auth-card    { padding: 28px 24px; }
  .submitted-card { padding: 32px 24px; }
  .toolbar { padding: 5px 8px; }
}

@media print {
  .editor-header-input,
  .editor-footer-input { display: none; } /* replaced by @page in print */
  [data-page-break]::after { display: none; }
}

/* ── Dark theme ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --gray-900:  #f1f5f9;
  --gray-700:  #e2e8f0;
  --gray-500:  #94a3b8;
  --gray-400:  #64748b;
  --gray-300:  #334155;
  --gray-200:  #1e293b;
  --gray-100:  #0f172a;
  --gray-50:   #080c14;
  --page-bg:   #12151c;
  --blue-light: #172554;
  color-scheme: dark;
}
[data-theme="dark"] body {
  color: var(--gray-900);
  background: var(--page-bg);
}
[data-theme="dark"] .app-header,
[data-theme="dark"] .toolbar-bar,
[data-theme="dark"] .status-bar {
  background: #1c1f28;
  border-color: #2a2d38;
}
[data-theme="dark"] .auth-card,
[data-theme="dark"] .assignment-card,
[data-theme="dark"] .sub-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .submitted-card,
[data-theme="dark"] .prov-panel,
[data-theme="dark"] .tb-popup,
[data-theme="dark"] .quarantine-card {
  background: #252830;
  border-color: #2a2d38;
}
[data-theme="dark"] .sub-card-notes {
  background: #1c1f28;
  color: #D1D5DB;
}
[data-theme="dark"] .tb-select {
  background: #1c1f28;
  color: var(--gray-900);
  border-color: #2a2d38;
}
[data-theme="dark"] .form-group input {
  background: #1c1f28;
  color: var(--gray-900);
  border-color: #334155;
}
[data-theme="dark"] .prov-stat {
  background: #1c1f28;
  border-color: #2a2d38;
}
[data-theme="dark"] .prov-signing {
  background: #0f2010;
  border-color: #15482a;
}
[data-theme="dark"] .qc-btn--accept {
  background: #252830;
  border-color: #334155;
  color: var(--gray-900);
}
[data-theme="dark"] .btn-ghost {
  color: var(--gray-700);
  border-color: var(--gray-300);
}
[data-theme="dark"] .btn-ghost:hover:not(:disabled) { background: #252830; }
[data-theme="dark"] .qc-header { background: #1c1f28; border-color: #2a2d38; }
[data-theme="dark"] .auth-tabs { border-color: #2a2d38; }
[data-theme="dark"] #btn-theme { opacity: .7; }

/* Home screen — dark */
[data-theme="dark"] .home-sidebar { background: #1c1f28; border-color: #2a2d38; }
[data-theme="dark"] .home-sidebar-user { border-color: #2a2d38; }
[data-theme="dark"] .home-sidebar-user-name { color: #e5e7eb; }
[data-theme="dark"] .home-nav-item { color: #cbd5e1; }
[data-theme="dark"] .home-nav-item:hover { background: #252830; }
[data-theme="dark"] .home-nav-item.active { background: #172554; color: #93c5fd; }
[data-theme="dark"] .home-nav-item.active .home-nav-class-code { color: #93c5fd; }
[data-theme="dark"] .home-main { background: #12151c; }
[data-theme="dark"] .home-view-title { color: #e5e7eb; }
[data-theme="dark"] .home-fb-panel,
[data-theme="dark"] .home-thread,
[data-theme="dark"] .home-verify-card { background: #252830; border-color: #2a2d38; }
[data-theme="dark"] .home-verify-drop { border-color: #2a2d38; color: #6b7280; }
[data-theme="dark"] .home-verify-drop:hover, [data-theme="dark"] .home-verify-drop:focus-visible, [data-theme="dark"] .home-verify-drop.drag-over { background: #1c1f28; border-color: #60a5fa; color: #93c5fd; }
[data-theme="dark"] .home-verify-drop-title { color: #e5e7eb; }
[data-theme="dark"] .home-verify-drop-title code { background: #1c1f28; color: #d1d5db; }
[data-theme="dark"] .home-verify-meta { background: #1c1f28; }
[data-theme="dark"] .home-verify-meta dt { color: #6b7280; }
[data-theme="dark"] .home-verify-meta dd { color: #e5e7eb; }
[data-theme="dark"] .home-verify-check { border-color: #2a2d38; }
[data-theme="dark"] .home-verify-check-name { color: #e5e7eb; }
[data-theme="dark"] .home-verify-verdict--valid    { background: #052e1a; color: #34d399; border-color: #065f46; }
[data-theme="dark"] .home-verify-verdict--tampered { background: #2a0a0a; color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .home-verify-verdict--partial  { background: #2a1a05; color: #fbbf24; border-color: #78350f; }
[data-theme="dark"] .home-verify-verdict--error    { background: #1c1f28; color: #d1d5db; border-color: #2a2d38; }
[data-theme="dark"] .home-fb-notes { background: #1c1f28; color: #d1d5db; }
[data-theme="dark"] .home-fb-rubric-row { border-color: #2a2d38; }
[data-theme="dark"] .home-tabs { border-color: #2a2d38; }
[data-theme="dark"] .home-thread-msg--teacher { background: #1c1f28; color: #e5e7eb; }
[data-theme="dark"] .home-thread-form textarea { background: #1c1f28; color: #e5e7eb; border-color: #334155; }
[data-theme="dark"] .home-view .assignment-card-empty { border-color: #2a2d38; color: #6b7280; }
[data-theme="dark"] .home-sidebar-footer { border-color: #2a2d38; }

/* Writing surface in dark theme — the physical page and everything inside it
   must invert too, otherwise the page stays white while the body text turns
   light gray and the two together become unreadable. */
[data-theme="dark"] .editor-page-node {
  background: #1c1f28;
  box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 24px rgba(0,0,0,.28);
}
[data-theme="dark"] .ProseMirror {
  color: var(--gray-900);
}
[data-theme="dark"] .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--gray-400);
}
[data-theme="dark"] .ProseMirror a       { color: #93c5fd; }
[data-theme="dark"] .ProseMirror a:hover { color: #bfdbfe; }
[data-theme="dark"] .ProseMirror blockquote {
  border-left-color: var(--gray-300);
  color: var(--gray-700);
}
[data-theme="dark"] .ProseMirror code {
  background: #252830;
  color: var(--gray-900);
}
[data-theme="dark"] .ProseMirror pre {
  background: #252830;
  color: var(--gray-900);
}
[data-theme="dark"] .ProseMirror hr {
  border-color: var(--gray-300);
}
[data-theme="dark"] .ProseMirror table td,
[data-theme="dark"] .ProseMirror table th {
  border-color: var(--gray-300);
}
[data-theme="dark"] .ProseMirror table th {
  background: #252830;
}
[data-theme="dark"] .editor-meta-bar {
  color: var(--gray-500);
  border-top-color: var(--gray-300);
}
[data-theme="dark"] .editor-header-mount .ProseMirror,
[data-theme="dark"] .editor-footer-mount .ProseMirror {
  color: var(--gray-700);
}
[data-theme="dark"] .editor-header-mount .ProseMirror-focused p.is-editor-empty:first-child::before,
[data-theme="dark"] .editor-footer-mount .ProseMirror-focused p.is-editor-empty:first-child::before {
  color: var(--gray-400);
}
[data-theme="dark"] .editor-header-mount:focus-within,
[data-theme="dark"] .editor-footer-mount:focus-within {
  box-shadow: 0 1px 0 0 var(--gray-300);
}
[data-theme="dark"] .doc-name-input {
  color: var(--gray-700);
}
[data-theme="dark"] .doc-name-input::placeholder { color: var(--gray-400); }
[data-theme="dark"] .doc-name-input:hover,
[data-theme="dark"] .doc-name-input:focus {
  background: #252830;
  border-color: #2a2d38;
}