:root {
  --ink: #292d28;
  --muted: #73796f;
  /* Tim’s default for secondary options: quiet gray at 11px keeps optional
     actions available without competing with the primary next step. */
  --secondary-option-color: #92958f;
  --secondary-option-size: 11px;
  --line: #e2e4de;
  --blue: #e4eff2;
  --blueink: #3d626d;
  /* Shared with the editor’s “All editions” badge. */
  --edition-blue: #345c73;
  --gold: #99834e;
  --paper: #fafaf7;
  --draft: #f8e8e4;
  --final: #faf1d5;
  --published: #eef4e9;
  /* Standard completion green matches the student workbook’s activity checks. */
  --completion-green: #326548;
}
* {
  box-sizing: border-box;
  /* Keep scroll geometry stable, but let the workbook—not scroll tracks—lead. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.is-scrolling {
  scrollbar-color: #73796f55 transparent;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  background: transparent;
}
.is-scrolling::-webkit-scrollbar-thumb {
  background: #73796f55;
  border-radius: 5px;
}
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    14px/1.6 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
a {
  color: var(--blueink);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #6b929e;
  outline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
}
h1 {
  font-size: 40px;
  letter-spacing: -0.8px;
  margin: 0;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 23px;
}
.muted,
small,
time {
  color: var(--muted);
}
small,
time {
  font-size: 12px;
}
time {
  display: block;
}
label {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 9px;
  color: var(--ink);
}
textarea {
  resize: vertical;
}
input[type="checkbox"] {
  width: auto;
  accent-color: var(--blueink);
}
.brand {
  font:
    23px/1.05 Georgia,
    serif;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
}
.brand i {
  font-size: 28px;
}
.masthead {
  /* Share the content edges with .shell, including its maximum width. */
  padding: 22px max(28px, calc((100% - 1204px) / 2));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: white;
}
.shell {
  max-width: 1260px;
  margin: auto;
  padding: 40px 28px;
}
.heading,
.toolbar,
.row,
.card-top,
.sheet-actions,
.context,
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.heading {
  margin-bottom: 30px;
}
.heading-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
/* Reuse the editor’s Example tag: context stays quieter than the page title. */
.example-tag {
  display: inline-block;
  font:
    10px/1.5 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  color: #7b8078;
  background: #e5e7e1;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  white-space: nowrap;
}
.brand-logo {
  width: 100px;
  max-height: 65px;
  object-fit: contain;
}
.avatar {
  border-radius: 50%;
  background: var(--blue);
  width: 36px;
  height: 36px;
  color: var(--blueink);
}
.top-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.top-tabs button,
.editor-tabs button,
.publisher-section-tabs button,
.publisher-edit-tabs button,
.teacher-example-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.editor-tabs .nav-icon,
.publisher-section-tabs .nav-icon,
.publisher-edit-tabs .nav-icon {
  width: 14px;
  height: 14px;
}
.top-tabs button {
  white-space: normal;
  max-width: 100%;
  text-align: left;
  padding: 8px 0 10px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  position: relative;
  isolation: isolate;
  transition: color 140ms ease;
}
/* A recessed hover surface makes these text tabs feel actionable without
   turning every destination into a permanent pill or moving wrapped rows. */
.top-tabs button::before {
  content: "";
  position: absolute;
  inset: 3px -7px 4px;
  z-index: -1;
  border-radius: 5px;
  background: #eceee9;
  box-shadow: inset 0 1px 3px #292d2814;
  opacity: 0;
  transition: opacity 140ms ease, box-shadow 140ms ease;
}
.top-tabs button:hover,
.top-tabs button:focus-visible {
  color: var(--ink);
}
.top-tabs button:hover::before,
.top-tabs button:focus-visible::before {
  opacity: 1;
}
.top-tabs button:active::before {
  opacity: 1;
  background: #e3e7df;
  box-shadow: inset 0 2px 4px #292d2828;
}
@media (prefers-reduced-motion: reduce) {
  .top-tabs button,
  .top-tabs button::before { transition: none; }
}
.top-tabs .active {
  border-color: var(--gold);
  color: var(--ink);
}
/* The shared gold surface connects the active parent to its child destinations;
   Tim found two separated rows too easy to read as unrelated navigation. */
.top-tabs.has-editor-tabs {
  margin-bottom: 0;
  border-bottom-color: #dfd3af;
}
.top-tabs.has-editor-tabs .active {
  padding-inline: 12px;
  background: #f5f0e2;
  border-radius: 7px 7px 0 0;
}
.top-tabs.has-editor-tabs .active::before { display: none; }
.editor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0 0 28px;
  padding: 10px 8px;
  background: #f5f0e2;
  border-radius: 0 0 8px 8px;
}
.editor-tabs button {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.editor-tabs button:hover { background: #eae1c9; color: var(--ink); }
.editor-tabs button.active { background: var(--blue); color: var(--blueink); }
.editor-tabs .badge { margin-left: 6px; }
.editor-tabs[hidden], .top-tabs[hidden] { display: none; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: white;
  text-decoration: none;
  white-space: nowrap;
}
.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: white;
}
.soft {
  background: var(--blue);
  color: var(--blueink);
  border-color: transparent;
}
.link {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--blueink);
  padding: 0;
}
.quiet {
  color: var(--muted);
  font-size: 12px;
}
.toolbar {
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.classes-heading {
  justify-content: flex-start;
}
.classes-heading h2 {
  margin: 0;
}
.controls {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.controls label {
  flex: 1;
  min-width: 120px;
}
.key {
  margin-bottom: 24px;
  color: var(--muted);
}
.key summary {
  cursor: pointer;
  margin-bottom: 12px;
}
.key-items {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.pill {
  display: inline-block;
  border-radius: 7px;
  padding: 4px 9px;
  white-space: nowrap;
  font-size: 12px;
}
.draft,
.proposed {
  background: var(--draft);
  color: #934c40;
}
.finalized {
  background: var(--final);
  color: #80651b;
}
.published {
  background: var(--published);
  color: var(--completion-green);
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  background: #bb6658;
}
.dot.finalized {
  background: #c59a24;
}
.dot.published {
  background: #548550;
}
.dot.peer {
  outline: 1px dotted #bb6658;
  outline-offset: 2px;
  opacity: 0.65;
}
.badge {
  font-size: 11px;
  background: var(--blue);
  color: var(--blueink);
  padding: 2px 6px;
  border-radius: 12px;
  margin-left: 5px;
}
.reader {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  gap: 28px;
}
/* One full-width control bar establishes the scope of both panes below it;
   another heading would repeat what the field labels already explain. */
.reader-controls {
  background: var(--blue);
  border: 1px solid #cedee3;
  border-top: 3px solid var(--edition-blue);
  border-radius: 8px;
  padding: 14px 16px 16px;
  margin-bottom: 18px;
}
.reader-controls label {
  color: var(--blueink);
  font-weight: 600;
}
.reader-controls input,
.reader-controls select {
  background: white;
  color: var(--ink);
  font-weight: 400;
}
.toc {
  min-width: 0;
  height: 68vh;
  overflow: auto;
  position: sticky;
  top: 16px;
  border-right: 1px solid var(--line);
  padding-right: 15px;
}
.toc details {
  margin-bottom: 15px;
}
.toc .toc-item {
  width: 100%;
  text-align: left;
  display: block;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 3px;
}
.toc .toc-item:hover {
  color: var(--ink);
  background: #eef0eb;
}
.toc .toc-item.active {
  background: var(--blue);
  color: var(--blueink);
  box-shadow: inset 2px 0 var(--blueink);
}
.canvas {
  height: 72vh;
  overflow: auto;
  scroll-behavior: smooth;
  padding-right: 10px;
}
.sheet,
.card,
.history,
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
}
.sheet {
  margin-bottom: 25px;
}
.canvas .sheet {
  /* Clip rounded corners without creating a scroll container that traps sticky. */
  overflow: clip;
}
.canvas .sheet-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f5f5f2;
}
.search-match {
  background: #ffe677;
  color: inherit;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sheet-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.section-activity summary { cursor: pointer; }
.canvas .section-head { align-items: flex-start; }
.canvas .section-head > div:first-child { min-width: 0; }
.section-activity summary > span { display: inline; }
.section-activity summary time { margin-left: 14px; }
.activity-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 8px;
  vertical-align: middle;
  background: #8b9188;
}
.activity-draft { background: #bb6658; }
.activity-finalized { background: #c59a24; }
.activity-published { background: #548550; }
.activity-unread { outline: 1px solid currentColor; outline-offset: 2px; }
.activity-draft.activity-unread { animation: draft-notice 1.8s ease-in-out infinite; }
@keyframes draft-notice { 50% { opacity: .35; } }
.activity-entry { padding: 0; text-align: left; font: inherit; }
.activity-entry:hover { text-decoration: underline; text-underline-offset: 3px; }
.activity-provenance { max-width: 48ch; font-size: 10px; color: var(--muted); }
.section-activity .version-events {
  max-height: 28vh;
  overflow: auto;
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .activity-draft.activity-unread { animation: none; }
}
.prose {
  font:
    18px/1.85 Georgia,
    serif;
  padding: 28px;
}
.prose h3 {
  font-size: 27px;
}
.prose p {
  white-space: pre-wrap;
}
.release {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.release.draft {
  background: var(--draft);
}
.release.finalized {
  background: var(--final);
}
.release.published {
  flex-wrap: wrap;
  background: var(--published);
}
.empty {
  padding: 32px;
  color: var(--muted);
  text-align: center;
}
.history-row {
  padding: 22px;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 22px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
}
.history-row:last-child {
  border-bottom: 0;
}
.history-row strong {
  font-weight: 500;
}
.history-row p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
}
.unread {
  box-shadow: inset 3px 0 var(--blueink);
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.card {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* Access is a quiet card-level tool; the workbook action owns the bottom-right. */
.class-card-actions {align-self:flex-end;margin-top:auto;padding-top:12px;max-width:100%}
.class-card-actions .btn {max-width:100%;white-space:normal}
.course-card .course-access-tag {align-self:flex-start;margin:0;padding:5px 8px;cursor:pointer}
.course-access-tag:hover {color:var(--ink);background:#dfe2dc}
.card h2 {
  margin: 8px 0 0;
}
.card.selected {
  border-color: #6b929e;
}
.card .modules {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.card-bottom {
  margin-top: auto;
  padding-top: 12px;
}
.card-top {
  align-items: start;
}
.card-logo {
  width: 100px;
  height: 85px;
  object-fit: contain;
}
.card-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.context {
  margin-bottom: 20px;
  padding: 10px 16px;
  background: var(--blue);
  border-radius: 12px;
  font-size: 12px;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
th,
td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
/* Put creation beside its subject, without competing with the page’s primary actions. */
.column-heading {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.add-tag {
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--blue);
  color: var(--blueink);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}
.add-tag:hover { background: #d4e3e8; }
.add-tag:active { box-shadow: inset 0 1px 3px #365b7033; }
td .link {
  margin-right: 12px;
}
td [data-action="person-name"] {
  margin-right: 6px;
  font-size: var(--secondary-option-size);
  text-decoration: none;
}
/* Include the table’s 1px border in the shared 22px secondary-action inset. */
td:has([data-action="remove-roster"]) {
  text-align: right;
  padding-right: 21px;
  white-space: nowrap;
}
.access-compose {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 22px;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 24px 14px;
  list-style: none;
  margin: 24px 0 30px;
  background: #edf2f2;
  border: 1px solid #dce5e4;
  border-radius: 18px;
}
.steps li {
  position: relative;
  text-align: center;
  color: var(--muted);
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 24px);
  width: calc(100% - 48px);
  height: 2px;
  background: #cdd8d6;
}
.steps li.complete::after {
  background: #a9bea5;
}
.step {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  color: inherit;
}
.orb {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper, #fafaf7);
}
.current .orb {
  background: var(--gold);
  border-color: var(--gold);
  color: white;
  box-shadow: 0 0 0 4px #99834c18;
}
.steps .current {
  color: var(--ink);
}
.orb.done {
  background: var(--completion-green);
  color: white;
  border-color: var(--completion-green);
}
.current .orb.done {
  box-shadow: 0 0 0 4px #32654818;
}
.access-actions,
.access-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  /* A CTA and its helper are one unit at every breakpoint. Shrink the unit,
     rather than letting a full-width wrapper strand its secondary action. */
  width: max-content;
  max-width: 100%;
  align-self: center;
}
.access-next {
  margin-left: auto;
}
.access-actions .btn {
  white-space: nowrap;
}
.roster-blank td {
  height: 44px;
}
.roster-blank:last-child td {
  border-bottom: 0;
}
#identity {
  display: flex;
  align-items: center;
  gap: 16px;
}
.account-badge {
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.account-badge .avatar {
  display: inline-grid;
  place-items: center;
  font-size: 13px;
}
.role-check {
  width: 14px;
  height: 14px;
  margin-left: -5px;
  color: var(--gold);
}
/* Role colors distinguish staff while retaining one shared account design. */
.account-badge[data-role="super"] .role-check,
.access-role-heading[data-role="super"] .role-check {
  color: #1d2255;
}
.account-badge[data-role="teacher"] .role-check {
  color: var(--completion-green);
}
.profile-actions {
  width: 100%;
}
.profile-save {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.profile-session {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}
/* My grades sits left of Sign out and reads as a real link, not fine print. */
.profile-session .link.profile-grades {
  margin-right: auto;
  font-size: 14px;
  color: var(--accent, #3d626d);
}
.profile-session .link {
  font-size: 11px;
  color: var(--muted);
  padding: 0;
}
.school-mark-crop {
  display: inline-block;
  overflow: hidden;
  aspect-ratio: 265 / 83;
  vertical-align: middle;
  flex-shrink: 0;
}
.school-mark-crop img {
  display: block;
  width: 134.72%;
  max-width: none;
  height: auto;
}
.stats {
  font-size: 32px;
  font-family: Georgia, serif;
}
.privacy {
  font-size: 12px;
  color: var(--muted);
}
.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.fields .wide {
  grid-column: 1/-1;
}
.editor-body {
  min-height: 320px;
  font:
    17px/1.8 Georgia,
    serif;
}
.edit-title {
  font:
    23px Georgia,
    serif;
}
.panel {
  padding: 28px;
  max-width: 540px;
  margin: 60px auto;
}
.panel h1 {
  font-size: 32px;
  margin-bottom: 30px;
}
.panel .btn {
  margin-top: 20px;
}
.panel label {
  margin-top: 15px;
}
.alert {
  color: #934c40;
  white-space: pre-wrap;
}
.success {
  color: var(--completion-green);
}
dialog {
  width: min(850px, calc(100vw - 32px));
  max-height: 90vh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: white;
  color: var(--ink);
}
dialog::backdrop {
  background: #202b2959;
}
dialog .dialog-head {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}
dialog h2 {
  margin: 0;
}
dialog .dialog-body {
  padding: 26px;
  overflow: auto;
  max-height: 66vh;
}
.sheet-actions {
  padding: 20px 28px;
  border-top: 1px solid var(--line);
  justify-content: end;
}
.sheet-actions .draft-delete {
  order: -1;
  margin-right: auto;
}
dialog .prose {
  padding: 0;
}
dialog textarea {
  margin-bottom: 12px;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.compare-grid .prose {
  font-size: 15px;
}
.diff-added {
  background: var(--published);
}
.diff-removed {
  background: var(--draft);
}
.version-events {
  padding: 12px 0;
}
.version-events li {
  margin-bottom: 10px;
}
.privacy-note {
  padding: 15px;
  background: var(--paper);
  border-radius: 12px;
  font-size: 12px;
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 22px;
  border-radius: 25px;
  background: var(--ink);
  color: white;
  display: none;
  z-index: 100;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.busy {
  pointer-events: none;
  opacity: 0.65;
}
.form-stack > * {
  margin-bottom: 15px;
}
.public-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 25px 0;
}
.print-sheet {
  margin: 30px 0;
}
.print-sheet .prose {
  max-width: 900px;
  margin: auto;
}
.note-log {
  border-left: 2px solid var(--line);
  padding-left: 14px;
}
.nowrap {
  white-space: nowrap;
}
@media (max-width: 800px) {
  h1 {
    font-size: 30px;
  }
  .shell {
    padding: 25px 18px;
  }
  .masthead {
    padding-inline: 18px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .reader {
    grid-template-columns: 160px 1fr;
    gap: 15px;
  }
  .history-row {
    grid-template-columns: 100px 1fr;
    gap: 15px;
  }
  .history-row > :last-child {
    grid-column: 2;
  }
  .prose {
    padding: 20px;
    font-size: 17px;
  }
  .heading .brand-logo {
    width: 75px;
  }
  .top-tabs {
    gap: 4px 18px;
  }
  .card {
    padding: 22px;
  }
  .controls label {
    min-width: 140px;
  }
}
@media (max-width: 550px) {
  .reader {
    display: block;
  }
  .toc {
    height: 130px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }
  .canvas {
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .canvas .sheet-head {
    top: 130px;
  }
  .compare-grid,
  .fields {
    grid-template-columns: 1fr;
  }
  .access-compose {
    align-items: stretch;
    flex-direction: column;
  }
  .steps {
    gap: 12px;
    font-size: 11px;
  }
  .card-logo {
    width: 70px;
  }
  .masthead {
    padding: 18px;
  }
  .brand {
    font-size: 18px;
  }
}
@media print {
  .masthead,
  .top-tabs,
  .editor-tabs,
  .toolbar,
  .controls,
  .public-contents,
  .no-print {
    display: none !important;
  }
  .shell {
    max-width: none;
    padding: 0;
  }
  .prose {
    font-size: 12pt;
    padding: 0;
  }
  .print-sheet {
    break-inside: auto;
  }
  .print-sheet h2 {
    break-after: avoid;
  }
  body {
    background: white;
  }
  a {
    color: inherit;
  }
}

[hidden] {
  display: none !important;
}

.first-class {
  max-width: 480px;
  margin: 48px auto 0;
}
.first-class input {
  margin-top: 8px;
}
.first-class-next {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
/* Class identity is a small editorial mark, not another filled CTA shape.
   Carry the blue accent across pages while keeping the name on plain paper. */
.class-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 0 6px 12px;
  border: 0;
  border-left: 3px solid #b6cbd6;
  border-radius: 0;
  background: transparent;
  color: var(--edition-blue);
  font:
    500 16px/1.4 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  vertical-align: middle;
}
.class-tag > span:not(.sr-only) {
  overflow-wrap: anywhere;
  min-width: 0;
}
.class-mark {
  width: 17px;
  height: 17px;
  flex: none;
}
.class-mark rect {
  opacity: 1;
}
.controls label.class-picker {
  flex: 0 1 auto;
  min-width: 0;
}
.class-picker select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: 0 20px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}
.class-picker select option {
  background: var(--paper);
  color: var(--ink);
}
.class-controls {
  align-items: center;
}
.add-class-small {
  font-size: 11px;
  padding: 10px 4px;
}
.roster-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  margin-bottom: 22px;
  align-items: flex-start;
}
.onboarding-secondary,
.roster-privacy,
[data-action="remove-roster"] {
  padding: 0;
  font-size: var(--secondary-option-size);
  line-height: 1.6;
  text-decoration: none;
}
/* End helper text where the pill’s rounded end begins, regardless of width. */
.onboarding-secondary {
  align-self: flex-end;
  margin-right: 22px;
}
/* Keep optional actions behind the primary onboarding step. */
.onboarding-secondary,
.roster-privacy,
[data-action="remove-roster"] {
  color: var(--secondary-option-color);
}
.roster-privacy {
  align-self: center;
  margin-right: 0;
  gap: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Center the whole disclosure, including its help icon, beneath the CTA. */
.roster-privacy .info-mark {
  position: static;
}
.info-mark {
  display: inline-grid;
  place-items: center;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 7px;
  line-height: 1;
  flex-shrink: 0;
}
.roster-privacy:hover,
.onboarding-secondary:hover,
[data-action="remove-roster"]:hover {
  color: var(--muted);
}

.email-entry {
  flex: 1;
  min-width: 0;
  /* Tim (2026-09-23): full-width on desktop pushed "Add teachers/students" to the
     far edge, so the next action was hard to find. ~36rem still fits several
     addresses per line and keeps the CTA beside the box; phones stack anyway. */
  max-width: 36rem;
}
.email-entry textarea {
  /* Remove the inline baseline gap so the hint sits half as far away. */
  display: block;
}
.email-entry small {
  display: block;
  margin-top: 5px;
  font-size: var(--secondary-option-size);
  color: var(--secondary-option-color);
}
.roster-delegation {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}

.pending-email {
  display: block;
  font-size: var(--secondary-option-size);
  color: var(--secondary-option-color);
  margin-top: 3px;
}

/* Square corners distinguish an editable choice from completed roadmap steps. */
.roster-delegation input {
  appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  flex: none;
  border-radius: 4px;
  border-color: #8b968a;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.roster-delegation input:checked {
  background: var(--completion-green);
  border-color: var(--completion-green);
  color: white;
}
.roster-delegation input:checked::after {
  content: "✓";
  font-size: 16px;
  line-height: 1;
}
.mail-status {
  font-size: 12px;
  color: var(--muted);
}

.ai-context-editor {
  max-width: 960px;
  margin: auto;
}
.ai-context-editor textarea {
  font:
    14px/1.65 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
.ai-context-editor > details {
  margin: 20px 0;
}
.ai-perspective-picker {
  margin: 24px 0 8px;
}
.ai-perspective-picker label {
  min-width: 230px;
}
.ai-context-actions {
  margin-top: 18px;
  flex-wrap: wrap;
}
.ai-context-actions small {
  color: var(--muted);
}
.ai-preview pre,
.ai-context-review {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    13px/1.7 -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: #f4f5f0;
  padding: 18px;
  border-radius: 9px;
  max-height: 450px;
  overflow: auto;
}
.ai-version-list {
  margin-top: 16px;
}
.ai-version-list .toolbar {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* The complete public edition is a navigable print preview, not dashboard cards. */
.workbook-print-preview .full-workbook-heading {
  margin-top: 0;
}
.workbook-print-preview .full-workbook-toc {
  display: block;
}
.workbook-print-preview .full-workbook-toc > ol {
  columns: 2;
}
.workbook-print-preview .full-workbook-toc ol ol {
  columns: auto;
}
.workbook-print-preview .print-availability {
  font:
    11px/1.5 Arial,
    sans-serif;
  color: #617078;
}
.workbook-print-preview .print-reading-list section {
  margin-bottom: 20px;
}
.workbook-print-preview .workbook-updated time {
  display: inline;
  margin: 0;
}
.print-contents-return {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 12px;
  box-shadow: 0 2px 10px #0001;
  text-decoration: none;
}
@media (max-width: 550px) {
  .workbook-print-preview.shell {
    padding: 26px 20px !important;
  }
  .workbook-print-preview .full-workbook-toc > ol {
    columns: 1 !important;
  }
}
@media print {
  .print-contents-return,
  body > p.privacy {
    display: none !important;
  }
  .full-workbook-toc {
    display: block !important;
  }
}

/* Source coverage is supporting evidence, kept separate from editable guidance. */
.ai-source-summary {
  margin: 14px 0 20px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 13px;
}
.ai-source-summary h3 { font: inherit; font-weight: 600; margin: 0 0 6px; }
.ai-source-summary ul { list-style: none; margin: 12px 0; padding: 0; }
.ai-source-summary li + li { margin-top: 14px; }
.ai-source-summary li p { margin: 4px 0; }
.ai-source-summary .privacy { margin: 5px 0; }
.ai-source-summary a { color: var(--blueink); }
.ai-source-summary small { color: var(--muted); }

.comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 20px 0; }
.comparison-side { border: 1px solid var(--line); border-radius: 12px; min-width: 0; padding: 18px; }
.comparison-side label { display: block; margin: 0 0 14px; }
.comparison-side textarea { width: 100%; }
.passage-picker > summary { color: var(--accent, #365d70); cursor: pointer; font-size: 13px; }
.passage-picker > .privacy { margin: 10px 0 6px; font-size: 11px; }
.passage-search { width: 100%; margin-top: 8px; }
.passage-results { max-height: 340px; overflow: auto; }
.passage-result { padding: 14px 0; border-bottom: 1px solid var(--line); }
.passage-result small, .passage-result strong { display: block; }
.passage-result small { font-size: 11px; color: var(--muted); }
.passage-result strong { font-size: 13px; margin-top: 3px; }
.passage-result p { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.passage-result .link, .passage-more { font-size: 12px; }
.comparison-side .fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.comparison-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-activity ul { padding-left: 16px; }
.ai-activity time { display: block; }
@media (max-width: 700px) { .comparison-grid { grid-template-columns: 1fr; } }

.privacy-sharing { padding: 16px; margin: 18px 0; background: #f3f4f1; border-radius: 8px; }
.privacy-sharing label { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.privacy-sharing input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 4px; accent-color: #316348; }
.privacy-sharing small { display: block; margin: 6px 0 0 28px; }
.privacy-sharing [role=status]:empty { display: none; }

#dialog:has(.answer-comparison) { width: min(1160px, calc(100vw - 32px)); }
#dialog[open]:has(.answer-comparison) { display: flex; flex-direction: column; max-height: 90dvh; overflow: hidden; }
#dialog:has(.answer-comparison) .dialog-head,
#dialog:has(.answer-comparison) .sheet-actions { flex-shrink: 0; }
#dialog:has(.answer-comparison) .dialog-body { min-height: 0; max-height: none; }
#dialog:has(.answer-comparison) .dialog-head h2 { font-size: clamp(22px, 3.3vw, 34px); }
#dialog:has(.answer-comparison) .dialog-head { gap: 14px; }
.comparison-share { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; font-size: 12px; white-space: nowrap; }
.comparison-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.comparison-heading { min-width: 0; flex: 1; }
.comparison-title-row h2 { display: inline; }
.comparison-title-row .example-tag { margin-left: 10px; vertical-align: middle; }
.comparison-created { margin: 5px 0 0; font-size: 11px; }
#dialog:has(.answer-comparison) .dialog-head { padding-bottom: 18px; }
.example-tag { display: inline-block; padding: 3px 7px; border-radius: 5px; background: #e7e8e3; color: #747b72; font: 500 11px/1.4 var(--sans, sans-serif); vertical-align: middle; }
.comparison-question { font-family: Georgia, serif; font-size: 23px; line-height: 1.4; margin: 24px 0; }
.answer-column { min-width: 0; display: flex; flex-direction: column; }
.comparison-person { display: flex; align-items: center; gap: 14px; }
.comparison-person h3 { margin: 0; font-size: 24px; }
.saint-portrait { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.comparison-model { display: flex; align-items: center; gap: 8px; margin: 14px 0; font-size: 12px; color: var(--muted); }
.comparison-model img { width: 30px; height: 30px; object-fit: contain; }
.comparison-model small { display: block; font-size: 10px; margin-top: 2px; }
.context-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.context-tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; font: inherit; font-size: 11px; color: var(--muted); background: #fff; cursor: pointer; text-align: left; }
.context-tag:hover { background: #edf2f3; color: var(--ink); }
.context-tag .activity-dot { margin: 0; flex: 0 0 7px; }
.comparison-answer { flex: 1; padding: 22px; border-top: 3px solid #365d70; background: #f1f6f7; border-radius: 3px 3px 12px 12px; font-family: Georgia, serif; font-size: 19px; line-height: 1.65; }
.comparison-answer p:first-child { margin-top: 0; }
.comparison-answer p:last-child { margin-bottom: 0; }
.comparison-judge { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0 22px; margin: 30px 0; }
.comparison-judge h3 { margin: 10px 0; }
.judge-columns { font-size: 12px; row-gap: 0; }
.judge-columns > section { display: grid; grid-template-rows: subgrid; }
.judge-columns h4 { margin: 0 0 12px; font-size: 15px; }
.judge-row { border-top: 1px solid var(--line); padding: 12px 0; }
.judge-row p { margin: 5px 0 0; }
.judge-rating { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; white-space: nowrap; }
.judge-rating [aria-hidden] { font-size: 16px; letter-spacing: 1px; }
.stars-filled { color: #967d37; }
.stars-empty { color: #a2a79e; }
.judge-rating small { color: var(--muted); font-size: 11px; }
.comparison-contexts .toolbar { align-items: center; }
.comparison-contexts label { font-size: 12px; min-width: 200px; }
.comparison-contexts select { display: block; }
.comparison-context { scroll-margin-top: 14px; margin-bottom: 18px; }
.comparison-context summary { cursor: pointer; font-size: 14px; }
.context-diff { white-space: pre-wrap; overflow-wrap: anywhere; background: #f5f5f2; border-radius: 8px; padding: 16px; margin-top: 10px; font-size: 13px; line-height: 1.7; }
.comparison-contexts ins { background: #dceddc; color: #245a35; text-decoration: none; }
.comparison-contexts del { background: #f7dedb; color: #933d37; }
@media(max-width:600px) { .comparison-share span { display: none; } .comparison-question { font-size: 20px; } }

.comparison-copy-status:empty { display: none; }

.saved-comparisons-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 28px 0 20px; }
.saved-comparisons-heading h2 { margin: 0; }

.model-preview { margin-bottom: 14px; }
.model-label { display: block; color: var(--muted); font-size: 13px; }
.model-picker { border: 1px solid var(--line); border-radius: 10px; background: white; overflow: hidden; }
.model-picker > summary { display: flex; gap: 6px; align-items: center; padding: 12px 14px; cursor: pointer; font-size: 13px; }
.model-picker > summary::after { content: "⌄"; margin-left: auto; color: var(--muted); }
.model-picker[open] > summary::after { content: "⌃"; }
.model-picker > summary:hover { background: var(--blue-soft, #e5eff2); }
.model-picker > summary:focus-visible { outline: 2px solid var(--accent, #365d70); outline-offset: -3px; }
.model-provider-icons { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.model-provider-icons img { width: 14px; height: 14px; object-fit: contain; }
.model-catalogue { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px; border-top: 1px solid var(--line); }
.model-provider { padding: 14px 0; border-bottom: 1px solid var(--line); }
.model-provider:last-child { border-bottom: 0; }
.model-provider h4 { display: flex; align-items: center; gap: 9px; font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, sans-serif; margin: 0 0 8px; }
.model-provider h4 img { width: 24px; height: 24px; object-fit: contain; }
.model-preview-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 10px; padding: 7px 0 7px 33px; font-size: 13px; }
.model-preview-row small { color: var(--muted); font-size: 11px; }
.model-preview-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

.comparison-intro { font-style: italic; margin: -16px 0 24px; }
.comparison-side-tools { min-height: 20px; margin: -8px 0 12px; }
.comparison-secondary { color: var(--muted); font-size: 12px; text-decoration: none; }
.comparison-secondary:hover, .comparison-secondary:focus-visible { color: var(--blueink); text-decoration: underline; }
.comparison-side-tools .comparison-secondary { font-size: 11px; text-align: left; }
.comparison-actions { justify-content: flex-end; }
.comparison-actions .controls { align-items: center; }

.comparison-side label.comparison-follow { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.comparison-follow input { flex: 0 0 auto; accent-color: var(--blueink); }
.comparison-side textarea[readonly] { background: #f3f4f1; color: var(--muted); }
.passage-field > label { margin-bottom: 4px; }
.passage-picker .passage-search { margin: 0 0 8px; }
.comparison-example-tag { background: var(--blue); color: var(--blueink); font-size: 12px; padding: 6px 10px; cursor: pointer; }
.comparison-example-tag:hover { filter: brightness(.97); }
.comparison-example-tag span { margin-left: 5px; }

.ai-conversation-policy { display: flex; align-items: start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ai-conversation-policy > p { margin: 0; }
.ai-private-notice { max-width: 440px; color: var(--muted); font-size: 12px; }
.ai-private-notice summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 5px; }
.ai-private-notice summary::-webkit-details-marker { display: none; }
.ai-private-notice p { padding: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; line-height: 1.6; }
.empty > small { display: block; margin-top: 8px; }

.availability-controls label { flex: 0 1 280px; }
.availability-table th { vertical-align: top; }
.availability-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.availability-filters select { width: auto; max-width: 100%; min-width: 0; padding: 6px 24px 6px 8px; font-size: 12px; font-weight: 400; }
@media (max-width: 550px) {
  .availability-controls label { flex: 1 1 100%; }
  .availability-table table { table-layout: fixed; }
  .availability-table th:last-child { width: 66px; }
  .availability-table th, .availability-table td { padding: 12px 10px; overflow-wrap: break-word; }
  .availability-filters select { width: 100%; }
}

.availability-changed { font-size: 12px; }
.availability-changed time { display: block; color: var(--muted); font-size: 11px; }
/* Keep four readable columns; narrow screens can scroll the table instead of squeezing names and dates. */
.availability-table table { min-width: 640px; }
@media (max-width: 550px) { .availability-table table { table-layout: auto; } }

/* A docked chat title bar stays discoverable without competing with page CTAs.
   Opening grows the same window upward; closing keeps the unfinished message. */
#support {position:fixed;right:max(20px,env(safe-area-inset-right));bottom:0;z-index:80;width:auto;max-width:calc(100vw - 32px);margin:0;padding:0;color:var(--ink)}
#bug-reporter {width:224px;max-width:calc(100vw - 32px);box-shadow:0 -2px 12px #243b4510;border-radius:4px 4px 0 0}
#bug-reporter[open] {width:340px}
#bug-reporter > summary {display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:12px;font-weight:500;background:#edf2f3;color:#51646a;border:1px solid #d5dfe1;border-bottom:0;border-radius:4px 4px 0 0;padding:10px 12px;min-height:40px;box-sizing:border-box}
#bug-reporter > summary::-webkit-details-marker {display:none}
#bug-reporter > summary:hover {background:#e3edef}
#bug-reporter > summary svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bug-window-toggle {margin-left:auto;font-size:16px;line-height:1}
.bug-window-toggle::before {content:"⌃"}
#bug-reporter[open] .bug-window-toggle::before {content:"−"}
#bug-form {width:100%;max-height:calc(100dvh - 72px);overflow:auto;box-sizing:border-box;margin:0;padding:16px 16px max(16px,env(safe-area-inset-bottom));background:#fff;border:1px solid #d5dfe1;border-bottom:0;border-radius:0}
.bug-new-dot {width:7px;height:7px;border-radius:50%;background:#d6514d;box-shadow:0 0 0 2px #fff;flex:none}
/* The student reflection sheets keep writing and voice together; numbered,
   unfilled steps make selecting a page item feel like part of that same form. */
.bug-steps {list-style:none;margin:0;padding:0;display:grid;gap:18px}
.bug-steps > li {display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.bug-step-number {display:grid;place-items:center;width:22px;height:22px;border:1px solid #d5dfe1;border-radius:50%;font-size:11px;color:#6c7b7f;box-sizing:border-box;margin-top:2px}
#bug-point {display:block;max-width:100%;padding:2px 0;margin:0;border:0;border-radius:2px;background:none;color:#315b6a;font:inherit;font-size:13px;line-height:1.6;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:#b8cfd5;text-underline-offset:3px}
#bug-point:hover {color:#203f4a;text-decoration-color:currentColor}
.bug-step-label {display:block;margin:2px 0 9px;font-size:13px;line-height:1.6;color:#51646a}
.bug-composer {display:grid;grid-template-columns:minmax(0,1fr) 30px 34px;align-items:end;gap:4px 8px;padding:8px;background:#fff;border:1px solid #e0dfd8;border-radius:16px}
#bug-form textarea {display:block;grid-column:1/-1;min-width:0;width:100%;box-sizing:border-box;min-height:64px;max-height:200px;padding:5px;border:0;border-radius:8px;background:transparent;font-size:13px;line-height:1.5;resize:vertical;margin:0}
#bug-form textarea::placeholder {color:#999c97}
.bug-composer #bug-record {grid-column:2}
#bug-send {flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#315b6a;color:white;font-size:24px;line-height:1;cursor:pointer}
#bug-send:disabled {background:#dce2e2;color:#8a9699;cursor:default}
#bug-attachment {display:flex;align-items:center;justify-content:space-between;background:#e8f1ef;color:#375d50;border-radius:8px;padding:5px 10px;margin:8px 0 0;font-size:12px}
#bug-attachment[hidden],.bug-new-dot[hidden],#bug-thanks[hidden] {display:none}
#bug-remove-target {padding:0 5px;font-size:20px}
#bug-status:empty {display:none}
#bug-status {font-size:12px;line-height:1.5;margin:12px 0 0}
#bug-thanks {position:absolute;right:0;bottom:calc(100% + 10px);width:224px;box-sizing:border-box;margin:0;padding:12px 14px;border:1px solid #d5dfe1;border-radius:12px 12px 0 12px;background:white;color:#51646a;font-size:12px;line-height:1.5;box-shadow:0 2px 12px #243b4510}
#bug-pick-hint {display:none}
.report-picking #bug-form {display:none}
.report-picking #bug-pick-hint {display:block;position:absolute;right:0;bottom:calc(100% + 12px);width:230px;padding:14px;background:white;border:1px solid #c6dce3;border-radius:12px;box-shadow:0 4px 20px #243b4520;font-size:13px}
.report-picking, .report-picking * {cursor:crosshair!important}
.report-picking main *:hover {outline:1px solid #477688;outline-offset:2px}
body:has(#support:not([hidden])) {padding-bottom:56px}
@media(max-width:550px) {#support {right:max(16px,env(safe-area-inset-right))} #bug-reporter > summary {padding-bottom:max(10px,env(safe-area-inset-bottom))}}
@media print {#support {display:none!important}}
.notification-settings {max-width:620px}
.notification-options {display:grid;gap:1.5rem;margin:1.5rem 0}
.notification-options fieldset {display:grid;gap:.65rem;border:0;padding:0;margin:0;min-width:0}
.notification-options legend {padding:0;margin-bottom:.65rem;color:var(--ink);font-size:.85rem;font-weight:600}
.notification-options label {display:flex;align-items:center;gap:.65rem}
.notification-options input {width:auto;min-width:0;margin:0;accent-color:#416774}
.bug-report-text {white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.6;user-select:text}

#bug-record {flex:none;display:grid;place-items:center;width:30px;height:34px;padding:0;border:0;background:transparent;color:#51646a;cursor:pointer}
#bug-record svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
#bug-record.recording {color:#bd4941;background:#fdebe9;border-radius:50%}
#bug-audio-preview {display:flex;align-items:center;gap:8px;margin-bottom:12px}
#bug-audio-preview[hidden] {display:none}
#bug-audio-player {width:100%;min-width:0;height:36px}
#bug-remove-audio {padding:0 5px;font-size:20px}

/* Restore the pre-Workbook Editor manuscript layout (5587ee3^): module lights,
   attribution above the text, and the publication decision below it. */
.publisher-topline{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:25px}
.publisher-topline select{width:auto;max-width:100%;font-size:14px}
.publisher-workspace{display:grid;grid-template-columns:255px minmax(0,1fr);gap:38px;align-items:start}
.publisher-module-nav{border-right:1px solid var(--line);padding-right:20px;position:sticky;top:22px;max-height:calc(100dvh - 44px);overflow:auto}
.publisher-module-row{display:flex;align-items:center;border-radius:11px;margin:2px 0;gap:3px}
.publisher-module-row.active{background:var(--blue)}
.publisher-module-row>button{display:flex;gap:10px;text-align:left;background:none;border:0;border-radius:11px;color:var(--muted);font-size:12px;line-height:1.45;padding:12px 10px;min-width:0;flex:1}
.publisher-module-row>button[aria-current]{color:var(--blueink)}
.publisher-module-number{min-width:25px;font-size:11px;opacity:.75;padding-top:1px}
.publisher-module-row>.publisher-module-status{flex:0 0 auto;flex-wrap:nowrap;gap:5px;padding:10px 7px;align-items:center;justify-content:center}
.publisher-module-status .dot{width:7px;height:7px;margin:0}
.publisher-manuscript{min-width:0}
.publisher-module-context{font-size:12px;color:var(--muted);margin:2px 0 12px}
.publisher-manuscript>h2{font-size:31px;margin:0 0 25px}
.publisher-section-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:23px}
.publisher-section-tabs button{border:1px solid transparent;background:none;border-radius:50px;padding:7px 12px;font-size:12px;color:var(--muted)}
.publisher-section-tabs button[aria-pressed="true"]{background:var(--blue);color:var(--blueink);border-color:#bfd2d9}
.publisher-section-tabs .publisher-type-all{font-weight:600;border-color:var(--line);margin-right:8px;padding-inline:17px}
.publisher-section-tabs .publisher-type-all[aria-pressed="true"]{background:var(--blueink);border-color:var(--blueink);color:#fff}
.publisher-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:17px 25px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.publisher-sheet-head>div{min-width:0;flex:1}
.publisher-sheet-head>.link{font-size:12px;white-space:nowrap}
.publisher-content-type{display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.publisher-content-type .nav-icon{width:13px;height:13px}
.publisher-edit-status{margin-top:5px}
.publisher-edit-status .dot{vertical-align:baseline}
.publisher-edit-status .dot.seen{background:var(--muted);opacity:.5}
.publisher-attribution{margin-top:5px}
.publisher-attribution summary{cursor:pointer}
.publisher-attribution time,.publisher-status-entry time{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.publisher-attribution>div{padding:9px 0;border-top:1px solid var(--line)}
.publisher-sheet>.prose{padding:30px 34px 22px;font-size:18px;line-height:1.85}
.publisher-sheet>.prose h3{font-size:25px}
.publisher-change{border:0;background:none;padding:4px 0;color:var(--blueink);font-size:12px;text-align:left;line-height:1.5}
.publisher-change:hover{text-decoration:underline;text-underline-offset:3px}
/* The generic .unread row bar (inset left shadow) landed on the "R" of this
   padless button (Tim's screenshot, 2026-09-24). Bold text and the ◉ dot
   already say unread here. */
.publisher-change.unread{font-weight:600;box-shadow:none}
.publisher-draft-links{display:flex;flex-wrap:wrap;gap:10px;padding:13px 25px;background:#fcf6f4;border-bottom:1px solid #efe3df}
.publisher-release{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:17px 25px;border-top:1px solid #e9dcae;background:#faf1d5;color:#80651b;font-size:12px}
.publisher-release.published{background:#eef4e9;border-top-color:#dce7d6;color:#416d3e}
.publisher-release .publisher-change{color:inherit}
.publisher-release small{display:block;font-size:11px;margin-top:5px}
.publisher-release>.link{font-size:12px}
.publisher-release .btn{font-size:12px;padding:9px 17px}
.publisher-module-popover{position:fixed;z-index:40;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:white;border:1px solid var(--line);border-radius:17px;box-shadow:0 12px 35px #29332920;padding:18px}
.publisher-module-popover header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.publisher-module-popover h3{font:14px/1.4 system-ui;margin:0}
.publisher-module-popover header button{border:0;background:none;font-size:20px;color:var(--muted)}
.publisher-status-entry{padding:10px 0;border-bottom:1px solid var(--line)}
.publisher-status-entry:last-child{border:0}
.publisher-status-entry small{display:block;font-size:11px;color:var(--muted)}
.publisher-edit-tabs{display:flex;gap:18px;margin-bottom:20px}
.publisher-edit-tabs button{border:0;background:none;border-bottom:2px solid transparent;color:var(--muted);padding:0 0 6px;font-size:13px}
.publisher-edit-tabs button[aria-current]{border-color:var(--gold);color:var(--ink)}
@media(max-width:950px){.publisher-workspace{grid-template-columns:200px minmax(0,1fr);gap:24px}.publisher-module-nav{padding-right:12px}.publisher-sheet>.prose{padding:24px}.publisher-release{flex-wrap:wrap}}
@media(max-width:650px){.publisher-workspace{display:block}.publisher-module-nav{position:static;display:flex;overflow:auto;border:0;padding:0 0 14px;margin-bottom:15px;gap:5px}.publisher-module-row{flex:0 0 190px}.publisher-manuscript>h2{font-size:28px}.publisher-sheet-head{padding:15px 20px}.publisher-sheet>.prose{font-size:17px}.publisher-release{padding:15px 20px}}
.publisher-diff-controls {display:flex;align-items:end;justify-content:space-between;gap:14px;margin:20px 0;flex-wrap:wrap}
.publisher-diff-controls label {font-size:13px}
.editorial-diff {overflow-wrap:anywhere}
.editorial-diff > div {white-space:pre-wrap}
.editorial-diff ins,.publisher-diff-controls ins {background:#e7f1e6;color:#285c37;text-decoration:none}
.editorial-diff del,.publisher-diff-controls del {background:#f8e9e7;color:#923c35;text-decoration:line-through}
.editorial-diff del + ins {margin-left:.15em}
#publisher-review > details {margin:22px 0}
.publisher-discussion article,.publication-history article,.note-history article {padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.publisher-discussion p,.publication-history p,.note-history p {white-space:pre-wrap}
.publisher-discussion small,.publication-history small,.note-history small {color:var(--muted)}
.publisher-discussion form {display:grid;gap:10px;margin-top:20px}
.publisher-discussion form button {justify-self:end}
#dialog[data-editorial-state="draft"] .sheet-actions {background:#fbefed}
#dialog[data-editorial-state="finalized"] .sheet-actions {background:#fcf5dc}
#dialog[data-editorial-state="published"] .sheet-actions {background:#edf5eb}
.recipient-field {display:flex;align-items:start;gap:16px;padding:14px;border:1px solid var(--line);border-radius:14px}
.recipient-content {flex:1;min-width:0}
#recipient-chips {display:flex;flex-wrap:wrap;gap:8px}
.edition-chip {display:inline-flex;align-items:center;gap:8px;padding:5px 9px;background:var(--blue);border-radius:8px;font-size:14px}
.edition-chip button {padding:0 3px;border:0;background:none;font-size:18px}
#edition-search {border:0;background:transparent;padding:10px 0;margin-top:5px}
#edition-results {display:flex;flex-wrap:wrap;gap:8px}
#edition-results button {font-size:13px;border:0;background:none;color:var(--blueink);padding:5px}
.notify-row {display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:20px 0 12px}
.notify-row input {width:auto}
@media(max-width:650px) {.recipient-field {flex-wrap:wrap}}

/* The original teacher workspace is a quiet table and message sheet, not an
   editor dashboard. Keep classroom controls beside the reading they affect. */
.teacher-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 30px;flex-wrap:wrap}
.teacher-bar>div{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.teacher-bar .class-picker{margin:0;max-width:100%}
.teacher-bar button{font-size:13px}
.teacher-table-wrap{overflow:auto;border:1px solid var(--line,#dedfd8);border-radius:18px;background:#fff;margin:20px 0}
.teacher-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.teacher-table th{font-weight:500;color:var(--muted,#747b71);font-size:12px;white-space:nowrap}
.teacher-table th,.teacher-table td{padding:18px 20px;border-bottom:1px solid var(--line,#dedfd8);vertical-align:top}
.teacher-table tr:last-child td{border-bottom:0}
.teacher-table .link{font-size:inherit;text-align:left}
.teacher-table time,.teacher-feedback time{display:block;color:var(--muted,#747b71);font-size:12px;margin-top:5px;white-space:nowrap}
.teacher-table td p{margin:6px 0 0}
.teacher-module-number{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:14px;border-radius:8px;background:#e8f0f1;color:#315d6c}
.teacher-status{display:inline-block;background:#eaf0eb;color:#3e6654;font-size:12px;padding:4px 8px;border-radius:6px;white-space:nowrap}
.teacher-module-heading{margin:20px 0 30px}
.teacher-module-heading h2{margin:18px 0}
.teacher-module-heading>div{display:flex;gap:24px}
.teacher-document{display:grid;grid-template-columns:210px minmax(0,1fr);gap:32px;margin-top:36px;align-items:start}
.teacher-document aside{position:sticky;top:20px;font-size:13px;max-height:85vh;overflow:auto}
.teacher-document aside h3{font-family:inherit;font-size:13px;font-weight:500}
.teacher-document aside a{display:block;color:#69736a;text-decoration:none;padding:8px 0}
.teacher-section{padding:28px;background:white;border:1px solid var(--line,#dedfd8);border-radius:18px;margin-bottom:22px;scroll-margin-top:25px}
.teacher-section-actions{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #e6e8e2;padding-top:16px;margin-top:24px}
.teacher-section-actions button{font-size:12px}
.teacher-preparation{border-top:1px solid #e2e5df;padding:20px 0;margin:20px 0}
.teacher-preparation>summary{cursor:pointer;color:#576e73;font-size:14px;margin-bottom:18px}
.teacher-preparation .teacher-section{background:#f7f9f7}
.teacher-filters{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:20px 0}
.teacher-filters label{font-size:12px;color:#6e776e;flex:1;min-width:110px;max-width:240px;margin:0}
.teacher-filters input,.teacher-filters select{font-size:14px;min-height:40px;padding:9px 10px;margin-top:5px;width:100%}
.teacher-excerpt{color:#69716b;font-size:13px;line-height:1.65;max-width:48em;white-space:pre-wrap}
.teacher-submission{white-space:pre-wrap;line-height:1.8;margin:22px 0;overflow-wrap:anywhere}
.teacher-feedback{background:#f0f5f2;border-radius:16px;padding:18px 22px;margin:18px 0}
.teacher-feedback p{white-space:pre-wrap;margin:12px 0 0}
.teacher-rubric{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0}
.teacher-rubric label{font-size:14px;display:block}
.teacher-rubric input{width:90px;display:block;margin:8px 0}
.teacher-rubric small{font-weight:400;display:block;color:#747b71;font-size:12px}
.teacher-table blockquote,#dialog blockquote{border-left:3px solid #b8cdd2;margin:18px 0;padding:5px 18px;color:#5f6c67;font-size:14px;white-space:pre-wrap}
@media(max-width:700px){.teacher-document{display:block}.teacher-document aside{position:static;max-height:180px;margin-bottom:22px}.teacher-bar>div{gap:14px}.teacher-table th,.teacher-table td{padding:14px}.teacher-rubric{grid-template-columns:1fr}.teacher-section{padding:20px}}
.teacher-example-tabs{display:flex;gap:20px;flex-wrap:wrap;border-bottom:1px solid #e2e5df;margin:20px 0}
.teacher-example-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;color:#6e776e;font:inherit;font-size:14px;cursor:pointer}
.teacher-example-tabs button.active{border-color:#977f44;color:#283b32}

/* Original teacher notebook: a small contextual action, not a new page layer. */
.teacher-selection-tools{position:fixed;z-index:60;display:flex;gap:.25rem;padding:.35rem;background:white;border:1px solid var(--line,#dfe2dc);border-radius:.6rem;box-shadow:0 4px 20px #263b3426}
.teacher-selection-tools[hidden]{display:none}.teacher-selection-tools button{background:none;border:0;padding:.5rem .65rem;color:#305c6c;font:inherit;font-size:.85rem;cursor:pointer}
::highlight(teacher-observations){background:#e8ddb68c;color:inherit}
.teacher-recent{font-family:var(--sans);font-size:.9rem;border-top:1px solid #e1e4de;padding-top:1rem;margin-top:1rem}.teacher-recent summary{color:#65746b;cursor:pointer}.teacher-recent blockquote:empty{display:none}
.saints-dialog{max-width:560px!important}.saints-dialog .dialog-head h2{font-size:1.45rem}.saints-dialog .dialog-body{padding:1.2rem 1.5rem}.saints-dialog .sheet-actions:empty{display:none}
.saint-picker{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem}.saint-choice{border:0;background:none;display:grid;gap:.3rem;justify-items:center;cursor:pointer;color:#67716a;font:inherit;font-size:.85rem}.saint-choice img{width:64px;height:64px;object-fit:cover;border-radius:50%;padding:3px;border:2px solid transparent}.saint-choice.selected img{border-color:#9b8749}.saint-choice.selected{color:#292e29}
.saint-about{font-size:.85rem;color:#67716a}.saint-about summary{cursor:pointer}.saint-history-tools{display:flex;justify-content:space-between;gap:1rem;margin:1rem 0;font-size:.85rem}
.saint-question{background:#ecf2f3;border-radius:12px;padding:.8rem 1rem;white-space:pre-wrap}.saint-answer{font-family:Georgia,serif;font-size:1.03rem;line-height:1.65;user-select:none;-webkit-user-select:none}.saint-sources{font-size:.8rem;color:#65746b;margin-bottom:1.5rem}.saint-sources summary{cursor:pointer}.saint-sources blockquote{margin:1rem 0 .3rem;border-left:2px solid #d6dfda;padding-left:.8rem}.saint-passage{font-size:.8rem;margin:1rem 0;color:#65746b}.saint-passage summary{cursor:pointer}.saint-passage blockquote{max-height:12rem;overflow:auto}
#saint-question{font-size:.9rem}.saint-composer-actions{display:flex;align-items:center;gap:.6rem;margin:.7rem 0}.saint-composer-actions #saint-send{margin-left:auto}.saint-composer-actions button{font-size:.85rem}#saint-voice-status{font-size:.8rem}.saints-dialog small{font-size:.75rem}
.evidence-bar-pair{display:grid;gap:4px;width:100%;max-width:440px;margin:.7rem 0}.evidence-bar-pair span{height:7px;border-radius:4px;background:#c5dce1}.evidence-bar-pair span+span{background:#5b826f}.evidence-comparison{margin:1.5rem 0}.evidence-comparison p{margin:.35rem 0}.evidence-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.5rem}.evidence-cards article{border:1px solid #e0e3dc;border-radius:12px;padding:1rem}
.teacher-section .source-field-block,.teacher-section .source-heading-block{display:block;margin-top:.55em}.teacher-section .source-heading-block{margin-bottom:.4em}.teacher-history-pagination{display:flex;justify-content:space-between;margin-top:1rem}
.teacher-scripture{color:#506b56}.teacher-scripture em{font-style:italic}

/* Delegation and direct roster entry are independent admin actions. */
.roster-delegation-row {display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:20px 0}
.roster-delegation-row .roster-delegation {margin:0}
.bug-toolbar {align-items:center;flex-wrap:wrap;gap:16px}
.bug-toolbar h2 {margin:0}
.bug-toolbar .controls {display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.bug-toolbar select,.bug-toolbar input {width:auto;max-width:240px}
.bug-row {text-align:left}
.bug-status {font-size:12px;background:#eef0eb;border-radius:8px;padding:6px 10px;white-space:nowrap}
.bug-status[data-status="fixed-locally"] {background:#faf1d5}
.bug-status[data-status="fixed"] {background:#eef4e9;color:#326548}
.bug-message {white-space:pre-wrap;overflow-wrap:anywhere}
.bug-updates article {border-top:1px solid var(--line);padding-top:20px;margin-top:20px}
#bug-triage-form {display:grid;gap:18px;margin-top:24px}
#bug-triage-form label {display:grid;gap:8px}
@media(max-width:600px) {.bug-row {grid-template-columns:1fr;gap:10px}.bug-status {justify-self:start}}

.superadmin-access {margin-top:48px;border-top:1px solid var(--line);padding-top:28px;max-width:760px}
.superadmin-list {display:grid;gap:16px}
.superadmin-row {display:flex;justify-content:space-between;align-items:center;gap:20px}
.superadmin-row small {display:block;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}
.superadmin-confirm {display:flex;align-items:flex-start;gap:12px;line-height:1.6}
.superadmin-confirm input {flex:0 0 auto;margin-top:6px}
@media(max-width:560px){.superadmin-row{align-items:flex-start;flex-wrap:wrap;gap:6px}}

/* Keep moves legible as editorial decisions, not a drag-only interaction. */
.module-moved{background:var(--soft,#e5f0f3)}
/* Keep structural tools discoverable without competing with the manuscript.
   Focus and touch expose the same controls as hover. */
.toc-hint{font-size:.75rem;color:var(--muted);margin:0 0 .9rem}.structure-row{position:relative;display:flex;align-items:center;gap:.35rem;min-height:44px;border-radius:5px;padding:.35rem .4rem;margin:4px 0}.structure-row>span:first-child,.structure-row>.toc-item{flex:1;min-width:0}.structure-row>.toc-item{margin:0;text-align:left;padding:.4rem 0}.structure-row:hover,.structure-row:focus-within{background:var(--soft,#e5f0f3)}.structure-tools{display:flex;gap:2px;opacity:0}.structure-tools button{padding:4px;width:25px;height:28px;border:0;background:transparent;color:var(--muted);border-radius:4px}.structure-tools svg{width:17px;height:17px}.structure-tools button:hover{color:var(--ink);background:white}.structure-grip{cursor:grab;font-size:15px}.structure-grip:active{cursor:grabbing}.structure-insert{position:absolute;left:50%;transform:translateX(-50%);z-index:3;padding:0;width:22px;height:20px;line-height:16px;border:1px solid var(--line,#dadcd5);background:white;color:var(--blueink,#345c73);border-radius:50%;opacity:0}.structure-insert.before{top:-11px}.structure-insert.after{bottom:-11px}.structure-row:hover>.structure-tools,.structure-row:focus-within>.structure-tools,.structure-row:hover>.structure-insert,.structure-row:focus-within>.structure-insert{opacity:1}.structure-drop{outline:2px solid var(--blueink,#345c73);outline-offset:2px}.structure-children{margin-left:1.3rem}.structure-editor{margin-bottom:1.5rem}.structure-editor>details{border-bottom:1px solid var(--line,#dadcd5);padding:.5rem 0}.structure-editor>details>summary{font-weight:600}.structure-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}.structure-comparison h3{font-size:1.1rem}.structure-list{list-style:none;padding:0}.structure-list>li{margin:.7rem 0}.structure-list summary{cursor:pointer}.structure-list ol{padding-left:1.3rem;font-size:.85rem;color:var(--muted)}.structure-list ol li{margin:.45rem 0}.publisher-batch{margin:0 0 1.5rem;border:1px solid var(--line,#dadcd5);padding:1rem;border-radius:12px}.publisher-batch>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;padding:1rem 0}.publisher-batch label{display:flex;align-items:center;gap:.5rem;font-weight:400}.publisher-batch summary{cursor:pointer}.publisher-batch>label{margin-top:1rem}@media(hover:none){.structure-tools,.structure-insert{opacity:1}}@media(max-width:600px){.structure-comparison{grid-template-columns:1fr}.structure-children{margin-left:.7rem}}
.structure-grip{touch-action:none}.structure-editor>details>summary::before,.toc>details>summary.structure-row::before{content:'›';font-size:1.1rem;line-height:1;flex:none;transform:rotate(0deg);margin-right:.25rem;color:var(--muted)}.structure-editor>details[open]>summary::before,.toc>details[open]>summary.structure-row::before{transform:rotate(90deg)}.structure-editor>details{padding:.15rem 0}.structure-editor>details>summary{min-height:36px}.structure-list>li.module-moved{padding:.3rem .45rem;border-radius:5px}

/* The same role seal connects access headings to the account identity. */
.access-role-heading { display: inline-flex; align-items: center; gap: 10px; }
.access-role-heading .role-check { width: 21px; height: 21px; margin-left: 0; flex-shrink: 0; }

.bug-heading { display: flex; align-items: center; gap: 10px; }
.bug-refresh { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 6px; border: 0; border-radius: 50%; background: transparent; color: var(--blueink); cursor: pointer; }
.bug-refresh svg { width: 20px; height: 20px; }
.bug-refresh:hover { background: var(--blue); }
.bug-refresh:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bug-refresh:disabled { opacity: .5; cursor: wait; }

.bug-row.bug-unread { background: #f0f6f8; }
.bug-row.bug-unread:hover { background: #e5f0f4; }

/* Keep reading compact; make room for editing only on the row being used. */
.toc .toc-hint { display:flex;align-items:center;gap:6px;font-size:10px;font-style:italic;letter-spacing:.02em;margin:0 0 12px;color:var(--muted); }
.toc .toc-hint span {font-style:normal;font-size:11px;opacity:.7}
.toc .structure-row {min-height:0;margin:0;padding:3px 6px;}
.toc .structure-row > .toc-item {padding:3px 0;font-size:12px;line-height:1.45;}
.toc .structure-tools {position:absolute;right:4px;top:50%;transform:translateY(-50%);pointer-events:none;}
.toc .structure-insert {pointer-events:none;}
.toc .structure-row:hover,.toc .structure-row:focus-within {background:var(--blue);}
.toc .structure-row:has(>.structure-tools):hover,.toc .structure-row:has(>.structure-tools):focus-within {padding:13px 60px 13px 6px;}
.toc .structure-row:hover>.structure-tools,.toc .structure-row:focus-within>.structure-tools,.toc .structure-row:hover>.structure-insert,.toc .structure-row:focus-within>.structure-insert {pointer-events:auto;}
.toc .structure-insert.before {top:-9px;}
.toc .structure-insert.after {bottom:-9px;}
.toc .structure-row>.toc-item:hover {background:transparent;color:var(--blueink);}
.toc .toc-module-label {font-size:13px;line-height:1.4;}
.toc .toc-module-title {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:2px;font-size:11px;line-height:1.4;font-weight:400;color:var(--muted);}
.toc .toc-section-number {font-variant-numeric:tabular-nums;color:var(--blueink);}
@media(hover:none) {
  .toc .structure-row:has(>.structure-tools) {padding:13px 60px 13px 6px;}
  .toc .structure-tools,.toc .structure-insert {pointer-events:auto;}
}

/* Quiet insert marks and matched icon boxes keep the text as the hover focus. */
.structure-tools {align-items:center;}
.structure-tools button {display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.structure-tools svg {display:block;flex:none;}
.structure-insert {display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:16px;font-weight:400;line-height:1;}
.structure-insert:hover,.structure-insert:focus-visible {background:transparent;color:var(--blueink);}

.notification-choice {display:flex;align-items:center;gap:.4rem}
.notification-choice label {flex:1}
.notification-info {flex:none;border:0;background:transparent;color:var(--muted);padding:.4rem;min-width:36px;min-height:36px;font-size:1rem;cursor:pointer}
.notification-info:hover,.notification-info[aria-expanded="true"] {color:var(--ink)}
.notification-help {font-size:.85rem;line-height:1.5;color:var(--muted);margin:.3rem 0 .6rem 1.7rem}

.publisher-edit-sheet .publisher-sheet-head time{display:block;font-size:11px;margin-top:4px}

.publisher-view-picker{position:relative;max-width:100%}
#publisher-view{display:flex;align-items:center;gap:14px;max-width:100%;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font-size:14px;text-align:left}
.publisher-view-dots{display:inline-flex;flex:none;align-items:center;gap:7px;padding:2px}
.publisher-view-dots:empty{display:none}
.publisher-view-dots .dot{margin:0;width:7px;height:7px}
.publisher-view-chevron{margin-left:auto;color:var(--muted)}
#publisher-view-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:35;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 48px));padding:6px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #29332918}
#publisher-view-menu[hidden]{display:none}
#publisher-view-menu button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:42px;padding:10px;border:0;border-radius:7px;background:none;color:var(--ink);font-size:14px;text-align:left}
#publisher-view-menu button[aria-checked="true"],#publisher-view-menu button:hover,#publisher-view-menu button:focus-visible{background:var(--blue);color:var(--blueink)}
#publisher-view-menu button:last-child{border-top:1px solid var(--line);border-radius:0;margin-top:5px;padding-top:14px}

/* Quiet context lets the changed passage carry the preview, including edits far down a manual. */
.publisher-change-preview h3,.publisher-change-preview .publisher-unchanged{color:#7c827b}
.publisher-change-preview p{white-space:pre-wrap}
.publisher-change-preview ins{color:#285c36;background:#e7f1e5;text-decoration:none}
.publisher-change-preview del{color:#993d32;background:#f9e9e7}
.publisher-change-preview del+ins{margin-left:.15em}

/* Back cover as the student workbook's closing element (see backCover()). */
.back-cover {
  margin: 56px auto 24px;
  text-align: center;
}
.back-cover img {
  display: inline-block;
  width: min(320px, 100%);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(35, 45, 40, .10);
}

/* Publisher inbox: items read this visit collapse to one quiet line with Restore. */
.publisher-inbox-end{min-height:calc(100vh - 140px);padding-top:18px;color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;text-align:center;border-top:1px solid var(--line)}
.publisher-read-row{display:grid;gap:2px;padding:10px 16px 12px;margin:0 0 12px;border:1px dashed var(--line);border-radius:12px}
.publisher-read-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.publisher-read-label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.publisher-read-label span{color:var(--completion-green)}
.publisher-read-head .link{padding:0;font-size:12px}
.publisher-read-actions{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.publisher-read-title{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.publisher-read-meta{font-size:12px;color:var(--muted)}
.publisher-other-edition{display:inline-block;margin-bottom:4px;padding:1px 8px;border-radius:999px;background:#eef3f5;color:#3d626d;font-size:11px;font-weight:600}

/* Review → Edit: where the other editor's changes are (see editSheet). */
/* Pinned while scrolling (Tim, 2026-09-24): stepping to a change far below the
   fold scrolled "Next change" out of reach. */
.edit-changes{display:flex;align-items:baseline;gap:8px;margin:0 0 6px;padding:6px 10px;border-radius:8px;background:#fdf6e3;color:#6b5418;font-size:13px;position:sticky;top:-26px;z-index:2;box-shadow:0 -26px 0 8px #fff,0 1px 0 #efe3bf}
.edit-changes .link{padding:0;font-size:13px}

/* Touch screens (Neil on iPad, 2026-09-24): no hover, so every row showed both
   "+ above" and "+ below" and neighbours' marks overlapped into double crosses.
   Show one "+" between rows; keep "above" only where nothing sits above it. */
@media (hover:none) {
  .toc .structure-row > .structure-insert.before { display:none; }
  .toc details > summary + .structure-row > .structure-insert.before,
  .toc details:first-of-type > summary > .structure-insert.before { display:flex; }
  .toc details[open] > summary > .structure-insert.after { display:none; }
  .structure-grip { min-width:44px; min-height:44px; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
}

/* "Unread" in words under a Publisher review link (replaces the ◉ dot). */
.publisher-change-stack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0}
.publisher-sheet-head .publisher-change-stack{align-items:flex-end}
.publisher-unread-label{font-size:11px;line-height:1.2;color:var(--muted)}

/* Publisher action colors (Tim, 2026-09-24): one solid primary per context, the
   same color on the card and inside the review. Publish = dark green, Finalize =
   gold, notes = dark blue, View/Edit = light blue, everything else = white. */
.btn.cta-publish{background:var(--completion-green);border-color:var(--completion-green);color:#fff}
.btn.cta-finalize{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.cta-note{background:var(--blueink);border-color:var(--blueink);color:#fff}
.btn.cta-edit{background:var(--blue);border-color:transparent;color:var(--blueink)}
.btn.cta-secondary{background:#fff;border-color:var(--line);color:var(--ink)}
/* Destructive confirmations (2026-09-29): Delete, Remove, Withdraw never wear the
   forward gold. Dark red from the existing draft-red family. */
.btn.cta-danger{background:#a8483a;border-color:#a8483a;color:#fff}
.btn.cta-danger:hover{filter:brightness(1.08)}
.btn.cta-publish:hover,.btn.cta-finalize:hover,.btn.cta-note:hover{filter:brightness(1.08)}
.btn.publisher-cta{padding:6px 14px;font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap}
.btn.publisher-cta:hover{text-decoration:none}
.publisher-change-stack{gap:4px}
.publisher-cta-below{display:inline-flex;align-items:baseline;gap:6px;font-size:11px;color:var(--muted)}
.publisher-cta-below .link{padding:0;font-size:11px;color:var(--blueink)}

/* Draft reds (Tim, 2026-09-24): dark is more urgent and gets cleared fastest, so it
   marks someone else's draft; your own draft is the lighter red. The dotted ring
   stays on others' drafts as a second, non-color cue. */
.dot{background:#e3a397}
.dot.peer{background:#a8483a;opacity:1;outline:1px dotted #a8483a;outline-offset:2px}
.dot.red{background:#bb6658}

/* Navigation counts look like message/email badges (Tim, 2026-09-24): the old light-
   blue pill vanished on the selected tab, which uses the same blue. */
/* About half size, raised to the label's top-right like a phone/email badge;
   -3px pulls it in from the tab's 7px gap to ~4px (Tim: halve the spacing). */
.top-tabs .badge,.editor-tabs .badge{display:inline-block;position:relative;top:-7px;min-width:13px;height:13px;padding:0 3px;margin-left:-3px;border-radius:7px;background:#c4432f;color:#fff;font-size:8.5px;font-weight:700;line-height:13px;text-align:center;font-variant-numeric:tabular-nums;vertical-align:baseline}
.publisher-cta-or{color:var(--muted);font-size:11px}

/* Copy sign-in link dialog: the full link, selectable, never wrapped. */
.sign-in-link{width:100%;font:13px ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f7f8f5}
.superadmin-actions{display:flex;gap:14px;align-items:baseline}

/* Sign in (Tim, 2026-09-25): Gmail/Outlook first once configured, email link below.
   White pill buttons of equal weight with the providers' marks at 18px. */
.sign-in-bridge{margin:-12px 0 12px}
.sign-in-providers{display:grid;gap:10px}
.sign-in-provider{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;border:1px solid #c9cdc6;border-radius:999px;background:#fff;color:var(--ink);font:600 15px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.sign-in-provider:hover{background:#f6f7f4}
.sign-in-provider svg{width:18px;height:18px;flex:0 0 18px}
.sign-in-or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--muted);font-size:13px}
.sign-in-or::before,.sign-in-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.panel .sign-in-email-row{display:flex;gap:8px;align-items:end}
.panel .sign-in-email-row label{flex:1;margin-top:10px}
.panel .sign-in-email-row .btn{margin-top:0;white-space:nowrap}
.sign-in-stuck{margin:22px 0 16px;padding-top:16px;border-top:1px solid var(--line)}
.sign-in-stuck>p{margin:0 0 10px}
.sign-in-stuck .privacy{margin-top:14px}
.sign-in-note{background:#fdf6e3;color:#6b5418;border-radius:10px;padding:10px 12px;margin:0 0 18px;font-size:14px}
@media (max-width:480px){.panel .sign-in-email-row{flex-direction:column;align-items:stretch}}

/* Privacy and Terms pages: one readable column. */
.legal{max-width:680px;margin:40px auto;padding-inline:16px}
.legal h2{font-size:20px;margin:26px 0 8px}
.legal ul{padding-left:20px}
/* AI Lab (2026-09-29): reuses the comparison styles; only lab-specific spacing here. */
.lab-answer .lab-citations{margin:.6rem 0 0;padding-left:1.1rem;font-size:13px;color:var(--muted)}
.lab-answer .lab-citations li{margin:.3rem 0}
.lab-feedback{display:grid;gap:.4rem;margin:.6rem 0}
.lab-feedback textarea{min-height:0}
.lab-feedback .controls .btn{min-width:44px}
.lab-result{border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1.6rem}
.lab-scores{font-size:13px;margin:.6rem 0}.lab-scores td,.lab-scores th{padding:4px 8px;text-align:left;vertical-align:top}
.lab-question{display:flex;gap:8px;align-items:center;margin:6px 0}.lab-question select{width:auto;flex:0 0 220px}.lab-question input{flex:1}
.lab-improve{margin:1rem 0;align-items:end}
.lab-busy{padding:.8rem 1rem;border-radius:10px;background:#faf1d5;color:#7a6632}
.lab-proposal .comparison-text{white-space:pre-wrap;font-size:14px;line-height:1.6}
@media(max-width:640px){.lab-question{flex-wrap:wrap}.lab-question select{flex:1 1 100%}}


/* Course dates on the teacher's Modules screen (2026-09-29): front and center. */
.schedule-setup{background:var(--blue);border-radius:20px;padding:20px 24px;margin:0 0 20px}
.schedule-setup h2{margin:0 0 6px;font-size:22px}
.schedule-setup-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:12px}
.schedule-setup-row label{display:grid;gap:4px;font-size:13px}
.schedule-setup-row input{width:auto}
.schedule-dates{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.schedule-dates input{width:auto;padding:6px 8px;font-size:13px}
.teacher-table tr.schedule-current td{background:#fbf8ef}

/* Engagement (school admin tab; top of superadmin Course Insights). */
#engagement-stats{margin-bottom:28px}
.engagement-class{margin:18px 0 26px}
.engagement-totals{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.engagement-totals h4{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--muted)}

/* Class notifications (2026-09-30): the teacher's Notifications tab and the student's bell sheet. */
.inbox-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.inbox-item button{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:start;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;font:inherit;color:var(--ink)}
.inbox-item button:hover{background:#f6f9fa}
.inbox-dot{width:8px;height:8px;margin-top:7px;border-radius:50%;background:transparent}
.inbox-item.is-new .inbox-dot{background:var(--blueink)}
.inbox-item.is-new strong{font-weight:600}
.inbox-text{display:grid;gap:2px;min-width:0}
.inbox-text strong{font-weight:500}
.inbox-text span{color:var(--muted);font-size:13px}
.inbox-item time{font-size:12px;color:var(--muted);white-space:nowrap}
.inbox-empty{color:var(--muted);padding:12px 4px}
.class-inbox{max-width:760px}
.inbox-settings{margin-top:26px;padding:16px 18px;border-radius:16px;background:var(--blue)}
.inbox-settings h3{margin:0 0 8px;font-size:18px}
.inbox-settings label,.inbox-email{display:flex;align-items:center;gap:8px}
.inbox-settings input,.inbox-email input{width:auto}
.roster-summary{margin:18px 0 4px;font-size:16px}
.engagement-sub{margin:18px 0 8px;font-size:15px}
/* Course dates (Tim, 2026-09-30): a module's status sits in its own column between the dates
   and class materials, centered both ways — gold Current, light blue Completed (its dates
   have passed). Row actions never wrap ("why arrow on next line?"). */
.teacher-table td.schedule-status{text-align:center;vertical-align:middle;width:1%;white-space:nowrap;padding-inline:12px}
.schedule-tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap}
.schedule-tag.is-current{background:#f5ecd2;color:#80672f}
.schedule-tag.is-done{background:#e4eff2;color:#3d626d}
.teacher-table td .link{white-space:nowrap}
/* Start – end stay on one line; the dash dangling after a wrapped start date read as broken. */
.teacher-table .schedule-dates{flex-wrap:nowrap;white-space:nowrap}
.teacher-table td:has(>.schedule-dates){vertical-align:middle}
/* Response status by meaning (Tim, 2026-09-30: "Needs reply" must not look like "Replied"):
   gold = your move, green = answered, light blue = back with the student. */
.teacher-status[data-status="Needs reply"]{background:#f5ecd2;color:#80672f}
.teacher-status:is([data-status="Replied"],[data-status="Reviewed"]){background:#e7f0ea;color:#326548}
.teacher-status[data-status="Ready to improve"]{background:#e4eff2;color:#3d626d}
/* Engagement totals: one quiet strip of label-over-number, aligned regardless of label
   length ("too gaudy, and also not horizontally aligning"). */
.engagement-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:12px 0 22px;padding:0;border:1px solid #e2e4de;border-radius:14px;background:#fff;overflow:hidden}
.engagement-totals>div{display:grid;grid-template-rows:auto 1fr;gap:4px;padding:12px 16px;border-left:1px solid #eef0ea;margin:0}
.engagement-totals>div:first-child{border-left:0}
.engagement-totals dt{font-size:12px;color:#6e776e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.engagement-totals dd{margin:0;align-self:end;font:600 20px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#292d28;font-variant-numeric:tabular-nums}
/* Check-in growth: one bar per check-in (first blue, latest green), matched change at right. */
.growth{margin:8px 0 28px;padding:18px 20px;border:1px solid #e2e4de;border-radius:16px;background:#fff}
.growth-object{padding:24px 26px;border:1px solid #e6dcc0;border-radius:22px;background:linear-gradient(180deg,#fffdf6,#fff 60%)}
.growth-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.growth-title{margin:0;font:400 1.75rem/1.15 Georgia,serif;color:#292d28}
.growth-big{display:flex;align-items:center;gap:10px;margin:10px 0 0;color:#6e776e;font:600 12px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.growth-big .growth-pill{font-size:22px;padding:4px 14px}
.growth-took{display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.growth-took li{display:flex;align-items:center;gap:8px;font-size:12px;color:#6e776e}
.growth-took strong{display:block;font:600 14px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#292d28;font-variant-numeric:tabular-nums}
.mini-ring{display:inline-block;width:36px;height:36px;flex:none}
.mini-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.mini-ring circle{fill:none;stroke-width:4.5}
.mini-ring .mini-track{stroke:#ece6d4}
.mini-ring .mini-arc{stroke:#326548;stroke-linecap:round}
.growth-list{display:grid;margin-top:8px}
.growth-row{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(220px,1.6fr) 72px;gap:8px 20px;align-items:center;padding:12px 0;border-top:1px solid #f0ebdc}
.growth-row:first-child{border-top:0}
.growth-q{margin:0;font-size:14px;line-height:1.4;color:#292d28}
.growth-bars{display:grid;gap:4px}
.growth-bar{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:8px;font-size:12px;color:#6e776e}
.growth-point{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.growth-track{height:8px;border-radius:999px;background:#f4f1e7;overflow:hidden}
.growth-track i{display:block;height:100%;border-radius:999px;background:#e3cf98}
.growth-bar[data-shade="first"] .growth-track i{background:#a9c6cf}
.growth-bar[data-shade="last"] .growth-track i{background:#ad9150}
.growth-pill{justify-self:end;display:inline-block;padding:2px 10px;border-radius:999px;font:600 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;background:#f1f2ee;color:#6e776e}
.growth-pill.up{background:#e3efe6;color:#2f6142}
.growth-pill.down{background:#f8e4df;color:#9a4234}
.week-took{display:flex;align-items:center;gap:10px;margin:8px 0}
.week-took .mini-ring{width:52px;height:52px}
.week-took strong{display:block;font:400 1.35rem/1 Georgia,serif;color:#292d28}
.week-took span{font-size:12px;color:#6e776e}
@media(max-width:700px){.growth-row{grid-template-columns:1fr auto}.growth-bars{grid-column:1/-1;grid-row:2}}
@media (max-width:720px){.growth-row{grid-template-columns:1fr}.growth-change{justify-items:start}}
/* Actions sit at the bottom right of their box, one line, so stacked boxes align
   (Tim, 2026-09-30: "all CTAs should go bottom right of their box"). A leading text link
   (+ Add question) stays at the left. */
.card>.controls,form.card>.controls,.card>form>.controls,.lab-proposal>.controls{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.card>.controls>.link:first-child{margin-right:auto}
.lab-improve{justify-content:flex-end}
/* Saint picker with its "Edit guidance" jump. */
.lab-saint-pick{display:flex;align-items:center;gap:10px}
.lab-saint-pick select{flex:1}
.lab-edit-saint{font-size:12px;white-space:nowrap}
.lab-topic-new{min-height:40px;padding:9px 10px;border:1px solid #d9dcd4;border-radius:9px;font:inherit}
/* Model chooser: only Claude is live. */
.lab-model .model-picker>summary small{margin-left:6px}
.lab-model .model-preview-row{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px}
.lab-model .model-preview-row small{margin-left:auto;color:#73796f}
.lab-model .model-preview-row.is-off{color:#9aa097}
.lab-model .model-catalogue{padding:0 14px 6px}
/* Course Insights: AI trends. */
.insights-ai{margin:0 0 18px}
.insights-ai-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.insights-ai-head h3{margin:0}
.insights-ai-head p{margin:4px 0 0;font-size:12px}
.insights-ai-head .controls{display:flex;align-items:flex-end;gap:12px;margin:0}
.insights-ai-head .controls label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#6e776e}
.insights-trends{margin-top:16px;border-top:1px solid #eef0ea;padding-top:14px}
.insights-trends h4{margin:16px 0 6px;font-size:13px}
.insights-trends ul{margin:0;padding-left:18px;display:grid;gap:8px}
.insights-trends li p{margin:4px 0}
.insights-trends blockquote{margin:4px 0;padding:4px 10px;border-left:3px solid #d9cba0;color:#4a4f48;font-size:13px}
.insights-summary{font-size:15px;line-height:1.55;margin:0}
/* Working… (Tim, 2026-09-30: "no feedback if it was actually pending"). run() marks the
   pressed button .busy; after 150 ms (so quick actions never flicker) a small spinner shows
   beside its label and it can't be pressed again. */
.busy{cursor:progress!important;pointer-events:none}
.busy::after{content:"";display:inline-block;width:.85em;height:.85em;margin-left:.5em;vertical-align:-.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:0;animation:busy-show 0s linear .15s forwards,busy-spin .7s linear infinite}
@keyframes busy-show{to{opacity:.75}}
@keyframes busy-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.busy::after{animation:busy-show 0s linear .15s forwards}}
/* The assign flow, teacher side (2026-09-30). */
.assign-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:8px 0 22px}
.assign-card h3{margin:0 0 4px}
.assign-card>p.muted{margin:0 0 10px;font-size:13px}
.assign-card select{width:100%}
.class-notes{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.class-notes li{padding:8px 12px;border-radius:10px;background:#f4f7f8;border-left:3px solid var(--blueink,#3d626d)}
.class-notes p{margin:0 0 2px;font-size:14px}
.class-notes small{color:var(--muted,#6e776e);font-size:12px}
.assign-toolbar>div{display:flex;align-items:center;gap:14px}
.assign-toolbar .muted{font-size:13px}
.assign-kind{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:#f5ecd2;color:#80672f;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px}
.teacher-table tr.is-late td:nth-child(3){color:#a8483a;font-weight:600}
.assign-actions{display:inline-flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.assign-link.is-assigned{color:#6d5520!important;font-weight:600}
.class-here-tag{display:inline-block;padding:1px 10px;border-radius:999px;background:#e4eff2;color:#3d626d;font-size:12px;font-weight:600;white-space:nowrap}
.assign-only{display:flex;align-items:center;gap:8px;margin:14px 0;font-size:14px;color:var(--muted,#6e776e)}
.assign-what{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.assign-what small{color:var(--muted,#6e776e)}
#dialog label.check{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.link.danger-link{color:#a8483a!important}
.btn.publisher-cta.cta-note{padding:5px 14px}
/* Student AI conversation review (superadmin). */
.ai-review{margin:0 0 14px}
.ai-review.is-flagged{border-color:#e3b8ae}
.ai-review-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:8px}
.ai-review-head span{color:var(--muted,#6e776e);font-size:13px}
.ai-flag-tag{padding:1px 10px;border-radius:999px;background:#f6e3de;color:#7b3226!important;font-weight:600;font-size:12px}
.ai-review-passage{margin:0 0 10px;padding:6px 12px;border-left:3px solid #d9cba0;color:#4a4f48;font-size:13px}
.ai-review-turn{display:grid;gap:6px;padding:10px 0;border-top:1px solid #eef0ea}
.ai-review-q,.ai-review-a{margin:0;font-size:14px;line-height:1.55}
.ai-review-q span,.ai-review-a>span{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6e776e);margin-bottom:2px}
.ai-review-a p{margin:0 0 6px}
.ai-review-a small{color:var(--muted,#6e776e);font-size:12px}
.ai-review-actions{display:flex;gap:16px;justify-content:flex-end}
.ai-flag-note{margin:6px 0 0;padding:6px 10px;border-radius:8px;background:#fbf2ef;color:#7b3226;font-size:13px}
/* Grading questionnaire (a mock to walk through with Shelly), edition requests, classroom notes. */
.grading-card{margin-top:18px}
.grading-schemes label.check,#dialog fieldset label.check{margin:4px 0}
#dialog fieldset{border:1px solid var(--line,#e2e4de);border-radius:12px;padding:10px 14px;margin:0 0 12px}
#dialog legend{padding:0 6px;font-size:13px;font-weight:600}
.grading-preview{margin-top:14px;padding:14px 16px;border:1px dashed #cdd3c9;border-radius:14px;background:#fafbf8}
.grading-preview .eyebrow{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6e776e)}
.grading-choice{display:flex;gap:8px;margin-bottom:8px}
.grading-choice .chip{padding:4px 12px;border-radius:999px;border:1px solid var(--line,#e2e4de);font-size:13px}
.grading-choice .chip.on{background:#e7f0ea;border-color:#e7f0ea;color:#326548}
.grading-points{display:flex;align-items:center;gap:6px}
.grading-points input{width:70px}
.grading-rubric p{display:flex;justify-content:space-between;margin:4px 0;font-size:14px}
.grading-preview-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.grading-preview-actions .btn{pointer-events:none;opacity:.8}
.er-modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 12px}
.edition-request-row{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:12px 0}
.edition-request-row p{margin:0;font-size:13px}
.classroom-notes{margin:24px 0}
.classroom-notes .card{margin:0 0 10px}
.observation-share{margin-top:10px}
/* "Students see this from …" in the note, assign and task dialogs (Tim, 2026-09-30). */
.students-see{margin-top:4px}
.students-see p{margin:0;font-size:13px}
.students-call-inline{margin-top:8px}
/* Message class: the email choice sits beside About (Tim, 2026-09-30). */
/* Tim: a narrower About box, with the email box beneath it. */
.about-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.about-row>label:first-child{width:100%;max-width:340px}
.about-row .check{white-space:nowrap}
/* Signature under the send button (Tim, 2026-09-30): Signed “Shelly Pence” with a small pencil
   to change it (an edit mark, not an arrow, so it doesn't compete with the button's →). */
.sheet-actions:has(.sign-line){flex-wrap:wrap}
.sign-line{flex-basis:100%;display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap;margin-top:-4px;font-size:12px;color:var(--muted,#73796f)}
.sign-line a{display:inline-flex;align-items:center;color:#3d626d;padding:2px}
.sign-line .students-call-inline{flex-basis:100%;display:flex;justify-content:flex-end}
.sign-line .students-call-inline[hidden]{display:none}
.sign-line input{width:260px;max-width:100%;font-size:13px;padding:6px 10px}
/* Start new edition, on the class row (Classroom Manager and Content Editor). */
.teacher-bar>.teacher-bar-class{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.edition-inline{display:inline-flex;align-items:center;gap:10px}
.edition-inline button,.edition-inline span{font-size:12px!important}
.class-inbox .inbox-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.class-inbox .inbox-filters{display:flex;gap:8px;flex-wrap:wrap}
.class-inbox .inbox-filter select{font-size:13px;padding:6px 28px 6px 12px;border-radius:999px;border:1px solid var(--line);background-color:#fff}
/* Hover a check-in ring: who hasn't submitted; click: jump to that check-in's list. */
.growth-took-link{position:relative;display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;border-radius:10px;padding:2px 6px 2px 2px}
.growth-took-link:hover,.growth-took-link:focus-visible{background:#f4efe0;outline:none}
.growth-took-link:hover::after,.growth-took-link:focus-visible::after{content:attr(data-missing);position:absolute;top:calc(100% + 6px);right:0;z-index:5;width:max-content;max-width:260px;padding:8px 12px;border-radius:10px;background:#292d28;color:#fff;font:400 12px/1.4 Arial,sans-serif;white-space:normal;box-shadow:0 8px 20px -8px #0005}
.teacher-checkin{scroll-margin-top:90px}
/* Her email setting sits at the top of the Inbox, plain, beside Mark all read (Tim, 2026-10-01). */
.class-inbox .inbox-actions{display:flex;align-items:center;gap:16px;margin-left:auto}
.class-inbox .inbox-email-pref{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted,#73796f)}
/* View as student sits beside the Teacher Dashboard title (Tim, 2026-10-01). */
.heading-title .heading-preview{align-self:center;font-size:13px;margin-left:4px}
/* Teacher dashboard (Tim, 2026-10-01): the school logo sits in the header beside the workbook's
   name; Message class takes its place top right, with Student access under it. */
.masthead-school{display:flex;align-items:center;margin:0 auto 0 22px;padding-left:22px;border-left:1px solid var(--line)}
.masthead-school .masthead-logo{height:30px;width:auto}
.masthead-school .school-mark-crop{width:104px}
.heading-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.heading-actions .link{font-size:13px}
/* Classroom Manager → Modules: the whole book for her class (Tim, 2026-10-01). */
.cm-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start;margin-top:8px}
.cm-rail{position:sticky;top:16px;display:grid;gap:2px;max-height:88vh;overflow:auto;padding-right:4px}
.cm-rail button{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;text-align:left;padding:9px 10px;border:0;border-radius:12px;background:none;color:#4a4f48;font:inherit;cursor:pointer}
.cm-rail button:hover{background:#f4f1e7}
.cm-rail button.active{background:#f3ead2;color:#292d28}
.cm-rail strong{display:block;font-weight:500;font-size:13px;line-height:1.35}
.cm-rail small{display:block;margin-top:2px;font-size:11px;color:#8a8f86}
.cm-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.cm-head .eyebrow{margin:0 0 4px}
.cm-head h2{margin:0;font:400 1.9rem/1.2 Georgia,serif}
.cm-head-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}
.cm-head-tools{display:flex;align-items:center;gap:18px}
.cm-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#3d626d;cursor:pointer}
.cm-book{display:block}
.cm-book.with-guide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.cm-guide{position:sticky;top:16px;max-height:88vh;overflow:auto;padding:18px 20px;border-radius:16px;background:#f6f1e3;border:1px solid #eadfbf}
.cm-guide .eyebrow{margin:0 0 8px;color:#80672f}
.cm-section-tools{display:flex;justify-content:flex-end;gap:16px;margin:28px 0 -8px;font-size:12px}
.cm-section-tools .link{font-size:12px}
.cm-text>.teacher-preparation{margin:16px 0}
@media(max-width:900px){.cm-layout{grid-template-columns:1fr}.cm-rail{position:static;max-height:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);overflow-x:auto}.cm-book.with-guide{grid-template-columns:1fr}.cm-guide{position:static}}
.cm-guide .teacher-section{padding:0;margin:0 0 14px;border:0;background:none;box-shadow:none;font-size:14px}
.cm-guide .teacher-section h2,.cm-guide .teacher-section h3{font-size:1.15rem;line-height:1.3}
.cm-guide .teacher-section-actions{display:none}
/* Admin Notifications name the sender with their role check: gold school admin, navy RamTell. */
.inbox-sender{display:flex;align-items:center;gap:4px;font-size:12px;color:#6e776e;margin-bottom:2px}
.sender-role{display:inline-flex;align-items:center;gap:3px;font-weight:600}
.sender-role .role-check{width:13px;height:13px;margin-left:0;color:var(--gold)}
.sender-role[data-role="super"]{color:#1d2255}.sender-role[data-role="super"] .role-check{color:#1d2255}
.sender-role[data-role="teacher"] .role-check{color:var(--completion-green)}
/* Grading for one assignment, in the Assign / Task dialogs (Tim, 2026-10-01). */
.grading-field{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.grading-field>label:first-child{flex:1;min-width:220px;max-width:340px}
.grading-field .grading-points input{width:90px}
/* Message class as the key compose action (Tim, 2026-10-01: "should have a compose thing that makes
   it feel like composing a tweet and a key action"): a pen, a fuller pill, a soft lift. */
.btn.compose-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px 11px 16px;font-size:15px;border-radius:999px;box-shadow:0 8px 18px -10px #3d626d99}
.btn.compose-cta:hover{transform:translateY(-1px);box-shadow:0 12px 22px -10px #3d626daa}
.btn.compose-cta svg{flex:none}
/* Due date: a compact field with its weekday (Tim, 2026-10-01). */
.due-field .due-row{display:flex;align-items:center;gap:12px}
.due-field input[type=date]{width:180px;flex:none}
.due-field .due-day{font-size:13px;color:#4a4f48;font-weight:600}
/* Preview of the chosen grading, under the Grading field. */
.grading-field-preview{margin-top:6px}
.grading-field-preview .grading-preview{transform-origin:top left}
/* Section Note: top right, the Message class pen in dark blue; Draft an edit is quiet (Tim, 2026-10-01). */
.teacher-section.has-note{position:relative}
.teacher-section .section-note{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #3d626d;border-radius:999px;background:#fff;color:#3d626d;font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
.teacher-section .section-note:hover{background:#3d626d;color:#fff}
.teacher-section-actions .draft-edit{color:#9aa096;text-decoration:none;font-size:12px;background:none;border:0}
.teacher-section-actions .draft-edit:hover{color:#6e776e}
.teacher-section.has-note h2:first-of-type,.teacher-section.has-note h3:first-of-type{padding-right:96px}
.saints-history{margin-top:36px}
.saints-history h3{margin:0 0 10px}
#toast .toast-action{margin-left:10px;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* Content Editor contents: the section on screen in blue (Tim, 2026-10-01). */
.teacher-document aside a[aria-current]{color:#2f5360;background:#e4eff2;border-radius:8px;padding-left:10px;padding-right:10px;margin:0 -10px;font-weight:600}
/* Draft an edit sits at the far right of the section's action row, in both views. */
.teacher-section-actions .draft-edit{margin-left:auto}
/* Text boxes draw their focus ring on their own edge, never in the gap where the label sits (Tim,
   2026-10-01: "the line covers the text above the textbox ... make a general rule"). Buttons and
   links keep the 3px offset ring. */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #6b929e;outline-offset:-1px}
/* Classroom Manager: Class is here in the module list; "+ Task" lines between sections; placed tasks. */
.cm-rail .rail-here{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:1px 8px;border-radius:999px;background:#e4eff2;color:#3d626d;font-size:10.5px;font-weight:600}
.cm-insert{position:relative;height:28px;margin:6px 0;display:flex;align-items:center;justify-content:center}
.cm-insert::before{content:"";position:absolute;left:12%;right:12%;top:50%;border-top:1px dashed transparent;transition:border-color .15s}
.cm-insert:hover::before{border-top-color:#d9cfae}
.cm-insert .cm-insert-btn{position:relative;border:0;border-radius:999px;padding:3px 12px;background:var(--bg,#fafaf7);color:#9aa096;font-size:12px;cursor:pointer;opacity:.55;transition:opacity .15s,color .15s}
.cm-insert:hover .cm-insert-btn,.cm-insert .cm-insert-btn:focus-visible{opacity:1;color:#80672f}
.cm-task{display:flex;align-items:center;gap:12px;margin:10px 0;padding:12px 16px;border:1px solid #e6d9b0;border-radius:14px;background:#fdfaf1}
.cm-task strong{font-weight:500}
.cm-task small{color:#80672f;margin-left:auto}
.toc-here{display:block;width:max-content;margin-top:3px;padding:1px 8px;border-radius:999px;background:#e4eff2;color:#3d626d;font-size:10.5px;font-weight:600}
/* How many assignments she has given in each module (Tim, 2026-10-01). */
.cm-rail button{grid-template-columns:30px 1fr auto}
.cm-rail .rail-count{align-self:start;display:inline-flex;align-items:center;gap:3px;margin-top:1px;padding:2px 7px;border-radius:999px;background:#f3e7c4;color:#80672f;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
/* Student Activity → Assignments (Tim, 2026-10-01). */
.status-tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600}
.status-tag.needs{background:#f3e7c4;color:#80672f}
.status-tag.done{background:#e3efe6;color:#2f6142}
.work-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.work-head h2{margin:0}
/* Student Activity → Assignments (Tim, 2026-10-01). */
.status-tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600}
.status-tag.needs{background:#f3e7c4;color:#80672f}
.status-tag.done{background:#e3efe6;color:#2f6142}
.work-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.work-head h2{margin:0}
/* Staff header matches the student one: "Developed for <school>", gray, optically aligned.
   "Developed for" shares the baseline of the words "Sacred Heart" in the mark (measured from the
   PNG's ink, not the image box). The student header's -4px didn't carry over: this crop scales the
   logo differently, and -4px left the text 2.9px high (Tim, 2026-10-07). Re-measure if the logo or
   its crop changes. */
.masthead-school{gap:10px}
.masthead-school .masthead-for{position:relative;top:-1px;font-size:12.8px;color:#8a8f86;white-space:nowrap}
@media(max-width:640px){.masthead{flex-wrap:wrap}.masthead-school{order:3;flex-basis:100%;margin:8px 0 0;padding:8px 0 0;border-left:0;border-top:1px solid var(--line);justify-content:center}}
/* Gradebook in each assignment (Tim, 2026-10-01). */
.work-head .work-export{margin-left:auto}
.work-bulk{position:sticky;top:8px;z-index:3;display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -14px #0005}
.work-bulk[hidden]{display:none}
.work-bulk .work-count{font-weight:600;margin-right:auto}
.grade-cell{white-space:nowrap}
.grade-cell .grade-input{width:auto;min-width:64px;padding:6px 8px;font-size:13px}
.grade-cell .grade-points input{width:64px}
.grade-cell .grade-sent{margin-left:8px;font-size:11px;color:#2f6142;font-weight:600}
.student-grade{margin:6px 0 10px;padding:6px 12px;display:inline-block;border-radius:999px;background:#e3efe6;color:#2f6142;font:500 .9rem Arial,sans-serif}

/* Column headers read as headers, above the rows (Tim, 2026-10-01: "make these more clearly be
   headers ... header should have more hierarchy than the elements"). A pale band, ink-dark small
   caps, heavier weight: every table, so the teacher, admin and student tables agree. Buttons
   inside a header (+ Add) keep their own case. */
thead th,
.teacher-table thead th,
.student-grades thead th {
  background: #f2f3ee;
  color: var(--ink);
  font: 700 11.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
thead th :is(button, a, small) { text-transform: none; letter-spacing: normal; }

/* Classroom Manager section actions: bottom right, gray at rest like Draft an edit, alive on hover
   (Tim, 2026-10-01). The + turns and the bookmark lifts so the two read as live controls. */
.cm-book .teacher-section-actions{justify-content:flex-end}
.assign-actions .section-action{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;margin:-6px 0;border:1px solid transparent;border-radius:999px;background:none;color:#9aa096;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,background .15s,border-color .15s,transform .15s}
.assign-actions .section-action svg{transition:transform .2s}
.assign-actions .section-action:hover,.assign-actions .section-action:focus-visible{color:#3d626d;background:#e4eff2;border-color:#cfe0e6;transform:translateY(-1px)}
.assign-actions .section-action.assign-link:hover svg{transform:rotate(90deg)}
.assign-actions .section-action:not(.assign-link):hover svg{transform:translateY(-2px)}
/* "+ Assignment" between sections: a gold label (squarer than the Note pill, so the two don't
   repeat), centred in the gap between the cards above and below. */
.cm-text>.teacher-section{margin-bottom:0}
.cm-insert{height:auto;margin:14px 0}
.cm-insert .cm-insert-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e6d9b0;border-radius:8px;background:#fdfaf1;color:#80672f;font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;opacity:1;transition:background .15s,border-color .15s,color .15s,transform .15s}
.cm-insert:hover .cm-insert-btn,.cm-insert .cm-insert-btn:focus-visible{background:#faf1d5;border-color:#d9c58c;color:#6d5520;transform:translateY(-1px)}
.cm-task{margin:14px 0}
/* Grading policy dialog: every choice's bubble or box on the left, all lined up (Tim, 2026-10-01:
   "the bubbles should be to the left, and actually line up"). */
#dialog .grading-options label.check{display:grid;grid-template-columns:18px 1fr;align-items:center;column-gap:12px;margin:8px 0;text-align:left}
#dialog .grading-options label.check input{width:18px;height:18px;margin:0;justify-self:start}
#dialog .grading-options label.check span{display:block}
/* Grading policies on Assignments: one card each, in a row, then "+ Grading policy". */
.grading-policies{margin:28px 0}
.grading-policies h3{margin:0 0 12px}
.policy-row{display:flex;flex-wrap:wrap;gap:12px}
.policy-card{display:flex;flex-direction:column;gap:4px;width:220px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;text-align:left}
.policy-card strong{font-size:15px}
.policy-card span{color:#80672f;font-weight:600;font-size:13px}
.policy-card small{color:var(--muted);min-height:1.2em}
.policy-card .link{align-self:flex-start;margin-top:6px}
.policy-add{align-items:center;justify-content:center;flex-direction:row;gap:6px;border-style:dashed;background:none;color:#3d626d;font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;min-height:108px;transition:background .15s,border-color .15s}
.policy-add:hover{background:#e4eff2;border-color:#cfe0e6}
/* Classroom Manager: a section students can't see yet, grayed and see-through, Reveal its only action. */
.teacher-section.is-hidden{background:#f6f6f3;border-style:dashed}
.teacher-section.is-hidden .hidden-body{opacity:.42;filter:grayscale(1);pointer-events:none;user-select:none}
.cm-book .teacher-section.is-hidden .teacher-section-actions{justify-content:flex-end}
.assign-actions .reveal-action{color:#6e776e}
/* New assignment: where students write, the key choice at the top (Tim, 2026-10-01). Two
   side-by-side choices; the chosen one in the dark-blue ink. */
#dialog .task-where{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;margin:0 0 18px}
#dialog .task-where label{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
#dialog .task-where input{width:18px;height:18px;margin:0;flex:none}
#dialog .task-where label:has(input:checked){border-color:#3d626d;background:#e4eff2;color:#2f5360}
@media(max-width:480px){#dialog .task-where{grid-template-columns:1fr}}
/* Export grades (Tim, 2026-10-02): one quiet action wherever grades are, a three-way choice of
   destination, and a live preview of the first rows. */
.grades-tools{display:flex;justify-content:flex-end;margin:6px 0 10px}
.grades-tools .section-action,.work-head .section-action{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid transparent;border-radius:999px;background:none;color:#6e776e;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;transition:color .15s,background .15s,border-color .15s,transform .15s}
.grades-tools .section-action:hover,.work-head .section-action:hover,.grades-tools .section-action:focus-visible,.work-head .section-action:focus-visible{color:#3d626d;background:#e4eff2;border-color:#cfe0e6;transform:translateY(-1px)}
#dialog .export-for{grid-template-columns:repeat(3,1fr)}
#dialog .export-row{display:flex;gap:12px;flex-wrap:wrap}
#dialog .export-row label{flex:1 1 180px}
#dialog .export-preview{margin-top:12px;max-height:220px;overflow:auto;border-radius:12px}
#dialog .export-preview th,#dialog .export-preview td{padding:8px 10px;font-size:12px;white-space:nowrap}
#dialog .export-where{margin:8px 0 0;color:var(--muted);font-size:12.5px}
/* Assign dialogs: the yes/no options sit together at the end; the grading preview folds away. */
#dialog .assign-options{display:flex;flex-wrap:wrap;gap:4px 18px}
#dialog .assign-options:empty{display:none}
#dialog .grading-peek{margin-top:-6px}
#dialog .grading-peek summary{cursor:pointer;color:#6e776e;font-size:12.5px;width:max-content}
#dialog .grading-peek[open] summary{margin-bottom:6px}
@media(max-width:480px){#dialog .export-for{grid-template-columns:1fr}}
/* Grades list as a table tool (Tim, 2026-10-06): sections, gray types, gray past rows, sort + filter. */
.grades-table .grades-section th{background:#fff;color:var(--ink);font:600 13px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;text-transform:none;padding:20px 20px 8px;border-bottom:1px solid var(--line)}
.grades-table .grades-section small{color:var(--muted);font-weight:500;margin-left:4px}
.grades-table thead .grades-sort{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.grades-table thead .grades-sort:hover{color:#3d626d}
.grades-table .grades-filters th{padding:6px 10px 10px;background:#f2f3ee}
.grades-table .grades-filters :is(input,select){width:100%;min-width:0;padding:5px 8px;font:400 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.grades-table .type-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef0ea;color:#6e776e;font:600 10.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.grades-table tr.is-past td{background:#f6f6f3;color:#6e776e}
/* Export: answered but ungraded work, before the download. */
#dialog .export-warn{margin-top:12px;padding:12px 14px;border:1px solid #e3b4a8;border-radius:12px;background:#fbefeb;color:#7a2e1d}
#dialog .export-warn strong{display:flex;align-items:center;gap:8px;font-size:14px}
#dialog .export-warn strong span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#b2462c;color:#fff;font-weight:800}
#dialog .export-warn ul{margin:6px 0 0 30px;padding:0;font-size:12.5px}
/* Grades list: pick column, per-row export, and the Export CTA with its hint (Tim, 2026-10-06). */
.grades-table .pick-col{width:34px;padding-right:0}
.grades-table .export-col{width:44px;text-align:right}
.grades-table .row-export{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid transparent;border-radius:999px;background:none;color:#9aa096;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.grades-table .row-export:hover,.grades-table .row-export:focus-visible{color:#3d626d;background:#e4eff2;border-color:#cfe0e6}
.teacher-bar .cta-stack{display:flex;flex-direction:column;align-items:center;gap:6px}
.teacher-bar .cta-stack .compose-cta:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.teacher-bar .cta-hint{color:var(--muted);font-size:12px}
/* Assign dialogs: what the student will see, separate from the grading choice, filled in live. */
#dialog .grading-field{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
#dialog .grading-field label{flex:0 1 240px}
#dialog .grading-field .grading-points{flex:0 0 110px}
#dialog .student-see{margin-top:16px}
#dialog .student-see-label{margin:0 0 6px;color:var(--muted);font:600 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.08em;text-transform:uppercase}
#dialog .student-see-card{padding:14px 16px;border:1px solid #ecdfb4;border-left:4px solid #c9a447;border-radius:14px;background:#fdfaf1}
#dialog .student-see-card .assigned-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:#faf1d5;color:#6d5520;font:600 11.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#dialog .student-see-card h4{margin:8px 0 4px;font:600 16px/1.3 Georgia,serif;color:var(--ink)}
#dialog .student-see-card .assigned-note{margin:6px 0 0;font-style:italic;color:#4a4f48}
#dialog .student-see-card .assigned-note span{font-style:normal;color:var(--muted)}
#dialog .student-see-body,#dialog .student-see-where{margin:4px 0 0;color:#4a4f48;font-size:13px}
#dialog .student-see-where{color:var(--muted);font-size:12px}
#dialog .note-field{display:grid;gap:6px}
#dialog .note-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
#dialog .note-head .email-box{margin:0;font-size:13px}
#dialog .note-head .email-box:has(input:disabled){opacity:.5}
/* Tags and pills never wrap onto two lines (Tim, 2026-10-06: "should never compress like this");
   a narrow column gives way instead. */
.status-tag,.type-tag,.assign-kind,.teacher-status,.class-here-tag,.schedule-tag,.rail-here,.grade-sent,.assigned-tag,.chip{white-space:nowrap}
.teacher-table td:has(> .status-tag),.teacher-table td:has(> .teacher-status),.teacher-table td:has(> .type-tag){white-space:nowrap}
.activity-head{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.activity-head .type-tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef0ea;color:#6e776e;font:600 10.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* Teacher files on a shared activity: one quiet line of links, the clip centered on the name's ink. */
.file-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0 0}
.file-links a{display:inline-flex;align-items:center;gap:4px}
.file-links svg{flex:none;position:relative;top:.5px}
.email-box.is-off{opacity:.6}
.email-box small{color:var(--muted);font-size:11.5px;margin-left:2px}
.student-number{margin-left:8px;color:var(--muted);font-size:12px}
/* Started the workbook, above the module dates (Tim, 2026-10-07). */
.workbook-start{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 14px;padding:12px 14px;border:1px solid #cfe0e6;border-radius:12px;background:#e4eff2}
.workbook-start label{font-weight:600}
.workbook-start input{padding:6px 8px;border:1px solid #cfe0e6;border-radius:8px;background:#fff;font:inherit}
/* Info buttons sit in superscript position, half size, top right of their label, like notification badges (Tim,
   Sep 24 for badges; Oct 12: "treating all info buttons like exponent superscript position"). */
.info-dot{display:inline-grid;place-items:center;position:relative;top:-0.6em;width:13px;height:13px;margin-left:2px;padding:0;border:1px solid #9ab8c2;border-radius:50%;background:#fff;color:#3d626d;font:700 8.5px/1 Georgia,serif;cursor:pointer;vertical-align:baseline}
.workbook-start .start-past{font-size:12px;white-space:nowrap}
/* Submit: outlined until both dates are valid, then filled. */
.schedule-submit{border:1px solid #3d626d;background:transparent;color:#3d626d}
.schedule-submit.is-ready{background:#3d626d;color:#fff}
.workbook-start-info{flex-basis:100%;margin:2px 0 0;color:#2f5360;font-size:13px}
.module-cta[data-label="Done in class"]{white-space:nowrap}

/* Safety Flags (Oct 11): level colors match the review page Shelly saw; handled rows recede. */
.safety-level{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;color:#fff;background:#7a8a99;white-space:nowrap}
.safety-level[data-level=Moderate]{background:#b7791f}.safety-level[data-level=High]{background:#c2410c}.safety-level[data-level=Urgent]{background:#b91c1c}
.safety-archived td{opacity:.55}
.safety-settings{margin:0 0 16px}.safety-settings p{margin:4px 0 0}
.safety-text{margin:16px 0;padding:14px 16px;border-left:3px solid #c2410c;background:#fbfaf7;font-size:16px;line-height:1.6}
.safety-footnote{font-size:13px;margin:10px 0 0}
/* What's checked is its own section (Tim, Oct 12: "feel a bit more like its own 'section' rather than blending into the
   background"): a white panel with the tables' border and radius, the categories ruled inside it. */
.safety-checked{margin-top:40px;padding:26px 28px 14px;background:#fff;border:1px solid #e2e4de;border-radius:18px}
.safety-checked h2{margin-top:0}.safety-checked > p{margin-bottom:14px}
.safety-checked details{border-top:1px solid #e4e6e1;padding:12px 0}.safety-checked summary{cursor:pointer;font-weight:600}
.safety-checked summary small{font-weight:400}
.safety-examples{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:8px}
.safety-examples li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.safety-level[data-level="Not flagged"]{background:#eef0f1;color:#5d6872}
.safety-proposals{margin-top:36px}
/* Status: closed eye = seen, one check = read, two = handled (gray, quiet). Actions: Mark as seen as secondary text. */
.safety-status{display:inline-flex;gap:0;color:#8a918a}.safety-status svg+svg{margin-left:-7px}
.safety-actions{white-space:nowrap;text-align:right}
.safety-seen{display:inline-flex;align-items:center;gap:5px;margin-right:16px;padding:0;border:0;background:none;color:#7a8178;font:inherit;font-size:13px;cursor:pointer}
.safety-seen:hover{color:#3d626d}
.sort-head{padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.safety-filters td{padding-top:8px;padding-bottom:8px;background:#fbfaf7}.safety-filters select,.safety-filters input{width:100%;max-width:180px;font-size:13px}
/* Student IDs (Oct 12): ID boxes fill their cells; the paste helper sits below, quiet. */
#dialog [data-sid]{width:100%;min-width:120px}
.ids-paste{margin:4px 0 14px}.ids-paste summary{cursor:pointer;color:#3d626d}
.cta-stack .cta-sub{font-size:13px;margin-top:4px}
.cta-stack .cta-sub{display:inline-flex;align-items:center;gap:5px}
.teacher-bar .cta-help{max-width:260px;margin:2px 0 0;color:#2f5360;font-size:12.5px;line-height:1.45;text-align:center}
/* Student IDs inside the export dialog (Tim, Oct 12): how many have one, and the way to add them */
.export-ids{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 4px;padding:10px 14px;border:1px solid #d9e6ea;border-radius:12px;background:#f3f8f9;color:#2f5360;font-size:13.5px}
/* Show Instructor Manual under the class name (Tim, Oct 12) */
.teacher-bar>.teacher-bar-class.has-under{flex-direction:column;align-items:flex-start;gap:8px}
.teacher-bar-class .cm-switch{margin-left:2px}
/* Secondary actions in the secondary gray, no underline (Tim, Oct 12: "we need to keep our CTAs and headlines feeling
   tight"); the class name and the CTA stay the only colored things in the bar. Blue on hover says they're clickable. */
.teacher-bar-class .cm-switch,.teacher-bar .cta-stack .cta-sub{color:var(--muted)}
.teacher-bar .cta-stack .cta-sub{text-decoration:none;border-bottom:0}
.teacher-bar-class .cm-switch:hover,.teacher-bar .cta-stack .cta-sub:hover,.teacher-bar .cta-stack .cta-sub:focus-visible{color:#3d626d}
/* Create sign-in link sits beside the roster table, one per row, as quiet secondary text (Tim, Oct 12). */
.roster-signin-link{display:block;margin-top:3px;padding:0;border:0;background:none;color:#7a8178;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.roster-signin-link:hover{color:#3d626d;text-decoration:underline}
.roster-invite{font-weight:600;color:#3d626d}

/* Pinned white teacher bar (Tim, Oct 12): the class, its switch and the page's main action stay in reach while she
   scrolls. The paper-colored shadow above fills the 8px gap so text doesn't show through above the bar. Sticky columns below start under it (--teacher-bar-h, measured in app.js). */
.teacher-bar{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 8px);z-index:20;padding:12px 18px;background:#fff;border:1px solid #e2e4de;border-radius:16px;box-shadow:0 -9px 0 0 var(--paper),0 6px 18px -14px rgba(40,59,50,.35)}
.cm-rail,.cm-guide{top:calc(var(--teacher-bar-h, 0px) + 24px);max-height:calc(100vh - var(--teacher-bar-h, 0px) - 40px)}
.teacher-document aside{top:calc(var(--teacher-bar-h, 0px) + 28px)}
.work-bulk{top:calc(var(--teacher-bar-h, 0px) + 16px)}
@media(max-width:700px){.teacher-bar{position:static}}

/* "Sent, here's what happened" (Tim, Oct 12): facts with green checks, then the caught-up student's ring. */
.dialog-lead{margin:0 0 12px}
.sent-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.sent-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45}
.sent-list li svg{flex:none;margin-top:3px;color:#326548}
.sent-preview{margin:0 0 18px;padding:14px 16px;border:1px solid #e2e4de;border-radius:14px;background:#fbfbf8}
.sent-preview .eyebrow{margin:0 0 10px}
.sent-shelf{display:flex;align-items:center;gap:16px}
.sent-shelf div{display:grid;gap:3px}.sent-shelf strong{font:400 1.15rem/1.2 Georgia,serif;color:#292d28}.sent-shelf span{color:var(--muted);font-size:13.5px}
.sent-ring{flex:none;display:grid;place-content:center;width:64px;height:64px;border:6px solid #326548;border-radius:50%;text-align:center;font:400 22px/1 Georgia,serif;color:#292d28}
.sent-ring small{display:block;margin-top:2px;font:600 9px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#73796f}
.sent-off{font-size:13px;color:var(--muted)}
/* The info button beside a secondary hint takes the hint's quiet look (Tim, Oct 12: "needs to match the secondary
   status (small and light and faded)"). Spelled out here because ".teacher-bar button{font-size:13px}" outranks
   .info-dot's own size. */
.teacher-bar .cta-hint .info-dot{width:11px;height:11px;top:-0.55em;margin-left:3px;border-color:#cfd3cb;background:transparent;color:var(--muted);font:600 7.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;opacity:.85}
.teacher-bar .cta-hint .info-dot:hover,.teacher-bar .cta-hint .info-dot[aria-expanded="true"]{opacity:1;color:#3d626d;border-color:#9ab8c2}

/* Grades: filters live in the heading beside its name (Tim, Oct 12). Unset = a small chevron only (the "All" text is
   hidden); set = the value as a small blue pill. Search sits next to Assignment. */
.grades-table thead .th-tools{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.grades-table thead .th-filter{appearance:none;-webkit-appearance:none;width:18px;height:20px;padding:0 0 0 16px;border:0;border-radius:999px;cursor:pointer;color:transparent;font:400 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2373796f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat 4px 50%}
.grades-table thead .th-filter:hover,.grades-table thead .th-filter:focus-visible{background-color:#e9eee9}
.grades-table thead .th-filter.is-set{width:auto;padding:0 8px 0 20px;color:#3d626d;background-color:#e4eff2}
.grades-table thead .th-filter option{color:#292d28}
.grades-table thead .th-search{width:108px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font:400 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0;color:#292d28}
/* Where the item sits, under its name (Tim, Oct 12) */
.grades-table .work-where{display:block;margin-top:3px;color:var(--muted);font-size:12px}
/* Gradebook: one-line due dates with a PAST tag; Submitted as Owen's thin green bar and "2 of 8" (Tim, Oct 12) */
.grades-table .due-col,.grades-table .progress-col{white-space:nowrap}
.past-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:#ecede8;color:#73796f;font:600 10px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.work-progress{display:inline-block;width:80px;height:5px;margin-right:10px;border-radius:5px;background:#e8ede7;vertical-align:middle;overflow:hidden}
.work-progress>span{display:block;height:100%;border-radius:5px;background:#749780}
/* Exported rows: ✓ and when, quiet green; the record dialog (Tim, Oct 12) */
.grades-table .row-exported{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid transparent;border-radius:999px;background:none;color:#4f7a5c;font:500 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;cursor:pointer}
.grades-table .row-exported:hover,.grades-table .row-exported:focus-visible{background:#eaf3ec;border-color:#cfe3d4}
.grades-table th.export-col{text-align:left}
.export-record h3{margin:0 0 10px;font:600 14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.export-record dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0;font-size:13.5px}
.export-record dt{color:var(--muted)}.export-record dd{margin:0}
.export-files{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
.export-older{margin-top:16px}.export-older summary{cursor:pointer;color:#3d626d;font-size:13px}
.export-record.is-older{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* One Gradebook table (Tim, Oct 12): source + type tags under each name; teal scale by intensity */
.grades-table .work-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.grades-table .work-where>span:first-child{margin-right:2px}
.src-tag,.kind-tag{display:inline-block;padding:1px 8px;border-radius:999px;font:600 10.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;white-space:nowrap}
.src-tag.is-me{background:#fff;border:1px solid #d8dcd4;color:#3f4a42}
.src-tag.is-auto{background:#ecede8;border:1px solid #ecede8;color:#73796f}
.kind-tag{background:#eef7f7;color:#2f6265}
.kind-tag[data-kind="reading"]{background:#eef7f7;color:#2f6265}
.kind-tag[data-kind="notice"],.kind-tag[data-kind="reflect"]{background:#d6eceb;color:#245457}
.kind-tag[data-kind="check-in"]{background:#b3dad9;color:#1d4a4c}
.kind-tag[data-kind="journal"],.kind-tag[data-kind="task"]{background:#5fa3a3;color:#fff}
.kind-tag[data-kind="practice"]{background:#2c6e70;color:#fff}
.grades-table .th-pill{margin-left:4px;padding:1px 8px;border:0;border-radius:999px;background:#e4eff2;color:#3d626d;font:500 11.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-transform:none;letter-spacing:0;cursor:pointer;white-space:nowrap}
.grades-table .review-col{text-align:center}
/* One assignment's page (Tim, Oct 12): Export under the table at right; the Send grades confirmation */
.work-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:10px}
.work-foot .section-action{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid transparent;border-radius:999px;background:none;color:#6e776e;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap}
.work-foot .section-action:hover,.work-foot .section-action:focus-visible{color:#3d626d;background:#e4eff2;border-color:#cfe0e6}
.send-unmarked{margin-bottom:18px;padding:14px 16px;border:1px solid #eadfbf;border-radius:14px;background:#fbf7ea}
.send-unmarked h3,#dialog section>h3{margin:0 0 6px;font:600 14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.send-note{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13.5px;color:#2f5360}
.send-mine{width:100%;border-collapse:collapse;font-size:13px}.send-mine th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px}.send-mine td{padding:8px;border-top:1px solid var(--line)}
/* A student's work, reviewed on one page (Tim, Oct 12) */
.resp-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.resp-head h3{margin:0}
.resp-reading{font-size:13px;color:#3d626d;white-space:nowrap}
.resp-review{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.grade-choice{display:inline-flex;gap:0;border:1px solid #cfd8d3;border-radius:999px;overflow:hidden;width:max-content}
.grade-choice label{display:block;cursor:pointer}.grade-choice input{position:absolute;opacity:0;pointer-events:none}
.grade-choice span{display:block;padding:7px 16px;font-size:13.5px;color:#3f4a42}
.grade-choice label+label span{border-left:1px solid #cfd8d3}
.grade-choice input:checked+span{background:#3d626d;color:#fff}
.grade-choice input:focus-visible+span{outline:2px solid #3d626d;outline-offset:-2px}
.grade-inline{display:flex;align-items:center;gap:10px;width:max-content}
.inline-rubric{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.inline-rubric label{display:grid;gap:4px;font-size:13px}.inline-rubric input{width:80px}
.rubric-total{margin:-4px 0 0;font-size:13px}
/* Grading run (Tim, Oct 12): the ring students see on their own shelf, small; "n of N reviewed" */
.run-ring{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;color:#326548}
/* Only the progress ring turns -90° (so it fills from 12 o'clock); the finished ring holds a check icon, which must stay upright (Tim, Oct 12: "the checkmark is sideways"). */
.run-ring:not(.is-done) svg{width:36px;height:36px;transform:rotate(-90deg)}
.run-ring circle{fill:none;stroke-width:4}.run-ring .run-track{stroke:#e2e4de}.run-ring .run-arc{stroke:#326548;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.run-ring.is-done{border-radius:50%;background:#e7f1ea}
.run-progress{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13.5px;color:#3f4a42}
.review-run{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border:1px solid #e2e4de;border-radius:14px;background:#fff}
.review-run>div{display:grid;gap:2px}.review-run strong{font-size:14.5px}.review-run span:not(.run-ring){color:var(--muted);font-size:12.5px}
.review-run .btn{margin-left:auto}
.run-done{display:flex;align-items:flex-start;gap:16px}.run-done .run-ring{width:52px;height:52px}
/* See Grades beside the Your profile title (Tim, Oct 12); the close x stays at the far right */
#dialog .dialog-head .profile-grades{margin:0 auto 0 14px;font-size:14px;white-space:nowrap}
#dialog .dialog-head:has(.profile-grades){align-items:baseline}
/* On a phone the title would wrap beside the link, so the link takes its own line under the title. */
@media(max-width:520px){#dialog .dialog-head:has(.profile-grades){flex-wrap:wrap}#dialog .dialog-head .profile-grades{order:3;flex-basis:100%;margin:6px 0 0;text-align:left}}
/* My Observations: when it went to the Publisher (Tim, Oct 12) */
.obs-shared{display:flex;align-items:center;gap:5px;margin:6px 0 0;color:#4f7a5c;font-size:12.5px}.obs-shared time{color:var(--muted)}
/* Publisher-created, hidden until assigned (Tim, Oct 12) */
.publisher-tag{display:inline-block;padding:1px 8px;border-radius:999px;background:#ecede8;color:#73796f;font:600 10.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;white-space:nowrap}
.assign-actions .publisher-tag{margin-right:8px}.assign-actions .hidden-note{margin-right:10px;color:var(--muted);font-size:12.5px}
.assign-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 10px}
.assign-section-head h3,.hidden-assignments h3{margin:0;font:400 1.35rem/1.2 Georgia,serif}
.hidden-assignments{margin-top:22px}
.hidden-assignments>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;margin-bottom:10px}
.hidden-assignments>summary::-webkit-details-marker{display:none}
.hidden-assignments>summary::before{content:"";width:7px;height:7px;border-right:1.6px solid #73796f;border-bottom:1.6px solid #73796f;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.hidden-assignments[open]>summary::before{transform:rotate(45deg)}
.hidden-assignments .count-pill{padding:1px 9px;border-radius:999px;background:#ecede8;color:#73796f;font-size:12px}
.hidden-assignments .work-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;color:var(--muted);font-size:12px}
.hidden-due{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:8px}
#page .assign-only{margin-top:26px}
/* Grading policies as their own section at the top of Assignments */
#page>.grading-policies{margin:0 0 6px;padding:20px 22px;border:1px solid #e2e4de;border-radius:18px;background:#fff}
#page>.grading-policies h3{margin:0 0 12px;font:400 1.35rem/1.2 Georgia,serif}
/* Add extras: + Example and + Activity side by side (Tim, Oct 12) */
.teacher-table .extra-activity{margin-left:10px}
.extra-files{display:grid;gap:6px;margin:4px 0 10px}.extra-files a{display:inline-flex;align-items:center;gap:5px}
.extra-status{margin:6px 0 0;font-size:12.5px}
/* Active Assignments (Tim, Oct 12): Edit up front; Remind with its log */
.assign-table .edit-col{width:1%;white-space:nowrap}
.row-edit{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid #cfe0e6;border-radius:999px;background:#eef5f7;color:#3d626d;font:500 12.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap}
.row-edit:hover,.row-edit:focus-visible{background:#3d626d;color:#fff;border-color:#3d626d}
.hidden-assignments .edit-col{width:1%;white-space:nowrap}
.assign-table .assign-title{font-weight:500}
.assign-table .work-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;color:var(--muted);font-size:12px}
.row-remind{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid transparent;border-radius:999px;background:none;color:#6e776e;font:500 12.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;white-space:nowrap}
.row-remind:hover,.row-remind:focus-visible{color:#3d626d;background:#e4eff2;border-color:#cfe0e6}
.assign-table .remind-col{white-space:nowrap}
.assign-table .progress-link{text-decoration:none;color:inherit;white-space:nowrap}
.remind-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 14px;margin:6px 0 12px;max-height:220px;overflow:auto}
.remind-past{margin:8px 0;font-size:13px}
/* Practice Safety Flags and the flags block on History (Tim, Oct 12) */
.practice-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#ecede8;color:#73796f;font:600 10.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.03em;vertical-align:1px}
.inbox-flags{margin:0 0 22px;padding:14px 16px;border:1px solid #f0d9c9;border-radius:16px;background:#fff8f3}
.inbox-flags h3{display:flex;align-items:center;gap:6px;margin:0 0 8px;font:600 14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#8a3f1f}
.inbox-flags .inbox-item button{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Grading policies: i and a bin per card (Tim, Oct 12) */
.grading-policies .policy-card{position:relative}
.policy-delete{position:absolute;top:10px;right:10px;display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:999px;background:none;color:#9aa096;cursor:pointer}
.policy-delete:hover,.policy-delete:focus-visible{color:#a6402a;background:#fbecE6;border-color:#f0cfc3}
.policies-info{max-width:62ch;margin:-4px 0 14px;color:#2f5360;font-size:13.5px;line-height:1.5}
.grading-policies .policy-card>strong{padding-right:24px}
/* What each kind of Publisher-created work is (Tim, Oct 12) */
.kind-legend{display:grid;gap:8px;margin:14px 0 4px;font-size:13px}
.kind-legend>div{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:baseline}
.kind-legend dt{margin:0}.kind-legend dd{margin:0;color:#4b544c}
.hidden-assignments h3 .info-dot{margin-left:4px}
.emailed-note{color:#4f7a5c}
/* What changed (Tim, Oct 12) */
.changed-note{margin:0 0 14px}
.changed-section{margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--line)}
.changed-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px;font-size:13px}
#what-changed .is-current{outline:2px solid #e2b33c;outline-offset:1px;border-radius:3px}
/* Class dates collapsed once she has her own (Tim, Oct 12) */
.workbook-start.is-compact{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px}
.workbook-start.is-compact .replan-link{margin-left:auto;font-size:13px;color:var(--muted)}
.replan-warn{flex-basis:100%;margin:0 0 4px;color:#8a3f1f;font-size:13px}
.workbook-start.is-compact input[type=date]{width:auto;max-width:190px;flex:0 0 auto}.workbook-start.is-compact label{flex:0 0 auto;margin:0}
/* Saint answers: the model separates paragraphs with single line breaks; each is its own paragraph, with air between
   (Tim, Oct 12: "it's hard to read these paragraphs in this blocky formatting"). */
.saint-answer p,.comparison-answer p{margin:0 0 .95em}.saint-answer p:last-child,.comparison-answer p:last-child{margin-bottom:0}
/* Saints answer in Owen's shape (Tim, Oct 12: "notice the length of answers on the owen mockups, and how it's broken
   into text paragraphs and apply that to our AI Saints too"): each paragraph is its own short bubble, and a new answer's
   bubbles arrive one after another (160 ms apart, as on Owen) instead of as one block. */
.saint-answer p,.journal-dialogue .jd-bubble p{background:#faf9f6;border:1px solid #deddd5;border-radius:3px 15px 15px 15px;padding:13px 17px;margin:0 0 8px;box-shadow:0 1px 2px #25282008;font:15.5px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#3a423a}
.saint-answer p:last-child{margin-bottom:0}
.saint-turn:last-child .saint-answer p{animation:saint-bubble .45s ease both;animation-delay:calc(var(--i,0) * 160ms)}
@keyframes saint-bubble{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.saint-turn:last-child .saint-answer p{animation:none}}
/* Gifts of Others for teachers: one card per observation, its replies under it in the gold quote. */
.teacher-gifts{display:grid;gap:14px}.gift-card header{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-bottom:8px}.gift-card header time{margin-left:auto;color:var(--muted);font-size:12.5px}
.gift-card p{margin:0 0 8px}.gift-card blockquote{margin:10px 0 0;padding:8px 12px;border-left:3px solid #c9a75a;background:#fbf7ea;border-radius:0 10px 10px 0;font-size:14px}
/* Teacher Gifts of Others as the students' table (Owen's roster): compact rows, small headers, a row opens what was said. */
.teacher-gifts .gift-summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.teacher-gifts .co-table-scroll{overflow:auto;border:1px solid #d6dcd6;border-radius:9px;background:#fff}
.teacher-gifts .gift-table{width:100%;border-collapse:collapse;text-align:left;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border:0;box-shadow:none}
.teacher-gifts .gift-table th,.teacher-gifts .gift-table td{padding:12px 16px;border:0;border-bottom:1px solid #e4e6e0;text-transform:none;letter-spacing:0;vertical-align:middle}
.teacher-gifts .gift-table thead th{font-size:12px;color:#747a70;font-weight:500;background:#f3f4f0}
.teacher-gifts .gift-table tbody th{font-weight:500}
.teacher-gifts .gift-toggle{all:unset;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.teacher-gifts .gift-caret{color:#8a908a;width:12px}
.teacher-gifts .gift-row.is-unread th{font-weight:650}
.teacher-gifts .gift-row.is-open>*{background:#f1f5f6}
.teacher-gifts .gift-new{display:inline-block;padding:1px 9px;border-radius:999px;background:#fbefd9;color:#80672f;font-size:12px;font-weight:600}
.teacher-gifts .gift-detail>td{background:#fafbf9;padding:14px 16px 18px}
.teacher-gifts .gift-card{background:#fff;border:1px solid #e4e6e0;border-radius:10px;padding:14px 16px;margin-bottom:10px}
.teacher-gifts .gift-card.is-unread{border-left:3px solid #b79853}
.teacher-gifts .gift-card header{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:6px}
.teacher-gifts .gift-card header>span{flex:1;min-width:200px}
.teacher-gifts .gift-card header time{color:var(--muted);font-size:12.5px}