: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;
  /* The board's "Put off" red (neil-board.js, checkins.css --ci-down), for struggles: an accent, never an alarm. */
  --put-off: #cc4f45;
  --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; }
/* AI Lab's own pages, a level under AI Conversations' gold strip (AI Lab is its sub-tab): pulled up into the strip's
   margin and quieter than it (plain text, the current page underlined in blue), so it reads as inside AI Lab. */
.lab-sections { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -16px 0 24px; padding: 0 20px; } /* 20px: the strip's 8px + its buttons' 12px, so these labels start under the strip's */
.lab-sections button { padding: 4px 0; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 13px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.lab-sections button:hover { color: var(--ink); }
.lab-sections button.active { color: var(--ink); border-bottom-color: var(--blue); }
.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;
}
/* A dropdown's arrow sits right next to the words it changes (Tim, Oct 20, on "Class 1": "always, a drop down should go
   right next to the words of the thing it is modifying. (this requires fixes on many pages, apply the general rule now and
   in future)"; AGENTS.md Design). Each box is as wide as the choice it shows, not its longest choice ("+ Start new
   edition…" made Class 1's 193px): field-sizing, and app.js FIT_SELECTS sizes them where a browser can't (Safari).
   Toolbars, filters and the card's Settings; a new dropdown joins with class="fit". */
.class-picker select,
select.fit,
.teacher-filters select,
select[data-inbox-filter],
select[data-safety-filter],
#dialog select,
select[data-filter],
#trends-days,
#reading-module,
#observation-module,
#observation-author,
#ai-view,
#ai-review-filter,
#ai-review-sort,
#ai-review-saint,
#ai-perspective,
#bug-filter,
#availability-scope,
#availability-order,
#entry-sort,
#entry-filter,
#student-preview-class,
#saint-assign-unit,
#dialog .ae-back select {
  field-sizing: content;
  width: auto;
  max-width: 100%;
}
.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-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:center;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}
/* Genuine engagement (lib/saints-engagement.mjs): the score in the flag tag's shape, green; the signals behind it as quiet
   outlined chips, so the number reads first. Chips sit centred on the student code's line (labels centre on titles). */
.ai-review-head .ai-score{padding:1px 10px;border-radius:999px;background:#e2efe4;color:#2d5a37;font-weight:700;font-size:12px}
.ai-review-head .ai-score.is-pending{background:#eef0ec;color:var(--muted,#6e776e);font-weight:500}
.ai-review-head .ai-signal{padding:0 8px;border-radius:999px;border:1px solid #d6ddd3;color:#4d5a50;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}
/* "+ Reading" sits beside "+ Assignment" (Oct 20): a small gap keeps two buttons from reading as one. */
.cm-insert{height:auto;margin:14px 0;gap:8px}
.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}
/* It wraps on a phone, as the girl's own banner now does (int-a2 677afaa): app.css keeps .assigned-tag on one line, and
   "Assigned · due Mon, Oct 19 · Complete / incomplete" ran 20px past the window at 375 (measured, Oct 18). */
#dialog .student-see-card .assigned-tag{display:inline-block;max-width:100%;padding:2px 10px;border-radius:999px;background:#faf1d5;color:#6d5520;font:600 11.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:normal}
#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. */
/* Centered, the small size shares the file name's baseline (measured within 0.3 px, Oct 14); at the default stretch it
   sat 3.5 px high, and `baseline` aligns to the paperclip instead of the letters. */
.file-links{display:flex;flex-wrap:wrap;align-items:center;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: View phrase 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}
/* View phrase wears Mark as seen's old look and eye (Tim, Oct 28: "keeps the nice balance"). */
.safety-view{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:#7a8178;font:inherit;font-size:13px;cursor:pointer}
.safety-view:hover{color:#3d626d}
/* Every column at a glance down to 768 (teacher tables fit, Tim, Oct 18; the APO's check of View phrase, Oct 28: the
   table was 1021px in a 730px box, 930 on live 74, so its actions sat behind a sideways scroll). The table
   keeps its auto layout and gives way where squeezed; its date may break at any width, never before AM/PM (app.js
   `when`). Up to 1250px: its actions go under each other, right-aligned, its cells take the fitted tables' 10px sides,
   and the two menus with long choices (a concern, a kind of writing) stop at 76px, so a chosen "Sexual abuse or
   exploitation" (180px) can't push it out. Measured: 632px empty and 713 with every menu at its widest choice, within the
   713 a 768 window leaves beside a classic scrollbar. Above 1250 the actions keep one line; with every menu at its widest
   choice the table needs ~1,193px, and 1251 gives 1,202 (at 1100 it was 141px over, hence 1250, not 1100). */
.safety-acts{display:flex;justify-content:flex-end;align-items:center;column-gap:16px;row-gap:8px}
/* The gap spaces them, so td .link's 12px right margin goes: stacked, all three end on one edge (measured at 768). */
.safety-acts>.link{margin:0}
.safety-table time{white-space:normal}
@media(max-width:1250px){.safety-table :is(th,td){padding-left:10px;padding-right:10px}.safety-acts{flex-wrap:wrap}
  .safety-filters select:is([data-safety-filter=concern],[data-safety-filter=writing]){max-width:76px}}
.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 input{width:100%;max-width:180px;font-size:13px}
/* Its menus as wide as their words, arrow beside them (Tim, Oct 20; the rule at .class-picker select). */
.safety-filters select{width:auto;field-sizing:content;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}
/* Student IDs, the easy way (Tim, Oct 18: "force reminded … this was too hard to find"). The export leads with who still
   needs a number, in the warm to-do color; the window opens on her system with her school's file as the first way in,
   then a preview, then the boxes. A box she or her file changed is marked until it saves. */
#dialog .export-ids.is-missing{margin:0 0 14px;border-color:#e6d9b0;background:#fdf6e3;color:#5c4a1c}
#dialog .export-ids.is-missing>div{display:grid;gap:2px}
#dialog .export-ids.is-missing small{color:#80672f;font-size:12.5px}
#dialog .ids-system{grid-template-columns:repeat(2,minmax(0,1fr))}
#dialog .ids-need{margin:0 0 10px;font-weight:600}
#dialog .ids-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 6px}
#dialog .ids-upload{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
#dialog .ids-upload:focus-within{outline:3px solid #9cc3cd;outline-offset:2px}
#dialog .ids-found:empty{display:none}
#dialog .ids-matched{margin:8px 0 4px}
#dialog .ids-warn{margin:6px 0 12px;padding:10px 14px 10px 30px;border:1px solid #e6d9b0;border-radius:12px;background:#fdf8ea;color:#5c4a1c;font-size:13px}
#dialog .ids-warn li+li{margin-top:4px}
#dialog .ids-ask{margin:8px 0 12px;padding:12px 14px;border:1px solid #d9e6ea;border-radius:12px;background:#f3f8f9}
#dialog .ids-ask p{margin:0 0 8px;font-weight:600}
#dialog input[data-sid].is-changed{border-color:#99834e;background:#fdf8ea}
/* 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-preview .eyebrow+.sent-shelf{margin-top:0}
/* Her Unfinished Assignments as she sees it (Tim, Oct 20: "the unfinished assignemtns should have the card they would see
   insidfe of it"): her ring (nearly empty when nothing is done, never a closed circle) and the new assignment's own tile,
   drawn by the same ringTile/todoRing as her home page. Her stylesheet isn't on the teacher's page, so these are hers
   (student-extras.css), scoped here and a little smaller; keep them in step. */
.sent-shelf .todo-ring{position:relative;flex:none;width:76px;height:76px}
.sent-shelf .todo-ring>svg{width:76px;height:76px;transform:rotate(-90deg)}
.sent-shelf .todo-ring circle{fill:none;stroke-width:8}
.sent-shelf .todo-ring .ring-track{stroke:#e2e4de}
.sent-shelf .todo-ring .ring-arc{stroke:#326548;stroke-linecap:round}
.sent-shelf .ring-left{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:400 22px/1 Georgia,serif;color:#292d28}
.sent-shelf .ring-left small{display:block;margin-top:2px;font:600 9px Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#73796f}
.sent-shelf .sent-tile{flex:1 1 auto;min-width:0;display:flex}
.sent-shelf .ring-tile{position:relative;flex:0 1 300px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:14px 18px 14px 30px;background:#fff;border:1px solid #e2e4de;border-radius:18px;overflow:hidden}
.sent-shelf .ring-spine{position:absolute;left:0;top:0;bottom:0;width:14px;background-size:cover}
.sent-shelf .ring-tile.is-late{background:#fbeeea;border-color:#efcfc6}
.sent-shelf .ring-kind{margin:0;font:600 .66rem Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#80672f}
.sent-shelf .ring-tile h3{margin:0;font:400 1.05rem/1.3 Georgia,serif}
.sent-shelf .ring-tile h3 a{color:#292d28;text-decoration:none}
.sent-shelf .ring-note{margin:2px 0 0;font:italic 400 .9rem/1.45 Georgia,serif;color:#4a4f48}
.sent-shelf .ring-note span{font-style:normal;font-family:Arial,sans-serif;font-size:.8rem;color:#80672f;white-space:nowrap}
.sent-shelf .ring-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.sent-shelf .ring-due{font:600 .8rem Arial,sans-serif;color:#80672f}
.sent-shelf .ring-tile.is-late .ring-due{color:#a8483a}
.sent-shelf .ring-due .ring-grade{display:block;margin-top:2px;font:500 .72rem Arial,sans-serif;color:#73796f;letter-spacing:.02em}
.sent-shelf .ring-go{margin-left:auto;border:0;border-radius:999px;padding:8px 16px;min-height:34px;background:#ad9150;color:#fff;font:600 .85rem Arial,sans-serif}
.sent-list .is-bell svg{color:#3d626d}
.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}
/* 84px: "Search…" is 49px of text, so the box hugs it with room for one typed word ("Duckworth", 61px), and at the
   Gradebook's narrowest name column (229px, below) Assignment's heading still ends 16px short of To review's. At the
   108px it was, it would run 8px into To review's letters there (Oct 23, measured; a box hugs its words). */
.grades-table thead .th-search{width:84px;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) */
/* ✓ and the day, the time under the day (stampButton, Oct 23): two columns, so the time starts on the day's letters
   and the ✓ hangs in front; left-aligned, or a button would center the shorter line. */
.grades-table .row-exported{display:inline-grid;grid-template-columns:auto auto;column-gap:5px;align-items:center;padding:4px 9px;border:1px solid transparent;border-radius:12px;background:none;color:#4f7a5c;font:500 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;white-space:nowrap;cursor:pointer}
.grades-table .row-exported .stamp-time{grid-column:2;color:var(--muted);font:400 12px/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.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's quiet buttons start their ink on EXPORT's E, as Remind's do (Tim, Oct 20: "this should feel left justified
   with the remind button above"). Measured in Chrome, the E's ink is 0.98px in; the ✓'s is 11.75px into its pill and the
   download icon's 9.17px into its circle, so they land at 0.75 and 1.17. The hover box reaches into the cell padding.
   Pulled, the widest stamp ("May 30" over "10:44 AM", 93px) ends 82px in, inside the 96px column; unpulled it ran 7px
   past the table's edge (Oct 23). */
.grades-table .export-col .row-exported{margin-left:-11px}
.grades-table .export-col .row-export{margin-left:-8px}
.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}
/* Each kind tag carries its pill's icon (Tim, Oct 18: "can you apply it in other teacher places where they are tagged"),
   in the tag's own ink, so a tag reads as the pill she chose (assign-window.js kindTag). */
.kind-tag{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.kind-tag svg{flex:none;width:11px;height:11px}
.kind-tag[data-kind="reading"]{background:#eef7f7;color:#2f6265}
/* Darker as work gets more shared and serious (Tim, Oct 20: "reflections are share so are darker and mroe serious. journals
   are lighter bc jsut me. I like that darkness increases in publicness and seriousness as you go right"): Reflect took
   Journal's teal and Journal (with Notice, also her private journal) took Reflect's, so the New assignment row reads
   Readings, Journal, Check-ins, Reflections ... */
.kind-tag[data-kind="notice"],.kind-tag[data-kind="journal"]{background:#d6eceb;color:#245457}
.kind-tag[data-kind="check-in"]{background:#b3dad9;color:#1d4a4c}
/* Reflect is #3a8080 with white (4.58:1) since Oct 20: Tim asked that a chosen pill's word match its white icon, and white
   on the old #5fa3a3 was 2.9:1. Her own assignments are the darkest, a charcoal
   with white (11.5:1): Tim, Oct 18, "my own assignments can be the darkest shade, ok if it is different than others
   like dark gray or something". The New assignment pills are these tags (assign-window.css; a test compares them). */
.kind-tag[data-kind="reflect"]{background:#3a8080;color:#fff}
.kind-tag[data-kind="task"]{background:#343b3b;color:#fff}
.kind-tag[data-kind="practice"]{background:#2c6e70;color:#fff}
/* Kinds with no pill in New assignment (the APO, Oct 16), each with its own look instead of falling back to Reading's:
   - The Class Check-In has its own button. Its tag is the girls' card: the card's fill and its rating ink, from lane P's
     presence.css .presence-card (presence-polish), 5.0:1. A test keeps them equal.
   - "Activity", a Publisher activity of no known kind: neutral, the "Publisher created" tag's fill, 5.3:1. */
.kind-tag[data-kind="class-check-in"]{background:#cfe3ea;color:#3d626d}
.kind-tag[data-kind="activity"]{background:#ecede8;color:#5c625a}
/* Extra credit for gifts noticed (Oct 14): gold, the Gifts of Others colour, so it reads apart from the teal scale of
   work students hand in. */
.kind-tag[data-kind="extra-credit"],.kind-tag[data-kind="gifts-noticed"]{background:#fbefd9;color:#80672f}
/* Ask a Saint (lane S, Oct 18): a deeper gold than extra credit's, from the Saints' own palette (their portraits' halo). */
.kind-tag[data-kind="ask-a-saint"]{background:#ead9a6;color:#4f3f12}
.gift-credit-settings{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;margin:0 0 14px}
.gift-credit-settings label{display:grid;gap:4px}
.gift-credit-settings input{width:90px}
.gift-credit-table td{vertical-align:middle}
/* On a phone, Reset goes under her points box rather than past the table's edge. */
@media (max-width:560px){.gift-credit-table .grade-cell .grade-points+.link{display:block;margin:6px 0 0}}
.gift-points{width:64px}
.grade-cell .grade-points+.link{margin-left:10px}
.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}
/* The radio stays inside its pill, 1px (found Oct 20 in her hand-in window): app.css gives inputs width:100%, so an
   absolute one was the window's full width past the pills, and with Complete preselected the window scrolled 120px
   sideways and cut off its left edge (the same cause lane AE fixed for the type pills, assign-window.css). */
.grade-choice label{display:block;position:relative;cursor:pointer}.grade-choice input{position:absolute;inset:0;width:1px;height:1px;margin:0;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:flex-start;gap:10px;margin:34px 0 10px}
/* Your Assignments' counts, as Hidden's and Deleted's: active on white, past on gray (Tim, Oct 20). */
.count-pills{display:inline-flex;gap:6px}
.assign-section-head .count-pill{padding:1px 9px;border:1px solid #d8ddd4;border-radius:999px;background:#fff;color:#292d28;font-size:12px}
.assign-section-head .count-pill.is-past{border-color:#ecede8;background:#ecede8;color:#73796f}
.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}
/* Teacher tables fit (Tim, Oct 18, on the Gradebook: "in full screen and submit and export is getting cut off. it should
   always show and we cut off the title (...) as soon as it runs past our tag. (we'd ideally even like all this showing
   every time on portrait ipad... important to see every column at a glance)"). A 120-character question on one line
   made the Assignment column 800px, so To review, Due, Submitted and Export ran off the side. Now every small column
   has a compact fixed width and the name takes what's left: table-layout fixed, so no name can widen its column. The
   name is one line ending in "…" (.row-title; its whole text stays in the page, and in title for hover); the tags under
   it wrap as before. Each table's min-width is its fixed columns plus ~230px for names, all within the 713px a 768px
   window gives a table beside a classic scrollbar (Windows' 17px; 11px in headless Chrome on a Mac): 768, less the
   page's 36px of padding and the box's 2px of border. An iPad's scrollbar floats over the page, so it gives 730, and
   the name column takes the extra. Sized for 730 alone, the Gradebook (724) ran 5px off the side once Chrome drew a
   classic scrollbar (Oct 23). The "Teacher tables fit, measured in Chrome" test in tests/ui.test.mjs measures it,
   with whichever scrollbar its Chrome draws; narrower than that, as on a phone, the table scrolls sideways as before. */
.teacher-table.fits{table-layout:fixed}
.teacher-table.fits :is(th,td):not(.title-col):not(.pick-col){padding-left:10px;padding-right:10px}
.teacher-table.fits .row-title{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teacher-table.fits .row-title>:is(button,a){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The name and its points on one line (Tim, Oct 18: points "on the same line as title, stand out more from those pieces
   below"): centered on the name (labels center on titles), the name gives way to "…", the points never do. */
.teacher-table .row-head{display:flex;align-items:center;gap:8px;min-width:0}
.teacher-table .row-head>.row-title{min-width:0;flex:0 1 auto}
.teacher-table .row-head>.worth-tag{flex:none}
.teacher-table .worth-tag.is-none{background:none;color:var(--muted,#747b71);padding:0;font-weight:500}
/* Where it is in the book is plain text on its own last line under the tags (Tim, Oct 20: "perhaps the module location
   should ALWAYS get its own last line? for organization?"), so the type and category always open the tag line and
   the location is in the same place on every row, at the name's left edge. Assignments draws it after her note to the
   class too (.work-loc), so it is the last line there as well. */
.teacher-table .work-where>.where{flex-basis:100%}
/* The 📍 before a row's place (whereTag), on the place's own line, centred on its letters (measured). */
.work-where .where{display:inline-flex;align-items:center;gap:3px}
.work-where .where>svg{flex:none}
.assign-table .work-where.work-loc{margin-top:6px}
/* 80px holds every type but Class Check-In (114) and Extra credit (95), measured: the category after it lines up as a
   column; a wider slot left a gap after Task on most rows. */
.teacher-table .work-where>.kind-slot{flex:none;min-width:80px;display:inline-flex}
/* Past drops under its date instead of widening Due. */
.teacher-table.fits .due-col .past-tag{display:block;width:fit-content;margin:4px 0 0}
/* The count centered under its bar in small gray type (Tim, Oct 20: "0 of 15 may look good as centered under the bar in
   a tight secondary text type -- this might even be good way to save space as default"), so Progress is only as wide as
   its bar: the bar and "8:00 AM" beside it no longer meet. */
/* The bar is centered on the row's first line, level with the name and the date (a 22.4px line, a 5px bar: 8.7px down);
   stacked, it otherwise rode 8px above them, measured. */
.work-progress-stack{display:inline-flex;flex-direction:column;align-items:center;gap:5px;vertical-align:top;padding-top:8.7px}
.teacher-table td.progress-col{vertical-align:top}
.work-progress-stack>.work-progress{margin:0}
.work-count{color:var(--muted);font-size:12px;line-height:1.15;white-space:nowrap}
.progress-link:hover .work-count,.progress-link:focus-visible .work-count{color:#3d626d}
.teacher-table.fits .work-progress{width:56px}
/* Every Gradebook heading sits on one line: each holder is as tall as Assignment's search box (24px), so a label with
   no box beside it (Export) or a 20px menu (To review, Due, Submitted) centers where Assignment's does (they were
   2-3px apart, measured). */
.grades-table thead .th-tools{min-height:24px}
/* 484px of small columns + a 229px name column = 713, the room beside a classic scrollbar at 768 (above). */
.grades-table.fits{min-width:713px}
.grades-table.fits .pick-col{width:44px}
.grades-table.fits .review-col{width:112px}
.grades-table.fits .due-col{width:104px}
.grades-table.fits .submitted-col{width:128px}
.grades-table.fits .export-col{width:96px;text-align:left}
.assign-table.fits{min-width:668px}
.assign-table.fits .edit-col{width:92px}
/* The name column's heading starts where its buttons' first ink does (Tim, Oct 20: "left justify this header with Edit icon,
   making those feel like elements of the same column"): it spans the buttons' column (teacherTable merge), and 23px puts
   its A on the Edit pencil's ink (pill edge 10px + border 1 + padding 11 + the icon's 1px inset, measured 271.1 vs 271.4),
   and on Reveal's and Restore's first letter alike. */
.teacher-table.fits th.title-col[colspan="2"]{padding-left:23px}
.assign-table.fits .progress-col{width:104px}
.assign-table.fits .remind-col{width:104px}
.hidden-table.fits{min-width:626px}
.hidden-table.fits .edit-col{width:104px}
.hidden-table.fits .suggested-col{width:132px}
.hidden-table.fits .due-col{width:150px}
.hidden-table.fits .hidden-due{width:100%;min-width:0}
/* Deleted (Oct 20): Restore as wide as Reveal, and when it was deleted (date and time) on one line. */
.deleted-table.fits{min-width:520px}
.deleted-table.fits .edit-col{width:104px}
.deleted-table.fits .deleted-col{width:150px;white-space:nowrap}
/* Course dates: two date boxes side by side are its widest part, and they shouldn't break apart, so on a narrower
   screen its cells pad less instead (760px in 730 at 768 with the usual 20px; 680 with 12px). */
@media(max-width:900px){.dates-table :is(th,td){padding-left:12px;padding-right: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}
/* Remind's bell (and the ✓ of a sent reminder) starts where the REMIND heading's letters do (Tim, Oct 20: "this should
   feel left justified with the remind button above"): the pill's 10px padding and border only show on hover, so at rest
   the bell sat 12px right of the heading. Measured in Chrome: the bell's ink 12.8px in from the button's edge, the R's
   ink 1px in from the heading's; the check's ink is 1px nearer its edge. The hover pill reaches into the cell padding. */
.assign-table .remind-col .row-remind{margin-left:-12px}
.assign-table .remind-col .row-exported{margin-left:-11px}
.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:96px 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}}
/* While the Saint answers (app.js openTeacherSaints, Tim Oct 19): her reply bubble with three pulsing dots, the line under
   it saying what the Saint is doing. The dots rise in turn, as a messaging app's do; reduced motion keeps them still. */
.saint-answer p.saint-dots{display:inline-flex;align-items:center;gap:5px;padding:15px 18px;margin:0}
.saint-dots span{width:7px;height:7px;border-radius:50%;background:#8f978b;animation:saint-dot 1.3s ease-in-out infinite}
.saint-dots span:nth-child(2){animation-delay:.16s}.saint-dots span:nth-child(3){animation-delay:.32s}
@keyframes saint-dot{0%,70%,100%{opacity:.35;transform:none}35%{opacity:1;transform:translateY(-3px)}}
.saint-typing-line{display:block;margin:6px 0 0 4px;color:#7c8378;font:italic 13px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
@media (prefers-reduced-motion:reduce){.saint-dots span{animation:none;opacity:.6}}
/* Her minutes and words, on their own line under when she handed it in (the Gradebook row and her hand-in window). */
.resp-effort{display:block;font-size:12.5px;color:var(--muted)}.resp-effort:empty{display:none}
/* The sheet's footnote at a footnote's spacing (Tim, Oct 20: "we never need this much interline spacing for a footnote"). */
.saints-dialog .dialog-body>small.muted{display:block;line-height:1.35}
/* 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}
/* The gifts report (Oct 14): the bar a girl sees toward her unlock (journal.css .jx-checklist .jx-bar), then her total. */
.teacher-gifts .gift-meter{display:inline-flex;align-items:center;gap:10px}
.teacher-gifts .gift-bar{display:block;width:64px;height:8px;border-radius:999px;background:#ebe7dc;box-shadow:inset 0 1px 2px #3a2f1414;overflow:hidden}
.teacher-gifts .gift-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b79853,#e3c987)}
.teacher-gifts .gift-meter.is-done .gift-bar span{background:#b79853}
.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}
/* Categories, points and marks (Oct 14, Shelly's PowerSchool). Category and points sit beside the type in the assign
   dialog and policy editor; on the Grades list they ride with the kind tag, in the same small pill, neutral so the
   gold To-review counts stay the loudest thing on the row. */
.grading-worth{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:10px 0}
.grading-worth input{width:90px}
.grading-field .grading-category select{min-width:140px}
/* Points as a small beveled block, not a pill, so it reads apart from the tags under the name (Tim, Oct 20: "this could be
   more of a beveled rectangle so it fesl different than the tags beneath it?"). */
.worth-tag{display:inline-block;padding:1px 7px;border-radius:5px;border:1px solid #e0dccd;background:linear-gradient(#fbfaf5,#efece2);box-shadow:inset 0 1px 0 #fff,0 1px 0 #292d280d;color:#5f5a4b;font:600 10.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;white-space:nowrap}
.work-head .work-worth{margin-left:10px;font-size:13px}
/* Marks read like PowerSchool's: red for late or missing, gray for absent or exempt (Shelly, Oct 13). */
.mark-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font:600 11px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap}
.mark-tag[data-mark="late"],.mark-tag[data-mark="missing"]{background:#f8e3e0;color:#9a3426}
.mark-tag[data-mark="absent"],.mark-tag[data-mark="exempt"],.mark-tag[data-mark="revising"]{background:#ecede8;color:#5f655c}
/* Her Complete mark reads as done work, in the same green as a reviewed hand-in (.status-tag.done). */
.mark-tag[data-mark="complete"]{background:#e3efe6;color:#2f6142}
td>.mark-tag:first-child{margin-left:0}
tr.is-unsubmitted td{color:#5f655c}
.mark-input{min-width:96px}
/* PowerSchool export: one card per assignment, what to type when making it, then its file. */
.ps-steps{list-style:none;margin:14px 0 6px;padding:0;display:grid;gap:10px;max-height:46vh;overflow:auto}
.ps-steps li{border:1px solid #e3e6df;border-radius:12px;padding:10px 14px;background:#fff}
.ps-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ps-copy{font-size:12.5px;white-space:nowrap}
.ps-make{display:flex;flex-wrap:wrap;gap:6px 22px;margin:6px 0 0}
.ps-make div{display:flex;gap:6px;align-items:baseline}
.ps-make dt{color:#73796f;font-size:12px}
.ps-make dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.ps-marks{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font-size:12.5px;color:#5f655c}
.ps-marks .mark-tag{margin:0 4px 0 0}
/* Points stacks its label like Grading and Category beside it (the older inline "Out of" sat beside its box). */
.grading-field label.grading-points{display:block}
.grading-field label.grading-points[hidden]{display:none}
/* Its points box, named for how it's marked ("Out of", "Worth"; Oct 18), with the letter scale's i in superscript beside
   the name. A box, not a label around it, so the i is its own button and the label names only the box. */
.grading-field div.grading-points{display:block;color:var(--muted);font-size:12px}
.grading-field div.grading-points[hidden]{display:none}
.grading-field .grading-points-name label{display:inline}
.grading-field .letter-scale{flex-basis:100%;margin:0;color:var(--muted);font-size:12px}

/* Extra credit to review (Oct 15): each gift as Shelly reads it, then one click. Gold count like To review elsewhere. */
.gift-review{margin:16px 0 20px;padding:14px 16px;border:1px solid #ecdfb8;border-radius:14px;background:#fffbf0}
.gift-review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gift-review-head h3{margin:0;display:flex;align-items:center;gap:8px}
.gift-review-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.gift-review-list li{background:#fff;border:1px solid #eee6cf;border-radius:12px;padding:12px 14px}
.gift-review-who{margin:0 0 4px}
.gift-review-where,.gift-review-impact{margin:4px 0;color:#5f655c;font-size:13.5px}
.gift-review-list blockquote{margin:6px 0;padding-left:10px;border-left:3px solid #e5d6a6}
.gift-review-actions{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}

/* Late penalty in her row (Oct 15): reads like the red Late mark, and is a choice. */
.late-input{margin-left:6px;padding:1px 6px;border-radius:999px;border:1px solid #efc9c2;background:#f8e3e0;color:#9a3426;font:600 11.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* Category tags, light to dark (Oct 15): their own indigo scale, apart from the teal kinds of work and the gold of
   extra credit and To review. Exam is the darkest, as it weighs most per item. */
.cat-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}
.cat-tag[data-cat="completion"]{background:#eef0fa;color:#4a5584}
.cat-tag[data-cat="formative"]{background:#d9def4;color:#36427a}
.cat-tag[data-cat="summative"]{background:#aab5e3;color:#1f2a5c}
.cat-tag[data-cat="exam"]{background:#3b4785;color:#fff}
.policy-worth{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Her email choices at the top of Admin Notifications (Oct 15). */
.email-prefs{margin:6px 0 18px;padding:12px 16px;border:1px solid #e3e6df;border-radius:12px;background:#fff}
.email-prefs h3{margin:0 0 6px;font-size:15px}
.email-pref-list{display:grid;gap:4px}
.email-prefs .muted{margin:8px 0 0;font-size:12.5px}

/* Give extra credit beside each girl (Oct 15). */
.gift-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.gift-give{font-size:13px;white-space:nowrap}

/* Gifts report (Oct 15): an arrow between sender and receiver; credit beside the gifts she sent. */
.gift-arrow{color:#8a8f86;margin:0 2px}
.gift-credited{color:#2f6142;font-weight:600;font-size:13px;white-space:nowrap}
.gift-credit-do{display:inline-flex;gap:12px;font-size:13px;white-space:nowrap}
/* Not yet, one girl per line, so "Mark complete" sits by her name (Shelly, Oct 15). */
.progress-owed{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.progress-owed .progress-mark,.progress-mark{margin-left:6px;font-size:.85em}
/* A Check-In in the teacher's review: numbered, open, in the form's order (Shelly, Oct 15). Ratings sit at the right of
   their statement so a column of numbers scans like her paper rubric; written answers run under their question. */
.checkin-count{margin:4px 0 10px}
.checkin-answers{margin:0;padding-left:1.6em;display:grid;gap:8px}
.checkin-answers li{padding-bottom:8px;border-bottom:1px solid #ecede8}
.checkin-answers li:has(>strong){display:list-item}
.checkin-answers li>strong{float:right;margin-left:12px;white-space:nowrap}
.checkin-answers li>p{margin:4px 0 0}
.checkin-answers li.is-skipped>strong{color:#8a8f86;font-weight:500}

/* A page from another build (lane RS, app.js newVersionBar): one slim bar across the top of the page, above the
   masthead, in the pale blue the app uses for information (not an alert: nothing is wrong, and nothing is lost by
   waiting). In the page's flow, not pinned: pinned at top 0 it sat over the girl's sticky masthead and cut off the
   wordmark (found in the browser run, Oct 18). Scrolled away, she loses nothing: the page refreshes itself at her next
   idle moment. */
#new-version {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  padding: 6px 16px;
  background: var(--blue);
  color: var(--blueink);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.3;
}
/* Refresh reads as a button, not a link (in the girls' pages a plain .btn.soft drew as bare text). */
#new-version .btn {
  min-height: 0;
  padding: 3px 12px;
  font-size: 13px;
  color: var(--blueink);
  background: #fff;
  border: 1px solid currentColor;
  border-radius: 999px;
}
/* Grading policies, folded above her assignments (Tim, Oct 20): the arrow left of its title turns as it opens; one quiet
   line under it, aligned to the title's letters. */
#page>.grading-policies h3{display:flex;align-items:center;gap:2px;margin:0}
#page>.grading-policies .gp-toggle{all:unset;display:inline-flex;align-items:center;gap:6px;margin-left:-4px;cursor:pointer;font:inherit;color:inherit}
#page>.grading-policies .gp-toggle:focus-visible{outline:2px solid var(--blueink,#3d626d);outline-offset:3px;border-radius:6px}
#page>.grading-policies .gp-chevron{flex:0 0 auto;color:var(--muted);transition:transform .15s}
#page>.grading-policies.is-open .gp-chevron{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){#page>.grading-policies .gp-chevron{transition:none}}
#page>.grading-policies .gp-sub{margin:2px 0 0 20px;color:var(--muted);font-size:13.5px}
#page>.grading-policies .policy-row{margin-top:16px}
#page>.grading-policies .policy-row[hidden]{display:none}
#page>.grading-policies:not(.is-open){padding-top:16px;padding-bottom:16px}
/* Folded, it is a quiet line under the class bar, not a second card beside it (Tim, Oct 20: "can we make thise element not
   compete with the class 1 bar at top?"): no box, a smaller title, its line under it; open, its cards sit in the box as
   before. Its arrow stays at the page's edge, where the class bar's content starts. */
#page>.grading-policies:not(.is-open){margin:2px 0 0;padding:4px 2px 0;border-color:transparent;background:none}
#page>.grading-policies:not(.is-open) h3{font-size:1.02rem;color:#4c524b}
#page>.grading-policies:not(.is-open) .gp-sub{font-size:12.5px}
/* Her due time under its day in the Assignments table (Oct 20: "Tue, Oct 20, 8:00 AM" on one line ran into Progress; the
   table fits its columns, teacher-tables-fit). */
.assign-table .due-col .due-time{display:block;color:var(--muted);font-size:12px}
/* Assignment Types, a quiet fold at the page's foot, as Grading policies folds (Tim, Oct 20). */
#page>.type-key{margin:30px 0 8px;padding:4px 2px}
#page>.type-key h3{display:flex;align-items:center;margin:0;font:400 1.02rem/1.2 Georgia,serif;color:#4c524b}
#page>.type-key .gp-toggle{all:unset;display:inline-flex;align-items:center;gap:6px;margin-left:-4px;cursor:pointer;font:inherit;color:inherit}
#page>.type-key .gp-toggle:focus-visible{outline:2px solid var(--blueink,#3d626d);outline-offset:3px;border-radius:6px}
#page>.type-key .gp-chevron{flex:0 0 auto;color:var(--muted);transition:transform .15s}
#page>.type-key.is-open .gp-chevron{transform:rotate(90deg)}
#page>.type-key #type-key-body{margin:6px 0 0 20px}
#page>.type-key #type-key-body[hidden]{display:none}
/* Due's arrow when the rows simply run by due date: there, quieter than one she chose. */
.grades-sort .sort-default{color:var(--muted,#747b71);font-weight:400}

/* The next step in a window, beside what it points at (Tim, Oct 21: "this is pointing up when it is floating to the
   left? it doesnt seem translucent like the glass was at the top?"): the card's dark frosted glass and its diamond notch,
   which faces data-dir, so it reads as a tag on its target. A field sign sits at the box she fills ("↓ Write your
   example"); the footer's beside its button ("Publish it →", "Students get a notification ↓"). */
#dialog .next-sign{position:relative;margin:0 12px 0 auto;padding:.32em .8em;border-radius:.6em;background:rgba(22,28,25,.68);color:#fff;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.16);font:600 13.5px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(0,0,0,.16),0 12px 26px rgba(0,0,0,.26),0 26px 50px rgba(0,0,0,.16);animation:ae-sign-in .45s cubic-bezier(.2,.8,.2,1) both,ae-sign-bob 3.2s ease-in-out .45s infinite}
#dialog .next-sign:empty{display:none}
#dialog .next-sign::after{content:"";position:absolute;width:.62em;height:.62em;background:rgba(22,28,25,.68);border:1px solid rgba(255,255,255,.16)}
#dialog .next-sign[data-dir="right"]::after{right:-.36em;top:50%;transform:translateY(-50%) rotate(45deg);border-bottom-color:transparent;border-left-color:transparent}
#dialog .next-sign[data-dir="left"]::after{left:-.36em;top:50%;transform:translateY(-50%) rotate(45deg);border-top-color:transparent;border-right-color:transparent}
#dialog .next-sign[data-dir="down"]::after{left:50%;bottom:-.36em;margin-left:-.31em;transform:rotate(45deg);border-top-color:transparent;border-left-color:transparent}
#dialog .next-sign[data-dir="up"]::after{left:1.15em;top:-.36em;transform:rotate(45deg);border-bottom-color:transparent;border-right-color:transparent}
#dialog .next-sign.field-sign{display:block;width:fit-content;margin:10px 0 12px}
#dialog .next-sign.field-sign:empty{display:none}
/* A sign and the button it points at stay together (next-pair); a footer holding one wraps rather than pushing its
   first buttons off the window (375: Done, Save draft and Preview sat off the left edge), the pair on the right. */
#dialog .next-pair{display:inline-flex;align-items:center;gap:12px;margin-left:auto}
#dialog .next-pair>.next-sign{margin:0}
#dialog .sheet-actions:has(>.next-pair){flex-wrap:wrap;row-gap:10px}
#dialog .next-sign.field-sign[data-dir="down"]::after{left:1.15em;margin-left:0}
#dialog .ae-go .next-sign{margin:0 0 6px}
@keyframes ae-sign-in{from{opacity:0;translate:0 6px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes ae-sign-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#dialog .next-sign{animation:none}}

/* Pending (Shelly, Oct 20): send now, move or cancel, quiet links on one line. */
.pending-assignments .pending-col{white-space:nowrap;font-size:13px}
.pending-assignments .pending-col .link{font-size:13px}
#dialog .schedule-when{display:flex;flex-wrap:wrap;gap:10px 16px;margin:8px 0 4px}
#dialog .schedule-when label{display:grid;gap:4px;color:#4c524b;font-size:13px}

/* Her own reading's files (Oct 21: typed, attached, or both): those she has, each with a tick to keep it, then "+ Add a
   file" in the add actions' gold. */
#dialog .own-files{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:10px 0 0}
#dialog .own-files .own-file{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13.5px;color:var(--ink,#292d28)}
#dialog .own-add{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#8a7442;font-weight:600;font-size:14px}
#dialog .own-add small{font-weight:400}
#dialog .own-add:focus-within{outline:2px solid #b9974a;outline-offset:2px;border-radius:6px}
#dialog .own-picked:empty{display:none}
#dialog .own-picked{font-size:13px}

/* How long before it's due it goes out, under Day and Time (Tim, Oct 21); red once it's at or after the due time. */
#dialog .schedule-due{margin:8px 0 0;color:#4c524b;font-size:13px;line-height:1.35}
#dialog .schedule-due.is-late{color:#b42318;font-weight:600}
#dialog .schedule-due:empty{display:none}

/* Themes & Struggles (app.js themesStrugglesSection): when the analysis was made and its period, on the line with its
   Period and Regenerate; while Regenerate runs, three pulsing dots where the analysis lands (steady with reduced motion). */
.themes-struggles .insights-ai-head { align-items: center; }
.themes-struggles .themes-when { margin: 0; color: var(--muted, #6e776e); font-size: 13px; }
.themes-pending { display: flex; align-items: center; gap: 12px; padding: 22px 4px; color: var(--muted, #6e776e); font-size: 14px; }
.themes-dots { display: inline-flex; gap: 5px; padding: 10px 14px; border-radius: 16px; background: #f1ede2; }
.themes-dots i { width: 7px; height: 7px; border-radius: 50%; background: #9a8d6b; animation: themes-pulse 1.2s infinite ease-in-out; }
.themes-dots i:nth-child(2) { animation-delay: .15s; } .themes-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes themes-pulse { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .themes-dots i { animation: none; opacity: .7; } }
/* Themes & Struggles' history (every kept run, newest first) and its struggles as their own quiet section (Tim, Oct 22:
   "make the struggles section feel a little bit of its own section with like a tasteful red somehow characterizing"):
   the board's Put off red as a rule, its heading and a light wash, never a filled red block. */
.themes-history { margin: 6px 0 14px; font-size: 13px; }
.themes-history summary { cursor: pointer; color: var(--muted); }
.themes-history ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.themes-history button[aria-current="true"] { font-weight: 700; color: var(--ink); text-decoration: none; }
.themes-struggle-list { margin: 18px 0; padding: 12px 16px 6px; border-left: 3px solid var(--put-off); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--put-off) 6%, transparent); }
.themes-struggle-list h4 { margin-top: 0; color: var(--put-off); }
/* The plain line above a Saint's own words when her answer fell back to them (lib/saints-fallback.mjs): the app's voice,
   quieter than the Saint's bubble and outside it, so it reads as the app speaking and is never a sentence she stars. */
.saint-lead{margin:.7rem 0 .45rem;color:var(--muted,#6e776e);font:400 .95rem/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* A student excerpt on Course Analytics opens its root source (app.js sourceAttrs; Tim, Oct 22): it stays a quote, and
   reads as a link only under the pointer or keyboard focus, so a page of evidence doesn't turn into a page of links. */
.src-q{cursor:pointer}
.src-q:hover,.src-q:focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.src-q:focus-visible{outline:2px solid var(--blueink);outline-offset:2px}

/* Flags on Course Analytics (Tim, Oct 22): System Failings folds as he leaves it, arrow at the left like the other folding
   sections (Hidden Assignments); Safety Flags sits under it as its own card. */
.flags-fold>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.flags-fold>summary::-webkit-details-marker{display:none}
.flags-fold>summary::before{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.flags-fold[open]>summary::before{transform:rotate(45deg)}
.flags-fold>summary h2{margin:0}
.flags-fold[open]>summary{margin-bottom:12px}
.flags-fold+.safety-stats{margin-top:22px}
/* A struggle's own excerpts (each a link to the answer it came from): their rule in the section's red, not the gold. */
.themes-struggle-list blockquote { border-left-color: color-mix(in srgb, var(--put-off) 45%, transparent); }